feat(desktop): Usage tab sections — pill toggle + full-page machine resources

Merged
KI
3mo ago
+974-397

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.tsx hoists the shared shell (drag strip, scroll reset) and renders UsageSectionToggle — 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). Reuses useResourceSnapshot / useResourceNavigation; grouping/sorting extracted to ResourceConsumption/utils/workspaceGrouping.ts and shared with the v1 TopBar popover (which is unchanged).
  • The palette ResourcesFrame modal is deleted; the resources.check command, CHECK_RESOURCES hotkey, and native "Resources" menu item now navigate to /usage/resources.
  • The tab remembers the last-opened section (usage-last-section-v1 localStorage singleton, registered in the persisted-key registry). Writes are mount-scoped via useRecordUsageSection in 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/resources and 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.check now navigates to /usage/resources. The CHECK_RESOURCES hotkey and native “Resources” menu item route to the same page.
  • Persistence: remembers the last-opened section via usage-last-section-v1 (localStorage) written by useRecordUsageSection; 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.