@spzxg/cli-ui 0.6.2 → 0.6.6

package/src/operator/node/TaskChanges.tsx

@@ -0,0 +1,530 @@
+"use client";
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Skel, ErrNote } from "./shared";
+
+interface DiffFile {
+  path: string;
+  status: string;
+  additions: number;
+  deletions: number;
+  binary: boolean;
+  patch: string;
+  truncated?: boolean;
+}
+interface DiffResp {
+  isolated: boolean;
+  reason?: string;
+  branch?: string;
+  baseLabel?: string;
+  merged_at?: number;
+  alreadyMerged?: boolean;
+  files: DiffFile[];
+  isDirty: boolean;
+  ahead: number;
+  error?: string;
+  mergeInProgress?: boolean; // a conflict resolution is staged, awaiting accept/discard
+  unresolved?: string[]; // files still flagged unmerged
+}
+interface MergeResp {
+  ok: boolean;
+  targetBranch: string;
+  committed: boolean;
+  alreadyMerged?: boolean;
+  conflicts?: string[];
+  error?: string;
+}
+// Returned by the AI-resolution callback wired from the parent (it runs the
+// /prepare step + streams the resolution turn into the transcript).
+export interface ResolveResult {
+  ok: boolean;
+  merged?: boolean; // trial merge was clean and landed immediately
+  error?: string;
+  conflicts?: string[];
+  binaryConflicts?: string[];
+}
+
+const STATUS_LABEL: Record<string, string> = { A: "新增", M: "修改", D: "删除", R: "重命名", "?": "未跟踪" };
+
+// The merge routes always answer JSON, but a layer above them can still hand
+// back HTML (a tunnel 502, a request killed at maxDuration) — parse defensively
+// so the banner shows the HTTP status, not JSON.parse's "Unexpected token '<'".
+const mergeJson = (r: Response): Promise<MergeResp> =>
+  r.json().catch(() => ({ ok: false, targetBranch: "", committed: false, error: `合并请求失败（HTTP ${r.status}）` }));
+
+// Last fetched diff per task, module-level so it survives unmounts. The rail
+// remounts this component on every collapse/expand, DIFF↔CONTEXT tab switch,
+// and chat/changes toggle — without a cache each of those pays a fresh
+// diff-endpoint round trip behind a skeleton. With it, reopening renders the
+// previous diff instantly and revalidates in the background.
+const diffCache = new Map<string, DiffResp>();
+
+// Strip the file-metadata preamble (diff --git / index / --- / +++) and return
+// just the hunk lines, the way GitHub shows them.
+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 "";
+}
+
+// Files past this many hunk lines start collapsed: a diff with many files near
+// the per-file patch cap would otherwise mount tens of thousands of line divs
+// in one commit and jank the main thread when the rail opens.
+const COLLAPSE_LINES = 400;
+
+// One file section. Memoized so the scroll tracker's setActive (which fires on
+// every scroll frame) re-renders only the overview list, not every hunk line
+// of every file.
+const FileDiff = memo(function FileDiff({
+  file: f,
+  userToggled,
+  onToggle,
+  refs,
+}: {
+  file: DiffFile;
+  userToggled: boolean; // user flipped this file away from its default state
+  onToggle: (path: string) => void;
+  refs: { current: Record<string, HTMLDivElement | null> };
+}) {
+  const lines = useMemo(() => (f.binary ? [] : hunkLines(f.patch)), [f]);
+  const big = lines.length > COLLAPSE_LINES;
+  const isCollapsed = userToggled ? !big : big;
+  // Accurate placeholder height for content-visibility while the section is
+  // offscreen-unrendered (header ≈34px, hunk lines 12px × 1.55 line-height),
+  // so offsetTop-based jump/scroll-spy stay truthful. `auto` pins the real
+  // size once rendered.
+  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>
+        <span className="tc-cnt">
+          <b className="add">+{f.additions}</b> <b className="del">−{f.deletions}</b>
+        </span>
+      </button>
+      {isCollapsed ? (
+        // A big file collapsed by default still needs to say why it's empty.
+        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 default function TaskChanges({
+  taskId,
+  running,
+  prUrl,
+  onMerged,
+  onPrCreated,
+  onResolveWithAI,
+}: {
+  taskId: string;
+  running?: boolean;
+  prUrl?: string; // GitHub PR already opened from this branch ("" / undefined = none)
+  onMerged?: () => void;
+  onPrCreated?: (url: string) => void;
+  onResolveWithAI?: (taskId: string) => Promise<ResolveResult>;
+}) {
+  const [data, setData] = useState<DiffResp | null>(() => diffCache.get(taskId) ?? null);
+  const [loading, setLoading] = useState(true);
+  const [merging, setMerging] = useState(false);
+  const [prBusy, setPrBusy] = useState(false);
+  const [prErr, setPrErr] = useState<string | null>(null);
+  const [resolving, setResolving] = useState(false);
+  const [manualOpen, setManualOpen] = useState(false);
+  const [binaryConflicts, setBinaryConflicts] = useState<string[]>([]);
+  const [mergeRes, setMergeRes] = useState<MergeResp | null>(null);
+  const [active, setActive] = useState<string | null>(null);
+  // Paths the user flipped away from their default state (expanded normally,
+  // collapsed for big files) — override semantics so a background revalidate
+  // doesn't reset the user's choices.
+  const [toggled, setToggled] = useState<Set<string>>(new Set());
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const secRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await fetch(`/api/tasks/${taskId}/diff`, { cache: "no-store" });
+      const j: DiffResp = await r.json();
+      if (!j.error) diffCache.set(taskId, j); // errors are worth retrying, not replaying
+      setData(j);
+    } catch (e) {
+      setData({ isolated: false, files: [], isDirty: false, ahead: 0, error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setLoading(false);
+    }
+  }, [taskId]);
+
+  useEffect(() => {
+    setMergeRes(null);
+    setPrErr(null);
+    setToggled(new Set());
+    setManualOpen(false);
+    setBinaryConflicts([]);
+    // Task switched without a remount: show the new task's cached diff (or the
+    // skeleton), never the previous task's stale files, while we revalidate.
+    setData(diffCache.get(taskId) ?? null);
+    load();
+  }, [taskId, load]);
+
+  // The diff moves while the agent works — refetch when a turn finishes so a
+  // just-written change appears without a manual Refresh (same trigger the
+  // SyncBanner uses). Only on the running→idle transition; mount already loads.
+  const wasRunning = useRef(running);
+  useEffect(() => {
+    if (wasRunning.current && !running) load();
+    wasRunning.current = running;
+  }, [running, load]);
+
+  // Track which file is at the top of the scroll area to highlight it in the list.
+  useEffect(() => {
+    const sc = scrollRef.current;
+    if (!sc || !data?.files?.length) return;
+    let raf = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const top = sc.scrollTop + 16;
+        let cur = data.files[0]?.path ?? null;
+        for (const f of data.files) {
+          const el = secRefs.current[f.path];
+          if (el && el.offsetTop <= top) cur = f.path;
+        }
+        setActive(cur);
+      });
+    };
+    sc.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => {
+      sc.removeEventListener("scroll", onScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [data]);
+
+  const jump = (path: string) => {
+    const el = secRefs.current[path];
+    const sc = scrollRef.current;
+    if (!el || !sc) return;
+    setActive(path);
+    // content-visibility placeholders make offsetTop an estimate until the
+    // sections near the target actually render, and that rendering lags the
+    // scroll by a frame or two — so instead of one smooth scroll to a
+    // coordinate that goes stale mid-flight, jump instantly and keep
+    // re-targeting for a few frames while the layout settles.
+    let frames = 0;
+    const settle = () => {
+      const top = Math.max(0, el.offsetTop - 4);
+      if (Math.abs(sc.scrollTop - top) > 1) sc.scrollTop = top;
+      if (++frames < 12) requestAnimationFrame(settle);
+    };
+    settle();
+  };
+  const toggle = useCallback(
+    (path: string) =>
+      setToggled((s) => {
+        const n = new Set(s);
+        n.has(path) ? n.delete(path) : n.add(path);
+        return n;
+      }),
+    []
+  );
+
+  const doMerge = async () => {
+    setMerging(true);
+    setMergeRes(null);
+    try {
+      const r = await fetch(`/api/tasks/${taskId}/merge`, { method: "POST" });
+      const res = await mergeJson(r);
+      setMergeRes(res);
+      if (res.ok) {
+        onMerged?.();
+        load();
+      }
+    } catch (e) {
+      setMergeRes({ ok: false, targetBranch: "", committed: false, error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setMerging(false);
+    }
+  };
+
+  // Review-on-GitHub path: push the branch + open (or update) a PR. The server
+  // commits any dirty work first and is idempotent, so a second click on an
+  // already-open PR just pushes the new commits to it.
+  const doCreatePr = async () => {
+    setPrBusy(true);
+    setPrErr(null);
+    try {
+      const r = await fetch(`/api/tasks/${taskId}/pr`, { method: "POST" });
+      const res: { ok?: boolean; url?: string; error?: string } = await r.json();
+      if (res.ok && res.url) onPrCreated?.(res.url);
+      else setPrErr(res.error || "无法创建 PR");
+    } catch (e) {
+      setPrErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setPrBusy(false);
+      load(); // the push may have committed dirty work — refresh the diff state
+    }
+  };
+
+  // Fix with AI: prepare the trial merge + stream a resolution turn (handled by
+  // the parent so it shows in the transcript), then reload into review state.
+  const doResolveWithAI = async () => {
+    if (!onResolveWithAI) return;
+    setResolving(true);
+    setManualOpen(false);
+    setMergeRes(null);
+    try {
+      const res = await onResolveWithAI(taskId);
+      setBinaryConflicts(res.binaryConflicts ?? []);
+      if (res.merged) onMerged?.();
+      else if (!res.ok)
+        setMergeRes({ ok: false, targetBranch: "", committed: false, error: res.error || "AI 解决冲突失败" });
+    } finally {
+      setResolving(false);
+      load(); // reload → mergeInProgress review state (Accept/Discard) or merged
+    }
+  };
+
+  // Accept a resolution: commit + land the (now clean) branch into the base.
+  const doComplete = async () => {
+    setMerging(true);
+    try {
+      const r = await fetch(`/api/tasks/${taskId}/merge/complete`, { method: "POST" });
+      const res = await mergeJson(r);
+      setMergeRes(res);
+      if (res.ok) onMerged?.();
+    } catch (e) {
+      setMergeRes({ ok: false, targetBranch: "", committed: false, error: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setMerging(false);
+      load();
+    }
+  };
+
+  // Discard a resolution: abort the trial merge, back to a clean worktree.
+  const doAbort = async () => {
+    setMerging(true);
+    try {
+      await fetch(`/api/tasks/${taskId}/merge/abort`, { method: "POST" });
+      setMergeRes(null);
+      setBinaryConflicts([]);
+    } finally {
+      setMerging(false);
+      load();
+    }
+  };
+
+  if (loading && !data) {
+    // Diffing shells out to git — sketch the toolbar + file list so the tab
+    // reads "computing the diff", not "empty".
+    return (
+      <div className="tc-root" aria-hidden>
+        <div className="tc-bar">
+          <Skel w={150} h={13} />
+          <Skel w={70} h={11} />
+          <span className="tc-spacer" />
+          <Skel w={130} h={26} r="var(--r-sm)" />
+        </div>
+        <div className="tc-scroll">
+          <div className="tc-list">
+            {[62, 44, 54].map((w, i) => (
+              <div key={i} className="skel-lrow">
+                <Skel w={13} h={13} r={4} />
+                <Skel w={`${w}%`} h={11} />
+                <span style={{ flex: 1 }} />
+                <Skel w={46} h={10} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (!data) return <div className="tc-note">暂无数据。</div>;
+  if (data.error) return <div className="tc-note"><ErrNote onRetry={load}>{data.error}</ErrNote></div>;
+  if (!data.isolated) return <div className="tc-note">{data.reason || "该任务没有独立分支。"}</div>;
+
+  const merged = !!data.merged_at || !!data.alreadyMerged;
+  const totalAdd = data.files.reduce((n, f) => n + f.additions, 0);
+  const totalDel = data.files.reduce((n, f) => n + f.deletions, 0);
+  const nothing = data.files.length === 0;
+  // Something to merge if the branch isn't fully in the base branch yet, or
+  // there are uncommitted edits in the worktree. `alreadyMerged` also catches
+  // merges done outside the app, so an already-landed branch won't re-offer.
+  const pending = !data.alreadyMerged || data.isDirty;
+  // A conflict resolution is staged in the worktree, awaiting accept/discard.
+  const reviewing = !!data.mergeInProgress;
+
+  return (
+    <div className="tc-root">
+      <div className="tc-bar">
+        <code className="tc-branch">{data.branch}</code>
+        <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 && <span className="tc-ahead">领先 {data.ahead} 个提交</span>}
+        <span className="tc-spacer" />
+        <button className="tc-btn" onClick={load} disabled={loading || merging || resolving}>
+          {loading ? "…" : "刷新"}
+        </button>
+        {reviewing ? (
+          <>
+            <button className="tc-btn" onClick={doAbort} disabled={merging || resolving}>
+              丢弃
+            </button>
+            <button className="tc-btn primary" onClick={doComplete} disabled={merging || resolving}>
+              {merging ? "合并中…" : "接受并合并"}
+            </button>
+          </>
+        ) : resolving ? (
+          <span className="tc-merged faint">正在用 AI 解决冲突…</span>
+        ) : (
+          <>
+            {merged && !pending && <span className="tc-merged">✓ 已合并 · 已是最新</span>}
+            {prUrl && (
+              <a className="tc-btn tc-pr" href={prUrl} target="_blank" rel="noreferrer" title="在 GitHub 上打开该任务的 Pull Request">
+                PR ↗
+              </a>
+            )}
+            {(data.ahead > 0 || data.isDirty) && (
+              <button
+                className="tc-btn"
+                onClick={doCreatePr}
+                disabled={prBusy || merging}
+                title={prUrl ? "把分支的新提交推送到已打开的 PR" : "把分支推送到 origin 并创建 GitHub PR"}
+              >
+                {prBusy ? (prUrl ? "推送中…" : "创建 PR 中…") : prUrl ? "更新 PR" : "创建 PR"}
+              </button>
+            )}
+            {pending && (
+              <button className="tc-btn primary" onClick={doMerge} disabled={merging || prBusy}>
+                {merging ? "合并中…" : merged ? "合并新改动" : `合并到 ${data.baseLabel}`}
+              </button>
+            )}
+            {!pending && !merged && !nothing && <span className="tc-merged faint">已是最新</span>}
+          </>
+        )}
+      </div>
+
+      {reviewing && (
+        <div className="tc-mergebar review">
+          冲突已解决 —— 请审阅下方的合并结果，然后选择<b>接受并合并</b>或<b>丢弃</b>。
+          {data.unresolved && data.unresolved.length > 0 && (
+            <div className="tc-conflicts">
+              {`⚠ 仍有 ${data.unresolved.length} 个文件未解决：\n${data.unresolved.join("\n")}`}
+            </div>
+          )}
+          {binaryConflicts.length > 0 && (
+            <div className="tc-conflicts">
+              {`二进制文件冲突保留了任务分支的版本 —— 请手动检查：\n${binaryConflicts.join("\n")}`}
+            </div>
+          )}
+        </div>
+      )}
+
+      {prErr && <div className="tc-mergebar bad">⚠ {prErr}</div>}
+
+      {mergeRes && (
+        <div className={`tc-mergebar ${mergeRes.ok ? "ok" : "bad"}`}>
+          {mergeRes.ok
+            ? mergeRes.alreadyMerged
+              ? `已与 ${mergeRes.targetBranch} 保持一致。`
+              : `已合并到 ${mergeRes.targetBranch}。`
+            : `⚠ ${mergeRes.error || "合并失败"}`}
+          {mergeRes.conflicts && mergeRes.conflicts.length > 0 && (
+            <div className="tc-conflicts">{mergeRes.conflicts.join("\n")}</div>
+          )}
+          {mergeRes.conflicts && mergeRes.conflicts.length > 0 && !reviewing && (
+            <>
+              <div className="tc-conflict-actions">
+                <button className="tc-btn" onClick={() => setManualOpen((v) => !v)} disabled={resolving || merging}>
+                  手动解决
+                </button>
+                {onResolveWithAI && (
+                  <button className="tc-btn primary" onClick={doResolveWithAI} disabled={resolving || merging}>
+                    {resolving ? "解决中…" : "用 AI 解决"}
+                  </button>
+                )}
+              </div>
+              {manualOpen && (
+                <div className="tc-manual">
+                  你可以在该任务的 worktree 中自行解决这些冲突（用内置终端）：把{" "}
+                  <code>{data.baseLabel}</code> 合并进分支，处理冲突标记，提交，然后再次点击「合并」。
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {nothing ? (
+        <div className="tc-note">该分支上还没有改动。</div>
+      ) : (
+        <div className="tc-scroll" ref={scrollRef}>
+          {/* overview list — click a file to jump to its diff */}
+          <div className="tc-list">
+            <div className="tc-list-h">
+              {data.files.length} 个文件有改动
+            </div>
+            {data.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>
+
+          {/* per-file diffs with sticky headers */}
+          {data.files.map((f) => (
+            <FileDiff key={f.path} file={f} userToggled={toggled.has(f.path)} onToggle={toggle} refs={secRefs} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/operator/node/TaskHero.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Icon } from "./icons";
+import { SLABEL, type TaskRow, type ProjectRow } from "./types";
+import { StatusDot } from "./shared";
+
+export function TaskHero({ task, project, onStart, onEdit, onSetSendContext, running, blockedBy }: { task: TaskRow; project: ProjectRow; onStart: () => void; onEdit: () => void; onSetSendContext: (v: boolean) => void; running: boolean; blockedBy?: string[] }) {
+  const carried = task.generation > 1;
+  const blocked = !!blockedBy?.length && !task.started;
+  const sendContext = task.send_context !== 0;
+  const statusLine = carried ? "全新上下文窗口 · 已带入摘要" : `${SLABEL[task.status]} · 尚未开始会话`;
+  return (
+    <div className="hero">
+      <div className="h-ic">{Icon.bolt()}</div>
+      <div className="h-status"><StatusDot status={task.status} /> {statusLine}</div>
+      <h2>{task.title}</h2>
+      {task.description && <p className="h-desc">{task.description}</p>}
+      <div className="h-prompt">
+        <div className="hp-h">智能体将收到的初始提示</div>
+        <div className="hp-b">
+          <span className="ctx-pre">↳ {sendContext ? `${project.name} 项目上下文` : "仅任务详情"}{carried ? " + 上一次会话摘要" : ""}（自动前置）</span>
+          <strong>{task.title}.</strong> {task.description}
+        </div>
+      </div>
+      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--ink-2)", cursor: running ? "not-allowed" : "pointer" }}
+        title="取消勾选则不发送已保存的项目上下文。任务详情与编排工具始终会包含在内。">
+        <input type="checkbox" checked={sendContext} disabled={running} onChange={(e) => onSetSendContext(e.target.checked)} />
+        向智能体发送已保存的项目上下文
+      </label>
+      {blocked && (task.auto_start ? (
+        <div className="hero-blocked auto" title={`以下任务完成后自动开始：${blockedBy!.join("、")}`}>
+          {Icon.bolt()} 已排队 —— {blockedBy!.length === 1 ? <strong>{blockedBy![0]}</strong> : `${blockedBy!.length} 个任务`}完成后会自动开始。可编辑任务修改此设置。
+        </div>
+      ) : (
+        <div className="hero-blocked" title={`以下任务完成前受阻：${blockedBy!.join("、")}`}>
+          {Icon.lock()} 需等 {blockedBy!.length === 1 ? <strong>{blockedBy![0]}</strong> : `${blockedBy!.length} 个任务`}完成后才能开始。可编辑任务修改其依赖。
+        </div>
+      ))}
+      <div style={{ display: "flex", gap: 10 }}>
+        <button className="btn btn-accent" style={{ height: 38, padding: "0 20px", fontSize: 14 }} onClick={onStart} disabled={running || blocked} title={blocked ? `以下任务完成前受阻：${blockedBy!.join("、")}` : undefined}>
+          {Icon.play()} {running ? "启动中…" : blocked ? (task.auto_start ? "已排队" : "受阻") : "开始会话"}
+        </button>
+        <button className="btn btn-line" style={{ height: 38, padding: "0 16px", fontSize: 14 }} onClick={onEdit} disabled={running} title="开始前编辑标题与描述">
+          {Icon.edit()} 编辑
+        </button>
+      </div>
+    </div>
+  );
+}
+