@xgspz/cli-ui 0.6.15 → 0.6.16

package/src/operator/node/fileLinks.ts

@@ -5,26 +5,17 @@
 // 打不开。这里改写到 /api/tasks/<id>/files/…（服务端见 lib/taskFiles.ts），
 // Markdown 则改到 /view 预览页渲染。
 import { createContext } from "react";
+import { localFilePath } from "../../ui/fileLinks";
+
+// 本地文件路径的识别规则与中枢适配共用（ui/fileLinks 的 localFilePath）；这里只管改写成节点的文件地址。
+export { localFilePath };
 
 /** 当前渲染的 Markdown 属于哪个任务、相对哪个目录（预览页里是 md 文件所在目录）。 */
 export type FileLinkScope = { taskId: string; baseDir?: string } | null;
 export const FileLinkContext = createContext<FileLinkScope>(null);
 
-const SCHEME = /^[a-z][a-z0-9+.-]*:/i;
 const WIN_ABS = /^[a-z]:[\\/]/i;
 
-function normalize(p: string): string {
-  const abs = p.startsWith("/");
-  const out: string[] = [];
-  for (const seg of p.split("/")) {
-    if (!seg || seg === ".") continue;
-    if (seg === ".." && out.length && out[out.length - 1] !== "..") out.pop();
-    else if (seg === ".." && abs) continue;
-    else out.push(seg);
-  }
-  return (abs ? "/" : "") + out.join("/");
-}
-
 export function isMarkdownPath(p: string): boolean {
   return /\.(md|markdown)$/i.test(p);
 }
@@ -40,31 +31,6 @@ export function markdownViewUrl(taskId: string, p: string): string {
   return `/view?task=${encodeURIComponent(taskId)}&path=${encodeURIComponent(p)}`;
 }
 
-/**
- * 链接指向本地文件时，返回它的路径（相对任务工作目录，或绝对路径）；
- * 网址、锚点、应用自己的地址等返回 null（保持原样）。
- */
-export function localFilePath(href: string | undefined | null, baseDir = ""): string | null {
-  let h = String(href ?? "").trim();
-  if (!h || h.startsWith("#") || h.startsWith("//") || h.startsWith("/api/") || h.startsWith("/view?")) return null;
-  if (/^file:/i.test(h)) h = h.replace(/^file:(\/\/localhost)?(\/\/)?/i, "");
-  else if (SCHEME.test(h) && !WIN_ABS.test(h)) return null;
-  // 去掉查询和锚点（#L12 之类），再解码（Markdown 解析器会把中文转成 %XX）。
-  h = h.replace(/[?#].*$/, "");
-  try {
-    h = decodeURI(h);
-  } catch {
-    // 保持原样
-  }
-  h = h.replace(/\\/g, "/");
-  // 编辑器风格的行号：src/a.ts:12 或 :12:5
-  h = h.replace(/:(\d+)(:\d+)?$/, "");
-  if (!h) return null;
-  if (h === "~" || h.startsWith("~/")) return h;
-  if (h.startsWith("/") || WIN_ABS.test(h)) return WIN_ABS.test(h) ? h : normalize(h);
-  return normalize(baseDir ? `${baseDir.replace(/\/+$/, "")}/${h}` : h);
-}
-
 /** 链接改写的最终结果：Markdown → 预览页；其他文件 → 文件接口；不是本地文件 → null。 */
 export function rewriteFileHref(scope: FileLinkScope, href: string | undefined | null): string | null {
   if (!scope) return null;

package/src/operator/node/format.ts

@@ -1,14 +1,17 @@
-// Pure formatting + derivation helpers shared across the orchestrator modules.
-import type { AskQuestion, AskAnswers } from "./protocol/types";
-import type { Msg, TaskRow, AgentCapabilities, AgentInfo } from "./types";
-import type { InternalUsageEstimate } from "./types";
+// Pure formatting + derivation helpers for the node adapter. The ones both adapters
+// use (tokens, times, sessions, answers, model labels, attachment parsing) live in
+// ui/format and are re-exported here.
+export { buildSessions, clockTime, diffCls, fmtTokens, formatAnswersText, relTime, modelLabel } from "../../ui/format";
+import { fmtTokens, splitAttachments as splitSharedAttachments } from "../../ui/format";
 
-// Compact token count: 1234 → "1.2k", 1_200_000 → "1.2M".
-export function fmtTokens(n: number): string {
-  if (n >= 1e6) return `${(n / 1e6).toFixed(n >= 1e7 ? 0 : 1)}M`;
-  if (n >= 1e3) return `${(n / 1e3).toFixed(n >= 1e4 ? 0 : 1)}k`;
-  return String(n);
+// Attachment chips: parsed by the shared rule (ui/format), linked to the node's upload route.
+export function splitAttachments(content: string): { text: string; attachments: MsgAttachment[] } {
+  const { text, attachments } = splitSharedAttachments(content);
+  return { text, attachments: attachments.map(({ path, kind, name, taskId }) => ({ path, kind, name, url: `/api/tasks/${encodeURIComponent(taskId)}/uploads/${encodeURIComponent(name)}` })) };
 }
+import type { TaskRow, AgentCapabilities, AgentInfo } from "./types";
+import type { InternalUsageEstimate } from "./types";
+
 // Human byte size: 1536 → "1.5 KB", 5_242_880 → "5.0 MB". Base-1024.
 export function fmtBytes(n: number): string {
   if (n <= 0) return "0 B";
@@ -137,61 +140,7 @@ export function contextPct(tokens: number, model: string | null | undefined, cap
   return Math.round((tokens / contextWindowOf(model, caps)) * 1000) / 10;
 }
 
-// Friendly name for a resolved model id — the badge that answers "which model
-// did this turn actually run on?". The VERSION is the point: family aliases move
-// (today "opus" resolves to claude-opus-5, last month claude-opus-4-8), so a bare
-// "Opus" badge tells you nothing. Parse family + version out of the id first
-// ("claude-opus-5" -> "Opus 5", "claude-opus-4-8-20251101" -> "Opus 4.8") and
-// keep the `[1m]` marker, since the 1M variant is a distinct run mode.
-// Non-Claude ids (Codex's "gpt-5.1-codex-max") carry no such version shape —
-// those fall through to the agent's capability labels, matched longest-first so
-// a shorter value can't shadow a more specific one. Raw id is the last resort.
-export function modelLabel(id: string | null, caps?: AgentCapabilities): string {
-  if (!id) return "";
-  const s = id.toLowerCase();
-  const long = s.includes("[1m]") ? " (1M)" : "";
-  const fam = ["fable", "opus", "sonnet", "haiku"].find((f) => s.includes(f));
-  if (fam) {
-    const cap = fam[0].toUpperCase() + fam.slice(1);
-    const v = s.match(new RegExp(`${fam}-(\\d+)(?:-(\\d+))?`));
-    // Deliberately NOT the capability label here: an id we can't read a version
-    // out of shouldn't be badged with a version we're only guessing at.
-    return v ? `${cap} ${v[1]}${v[2] ? `.${v[2]}` : ""}${long}` : `${cap}${long}`;
-  }
-  const hit = (caps?.models ?? [])
-    .filter((o) => s.includes(o.value.toLowerCase()))
-    .sort((a, b) => b.value.length - a.value.length)[0];
-  return hit ? hit.label : id;
-}
 
-// Phrase AskUserQuestion answers as a reply, for the reload fallback where the
-// turn is no longer parked and we resume the session with a normal message.
-export function formatAnswersText(questions: AskQuestion[], answers: AskAnswers): string {
-  const lines = questions.map((q, i) => {
-    const picked = (answers[i] ?? []).filter((s) => s && s.trim());
-    return `- ${q.header || q.question}：${picked.length ? picked.join("、") : "（未选择）"}`;
-  });
-  return `回答你的问题：\n${lines.join("\n")}`;
-}
-// Absolute wall-clock stamp for a transcript message ("3:42 PM", locale-aware).
-// Messages from an earlier day prefix the date, so a task resumed days later
-// still reads right. Absolute on purpose: MessageView is memoized, so a
-// relative "2m ago" would freeze at whatever it said when the row rendered.
-export function clockTime(ts: number): string {
-  const d = new Date(ts);
-  const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-  if (d.toDateString() === new Date().toDateString()) return time;
-  return `${d.toLocaleDateString([], { month: "short", day: "numeric" })}, ${time}`;
-}
-export function relTime(ts: number): string {
-  const d = Date.now() - ts;
-  const m = Math.floor(d / 60000);
-  if (m < 1) return "刚刚";
-  if (m < 60) return `${m} 分钟前`;
-  const h = Math.floor(m / 60);
-  if (h < 24) return `${h} 小时前`;
-  return `${Math.floor(h / 24)} 天前`;
-}
 // How long a task has been waiting on the user, spelled out for the "need you"
 // dropdown ("waiting for 3 hours"). Coarser and more verbose than relTime — this
 // is the only subline a row gets, so it reads as prose rather than a chip.
@@ -233,24 +182,7 @@ export const blockerTitles = (t: TaskRow, byId: Map<string, TaskRow>): string[]
     .filter((b): b is TaskRow => !!b && b.status !== "done" && b.status !== "cancelled")
     .map((b) => b.title);
 
-// add/del/ctx class for a diff line's sign — shared by the peek and full views.
-export const diffCls = (sign: "+" | "-" | " ") => (sign === "+" ? "add" : sign === "-" ? "del" : "ctx");
 
-// group flat messages into per-generation sessions, pulling out the /clear summaries
-export function buildSessions(messages: Msg[]) {
-  const summaryByGen: Record<number, string> = {};
-  for (const m of messages) if (m.role === "session_break") summaryByGen[m.generation] = m.content;
-  // Queued follow-ups are excluded here — they haven't run yet, so SessionView
-  // renders them in a pinned block below the live "thinking" indicator instead
-  // of interleaved with the committed transcript.
-  const committed = messages.filter((m) => m.role !== "queued");
-  const gens = Array.from(new Set(committed.filter((m) => m.role !== "session_break").map((m) => m.generation))).sort((a, b) => a - b);
-  return gens.map((n) => ({
-    n,
-    summaryBefore: summaryByGen[n - 1] ?? null,
-    messages: committed.filter((m) => m.generation === n && m.role !== "session_break"),
-  }));
-}
 
 // ---------- chat attachments (images + large text pastes) ----------
 // An upload travels inside the message text as one marker line per file:
@@ -263,30 +195,6 @@ export function buildSessions(messages: Msg[]) {
 // uploads/<task>/<file> tail, so no extra columns or event fields are needed.
 export const attachmentMarker = (absPath: string) => `[Attached image: ${absPath}]`;
 export const fileAttachmentMarker = (absPath: string) => `[Attached file: ${absPath}]`;
-const ATTACHMENT_RE = /^\[Attached (image|file): (.+)\]$/;
 
 export interface MsgAttachment { path: string; url: string; kind: "image" | "file"; name: string }
 
-// Split a user message into displayable text + attachment chips. Marker lines
-// whose path doesn't end in uploads/<task>/<file> (hand-typed lookalikes) stay
-// in the text untouched.
-export function splitAttachments(content: string): { text: string; attachments: MsgAttachment[] } {
-  if (!content.includes("[Attached image: ") && !content.includes("[Attached file: ")) {
-    return { text: content, attachments: [] };
-  }
-  const attachments: MsgAttachment[] = [];
-  const kept: string[] = [];
-  for (const line of content.split("\n")) {
-    const m = ATTACHMENT_RE.exec(line.trim());
-    const parts = m ? m[2].split(/[\\/]/).filter(Boolean) : [];
-    const upload = parts.length >= 3 && parts[parts.length - 3] === "uploads";
-    const managed = parts.length >= 4 && parts[parts.length - 4] === ".workspace" && parts[parts.length - 3] === "attachments";
-    if (m && (upload || managed) && parts.slice(-2).every(part => part !== "." && part !== "..")) {
-      const [taskId, file] = parts.slice(-2);
-      attachments.push({ path: m[2], url: `/api/tasks/${encodeURIComponent(taskId)}/uploads/${encodeURIComponent(file)}`, kind: m[1] === "image" ? "image" : "file", name: file });
-    } else {
-      kept.push(line);
-    }
-  }
-  return { text: kept.join("\n").trim(), attachments };
-}

package/src/operator/node/github.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Icon } from "./icons";
+import { Icon } from "../../ui/icons";
 import { jget, jsend } from "./api";
 import { LoadNote, Skel, ErrNote } from "./shared";
 import type { GhStatusT, GhLoginT, GhRepoT } from "./types";
-import { useBoundedPoll } from "./boundedPoll";
+import { useRecheckOnReturn } from "./recheckOnReturn";
 
 // The "Clone from GitHub" pane of the new-project modal: shows the guided
 // connect step when the workspace isn't logged in, the user's repo list when
@@ -70,14 +70,15 @@ export function GitHubConnect({ onConnected }: { onConnected: () => void }) {
     setLogin(null);
   };
 
-  // Re-check while gh waits for the user to authorize on github.com — for a
-  // bounded window, and again when the user comes back from github.com (useBoundedPoll).
-  useBoundedPoll(!!login && (login.status === "starting" || login.status === "awaiting"), () => {
+  // Re-check while gh waits for the user to authorize on github.com — when the
+  // user comes back from github.com, or presses 检查状态 (no polling).
+  const checkLogin = () => {
     jget<GhLoginT>("/api/github/login").then((l) => {
       setLogin(l);
       if (l.status === "success" && !done.current) { done.current = true; onConnected(); }
     }).catch(() => {});
-  }, 2000, 10 * 60_000);
+  };
+  useRecheckOnReturn(!!login && (login.status === "starting" || login.status === "awaiting"), checkLogin);
 
   const copyCode = () => {
     if (!login?.code) return;
@@ -99,7 +100,7 @@ export function GitHubConnect({ onConnected }: { onConnected: () => void }) {
       </div>
     );
   }
-  if (login.status === "starting") return <LoadNote style={{ padding: 0, marginBottom: 14 }}>正在启动 GitHub 登录…</LoadNote>;
+  if (login.status === "starting") return <div className="field"><LoadNote style={{ padding: 0, marginBottom: 8 }}>正在启动 GitHub 登录…</LoadNote><button className="btn btn-ghost btn-sm" onClick={checkLogin} style={{ alignSelf: "flex-start" }}>检查状态</button></div>;
   if (login.status === "awaiting") {
     return (
       <div className="field" style={{ border: "1px solid var(--line-strong)", borderRadius: "var(--r)", background: "var(--raise)", padding: "14px 16px" }}>
@@ -115,9 +116,10 @@ export function GitHubConnect({ onConnected }: { onConnected: () => void }) {
           <a className="btn btn-accent" href={login.url ?? "https://github.com/login/device"} target="_blank" rel="noreferrer">
             {Icon.github()} 打开 github.com/login/device
           </a>
+          <button className="btn btn-line" onClick={checkLogin}>我已完成授权，检查状态</button>
           <button className="btn btn-ghost" onClick={cancel}>取消</button>
         </div>
-        <div className="hlp" style={{ marginBottom: 0 }}>等待你在 github.com 上完成授权…</div>
+        <div className="hlp" style={{ marginBottom: 0 }}>等待你在 github.com 上完成授权…回到这个页面时会自动检查一次。</div>
       </div>
     );
   }

package/src/operator/node/modals.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Priority } from "./protocol/types";
-import { Icon } from "./icons";
+import { Icon } from "../../ui/icons";
 import { jget, jsend } from "./api";
 import { relTime, duration, fmtJobCost } from "./format";
 import { type ProjectRow, type ProjectSession, type TaskRow, type AgentsBundle, type InternalUsageEstimate, type ProjectDeletePreview } from "./types";
@@ -12,7 +12,7 @@ import { Modal, BrowseDirButton, PrioritySeg, DepPicker } from "./Modal";
 import { GitHubClonePicker } from "./github";
 import { Markdown } from "./Markdown";
 import { clientFeatures } from "./protocol/features";
-import { useBoundedPoll } from "./boundedPoll";
+import { useRecheckOnReturn } from "./recheckOnReturn";
 
 // One-click copy, with the button itself confirming. Used for the project id and
 // for the ready-to-run curl snippets below it.
@@ -331,7 +331,7 @@ export function EditTaskModal({ task, tasks, agents, onClose, onSave, onDelete,
 }
 
 // Mirror of the server's RefreshState (lib/contextRefresh.ts) — the detached
-// "Refresh with AI" job state the modal polls.
+// "Refresh with AI" job state the modal re-reads (on return / 检查结果).
 type RefreshState = { status: "idle" | "running" | "done" | "error"; draft: string; error: string; started_at: number; estimate?: InternalUsageEstimate | null };
 
 export function ContextModal({ project, agents, onSetDefaultAgent, onClose, onSave, onDelete, onDeprecate }: { project: ProjectRow; agents: AgentsBundle; onSetDefaultAgent: (agent: string) => void; onClose: () => void; onSave: (p: { name: string; context: string; send_context: number; repo_path: string; branch: string; dev_command: string; setup_command: string; test_command: string }) => void; onDelete: (confirm?: { delete_storage: string }) => Promise<void> | void; onDeprecate: () => void }) {
@@ -370,7 +370,7 @@ export function ContextModal({ project, agents, onSetDefaultAgent, onClose, onSa
   const showServices = clientFeatures().services;
   // AI context refresh: let Claude read the repo and draft fresh context. The
   // draft now runs as a DETACHED server-side job (it can take minutes and must
-  // survive sleep/reload), so the client starts it and polls for the result
+  // survive sleep/reload), so the client starts it and re-reads the result
   // rather than holding one long request open. The drafted text replaces the
   // textarea but isn't saved until Save — we stash the prior text for Undo.
   const [refreshing, setRefreshing] = useState(false);
@@ -383,18 +383,18 @@ export function ContextModal({ project, agents, onSetDefaultAgent, onClose, onSa
   const showPreview = preview && !refreshing;
 
   // Latest edited context, read inside async handlers without making them
-  // depend on `context` (which would churn the polling effect / stale-close it).
+  // depend on `context` (which would churn the re-check effect / stale-close it).
   const contextRef = useRef(context);
   contextRef.current = context;
   // started_at of the job whose result we've already applied — so a draft is
-  // consumed exactly once even if a POST reply and a poll tick race.
+  // consumed exactly once even if a POST reply and a re-check race.
   const appliedRef = useRef(0);
 
   const ackRefresh = useCallback(() => {
     jsend(`/api/projects/${project.id}/refresh-context`, "DELETE").catch(() => {});
   }, [project.id]);
 
-  // Fold a polled job state into the UI. Idempotent: applies a finished draft at
+  // Fold a re-read job state into the UI. Idempotent: applies a finished draft at
   // most once, then acks it so it doesn't resurface on the next modal open.
   const handleState = useCallback((s: RefreshState) => {
     setRefreshEstimate(s.estimate ?? null);
@@ -425,12 +425,13 @@ export function ContextModal({ project, agents, onSetDefaultAgent, onClose, onSa
     return () => { alive = false; };
   }, [project.id, handleState]);
 
-  // While a job runs, re-check its result — for a bounded window, and again when
-  // the user comes back (useBoundedPoll). Stops when refreshing flips false
-  // (terminal state) or the modal unmounts — the job keeps running server-side.
-  useBoundedPoll(refreshing, () => {
+  // While a job runs, re-check its result when the user comes back to this tab or
+  // presses 检查结果 (useRecheckOnReturn; no polling). Stops when refreshing flips
+  // false (terminal state) or the modal unmounts — the job keeps running server-side.
+  const checkRefresh = () => {
     jget<RefreshState>(`/api/projects/${project.id}/refresh-context`).then(handleState).catch(() => {});
-  }, 2500, 15 * 60_000);
+  };
+  useRecheckOnReturn(refreshing, checkRefresh);
 
   const refreshContext = async () => {
     if (refreshing) return;
@@ -510,7 +511,8 @@ export function ContextModal({ project, agents, onSetDefaultAgent, onClose, onSa
         ) : refreshing ? (
           <div className="hlp" style={{ display: "flex", alignItems: "center", gap: 8 }}>
             <span className="typing"><i /><i /><i /></span>
-            正在浏览 {repo.split("/").pop() || "仓库"} 以起草新的上下文 —— 可能需要一分钟。
+            正在浏览 {repo.split("/").pop() || "仓库"} 以起草新的上下文 —— 可能需要一分钟；切走再回来时会自动检查。
+            <button className="linkbtn" onClick={checkRefresh}>检查结果</button>
           </div>
         ) : prevContext != null ? (
           <div className="hlp">已根据仓库起草。请审阅并修改后保存 —— 或点击「撤销」还原。</div>

package/src/operator/node/recheckOnReturn.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+/**
+ * Re-check something that settles elsewhere (a browser-side login approval, a
+ * server job) without polling: no timer ever calls `check`. While `active`, it
+ * runs once whenever the user comes back — the tab becomes visible, the window
+ * regains focus, the network is back — which is when a login approved in
+ * another tab (or a job that finished meanwhile) has most likely settled.
+ * Callers also show an explicit "检查状态" button wired to the same `check`.
+ */
+export function useRecheckOnReturn(active: boolean, check: () => void): void {
+  const latest = useRef(check);
+  latest.current = check;
+  useEffect(() => {
+    if (!active) return;
+    const wake = () => { if (document.visibilityState !== "hidden") latest.current(); };
+    window.addEventListener("focus", wake);
+    window.addEventListener("online", wake);
+    document.addEventListener("visibilitychange", wake);
+    return () => {
+      window.removeEventListener("focus", wake);
+      window.removeEventListener("online", wake);
+      document.removeEventListener("visibilitychange", wake);
+    };
+  }, [active]);
+}

package/src/operator/node/shared.tsx

@@ -1,21 +1,16 @@
 "use client";
 
 import type { Priority, Status } from "./protocol/types";
-import { Icon, AgentMark } from "./icons";
+import { Icon } from "../../ui/icons";
+import { Spinner, StatusDot as SharedStatusDot } from "../../ui/shared";
 import { SCLS, SLABEL, AWAIT_LABEL } from "./types";
 
+// Signal language (mission-control): "needs your input" is an alert coral, a
+// *live* working session is blue (both pulse), an idle status falls back to its
+// base color; awaiting wins over running. Drawn by the shared dot (ui/shared),
+// keyed here by the node's task status.
 export function StatusDot({ status, running, awaiting, lg }: { status: Status; running?: boolean; awaiting?: boolean; lg?: boolean }) {
-  // Signal language (mission-control): "needs your input" is an alert coral, a
-  // *live* working session is blue (both pulse to draw the eye), and an idle
-  // status falls back to its base color. Awaiting wins over running — a turn
-  // parked on a question is technically live but it's really waiting on you.
-  const cls = awaiting ? "c" : running ? "b" : SCLS[status];
-  return (
-    <span
-      className={`sdot ${cls} ${lg ? "lg" : ""} ${awaiting || running ? "pulse" : ""}`}
-      title={awaiting ? AWAIT_LABEL : running ? "运行中" : SLABEL[status]}
-    />
-  );
+  return <SharedStatusDot cls={SCLS[status]} running={running} awaiting={awaiting} lg={lg} title={awaiting ? AWAIT_LABEL : running ? "运行中" : SLABEL[status]} />;
 }
 
 export function PriPill({ p }: { p: Priority }) {
@@ -37,53 +32,18 @@ export function SearchBar({ value, onChange, placeholder }: { value: string; onC
   );
 }
 
-// Chat avatar. The assistant side wears the brand mark of the agent the task
-// actually runs on (Claude / Codex), so a transcript says at a glance who wrote
-// it; an unknown or missing agent id falls back to the generic bolt.
-export function Avatar({ who, agent }: { who: "user" | "cc"; agent?: string | null }) {
-  if (who === "user") return <span className="av you">A</span>;
-  const mark = agent ? AgentMark[agent] : undefined;
-  return <span className={`av cc${mark ? ` ${agent}` : ""}`}>{mark ? mark() : Icon.bolt()}</span>;
-}
-
-// Which agent driver a task runs under (Claude Code / Codex …). Hidden when only
-// one agent is available (nothing to disambiguate) so single-agent workspaces
-// stay clutter-free. `multi` is passed by the caller from the agents bundle.
-export function AgentBadge({ label, multi }: { label: string; multi: boolean }) {
-  if (!multi) return null;
-  return <span className="agent-badge" title={`运行于 ${label}`}>{label}</span>;
-}
+// Avatar (the agent's brand mark), AgentBadge (hidden when only one agent is
+// configured: pass `multi`), Spinner, Skel and ErrNote are the shared ones.
+export { Avatar, AgentBadge, Spinner, Skel, ErrNote } from "../../ui/shared";
 
 // ---- async-state primitives (pair with the .spinner/.load-note/.skel/.err-note
 // styles in globals.css) — every panel that fetches uses these, so loading and
 // error presentation stays uniform across the app. ----
 
-export function Spinner({ size }: { size?: number }) {
-  return <span className="spinner" role="status" aria-label="加载中" style={size ? { width: size, height: size } : undefined} />;
-}
-
 // Standard "we're fetching" line: spinner + quiet text. Replaces bare "Loading…".
 export function LoadNote({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) {
   return <div className="load-note" style={style}><Spinner size={13} />{children}</div>;
 }
 
-// One shimmer bar. Compose a few for card/list/transcript skeletons.
-export function Skel({ w, h = 10, r, style }: { w: number | string; h?: number; r?: number | string; style?: React.CSSProperties }) {
-  return <span className="skel" aria-hidden style={{ width: w, height: h, ...(r !== undefined ? { borderRadius: r } : null), ...style }} />;
-}
-
-// Recoverable-error line: the message plus an inline Retry when the caller can
-// simply refetch. Same warm-red voice as transcript system errors.
-export function ErrNote({ children, onRetry, retryLabel = "重试", style }: {
-  children: React.ReactNode; onRetry?: () => void; retryLabel?: string; style?: React.CSSProperties;
-}) {
-  return (
-    <div className="err-note" style={style}>
-      <span className="err-msg">⚠ {children}</span>
-      {onRetry && <button className="btn btn-line btn-sm" onClick={onRetry}>{Icon.restore()} {retryLabel}</button>}
-    </div>
-  );
-}
-
 // One shared accessible popover for the full workspace and standalone controls.
 export { Popover } from "../../ui/Popover";

package/src/operator/node/useTaskStream.ts

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState, type MutableRefObject } from
 import type { TaskStreamEvent, ToolData, AskAnswers, Message } from "./protocol/types";
 import { jget } from "./api";
 import { openLive } from "./liveStream";
-import { HISTORY_PAGE, SNAPSHOT_TAIL, indexFromEnd, mergeSnapshot, toolDataOf, touchRecent, trimToTail } from "./transcriptModel";
+import { HISTORY_PAGE, SNAPSHOT_TAIL, indexFromEnd, mergeSnapshot, toolDataOf, touchRecent, trimToTail } from "../../ui/transcriptModel";
 import { contextPct } from "./format";
 import { capsFor } from "./agents";
 import type { AgentsBundle, Msg, ProjectRow, TaskRow } from "./types";
@@ -96,7 +96,7 @@ export function useTaskStream({ selTask, selProjRef, agentsRef, setTaskRunning,
       // objects, so a reconnect doesn't re-render the whole transcript.
       const committed: Msg[] = ev.messages.map(toMsg);
       const queued: Msg[] = ev.pending.map((p) => ({ id: p.id, role: "queued" as const, content: p.content, generation: p.generation, ts: p.created_at }));
-      const merged = mergeSnapshot(msgsRef.current[taskId], committed, queued, ev.older ?? 0);
+      const merged = mergeSnapshot(msgsRef.current[taskId], committed, ev.older ?? 0, queued);
       msgsRef.current = { ...msgsRef.current, [taskId]: merged.msgs };
       setMsgsByTask((prev) => ({ ...prev, [taskId]: merged.msgs }));
       setOlderByTask((prev) => ({ ...prev, [taskId]: merged.older }));

package/src/styles.css

@@ -183,6 +183,11 @@
 .cli-ui .cli-fv-csv th{position:sticky;top:0;background:var(--surface-2);font-weight:600;}
 .cli-ui .cli-fv-note{padding:18px 16px;font-size:13px;color:var(--ink-3);line-height:1.7;}
 .cli-ui .cli-fv-note.err{color:var(--red);}
+/* 相对路径打不开时按对话线索补全：查找中 / 几个候选（见 board/pathResolve.ts）。 */
+.cli-ui .cli-fv-resolve{margin-top:10px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
+.cli-ui .cli-fv-candidate{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);border:1px solid var(--line-2);}
+.cli-ui .cli-fv-resolved{color:var(--ink-2);overflow-wrap:anywhere;}
+.cli-ui .cli-fv-resolved code{font-family:var(--mono);font-size:11.5px;}
 .cli-ui .cli-zip-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
 .cli-ui .cli-zip-meter{flex:1 1 100%;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden;}
 .cli-ui .cli-zip-meter>span{display:block;height:100%;background:var(--accent);transition:width .2s;}

package/src/ui/Markdown.tsx

@@ -1,4 +1,4 @@
-import { memo, useContext, type ComponentProps, type MouseEvent } from "react";
+import { memo, useContext, type ComponentProps, type MouseEvent, type ReactNode } from "react";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
@@ -24,11 +24,6 @@ function MdLink({ href, children, ...props }: ComponentProps<"a">) {
   return <a {...props} href={href} target="_blank" rel="noreferrer">{children}</a>;
 }
 
-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 resolve = useContext(FileLinkContext);
   const local = typeof src === "string" ? localFilePath(src) : null;
@@ -41,20 +36,40 @@ function MdImg({ src, alt, ...props }: ComponentProps<"img">) {
   return <img {...props} alt={alt ?? ""} src={src} />;
 }
 
-// 缺省的地址处理会把 file: 等非网页协议清空；放行 file: 和 Windows 路径，交给上面按本地文件处理（与 Operator 一致）。
+// 缺省的地址处理会把 file: 等非网页协议清空；放行 file: 和 Windows 路径，交给链接 / 图片组件按本地文件处理（与 Operator 一致）。
 const urlTransform = (url: string) => (/^file:/i.test(url) || /^[a-z]:[\\/]/i.test(url) ? url : defaultUrlTransform(url));
 
-export const Markdown = memo(function Markdown({ children, highlight = true }: { children: string; highlight?: boolean }) {
-  return (
-    <div className="md">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={highlight ? [[rehypeHighlight, { detect: false, ignoreMissing: true }]] : []}
-        components={{ a: MdLink, img: MdImg, code: MdCode }}
-        urlTransform={urlTransform}
-      >
-        {children}
-      </ReactMarkdown>
-    </div>
-  );
-});
+/** 本地文件链接 / 图片怎么打开：各适配自己给（中枢：看板或宿主给的地址；节点：任务的文件接口）。其余渲染规则共用。 */
+export interface MarkdownLinks {
+  Link: (props: ComponentProps<"a">) => ReactNode;
+  Image: (props: ComponentProps<"img">) => ReactNode;
+}
+
+/**
+ * 智能体 markdown 输出的渲染器（中枢与节点适配共用）：标题、列表、表格、带语言的代码块（高亮）、行内代码、链接。
+ * 只高亮写明语言的代码块（自动识别在流式输出时很耗），并 memo，文字没变的消息重渲染时跳过整个解析。
+ * 长得像文件路径的行内代码（report.md、src/a.ts:12）按本地文件链接处理。
+ */
+export function createMarkdown({ Link, Image }: MarkdownLinks) {
+  function Code({ children, ...props }: ComponentProps<"code">) {
+    const path = inlineFilePath(children);
+    return path ? <Link href={path}><code {...props}>{children}</code></Link> : <code {...props}>{children}</code>;
+  }
+  const components = { a: Link, img: Image, code: Code };
+  return memo(function Markdown({ children, highlight = true }: { children: string; highlight?: boolean }) {
+    return (
+      <div className="md">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={highlight ? [[rehypeHighlight, { detect: false, ignoreMissing: true }]] : []}
+          components={components}
+          urlTransform={urlTransform}
+        >
+          {children}
+        </ReactMarkdown>
+      </div>
+    );
+  });
+}
+
+export const Markdown = createMarkdown({ Link: MdLink, Image: MdImg });

package/src/ui/Transcript.tsx

@@ -24,7 +24,8 @@ const LOUD_NOTICES = [
 ];
 const APPROVAL_BLOCKED = LOUD_NOTICES[3];
 
-function PeekView({ peek, expandable, onExpand }: { peek: ToolPeek; expandable: boolean; onExpand: () => void }) {
+// 工具卡片、提问卡片、浏览器输入卡片、会话分隔：中枢与节点适配共用（节点的 Transcript 只自己画消息行）。
+export function PeekView({ peek, expandable, onExpand }: { peek: ToolPeek; expandable: boolean; onExpand: () => void }) {
   const corner = <span className="tcorner">⎿</span>;
   if (peek.kind === "count") {
     return (
@@ -64,7 +65,7 @@ function PeekView({ peek, expandable, onExpand }: { peek: ToolPeek; expandable:
   );
 }
 
-function ToolView({ data }: { data: ToolData }) {
+export function ToolView({ data }: { data: ToolData }) {
   const [open, setOpen] = useState<boolean | null>(null);
   const bodyId = useId();
   const hasDiff = !!data.diff?.length;
@@ -96,7 +97,7 @@ function ToolView({ data }: { data: ToolData }) {
 }
 
 // AskUserQuestion 卡片。对话任务里回答 = 发下一条消息（节点上的回合已经结束），所以提交后由上层组成文字发出。
-function AskView({ data, agentLabel, onAnswer }: { data: ToolData; agentLabel: string; onAnswer?: (answers: AskAnswers) => Promise<void> | void }) {
+export function AskView({ data, agentLabel, onAnswer }: { data: ToolData; agentLabel: string; onAnswer?: (answers: AskAnswers) => Promise<void> | void }) {
   const questions = data.ask?.questions ?? [];
   const existing = data.ask?.answers;
   const [state, setState] = useState(() => questions.map(() => ({ picked: [] as string[], other: "" })));
@@ -164,7 +165,8 @@ function AskView({ data, agentLabel, onAnswer }: { data: ToolData; agentLabel: s
 // browser_ask_user 卡片：移植自 Operator 的 InputView（已答 / 已取消 / 等待中）。
 // 能不能在这里提交取决于数据后端：Operator 后端可以直接把值交给浏览器脚本（onSubmit）；
 // center 的对话任务在 Agent 等输入时会结束那一轮，卡片随即变成「已取消」，这里不提供提交，只显示等待中的字段。
-function InputView({ input, agentLabel, onSubmit, onBrowser }: { input: InputRequest; agentLabel: string; onSubmit?: (id: string, values: string[]) => Promise<string | null>; onBrowser?: () => void }) {
+/** unavailableNote：没有提交能力时的说明（缺省说明去节点界面提交；节点适配自己的只读视图传 null）。 */
+export function InputView({ input, agentLabel, onSubmit, onBrowser, unavailableNote = "请在执行节点的 Operator 界面里提交（密码只交给浏览器脚本，不经对话发送）" }: { input: InputRequest; agentLabel: string; onSubmit?: (id: string, values: string[]) => Promise<string | null>; onBrowser?: () => void; unavailableNote?: string | null }) {
   const [vals, setVals] = useState<string[]>(() => input.fields.map(() => ""));
   const [shown, setShown] = useState<boolean[]>(() => input.fields.map(() => false));
   const [busy, setBusy] = useState(false);
@@ -221,6 +223,7 @@ function InputView({ input, agentLabel, onSubmit, onBrowser }: { input: InputReq
                 placeholder={f.options?.length ? "其他…" : f.placeholder || `输入${f.label}`}
                 value={f.options?.includes(vals[i]) ? "" : vals[i]}
                 disabled={busy || !canSubmit}
+                autoFocus={canSubmit && i === 0 && !f.options?.length}
                 onChange={(e) => set(i, e.target.value)}
                 onKeyDown={(e) => { if (e.key === "Enter" && !e.nativeEvent.isComposing) void submit(); }}
               />
@@ -236,7 +239,7 @@ function InputView({ input, agentLabel, onSubmit, onBrowser }: { input: InputReq
       <div className="ask-foot" style={{ gap: 8, alignItems: "center" }}>
         {err && <span className="input-err">{err}</span>}
         {!err && canSubmit && input.fields.some((f) => f.secret) && <span className="input-note">密码只交给浏览器脚本，不保存、不发给模型</span>}
-        {!canSubmit && <span className="input-note">请在执行节点的 Operator 界面里提交（密码只交给浏览器脚本，不经对话发送）</span>}
+        {!canSubmit && unavailableNote && <span className="input-note">{unavailableNote}</span>}
         <span style={{ flex: 1 }} />
         {onBrowser && <button className="btn btn-line btn-sm" onClick={onBrowser}>查看浏览器</button>}
         <button className="btn btn-accent btn-sm" onClick={() => void submit()} disabled={!complete || busy || !canSubmit}>{busy ? "发送中…" : "提交"}</button>