@spzxg/cli-ui 0.6.2 → 0.6.6

package/src/operator/node/Chat.tsx

@@ -0,0 +1,517 @@
+"use client";
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { AskQuestion, AskAnswers } from "./protocol/types";
+import { Icon } from "./icons";
+import { agentLabel } from "./agents";
+import { Avatar, Skel } from "./shared";
+import { splitAttachments } from "./format";
+import type { ProjectRow, TaskRow, Msg, AgentsBundle } from "./types";
+import { MessageView, SessionBreak } from "./Transcript";
+import { RENDER_MAX, RENDER_STEP, RENDER_WINDOW, buildTranscriptItems, hasOpenAsk } from "./transcriptModel";
+import { OperatorBoardContext } from "./boardInteraction";
+import { toolDataOf } from "./transcriptModel";
+import { FileLinkContext } from "./fileLinks";
+import { Composer } from "./Composer";
+import { BranchHistory, useBranchHistory } from "./BranchHistory";
+import { BranchNavigator } from "./BranchNavigator";
+import type { Quote } from "./composerDraft";
+import type { RunControlProps } from "./RunControls";
+const QUIET_AFTER_MS = 180_000;
+function RunningIndicator({ agent, startedAt, lastActivityRef }: { agent: string | null; startedAt: number | null; lastActivityRef: React.MutableRefObject<number> }) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, []);
+  const elapsed = startedAt ? Math.max(0, now - startedAt) : null;
+  const quiet = now - lastActivityRef.current;
+  const clock = (ms: number) => {
+    const s = Math.floor(ms / 1000);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const ss = String(s % 60).padStart(2, "0");
+    return h ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+  };
+  return (
+    <div className="msg assistant">
+      <div className="who"><Avatar who="cc" agent={agent} /> 智能体</div>
+      <div className="msg-body run-ind">
+        <span className="typing"><i /><i /><i /></span>
+        {elapsed !== null && <span className="run-ind-t">运行中 · {clock(elapsed)}</span>}
+        {quiet >= QUIET_AFTER_MS && <span className="run-ind-quiet">已 {Math.floor(quiet / 60_000)} 分钟没有新输出（可能在执行耗时操作）；确认卡住时可点输入框右侧的停止按钮</span>}
+      </div>
+    </div>
+  );
+}
+
+// Ref-backed identity-stable wrapper: Orchestrator passes fresh inline handlers
+// on every render, which would defeat MessageView's memo — the wrapper keeps one
+// function identity for the component's lifetime while always invoking the
+// latest handler.
+function useStableHandler<A extends unknown[]>(fn?: (...args: A) => void): (...args: A) => void {
+  const ref = useRef(fn);
+  ref.current = fn;
+  return useCallback((...args: A) => { ref.current?.(...args); }, []);
+}
+
+// Same, for handlers whose result the caller awaits (the input card's submit).
+function useStableAsync<A extends unknown[], R>(fn: (...args: A) => Promise<R>): (...args: A) => Promise<R> {
+  const ref = useRef(fn);
+  ref.current = fn;
+  return useCallback((...args: A) => ref.current(...args), []);
+}
+
+export type ChatProps = {
+  project: ProjectRow; task: TaskRow; tasks: TaskRow[]; agents: AgentsBundle; messages: Msg[];
+  running: boolean; blockedBy?: string[]; transcriptLoading?: boolean;
+  older?: number; onLoadOlder?: (beforeApply?: () => void) => Promise<boolean>;
+  controls: RunControlProps; configBusy: boolean; active?: boolean;
+  onSelectTask: (id: string) => void; onFork: (text: string, sourceIds: string[], requestId: string) => Promise<boolean>;
+  onSend: (text: string) => Promise<boolean>; onStop: () => Promise<boolean>;
+  onStart: () => void; onEdit: () => void; onClear: () => void; onSetSendContext: (v: boolean) => void;
+  onReconnect?: () => void; onAnswer: (askId: string, questions: AskQuestion[], answers: AskAnswers) => void;
+  onCancelQueued: (pendingId: string) => void;
+};
+export function Chat(props: ChatProps) { return <ChatSession key={props.task.id} {...props} />; }
+function ChatSession({ project, task, tasks, agents, messages, running, transcriptLoading, older=0, onLoadOlder,
+  controls, configBusy, active=true, onSelectTask, onFork, onSend, onStop, onClear, onReconnect, onAnswer, onCancelQueued }: ChatProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [quoteRequest, setQuoteRequest] = useState<Quote|null>(null);
+  const flow=useBranchHistory(task,tasks);
+  const fileScope=useMemo(()=>({taskId:task.id}),[task.id]);
+  const hasSession=true;
+  const view=active?'chat':'changes';
+  const quote=(m: Msg, source: TaskRow=task, selected?:string)=>{
+    const text=selected||splitAttachments(m.content).text;
+    if(text.trim()) setQuoteRequest({id:m.id, author:`${m.role==='user'?'你':agentLabel(agents,source.agent)}${source.id===task.id?'':` · ${source.title}`}`,text});
+  };
+  const openBoard=useContext(OperatorBoardContext);
+  const handoffs=useRef<Set<string>|null>(null);
+  useEffect(()=>{
+    if(transcriptLoading)return;
+    const current=messages.filter(m=>m.role==='system'&&m.content.startsWith('🖐')||m.role==='tool'&&toolDataOf(m).input?.status==='pending').map(m=>m.id);
+    if(handoffs.current===null){handoffs.current=new Set(current);return;}
+    const fresh=current.some(id=>!handoffs.current!.has(id));
+    current.forEach(id=>handoffs.current!.add(id));
+    if(fresh)openBoard?.({kind:'browser',taskId:task.id});
+  },[messages,transcriptLoading,openBoard,task.id]);
+  const stableAnswer = useStableHandler(onAnswer);
+  const stableCancelQueued = useStableHandler(onCancelQueued);
+  const stableClear = useStableHandler(onClear);
+  const stableReconnect = useStableHandler(onReconnect);
+  // Retry for an approval-blocked failure (Transcript's APPROVAL_BLOCKED_NOTICE
+  // branch): resend the user message that preceded the failure line — the Codex
+  // driver has since negotiated a working approval policy, so the same message
+  // goes through on the second attempt. Resolved at click time so the memoized
+  // MessageView never needs the surrounding messages.
+  const stableRetry = useStableHandler((msgId: string) => {
+    const at = messages.findIndex((m) => m.id === msgId);
+    for (let j = (at === -1 ? messages.length : at) - 1; j >= 0; j--) {
+      if (messages[j].role === "user") { onSend(messages[j].content); return; }
+    }
+  });
+  // browser_ask_user card → POST the values (lib/browserInput.ts); returns an
+  // error line for the card, or null once the agent has it.
+  const stableInput = useStableAsync(async (inputId: string, values: string[]): Promise<string | null> => {
+    try {
+      const r = await fetch(`/api/tasks/${task.id}/input`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ inputId, values }) });
+      if (r.ok) return null;
+      const j = await r.json().catch(() => null);
+      return j?.error || `提交失败（${r.status}）`;
+    } catch (e) {
+      return e instanceof Error ? e.message : String(e);
+    }
+  });
+  // The 🖐 handoff line's "hand back" button — same action as the browser panel's.
+  const stableBrowser = useStableAsync(async (action: "handback"): Promise<string | null> => {
+    try {
+      const r = await fetch(`/api/tasks/${task.id}/browser`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action }) });
+      if (r.ok) return null;
+      const j = await r.json().catch(() => null);
+      return j?.error || `操作失败（${r.status}）`;
+    } catch (e) {
+      return e instanceof Error ? e.message : String(e);
+    }
+  });
+  // True while a question card is still unanswered — hides the "thinking" dots,
+  // since Claude is parked on the user, not working. Scans the newest rows with
+  // cached parses (transcriptModel), not every tool row's JSON on each event.
+  const awaitingAnswer = useMemo(() => hasOpenAsk(messages), [messages]);
+  // When the current turn started (its user message) and when anything last
+  // arrived — the running indicator shows both, so a stuck turn is told apart
+  // from a busy one.
+  //
+  // A turn this view watched begin is timed on the browser's own clock from
+  // that moment (the new user message may not have echoed back yet, and the
+  // last user message would then be the PREVIOUS turn's). A turn already
+  // running when the view opened is timed from its user message.
+  const lastUserTs = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i--) if (messages[i].role === "user") return messages[i].ts ?? null;
+    return null;
+  }, [messages]);
+  const [runSeenAt, setRunSeenAt] = useState<number | null>(null);
+  const lastActivityRef = useRef(Date.now());
+  const wasRunningRef = useRef(running);
+  useEffect(() => {
+    if (running && !wasRunningRef.current) {
+      setRunSeenAt(Date.now());
+      lastActivityRef.current = Date.now();
+    } else if (!running) {
+      setRunSeenAt(null);
+    }
+    wasRunningRef.current = running;
+  }, [running]);
+  useEffect(() => { lastActivityRef.current = Date.now(); }, [messages]);
+  const turnStartedAt = runSeenAt ?? lastUserTs;
+
+  // Auto-scroll only while the user is parked at the bottom. If they scroll up to
+  // read earlier output, we leave their position alone even as new messages stream
+  // in, and surface a "jump to bottom" button instead.
+  const pinned = useRef(true);
+  const [atBottom, setAtBottom] = useState(true);
+
+  // ---------- windowed transcript ----------
+  // Only a window of rows is in the DOM — never more than RENDER_MAX — so a task
+  // with thousands of messages renders, scrolls and streams like a short one.
+  // While following the output it's the newest RENDER_WINDOW rows. Scrolling back
+  // reveals RENDER_STEP more above at a time (paging older messages in from the
+  // server once the loaded ones run out) and drops rows far below; scrolling down
+  // brings those back. "Jump to latest" returns to following.
+  const items = useMemo(() => buildTranscriptItems(messages, older > 0), [messages, older]);
+  // First / last rendered row by key; null = derived (newest rows).
+  const [win, setWin] = useState<{ start: string | null; end: string | null }>({ start: null, end: null });
+  const { startIdx, endIdx } = useMemo(() => {
+    const find = (key: string | null) => (key ? items.findIndex((it) => it.key === key) : -1);
+    const e = find(win.end);
+    const last = e >= 0 ? e : items.length - 1;
+    let s = find(win.start);
+    // The window is pinned on message rows (labels move when older pages load);
+    // show the session label / break right above its first message.
+    if (s >= 0) while (s > 0 && items[s - 1].kind !== "msg") s--;
+    return { startIdx: s >= 0 && s <= last ? s : Math.max(0, last + 1 - RENDER_WINDOW), endIdx: last };
+  }, [items, win]);
+  const shown = useMemo(() => items.slice(startIdx, endIdx + 1), [items, startIdx, endIdx]);
+  const hiddenAbove = useMemo(() => {
+    let n = older;
+    for (let i = 0; i < startIdx; i++) if (items[i].kind === "msg") n++;
+    return n;
+  }, [items, startIdx, older]);
+  const hiddenBelow = useMemo(() => {
+    let n = 0;
+    for (let i = endIdx + 1; i < items.length; i++) if (items[i].kind === "msg") n++;
+    return n;
+  }, [items, endIdx]);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [expandReq, setExpandReq] = useState(0);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const rangeRef = useRef({ startIdx, endIdx });
+  rangeRef.current = { startIdx, endIdx };
+  const winRef = useRef(win);
+  winRef.current = win;
+  const olderRef = useRef(older);
+  olderRef.current = older;
+  const hiddenRef = useRef({ above: hiddenAbove, below: hiddenBelow });
+  hiddenRef.current = { above: hiddenAbove, below: hiddenBelow };
+  const loadingOlderRef = useRef(false);
+  // A rendered row and where it sat on screen, measured right before rows are
+  // added or dropped above it and restored once THAT window change commits, so
+  // the reader's view stays put.
+  type Anchor = { key: string; top: number };
+  const anchorRef = useRef<(Anchor & { win: typeof win }) | null>(null);
+  // Measured just before an older page is applied (see revealEarlier).
+  const pageAnchorRef = useRef<Anchor | null>(null);
+  // A message-nav click that had to reveal rows first: finish it afterwards.
+  const navAfterRevealRef = useRef<0 | -1 | 1>(0);
+
+  const measure = useCallback((key?: string): Anchor | null => {
+    const el = scrollRef.current;
+    const node = key ? el?.querySelector<HTMLElement>(`[data-tkey="${CSS.escape(key)}"]`) : el?.querySelector<HTMLElement>("[data-tkey][data-msg]");
+    return node?.dataset.tkey ? { key: node.dataset.tkey, top: node.getBoundingClientRect().top } : null;
+  }, []);
+  // Window edges are stored as MESSAGE keys: a session label's position shifts
+  // when older messages are paged in above it, a message's never does.
+  const setRange = useCallback((s: number, e: number, anchor?: Anchor | null) => {
+    const its = itemsRef.current;
+    let a = s;
+    while (a < its.length && its[a].kind !== "msg") a++;
+    let b = e;
+    while (b > 0 && its[b].kind !== "msg") b--;
+    const next = { start: its[a]?.key ?? null, end: e >= its.length - 1 ? null : its[b]?.key ?? null };
+    // Same window: no state change (and no anchor left waiting for a commit that won't come).
+    if (winRef.current.start === next.start && winRef.current.end === next.end) return;
+    if (anchor) anchorRef.current = { ...anchor, win: next };
+    setWin(next);
+  }, []);
+
+  // Grow the window upward over rows already loaded (dropping rows far below).
+  // The current first row stays rendered (RENDER_MAX > RENDER_STEP) and anchors.
+  const growUp = useCallback((anchor?: Anchor | null): boolean => {
+    const { startIdx: s, endIdx: e } = rangeRef.current;
+    if (s <= 0) return false;
+    const ns = Math.max(0, s - RENDER_STEP);
+    setRange(ns, Math.min(e, ns + RENDER_MAX - 1), anchor ?? measure());
+    return true;
+  }, [measure, setRange]);
+
+  // Show earlier rows: loaded ones first, then a page from the server.
+  const revealEarlier = useCallback(async () => {
+    if (loadingOlderRef.current || growUp()) return;
+    if (olderRef.current > 0 && onLoadOlder) {
+      // Hold the window on its current rows so the prepended page lands above
+      // it; the expansion effect below then reveals the bottom of that page,
+      // anchored on where the first row sat right before the page went in.
+      const { startIdx: s, endIdx: e } = rangeRef.current;
+      setRange(s, e);
+      loadingOlderRef.current = true;
+      setLoadingOlder(true);
+      try {
+        if (await onLoadOlder(() => { pageAnchorRef.current = measure(); })) setExpandReq((n) => n + 1);
+      } finally {
+        loadingOlderRef.current = false;
+        setLoadingOlder(false);
+      }
+    }
+  }, [growUp, setRange, measure, onLoadOlder]);
+  // Show later rows again (after scrolling back), dropping rows far above —
+  // anchored on the first row that stays.
+  const revealLater = useCallback(() => {
+    const its = itemsRef.current;
+    const { startIdx: s, endIdx: e } = rangeRef.current;
+    if (e >= its.length - 1) return;
+    const ne = Math.min(its.length - 1, e + RENDER_STEP);
+    const ns = Math.max(s, ne - RENDER_MAX + 1);
+    setRange(ns, ne, ns > s ? measure(its[ns].key) : null);
+  }, [measure, setRange]);
+  const revealRef = useRef({ earlier: revealEarlier, later: revealLater });
+  revealRef.current = { earlier: revealEarlier, later: revealLater };
+
+  // A page of older messages arrived above the window: reveal the bottom of it.
+  useLayoutEffect(() => {
+    if (!expandReq) return;
+    const anchor = pageAnchorRef.current;
+    pageAnchorRef.current = null;
+    growUp(anchor);
+  }, [expandReq, growUp]);
+
+  const onScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    // "At the bottom" means at the newest output — not merely at the end of a
+    // window that stops short of it.
+    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60 && winRef.current.end === null;
+    pinned.current = bottom;
+    setAtBottom(bottom);
+    if (!bottom && winRef.current.start === null) {
+      // Reading back: freeze the window, so new output arriving below doesn't
+      // drop the rows above the reader.
+      const first = itemsRef.current.slice(rangeRef.current.startIdx).find((it) => it.kind === "msg");
+      if (first) setWin((w) => ({ ...w, start: first.key }));
+    } else if (bottom && winRef.current.start !== null) {
+      // Back at the newest output: follow it again (sheds the rows revealed above).
+      setWin({ start: null, end: null });
+    }
+  }, []);
+
+  // Reveal more as the reader nears either end of the window (never while
+  // following the output).
+  const topSentinelRef = useRef<HTMLDivElement>(null);
+  const bottomSentinelRef = useRef<HTMLDivElement>(null);
+  const hasAbove = hiddenAbove > 0;
+  const hasBelow = hiddenBelow > 0;
+  useEffect(() => {
+    const root = scrollRef.current;
+    if (!root || typeof IntersectionObserver === "undefined") return;
+    const watch = (target: HTMLElement | null, margin: string, go: () => void) => {
+      if (!target) return null;
+      const io = new IntersectionObserver((entries) => {
+        if (!pinned.current && entries.some((e) => e.isIntersecting)) go();
+      }, { root, rootMargin: margin });
+      io.observe(target);
+      return io;
+    };
+    const up = hasAbove ? watch(topSentinelRef.current, "1800px 0px 0px 0px", () => void revealRef.current.earlier()) : null;
+    const down = hasBelow ? watch(bottomSentinelRef.current, "0px 0px 1800px 0px", () => revealRef.current.later()) : null;
+    return () => { up?.disconnect(); down?.disconnect(); };
+    // `view`: on mobile the chat pane remounts when toggling chat/changes.
+  }, [hasAbove, hasBelow, view]);
+
+  // Reading back while a long turn keeps streaming: the window's bottom edge
+  // follows the output, so cap it at RENDER_MAX. Reader in the upper half →
+  // stop extending (new output waits below the "show later" control); in the
+  // lower half → drop the oldest rows above instead, holding the view in place.
+  useLayoutEffect(() => {
+    // +2: a session break and label may sit above the first message row.
+    if (win.start === null || win.end !== null || endIdx - startIdx + 1 <= RENDER_MAX + 2) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    if (el.scrollTop < (el.scrollHeight - el.clientHeight) / 2) {
+      setRange(startIdx, startIdx + RENDER_MAX - 1);
+    } else {
+      const ns = endIdx - RENDER_MAX + 1;
+      setRange(ns, endIdx, measure(itemsRef.current[ns].key));
+    }
+  }, [win, startIdx, endIdx, setRange, measure]);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const el = scrollRef.current;
+    if (!el) return;
+    pinned.current = true;
+    setAtBottom(true);
+    // Not showing the newest rows: switch back to following; the pinned layout
+    // effect below lands on the bottom once they render.
+    if (winRef.current.start !== null || winRef.current.end !== null) { setWin({ start: null, end: null }); return; }
+    el.scrollTo({ top: el.scrollHeight, behavior });
+  }, []);
+
+  // Jump between the user's own messages in the transcript. dir < 0 goes to the
+  // previous one above the current scroll position, dir > 0 to the next below it;
+  // queued (not-yet-sent) bubbles are excluded so nav only lands on real turns.
+  // Past the edge of the rendered window it reveals more rows first.
+  const scrollToUserMsg = useCallback((dir: -1 | 1) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const base = el.getBoundingClientRect().top;
+    const tops = Array.from(el.querySelectorAll<HTMLElement>(".msg.user:not(.queued)"))
+      .map((n) => n.getBoundingClientRect().top - base + el.scrollTop);
+    const cur = el.scrollTop;
+    const eps = 8;
+    const candidates = dir < 0 ? tops.filter((t) => t < cur - eps) : tops.filter((t) => t > cur + eps);
+    if (!candidates.length && (dir < 0 ? hiddenRef.current.above : hiddenRef.current.below) > 0) {
+      navAfterRevealRef.current = dir;
+      if (dir < 0) void revealRef.current.earlier();
+      else revealRef.current.later();
+      return;
+    }
+    if (!tops.length) return;
+    const target = candidates.length ? (dir < 0 ? candidates[candidates.length - 1] : candidates[0]) : dir < 0 ? tops[0] : tops[tops.length - 1];
+    el.scrollTo({ top: Math.max(0, target - 12), behavior: "smooth" });
+  }, []);
+
+  // The window moved: put the anchored row back where it was (a no-op where the
+  // browser's own scroll anchoring already did it), then finish a pending nav.
+  // Only the commit of the window change the anchor was measured for restores
+  // it — an intermediate commit (an older page landing) must not consume it.
+  useLayoutEffect(() => {
+    const a = anchorRef.current;
+    const el = scrollRef.current;
+    if (a && a.win === win) {
+      anchorRef.current = null;
+      const node = el?.querySelector<HTMLElement>(`[data-tkey="${CSS.escape(a.key)}"]`);
+      if (el && node) {
+        const delta = node.getBoundingClientRect().top - a.top;
+        if (Math.abs(delta) > 1) el.scrollTop += delta;
+      }
+    }
+    const nav = navAfterRevealRef.current;
+    if (nav && !anchorRef.current) {
+      navAfterRevealRef.current = 0;
+      scrollToUserMsg(nav);
+    }
+  }, [win, scrollToUserMsg]);
+
+  // Following the output: stay on the newest row as content arrives or the
+  // window sheds rows above. Layout effect, so it lands before paint (no jump).
+  useLayoutEffect(() => {
+    if (pinned.current && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, running, startIdx, endIdx]);
+  // …and when the pane itself resizes (the composer growing, a banner
+  // appearing). Content resizes are left alone, so expanding a tool card at
+  // the bottom doesn't yank its top out of view.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => { if (pinned.current) el.scrollTop = el.scrollHeight; });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [hasSession, view]);
+
+  const flowPositioned=useRef(!task.parent_task_id);
+  useLayoutEffect(()=>{
+    if(!active || !flow.ready || flowPositioned.current) return;
+    const el=scrollRef.current;
+    const boundary=Array.from(el?.querySelectorAll<HTMLElement>(".branch-nav")??[]).find(e=>e.dataset.parentId===task.parent_task_id);
+    if(!el || !boundary) return;
+    el.scrollTop+=boundary.getBoundingClientRect().top-el.getBoundingClientRect().top-60;
+    pinned.current=false; setAtBottom(false); flowPositioned.current=true;
+  },[active,flow.ready,task.parent_task_id]);
+  useEffect(()=>{if(!task.parent_task_id && active) scrollToBottom("auto");},[active,task.id]);
+  return (<FileLinkContext.Provider value={fileScope}>
+    <>
+      <div className="transcript-wrap">
+      <div className="transcript" ref={scrollRef} onScroll={onScroll}>
+        <div className="tw">
+          <BranchHistory entries={flow.entries} tasks={tasks} agents={agents} onSelect={onSelectTask} onRetry={flow.retry} onQuote={(m,source,selected)=>quote(m,source,selected)} />
+          {task.parent_task_id && <div className="flow-task-heading current"><span>沿此分支继续</span><strong>{task.title}</strong></div>}
+          {transcriptLoading && messages.length === 0 && (
+            // Snapshot hasn't streamed in yet — sketch a user turn and an agent
+            // reply so opening a started task never flashes an empty chat.
+            <div aria-hidden>
+              <div className="session-label"><span className="ln" />正在加载会话<span className="ln" /></div>
+              <div className="msg user" style={{ opacity: .7 }}>
+                <div className="who"><Skel w={18} h={18} r={5} /><Skel w={34} h={9} /></div>
+                <div className="msg-body"><Skel w="72%" h={12} /><Skel w="46%" h={12} style={{ marginTop: 9 }} /></div>
+              </div>
+              <div className="msg" style={{ opacity: .7 }}>
+                <div className="who"><Skel w={18} h={18} r={5} /><Skel w={70} h={9} /></div>
+                <Skel w="90%" h={11} />
+                <Skel w="83%" h={11} style={{ marginTop: 8 }} />
+                <Skel w="58%" h={11} style={{ marginTop: 8 }} />
+                <Skel w="100%" h={34} r="var(--r)" style={{ marginTop: 12 }} />
+              </div>
+            </div>
+          )}
+          {hasAbove && (
+            <div ref={topSentinelRef} className="load-older">
+              <button className="btn btn-ghost btn-sm" onClick={() => void revealEarlier()} disabled={loadingOlder}>
+                {loadingOlder ? "正在加载更早的消息…" : `加载更早的消息（还有 ${hiddenAbove} 条）`}
+              </button>
+            </div>
+          )}
+          {shown.map((it) =>
+            it.kind === "label" ? (
+              <div key={it.key} data-tkey={it.key} className="session-label"><span className="ln" />第 {it.n} 次会话{it.current ? " · 当前" : ""}<span className="ln" /></div>
+            ) : it.kind === "break" ? (
+              <div key={it.key} data-tkey={it.key}><SessionBreak summary={it.summary} /></div>
+            ) : (
+              <div key={it.key} data-tkey={it.key} data-msg="">
+                <MessageView m={it.m} initial={it.initial} hideWho={it.hideWho} running={running} agent={task.agent} agentLabel={agentLabel(agents, task.agent)} onAnswer={stableAnswer} onCancelQueued={stableCancelQueued} onClear={stableClear} onReconnect={stableReconnect} onRetry={stableRetry} onInput={stableInput} onBrowser={stableBrowser} onQuote={(m,selected)=>quote(m,task,selected)} />
+              </div>
+            )
+          )}
+          {hasBelow && (
+            <div ref={bottomSentinelRef} className="load-older">
+              <button className="btn btn-ghost btn-sm" onClick={revealLater}>显示后面的消息（还有 {hiddenBelow} 条）</button>
+              <button className="btn btn-ghost btn-sm" onClick={() => scrollToBottom("auto")}>跳到最新</button>
+            </div>
+          )}
+          {running && !awaitingAnswer && !hasBelow && (
+            <RunningIndicator agent={task.agent} startedAt={turnStartedAt} lastActivityRef={lastActivityRef} />
+          )}
+          {/* Follow-ups queued mid-turn, pinned below the live turn — they
+              send in order once it ends. */}
+          {!hasBelow && messages.filter((m) => m.role === "queued").map((m) => (
+            <MessageView key={m.id} m={m} initial={false} hideWho={false} onAnswer={stableAnswer} onCancelQueued={stableCancelQueued} />
+          ))}
+          {!hasBelow && <BranchNavigator sourceId={task.id} projectId={project.id} tasks={tasks} completed={task.status==='done'} onSelect={onSelectTask} />}
+        </div>
+      </div>
+      <div className="msg-nav">
+        <button className="msg-nav-btn" onClick={() => scrollToUserMsg(-1)} title="上一条消息" aria-label="滚动到上一条消息">
+          {Icon.chevUp()}
+        </button>
+        <button className="msg-nav-btn" onClick={() => scrollToUserMsg(1)} title="下一条消息" aria-label="滚动到下一条消息">
+          {Icon.chevDown()}
+        </button>
+        {!atBottom && (
+          <button className="msg-nav-btn" onClick={() => scrollToBottom()} title="跳到最新" aria-label="跳到最新">
+            {Icon.toBottom()}
+          </button>
+        )}
+      </div>
+      </div>
+      <Composer tasks={tasks} onFork={onFork} task={task} agentLabel={agentLabel(agents, task.agent)} disabled={task.started!==1} configBusy={configBusy} running={running} onSend={onSend} onStop={onStop} onClear={onClear} quoteRequest={quoteRequest} onQuoteHandled={()=>setQuoteRequest(null)} controls={controls} />
+    </></FileLinkContext.Provider>
+  );
+
+}