Skip to content

Rework the tray card into the upstream card anatomy - #813

Merged
Finesssee merged 15 commits into
mainfrom
feat/mac-card-anatomy
Oct 11, 2026
Merged

Finesssee merged 15 commits into
mainfrom
feat/mac-card-anatomy

Conversation

@Finesssee

@Finesssee Finesssee commented Oct 11, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Card-rework PR 3 of the Mac-parity tray panel: the provider card now has the upstream UsageMenuCardView anatomy.

What users see in the tray panel:

  • The card is one column: header (name, email, "Updated …", plan as plain footnote text), a divider, metric rows, key-value sections (caption titles, label left and value right), the inline dashboard (Today / period KPIs, a 58px bar chart, recent windows), and Extra usage / credits at the bottom.
  • Errors show in the Mac error red, up to 4 lines, with the copy button.
  • The account menus inside the card are gone. The footer has one Switch Account... (or Add Account...) row for Codex, Claude and Grok, which opens Settings > Providers on that provider.
  • The provider switcher and the Overview spend summary use the Mac look (spec 3.1 and 3.2): Windows-accent selection, an instant black 0.095 hover, a 2px quota line, and a 17px bold total.
  • Hide Personal Info still masks the header email.

Removed from the card, and where it went

Was in the tray card Now
Codex / Claude / Grok account menus Footer "Switch Account..." / "Add Account..." row, deep-linking to Settings > Providers > provider (existing account UI there)
On-pace budget rows and the projection chart Settings > Providers > provider > Usage details
Session-equivalent forecast Settings > Providers > Usage details
Expected vs actual pace bars Settings > Providers > Usage details
Quota burndown Settings > Providers > Usage details
Recent quota window history Settings > Providers > Charts
DeepSeek pricing status Settings > Providers > DeepSeek > Usage details
Claude OAuth / CLI plan values ("Claude (OAuth)") Dropped from the card; a real plan name still shows as footnote text
Collapsed "Usage details" disclosure Gone; the dashboard is inline, like upstream

Decisions implemented

  • 7.3 no submenus: "Plan Usage", "Cost" and "Share Usage Snapshot" are not added.
  • 7.4: the card keeps zoom: trayScale; new Rust tests pin the Panel scale bounds to src/lib/trayScale.ts.
  • 7.5: brand colors are PR 4. --provider-accent is now always set from the existing brand color.
  • 7.6: metric markers still come from the Windows thresholds.
  • 7.7: the Windows-only extras listed above moved to Settings > Providers.
  • 7.8: switcher selection uses the Windows accent #0078d4.
  • New per-surface tint token --surface-tint-rgb (white on dark surfaces, black on the light tray) replaces the tray-only dark-tint overrides.

Two behaviour fixes found in the visual loop

  • A balance-only cost (no cap, not a spend summary) is not repeated as "Extra usage · Balance: $X" when a provider detail row already shows that balance (Vercel). Upstream has no cost block for Vercel.
  • "Switch Account..." also shows for a Claude snapshot with a live identity (login method) and quota windows but no email, matching upstream MenuDescriptor.hasAccount.

Commands and results

All run in W:/wcb-wt/mac-card-anatomy with CARGO_TARGET_DIR=W:\cargo-target\mac-card-anatomy and CARGO_BUILD_JOBS=3.

Command Result
cargo fmt --all clean
cargo test --manifest-path rust/Cargo.toml 3803 passed, 1 ignored (plus 1 + 0 in the other binaries)
cargo clippy --manifest-path rust/Cargo.toml --all-targets -- -D warnings clean
cargo test --manifest-path apps/desktop-tauri/src-tauri/Cargo.toml 639 passed (includes the new trayScale bound tests)
cargo clippy --manifest-path apps/desktop-tauri/src-tauri/Cargo.toml --all-targets -- -D warnings clean
pnpm test (apps/desktop-tauri) 110 files, 872 tests passed (at 3550c9ec9)
pnpm run build (apps/desktop-tauri) passes

The cargo gates ran before the last two commits (1952741a5, 3550c9ec9); those touch only frontend TypeScript and tests. pnpm test and pnpm run build were rerun in full at 3550c9ec9.

Proof (webview capture through CDP, win_run.py)

Before (Mac 0.70.0 | Windows main): W:/mac-parity/report/card-sheets/<Pack>.png
After (Mac 0.70.0 | this branch): W:/mac-parity/report/mac-card-anatomy/final/<Pack>.png
Raw panels: W:/mac-parity/win-runs/<Pack>@mac-card-anatomy/panel.png

Packs: Claude, Codex, OpenRouter, Copilot, Cursor, Vercel. Proof build of 3550c9ec9 (W:/mac-parity/win-bin-mac-card-anatomy).

Pack Before (Mac, Windows main) After (Mac, this branch)
Claude W:/mac-parity/report/card-sheets/Claude.png W:/mac-parity/report/mac-card-anatomy/final/Claude.png
Codex W:/mac-parity/report/card-sheets/Codex.png W:/mac-parity/report/mac-card-anatomy/final/Codex.png
OpenRouter W:/mac-parity/report/card-sheets/OpenRouter.png W:/mac-parity/report/mac-card-anatomy/final/OpenRouter.png
Copilot W:/mac-parity/report/card-sheets/Copilot.png W:/mac-parity/report/mac-card-anatomy/final/Copilot.png
Cursor W:/mac-parity/report/card-sheets/Cursor.png W:/mac-parity/report/mac-card-anatomy/final/Cursor.png
Vercel W:/mac-parity/report/card-sheets/Vercel.png W:/mac-parity/report/mac-card-anatomy/final/Vercel.png

Where the extras went (Settings > Providers, --mode settings:providers, dark under theme auto):

  • Claude: W:/mac-parity/win-runs/ClaudeSettings@mac-card-anatomy/panel.png (Usage details with per-window on-pace budgets, pace bars, Charts)
  • Codex: W:/mac-parity/win-runs/CodexSettings@mac-card-anatomy/panel.png (Usage details and Charts)

Manual CUA check for the coordinator (real tray, theme auto)

win_run.py captures the webview only. Please check on the real tray with a fresh build of this branch:

  1. Tray flyout: the card divider sits 6px under the header, inset to the card padding; the switcher selection is #0078d4 with white icon; hover is instant (no fade).
  2. Copy button on an error card: pressing it scales to 0.94 with a light fill and shows the checkmark.
  3. Footer "Switch Account..." on Codex and Claude opens Settings on Providers with that provider selected (also when Settings is already open on another tab).
  4. Settings > Providers > Codex and > Claude: the Usage details section (on-pace budget, chart, forecast, pace bars) and Charts render, and the Settings window stays dark under theme auto.
  5. Float bar still dark under auto after opening the tray and Settings.
  6. Hide Personal Info on: the header email is masked in the tray card.

Gaps against the Mac shots (not in this PR)

  • Codex Credits: the card shows "Extra usage · Balance: $0.00" where the Mac shows a 125.5 credits block with "Buy Credits". The Rust Codex fetcher reads the mock's string "balance": "125.50" with as_f64 and gets 0 (rust/src/providers/codex/api.rs). Provider scope, not this PR.
  • Codex recent windows can be empty on a cold start: in the final proof run the Codex dashboard showed "—" for Est. Current window and its tokens and listed only the current window. The FE-loop run on the same pack and Rust code showed $2.65 / 1.8M and four windows. The likely cause (not verified) is that build_codex_quota_history (rust/src/providers/chart.rs, unchanged here) reads the cost-scan cache, and a chart snapshot built before the scan writes that cache has no window entries; the FE-loop run had one extra usage refresh that would rebuild it. The old card hid this behind the collapsed disclosure, so this PR makes a pre-existing cold-start state visible on the card face. Worth its own issue.
  • Claude header has no email: the pack snapshot has accountEmail null. Claude has no Extra usage block (no cost in the data), and Today reads "—" because the fixture logs end before today.
  • OpenRouter: key-value rows have no section titles (the provider sends flat details). "Resets $31.58 remaining" is pre-existing provider text.
  • Switcher: the selection indicator inset is 3px, the Mac's is 8px.
  • Forecast text in Settings > Usage details is English-only (pre-existing).
  • Not added (decision 7.3): submenus, Share Usage Snapshot, last-known usage.
  • Real tray chrome (DWM corners, blur dismiss, z-order) is not covered by the webview capture; see the CUA checklist above.

Conflicts

This PR rewrites MenuCard.tsx, removes MenuCardDetails.tsx and the account menu components, and adds tray-card.css. It will conflict with the open "simplify" PRs #794, #795, #796, #798, #800, #801, #802, #803 and #804. Whichever lands second needs a rebase; the simplify changes to the removed files can be dropped.

- Card = header, metric rows, key-value sections, inline dashboard,
  credits / extra usage (upstream UsageMenuCardView). Plan is plain
  footnote text; errors use --mac-error; --provider-accent is always set.
- Account menus become a "Switch Account..." row that opens Settings.
- Pace budgets + chart, session forecast, burndown, DeepSeek pricing,
  pace bars and quota window history move to Settings > Providers.
- Switcher and Overview spend summary restyled (spec 3.1, 3.2).
- Tray dark-tint overrides replaced by a per-surface --surface-tint-rgb.
- New tray-card.css, scoped to .menu-surface--tray and loaded last.
@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 28 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository: nesszer/Win-CodexBar/.coderabbit.yaml
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: 23acd9de-d424-4d93-b22c-1840270530c4

📥 Commits

Reviewing files that changed from the base of the PR and between 4d6b60d and 9444ddd.


📒 Files selected for processing (78)
  • apps/desktop-tauri/src-tauri/src/commands/chart.rs
  • apps/desktop-tauri/src-tauri/src/surface.rs
  • apps/desktop-tauri/src/App.tsx
  • apps/desktop-tauri/src/components/ClaudeAccountsMenu.test.tsx
  • apps/desktop-tauri/src/components/ClaudeAccountsMenu.tsx
  • apps/desktop-tauri/src/components/CodexAccountsMenu.test.tsx
  • apps/desktop-tauri/src/components/CodexAccountsMenu.tsx
  • apps/desktop-tauri/src/components/GrokAccountsMenu.test.tsx
  • apps/desktop-tauri/src/components/GrokAccountsMenu.tsx
  • apps/desktop-tauri/src/components/InventoryRows.tsx
  • apps/desktop-tauri/src/components/MenuCard.test.tsx
  • apps/desktop-tauri/src/components/MenuCard.tsx
  • apps/desktop-tauri/src/components/MenuCardDetails.tsx
  • apps/desktop-tauri/src/components/MenuCardOpenAIUsage.test.tsx
  • apps/desktop-tauri/src/components/MiniBarChart.test.tsx
  • apps/desktop-tauri/src/components/MiniBarChart.tsx
  • apps/desktop-tauri/src/components/ProviderAccountsMenu.test.tsx
  • apps/desktop-tauri/src/components/ProviderAccountsMenu.tsx
  • apps/desktop-tauri/src/components/ProviderDisplayRow.tsx
  • apps/desktop-tauri/src/components/card/CardHeader.test.tsx
  • apps/desktop-tauri/src/components/card/CardHeader.tsx
  • apps/desktop-tauri/src/components/card/CardMetricRow.tsx
  • apps/desktop-tauri/src/components/card/DetailSections.tsx
  • apps/desktop-tauri/src/components/card/ExtraUsageBlock.tsx
  • apps/desktop-tauri/src/components/card/InlineDashboard.test.tsx
  • apps/desktop-tauri/src/components/card/InlineDashboard.tsx
  • apps/desktop-tauri/src/components/card/WayfinderBlock.tsx
  • apps/desktop-tauri/src/components/card/describeCard.ts
  • apps/desktop-tauri/src/hooks/useTrayPanelController.ts
  • apps/desktop-tauri/src/i18n/keys.ts
  • apps/desktop-tauri/src/lib/accountMenuRow.test.ts
  • apps/desktop-tauri/src/lib/accountMenuRow.ts
  • apps/desktop-tauri/src/lib/cardCost.test.ts
  • apps/desktop-tauri/src/lib/cardCost.ts
  • apps/desktop-tauri/src/lib/inlineDashboard.test.ts
  • apps/desktop-tauri/src/lib/inlineDashboard.ts
  • apps/desktop-tauri/src/lib/providerLabels.test.ts
  • apps/desktop-tauri/src/lib/providerLabels.ts
  • apps/desktop-tauri/src/main.tsx
  • apps/desktop-tauri/src/styles.css
  • apps/desktop-tauri/src/surfaces/Settings.test.tsx
  • apps/desktop-tauri/src/surfaces/Settings.tsx
  • apps/desktop-tauri/src/surfaces/TrayPanel.period.test.tsx
  • apps/desktop-tauri/src/surfaces/TrayPanel.test.tsx
  • apps/desktop-tauri/src/surfaces/TrayPanel.tsx
  • apps/desktop-tauri/src/surfaces/menu-surface-layout.css
  • apps/desktop-tauri/src/surfaces/settings/providers/ProviderDetailPane.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/UsageDetailsSection.test.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/UsageDetailsSection.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/charts/ChartsSection.test.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/charts/ChartsSection.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/credentials/ClaudeAccountsSection.test.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/credentials/ClaudeAccountsSection.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/credentials/GrokAccountsSection.test.tsx
  • apps/desktop-tauri/src/surfaces/settings/providers/sections/credentials/GrokAccountsSection.tsx
  • apps/desktop-tauri/src/surfaces/settings/settings-layout.css
  • apps/desktop-tauri/src/surfaces/settings/settingsTabs.test.ts
  • apps/desktop-tauri/src/surfaces/settings/settingsTabs.ts
  • apps/desktop-tauri/src/surfaces/settings/tabs/ProvidersTab.test.tsx
  • apps/desktop-tauri/src/surfaces/settings/tabs/ProvidersTab.tsx
  • apps/desktop-tauri/src/surfaces/tray-card.css
  • apps/desktop-tauri/src/surfaces/trayCardStyles.test.ts
  • apps/desktop-tauri/src/test/styles.ts
  • rust/src/locale.rs
  • rust/src/locale/en-US.ftl
  • rust/src/locale/es-MX.ftl
  • rust/src/locale/ja-JP.ftl
  • rust/src/locale/ko-KR.ftl
  • rust/src/locale/pt-BR.ftl
  • rust/src/locale/ru-RU.ftl
  • rust/src/locale/tr-TR.ftl
  • rust/src/locale/uk-UA.ftl
  • rust/src/locale/zh-CN.ftl
  • rust/src/locale/zh-TW.ftl
  • rust/src/providers/codex/api.rs
  • rust/src/settings.rs
  • rust/src/settings/preferences_document.rs
  • rust/src/settings/preferences_document/tests.rs

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

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