@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/operator/node/ProviderAuth.tsx

@@ -0,0 +1,561 @@
+"use client";
+
+// Per-provider auth panel for agents that front many model providers (Pi):
+// which providers can run right now, OAuth / API-key logins driven entirely in
+// the browser (auth links, device codes, pasted codes, choices), logout, and
+// user-defined endpoints. Talks to the generic /api/agents/[id]/providers/*
+// routes; rendered by AgentConnect when capabilities.supportsProviderAuth.
+
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { Icon } from "./icons";
+import { jget, jsend } from "./api";
+import type { AgentInfoT, ClaudeVerifyT } from "./types";
+import type { AgentLoginEvent, AgentLoginPrompt, AgentProviderInfo, AgentProviderLogin } from "./protocol/agents/types";
+
+// The global .field rules style text/number inputs only; selects and password
+// inputs here get the same look inline instead of widening those shared rules.
+const control: CSSProperties = {
+  border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)",
+  padding: "9px 12px", fontSize: 13, color: "var(--ink)", outline: "none", minWidth: 0,
+};
+
+// fetch() rejects with a bare TypeError ("Failed to fetch") when the server is
+// unreachable — say that in words a person can act on.
+const errText = (e: unknown) => {
+  if (e instanceof TypeError && /fetch|network|load failed/i.test(e.message)) return "连不上 Operator 服务（服务已停止或网络中断），请刷新页面后重试";
+  return (e instanceof Error ? e.message : String(e)).replace(/^\d+\s*/, "");
+};
+
+const API_TYPES: { value: string; label: string }[] = [
+  { value: "openai-completions", label: "OpenAI 兼容（Chat Completions）" },
+  { value: "openai-responses", label: "OpenAI Responses" },
+  { value: "anthropic-messages", label: "Anthropic 兼容（Messages）" },
+  { value: "google-generative-ai", label: "Google Gemini 兼容" },
+];
+
+function sourceLabel(p: AgentProviderInfo): string {
+  if (p.source === "stored credential") return p.authType === "oauth" ? (p.oauth?.subscription ? "订阅账号登录" : "OAuth 登录") : "API Key（已保存）";
+  if (p.source === "configured API key") return "配置文件中的 Key";
+  return p.source ? `本机凭据：${p.source}` : "已配置";
+}
+
+export function ProviderAuthPanel({ agent, onConnected }: { agent: AgentInfoT; onConnected?: () => void }) {
+  const base = `/api/agents/${agent.id}/providers`;
+  const [providers, setProviders] = useState<AgentProviderInfo[] | null>(null);
+  const [listError, setListError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [pick, setPick] = useState("");
+  const [login, setLogin] = useState<AgentProviderLogin | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [note, setNote] = useState<{ ok: boolean; text: string } | null>(null);
+  const [editing, setEditing] = useState<AgentProviderInfo | "new" | null>(null);
+  // Which provider's "API Key / address" form is open.
+  const [keyFor, setKeyFor] = useState<string | null>(null);
+  // Bumped by every user action, so a slow verify (Pi retries network errors)
+  // can't overwrite the note of something done after it started.
+  const opSeq = useRef(0);
+  const say = (seq: number, n: { ok: boolean; text: string } | null) => { if (seq === opSeq.current) setNote(n); };
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await jget<{ providers: AgentProviderInfo[]; error: string | null }>(base);
+      setProviders(r.providers);
+      setListError(r.error);
+    } catch (e) {
+      setListError(errText(e));
+      setProviders((p) => p ?? []);
+    } finally {
+      setLoading(false);
+    }
+  }, [base]);
+  useEffect(() => { void load(); }, [load]);
+
+  // Rejoin a login already underway (card remounted / page reloaded).
+  useEffect(() => {
+    jget<AgentProviderLogin | null>(`${base}/login`).then((l) => { if (l && l.status === "running") setLogin(l); }).catch(() => {});
+  }, [base]);
+
+  // After any change that may have made the agent usable: prove it with a real
+  // turn so it shows as connected (and tasks can pick it).
+  const afterChange = useCallback(async () => {
+    const seq = opSeq.current;
+    await load();
+    if (agent.connected) return;
+    try {
+      const r = await jsend<ClaudeVerifyT>(`/api/agents/${agent.id}/verify`, "POST");
+      if (r.connected) { say(seq, { ok: true, text: `${agent.label} 已验证可用。` }); onConnected?.(); }
+      else say(seq, { ok: false, text: `授权已保存，但验证没通过：${r.error ?? "未知原因"}` });
+    } catch (e) {
+      say(seq, { ok: false, text: `授权已保存，但验证没通过：${errText(e)}` });
+    }
+  }, [agent.connected, agent.id, agent.label, load, onConnected]);
+
+  // Poll while the flow runs; finish once it settles.
+  useEffect(() => {
+    if (login?.status !== "running") return;
+    const t = setInterval(() => {
+      jget<AgentProviderLogin | null>(`${base}/login`).then((l) => {
+        if (!l) { setLogin(null); return; }
+        setLogin(l);
+      }).catch(() => {});
+    }, 1500);
+    return () => clearInterval(t);
+  }, [login?.status, base]);
+
+  useEffect(() => {
+    if (login?.status === "success") { setNote({ ok: true, text: `已登录 ${nameOf(login.provider)}。` }); void afterChange(); }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [login?.status]);
+
+  const nameOf = (id: string) => providers?.find((p) => p.id === id)?.name ?? id;
+  const configured = useMemo(() => (providers ?? []).filter((p) => p.configured || p.credential || p.endpoint), [providers]);
+  const picked = providers?.find((p) => p.id === pick) ?? null;
+  const groups = useMemo(() => {
+    const all = (providers ?? []).filter((p) => (p.oauth || p.apiKey?.canLogin) && !p.endpoint);
+    return {
+      oauth: all.filter((p) => p.oauth).sort((a, b) => a.name.localeCompare(b.name)),
+      keyOnly: all.filter((p) => !p.oauth).sort((a, b) => a.name.localeCompare(b.name)),
+    };
+  }, [providers]);
+
+  const start = async (type: "oauth" | "api_key") => {
+    if (!pick) return;
+    opSeq.current++;
+    setNote(null);
+    setBusy("login");
+    try {
+      setLogin(await jsend<AgentProviderLogin>(`${base}/login`, "POST", { provider: pick, type }));
+    } catch (e) {
+      setLogin({ provider: pick, type, status: "error", events: [], prompt: null, error: errText(e) });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const answer = async (prompt: AgentLoginPrompt, value: string) => {
+    setBusy("answer");
+    try {
+      const l = await jsend<AgentProviderLogin | null>(`${base}/login`, "PUT", { promptId: prompt.id, value });
+      setLogin(l);
+    } catch (e) {
+      setLogin((l) => (l ? { ...l, status: "error", prompt: null, error: errText(e) } : l));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  // The API-key form: key (optional when one is stored) + optional address.
+  // A provider that asks follow-ups (e.g. an account id) continues in the flow card.
+  const saveKey = async (p: AgentProviderInfo, input: { key: string; baseUrl: string; models: string[] }) => {
+    opSeq.current++;
+    setNote(null);
+    const l = await jsend<AgentProviderLogin | null>(`${base}/key`, "POST", { provider: p.id, ...input });
+    setKeyFor(null);
+    if (l) setLogin(l);
+    else { setNote({ ok: true, text: `已更新 ${p.name} 的地址设置。` }); await afterChange(); }
+  };
+
+  const cancel = async () => {
+    await jsend(`${base}/login`, "DELETE").catch(() => {});
+    setLogin(null);
+  };
+
+  const logout = async (p: AgentProviderInfo) => {
+    if (!window.confirm(`移除 ${p.name} 在 Pi 中保存的${p.credential === "oauth" ? "登录" : " API Key"}？终端里的 pi 也会一并失去这个授权。`)) return;
+    setBusy(`logout:${p.id}`);
+    opSeq.current++;
+    setNote(null);
+    try {
+      await jsend(`${base}?provider=${encodeURIComponent(p.id)}`, "DELETE");
+      setNote({ ok: true, text: `已移除 ${p.name} 的授权。` });
+      setLogin((l) => (l?.provider === p.id ? null : l));
+      await load();
+      onConnected?.();
+    } catch (e) {
+      setNote({ ok: false, text: errText(e) });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const removeEndpoint = async (p: AgentProviderInfo) => {
+    if (!window.confirm(`删除自建端点 ${p.name}（${p.id}）及其保存的 Key？`)) return;
+    setBusy(`endpoint:${p.id}`);
+    opSeq.current++;
+    setNote(null);
+    try {
+      const r = await jsend<{ backup: string | null }>(`${base}/endpoint?id=${encodeURIComponent(p.id)}`, "DELETE");
+      setNote({ ok: true, text: `已删除端点 ${p.id}。${r.backup ? `原 models.json 已备份到 ${r.backup}` : ""}` });
+      await load();
+      onConnected?.();
+    } catch (e) {
+      setNote({ ok: false, text: errText(e) });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <div className="field" style={{ maxWidth: 640, marginTop: 18, marginBottom: 0 }}>
+      <div className="lab" style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        {Icon.lock()} 模型提供商授权
+        <button className="linkbtn" style={{ marginLeft: "auto", textTransform: "none", letterSpacing: 0 }} disabled={loading} onClick={() => void load()}>
+          {loading ? "刷新中…" : "刷新"}
+        </button>
+      </div>
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 10 }}>
+        授权保存在 {agent.label} 自己的配置里（<code>~/.pi/agent</code>），终端里的 <code>pi</code> 与 Operator 共用。Operator 不保存任何密钥。
+      </div>
+
+      {listError && <div className="hlp" style={{ color: "var(--red)", marginTop: 0, overflowWrap: "anywhere" }}>⚠ {listError}</div>}
+      {providers === null ? (
+        <div className="wiz-verify"><span className="wiz-spin" /> <span>正在读取 {agent.label} 的授权…</span></div>
+      ) : configured.length === 0 ? (
+        <div className="hlp" style={{ marginTop: 0 }}>还没有可用的模型提供商。在下面登录一个，或添加自建端点。</div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", border: "1px solid var(--line-strong)", borderRadius: "var(--r)", overflow: "hidden" }}>
+          {configured.map((p, i) => (
+            <div key={p.id} style={{ borderTop: i ? "1px solid var(--line)" : undefined, background: "var(--raise)" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", padding: "10px 12px" }}>
+              <span className={p.configured ? "wiz-ok" : "wiz-warn"} style={{ flex: "0 0 22px", height: 22 }} title={p.configured ? "可用" : "缺少可用凭据"}>
+                {p.configured ? Icon.check() : Icon.bolt()}
+              </span>
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div style={{ fontWeight: 600, fontSize: 13.5 }}>
+                  {p.name} <span className="ctx-mono" style={{ color: "var(--ink-4)", fontSize: 11.5 }}>{p.id}</span>
+                </div>
+                <div className="hlp" style={{ marginTop: 2 }}>
+                  {p.endpoint ? `自建端点 · ${p.endpoint.baseUrl} · ` : ""}
+                  {p.override?.baseUrl ? `地址 ${p.override.baseUrl} · ` : ""}
+                  {p.configured ? `${sourceLabel(p)} · ${p.models} 个可用模型` : "缺少 Key，暂不可用"}
+                </div>
+              </div>
+              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+                {!p.endpoint && p.apiKey?.canLogin && (
+                  <button className="btn btn-line btn-sm" disabled={!!busy || login?.status === "running"} onClick={() => setKeyFor(keyFor === p.id ? null : p.id)}>
+                    {Icon.edit()} Key / 地址
+                  </button>
+                )}
+                {p.endpoint && (
+                  <button className="btn btn-line btn-sm" disabled={!!busy} onClick={() => setEditing(p)}>{Icon.edit()} 编辑</button>
+                )}
+                {p.credential && !p.endpoint && (
+                  <button className="btn-danger" disabled={!!busy} onClick={() => void logout(p)}>{busy === `logout:${p.id}` ? "移除中…" : "退出登录"}</button>
+                )}
+                {p.endpoint && (
+                  <button className="btn-danger" disabled={!!busy} onClick={() => void removeEndpoint(p)}>{busy === `endpoint:${p.id}` ? "删除中…" : "删除端点"}</button>
+                )}
+              </div>
+            </div>
+            {keyFor === p.id && (
+              <div style={{ padding: "0 12px 12px" }}>
+                <KeyForm provider={p} onSave={(input) => saveKey(p, input)} onCancel={() => setKeyFor(null)} />
+              </div>
+            )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {note && <div className="hlp" style={{ color: note.ok ? "var(--green, #5C8C5A)" : "var(--red)", overflowWrap: "anywhere" }}>{note.ok ? "✓" : "⚠"} {note.text}</div>}
+
+      {/* ---- add a provider login ---- */}
+      <div style={{ marginTop: 16 }}>
+        <div className="hlp" style={{ marginTop: 0, marginBottom: 6, fontWeight: 600, color: "var(--ink-2)" }}>登录模型提供商</div>
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+          <select className="ctx-mono" style={{ ...control, minWidth: 240, maxWidth: "100%" }} value={pick} aria-label="模型提供商"
+            onChange={(e) => { setPick(e.target.value); setKeyFor(null); }} disabled={login?.status === "running"}>
+            <option value="">选择提供商…</option>
+            <optgroup label="支持订阅账号登录">
+              {groups.oauth.map((p) => <option key={p.id} value={p.id}>{p.name}{p.configured ? "（已授权）" : ""}</option>)}
+            </optgroup>
+            <optgroup label="API Key">
+              {groups.keyOnly.map((p) => <option key={p.id} value={p.id}>{p.name}{p.configured ? "（已授权）" : ""}</option>)}
+            </optgroup>
+          </select>
+          {picked?.oauth && (
+            <button className="btn btn-accent btn-sm" disabled={!!busy || login?.status === "running"} onClick={() => void start("oauth")}>
+              {Icon.bolt()} {picked.oauth.label || (picked.oauth.subscription ? "订阅账号登录" : "OAuth 登录")}
+            </button>
+          )}
+          {picked?.apiKey?.canLogin && (
+            <button className={`btn btn-sm ${keyFor === picked.id ? "btn-accent" : "btn-line"}`} disabled={!!busy || login?.status === "running"}
+              onClick={() => setKeyFor(keyFor === picked.id ? null : picked.id)}>
+              {Icon.lock()} 填写 API Key
+            </button>
+          )}
+        </div>
+        {picked?.oauth && keyFor !== picked.id && <div className="hlp">{picked.oauth.name}</div>}
+        {picked && keyFor === picked.id && !configured.some((c) => c.id === picked.id) && (
+          <div style={{ marginTop: 10 }}>
+            <KeyForm provider={picked} onSave={(input) => saveKey(picked, input)} onCancel={() => setKeyFor(null)} />
+          </div>
+        )}
+        {login && <LoginFlow login={login} name={nameOf(login.provider)} busy={busy === "answer"} onAnswer={answer} onCancel={cancel} onDismiss={() => setLogin(null)} />}
+      </div>
+
+      {/* ---- user-defined endpoints ---- */}
+      <div style={{ marginTop: 16 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <div className="hlp" style={{ margin: 0, fontWeight: 600, color: "var(--ink-2)" }}>自建端点</div>
+          {editing === null && (
+            <button className="linkbtn" style={{ fontSize: 12 }} onClick={() => setEditing("new")}>+ 添加端点</button>
+          )}
+        </div>
+        <div className="hlp" style={{ marginTop: 2 }}>公司网关、vLLM、Ollama 等兼容 OpenAI / Anthropic / Gemini 接口的服务。写入 <code>~/.pi/agent/models.json</code>，Key 单独存进 Pi 的凭据文件。</div>
+        {editing !== null && (
+          <EndpointForm
+            base={base}
+            existing={editing === "new" ? null : editing}
+            onCancel={() => setEditing(null)}
+            onSaved={async (text) => { opSeq.current++; setEditing(null); setNote({ ok: true, text }); await afterChange(); }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------- one login flow: what the provider shows + what it asks ----------
+
+// Links come from the provider's login code; only ever make http(s) clickable.
+const webUrl = (u: unknown): string | undefined => (typeof u === "string" && /^https?:\/\//i.test(u) ? u : undefined);
+
+function EventLine({ event }: { event: AgentLoginEvent }) {
+  if (event.type === "auth_url") {
+    const url = webUrl(event.url);
+    if (!url) return <div className="hlp" style={{ marginTop: 0, overflowWrap: "anywhere" }}>{event.instructions} {String(event.url)}</div>;
+    return (
+      <div style={{ marginBottom: 10 }}>
+        <div className="hlp" style={{ marginTop: 0 }}>{event.instructions || "在浏览器中打开授权页面并完成登录："}</div>
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 6 }}>
+          <a className="btn btn-accent btn-sm" href={url} target="_blank" rel="noreferrer">{Icon.external()} 打开授权页面</a>
+          <button className="btn btn-line btn-sm" onClick={() => navigator.clipboard?.writeText(url)}>{Icon.copy()} 复制链接</button>
+        </div>
+      </div>
+    );
+  }
+  if (event.type === "device_code") {
+    return (
+      <div style={{ marginBottom: 10 }}>
+        <div className="hlp" style={{ marginTop: 0 }}>打开下面的页面，输入这个一次性验证码：</div>
+        <div className="ctx-mono" style={{ fontSize: 20, letterSpacing: 2, margin: "6px 0", fontWeight: 600 }}>{event.userCode}</div>
+        {webUrl(event.verificationUri)
+          ? <a className="btn btn-accent btn-sm" href={webUrl(event.verificationUri)} target="_blank" rel="noreferrer">{Icon.external()} {event.verificationUri}</a>
+          : <span className="ctx-mono">{String(event.verificationUri)}</span>}
+      </div>
+    );
+  }
+  if (event.type === "info") {
+    return (
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 6 }}>
+        {event.message}
+        {event.links?.map((l) => webUrl(l.url) && <span key={l.url}> <a className="linkbtn" href={webUrl(l.url)} target="_blank" rel="noreferrer">{l.label || l.url}</a></span>)}
+      </div>
+    );
+  }
+  return <div className="hlp" style={{ marginTop: 0, marginBottom: 6 }}>{event.message}</div>;
+}
+
+function PromptInput({ prompt, busy, onAnswer }: { prompt: AgentLoginPrompt; busy: boolean; onAnswer: (p: AgentLoginPrompt, v: string) => void }) {
+  const [value, setValue] = useState("");
+  useEffect(() => { setValue(""); }, [prompt.id]);
+  if (prompt.type === "select") {
+    return (
+      <div style={{ marginTop: 8 }}>
+        <div className="hlp" style={{ marginTop: 0, marginBottom: 6 }}>{prompt.message}</div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {prompt.options.map((o) => (
+            <button key={o.id} className="btn btn-line btn-sm" style={{ justifyContent: "flex-start", height: "auto", padding: "8px 12px", textAlign: "left" }}
+              disabled={busy} onClick={() => onAnswer(prompt, o.id)}>
+              <span><strong>{o.label}</strong>{o.description ? <span style={{ color: "var(--ink-3)" }}> — {o.description}</span> : null}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  const submit = () => onAnswer(prompt, value);
+  return (
+    <div style={{ marginTop: 8 }}>
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 6 }}>{prompt.message}</div>
+      <div style={{ display: "flex", gap: 8 }}>
+        <input
+          type={prompt.type === "secret" ? "password" : "text"} className="ctx-mono" autoFocus autoComplete="off"
+          value={value} placeholder={prompt.placeholder ?? ""} style={{ ...control, flex: 1 }}
+          onChange={(e) => setValue(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
+        />
+        <button className="btn btn-accent" disabled={busy} onClick={submit}>{busy ? "提交中…" : "提交"}</button>
+      </div>
+      {prompt.type === "manual_code" && <div className="hlp">浏览器和 Operator 不在同一台机器时，把授权后显示的代码或跳转后的完整地址粘贴到这里。</div>}
+    </div>
+  );
+}
+
+function LoginFlow({ login, name, busy, onAnswer, onCancel, onDismiss }: {
+  login: AgentProviderLogin; name: string; busy: boolean;
+  onAnswer: (p: AgentLoginPrompt, v: string) => void; onCancel: () => void; onDismiss: () => void;
+}) {
+  if (login.status === "success") {
+    return <div className="wiz-connected" style={{ marginTop: 10 }}><span className="wiz-ok">{Icon.check()}</span><div className="wiz-ok-t">已登录 {name}</div></div>;
+  }
+  if (login.status === "error" || login.status === "cancelled") {
+    return (
+      <div className="hlp" style={{ color: "var(--red)", overflowWrap: "anywhere" }}>
+        ⚠ {login.status === "cancelled" ? "已取消登录" : `登录 ${name} 失败：${login.error ?? "未知原因"}`}{" "}
+        <button className="linkbtn" onClick={onDismiss}>关闭</button>
+      </div>
+    );
+  }
+  const events = login.events.filter((e, i, all) => e.type !== "progress" || i === all.length - 1);
+  return (
+    <div className="wiz-codecard" style={{ marginTop: 10 }}>
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 8, fontWeight: 600, color: "var(--ink-2)" }}>
+        正在登录 {name}（{login.type === "oauth" ? "账号授权" : "API Key"}）
+      </div>
+      {events.map((e, i) => <EventLine key={i} event={e} />)}
+      {login.prompt ? (
+        <PromptInput prompt={login.prompt} busy={busy} onAnswer={onAnswer} />
+      ) : (
+        <div className="wiz-verify" style={{ marginTop: 6 }}><span className="wiz-spin" /> <span>等待授权完成…</span></div>
+      )}
+      <button className="linkbtn" style={{ marginTop: 10 }} onClick={onCancel}>取消</button>
+    </div>
+  );
+}
+
+// ---------- API key (+ optional address) for one provider ----------
+
+function KeyForm({ provider, onSave, onCancel }: {
+  provider: AgentProviderInfo;
+  onSave: (input: { key: string; baseUrl: string; models: string[] }) => Promise<void>;
+  onCancel: () => void;
+}) {
+  const hasKey = provider.credential === "api_key";
+  const [key, setKey] = useState("");
+  const [baseUrl, setBaseUrl] = useState(provider.override?.baseUrl ?? "");
+  const [models, setModels] = useState((provider.override?.models ?? []).join(", "));
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const needKey = !hasKey && !provider.credential;
+
+  const save = async () => {
+    const url = baseUrl.trim();
+    if (needKey && !key.trim()) { setErr("请填写 API Key"); return; }
+    if (url && !/^https?:\/\/\S+$/i.test(url)) { setErr("Base URL 必须以 http:// 或 https:// 开头"); return; }
+    setBusy(true);
+    setErr(null);
+    try {
+      await onSave({ key: key.trim(), baseUrl: url, models: models.split(/[\s,，]+/).map((m) => m.trim()).filter(Boolean) });
+    } catch (e) {
+      setErr(errText(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const label = (text: string) => <div className="hlp" style={{ margin: "0 0 4px" }}>{text}</div>;
+  return (
+    <div className="wiz-codecard">
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 8, fontWeight: 600, color: "var(--ink-2)" }}>
+        {provider.name} · {provider.apiKey?.name ?? "API Key"}
+      </div>
+      <label style={{ display: "block" }}>
+        {label(hasKey ? "API Key（已保存，留空则不修改）" : "API Key")}
+        <input type="password" className="ctx-mono" autoComplete="off" autoFocus value={key} placeholder={hasKey ? "••••••••" : "粘贴 API Key"}
+          style={{ ...control, width: "100%" }} onChange={(e) => setKey(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") void save(); }} />
+      </label>
+      <label style={{ display: "block", marginTop: 10 }}>
+        {label("Base URL（可选）")}
+        <input type="text" className="ctx-mono" value={baseUrl} placeholder="留空使用官方地址；走公司网关或代理时填写，如 https://gateway.example.com"
+          onChange={(e) => setBaseUrl(e.target.value)} />
+      </label>
+      <label style={{ display: "block", marginTop: 10 }}>
+        {label("额外的模型 ID（可选，多个用逗号分隔）")}
+        <input type="text" className="ctx-mono" value={models} placeholder="网关使用自定义模型名时填写，如 book-model"
+          onChange={(e) => setModels(e.target.value)} />
+      </label>
+      <div className="hlp">Key 存进 Pi 的凭据文件；地址和额外模型写入 <code>~/.pi/agent/models.json</code>（{provider.name} 自带的模型保留）。有的提供商还会追问 account ID 等信息，保存后在这里接着填。</div>
+      {err && <div className="hlp" style={{ color: "var(--red)", overflowWrap: "anywhere" }}>⚠ {err}</div>}
+      <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+        <button className="btn btn-accent" disabled={busy} onClick={() => void save()}>{busy ? "保存中…" : "保存"}</button>
+        <button className="btn btn-line" disabled={busy} onClick={onCancel}>取消</button>
+      </div>
+    </div>
+  );
+}
+
+// ---------- add / edit a user-defined endpoint ----------
+
+function EndpointForm({ base, existing, onCancel, onSaved }: {
+  base: string; existing: AgentProviderInfo | null; onCancel: () => void; onSaved: (text: string) => void;
+}) {
+  const ep = existing?.endpoint;
+  const [id, setId] = useState(existing?.id ?? "");
+  const [name, setName] = useState(existing && existing.name !== existing.id ? existing.name : "");
+  const [baseUrl, setBaseUrl] = useState(ep?.baseUrl ?? "");
+  const [api, setApi] = useState(ep?.api ?? "openai-completions");
+  const [models, setModels] = useState((ep?.models ?? []).join(", "));
+  const [ctx, setCtx] = useState(String(ep?.contextWindow ?? 200000));
+  const [reasoning, setReasoning] = useState(ep?.reasoning ?? false);
+  const [key, setKey] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  const save = async () => {
+    setBusy(true);
+    setErr(null);
+    try {
+      const r = await jsend<{ backup: string | null }>(`${base}/endpoint`, "POST", {
+        id: id.trim(), name: name.trim(), baseUrl: baseUrl.trim(), api,
+        models: models.split(/[\s,，]+/).map((m) => m.trim()).filter(Boolean),
+        contextWindow: Number(ctx) || undefined, reasoning, apiKey: key.trim() || undefined,
+      });
+      onSaved(`端点 ${id.trim()} 已保存${key.trim() ? "，Key 已存入 Pi 的凭据文件" : ""}。${r.backup ? `原 models.json 已备份到 ${r.backup}` : ""}`);
+    } catch (e) {
+      setErr(errText(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const row = { display: "flex", gap: 8, flexWrap: "wrap" as const, marginTop: 8 };
+  const cell = { flex: "1 1 200px", minWidth: 0 };
+  return (
+    <div className="wiz-codecard" style={{ marginTop: 10 }}>
+      <div style={row}>
+        <label style={cell}><div className="hlp" style={{ margin: "0 0 4px" }}>端点 ID（模型名的前缀，如 gw/xxx）</div>
+          <input type="text" className="ctx-mono" value={id} disabled={!!existing} placeholder="gw" onChange={(e) => setId(e.target.value)} /></label>
+        <label style={cell}><div className="hlp" style={{ margin: "0 0 4px" }}>显示名称（可选）</div>
+          <input type="text" value={name} placeholder="公司网关" onChange={(e) => setName(e.target.value)} /></label>
+      </div>
+      <div style={row}>
+        <label style={{ flex: "2 1 300px", minWidth: 0 }}><div className="hlp" style={{ margin: "0 0 4px" }}>Base URL</div>
+          <input type="text" className="ctx-mono" value={baseUrl} placeholder="https://gateway.example.com/v1" onChange={(e) => setBaseUrl(e.target.value)} /></label>
+        <label style={cell}><div className="hlp" style={{ margin: "0 0 4px" }}>接口类型</div>
+          <select className="ctx-mono" value={api} style={{ ...control, width: "100%" }} onChange={(e) => setApi(e.target.value)}>
+            {API_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
+          </select></label>
+      </div>
+      <div style={row}>
+        <label style={{ flex: "2 1 300px", minWidth: 0 }}><div className="hlp" style={{ margin: "0 0 4px" }}>模型 ID（多个用逗号分隔）</div>
+          <input type="text" className="ctx-mono" value={models} placeholder="glm-5.3, deepseek-v4" onChange={(e) => setModels(e.target.value)} /></label>
+        <label style={cell}><div className="hlp" style={{ margin: "0 0 4px" }}>上下文窗口（tokens）</div>
+          <input type="number" className="ctx-mono" value={ctx} onChange={(e) => setCtx(e.target.value)} /></label>
+      </div>
+      <label className="hlp" style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 8 }}>
+        <input type="checkbox" checked={reasoning} onChange={(e) => setReasoning(e.target.checked)} /> 推理模型（支持思考强度）
+      </label>
+      <div style={{ marginTop: 8 }}>
+        <div className="hlp" style={{ margin: "0 0 4px" }}>API Key{existing ? "（留空则保持现有 Key）" : "（本地无鉴权的服务可填任意值）"}</div>
+        <input type="password" className="ctx-mono" autoComplete="off" value={key} placeholder="sk-…" style={{ ...control, width: "100%" }} onChange={(e) => setKey(e.target.value)} />
+      </div>
+      {err && <div className="hlp" style={{ color: "var(--red)", overflowWrap: "anywhere" }}>⚠ {err}</div>}
+      <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+        <button className="btn btn-accent" disabled={busy || !id.trim() || !baseUrl.trim() || !models.trim()} onClick={() => void save()}>{busy ? "保存中…" : "保存端点"}</button>
+        <button className="btn btn-line" disabled={busy} onClick={onCancel}>取消</button>
+      </div>
+    </div>
+  );
+}

package/src/operator/node/RunControls.tsx

@@ -0,0 +1,2 @@
+export { RunControls } from "../../chat/RunControls";
+export type { RunControlProps } from "../../chat/RunControls";