@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/operator/node/SettingsView.tsx

@@ -0,0 +1,690 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Icon } from "./icons";
+import { DEFAULT_SETTINGS, modelOptions, reasoningOptions, permissionOptions, type Settings, type AgentsBundle } from "./types";
+import { savedCustomModels, validModelId, withCustomModels } from "./protocol/customModels";
+import { capsFor, agentLabel, agentStateHint } from "./agents";
+import { GitHubSettings } from "./github";
+import { WorktreePrune } from "./WorktreePrune";
+import { AgentConnect } from "./AgentConnect";
+import { LoadNote, ErrNote } from "./shared";
+import { jget, jsend } from "./api";
+import type { AgentInfoT, AgentsResponseT } from "./types";
+
+// Account / session panel. Shows who's signed in to this instance and a Logout
+// control — but only when an origin provider is actually gating the box (first-
+// party control-plane session or Cloudflare Access). In open local dev there's
+// no session to end, so the panel says so and hides the button. The redirect
+// target is provider-specific and decided server-side (see /api/auth/logout).
+function AccountSection() {
+  const [state, setState] = useState<
+    { provider: string; signedIn: boolean; email: string | null } | null
+  >(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/auth/whoami")
+      .then((r) => r.json())
+      .then((d) => {
+        if (!cancelled) setState(d);
+      })
+      .catch(() => {
+        if (!cancelled) setState({ provider: "none", signedIn: false, email: null });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function logout() {
+    setBusy(true);
+    try {
+      const res = await fetch("/api/auth/logout", { method: "POST" });
+      const data = await res.json().catch(() => ({}));
+      // Top-level navigation so the CF logout (or CP login) loads as a real page.
+      window.location.href = data?.redirect || "/";
+    } catch {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="field">
+      <div className="lab">{Icon.lock()} 登录状态</div>
+      {state == null ? (
+        <LoadNote style={{ padding: 0 }}>正在检查你的会话…</LoadNote>
+      ) : state.signedIn ? (
+        <>
+          <div className="hlp" style={{ marginTop: 0, marginBottom: 12 }}>
+            {state.email ? <strong>{state.email}</strong> : "已登录"}
+          </div>
+          <button
+            className="btn btn-line"
+            onClick={logout}
+            disabled={busy}
+            style={{ alignSelf: "flex-start" }}
+          >
+            {Icon.external()} {busy ? "正在退出…" : "退出登录"}
+          </button>
+          <div className="hlp" style={{ marginTop: 10 }}>
+            {state.provider === "cf-access"
+              ? "这会结束你在本实例上的 Cloudflare Access 会话。"
+              : "这会结束你的会话并返回登录页。"}
+          </div>
+        </>
+      ) : (
+        <div className="hlp" style={{ marginTop: 0 }}>
+          本实例没有启用登录（本地 / 开放模式）—— 没有可结束的会话。
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Settings → API access. The token here lets a script call this instance from a
+// Host outside the allowlist by sending `Authorization: Bearer <token>`.
+//
+// Saving takes effect immediately — no restart. The gate is Next middleware,
+// which runs in the edge runtime and cannot open SQLite, but it does read
+// process.env and shares this process, so lib/apiToken.ts persists the secret to
+// a 0600 file (not the settings table, which /api/settings hands to the browser
+// wholesale) and mirrors it into env on write and on boot.
+//
+// The server never reads a token back: it reports enabled / source / last-6
+// only. A token generated here is shown once, in this browser, and then only
+// its tail is recoverable.
+type TokenState = { enabled: boolean; source: "none" | "file" | "env"; hint: string | null; token?: string | null };
+
+function ApiAccessSection() {
+  const [state, setState] = useState<TokenState | null>(null);
+  const [minted, setMinted] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [copied, setCopied] = useState("");
+  const [confirmOff, setConfirmOff] = useState(false);
+  // The live token in full. The server only reveals it to a loopback browser,
+  // so off-machine viewers keep working with the hint alone.
+  const [revealed, setRevealed] = useState("");
+
+  const load = () =>
+    jget<TokenState>("/api/settings/api-token")
+      .then(setState)
+      .catch(() => setState({ enabled: false, source: "none", hint: null }));
+  useEffect(() => { load(); }, []);
+
+  const reveal = async () => {
+    setErr(null);
+    try {
+      const s = await jget<TokenState>("/api/settings/api-token?reveal=1");
+      if (!s.token) throw new Error("只有在这台机器上打开的界面才能查看完整令牌");
+      setRevealed(s.token);
+      return s.token;
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+      return "";
+    }
+  };
+
+  // 32 bytes of CSPRNG entropy, hex — the same shape as `openssl rand -hex 32`.
+  const mint = () => {
+    const bytes = new Uint8Array(32);
+    crypto.getRandomValues(bytes);
+    setMinted(Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join(""));
+    setErr(null);
+    setCopied("");
+  };
+  const copy = async (what: string, text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(what);
+      setTimeout(() => setCopied(""), 1500);
+    } catch { /* clipboard blocked */ }
+  };
+  const save = async () => {
+    if (!minted) return;
+    setBusy(true);
+    setErr(null);
+    try {
+      setState(await jsend<TokenState>("/api/settings/api-token", "POST", { token: minted }));
+      setRevealed(minted);
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const disable = async () => {
+    setBusy(true);
+    setErr(null);
+    try {
+      setState(await jsend<TokenState>("/api/settings/api-token", "DELETE"));
+      setMinted("");
+      setRevealed("");
+      setConfirmOff(false);
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const origin = typeof window !== "undefined" ? window.location.origin : "";
+  const envManaged = state?.source === "env";
+  // The live token is in hand right after minting, or once a local browser has
+  // asked the server to reveal it; otherwise show its tail as a placeholder.
+  const live = minted || revealed;
+  const forCurl = live || (state?.hint ? `…${state.hint}` : "<你的令牌>");
+
+  return (
+    <>
+      <div className="field">
+        <div className="lab">{Icon.lock()} 接口访问令牌</div>
+        <div className="hlp" style={{ marginTop: 0, marginBottom: 12 }}>
+          默认情况下，只有本机（回环地址）能调用这个实例的接口。设置一个令牌后，脚本就能从别的机器带
+          <code>Authorization: Bearer …</code> 头调用。<strong>保存后立即生效，无需重启。</strong>
+          终端 <code>/pty</code> 不受此令牌影响，始终只对本机开放。
+        </div>
+        {state === null ? (
+          <LoadNote style={{ padding: 0 }}>正在读取当前状态…</LoadNote>
+        ) : state.enabled ? (
+          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--ink)" }}>
+              <span className="wiz-ok">{Icon.check()}</span>
+              {/* Kept in one span: loose text and <code> beside the icon would each
+                  become a flex item and break apart once the line wraps. */}
+              <span>已启用{state.hint ? <> —— 当前令牌以 <code>…{state.hint}</code> 结尾</> : ""}</span>
+            </span>
+            {envManaged ? (
+              <span className="opt">· 来自环境变量，界面不可修改</span>
+            ) : confirmOff ? (
+              <>
+                <button className="btn-danger on" disabled={busy} onClick={disable}>{Icon.x()} 确认停用</button>
+                <button className="btn btn-ghost btn-sm" onClick={() => setConfirmOff(false)}>取消</button>
+              </>
+            ) : (
+              <button className="btn btn-line btn-sm" onClick={() => setConfirmOff(true)}>{Icon.x()} 停用</button>
+            )}
+          </div>
+        ) : (
+          <div style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--ink-2)" }}>
+            {Icon.lock()} 未启用 —— 只有本机可以调用接口
+          </div>
+        )}
+        {err && <ErrNote style={{ marginTop: 10 }}>{err}</ErrNote>}
+      </div>
+
+      {!envManaged && (
+        <div className="field">
+          <div className="lab">{state?.enabled ? "更换令牌" : "生成并启用"}</div>
+          <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
+            <button className="btn btn-line" onClick={mint}>{Icon.spark()} {minted ? "重新生成" : "生成令牌"}</button>
+            {minted && (
+              <>
+                <button className="btn btn-line" onClick={() => copy("token", minted)}>
+                  {copied === "token" ? Icon.check() : Icon.copy()} {copied === "token" ? "已复制" : "复制"}
+                </button>
+                <button className="btn btn-accent" disabled={busy} onClick={save}>
+                  {Icon.check()} {busy ? "保存中…" : state?.enabled ? "保存并替换" : "保存并启用"}
+                </button>
+              </>
+            )}
+          </div>
+          {minted && (
+            <div className="ctx-mono" style={{ marginTop: 10, padding: "9px 12px", background: "var(--raise)", border: "1px solid var(--line-strong)", borderRadius: "var(--r)", fontSize: 12, wordBreak: "break-all" }}>
+              {minted}
+            </div>
+          )}
+          <div className="hlp">
+            在浏览器本地生成，保存前不会离开这台机器。<strong>只显示这一次</strong> —— 保存后服务端只会告诉你它的后 6 位，请先复制留存。
+          </div>
+        </div>
+      )}
+
+      <div className="field" style={{ marginBottom: 0 }}>
+        <div className="lab">调用方式</div>
+        <div className="ctx-mono" style={{ padding: "11px 13px", background: "var(--raise)", border: "1px solid var(--line-strong)", borderRadius: "var(--r)", fontSize: 12, whiteSpace: "pre-wrap", wordBreak: "break-all", lineHeight: 1.7 }}>
+          {`curl -s ${origin}/api/projects \\\n  -H 'Authorization: Bearer ${forCurl}'`}
+        </div>
+        <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+          <button className="btn btn-line btn-sm"
+            onClick={async () => {
+              // Copy the runnable command: fetch the real token first when this
+              // browser doesn't already have it.
+              const token = live || (state?.enabled ? await reveal() : "");
+              if (state?.enabled && !token) return;
+              copy("cmd", `curl -s ${origin}/api/projects -H 'Authorization: Bearer ${token || "<你的令牌>"}'`);
+            }}>
+            {copied === "cmd" ? Icon.check() : Icon.copy()} {copied === "cmd" ? "已复制" : "复制命令"}
+          </button>
+          {state?.enabled && !live && (
+            <button className="btn btn-ghost btn-sm" onClick={reveal}>显示完整令牌</button>
+          )}
+        </div>
+        <div className="hlp">
+          从别的机器调用，还需要让服务监听局域网网卡 —— 启动时加上 <code>ORCH_HOSTNAME=0.0.0.0</code>（这一项是网络绑定，必须重启才能改变）。
+        </div>
+        <div className="hlp" style={{ color: "var(--amber)" }}>
+          令牌在 http 下是明文传输的。跨越不可信网络时，请在实例前面加一层 TLS。
+        </div>
+      </div>
+    </>
+  );
+}
+
+// The "Agents" section: connect coding agents beyond the required first-run
+// Claude one. Claude appears here as already-connected; Codex (and any future
+// agent) gets a "connect another agent" card driven by AgentConnect against the
+// generic /api/agents/[id]/* routes. Reads the same GET /api/agents the task
+// pickers gate on, so connecting here immediately un-grays the agent there.
+function AgentsSection({ defaultAgent, onChanged }: { defaultAgent: string; onChanged?: () => void }) {
+  const [agents, setAgents] = useState<AgentInfoT[] | null>(null);
+  const [def, setDef] = useState<string>(defaultAgent);
+
+  const load = () =>
+    jget<AgentsResponseT>("/api/agents")
+      .then((r) => { setAgents(r.agents); setDef(r.default); })
+      .catch(() => setAgents([]));
+  useEffect(() => { load(); }, []);
+
+  if (agents == null) return <LoadNote style={{ padding: 0 }}>正在加载智能体…</LoadNote>;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
+      <div className="hlp" style={{ marginTop: 0 }}>
+        每个任务都由一个编程智能体执行。连接一次智能体的订阅账号（或 API 密钥），新任务就能选用它。{def === "claude" ? "Claude 是默认智能体，还负责应用自身的辅助任务（摘要、回顾），建议保持连接。" : ""}
+      </div>
+      {agents.map((a) => (
+        <div key={a.id} className="field" style={{ marginBottom: 0 }}>
+          <div className="lab" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            {Icon.spark()} {a.label}
+            {a.id === def && <span className="opt">— 默认</span>}
+            {a.connected && (a.authBroken
+              // Connected on record but its login died — a green check here would
+              // contradict the card below it (and the titlebar banner).
+              ? <span className="wiz-warn" style={{ marginLeft: "auto" }} title="登录已失效">{Icon.bolt()}</span>
+              : <span className="wiz-ok" style={{ marginLeft: "auto" }}>{Icon.check()}</span>)}
+          </div>
+          <AgentConnect agent={a} compact onConnected={() => { load(); onChanged?.(); }} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// The EFFECTIVE utility agent, resolved connected-first by the server
+// (lib/agents/oneshots.ts). The buttons above show what's *configured*; this
+// line shows what will actually run — they diverge whenever the configured
+// agent isn't connected, and silently picking a different agent would be a
+// worse surprise than saying so. When nothing is connected at all, internal
+// jobs can't run, so this says that instead of naming a stand-in.
+function UtilityEffective({ agents }: { agents: AgentsBundle }) {
+  const u = agents.utility;
+  if (!u) return null;
+  if (!u.id)
+    return (
+      <div className="hlp" style={{ marginTop: 8 }}>
+        {Icon.bolt()} 尚未连接任何智能体 —— 项目回顾与上下文刷新已暂停。请在「设置 → 智能体」中连接一个。
+      </div>
+    );
+  const label = agentLabel(agents, u.id);
+  return (
+    <div className="hlp" style={{ marginTop: 8 }}>
+      当前运行于 <strong>{label}</strong>
+      {u.fallback && <span className="opt">（回退 —— {agentLabel(agents, u.configured)} 未连接）</span>}
+    </div>
+  );
+}
+
+// The settings surface is a two-pane view that replaces the work area: a category
+// nav (left) + the active section's content (right). Sections are data-driven so
+// growing settings is adding an entry here + a branch in renderSection — no layout
+// work. Today there's one section; appearance/models/integrations slot in later.
+const SETTINGS_SECTIONS: { id: string; label: string; icon: () => React.ReactNode }[] = [
+  { id: "general", label: "通用", icon: Icon.gear },
+  { id: "background", label: "后台任务", icon: Icon.clock },
+  { id: "run", label: "运行默认值", icon: Icon.spark },
+  { id: "agents", label: "智能体", icon: Icon.bolt },
+  { id: "storage", label: "存储", icon: Icon.archive },
+  { id: "github", label: "GitHub", icon: Icon.github },
+  { id: "account", label: "账号", icon: Icon.lock },
+  { id: "api", label: "接口访问", icon: Icon.copy },
+  { id: "setup", label: "初始设置", icon: Icon.bolt },
+];
+
+export function SettingsView({ settings, setSetting, appDefaults, setAppDefault, agents, onAgentsRefresh, onReset, onRerunSetup, onClose, initialSection }: {
+  settings: Settings;
+  setSetting: <K extends keyof Settings>(k: K, v: Settings[K]) => void;
+  appDefaults: Record<string, string>;
+  setAppDefault: (key: string, value: string | null) => Promise<void>;
+  agents: AgentsBundle;
+  onAgentsRefresh?: () => void;
+  onReset: () => void|Promise<void>;
+  onRerunSetup: () => void;
+  onClose: () => void;
+  initialSection?: string;
+}) {
+  const [resetting,setResetting]=useState(false);
+  const [resetError,setResetError]=useState<string|null>(null);
+  const reset=async()=>{if(resetting)return;setResetting(true);setResetError(null);try{await onReset();}catch(e){setResetError(e instanceof Error?e.message:String(e));}finally{setResetting(false);}};
+  const [section, setSection] = useState<string>(
+    initialSection && SETTINGS_SECTIONS.some((s) => s.id === initialSection) ? initialSection : SETTINGS_SECTIONS[0].id
+  );
+  // Which agent's run defaults are being edited (defaults are per-agent, keyed
+  // "default_reasoning:<agent>"). Falls back to the app default agent.
+  const appDefaultAgent = appDefaults.default_agent || agents.default;
+  const [editAgent, setEditAgent] = useState(appDefaultAgent);
+  const caps = capsFor(agents, editAgent);
+  // Agent-scoped default, with legacy un-suffixed keys as a fallback (mirrors the
+  // driver's resolution) so pre-existing settings still show as selected.
+  const modelVal = appDefaults[`default_model:${editAgent}`] ?? appDefaults.default_model ?? null;
+  const [customModel, setCustomModel] = useState("");
+  const [modelSaving, setModelSaving] = useState(false);
+  const [modelError, setModelError] = useState<string | null>(null);
+  const models = withCustomModels(caps?.models ?? [], [...new Set([
+    ...savedCustomModels(appDefaults[`custom_models:${editAgent}`]), ...(modelVal ? [modelVal] : []),
+  ])]);
+  useEffect(() => { setCustomModel(""); setModelError(null); }, [editAgent]);
+  const addModel = async () => {
+    if (!validModelId(customModel)) { setModelError("请输入有效的模型名称"); return; }
+    setModelSaving(true);
+    setModelError(null);
+    try {
+      await setAppDefault(`default_model:${editAgent}`, customModel.trim());
+      setCustomModel("");
+    } catch (error) {
+      setModelError(error instanceof Error ? error.message : "保存失败");
+    } finally { setModelSaving(false); }
+  };
+  const reasoningVal = appDefaults[`default_reasoning:${editAgent}`] ?? appDefaults.default_reasoning ?? null;
+  const permissionVal = appDefaults[`default_permission_mode:${editAgent}`] ?? appDefaults.default_permission_mode ?? null;
+  const multiAgent = agents.agents.length > 1;
+  const backgroundJobs = appDefaults.background_jobs !== "off";
+  const agentFailover = appDefaults.agent_failover_enabled !== "off";
+  const recapMode = appDefaults.recap_mode === "on_open" || appDefaults.recap_mode === "off"
+    ? appDefaults.recap_mode
+    : "automatic";
+  const [jobUsage, setJobUsage] = useState<Record<string, { runs: number; cost_usd: number }> | null>(null);
+  useEffect(() => {
+    if (section !== "background" || jobUsage !== null) return;
+    jget<{ jobs: { job: string; runs: number; cost_usd: number }[] }>("/api/settings/background-jobs")
+      .then((data) => setJobUsage(Object.fromEntries(data.jobs.map((j) => [j.job, { runs: j.runs, cost_usd: j.cost_usd }]))))
+      .catch(() => setJobUsage({}));
+  }, [jobUsage, section]);
+  const recapUsage = jobUsage?.summarizeProjectRecap ?? { runs: 0, cost_usd: 0 };
+  const utilityUsage = [jobUsage?.summarizeProjectRecap, jobUsage?.draftProjectContext]
+    .filter((u): u is { runs: number; cost_usd: number } => !!u)
+    .reduce((sum, u) => ({ runs: sum.runs + u.runs, cost_usd: sum.cost_usd + u.cost_usd }), { runs: 0, cost_usd: 0 });
+  const usageLine = (label: string, usage = recapUsage) =>
+    `${label} · 最近 30 天运行 ${usage.runs.toLocaleString()} 次 · 约 $${usage.cost_usd.toFixed(2)}`;
+  // Any server-backed run default set (agent-scoped, legacy, or default_agent)
+  // means we're off the built-in defaults.
+  const hasRunDefault = Object.keys(appDefaults).some((k) => k.startsWith("default_") || k === "utility_agent");
+  const hasBackgroundDefault = !backgroundJobs || recapMode !== "automatic";
+  const hasFailoverSetting = appDefaults.agent_failover_enabled === "off";
+  const isDefault = settings.clearThresholdPct === DEFAULT_SETTINGS.clearThresholdPct
+    && settings.clearThresholdTokens === DEFAULT_SETTINGS.clearThresholdTokens
+    && !hasRunDefault
+    && !hasBackgroundDefault
+    && !hasFailoverSetting;
+  // Clamp on commit so a half-typed value never persists out of range.
+  const clampPct = (n: number) => Math.min(100, Math.max(1, Math.round(n)));
+  const clampTokens = (n: number) => Math.max(1000, Math.round(n));
+  const active = SETTINGS_SECTIONS.find((s) => s.id === section) ?? SETTINGS_SECTIONS[0];
+  return (
+    <>
+      <div className="col settings-nav">
+        {resetError && <div role="alert" className="comp-error">{resetError}</div>}
+      <div className="settings-nav-h">设置</div>
+        <div className="settings-nav-list">
+          {SETTINGS_SECTIONS.map((s) => (
+            <button key={s.id} className={`nav-item${section === s.id ? " active" : ""}`} onClick={() => setSection(s.id)}>
+              {s.icon()} {s.label}
+            </button>
+          ))}
+        </div>
+        <div className="settings-nav-foot">{section === "background" ? "智能体辅助任务 · 保存在此工作区" : section === "run" ? "运行默认值 · 保存在此工作区" : section === "agents" ? "编程智能体登录 · 保存在此工作区" : section === "storage" ? "磁盘清理 · 作用于此工作区" : section === "github" ? "GitHub 连接 · 保存在此工作区" : section === "account" ? "你在本实例上的登录" : section === "api" ? "接口令牌 · 保存后立即生效" : section === "setup" ? "首次运行设置 · 保存在此工作区" : "应用级偏好 · 保存在此浏览器"}</div>
+      </div>
+      <div className="col col-session">
+        <div className="settings-head">
+          <div className="settings-title">{active.label}</div>
+          <span className="spacer" />
+          <button className="btn btn-ghost btn-sm" onClick={()=>void reset()} disabled={isDefault||resetting} title="把所有设置恢复为默认值">{Icon.restore()} {resetting?"正在恢复…":"恢复默认"}</button>
+          <button className="btn btn-line btn-sm" onClick={onClose}>{Icon.chevRight({ style: { transform: "rotate(180deg)" } })} 返回工作区</button>
+        </div>
+        <div className="scroll">
+          <div className="settings-body">
+            {section === "general" && (
+              <div className="field">
+                <div className="lab">{Icon.clear()} /clear 提示阈值</div>
+                <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                  当会话的上下文窗口超过其中任一阈值时，应用会提示你运行 <code>/clear</code> 重新开始。以先达到的那个为准。
+                </div>
+                <div style={{ display: "flex", gap: 14, maxWidth: 420 }}>
+                  <div className="field" style={{ flex: 1, marginBottom: 0 }}>
+                    <div className="lab">窗口占比 <span className="opt">— %</span></div>
+                    <input
+                      type="number" min={1} max={100} value={settings.clearThresholdPct}
+                      onChange={(e) => setSetting("clearThresholdPct", Number(e.target.value) || 0)}
+                      onBlur={(e) => setSetting("clearThresholdPct", clampPct(Number(e.target.value) || DEFAULT_SETTINGS.clearThresholdPct))}
+                    />
+                  </div>
+                  <div className="field" style={{ flex: 1, marginBottom: 0 }}>
+                    <div className="lab">绝对 token 数 <span className="opt">— 个</span></div>
+                    <input
+                      type="number" min={1000} step={1000} value={settings.clearThresholdTokens}
+                      onChange={(e) => setSetting("clearThresholdTokens", Number(e.target.value) || 0)}
+                      onBlur={(e) => setSetting("clearThresholdTokens", clampTokens(Number(e.target.value) || DEFAULT_SETTINGS.clearThresholdTokens))}
+                    />
+                  </div>
+                </div>
+                <div className="hlp" style={{ marginTop: 8 }}>
+                  默认值：{DEFAULT_SETTINGS.clearThresholdPct}% 或 {DEFAULT_SETTINGS.clearThresholdTokens.toLocaleString()} tokens。
+                </div>
+              </div>
+            )}
+            {section === "background" && (
+              <>
+                <div className="field">
+                  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+                    <div style={{ flex: 1 }}>
+                      <div className="lab">{Icon.bolt()} 模型故障自动切换</div>
+                      <div className="hlp" style={{ marginTop: 4 }}>
+                        当前模型因限流、额度或服务不可用失败时，自动尝试另一个智能体一次。
+                      </div>
+                    </div>
+                    <button
+                      role="switch"
+                      aria-label="模型故障自动切换"
+                      aria-checked={agentFailover}
+                      className={`in-switch${agentFailover ? " on" : ""}`}
+                      onClick={() => setAppDefault("agent_failover_enabled", agentFailover ? "off" : null)}
+                    ><span /></button>
+                  </div>
+                </div>
+                <div className="field">
+                  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+                    <div style={{ flex: 1 }}>
+                      <div className="lab">{Icon.bolt()} 允许 Operator 用你的智能体执行后台工作</div>
+                      <div className="hlp" style={{ marginTop: 4 }}>
+                        关闭后将停止无人值守的智能体工作。你主动触发的操作 —— 例如 <code>/clear</code>、「用 AI 刷新」或手动刷新回顾 —— 仍会照常运行。
+                      </div>
+                    </div>
+                    <button
+                      role="switch"
+                      aria-label="允许 Operator 用你的智能体执行后台工作"
+                      aria-checked={backgroundJobs}
+                      className={`in-switch${backgroundJobs ? " on" : ""}`}
+                      onClick={() => setAppDefault("background_jobs", backgroundJobs ? "off" : null)}
+                    ><span /></button>
+                  </div>
+                  <div className="hlp" style={{ marginTop: 10 }}>{jobUsage === null ? "正在加载最近 30 天用量…" : usageLine("项目回顾活动")}</div>
+                </div>
+
+                <div className="field">
+                  <div className="lab">{Icon.clock()} 项目回顾</div>
+                  <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                    选择 Operator 何时生成新的「上次进度」回顾。任何模式下都可以手动刷新。
+                  </div>
+                  <div className="seg" style={{ flexWrap: "wrap", maxWidth: 620 }}>
+                    {([
+                      ["automatic", "自动"],
+                      ["on_open", "仅在我打开项目时"],
+                      ["off", "关闭"],
+                    ] as const).map(([value, label]) => (
+                      <button key={value} className={recapMode === value ? "on" : ""} onClick={() => setAppDefault("recap_mode", value === "automatic" ? null : value)}>{label}</button>
+                    ))}
+                  </div>
+                  <div className="hlp" style={{ marginTop: 10 }}>{jobUsage === null ? "正在加载最近 30 天用量…" : usageLine("项目回顾")}</div>
+                </div>
+
+                <div className="field">
+                  <div className="lab">{Icon.spark()} 辅助智能体</div>
+                  <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                    把 Operator 的辅助工作放到更便宜或第二个账号上 —— 例如用 Codex 跑回顾，把 Claude 的额度留给主要任务。
+                  </div>
+                  <div className="seg" style={{ flexWrap: "wrap", maxWidth: 520 }}>
+                    {agents.agents.map((a) => (
+                      <button
+                        key={a.id}
+                        className={(appDefaults.utility_agent || agents.utility?.configured || appDefaultAgent) === a.id ? "on" : ""}
+                        title={agentStateHint(a) ? `${a.label} ${agentStateHint(a) === "未安装" ? "的命令行工具未安装在服务器上" : "尚未连接"}` : `用 ${a.label} 运行辅助任务`}
+                        onClick={() => setAppDefault("utility_agent", a.id)}
+                      >
+                        {a.label}{agentStateHint(a) && <span className="opt"> · {agentStateHint(a)}</span>}
+                      </button>
+                    ))}
+                  </div>
+                  <UtilityEffective agents={agents} />
+                  <div className="hlp" style={{ marginTop: 10 }}>{jobUsage === null ? "正在加载最近 30 天用量…" : usageLine("辅助智能体任务", utilityUsage)}</div>
+                </div>
+              </>
+            )}
+            {section === "run" && (
+              <>
+                {multiAgent && (
+                  <div className="field">
+                    <div className="lab">{Icon.bolt()} 默认智能体</div>
+                    <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                      当项目未设置自己的默认值时，新任务使用的智能体。任务创建后其智能体即固定。
+                    </div>
+                    <div className="seg" style={{ flexWrap: "wrap", maxWidth: 520 }}>
+                      {agents.agents.map((a) => (
+                        <button
+                          key={a.id}
+                          className={appDefaultAgent === a.id ? "on" : ""}
+                          title={agentStateHint(a) ? `${a.label} ${agentStateHint(a) === "未安装" ? "的命令行工具未安装在服务器上" : "尚未连接"}` : `新任务默认使用 ${a.label}`}
+                          onClick={() => setAppDefault("default_agent", a.id)}
+                        >
+                          {a.label}{agentStateHint(a) && <span className="opt"> · {agentStateHint(a)}</span>}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {multiAgent && (
+                  <div className="field">
+                    <div className="lab">要编辑哪个智能体的运行默认值</div>
+                    <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                      每个智能体都有各自的推理强度与权限默认值 —— 选择要编辑的那个。
+                    </div>
+                    <div className="seg" style={{ flexWrap: "wrap", maxWidth: 520 }}>
+                      {agents.agents.map((a) => (
+                        <button key={a.id} className={editAgent === a.id ? "on" : ""} onClick={() => setEditAgent(a.id)}>{a.label}</button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                <div className="field">
+                  <div className="lab">{Icon.spark()} 默认模型</div>
+                  <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                    新任务、以及模型选择器保持<strong>默认</strong>的任务，实际使用的模型。留在「默认」则交给
+                    {agentLabel(agents, editAgent)} 自己决定。任务级设置始终优先。
+                  </div>
+                  {/* A dropdown, not the button row the other two use: Claude alone
+                      offers a dozen-plus pinned versions, which no seg can hold. */}
+                  <select
+                    className="ctx-mono"
+                    style={{ maxWidth: 420 }}
+                    value={modelVal ?? ""}
+                    aria-label="默认模型"
+                    onChange={(e) => setAppDefault(`default_model:${editAgent}`, e.target.value || null)}
+                  >
+                    {modelOptions(caps ? { ...caps, models } : undefined).map((m) => (
+                      <option key={m.value ?? "default"} value={m.value ?? ""}>
+                        {m.group ? `${m.group} · ` : ""}{m.label}{m.sub ? ` — ${m.sub}` : ""}
+                      </option>
+                    ))}
+                  </select>
+                  {caps?.supportsCustomModels && (
+                    <form onSubmit={(event) => { event.preventDefault(); void addModel(); }} style={{ marginTop: 12 }}>
+                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                        <input className="ctx-mono" aria-label="添加自定义模型" placeholder="输入模型名称 / ID" value={customModel} maxLength={2048} disabled={modelSaving} onChange={(event) => setCustomModel(event.target.value)} />
+                        <button className="btn btn-accent" type="submit" disabled={modelSaving || !customModel.trim()}>{modelSaving ? "保存中…" : "添加并设为默认"}</button>
+                      </div>
+                      <div className="hlp">填写当前服务支持的模型名称，保存后可在模型列表中重复选择。</div>
+                      {modelError && <div className="hlp" style={{ color: "var(--red)" }}>{modelError}</div>}
+                    </form>
+                  )}
+                </div>
+                <div className="field">
+                  <div className="lab">{Icon.spark()} 默认推理强度</div>
+                  <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                    当任务自身的选择器设为<strong>默认</strong>时所使用的思考强度。任务级设置始终优先。
+                  </div>
+                  <div className="seg" style={{ flexWrap: "wrap", maxWidth: 520 }}>
+                    {reasoningOptions(caps).map((r) => (
+                      <button
+                        key={r.label}
+                        className={reasoningVal === r.value ? "on" : ""}
+                        title={r.sub}
+                        onClick={() => setAppDefault(`default_reasoning:${editAgent}`, r.value)}
+                      >
+                        {r.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <div className="field">
+                  <div className="lab">{Icon.lock()} 默认权限模式</div>
+                  <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+                    当任务自身的选择器保持默认时的运行方式。<strong>计划模式</strong>只提出方案，不修改文件。
+                  </div>
+                  <div className="seg" style={{ flexWrap: "wrap", maxWidth: 520 }}>
+                    {permissionOptions(caps).map((p) => (
+                      <button
+                        key={p.label}
+                        className={permissionVal === p.value ? "on" : ""}
+                        title={p.sub}
+                        onClick={() => setAppDefault(`default_permission_mode:${editAgent}`, p.value)}
+                      >
+                        {p.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+            {section === "agents" && <AgentsSection defaultAgent="claude" onChanged={onAgentsRefresh} />}
+            {section === "storage" && <WorktreePrune />}
+            {section === "github" && <GitHubSettings />}
+            {section === "account" && <AccountSection />}
+            {section === "api" && <ApiAccessSection />}
+            {section === "setup" && (
+              <div className="field">
+                <div className="lab">{Icon.bolt()} 首次运行设置</div>
+                <div className="hlp" style={{ marginTop: 0, marginBottom: 12 }}>
+                  重新运行引导式设置，可以重新连接 Claude、在订阅账号与 API 密钥之间切换，或添加新项目。你现有的项目和会话不会受影响。
+                </div>
+                <button className="btn btn-line" onClick={onRerunSetup} style={{ alignSelf: "flex-start" }}>
+                  {Icon.restore()} 重新运行设置向导
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}