Skip to content

feat(dashboard): KPI mini-charts and enhanced header layout (v1.20.0) - #78

Merged
DeibyGS merged 2 commits into
mainfrom
release/v1.20.0
Aug 23, 2026
Merged

DeibyGS merged 2 commits into
mainfrom
release/v1.20.0

Conversation

@DeibyGS

@DeibyGS DeibyGS commented Aug 23, 2026

Copy link
Copy Markdown
Owner

What does this PR do?

Adds interactive mini-charts to KPI cards (BarChart for Cost/block, AreaChart for Context) and enhances the header layout with uniform badge heights. Fixes context data propagation for accurate chart rendering.

Motivation

KPI cards previously showed flat progress bars, making it hard to visualize metric evolution over time. Users needed to see cost progression per block and context usage trends at a glance. The sidebar also duplicated Cost/block information now available in KPIs.

Changes

File Type Description
dashboard/src/components/TracePanel/KPICards.tsx ✨ added New KPI card component with recharts mini-charts
dashboard/src/components/Header.tsx ✏️ modified Compact navbar, uniform badge heights, model name display
dashboard/src/components/App.tsx ✏️ modified Block cost accumulation for OC, heavy context notification fix
dashboard/src/components/Tip.tsx ✏️ modified Grid stretching fix
dashboard/src/components/TracePanel/index.tsx ✏️ modified Remove duplicate CostTimeline from sidebar
src/db.ts ✏️ modified Add context_used/context_window to BlockCostEntry
src/routes/events.ts ✏️ modified Include context data in block_cost SSE event
src/watchers/opencode.ts ✏️ modified Add context data to lastEntry
src/watchers/claude-code.ts ✏️ modified Add context data to lastEntry

Verification

  • TSC: npx tsc --noEmit → 0 errors
  • Build: npx vite build → success
  • Dashboard: http://localhost:7337 loads correctly

Type of change

  • ✨ New feature
  • 🐛 Bug fix
  • 🎨 UI / Visual

Breaking changes

None.

Agent

OC — branch: release/v1.20.0

- Add interactive BarChart for Cost/block KPI showing cost evolution per block
- Add interactive AreaChart for Context KPI with 85% threshold reference line
- Update KPICard component to accept children prop for custom charts
- Fix header alignment with compact navbar and uniform badge heights
- Improve Heavy context notification to show actual token values
- Fix CC context_used formula to match official documentation
- Add OpenCode session-based context tracking via step-finish events
- Update README with new features (v1.20.0)
…te sidebar chart

- Add context_used and context_window to BlockCostEntry interface
- Include context data in block_cost SSE event payload
- Remove CostTimeline from sidebar (now in KPI cards)
- Fix Context chart not appearing due to missing context data
@DeibyGS
DeibyGS merged commit 83af081 into main Aug 23, 2026
8 checks passed
@DeibyGS
DeibyGS deleted the release/v1.20.0 branch August 23, 2026 19:01
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