@hienlh/ppm 0.19.2 → 0.19.4

package/src/web/components/settings/accounts/account-usage-format.ts

@@ -0,0 +1,92 @@
+/**
+ * Formatting and colour rules for account usage, shared by the Settings pane and the chat
+ * usage chip.
+ *
+ * Extracted so both presentations agree: a bucket that reads 91% red in one place must not
+ * read amber in the other, and "expires in" must not drift between them either.
+ */
+
+import type { LimitBucket } from "../../../../types/chat";
+import type { AccountInfo } from "../../../lib/api-settings";
+
+/** Text colour for a utilisation percentage. Thresholds are shared, not per-caller. */
+export function pctColor(pct: number): string {
+  if (pct >= 90) return "text-error";
+  if (pct >= 70) return "text-warning";
+  return "text-success";
+}
+
+/** Fill colour for a utilisation bar — same thresholds as `pctColor`. */
+export function barColor(pct: number): string {
+  if (pct >= 90) return "bg-error";
+  if (pct >= 70) return "bg-warning";
+  return "bg-success";
+}
+
+/**
+ * "Resets in" for a bucket, from whichever of the three shapes the server sent.
+ * Returns null when the bucket carries no reset information at all.
+ */
+export function formatResetTime(bucket?: LimitBucket): string | null {
+  if (!bucket) return null;
+  let totalMins: number | null = null;
+  if (bucket.resetsInMinutes != null) {
+    totalMins = bucket.resetsInMinutes;
+  } else if (bucket.resetsInHours != null) {
+    totalMins = Math.round(bucket.resetsInHours * 60);
+  } else if (bucket.resetsAt) {
+    const diff = new Date(bucket.resetsAt).getTime() - Date.now();
+    totalMins = diff > 0 ? Math.ceil(diff / 60_000) : 0;
+  }
+  if (totalMins == null) return null;
+  if (totalMins <= 0) return "now";
+  const d = Math.floor(totalMins / 1440);
+  const h = Math.floor((totalMins % 1440) / 60);
+  const m = totalMins % 60;
+  if (d > 0) return m > 0 ? `${d}d ${h}h ${m}m` : h > 0 ? `${d}d ${h}h` : `${d}d`;
+  if (h > 0) return m > 0 ? `${h}h ${m}m` : `${h}h`;
+  return `${m}m`;
+}
+
+/** Time until a token expires. Takes milliseconds. */
+export function formatExpiry(expiresAtMs: number): string {
+  const diff = expiresAtMs - Date.now();
+  if (diff <= 0) return "expired";
+  const mins = Math.ceil(diff / 60_000);
+  const h = Math.floor(mins / 60);
+  const d = Math.floor(h / 24);
+  if (d > 0) return `${d}d ${h % 24}h`;
+  if (h > 0) return `${h}h ${mins % 60}m`;
+  return `${mins}m`;
+}
+
+/**
+ * Human-readable token status.
+ *
+ * An expired token with a refresh token is only a warning, not an error: the server renews
+ * it on the next call. Without one it is genuinely dead, which is why the two cases differ.
+ */
+export function tokenStatus(info?: AccountInfo): { label: string; tip: string; color: string } {
+  if (!info) return { label: "unknown", tip: "No account info available", color: "text-text-subtle" };
+  if (!info.expiresAt) return { label: "key", tip: "API key (no expiry)", color: "text-text-subtle" };
+  const expired = info.expiresAt * 1000 < Date.now(); // expiresAt is seconds
+  if (expired && info.hasRefreshToken) return { label: "expired", tip: "Token expired but has refresh token — will auto-renew", color: "text-warning" };
+  if (expired) return { label: "expired", tip: "Token expired, no refresh token", color: "text-error" };
+  if (info.hasRefreshToken) return { label: "long-lived", tip: "OAuth token with refresh — long-lived", color: "text-success" };
+  return { label: "temp", tip: "Temporary token without refresh — will expire", color: "text-warning" };
+}
+
+/** Relative age of a timestamp, for "last updated" labels. */
+export function formatLastUpdated(ts: number | null | undefined): string | null {
+  if (!ts) return null;
+  const secs = Math.round((Date.now() - ts) / 1000);
+  if (secs < 5) return "just now";
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  const remainMins = mins % 60;
+  if (hrs < 24) return remainMins > 0 ? `${hrs}h ${remainMins}m ago` : `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}

package/src/web/components/{chat/usage-pattern-chart.tsx → settings/accounts/account-usage-pattern-chart.tsx}

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import { Loader2 } from "lucide-react";
-import { getUsageHistory, type UsageSnapshot } from "../../lib/api-settings";
+import { getUsageHistory, type UsageSnapshot } from "../../../lib/api-settings";
 
 const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 const HOUR_LABELS = Array.from({ length: 24 }, (_, i) => i);

package/src/web/components/settings/accounts/accounts-pane-header.tsx

@@ -0,0 +1,113 @@
+/**
+ * The top of an accounts pane: what this provider is, a refresh, and its action buttons.
+ *
+ * Shared by every provider's pane so the sub-tabs read as one screen. They used to be two
+ * different designs — one on shadcn buttons with dialogs, the other on raw buttons with
+ * forms inline down the page — and switching tabs looked like switching apps.
+ */
+
+import { RefreshCw, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function AccountsPaneHeader({ description, onRefresh, refreshing, disabled, actions }: {
+  /** One line on what these accounts are for. */
+  description: React.ReactNode;
+  onRefresh: () => void;
+  refreshing?: boolean;
+  disabled?: boolean;
+  /** The pane's action buttons, in a wrapping row. */
+  actions: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-2">
+      <div className="flex items-start justify-between gap-3">
+        <p className="text-xs text-muted-foreground">{description}</p>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-8 shrink-0 cursor-pointer"
+          onClick={onRefresh}
+          disabled={disabled || refreshing}
+          title="Refresh"
+          aria-label="Refresh accounts"
+        >
+          <RefreshCw className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+        </Button>
+      </div>
+      <div className="flex flex-wrap gap-2">{actions}</div>
+    </section>
+  );
+}
+
+/**
+ * An inline result message.
+ *
+ * One neutral style, dismissible, for both success and failure: a red banner for "export
+ * failed" next to a green one for "backup downloaded" made the pane look like a form with
+ * validation errors, and the two providers had picked different colours for the same events.
+ */
+export function AccountsPaneMessage({ message, onDismiss }: {
+  message: string | null;
+  onDismiss: () => void;
+}) {
+  if (!message) return null;
+  return (
+    <div className="flex items-start gap-2 text-xs p-2 rounded bg-muted" role="status">
+      <span className="flex-1">{message}</span>
+      <button
+        onClick={onDismiss}
+        className="shrink-0 text-muted-foreground hover:text-foreground cursor-pointer"
+        aria-label="Dismiss message"
+      >
+        <X className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+/**
+ * The row accounts are laid out in: a sideways scroller, one card per account.
+ *
+ * Horizontal everywhere — the chat panel and both settings panes — because the point of the
+ * list is comparing accounts, and stacked vertically you scroll past one to reach the next.
+ * Shared so the three callers cannot end up scrolling in different directions.
+ */
+export function AccountCardRow({ children }: { children: React.ReactNode }) {
+  return (
+    // Negative margin then padding: cards scroll edge to edge while still clearing the
+    // pane's own padding at rest. Snap so a swipe lands on a card rather than between two.
+    <div className="flex gap-2 overflow-x-auto pb-1 -mx-1 px-1 snap-x snap-mandatory scrollbar-thin">
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The card one account is drawn in.
+ *
+ * Shared so a Claude row and a Codex row are the same object on screen even though what goes
+ * inside them differs.
+ */
+export function AccountCardShell({ active, flash, dense, children, ...rest }: {
+  active?: boolean;
+  /** Brief highlight when this account's numbers just changed. */
+  flash?: boolean;
+  /** Tighter padding, for a card that has to fit a fixed narrow width. */
+  dense?: boolean;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...rest}
+      className={[
+        "rounded-md border transition-colors duration-500",
+        dense ? "p-2.5 space-y-1.5" : "p-3 space-y-2",
+        flash ? "bg-primary/10 border-primary/40" : "",
+        active ? "border-primary/30 bg-primary/5" : "border-border/50",
+        rest.className ?? "",
+      ].filter(Boolean).join(" ")}
+    >
+      {children}
+    </div>
+  );
+}

package/src/web/components/settings/accounts/accounts-settings-section.tsx

@@ -0,0 +1,80 @@
+/**
+ * Accounts pane: every provider's sign-ins in one place, one sub-tab each.
+ *
+ * Claude and Codex accounts have nothing in common underneath — separate endpoints
+ * (`/api/accounts/*` vs `/api/codex-accounts/*`), separate login flows (paste-a-code OAuth
+ * vs device code), separate rotation models (per-account settings vs a global strategy). So
+ * they stay separate panes rather than being forced into one list; what they share is the
+ * question the user came here to answer, which is "which accounts does PPM have?".
+ *
+ * A provider's tab only appears when that provider is configured. Only Claude ships in the
+ * default config, so a fresh install would otherwise offer a Codex tab for something the
+ * user never set up.
+ */
+
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { ProviderBadge } from "@/components/chat/provider-selector";
+import { getAISettings } from "../../../lib/api-settings";
+import { ClaudeAccountsSection } from "./claude-accounts-section";
+import { CodexAccountsSection } from "./codex-accounts-section";
+
+/** Providers with an account manager, in tab order. Others have no credentials to manage. */
+const PROVIDER_TABS = [
+  { id: "claude", label: "Claude" },
+  { id: "codex", label: "Codex" },
+] as const;
+
+type ProviderTabId = (typeof PROVIDER_TABS)[number]["id"];
+
+export function AccountsSettingsSection() {
+  // Claude is always present, so it is a safe first paint while the provider list loads —
+  // no spinner for the common case, and no tab bar flash when Codex turns out to be absent.
+  const [configured, setConfigured] = useState<Set<string> | null>(null);
+  const [active, setActive] = useState<ProviderTabId>("claude");
+
+  useEffect(() => {
+    let cancelled = false;
+    getAISettings()
+      .then((s) => { if (!cancelled) setConfigured(new Set(Object.keys(s.providers ?? {}))); })
+      // A failed lookup must not hide Claude accounts — fall back to Claude only.
+      .catch(() => { if (!cancelled) setConfigured(new Set(["claude"])); });
+    return () => { cancelled = true; };
+  }, []);
+
+  const tabs = PROVIDER_TABS.filter((t) => t.id === "claude" || configured?.has(t.id));
+  const showTabBar = tabs.length > 1;
+
+  return (
+    <div className="space-y-4" data-testid="accounts-pane" data-provider={active}>
+      {showTabBar && (
+        <div className="flex gap-1 border-b border-border/50">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActive(tab.id)}
+              data-testid={`accounts-tab-${tab.id}`}
+              aria-current={active === tab.id ? "page" : undefined}
+              className={`flex items-center gap-1.5 px-3 py-2 text-xs rounded-t transition-colors cursor-pointer ${
+                active === tab.id
+                  ? "text-primary border-b-2 border-primary font-medium"
+                  : "text-text-subtle hover:text-text-secondary"
+              }`}
+            >
+              <ProviderBadge providerId={tab.id} />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {configured === null && !showTabBar && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Loader2 className="size-3 animate-spin" /> Checking configured providers...
+        </div>
+      )}
+
+      {active === "claude" ? <ClaudeAccountsSection /> : <CodexAccountsSection />}
+    </div>
+  );
+}

package/src/web/components/settings/accounts/claude-accounts-section.tsx

@@ -0,0 +1,169 @@
+/**
+ * Claude accounts: added, removed, enabled, exported, imported and rotated here.
+ *
+ * It used to live behind the chat usage chip, where a 350px-tall strip had to carry an
+ * account list, four dialogs and a delete confirmation. The chip keeps what it is good at —
+ * showing the current session's usage — and management moved here, so there is a single
+ * place that can add or remove an account rather than two that can drift.
+ */
+
+import { useState } from "react";
+import { Download, KeyRound, Loader2, Plus, Settings, Upload, FlaskConical } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { AccountCardRow, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
+import { patchAccount, deleteAccount, type OAuthProfileData } from "../../../lib/api-settings";
+import { AccountProfilePanel } from "./account-profile-panel";
+import { AccountDeleteConfirm } from "./account-delete-confirm";
+import { AccountCard } from "./account-card";
+import { AddAccountDialog } from "./account-add-dialog";
+import { ExportAccountsDialog } from "./account-export-dialog";
+import { ImportAccountsDialog } from "./account-import-dialog";
+import { AccountRotationSettings } from "./account-rotation-settings";
+import { AccountTokenTestDialog } from "./account-token-test-dialog";
+import { useAccountsData } from "./use-accounts-data";
+import { formatLastUpdated } from "./account-usage-format";
+
+export function ClaudeAccountsSection() {
+  const { usages, accounts, activeAccountId, initialLoading, refreshing, flashIds, reload } = useAccountsData();
+
+  const [message, setMessage] = useState<string | null>(null);
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; display: string } | null>(null);
+  const [profileView, setProfileView] = useState<{ profile: OAuthProfileData; accountId: string } | null>(null);
+  const [exportPreselect, setExportPreselect] = useState<string | null>(null);
+  const [dialog, setDialog] = useState<"add" | "export" | "import" | "rotation" | "token-test" | null>(null);
+
+  function handleSuccess(msg?: string) {
+    void reload();
+    if (msg) setMessage(msg);
+  }
+
+  async function handleToggle(id: string, status: string) {
+    // Enabling a parked account makes the server prove its token first, which is a network
+    // round trip that can come back 400 — and `patchAccount` throws on that. Without the
+    // catch, the message the server took care to write reaches nobody and the switch just
+    // snaps back. The pending flag is because that trip can take most of a minute.
+    setTogglingId(id);
+    try {
+      await patchAccount(id, { status: status === "disabled" ? "active" : "disabled" });
+    } catch (e) {
+      setMessage((e as Error).message);
+    }
+    setTogglingId(null);
+    void reload();
+  }
+
+  async function confirmDelete() {
+    if (!deleteTarget) return;
+    try {
+      await deleteAccount(deleteTarget.id);
+      setMessage(`Account "${deleteTarget.display}" removed.`);
+      void reload();
+    } catch (e) {
+      setMessage(`Failed to remove: ${(e as Error).message}`);
+    }
+    setDeleteTarget(null);
+  }
+
+  const accountMap = new Map(accounts.map((a) => [a.id, a]));
+  const lastFetched = usages[0]?.usage.lastFetchedAt;
+
+  return (
+    <div className="space-y-4">
+      <AccountsPaneHeader
+        description="Connect multiple Claude accounts. PPM rotates between them automatically to avoid rate limits."
+        onRefresh={() => void reload()}
+        refreshing={refreshing}
+        disabled={initialLoading}
+        actions={<>
+          <Button size="sm" className="cursor-pointer gap-1.5" onClick={() => setDialog("add")}>
+            <Plus className="size-4" /> Add account
+          </Button>
+          <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => { setExportPreselect(null); setDialog("export"); }}>
+            <Download className="size-4" /> Export
+          </Button>
+          <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => setDialog("import")}>
+            <Upload className="size-4" /> Import
+          </Button>
+          <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => setDialog("rotation")}>
+            <Settings className="size-4" /> Rotation
+          </Button>
+          <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => setDialog("token-test")}>
+            <FlaskConical className="size-4" /> Token test
+          </Button>
+        </>}
+      />
+
+      <AccountsPaneMessage message={message} onDismiss={() => setMessage(null)} />
+
+      <section className="space-y-2">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium">Accounts</h3>
+          {lastFetched && (
+            <span className="text-[10px] text-muted-foreground">
+              usage {formatLastUpdated(new Date(lastFetched).getTime())}
+            </span>
+          )}
+        </div>
+
+        {initialLoading ? (
+          <div className="flex items-center gap-2 py-6 text-xs text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" /> Loading accounts...
+          </div>
+        ) : usages.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 py-8 text-center">
+            <KeyRound className="size-5 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">No accounts connected yet.</p>
+            <p className="text-xs text-muted-foreground">Add one to start using PPM.</p>
+          </div>
+        ) : (
+          <AccountCardRow>
+            {usages.map((entry) => (
+              <AccountCard
+                layout="strip"
+                key={entry.accountId}
+                entry={entry}
+                isActive={entry.accountId === activeAccountId}
+                accountInfo={accountMap.get(entry.accountId)}
+                onToggle={handleToggle}
+                toggling={togglingId === entry.accountId}
+                onDelete={(id, display) => setDeleteTarget({ id, display })}
+                onExport={(id) => { setExportPreselect(id); setDialog("export"); }}
+                onViewProfile={(profile, accountId) => setProfileView({ profile, accountId })}
+                flash={flashIds.has(entry.accountId)}
+              />
+            ))}
+          </AccountCardRow>
+        )}
+      </section>
+
+      {profileView && (
+        <AccountProfilePanel
+          profile={profileView.profile}
+          accountId={profileView.accountId}
+          onClose={() => setProfileView(null)}
+        />
+      )}
+
+      {deleteTarget && (
+        <AccountDeleteConfirm
+          display={deleteTarget.display}
+          onConfirm={() => void confirmDelete()}
+          onCancel={() => setDeleteTarget(null)}
+        />
+      )}
+
+      <AddAccountDialog open={dialog === "add"} onOpenChange={(v) => setDialog(v ? "add" : null)} onSuccess={handleSuccess} />
+      <ExportAccountsDialog
+        open={dialog === "export"}
+        onOpenChange={(v) => { setDialog(v ? "export" : null); if (!v) setExportPreselect(null); }}
+        accounts={accounts}
+        preselectId={exportPreselect}
+        onMessage={setMessage}
+      />
+      <ImportAccountsDialog open={dialog === "import"} onOpenChange={(v) => setDialog(v ? "import" : null)} onSuccess={handleSuccess} />
+      <AccountRotationSettings open={dialog === "rotation"} onOpenChange={(v) => setDialog(v ? "rotation" : null)} />
+      <AccountTokenTestDialog open={dialog === "token-test"} onOpenChange={(v) => setDialog(v ? "token-test" : null)} accounts={accounts} />
+    </div>
+  );
+}

package/src/web/components/settings/accounts/codex-accounts-section.tsx

@@ -0,0 +1,144 @@
+/**
+ * Codex accounts pane.
+ *
+ * Same shape as the Claude pane — shared header, shared message strip, shared account card,
+ * shared usage bar, and every action behind a dialog — because the two sit next to each other
+ * as sub-tabs and used to look like two different products.
+ */
+
+import { useState } from "react";
+import { Download, KeyRound, Loader2, Plus, Settings, Trash2, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { AccountCardRow, AccountCardShell, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
+import { AccountUsageBar } from "./account-bucket-row";
+import { CodexAddAccountDialog } from "./codex-add-account-dialog";
+import { CodexBackupDialog } from "./codex-backup-dialog";
+import { CodexRotationDialog } from "./codex-rotation-dialog";
+import { useCodexAccounts } from "./use-codex-accounts";
+
+/** Usage arrives as a 0-1 fraction; the shared bar wants whole percent. */
+function toPct(v?: number): number | null { return v != null ? Math.round(v * 100) : null; }
+
+/** Codex multi-account management, separate from Claude accounts because codex auth is owned
+ *  by the app-server per CODEX_HOME. Added by API key or ChatGPT device code. */
+export function CodexAccountsSection() {
+  const [dialog, setDialog] = useState<"add" | "export" | "import" | "rotation" | null>(null);
+  const c = useCodexAccounts(() => setDialog(null));
+
+  return (
+    <div className="space-y-4">
+      <AccountsPaneHeader
+        description={<>Each Codex account keeps its own login (<code>CODEX_HOME</code>). One is picked per chat by the rotation setting.</>}
+        onRefresh={() => void c.load()}
+        refreshing={c.loading}
+        actions={<>
+          <Button size="sm" className="cursor-pointer gap-1.5" onClick={() => setDialog("add")}>
+            <Plus className="size-4" /> Add account
+          </Button>
+          <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => setDialog("export")}>
+            <Download className="size-4" /> Export
+          </Button>
+          <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => setDialog("import")}>
+            <Upload className="size-4" /> Import
+          </Button>
+          <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => setDialog("rotation")}>
+            <Settings className="size-4" /> Rotation
+          </Button>
+        </>}
+      />
+
+      {/* Errors show here too, so a failure that happened behind a dialog is not lost when
+          the dialog closes. */}
+      <AccountsPaneMessage message={c.msg ?? c.err} onDismiss={() => { c.setMsg(null); c.setErr(null); }} />
+
+      <section className="space-y-2">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium">Codex Accounts</h3>
+          <span className="text-[10px] text-muted-foreground capitalize">{c.strategy.replace("-", " ")}</span>
+        </div>
+
+        {c.loading && c.accounts.length === 0 ? (
+          <div className="flex items-center gap-2 py-6 text-xs text-muted-foreground">
+            <Loader2 className="size-4 animate-spin" /> Loading accounts...
+          </div>
+        ) : c.accounts.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 py-8 text-center">
+            <KeyRound className="size-5 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">No Codex accounts yet.</p>
+            <p className="text-xs text-muted-foreground">
+              Chats use your default <code>~/.codex</code> login until you add one.
+            </p>
+          </div>
+        ) : (
+          <AccountCardRow>
+            {c.accounts.map((a) => {
+              const u = c.usages[a.id] ?? {};
+              return (
+                <AccountCardShell
+                  key={a.id}
+                  dense
+                  // Matches the Claude card that also carries a control beside the name.
+                  className="min-w-[300px] shrink-0 snap-start"
+                  data-testid="account-card"
+                  data-account-id={a.id}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium truncate flex-1 min-w-0">{a.label}</span>
+                    <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1 shrink-0">
+                      {a.type}
+                    </span>
+                    {a.planType && <span className="text-[10px] text-text-subtle shrink-0">{a.planType}</span>}
+                    <button
+                      type="button"
+                      onClick={() => void c.remove(a.id)}
+                      title="Remove account"
+                      aria-label="Remove account"
+                      className="p-2 rounded cursor-pointer text-text-subtle hover:text-error hover:bg-surface-elevated transition-colors shrink-0"
+                    >
+                      <Trash2 className="size-4" />
+                    </button>
+                  </div>
+                  <div className="space-y-2">
+                    <AccountUsageBar label="5-Hour Session" pct={toPct(u.fiveHour)} />
+                    <AccountUsageBar label="Weekly" pct={toPct(u.sevenDay)} />
+                  </div>
+                </AccountCardShell>
+              );
+            })}
+          </AccountCardRow>
+        )}
+      </section>
+
+      <CodexAddAccountDialog
+        open={dialog === "add"}
+        onOpenChange={(v) => setDialog(v ? "add" : null)}
+        label={c.label}
+        onLabelChange={c.setLabel}
+        apiKey={c.apiKey}
+        onApiKeyChange={c.setApiKey}
+        adding={c.adding}
+        onAddApiKey={() => void c.addApiKey()}
+        deviceWaiting={c.deviceWaiting}
+        onStartDevice={() => void c.startDevice()}
+        device={c.device}
+        error={c.err}
+      />
+      <CodexBackupDialog
+        mode={dialog === "export" ? "export" : dialog === "import" ? "import" : null}
+        onOpenChange={(v) => { if (!v) setDialog(null); }}
+        password={c.backupPassword}
+        onPasswordChange={c.setBackupPassword}
+        busy={c.exporting || c.importing}
+        onExport={() => void c.doExport()}
+        onImport={(f) => void c.doImport(f)}
+        error={c.err}
+      />
+      <CodexRotationDialog
+        open={dialog === "rotation"}
+        onOpenChange={(v) => setDialog(v ? "rotation" : null)}
+        strategy={c.strategy}
+        onChange={(v) => void c.changeStrategy(v)}
+      />
+    </div>
+  );
+}