Skip to content

feat(dashboard): redesign overview page#105

Merged
carlosatta merged 14 commits into
developfrom
feat/overview-redesign
Jun 13, 2026
Merged

feat(dashboard): redesign overview page#105
carlosatta merged 14 commits into
developfrom
feat/overview-redesign

Conversation

@carlosatta

Copy link
Copy Markdown
Contributor

Summary

  • Replace broken PieChart (rendered blank due to 0-cost models + paddingAngle) with a horizontal BarChart — filtered to cost > 0, sorted by cost desc, capped at top 8
  • Fix React hooks-before-early-return violation (moved all useMemo calls above the loading guard)
  • Period selector redesigned as a segmented control (reuses existing .theme-selector / .theme-btn CSS)
  • Chart title is now dynamic: "Cost per Day", "Cost per Week", "Cost over Time" based on selected period
  • Token aggregate strip below stats grid: Input / Output / Cached token totals for the period
  • Total Calls card shows routing · completion split instead of "X succeeded"
  • Calls by Model table: new Errors column (red when > 0), sorted by calls descending, uses .table-wrap + global CSS
  • Theme-aware SVG tick colors via useTheme() + matchMedia — correct in both dark and light mode
  • New icons: TrendingUp (Success Rate), Boxes (Models), FolderOpen (Projects)

Test plan

  • npm run typecheck --workspace=packages/dashboard passes
  • npm test --workspace=packages/dashboard passes (26 tests)
  • Dark mode: bar chart renders, tick colors are light gray, dynamic title works
  • Light mode: tick colors are darker slate, segmented control renders correctly
  • Switching period updates chart title and refreshes data

🤖 Generated with Claude Code

carlosatta and others added 14 commits March 27, 2026 18:56
fix: cors sse, body limit, model prices, cheapest gap, limit trace, score precision
#66)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…api (#71)

* docs(config): set 0.2.0 as default docusaurus version (#70)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(openai): strip input field before forwarding to chat completions api

the /v1/responses handler was copying input to messages but never
deleting body.input. the field leaked into the upstream request and
caused 400 unknown parameter on every gpt-5.2 call.
added a safety-net strip in normalizeForModel and a regression test.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
enables rebuilding the docker image for hotfix releases that don't
bump the version (no changeset), where the release workflow skips docker.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…nges (#73)

- Add lastPingedVersion to TelemetryConfig to track which version last pinged
- On startup, fire 'install' if lastPingedVersion is absent, 'upgrade' if it differs
- Preserve lastPingedVersion when toggling telemetry via the settings API
- Add console.log for ping result to aid debugging
- Add 5 unit tests covering all startup telemetry scenarios

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace broken PieChart with horizontal BarChart (filters cost>0, sorted)
- Fix React hooks-before-early-return violation
- Add segmented period selector using existing theme-selector CSS
- Dynamic chart title that reflects the selected period
- Token aggregate strip (input/output/cached) below stats grid
- Routing vs completion split in Total Calls sub-text
- Errors column in Calls by Model table, sorted by calls desc
- Theme-aware SVG tick colors via useTheme + matchMedia
- Distinct icons: TrendingUp, Boxes, FolderOpen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add key={period} to both ResponsiveContainers so Recharts remounts
when the period changes, ensuring the charts update with new data.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The API only returns dates with actual usage, causing Recharts to
interpolate across multi-day gaps and show a misleading smooth curve.
Now we expand the timeline to include every day in the range, filling
missing dates with cost=0 so the chart accurately reflects inactivity.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Backend: timeline was built from all records instead of the period-
filtered set, so the chart never changed when switching periods.
Now uses `filtered` so each period shows its own timeline.

Frontend: handle single-data-point case (e.g. "daily" = today only)
by showing a summary message instead of an empty AreaChart.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Show 24 hourly bars (00:00–23:00) when the daily period is selected,
instead of a single data point with a "Not enough data" message.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Weekly and monthly charts were showing identical data when all activity
fell within the current week. Now the gap-fill starts from the period
boundary (Monday for weekly, 1st of month for monthly) so the two views
are always visually distinct.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Resolves high-severity esbuild CVEs (GHSA-gv7w-rqvm-qjhr, GHSA-g7r4-m6w7-qqqr)
and moderate react-router open redirect (GHSA-2j2x-hqr9-3h42) flagged by npm audit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@carlosatta carlosatta merged commit a25d4ae into develop Jun 13, 2026
2 checks passed
@carlosatta carlosatta deleted the feat/overview-redesign branch June 13, 2026 08:10
@carlosatta carlosatta added the release/0.3.0 Included in release 0.3.0 label Jul 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release/0.3.0 Included in release 0.3.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant