feat(codex): add Codex accounts panel in provider settings (PR 4/5)

apps/desktop-tauri/src/styles.css

@@ -2446,6 +2446,44 @@ body:has(.tray-panel-reveal) {
   font-size: 0.82rem;
 }
 
+/* ── Codex multi-account (ADR 0003) ─────────────────────────────────── */
+
+.provider-detail-note {
+  background: rgba(34, 197, 94, 0.08);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  color: var(--provider-status-ok, #4ade80);
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-bottom: 12px;
+  font-size: 0.82rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.codex-accounts-list {
+  gap: 6px;
+}
+
+.codex-accounts-card {
+  padding: 8px 10px;
+}
+
+.codex-accounts-add {
+  margin-top: 8px;
+}
+
+.codex-usage {
+  font-size: 0.74rem;
+  font-weight: 500;
+  color: var(--provider-row-text-secondary);
+}
+
+.codex-usage--blocked {
+  color: var(--provider-status-error);
+}
+
 .provider-detail-pace__stage {
   font-size: 0.86rem;
   font-weight: 600;

apps/desktop-tauri/src/surfaces/settings/providers/ProviderDetailPane.tsx

@@ -30,6 +30,7 @@ import { ChartsSection } from "./sections/charts/ChartsSection";
 import { CookieSourceSection } from "./sections/CookieSourceSection";
 import { RegionSection } from "./sections/RegionSection";
 import { CodexUsageOptions } from "./sections/credentials/CodexUsageOptions";
+import { CodexAccountsSection } from "./sections/credentials/CodexAccountsSection";
 import { TokenAccountsPanel } from "../tokens/TokenAccountsPanel";
 import { ApiKeySection } from "./ApiKeySection";
 import { CookieSection } from "./CookieSection";
@@ -316,6 +317,7 @@ export function ProviderDetailPane({
       />
       <CredentialsDispatcher providerId={detail.id} t={t} />
       {detail.id === "codex" && <CodexUsageOptions t={t} />}
+      {detail.id === "codex" && <CodexAccountsSection t={t} />}
       <CredentialStorageSection
         status={credentialStatus}
         busy={busy}

apps/desktop-tauri/src/surfaces/settings/providers/sections/credentials/CodexAccountsSection.test.tsx

@@ -0,0 +1,142 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type {
+  CodexAccount,
+  CodexAccountsStateBridge,
+  CodexAccountUsageSnapshot,
+  CodexSwitchResult,
+} from "../../../../../types/bridge";
+
+const tauriMocks = vi.hoisted(() => ({
+  getCodexAccountsState: vi.fn(),
+  codexAccountAdd: vi.fn(),
+  codexAccountFetch: vi.fn(),
+  codexAccountRemove: vi.fn(),
+  codexAccountSwitch: vi.fn(),
+  codexAccountRestartDesktop: vi.fn(),
+}));
+
+const eventMocks = vi.hoisted(() => ({
+  listen: vi.fn(() => Promise.resolve(() => {})),
+}));
+
+vi.mock("../../../../../lib/tauri", () => tauriMocks);
+vi.mock("@tauri-apps/api/event", () => eventMocks);
+
+import { CodexAccountsSection } from "./CodexAccountsSection";
+
+const t = (key: string) => key;
+
+function account(id: string, extra: Partial<CodexAccount> = {}): CodexAccount {
+  return {
+    id,
+    nickname: null,
+    emailHint: `user-${id}@example.com`,
+    authSubject: null,
+    providerAccountId: null,
+    codexHomePath: `C:/fake/${id}`,
+    source: "managedByApp",
+    createdAt: "2024-01-01T00:00:00Z",
+    updatedAt: "2024-01-01T00:00:00Z",
+    lastAuthenticatedAt: null,
+    ...extra,
+  };
+}
+
+function snapshot(usedPercent: number, plan = "free"): CodexAccountUsageSnapshot {
+  return {
+    email: "user@example.com",
+    providerAccountId: null,
+    plan,
+    allowed: true,
+    limitReached: false,
+    primaryWindow: { usedPercent, resetAt: null, limitWindowSeconds: 3600 },
+    secondaryWindow: null,
+    credits: null,
+    updatedAt: "2024-01-01T00:00:00Z",
+  };
+}
+
+describe("CodexAccountsSection", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders nothing before the store loads, then lists accounts", async () => {
+    tauriMocks.getCodexAccountsState.mockResolvedValue(
+      { accounts: [account("1"), account("2", { source: "ambient" })], snapshots: {} } as CodexAccountsStateBridge,
+    );
+    const { container } = render(<CodexAccountsSection t={t} />);
+    expect(container.querySelector(".codex-accounts")).toBeNull();
+
+    await waitFor(() => {
+      expect(screen.getByText("user-1@example.com")).toBeDefined();
+    });
+    expect(screen.getByText("user-2@example.com")).toBeDefined();
+    expect(screen.getByText("CodexAccountsSourceManaged")).toBeDefined();
+    expect(screen.getByText("CodexAccountsSourceAmbient")).toBeDefined();
+  });
+
+  it("shows the usage pill and blocked state from a snapshot", async () => {
+    tauriMocks.getCodexAccountsState.mockResolvedValue(
+      {
+        accounts: [account("1")],
+        snapshots: {
+          "1": snapshot(38),
+        },
+      } as CodexAccountsStateBridge,
+    );
+    render(<CodexAccountsSection t={t} />);
+    await waitFor(() => {
+      expect(screen.getByText("free · 38%")).toBeDefined();
+    });
+  });
+
+  it("adds an account and reloads", async () => {
+    tauriMocks.getCodexAccountsState.mockResolvedValueOnce(
+      { accounts: [], snapshots: {} } as CodexAccountsStateBridge,
+    );
+    tauriMocks.getCodexAccountsState.mockResolvedValueOnce(
+      { accounts: [account("1")], snapshots: {} } as CodexAccountsStateBridge,
+    );
+    render(<CodexAccountsSection t={t} />);
+    await waitFor(() => {
+      expect(screen.getByText("CodexAccountsAddButton")).toBeDefined();
+    });
+
+    tauriMocks.codexAccountAdd.mockResolvedValue(account("1"));
+    await act(async () => {
+      screen.getByText("CodexAccountsAddButton").click();
+    });
+    await waitFor(() => {
+      expect(screen.getByText("user-1@example.com")).toBeDefined();
+    });
+    expect(tauriMocks.codexAccountAdd).toHaveBeenCalledTimes(1);
+  });
+
+  it("switches an account and offers a desktop restart when a session can be restored", async () => {
+    tauriMocks.getCodexAccountsState.mockResolvedValue(
+      { accounts: [account("1")], snapshots: {} } as CodexAccountsStateBridge,
+    );
+    tauriMocks.codexAccountSwitch.mockResolvedValue(
+      { desktopSessionRestoreExists: true, desktopSessionRestorePath: "C:/s", desktopSessionBackupPath: null } as CodexSwitchResult,
+    );
+    render(<CodexAccountsSection t={t} />);
+    await waitFor(() => {
+      expect(screen.getByText("CodexAccountsSwitchButton")).toBeDefined();
+    });
+
+    await act(async () => {
+      screen.getByText("CodexAccountsSwitchButton").click();
+    });
+    await waitFor(() => {
+      expect(screen.getByText(/CodexSwitchSuccess/)).toBeDefined();
+    });
+    expect(screen.getByText(/CodexSwitchRestartPrompt/)).toBeDefined();
+
+    await act(async () => {
+      screen.getByText("CodexAccountsRestartDesktop").click();
+    });
+    expect(tauriMocks.codexAccountRestartDesktop).toHaveBeenCalledTimes(1);
+  });
+});