Skip to content

feat: gstack dashboard — UX visualizer for sprint pipeline & analytics#477

Open
HMAKT99 wants to merge 2 commits intogarrytan:mainfrom
HMAKT99:arun/dashboard-ui
Open

feat: gstack dashboard — UX visualizer for sprint pipeline & analytics#477
HMAKT99 wants to merge 2 commits intogarrytan:mainfrom
HMAKT99:arun/dashboard-ui

Conversation

@HMAKT99
Copy link
Contributor

@HMAKT99 HMAKT99 commented Mar 25, 2026

Summary

  • New dashboard/ module — self-contained Bun HTTP server + single-page app that visualizes all gstack data sources in a dark/light themed web dashboard
  • 8 dashboard views: Overview (metrics + pipeline), Sprint Pipeline, QA Reports (health rings + severity breakdown), Performance (Core Web Vitals gauges), Canary Monitor (alerts + page health), Design Review (radar chart + scores), Analytics (usage/success/duration charts), Browser Sessions (console/network/dialog logs), Eureka Log
  • 14 JSON API endpoints reading from .gstack/ reports, ~/.gstack/analytics/, browse daemon state, and git info
  • Dark + Light theme with toggle button, localStorage persistence, and theme-aware SVG charts
  • Stage Mode (/?mode=stage) — projector-optimized presentation view for live gstack demos with animated pipeline, big counter metrics, live activity feed, elapsed clock, and 5-second polling
  • Zero dependencies — vanilla HTML/CSS/JS, SVG-based charts, follows the cookie-picker-ui.ts self-contained pattern
  • Launch with bun run dashboard

Stage Mode

Presentation view built for projecting gstack during live demos and meetups:

  • Full-screen layout — no sidebar, no chrome, just content
  • Giant animated sprint pipeline with pulse/glow effects on active stages
  • 56px counter wall: Skill Runs, Success Rate, Reports, Eureka Moments
  • Live activity feed with slide-in animations
  • Top skills chart with color-coded bars
  • Elapsed time clock (MM:SS)
  • 5-second polling (6x faster than normal mode)
  • Access: bun run dashboard/?mode=stage or click "Stage" button

Files changed

File Lines Purpose
dashboard/data.ts 464 Data access layer — reads all .gstack/ and ~/.gstack/ data sources
dashboard/server.ts 157 Bun HTTP server with 14 API routes + HTML serving
dashboard/ui.ts 2177 Complete SPA — HTML/CSS/JS with dark/light themes, SVG charts, stage mode
package.json +1 Added dashboard script

Test plan

  • Run bun run dashboard — verify server starts and prints URL
  • Open dashboard in browser — verify Overview loads with metrics and pipeline
  • Click through all 8 views — verify each renders correctly
  • Toggle dark/light theme — verify all views update including SVG charts
  • Refresh page — verify theme preference persists
  • Navigate to /?mode=stage — verify stage mode renders with pipeline, metrics, feed
  • Verify stage mode elapsed clock ticks
  • Verify stage mode polls every 5 seconds (check Network tab)
  • Test with no data (empty .gstack/) — verify empty states show gracefully
  • Test with sample data in .gstack/qa-reports/, benchmark-reports/, etc.
  • Verify bun test still passes (no existing tests affected)

🤖 Generated with Claude Code

HMAKT99 and others added 2 commits March 25, 2026 09:45
…reports, and analytics

Self-contained Bun HTTP server + SPA dashboard that reads all gstack data sources
and provides visual insight into the sprint workflow. Dark/light theme toggle with
localStorage persistence. SVG-based charts, no external dependencies.

8 views: Overview, Pipeline, QA Reports, Performance, Canary Monitor, Design Review,
Analytics, Browser Sessions, Eureka Log. 14 API endpoints serving real-time data from
.gstack/ reports, ~/.gstack/analytics/, and browse daemon state.

Launch with: bun run dashboard

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds ?mode=stage URL parameter that switches the dashboard to a
projector-optimized view for live gstack demos:

- Large animated sprint pipeline with pulse/glow on active stages
- Big counter metrics (56px font): skill runs, success rate, reports, eureka
- Live activity feed with slide-in animations and 5-second polling
- Top skills bar chart with color-coded fills
- Elapsed time clock
- No sidebar or chrome — full-screen content
- "Stage" button in normal dashboard header for quick access
- Works with both dark and light themes

Access via: bun run dashboard, then click "Stage" or go to /?mode=stage

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant