@spzxg/cli-ui 0.6.1 → 0.6.5

package/src/operator/node/TasksColumn.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Icon } from "./icons";
+import { isAwaiting, relTime } from "./format";
+import { SLABEL, AWAIT_LABEL, SEARCH_MIN, type ProjectRow, type TaskRow, type AgentsBundle, type TaskView } from "./types";
+import { agentLabel } from "./agents";
+import { StatusDot, PriPill, SearchBar, AgentBadge } from "./shared";
+import { TaskCardSkeleton } from "./Layout";
+import { TaskBoard } from "./TaskBoard";
+import { downloadExport } from "./api";
+
+function TaskCard({ task, agents, selected, running, blockedBy, onSelect }: { task: TaskRow; agents: AgentsBundle; selected: boolean; running: boolean; blockedBy?: string[]; onSelect: () => void }) {
+  const sessionCount = task.started ? task.generation : Math.max(0, task.generation - 1);
+  const awaiting = isAwaiting(task);
+  const blocked = !!blockedBy?.length && !task.started;
+  // Awaiting wins over running: a turn parked on a question is live but really
+  // waiting on you, so it should read "waiting", not "working".
+  const activity = awaiting ? `等你处理 · ${relTime(task.updated_at)}`
+    : running ? "运行中 · 工作中"
+    : task.status === "done" ? `已完成 · ${relTime(task.updated_at)}`
+    : task.status === "cancelled" ? `已取消 · ${relTime(task.updated_at)}`
+    : task.started ? relTime(task.updated_at) : "未开始";
+  return (
+    <button className={`task ${selected ? "sel" : ""} ${awaiting ? "awaiting" : ""}`} onClick={onSelect}>
+      <div className="task-top">
+        <StatusDot status={task.status} running={running} awaiting={awaiting} />
+        <span className="ttitle">{task.title}</span>
+        <span className={`slabel ${awaiting ? "await" : ""}`}>{awaiting ? AWAIT_LABEL : SLABEL[task.status]}</span>
+        <AgentBadge label={agentLabel(agents, task.agent)} multi={agents.agents.length > 1} />
+        <PriPill p={task.priority} />
+      </div>
+      {blocked && (task.auto_start ? (
+        // Queued to auto-start ≠ plain blocked: this one launches itself the
+        // moment its last blocker is marked done.
+        <div className="blocked-chip auto" title={`以下任务完成后自动开始：${blockedBy!.join("、")}`}>
+          {Icon.bolt()} {blockedBy!.length === 1 ? blockedBy![0] : `${blockedBy!.length} 个任务`}完成后自动开始
+        </div>
+      ) : (
+        <div className="blocked-chip" title={`以下任务完成前受阻：${blockedBy!.join("、")}`}>
+          {Icon.lock()} 受阻于 {blockedBy!.length === 1 ? blockedBy![0] : `${blockedBy!.length} 个任务`}
+        </div>
+      ))}
+      {task.description && <div className="tdesc">{task.description}</div>}
+      <div className="task-foot">
+        <span className="activity">{awaiting ? <span style={{ color: "var(--blue)" }}>●</span> : running ? <span style={{ color: "var(--amber)" }}>●</span> : null}{activity}</span>
+        <span className="spacer" />
+        {sessionCount > 0 && <span className="activity">{sessionCount} 个会话</span>}
+      </div>
+    </button>
+  );
+}
+
+function TaskGroup({ label, tasks, agents, selTaskId, running, blockedBy, onSelect, accent, collapsible, collapsed, onToggle }: { label: string; tasks: TaskRow[]; agents: AgentsBundle; selTaskId: string | null; running: Set<string>; blockedBy: Map<string, string[]>; onSelect: (id: string) => void; accent?: boolean; collapsible?: boolean; collapsed?: boolean; onToggle?: () => void }) {
+  if (tasks.length === 0) return null;
+  if (collapsible) {
+    return (
+      <>
+        <button className={`task-group-h tgh-btn ${collapsed ? "is-collapsed" : ""}`} onClick={onToggle} title={`${collapsed ? "展开" : "折叠"}「${label}」任务`}>
+          {Icon.chevDown({ className: "tgh-chev" })}
+          {label} <span className="gcount">{tasks.length}</span><span className="gline" />
+        </button>
+        {!collapsed && tasks.map((t) => <TaskCard key={t.id} task={t} agents={agents} selected={t.id === selTaskId} running={running.has(t.id)} blockedBy={blockedBy.get(t.id)} onSelect={() => onSelect(t.id)} />)}
+      </>
+    );
+  }
+  return (
+    <>
+      <div className={`task-group-h ${accent ? "needs-you" : ""}`}>{label} <span className="gcount">{tasks.length}</span><span className="gline" /></div>
+      {tasks.map((t) => <TaskCard key={t.id} task={t} agents={agents} selected={t.id === selTaskId} running={running.has(t.id)} blockedBy={blockedBy.get(t.id)} onSelect={() => onSelect(t.id)} />)}
+    </>
+  );
+}
+
+// Per-group collapsed flag, persisted in localStorage under `key`.
+function useCollapsed(key: string, def: boolean) {
+  const [collapsed, setCollapsed] = useState(def);
+  useEffect(() => {
+    try {
+      const v = localStorage.getItem(key);
+      setCollapsed(v === null ? def : v === "1");
+    } catch {}
+  }, [key, def]);
+  const toggle = () => setCollapsed((c) => {
+    const next = !c;
+    try { localStorage.setItem(key, next ? "1" : "0"); } catch {}
+    return next;
+  });
+  return [collapsed, toggle] as const;
+}
+
+export function TasksColumn({ project, agents, tasks, suggested, selTaskId, running, blockedBy, width, loading, view, onSetView, onMoveTask, onSelectTask, onNewTask, onEditContext, onShowSessions, onShowRecap, onEditTask, onStartSuggestion, onAcceptSuggestion, onDismissSuggestion, onCollapse, mobile, onBack }: {
+  project: ProjectRow; agents: AgentsBundle; tasks: TaskRow[]; suggested: TaskRow[]; selTaskId: string | null; running: Set<string>; blockedBy: Map<string, string[]>; width: number; loading?: boolean;
+  view: TaskView; onSetView: (v: TaskView) => void;
+  onMoveTask: (id: string, patch: Partial<Pick<TaskRow, "status" | "suggested">>, orderedIds: string[]) => void;
+  onSelectTask: (id: string) => void; onNewTask: () => void; onEditContext: () => void; onShowSessions: () => void; onShowRecap: () => void;
+  onEditTask: (id: string) => void; onCollapse: () => void;
+  onStartSuggestion: (id: string) => void; onAcceptSuggestion: (id: string) => void; onDismissSuggestion: (id: string) => void;
+  mobile?: boolean; onBack?: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  // Minimize the Done/Cancelled groups so a long backlog of finished (or
+  // abandoned) tasks doesn't force scrolling past them. Per-project, persisted
+  // so the choice sticks across reloads. Cancelled starts collapsed — it's the
+  // graveyard, not the working set.
+  const [doneCollapsed, toggleDone] = useCollapsed(`orch_done_collapsed_${project.id}`, false);
+  const [cancelledCollapsed, toggleCancelled] = useCollapsed(`orch_cancelled_collapsed_${project.id}`, true);
+  const q = query.trim().toLowerCase();
+  const match = (t: TaskRow) => !q || t.title.toLowerCase().includes(q) || (t.description ?? "").toLowerCase().includes(q);
+  const shown = tasks.filter(match);
+  const shownSuggested = suggested.filter(match);
+  const needsYou = shown.filter((t) => isAwaiting(t));
+  const groups = {
+    a: shown.filter((t) => t.status === "in_progress" && !isAwaiting(t)),
+    h: shown.filter((t) => t.status === "on_hold" && !isAwaiting(t)),
+    r: shown.filter((t) => t.status === "not_started"),
+    g: shown.filter((t) => t.status === "done").sort((a, b) => b.updated_at - a.updated_at),
+    x: shown.filter((t) => t.status === "cancelled").sort((a, b) => b.updated_at - a.updated_at),
+  };
+  const canSearch = tasks.length + suggested.length >= SEARCH_MIN;
+  const noMatches = q && shown.length === 0 && shownSuggested.length === 0;
+  return (
+    <div className="col col-tasks" style={{ flexBasis: width }}>
+      <div className="proj-banner">
+        <div className="pb-row">
+          {onBack && <button className="mobile-back" onClick={onBack} title="返回项目列表" aria-label="返回项目列表">{Icon.chevRight({ style: { transform: "rotate(180deg)" } })}</button>}
+          <button className="pb-home" onClick={onShowRecap} title="项目回顾 / 概览">
+            <span className="pb-pic" style={{ background: project.color }}>{project.name[0]}</span>
+            <span className="pb-name">{project.name}</span>
+          </button>
+          <button className="btn btn-line btn-sm" onClick={onShowSessions} title="该项目下运行过的智能体会话">{Icon.clock()} 会话</button>
+          <button className="btn btn-line btn-sm" onClick={onNewTask}>{Icon.plus()} 任务</button>
+          <div className="view-toggle" role="tablist" aria-label="任务布局">
+            <button className={view === "list" ? "on" : ""} role="tab" aria-selected={view === "list"} title="列表视图" onClick={() => onSetView("list")}>{Icon.list()}</button>
+            <button className={view === "board" ? "on" : ""} role="tab" aria-selected={view === "board"} title="看板视图" onClick={() => onSetView("board")}>{Icon.board()}</button>
+          </div>
+          <button className="icon-btn" onClick={() => downloadExport(`/api/projects/${project.id}/export`)} title="导出该项目所有任务的完整执行过程（含耗时与 token 统计，Markdown）" aria-label="导出项目执行过程">{Icon.download()}</button>
+          {!mobile && <button className="icon-btn" onClick={onCollapse} title="隐藏任务面板">{Icon.chevRight({ style: { transform: "rotate(180deg)" } })}</button>}
+        </div>
+        <button className="pb-ctx" onClick={onEditContext} title="编辑项目上下文">
+          <div className={`ctx-txt ${project.context ? "" : "empty-ctx"}`}>
+            {project.context || "添加项目上下文 —— 项目简介、技术栈与规范，会附加到每个任务前。"}
+          </div>
+          <div className="ctx-edit">{Icon.edit()} 上下文</div>
+        </button>
+      </div>
+      {canSearch && <SearchBar value={query} onChange={setQuery} placeholder="搜索任务…" />}
+      {loading ? (
+        // The list in state is still the previous project's — skeleton cards
+        // instead of a flash of the wrong tasks (or a false "No tasks yet").
+        <div className="scroll">
+          <div className="task-scroll">
+            {[0, 1, 2].map((i) => <TaskCardSkeleton key={i} i={i} />)}
+          </div>
+        </div>
+      ) : view === "board" ? (
+        <div className="board-wrap">
+          {noMatches && <div className="search-empty">没有匹配“{query.trim()}”的任务。</div>}
+          <TaskBoard
+            tasks={shown} suggested={shownSuggested} agents={agents} selTaskId={selTaskId}
+            running={running} blockedBy={blockedBy} canDrag={!q}
+            onSelect={onSelectTask} onEditTask={onEditTask} onMove={onMoveTask}
+            onStartSuggestion={onStartSuggestion} onAcceptSuggestion={onAcceptSuggestion} onDismissSuggestion={onDismissSuggestion}
+          />
+        </div>
+      ) : (
+      <div className="scroll">
+        <div className="task-scroll">
+          {tasks.length === 0 && <div className="empty" style={{ padding: "30px 16px" }}><div className="e-t">还没有任务</div><div className="e-s">创建一个任务来启动智能体会话。</div></div>}
+          {noMatches && <div className="search-empty">没有匹配“{query.trim()}”的任务。</div>}
+          <TaskGroup label="需要你处理" tasks={needsYou} agents={agents} selTaskId={selTaskId} running={running} blockedBy={blockedBy} onSelect={onSelectTask} accent />
+          <TaskGroup label="进行中" tasks={groups.a} agents={agents} selTaskId={selTaskId} running={running} blockedBy={blockedBy} onSelect={onSelectTask} />
+          <TaskGroup label="已搁置" tasks={groups.h} agents={agents} selTaskId={selTaskId} running={running} blockedBy={blockedBy} onSelect={onSelectTask} />
+          <TaskGroup label="未开始" tasks={groups.r} agents={agents} selTaskId={selTaskId} running={running} blockedBy={blockedBy} onSelect={onSelectTask} />
+          <TaskGroup label="已完成" tasks={groups.g} agents={agents} selTaskId={selTaskId} running={running} blockedBy={blockedBy} onSelect={onSelectTask} collapsible collapsed={doneCollapsed && !q} onToggle={toggleDone} />
+          <TaskGroup label="已取消" tasks={groups.x} agents={agents} selTaskId={selTaskId} running={running} blockedBy={blockedBy} onSelect={onSelectTask} collapsible collapsed={cancelledCollapsed && !q} onToggle={toggleCancelled} />
+        </div>
+        {shownSuggested.length > 0 && (
+          <div className="suggest">
+            <div className="suggest-h">{Icon.spark()} 智能体的建议<span className="sp">{shownSuggested.length}</span></div>
+            {shownSuggested.map((s) => (
+              <div key={s.id} className="sug">
+                <StatusDot status="not_started" />
+                <div className="sg-meta">
+                  <div className="sg-name">{s.title}</div>
+                  {s.description && <div className="sg-why">{s.description}</div>}
+                </div>
+                <button className="sug-dismiss" title="编辑标题与描述" onClick={() => onEditTask(s.id)}>{Icon.edit()}</button>
+                <button className="sug-add" title="加入任务列表，稍后再开始" onClick={() => onAcceptSuggestion(s.id)}>{Icon.plus()} 添加</button>
+                <button className="sug-btn" onClick={() => onStartSuggestion(s.id)}>{Icon.play()} 开始</button>
+                <button className="sug-dismiss" title="忽略" onClick={() => onDismissSuggestion(s.id)}>{Icon.x()}</button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      )}
+    </div>
+  );
+}

package/src/operator/node/Terminal.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import "@xterm/xterm/css/xterm.css";
+import type { Terminal as XTerm } from "@xterm/xterm";
+import type { FitAddon as FitAddonType } from "@xterm/addon-fit";
+
+const darkTheme = {
+  background: "#15140f", foreground: "#E8E2D4", cursor: "#E0A07F",
+  selectionBackground: "#3A2B22", black: "#15140f", brightBlack: "#5E594E",
+  red: "#E0685D", green: "#8FBE82", yellow: "#DCB458", blue: "#6FA8CF",
+  magenta: "#C58FC4", cyan: "#79B8B0", white: "#E8E2D4", brightWhite: "#FBFAF6",
+};
+const lightTheme = {
+  background: "#FBFAF6", foreground: "#26241F", cursor: "#C2603C",
+  selectionBackground: "#F0D9CE", black: "#26241F", brightBlack: "#928D80",
+  red: "#C0503C", green: "#5C8C5A", yellow: "#9A6E14", blue: "#3E7CA8",
+  magenta: "#9E5BA0", cyan: "#3E7CA8", white: "#605C52", brightWhite: "#26241F",
+};
+
+// Imperative handle the mobile terminal sheet uses to feed input (paste, Enter,
+// Ctrl-C buttons) without owning the websocket itself.
+export interface TermApi { send: (data: string) => void; }
+
+export function TerminalView({ cwd, port, fontSize = 12.5, onReady }: { cwd: string; port?: number; fontSize?: number; onReady?: (api: TermApi) => void }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const termRef = useRef<XTerm | null>(null);
+  const fitRef = useRef<FitAddonType | null>(null);
+  // Bumping this tears down the dead xterm/socket and spawns a fresh shell.
+  const [session, setSession] = useState(0);
+  // Read the latest font size at shell-creation time without making it an effect
+  // dep (which would respawn the shell on every zoom); live changes apply below.
+  const fontRef = useRef(fontSize);
+  fontRef.current = fontSize;
+
+  useEffect(() => {
+    let term: XTerm | null = null;
+    let fit: FitAddonType | null = null;
+    let ws: WebSocket | null = null;
+    let ro: ResizeObserver | null = null;
+    let disposed = false;
+    let dead = false; // shell gone (exit or sidecar drop) — awaiting Enter to respawn
+
+    (async () => {
+      const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
+        import("@xterm/xterm"),
+        import("@xterm/addon-fit"),
+        import("@xterm/addon-web-links"),
+      ]);
+      if (disposed || !hostRef.current) return;
+
+      const dark = document.documentElement.getAttribute("data-theme") === "dark";
+      term = new Terminal({
+        fontFamily: "'JetBrains Mono', ui-monospace, monospace",
+        fontSize: fontRef.current,
+        lineHeight: 1.25,
+        cursorBlink: true,
+        scrollback: 8000,
+        theme: dark ? darkTheme : lightTheme,
+      });
+      fit = new FitAddon();
+      term.loadAddon(fit);
+      // Tappable links — the whole point of the mobile terminal's login flow is
+      // opening the OAuth URL Claude prints, so route clicks/taps to a new tab.
+      term.loadAddon(new WebLinksAddon((_e, uri) => window.open(uri, "_blank", "noopener,noreferrer")));
+      term.open(hostRef.current);
+      termRef.current = term;
+      fitRef.current = fit;
+      try { fit.fit(); } catch {}
+
+      // The Next server proxies /pty to the local node-pty sidecar, so one
+      // hostname carries both (works behind a tunnel). PUBLIC_BASE_URL (injected
+      // by the layout) overrides the origin when the instance's public address
+      // differs from what the browser sees; empty = same origin as the app.
+      const baseUrl = (window as { __PUBLIC_BASE_URL?: string }).__PUBLIC_BASE_URL || window.location.origin;
+      const wsBase = baseUrl.replace(/^http/, "ws");
+      const portQ = port && port > 0 ? `&port=${port}` : "";
+      const url = `${wsBase}/pty?cwd=${encodeURIComponent(cwd)}&cols=${term.cols}&rows=${term.rows}${portQ}`;
+      ws = new WebSocket(url);
+      ws.binaryType = "arraybuffer";
+
+      ws.onmessage = (e) => {
+        if (typeof e.data === "string") {
+          try {
+            const m = JSON.parse(e.data);
+            if (m.type === "exit") term!.write(`\r\n\x1b[90m[进程已退出（${m.exitCode}）]\x1b[0m\r\n`);
+          } catch {}
+        } else {
+          term!.write(new Uint8Array(e.data));
+        }
+      };
+      ws.onerror = () => { if (!disposed) term!.write(`\r\n\x1b[31m[terminal unreachable — is the pty-server sidecar running?]\x1b[0m\r\n`); };
+      ws.onclose = () => {
+        if (disposed) return;
+        dead = true;
+        term!.write("\r\n\x1b[90m[连接已断开 —— 按回车启动新的 shell]\x1b[0m\r\n");
+      };
+
+      // Single input path for both typed keystrokes and the mobile button-bar:
+      // when the shell is dead, Enter respawns it; otherwise forward to the pty.
+      const send = (d: string) => {
+        if (dead) {
+          if (d === "\r") setSession((s) => s + 1);
+          return;
+        }
+        if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "input", data: d }));
+      };
+      term.onData(send);
+      onReady?.({ send });
+
+      const syncSize = () => {
+        if (!hostRef.current || hostRef.current.clientHeight < 24) return; // skip when collapsed
+        try {
+          fit!.fit();
+          if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: "resize", cols: term!.cols, rows: term!.rows }));
+        } catch {}
+      };
+      ro = new ResizeObserver(syncSize);
+      ro.observe(hostRef.current);
+      term.focus();
+    })();
+
+    return () => {
+      disposed = true;
+      termRef.current = null;
+      fitRef.current = null;
+      try { ro?.disconnect(); } catch {}
+      try { ws?.close(); } catch {}
+      try { term?.dispose(); } catch {}
+    };
+  }, [cwd, session]);
+
+  // Live font-size changes (mobile A−/A+) without respawning the shell: retheme
+  // the existing terminal and refit so the pty's cols/rows track the new metrics.
+  useEffect(() => {
+    const t = termRef.current;
+    if (!t) return;
+    t.options.fontSize = fontSize;
+    try { fitRef.current?.fit(); } catch {}
+  }, [fontSize]);
+
+  return <div className="term-host" ref={hostRef} />;
+}