bobbylite / bobbylite/hermes-admin-dashboard

Design and implement a modern Monitoring Section UI

Open
#7 0 comments 0 reactions 0 assignees View on GitHub
enhancement priority: high
Dominant language
TypeScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

## Overview
Create a new 'Monitoring' section in the Hermes Admin Dashboard to provide real-time insights into agent activities and pipeline statuses.

## UI/UX Requirements
The design should move away from standard "admin" aesthetics toward a **high-end, modern flat UI** inspired by the design languages of Google and Apple, but with a more **playful, tactile feel**.

- **Style:** Clean, simplistic, and airy. Use ample whitespace. The UI must support **Dark Mode**, utilizing a vibrant, "popping" color palette for the data visualizations.
- **Color Palette:** Use a spectrum of cool, vibrant colors against the dark background—including **pinks, blues, greens, purples, reds, and oranges**—to ensure key metrics are visually striking.
- **Components:**
- **Dials/Gauges:** Use elegant, simplistic dials to represent system health, throughput, or success rates. These should feel 'premium'—smooth animations, thin, crisp lines, and high-contrast colors that pop.
- **Playful Elements:** Incorporate subtle micro-interactions, rounded corners, and perhaps small, stylized icons that give the dashboard a friendly personality without sacrificing professional clarity.
- **Typography:** High-quality, readable sans-serif fonts with clear hierarchy.
- **Dashboard Integration:** The section should feel cohesive with the existing '2026 flat' theme (neumorphic surfaces, pastel accents).

## Functional Requirements
- **Real-time Status:** Display active cron jobs and subagent status.
- **Live Metrics:** Provide live, real-time data about the Hermes Agent, including:
- **Live Tokens/Sec:** A prominent, high-visibility metric.
- **Success/Failure Rates:** Visualized via the colored dials.
- **Task Completion Times:** Breakdown of average vs. peak latency.
- **Interactive Elements:** Users should be able to click on dials or metrics to see detailed logs or jump to specific active tasks.

## Design Reference
Think 'Apple Watch' meets 'Google Material You'—functional, beautiful, and responsive. The goal is a dashboard that feels as satisfying to interact with as it is informative.

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue is to design and implement a new Monitoring section UI. Start by examining the existing dashboard structure and the '2026 flat' theme to understand the codebase. Look for existing components for dials/gauges and data visualization. Determine how real-time data is fetched and displayed. 'Done' means a fully integrated, responsive UI section with the specified visual style and interactive elements.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend, observability
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.