@spzxg/cli-ui 0.6.1 → 0.6.5

package/src/operator/node/Layout.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { TerminalView } from "./Terminal";
+import { Skel } from "./shared";
+
+// Skeleton stand-in for one task card (tasks column, boot skeleton). Width
+// varies per index so the stack doesn't read as a repeated stamp.
+export function TaskCardSkeleton({ i = 0 }: { i?: number }) {
+  const widths = [58, 42, 66, 38];
+  return (
+    <div className="task" style={{ cursor: "default" }} aria-hidden>
+      <div className="task-top">
+        <Skel w={9} h={9} r="50%" />
+        <Skel w={`${widths[i % widths.length]}%`} h={12} />
+        <span style={{ flex: 1 }} />
+        <Skel w={34} h={10} />
+      </div>
+      <div className="task-foot">
+        <Skel w={120} h={9} />
+      </div>
+    </div>
+  );
+}
+
+// First-paint placeholder for the whole workspace, shown while the initial
+// project fetch is in flight so the three columns don't flash empty. Mirrors
+// the real column chrome (headers, banner, cards) so the swap to live data
+// doesn't jump.
+export function BootSkeleton({ mobile }: { mobile?: boolean }) {
+  const projectsCol = (
+    <div className="col col-projects" aria-hidden>
+      <div className="col-head"><span className="ch-title">项目</span></div>
+      <div className="proj-list">
+        {[64, 48, 56].map((w, i) => (
+          <div key={i} className="proj" style={{ cursor: "default" }}>
+            <Skel w={30} h={30} r={9} />
+            <div className="pmeta" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              <Skel w={`${w}%`} h={11} />
+              <Skel w={`${w - 20}%`} h={8} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+  if (mobile) return projectsCol;
+  return (
+    <>
+      {projectsCol}
+      <div className="col col-tasks" aria-hidden>
+        <div className="proj-banner">
+          <div className="pb-row">
+            <Skel w={34} h={34} r={10} />
+            <Skel w={140} h={15} />
+          </div>
+          <Skel w="100%" h={40} r="var(--r)" style={{ marginTop: 10 }} />
+        </div>
+        <div className="task-scroll">
+          {[0, 1, 2].map((i) => <TaskCardSkeleton key={i} i={i} />)}
+        </div>
+      </div>
+      <div className="col col-session" aria-hidden>
+        <div className="empty" style={{ margin: "auto" }}>
+          <span className="typing"><i /><i /><i /></span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+// Drag-to-resize handle sitting between two columns. By default it measures the
+// column to its left (previousElementSibling) so the new width is independent of
+// whatever sits further left — collapsed rails, varying project widths, etc.
+// With side="right" it instead sizes the column to its right (the rail), pinning
+// to that column's right edge so the width grows as you drag left. Double-click
+// snaps back to the default width.
+export function ColResize({ min, max, onWidth, onReset, side = "left" }: { min: number; max: number; onWidth: (w: number) => void; onReset: () => void; side?: "left" | "right" }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  // Keep the latest onWidth in a ref so the window listeners can be attached
+  // exactly once. Re-subscribing on every render (onWidth is a fresh closure)
+  // tears the listeners down mid-drag and drops mousemove events.
+  const onWidthRef = useRef(onWidth);
+  onWidthRef.current = onWidth;
+  useEffect(() => {
+    const move = (e: MouseEvent) => {
+      if (!dragging.current) return;
+      if (side === "right") {
+        const col = ref.current?.nextElementSibling as HTMLElement | null;
+        if (!col) return;
+        const right = col.getBoundingClientRect().right;
+        onWidthRef.current(Math.max(min, Math.min(max, Math.round(right - e.clientX))));
+        return;
+      }
+      const col = ref.current?.previousElementSibling as HTMLElement | null;
+      if (!col) return;
+      const left = col.getBoundingClientRect().left;
+      onWidthRef.current(Math.max(min, Math.min(max, Math.round(e.clientX - left))));
+    };
+    const up = () => {
+      if (!dragging.current) return;
+      dragging.current = false;
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+    return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); };
+  }, [min, max, side]);
+  // Zero-width seam marker; the actual grab target is an absolutely-positioned
+  // bar that straddles the border with a comfortable hit width and sits above the
+  // neighboring columns (no negative-margin overlap that could swallow clicks).
+  return (
+    <div ref={ref} className="col-resize" aria-hidden>
+      <span
+        className="col-resize-bar"
+        title="拖动调整宽度 · 双击恢复默认"
+        onMouseDown={() => { dragging.current = true; document.body.style.userSelect = "none"; document.body.style.cursor = "col-resize"; }}
+        onDoubleClick={onReset}
+      />
+    </div>
+  );
+}
+
+// Collapsed sidebar — a slim vertical rail that reclaims a panel's space for the
+// chat while leaving a one-click way to bring it back.
+export function ColRail({ label, task, right, onExpand }: { label: string; task?: boolean; right?: boolean; onExpand: () => void }) {
+  return (
+    <button className={`col-rail${task ? " rail-task" : ""}${right ? " rail-right" : ""}`} onClick={onExpand} title={`显示「${label}」面板`}>
+      {Icon.chevRight()}
+      <span className="rail-label">{label}</span>
+    </button>
+  );
+}
+
+export function TerminalDrawer({ cwd, port, taskDir, taskTitle, visible, height, onClose, onResize }: { cwd: string; port?: number; taskDir?: string; taskTitle?: string; visible: boolean; height: number; onClose: () => void; onResize: (h: number) => void }) {
+  const dragging = useRef(false);
+  // Remount key for the terminal — bumping it kills the current shell and spawns a fresh one.
+  const [epoch, setEpoch] = useState(0);
+  // Scope pin: null = project working dir; otherwise the worktree the user
+  // explicitly switched to. Pinned (not derived from the selected task) so
+  // clicking around task cards can't respawn a shell that's running something —
+  // TerminalView tears down and restarts the shell whenever its cwd changes.
+  const [pinned, setPinned] = useState<{ path: string; title: string } | null>(null);
+  const effCwd = pinned ? pinned.path : cwd;
+  useEffect(() => {
+    const move = (e: MouseEvent) => {
+      if (!dragging.current) return;
+      const h = window.innerHeight - e.clientY;
+      onResize(Math.max(140, Math.min(h, Math.round(window.innerHeight * 0.78))));
+    };
+    const up = () => { dragging.current = false; document.body.style.userSelect = ""; };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+    return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); };
+  }, [onResize]);
+
+  return (
+    <div className={`term-drawer${visible ? "" : " collapsed"}`} style={visible ? { height } : undefined}>
+      <div className="term-resize" onMouseDown={() => { dragging.current = true; document.body.style.userSelect = "none"; }} />
+      <div className="term-bar">
+        {Icon.terminal()}
+        <span className="term-title">终端</span>
+        <div className="bseg" aria-label="终端工作目录">
+          <button
+            className={pinned ? "" : "on"}
+            title="在项目的工作目录（主检出）中打开 shell"
+            onClick={() => setPinned(null)}
+          >项目</button>
+          <button
+            className={pinned ? "on" : ""}
+            disabled={!taskDir}
+            title={taskDir
+              ? `在所选任务的 worktree 中打开 shell${pinned && pinned.path !== taskDir ? `（当前固定在 ${pinned.title} —— 点击切换）` : ""}`
+              : "请选择一个已开始的任务 —— 任务在首轮运行时才会创建 worktree"}
+            onClick={() => { if (taskDir && pinned?.path !== taskDir) setPinned({ path: taskDir, title: taskTitle || "任务" }); }}
+          >任务</button>
+        </div>
+        <span className="term-cwd" title={effCwd}>{pinned ? `${pinned.title}  ·  ${pinned.path}` : (cwd || "~（该项目未设置工作目录）")}{port ? `  ·  PORT=${port}` : ""}</span>
+        <span style={{ flex: 1 }} />
+        <button className="icon-btn" onClick={() => setEpoch((e) => e + 1)} title="重启终端（结束当前 shell 并启动新的）">{Icon.clear()}</button>
+        <button className="icon-btn" onClick={onClose} title="隐藏终端（shell 会继续运行）">{Icon.chevDown()}</button>
+      </div>
+      {/* keep TerminalView mounted even when collapsed so long-running processes (npm run dev) survive */}
+      <TerminalView key={epoch} cwd={effCwd} port={port} />
+    </div>
+  );
+}

package/src/operator/node/Markdown.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { memo, useContext } from "react";
+import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import type { ComponentProps } from "react";
+import { inlineFilePath } from "../../ui/fileLinks";
+import { OperatorBoardContext } from "./boardInteraction";
+import { FileLinkContext, localFilePath, rewriteFileHref, rewriteFileSrc } from "./fileLinks";
+
+// Links to local files (the agent's report.md, /abs/path/out.html, …) open
+// through the task's file route when rendered inside a task (FileLinkContext);
+// everything else — and every link outside a task — is left as written.
+function MdLink({ href, ...props }: ComponentProps<"a">) {
+  const scope = useContext(FileLinkContext);
+  const local = rewriteFileHref(scope, href);
+  const open = useContext(OperatorBoardContext);
+  const path = localFilePath(href, scope?.baseDir);
+  return <a {...props} href={local ?? href} target="_blank" rel="noreferrer" title={local ? `打开文件：${href}` : props.title}
+    onClick={event=>{props.onClick?.(event);if(event.defaultPrevented||event.button!==0||event.metaKey||event.ctrlKey||event.shiftKey||event.altKey)return;
+      if(scope&&path&&open?.({kind:'file',taskId:scope.taskId,path}))event.preventDefault();}} />;
+}
+
+function MdCode({children, ...props}: ComponentProps<"code">) {
+  const path=inlineFilePath(children);
+  return path ? <MdLink href={path}><code {...props}>{children}</code></MdLink> : <code {...props}>{children}</code>;
+}
+
+function MdImg({ src, alt, ...props }: ComponentProps<"img">) {
+  const scope = useContext(FileLinkContext);
+  const local = typeof src === "string" ? rewriteFileSrc(scope, src) : null;
+  // eslint-disable-next-line @next/next/no-img-element
+  return <img {...props} alt={alt ?? ""} src={local ?? src} />;
+}
+
+// The default transform blanks any non-web scheme; let file: (and C:\ paths)
+// through so MdLink can map them to the task's file route.
+const urlTransform = (url: string) => (/^file:/i.test(url) || /^[a-z]:[\\/]/i.test(url) ? url : defaultUrlTransform(url));
+
+// Renders Claude's markdown output: headings, lists, tables, fenced code blocks
+// (syntax-highlighted), inline code, links. Used for assistant + user messages.
+//
+// Perf: `detect: false` — only fenced blocks with an explicit language get
+// highlighted; hljs auto-detection ran over every bare code block and was a
+// hot spot during streaming turns. Memoized so messages whose text hasn't
+// changed skip the whole markdown parse + highlight on transcript re-renders.
+export const Markdown = memo(function Markdown({ children }: { children: string }) {
+  return (
+    <div className="md">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
+        components={{ a: MdLink, img: MdImg, code: MdCode }}
+        urlTransform={urlTransform}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+});

package/src/operator/node/Modal.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Priority } from "./protocol/types";
+import { Icon } from "./icons";
+import { jget, jsend } from "./api";
+import { SLABEL, type FsListing, type TaskRow } from "./types";
+import { StatusDot, Skel, ErrNote } from "./shared";
+
+// Tracks open modals so Escape only dismisses the topmost one when modals stack
+// (e.g. the folder picker opened over the project-context editor).
+const modalStack: symbol[] = [];
+
+// `title` takes a node, not just a string, so a modal can hang a control off its
+// heading (the project-context modal puts a copy-id chip there). Plain strings
+// still work unchanged.
+export function Modal({ title, sub, onClose, children, footer, width }: { title: React.ReactNode; sub?: React.ReactNode; onClose: () => void; children: React.ReactNode; footer?: React.ReactNode; width?: number }) {
+  useEffect(() => {
+    const token = Symbol();
+    modalStack.push(token);
+    const esc = (e: KeyboardEvent) => { if (e.key === "Escape" && modalStack[modalStack.length - 1] === token) onClose(); };
+    window.addEventListener("keydown", esc);
+    return () => {
+      window.removeEventListener("keydown", esc);
+      const i = modalStack.indexOf(token);
+      if (i >= 0) modalStack.splice(i, 1);
+    };
+  }, [onClose]);
+  return (
+    <div className="scrim" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      <div className="modal" style={width ? { width } : undefined}>
+        <div className="modal-h">
+          <div style={{ flex: 1 }}>
+            <div className="m-title">{title}</div>
+            {sub && <div className="m-sub" style={{ marginTop: 3 }}>{sub}</div>}
+          </div>
+          <button className="modal-close" onClick={onClose}>{Icon.x()}</button>
+        </div>
+        <div className="modal-b">{children}</div>
+        {footer && <div className="modal-f">{footer}</div>}
+      </div>
+    </div>
+  );
+}
+
+export function FolderPicker({ initial, onClose, onPick }: { initial?: string; onClose: () => void; onPick: (path: string) => void }) {
+  const [data, setData] = useState<FsListing | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  // Last path requested — so Retry after a failed listing re-asks for the same
+  // folder rather than resetting the whole picker to its initial directory.
+  const lastReq = useRef<string | undefined>(undefined);
+  const load = useCallback((p?: string) => {
+    lastReq.current = p;
+    setLoading(true);
+    setError(null);
+    jget<FsListing>(`/api/fs${p ? `?path=${encodeURIComponent(p)}` : ""}`)
+      .then((d) => setData(d))
+      .catch((e) => setError(e instanceof Error ? e.message : String(e)))
+      .finally(() => setLoading(false));
+  }, []);
+  useEffect(() => { load(initial && initial.trim() ? initial : undefined); }, [load, initial]);
+
+  return (
+    <Modal title="选择工作目录" sub="选择智能体执行任务的文件夹" onClose={onClose} width={580}
+      footer={<>
+        <span className="spacer" />
+        <button className="btn btn-ghost" onClick={onClose}>取消</button>
+        <button className="btn btn-accent" disabled={!data} onClick={() => data && onPick(data.path)}>{Icon.check()} 使用此文件夹</button>
+      </>}>
+      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+        <button className="btn btn-line" disabled={!data?.parent} onClick={() => data?.parent && load(data.parent)} title="上一级">{Icon.chevDown({ style: { transform: "rotate(180deg)" } })} 上一级</button>
+        <button className="btn btn-line" onClick={() => load(data?.home)} title="前往主目录">{Icon.folder()} 主目录</button>
+        <div className="ctx-mono" style={{ flex: 1, minWidth: 0, fontSize: 11.5, color: "var(--ink-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={data?.path}>{data?.path ?? "…"}</div>
+      </div>
+      {error && <ErrNote style={{ marginBottom: 10 }} onRetry={() => load(lastReq.current)}>{error}</ErrNote>}
+      <div style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)", maxHeight: 320, overflowY: "auto" }}>
+        {loading && [56, 42, 64, 38, 50].map((w, i) => (
+          <div key={i} className="skel-lrow">
+            <Skel w={15} h={15} r={4} />
+            <Skel w={`${w}%`} h={11} />
+          </div>
+        ))}
+        {!loading && data && data.entries.length === 0 && <div className="hlp" style={{ padding: "14px 14px" }}>此处没有子文件夹。</div>}
+        {!loading && data && data.entries.map((e) => (
+          <button key={e.path} onClick={() => load(e.path)} title={e.path}
+            style={{ display: "flex", alignItems: "center", gap: 9, width: "100%", textAlign: "left", padding: "9px 13px", borderBottom: "1px solid var(--line)", color: "var(--ink)", fontSize: 13.5 }}>
+            <span style={{ color: "var(--accent)", display: "inline-flex" }}>{Icon.folder()}</span>
+            <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{e.name}</span>
+            <span style={{ color: "var(--ink-4)", display: "inline-flex" }}>{Icon.chevRight()}</span>
+          </button>
+        ))}
+      </div>
+    </Modal>
+  );
+}
+
+// "Browse" control for a working-dir field. Tries the OS-native folder chooser
+// first (search, new-folder, Finder favorites); silently falls back to the
+// in-app FolderPicker when no native dialog is available (non-macOS / headless)
+// or the call errors. Cancelling the native dialog is a no-op.
+export function BrowseDirButton({ initial, onPick }: { initial?: string; onPick: (p: string) => void }) {
+  const [browsing, setBrowsing] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const browse = useCallback(async () => {
+    setBusy(true);
+    try {
+      const r = await jsend<{ path?: string; canceled?: boolean; unsupported?: boolean }>("/api/fs/pick-dir", "POST", { initial: initial || "" });
+      if (r.path) onPick(r.path);
+      else if (r.unsupported) setBrowsing(true);
+      // canceled → do nothing
+    } catch {
+      setBrowsing(true); // network/route failure → in-app fallback
+    } finally {
+      setBusy(false);
+    }
+  }, [initial, onPick]);
+  return (
+    <>
+      <button type="button" className="btn btn-line" style={{ flex: "none" }} disabled={busy} onClick={browse} title="浏览文件夹">{Icon.folder()} {busy ? "浏览…" : "浏览"}</button>
+      {browsing && <FolderPicker initial={initial} onClose={() => setBrowsing(false)} onPick={(p) => { onPick(p); setBrowsing(false); }} />}
+    </>
+  );
+}
+
+export function PrioritySeg({ value, onChange }: { value: Priority; onChange: (p: Priority) => void }) {
+  const opts: { key: Priority; label: string; color: string }[] = [
+    { key: "lo", label: "低", color: "var(--ink-4)" },
+    { key: "med", label: "中", color: "var(--amber)" },
+    { key: "hi", label: "高", color: "var(--red)" },
+  ];
+  return (
+    <div className="seg">
+      {opts.map((o) => (
+        <button key={o.key} className={value === o.key ? "on" : ""} onClick={() => onChange(o.key)}>
+          <span className="pdot" style={{ background: o.color }} />{o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+// "Blocked by" picker — choose the tasks that must reach Done before this one can
+// start. Candidates are the other tasks in the project (self excluded by caller).
+// With any blockers selected, offers the per-task "Start when unblocked" opt-in:
+// the last blocker flipping to Done launches this task's first turn by itself.
+export function DepPicker({ candidates, value, onChange, autoStart, onAutoStart }: {
+  candidates: TaskRow[]; value: string[]; onChange: (ids: string[]) => void;
+  autoStart: boolean; onAutoStart: (on: boolean) => void;
+}) {
+  const toggle = (id: string) => onChange(value.includes(id) ? value.filter((x) => x !== id) : [...value, id]);
+  return (
+    <div className="field">
+      <div className="lab">前置依赖 <span className="opt">— 必须先完成</span></div>
+      {candidates.length === 0 ? (
+        <div className="hlp">该项目暂无其他任务。</div>
+      ) : (
+        <div className="dep-list">
+          {candidates.map((c) => (
+            <label key={c.id} className={`dep-row ${value.includes(c.id) ? "on" : ""}`}>
+              <input type="checkbox" checked={value.includes(c.id)} onChange={() => toggle(c.id)} />
+              <StatusDot status={c.status} />
+              <span className="dep-title">{c.title}</span>
+              <span className="dep-status">{SLABEL[c.status]}</span>
+            </label>
+          ))}
+        </div>
+      )}
+      {value.length > 0 ? (
+        <label className="dep-autostart" title="当上面最后一个前置任务标记为已完成时，本任务会自动发送初始提示">
+          <input type="checkbox" checked={autoStart} onChange={(e) => onAutoStart(e.target.checked)} />
+          解除阻塞后自动开始 <span className="opt">— 所有前置任务完成后会自动启动会话</span>
+        </label>
+      ) : (
+        <div className="hlp">所选任务全部标记为已完成前，本任务无法开始。</div>
+      )}
+    </div>
+  );
+}

package/src/operator/node/NeedsYouMenu.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Popover, LoadNote } from "./shared";
+import { jget } from "./api";
+import { waitedFor } from "./format";
+import type { NeedsYouRow } from "./types";
+
+// The titlebar "N need you" dropdown. Replaces the old click-to-jump pill: clicking
+// the pill now opens this list of every task waiting on the user across all active
+// projects, each row showing its project, title, and "waiting for <duration>" age.
+// Picking a row jumps straight to that task (in its project). Rows are fetched fresh
+// on open so the ages and membership are always current; the longest-waiting task
+// sits at the top (server orders by waiting_since ASC).
+export function NeedsYouMenu({ onJump, onClose }: { onJump: (projectId: string, taskId: string) => void; onClose: () => void }) {
+  const [rows, setRows] = useState<NeedsYouRow[] | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    jget<{ tasks: NeedsYouRow[] }>("/api/needs-you")
+      .then((d) => { if (alive) setRows(d.tasks); })
+      .catch(() => { if (alive) setRows([]); });
+    return () => { alive = false; };
+  }, []);
+
+  return (
+    <Popover onClose={onClose}>
+      <div className="ny-menu">
+        <div className="pop-sec">等待你处理</div>
+        {rows === null ? (
+          <LoadNote style={{ padding: "10px 14px 14px" }}>正在检查等待中的任务…</LoadNote>
+        ) : rows.length === 0 ? (
+          <div className="ny-empty">当前没有等待处理的任务。</div>
+        ) : (
+          rows.map((r) => (
+            <button
+              key={r.id}
+              className="ny-row"
+              onClick={() => { onJump(r.project_id, r.id); onClose(); }}
+            >
+              <span className="ny-proj" style={{ background: r.project_color }} title={r.project_name}>
+                {(r.project_icon || r.project_name[0] || "?").toUpperCase()}
+              </span>
+              <span className="ny-text">
+                <span className="ny-title">{r.title}</span>
+                <span className="ny-sub">{r.project_name} · 已等待 {waitedFor(r.waiting_since)}</span>
+              </span>
+            </button>
+          ))
+        )}
+      </div>
+    </Popover>
+  );
+}