@xgspz/cli-ui 0.0.0-stage → 0.6.15

package/src/operator/node/github.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { jget, jsend } from "./api";
+import { LoadNote, Skel, ErrNote } from "./shared";
+import type { GhStatusT, GhLoginT, GhRepoT } from "./types";
+import { useBoundedPoll } from "./boundedPoll";
+
+// The "Clone from GitHub" pane of the new-project modal: shows the guided
+// connect step when the workspace isn't logged in, the user's repo list when
+// it is, and always accepts a pasted URL as the escape hatch.
+export function GitHubClonePicker({ value, onChange }: { value: string; onChange: (spec: string, shortName?: string) => void }) {
+  const [status, setStatus] = useState<GhStatusT | null>(null);
+  const refresh = useCallback(() => {
+    jget<GhStatusT>("/api/github/status")
+      .then(setStatus)
+      .catch(() => setStatus({ installed: false, authenticated: false, login: null }));
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+
+  if (!status) return <LoadNote style={{ padding: 0, marginBottom: 14 }}>正在检查 GitHub 连接…</LoadNote>;
+  return (
+    <>
+      {status.authenticated ? (
+        <GhRepoList selected={value} onPick={(r) => onChange(r, r.split("/").pop())} />
+      ) : status.installed ? (
+        <GitHubConnect onConnected={refresh} />
+      ) : (
+        <div className="hlp" style={{ marginBottom: 14 }}>
+          此工作区没有可用的 GitHub CLI（<code>gh</code>），因此只能克隆公开仓库 —— 请在下方粘贴地址。
+        </div>
+      )}
+      <div className="field">
+        <div className="lab">仓库 {status.authenticated && <span className="opt">— 也可直接粘贴地址</span>}</div>
+        <input type="text" className="ctx-mono" value={value} placeholder="owner/repo 或 https://github.com/owner/repo"
+          onChange={(e) => onChange(e.target.value)} />
+      </div>
+    </>
+  );
+}
+
+// Guided `gh auth login` device flow: one click starts it, the one-time code +
+// verification URL appear right here (no terminal scrollback), and we poll
+// until GitHub confirms. The session lives server-side, so closing the modal
+// mid-login and reopening resumes the same code.
+export function GitHubConnect({ onConnected }: { onConnected: () => void }) {
+  const [login, setLogin] = useState<GhLoginT | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const done = useRef(false);
+
+  // Rejoin a login that's already underway (e.g. the modal was closed mid-flow).
+  useEffect(() => {
+    jget<GhLoginT>("/api/github/login").then((l) => { if (l.status !== "idle") setLogin(l); }).catch(() => {});
+  }, []);
+
+  const start = async () => {
+    setBusy(true);
+    try {
+      setLogin(await jsend<GhLoginT>("/api/github/login", "POST"));
+    } catch (e) {
+      setLogin({ status: "error", code: null, url: null, user: null, error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(false);
+    }
+  };
+  const cancel = async () => {
+    await jsend("/api/github/login", "DELETE").catch(() => {});
+    setLogin(null);
+  };
+
+  // Re-check while gh waits for the user to authorize on github.com — for a
+  // bounded window, and again when the user comes back from github.com (useBoundedPoll).
+  useBoundedPoll(!!login && (login.status === "starting" || login.status === "awaiting"), () => {
+    jget<GhLoginT>("/api/github/login").then((l) => {
+      setLogin(l);
+      if (l.status === "success" && !done.current) { done.current = true; onConnected(); }
+    }).catch(() => {});
+  }, 2000, 10 * 60_000);
+
+  const copyCode = () => {
+    if (!login?.code) return;
+    navigator.clipboard?.writeText(login.code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }).catch(() => {});
+  };
+
+  if (!login || login.status === "idle") {
+    return (
+      <div className="field">
+        <div className="hlp" style={{ marginTop: 0, marginBottom: 8 }}>
+          连接一次 GitHub，就能从你的仓库列表中挑选 —— 包括私有仓库。登录状态保存在此工作区中，重启后依然有效。
+        </div>
+        <button className="btn btn-line" disabled={busy} onClick={start} style={{ alignSelf: "flex-start" }}>
+          {Icon.github()} {busy ? "启动中…" : "连接 GitHub"}
+        </button>
+      </div>
+    );
+  }
+  if (login.status === "starting") return <LoadNote style={{ padding: 0, marginBottom: 14 }}>正在启动 GitHub 登录…</LoadNote>;
+  if (login.status === "awaiting") {
+    return (
+      <div className="field" style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)", padding: "14px 16px" }}>
+        <div className="hlp" style={{ marginTop: 0 }}>在 GitHub 上输入这个一次性验证码以完成连接：</div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "10px 0" }}>
+          <button onClick={copyCode} title="点击复制"
+            style={{ fontFamily: "var(--mono)", fontSize: 24, fontWeight: 700, letterSpacing: ".12em", color: "var(--ink)", background: "none", border: "1px dashed var(--line-strong)", borderRadius: 8, padding: "6px 14px", cursor: "pointer" }}>
+            {login.code}
+          </button>
+          <span className="hlp" style={{ margin: 0 }}>{copied ? "已复制！" : "点击复制"}</span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <a className="btn btn-accent" href={login.url ?? "https://github.com/login/device"} target="_blank" rel="noreferrer">
+            {Icon.github()} 打开 github.com/login/device
+          </a>
+          <button className="btn btn-ghost" onClick={cancel}>取消</button>
+        </div>
+        <div className="hlp" style={{ marginBottom: 0 }}>等待你在 github.com 上完成授权…</div>
+      </div>
+    );
+  }
+  if (login.status === "error") {
+    return (
+      <div className="field">
+        <div className="hlp" style={{ marginTop: 0, color: "var(--red)" }}>⚠ GitHub 登录失败：{login.error ?? "未知错误"}</div>
+        <button className="btn btn-line" onClick={start} style={{ alignSelf: "flex-start" }}>{Icon.restore()} 重试</button>
+      </div>
+    );
+  }
+  // success
+  return <div className="hlp" style={{ marginBottom: 14 }}>{Icon.check()} 已连接，账号 <strong>{login.user}</strong> —— 正在加载你的仓库…</div>;
+}
+
+// Searchable list of the user's repos (most recently pushed first).
+export function GhRepoList({ selected, onPick }: { selected: string; onPick: (nameWithOwner: string) => void }) {
+  const [repos, setRepos] = useState<GhRepoT[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [q, setQ] = useState("");
+  const load = useCallback(() => {
+    setError(null);
+    setRepos(null);
+    jget<GhRepoT[]>("/api/github/repos").then(setRepos).catch((e) => setError(e instanceof Error ? e.message : String(e)));
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  if (error) return <ErrNote style={{ marginBottom: 14 }} onRetry={load}>无法加载你的仓库：{error}</ErrNote>;
+  if (!repos) {
+    return (
+      <div className="field">
+        <div className="lab">{Icon.github()} 你的仓库</div>
+        <div style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)" }} aria-hidden>
+          {[46, 60, 38, 52].map((w, i) => (
+            <div key={i} className="skel-lrow">
+              <Skel w={14} h={14} r={4} />
+              <Skel w={`${w}%`} h={11} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  const filtered = repos.filter((r) => r.nameWithOwner.toLowerCase().includes(q.trim().toLowerCase()));
+  return (
+    <div className="field">
+      <div className="lab">{Icon.github()} 你的仓库</div>
+      <input type="text" value={q} placeholder="搜索仓库…" onChange={(e) => setQ(e.target.value)} style={{ marginBottom: 8 }} />
+      <div style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)", maxHeight: 220, overflowY: "auto" }}>
+        {filtered.length === 0 && <div className="hlp" style={{ padding: "12px 14px", margin: 0 }}>没有匹配的仓库。</div>}
+        {filtered.map((r) => (
+          <button key={r.nameWithOwner} onClick={() => onPick(r.nameWithOwner)} title={r.nameWithOwner}
+            style={{ display: "flex", alignItems: "center", gap: 9, width: "100%", textAlign: "left", padding: "8px 13px", borderBottom: "1px solid var(--line)", color: "var(--ink)", fontSize: 13, background: selected === r.nameWithOwner ? "var(--accent-soft, rgba(194,96,60,.12))" : "none" }}>
+            <span style={{ color: selected === r.nameWithOwner ? "var(--accent)" : "var(--ink-4)", display: "inline-flex" }}>
+              {selected === r.nameWithOwner ? Icon.check() : Icon.git()}
+            </span>
+            <span style={{ fontFamily: "var(--mono)", fontSize: 12.5, whiteSpace: "nowrap" }}>{r.nameWithOwner}</span>
+            {r.isPrivate && <span style={{ color: "var(--ink-4)", display: "inline-flex" }} title="私有">{Icon.lock()}</span>}
+            <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--ink-3)", fontSize: 12 }}>{r.description}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Settings → GitHub: connection status, the same guided connect flow, and
+// disconnect. Useful for checking the login survived a workspace restart.
+export function GitHubSettings() {
+  const [status, setStatus] = useState<GhStatusT | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const refresh = useCallback(() => {
+    jget<GhStatusT>("/api/github/status")
+      .then(setStatus)
+      .catch(() => setStatus({ installed: false, authenticated: false, login: null }));
+  }, []);
+  useEffect(() => { refresh(); }, [refresh]);
+
+  const disconnect = async () => {
+    setErr(null);
+    try {
+      await jsend("/api/github/logout", "POST");
+      refresh();
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  if (!status) return <LoadNote style={{ padding: 0 }}>正在检查 GitHub 连接…</LoadNote>;
+  if (!status.installed) {
+    return <div className="hlp">此工作区没有可用的 GitHub CLI（<code>gh</code>），因此这里无需连接。创建项目时仍可通过地址克隆公开仓库。</div>;
+  }
+  return (
+    <div className="field">
+      <div className="lab">{Icon.github()} GitHub 账号</div>
+      <div className="hlp" style={{ marginTop: 0, marginBottom: 12 }}>
+        用于在创建项目时列出并克隆你的仓库（包括私有仓库），以及在任务和终端中执行 <code>git push/pull</code>。登录状态保存在此工作区中，重启后依然有效。
+      </div>
+      {status.authenticated ? (
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--ink)" }}>
+            {Icon.check()} 已连接，账号 <strong>{status.login ?? "未知"}</strong>
+          </span>
+          <button className="btn btn-line btn-sm" onClick={disconnect}>{Icon.x()} 断开连接</button>
+        </div>
+      ) : (
+        <GitHubConnect onConnected={refresh} />
+      )}
+      {err && <ErrNote style={{ marginTop: 10 }}>{err}</ErrNote>}
+    </div>
+  );
+}

package/src/operator/node/icons.tsx

@@ -0,0 +1,88 @@
+/* Orchestrator — icon set (ported from the design's icons.js) */
+import type { SVGProps } from "react";
+
+type P = SVGProps<SVGSVGElement>;
+
+function S(children: React.ReactNode, props?: P) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width="1em"
+      height="1em"
+      style={{ flex: "none" }}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const Icon = {
+  plus: (p?: P) => S(<><line x1={12} y1={5} x2={12} y2={19} /><line x1={5} y1={12} x2={19} y2={12} /></>, p),
+  list: (p?: P) => S(<><line x1={9} y1={6} x2={20} y2={6} /><line x1={9} y1={12} x2={20} y2={12} /><line x1={9} y1={18} x2={20} y2={18} /><circle cx={5} cy={6} r={0.5} /><circle cx={5} cy={12} r={0.5} /><circle cx={5} cy={18} r={0.5} /></>, p),
+  board: (p?: P) => S(<><rect x={3} y={4} width={5} height={16} rx={1.5} /><rect x={10} y={4} width={5} height={11} rx={1.5} /><rect x={17} y={4} width={4} height={8} rx={1.5} /></>, p),
+  chart: (p?: P) => S(<><line x1={5} y1={20} x2={5} y2={13} /><line x1={12} y1={20} x2={12} y2={5} /><line x1={19} y1={20} x2={19} y2={9} /></>, p),
+  folder: (p?: P) => S(<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />, p),
+  gear: (p?: P) => S(<><circle cx={12} cy={12} r={3} /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></>, p),
+  send: (p?: P) => S(<><path d="M7 11l5-5 5 5" /><line x1={12} y1={6} x2={12} y2={18} /></>, p),
+  spark: (p?: P) => S(<path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6z" />, p),
+  clock: (p?: P) => S(<><circle cx={12} cy={12} r={9} /><path d="M12 7v5l3 2" /></>, p),
+  clear: (p?: P) => S(<><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v4h4" /></>, p),
+  dots: (p?: P) => S(<><circle cx={5} cy={12} r={1} /><circle cx={12} cy={12} r={1} /><circle cx={19} cy={12} r={1} /></>, p),
+  chevDown: (p?: P) => S(<path d="M6 9l6 6 6-6" />, p),
+  chevUp: (p?: P) => S(<path d="M6 15l6-6 6 6" />, p),
+  chevRight: (p?: P) => S(<path d="M9 6l6 6-6 6" />, p),
+  toBottom: (p?: P) => S(<><path d="M7 7l5 5 5-5" /><line x1={5} y1={17} x2={19} y2={17} /></>, p),
+  x: (p?: P) => S(<><line x1={6} y1={6} x2={18} y2={18} /><line x1={6} y1={18} x2={18} y2={6} /></>, p),
+  clip: (p?: P) => S(<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />, p),
+  check: (p?: P) => S(<path d="M5 12l5 5 9-11" />, p),
+  lock: (p?: P) => S(<><rect x={4} y={11} width={16} height={9} rx={2} /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>, p),
+  edit: (p?: P) => S(<><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></>, p),
+  doc: (p?: P) => S(<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></>, p),
+  github: (p?: P) => S(<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />, p),
+  git: (p?: P) => S(<><circle cx={6} cy={6} r={2} /><circle cx={6} cy={18} r={2} /><circle cx={18} cy={9} r={2} /><path d="M18 11a8 8 0 0 1-8 8" /><line x1={6} y1={8} x2={6} y2={16} /></>, p),
+  flag: (p?: P) => S(<path d="M5 21V4h12l-2 4 2 4H5" />, p),
+  bolt: (p?: P) => S(<path d="M13 2L4 14h7l-1 8 9-12h-7z" />, p),
+  moon: (p?: P) => S(<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />, p),
+  sun: (p?: P) => S(<><circle cx={12} cy={12} r={4} /><line x1={12} y1={2} x2={12} y2={5} /><line x1={12} y1={19} x2={12} y2={22} /><line x1={2} y1={12} x2={5} y2={12} /><line x1={19} y1={12} x2={22} y2={12} /><line x1={4.9} y1={4.9} x2={6.8} y2={6.8} /><line x1={17.2} y1={17.2} x2={19.1} y2={19.1} /><line x1={4.9} y1={19.1} x2={6.8} y2={17.2} /><line x1={17.2} y1={6.8} x2={19.1} y2={4.9} /></>, p),
+  external: (p?: P) => S(<><path d="M14 4h6v6" /><path d="M20 4l-9 9" /><path d="M19 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" /></>, p),
+  copy: (p?: P) => S(<><rect x={9} y={9} width={12} height={12} rx={2} /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></>, p),
+  play: (p?: P) => S(<path d="M7 5l11 7-11 7z" />, p),
+  stop: (p?: P) => S(<rect x={6} y={6} width={12} height={12} rx={2} />, p),
+  sliders: (p?: P) => S(<><line x1={4} y1={21} x2={4} y2={14} /><line x1={4} y1={10} x2={4} y2={3} /><line x1={12} y1={21} x2={12} y2={12} /><line x1={12} y1={8} x2={12} y2={3} /><line x1={20} y1={21} x2={20} y2={16} /><line x1={20} y1={12} x2={20} y2={3} /><line x1={1} y1={14} x2={7} y2={14} /><line x1={9} y1={8} x2={15} y2={8} /><line x1={17} y1={16} x2={23} y2={16} /></>, p),
+  search: (p?: P) => S(<><circle cx={11} cy={11} r={7} /><line x1={21} y1={21} x2={16.65} y2={16.65} /></>, p),
+  terminal: (p?: P) => S(<><rect x={3} y={4} width={18} height={16} rx={2} /><path d="M7 9l3 3-3 3" /><line x1={13} y1={15} x2={17} y2={15} /></>, p),
+  archive: (p?: P) => S(<><rect x={3} y={4} width={18} height={4} rx={1} /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8" /><line x1={10} y1={12} x2={14} y2={12} /></>, p),
+  restore: (p?: P) => S(<><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v4h4" /><path d="M12 8v4l3 2" /></>, p),
+  download: (p?: P) => S(<><path d="M12 4v11" /><path d="M7 11l5 5 5-5" /><line x1={5} y1={20} x2={19} y2={20} /></>, p),
+};
+
+// ---- agent brand marks ----
+// Logos, not line icons: filled paths in `currentColor` (the stroked `S()` set
+// above would smear these at avatar size). Keyed by agent driver id so any UI
+// that knows a task's `agent` can stamp the right mark; unknown/legacy ids get
+// no entry and callers fall back to a generic glyph.
+
+function Brand(children: React.ReactNode, props?: P) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" width="1em" height="1em" style={{ flex: "none" }} aria-hidden {...props}>
+      {children}
+    </svg>
+  );
+}
+
+export const AgentMark: Record<string, (p?: P) => React.ReactElement> = {
+  claude: (p?: P) => Brand(
+    <path d="M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.984-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.322.455-.34-.049-2.204-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" />,
+    p,
+  ),
+  codex: (p?: P) => Brand(
+    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.911 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073zm-9.022 12.608a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494zM3.6 18.304a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .78 0l5.843-3.368v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.856L13.104 8.364 15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.024l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.681 4.66zM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.682zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />,
+    p,
+  ),
+};

package/src/operator/node/liveStream.ts

@@ -0,0 +1,323 @@
+"use client";
+
+import { notifyCallback } from "../../core/callbacks";
+
+// Every live stream the UI watches (task transcript, lifecycle events, browser
+// status, services) rides ONE WebSocket per tab — server.js /live, bridged to the
+// same SSE routes as before (lib/liveBridge.js). Plain EventSources each pinned
+// one of the browser's 6 HTTP/1.1 connections per node, so a few open tabs
+// starved every ordinary request: sends, the "needs you" list and the browser
+// panel spun forever. WebSockets use their own pool.
+//
+// openLive() keeps EventSource's contract for its callers: onOpen fires on every
+// (re)connect — each one re-snapshots — and onMessage gets each event's data.
+// If the socket can't be opened at all (a proxy without WebSocket support, the
+// node restarting while the tab loaded), the tab falls back to one EventSource
+// per stream — the old behaviour — and keeps retrying the socket to move back.
+
+export interface LiveHandlers {
+  /** Upstream HTTP status, or 0 for a normal/network stream end. */
+  onEnd?: (code: number) => void;
+  /** Transport disruption; built-in reconnect/fallback remains active. */
+  onError?: (error: Error) => void;
+  onMessage: (data: string) => void;
+  onOpen?: () => void;
+}
+export interface LiveSub {
+  close(): void;
+}
+
+interface Sub {
+  id: number;
+  url: string;
+  h: LiveHandlers;
+  es?: EventSource;
+  retry?: ReturnType<typeof setTimeout>;
+  fails: number;
+  /** Gave up retrying after MAX_STREAM_RETRIES; the next wake (online / visible / focus) restarts it. */
+  stalled?: boolean;
+}
+
+// The server sends a keepalive every 20 s; a socket silent for longer than this
+// is dead (laptop sleep, dropped tunnel) even if the browser hasn't noticed.
+const SILENCE_MS = 65_000;
+const CONNECT_TIMEOUT_MS = 10_000;
+const BACKOFF_MS = [500, 1000, 2000, 4000, 8000];
+/** While on the EventSource fallback, how often to try the socket again. */
+const PROBE_MS = 30_000;
+// No unbounded retry loops: every automatic retry has a budget. Once it is spent
+// the transport stops and waits for an event — back online, the tab visible
+// again, the window focused — which resets the budget and reconnects at once.
+/** Socket reconnects in a row before stopping (≈1 minute with BACKOFF_MS). */
+const MAX_RECONNECTS = 10;
+/** Probes from the EventSource fallback back to the socket before stopping (≈5 minutes). */
+const MAX_PROBES = 10;
+/** Per-stream resubscribes / EventSource errors in a row before that stream stops. */
+const MAX_STREAM_RETRIES = 5;
+const MAX_EVENTSOURCE_ERRORS = 20;
+const STOPPED = "实时事件连接多次失败，已停止自动重连；网络恢复、回到页面或切回窗口时会再连";
+let probes = 0;
+
+const subs = new Map<number, Sub>();
+const observers = new Map<string, Set<(data: string) => void>>();
+/** Observe an existing route without opening a connection or server subscription. */
+export function observeLiveMessages(path: string, listener: (data: string) => void): () => void {
+  const key = path.split("?")[0];
+  const listeners = observers.get(key) ?? new Set(); observers.set(key, listeners); listeners.add(listener);
+  return () => { listeners.delete(listener); if (!listeners.size) observers.delete(key); };
+}
+function deliver(s: Sub, data: string) {
+  if (subs.get(s.id) !== s) return;
+  for (const listener of [...observers.get(s.url.split("?")[0]) ?? []]) notifyCallback(listener, data);
+  if (subs.get(s.id) === s) s.h.onMessage(data);
+}
+let nextId = 1;
+let mode: "ws" | "sse" | null = null;
+let ws: WebSocket | null = null;
+let wsOpen = false;
+let everOpened = false;
+let failsBeforeOpen = 0;
+let attempt = 0;
+let reconnectTimer: ReturnType<typeof setTimeout> | undefined;
+let watchdog: ReturnType<typeof setInterval> | undefined;
+let lastFrame = 0;
+let listening = false;
+let probeTimer: ReturnType<typeof setTimeout> | undefined;
+let cancelProbe: (() => void) | undefined;
+let unlisten: (() => void) | undefined;
+
+function currentMode(): "ws" | "sse" {
+  if (mode) return mode;
+  mode = typeof WebSocket === "undefined" ? "sse" : "ws";
+  return mode;
+}
+
+function listen() {
+  if (listening || typeof window === "undefined") return;
+  listening = true;
+  // Back from the background / back online / window focused: don't wait out the
+  // backoff, and restart whatever stopped after spending its retry budget.
+  const wake = () => {
+    if (subs.size === 0) return;
+    if (mode === "sse") {
+      probes = 0;
+      if (!probeTimer && !cancelProbe) probe();
+      for (const s of subs.values()) if (s.stalled) { s.stalled = false; s.fails = 0; openEventSource(s); }
+      return;
+    }
+    if (mode !== "ws") return;
+    attempt = 0;
+    if (!ws) connect();
+    else if (wsOpen && Date.now() - lastFrame > SILENCE_MS) drop(ws);
+    else if (wsOpen) for (const s of subs.values()) if (s.stalled) { s.stalled = false; s.fails = 0; sendSub(s); }
+  };
+  const visible = () => { if (document.visibilityState === "visible") wake(); };
+  document.addEventListener("visibilitychange", visible);
+  window.addEventListener("online", wake);
+  window.addEventListener("focus", wake);
+  unlisten = () => { document.removeEventListener("visibilitychange", visible); window.removeEventListener("online", wake); window.removeEventListener("focus", wake); listening = false; };
+}
+
+function sendSub(s: Sub) {
+  if (ws && wsOpen) ws.send(JSON.stringify({ t: "sub", s: s.id, u: s.url }));
+}
+
+function openEventSource(s: Sub) {
+  if (subs.get(s.id) !== s) return;
+  s.es?.close();
+  const es = new EventSource(s.url);
+  const active = () => subs.get(s.id) === s && s.es === es;
+  es.onopen = () => { if (!active()) return; if (s.retry) { clearTimeout(s.retry); s.retry = undefined; } s.fails = 0; s.h.onOpen?.(); };
+  es.onmessage = (event) => { if (active()) deliver(s, event.data); };
+  es.onerror = () => {
+    if (!active()) return;
+    s.fails++;
+    // EventSource retries a CONNECTING stream by itself, forever: close it once
+    // the budget is spent and wait for a wake instead.
+    if (s.fails >= MAX_EVENTSOURCE_ERRORS || (es.readyState === 2 && s.fails >= MAX_STREAM_RETRIES)) {
+      es.close(); s.es = undefined; s.stalled = true;
+      if (s.retry) { clearTimeout(s.retry); s.retry = undefined; }
+      notifyCallback(s.h.onError, new Error(STOPPED));
+      return;
+    }
+    notifyCallback(s.h.onError, new Error("实时事件连接中断，正在等待恢复"));
+    // EventSource hides HTTP status. CONNECTING retries itself; CLOSED needs
+    // a bounded manual retry so renewed auth can recover without a reload.
+    if (!active() || es.readyState !== 2) return;
+    es.close();
+    if (s.retry) clearTimeout(s.retry);
+    s.retry = setTimeout(() => { s.retry = undefined; if (active()) openEventSource(s); }, 30_000);
+  };
+  s.es = es;
+}
+
+function liveUrl(): string {
+  return `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}/live`;
+}
+
+function fallBackToEventSource() {
+  console.warn("[live] WebSocket unavailable — falling back to EventSource");
+  mode = "sse";
+  for (const s of subs.values()) openEventSource(s);
+  scheduleProbe();
+}
+
+// The fallback is a stopgap, not a verdict: its EventSources pin the very HTTP
+// connections /live exists to keep free, and the usual cause (the node was
+// restarting while this tab loaded) is gone a minute later. Keep trying the
+// socket and move the streams back onto it as soon as it opens.
+function scheduleProbe() {
+  if (probeTimer || subs.size === 0 || mode !== "sse" || probes >= MAX_PROBES) return;
+  probes++;
+  probeTimer = setTimeout(probe, PROBE_MS);
+}
+
+function probe() {
+  probeTimer = undefined;
+  if (mode !== "sse") return;
+  if (subs.size === 0) {
+    // Nothing to move: let the next openLive try the socket first.
+    mode = "ws";
+    failsBeforeOpen = 0;
+    return;
+  }
+  let sock: WebSocket;
+  try { sock = new WebSocket(liveUrl()); } catch { scheduleProbe(); return; }
+  const settle = () => { clearTimeout(timer); sock.onopen = sock.onclose = sock.onerror = null; cancelProbe = undefined; };
+  cancelProbe = () => { settle(); try { sock.close(); } catch { /* gone */ } };
+  const timer = setTimeout(() => { settle(); try { sock.close(); } catch { /* gone */ } scheduleProbe(); }, CONNECT_TIMEOUT_MS);
+  sock.onopen = () => {
+    settle();
+    sock.close();
+    if (mode !== "sse") return;
+    mode = "ws";
+    failsBeforeOpen = 0;
+    probes = 0;
+    for (const s of subs.values()) { s.es?.close(); s.es = undefined; s.stalled = false; s.fails = 0; }
+    // Each stream re-snapshots on the socket, so the hand-over loses nothing.
+    connect();
+  };
+  sock.onclose = () => { settle(); scheduleProbe(); };
+  sock.onerror = () => { /* onclose follows */ };
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer || subs.size === 0) return;
+  if (attempt >= MAX_RECONNECTS) {
+    for (const s of [...subs.values()]) notifyCallback(s.h.onError, new Error(STOPPED));
+    return;
+  }
+  const delay = BACKOFF_MS[Math.min(attempt, BACKOFF_MS.length - 1)];
+  attempt++;
+  reconnectTimer = setTimeout(() => { reconnectTimer = undefined; connect(); }, delay);
+}
+
+// Treat a socket as closed right away (its onclose can take minutes on a dead
+// TCP connection), then reconnect.
+function drop(sock: WebSocket) {
+  if (ws !== sock) return;
+  ws = null;
+  wsOpen = false;
+  if (watchdog) { clearInterval(watchdog); watchdog = undefined; }
+  sock.onopen = sock.onmessage = sock.onclose = sock.onerror = null;
+  try { sock.close(); } catch { /* already closed */ }
+  for (const s of subs.values()) { if (s.retry) { clearTimeout(s.retry); s.retry = undefined; } }
+  for (const s of [...subs.values()]) notifyCallback(s.h.onError, new Error("实时事件连接已断开，正在重连"));
+  if (subs.size === 0) return;
+  if (!everOpened && ++failsBeforeOpen >= 3) { fallBackToEventSource(); return; }
+  scheduleReconnect();
+}
+
+function resubscribeLater(s: Sub, code: number) {
+  // A renewed login must recover on the existing socket. Retry expired auth
+  // slowly; permanent missing/invalid resources wait for a new subscription.
+  const auth = code === 401 || code === 403;
+  if (!auth && code !== 0 && code !== 408 && code !== 429 && code < 500) return;
+  if (s.fails >= MAX_STREAM_RETRIES) { s.stalled = true; notifyCallback(s.h.onError, new Error(STOPPED)); return; }
+  const delay = auth || code === 429 ? 30_000 : BACKOFF_MS[Math.min(s.fails, BACKOFF_MS.length - 1)] * 2;
+  s.fails++;
+  if (s.retry) clearTimeout(s.retry);
+  s.retry = setTimeout(() => { s.retry = undefined; if (subs.get(s.id) === s) sendSub(s); }, delay);
+}
+
+function onFrame(text: string) {
+  lastFrame = Date.now();
+  if (text.charCodeAt(0) === 123 /* { */) {
+    let msg: { t?: string; s?: number; code?: number };
+    try { msg = JSON.parse(text); } catch { return; }
+    const s = msg.s !== undefined ? subs.get(msg.s) : undefined;
+    if (msg.t === "open" && s) { s.fails = 0; s.h.onOpen?.(); }
+    else if (msg.t === "end" && s) {
+      notifyCallback(s.h.onEnd, msg.code ?? 0);
+      if (subs.get(s.id) === s) resubscribeLater(s, msg.code ?? 0);
+    }
+    return;
+  }
+  const nl = text.indexOf("\n");
+  if (nl <= 0) return;
+  const s = subs.get(Number(text.slice(0, nl)));
+  if (s) deliver(s, text.slice(nl + 1));
+}
+
+function connect() {
+  if (ws || currentMode() !== "ws" || subs.size === 0) return;
+  if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = undefined; }
+  listen();
+  let sock: WebSocket;
+  try {
+    sock = new WebSocket(liveUrl());
+  } catch {
+    fallBackToEventSource();
+    return;
+  }
+  ws = sock;
+  // A proxy that takes the connection but never answers the upgrade would
+  // otherwise leave the tab without live updates indefinitely.
+  const handshake = setTimeout(() => { if (ws === sock && !wsOpen) drop(sock); }, CONNECT_TIMEOUT_MS);
+  sock.onopen = () => {
+    clearTimeout(handshake);
+    wsOpen = true;
+    everOpened = true;
+    attempt = 0;
+    lastFrame = Date.now();
+    for (const s of subs.values()) { s.fails = 0; sendSub(s); }
+    watchdog = setInterval(() => { if (Date.now() - lastFrame > SILENCE_MS) drop(sock); }, 10_000);
+  };
+  sock.onmessage = (e) => onFrame(String(e.data));
+  sock.onclose = () => drop(sock);
+  sock.onerror = () => { /* onclose follows */ };
+}
+
+/**
+ * Watch one live stream (an SSE route URL). Mirrors EventSource: onOpen on each
+ * (re)connect, onMessage per event. close() stops it.
+ */
+export function openLive(url: string, h: LiveHandlers): LiveSub {
+  const s: Sub = { id: nextId++, url, h, fails: 0 };
+  subs.set(s.id, s);
+  if (currentMode() === "sse") openEventSource(s);
+  else if (wsOpen) sendSub(s);
+  else connect();
+  return {
+    close() {
+      if (subs.get(s.id) !== s) return;
+      subs.delete(s.id);
+      if (s.retry) clearTimeout(s.retry);
+      s.es?.close();
+      if (ws && wsOpen) ws.send(JSON.stringify({ t: "unsub", s: s.id }));
+      if (subs.size === 0) {
+        // Standalone embeds may mount/unmount repeatedly. Release the shared
+        // transport when its last consumer leaves, including fallback probes.
+        if (reconnectTimer) clearTimeout(reconnectTimer);
+        if (probeTimer) clearTimeout(probeTimer);
+        if (watchdog) clearInterval(watchdog);
+        reconnectTimer = probeTimer = watchdog = undefined;
+        cancelProbe?.();
+        const socket = ws; ws = null; wsOpen = false;
+        if (socket) { socket.onopen = socket.onmessage = socket.onclose = socket.onerror = null; try { socket.close(); } catch { /* already closed */ } }
+        unlisten?.(); unlisten = undefined;
+        mode = null; everOpened = false; failsBeforeOpen = attempt = probes = 0;
+      }
+    },
+  };
+}