@spzxg/cli-ui 0.6.1 → 0.6.5

package/src/operator/node/AppearancePanel.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Icon } from "./icons";
+import type { Appearance } from "./types";
+
+export function AppearancePanel({ appearance, setAppearance, onClose }: { appearance: Appearance; setAppearance: (k: keyof Appearance, v: string) => void; onClose: () => void }) {
+  const Row = ({ label, children }: { label: string; children: React.ReactNode }) => (
+    <div style={{ marginBottom: 16 }}>
+      <div style={{ fontFamily: "var(--mono)", fontSize: 10, fontWeight: 700, letterSpacing: ".07em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 8 }}>{label}</div>
+      {children}
+    </div>
+  );
+  return (
+    <div className="modal" style={{ position: "fixed", right: 16, bottom: 16, width: 264, zIndex: 300, animation: "pop .16s ease" }}>
+      <div className="modal-h" style={{ padding: "14px 16px 12px" }}>
+        <div className="m-title" style={{ fontSize: 15, flex: 1, display: "flex", alignItems: "center", gap: 8 }}>{Icon.sliders()} 外观</div>
+        <button className="modal-close" onClick={onClose}>{Icon.x()}</button>
+      </div>
+      <div className="modal-b" style={{ padding: 16 }}>
+        <Row label="模式">
+          <div className="seg">
+            <button className={appearance.theme === "light" ? "on" : ""} onClick={() => setAppearance("theme", "light")}>{Icon.sun()} 浅色</button>
+            <button className={appearance.theme === "dark" ? "on" : ""} onClick={() => setAppearance("theme", "dark")}>{Icon.moon()} 深色</button>
+          </div>
+        </Row>
+        <Row label={`密度 · ${appearance.density === "1" ? "宽松" : "紧凑"}`}>
+          <div className="seg">
+            <button className={appearance.density === "1" ? "on" : ""} onClick={() => setAppearance("density", "1")}>宽松</button>
+            <button className={appearance.density === "0.72" ? "on" : ""} onClick={() => setAppearance("density", "0.72")}>紧凑</button>
+          </div>
+        </Row>
+      </div>
+    </div>
+  );
+}

package/src/operator/node/BranchHistory.tsx

@@ -0,0 +1,67 @@
+"use client";
+import { useEffect, useState } from "react";
+import { buildSessions } from "./format";
+import { FileLinkContext } from "./fileLinks";
+import { MessageView, SessionBreak } from "./Transcript";
+import { BranchNavigator } from "./BranchNavigator";
+import { branchAncestry, messagesAtFork, type BranchStep } from "./branchFlow";
+import { agentLabel } from "./agents";
+import { jget } from "./api";
+import { ErrNote, LoadNote } from "./shared";
+import type { AgentsBundle, Msg, TaskRow } from "./types";
+
+type History = { messages?: Msg[]; error?: string };
+// Reusing a common prefix keeps branch switches immediate. Keys include the
+// source version; failures are retryable and never become permanent cache hits.
+const cache = new Map<string, Msg[]>();
+const keyFor = (source: TaskRow) => `${source.id}:${source.updated_at}`;
+
+export function useBranchHistory(task: TaskRow, tasks: TaskRow[]) {
+  const steps = branchAncestry(task, tasks);
+  const signature = JSON.stringify(steps.map(({ source, child }) => [source && keyFor(source), child.id, child.created_at]));
+  const [loaded, setLoaded] = useState<Record<string, History>>({});
+  const [retry, setRetry] = useState(0);
+  useEffect(() => {
+    let dead = false;
+    for (const { source } of steps) {
+      if (!source || cache.has(keyFor(source))) continue;
+      const key = keyFor(source);
+      setLoaded((prev) => ({ ...prev, [key]: {} }));
+      void jget<TaskRow & { messages: (Msg & { created_at?: number })[] }>(`/api/tasks/${source.id}`).then((data) => {
+        if (data.project_id !== task.project_id) throw new Error("来源会话不属于当前项目。");
+        const messages = data.messages.map((m) => ({ ...m, ts: m.created_at ?? m.ts }));
+        cache.set(key, messages);
+        while (cache.size > 24) cache.delete(cache.keys().next().value!);
+        if (!dead) setLoaded((prev) => ({ ...prev, [key]: { messages } }));
+      }).catch((error: unknown) => {
+        if (!dead) setLoaded((prev) => ({ ...prev, [key]: { error: error instanceof Error ? error.message : "来源会话加载失败" } }));
+      });
+    }
+    return () => { dead = true; };
+    // The signature represents the path and source versions, not the changing
+    // array identity from the selected task's live stream.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [signature, retry]);
+  const entries = steps.map((step) => ({ ...step, history: step.source ? { ...loaded[keyFor(step.source)], ...(cache.has(keyFor(step.source)) ? { messages: cache.get(keyFor(step.source)) } : {}) } : {} }));
+  return { entries, ready: entries.every(({ source, history }) => !source || !!history.messages || !!history.error), retry: () => setRetry((n) => n + 1) };
+}
+
+export function BranchHistory({ entries, tasks, agents, onSelect, onQuote, onRetry }: {
+  entries: (BranchStep<TaskRow> & { history: History })[]; tasks: TaskRow[]; agents: AgentsBundle;
+  onSelect: (id: string) => void; onQuote: (m: Msg, source: TaskRow, selected?: string) => void; onRetry: () => void;
+}) {
+  return <>{entries.map(({ source, child, history }) => <div className="branch-history-step" key={child.id}>
+    <section className="flow-history" data-flow-task-id={source?.id || child.parent_task_id} aria-label={`来源会话：${source?.title || child.fork_source_title}`}>
+      <div className="flow-task-heading"><span>来源会话</span>{source ? <button onClick={() => onSelect(source.id)} title="打开来源任务">{source.title}</button> : <strong>{child.fork_source_title}</strong>}</div>
+      {!source ? <div className="flow-history-note">来源任务已删除，保留派生时的上下文。{child.fork_context && <details><summary>查看保存的上下文</summary><pre>{child.fork_context}</pre></details>}</div>
+        : history.error ? <ErrNote onRetry={onRetry}>{history.error}</ErrNote>
+        : !history.messages ? <LoadNote>正在加载来源会话…</LoadNote>
+        : <FileLinkContext.Provider value={{taskId:source.id}}>{buildSessions(messagesAtFork(history.messages, child)).map((session, si) => <div key={session.n}>
+          {si > 0 && session.summaryBefore && <SessionBreak summary={session.summaryBefore} />}
+          <div className="session-label"><span className="ln" />第 {session.n} 次会话 · 派生前<span className="ln" /></div>
+          {session.messages.map((m, mi) => <MessageView key={m.id} m={m} initial={mi === 0 && m.role === "user"} hideWho={m.role === "assistant" && ["assistant", "tool"].includes(session.messages[mi - 1]?.role)} agent={source.agent} agentLabel={agentLabel(agents, source.agent)} readOnly onQuote={(msg, selected) => onQuote(msg, source, selected)} />)}
+        </div>)}</FileLinkContext.Provider>}
+    </section>
+    <BranchNavigator sourceId={child.parent_task_id!} projectId={child.project_id} tasks={tasks} selected={child} onSelect={onSelect} />
+  </div>)}</>;
+}

package/src/operator/node/BranchNavigator.tsx

@@ -0,0 +1,36 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { Icon } from "./icons";
+import { SLABEL, type TaskRow } from "./types";
+import { branchOptions } from "./branchFlow";
+
+export function BranchNavigator({ sourceId, projectId, tasks, selected, completed = true, onSelect }: {
+  sourceId: string; projectId: string; tasks: TaskRow[]; selected?: TaskRow; completed?: boolean; onSelect: (id: string) => void;
+}) {
+  const rail = useRef<HTMLDivElement>(null);
+  const branches = branchOptions(sourceId, projectId, tasks, selected);
+  useEffect(() => {
+    const strip = rail.current;
+    const active = strip?.querySelector<HTMLElement>("[aria-current='page']");
+    if (!strip || !active) return;
+    const item = active.getBoundingClientRect(), bounds = strip.getBoundingClientRect();
+    if (item.left < bounds.left) strip.scrollLeft += item.left - bounds.left;
+    else if (item.right > bounds.right) strip.scrollLeft += item.right - bounds.right;
+  }, [selected?.id]);
+  if (!branches.length) return null;
+  return <div className="branch-nav" data-parent-id={sourceId} aria-label="任务分支">
+    <div className="branch-ending"><span>{completed ? "此处任务已完成" : "此任务的后续分支"}</span></div>
+    <div className="branch-nav-head"><span>{Icon.git()} 分支路径</span><span className="branch-nav-hint">选择分支，在下方继续</span>
+      {branches.length > 2 && <>
+        <button className="icon-btn" aria-label="向左查看分支" onClick={() => rail.current?.scrollBy({ left: -(rail.current.clientWidth / 2), behavior: "smooth" })}>{Icon.chevRight({ style: { transform: "rotate(180deg)" } })}</button>
+        <button className="icon-btn" aria-label="向右查看分支" onClick={() => rail.current?.scrollBy({ left: rail.current.clientWidth / 2, behavior: "smooth" })}>{Icon.chevRight()}</button>
+      </>}
+    </div>
+    <div ref={rail} className="branch-cards">
+      {branches.map((t, index) => <button key={t.id} className={`branch-card${t.id === selected?.id ? " selected" : ""}`} aria-current={t.id === selected?.id ? "page" : undefined} onClick={() => onSelect(t.id)} title={`${t.work_branch || ""} · ${t.fork_commit?.slice(0, 7) || ""}`}>
+        <span className="branch-card-meta"><span>分支 {index + 1}</span><span>{t.running ? "运行中" : SLABEL[t.status]}</span></span>
+        <strong>{t.title}</strong><small>派生自 {t.fork_source_title}</small>
+      </button>)}
+    </div>
+  </div>;
+}

package/src/operator/node/BrowserPane.tsx

@@ -0,0 +1,128 @@
+"use client";
+import { useMemo, useState } from "react";
+import { Icon } from "./icons";
+import { BrowserPane as BrowserSurface } from "../../board/BrowserPane";
+import { createOperatorBoardBackend } from "./boardBackend";
+import type { BrowserStatus } from "../../core/types";
+interface EgoProfile { id: string; name: string; isDefault: boolean }
+interface ImportSource { browser: string; displayName: string; profiles: { dir: string; name: string; email: string; isDefault: boolean }[] }
+interface ProfilesState { selected: string | null; profiles: EgoProfile[]; sources?: ImportSource[]; imported?: string; error?: string }
+
+/**
+ * The node's login profile (shared by every task here): which ego profile new
+ * browsers open in, switching it, and importing the sign-ins of an everyday
+ * browser on this Mac (fewer sign-in walls and CAPTCHAs). Loads only when
+ * expanded — listing may start the node's browser.
+ */
+function LoginProfiles() {
+  const [open, setOpen] = useState(false);
+  const [state, setState] = useState<ProfilesState | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState<string | null>(null);
+
+  const call = async (init?: RequestInit, sources = true) => {
+    const res = await fetch(`/api/browser/profiles${sources ? "?sources=1" : ""}`, init);
+    const j = (await res.json().catch(() => null)) as ProfilesState | null;
+    if (!res.ok || !j || j.error) throw new Error(j?.error ?? `请求失败（${res.status}）`);
+    return j;
+  };
+  const load = async () => {
+    setBusy("load");
+    setError(null);
+    try { setState(await call()); } catch (e) { setError(e instanceof Error ? e.message : String(e)); } finally { setBusy(null); }
+  };
+  const post = async (key: string, body: Record<string, unknown>, okText: (j: ProfilesState) => string) => {
+    setBusy(key);
+    setError(null);
+    setDone(null);
+    try {
+      const j = await call({ method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) }, false);
+      setState((prev) => ({ ...j, sources: prev?.sources }));
+      setDone(okText(j));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const current = state ? state.profiles.find((p) => p.id === state.selected) ?? state.profiles.find((p) => p.isDefault) : null;
+  return (
+    <div className="bp-logins">
+      <button className="bp-logins-head" onClick={() => { const next = !open; setOpen(next); if (next && !state) void load(); }}>
+        <span className="rail-eyebrow">登录状态 · 本节点所有任务共享</span>
+        <span className="bp-meta">{current ? current.name : open ? "" : "展开"}</span>
+        <span style={{ flex: 1 }} />
+        <span className="bp-meta">{open ? "收起" : "管理"}</span>
+      </button>
+      {open && (
+        <div className="bp-logins-body">
+          {busy === "load" && <div className="prev-note">读取中…（第一次会先启动浏览器）</div>}
+          {state && (
+            <>
+              <div className="bp-logins-sub">浏览器使用的配置</div>
+              {state.profiles.map((p) => {
+                const using = p.id === (state.selected ?? state.profiles.find((x) => x.isDefault)?.id);
+                return (
+                  <div key={p.id} className="bp-logins-row">
+                    <span className="bp-logins-name">{p.name}<span className="bp-meta"> · {p.id}</span></span>
+                    {using
+                      ? <span className="bp-badge ai">使用中</span>
+                      : <button className="btn btn-line btn-sm" disabled={!!busy} onClick={() => post(`select:${p.id}`, { action: "select", id: p.id }, () => `已切换到「${p.name}」，之后新打开的浏览器会用它。`)}>使用</button>}
+                  </div>
+                );
+              })}
+              <div className="bp-logins-sub">从这台 Mac 上的浏览器导入登录状态</div>
+              {(state.sources ?? []).length === 0 && <div className="prev-note">没有找到可导入的浏览器。</div>}
+              {(state.sources ?? []).map((s) => (
+                <div key={s.browser}>
+                  <div className="bp-meta" style={{ margin: "6px 0 4px" }}>{s.displayName}</div>
+                  {s.profiles.map((p) => (
+                    <div key={p.dir} className="bp-logins-row">
+                      <span className="bp-logins-name">{p.name}{p.email && <span className="bp-meta"> · {p.email}</span>}</span>
+                      <button className="btn btn-line btn-sm" disabled={!!busy} onClick={() => post(`import:${s.browser}:${p.dir}`, { action: "import", browser: s.browser, profile: p.dir }, (j) => `已从 ${s.displayName}「${p.name}」导入，并设为本节点浏览器的登录配置（${j.imported ?? ""}）。`)}>
+                        {busy === `import:${s.browser}:${p.dir}` ? "导入中（约 15 秒）…" : "导入"}
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              ))}
+              <div className="prev-note">
+                导入会复制该浏览器配置的登录状态、Cookie 和浏览记录，新建一份配置并设为当前使用；不会改动原浏览器，也不会把 ego 设为默认浏览器。
+                切换只影响之后新打开的浏览器，已经打开的保持不变。
+              </div>
+            </>
+          )}
+          {done && <div className="bp-ok">{done}</div>}
+          {error && <div className="bp-error">{error}</div>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function BrowserPane({ taskId, popup=false, onQuote, onQuoteText, onPage }: {
+  taskId:string; popup?:boolean; onQuote?:(page:{url:string;title:string})=>void;
+  onQuoteText?:(text:string,page:{url:string;title:string})=>void;
+  onPage?:(page:{url:string;title:string}|null)=>void;
+}) {
+  const backend=useMemo(()=>createOperatorBoardBackend(),[]);
+  const [busy,setBusy]=useState(false);
+  const [error,setError]=useState<string|null>(null);
+  const localAction=async(status:BrowserStatus,update:(status:BrowserStatus)=>void)=>{
+    if(busy)return;setBusy(true);setError(null);
+    try{
+      const response=await fetch(`/api/tasks/${encodeURIComponent(taskId)}/browser`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:status.shownLocally?'park':'show'})});
+      const result=await response.json();if(!response.ok)throw new Error(result.error||`操作失败（${response.status}）`);if(result.state)update(result);
+    }catch(error){setError(error instanceof Error?error.message:String(error));}finally{setBusy(false);}
+  };
+  return <BrowserSurface key={taskId} backend={backend} jobId={taskId} className={popup?'bp-popup':undefined} onQuote={onQuote} onQuoteText={onQuoteText} onPage={onPage}
+    footer={!popup?<LoginProfiles/>:undefined} extension={(status,update)=><>
+      {status.state==='running'&&<div className="bp-row">
+        {!popup&&<button className="btn btn-line btn-sm" onClick={()=>window.open(`/browser/${encodeURIComponent(taskId)}`,`browser-${taskId}`,'width=1320,height=960')}>{Icon.external()} 弹出窗口</button>}
+        <button className="btn btn-ghost btn-sm" disabled={busy} onClick={()=>void localAction(status,update)}>{status.shownLocally?'收起节点上的窗口':'在节点屏幕上显示'}</button>
+      </div>}
+      {error&&<div role="alert" className="bp-error">{error}</div>}
+    </>}/>;
+}

package/src/operator/node/BrowserPopup.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+// Pop-out window for a task's real browser (docs/BROWSER_PLAN.md §6.4): the
+// same pane as the session rail, full size. Streams only while this window is
+// open and visible.
+
+import { use, useLayoutEffect, useState } from "react";
+import { BrowserPane } from "./BrowserPane";
+import { loadPersist } from "./persist";
+import { clientFeatures } from "./protocol/features";
+
+export default function BrowserPopup({ params }: { params: Promise<{ taskId: string }> }) {
+  const { taskId } = use(params);
+  const [theme,setTheme]=useState("dark");
+  useLayoutEffect(()=>{const theme=loadPersist().appearance?.theme??"dark";setTheme(theme);document.documentElement.setAttribute("data-theme",theme);},[]);
+  if (!clientFeatures().browser) return <div className="rail-pad"><div className="prev-note">浏览器功能未开启</div></div>;
+  return (
+    <main className="cli-ui bp-popup-page" data-theme={theme}>
+      <BrowserPane taskId={taskId} popup />
+    </main>
+  );
+}