diff --git a/docs/hermes_dashboard_roadmap.md b/docs/hermes_dashboard_roadmap.md new file mode 100644 index 0000000..58e9c92 --- /dev/null +++ b/docs/hermes_dashboard_roadmap.md @@ -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; + toolName?: string; + command?: string; + artifactUrl?: string; +} +export interface HermesRun { + id: string; + taskId: string; + startedAt: string; + endedAt?: string; + status: HermesTaskStatus; + logs: string[]; + metrics?: Record; + 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. \ No newline at end of file