@hienlh/ppm 0.19.2 → 0.19.4

package/src/web/components/settings/accounts/account-export-dialog.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2, Download, Copy, Lock } from "lucide-react";
+import { getAuthToken } from "../../../lib/api-client";
+import { copyToClipboard } from "@/lib/clipboard";
+import type { AccountInfo } from "../../../lib/api-settings";
+import { DEFAULT_PASSWORD, downloadBackup } from "./account-backup-format";
+
+// ── Export Accounts Dialog ──────────────────────────────────────────
+
+interface ExportAccountsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  accounts: AccountInfo[];
+  preselectId?: string | null;
+  onMessage?: (msg: string) => void;
+}
+
+export function ExportAccountsDialog({ open, onOpenChange, accounts, preselectId, onMessage }: ExportAccountsDialogProps) {
+  const exportable = accounts.filter((a) => a.hasRefreshToken);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [password, setPassword] = useState("");
+  const [fullTransfer, setFullTransfer] = useState(false);
+  const [refreshBefore, setRefreshBefore] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+
+  // Initialize selection when dialog opens
+  if (open && !initialized) {
+    setSelected(preselectId ? new Set([preselectId]) : new Set(exportable.map((a) => a.id)));
+    setInitialized(true);
+  }
+  if (!open && initialized) {
+    setInitialized(false);
+  }
+
+  function handleClose() {
+    onOpenChange(false);
+    setPassword("");
+    setFullTransfer(false);
+    setRefreshBefore(false);
+  }
+
+  async function doExport(toClipboard: boolean) {
+    if (selected.size === 0) return;
+    setExporting(true);
+    const effectivePassword = password.trim() || DEFAULT_PASSWORD;
+    try {
+      const headers: HeadersInit = { "Content-Type": "application/json" };
+      const token = getAuthToken();
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      const res = await fetch("/api/accounts/export", {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ password: effectivePassword, accountIds: [...selected], includeRefreshToken: fullTransfer, refreshBeforeExport: refreshBefore }),
+      });
+      if (!res.ok) { const j = await res.json() as any; throw new Error(j.error ?? `Export failed: ${res.status}`); }
+      const text = await res.text();
+      if (toClipboard) {
+        if (await copyToClipboard(text)) {
+          onMessage?.("Backup copied to clipboard!");
+        } else {
+          downloadBackup(text);
+          onMessage?.("Backup downloaded.");
+        }
+      } else {
+        downloadBackup(text);
+        onMessage?.("Backup downloaded.");
+      }
+      handleClose();
+    } catch { /* silent */ }
+    setExporting(false);
+  }
+
+  const valid = selected.size > 0 && !exporting;
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm flex items-center gap-1.5"><Lock className="size-3.5" /> Export Accounts</DialogTitle>
+          <DialogDescription className="text-xs">Select accounts and set a password to protect the backup.</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          {/* Account selection */}
+          <div className="space-y-1">
+            <div className="flex items-center justify-between mb-1">
+              <p className="text-[11px] font-medium text-muted-foreground">Accounts to export</p>
+              <button className="text-[10px] text-primary hover:underline cursor-pointer" onClick={() => setSelected(selected.size === exportable.length ? new Set() : new Set(exportable.map((a) => a.id)))}>
+                {selected.size === exportable.length ? "Deselect all" : "Select all"}
+              </button>
+            </div>
+            {exportable.length === 0 ? (
+              <p className="text-[10px] text-muted-foreground p-2 border rounded">No exportable accounts.</p>
+            ) : (
+              <div className="max-h-36 overflow-y-auto space-y-1 border rounded p-2">
+                {exportable.map((acc) => (
+                  <div key={acc.id} className="flex items-center gap-2">
+                    <input type="checkbox" id={`exp-${acc.id}`} checked={selected.has(acc.id)} onChange={(e) => { const s = new Set(selected); e.target.checked ? s.add(acc.id) : s.delete(acc.id); setSelected(s); }} className="size-3.5 accent-primary cursor-pointer" />
+                    <label htmlFor={`exp-${acc.id}`} className="text-xs cursor-pointer truncate">
+                      {acc.label ?? acc.email ?? acc.id.slice(0, 8)}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          {/* Password (optional) */}
+          <div className="space-y-1.5">
+            <Label className="text-xs">Password <span className="text-muted-foreground font-normal">(optional)</span></Label>
+            <Input type="password" placeholder="Leave empty for default" value={password} onChange={(e) => setPassword(e.target.value)} className="text-xs h-8" autoComplete="new-password" />
+          </div>
+          {/* Options */}
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="exp-full" checked={fullTransfer} onChange={(e) => setFullTransfer(e.target.checked)} className="size-3.5 accent-primary cursor-pointer" />
+            <label htmlFor="exp-full" className="text-[11px] cursor-pointer">Include refresh tokens (full transfer)</label>
+          </div>
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="exp-refresh" checked={refreshBefore} onChange={(e) => setRefreshBefore(e.target.checked)} className="size-3.5 accent-primary cursor-pointer" />
+            <label htmlFor="exp-refresh" className="text-[11px] cursor-pointer">Refresh tokens before export</label>
+          </div>
+          {/* Warning */}
+          {fullTransfer ? (
+            <div className="rounded-md border border-error/30 bg-error/5 p-2.5">
+              <p className="text-[10px] font-medium text-error">Full transfer — source accounts will expire</p>
+              <p className="text-[10px] text-muted-foreground">Refresh tokens included. Source machine expires in ~1h after target refreshes.</p>
+            </div>
+          ) : refreshBefore ? (
+            <div className="rounded-md border border-warning/30 bg-warning/5 p-2.5">
+              <p className="text-[10px] font-medium text-warning">Refresh before export — invalidates previous shares</p>
+            </div>
+          ) : (
+            <div className="rounded-md border border-success/30 bg-success/5 p-2.5">
+              <p className="text-[10px] font-medium text-success">Share current token (safe)</p>
+            </div>
+          )}
+          <p className="text-[10px] text-muted-foreground">Encrypted with AES-256-GCM + scrypt.</p>
+        </div>
+        <DialogFooter className="gap-1.5 flex-col sm:flex-row">
+          <Button size="sm" variant="outline" className="text-xs h-7 cursor-pointer" onClick={handleClose}>Cancel</Button>
+          <Button size="sm" variant="outline" className="text-xs h-7 cursor-pointer" disabled={!valid} onClick={() => doExport(true)}>
+            <Copy className="size-3 mr-1" /> Copy
+          </Button>
+          <Button size="sm" className="text-xs h-7 cursor-pointer" disabled={!valid} onClick={() => doExport(false)}>
+            {exporting ? <><Loader2 className="size-3 animate-spin mr-1" /> Exporting...</> : <><Download className="size-3 mr-1" /> Download</>}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/settings/accounts/account-export-simulation.tsx

@@ -0,0 +1,196 @@
+/**
+ * Export simulation: run an export and compare the token before, in, and after it.
+ *
+ * Exists because exporting an OAuth account can rotate the stored token as a side effect —
+ * so "the exported file works" and "the account still works" are two different questions.
+ * Each run appends a round instead of replacing the last one, because the interesting
+ * signal is the difference BETWEEN runs.
+ *
+ * Tokens are shown as previews from the server; the full values are only ever handed back
+ * to the probe endpoint, never rendered or logged.
+ */
+
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import {
+  testExport, testRawToken,
+  type AccountInfo, type ExportedTokenInfo,
+} from "../../../lib/api-settings";
+
+interface Round {
+  round: number;
+  time: string;
+  includeRefresh: boolean;
+  items: ExportedTokenInfo[];
+}
+
+interface RawTest {
+  loading: boolean;
+  status?: string;
+  code?: number;
+  error?: string;
+}
+
+/** Minutes left, or "exp". `expires` is in seconds. */
+function shortExpiry(expires: number): string {
+  const nowSecs = Math.floor(Date.now() / 1000);
+  return expires > nowSecs ? `${Math.floor((expires - nowSecs) / 60)}m` : "exp";
+}
+
+export function AccountExportSimulation({ accounts }: { accounts: AccountInfo[] }) {
+  const [rounds, setRounds] = useState<Round[]>([]);
+  const [running, setRunning] = useState(false);
+  const [includeRefresh, setIncludeRefresh] = useState(false);
+  const [rawTests, setRawTests] = useState<Map<string, RawTest>>(new Map());
+
+  const exportable = accounts.filter((a) => a.hasRefreshToken);
+
+  async function run() {
+    if (exportable.length === 0) return;
+    setRunning(true);
+    try {
+      const items = await testExport(exportable.map((a) => a.id), includeRefresh);
+      setRounds((prev) => [
+        ...prev,
+        { round: prev.length + 1, time: new Date().toLocaleTimeString(), includeRefresh, items },
+      ]);
+    } catch {
+      /* the rounds already on screen stay useful; a failed run just adds nothing */
+    }
+    setRunning(false);
+  }
+
+  async function probe(key: string, token: string) {
+    setRawTests((prev) => new Map(prev).set(key, { loading: true }));
+    try {
+      const result = await testRawToken(token);
+      setRawTests((prev) => new Map(prev).set(key, { loading: false, ...result }));
+    } catch (e) {
+      setRawTests((prev) => new Map(prev).set(key, { loading: false, status: "error", error: (e as Error).message }));
+    }
+  }
+
+  function rowsFor(round: Round, item: ExportedTokenInfo) {
+    return [
+      { key: `r${round.round}-pre-${item.id}`, label: "Pre-export", token: item.preExportTokenFull, preview: item.preExportToken, expires: item.preExportExpires },
+      { key: `r${round.round}-exp-${item.id}`, label: "Exported", token: item.exportedTokenFull, preview: item.exportedToken, expires: item.exportedExpires },
+      { key: `r${round.round}-post-${item.id}`, label: "Post-export", token: item.postExportTokenFull, preview: item.postExportToken, expires: item.postExportExpires },
+    ];
+  }
+
+  function probeEverything() {
+    for (const round of rounds) {
+      for (const item of round.items) {
+        for (const row of rowsFor(round, item)) {
+          if (row.token) void probe(row.key, row.token);
+        }
+      }
+    }
+  }
+
+  return (
+    <section className="border-t pt-4 space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs font-medium">Simulate export</p>
+        {rounds.length > 0 && (
+          <span className="text-[10px] text-muted-foreground">{rounds.length} round(s)</span>
+        )}
+      </div>
+      <p className="text-[11px] text-muted-foreground">
+        Every run appends a round. Earlier rounds are kept so tokens can be compared across runs.
+      </p>
+
+      {exportable.length === 0 ? (
+        <p className="text-xs text-muted-foreground">No OAuth account with a refresh token to export.</p>
+      ) : (
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5">
+            <Switch
+              id="sim-include-refresh"
+              checked={includeRefresh}
+              onCheckedChange={setIncludeRefresh}
+              className="cursor-pointer"
+            />
+            <Label htmlFor="sim-include-refresh" className="text-[11px] cursor-pointer">
+              Include refresh tokens
+            </Label>
+          </div>
+          <Button size="sm" className="h-7 text-xs cursor-pointer" disabled={running} onClick={() => void run()}>
+            {running ? <><Loader2 className="size-3 animate-spin mr-1" /> Exporting...</> : `Run export #${rounds.length + 1}`}
+          </Button>
+        </div>
+      )}
+
+      {rounds.length > 0 && (
+        <div className="space-y-3">
+          <Button
+            size="sm"
+            variant="outline"
+            className="w-full h-7 text-[11px] cursor-pointer"
+            onClick={probeEverything}
+          >
+            Test all tokens ({rounds.reduce((n, r) => n + r.items.length * 3, 0)})
+          </Button>
+
+          {rounds.map((round) => (
+            <div key={round.round} className="space-y-1.5">
+              <div className="flex items-center gap-2">
+                <p className="text-xs font-medium text-primary">Round #{round.round}</p>
+                <span className="text-[10px] text-muted-foreground">{round.time}</span>
+                <Badge variant={round.includeRefresh ? "destructive" : "secondary"} className="text-[9px] px-1 py-0">
+                  {round.includeRefresh ? "with refresh" : "access only"}
+                </Badge>
+              </div>
+              {round.items.map((item) => (
+                <div key={`r${round.round}-${item.id}`} className="p-2 rounded-lg border bg-card space-y-1.5">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11px] font-medium">{item.label ?? item.email ?? item.id.slice(0, 8)}</span>
+                    {item.tokenChanged && (
+                      <Badge variant="secondary" className="text-[9px] px-1 py-0">DB token changed</Badge>
+                    )}
+                  </div>
+                  {rowsFor(round, item).map((row) => {
+                    const test = rawTests.get(row.key);
+                    return (
+                      <div key={row.key} className="flex items-center gap-1.5 text-[11px]">
+                        <span className="w-20 shrink-0 text-muted-foreground text-[10px]">{row.label}</span>
+                        <code className="flex-1 truncate font-mono text-[10px] bg-muted px-1 rounded">
+                          {row.preview ?? "N/A"}
+                        </code>
+                        {row.expires && (
+                          <span className="text-[10px] text-muted-foreground shrink-0">{shortExpiry(row.expires)}</span>
+                        )}
+                        {row.token ? (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="h-6 text-[10px] px-1.5 cursor-pointer shrink-0"
+                            disabled={test?.loading}
+                            onClick={() => void probe(row.key, row.token!)}
+                          >
+                            {test?.loading ? <Loader2 className="size-3 animate-spin" /> : "Test"}
+                          </Button>
+                        ) : (
+                          <span className="text-[10px] text-muted-foreground">-</span>
+                        )}
+                        {test && !test.loading && (
+                          <span className={`text-[10px] font-medium shrink-0 ${test.status?.startsWith("valid") ? "text-success" : "text-error"}`}>
+                            {test.status}
+                          </span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/web/components/settings/accounts/account-import-dialog.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2, Lock } from "lucide-react";
+import { importAccounts } from "../../../lib/api-settings";
+import { DEFAULT_PASSWORD } from "./account-backup-format";
+
+// ── Import Accounts Dialog ─────────────────────────────────────────
+
+interface ImportAccountsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: (msg?: string) => void;
+}
+
+export function ImportAccountsDialog({ open, onOpenChange, onSuccess }: ImportAccountsDialogProps) {
+  const [data, setData] = useState("");
+  const [password, setPassword] = useState("");
+  const [importing, setImporting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function handleClose() {
+    onOpenChange(false);
+    setData("");
+    setPassword("");
+    setError(null);
+  }
+
+  async function doImport() {
+    if (!data.trim()) return;
+    setImporting(true);
+    setError(null);
+    try {
+      const result = await importAccounts({ data: data.trim(), password: password.trim() || DEFAULT_PASSWORD });
+      handleClose();
+      onSuccess(`Imported ${result.imported} account(s)`);
+    } catch (e) {
+      setError((e as Error).message || "Import failed");
+    }
+    setImporting(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm flex items-center gap-1.5"><Lock className="size-3.5" /> Import Accounts</DialogTitle>
+          <DialogDescription className="text-xs">Paste backup data and enter the export password. Imported accounts are temporary (~1h).</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label className="text-xs">Backup data</Label>
+            <textarea value={data} onChange={(e) => setData(e.target.value)} placeholder="Paste backup JSON here..." rows={4} className="w-full text-xs p-2 rounded border border-border bg-background font-mono resize-none focus:outline-none focus:ring-1 focus:ring-primary" />
+          </div>
+          <div className="space-y-1.5">
+            <Label className="text-xs">Password <span className="text-muted-foreground font-normal">(optional)</span></Label>
+            <Input type="password" placeholder="Leave empty for default" value={password} onChange={(e) => setPassword(e.target.value)} className="text-xs h-8" autoComplete="current-password" />
+          </div>
+        </div>
+        {error && <div className="text-[11px] p-2 rounded bg-error/10 text-error">{error}</div>}
+        <DialogFooter>
+          <Button size="sm" variant="outline" className="text-xs h-7 cursor-pointer" onClick={handleClose}>Cancel</Button>
+          <Button size="sm" className="text-xs h-7 cursor-pointer" disabled={!data.trim() || importing} onClick={doImport}>
+            {importing ? <><Loader2 className="size-3 animate-spin mr-1" /> Importing...</> : "Import"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/settings/accounts/account-profile-panel.tsx

@@ -0,0 +1,52 @@
+/**
+ * The OAuth profile behind an account: who it belongs to, which organisation, which tier —
+ * plus that account's usage history chart.
+ *
+ * Only the fields the server actually sent are rendered; a missing organisation is normal
+ * for a personal account and should not leave labelled blanks on screen.
+ */
+
+import { X } from "lucide-react";
+import type { OAuthProfileData } from "../../../lib/api-settings";
+import { UsagePatternChart } from "./account-usage-pattern-chart";
+
+export function AccountProfilePanel({ profile, accountId, onClose }: {
+  profile: OAuthProfileData;
+  accountId: string;
+  onClose: () => void;
+}) {
+  const rows: [string, string | undefined][] = [
+    ["Name", profile.account?.display_name],
+    ["Email", profile.account?.email],
+    ["Org", profile.organization?.name],
+    ["Type", profile.organization?.organization_type],
+    ["Tier", profile.organization?.rate_limit_tier],
+    ["Status", profile.organization?.subscription_status],
+  ];
+
+  return (
+    <section className="space-y-2 border-t border-border pt-3" data-testid="account-profile-panel">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium">Profile</h3>
+        <button
+          className="p-2 text-muted-foreground hover:text-foreground cursor-pointer"
+          onClick={onClose}
+          aria-label="Close profile"
+        >
+          <X className="size-4" />
+        </button>
+      </div>
+      <div className="grid grid-cols-[80px_1fr] gap-x-3 gap-y-1 text-xs">
+        {rows.map(([label, value]) =>
+          value ? (
+            <span key={label} className="contents">
+              <span className="text-muted-foreground">{label}</span>
+              <span className="break-all">{value}</span>
+            </span>
+          ) : null,
+        )}
+      </div>
+      <UsagePatternChart accountId={accountId} />
+    </section>
+  );
+}

package/src/web/components/{chat → settings/accounts}/account-rotation-settings.tsx

@@ -8,7 +8,7 @@ import {
   getAccountSettings,
   updateAccountSettings,
   type AccountSettings,
-} from "../../lib/api-settings";
+} from "../../../lib/api-settings";
 
 interface AccountRotationSettingsProps {
   open: boolean;

package/src/web/components/settings/accounts/account-token-test-dialog.tsx

@@ -0,0 +1,147 @@
+/**
+ * Token diagnostics: does each stored token still authenticate?
+ *
+ * Read-only against the accounts — it asks the server to probe a token and reports the
+ * status. Nothing here rotates, parks, or rewrites an account, which is why it can be run
+ * freely while chasing an auth problem.
+ */
+
+import { useState } from "react";
+import { FlaskConical, Loader2 } from "lucide-react";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { testAccountToken, type AccountInfo, type TokenTestResult } from "../../../lib/api-settings";
+import { AccountExportSimulation } from "./account-export-simulation";
+
+interface TestState {
+  loading: boolean;
+  result?: TokenTestResult;
+  error?: string;
+}
+
+/** Minutes until expiry, or how long ago it lapsed. `expiresAt` is in seconds. */
+function expiryLabel(expiresAt: number): string {
+  const nowSecs = Math.floor(Date.now() / 1000);
+  const mins = Math.floor(Math.abs(expiresAt - nowSecs) / 60);
+  return expiresAt > nowSecs ? `${mins}m left` : `expired ${mins}m ago`;
+}
+
+export function AccountTokenTestDialog({ open, onOpenChange, accounts }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  accounts: AccountInfo[];
+}) {
+  const [results, setResults] = useState<Map<string, TestState>>(new Map());
+  const [alsoTestRefresh, setAlsoTestRefresh] = useState(false);
+
+  async function runTest(id: string) {
+    setResults((prev) => new Map(prev).set(id, { loading: true }));
+    try {
+      const result = await testAccountToken(id, alsoTestRefresh);
+      setResults((prev) => new Map(prev).set(id, { loading: false, result }));
+    } catch (e) {
+      setResults((prev) => new Map(prev).set(id, { loading: false, error: (e as Error).message }));
+    }
+  }
+
+  /** Only OAuth accounts have a token that can expire; an API key has nothing to probe. */
+  function runAll() {
+    for (const acc of accounts.filter((a) => a.expiresAt !== null)) void runTest(acc.id);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="text-sm flex items-center gap-1.5">
+            <FlaskConical className="size-4" /> Token Test
+          </DialogTitle>
+          <DialogDescription className="text-xs">
+            Probe stored tokens for validity. Nothing is modified.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 overflow-y-auto flex-1 pr-1">
+          <section className="space-y-2">
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-xs font-medium">Current tokens</p>
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-1.5">
+                  <Switch
+                    id="token-test-refresh"
+                    checked={alsoTestRefresh}
+                    onCheckedChange={setAlsoTestRefresh}
+                    className="cursor-pointer"
+                  />
+                  <Label htmlFor="token-test-refresh" className="text-[11px] cursor-pointer">
+                    Also test refresh
+                  </Label>
+                </div>
+                <Button size="sm" variant="outline" className="h-7 text-xs cursor-pointer" onClick={runAll}>
+                  Test all
+                </Button>
+              </div>
+            </div>
+
+            {accounts.length === 0 && (
+              <p className="text-xs text-muted-foreground">No accounts to test.</p>
+            )}
+
+            <div className="space-y-1.5">
+              {accounts.map((acc) => {
+                const state = results.get(acc.id);
+                const status = state?.result?.accessToken.status;
+                return (
+                  <div key={acc.id} className="p-2 rounded border bg-card space-y-1">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="min-w-0 flex-1">
+                        <span className="text-xs font-medium truncate block">
+                          {acc.label ?? acc.email ?? acc.id.slice(0, 8)}
+                        </span>
+                        {acc.expiresAt && (
+                          <span className="text-[10px] text-muted-foreground">{expiryLabel(acc.expiresAt)}</span>
+                        )}
+                      </div>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="h-7 text-xs cursor-pointer shrink-0"
+                        disabled={state?.loading}
+                        onClick={() => void runTest(acc.id)}
+                      >
+                        {state?.loading ? <Loader2 className="size-3 animate-spin" /> : "Test"}
+                      </Button>
+                    </div>
+                    {state && !state.loading && (
+                      <div className="text-[11px] pl-2 border-l-2 border-muted">
+                        {state.error && <p className="text-error">{state.error}</p>}
+                        {status && (
+                          <span className={status.startsWith("valid") ? "text-success" : "text-error"}>
+                            {status}
+                            {state.result?.accessToken.code ? ` (${state.result.accessToken.code})` : ""}
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+
+          <AccountExportSimulation accounts={accounts} />
+        </div>
+
+        <DialogFooter>
+          <Button size="sm" variant="outline" className="text-xs cursor-pointer" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}