Usage panel: scope to open panes, lead with tokens, label $ as API estimate

Addresses feedback on the usage panel:
- It was summing every recent session on the distro (all projects, mounted
  + home dirs), not the open panes' work — which read as inflated/double-
  counted. (Verified there's no literal double count: every transcript is
  read once and no two project dirs share a cwd, since claude resolves
  symlinks/mounts to the real path before mangling.) Now the panel + the
  titlebar chip default to sessions whose cwd matches an open pane, with an
  'open panes / all recent' toggle to see the full per-distro list.
- Token volume is now the headline figure; the API-cost estimate is shown
  as a clearly-labeled '~$' secondary, with a footer note that it's n/a on
  a Pro/Max subscription and can't reflect /usage quota. Kept visible (not
  hidden) so it can be validated against real API billing.

Frontend-only; backend still returns the full recent set for the toggle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
megaproxy 2026-05-28 22:26:15 +01:00
parent e3c3810ba0
commit ebbf8db407
3 changed files with 80 additions and 11 deletions

View file

@ -804,6 +804,13 @@ export default function App() {
[tree],
);
// Titlebar chip total — scoped to the open panes ("this workspace"), matching
// the usage panel's default view, so it isn't inflated by unrelated projects.
const workspaceUsageTotal = useMemo(() => {
const cwds = new Set(openPanes.map((p) => p.cwd).filter(Boolean));
return totalCost(usageSessions.filter((s) => cwds.has(s.cwd)));
}, [openPanes, usageSessions]);
// Outside-click dismissal for the titlebar dropdowns. Mirrors the
// per-pane shell-picker pattern in LeafPane.tsx.
useEffect(() => {
@ -2153,7 +2160,7 @@ export default function App() {
title="claude token usage & estimated cost (Ctrl+Shift+U)"
aria-label="Usage"
>
💰{usageSessions.length > 0 ? ` ${formatUsd(totalCost(usageSessions))}` : ""}
💰{workspaceUsageTotal > 0 ? ` ~${formatUsd(workspaceUsageTotal)}` : ""}
</button>
<button
className="palette-btn"