feat(web): Redesign the usage page as a black and blue dashboard - #115
Merged
Merged
Conversation
Define the black and blue brand tokens, the edge-on deck logo, and the usage dashboard requirements with a coverage matrix.
Add a shared brand module with the palette, the edge-on deck logo, the favicon and the top bar. Rebuild /usage with masked numbers, KPI cards with sparklines and deltas, a line chart with a crosshair, a model donut, repo, outcome, harness and origin breakdowns, one range picker, filter chips, and a searchable table with CSV export. Escape bucket labels in SVG titles, ignore stale poll responses, keep search focus across polls, and compute the previous window in calendar days. Co-Authored-By: Claude <noreply@anthropic.com>
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The
/usagepage ofcodedeck uishowed raw numbers, a single table and unstyled controls. This rebuilds it as a black and blue analytics dashboard and adds the first CodeDeck brand assets.src/web/brand.ts: palette tokens, the edge-on deck logo as inline SVG, the favicon and a shared top bar with navigation. Home and Setup can adopt it later.16.8Mtokens,$1,865.42, one-decimal shares, the exact value intitle. Incomplete cost shows≥ $Xwith an "N unpriced" pill instead of a bare?.period,repo,model,agent,since,until,by)./hotkey, and RFC 4180 CSV export.Hardening found in review and fixed here:
<title>. A model id like<img src=x onerror=...>used to run script throughinnerHTML.Spec and tasks:
.specs/features/web-usage-redesign/. The static mock used as the visual reference stays local because it was built from real usage data.Out of scope: Home and Setup restyle, the repo grouping of worktree paths, a recent sessions widget, and daemon or API changes. The default range is still Today.
Testing
npx vitest run tests/usage-page.test.ts tests/usage-web.test.ts tests/web-brand.test.ts tests/ui-render.test.ts tests/web-cli.test.ts: 5 files, 98 tests passed.npx tsc --noEmitandnpm run buildpass.fetch, masking thresholds,≥prefix, delta rules, donut limit, loading on poll, query param ignored, unescaped title, stale response guard, focus restore, search order, fixed-ms DST windows, single-point sparkline). All 15 killed.