@hienlh/ppm 0.20.1 → 0.20.3

package/src/web/components/chat/codex-usage-panel.tsx

@@ -1,11 +1,27 @@
+/**
+ * The chat header's Codex usage panel.
+ *
+ * Deliberately the same panel as the Claude one, not a lookalike: the frame comes from
+ * `UsagePanelShell` and every card is the `AccountCard` that Settings renders. It used to
+ * draw both itself, which is how the two ended up with cards of different shapes stacked in
+ * different directions — the drift the shared Settings layout exists to stop.
+ *
+ * What stays Codex-specific is only what genuinely differs: its accounts come from
+ * `/api/codex-accounts` rather than the Claude pool, an account is a CODEX_HOME rather than
+ * an OAuth grant so there is no token to expire, and a plan may have no 5-hour window at
+ * all — so the quota rows follow what the account actually reports.
+ */
+
 import { useState, useEffect, useCallback } from "react";
-import { X, Loader2, RefreshCw } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { api } from "@/lib/api-client";
-import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { AccountUsageBar } from "@/components/settings/accounts/account-bucket-row";
+import { AccountCard } from "@/components/settings/accounts/account-card";
+import { AccountCardShell } from "@/components/settings/accounts/accounts-pane-header";
+import { AccountBucketRow } from "@/components/settings/accounts/account-bucket-row";
 import { formatResetTime } from "@/components/settings/accounts/account-usage-format";
+import type { AccountUsageEntry } from "@/lib/api-settings";
 import type { UsageInfo } from "../../../types/chat";
+import { UsagePanelShell } from "./usage-panel-shell";
 
 interface CodexAccount { id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled" }
 type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly">;
@@ -15,20 +31,23 @@ function atCap(util: number | null | undefined): boolean {
   return Math.round((util ?? 0) * 100) >= 100;
 }
 
-function UsageBar({ label, frac, bucket }: {
-  label: string;
-  frac?: number;
-  bucket?: UsageInfo["session"];
-}) {
-  const pct = frac != null ? Math.round(frac * 100) : null;
-  return <AccountUsageBar label={label} pct={pct} reset={formatResetTime(bucket)} resetsAt={bucket?.resetsAt} />;
+/**
+ * A Codex account in the shape every account card speaks.
+ *
+ * `isOAuth` carries the account kind rather than an OAuth fact: a `chatgpt` account is a
+ * sign-in and an `apiKey` one is a static key, which is exactly the distinction the card's
+ * "API key" badge already draws.
+ */
+function toEntry(account: CodexAccount, usage: Usage): AccountUsageEntry {
+  return {
+    accountId: account.id,
+    accountLabel: account.label,
+    accountStatus: account.status ?? "active",
+    isOAuth: account.type !== "apiKey",
+    usage: { session: usage.session, weekly: usage.weekly },
+  };
 }
 
-/** Read-only usage panel opened from the chat toolbar badge (Claude parity).
- * Shows every managed Codex account's 5h/weekly utilization. When no managed
- * accounts exist, chats run on the ambient ~/.codex login — its usage comes
- * from the session `usage` prop. Login/management lives in Settings → AI
- * Provider → Codex. */
 export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, selectedAccountId }: {
   onClose: () => void;
   usage: UsageInfo;
@@ -44,43 +63,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
   const [loading, setLoading] = useState(false);
   const [selectingId, setSelectingId] = useState<string | null>(null);
   const [togglingId, setTogglingId] = useState<string | null>(null);
-  const [toggleError, setToggleError] = useState<string | null>(null);
-
-  // This panel draws its own cards rather than reusing Settings' AccountCard, so the
-  // selection control is rebuilt here. Kept visually the same as the Claude panel's on
-  // purpose — the two sub-tabs drifting apart is the thing the shared Settings layout was
-  // introduced to stop, and a differently-shaped button here would start it again.
-  const select = useCallback(async (id: string, label: string, refused: string | null) => {
-    if (!onSelectAccount) return;
-    // Refuse here rather than leaving the button inert: the user pressed something and is
-    // owed the reason. The server checks again, which catches an account that became
-    // unusable between this render and the click.
-    if (refused) { setToggleError(`Cannot switch to this account — ${refused}`); return; }
-    setSelectingId(id);
-    setToggleError(null);
-    try { setToggleError((await onSelectAccount(id, label)) ?? null); } finally { setSelectingId(null); }
-  }, [onSelectAccount]);
-
-  /**
-   * Switch a Codex account on or off without leaving the chat.
-   *
-   * No pending-token dance like the Claude side: the Codex route answers immediately because
-   * there is no refresh token to prove. The pending id is still tracked so the switch cannot
-   * be double-fired on a slow connection.
-   */
-  const toggle = useCallback(async (id: string, status: string) => {
-    setTogglingId(id);
-    setToggleError(null);
-    try {
-      await api.patch(`/api/codex-accounts/${id}`, { status: status === "disabled" ? "active" : "disabled" });
-      const d = await api.get<{ accounts: CodexAccount[] }>("/api/codex-accounts");
-      setAccounts(d.accounts);
-    } catch (e) {
-      setToggleError((e as Error).message || "Could not change the account");
-    } finally {
-      setTogglingId(null);
-    }
-  }, []);
+  const [panelError, setPanelError] = useState<string | null>(null);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -104,126 +87,107 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
     } catch { /* retain the last successful reading */ } finally { setLoading(false); }
   }, [onReload]);
 
-  return (
-    <div className="border-t border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
-      <div className="flex items-center justify-between">
-        <span className="text-xs font-semibold text-text-primary">Codex Usage</span>
-        <div className="flex items-center gap-1">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={reload}
-                disabled={loading}
-                className="text-text-subtle hover:text-text-primary px-1 cursor-pointer disabled:opacity-50"
-                aria-label="Refresh usage"
-              >
-                <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="top">Refresh</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onClose}
-                className="text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-                aria-label="Close usage panel"
-              >
-                <X className="size-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="top">Close</TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
+  /**
+   * Why an account cannot take this chat, in the words the card shows.
+   *
+   * Reached, not approaching: an account at 96% still answers, one at 100% does not. Both
+   * windows are checked because a plan may have only one of them, and whichever it has is
+   * the one that refuses the turn.
+   */
+  const unselectableReason = useCallback((account: CodexAccount, u: Usage): string | null => {
+    if (account.status === "disabled") return "Disabled";
+    if (atCap(u.fiveHour)) return `5-hour limit reached${u.session?.resetsAt ? ` — resets ${formatResetTime(u.session)}` : ""}`;
+    if (atCap(u.sevenDay)) return `Weekly limit reached${u.weekly?.resetsAt ? ` — resets ${formatResetTime(u.weekly)}` : ""}`;
+    return null;
+  }, []);
 
-      {toggleError && (
-        <div className="flex items-start gap-2 rounded border border-error/40 bg-error/10 px-2 py-1.5 text-[11px] text-error">
-          <span className="flex-1">{toggleError}</span>
-          <button onClick={() => setToggleError(null)} className="shrink-0 text-error/70 hover:text-error cursor-pointer" aria-label="Dismiss">
-            <X className="size-3" />
-          </button>
-        </div>
-      )}
+  const handleSelect = useCallback(async (accountId: string) => {
+    if (!onSelectAccount) return;
+    const account = accounts.find((a) => a.id === accountId);
+    if (!account) return;
+    // Refuse here rather than leaving the button inert: the user pressed something and is
+    // owed the reason. The server checks again, which catches an account that became
+    // unusable between this render and the click.
+    const refused = unselectableReason(account, usages[accountId] ?? {});
+    if (refused) { setPanelError(`Cannot switch to this account — ${refused.toLowerCase()}.`); return; }
+    setSelectingId(accountId);
+    setPanelError(null);
+    try { setPanelError((await onSelectAccount(accountId, account.label)) ?? null); }
+    finally { setSelectingId(null); }
+  }, [onSelectAccount, accounts, usages, unselectableReason]);
 
-      {loading && accounts.length === 0 && (
-        <div className="text-xs text-text-subtle flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> Loading…</div>
-      )}
+  /**
+   * Switch a Codex account on or off without leaving the chat.
+   *
+   * No pending-token dance like the Claude side: the Codex route answers immediately because
+   * there is no refresh token to prove. The pending id is still tracked so the switch cannot
+   * be double-fired on a slow connection.
+   */
+  const handleToggle = useCallback(async (id: string, status: string) => {
+    setTogglingId(id);
+    setPanelError(null);
+    try {
+      await api.patch(`/api/codex-accounts/${id}`, { status: status === "disabled" ? "active" : "disabled" });
+      const d = await api.get<{ accounts: CodexAccount[] }>("/api/codex-accounts");
+      setAccounts(d.accounts);
+    } catch (e) {
+      setPanelError((e as Error).message || "Could not change the account");
+    } finally {
+      setTogglingId(null);
+    }
+  }, []);
 
-      {/* No managed accounts → chat runs on the ambient ~/.codex login; show its usage */}
-      {!loading && accounts.length === 0 && (
-        <>
-          <div className="rounded-md border border-border/50 bg-surface/40 p-2.5 space-y-2">
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-text-primary truncate flex-1 min-w-0">{usage.activeAccountLabel || "Default login"}</span>
-              <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1">~/.codex</span>
-            </div>
-            <UsageBar label="5-Hour" frac={usage.fiveHour} bucket={usage.session} />
-            <UsageBar label="Weekly" frac={usage.sevenDay} bucket={usage.weekly} />
-          </div>
-          <p className="text-[11px] text-text-subtle">Using your default <code>~/.codex</code> login. Add managed accounts in Settings → AI Provider → Codex.</p>
-        </>
-      )}
+  /* No managed accounts → chats run on the ambient ~/.codex login, whose usage arrives on
+     the session prop rather than from the accounts endpoint. */
+  const ambient = loading && accounts.length === 0 ? (
+    <div className="text-xs text-text-subtle flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> Loading…</div>
+  ) : (
+    <>
+      <AccountCardShell active={false}>
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-text-primary truncate flex-1 min-w-0">{usage.activeAccountLabel || "Default login"}</span>
+          <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1 shrink-0">~/.codex</span>
+        </div>
+        <div className="space-y-2">
+          <AccountBucketRow label="5-Hour Session" bucket={usage.session} />
+          <AccountBucketRow label="Weekly" bucket={usage.weekly} />
+          {!usage.session && !usage.weekly && <p className="text-xs text-text-subtle">No usage data yet</p>}
+        </div>
+      </AccountCardShell>
+      <p className="text-[11px] text-text-subtle">Using your default <code>~/.codex</code> login. Add managed accounts in Settings → AI Provider → Codex.</p>
+    </>
+  );
 
-      {accounts.map((a) => {
+  return (
+    <UsagePanelShell
+      title="Codex Usage"
+      onClose={onClose}
+      onReload={onReload ? () => void reload() : undefined}
+      reloading={loading}
+      error={panelError}
+      onDismissError={() => setPanelError(null)}
+      cardCount={accounts.length}
+      fallback={ambient}
+    >
+      {(layout) => accounts.map((a) => {
         const u = usages[a.id] ?? {};
-        const isServing = a.id === (selectedAccountId ?? usage.activeAccountId);
-        // Reached, not approaching: an account at 96% still answers, one at 100% does not.
-        const refused = a.status === "disabled"
-          ? "it is switched off."
-          : atCap(u.fiveHour)
-            ? "it has reached its 5-hour limit."
-            : atCap(u.sevenDay)
-              ? "it has reached its weekly limit."
-              : null;
         return (
-          <div
+          <AccountCard
             key={a.id}
-            className={`rounded-md border bg-surface/40 p-2.5 space-y-2 ${isServing ? "border-primary/30 bg-primary/5" : "border-border/50"}`}
-          >
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-text-primary truncate flex-1 min-w-0">{a.label}</span>
-              {isServing && <span className="text-[10px] text-primary shrink-0 font-medium">Active</span>}
-              {/* Same slot as the Active badge, so every card keeps one header row and the
-                  panel does not grow taller just to carry a button. */}
-              {onSelectAccount && !isServing && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={() => select(a.id, a.label, refused)}
-                      disabled={selectingId === a.id}
-                      className={[
-                        "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors cursor-pointer disabled:cursor-wait",
-                        refused
-                          ? "text-text-subtle hover:text-error hover:bg-error/10"
-                          : "text-text-secondary hover:text-foreground hover:bg-surface-elevated",
-                      ].join(" ")}
-                    >
-                      {selectingId === a.id ? "Switching…" : "Use"}
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {refused ? `Cannot use this account — ${refused}` : "Use this account for this chat"}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-              {a.status === "disabled" && <span className="text-[10px] text-text-subtle shrink-0">Off</span>}
-              <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1">{a.type}</span>
-              {a.planType && <span className="text-[10px] text-text-subtle">{a.planType}</span>}
-              <Switch
-                checked={a.status !== "disabled"}
-                onCheckedChange={() => void toggle(a.id, a.status ?? "active")}
-                disabled={togglingId === a.id}
-                aria-label={a.status === "disabled" ? "Enable account" : "Disable account"}
-                className="cursor-pointer shrink-0"
-              />
-            </div>
-            <UsageBar label="5-Hour" frac={u.fiveHour} bucket={u.session} />
-            <UsageBar label="Weekly" frac={u.sevenDay} bucket={u.weekly} />
-          </div>
+            entry={toEntry(a, u)}
+            // What is serving THIS chat, not what the rotation would pick next —
+            // those differ the moment a session is bound to an account.
+            isActive={a.id === (selectedAccountId ?? usage.activeAccountId)}
+            layout={layout}
+            planLabel={a.planType}
+            onSelect={onSelectAccount ? handleSelect : undefined}
+            unselectableReason={unselectableReason(a, u)}
+            selecting={selectingId === a.id}
+            onToggle={handleToggle}
+            toggling={togglingId === a.id}
+          />
         );
       })}
-    </div>
+    </UsagePanelShell>
   );
 }

package/src/web/components/chat/usage-badge.tsx

@@ -17,14 +17,14 @@
  */
 
 import { useState } from "react";
-import { Activity, ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "lucide-react";
+import { Activity, RefreshCw } from "lucide-react";
 import type { UsageInfo } from "../../../types/chat";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { openSettings } from "@/components/settings/open-settings";
 import { AccountCard } from "@/components/settings/accounts/account-card";
 import { AccountBucketRow } from "@/components/settings/accounts/account-bucket-row";
 import { useAccountsData } from "@/components/settings/accounts/use-accounts-data";
 import { formatLastUpdated, formatResetTime, pctColor } from "@/components/settings/accounts/account-usage-format";
+import { UsagePanelShell } from "./usage-panel-shell";
 
 /** Matches the whole-percent figure the usage bars show, so a refusal agrees with the card. */
 function atCap(util: number | null | undefined): boolean {
@@ -91,7 +91,6 @@ export function UsageDetailPanel({
   // One strip for anything that went wrong in this panel — a refused switch or a refused
   // toggle. Two separate messages in two places would be harder to notice, not clearer.
   const [panelError, setPanelError] = useState<string | null>(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
 
   if (!visible) return null;
 
@@ -158,131 +157,21 @@ export function UsageDetailPanel({
   }
 
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
-  const hasPerAccountUsage = usages.length > 0;
-
-  // Roughly square, so the cards fill the viewport instead of leaving a long empty column.
-  const fsCount = usages.length || 1;
-  const fsCols = Math.ceil(Math.sqrt(fsCount));
-  const fsRows = Math.ceil(fsCount / fsCols);
 
   return (
-    <div
-      className={`relative border-b border-border bg-surface px-3 py-2.5 ${
-        isFullscreen
-          ? "fixed inset-0 z-50 flex flex-col gap-2.5 overflow-hidden"
-          : "space-y-2.5 max-h-[350px] overflow-y-auto"
-      }`}
-    >
-      <div className="flex items-center justify-between shrink-0">
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-text-primary">Usage</span>
-          {lastFetchedAt && (
-            <span className="text-[10px] text-text-subtle">{formatLastUpdated(new Date(lastFetchedAt).getTime())}</span>
-          )}
-        </div>
-        <div className="flex items-center gap-1">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={() => openSettings("accounts")}
-                className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-              >
-                Manage accounts <ExternalLink className="size-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="top">Add, remove or rotate accounts</TooltipContent>
-          </Tooltip>
-          {hasPerAccountUsage && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => setIsFullscreen((v) => !v)}
-                  className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-                  aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen view"}
-                >
-                  {isFullscreen ? <Minimize2 className="size-3" /> : <Maximize2 className="size-3" />}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="top">{isFullscreen ? "Exit fullscreen" : "Fullscreen view"}</TooltipContent>
-            </Tooltip>
-          )}
-          {onReload && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => { onReload(); void reload(); }}
-                  disabled={loading || refreshing}
-                  className="text-xs text-text-subtle hover:text-text-primary px-1 disabled:opacity-50 cursor-pointer"
-                  aria-label="Refresh usage"
-                >
-                  <RefreshCw className={`size-3 ${(loading || refreshing) ? "animate-spin" : ""}`} />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="top">Refresh</TooltipContent>
-            </Tooltip>
-          )}
-          <button
-            onClick={() => { setIsFullscreen(false); onClose(); }}
-            className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-            aria-label="Close usage panel"
-          >
-            <X className="size-3" />
-          </button>
-        </div>
-      </div>
-
-      {/* The server distinguishes "this login was rejected, sign in again" from "could not
-          reach Anthropic, try shortly", and the difference decides what the user should do.
-          Showing its words verbatim is the only way that survives to them. */}
-      {panelError && (
-        <div className="shrink-0 flex items-start gap-2 rounded border border-error/40 bg-error/10 px-2 py-1.5 text-[11px] text-error">
-          <span className="flex-1">{panelError}</span>
-          <button
-            onClick={() => setPanelError(null)}
-            className="shrink-0 text-error/70 hover:text-error cursor-pointer"
-            aria-label="Dismiss"
-          >
-            <X className="size-3" />
-          </button>
-        </div>
+    <UsagePanelShell
+      title="Usage"
+      meta={lastFetchedAt && (
+        <span className="text-[10px] text-text-subtle">{formatLastUpdated(new Date(lastFetchedAt).getTime())}</span>
       )}
-
-      {hasPerAccountUsage || initialLoading ? (
-        <div
-          className={isFullscreen
-            ? "flex-1 min-h-0 grid gap-2 overflow-hidden"
-            // Same classes as AccountCardRow, with the panel's wider padding to clear.
-            : "flex gap-2 overflow-x-auto pb-1 -mx-3 px-3 snap-x snap-mandatory scrollbar-thin"}
-          style={isFullscreen ? {
-            gridTemplateColumns: `repeat(${fsCols}, minmax(0, 1fr))`,
-            gridTemplateRows: `repeat(${fsRows}, minmax(0, 1fr))`,
-          } : undefined}
-        >
-          {initialLoading ? (
-            <p className="text-[10px] text-text-subtle">Loading...</p>
-          ) : (
-            usages.map((entry) => {
-              const info = accountMap.get(entry.accountId);
-              return (
-                <AccountCard
-                  key={entry.accountId}
-                  entry={entry}
-                  // What is serving THIS chat, not what the rotation would pick next —
-                  // those differ the moment a session is bound to an account.
-                  isActive={entry.accountId === (selectedAccountId ?? usage.activeAccountId ?? activeAccountId)}
-                  accountInfo={info}
-                  flash={flashIds.has(entry.accountId)}
-                  layout={isFullscreen ? "grid" : "strip"}
-                  onSelect={onSelectAccount ? handleSelect : undefined}
-                  unselectableReason={unselectableReason(info, entry)}
-                  selecting={selectingId === entry.accountId}
-                  onToggle={handleToggle}
-                  toggling={togglingId === entry.accountId}
-                />
-              );
-            })
-          )}
-        </div>
+      onClose={onClose}
+      onReload={onReload ? () => { onReload(); void reload(); } : undefined}
+      reloading={loading || refreshing}
+      error={panelError}
+      onDismissError={() => setPanelError(null)}
+      cardCount={usages.length}
+      fallback={initialLoading ? (
+        <p className="text-[10px] text-text-subtle">Loading...</p>
       ) : usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet ? (
         <div className="space-y-2.5">
           <AccountBucketRow label="5-Hour Session" bucket={usage.session} />
@@ -293,8 +182,7 @@ export function UsageDetailPanel({
       ) : (
         <p className="text-xs text-text-subtle">No usage data available</p>
       )}
-
-      {hasCost && (
+      footer={hasCost ? (
         <div className="border-t border-border pt-2 space-y-1">
           {usage.queryCostUsd != null && (
             <div className="flex items-center justify-between text-xs">
@@ -313,7 +201,28 @@ export function UsageDetailPanel({
             </div>
           )}
         </div>
-      )}
-    </div>
+      ) : undefined}
+    >
+      {(layout) => usages.map((entry) => {
+        const info = accountMap.get(entry.accountId);
+        return (
+          <AccountCard
+            key={entry.accountId}
+            entry={entry}
+            // What is serving THIS chat, not what the rotation would pick next —
+            // those differ the moment a session is bound to an account.
+            isActive={entry.accountId === (selectedAccountId ?? usage.activeAccountId ?? activeAccountId)}
+            accountInfo={info}
+            flash={flashIds.has(entry.accountId)}
+            layout={layout}
+            onSelect={onSelectAccount ? handleSelect : undefined}
+            unselectableReason={unselectableReason(info, entry)}
+            selecting={selectingId === entry.accountId}
+            onToggle={handleToggle}
+            toggling={togglingId === entry.accountId}
+          />
+        );
+      })}
+    </UsagePanelShell>
   );
 }