From 77877ca0a8b53102e58701e57c390d9cf67a70b4 Mon Sep 17 00:00:00 2001
From: xuelongmu <xuelongmu@gmail.com>
Date: Tue, 8 Sep 2026 00:12:42 -0400
Subject: [PATCH] Keep account switching visible and simplify usage cards

---
 .../src/components/CodexAccountsMenu.tsx      |   8 +-
 .../src/components/MenuCard.test.tsx          |  36 +++-
 .../desktop-tauri/src/components/MenuCard.tsx |  20 +-
 .../src/components/MenuCardDetails.tsx        | 175 +++++++++---------
 apps/desktop-tauri/src/i18n/keys.ts           |   1 +
 .../settings/providers/ProviderDetailPane.tsx |   7 +-
 rust/src/locale.rs                            |   1 +
 rust/src/locale/en-US.ftl                     |   3 +-
 8 files changed, 144 insertions(+), 107 deletions(-)

diff --git a/apps/desktop-tauri/src/components/CodexAccountsMenu.tsx b/apps/desktop-tauri/src/components/CodexAccountsMenu.tsx
index 643d69ee00..868d5727a3 100644
--- a/apps/desktop-tauri/src/components/CodexAccountsMenu.tsx
+++ b/apps/desktop-tauri/src/components/CodexAccountsMenu.tsx
@@ -26,9 +26,11 @@ import {
 export default function CodexAccountsMenu({
   hideEmail,
   resetTimeRelative,
+  onLayoutChange,
 }: {
   hideEmail: boolean;
   resetTimeRelative: boolean;
+  onLayoutChange?: () => void;
 }) {
   const { t } = useLocale();
   const [accounts, setAccounts] = useState<CodexAccount[]>([]);
@@ -56,6 +58,10 @@ export default function CodexAccountsMenu({
     void load();
   }, [load]);
 
+  useEffect(() => {
+    onLayoutChange?.();
+  }, [accounts.length, error, onLayoutChange]);
+
   useEffect(() => {
     let cancelled = false;
     const unlistenPromise = listen("codex-accounts-updated", () => {
@@ -87,7 +93,7 @@ export default function CodexAccountsMenu({
   }
 
   return (
-    <details className="codex-menu-accounts">
+    <details className="codex-menu-accounts" onToggle={onLayoutChange}>
       <summary className="codex-menu-accounts__summary">
         <span className="codex-menu-accounts__title">{t("CodexAccountsTitle")}</span>
         <span className="codex-menu-accounts__count">{accounts.length}</span>
diff --git a/apps/desktop-tauri/src/components/MenuCard.test.tsx b/apps/desktop-tauri/src/components/MenuCard.test.tsx
index c7838cf8e6..e199df15d0 100644
--- a/apps/desktop-tauri/src/components/MenuCard.test.tsx
+++ b/apps/desktop-tauri/src/components/MenuCard.test.tsx
@@ -6,6 +6,7 @@ const tauriMocks = vi.hoisted(() => ({
   getDeepSeekPricingStatus: vi.fn(),
   getLocaleStrings: vi.fn(),
   setUiLanguage: vi.fn(),
+  claudeAccountsList: vi.fn(),
 }));
 
 const eventMocks = vi.hoisted(() => ({
@@ -108,6 +109,7 @@ function renderCard(
 describe("MenuCard", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    tauriMocks.claudeAccountsList.mockResolvedValue([]);
     tauriMocks.getLocaleStrings.mockResolvedValue(
       buildBundle({
         ActionCopyError: "Copy error",
@@ -465,6 +467,23 @@ describe("MenuCard", () => {
     expect(screen.getByText("30d tokens")).toBeInTheDocument();
     expect(screen.getByText("584K")).toBeInTheDocument();
     expect(screen.getByText("Estimated from local logs")).toBeInTheDocument();
+    const details = container.querySelector<HTMLDetailsElement>(".menu-card__more")!;
+    expect(details.open).toBe(false);
+    fireEvent.click(details.querySelector("summary")!);
+    expect(details.open).toBe(true);
+  });
+
+  it("places Claude accounts above metrics and the collapsed usage details", async () => {
+    tauriMocks.claudeAccountsList.mockResolvedValue([
+      { id: "a", email: "a@example.com", organization: "Personal", isActive: true, isSaved: true },
+      { id: "b", email: "b@example.com", organization: "Work", isActive: false, isSaved: true },
+    ]);
+    const { container } = renderCard(provider(null));
+    await screen.findByText("ClaudeAccountsTitle");
+    const accounts = container.querySelector(".codex-menu-accounts")!;
+    const metrics = container.querySelector(".menu-card__metrics")!;
+    expect(accounts.compareDocumentPosition(metrics) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(container.querySelector<HTMLDetailsElement>(".menu-card__more")?.open).toBe(false);
   });
 
   it("shows on-pace budgets and expands projection details", async () => {
@@ -483,12 +502,13 @@ describe("MenuCard", () => {
     renderCard(snapshot, { onLayoutChange });
 
     const toggle = await screen.findByRole("button", { name: /On-pace budget/ });
-    expect(screen.getByText("now 20%")).toBeInTheDocument();
-    expect(screen.getByText("1h 21%")).toBeInTheDocument();
+    expect(screen.queryByText("now 20%")).not.toBeInTheDocument();
     expect(screen.queryByRole("img", { name: /PaceChartAriaLabel/i })).not.toBeInTheDocument();
 
     fireEvent.click(toggle);
 
+    expect(screen.getByText("now 20%")).toBeInTheDocument();
+    expect(screen.getByText("1h 21%")).toBeInTheDocument();
     expect(toggle).toHaveAttribute("aria-expanded", "true");
     expect(screen.getByRole("img", { name: /PaceChartAriaLabel/i })).toBeInTheDocument();
     await waitFor(() => {
@@ -506,12 +526,12 @@ describe("MenuCard", () => {
 
     renderCard(snapshot);
 
-    expect(
-      await screen.findByRole("button", { name: /On-pace budget/ }),
-    ).toBeInTheDocument();
-      expect(screen.getByText("now 0%")).toBeInTheDocument();
-      expect(screen.queryByText(/in reserve/)).not.toBeInTheDocument();
-      expect(screen.queryByText("Lasts until reset")).not.toBeInTheDocument();
+    const toggle = await screen.findByRole("button", { name: /On-pace budget/ });
+    expect(screen.queryByText("now 0%")).not.toBeInTheDocument();
+    fireEvent.click(toggle);
+    expect(screen.getByText("now 0%")).toBeInTheDocument();
+    expect(screen.queryByText(/in reserve/)).not.toBeInTheDocument();
+    expect(screen.queryByText("Lasts until reset")).not.toBeInTheDocument();
   });
 
   it("does not show pace budgets for a five-hour session window", async () => {
diff --git a/apps/desktop-tauri/src/components/MenuCard.tsx b/apps/desktop-tauri/src/components/MenuCard.tsx
index 77cfe62044..5bd43ae71d 100644
--- a/apps/desktop-tauri/src/components/MenuCard.tsx
+++ b/apps/desktop-tauri/src/components/MenuCard.tsx
@@ -275,6 +275,17 @@ export default function MenuCard({
         )}
       </header>
 
+      {provider.providerId === "codex" && (
+        <CodexAccountsMenu
+          hideEmail={hideEmail}
+          resetTimeRelative={resetTimeRelative}
+          onLayoutChange={onLayoutChange}
+        />
+      )}
+      {provider.providerId === "claude" && (
+        <ClaudeAccountsMenu hideEmail={hideEmail} onLayoutChange={onLayoutChange} />
+      )}
+
       {hasDetails && <div className="menu-card__divider" />}
 
       {hasDetails && (
@@ -321,15 +332,6 @@ export default function MenuCard({
         </section>
       )}
 
-      {provider.providerId === "codex" && (
-        <CodexAccountsMenu
-          hideEmail={hideEmail}
-          resetTimeRelative={resetTimeRelative}
-        />
-      )}
-      {provider.providerId === "claude" && (
-        <ClaudeAccountsMenu hideEmail={hideEmail} />
-      )}
     </article>
   );
 }
diff --git a/apps/desktop-tauri/src/components/MenuCardDetails.tsx b/apps/desktop-tauri/src/components/MenuCardDetails.tsx
index 4ef58e3d1c..a707de0806 100644
--- a/apps/desktop-tauri/src/components/MenuCardDetails.tsx
+++ b/apps/desktop-tauri/src/components/MenuCardDetails.tsx
@@ -376,7 +376,7 @@ function MetricRow({
             <span>{t("PanelOnPaceBudget")}</span>
             {reserveDescription && <span>{reserveDescription}</span>}
           </button>
-          <div className="menu-metric__budget-pills">
+          {expanded && <div className="menu-metric__budget-pills">
             {[
               [t("PanelNow"), paceView.budget.now],
               [t("PanelOneHour"), paceView.budget.nextHour],
@@ -387,7 +387,7 @@ function MetricRow({
                 {label} {formatBudget(Number(value))}%
               </span>
             ))}
-          </div>
+          </div>}
           {expanded && <PaceDetailsChart snap={snap} t={t} />}
         </div>
       )}
@@ -530,14 +530,6 @@ export default function MenuCardDetails({
 
       {wayfinderUsage && <WayfinderUsageBlock usage={wayfinderUsage} />}
 
-      {localUsage && (
-        <LocalUsageBlock
-          providerId={provider.providerId}
-          summary={localUsage}
-          costHistory={localCostHistory}
-        />
-      )}
-
       {hasMetrics && hasCost && costStyle !== "hidden" && <div className="menu-card__divider" />}
 
       {provider.cost && costStyle !== "hidden" && (
@@ -612,83 +604,96 @@ export default function MenuCardDetails({
         </section>
       )}
 
-      {(hasMetrics || hasCost) && hasPace && <div className="menu-card__divider" />}
-
-      {hasPace && provider.pace && (
-        <section className="menu-card__group menu-card__pace">
-          <div className="menu-card__pace-header">
-            <span className="menu-card__group-title">{t("DetailPaceTitle")}</span>
-            <span
-              className="menu-card__pace-label"
-              data-pace={paceCategory(provider.pace.stage)}
-            >
-              {t(paceStageKey(provider.pace.stage))} (
-              {provider.pace.deltaPercent >= 0 ? "+" : ""}
-              {provider.pace.deltaPercent.toFixed(1)}%)
-            </span>
-          </div>
-          <div className="menu-card__pace-bars">
-            <div className="menu-card__pace-track" title={t("PanelExpected")}>
-              <div
-                className="menu-card__pace-fill menu-card__pace-fill--expected"
-                style={{ width: `${provider.pace.expectedUsedPercent.toFixed(1)}%` }}
-              />
-            </div>
-            <div className="menu-card__pace-track" title={t("PanelActual")}>
-              <div
-                className="menu-card__pace-fill"
-                data-pace={paceCategory(provider.pace.stage)}
-                style={{ width: `${provider.pace.actualUsedPercent.toFixed(1)}%` }}
+      {(localUsage || hasPace || hasCharts) && (
+        <details className="menu-card__more" onToggle={onLayoutChange}>
+          <summary>{t("PanelUsageDetails")}</summary>
+          <div className="menu-card__more-content">
+            {localUsage && (
+              <LocalUsageBlock
+                providerId={provider.providerId}
+                summary={localUsage}
+                costHistory={localCostHistory}
               />
-            </div>
+            )}
+
+            {hasPace && provider.pace && (
+              <section className="menu-card__group menu-card__pace">
+                <div className="menu-card__pace-header">
+                  <span className="menu-card__group-title">{t("DetailPaceTitle")}</span>
+                  <span
+                    className="menu-card__pace-label"
+                    data-pace={paceCategory(provider.pace.stage)}
+                  >
+                    {t(paceStageKey(provider.pace.stage))} (
+                    {provider.pace.deltaPercent >= 0 ? "+" : ""}
+                    {provider.pace.deltaPercent.toFixed(1)}%)
+                  </span>
+                </div>
+                <div className="menu-card__pace-bars">
+                  <div className="menu-card__pace-track" title={t("PanelExpected")}>
+                    <div
+                      className="menu-card__pace-fill menu-card__pace-fill--expected"
+                      style={{ width: `${provider.pace.expectedUsedPercent.toFixed(1)}%` }}
+                    />
+                  </div>
+                  <div className="menu-card__pace-track" title={t("PanelActual")}>
+                    <div
+                      className="menu-card__pace-fill"
+                      data-pace={paceCategory(provider.pace.stage)}
+                      style={{ width: `${provider.pace.actualUsedPercent.toFixed(1)}%` }}
+                    />
+                  </div>
+                </div>
+                {provider.pace.etaSeconds != null && !provider.pace.willLastToReset && (
+                  <div className="menu-card__pace-eta">
+                    ⚠{" "}
+                    {t("DetailPaceRunsOutIn")} {formatEta(provider.pace.etaSeconds)}
+                  </div>
+                )}
+                {provider.pace.willLastToReset && (
+                  <div className="menu-card__pace-ok">
+                    ✓ {t("DetailPaceWillLastToReset")}
+                  </div>
+                )}
+              </section>
+            )}
+
+            {(hasMetrics || hasCost || hasPace) && hasCharts && (
+              <div className="menu-card__divider" />
+            )}
+
+            {hasCharts && (
+              <section className="menu-card__group menu-card__charts">
+                {hasCostHistory && (
+                  <SimpleBarChart
+                    points={chartData!.costHistory}
+                    label={t("DetailChartCost")}
+                    color="var(--provider-accent, var(--accent))"
+                    formatValue={(v) => `$${v.toFixed(2)}`}
+                    t={t}
+                  />
+                )}
+                {hasCreditsHistory && (
+                  <SimpleBarChart
+                    points={chartData!.creditsHistory}
+                    label={t("DetailChartCredits")}
+                    color="var(--provider-status-ok)"
+                    formatValue={(v) => v.toFixed(1)}
+                    t={t}
+                  />
+                )}
+                {hasUsageBreakdown && (
+                  <StackedBarChart
+                    points={chartData!.usageBreakdown}
+                    label={t("DetailChartUsageBreakdown")}
+                    height={56}
+                    t={t}
+                  />
+                )}
+              </section>
+            )}
           </div>
-          {provider.pace.etaSeconds != null && !provider.pace.willLastToReset && (
-            <div className="menu-card__pace-eta">
-              ⚠{" "}
-              {t("DetailPaceRunsOutIn")} {formatEta(provider.pace.etaSeconds)}
-            </div>
-          )}
-          {provider.pace.willLastToReset && (
-            <div className="menu-card__pace-ok">
-              ✓ {t("DetailPaceWillLastToReset")}
-            </div>
-          )}
-        </section>
-      )}
-
-      {(hasMetrics || hasCost || hasPace) && hasCharts && (
-        <div className="menu-card__divider" />
-      )}
-
-      {hasCharts && (
-        <section className="menu-card__group menu-card__charts">
-          {hasCostHistory && (
-            <SimpleBarChart
-              points={chartData!.costHistory}
-              label={t("DetailChartCost")}
-              color="var(--provider-accent, var(--accent))"
-              formatValue={(v) => `$${v.toFixed(2)}`}
-              t={t}
-            />
-          )}
-          {hasCreditsHistory && (
-            <SimpleBarChart
-              points={chartData!.creditsHistory}
-              label={t("DetailChartCredits")}
-              color="var(--provider-status-ok)"
-              formatValue={(v) => v.toFixed(1)}
-              t={t}
-            />
-          )}
-          {hasUsageBreakdown && (
-            <StackedBarChart
-              points={chartData!.usageBreakdown}
-              label={t("DetailChartUsageBreakdown")}
-              height={56}
-              t={t}
-            />
-          )}
-        </section>
+        </details>
       )}
     </div>
   );
diff --git a/apps/desktop-tauri/src/i18n/keys.ts b/apps/desktop-tauri/src/i18n/keys.ts
index 83e3a22d2a..3d83892bf5 100644
--- a/apps/desktop-tauri/src/i18n/keys.ts
+++ b/apps/desktop-tauri/src/i18n/keys.ts
@@ -76,6 +76,7 @@ export const ALL_LOCALE_KEYS = [
   "ProviderDisabled",
   "ProviderInfo",
   "ProviderUsage",
+  "PanelUsageDetails",
   "AuthType",
   "DataSource",
   "ProviderNotDetected",
diff --git a/apps/desktop-tauri/src/surfaces/settings/providers/ProviderDetailPane.tsx b/apps/desktop-tauri/src/surfaces/settings/providers/ProviderDetailPane.tsx
index 2893cb15ac..86b33ce438 100644
--- a/apps/desktop-tauri/src/surfaces/settings/providers/ProviderDetailPane.tsx
+++ b/apps/desktop-tauri/src/surfaces/settings/providers/ProviderDetailPane.tsx
@@ -31,8 +31,8 @@ import { CookieSourceSection } from "./sections/CookieSourceSection";
 import { GrokUsageSourceSection } from "./sections/GrokUsageSourceSection";
 import { RegionSection } from "./sections/RegionSection";
 import { CodexUsageOptions } from "./sections/credentials/CodexUsageOptions";
-import { ClaudeAccountsSection } from "./sections/credentials/ClaudeAccountsSection";
 import { CodexAccountsSection } from "./sections/credentials/CodexAccountsSection";
+import { ClaudeAccountsSection } from "./sections/credentials/ClaudeAccountsSection";
 import { TokenAccountsPanel } from "../tokens/TokenAccountsPanel";
 import { ApiKeySection } from "./ApiKeySection";
 import { CookieSection } from "./CookieSection";
@@ -265,6 +265,9 @@ export function ProviderDetailPane({
     <div className="provider-detail">
       <IdentitySection provider={detail} subtitle={subtitle} t={t} />
 
+      {detail.id === "codex" && <CodexAccountsSection t={t} />}
+      {detail.id === "claude" && <ClaudeAccountsSection t={t} />}
+
       {detail.lastError && (
         <ProviderIssueNotice detail={detail} t={t} />
       )}
@@ -325,8 +328,6 @@ export function ProviderDetailPane({
       />
       <CredentialsDispatcher providerId={detail.id} t={t} />
       {detail.id === "codex" && <CodexUsageOptions t={t} />}
-      {detail.id === "codex" && <CodexAccountsSection t={t} />}
-      {detail.id === "claude" && <ClaudeAccountsSection t={t} />}
       <CredentialStorageSection
         status={credentialStatus}
         busy={busy}
diff --git a/rust/src/locale.rs b/rust/src/locale.rs
index 0189ed8fd9..535038635b 100644
--- a/rust/src/locale.rs
+++ b/rust/src/locale.rs
@@ -266,6 +266,7 @@ locale_keys! {
     ProviderDisabled,
     ProviderInfo,
     ProviderUsage,
+    PanelUsageDetails,
     AuthType,
     DataSource,
     ProviderNotDetected,
diff --git a/rust/src/locale/en-US.ftl b/rust/src/locale/en-US.ftl
index cf93441f16..f06abd1006 100644
--- a/rust/src/locale/en-US.ftl
+++ b/rust/src/locale/en-US.ftl
@@ -69,6 +69,7 @@ ProviderEnabled = Enabled
 ProviderDisabled = Disabled
 ProviderInfo = Info
 ProviderUsage = Usage
+PanelUsageDetails = Usage details
 AuthType = Authentication
 DataSource = Data Source
 ProviderNotDetected = not detected
@@ -293,7 +294,7 @@ ProviderClaudeAllowReadingClaudeCodeCredentialsHelp = Lets CodexBar read (and re
 ProviderCodexSparkUsage = Show Codex Spark usage
 ProviderCodexSparkUsageHelp = Show Codex Spark quota rows without hiding credits or other extra usage.
 CodexAccountsTitle = Codex Accounts
-CodexAccountsHint = Manage multiple Codex accounts. Each account lives in its own managed home; switching updates the active identity.
+CodexAccountsHint = Choose an account for Codex. Restart running sessions after switching.
 CodexAccountsAddButton = Add account
 CodexAccountsSwitchButton = Switch
 CodexAccountsFetchButton = Refresh usage