@hienlh/ppm 0.19.1 → 0.19.3

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

@@ -0,0 +1,130 @@
+/**
+ * Add a Codex account: sign in with ChatGPT, or paste an API key.
+ *
+ * Presentational only — every piece of state and each handler stays in the pane. The
+ * device-code login owns a server-side app-server that has to be released if the user walks
+ * away, and the pane's unmount effect is what does that; moving the flow's state in here
+ * would tie that release to closing a dialog instead.
+ *
+ * Mirrors the Claude add dialog: recommended sign-in first, divider, manual key below.
+ */
+
+import { ExternalLink, KeyRound, Loader2, MonitorSmartphone } from "lucide-react";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export interface CodexDevicePrompt {
+  userCode: string;
+  verificationUrl: string;
+}
+
+export function CodexAddAccountDialog({
+  open, onOpenChange, label, onLabelChange, apiKey, onApiKeyChange,
+  adding, onAddApiKey, deviceWaiting, onStartDevice, device, error,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  label: string;
+  onLabelChange: (value: string) => void;
+  apiKey: string;
+  onApiKeyChange: (value: string) => void;
+  adding: boolean;
+  onAddApiKey: () => void;
+  deviceWaiting: boolean;
+  onStartDevice: () => void;
+  device: CodexDevicePrompt | null;
+  error: string | null;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm">Add Codex Account</DialogTitle>
+          <DialogDescription className="text-xs leading-relaxed">
+            Each account keeps its own login (its own <code>CODEX_HOME</code>).
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div className="rounded-md border p-3 space-y-2">
+            <p className="text-[11px] font-medium">Recommended: sign in with ChatGPT</p>
+            <Button
+              size="sm"
+              className="w-full cursor-pointer gap-1.5"
+              onClick={onStartDevice}
+              disabled={deviceWaiting}
+            >
+              {deviceWaiting
+                ? <><Loader2 className="size-4 animate-spin" /> Waiting for authorization...</>
+                : <><MonitorSmartphone className="size-4" /> Sign in with ChatGPT</>}
+            </Button>
+
+            {device && (
+              <div className="rounded-md border border-primary/40 bg-primary/10 p-2.5 space-y-1.5">
+                <p className="text-[11px]">Enter this code to authorize:</p>
+                <div className="font-mono text-lg tracking-widest">{device.userCode}</div>
+                <a
+                  href={device.verificationUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-flex items-center gap-1 text-primary hover:underline text-[11px]"
+                >
+                  <ExternalLink className="size-3" /> {device.verificationUrl}
+                </a>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            <div className="flex-1 border-t" />
+            <span className="text-[10px] text-muted-foreground">or paste an API key</span>
+            <div className="flex-1 border-t" />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="codex-api-key" className="text-xs">OpenAI API key</Label>
+            <Input
+              id="codex-api-key"
+              type="password"
+              placeholder="sk-..."
+              value={apiKey}
+              onChange={(e) => onApiKeyChange(e.target.value)}
+              className="text-xs font-mono"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="codex-label" className="text-xs">Label (optional)</Label>
+            <Input
+              id="codex-label"
+              placeholder="e.g. Personal, Work"
+              value={label}
+              onChange={(e) => onLabelChange(e.target.value)}
+              className="text-xs"
+            />
+          </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 cursor-pointer" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            className="text-xs cursor-pointer gap-1.5"
+            onClick={onAddApiKey}
+            disabled={!apiKey.trim() || adding}
+          >
+            {adding ? <Loader2 className="size-3.5 animate-spin" /> : <KeyRound className="size-3.5" />}
+            Add key
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/settings/accounts/codex-backup-dialog.tsx

@@ -0,0 +1,101 @@
+/**
+ * Export or import the Codex accounts bundle.
+ *
+ * One dialog for both directions, opened in the mode the user asked for, because the two
+ * share the same single input: the password that encrypts the file. Presentational — the
+ * pane owns the state and the requests.
+ *
+ * Mirrors the Claude export/import dialogs; the password is required here rather than
+ * defaulted, because a Codex bundle carries whole logins.
+ */
+
+import { useRef } from "react";
+import { Download, Loader2, Lock, Upload } from "lucide-react";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function CodexBackupDialog({
+  mode, onOpenChange, password, onPasswordChange, busy, onExport, onImport, error,
+}: {
+  /** Null closes the dialog; otherwise the direction it opened in. */
+  mode: "export" | "import" | null;
+  onOpenChange: (open: boolean) => void;
+  password: string;
+  onPasswordChange: (value: string) => void;
+  busy: boolean;
+  onExport: () => void;
+  onImport: (file: File) => void;
+  error: string | null;
+}) {
+  const fileInput = useRef<HTMLInputElement>(null);
+  const isExport = mode === "export";
+
+  return (
+    <Dialog open={mode !== null} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm flex items-center gap-1.5">
+            <Lock className="size-4" /> {isExport ? "Export Codex Accounts" : "Import Codex Accounts"}
+          </DialogTitle>
+          <DialogDescription className="text-xs leading-relaxed">
+            {isExport
+              ? "Writes a password-encrypted file containing each account's login."
+              : "Reads a backup file. The password must be the one it was exported with."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="codex-backup-password" className="text-xs">Password</Label>
+          <Input
+            id="codex-backup-password"
+            type="password"
+            placeholder={isExport ? "Choose a password" : "Password used for the export"}
+            value={password}
+            onChange={(e) => onPasswordChange(e.target.value)}
+            className="text-xs"
+            autoComplete={isExport ? "new-password" : "current-password"}
+          />
+          <p className="text-[10px] text-muted-foreground">
+            A backup holds full logins — keep the file and its password together.
+          </p>
+        </div>
+
+        {error && <div className="text-[11px] p-2 rounded bg-error/10 text-error">{error}</div>}
+
+        <input
+          ref={fileInput}
+          type="file"
+          accept="application/json,.json"
+          className="hidden"
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            // Cleared so picking the same file twice still fires a change event.
+            e.target.value = "";
+            if (file) onImport(file);
+          }}
+        />
+
+        <DialogFooter>
+          <Button size="sm" variant="outline" className="text-xs cursor-pointer" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            className="text-xs cursor-pointer gap-1.5"
+            disabled={!password.trim() || busy}
+            onClick={() => (isExport ? onExport() : fileInput.current?.click())}
+          >
+            {busy
+              ? <Loader2 className="size-3.5 animate-spin" />
+              : isExport ? <Download className="size-3.5" /> : <Upload className="size-3.5" />}
+            {isExport ? "Download backup" : "Choose file"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/settings/accounts/codex-rotation-dialog.tsx

@@ -0,0 +1,65 @@
+/**
+ * Which Codex account a new chat picks.
+ *
+ * Behind a Rotation button like the Claude side, rather than a row of chips wired straight
+ * into the pane: the two providers answer the same question and should be reached the same
+ * way. Presentational — the pane writes the choice.
+ */
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type CodexStrategy = "round-robin" | "fill-first" | "lowest-usage";
+
+const STRATEGIES: { value: CodexStrategy; label: string; hint: string }[] = [
+  { value: "round-robin", label: "Round-robin", hint: "Take the next account each time." },
+  { value: "fill-first", label: "Fill-first", hint: "Stay on one account until it runs out." },
+  { value: "lowest-usage", label: "Lowest usage", hint: "Pick whichever has the most left." },
+];
+
+export function CodexRotationDialog({ open, onOpenChange, strategy, onChange }: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  strategy: CodexStrategy;
+  onChange: (strategy: CodexStrategy) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm">Codex Rotation</DialogTitle>
+          <DialogDescription className="text-xs leading-relaxed">
+            How a new chat chooses among your Codex accounts.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-2">
+          {STRATEGIES.map((s) => (
+            <button
+              key={s.value}
+              type="button"
+              onClick={() => onChange(s.value)}
+              aria-current={strategy === s.value ? "true" : undefined}
+              className={cn(
+                "w-full text-left rounded-md border px-3 py-2.5 min-h-11 cursor-pointer transition-colors",
+                strategy === s.value
+                  ? "border-primary bg-primary/10"
+                  : "border-border hover:bg-accent/50 active:bg-accent",
+              )}
+            >
+              <p className="text-sm font-medium">{s.label}</p>
+              <p className="text-xs text-muted-foreground">{s.hint}</p>
+            </button>
+          ))}
+        </div>
+
+        <DialogFooter>
+          <Button size="sm" variant="outline" className="text-xs cursor-pointer" onClick={() => onOpenChange(false)}>
+            Done
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/settings/accounts/use-accounts-data.ts

@@ -0,0 +1,81 @@
+/**
+ * Loads the three things the accounts pane needs — usages, account records, and which
+ * account is active — and tracks which accounts' numbers just changed.
+ *
+ * `Promise.allSettled`, not `all`: one endpoint failing (usage often does, it depends on an
+ * upstream API) must not blank the whole pane. Each result is applied on its own.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  getAccounts, getActiveAccount, getAllAccountUsages,
+  type AccountInfo, type AccountUsageEntry,
+} from "../../../lib/api-settings";
+
+export interface AccountsData {
+  usages: AccountUsageEntry[];
+  accounts: AccountInfo[];
+  activeAccountId: string | null;
+  /** True only for the very first load, so a refresh does not blank the list. */
+  initialLoading: boolean;
+  refreshing: boolean;
+  /** Accounts whose utilisation changed on the last refresh — briefly highlighted. */
+  flashIds: Set<string>;
+  reload: () => Promise<void>;
+}
+
+/** Utilisation across all four buckets, as a comparable string. */
+function utilisationKey(entry: AccountUsageEntry): string {
+  const u = entry.usage;
+  return [u.session?.utilization, u.weekly?.utilization, u.weeklyOpus?.utilization, u.weeklySonnet?.utilization].join("|");
+}
+
+export function useAccountsData(enabled = true): AccountsData {
+  const [usages, setUsages] = useState<AccountUsageEntry[]>([]);
+  const [accounts, setAccounts] = useState<AccountInfo[]>([]);
+  const [activeAccountId, setActiveAccountId] = useState<string | null>(null);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [flashIds, setFlashIds] = useState<Set<string>>(new Set());
+  const prevUsages = useRef<AccountUsageEntry[]>([]);
+  const flashTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const reload = useCallback(async () => {
+    const isRefresh = prevUsages.current.length > 0;
+    if (isRefresh) setRefreshing(true);
+    else setInitialLoading(true);
+
+    const [u, a, active] = await Promise.allSettled([
+      getAllAccountUsages(), getAccounts(), getActiveAccount(),
+    ]);
+
+    if (u.status === "fulfilled") {
+      const next = u.value;
+      if (isRefresh) {
+        const before = new Map(prevUsages.current.map((e) => [e.accountId, utilisationKey(e)]));
+        const changed = new Set(
+          next.filter((e) => before.get(e.accountId) !== utilisationKey(e)).map((e) => e.accountId),
+        );
+        if (changed.size > 0) {
+          setFlashIds(changed);
+          clearTimeout(flashTimer.current);
+          flashTimer.current = setTimeout(() => setFlashIds(new Set()), 1500);
+        }
+      }
+      prevUsages.current = next;
+      setUsages(next);
+    }
+    if (a.status === "fulfilled") setAccounts(a.value);
+    if (active.status === "fulfilled") setActiveAccountId(active.value?.id ?? null);
+
+    setInitialLoading(false);
+    setRefreshing(false);
+  }, []);
+
+  useEffect(() => {
+    if (enabled) void reload();
+    return () => clearTimeout(flashTimer.current);
+  }, [enabled, reload]);
+
+  return { usages, accounts, activeAccountId, initialLoading, refreshing, flashIds, reload };
+}

package/src/web/components/settings/accounts/use-codex-accounts.ts

@@ -0,0 +1,151 @@
+/**
+ * State and requests for the Codex accounts pane.
+ *
+ * Split from the pane the way `use-accounts-data` is on the Claude side, so both panes are
+ * render-only and the two providers stay comparable.
+ *
+ * The device-code login is the reason the cleanup here matters: it holds a server-side
+ * app-server until it resolves, so leaving the pane has to release it rather than let it age
+ * out. That cleanup belongs to the pane's lifetime, not to a dialog being closed.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api, getAuthToken } from "@/lib/api-client";
+import type { CodexStrategy } from "./codex-rotation-dialog";
+
+export type Strategy = CodexStrategy;
+export interface CodexAccount { id: string; label: string; type: string; planType?: string | null }
+export interface Usage { fiveHour?: number; sevenDay?: number }
+interface DevicePending { id: string; userCode: string; verificationUrl: string }
+type DeviceStatus = { state: "pending" } | { state: "done" } | { state: "error"; error: string };
+
+/** Gap between status polls. Each poll answers immediately, so a request lost to
+ * a flaky proxy costs one tick instead of the whole login. */
+const DEVICE_POLL_MS = 2000;
+/** Give up a little after the server's own reap window so its message wins. */
+const DEVICE_POLL_DEADLINE_MS = 210_000;
+
+export function useCodexAccounts(onDone: () => void) {
+  const [accounts, setAccounts] = useState<CodexAccount[]>([]);
+  const [strategy, setStrategy] = useState<Strategy>("round-robin");
+  const [usages, setUsages] = useState<Record<string, Usage>>({});
+  const [loading, setLoading] = useState(false);
+  const [apiKey, setApiKey] = useState("");
+  const [label, setLabel] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [device, setDevice] = useState<DevicePending | null>(null);
+  const [deviceWaiting, setDeviceWaiting] = useState(false);
+  const [backupPassword, setBackupPassword] = useState("");
+  const [exporting, setExporting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [msg, setMsg] = useState<string | null>(null);
+  const stopPollRef = useRef<(() => void) | null>(null);
+  /** Id of the login still owed a result, so unmount can release it. */
+  const devicePendingIdRef = useRef<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const d = await api.get<{ accounts: CodexAccount[]; strategy: Strategy }>("/api/codex-accounts");
+      setAccounts(d.accounts);
+      setStrategy(d.strategy);
+      api.get<Record<string, Usage>>("/api/codex-accounts/usage").then(setUsages).catch(() => {});
+    } finally { setLoading(false); }
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const addApiKey = async () => {
+    if (!apiKey.trim()) return;
+    setAdding(true); setErr(null);
+    try {
+      await api.post("/api/codex-accounts/api-key", { apiKey: apiKey.trim(), label: label.trim() || undefined });
+      setApiKey(""); setLabel(""); onDone(); await load();
+    } catch (e) { setErr((e as Error).message); } finally { setAdding(false); }
+  };
+
+  const pollDevice = useCallback((id: string) => {
+    const deadline = Date.now() + DEVICE_POLL_DEADLINE_MS;
+    let stopped = false;
+    stopPollRef.current = () => { stopped = true; };
+    const finish = (message?: string) => {
+      stopped = true; stopPollRef.current = null; devicePendingIdRef.current = null;
+      if (message) setErr(message);
+      setDevice(null); setDeviceWaiting(false);
+    };
+    const tick = async () => {
+      if (stopped) return;
+      let s: DeviceStatus | null = null;
+      // A failed poll is not a failed login — the outcome is held server-side,
+      // so keep asking until the deadline instead of aborting the flow.
+      try { s = await api.get<DeviceStatus>(`/api/codex-accounts/device-login/${id}/status`); } catch { /* retry */ }
+      if (stopped) return;
+      if (s?.state === "done") { finish(); setLabel(""); onDone(); await load(); return; }
+      if (s?.state === "error") { finish(s.error); return; }
+      if (Date.now() > deadline) { finish("Device login timed out."); return; }
+      setTimeout(tick, DEVICE_POLL_MS);
+    };
+    void tick();
+  }, [load]);
+
+  // Abandoning the panel mid-login stops the polling and releases the
+  // server-side app-server instead of leaving it to age out.
+  useEffect(() => () => {
+    stopPollRef.current?.();
+    const id = devicePendingIdRef.current;
+    if (id) api.del(`/api/codex-accounts/device-login/${id}`).catch(() => {});
+  }, []);
+
+  const startDevice = async () => {
+    setErr(null);
+    try {
+      const d = await api.post<DevicePending>("/api/codex-accounts/device-login", { label: label.trim() || undefined });
+      setDevice(d); setDeviceWaiting(true); devicePendingIdRef.current = d.id;
+      pollDevice(d.id);
+    } catch (e) { setErr((e as Error).message); }
+  };
+
+  const remove = async (id: string) => { await api.del(`/api/codex-accounts/${id}`); await load(); };
+  const changeStrategy = async (s: Strategy) => { setStrategy(s); try { await api.put("/api/codex-accounts/strategy", { strategy: s }); } catch { /* revert on reload */ } };
+
+  const doExport = async () => {
+    if (!backupPassword.trim()) { setErr("Set a backup password first."); return; }
+    setExporting(true); setErr(null); setMsg(null);
+    try {
+      const headers: HeadersInit = { "Content-Type": "application/json" };
+      const token = getAuthToken();
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+      const res = await fetch("/api/codex-accounts/export", { method: "POST", headers, body: JSON.stringify({ password: backupPassword }) });
+      if (!res.ok) { const j = await res.json().catch(() => ({})) as { error?: string }; throw new Error(j.error ?? `Export failed: ${res.status}`); }
+      const text = await res.text();
+      const blob = new Blob([text], { type: "application/json" });
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = "ppm-codex-accounts-backup.json";
+      a.click();
+      URL.revokeObjectURL(a.href);
+      setMsg("Backup downloaded.");
+      onDone();
+    } catch (e) { setErr((e as Error).message); } finally { setExporting(false); }
+  };
+
+  const doImport = async (file: File) => {
+    if (!backupPassword.trim()) { setErr("Enter the backup password first."); return; }
+    setImporting(true); setErr(null); setMsg(null);
+    try {
+      const data = await file.text();
+      const r = await api.post<{ imported: number; skipped: number }>("/api/codex-accounts/import", { data, password: backupPassword });
+      setMsg(`Imported ${r.imported}${r.skipped ? `, skipped ${r.skipped}` : ""}.`);
+      onDone();
+      await load();
+    } catch (e) { setErr((e as Error).message); } finally { setImporting(false); }
+  };
+
+
+  return {
+    accounts, strategy, usages, loading, apiKey, setApiKey, label, setLabel, adding,
+    err, setErr, device, deviceWaiting, backupPassword, setBackupPassword,
+    exporting, importing, msg, setMsg,
+    load, addApiKey, startDevice, remove, changeStrategy, doExport, doImport,
+  };
+}

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { RefreshCw, Trash2 } from "lucide-react";
+import { ExternalLink, RefreshCw, Trash2 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -13,7 +13,7 @@ import { Switch } from "@/components/ui/switch";
 import { getAISettings, updateAISettings, type AISettings } from "@/lib/api-settings";
 import { api } from "@/lib/api-client";
 import { ProviderBadge } from "@/components/chat/provider-selector";
-import { CodexAccountsSection } from "./codex-accounts-section";
+import { openSettings } from "./open-settings";
 import type { ModelOption } from "../../../types/chat";
 
 const EFFORT_OPTIONS = [
@@ -137,8 +137,18 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
       )}
 
       <div className={innerGap}>
-        {/* Codex account login/management lives here (codex auth is per-CODEX_HOME) */}
-        {activeTab === "codex" && <CodexAccountsSection />}
+        {/* Codex sign-ins moved to the Accounts pane, next to the Claude ones — this tab is
+            about how the provider runs, not which accounts it has. */}
+        {activeTab === "codex" && (
+          <button
+            type="button"
+            onClick={() => openSettings("accounts")}
+            className="w-full flex items-center justify-between gap-2 rounded-md border border-border px-2.5 py-2 text-left cursor-pointer hover:bg-surface-elevated transition-colors"
+          >
+            <span className={`${labelSize} text-text-secondary`}>Codex accounts &amp; login</span>
+            <ExternalLink className="size-3.5 text-text-subtle shrink-0" />
+          </button>
+        )}
 
         {/* Model selector — dynamic, works for all providers */}
         {models.length > 0 && (