Create hermes_dashboard_roadmap.md
This commit is contained in:
parent
47c96d5db4
commit
62089a11cc
665
docs/hermes_dashboard_roadmap.md
Normal file
665
docs/hermes_dashboard_roadmap.md
Normal file
@ -0,0 +1,665 @@
|
||||
Perfect. Use this updated prompt for devn / Codex / Claude Code running inside your VM.
|
||||
|
||||
You are a Principal Fullstack Engineer + DevOps Architect.
|
||||
Repo:
|
||||
`~/repos/bytelyst-devops-tools`
|
||||
Task:
|
||||
Build a rich, production-grade web UI called **Hermes Mission Control** inside the `bytelyst-devops-tools` repo.
|
||||
Context:
|
||||
I am a solopreneur/founder running ByteLyst and planning to launch/manage 50+ products, apps, services, internal tools, automations, and AI agents. Hermes is my DevOps/automation/agent execution brain. I need a dashboard that clearly shows what Hermes is working on, what it completed, what failed, what is blocked, what needs my attention, and what should happen next.
|
||||
This should not be a toy logs page. Build it like an AI DevOps command center for a solo founder managing many products.
|
||||
Before coding:
|
||||
1. `cd ~/repos/bytelyst-devops-tools`
|
||||
2. Inspect the repo structure.
|
||||
3. Identify frontend/backend framework, package manager, routes, styling, existing dashboard/admin patterns, auth, API conventions, test setup, lint/build commands.
|
||||
4. Reuse existing architecture wherever possible.
|
||||
5. Do not rewrite the whole repo.
|
||||
6. Commit incrementally to `origin main` unless repo policy says otherwise.
|
||||
7. Update or create a roadmap/checklist file tracking progress.
|
||||
Primary route:
|
||||
Create a Hermes dashboard entry point:
|
||||
- `/hermes`
|
||||
- or the closest matching route based on existing app structure.
|
||||
Dashboard name:
|
||||
**Hermes Mission Control**
|
||||
Core dashboard goals:
|
||||
- Show live Hermes status.
|
||||
- Show active work.
|
||||
- Show completed work.
|
||||
- Show failed/stuck/blocked work.
|
||||
- Show historical activity.
|
||||
- Show product/app/service-level progress.
|
||||
- Show what needs founder attention.
|
||||
- Show next best actions.
|
||||
- Make Hermes accountable and observable.
|
||||
Build these sections/pages.
|
||||
---
|
||||
# 1. `/hermes` — Executive Mission Control
|
||||
Show top-level cards:
|
||||
- Hermes status: Running / Idle / Degraded / Error
|
||||
- Active tasks
|
||||
- Completed today
|
||||
- Completed this week
|
||||
- Failed tasks
|
||||
- Blocked tasks
|
||||
- Average task duration
|
||||
- Success rate
|
||||
- Products touched recently
|
||||
- Tasks needing founder attention
|
||||
- Upcoming scheduled jobs
|
||||
- Last Hermes action
|
||||
- Next recommended action
|
||||
Add major dashboard panels:
|
||||
## A. Active Missions
|
||||
Show what Hermes is currently doing:
|
||||
- task title
|
||||
- product/app
|
||||
- status
|
||||
- progress %
|
||||
- current step
|
||||
- started time
|
||||
- estimated remaining placeholder
|
||||
- assigned agent/tool
|
||||
- priority
|
||||
## B. Founder Attention Queue
|
||||
Show items where I must act:
|
||||
- approval needed
|
||||
- missing credentials
|
||||
- failed deployment
|
||||
- failing tests
|
||||
- blocked by unclear requirement
|
||||
- cost/risk warning
|
||||
- expired token/API key
|
||||
- product inactive too long
|
||||
- repeated failures
|
||||
## C. What Hermes Did For Me
|
||||
Summaries:
|
||||
- today
|
||||
- this week
|
||||
- last 30 days
|
||||
Examples:
|
||||
- fixed bugs
|
||||
- created PRs
|
||||
- deployed services
|
||||
- ran audits
|
||||
- updated docs
|
||||
- checked health
|
||||
- investigated failures
|
||||
- generated reports
|
||||
## D. Product Health Snapshot
|
||||
For 50+ products/apps/services:
|
||||
- product name
|
||||
- health score
|
||||
- latest activity
|
||||
- open tasks
|
||||
- failed tasks
|
||||
- last deployment
|
||||
- last commit
|
||||
- production status
|
||||
- attention needed badge
|
||||
## E. Next Best Actions
|
||||
Split into:
|
||||
- “Hermes can do automatically”
|
||||
- “Needs Saravana’s decision”
|
||||
---
|
||||
# 2. `/hermes/tasks` — Task Ledger
|
||||
Create a searchable/filterable task table.
|
||||
Columns:
|
||||
- Task
|
||||
- Product
|
||||
- Status
|
||||
- Priority
|
||||
- Type
|
||||
- Source trigger
|
||||
- Assigned agent
|
||||
- Created
|
||||
- Started
|
||||
- Completed
|
||||
- Duration
|
||||
- Retry count
|
||||
- Last action
|
||||
- Next action
|
||||
Statuses:
|
||||
- queued
|
||||
- running
|
||||
- blocked
|
||||
- completed
|
||||
- failed
|
||||
- skipped
|
||||
- cancelled
|
||||
Priorities:
|
||||
- P0
|
||||
- P1
|
||||
- P2
|
||||
- P3
|
||||
Task types:
|
||||
- build
|
||||
- deploy
|
||||
- bugfix
|
||||
- monitoring
|
||||
- audit
|
||||
- refactor
|
||||
- documentation
|
||||
- research
|
||||
- security
|
||||
- cost-optimization
|
||||
- release
|
||||
- maintenance
|
||||
- product-planning
|
||||
Source triggers:
|
||||
- manual
|
||||
- cron
|
||||
- GitHub
|
||||
- monitoring alert
|
||||
- email
|
||||
- CLI
|
||||
- webhook
|
||||
- local agent
|
||||
- Hermes planner
|
||||
Features:
|
||||
- Search
|
||||
- Status filter
|
||||
- Product filter
|
||||
- Priority filter
|
||||
- Date filter
|
||||
- Sort
|
||||
- Pagination
|
||||
- Expandable row details
|
||||
- Export JSON button if simple to implement
|
||||
---
|
||||
# 3. `/hermes/tasks/[id]` — Task Detail
|
||||
For each task show:
|
||||
## Summary
|
||||
- title
|
||||
- description
|
||||
- product
|
||||
- status
|
||||
- priority
|
||||
- owner
|
||||
- current step
|
||||
- result
|
||||
- blocker reason
|
||||
- final output
|
||||
## Timeline
|
||||
Chronological events:
|
||||
- created
|
||||
- planned
|
||||
- tool selected
|
||||
- command executed
|
||||
- file changed
|
||||
- test run
|
||||
- error detected
|
||||
- retry attempted
|
||||
- PR created
|
||||
- deployment completed
|
||||
- task completed
|
||||
## Execution Details
|
||||
Show:
|
||||
- commands executed
|
||||
- tools called
|
||||
- files modified
|
||||
- Git branch
|
||||
- commit SHA
|
||||
- PR URL
|
||||
- deployment URL
|
||||
- test result
|
||||
- logs
|
||||
- error stack/message
|
||||
- retry history
|
||||
- artifacts generated
|
||||
## Hermes Learning
|
||||
Add section:
|
||||
- lesson learned
|
||||
- suggested memory update
|
||||
- prevention for next time
|
||||
- recurring issue detection
|
||||
---
|
||||
# 4. `/hermes/products` — 50-Product Portfolio View
|
||||
Create product registry dashboard.
|
||||
Each product card/table row should show:
|
||||
- name
|
||||
- slug
|
||||
- category
|
||||
- priority
|
||||
- health score
|
||||
- status
|
||||
- repo URL
|
||||
- production URL
|
||||
- staging URL
|
||||
- last Hermes activity
|
||||
- last commit placeholder
|
||||
- last deployment placeholder
|
||||
- active tasks
|
||||
- completed tasks
|
||||
- failed tasks
|
||||
- blocked tasks
|
||||
- tags
|
||||
- needs attention
|
||||
Categories:
|
||||
- SaaS
|
||||
- AI app
|
||||
- mobile app
|
||||
- internal tool
|
||||
- website
|
||||
- API
|
||||
- automation
|
||||
- browser extension
|
||||
- data pipeline
|
||||
- DevOps tool
|
||||
Add views:
|
||||
- All products
|
||||
- High priority
|
||||
- Needs attention
|
||||
- No recent activity
|
||||
- Repeated failures
|
||||
- Recently shipped
|
||||
---
|
||||
# 5. `/hermes/history` — Historical View
|
||||
Show historical analytics:
|
||||
- completed tasks over time
|
||||
- failed tasks over time
|
||||
- blocked tasks over time
|
||||
- most active products
|
||||
- most neglected products
|
||||
- common failure categories
|
||||
- average task duration trend
|
||||
- weekly progress summary
|
||||
- monthly progress summary
|
||||
Use charts if the repo already has a chart library.
|
||||
If no chart library exists, implement simple clean visual bars/cards first.
|
||||
---
|
||||
# 6. `/hermes/agents` — Agent & Tool Observability
|
||||
Show Hermes ecosystem health:
|
||||
- Hermes core
|
||||
- OpenClaw integration placeholder
|
||||
- GitHub integration
|
||||
- local VM runner
|
||||
- CLI runner
|
||||
- scheduler/cron
|
||||
- deployment tools
|
||||
- monitoring tools
|
||||
- notification tools
|
||||
- model/LLM provider placeholder
|
||||
- secrets/config health
|
||||
For each tool/agent show:
|
||||
- status
|
||||
- last success
|
||||
- last failure
|
||||
- calls today
|
||||
- failure rate
|
||||
- average latency
|
||||
- config issue flag
|
||||
---
|
||||
# 7. `/hermes/settings` — Config
|
||||
Create clean settings UI for:
|
||||
- products registry
|
||||
- task categories
|
||||
- priority rules
|
||||
- notification rules
|
||||
- auto-retry rules
|
||||
- approval thresholds
|
||||
- retention period
|
||||
- import/export JSON config
|
||||
- demo/mock data toggle
|
||||
No need to build real persistence if backend is not present yet. Use mock service/data layer first.
|
||||
---
|
||||
# Data model
|
||||
Create TypeScript types/interfaces in a clean location such as:
|
||||
- `src/types/hermes.ts`
|
||||
- `types/hermes.ts`
|
||||
- or existing repo convention
|
||||
Use these models:
|
||||
```ts
|
||||
export type HermesStatus = "running" | "idle" | "degraded" | "error";
|
||||
export type HermesTaskStatus =
|
||||
| "queued"
|
||||
| "running"
|
||||
| "blocked"
|
||||
| "completed"
|
||||
| "failed"
|
||||
| "skipped"
|
||||
| "cancelled";
|
||||
export type HermesPriority = "P0" | "P1" | "P2" | "P3";
|
||||
export type HermesTaskType =
|
||||
| "build"
|
||||
| "deploy"
|
||||
| "bugfix"
|
||||
| "monitoring"
|
||||
| "audit"
|
||||
| "refactor"
|
||||
| "documentation"
|
||||
| "research"
|
||||
| "security"
|
||||
| "cost-optimization"
|
||||
| "release"
|
||||
| "maintenance"
|
||||
| "product-planning";
|
||||
export interface HermesProduct {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
category: string;
|
||||
repoUrl?: string;
|
||||
productionUrl?: string;
|
||||
stagingUrl?: string;
|
||||
owner: string;
|
||||
priority: HermesPriority;
|
||||
status: "active" | "paused" | "maintenance" | "archived" | "idea";
|
||||
healthScore: number;
|
||||
tags: string[];
|
||||
lastHermesActivityAt?: string;
|
||||
lastDeploymentAt?: string;
|
||||
lastCommitAt?: string;
|
||||
needsAttention: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
export interface HermesTask {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
productId: string;
|
||||
status: HermesTaskStatus;
|
||||
priority: HermesPriority;
|
||||
type: HermesTaskType;
|
||||
source:
|
||||
| "manual"
|
||||
| "cron"
|
||||
| "github"
|
||||
| "monitoring-alert"
|
||||
| "email"
|
||||
| "cli"
|
||||
| "webhook"
|
||||
| "local-agent"
|
||||
| "hermes-planner";
|
||||
createdAt: string;
|
||||
startedAt?: string;
|
||||
completedAt?: string;
|
||||
durationMs?: number;
|
||||
retryCount: number;
|
||||
assignedAgent: string;
|
||||
tags: string[];
|
||||
progressPercent: number;
|
||||
currentStep?: string;
|
||||
lastAction?: string;
|
||||
nextAction?: string;
|
||||
blockerReason?: string;
|
||||
summary?: string;
|
||||
result?: string;
|
||||
error?: string;
|
||||
}
|
||||
export interface HermesEvent {
|
||||
id: string;
|
||||
taskId: string;
|
||||
timestamp: string;
|
||||
level: "debug" | "info" | "warn" | "error" | "success";
|
||||
eventType:
|
||||
| "created"
|
||||
| "planned"
|
||||
| "started"
|
||||
| "tool-called"
|
||||
| "command-executed"
|
||||
| "file-changed"
|
||||
| "test-run"
|
||||
| "error"
|
||||
| "retry"
|
||||
| "blocked"
|
||||
| "completed"
|
||||
| "deployment"
|
||||
| "pr-created"
|
||||
| "memory-suggested";
|
||||
message: string;
|
||||
metadata?: Record<string, unknown>;
|
||||
toolName?: string;
|
||||
command?: string;
|
||||
artifactUrl?: string;
|
||||
}
|
||||
export interface HermesRun {
|
||||
id: string;
|
||||
taskId: string;
|
||||
startedAt: string;
|
||||
endedAt?: string;
|
||||
status: HermesTaskStatus;
|
||||
logs: string[];
|
||||
metrics?: Record<string, number>;
|
||||
commitSha?: string;
|
||||
branchName?: string;
|
||||
prUrl?: string;
|
||||
deploymentUrl?: string;
|
||||
}
|
||||
export interface HermesAgentStatus {
|
||||
id: string;
|
||||
name: string;
|
||||
type: "agent" | "tool" | "integration" | "runner";
|
||||
status: "healthy" | "degraded" | "offline" | "unknown";
|
||||
lastSuccessAt?: string;
|
||||
lastFailureAt?: string;
|
||||
callsToday: number;
|
||||
failureRate: number;
|
||||
averageLatencyMs?: number;
|
||||
configIssue?: string;
|
||||
}
|
||||
export interface HermesOverview {
|
||||
status: HermesStatus;
|
||||
activeTasks: number;
|
||||
completedToday: number;
|
||||
completedThisWeek: number;
|
||||
failedTasks: number;
|
||||
blockedTasks: number;
|
||||
averageDurationMs: number;
|
||||
successRate: number;
|
||||
productsTouchedRecently: number;
|
||||
founderAttentionCount: number;
|
||||
}
|
||||
|
||||
⸻
|
||||
|
||||
Service layer
|
||||
|
||||
Create a clean data abstraction, for example:
|
||||
|
||||
getHermesOverview()
|
||||
getHermesTasks(filters)
|
||||
getHermesTaskById(id)
|
||||
getHermesTaskEvents(taskId)
|
||||
getHermesProducts()
|
||||
getHermesHistory()
|
||||
getHermesAgents()
|
||||
getHermesSettings()
|
||||
|
||||
Initially back this with seed/mock data.
|
||||
|
||||
Important:
|
||||
Do not put mock data directly inside UI components.
|
||||
Use files like:
|
||||
|
||||
* src/lib/hermes/mock-data.ts
|
||||
* src/lib/hermes/service.ts
|
||||
* or equivalent repo convention.
|
||||
|
||||
Later this should be swappable with:
|
||||
|
||||
* local JSON logs
|
||||
* SQLite
|
||||
* Supabase
|
||||
* Postgres
|
||||
* API endpoint
|
||||
* Hermes daemon telemetry
|
||||
|
||||
⸻
|
||||
|
||||
UI requirements
|
||||
|
||||
Make it beautiful and professional.
|
||||
|
||||
Use:
|
||||
|
||||
* cards
|
||||
* tables
|
||||
* tabs
|
||||
* badges
|
||||
* filters
|
||||
* progress bars
|
||||
* timeline
|
||||
* charts or visual bars
|
||||
* empty states
|
||||
* loading states
|
||||
* error states
|
||||
* responsive layout
|
||||
|
||||
Style:
|
||||
|
||||
* modern
|
||||
* dark-mode friendly
|
||||
* DevOps command-center feel
|
||||
* readable for founder/executive view
|
||||
* not cluttered
|
||||
* clear status colors
|
||||
* polished spacing and typography
|
||||
|
||||
Suggested components:
|
||||
|
||||
* HermesStatusCard
|
||||
* MetricCard
|
||||
* ActiveTasksPanel
|
||||
* FounderAttentionQueue
|
||||
* ProductHealthGrid
|
||||
* TaskStatusBadge
|
||||
* PriorityBadge
|
||||
* TaskTimeline
|
||||
* AgentStatusPanel
|
||||
* HistoricalActivityChart
|
||||
* FailureCategoryChart
|
||||
* ProductActivityTable
|
||||
* FilterBar
|
||||
* EmptyState
|
||||
* ErrorState
|
||||
* LoadingSkeleton
|
||||
|
||||
⸻
|
||||
|
||||
Founder-specific intelligence
|
||||
|
||||
Add computed insights:
|
||||
|
||||
Neglected products
|
||||
|
||||
Products with no Hermes activity in 14+ days.
|
||||
|
||||
Repeated failure products
|
||||
|
||||
Products with 3+ failed tasks recently.
|
||||
|
||||
Attention needed
|
||||
|
||||
Tasks blocked by:
|
||||
|
||||
* user approval
|
||||
* missing credentials
|
||||
* failing tests
|
||||
* deployment failure
|
||||
* high cost risk
|
||||
* unclear requirements
|
||||
|
||||
Momentum score
|
||||
|
||||
Simple calculated product score using:
|
||||
|
||||
* recent completed tasks
|
||||
* active tasks
|
||||
* failed tasks
|
||||
* last activity age
|
||||
* priority
|
||||
|
||||
Weekly digest summary
|
||||
|
||||
Display:
|
||||
|
||||
* shipped this week
|
||||
* failed this week
|
||||
* blocked this week
|
||||
* products advanced
|
||||
* recommended next actions
|
||||
|
||||
⸻
|
||||
|
||||
README update
|
||||
|
||||
Update README or create docs/hermes-dashboard.md.
|
||||
|
||||
Document:
|
||||
|
||||
* routes added
|
||||
* how to run
|
||||
* data model
|
||||
* mock data location
|
||||
* service abstraction
|
||||
* how to connect real Hermes telemetry later
|
||||
* future integration plan
|
||||
|
||||
Include real telemetry integration plan:
|
||||
|
||||
1. Hermes writes task events as JSONL.
|
||||
2. Dashboard service ingests JSONL.
|
||||
3. Store in SQLite/Postgres.
|
||||
4. Add API endpoints.
|
||||
5. Add websocket/SSE live updates.
|
||||
6. Add GitHub/CI/CD/deployment integrations.
|
||||
7. Add notifications.
|
||||
|
||||
⸻
|
||||
|
||||
Quality bar
|
||||
|
||||
Before final response:
|
||||
|
||||
* run install if needed
|
||||
* run lint
|
||||
* run typecheck
|
||||
* run tests if available
|
||||
* run build
|
||||
* fix all issues
|
||||
* verify /hermes renders
|
||||
* verify all new routes work
|
||||
* verify no console errors
|
||||
* verify responsive layout
|
||||
* verify mock data loads
|
||||
|
||||
⸻
|
||||
|
||||
Git workflow
|
||||
|
||||
Commit incrementally:
|
||||
|
||||
1. feat: add Hermes data model and mock service
|
||||
2. feat: add Hermes mission control dashboard
|
||||
3. feat: add Hermes task ledger and task detail views
|
||||
4. feat: add Hermes product portfolio and history views
|
||||
5. feat: add Hermes agents and settings views
|
||||
6. docs: document Hermes dashboard
|
||||
|
||||
Push to origin main.
|
||||
|
||||
⸻
|
||||
|
||||
Final response format
|
||||
|
||||
When done, report:
|
||||
|
||||
* Summary of what was built
|
||||
* Routes added
|
||||
* Key files changed
|
||||
* How to run locally
|
||||
* What mock data exists
|
||||
* How to connect real Hermes data
|
||||
* Tests/build/lint status
|
||||
* Any known gaps
|
||||
|
||||
Use this as the shorter direct command too:
|
||||
```bash
|
||||
cd ~/repos/bytelyst-devops-tools
|
||||
|
||||
Then paste:
|
||||
|
||||
Build Hermes Mission Control as described above. Inspect existing architecture first, reuse repo conventions, implement with clean TypeScript, mock service layer, rich dashboard UI, docs, lint/build verification, and incremental commits to origin main.
|
||||
Loading…
Reference in New Issue
Block a user