bobbylite / bobbylite/hermes-admin-dashboard
Design and implement a modern Monitoring Section UI
- Lenguaje dominante
- TypeScript
- Estrellas
- 0
- Forks
- 0
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
## 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.
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Línea de trabajo
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.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react, typescript
- Área
- design, frontend, observability
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Estado de actividad
- Activo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100