Skip to content

feat(web): local React/Recharts dashboard (codeburn web)#531

Merged
iamtoruk merged 1 commit into
mainfrom
feat/web-dashboard
Jun 20, 2026
Merged

feat(web): local React/Recharts dashboard (codeburn web)#531
iamtoruk merged 1 commit into
mainfrom
feat/web-dashboard

Conversation

@iamtoruk

Copy link
Copy Markdown
Member

What

Adds a local web dashboard served by codeburn web: a Vite + React 19 + Tailwind v4 + Recharts SPA (dash/) plus a small local server that serves the built UI and a /api/usage endpoint backed by the existing menubar aggregation. Everything is computed and served on the local machine. No account, nothing uploaded.

UI

  • Midnight theme with CodeBurn's orange chart ramp.
  • Hero total cost, a stacked-by-model daily bar chart with a custom tooltip and hover-dim, metric cards (cost / tokens / calls / sessions / cache hit / one-shot), by-tool and by-activity bar lists, and top-projects and tools tables.
  • Period tabs (today / week / 30 days / month / all) and a provider filter.
  • react-query with skeleton loading states.

How it is wired

  • dash/ is a standalone Vite app. npm run build:dash builds it into dist/dash, which ships via the package files and is served at runtime. A missing build falls back to a help message.
  • codeburn web [--period --provider --from --to --port --no-open] starts the server (default port 4747, falls back to a free port if taken) and opens the browser. Static assets come from dist/dash; /api/usage re-aggregates per request via buildMenubarPayloadForRange.
  • The static handler is path-traversal guarded; the CLI is EPIPE-safe.

Verify

npm run build:dash     # build the SPA (also the last step of npm run build)
npm run dev -- web     # serve and open the browser

Checked locally: serves the SPA shell and assets (200) and /api/usage returns live data for the current month (cost, calls, 8 tools, 38 daily entries each with per-model breakdown for the chart). Full suite 1239 green, main project tsc clean.

Notes

  • The JS bundle is ~625 kB (Recharts). Fine for a local-only dashboard; can be code-split later.
  • npm run build now runs build:dash as its final step (installs dash deps + Vite build).

Add a Vite + React 19 + Tailwind v4 + Recharts SPA (dash/) and a 'web'
command that serves the built UI plus a local /api/usage endpoint backed
by the existing menubar aggregation. Midnight theme with CodeBurn's
orange chart ramp: hero cost, a stacked-by-model daily bar chart with a
custom tooltip and hover-dim, metric cards, by-tool and by-activity bar
lists, and top-projects and tools tables. Period and provider filters,
react-query with skeleton loading. Stays 100% local.

build:dash builds the SPA into dist/dash (shipped via package files,
served at runtime); a missing build falls back to a helpful message.
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