@spzxg/cli-ui 0.6.2 → 0.6.5

package/src/operator/node/usePrefs.ts

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState, type MutableRefObject } from "react";
+import { LS, loadPersist } from "./persist";
+import { reconcileHistory, closeOneLevel, type NavSel } from "./navHistory";
+import {
+  DEFAULT_APPEARANCE, DEFAULT_SETTINGS, DEFAULT_LAYOUT,
+  type Appearance, type Settings, type Layout, type View, type TaskView,
+} from "./types";
+
+// Mirror of Orchestrator's mobile breakpoint — the Back-button trap only arms on
+// mobile (single-pane), since on desktop every column is visible and Back should
+// not be hijacked to close a panel.
+const MOBILE_QUERY = "(max-width: 760px)";
+
+// Owns the cosmetic/client-only preferences (appearance, settings, layout) and the
+// active work-area view, plus the hydrate-once + persist/URL-sync effects. The
+// open project/task are passed in so they get mirrored into localStorage + URL
+// alongside the prefs (URL keeps a refresh landing where you were). The setters
+// are passed in so the Back button (popstate) can close one pane level — on
+// mobile this is the only way to step session → tasks → projects.
+export function usePrefs({ selProj, selTask, urlSelRef, setSelProj, setSelTask }: {
+  selProj: string | null;
+  selTask: string | null;
+  urlSelRef: MutableRefObject<{ project?: string; task?: string; view?: string } | null>;
+  setSelProj: (id: string | null) => void;
+  setSelTask: (id: string | null) => void;
+}) {
+  const [view, setView] = useState<View>("workspace");
+  const [taskView, setTaskView] = useState<TaskView>("list");
+  const [appearance, setAppearance] = useState<Appearance>(DEFAULT_APPEARANCE);
+  const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS);
+  const [layout, setLayout] = useState<Layout>(DEFAULT_LAYOUT);
+  const [hydrated, setHydrated] = useState(false);
+
+  // Latest selection, read by the once-attached popstate handler without
+  // re-subscribing. Updated every render (cheap, and refs are render-safe here).
+  const selRef = useRef<NavSel>({ proj: selProj, task: selTask, view });
+  selRef.current = { proj: selProj, task: selTask, view };
+
+  // Apply persisted preferences before the first hydrated paint.
+  useLayoutEffect(() => {
+    const p = loadPersist();
+    if (p.appearance) setAppearance({ ...DEFAULT_APPEARANCE, ...p.appearance });
+    if (p.settings) setSettings({ ...DEFAULT_SETTINGS, ...p.settings });
+    // The projects column starts hidden on every load, whatever was saved.
+    if (p.layout) setLayout({ ...DEFAULT_LAYOUT, ...p.layout, projCollapsed: DEFAULT_LAYOUT.projCollapsed });
+    if (p.taskView === "board") setTaskView("board");
+    const urlView = urlSelRef.current?.view;
+    if (urlView === "settings" || urlView === "insights") setView(urlView);
+    setHydrated(true);
+  }, [urlSelRef]);
+
+  // Apply the whole palette before paint. Hover transitions must not interpolate
+  // old dark backgrounds underneath the new light-theme text (or vice versa).
+  useLayoutEffect(() => {
+    if (!hydrated) return;
+    const root = document.documentElement;
+    if (root.dataset.theme === appearance.theme) return;
+    root.setAttribute("data-theme-changing", "");
+    root.setAttribute("data-theme", appearance.theme);
+    // Keep the guard for one painted frame, then restore normal hover feedback.
+    let frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(() => root.removeAttribute("data-theme-changing"));
+    });
+    return () => { cancelAnimationFrame(frame); root.removeAttribute("data-theme-changing"); };
+  }, [appearance.theme, hydrated]);
+
+  // persist + apply appearance
+  useEffect(() => {
+    if (!hydrated) return;
+    document.documentElement.style.setProperty("--density", appearance.density);
+    try { localStorage.setItem(LS, JSON.stringify({ selProj, selTask, appearance, settings, layout, taskView })); } catch { /* Session remains usable when storage is unavailable. */ }
+
+    // Mirror the open project/task + active view into the URL (refresh-restore)
+    // and, on mobile, keep a single Back-trap entry on top while a pane is open
+    // so the device Back button steps session → tasks → projects. (See navHistory.)
+    const armTrap = window.matchMedia(MOBILE_QUERY).matches;
+    reconcileHistory(window.history, window.location.pathname, { proj: selProj, task: selTask, view }, armTrap);
+  }, [appearance, settings, layout, taskView, selProj, selTask, view, hydrated]);
+
+  // Resizing/rotating can reveal mobile Back buttons without changing selection.
+  // Arm the same-document history entry immediately at that breakpoint; waiting
+  // for a preference/selection change lets the first Back leave the workspace.
+  useLayoutEffect(() => {
+    if (!hydrated) return;
+    const mq = window.matchMedia(MOBILE_QUERY);
+    const sync = () => reconcileHistory(window.history, window.location.pathname, selRef.current, mq.matches);
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, [hydrated]);
+
+  // Back button: consume the trap and close exactly one pane level. The setState
+  // calls re-run the persist effect, which re-arms the trap if a pane is still
+  // open (pushState fires no popstate, so no loop). Driving off the live
+  // selection — not the popped URL — makes this immune to the task list churning
+  // selTask, which would otherwise leave stale duplicate history entries.
+  useEffect(() => {
+    const onPop = () => {
+      const next = closeOneLevel(selRef.current);
+      setSelProj(next.proj);
+      setSelTask(next.task);
+      setView(next.view);
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [setSelProj, setSelTask]);
+
+  const setAppearanceKey = (k: keyof Appearance, v: string) => setAppearance((a) => ({ ...a, [k]: v }));
+  const setSetting = <K extends keyof Settings>(k: K, v: Settings[K]) => setSettings((s) => ({ ...s, [k]: v }));
+
+  return { view, setView, taskView, setTaskView, appearance, setAppearance: setAppearanceKey, settings, setSetting, setSettings, layout, setLayout, hydrated };
+}

package/src/operator/node/useRecaps.ts

@@ -0,0 +1,91 @@
+"use client";
+
+import { useCallback, useEffect, useState, type MutableRefObject } from "react";
+import { jget, jsend } from "./api";
+import type { RecapInfo, TaskRow } from "./types";
+
+// Owns project "where you left off" recaps plus the selection-on-landing logic:
+// fetch/generate a recap when entering a project, sweep stale projects on an
+// interval, and decide whether to land on the recap or auto-pick the first task.
+export function useRecaps({ selProj, selTask, tasks, setSelTask, selProjRef, settingsReady, backgroundJobs, recapMode }: {
+  selProj: string | null;
+  selTask: string | null;
+  tasks: TaskRow[];
+  setSelTask: (id: string | null) => void;
+  selProjRef: MutableRefObject<string | null>;
+  settingsReady: boolean;
+  backgroundJobs: boolean;
+  recapMode: "automatic" | "on_open" | "off";
+}) {
+  const [recaps, setRecaps] = useState<Record<string, RecapInfo>>({});
+
+  // Fetch a project's recap status; if it's gone stale with new activity and
+  // none is ready yet, generate one on demand (so it's there the moment you land).
+  const fetchRecap = useCallback(async (pid: string, regen = false) => {
+    try {
+      let info = await jget<RecapInfo>(`/api/projects/${pid}/recap`);
+      setRecaps((m) => ({ ...m, [pid]: info }));
+      const unattended = !regen;
+      const canGenerate = regen || (settingsReady && backgroundJobs && recapMode !== "off");
+      if (canGenerate && (regen || (info.needsRecap && !info.recap && !info.generating))) {
+        setRecaps((m) => ({ ...m, [pid]: { ...info, generating: true } }));
+        const g = await jsend<{ recap: string; recap_at: number }>(`/api/projects/${pid}/recap`, "POST", { unattended });
+        info = { ...info, recap: g.recap, recap_at: g.recap_at, needsRecap: false, generating: false, hasHistory: true };
+        setRecaps((m) => ({ ...m, [pid]: info }));
+      }
+    } catch (e) {
+      // Keep whatever we had (an older recap is still useful) and record the
+      // failure so the landing pane can offer a retry.
+      const msg = e instanceof Error ? e.message : String(e);
+      setRecaps((m) => ({ ...m, [pid]: { ...(m[pid] as RecapInfo), generating: false, error: msg } }));
+    }
+  }, [backgroundJobs, recapMode, settingsReady]);
+
+  useEffect(() => { if (selProj && settingsReady) fetchRecap(selProj); }, [selProj, settingsReady, fetchRecap]);
+
+  // Landing decision: once tasks + recap status are in, auto-select the first
+  // task ONLY when there's no recap to show. If you're returning to a project
+  // with a recap (or one brewing), land on the recap so you can reorient first.
+  //
+  // Never on mobile: there the task list is its own pane, so auto-selecting a
+  // task forces you into the session view and you can never see the list — in
+  // particular it would instantly undo a Back press that cleared the task,
+  // making it impossible to switch tasks. On mobile, no task selected = show the
+  // task list, which is exactly what we want.
+  useEffect(() => {
+    if (!selProj || selTask) return;
+    if (window.matchMedia("(max-width: 760px)").matches) return;
+    const info = recaps[selProj];
+    if (info === undefined) return; // wait for recap status
+    const showRecap = !!info.recap || info.needsRecap || info.generating;
+    if (!showRecap) {
+      const first = tasks.find((t) => !t.suggested);
+      if (first) setSelTask(first.id);
+    }
+  }, [selProj, selTask, recaps, tasks, setSelTask]);
+
+  // A task restored from the URL may have been deleted since. Once the current
+  // project's tasks are loaded, drop a selTask that isn't among them so the
+  // landing decision can pick a valid target. The project_id gate avoids firing
+  // during the window where `tasks` still holds the previous project's list.
+  useEffect(() => {
+    if (!selTask || tasks.length === 0 || tasks[0].project_id !== selProj) return;
+    if (!tasks.some((t) => t.id === selTask)) setSelTask(null);
+  }, [selTask, tasks, selProj, setSelTask]);
+
+  // Proactively sweep for stale projects on load and on an interval, then
+  // refresh the currently-open project's recap so a freshly-baked one appears.
+  useEffect(() => {
+    if (!settingsReady || !backgroundJobs || recapMode !== "automatic") return;
+    const sweep = () => {
+      jsend("/api/recaps/sweep", "POST")
+        .then(() => { if (selProjRef.current) fetchRecap(selProjRef.current); })
+        .catch(() => {});
+    };
+    sweep();
+    const t = setInterval(sweep, 5 * 60 * 1000);
+    return () => clearInterval(t);
+  }, [backgroundJobs, fetchRecap, recapMode, selProjRef, settingsReady]);
+
+  return { recaps, fetchRecap };
+}

package/src/operator/node/useTaskStream.ts

@@ -0,0 +1,279 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
+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 { contextPct } from "./format";
+import { capsFor } from "./agents";
+import type { AgentsBundle, Msg, ProjectRow, TaskRow } from "./types";
+
+// Owns the per-task transcript state (msgsByTask) plus the live stream: the
+// snapshot-then-tail subscription and the message mutators that apply each
+// server event. The turn itself runs server-side, detached from any connection.
+export function useTaskStream({ selTask, selProjRef, agentsRef, setTaskRunning, setTasks, setProjects, loadTasks }: {
+  selTask: string | null;
+  selProjRef: MutableRefObject<string | null>;
+  agentsRef: MutableRefObject<AgentsBundle>;
+  setTaskRunning: (id: string, on: boolean) => void;
+  setTasks: React.Dispatch<React.SetStateAction<TaskRow[]>>;
+  setProjects: React.Dispatch<React.SetStateAction<ProjectRow[]>>;
+  loadTasks: (projectId: string, selectFirst?: boolean) => Promise<void>;
+}) {
+  const [msgsByTask, setMsgsByTask] = useState<Record<string, Msg[]>>({});
+  // How many earlier messages each task has that aren't loaded yet — the live
+  // view opens with only the newest SNAPSHOT_TAIL and pages the rest in on
+  // demand (loadOlder), so a huge transcript never lands in the tab at once.
+  const [olderByTask, setOlderByTask] = useState<Record<string, number>>({});
+  const msgsRef = useRef(msgsByTask);
+  msgsRef.current = msgsByTask;
+  const olderRef = useRef(olderByTask);
+  olderRef.current = olderByTask;
+  const loadingOlderRef = useRef<Record<string, boolean>>({});
+  // Tasks whose transcript this tab keeps, most recently opened first.
+  const recentRef = useRef<string[]>([]);
+
+  // Asks still awaiting an answer, per task. One assistant message can park
+  // several AskUserQuestion cards at once, and the "Needs your input" flag must
+  // stay up until the last one is answered — mirrors openAsks in lib/runner.ts.
+  const openAsksRef = useRef<Record<string, Set<string>>>({});
+
+  const appendMsg = (taskId: string, m: Msg) =>
+    setMsgsByTask((prev) => ({ ...prev, [taskId]: [...(prev[taskId] ?? []), m] }));
+
+  // Mark an AskUserQuestion message (matched by tool id) as answered. Matches on
+  // the id embedded in the content too, so it works for reloaded messages whose
+  // in-memory toolId was lost.
+  const setAnswerOnMsg = (taskId: string, askId: string, answers: AskAnswers) =>
+    setMsgsByTask((prev) => {
+      const arr = prev[taskId] ?? [];
+      return {
+        ...prev,
+        [taskId]: arr.map((m) => {
+          if (m.role !== "tool") return m;
+          try {
+            const d = JSON.parse(m.content) as ToolData;
+            if (m.toolId !== askId && d.ask?.id !== askId) return m;
+            d.ask = { id: d.ask?.id ?? askId, questions: d.ask?.questions ?? [], answers };
+            return { ...m, content: JSON.stringify(d) };
+          } catch {
+            return m;
+          }
+        }),
+      };
+    });
+
+  // Insert-or-replace a message by id. Live events carry their DB message id,
+  // so replays after a reconnect (snapshot + tail overlap) stay idempotent.
+  // Searched from the newest end, where live updates land.
+  const upsertMsg = (taskId: string, m: Msg) =>
+    setMsgsByTask((prev) => {
+      const arr = prev[taskId] ?? [];
+      const i = indexFromEnd(arr, m.id);
+      if (i === -1) return { ...prev, [taskId]: [...arr, m] };
+      const next = arr.slice();
+      next[i] = { ...arr[i], ...m };
+      return { ...prev, [taskId]: next };
+    });
+
+  // Drop a message by id — used when a queued follow-up is dequeued (about to
+  // run, or cancelled). If it's about to run, the matching `user` event re-adds
+  // it as a committed message.
+  const removeMsg = (taskId: string, msgId: string) =>
+    setMsgsByTask((prev) => ({ ...prev, [taskId]: (prev[taskId] ?? []).filter((m) => m.id !== msgId) }));
+
+  // Apply one server event to local state. Used by the per-task live
+  // subscription below; the turn itself runs server-side, detached from any
+  // connection.
+  const handleStreamEvent = (taskId: string, ev: TaskStreamEvent) => {
+    if (ev.type === "snapshot") {
+      // Authoritative catch-up: the full persisted transcript, then any parked
+      // follow-ups as "queued" bubbles (so a reload mid-run re-renders them),
+      // plus whether a turn is live right now (true after a reload mid-turn).
+      // The snapshot is only the newest slice (?tail=N); mergeSnapshot keeps
+      // older pages this tab already loaded and reuses unchanged message
+      // 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);
+      msgsRef.current = { ...msgsRef.current, [taskId]: merged.msgs };
+      setMsgsByTask((prev) => ({ ...prev, [taskId]: merged.msgs }));
+      setOlderByTask((prev) => ({ ...prev, [taskId]: merged.older }));
+      // Rebuild the open-ask set from the persisted transcript so a reload
+      // mid-turn (with asks still parked) counts them correctly.
+      const open = new Set<string>();
+      for (const m of committed) {
+        if (m.role !== "tool") continue;
+        const d = toolDataOf(m);
+        if (d.ask && !d.ask.answers) open.add(d.ask.id);
+      }
+      openAsksRef.current[taskId] = open;
+      setTaskRunning(taskId, ev.running);
+      return;
+    }
+    const gen = ("generation" in ev ? ev.generation : undefined) ?? 1;
+    if (ev.type === "user") upsertMsg(taskId, { id: ev.msgId, role: "user", content: ev.content, generation: gen, ts: ev.ts });
+    else if (ev.type === "queued") upsertMsg(taskId, { id: ev.msgId, role: "queued", content: ev.content, generation: gen, ts: ev.ts });
+    else if (ev.type === "dequeued") removeMsg(taskId, ev.msgId);
+    else if (ev.type === "model") setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, resolved_model: ev.model } : x)));
+    else if (ev.type === "assistant") upsertMsg(taskId, { id: ev.msgId ?? `a-${Date.now()}-${Math.random()}`, role: "assistant", content: ev.content, generation: gen, ts: ev.ts });
+    else if (ev.type === "tool") {
+      const data: ToolData = { title: ev.title, detail: ev.detail, peek: ev.peek, diff: ev.diff };
+      upsertMsg(taskId, { id: ev.msgId ?? `t-${Date.now()}-${Math.random()}`, role: "tool", content: JSON.stringify(data), generation: gen, toolId: ev.id });
+    } else if (ev.type === "tool_result") {
+      // Match by DB message id (works on snapshot-loaded messages too), falling
+      // back to the in-memory tool_use id. Newest first: results land near the end.
+      setMsgsByTask((prev) => {
+        const arr = prev[taskId] ?? [];
+        let i = arr.length - 1;
+        while (i >= 0 && (arr[i].role !== "tool" || (arr[i].id !== ev.msgId && arr[i].toolId !== ev.id))) i--;
+        if (i < 0) return prev;
+        const m = arr[i];
+        let content: string;
+        try { const d = JSON.parse(m.content) as ToolData; d.result = ev.content; d.isError = ev.isError; if (ev.peek) d.peek = ev.peek; content = JSON.stringify(d); } catch { return prev; }
+        const next = arr.slice();
+        next[i] = { ...m, content };
+        return { ...prev, [taskId]: next };
+      });
+    } else if (ev.type === "ask") {
+      const data: ToolData = { title: "有问题需要你回答", ask: { id: ev.id, questions: ev.questions } };
+      upsertMsg(taskId, { id: ev.msgId ?? `ask-${ev.id}`, role: "tool", content: JSON.stringify(data), generation: gen, toolId: ev.id });
+      (openAsksRef.current[taskId] ??= new Set()).add(ev.id);
+      // Parked on a question: flag the row so it jumps to "Needs your input"
+      // (and triggers a notification) while the turn is still live. Mirrors the
+      // server's updateTask in lib/runner.ts.
+      setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, awaiting_input: 1 } : x)));
+    } else if (ev.type === "ask_answered") {
+      setAnswerOnMsg(taskId, ev.id, ev.answers);
+      // Only drop the flag once every parked ask on this task is answered.
+      const open = openAsksRef.current[taskId];
+      open?.delete(ev.id);
+      if (!open || open.size === 0) {
+        setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, awaiting_input: 0 } : x)));
+      }
+    } else if (ev.type === "input") {
+      // browser_ask_user card raised or settled: the event carries the whole card.
+      const data: ToolData = { title: "需要你提供信息", input: ev.input };
+      upsertMsg(taskId, { id: ev.msgId ?? `in-${ev.input.id}`, role: "tool", content: JSON.stringify(data), generation: gen });
+      const waiting = ev.input.status === "pending";
+      setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, awaiting_input: waiting ? 1 : x.awaiting_input && openAsksRef.current[taskId]?.size ? 1 : 0 } : x)));
+    } else if (ev.type === "usage") {
+      // Live cumulative spend: add this turn's totals to the task's figure.
+      // Context occupancy, by contrast, is the latest turn's INPUT-side
+      // tokens (not a sum) — it tracks how full the window is right now.
+      const u = ev.usage;
+      const turnTokens = u.input_tokens + u.output_tokens + u.cache_read_tokens + u.cache_creation_tokens;
+      const ctxTokens = u.input_tokens + u.cache_read_tokens + u.cache_creation_tokens;
+      setTasks((prev) => prev.map((x) => (x.id === taskId
+        ? { ...x, cost_usd: (x.cost_usd ?? 0) + u.cost_usd, total_tokens: (x.total_tokens ?? 0) + turnTokens,
+            // Cache buckets accumulate alongside the total so the usage chip's
+            // fresh-vs-cached split stays right mid-turn, not just after a reload.
+            cache_read_tokens: (x.cache_read_tokens ?? 0) + u.cache_read_tokens,
+            cache_creation_tokens: (x.cache_creation_tokens ?? 0) + u.cache_creation_tokens,
+            context_tokens: ctxTokens, context_pct: contextPct(ctxTokens, x.model, capsFor(agentsRef.current, x.agent)) }
+        : x)));
+    } else if (ev.type === "notice") upsertMsg(taskId, { id: ev.msgId ?? `n-${Date.now()}`, role: "system", content: ev.content, generation: gen });
+    else if (ev.type === "error") upsertMsg(taskId, { id: ev.msgId ?? `e-${Date.now()}`, role: "system", content: ev.content, generation: gen });
+    else if (ev.type === "suggested") { if (selProjRef.current) loadTasks(selProjRef.current, false); }
+    else if (ev.type === "turn_end") {
+      setTaskRunning(taskId, false);
+      // Any still-parked asks died with the turn (Stop rejects them server-side);
+      // the refetch below restores the authoritative awaiting_input flag.
+      delete openAsksRef.current[taskId];
+      void (async () => {
+        try { const fresh = await jget<TaskRow>(`/api/tasks/${taskId}`); setTasks((prev) => prev.map((x) => (x.id === taskId ? { ...x, ...fresh } : x))); } catch {}
+        // Refresh the project list so the cross-project "Needs you" counts/badges update.
+        try { setProjects(await jget<ProjectRow[]>("/api/projects")); } catch {}
+      })();
+    }
+  };
+  // The handler reads lots of component state; keep the EventSource effect's
+  // dependency list down to the task id by routing through a ref.
+  const handleStreamEventRef = useRef(handleStreamEvent);
+  useEffect(() => { handleStreamEventRef.current = handleStreamEvent; });
+
+  // One live stream per selected task: the server replays a snapshot of the
+  // persisted transcript, then tails live turn events. Opening a task,
+  // reloading mid-turn, and waking from laptop sleep all converge on the same
+  // catch-up-then-tail path — EventSource reconnects re-snapshot automatically.
+  //
+  // Carried over the tab's shared live socket (./liveStream) rather than its own
+  // EventSource, and asking for only the newest SNAPSHOT_TAIL messages.
+  useEffect(() => {
+    if (!selTask) return;
+    const id = selTask;
+    // A tab can stay open for days and visit hundreds of tasks: keep the most
+    // recent KEEP_TRANSCRIPTS (switching back to those is instant), each
+    // trimmed to a snapshot's size once left; older ones are dropped and simply
+    // re-snapshot if opened again. The task just left no longer streams (its
+    // subscription closed above), so trimming it races nothing.
+    const left = recentRef.current[0];
+    if (left && left !== id && msgsRef.current[left]) {
+      const t = trimToTail(msgsRef.current[left], olderRef.current[left] ?? 0);
+      if (t.msgs !== msgsRef.current[left]) {
+        msgsRef.current = { ...msgsRef.current, [left]: t.msgs };
+        setMsgsByTask((prev) => ({ ...prev, [left]: t.msgs }));
+        setOlderByTask((prev) => ({ ...prev, [left]: t.older }));
+      }
+    }
+    const { recent, evicted } = touchRecent(recentRef.current, id);
+    recentRef.current = recent;
+    if (evicted.length) {
+      const drop = <T,>(rec: Record<string, T>) => {
+        if (!evicted.some((t) => t in rec)) return rec;
+        const next = { ...rec };
+        for (const t of evicted) delete next[t];
+        return next;
+      };
+      msgsRef.current = drop(msgsRef.current);
+      setMsgsByTask(drop);
+      setOlderByTask(drop);
+      for (const t of evicted) { delete openAsksRef.current[t]; delete loadingOlderRef.current[t]; }
+    }
+    const sub = openLive(`/api/tasks/${id}/messages?tail=${SNAPSHOT_TAIL}`, {
+      onMessage: (data) => {
+        try { handleStreamEventRef.current(id, JSON.parse(data) as TaskStreamEvent); } catch {}
+      },
+    });
+    return () => sub.close();
+  }, [selTask]);
+
+  // Page in the next batch of earlier messages for a task (the transcript calls
+  // this when the user scrolls to the top of what's loaded). Resolves true when
+  // something was added.
+  // `beforeApply` runs right before the page goes into state — the transcript
+  // measures its scroll anchor there, before the DOM changes.
+  const loadOlder = useCallback(async (taskId: string, beforeApply?: () => void): Promise<boolean> => {
+    if (loadingOlderRef.current[taskId] || !(olderRef.current[taskId] > 0)) return false;
+    const first = (msgsRef.current[taskId] ?? []).find((m) => m.role !== "queued" && m.ts != null);
+    if (!first) return false;
+    loadingOlderRef.current[taskId] = true;
+    try {
+      const page = await jget<{ messages: Message[]; older: number }>(`/api/tasks/${taskId}/history?before=${encodeURIComponent(first.id)}&limit=${HISTORY_PAGE}`);
+      // A reconnect replaced the list meanwhile: this page no longer joins up.
+      const joins = (list: Msg[] | undefined) => (list ?? []).find((m) => m.role !== "queued" && m.ts != null)?.id === first.id;
+      if (!joins(msgsRef.current[taskId])) return false;
+      beforeApply?.();
+      setMsgsByTask((prev) => {
+        const cur = prev[taskId] ?? [];
+        if (!joins(cur)) return prev;
+        const have = new Set(cur.map((m) => m.id));
+        const add = page.messages.map(toMsg).filter((m) => !have.has(m.id));
+        return { ...prev, [taskId]: [...add, ...cur] };
+      });
+      setOlderByTask((prev) => ({ ...prev, [taskId]: page.older }));
+      return true;
+    } catch {
+      return false;
+    } finally {
+      loadingOlderRef.current[taskId] = false;
+    }
+  }, []);
+
+  return { msgsByTask, olderByTask, loadOlder, appendMsg, setAnswerOnMsg };
+}
+
+function toMsg(m: Message): Msg {
+  return { id: m.id, role: m.role, content: m.content, generation: m.generation, ts: m.created_at };
+}