bobbylite / bobbylite/hermes-admin-dashboard

Design and implement a modern Monitoring Section UI

Abierto
#7 0 comentarios 0 reacciones 0 asignados Ver en GitHub
enhancement priority: high
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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.