feat(desktop): Usage tab sections — pill toggle + full-page machine resources
Summary
Splits the Usage tab into two sections behind a pill toggle (workspaces-header style): Token usage (existing quota + history views) and a new Machine resources page that replaces the command-palette resources modal with a full-page, big-screen layout.
usage/layout.tsxhoists the shared shell (drag strip, scroll reset) and rendersUsageSectionToggle— rounded pills, active state via route match. The four existing route files shrink to content-only.- New
/usage/resources(UsageResourcesPage): system stat strip (Superset CPU/memory, RAM share, system memory, cores, 1-min load), stacked RAM composition bar (Superset / other apps / free), live ~5-min CPU & memory sparklines fed by a client-side ring buffer of the existing 2 s snapshots, and one aligned process table (app subprocesses + project-grouped workspace/session rows with severity dots and per-row memory-share bars, click-to-navigate). ReusesuseResourceSnapshot/useResourceNavigation; grouping/sorting extracted toResourceConsumption/utils/workspaceGrouping.tsand shared with the v1 TopBar popover (which is unchanged). - The palette
ResourcesFramemodal is deleted; theresources.checkcommand,CHECK_RESOURCEShotkey, and native "Resources" menu item now navigate to/usage/resources. - The tab remembers the last-opened section (
usage-last-section-v1localStorage singleton, registered in the persisted-key registry). Writes are mount-scoped viauseRecordUsageSectionin each route component — only a mounted section can write, so router exit renders can't clobber it. The dashboard sidebar's Usage entry reopens the remembered section.
Polling costs nothing off-screen: the queries only mount under /usage, interval refetches are already focus-gated via the global focusManager wiring, and the host quota endpoint stays request-driven behind its 5-min cache.
Test plan
- CDP-verified in the dev app: pill toggle swaps active state and routes both directions; token page renders quota + history under the pills
- Resources page live: sparklines animate from real 2 s samples, stacked RAM bar + legend, project/workspace/session rows render for host-service terminal sessions; workspace row click navigates to the v2 workspace
- Remember-last-section journey: pick resources → leave → re-enter lands on
/usage/resources; switch to token → leave → re-enter lands on/usage; survives app relaunch - Palette "Check resources" / hotkey path navigates to the page (frame deleted, no remaining references)
-
typecheck, biome, unit tests in touched areas, persisted-key registry test
Summary by cubic
Splits the desktop Usage tab into two sections with a pill toggle and replaces the palette Resources modal with a full-page Machine resources view. Previously resources opened in a command-palette frame and the Usage entry always landed on Token usage; now the hotkey/menu/command navigate to /usage/resources and the app reopens the last-used section.
Notes for review and rollout
- Layout/routing: new usage shell (
usage/layout.tsx) hoists drag/scroll reset and renders a pill toggle; existing token-usage routes are content-only. Adds/usage/resourcesand a section-aware sidebar link that reopens the remembered section. - Machine resources page: system stat strip (CPU/memory, RAM share, system memory, cores, 1‑min load), RAM composition bar, live ~5‑min CPU/memory sparklines (client-side ring buffer of 2 s samples), and a project-grouped process table with severity and memory-share bars; row clicks navigate. Reuses
useResourceSnapshot/useResourceNavigation; grouping/sorting moved to shared utils for reuse by the TopBar popover. - Commands/menu: deletes the palette
ResourcesFrame;resources.checknow navigates to/usage/resources. TheCHECK_RESOURCEShotkey and native “Resources” menu item route to the same page. - Persistence: remembers the last-opened section via
usage-last-section-v1(localStorage) written byuseRecordUsageSection; registered in the persisted-key registry. Dashboard sidebar Usage honors it. - Performance: resource queries only mount under
/usage; interval refetches remain focus-gated; host quota endpoint stays request-driven behind its 5‑min cache.
Summary by CodeRabbit
- New Features
- Added a dedicated Usage Resources dashboard with live CPU and memory metrics, charts, severity indicators, sorting, refresh, and expandable project/workspace details.
- Added navigation between Token usage and Machine resources sections.
- Usage navigation now remembers and reopens the last-selected section.
- Improvements
- Command palette resource actions now open the Usage Resources dashboard directly.
- Resource data is grouped and sorted consistently across the dashboard.
- Added loading and empty-state handling for resource information.