@spzxg/cli-ui 0.1.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spzxg/cli-ui",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "type": "module",
   "description": "任务中心（cli-task-center）对话任务的前端积木：cli-msglist 消息对话列表、cli-chat 对话，数据全部来自 center 服务。",
   "main": "src/index.ts",

package/src/board/BrowserPane.tsx

@@ -0,0 +1,418 @@
+// 任务浏览器：移植自 Operator 的 BrowserPane（状态、实时画面、接管 / 交还、打开 / 关闭）。
+// 全部经 center 转发：状态和画面走 SSE，鼠标键盘走 POST；只有面板挂着且页面可见时才拉画面。
+// 输入只在用户接管（control = human）时发送，节点那边也只在接管时接受。
+// Operator 的「在节点屏幕上显示」「弹出窗口」「登录状态」是节点本机的功能，这里不提供。
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { CenterError, type BoardBackend } from "../core/client.js";
+import type { BrowserStatus } from "../core/types.js";
+import { Icon } from "../ui/icons.js";
+
+interface FrameMeta { deviceWidth: number; deviceHeight: number }
+
+const CAPABILITY_LABEL: Record<string, string> = { config: "任务配置", manual: "手动打开过", ai: "AI 自行启用" };
+const SPECIAL_KEYS: Record<string, number> = {
+  Enter: 13, Backspace: 8, Tab: 9, Escape: 27, Delete: 46, ArrowLeft: 37, ArrowUp: 38, ArrowRight: 39, ArrowDown: 40,
+  Home: 36, End: 35, PageUp: 33, PageDown: 34,
+};
+const MOUSE_BUTTONS = ["left", "middle", "right"] as const;
+const RETRY_MS = [1_000, 3_000, 8_000, 15_000];
+
+function modifiers(e: { altKey: boolean; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean }): number {
+  return (e.altKey ? 1 : 0) | (e.ctrlKey ? 2 : 0) | (e.metaKey ? 4 : 0) | (e.shiftKey ? 8 : 0);
+}
+
+function usePageVisible(): boolean {
+  const [visible, setVisible] = useState(() => typeof document === "undefined" || document.visibilityState === "visible");
+  useEffect(() => {
+    const on = () => setVisible(document.visibilityState === "visible");
+    document.addEventListener("visibilitychange", on);
+    return () => document.removeEventListener("visibilitychange", on);
+  }, []);
+  return visible;
+}
+
+/** 浏览器状态：SSE 推送，断了按退避重连。 */
+function useBrowserStatus(backend: BoardBackend, jobId: string): [BrowserStatus | null, (s: BrowserStatus) => void, string | null] {
+  const [status, setStatus] = useState<BrowserStatus | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    setStatus(null);
+    let stop: (() => void) | null = null;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let attempt = 0;
+    let alive = true;
+    const connect = () => {
+      stop = backend.browserEvents(jobId, {
+        onStatus: (s) => { attempt = 0; setError(null); setStatus(s); },
+        onClose: (err) => {
+          if (!alive) return;
+          // 404 / 409：节点没开浏览器功能或还没派发，不再重试（CliBoard 会在派发后重新挂载）。
+          if (err && (err.status === 404 || err.status === 409 || err.status === 401)) { setError(err.message); return; }
+          if (err) setError(err.message);
+          timer = setTimeout(connect, RETRY_MS[Math.min(attempt++, RETRY_MS.length - 1)]);
+        },
+      });
+    };
+    connect();
+    return () => { alive = false; stop?.(); if (timer) clearTimeout(timer); };
+  }, [backend, jobId]);
+  return [status, setStatus, error];
+}
+
+interface ScreenHandle { draw(base64: string, meta: FrameMeta | null): void }
+
+/** base64 → 字节。 */
+function decodeBase64(data: string): Uint8Array {
+  const bin = atob(data);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+/**
+ * 实时画面：画在 canvas 上。
+ *   · 帧在内存里解码（createImageBitmap），不走 data: / blob: 地址，宿主页面的 CSP 没放行 img-src data: 也能显示；
+ *     解码是异步的，按序号丢掉过期帧，画面不会倒退。没有 createImageBitmap 的环境退回 <img>。
+ *   · 输入用指针事件：鼠标照原样；触屏点一下 = 点击，拖动 = 滚动；接管时滚轮 / 触摸只作用于画面，不滚动宿主页面。
+ *   · 画面按比例缩放，适应容器宽高（窄的侧栏、弹窗、整页都可以）。
+ */
+const Screen = forwardRef<ScreenHandle, { human: boolean; hidden: boolean; label: string; send: (msg: Record<string, unknown>) => void; onFocusKeys: () => void }>(
+  function Screen({ human, hidden, label, send, onFocusKeys }, ref) {
+    const canvasRef = useRef<HTMLCanvasElement | null>(null);
+    const imgRef = useRef<HTMLImageElement | null>(null);
+    const meta = useRef<FrameMeta | null>(null);
+    const seq = useRef({ next: 0, drawn: 0 });
+    const [fallback] = useState(() => typeof createImageBitmap !== "function");
+    const [fallbackSrc, setFallbackSrc] = useState<string | null>(null);
+
+    useImperativeHandle(ref, () => ({
+      draw(data, frameMeta) {
+        meta.current = frameMeta;
+        const type = data.startsWith("iVBOR") ? "image/png" : "image/jpeg";
+        if (fallback) { setFallbackSrc(`data:${type};base64,${data}`); return; }
+        const n = ++seq.current.next;
+        let bytes: Uint8Array;
+        try { bytes = decodeBase64(data); } catch { return; }
+        createImageBitmap(new Blob([bytes as BlobPart], { type })).then((bitmap) => {
+          const canvas = canvasRef.current;
+          if (!canvas || n < seq.current.drawn) { bitmap.close(); return; }
+          seq.current.drawn = n;
+          if (canvas.width !== bitmap.width || canvas.height !== bitmap.height) { canvas.width = bitmap.width; canvas.height = bitmap.height; }
+          canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
+          bitmap.close();
+        }, () => undefined);
+      },
+    }), [fallback]);
+
+    const el = () => (fallback ? imgRef.current : canvasRef.current);
+    /** 屏幕坐标 → 页面 CSS 像素（按帧自带的页面尺寸换算）。 */
+    const point = useCallback((clientX: number, clientY: number) => {
+      const node = el();
+      if (!node) return null;
+      const r = node.getBoundingClientRect();
+      if (!r.width || !r.height) return null;
+      const natural = node instanceof HTMLCanvasElement ? { w: node.width, h: node.height } : { w: node.naturalWidth, h: node.naturalHeight };
+      const w = meta.current?.deviceWidth ?? natural.w;
+      const h = meta.current?.deviceHeight ?? natural.h;
+      return { x: Math.round(((clientX - r.left) / r.width) * w), y: Math.round(((clientY - r.top) / r.height) * h) };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const humanRef = useRef(human);
+    humanRef.current = human;
+    const touch = useRef<{ id: number; x: number; y: number; lastY: number; lastX: number; moved: boolean } | null>(null);
+    const lastMove = useRef(0);
+
+    const mouse = (event: string, e: { clientX: number; clientY: number; altKey: boolean; ctrlKey: boolean; metaKey: boolean; shiftKey: boolean }, extra: Record<string, unknown> = {}) => {
+      const p = point(e.clientX, e.clientY);
+      if (p) send({ type: "mouse", event, ...p, modifiers: modifiers(e), ...extra });
+    };
+
+    const onPointerDown = (e: React.PointerEvent) => {
+      if (!human) return;
+      e.preventDefault();
+      onFocusKeys();
+      if (e.pointerType === "touch") {
+        touch.current = { id: e.pointerId, x: e.clientX, y: e.clientY, lastX: e.clientX, lastY: e.clientY, moved: false };
+        return;
+      }
+      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+      mouse("mousePressed", e, { button: MOUSE_BUTTONS[e.button] ?? "left", clickCount: e.detail || 1 });
+    };
+    const onPointerMove = (e: React.PointerEvent) => {
+      if (!human) return;
+      const t = touch.current;
+      if (e.pointerType === "touch" && t && t.id === e.pointerId) {
+        // 触屏拖动 → 滚动页面（在按下的位置发滚轮）。
+        const dx = t.lastX - e.clientX;
+        const dy = t.lastY - e.clientY;
+        if (Math.abs(e.clientX - t.x) + Math.abs(e.clientY - t.y) > 8) t.moved = true;
+        if (t.moved && (Math.abs(dx) >= 4 || Math.abs(dy) >= 4)) {
+          const p = point(t.x, t.y);
+          if (p) send({ type: "mouse", event: "mouseWheel", ...p, deltaX: dx * 2, deltaY: dy * 2, modifiers: 0 });
+          t.lastX = e.clientX;
+          t.lastY = e.clientY;
+        }
+        return;
+      }
+      if (Date.now() - lastMove.current < 50) return;
+      lastMove.current = Date.now();
+      mouse("mouseMoved", e);
+    };
+    const onPointerUp = (e: React.PointerEvent) => {
+      if (!human) return;
+      const t = touch.current;
+      if (e.pointerType === "touch" && t && t.id === e.pointerId) {
+        touch.current = null;
+        if (!t.moved) {
+          // 触屏点一下 = 鼠标点击
+          mouse("mousePressed", e, { button: "left", clickCount: 1 });
+          mouse("mouseReleased", e, { button: "left", clickCount: 1 });
+        }
+        return;
+      }
+      mouse("mouseReleased", e, { button: MOUSE_BUTTONS[e.button] ?? "left", clickCount: e.detail || 1 });
+    };
+
+    // 滚轮：React 的 onWheel 是被动监听，拦不住宿主页面滚动，所以用原生监听（passive: false）。
+    useEffect(() => {
+      const node: HTMLElement | null = el();
+      if (!node) return;
+      const onWheel = (e: WheelEvent) => {
+        if (!humanRef.current) return;
+        e.preventDefault();
+        mouse("mouseWheel", e, { deltaX: e.deltaX, deltaY: e.deltaY });
+      };
+      node.addEventListener("wheel", onWheel, { passive: false });
+      return () => node.removeEventListener("wheel", onWheel);
+    }); // 每次渲染重绑：fallback 时节点会变
+
+    const common = {
+      className: `bp-frame ${human ? "live" : ""}`,
+      style: { display: hidden ? "none" : undefined, touchAction: human ? "none" : "auto" } as React.CSSProperties,
+      onPointerDown, onPointerMove, onPointerUp,
+      onPointerCancel: () => { touch.current = null; },
+      onContextMenu: (e: React.MouseEvent) => { if (human) e.preventDefault(); },
+      role: "img" as const,
+      "aria-label": label,
+    };
+    return fallback
+      ? (fallbackSrc ? <img ref={imgRef} src={fallbackSrc} alt={label} draggable={false} {...common} /> : null)
+      : <canvas ref={canvasRef} {...common} />;
+  },
+);
+
+function Viewer({ backend, jobId, human }: { backend: BoardBackend; jobId: string; human: boolean }) {
+  const visible = usePageVisible();
+  const viewerRef = useRef<string | null>(null);
+  const screenRef = useRef<ScreenHandle | null>(null);
+  const keysRef = useRef<HTMLTextAreaElement | null>(null);
+  const [hasFrame, setHasFrame] = useState(false);
+  const [page, setPage] = useState<{ url: string; title: string }>({ url: "", title: "" });
+  const [addr, setAddr] = useState("");
+  const [editing, setEditing] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [ended, setEnded] = useState<string | null>(null);
+  const [retry, setRetry] = useState(0);
+  const [reconnecting, setReconnecting] = useState(false);
+  // 连续失败次数：按退避重连，收到画面后清零。
+  const failures = useRef(0);
+  const reconnect = useCallback((delay?: number) => {
+    const wait = delay ?? RETRY_MS[Math.min(failures.current++, RETRY_MS.length - 1)];
+    setReconnecting(true);
+    return setTimeout(() => setRetry((n) => n + 1), wait);
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+    setEnded(null);
+    let clear: ReturnType<typeof setTimeout> | undefined;
+    let again: ReturnType<typeof setTimeout> | undefined;
+    const flash = (text: string) => {
+      setNotice(text);
+      if (clear) clearTimeout(clear);
+      clear = setTimeout(() => setNotice(null), 3000);
+    };
+    const stop = backend.browserFrames(jobId, {
+      onViewer: (id) => { viewerRef.current = id; setReconnecting(false); },
+      onMessage: (m) => {
+        if (m.type === "frame" && m.data) {
+          failures.current = 0;
+          screenRef.current?.draw(m.data, m.metadata ?? null);
+          setHasFrame(true);
+        } else if (m.type === "page") setPage({ url: m.url ?? "", title: m.title ?? "" });
+        else if (m.type === "error" && m.message) flash(m.message);
+      },
+      onEnd: (end) => {
+        viewerRef.current = null;
+        // 节点明确拒绝：不自动重试（多半是节点版本 / 功能开关），给「重试」按钮。其余（超时、节点断开）按退避重连。
+        if (end.reason === "refused") setEnded(end.detail || "执行节点拒绝了画面连接");
+        else if (end.reason !== "client_closed") again = reconnect();
+      },
+      onClose: (err) => {
+        viewerRef.current = null;
+        if (!err) return; // 正常结束：onEnd 已经处理
+        if (err.status === 429 || err.status === 404 || err.status === 401 || err.status === 409) setEnded(err.message);
+        else again = reconnect();
+      },
+    });
+    return () => { stop(); viewerRef.current = null; if (clear) clearTimeout(clear); if (again) clearTimeout(again); };
+  }, [backend, jobId, visible, retry, reconnect]);
+
+  useEffect(() => { if (!editing) setAddr(page.url); }, [page.url, editing]);
+
+  // 输入按顺序发：一个请求在路上时攒着，回来后一次发完（鼠标移动只留最后一个）。
+  const queue = useRef<Array<Record<string, unknown>>>([]);
+  const inflight = useRef(false);
+  const flush = useCallback(() => {
+    const viewer = viewerRef.current;
+    if (inflight.current || !viewer || !queue.current.length) return;
+    const batch = queue.current.splice(0, 50);
+    inflight.current = true;
+    backend.browserInput(jobId, viewer, batch).catch((error: unknown) => {
+      // 画面连接已失效（中枢重启、连接断开）：丢掉这批输入并重连画面，避免用户以为点了没反应。
+      if (error instanceof CenterError && (error.status === 404 || error.status === 409)) {
+        viewerRef.current = null;
+        queue.current = [];
+        setNotice("画面连接已断开，正在重连…（刚才的操作没有送达，请重新操作）");
+        setTimeout(() => setNotice(null), 4000);
+        reconnect(300);
+      }
+    }).finally(() => { inflight.current = false; flush(); });
+  }, [backend, jobId, reconnect]);
+  const send = useCallback((msg: Record<string, unknown>) => {
+    const q = queue.current;
+    const last = q[q.length - 1];
+    if (msg.type === "mouse" && msg.event === "mouseMoved" && last?.type === "mouse" && last.event === "mouseMoved") q[q.length - 1] = msg;
+    else q.push(msg);
+    flush();
+  }, [flush]);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.nativeEvent.isComposing) return;
+    const code = SPECIAL_KEYS[e.key];
+    const mods = modifiers(e);
+    const shortcut = (mods & 6) !== 0 && e.key.toLowerCase() !== "v";
+    if (code === undefined && !shortcut) return;
+    e.preventDefault();
+    const base = { key: e.key, code: e.code, keyCode: code ?? e.keyCode, modifiers: mods };
+    send({ type: "key", event: "keyDown", ...base, ...(e.key === "Enter" ? { text: "\r" } : {}) });
+    send({ type: "key", event: "keyUp", ...base });
+  };
+  const flushText = (el: HTMLTextAreaElement) => {
+    if (el.value) send({ type: "text", text: el.value });
+    el.value = "";
+  };
+  const nav = (msg: Record<string, unknown>) => { if (human) send(msg); };
+
+  return (
+    <div className="bp-viewer">
+      <div className="prev-chrome bp-chrome">
+        <button className="bp-nav" disabled={!human} onClick={() => nav({ type: "back" })} title="后退">‹</button>
+        <button className="bp-nav" disabled={!human} onClick={() => nav({ type: "forward" })} title="前进">›</button>
+        <button className="bp-nav" disabled={!human} onClick={() => nav({ type: "reload" })} title="刷新">↻</button>
+        <form className="bp-addr-form" onSubmit={(e) => { e.preventDefault(); nav({ type: "navigate", url: addr }); setEditing(false); }}>
+          <input className="prev-addr bp-addr" value={addr} readOnly={!human} title={page.title || page.url}
+            onFocus={() => setEditing(true)} onBlur={() => setEditing(false)} onChange={(e) => setAddr(e.target.value)} />
+        </form>
+      </div>
+      <div className={`bp-screen ${human ? "live" : ""}`}>
+        {ended ? (
+          <div className="bp-empty">看不到实时画面：{ended}<br /><button className="btn btn-line btn-sm" style={{ marginTop: 8 }} onClick={() => { failures.current = 0; setRetry((n) => n + 1); }}>重试</button></div>
+        ) : null}
+        {/* 画面一直挂着（收到第一帧前隐藏），解码在内存里做，不受宿主页面 CSP 的 img-src 限制。 */}
+        <Screen ref={screenRef} human={human && !ended} hidden={!hasFrame || !!ended} label={page.title || "浏览器画面"} send={send} onFocusKeys={() => keysRef.current?.focus({ preventScroll: true })} />
+        {!ended && !hasFrame && (
+          <div className="bp-empty">{!visible ? "页面不可见，已暂停画面" : reconnecting ? "画面连接中断，正在重连…" : "正在连接画面…"}</div>
+        )}
+        {notice && <div className="bp-toast">{notice}</div>}
+        {hasFrame && reconnecting && !notice && <div className="bp-toast">画面连接中断，正在重连…</div>}
+      </div>
+      <textarea
+        ref={keysRef}
+        className="bp-keys"
+        aria-label="向浏览器输入"
+        disabled={!human}
+        onKeyDown={onKeyDown}
+        onInput={(e) => { if (!(e.nativeEvent as InputEvent).isComposing) flushText(e.currentTarget); }}
+        onCompositionEnd={(e) => flushText(e.currentTarget)}
+      />
+    </div>
+  );
+}
+
+export function BrowserPane({ backend, jobId, readOnly }: { backend: BoardBackend; jobId: string; readOnly?: boolean }) {
+  const [status, setStatus, streamError] = useBrowserStatus(backend, jobId);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const act = async (action: "open" | "close" | "takeover" | "handback") => {
+    setBusy(action);
+    setError(null);
+    try { setStatus(await backend.browserAction(jobId, action)); }
+    catch (e) { setError(e instanceof Error ? e.message : String(e)); }
+    finally { setBusy(null); }
+  };
+
+  if (!status) return <div className="rail-pad"><div className="prev-note">{streamError ? `读取浏览器状态失败：${streamError}` : "读取浏览器状态…"}</div></div>;
+  const running = status.state === "running";
+  const human = running && status.control === "human";
+  const kept = human && status.handoff?.by === "kept";
+  const shownError = error ?? (status.state === "none" ? status.error : null);
+
+  return (
+    <div className="rail-pad bp">
+      <div className="bp-head">
+        <span className="rail-eyebrow">浏览器 · ego lite</span>
+        <span className={`bp-badge ${running ? (human ? "human" : "ai") : ""}`}>
+          {status.state === "opening" ? "正在打开" : status.state === "closing" ? "正在关闭" : !running ? "未打开" : kept ? "结果页保留中" : human ? "你在操作" : "AI 控制中"}
+        </span>
+        {running && status.viewers > 0 && <span className="bp-meta">{status.viewers} 人在看</span>}
+      </div>
+
+      {kept && <div className="bp-kept">AI 已完成，把结果页留在这里供你查看。看完点「关闭浏览器」；任务之后再用浏览器时会自动收回，没人看 10 分钟后也会自动关闭。</div>}
+      {human && !kept && status.handoff && (
+        <div className="bp-handoff">
+          {status.handoff.by === "ai"
+            ? <>🖐 AI 请求你操作：<b>{status.handoff.instruction || "完成浏览器里的这一步"}</b></>
+            : status.handoff.by === "browser"
+              ? <>🖐 浏览器需要你处理（AI 交出了控制权，或页面弹出了权限请求）</>
+              : <>你已接管浏览器，AI 的浏览器命令会暂停</>}
+          <div className="bp-handoff-sub">完成后点「交还给 AI」。密码只会发到网页，不会进入对话记录。</div>
+        </div>
+      )}
+
+      {running ? (
+        <>
+          <Viewer backend={backend} jobId={jobId} human={human && !readOnly} />
+          {!readOnly && (
+            <div className="prev-actions bp-actions">
+              {human
+                ? <button className="btn btn-accent" disabled={!!busy} onClick={() => act("handback")}>{Icon.check()} 交还给 AI</button>
+                : <button className="btn btn-line" disabled={!!busy} onClick={() => act("takeover")}>{Icon.edit()} 接管</button>}
+              <span style={{ flex: 1 }} />
+              <button className="btn btn-ghost btn-sm" disabled={!!busy} onClick={() => act("close")}>{Icon.x()} 关闭浏览器</button>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="bp-idle">
+          <p>
+            {status.capability
+              ? `这个任务已开启浏览器能力（${CAPABILITY_LABEL[status.capability] ?? status.capability}）：AI 第一次用到时会自动打开，轮次结束自动关闭。`
+              : "这个任务还没有开启浏览器能力。手动打开一次就会开启，之后 AI 也能使用这个浏览器（例如你先在这里登录好网站）。"}
+          </p>
+          {!readOnly && (
+            <button className="btn btn-accent" disabled={status.state !== "none" || !!busy} onClick={() => act("open")}>
+              {Icon.external()} {status.state === "opening" || busy === "open" ? "正在打开…" : "打开浏览器"}
+            </button>
+          )}
+          <div className="prev-note">
+            节点浏览器：{status.instance.running ? `运行中（${status.instance.spaces} 个任务在用）` : "未运行（首次打开需要几秒启动）"}
+            <br />登录状态保存在执行节点的 ego lite 里，所有任务共享：登录一次即可。
+          </div>
+        </div>
+      )}
+      {shownError && <div className="bp-error">{shownError}</div>}
+    </div>
+  );
+}

package/src/board/ChangesPane.tsx

@@ -0,0 +1,142 @@
+// 改动：移植自 Operator 的 TaskChanges（只读部分：分支、统计、文件列表、逐文件 diff）。
+// 合并 / 解决冲突 / 建 PR 是 Operator 里的操作，经中枢的对话任务不提供。
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { BoardBackend } from "../core/client.js";
+import type { DiffFile, DiffResult } from "../core/types.js";
+
+const STATUS_LABEL: Record<string, string> = { A: "新增", M: "修改", D: "删除", R: "重命名", "?": "未跟踪" };
+const COLLAPSE_LINES = 400;
+
+// 去掉 diff --git / index / --- / +++ 文件头，只留 hunk 行（与 Operator 一致）。
+function hunkLines(patch: string): string[] {
+  const lines = patch.split("\n");
+  const i = lines.findIndex((l) => l.startsWith("@@"));
+  return i >= 0 ? lines.slice(i) : [];
+}
+function lineClass(line: string): string {
+  if (line.startsWith("@@")) return "hunk";
+  if (line.startsWith("+") && !line.startsWith("+++")) return "add";
+  if (line.startsWith("-") && !line.startsWith("---")) return "del";
+  return "";
+}
+
+/** 只给了一整段 unified diff 的节点：按文件切开。 */
+export function splitUnified(diff: string): DiffFile[] {
+  const files: DiffFile[] = [];
+  for (const chunk of diff.split(/^(?=diff --git )/m)) {
+    if (!chunk.startsWith("diff --git ")) continue;
+    const head = /^diff --git a\/(.+?) b\/(.+)$/m.exec(chunk);
+    const path = head?.[2] ?? "?";
+    const status = /^new file mode/m.test(chunk) ? "A" : /^deleted file mode/m.test(chunk) ? "D" : /^rename from/m.test(chunk) ? "R" : "M";
+    let additions = 0;
+    let deletions = 0;
+    for (const l of hunkLines(chunk)) {
+      if (l.startsWith("+") && !l.startsWith("+++")) additions++;
+      else if (l.startsWith("-") && !l.startsWith("---")) deletions++;
+    }
+    files.push({ path, status, additions, deletions, binary: /^Binary files /m.test(chunk), patch: chunk });
+  }
+  return files;
+}
+
+const FileDiff = memo(function FileDiff({ file: f, userToggled, onToggle, refs, onOpen }: {
+  file: DiffFile; userToggled: boolean; onToggle: (path: string) => void;
+  refs: { current: Record<string, HTMLDivElement | null> }; onOpen?: (path: string) => void;
+}) {
+  const lines = useMemo(() => (f.binary ? [] : hunkLines(f.patch)), [f]);
+  const big = lines.length > COLLAPSE_LINES;
+  const isCollapsed = userToggled ? !big : big;
+  const est = Math.round(34 + (isCollapsed ? 38 : Math.max(1, lines.length) * 18.6));
+  return (
+    <div className="tc-file" style={{ containIntrinsicSize: `auto ${est}px` }} ref={(el) => { refs.current[f.path] = el; }}>
+      <button className="tc-fhead" onClick={() => onToggle(f.path)}>
+        <span className={`tc-chev ${isCollapsed ? "" : "open"}`}>▸</span>
+        <span className={`tc-st s-${f.status === "?" ? "new" : f.status}`}>{f.status}</span>
+        <span className="tc-fpath">{f.path}</span>
+        {onOpen && f.status !== "D" && (
+          <span className="cli-tc-open" role="button" tabIndex={0} title="打开文件" onClick={(e) => { e.stopPropagation(); onOpen(f.path); }} onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); onOpen(f.path); } }}>打开</span>
+        )}
+        <span className="tc-cnt"><b className="add">+{f.additions}</b> <b className="del">−{f.deletions}</b></span>
+      </button>
+      {isCollapsed ? (
+        big && <button className="tc-bigdiff" onClick={() => onToggle(f.path)}>大型 diff（{lines.length.toLocaleString()} 行）—— 点击展开</button>
+      ) : (
+        <div className="tc-hunks">
+          {f.binary ? <div className="tc-empty">二进制文件 —— 不予显示</div>
+            : lines.length === 0 ? <div className="tc-empty">没有文本改动（仅权限或重命名）。</div>
+              : lines.map((ln, i) => <div key={i} className={`dl ${lineClass(ln)}`}>{ln || " "}</div>)}
+          {f.truncated && <div className="tc-empty">… 文件 diff 已截断</div>}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export function ChangesPane({ backend, jobId, refreshKey, onOpen }: { backend: BoardBackend; jobId: string; refreshKey: number; onOpen?: (path: string) => void }) {
+  const [data, setData] = useState<DiffResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [manual, setManual] = useState(0);
+  const [toggled, setToggled] = useState<Set<string>>(new Set());
+  const [active, setActive] = useState<string | null>(null);
+  const secRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    backend.diff(jobId).then((d) => { if (alive) { setData(d); setError(null); setLoading(false); } },
+      (e: unknown) => { if (alive) { setError(e instanceof Error ? e.message : String(e)); setLoading(false); } });
+    return () => { alive = false; };
+  }, [backend, jobId, refreshKey, manual]);
+
+  const toggle = useCallback((path: string) => setToggled((s) => { const n = new Set(s); if (n.has(path)) n.delete(path); else n.add(path); return n; }), []);
+  const jump = (path: string) => {
+    setActive(path);
+    const el = secRefs.current[path];
+    const box = scrollRef.current;
+    if (el && box) box.scrollTo({ top: el.offsetTop - box.offsetTop, behavior: "smooth" });
+  };
+
+  const files = useMemo(() => data?.files ?? (data?.diff || data?.patch ? splitUnified(data.diff ?? data.patch ?? "") : []), [data]);
+
+  if (error && !data) return <div className="tc-note">读取改动失败：{error} <button className="tc-btn" onClick={() => setManual((n) => n + 1)}>重试</button></div>;
+  if (!data) return <div className="tc-note">读取改动…</div>;
+  if (data.error) return <div className="tc-note">{data.error} <button className="tc-btn" onClick={() => setManual((n) => n + 1)}>重试</button></div>;
+  const unified = !data.files && files.length > 0;
+  if (!unified && data.isolated === false) return <div className="tc-note">{data.reason || "该任务没有独立分支，改动直接写在工作区里（见「文件」）。"}</div>;
+  const totalAdd = files.reduce((n, f) => n + f.additions, 0);
+  const totalDel = files.reduce((n, f) => n + f.deletions, 0);
+  const nothing = files.length === 0;
+
+  return (
+    <div className="tc-root">
+      <div className="tc-bar">
+        {data.branch && <code className="tc-branch">{data.branch}</code>}
+        {data.baseLabel && <span className="tc-arrow">→ {data.baseLabel}</span>}
+        {!nothing && <span className="tc-stat"><b className="add">+{totalAdd}</b> <b className="del">−{totalDel}</b></span>}
+        {data.isDirty && <span className="tc-dirty">● 未提交</span>}
+        {(data.ahead ?? 0) > 0 && <span className="tc-ahead">领先 {data.ahead} 个提交</span>}
+        <span className="tc-spacer" />
+        <button className="tc-btn" onClick={() => setManual((n) => n + 1)} disabled={loading}>{loading ? "…" : "刷新"}</button>
+      </div>
+      {nothing ? (
+        <div className="tc-note">该分支上还没有改动。</div>
+      ) : (
+        <div className="tc-scroll" ref={scrollRef}>
+          <div className="tc-list">
+            <div className="tc-list-h">{files.length} 个文件有改动</div>
+            {files.map((f) => (
+              <button key={f.path} className={`tc-frow ${active === f.path ? "on" : ""}`} onClick={() => jump(f.path)} title={f.path}>
+                <span className={`tc-st s-${f.status === "?" ? "new" : f.status}`} title={STATUS_LABEL[f.status] || f.status}>{f.status}</span>
+                <span className="tc-fpath">{f.path}</span>
+                {f.binary ? <span className="tc-bin">bin</span> : <span className="tc-cnt"><b className="add">+{f.additions}</b> <b className="del">−{f.deletions}</b></span>}
+              </button>
+            ))}
+          </div>
+          {files.map((f) => <FileDiff key={f.path} file={f} userToggled={toggled.has(f.path)} onToggle={toggle} refs={secRefs} onOpen={onOpen} />)}
+        </div>
+      )}
+    </div>
+  );
+}