feat(dashboard): layout v2 — Hero+Trend row, Provider→Context stack, multi-provider context - #29
Merged
Merged
Conversation
added 2 commits
July 5, 2026 07:55
…multi-provider context Reorganize the main dashboard bento (non-screenshot view) for a clearer top-down read: - Hero and Trend Monitor now share the top row at 3:3 (Trend promoted up from the bottom) so the summary and its time series read together. - Identity (StatsPanel) becomes a left rail that spans two rows when a context source exists, so Provider Breakdown stacks directly above the Context Breakdown (cols 3-6) — "which providers → their context" reads vertically without a caption. - Activity Heatmap, onboarding, then Data Details span full width below. - FadeIn delays resequenced to the new visual order. ContextCard now renders one panel per context-capable provider (claude and codex are the only sources with a context breakdown), largest usage first, side by side — instead of only the single top provider. Deduped by source, immutably. Providers without context data still appear only in the provider breakdown. Falls back to a single full-width panel when one qualifies. screenshotMode (share card) is intentionally unchanged. ui-hardcode baseline refreshed for ContextCard's regex false-positive (a `>` operator read as JSX text); count unchanged.
…Codex QA) Codex QA gate (PR #29) surfaced two items: - Accuracy (Fix): with the standalone ContextCard now showing every context-capable provider, the ProviderBreakdownCard drill-down still rendered its own inline ContextBreakdownPanel on expand — duplicating the panel (and refetching getUsageCategoryBreakdown) for the same source. Add a `showInlineContext` prop (default true, so screenshotMode and other callers are unchanged) and pass `false` from the main view. The drill-down keeps its per-model detail; context now lives only in ContextCard. Verified via Playwright: expanding a provider adds 0 context panels (total stays 2). - Handoff (Risk): no coverage for the new behavior. Add ContextCard.test.jsx (per-source dedup, usage-desc order, non-context exclusion, single vs multi-column, null render) and layout-v2 assertions to dashboard-layout-adjustments.test.js (col-span-3 top row, row-span-2 rail, showInlineContext suppression).
4 tasks
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
Reorganize the main dashboard bento (non-screenshot view) for a clearer top-down read, per an interactive mockup review.
ContextCardnow renders one panel per context-capable provider (only claude and codex have a context breakdown), largest usage first, side by side — instead of only the single top provider. Deduped by source, immutably. Providers without context data (gemini, copilot, …) still appear only in the provider breakdown. Falls back to a single full-width panel when one qualifies.Builds on #28 (plain hero readout). Mockup used for sign-off before coding.
Test plan
npm run ci:local— green (build +node --test+ all validators)>operator read as JSX text); rawText count unchanged (168)col-span-3, Trendcol-span-3, Identitycol-span-2 row-span-2rail, Providercol-span-4, Contextcol-span-4with 2 panels (Codex, Claude), Heatmapcol-span-6, onboardingcol-span-6:17680LaunchAgent to verify live