@spzxg/cli-ui 0.6.2 → 0.6.6

package/src/operator/node/RunSwitch.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { Fragment, useState } from "react";
+import { Icon } from "./icons";
+import { Popover } from "./shared";
+import { agentLabel, agentStateHint, capsFor } from "./agents";
+import { modelLabel } from "./format";
+import { modelOptions, type AgentsBundle, type TaskRow } from "./types";
+
+// The model list (+ custom model box) for a task's agent — the body of the model
+// popover in both the session header and the composer.
+export function ModelMenu({ task, agents, onPick }: { task: TaskRow; agents: AgentsBundle; onPick: (m: string | null) => void }) {
+  const caps = capsFor(agents, task.agent);
+  const models = modelOptions(caps);
+  const [custom, setCustom] = useState("");
+  return (
+    <>
+      {models.map((m, i) => (
+        <Fragment key={m.value ?? "default"}>
+          {/* Section header whenever the group changes — Claude Code's
+              list runs to a dozen-plus pins, so it needs the structure. */}
+          {m.group && m.group !== models[i - 1]?.group && <div className="pop-sec">{m.group}</div>}
+          <div className="pop-item" onClick={() => onPick(m.value)}>
+            <div><div>{m.label}</div><div className="pi-sub">{m.sub}</div></div>
+            {(task.model ?? null) === m.value && <span className="pi-check">{Icon.check()}</span>}
+          </div>
+        </Fragment>
+      ))}
+      {caps?.supportsCustomModels && (
+        <form className="pop-custom-model" onSubmit={(e) => {
+          e.preventDefault();
+          const value = custom.trim();
+          if (!value) return;
+          onPick(value);
+          setCustom("");
+        }}>
+          <div className="pop-sec">自定义模型</div>
+          <div className="pop-custom-row">
+            <input
+              className="ctx-mono"
+              value={custom}
+              onChange={(e) => setCustom(e.target.value)}
+              placeholder="模型 ID 或 inference-profile ARN"
+              aria-label="自定义模型 ID"
+            />
+            <button className="btn btn-sm btn-accent" type="submit" disabled={!custom.trim()}>使用</button>
+          </div>
+          {task.model && !models.some((m) => m.value === task.model) && (
+            <div className="pi-sub" title={task.model}>当前：{task.model}</div>
+          )}
+        </form>
+      )}
+    </>
+  );
+}
+
+// Composer-footer switchers: which agent and which model the NEXT message runs
+// on. Both apply right away (a turn already running finishes on what it started
+// with); switching agents hands the new one this task's conversation so far.
+export function RunSwitch({ task, agents, running, onSetAgent, onSetModel }: {
+  task: TaskRow; agents: AgentsBundle; running: boolean;
+  onSetAgent: (id: string) => void; onSetModel: (m: string | null) => void;
+}) {
+  const [open, setOpen] = useState<"agent" | "model" | null>(null);
+  const caps = capsFor(agents, task.agent);
+  const models = modelOptions(caps);
+  const modelText = models.find((m) => m.value === (task.model ?? null))?.label ?? (task.model ? modelLabel(task.model, caps) : "默认模型");
+  const when = running ? "当前这一轮跑完后生效" : "下一条消息起生效";
+  const toggle = (which: "agent" | "model") => (e: React.MouseEvent) => { e.stopPropagation(); setOpen((o) => (o === which ? null : which)); };
+  return (
+    <>
+      {agents.agents.length > 1 && (
+        <div style={{ position: "relative" }}>
+          <button className="run-sw" onClick={toggle("agent")} title={`切换智能体 —— ${when}，新智能体会带上此前的对话`} aria-label="切换智能体">
+            {Icon.bolt()}<span className="run-sw-v">{agentLabel(agents, task.agent)}</span>{Icon.chevDown()}
+          </button>
+          {open === "agent" && (
+            <Popover onClose={() => setOpen(null)}>
+              <div className="pop-sec">切换智能体</div>
+              {agents.agents.map((a) => {
+                const hint = agentStateHint(a);
+                const current = a.id === task.agent;
+                return (
+                  <div key={a.id} className="pop-item" onClick={() => { if (!current) onSetAgent(a.id); setOpen(null); }}>
+                    <div>
+                      <div>{a.label}</div>
+                      <div className="pi-sub">
+                        {hint === "未安装" ? "命令行工具未安装在服务器上" : hint === "未连接" ? "尚未连接 —— 请先到设置里连接" : current ? "当前使用中" : "接手后继续这个任务"}
+                      </div>
+                    </div>
+                    {current && <span className="pi-check">{Icon.check()}</span>}
+                  </div>
+                );
+              })}
+              <div className="pop-note">{when}；换智能体时会把此前的对话记录交给新智能体。</div>
+            </Popover>
+          )}
+        </div>
+      )}
+      <div style={{ position: "relative" }}>
+        <button className="run-sw" onClick={toggle("model")} title={`切换模型 —— ${when}`} aria-label="切换模型">
+          {Icon.spark()}<span className="run-sw-v">{modelText}</span>{Icon.chevDown()}
+        </button>
+        {open === "model" && (
+          <Popover onClose={() => setOpen(null)}>
+            <div className="pop-sec">{agentLabel(agents, task.agent)} 的模型</div>
+            <ModelMenu task={task} agents={agents} onPick={(m) => { onSetModel(m); setOpen(null); }} />
+          </Popover>
+        )}
+      </div>
+    </>
+  );
+}

package/src/operator/node/Services.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Icon } from "./icons";
+import { jsend } from "./api";
+import { openLive } from "./liveStream";
+import { LoadNote } from "./shared";
+import type { ServiceInfo, ServiceLogLine, ServiceEvent, ServiceStatus, ServiceVisibility } from "./protocol/types";
+
+const LOG_CAP = 1500;
+
+const STATUS_LABEL: Record<ServiceStatus, string> = {
+  stopped: "已停止", starting: "启动中…", running: "运行中", exited: "已退出", errored: "出错",
+};
+
+// Status dot class — green running, amber starting, red errored, grey otherwise.
+function dotClass(s: ServiceStatus): string {
+  if (s === "running") return "g";
+  if (s === "starting") return "a";
+  if (s === "errored") return "r";
+  return "x";
+}
+
+// A managed service is busy (no controls) only while starting; everything else is
+// actionable. An exposed (unmanaged) entry has no process to control.
+function ServiceRow({
+  svc, selected, onSelect, onAction, onVisibility,
+}: {
+  svc: ServiceInfo;
+  selected: boolean;
+  onSelect: () => void;
+  onAction: (action: "start" | "stop" | "restart") => void;
+  onVisibility: (value: ServiceVisibility) => void;
+}) {
+  const live = svc.status === "running" || svc.status === "starting";
+  const [copied, setCopied] = useState(false);
+  // The link worth handing out: the tokened share link when shared, else the URL.
+  const copyUrl = svc.shareUrl ?? svc.url;
+  const copy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!copyUrl) return;
+    try {
+      await navigator.clipboard.writeText(copyUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    } catch { /* clipboard blocked */ }
+  };
+  // Visibility only matters once the service has a public identity (a slug is
+  // assigned at first start/expose; until then there is no URL to gate).
+  const showShare = !!svc.slug;
+  return (
+    <button className={`svc-row${selected ? " on" : ""}`} onClick={onSelect}>
+      <span className={`svc-dot ${dotClass(svc.status)}`} />
+      <span className="svc-name">{svc.name}</span>
+      <span className="svc-status" title={svc.error ?? undefined}>{STATUS_LABEL[svc.status]}{svc.exitCode != null && svc.status !== "running" ? ` (${svc.exitCode})` : ""}</span>
+      <span style={{ flex: 1 }} />
+      {showShare && (
+        <select
+          className="svc-vis"
+          value={svc.visibility}
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => onVisibility(e.target.value as ServiceVisibility)}
+          title="谁可以打开该服务的地址"
+        >
+          <option value="private">私有</option>
+          <option value="shared">链接可访问</option>
+          <option value="public">公开</option>
+        </select>
+      )}
+      {copyUrl && live && (
+        <span className="icon-btn" role="button" tabIndex={0} title={copied ? "已复制" : `复制 ${copyUrl}`} onClick={copy}>
+          {copied ? Icon.check() : Icon.copy()}
+        </span>
+      )}
+      {svc.url && live && (
+        <a className="svc-url" href={svc.url} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} title={`打开 ${svc.url}`}>
+          :{svc.port}
+        </a>
+      )}
+      {svc.managed && (
+        <span className="svc-actions" onClick={(e) => e.stopPropagation()}>
+          {live ? (
+            <>
+              <span className="icon-btn" role="button" tabIndex={0} title="重启" onClick={() => onAction("restart")}>{Icon.clear()}</span>
+              <span className="icon-btn" role="button" tabIndex={0} title="停止" onClick={() => onAction("stop")}>{Icon.stop()}</span>
+            </>
+          ) : (
+            <span className="icon-btn" role="button" tabIndex={0} title="启动" onClick={() => onAction("start")}>{Icon.play()}</span>
+          )}
+        </span>
+      )}
+    </button>
+  );
+}
+
+function LogView({ lines }: { lines: ServiceLogLine[] }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const pinned = useRef(true);
+  // Auto-scroll to the tail unless the user has scrolled up to read history.
+  useEffect(() => {
+    const el = ref.current;
+    if (el && pinned.current) el.scrollTop = el.scrollHeight;
+  }, [lines]);
+  const onScroll = () => {
+    const el = ref.current;
+    if (!el) return;
+    pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+  };
+  return (
+    <div className="svc-logs" ref={ref} onScroll={onScroll}>
+      {lines.length === 0 ? (
+        <div className="svc-logs-empty">暂无输出。</div>
+      ) : (
+        lines.map((l, i) => (
+          <div key={i} className={`svc-log-line ${l.stream}`}>{l.text || " "}</div>
+        ))
+      )}
+    </div>
+  );
+}
+
+// Bottom drawer mirroring the terminal drawer: live status + controls + logs for a
+// project's managed services, fed by the services SSE stream so it survives a tab
+// reload (the processes live in the server, lib/services.ts).
+export function ServicesDrawer({
+  projectId, hasConfig, visible, height, onClose, onResize,
+}: {
+  projectId: string;
+  hasConfig: boolean;
+  visible: boolean;
+  height: number;
+  onClose: () => void;
+  onResize: (h: number) => void;
+}) {
+  const dragging = useRef(false);
+  const [services, setServices] = useState<ServiceInfo[]>([]);
+  const [logs, setLogs] = useState<Record<string, ServiceLogLine[]>>({});
+  const [selected, setSelected] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const selectedRef = useRef<string | null>(null);
+  selectedRef.current = selected;
+
+  // Resize handle (drag the top edge).
+  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]);
+
+  // Live services stream. Reopened per project; each connect re-snapshots.
+  useEffect(() => {
+    const onMessage = (data: string) => {
+      let ev: ServiceEvent;
+      try { ev = JSON.parse(data); } catch { return; }
+      if (ev.type === "snapshot") {
+        setServices(ev.services);
+        setLogs(ev.logs);
+        if (!selectedRef.current && ev.services.length) setSelected(ev.services[0].name);
+      } else if (ev.type === "status") {
+        setServices((prev) => {
+          const i = prev.findIndex((s) => s.name === ev.service.name);
+          if (i === -1) return [...prev, ev.service];
+          const next = prev.slice();
+          next[i] = ev.service;
+          return next;
+        });
+        if (!selectedRef.current) setSelected(ev.service.name);
+      } else if (ev.type === "log") {
+        setLogs((prev) => {
+          const cur = prev[ev.name] ?? [];
+          const next = cur.length >= LOG_CAP ? [...cur.slice(cur.length - LOG_CAP + 1), ev.line] : [...cur, ev.line];
+          return { ...prev, [ev.name]: next };
+        });
+      } else if (ev.type === "removed") {
+        setServices((prev) => prev.filter((s) => s.name !== ev.name));
+      }
+    };
+    const sub = openLive(`/api/projects/${projectId}/services/stream`, { onMessage });
+    return () => sub.close();
+  }, [projectId]);
+
+  const act = async (name: string, action: "start" | "stop" | "restart" | "visibility", value?: ServiceVisibility) => {
+    setErr(null);
+    setSelected(name);
+    try {
+      await jsend(`/api/projects/${projectId}/services`, "POST", { name, action, value });
+    } catch (e) {
+      let msg = e instanceof Error ? e.message : String(e);
+      try { const j = JSON.parse(msg); if (j?.error) msg = j.error; } catch { /* raw */ }
+      setErr(msg);
+    }
+  };
+
+  const current = selected ? logs[selected] ?? [] : [];
+  // Supervisor-level failure (port conflict, spawn failure) for the selected
+  // service — shown as a banner over the logs, not buried in them.
+  const selectedError = selected ? services.find((s) => s.name === selected)?.error ?? null : null;
+
+  return (
+    <div className={`term-drawer svc-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.sliders()}
+        <span className="term-title">服务</span>
+        {err && <span className="svc-err">⚠ {err}</span>}
+        <span style={{ flex: 1 }} />
+        <button className="icon-btn" onClick={onClose} title="隐藏服务面板（进程会继续运行）">{Icon.chevDown()}</button>
+      </div>
+      <div className="svc-body">
+        <div className="svc-list">
+          {services.length === 0 ? (
+            hasConfig ? (
+              <LoadNote style={{ padding: "14px 10px" }}>正在加载服务…</LoadNote>
+            ) : (
+              <div className="svc-empty">
+                尚未配置服务。请在项目上下文（⚙）中添加 dev / setup / test 命令。
+              </div>
+            )
+          ) : (
+            services.map((s) => (
+              <ServiceRow
+                key={s.name}
+                svc={s}
+                selected={selected === s.name}
+                onSelect={() => setSelected(s.name)}
+                onAction={(a) => act(s.name, a)}
+                onVisibility={(v) => act(s.name, "visibility", v)}
+              />
+            ))
+          )}
+        </div>
+        <div className="svc-log-pane">
+          {selectedError && <div className="svc-banner">⚠ {selectedError}</div>}
+          <LogView lines={current} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/operator/node/SessionRail.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Icon } from "./icons";
+import TaskChanges, { type ResolveResult } from "./TaskChanges";
+import { BrowserPane } from "./BrowserPane";
+import { fmtTokens } from "./format";
+import { clientFeatures } from "./protocol/features";
+import type { ServiceInfo } from "./protocol/types";
+import type { ProjectRow, TaskRow } from "./types";
+
+import { clientId } from "../../core/id";
+import { useBoardState, readBoardState, visitBoardFile, reportBoardState, releaseBoardState, activateBoardState } from "./boardState";
+import type { BoardView } from "../../board/workspace";
+import { useBoardPanels } from "../../board/panels";
+import { PanelControls, PanelTab } from "../../board/PanelControls";
+import { FilesPane } from "../../board/FilesPane";
+import { FileViewer } from "../../board/FileViewer";
+import { getOperatorBoardBackend } from "./boardBackend";
+import { useOperatorContextEvents, useOperatorFileWatch } from "./boardEvents";
+import { OperatorBoardContext, registerOperatorBoard, OperatorBoardQuoteContext } from "./boardInteraction";
+import type { Quote } from "./composerDraft";
+import type { OperatorBoardOptions, OperatorBoardRequest } from "./boardInteraction";
+type OpenFile = { reloadKey?:number; taskId: string; path: string; version: number; mtime?: number; size?: number };
+const fileKey = (file: Pick<OpenFile,"taskId"|"path">) => `file:${file.taskId}:${file.path}`;
+const LABEL:Record<string,string>={files:"文件",changes:"改动",context:"上下文",preview:"预览",browser:"浏览器"};
+type Session = { n: number; summaryBefore: string | null };
+
+// The live URL a project's dev server is reachable at when no registered
+// service reports one — local dev hits the project's stable port directly.
+function fallbackUrl(project: ProjectRow): string | null {
+  return project.port ? `http://localhost:${project.port}` : null;
+}
+
+// Prefer what the service registry reports (on a hosted instance that's the
+// public <slug>--<host> URL, exactly what the agent/user should open).
+function useLiveUrl(project: ProjectRow): string | null {
+  const [url, setUrl] = useState<string | null>(null);
+  useEffect(() => {
+    let dead = false;
+    setUrl(null);
+    fetch(`/api/projects/${project.id}/services`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((j: { services?: ServiceInfo[] } | null) => {
+        if (dead || !j?.services) return;
+        const withUrl = j.services.filter((s) => s.url);
+        const live = withUrl.find((s) => s.status === "running" || s.status === "starting");
+        setUrl((live ?? withUrl[0])?.url ?? null);
+      })
+      .catch(() => { /* fall back below */ });
+    return () => { dead = true; };
+  }, [project.id]);
+  return url ?? fallbackUrl(project);
+}
+
+function PreviewPane({ project }: { project: ProjectRow }) {
+  const url = useLiveUrl(project);
+  const [copied, setCopied] = useState(false);
+  const display = url ? url.replace(/^https?:\/\//, "") : "未配置开发服务器";
+  const copy = async () => { if (!url) return; try { await navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1400); } catch { /* clipboard blocked */ } };
+  return (
+    <div className="rail-pad">
+      <div className="prev-frame">
+        <div className="prev-chrome">
+          <span className="prev-dots"><i /><i /><i /></span>
+          <span className="prev-addr"><span className="prev-live" />{display}</span>
+        </div>
+        <div className="prev-body">
+          <div className="prev-grid" />
+          <div className="prev-mock">
+            <div className="pm-title">{project.name}</div>
+            <div className="pm-bar w60" />
+            <div className="pm-bar w80" />
+            <div className="pm-rows"><div className="pm-row" /><div className="pm-row" /><div className="pm-row" /></div>
+            <div className="pm-cta">实时构建</div>
+          </div>
+        </div>
+      </div>
+      <div className="prev-actions">
+        {url ? <a className="btn btn-line" href={url} target="_blank" rel="noopener noreferrer">{Icon.external()} 打开预览</a> : <button className="btn btn-line" disabled>{Icon.external()} 打开预览</button>}
+        <button className="btn btn-line" onClick={copy} disabled={!url}>{copied ? Icon.check() : Icon.copy()} {copied ? "已复制" : "复制链接"}</button>
+      </div>
+      <div className="prev-note">每个项目一运行就有真实可访问的地址 —— 手机上打开、发给同事，都无需部署。</div>
+    </div>
+  );
+}
+
+function ContextPane({ task, sessions, running, onClear }: { task: TaskRow; sessions: Session[]; running: boolean; onClear: () => void }) {
+  const pct = Math.min(100, Math.max(0, Math.round(task.context_pct)));
+  return (
+    <div className="rail-pad">
+      <div className="ctxw-head">
+        <span className="rail-eyebrow">上下文窗口</span>
+        <span className="ctxw-pct">已用 {pct}%{task.context_tokens > 0 ? ` · ${fmtTokens(task.context_tokens)} tok` : ""}</span>
+      </div>
+      <div className="ctxw-meter"><div className="ctxw-fill" style={{ width: `${pct}%` }} /></div>
+
+      <div className="ctxw-timeline">
+        {sessions.map((s, i) => {
+          const current = i === sessions.length - 1;
+          return (
+            <div key={s.n} className={`ctxw-node ${current ? "current" : "done"}`}>
+              <span className="ctxw-dot" />
+              <div className="ctxw-name">第 {s.n} 个窗口 · {current ? "当前" : "已摘要"}</div>
+              <div className="ctxw-desc">
+                {current
+                  ? "已带着摘要继续 —— 任务线索被完整交接下来。"
+                  : "已压缩为摘要 —— 清空上下文后任务脉络依然保留。"}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <button className="btn btn-line ctxw-clear" onClick={onClear} disabled={running || task.started !== 1}>{Icon.clear()} 立即清空上下文</button>
+      <div className="ctxw-foot">清空会把对话压缩成摘要，并以此开启新的上下文窗口。</div>
+    </div>
+  );
+}
+
+export function SessionRail({ project, task, sessions, running, onResolveWithAI, onMerged, onPrCreated, onClear, onCollapse, onSwitchToChat,
+  tabs, availableTabs, defaultTab, autoContext, watchFiles = true, fileWatchIntervalMs, onFilesChange, onFilesWatch, onBoardContextChange, onEvent, openRequest, onRequestHandled, activity, onQuote }: OperatorBoardOptions & {
+  project: ProjectRow; task: TaskRow; sessions: Session[]; running: boolean;
+  onResolveWithAI: (taskId: string) => Promise<ResolveResult>; onMerged?: () => void;
+  onPrCreated?: (url: string) => void; onClear: () => void; onCollapse: () => void; onSwitchToChat: () => void;
+  openRequest?: OperatorBoardRequest | null; onRequestHandled?: (sequence:number)=>void; activity?: string; onQuote?: (quote:Quote)=>void;
+}) {
+  const contextQuote=useContext(OperatorBoardQuoteContext);
+  const parentBoard=useContext(OperatorBoardContext);
+  const quote=onQuote??contextQuote;
+  const features=clientFeatures();
+  const available=(availableTabs ?? ['files','changes','context','browser','preview']).filter(id=>id in LABEL).filter(id=>id!=='browser'||features.browser).filter(id=>id!=='preview'||features.livePreview);
+  const defaults=tabs ?? ['files',...(features.browser?['browser']:[])];
+  const panels=useBoardPanels(`operator:${task.id}`,available,defaults);
+  const [owner]=useState(()=>clientId());
+  const boardState=useBoardState(task.id);
+  const [browserPage,setBrowserPage]=useState<{url:string;title:string}|null>(null);
+  const [tab,setTab]=useState<string>(defaultTab ?? defaults[0] ?? '');
+  const [files,setFiles]=useState<OpenFile[]>([]);
+  const [dir,setDir]=useState('');
+  const [folderTask,setFolderTask]=useState(task.id);
+  const [tick,setTick]=useState(0);
+  const callbacks={onFilesChange,onFilesWatch,onBoardContextChange,onEvent};
+  useOperatorFileWatch(task.id,watchFiles,parentBoard?{}:callbacks,event=>{setTick(value=>value+1);const paths=new Set(event.changes.map(change=>change.path));setFiles(previous=>previous.map(file=>file.taskId===task.id&&paths.has(file.path)?{...file,version:file.version+1,reloadKey:(file.reloadKey??0)+1}:file));},fileWatchIntervalMs);
+  useOperatorContextEvents(task.id,!parentBoard,callbacks);
+
+  const backend=useMemo(()=>getOperatorBoardBackend(),[]);
+  const [restored,setRestored]=useState(false);
+  const storageKey=`cli-ui:operator-files:${task.id}`;
+  useEffect(()=>{
+    try {
+      // Restore after hydration, not in state initializers: server and first
+      // client render must have the same tabs even when storage has history.
+      const snapshot=readBoardState(task.id);
+      if(snapshot){
+        setFiles((snapshot.opened??[]).slice(-8).map(file=>({taskId:file.sourceId??task.id,path:file.path,version:0})));
+        setTab(snapshot.tab);
+      }else{
+        const saved=JSON.parse(sessionStorage.getItem(storageKey)??'null');
+        if(Array.isArray(saved?.files)) setFiles(saved.files.filter((f:OpenFile)=>typeof f?.taskId==='string'&&typeof f?.path==='string').slice(-8).map((f:OpenFile)=>({...f,version:0})));
+        if(typeof saved?.active==='string') setTab(saved.active);
+      }
+    } catch { /* Invalid preferences do not block the board. */ }
+    setRestored(true);
+  },[storageKey]);
+  useEffect(()=>{if(restored)try{sessionStorage.setItem(storageKey,JSON.stringify({files:files.map(({taskId,path})=>({taskId,path})),active:tab}));}catch{}},[storageKey,restored,files,tab]);
+  const fileTabs=available.includes('files')?files.map(fileKey):[];
+  const shown=[...panels.open,...fileTabs];
+  const active=shown.includes(tab)?tab:shown[0]??'';
+  const tabsRef=useRef<HTMLDivElement>(null);
+  useLayoutEffect(()=>{
+    const reveal=()=>{const box=tabsRef.current,item=box?.querySelector<HTMLElement>('.rail-tab.on');if(!box||!item)return;
+      const outer=box.getBoundingClientRect(),inner=item.getBoundingClientRect();if(inner.left<outer.left)box.scrollLeft+=inner.left-outer.left;else if(inner.right>outer.right)box.scrollLeft+=inner.right-outer.right;};
+    reveal();if(typeof ResizeObserver==='undefined')return;const observer=new ResizeObserver(reveal);if(tabsRef.current)observer.observe(tabsRef.current);return()=>observer.disconnect();
+  },[active,shown.length]);
+  const file=files.find(f=>fileKey(f)===active);
+  const current=useRef(active);current.current=active;
+  const openFile=(taskId:string,path:string)=>{
+    if(!available.includes('files'))return;
+    const clean=path.replace(/^\.\//,'').replace(/\/+$/,'');if(!clean)return;
+    const id=fileKey({taskId,path:clean});
+    activateBoardState(task.id,owner);
+    visitBoardFile(task.id,{sourceId:taskId,path:clean});
+    setFiles(previous=>{
+      const found=previous.find(f=>fileKey(f)===id);
+      if(found)return previous.map(f=>fileKey(f)===id?{...f,version:f.version+1}:f);
+      const next=[...previous,{taskId,path:clean,version:0}];
+      if(next.length>8){const index=next.findIndex(f=>fileKey(f)!==current.current&&fileKey(f)!==id);next.splice(index<0?0:index,1);}
+      return next;
+    });setTab(id);
+  };
+  useEffect(()=>{
+    if(parentBoard)return;
+    return registerOperatorBoard(target=>{
+      if(target.taskId!==task.id)return false;
+      if(target.kind==='file'){if(!available.includes('files'))return false;openFile(target.taskId,target.path);return true;}
+      if(!panels.show('browser'))return false;setTab('browser');return true;
+    });
+  },[task.id,parentBoard,available.join(','),panels.show]);
+  const seen=useRef<number|null>(null);
+  useEffect(()=>{
+    if(!restored||!openRequest||seen.current===openRequest.sequence)return;
+    seen.current=openRequest.sequence;
+    const target=openRequest.target;
+    if(target.kind==='file')openFile(target.taskId,target.path);
+    else if(target.taskId===task.id&&panels.show('browser'))setTab('browser');
+    onRequestHandled?.(openRequest.sequence);
+  },[openRequest,restored]); // Requests originate in the owning session, including when this panel was collapsed.
+  const lastRefresh=useRef(0);
+  useEffect(()=>{const timer=setTimeout(()=>{lastRefresh.current=Date.now();setTick(n=>n+1);},Math.max(0,700-(Date.now()-lastRefresh.current)));return()=>clearTimeout(timer);},[activity,task.updated_at,running]);
+  useEffect(()=>{if(!running)return;const timer=setInterval(()=>{if(document.visibilityState==='visible')setTick(n=>n+1);},15000);return()=>clearInterval(timer);},[running]);
+  useEffect(()=>{
+    if(!file)return;let alive=true;
+    void backend.stat(file.taskId,file.path).then(stat=>{
+      if(!alive||stat.type!=='file')return;
+      setFiles(previous=>previous.map(f=>fileKey(f)===fileKey(file)&&f.mtime!==stat.mtime?{...f,mtime:stat.mtime,size:stat.size,version:f.mtime===undefined?f.version:f.version+1}:f));
+    },()=>{if(alive)setFiles(previous=>previous.map(f=>fileKey(f)===fileKey(file)&&f.mtime!==-1?{...f,mtime:-1,version:f.version+1}:f));});
+    return()=>{alive=false;};
+  },[backend,active,tick]);
+  const boardView:BoardView={tab:active,dir,file:file?.path??null,files:files.map(file=>file.path),
+    current:file?{path:file.path,sourceId:file.taskId}:null,opened:files.map(file=>({path:file.path,sourceId:file.taskId})),
+    history:boardState?.history??[],browser:active==='browser'?browserPage:null,visible:true,autoContext:autoContext!==false};
+  const viewSignature=JSON.stringify(boardView);
+  useEffect(()=>{if(restored)reportBoardState(task.id,owner,boardView);},[task.id,owner,restored,viewSignature]); // Metadata changes only; file refresh counters do not claim a new view.
+  useEffect(()=>()=>releaseBoardState(task.id,owner),[task.id,owner]);
+  const label=(id:string)=>LABEL[id]??files.find(f=>fileKey(f)===id)?.path.split('/').pop()??id;
+  const close=(id:string)=>{
+    if(id.startsWith('file:'))setFiles(previous=>previous.filter(f=>fileKey(f)!==id));else panels.close(id);
+    if(active===id)setTab(shown.find(item=>item!==id)??'');
+  };
+  return <aside className="sess-rail" aria-label="任务看板" onPointerDown={()=>activateBoardState(task.id,owner)} onClickCapture={()=>activateBoardState(task.id,owner)} onFocusCapture={()=>activateBoardState(task.id,owner)}>
+    <div className="rail-tabs">
+      <div className="operator-file-tabs" ref={tabsRef} role="tablist" aria-label="看板模块">
+        {shown.map(id=><PanelTab key={id} id={id} label={label(id)} active={active===id} onSelect={()=>{const opened=files.find(file=>fileKey(file)===id);if(opened)visitBoardFile(task.id,{path:opened.path,sourceId:opened.taskId});setTab(id);}} onClose={()=>close(id)}/>)}
+      </div>
+      <PanelControls available={available} open={panels.open} label={label} onShow={id=>{panels.show(id);setTab(id);}} onClose={close}/>
+      <button className="rail-collapse" title="刷新看板" aria-label="刷新看板" onClick={()=>setTick(n=>n+1)}>{Icon.restore()}</button>
+      <button className="rail-collapse" onClick={onCollapse} title="隐藏面板" aria-label="隐藏看板">{Icon.chevRight()}</button>
+    </div>
+    <div className="rail-scroll">
+      {!active&&<div className="cli-board-empty">看板模块已全部关闭。通过右上角“管理看板模块”重新打开。</div>}
+      {active==='changes'&&<>
+        {task.fork_commit&&<div className="fork-merge-note">基于「{task.fork_source_title}」派生。合并到 {project.branch} 时，也会包含来源分支尚未合并的改动。</div>}
+        <TaskChanges taskId={task.id} running={running} prUrl={task.pr_url} onMerged={onMerged} onPrCreated={onPrCreated} onResolveWithAI={async id=>{const result=await onResolveWithAI(id);if(result.ok&&!result.merged)onSwitchToChat();return result;}}/>
+      </>}
+      {active==='files'&&<FilesPane backend={backend} jobId={folderTask} dir={dir} onDir={setDir} onOpen={entry=>openFile(folderTask,entry.path)} refreshKey={tick}/>}
+      {file&&<>
+        {file.taskId!==task.id&&<div className="fork-merge-note">正在查看来源任务的文件，不会切换当前执行分支。</div>}
+        <FileViewer key={fileKey(file)} backend={backend} jobId={file.taskId} path={file.path} size={file.size} mtime={file.mtime} version={file.version} reloadKey={file.reloadKey}
+          onOpenPath={path=>openFile(file.taskId,path)}
+          actions={quote?[{label:'引用到对话',onClick:()=>quote({id:`file:${file.taskId}:${file.path}`,author:`文件 ${file.path}`,text:`${file.taskId===task.id?'当前工作区':`来源任务 ${file.taskId} 的工作区`}文件 ${file.path}`})}]:[]}
+          onQuoteText={quote?text=>quote({id:`selection:${file.taskId}:${file.path}`,author:`${file.taskId===task.id?"当前工作区":`来源任务 ${file.taskId} 的工作区`}文件 ${file.path}`,text}):undefined}
+          lead={<button className="cli-fv-back" title="返回文件列表" onClick={()=>{setFolderTask(file.taskId);setDir(file.path.includes('/')?file.path.slice(0,file.path.lastIndexOf('/')):'');panels.show('files');setTab('files');}}>‹</button>}/>
+      </>}
+      {active==='preview'&&features.livePreview&&<PreviewPane project={project}/>}
+      {active==='context'&&<ContextPane task={task} sessions={sessions} running={running} onClear={onClear}/>}
+      {active==='browser'&&features.browser&&<BrowserPane key={task.id} taskId={task.id} onPage={setBrowserPage} onQuote={quote?page=>quote({id:`browser:${task.id}`,author:"浏览器页面",text:`${page.title?`${page.title} — `:""}${page.url}`}):undefined} onQuoteText={quote?(text,page)=>quote({id:`browser-selection:${task.id}`,author:`网页 ${page.title||page.url}`,text}):undefined}/>}
+    </div>
+  </aside>;
+}