@spzxg/cli-ui 0.6.1 → 0.6.5

package/src/operator/branchFlow.ts

@@ -0,0 +1,35 @@
+import type { Msg } from "../core/types";
+export interface BranchTask { id: string; project_id: string; title: string; agent: string; status: string; created_at?: number; updated_at?: number; parent_task_id?: string | null; fork_group_id?: string | null; fork_commit?: string | null; fork_source_title?: string | null; fork_context?: string | null; work_branch?: string; running?: number }
+
+
+export type BranchStep<T extends BranchTask = BranchTask> = { source: T | null; child: T };
+
+/** The selected path, oldest source first. Missing/deleted sources keep a boundary. */
+export function branchAncestry<T extends BranchTask>(task: T, tasks: T[]): BranchStep<T>[] {
+  const byId = new Map(tasks.filter((t) => t.project_id === task.project_id).map((t) => [t.id, t]));
+  const visited = new Set([task.id]);
+  const steps: BranchStep<T>[] = [];
+  let child = task;
+  while (child.parent_task_id && !visited.has(child.parent_task_id)) {
+    visited.add(child.parent_task_id);
+    const source = byId.get(child.parent_task_id) ?? null;
+    steps.unshift({ source, child });
+    if (!source) break;
+    child = source;
+  }
+  return steps;
+}
+
+/** Outgoing paths only; a source is never presented as its own child branch. */
+export function branchOptions<T extends BranchTask>(sourceId: string, projectId: string, tasks: T[], selected?: T): T[] {
+  const local = tasks.filter((t) => t.project_id === projectId);
+  const direct = local.filter((t) => t.parent_task_id === sourceId);
+  const groups = new Set([...direct, ...(selected ? [selected] : [])].map((t) => t.fork_group_id).filter(Boolean));
+  return local.filter((t) => t.id !== sourceId && (t.parent_task_id === sourceId || !!t.fork_group_id && groups.has(t.fork_group_id)));
+}
+
+// A parent may have been resumed since the fork. Its later messages belong to
+// that parent, not above the historical point where this child branched off.
+export function messagesAtFork(messages: Msg[], child: BranchTask): Msg[] {
+  return messages.filter((m) => m.role !== "queued" && (!child.created_at || !m.ts || m.ts <= child.created_at));
+}

package/src/operator/index.ts

@@ -0,0 +1,9 @@
+export { default as OperatorWorkspace } from "./node/Orchestrator";
+export type { TaskRow, ProjectRow, AgentsBundle } from "./node/types";
+
+export { default as OperatorFilePage } from "./node/ViewFile";
+export { default as OperatorBrowserPage } from "./node/BrowserPopup";
+
+export type { OperatorBoardOptions, OperatorBoardTab } from "./node/boardInteraction";
+
+export { createOperatorWorkspace } from "./node/boardWorkspace";

package/src/operator/liveStream.ts

@@ -0,0 +1 @@
+export * from "./node/liveStream";

package/src/operator/node/AgentConnect.tsx

@@ -0,0 +1,624 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { jget, jsend } from "./api";
+import { Modal } from "./Modal";
+import { AUTH_BANNER_HINT } from "./protocol/authFailure";
+import { isOptInAgent } from "./protocol/agents/optIn";
+import { ProviderAuthPanel } from "./ProviderAuth";
+import type { AgentInfo, AgentInfoT, AgentsResponseT, AgentLoginT, ClaudeVerifyT } from "./types";
+
+const NUDGE_DISMISSED = "orch_agent_nudge_dismissed";
+
+// The instance-wide "your agent login died" strip, under the titlebar.
+//
+// An expired OAuth session is per-INSTANCE (one login per agent, shared by every
+// task), but it only shows up as a failed turn inside whichever task ran first —
+// so without this you'd have to open that task to learn that nothing can run.
+// The flag is server-persisted (lib/agents/connections.ts) and broadcast on
+// GET /api/events, so this appears in every tab within a moment of the failure
+// and disappears the instant a turn succeeds again. Deliberately not
+// dismissible: no session can run until it's fixed.
+export function AgentAuthBanner({ broken, onReconnect }: { broken: AgentInfo[]; onReconnect: () => void }) {
+  if (broken.length === 0) return null;
+  const names = broken.map((a) => a.label).join(" 与 ");
+  // One agent: show what the provider actually said, so "expired session" isn't
+  // confused with "revoked key" or a network blip. Several: keep it to the names.
+  const detail = broken.length === 1 ? broken[0].authBroken?.reason : null;
+  return (
+    <div className="auth-banner" role="alert">
+      <span className="ab-ic">{Icon.bolt()}</span>
+      <span className="ab-msg">
+        <b>{names} 已无法工作 —— 其登录凭据需要处理。</b> {AUTH_BANNER_HINT}
+        {detail && <span className="ab-why" title={detail}>{detail}</span>}
+      </span>
+      <span className="ab-spacer" />
+      <button className="btn btn-sm btn-accent" onClick={onReconnect}>
+        重新连接 {broken.length === 1 ? broken[0].label : "智能体"}
+      </button>
+    </div>
+  );
+}
+
+// Post-setup nudge: once the required Claude connection is done, gently suggest
+// connecting the other available agents (Codex) so tasks can run on them too.
+// Optional and dismissible (once, via localStorage) — the wizard never requires
+// a second agent. Renders nothing until it confirms there's an unconnected agent
+// to offer, so it never flashes for a single-agent instance.
+export function AgentNudge({ ready, onConnect }: { ready: boolean; onConnect: () => void }) {
+  const [pending, setPending] = useState<AgentInfoT[] | null>(null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!ready) return;
+    try { if (localStorage.getItem(NUDGE_DISMISSED) === "1") return; } catch {}
+    jget<AgentsResponseT>("/api/agents")
+      .then((r) => {
+        // Opt-in agents (Grok, Pi) never reopen the existing nudge.
+        const unconnected = r.agents.filter((a) => !isOptInAgent(a.id) && !a.connected);
+        if (unconnected.length) { setPending(unconnected); setOpen(true); }
+      })
+      .catch(() => {});
+  }, [ready]);
+
+  if (!open || !pending || pending.length === 0) return null;
+  const names = pending.map((a) => a.label).join(" 与 ");
+  const close = () => { setOpen(false); try { localStorage.setItem(NUDGE_DISMISSED, "1"); } catch {} };
+
+  return (
+    <Modal
+      title="再连接一个智能体"
+      sub="让任务可以在多个编程智能体上运行 —— 完全可选。"
+      onClose={close}
+      width={480}
+      footer={<>
+        <span className="spacer" />
+        <button className="btn btn-ghost" onClick={close}>暂不</button>
+        <button className="btn btn-accent" onClick={() => { close(); onConnect(); }}>
+          {Icon.bolt()} 连接 {pending.length === 1 ? pending[0].label : "智能体"}
+        </button>
+      </>}
+    >
+      <p style={{ margin: 0, color: "var(--ink-2)", lineHeight: 1.55 }}>
+        用订阅账号登录 {names}（无需 API 密钥），任务中就也能选用它{pending.length > 1 ? "们" : ""}。
+        之后随时可以在 <strong>设置 → 智能体</strong> 中完成。
+      </p>
+    </Modal>
+  );
+}
+
+// Generic "connect an agent" card, driven entirely by the agent-scoped auth
+// routes (/api/agents/[id]/{login,login/code,verify,api-key}) and the driver's
+// capabilities from GET /api/agents. One component serves every agent — Claude's
+// paste-a-code OAuth and Codex's device-code flow both fit — so agent #3 is a
+// registry entry with no new UI. Used by the Settings "Agents" section and the
+// post-setup "connect another agent" nudge. (The first-run wizard keeps its own
+// Claude-specific step so it can drive the onboarding funnel.)
+//
+// Agents that front many model providers (capabilities.supportsProviderAuth —
+// Pi) also get the per-provider auth panel under the card; every other agent
+// renders exactly the card.
+export function AgentConnect(props: { agent: AgentInfoT; onConnected?: () => void; compact?: boolean }) {
+  // No panel when the CLI isn't on this machine: there is nothing to manage,
+  // and listing providers would only spawn a helper that fails.
+  if (!props.agent.capabilities.supportsProviderAuth || props.agent.installed === false) return <AgentConnectCard {...props} />;
+  return (
+    <div>
+      <AgentConnectCard {...props} />
+      <ProviderAuthPanel agent={props.agent} onConnected={props.onConnected} />
+    </div>
+  );
+}
+
+function AgentConnectCard({
+  agent,
+  onConnected,
+  compact,
+}: {
+  agent: AgentInfoT;
+  onConnected?: () => void;
+  compact?: boolean;
+}) {
+  const configuredBedrock = agent.provider === "bedrock";
+  const configuredCompatible = agent.provider === "compatible";
+  const canApiKey = !!agent.capabilities.apiKeyHint && !configuredBedrock;
+  const canBedrock = agent.capabilities.supportsBedrock === true;
+  const [mode, setMode] = useState<"subscription" | "api_key" | "bedrock">(
+    configuredBedrock || agent.account?.method === "bedrock" ? "bedrock" : agent.account?.method === "api_key" ? "api_key" : "subscription"
+  );
+  const [reconnect, setReconnect] = useState(false);
+
+  // Connected on record, but its credentials died in flight (lib/authFailure.ts).
+  // Never show the green "is connected" state here: the banner sends people to
+  // this card to FIX it, so lead with what broke and put the login one click away.
+  if (agent.connected && agent.authBroken && !reconnect) {
+    return (
+      <div className="wiz-connected broken">
+        <span className="wiz-warn">{Icon.bolt()}</span>
+        <div>
+          <div className="wiz-ok-t">
+            {agent.label} 的登录凭据已失效
+            {agent.account?.email ? <>（账号 <strong>{agent.account.email}</strong>）</> : ""}
+          </div>
+          <div className="hlp" style={{ margin: "3px 0 0" }}>{agent.authBroken.reason}</div>
+          <button className="btn btn-accent btn-sm" style={{ marginTop: 9 }} onClick={() => setReconnect(true)}>
+            {Icon.bolt()} 刷新连接
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Already connected from a prior run — show the state + a reconnect affordance.
+  if (agent.connected && !reconnect) {
+    return (
+      <div className="wiz-connected">
+        <span className="wiz-ok">{Icon.check()}</span>
+        <div>
+          <div className="wiz-ok-t">
+            {agent.label} 已连接
+            {agent.account?.email ? <>，账号 <strong>{agent.account.email}</strong></> : ""}
+            {agent.account?.plan ? `（${agent.account.plan}）` : ""}
+          </div>
+          <div className="hlp" style={{ margin: "3px 0 0" }}>
+            <button className="linkbtn" onClick={() => setReconnect(true)}>{configuredCompatible ? "重新验证连接" : "换一个账号重新连接"}</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {!configuredCompatible && !configuredBedrock && (canApiKey || canBedrock) && (
+        <div className="seg" style={{ maxWidth: 460, marginBottom: 16 }}>
+          <button className={mode === "subscription" ? "on" : ""} onClick={() => setMode("subscription")}>
+            {Icon.bolt()} 登录
+          </button>
+          <button className={mode === "api_key" ? "on" : ""} onClick={() => setMode("api_key")}>
+            {Icon.lock()} 我有 API 密钥
+          </button>
+          {canBedrock && (
+            <button className={mode === "bedrock" ? "on" : ""} onClick={() => setMode("bedrock")}>
+              AWS Bedrock
+            </button>
+          )}
+        </div>
+      )}
+      {configuredCompatible ? (
+        <BedrockConnect agent={agent} onConnected={onConnected} compatible />
+      ) : mode === "subscription" ? (
+        <SubscriptionConnect agent={agent} compact={compact} onConnected={onConnected} />
+      ) : mode === "api_key" ? (
+        <ApiKeyConnect agent={agent} onConnected={onConnected} />
+      ) : (
+        <BedrockConnect agent={agent} onConnected={onConnected} />
+      )}
+    </div>
+  );
+}
+
+// ---------- Amazon Bedrock ----------
+
+function BedrockConnect({ agent, onConnected, compatible = false }: { agent: AgentInfoT; onConnected?: () => void; compatible?: boolean }) {
+  const provider = compatible ? "compatible" : "bedrock";
+  const label = compatible ? "兼容端点" : "Amazon Bedrock";
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  const verify = async () => {
+    setBusy(true);
+    setErr(null);
+    try {
+      const r = await jsend<ClaudeVerifyT>(`/api/agents/${agent.id}/verify`, "POST");
+      if (!r.connected || r.provider !== provider) {
+        setErr(r.connected
+          ? `Claude 有响应，但它并未配置为使用 ${label}。`
+          : r.error ?? `${label} 验证失败。`);
+        return;
+      }
+      onConnected?.();
+    } catch (e) {
+      setErr((e instanceof Error ? e.message : String(e)).replace(/^\d+\s*/, ""));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="field" style={{ maxWidth: 620 }}>
+      <div className="hlp" style={{ marginTop: 0 }}>
+        {compatible ? <>已检测到 Claude Code 的第三方兼容端点配置。点击验证，通过现有 CLI 运行一次测试，成功后即可在 Operator 中使用。</> : <>为 Claude Code 配置 <code>CLAUDE_CODE_USE_BEDROCK=1</code>、AWS 区域和 AWS 凭据，然后重启 Operator。在 Docker 中，请在 Compose 的 environment 里设置这些值。你也可以在终端运行 <code>claude</code> 并使用 <code>/setup-bedrock</code>；其设置会保存在 <code>~/.claude</code>。</>}
+      </div>
+      <button className="btn btn-accent" disabled={busy} onClick={verify} style={{ alignSelf: "flex-start" }}>
+        {Icon.bolt()} {busy ? `正在测试 ${label}…` : `验证 ${label}`}
+      </button>
+      {busy && <div className="wiz-verify"><span className="wiz-spin" /> <span>正在通过 {label} 运行一次快速测试…</span></div>}
+      {err && <div className="hlp" style={{ color: "var(--red)", marginTop: 8 }}>⚠ {err}</div>}
+      {!compatible && agent.providerRefresh && <BedrockRefresh agent={agent} onConnected={onConnected} />}
+    </div>
+  );
+}
+
+// The in-app AWS SSO refresh: drives the agent's login surface, which on
+// Bedrock runs the instance's refresh command (Claude Code's `awsAuthRefresh`
+// setting, or a device-code `aws sso login` for the SSO profile) and surfaces
+// the device URL + one-time code here. Clicking through lands on the IdP
+// (silent if that session is still live) then the AWS approval page; nothing is
+// pasted back — the command exits on approval and the poll flips to success.
+function BedrockRefresh({ agent, onConnected }: { agent: AgentInfoT; onConnected?: () => void }) {
+  const [login, setLogin] = useState<AgentLoginT | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [showLog, setShowLog] = useState(false);
+  const fired = useRef(false);
+  const base = `/api/agents/${agent.id}/login`;
+
+  // Rejoin a refresh already underway (card re-mounted / page reload).
+  useEffect(() => {
+    jget<AgentLoginT | null>(base)
+      .then((l) => { if (l && l.status !== "idle") setLogin(l); })
+      .catch(() => {});
+  }, [base]);
+
+  const succeed = useCallback(() => {
+    if (fired.current) return;
+    fired.current = true;
+    // Prove the fresh credentials end-to-end (also updates the connection record).
+    jsend<ClaudeVerifyT>(`/api/agents/${agent.id}/verify`, "POST").catch(() => {}).finally(() => onConnected?.());
+  }, [agent.id, onConnected]);
+
+  const start = async () => {
+    setBusy(true);
+    fired.current = false;
+    try {
+      const l = await jsend<AgentLoginT>(base, "POST");
+      setLogin(l);
+      if (l.status === "success") succeed();
+    } catch (e) {
+      setLogin({ status: "error", url: null, email: null, plan: null, log: "", error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Poll while the CLI waits for the browser-side approval.
+  useEffect(() => {
+    if (!login || (login.status !== "starting" && login.status !== "awaiting")) return;
+    const t = setInterval(() => {
+      jget<AgentLoginT>(base).then((l) => {
+        setLogin(l);
+        if (l.status === "success") succeed();
+      }).catch(() => {});
+    }, 1800);
+    return () => clearInterval(t);
+  }, [login, base, succeed]);
+
+  if (login?.status === "success") {
+    return (
+      <div className="wiz-connected" style={{ marginTop: 12 }}>
+        <span className="wiz-ok">{Icon.check()}</span>
+        <div className="wiz-ok-t">AWS 登录已刷新</div>
+      </div>
+    );
+  }
+
+  if (login?.status === "error") {
+    return (
+      <div style={{ marginTop: 12 }}>
+        <div className="hlp" style={{ marginTop: 0, color: "var(--red)" }}>⚠ {login.error ?? "AWS 刷新失败"}</div>
+        <button className="btn btn-line btn-sm" onClick={start} disabled={busy} style={{ marginTop: 8 }}>{Icon.restore()} 重试</button>
+        <LogToggle log={login.log} show={showLog} setShow={setShowLog} />
+      </div>
+    );
+  }
+
+  if (login && (login.status === "awaiting" || login.status === "submitting")) {
+    return (
+      <div className="wiz-codecard" style={{ marginTop: 12 }}>
+        <div className="hlp" style={{ marginTop: 0 }}>1. 打开此链接，用你的 AWS / 公司账号确认登录：</div>
+        <div style={{ display: "flex", gap: 10, margin: "10px 0 6px", flexWrap: "wrap" }}>
+          <a className="btn btn-accent" href={login.url ?? undefined} target="_blank" rel="noreferrer">{Icon.bolt()} 打开 AWS 登录页</a>
+          <button className="btn btn-line" onClick={() => login.url && navigator.clipboard?.writeText(login.url)}>复制链接</button>
+        </div>
+        <div className="hlp" style={{ marginTop: 6 }}>
+          2. 如果页面要求输入验证码，请输入{login.code ? "：" : "页面上显示的验证码。"}
+        </div>
+        {login.code && <div className="ctx-mono" style={{ fontSize: 20, letterSpacing: 2, margin: "8px 0 2px", fontWeight: 600 }}>{login.code}</div>}
+        <div className="wiz-verify" style={{ marginTop: 10 }}><span className="wiz-spin" /> <span>等待你在浏览器中确认…</span></div>
+        <LogToggle log={login.log} show={showLog} setShow={setShowLog} />
+      </div>
+    );
+  }
+
+  if (login?.status === "starting") {
+    return <div className="wiz-verify" style={{ marginTop: 12 }}><span className="wiz-spin" /> <span>正在启动 AWS 刷新…获取登录链接。</span></div>;
+  }
+
+  // idle — the refresh CTA under the verify button
+  return (
+    <div className="hlp" style={{ marginTop: 10 }}>
+      AWS 会话已过期？{" "}
+      <button className="linkbtn" onClick={start} disabled={busy}>
+        {busy ? "启动中…" : "刷新 AWS 登录"}
+      </button>{" "}
+      —— 在浏览器里确认即可，无需回填任何内容。
+    </div>
+  );
+}
+
+// ---------- subscription (device / paste-code) login ----------
+
+function SubscriptionConnect({ agent, onConnected, compact }: { agent: AgentInfoT; onConnected?: () => void; compact?: boolean }) {
+  const [existingAuth, setExistingAuth] = useState<{ authenticated: boolean; email: string | null; plan: string | null } | null>(null);
+  const [checkingAuth, setCheckingAuth] = useState(true);
+  const [chooseLogin, setChooseLogin] = useState(false);
+  const [login, setLogin] = useState<AgentLoginT | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [code, setCode] = useState("");
+  const [showLog, setShowLog] = useState(false);
+  const [verifying, setVerifying] = useState(false);
+  const [verifyErr, setVerifyErr] = useState<string | null>(null);
+  const fired = useRef(false);
+  const pasteStyle = agent.capabilities.loginStyle === "paste_code";
+  const base = `/api/agents/${agent.id}/login`;
+
+  // Prefer the CLI's existing credentials over an unfinished app login.
+  useEffect(() => {
+    let active = true;
+    setCheckingAuth(true);
+    setExistingAuth(null);
+    setChooseLogin(false);
+    jget<{ authenticated: boolean; email: string | null; plan: string | null }>(`/api/agents/${agent.id}/status`)
+      .then((status) => { if (active) setExistingAuth(status); })
+      .catch(() => {})
+      .finally(() => { if (active) setCheckingAuth(false); });
+    return () => { active = false; };
+  }, [agent.id]);
+
+  // Rejoin a login already underway (card re-mounted / page reload).
+  useEffect(() => {
+    jget<AgentLoginT | null>(base)
+      .then((l) => { if (l && l.status !== "idle") setLogin(l); })
+      .catch(() => {});
+  }, [base]);
+
+  const succeed = useCallback(() => {
+    if (fired.current) return;
+    fired.current = true;
+    // Prove it end-to-end before declaring victory (updates the connection record).
+    jsend<ClaudeVerifyT>(`/api/agents/${agent.id}/verify`, "POST").catch(() => {}).finally(() => onConnected?.());
+  }, [agent.id, onConnected]);
+
+  // Escape hatch for a CLI that's already authenticated on this machine (login
+  // done outside the app, restored home dir): skip the OAuth dance and just run
+  // the verify test turn, which writes the connection record on success.
+  const verifyExisting = async () => {
+    setVerifying(true);
+    setVerifyErr(null);
+    try {
+      const r = await jsend<ClaudeVerifyT>(`/api/agents/${agent.id}/verify`, "POST");
+      if (r.connected) {
+        fired.current = true; // verify already ran — succeed() would run it again
+        onConnected?.();
+      } else {
+        setVerifyErr(r.error ?? `本机未找到可用的 ${agent.label} 登录`);
+      }
+    } catch (e) {
+      setVerifyErr((e instanceof Error ? e.message : String(e)).replace(/^\d+\s*/, ""));
+    } finally {
+      setVerifying(false);
+    }
+  };
+
+  const start = async () => {
+    setBusy(true);
+    setCode("");
+    fired.current = false;
+    setVerifyErr(null);
+    try {
+      const l = await jsend<AgentLoginT>(base, "POST");
+      setLogin(l);
+      if (l.status === "success") succeed();
+    } catch (e) {
+      setLogin({ status: "error", url: null, email: null, plan: null, log: "", error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Poll while the CLI waits for the user to authorize / exchange the code.
+  useEffect(() => {
+    if (checkingAuth || (existingAuth?.authenticated && !chooseLogin)) return;
+    if (!login || (login.status !== "starting" && login.status !== "awaiting" && login.status !== "submitting")) return;
+    const t = setInterval(() => {
+      jget<AgentLoginT>(base).then((l) => {
+        setLogin(l);
+        if (l.status === "success") succeed();
+      }).catch(() => {});
+    }, 1800);
+    return () => clearInterval(t);
+  }, [login, base, succeed, checkingAuth, existingAuth, chooseLogin]);
+
+  const submitCode = async () => {
+    if (!code.trim()) return;
+    setBusy(true);
+    try {
+      const l = await jsend<AgentLoginT>(`${base}/code`, "POST", { code: code.trim() });
+      setLogin(l);
+      if (l.status === "success") succeed();
+    } catch (e) {
+      setLogin((p) => ({ ...(p as AgentLoginT), status: "error", error: e instanceof Error ? e.message : String(e) }));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (checkingAuth) {
+    return <div className="wiz-verify"><span className="wiz-spin" /> <span>正在检查本机已有登录…</span></div>;
+  }
+
+  if (existingAuth?.authenticated && !chooseLogin) {
+    return (
+      <div className="field" style={{ maxWidth: 560 }}>
+        <div className="hlp" style={{ marginTop: 0 }}>
+          已检测到本机 {agent.label} 登录
+          {existingAuth.email ? `：${existingAuth.email}` : ""}
+          {existingAuth.plan ? `（${existingAuth.plan}）` : ""}。验证通过后即可使用。
+        </div>
+        <button className="btn btn-accent" disabled={verifying} onClick={verifyExisting} style={{ alignSelf: "flex-start" }}>
+          {Icon.bolt()} {verifying ? "正在验证已有登录…" : "验证并使用本机登录"}
+        </button>
+        {verifyErr && <div className="hlp" style={{ color: "var(--red)" }}>⚠ {verifyErr}</div>}
+        <button className="linkbtn" disabled={verifying} onClick={() => setChooseLogin(true)} style={{ alignSelf: "flex-start" }}>换账号登录</button>
+      </div>
+    );
+  }
+
+  if (login?.status === "success") {
+    return (
+      <div className="wiz-connected">
+        <span className="wiz-ok">{Icon.check()}</span>
+        <div className="wiz-ok-t">已登录{login.email ? <>，账号 <strong>{login.email}</strong></> : ""}{login.plan ? `（${login.plan}）` : ""}</div>
+      </div>
+    );
+  }
+
+  if (login?.status === "error") {
+    return (
+      <div className="field" style={{ maxWidth: 560 }}>
+        <div className="hlp" style={{ marginTop: 0, color: "var(--red)" }}>⚠ {login.error ?? "登录失败"}</div>
+        <button className="btn btn-line" onClick={start} disabled={busy} style={{ alignSelf: "flex-start" }}>{Icon.restore()} 重试</button>
+        <LogToggle log={login.log} show={showLog} setShow={setShowLog} />
+      </div>
+    );
+  }
+
+  if (login && (login.status === "awaiting" || login.status === "submitting")) {
+    return (
+      <div className="wiz-codecard">
+        <div className="hlp" style={{ marginTop: 0 }}>1. 打开此链接，登录你的 {agent.label} 账号：</div>
+        <div style={{ display: "flex", gap: 10, margin: "10px 0 16px", flexWrap: "wrap" }}>
+          <a className="btn btn-accent" href={login.url ?? undefined} target="_blank" rel="noreferrer">{Icon.bolt()} 打开登录页</a>
+          <button className="btn btn-line" onClick={() => login.url && navigator.clipboard?.writeText(login.url)}>复制链接</button>
+        </div>
+        {pasteStyle ? (
+          <>
+            <div className="hlp" style={{ marginTop: 0 }}>2. 把页面上显示的验证码粘贴到这里：</div>
+            <div style={{ display: "flex", gap: 8, marginTop: 8, maxWidth: 460 }}>
+              <input
+                type="text" className="ctx-mono" autoFocus value={code} placeholder="粘贴授权码"
+                style={{ flex: 1, minWidth: 0 }}
+                onChange={(e) => setCode(e.target.value)}
+                onKeyDown={(e) => { if (e.key === "Enter") submitCode(); }}
+              />
+              <button className="btn btn-accent" disabled={busy || !code.trim()} onClick={submitCode}>
+                {login.status === "submitting" || busy ? "验证中…" : "提交"}
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="hlp" style={{ marginTop: 0 }}>
+              2. 出现提示时，输入这个一次性验证码{login.code ? "" : "（显示在登录页上）"}：
+            </div>
+            {login.code && <div className="ctx-mono" style={{ fontSize: 20, letterSpacing: 2, margin: "8px 0 2px", fontWeight: 600 }}>{login.code}</div>}
+            <div className="wiz-verify" style={{ marginTop: 10 }}><span className="wiz-spin" /> <span>等待你在浏览器中完成授权…</span></div>
+          </>
+        )}
+        <LogToggle log={login.log} show={showLog} setShow={setShowLog} />
+      </div>
+    );
+  }
+
+  if (login?.status === "starting") {
+    return <div className="wiz-verify"><span className="wiz-spin" /> <span>正在启动登录…准备授权链接。</span></div>;
+  }
+
+  // idle — initial CTA
+  return (
+    <div className="field" style={{ maxWidth: 560 }}>
+      {!compact && (
+        <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+          {agent.capabilities.loginHint ?? "你会拿到一个登录链接，在任意浏览器中打开即可。登录状态保存在此工作区中，重启后依然有效 —— 只需操作一次。"}
+        </div>
+      )}
+      <button className="btn btn-accent" disabled={busy || verifying} onClick={start} style={{ alignSelf: "flex-start" }}>
+        {Icon.bolt()} {busy ? "启动中…" : `连接 ${agent.label} 账号`}
+      </button>
+      {verifying ? (
+        <div className="wiz-verify" style={{ marginTop: 10 }}>
+          <span className="wiz-spin" /> <span>正在检查已有登录 —— 运行一次快速测试…</span>
+        </div>
+      ) : (
+        <div className="hlp" style={{ marginTop: 10 }}>
+          本机已经登录过 {agent.label}？{" "}
+          <button className="linkbtn" onClick={verifyExisting}>验证连接</button>
+        </div>
+      )}
+      {verifyErr && !verifying && (
+        <div className="hlp" style={{ color: "var(--red)", marginTop: 6 }}>⚠ {verifyErr}</div>
+      )}
+    </div>
+  );
+}
+
+function LogToggle({ log, show, setShow }: { log: string; show: boolean; setShow: (b: boolean) => void }) {
+  if (!log) return null;
+  return (
+    <div style={{ marginTop: 14 }}>
+      <button className="linkbtn" onClick={() => setShow(!show)}>{show ? "隐藏" : "显示"}终端输出</button>
+      {show && <pre className="wiz-termlog">{log}</pre>}
+    </div>
+  );
+}
+
+// ---------- API-key path ----------
+
+function ApiKeyConnect({ agent, onConnected }: { agent: AgentInfoT; onConnected?: () => void }) {
+  const [key, setKey] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const hint = agent.capabilities.apiKeyHint ?? "sk-…";
+
+  const save = async () => {
+    setBusy(true);
+    setErr(null);
+    try {
+      await jsend(`/api/agents/${agent.id}/api-key`, "POST", { key: key.trim() });
+      setSaved(true);
+      onConnected?.();
+    } catch (e) {
+      setErr((e instanceof Error ? e.message : String(e)).replace(/^\d+\s*/, ""));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (saved && !key) {
+    return (
+      <div className="wiz-connected">
+        <span className="wiz-ok">{Icon.check()}</span>
+        <div>
+          <div className="wiz-ok-t">API 密钥已保存</div>
+          <div className="hlp" style={{ margin: "3px 0 0" }}>按 token 计费。<button className="linkbtn" onClick={() => setSaved(false)}>更换密钥</button></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="field" style={{ maxWidth: 560 }}>
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+        粘贴一个 API 密钥（<code>{hint}</code>）。仅保存在此工作区，并按 token 为 {agent.label} 的用量计费。大多数人更适合使用订阅账号登录。
+      </div>
+      <div style={{ display: "flex", gap: 8, maxWidth: 520 }}>
+        <input type="password" className="ctx-mono" value={key} placeholder={hint} style={{ flex: 1, minWidth: 0 }}
+          onChange={(e) => setKey(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && key.trim()) save(); }} />
+        <button className="btn btn-accent" disabled={busy || !key.trim()} onClick={save}>{busy ? "保存中…" : "保存密钥"}</button>
+      </div>
+      {err && <div className="hlp" style={{ color: "var(--red)", marginTop: 8 }}>⚠ {err}</div>}
+    </div>
+  );
+}