@hienlh/ppm 0.19.2 → 0.19.3

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

@@ -1,198 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { api, getAuthToken } from "@/lib/api-client";
-import { Trash2, Loader2, KeyRound, MonitorSmartphone, ExternalLink, Download, Upload } from "lucide-react";
-
-type Strategy = "round-robin" | "fill-first" | "lowest-usage";
-interface CodexAccount { id: string; label: string; type: string; planType?: string | null }
-interface Usage { fiveHour?: number; sevenDay?: number }
-interface DevicePending { id: string; userCode: string; verificationUrl: string }
-
-const STRATEGIES: { value: Strategy; label: string }[] = [
-  { value: "round-robin", label: "Round-robin" },
-  { value: "fill-first", label: "Fill-first" },
-  { value: "lowest-usage", label: "Lowest usage" },
-];
-
-function pct(v?: number): string { return v != null ? `${Math.round(v * 100)}%` : "—"; }
-
-/** Codex multi-account management (separate from Claude accounts — codex auth is
- * owned by the app-server per CODEX_HOME). Add via API key or ChatGPT device-code. */
-export function CodexAccountsSection() {
-  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 fileInputRef = useRef<HTMLInputElement>(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(""); await load();
-    } catch (e) { setErr((e as Error).message); } finally { setAdding(false); }
-  };
-
-  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);
-      api.post(`/api/codex-accounts/device-login/${d.id}/await`)
-        .then(async () => { setDevice(null); setDeviceWaiting(false); setLabel(""); await load(); })
-        .catch((e) => { setErr((e as Error).message); setDevice(null); setDeviceWaiting(false); });
-    } 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.");
-    } 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}` : ""}.`);
-      await load();
-    } catch (e) { setErr((e as Error).message); } finally { setImporting(false); if (fileInputRef.current) fileInputRef.current.value = ""; }
-  };
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <h3 className="text-sm font-semibold text-text-primary">Codex Accounts</h3>
-        <p className="text-xs text-text-subtle mt-0.5">Each account uses its own login (CODEX_HOME). One is selected per chat by the strategy below.</p>
-      </div>
-
-      {err && <div className="text-xs text-error bg-error/10 border border-error/30 rounded-md p-2">{err}</div>}
-      {msg && <div className="text-xs text-success bg-success/10 border border-success/30 rounded-md p-2">{msg}</div>}
-
-      {/* Strategy */}
-      <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-xs text-text-secondary">Selection strategy:</span>
-        {STRATEGIES.map((s) => (
-          <button key={s.value} type="button" onClick={() => changeStrategy(s.value)}
-            className={`text-xs px-3 min-h-[36px] rounded-md border transition-colors ${strategy === s.value ? "border-primary bg-primary/15 text-text-primary" : "border-border bg-surface/50 text-text-secondary hover:bg-surface"}`}>
-            {s.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Account list */}
-      <div className="space-y-2">
-        {loading && accounts.length === 0 && <div className="text-xs text-text-subtle flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> Loading…</div>}
-        {!loading && accounts.length === 0 && <div className="text-xs text-text-subtle">No codex accounts yet — add one below. (With none, chats use your default <code>~/.codex</code> login.)</div>}
-        {accounts.map((a) => {
-          const u = usages[a.id] ?? {};
-          return (
-            <div key={a.id} className="flex items-center gap-3 border border-border rounded-md bg-surface/40 p-2.5">
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-text-primary truncate">{a.label}</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>}
-                </div>
-                <div className="text-[11px] text-text-subtle mt-0.5">5h {pct(u.fiveHour)} · weekly {pct(u.sevenDay)}</div>
-              </div>
-              <button type="button" onClick={() => remove(a.id)} title="Remove account"
-                className="p-2 min-h-[44px] min-w-[44px] flex items-center justify-center text-text-subtle hover:text-error transition-colors">
-                <Trash2 className="size-4" />
-              </button>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Add */}
-      <div className="border border-border rounded-md p-3 space-y-2">
-        <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Label (optional)"
-          className="w-full text-sm bg-surface border border-border rounded-md px-3 min-h-[40px] text-text-primary placeholder:text-text-subtle" />
-        <div className="flex gap-2 flex-col sm:flex-row">
-          <input value={apiKey} onChange={(e) => setApiKey(e.target.value)} type="password" placeholder="OpenAI API key (sk-…)"
-            className="flex-1 text-sm bg-surface border border-border rounded-md px-3 min-h-[44px] text-text-primary placeholder:text-text-subtle font-mono" />
-          <button type="button" onClick={addApiKey} disabled={adding || !apiKey.trim()}
-            className="inline-flex items-center justify-center gap-2 text-sm px-4 min-h-[44px] rounded-md border border-border bg-surface/50 hover:bg-surface text-text-primary disabled:opacity-60">
-            {adding ? <Loader2 className="size-4 animate-spin" /> : <KeyRound className="size-4" />} Add key
-          </button>
-        </div>
-        <button type="button" onClick={startDevice} disabled={deviceWaiting}
-          className="inline-flex items-center justify-center gap-2 text-sm px-4 min-h-[44px] w-full sm:w-auto rounded-md border border-border bg-surface/50 hover:bg-surface text-text-primary disabled:opacity-60">
-          {deviceWaiting ? <Loader2 className="size-4 animate-spin" /> : <MonitorSmartphone className="size-4" />} Sign in with ChatGPT (device code)
-        </button>
-      </div>
-
-      {/* Backup: export / import (password-encrypted bundle of auth.json + apiKey creds) */}
-      <div className="border border-border rounded-md p-3 space-y-2">
-        <p className="text-xs text-text-secondary">Backup &amp; transfer — password-encrypted file with each account's login.</p>
-        <input value={backupPassword} onChange={(e) => setBackupPassword(e.target.value)} type="password" placeholder="Backup password"
-          className="w-full text-sm bg-surface border border-border rounded-md px-3 min-h-[44px] text-text-primary placeholder:text-text-subtle" />
-        <div className="flex gap-2 flex-col sm:flex-row">
-          <button type="button" onClick={doExport} disabled={exporting || !backupPassword.trim()}
-            className="flex-1 inline-flex items-center justify-center gap-2 text-sm px-4 min-h-[44px] rounded-md border border-border bg-surface/50 hover:bg-surface text-text-primary disabled:opacity-60">
-            {exporting ? <Loader2 className="size-4 animate-spin" /> : <Download className="size-4" />} Export
-          </button>
-          <button type="button" onClick={() => fileInputRef.current?.click()} disabled={importing || !backupPassword.trim()}
-            className="flex-1 inline-flex items-center justify-center gap-2 text-sm px-4 min-h-[44px] rounded-md border border-border bg-surface/50 hover:bg-surface text-text-primary disabled:opacity-60">
-            {importing ? <Loader2 className="size-4 animate-spin" /> : <Upload className="size-4" />} Import
-          </button>
-          <input ref={fileInputRef} type="file" accept="application/json,.json" className="hidden"
-            onChange={(e) => { const f = e.target.files?.[0]; if (f) doImport(f); }} />
-        </div>
-      </div>
-
-      {/* Device-code prompt */}
-      {device && (
-        <div className="border border-primary/40 bg-primary/10 rounded-md p-3 space-y-2 text-sm">
-          <p className="text-text-primary">Enter this code to authorize:</p>
-          <div className="font-mono text-lg tracking-widest text-text-primary">{device.userCode}</div>
-          <a href={device.verificationUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-primary hover:underline text-xs">
-            <ExternalLink className="size-3" /> {device.verificationUrl}
-          </a>
-          <p className="text-xs text-text-subtle flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> Waiting for authorization…</p>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,113 +0,0 @@
-import { useState, useEffect } from "react";
-import { Send } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { api } from "@/lib/api-client";
-
-interface TelegramConfig {
-  bot_token: string;
-  chat_id: string;
-}
-
-export function TelegramSettingsSection() {
-  const [config, setConfig] = useState<TelegramConfig>({ bot_token: "", chat_id: "" });
-  const [tokenInput, setTokenInput] = useState("");
-  const [chatIdInput, setChatIdInput] = useState("");
-  const [saving, setSaving] = useState(false);
-  const [testing, setTesting] = useState(false);
-  const [status, setStatus] = useState<{ type: "ok" | "err"; msg: string } | null>(null);
-
-  useEffect(() => {
-    api.get<TelegramConfig>("/api/settings/telegram").then((data) => {
-      setConfig(data);
-      setChatIdInput(data.chat_id);
-    }).catch(() => {});
-  }, []);
-
-  const save = async () => {
-    setSaving(true);
-    setStatus(null);
-    try {
-      const body: Record<string, string> = { chat_id: chatIdInput };
-      if (tokenInput) body.bot_token = tokenInput;
-      const data = await api.put<TelegramConfig>("/api/settings/telegram", body);
-      setConfig(data);
-      setTokenInput("");
-      setStatus({ type: "ok", msg: "Saved" });
-    } catch (e) {
-      setStatus({ type: "err", msg: (e as Error).message });
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const test = async () => {
-    setTesting(true);
-    setStatus(null);
-    try {
-      // Send current input values; backend falls back to saved config for empty fields
-      await api.post("/api/settings/telegram/test", {
-        ...(tokenInput ? { bot_token: tokenInput } : {}),
-        ...(chatIdInput ? { chat_id: chatIdInput } : {}),
-      });
-      setStatus({ type: "ok", msg: "Test message sent!" });
-    } catch (e) {
-      setStatus({ type: "err", msg: (e as Error).message });
-    } finally {
-      setTesting(false);
-    }
-  };
-
-  const isConfigured = !!config.bot_token;
-
-  return (
-    <div className="space-y-2">
-      <div className="space-y-1.5">
-        <label className="text-[11px] text-text-subtle">Bot Token</label>
-        <Input
-          type="password"
-          placeholder={isConfigured ? "••••••  (saved)" : "123456:ABC-DEF..."}
-          value={tokenInput}
-          onChange={(e) => setTokenInput(e.target.value)}
-          className="h-7 text-xs"
-        />
-      </div>
-      <div className="space-y-1.5">
-        <label className="text-[11px] text-text-subtle">Chat ID</label>
-        <Input
-          placeholder="-1001234567890"
-          value={chatIdInput}
-          onChange={(e) => setChatIdInput(e.target.value)}
-          className="h-7 text-xs"
-        />
-        <p className="text-[10px] text-text-subtle">Personal or group chat ID</p>
-      </div>
-      <div className="flex gap-1.5">
-        <Button
-          variant="default"
-          size="sm"
-          className="h-7 text-xs flex-1"
-          disabled={saving || (!tokenInput && !chatIdInput)}
-          onClick={save}
-        >
-          {saving ? "..." : "Save"}
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-7 text-xs gap-1"
-          disabled={testing || !isConfigured}
-          onClick={test}
-        >
-          <Send className="size-3" />
-          {testing ? "..." : "Test"}
-        </Button>
-      </div>
-      {status && (
-        <p className={`text-[11px] ${status.type === "ok" ? "text-success" : "text-destructive"}`}>
-          {status.msg}
-        </p>
-      )}
-    </div>
-  );
-}