feat(dashboard): Hero + Bento layout restructure (#18 PR-B) - #20
Merged
Conversation
added 3 commits
July 4, 2026 18:22
…reakdownCard Behavior-preserving extraction along the existing prop seam, prep for the Hero+Bento layout (#18 PR-B). No state lifted to DashboardView. - HeroSummary.jsx: period selector + action cluster + LED number + cost + insight chips (local isCompactSummary/tablistRef state) - ProviderBreakdownCard.jsx: distribution bar + fleet grid + expanded drill-down (absorbs ProviderExpandedSection; local expandedProvider); returns null on empty providers to avoid an empty card - usageFormat.js: shared formatters/constants - split UsageOverview.test.jsx into HeroSummary + ProviderBreakdownCard tests - DashboardView renders the two cards where UsageOverview was; screenshotMode null-prop contract preserved Verified: build clean, 247 tests pass, dashboard renders identically (Playwright mock, light+dark). Refs #18
Restructure DashboardView from the 2-column grid into a Hero band + Bento grid + full-width ledger (#18 PR-B, Phase 3). Completes the "Amber Telemetry Console" redesign. - Hero band: HeroSummary (LED number + cost + period selector), full width - Bento (lg:grid-cols-6): StatsPanel (2) + ActivityHeatmap (4) row, then ProviderBreakdownCard (6) and TrendMonitor (6) full-width rows - DataDetails ledger full-width at the bottom - screenshotMode keeps its own compact share-card composition + null-prop contract + data-screenshot-exclude - entrance FadeIn delays re-derived as literals (removed the old left/right waterfall machinery) Verified Playwright light + dark (mock): Hero+Bento renders, heatmap gains width, no horizontal overflow, ledger intact. 247 tests pass, build clean. Refs #18
Codex QA (independent gate) caught that the Hero+Bento restructure dropped the provider breakdown from the share-to-X composition — the old UsageOverview rendered unconditionally in screenshotMode, so the share card included the provider distribution. Restore it (col-span-6) to keep the refactor behavior-preserving. Verified: build clean, 247 tests pass. Refs #18
This was referenced Jul 4, 2026
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
Phase 3 of the #18 dashboard redesign — Hero + Bento layout restructure. Completes the "Amber Telemetry Console" redesign (PR-A #19 shipped the identity tokens + LED readout).
Two commits:
refactor— split the monolithicUsageOverview.jsx(702 lines) intoHeroSummary.jsx+ProviderBreakdownCard.jsx+ sharedusageFormat.js, along the existing prop seam. Behavior-preserving, no state lifted to DashboardView. Test file split in two.feat— restructureDashboardViewfrom the 2-column grid into a Hero band (HeroSummary) → Bento grid (lg:grid-cols-6: StatsPanel 2 + ActivityHeatmap 4; ProviderBreakdownCard 6; TrendMonitor 6) → full-width DataDetails ledger.screenshotModekeeps its own compact share-card composition + null-prop contract. FadeIn entrance delays re-derived as literals.Deferred (out of scope): a standalone Context-breakdown bento card has no extractable source — it's a click-gated + source-gated drill-down inside the provider expansion; promoting it is a separate feature. No literal "Reserved" placeholder card shipped (the bento grid already provides expansion room).
Test plan
npm run buildcleanvitest run)?mock=1): Hero + Bento renders, ActivityHeatmap gains full-year width, no horizontal overflow, ledger + LED intactscreenshotModeshare-to-X card on the real share flowcounterStyleinline partially overrides.tt-lcd)Refs #18