@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/Timeline.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -38,509 +38,1021 @@ import { FileLinkContext } from './file-links.js';
 import { AgentIcon } from '../../agents/AgentIcon.js';
 import { useModelName } from '../../agents/model-name.js';
 import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
+import { useHostContextSources, useHostHidesFolder, useHostThreadCards, useHostTimelineFind, useHostWelcome } from '../../host-hooks.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ESTIMATED_ROW_PX = 56;
 // How long a jump waits for a thread that is still loading before it calls the item missing.
 const JUMP_THREAD_WAIT_MS = 8000;
 /* A jump puts its row at the top and stops following the end, so the reader stays where they landed. */
 function showRowAtTop(virtualizer, followRef, index) {
-    followRef.current = false;
-    virtualizer.scrollToIndex(index, { align: 'start' });
+  followRef.current = false;
+  virtualizer.scrollToIndex(index, {
+    align: 'start'
+  });
 }
 /*
  * A thread before its first message: which model answers, what the lines into this node let it read,
  * and the folder it works in, so a first question can lean on all three.
  */
-function EmptyThread({ chatId }) {
-    const host = useChatHost();
-    const { t } = useTranslation('agent-chat');
-    const info = useChatRow(chatId, (row) => row?.info ?? null);
-    const model = useModelName(info?.provider, info?.selection.model ?? '');
-    const sources = host.useContextSources(chatId);
-    const hidesFolder = host.useHidesFolder(chatId);
-    return (_jsx("div", { className: "flex grow items-center justify-center", children: _jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 px-6 py-8 text-center", children: [_jsx(EmptyState, { icon: info ? _jsx(AgentIcon, { kind: info.provider }) : undefined, className: "p-0", children: info ? t('timeline.empty.ready', { model }) : t('timeline.empty.ask') }), sources.length > 0 && (_jsxs("div", { className: "flex max-w-full flex-col items-center gap-1", children: [_jsx(SectionLabel, { children: t('timeline.empty.canRead') }), _jsx("span", { className: "max-w-full text-xs text-text-muted", children: sources.map((source) => source.title).join(', ') })] })), info?.cwd && !hidesFolder && (_jsxs("div", { className: "flex max-w-full flex-col items-center gap-1", children: [_jsx(SectionLabel, { children: t('timeline.empty.worksIn') }), _jsx("span", { className: "max-w-full font-mono text-xs break-all text-text-muted", children: info.cwd })] }))] }) }));
+function EmptyThread(t0) {
+  const $ = _c(20);
+  const {
+    chatId
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const info = useChatRow(chatId, _temp);
+  const model = useModelName(info?.provider, info?.selection.model ?? "");
+  const sources = useHostContextSources(chatId);
+  const hidesFolder = useHostHidesFolder(chatId);
+  let t1;
+  if ($[0] !== info) {
+    t1 = info ? /*#__PURE__*/_jsx(AgentIcon, {
+      kind: info.provider
+    }) : undefined;
+    $[0] = info;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== info || $[3] !== model || $[4] !== t) {
+    t2 = info ? t("timeline.empty.ready", {
+      model
+    }) : t("timeline.empty.ask");
+    $[2] = info;
+    $[3] = model;
+    $[4] = t;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== t1 || $[7] !== t2) {
+    t3 = /*#__PURE__*/_jsx(EmptyState, {
+      icon: t1,
+      className: "p-0",
+      children: t2
+    });
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== sources || $[10] !== t) {
+    t4 = sources.length > 0 && /*#__PURE__*/_jsxs("div", {
+      className: "flex max-w-full flex-col items-center gap-1",
+      children: [/*#__PURE__*/_jsx(SectionLabel, {
+        children: t("timeline.empty.canRead")
+      }), /*#__PURE__*/_jsx("span", {
+        className: "max-w-full text-xs text-text-muted",
+        children: sources.map(_temp2).join(", ")
+      })]
+    });
+    $[9] = sources;
+    $[10] = t;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== hidesFolder || $[13] !== info || $[14] !== t) {
+    t5 = info?.cwd && !hidesFolder && /*#__PURE__*/_jsxs("div", {
+      className: "flex max-w-full flex-col items-center gap-1",
+      children: [/*#__PURE__*/_jsx(SectionLabel, {
+        children: t("timeline.empty.worksIn")
+      }), /*#__PURE__*/_jsx("span", {
+        className: "max-w-full font-mono text-xs break-all text-text-muted",
+        children: info.cwd
+      })]
+    });
+    $[12] = hidesFolder;
+    $[13] = info;
+    $[14] = t;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== t3 || $[17] !== t4 || $[18] !== t5) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      className: "flex grow items-center justify-center",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "flex max-w-sm flex-col items-center gap-3 px-6 py-8 text-center",
+        children: [t3, t4, t5]
+      })
+    });
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  return t6;
 }
 /*
  * A row of the thread behind the chapter line of its bookmark. A message, the only row that takes a
  * bookmark, gets its actions under it; every other row carries a bookmark only for a reply it folds.
  */
-function MarkableRow({ row, chatId, bookmark, children }) {
-    if (row.kind !== 'user' && row.kind !== 'assistant') {
-        return (_jsxs(_Fragment, { children: [bookmark !== null && _jsx(BookmarkMarker, { chatId: chatId, itemId: bookmark.itemId, bookmark: bookmark }), children] }));
+function _temp2(source) {
+  return source.title;
+}
+function _temp(row) {
+  return row?.info ?? null;
+}
+function MarkableRow(t0) {
+  const $ = _c(19);
+  const {
+    row,
+    chatId,
+    bookmark,
+    children
+  } = t0;
+  if (row.kind !== "user" && row.kind !== "assistant") {
+    let t1;
+    if ($[0] !== bookmark || $[1] !== chatId) {
+      t1 = bookmark !== null && /*#__PURE__*/_jsx(BookmarkMarker, {
+        chatId: chatId,
+        itemId: bookmark.itemId,
+        bookmark: bookmark
+      });
+      $[0] = bookmark;
+      $[1] = chatId;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    let t2;
+    if ($[3] !== children || $[4] !== t1) {
+      t2 = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [t1, children]
+      });
+      $[3] = children;
+      $[4] = t1;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
     }
-    return (_jsxs(_Fragment, { children: [_jsx(BookmarkMarker, { chatId: chatId, itemId: row.id, bookmark: bookmark }), _jsxs("div", { className: "group/message", children: [children, _jsx(MessageActions, { chatId: chatId, row: row })] })] }));
+    return t2;
+  }
+  let t1;
+  if ($[6] !== bookmark || $[7] !== chatId || $[8] !== row.id) {
+    t1 = /*#__PURE__*/_jsx(BookmarkMarker, {
+      chatId: chatId,
+      itemId: row.id,
+      bookmark: bookmark
+    });
+    $[6] = bookmark;
+    $[7] = chatId;
+    $[8] = row.id;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  let t2;
+  if ($[10] !== chatId || $[11] !== row) {
+    t2 = /*#__PURE__*/_jsx(MessageActions, {
+      chatId: chatId,
+      row: row
+    });
+    $[10] = chatId;
+    $[11] = row;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  let t3;
+  if ($[13] !== children || $[14] !== t2) {
+    t3 = /*#__PURE__*/_jsxs("div", {
+      className: "group/message",
+      children: [children, t2]
+    });
+    $[13] = children;
+    $[14] = t2;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  let t4;
+  if ($[16] !== t1 || $[17] !== t3) {
+    t4 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t1, t3]
+    });
+    $[16] = t1;
+    $[17] = t3;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  return t4;
 }
 /* Memoized with stable props, so a streamed word or a scroll draws only the rows it changed. */
-const ThreadRow = memo(function ThreadRow({ row, previous, index, top, measure, chatId, flashNonce, bookmark, ...actions }) {
-    const header = replyHeader(row, previous);
-    return (_jsxs(RowContainer, { row: row, previous: previous, index: index, top: top, ref: measure, children: [flashNonce !== null && _jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flashNonce), header !== null && (_jsx("div", { className: "chat-column-content w-full", children: _jsx(ReplyHeader, { chatId: chatId, at: header.at }) })), _jsx(MarkableRow, { row: row, chatId: chatId, bookmark: bookmark, children: _jsx(Row, { row: row, chatId: chatId, ...actions }) })] }));
+const ThreadRow = memo(function ThreadRow(t0) {
+  const $ = _c(36);
+  let actions;
+  let bookmark;
+  let chatId;
+  let flashNonce;
+  let index;
+  let measure;
+  let previous;
+  let row;
+  let top;
+  if ($[0] !== t0) {
+    ({
+      row,
+      previous,
+      index,
+      top,
+      measure,
+      chatId,
+      flashNonce,
+      bookmark,
+      ...actions
+    } = t0);
+    $[0] = t0;
+    $[1] = actions;
+    $[2] = bookmark;
+    $[3] = chatId;
+    $[4] = flashNonce;
+    $[5] = index;
+    $[6] = measure;
+    $[7] = previous;
+    $[8] = row;
+    $[9] = top;
+  } else {
+    actions = $[1];
+    bookmark = $[2];
+    chatId = $[3];
+    flashNonce = $[4];
+    index = $[5];
+    measure = $[6];
+    previous = $[7];
+    row = $[8];
+    top = $[9];
+  }
+  let t1;
+  if ($[10] !== previous || $[11] !== row) {
+    t1 = replyHeader(row, previous);
+    $[10] = previous;
+    $[11] = row;
+    $[12] = t1;
+  } else {
+    t1 = $[12];
+  }
+  const header = t1;
+  let t2;
+  if ($[13] !== flashNonce) {
+    t2 = flashNonce !== null && /*#__PURE__*/_jsx("span", {
+      className: "chat-flash pointer-events-none absolute inset-0 rounded-lg",
+      "aria-hidden": true
+    }, flashNonce);
+    $[13] = flashNonce;
+    $[14] = t2;
+  } else {
+    t2 = $[14];
+  }
+  let t3;
+  if ($[15] !== chatId || $[16] !== header) {
+    t3 = header !== null && /*#__PURE__*/_jsx("div", {
+      className: "chat-column-content w-full",
+      children: /*#__PURE__*/_jsx(ReplyHeader, {
+        chatId: chatId,
+        at: header.at
+      })
+    });
+    $[15] = chatId;
+    $[16] = header;
+    $[17] = t3;
+  } else {
+    t3 = $[17];
+  }
+  let t4;
+  if ($[18] !== actions || $[19] !== chatId || $[20] !== row) {
+    t4 = /*#__PURE__*/_jsx(Row, {
+      row: row,
+      chatId: chatId,
+      ...actions
+    });
+    $[18] = actions;
+    $[19] = chatId;
+    $[20] = row;
+    $[21] = t4;
+  } else {
+    t4 = $[21];
+  }
+  let t5;
+  if ($[22] !== bookmark || $[23] !== chatId || $[24] !== row || $[25] !== t4) {
+    t5 = /*#__PURE__*/_jsx(MarkableRow, {
+      row: row,
+      chatId: chatId,
+      bookmark: bookmark,
+      children: t4
+    });
+    $[22] = bookmark;
+    $[23] = chatId;
+    $[24] = row;
+    $[25] = t4;
+    $[26] = t5;
+  } else {
+    t5 = $[26];
+  }
+  let t6;
+  if ($[27] !== index || $[28] !== measure || $[29] !== previous || $[30] !== row || $[31] !== t2 || $[32] !== t3 || $[33] !== t5 || $[34] !== top) {
+    t6 = /*#__PURE__*/_jsxs(RowContainer, {
+      row: row,
+      previous: previous,
+      index: index,
+      top: top,
+      ref: measure,
+      children: [t2, t3, t5]
+    });
+    $[27] = index;
+    $[28] = measure;
+    $[29] = previous;
+    $[30] = row;
+    $[31] = t2;
+    $[32] = t3;
+    $[33] = t5;
+    $[34] = top;
+    $[35] = t6;
+  } else {
+    t6 = $[35];
+  }
+  return t6;
 });
 /*
  * `overlay` stands in the thread's place and ends where the composer starts, so the thread keeps
  * where it was underneath and the composer stays in reach for the prompts it answers.
  */
-export function Timeline({ chatId, composer, overlay }) {
-    const host = useChatHost();
-    const { fork } = host;
-    const { t } = useTranslation('agent-chat');
-    const order = useChatRow(chatId, (row) => row?.order);
-    // The structure, not the items. A delta growing a reply must not derive every row again.
-    const items = useChatRow(chatId, (row) => row?.structure);
-    const activeTurnId = useChatRow(chatId, (row) => row?.info.activeTurnId ?? null);
-    const bookmarks = useChatRow(chatId, (row) => row?.bookmarks);
-    const visuals = useChatRow(chatId, (row) => row?.visuals);
-    const forkedTurns = useForkedTurns(chatId);
-    const info = useChatRow(chatId, (row) => row?.info ?? null);
-    const cursor = useChatRow(chatId, (row) => row?.history?.cursor ?? null);
-    const scope = useChatScope();
-    const { id: scopeId, keyOf } = scope;
-    // Read when the menu opens rather than subscribed to, for the same reason the rows use the structure.
-    const fullItems = () => useChats.getState().byKey[keyOf(chatId)]?.items;
-    const scrollRef = useRef(null);
-    const threadRef = useRef(null);
-    const contentRef = useRef(null);
-    const quoteTakerRef = useRef(null);
-    const registerQuoteTaker = useCallback((take) => {
-        quoteTakerRef.current = take;
-        return () => {
-            if (quoteTakerRef.current === take) {
-                quoteTakerRef.current = null;
-            }
-        };
-    }, []);
-    const followRef = useRef(true);
-    const stopFollowing = useCallback(() => {
-        followRef.current = false;
-    }, []);
-    const groups = useToggleSet(stopFollowing);
-    const turns = useToggleSet(stopFollowing);
-    const subagents = useToggleSet(stopFollowing);
-    const scrollGeometry = useRef({ top: 0, height: 0, viewport: 0 });
-    const [target, setTarget] = useState(EMPTY_TARGET);
-    const { trail, show } = useSubagentTrail(chatId);
-    const frameRef = useRef(null);
-    const composerRef = useRef(null);
-    const [composerHeight, setComposerHeight] = useState(0);
-    const [frame, setFrame] = useState({ width: 0, height: 0, column: false });
-    const [loadingEarlier, setLoadingEarlier] = useState(false);
-    const loadingEarlierRef = useRef(false);
-    // The row being read and where it stood, taken after every render, so a page going in above puts it back.
-    const anchorRef = useRef(null);
-    const headRef = useRef(undefined);
-    const loadEarlier = useCallback(() => {
-        if (cursor === null || loadingEarlierRef.current) {
-            return;
-        }
-        loadingEarlierRef.current = true;
-        setLoadingEarlier(true);
-        // A page that failed is asked for again on the next scroll; the thread keeps what it has.
-        void scope.chats
-            .loadEarlier(chatId, cursor)
-            .catch(() => undefined)
-            .finally(() => {
-            loadingEarlierRef.current = false;
-            setLoadingEarlier(false);
-        });
-    }, [scope, chatId, cursor]);
-    const threadRows = useMemo(() => {
-        if (!order || !items) {
-            return [];
-        }
-        return deriveTimelineRows(order.map((id) => items[id]), {
-            expandedGroups: groups.ids,
-            expandedTurns: turns.ids,
-            expandedSubagents: subagents.ids,
-            activeTurnId,
-            forkedTurns,
-            commandLooks: host.commandLooks
-        });
-    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks]);
-    const cards = host.useThreadCards(scopeId, chatId);
-    const drawsVisuals = host.visuals !== null;
-    // Where the part of the thread this client holds begins, while there is a page before it.
-    const heldFrom = cursor === null ? null : (items?.[order?.[0] ?? '']?.createdAt ?? null);
-    const rows = useMemo(() => withTimedRows(threadRows, timedRowsOf(cards, drawsVisuals ? (visuals ?? []) : null, heldFrom)), [threadRows, cards, drawsVisuals, visuals, heldFrom]);
-    const welcomes = host.useWelcome(chatId);
-    const empty = rows.length === 0;
-    // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
-    const welcome = welcomes && empty && (info === null || (info.usage.turns === 0 && info.activeTurnId === null));
-    const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
-    const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
-    // A message a jump is on its way to; it may first have to open the turn its reply folded into.
-    const [seeking, setSeeking] = useState(null);
-    const [landing, setLanding] = useState(null);
-    // A turn a jump is on its way to, which waits for the page its messages are on to come in.
-    const [revealing, setRevealing] = useState(null);
-    const flash = useTimelineFlash((s) => s.target);
-    const revealBlock = useCallback((block) => {
-        setLanding(null);
-        setSeeking({ itemId: block.itemId, block, key: keyOf(chatId) });
-    }, [keyOf, chatId]);
-    const uiNavigation = useMemo(() => ({
-        chatId,
-        reveal: revealBlock,
-        flash: flash?.key === keyOf(chatId) && flash.block ? { itemId: flash.rowId, ...flash.block, nonce: flash.nonce } : null
-    }), [revealBlock, flash, keyOf, chatId]);
-    // Whether the thread's text clears the strip depends on the width of the view, which only the thread's own frame tells.
-    useEffect(() => {
-        const element = frameRef.current;
-        if (element === null || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const column = element.closest('.chat-column') !== null;
-        const measure = () => setFrame((current) => current.width === element.offsetWidth && current.height === element.offsetHeight && current.column === column
-            ? current
-            : { width: element.offsetWidth, height: element.offsetHeight, column });
-        const observer = new ResizeObserver(measure);
-        observer.observe(element);
-        measure();
-        return () => observer.disconnect();
-    }, []);
-    useLayoutEffect(() => {
-        const element = composerRef.current;
-        if (element === null) {
-            return;
-        }
-        const measure = () => setComposerHeight(element.offsetHeight);
-        const observer = new ResizeObserver(measure);
-        observer.observe(element);
-        measure();
-        return () => observer.disconnect();
-    }, []);
-    // Oversized prompts scroll in full instead of sticking with their top outside the viewport.
-    const stickyComposer = !welcome && composerHeight < frame.height - FOLLOW_THRESHOLD_PX;
-    const coveredHeight = stickyComposer ? composerHeight : 0;
-    const coveredHeightRef = useRef(coveredHeight);
-    coveredHeightRef.current = coveredHeight;
-    // The composer pages through the thread with PageUp and PageDown; this is the element it moves.
-    useEffect(() => registerTimeline(chatId, scrollRef.current, (enabled) => {
-        followRef.current = enabled;
-    }, () => coveredHeightRef.current), [chatId]);
-    // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
-    // oxlint-disable-next-line react/incompatible-library
-    const virtualizer = useVirtualizer({
-        count: rows.length,
-        getScrollElement: () => scrollRef.current,
-        estimateSize: () => ESTIMATED_ROW_PX,
-        getItemKey: (index) => rows[index].id,
-        overscan: 8,
-        scrollPaddingEnd: coveredHeight
+export function Timeline({
+  chatId,
+  composer,
+  overlay
+}) {
+  const host = useChatHost();
+  const {
+    fork
+  } = host;
+  const {
+    t
+  } = useTranslation('agent-chat');
+  const order = useChatRow(chatId, row => row?.order);
+  // The structure, not the items. A delta growing a reply must not derive every row again.
+  const items = useChatRow(chatId, row_0 => row_0?.structure);
+  const activeTurnId = useChatRow(chatId, row_1 => row_1?.info.activeTurnId ?? null);
+  const bookmarks = useChatRow(chatId, row_2 => row_2?.bookmarks);
+  const visuals = useChatRow(chatId, row_3 => row_3?.visuals);
+  const forkedTurns = useForkedTurns(chatId);
+  const info = useChatRow(chatId, row_4 => row_4?.info ?? null);
+  const cursor = useChatRow(chatId, row_5 => row_5?.history?.cursor ?? null);
+  const scope = useChatScope();
+  const {
+    id: scopeId,
+    keyOf
+  } = scope;
+  // Read when the menu opens rather than subscribed to, for the same reason the rows use the structure.
+  const fullItems = () => useChats.getState().byKey[keyOf(chatId)]?.items;
+  const scrollRef = useRef(null);
+  const threadRef = useRef(null);
+  const contentRef = useRef(null);
+  const quoteTakerRef = useRef(null);
+  const registerQuoteTaker = useCallback(take => {
+    quoteTakerRef.current = take;
+    return () => {
+      if (quoteTakerRef.current === take) {
+        quoteTakerRef.current = null;
+      }
+    };
+  }, []);
+  const followRef = useRef(true);
+  const stopFollowing = useCallback(() => {
+    followRef.current = false;
+  }, []);
+  const groups = useToggleSet(stopFollowing);
+  const turns = useToggleSet(stopFollowing);
+  const subagents = useToggleSet(stopFollowing);
+  const scrollGeometry = useRef({
+    top: 0,
+    height: 0,
+    viewport: 0
+  });
+  const [target, setTarget] = useState(EMPTY_TARGET);
+  const {
+    trail,
+    show
+  } = useSubagentTrail(chatId);
+  const frameRef = useRef(null);
+  const composerRef = useRef(null);
+  const [composerHeight, setComposerHeight] = useState(0);
+  const [frame, setFrame] = useState({
+    width: 0,
+    height: 0,
+    column: false
+  });
+  const [loadingEarlier, setLoadingEarlier] = useState(false);
+  const loadingEarlierRef = useRef(false);
+  // The row being read and where it stood, taken after every render, so a page going in above puts it back.
+  const anchorRef = useRef(null);
+  const headRef = useRef(undefined);
+  const loadEarlier = useCallback(() => {
+    if (cursor === null || loadingEarlierRef.current) {
+      return;
+    }
+    loadingEarlierRef.current = true;
+    setLoadingEarlier(true);
+    // A page that failed is asked for again on the next scroll; the thread keeps what it has.
+    void scope.chats.loadEarlier(chatId, cursor).catch(() => undefined).finally(() => {
+      loadingEarlierRef.current = false;
+      setLoadingEarlier(false);
     });
-    /*
-     * Rows are measured as they render, so the end moves while it is drawn (a streamed line, a diff that
-     * highlights, an image that loads). `scrollToIndex` aims at where a row was when asked and fell
-     * short; the scroller's own bottom is a fact, and a new total size says a row was measured again.
-     * A word that does not add a line moves nothing, so the thread does not listen to the words.
-     */
-    const totalSize = virtualizer.getTotalSize();
-    useLayoutEffect(() => {
-        const element = scrollRef.current;
-        if (!followRef.current || element === null) {
-            return;
-        }
-        // The composer is in the scroll flow, so its measured height is part of this end position.
-        element.scrollTop = element.scrollHeight;
-        scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
-    }, [rows.length, totalSize, composerHeight, frame.height]);
-    // A page that went in above moves every row down by what it measures; the reader stays on the row they were on.
-    useLayoutEffect(() => {
-        const element = scrollRef.current;
-        const head = order?.[0];
-        const moved = head !== headRef.current;
-        headRef.current = head;
-        if (element === null) {
-            return;
-        }
-        const anchor = anchorRef.current;
-        const index = moved && anchor !== null && !followRef.current ? rows.findIndex((row) => row.id === anchor.id) : -1;
-        if (anchor !== null && index !== -1) {
-            // The total measures again what this commit's rows reported; the cache alone lags behind them.
-            virtualizer.getTotalSize();
-            element.scrollTop = virtualizer.measurementsCache[index].start - anchor.offset;
-            return;
-        }
-        const row = virtualizer.getVirtualItemForOffset(element.scrollTop);
-        anchorRef.current = row === undefined ? null : { id: String(row.key), offset: row.start - element.scrollTop };
+  }, [scope, chatId, cursor]);
+  const threadRows = useMemo(() => {
+    if (!order || !items) {
+      return [];
+    }
+    return deriveTimelineRows(order.map(id => items[id]), {
+      expandedGroups: groups.ids,
+      expandedTurns: turns.ids,
+      expandedSubagents: subagents.ids,
+      activeTurnId,
+      forkedTurns,
+      commandLooks: host.commandLooks
     });
-    // Close to the top, the page before goes in; again after each page that left too little above the reader.
-    useEffect(() => {
-        const element = scrollRef.current;
-        if (element !== null && wantsEarlier(element)) {
-            loadEarlier();
-        }
-    }, [rows, loadEarlier, frame.height]);
-    // A sub-agent in the thread's place hides the thread, and the strip and the keyboard go with it.
-    const onMainAgent = trail.length === 0;
-    // A node on a canvas has no strip. It is too narrow to give up a column of its width.
-    const showsScrubber = frame.column && onMainAgent && ticks.length >= SCRUBBER_MIN_TICKS;
-    const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
-    const paddingLeft = threadPaddingLeft(frame.width, showsScrubber, readingMeasure(readingWidth));
-    /*
-     * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
-     * drew), so reading the scroll position costs no layout.
-     */
-    const measurements = virtualizer.measurementsCache;
-    const starts = ticks.map((tick) => measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX);
-    const scrollTop = virtualizer.scrollOffset ?? 0;
-    const viewport = virtualizer.scrollRect?.height ?? 0;
-    const visibleHeight = Math.max(0, viewport - coveredHeight);
-    const visibleHeightRef = useRef(visibleHeight);
-    visibleHeightRef.current = visibleHeight;
-    const inView = showsScrubber ? messagesInView({ starts, scrollTop, visibleHeight }) : null;
-    /*
-     * The virtualizer draws again only when its range of rows changes, which a scroll inside one long
-     * row never does; the scroll itself redraws the strip once the messages in view are others.
-     */
-    const [, redrawStrip] = useReducer((count) => count + 1, 0);
-    const stripRef = useRef({ starts, inView });
-    stripRef.current = { starts, inView };
-    const followStrip = (element) => {
-        const { starts: current, inView: shown } = stripRef.current;
-        if (shown === null) {
-            return;
-        }
-        const next = messagesInView({ starts: current, scrollTop: element.scrollTop, visibleHeight: visibleHeightRef.current });
-        if (next?.first !== shown.first || next?.last !== shown.last) {
-            redrawStrip();
-        }
+  }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks]);
+  const cards = useHostThreadCards(scopeId, chatId);
+  const drawsVisuals = host.visuals !== null;
+  // Where the part of the thread this client holds begins, while there is a page before it.
+  const heldFrom = cursor === null ? null : items?.[order?.[0] ?? '']?.createdAt ?? null;
+  const rows = useMemo(() => withTimedRows(threadRows, timedRowsOf(cards, drawsVisuals ? visuals ?? [] : null, heldFrom)), [threadRows, cards, drawsVisuals, visuals, heldFrom]);
+  const welcomes = useHostWelcome(chatId);
+  const empty = rows.length === 0;
+  // A chat that took a turn before is one whose thread has not come in yet, not one to greet.
+  const welcome = welcomes && empty && (info === null || info.usage.turns === 0 && info.activeTurnId === null);
+  const marks = useMemo(() => bookmarkRows(rows, bookmarks ?? [], items ?? {}), [rows, bookmarks, items]);
+  const ticks = useMemo(() => ticksOf(rows, marks), [rows, marks]);
+  // A message a jump is on its way to; it may first have to open the turn its reply folded into.
+  const [seeking, setSeeking] = useState(null);
+  const [landing, setLanding] = useState(null);
+  // A turn a jump is on its way to, which waits for the page its messages are on to come in.
+  const [revealing, setRevealing] = useState(null);
+  const flash = useTimelineFlash(s => s.target);
+  const revealBlock = useCallback(block => {
+    setLanding(null);
+    setSeeking({
+      itemId: block.itemId,
+      block,
+      key: keyOf(chatId)
+    });
+  }, [keyOf, chatId]);
+  const uiNavigation = useMemo(() => ({
+    chatId,
+    reveal: revealBlock,
+    flash: flash?.key === keyOf(chatId) && flash.block ? {
+      itemId: flash.rowId,
+      ...flash.block,
+      nonce: flash.nonce
+    } : null
+  }), [revealBlock, flash, keyOf, chatId]);
+  // Whether the thread's text clears the strip depends on the width of the view, which only the thread's own frame tells.
+  useEffect(() => {
+    const element = frameRef.current;
+    if (element === null || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const column = element.closest('.chat-column') !== null;
+    const measure = () => setFrame(current => current.width === element.offsetWidth && current.height === element.offsetHeight && current.column === column ? current : {
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+      column
+    });
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    measure();
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const element_0 = composerRef.current;
+    if (element_0 === null) {
+      return;
+    }
+    const measure_0 = () => setComposerHeight(element_0.offsetHeight);
+    const observer_0 = new ResizeObserver(measure_0);
+    observer_0.observe(element_0);
+    measure_0();
+    return () => observer_0.disconnect();
+  }, []);
+  // Oversized prompts scroll in full instead of sticking with their top outside the viewport.
+  const stickyComposer = !welcome && composerHeight < frame.height - FOLLOW_THRESHOLD_PX;
+  const coveredHeight = stickyComposer ? composerHeight : 0;
+  const coveredHeightRef = useRef(coveredHeight);
+  coveredHeightRef.current = coveredHeight;
+  // The composer pages through the thread with PageUp and PageDown; this is the element it moves.
+  useEffect(() => registerTimeline(chatId, scrollRef.current, enabled => {
+    followRef.current = enabled;
+  }, () => coveredHeightRef.current), [chatId]);
+  // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
+  // oxlint-disable-next-line react/incompatible-library
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ESTIMATED_ROW_PX,
+    getItemKey: index => rows[index].id,
+    overscan: 8,
+    scrollPaddingEnd: coveredHeight
+  });
+  /*
+   * Rows are measured as they render, so the end moves while it is drawn (a streamed line, a diff that
+   * highlights, an image that loads). `scrollToIndex` aims at where a row was when asked and fell
+   * short; the scroller's own bottom is a fact, and a new total size says a row was measured again.
+   * A word that does not add a line moves nothing, so the thread does not listen to the words.
+   */
+  const totalSize = virtualizer.getTotalSize();
+  useLayoutEffect(() => {
+    const element_1 = scrollRef.current;
+    if (!followRef.current || element_1 === null) {
+      return;
+    }
+    // The composer is in the scroll flow, so its measured height is part of this end position.
+    element_1.scrollTop = element_1.scrollHeight;
+    scrollGeometry.current = {
+      top: element_1.scrollTop,
+      height: element_1.scrollHeight,
+      viewport: element_1.clientHeight
     };
-    // One object while what it holds stays, so a find that keys an effect on it does not run it for every scroll.
-    const findOptions = useMemo(() => ({
-        chatId,
-        frame: frameRef,
-        thread: threadRef,
-        scroller: scrollRef,
-        enabled: onMainAgent,
-        rows,
-        structure: items,
-        order,
-        firstRowInView: () => {
-            const top = scrollRef.current?.scrollTop ?? 0;
-            return virtualizer.getVirtualItems().find((virtualRow) => virtualRow.end > top)?.index ?? 0;
-        },
-        openTurn: turns.add,
-        openGroup: groups.add,
-        openSubagent: subagents.add,
-        // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
-        scrollToRow: (index) => {
-            const top = scrollRef.current?.scrollTop ?? 0;
-            const bottom = top + visibleHeightRef.current;
-            if (!virtualizer.getVirtualItems().some((virtualRow) => virtualRow.index === index && virtualRow.end > top && virtualRow.start < bottom)) {
-                virtualizer.scrollToIndex(index, { align: 'center' });
-            }
-        },
-        coveredHeight: () => coveredHeightRef.current,
-        stopFollowing
-    }), [chatId, onMainAgent, rows, items, order, virtualizer, turns.add, groups.add, subagents.add, stopFollowing]);
-    const chatFind = host.useTimelineFind(findOptions);
-    const searching = chatFind.open;
-    // A find covers the whole thread, so every page before this one comes in while it is open.
-    useEffect(() => {
-        if (searching) {
-            loadEarlier();
-        }
-    }, [searching, loadEarlier]);
-    const found = useMemo(() => (searching ? ticksWithHits(ticks, chatFind.hitRows) : []), [searching, ticks, chatFind.hitRows]);
-    const foundCurrent = chatFind.currentRow === null ? null : tickOfRow(ticks, chatFind.currentRow);
-    const jumpTo = (index) => {
-        const tick = ticks[index];
-        if (!tick) {
-            return;
-        }
-        if (tick.bookmark !== null) {
-            setLanding(null);
-            setSeeking({ itemId: tick.bookmark.itemId, key: keyOf(chatId) });
-            return;
-        }
-        showRowAtTop(virtualizer, followRef, tick.rowIndex);
+  }, [rows.length, totalSize, composerHeight, frame.height]);
+  // A page that went in above moves every row down by what it measures; the reader stays on the row they were on.
+  useLayoutEffect(() => {
+    const element_2 = scrollRef.current;
+    const head = order?.[0];
+    const moved = head !== headRef.current;
+    headRef.current = head;
+    if (element_2 === null) {
+      return;
+    }
+    const anchor = anchorRef.current;
+    const index_0 = moved && anchor !== null && !followRef.current ? rows.findIndex(row_6 => row_6.id === anchor.id) : -1;
+    if (anchor !== null && index_0 !== -1) {
+      // The total measures again what this commit's rows reported; the cache alone lags behind them.
+      virtualizer.getTotalSize();
+      element_2.scrollTop = virtualizer.measurementsCache[index_0].start - anchor.offset;
+      return;
+    }
+    const row_7 = virtualizer.getVirtualItemForOffset(element_2.scrollTop);
+    anchorRef.current = row_7 === undefined ? null : {
+      id: String(row_7.key),
+      offset: row_7.start - element_2.scrollTop
     };
-    useLayoutEffect(() => {
-        if (seeking === null) {
-            return;
-        }
-        if (seeking.key !== keyOf(chatId)) {
-            setSeeking(null);
-            return;
-        }
-        if (seeking.block) {
-            const jump = uiReplyJump(seeking.block, rows, items, turns.ids, cursor !== null);
-            if (jump.kind === 'earlier') {
-                loadEarlier();
-            }
-            else if (jump.kind === 'turn') {
-                turns.add(jump.turnId);
-            }
-            else {
-                setSeeking(null);
-                if (jump.kind === 'row') {
-                    showRowAtTop(virtualizer, followRef, jump.index);
-                    setLanding({ target: seeking.block, key: seeking.key });
-                }
-            }
-            return;
-        }
-        const index = rows.findIndex((row) => row.id === seeking.itemId);
-        if (index !== -1) {
-            setSeeking(null);
-            showRowAtTop(virtualizer, followRef, index);
-            if (seeking.options?.flash) {
-                useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
-            }
-            return;
-        }
-        // The thread has not loaded yet, so nothing says the item is missing; the effect below bounds the wait.
-        if (items === undefined) {
-            return;
-        }
-        const item = items[seeking.itemId];
-        if (item === undefined && cursor !== null) {
-            loadEarlier();
-            return;
-        }
-        const turnId = item?.turnId ?? null;
-        if (turnId !== null && !turns.ids.has(turnId)) {
-            turns.add(turnId);
-            return;
-        }
+  });
+  // Close to the top, the page before goes in; again after each page that left too little above the reader.
+  useEffect(() => {
+    const element_3 = scrollRef.current;
+    if (element_3 !== null && wantsEarlier(element_3)) {
+      loadEarlier();
+    }
+  }, [rows, loadEarlier, frame.height]);
+  // A sub-agent in the thread's place hides the thread, and the strip and the keyboard go with it.
+  const onMainAgent = trail.length === 0;
+  // A node on a canvas has no strip. It is too narrow to give up a column of its width.
+  const showsScrubber = frame.column && onMainAgent && ticks.length >= SCRUBBER_MIN_TICKS;
+  const readingWidth = useChatPreferences(preferences => preferences.readingWidth);
+  const paddingLeft = threadPaddingLeft(frame.width, showsScrubber, readingMeasure(readingWidth));
+  /*
+   * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
+   * drew), so reading the scroll position costs no layout.
+   */
+  const measurements = virtualizer.measurementsCache;
+  const starts = ticks.map(tick => measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX);
+  const scrollTop = virtualizer.scrollOffset ?? 0;
+  const viewport = virtualizer.scrollRect?.height ?? 0;
+  const visibleHeight = Math.max(0, viewport - coveredHeight);
+  const visibleHeightRef = useRef(visibleHeight);
+  visibleHeightRef.current = visibleHeight;
+  const inView = showsScrubber ? messagesInView({
+    starts,
+    scrollTop,
+    visibleHeight
+  }) : null;
+  /*
+   * The virtualizer draws again only when its range of rows changes, which a scroll inside one long
+   * row never does; the scroll itself redraws the strip once the messages in view are others.
+   */
+  const [, redrawStrip] = useReducer(count => count + 1, 0);
+  const stripRef = useRef({
+    starts,
+    inView
+  });
+  stripRef.current = {
+    starts,
+    inView
+  };
+  const followStrip = element_4 => {
+    const {
+      starts: current_0,
+      inView: shown
+    } = stripRef.current;
+    if (shown === null) {
+      return;
+    }
+    const next = messagesInView({
+      starts: current_0,
+      scrollTop: element_4.scrollTop,
+      visibleHeight: visibleHeightRef.current
+    });
+    if (next?.first !== shown.first || next?.last !== shown.last) {
+      redrawStrip();
+    }
+  };
+  // One object while what it holds stays, so a find that keys an effect on it does not run it for every scroll.
+  const findOptions = useMemo(() => ({
+    chatId,
+    frame: frameRef,
+    thread: threadRef,
+    scroller: scrollRef,
+    enabled: onMainAgent,
+    rows,
+    structure: items,
+    order,
+    firstRowInView: () => {
+      const top = scrollRef.current?.scrollTop ?? 0;
+      return virtualizer.getVirtualItems().find(virtualRow => virtualRow.end > top)?.index ?? 0;
+    },
+    openTurn: turns.add,
+    openGroup: groups.add,
+    openSubagent: subagents.add,
+    // A row already on screen stays put; the find scrolls to the match itself once it is drawn.
+    scrollToRow: index_1 => {
+      const top_0 = scrollRef.current?.scrollTop ?? 0;
+      const bottom = top_0 + visibleHeightRef.current;
+      if (!virtualizer.getVirtualItems().some(virtualRow_0 => virtualRow_0.index === index_1 && virtualRow_0.end > top_0 && virtualRow_0.start < bottom)) {
+        virtualizer.scrollToIndex(index_1, {
+          align: 'center'
+        });
+      }
+    },
+    coveredHeight: () => coveredHeightRef.current,
+    stopFollowing
+  }), [chatId, onMainAgent, rows, items, order, virtualizer, turns.add, groups.add, subagents.add, stopFollowing]);
+  const chatFind = useHostTimelineFind(findOptions);
+  const searching = chatFind.open;
+  // A find covers the whole thread, so every page before this one comes in while it is open.
+  useEffect(() => {
+    if (searching) {
+      loadEarlier();
+    }
+  }, [searching, loadEarlier]);
+  const found = useMemo(() => searching ? ticksWithHits(ticks, chatFind.hitRows) : [], [searching, ticks, chatFind.hitRows]);
+  const foundCurrent = chatFind.currentRow === null ? null : tickOfRow(ticks, chatFind.currentRow);
+  const jumpTo = index_2 => {
+    const tick_0 = ticks[index_2];
+    if (!tick_0) {
+      return;
+    }
+    if (tick_0.bookmark !== null) {
+      setLanding(null);
+      setSeeking({
+        itemId: tick_0.bookmark.itemId,
+        key: keyOf(chatId)
+      });
+      return;
+    }
+    showRowAtTop(virtualizer, followRef, tick_0.rowIndex);
+  };
+  useLayoutEffect(() => {
+    if (seeking === null) {
+      return;
+    }
+    if (seeking.key !== keyOf(chatId)) {
+      setSeeking(null);
+      return;
+    }
+    if (seeking.block) {
+      const jump = uiReplyJump(seeking.block, rows, items, turns.ids, cursor !== null);
+      if (jump.kind === 'earlier') {
+        loadEarlier();
+      } else if (jump.kind === 'turn') {
+        turns.add(jump.turnId);
+      } else {
         setSeeking(null);
-        seeking.options?.onMissing?.();
-    }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
-    const waitingForThread = seeking !== null && items === undefined;
-    useEffect(() => {
-        if (!waitingForThread) {
-            return;
+        if (jump.kind === 'row') {
+          showRowAtTop(virtualizer, followRef, jump.index);
+          setLanding({
+            target: seeking.block,
+            key: seeking.key
+          });
         }
-        const timer = window.setTimeout(() => {
-            setSeeking(null);
-            seeking?.options?.onMissing?.();
-        }, JUMP_THREAD_WAIT_MS);
-        return () => window.clearTimeout(timer);
-    }, [waitingForThread, seeking]);
-    useEffect(() => registerItemJumper(keyOf(chatId), (itemId, options) => {
+      }
+      return;
+    }
+    const index_3 = rows.findIndex(row_8 => row_8.id === seeking.itemId);
+    if (index_3 !== -1) {
+      setSeeking(null);
+      showRowAtTop(virtualizer, followRef, index_3);
+      if (seeking.options?.flash) {
+        useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
+      }
+      return;
+    }
+    // The thread has not loaded yet, so nothing says the item is missing; the effect below bounds the wait.
+    if (items === undefined) {
+      return;
+    }
+    const item = items[seeking.itemId];
+    if (item === undefined && cursor !== null) {
+      loadEarlier();
+      return;
+    }
+    const turnId = item?.turnId ?? null;
+    if (turnId !== null && !turns.ids.has(turnId)) {
+      turns.add(turnId);
+      return;
+    }
+    setSeeking(null);
+    seeking.options?.onMissing?.();
+  }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
+  const waitingForThread = seeking !== null && items === undefined;
+  useEffect(() => {
+    if (!waitingForThread) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      setSeeking(null);
+      seeking?.options?.onMissing?.();
+    }, JUMP_THREAD_WAIT_MS);
+    return () => window.clearTimeout(timer);
+  }, [waitingForThread, seeking]);
+  useEffect(() => registerItemJumper(keyOf(chatId), (itemId, options) => {
+    setLanding(null);
+    setSeeking({
+      itemId,
+      key: keyOf(chatId),
+      options
+    });
+  }), [keyOf, chatId]);
+  useLayoutEffect(() => {
+    if (!landing || landing.key !== keyOf(chatId)) {
+      return;
+    }
+    let frame_0 = 0;
+    let attempts = 0;
+    const reveal = () => {
+      const scroller = scrollRef.current;
+      if (scroller && revealUiReplyBlock(scroller, landing.target)) {
+        useTimelineFlash.getState().flash(keyOf(chatId), landing.target.itemId, false, landing.target);
         setLanding(null);
-        setSeeking({ itemId, key: keyOf(chatId), options });
-    }), [keyOf, chatId]);
-    useLayoutEffect(() => {
-        if (!landing || landing.key !== keyOf(chatId)) {
-            return;
-        }
-        let frame = 0;
-        let attempts = 0;
-        const reveal = () => {
-            const scroller = scrollRef.current;
-            if (scroller && revealUiReplyBlock(scroller, landing.target)) {
-                useTimelineFlash.getState().flash(keyOf(chatId), landing.target.itemId, false, landing.target);
-                setLanding(null);
-            }
-            else if (++attempts < 30) {
-                // Virtual rows mount after scrollToIndex updates the visible range.
-                frame = requestAnimationFrame(reveal);
-            }
-            else {
-                setLanding(null);
-            }
-        };
-        frame = requestAnimationFrame(reveal);
-        return () => cancelAnimationFrame(frame);
-    }, [landing, keyOf, chatId]);
-    useLayoutEffect(() => {
-        if (revealing === null) {
-            return;
-        }
-        const { turnId, target } = revealing;
-        const changes = target === 'changes' ? rows.findIndex((row) => row.kind === 'changed-files' && row.turnId === turnId) : -1;
-        const opening = order?.map((id) => items?.[id]).find((item) => item?.kind === 'user' && item.turnId === turnId);
-        const found = changes !== -1 ? changes : rows.findIndex((row) => row.id === opening?.id || row.id === `start-${turnId}` || row.id === `fold-${turnId}`);
-        if (found !== -1) {
-            setRevealing(null);
-            showRowAtTop(virtualizer, followRef, found);
-            useTimelineFlash.getState().flash(keyOf(chatId), rows[found].id, changes !== -1);
-            return;
-        }
-        // The turn is before the page this thread holds; a thread that holds it all has no such turn.
-        if (cursor === null) {
-            setRevealing(null);
-            return;
-        }
-        loadEarlier();
-    }, [revealing, rows, order, items, virtualizer, cursor, loadEarlier, keyOf, chatId]);
-    useEffect(() => registerTurnJumper(keyOf(chatId), (turnId, target) => setRevealing({ turnId, target })), [keyOf, chatId]);
-    // The strip is memoized and draws on every scroll, so it gets one callback for its life.
-    const jumpRef = useRef(jumpTo);
-    jumpRef.current = jumpTo;
-    const pick = useCallback((index) => jumpRef.current(index), []);
-    // Read when the card asks rather than on every render, so the strip's memo holds while the thread streams.
-    const cardChat = useMemo(() => ({
-        chatId,
-        canFork: (turnId) => {
-            if (fork === null) {
-                return false;
-            }
-            const row = useChats.getState().byKey[keyOf(chatId)];
-            return forkRefusal(row?.info ?? null, row?.structure[turnId]) === null;
-        },
-        fork: (turnId) => fork?.(chatId, turnId)
-    }), [keyOf, chatId, fork]);
-    const stepRef = useRef(() => false);
-    stepRef.current = (direction) => {
-        if (!onMainAgent) {
-            return false;
-        }
-        const index = stepMessage(starts, (i) => ticks[i].kind === 'person', scrollTop, direction);
-        if (index === null) {
-            return false;
-        }
-        jumpTo(index);
-        return true;
+      } else if (++attempts < 30) {
+        // Virtual rows mount after scrollToIndex updates the visible range.
+        frame_0 = requestAnimationFrame(reveal);
+      } else {
+        setLanding(null);
+      }
     };
-    useEffect(() => registerMessageStepper(keyOf(chatId), (direction) => stepRef.current(direction)), [keyOf, chatId]);
-    // Read through a ref, so the rows keep one callback for their life and their memo holds.
-    const opensRef = useRef({ rows, show });
-    opensRef.current = { rows, show };
-    /* The whole of what a sub-agent did, in the thread's place. Its row only keeps the beginning. */
-    const openConversation = useCallback((step) => {
-        opensRef.current.show(openFromMain(step));
-    }, []);
-    const addSubagent = subagents.add;
-    /* The header of a turn a sub-agent woke. It points at the row that agent worked in, or the one it hangs under. */
-    const openSubagent = useCallback((toolUseId) => {
-        const found = findSubagentBranch(opensRef.current.rows, toolUseId);
-        if (!found) {
-            return;
-        }
-        addSubagent(found.branch.id);
-        showRowAtTop(virtualizer, followRef, found.index);
-    }, [addSubagent, virtualizer]);
-    const flashedRow = flash !== null && flash.key === keyOf(chatId) && !flash.block ? flash.rowId : null;
-    return (_jsx(FileLinkContext.Provider, { value: info?.cwd ?? null, children: _jsxs("div", { ref: frameRef, className: "relative flex min-h-0 grow flex-col", style: readingWidthStyle(readingWidth), "data-file-cwd": info?.cwd ?? '', "data-file-scope-id": scope.id, children: [searching && chatFind.bar, _jsxs(ContextMenu.Root, { children: [_jsx("div", { ref: scrollRef, 
-                            // No CSS scroll-padding here: Chromium counts the sticky composer's caret as hidden behind
-                            // it and scrolls the thread toward the end on every keystroke.
-                            className: "chat-scroll min-h-0 grow overflow-auto", 
-                            // The thread keeps its reader in place itself when a page goes in above.
-                            style: { overflowAnchor: 'none' }, onScrollCapture: (e) => {
-                                const el = e.currentTarget;
-                                // Capture the reader's movement before virtualization remeasures rows and shifts the scroll offset.
-                                const previous = scrollGeometry.current;
-                                const layoutChanged = previous.height !== el.scrollHeight || previous.viewport !== el.clientHeight;
-                                const atEnd = el.scrollHeight - el.scrollTop - el.clientHeight < FOLLOW_THRESHOLD_PX;
-                                if (!layoutChanged && el.scrollTop < previous.top) {
-                                    followRef.current = false;
-                                }
-                                else if (atEnd) {
-                                    followRef.current = true;
-                                }
-                                scrollGeometry.current = { top: el.scrollTop, height: el.scrollHeight, viewport: el.clientHeight };
-                                setTimelineAtEnd(chatId, followRef.current);
-                                if (wantsEarlier(el)) {
-                                    loadEarlier();
-                                }
-                                followStrip(el);
-                            }, children: _jsxs("div", { ref: contentRef, className: clsx('relative flex min-h-full flex-col', welcome && 'justify-center'), children: [_jsx(ContextMenu.Trigger, { ref: threadRef, className: clsx('chat-thread flex flex-col px-4 pt-4', !welcome && 'grow'), style: {
-                                            paddingLeft,
-                                            '--chat-wide-inset': `${2 * (showsScrubber ? STRIP_CLEARANCE_PX : paddingLeft) - paddingLeft}px`
-                                        }, inert: overlay ? true : undefined, onContextMenu: (e) => setTarget(readTimelineTarget(e.target, threadRef.current, withCurrentText(rows, fullItems()))), children: welcome ? (_jsx(WelcomeGreeting, { chatId: chatId })) : empty ? (_jsx(EmptyThread, { chatId: chatId })) : (_jsx("div", { className: "relative w-full shrink-0", style: { height: virtualizer.getTotalSize() }, children: _jsx(UiReplyNavigationContext.Provider, { value: uiNavigation, children: _jsx(FindRevealContext.Provider, { value: chatFind.reveal, children: virtualizer.getVirtualItems().map((virtualRow) => {
-                                                        const row = rows[virtualRow.index];
-                                                        return (_jsx(ThreadRow, { row: row, previous: virtualRow.index > 0 ? rows[virtualRow.index - 1] : null, index: virtualRow.index, top: virtualRow.start, measure: virtualizer.measureElement, chatId: chatId, flashNonce: flash !== null && flashedRow === row.id ? flash.nonce : null, bookmark: marks.get(row.id) ?? null, toggleGroup: groups.toggle, toggleTurn: turns.toggle, toggleSubagent: subagents.toggle, openSubagent: openSubagent, openConversation: openConversation }, row.id));
-                                                    }) }) }) })) }), _jsx(QuoteButton, { thread: threadRef, frame: contentRef, taker: quoteTakerRef }), _jsx("div", { ref: composerRef, 
-                                        // The card is translucent so the thread shows through it, but the pb-3 strip under it must stay opaque.
-                                        className: clsx('relative z-10 shrink-0', composer && 'px-3 pb-3 pt-3 bg-[linear-gradient(to_bottom,transparent_calc(100%-12px),var(--surface)_calc(100%-12px))]'), style: { position: stickyComposer ? 'sticky' : 'relative', bottom: 0 }, children: _jsx(QuoteTakerContext.Provider, { value: registerQuoteTaker, children: composer }) })] }) }), _jsx(TimelineMenuPopup, { target: target, thread: threadRef, chatId: onMainAgent ? chatId : null, column: frame.column })] }), drawsVisuals && _jsx(VisualDialogs, { chatId: chatId }), loadingEarlier && !overlay && (_jsxs("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center", role: "status", children: [_jsx(Icon, { icon: LoaderCircle, size: 16, className: "animate-spin text-text-faint" }), _jsx("span", { className: "sr-only", children: t('timeline.loadingEarlier') })] })), showsScrubber && !overlay && (_jsx("div", { className: "absolute top-4", style: { left: STRIP_INSET_PX, width: STRIP_WIDTH_PX, bottom: coveredHeight }, children: _jsx(ErrorBoundary, { label: t('timeline.stripFailed'), resetKeys: [ticks.length], children: _jsx(Scrubber, { ticks: ticks, firstInView: inView?.first ?? null, lastInView: inView?.last ?? null, onPick: pick, chat: cardChat, found: found, foundCurrent: foundCurrent }) }) })), overlay && (_jsx("div", { className: "absolute inset-0 z-5 flex flex-col bg-surface", style: { paddingBottom: coveredHeight }, children: overlay }))] }) }));
-}
+    frame_0 = requestAnimationFrame(reveal);
+    return () => cancelAnimationFrame(frame_0);
+  }, [landing, keyOf, chatId]);
+  useLayoutEffect(() => {
+    if (revealing === null) {
+      return;
+    }
+    const {
+      turnId: turnId_0,
+      target: target_0
+    } = revealing;
+    const changes = target_0 === 'changes' ? rows.findIndex(row_9 => row_9.kind === 'changed-files' && row_9.turnId === turnId_0) : -1;
+    const opening = order?.map(id_0 => items?.[id_0]).find(item_0 => item_0?.kind === 'user' && item_0.turnId === turnId_0);
+    const found_0 = changes !== -1 ? changes : rows.findIndex(row_10 => row_10.id === opening?.id || row_10.id === `start-${turnId_0}` || row_10.id === `fold-${turnId_0}`);
+    if (found_0 !== -1) {
+      setRevealing(null);
+      showRowAtTop(virtualizer, followRef, found_0);
+      useTimelineFlash.getState().flash(keyOf(chatId), rows[found_0].id, changes !== -1);
+      return;
+    }
+    // The turn is before the page this thread holds; a thread that holds it all has no such turn.
+    if (cursor === null) {
+      setRevealing(null);
+      return;
+    }
+    loadEarlier();
+  }, [revealing, rows, order, items, virtualizer, cursor, loadEarlier, keyOf, chatId]);
+  useEffect(() => registerTurnJumper(keyOf(chatId), (turnId_1, target_1) => setRevealing({
+    turnId: turnId_1,
+    target: target_1
+  })), [keyOf, chatId]);
+  // The strip is memoized and draws on every scroll, so it gets one callback for its life.
+  const jumpRef = useRef(jumpTo);
+  jumpRef.current = jumpTo;
+  const pick = useCallback(index_4 => jumpRef.current(index_4), []);
+  // Read when the card asks rather than on every render, so the strip's memo holds while the thread streams.
+  const cardChat = useMemo(() => ({
+    chatId,
+    canFork: turnId_2 => {
+      if (fork === null) {
+        return false;
+      }
+      const row_11 = useChats.getState().byKey[keyOf(chatId)];
+      return forkRefusal(row_11?.info ?? null, row_11?.structure[turnId_2]) === null;
+    },
+    fork: turnId_3 => fork?.(chatId, turnId_3)
+  }), [keyOf, chatId, fork]);
+  const stepRef = useRef(() => false);
+  stepRef.current = direction => {
+    if (!onMainAgent) {
+      return false;
+    }
+    const index_5 = stepMessage(starts, i => ticks[i].kind === 'person', scrollTop, direction);
+    if (index_5 === null) {
+      return false;
+    }
+    jumpTo(index_5);
+    return true;
+  };
+  useEffect(() => registerMessageStepper(keyOf(chatId), direction_0 => stepRef.current(direction_0)), [keyOf, chatId]);
+  // Read through a ref, so the rows keep one callback for their life and their memo holds.
+  const opensRef = useRef({
+    rows,
+    show
+  });
+  opensRef.current = {
+    rows,
+    show
+  };
+  /* The whole of what a sub-agent did, in the thread's place. Its row only keeps the beginning. */
+  const openConversation = useCallback(step => {
+    opensRef.current.show(openFromMain(step));
+  }, []);
+  const addSubagent = subagents.add;
+  /* The header of a turn a sub-agent woke. It points at the row that agent worked in, or the one it hangs under. */
+  const openSubagent = useCallback(toolUseId => {
+    const found_1 = findSubagentBranch(opensRef.current.rows, toolUseId);
+    if (!found_1) {
+      return;
+    }
+    addSubagent(found_1.branch.id);
+    showRowAtTop(virtualizer, followRef, found_1.index);
+  }, [addSubagent, virtualizer]);
+  const flashedRow = flash !== null && flash.key === keyOf(chatId) && !flash.block ? flash.rowId : null;
+  return (
+    /*#__PURE__*/
+    // A file an answer names is relative to the folder this chat runs in, which is a worktree as
+    // often as it is the project itself.
+    _jsx(FileLinkContext.Provider, {
+      value: info?.cwd ?? null,
+      children: /*#__PURE__*/_jsxs("div", {
+        ref: frameRef,
+        className: "relative flex min-h-0 grow flex-col",
+        style: readingWidthStyle(readingWidth),
+        "data-file-cwd": info?.cwd ?? '',
+        "data-file-scope-id": scope.id,
+        children: [searching && chatFind.bar, /*#__PURE__*/_jsxs(ContextMenu.Root, {
+          children: [/*#__PURE__*/_jsx("div", {
+            ref: scrollRef
+            // No CSS scroll-padding here: Chromium counts the sticky composer's caret as hidden behind
+            // it and scrolls the thread toward the end on every keystroke.
+            ,
+            className: "chat-scroll min-h-0 grow overflow-auto"
+            // The thread keeps its reader in place itself when a page goes in above.
+            ,
+            style: {
+              overflowAnchor: 'none'
+            },
+            onScrollCapture: e => {
+              const el = e.currentTarget;
+              // Capture the reader's movement before virtualization remeasures rows and shifts the scroll offset.
+              const previous = scrollGeometry.current;
+              const layoutChanged = previous.height !== el.scrollHeight || previous.viewport !== el.clientHeight;
+              const atEnd = el.scrollHeight - el.scrollTop - el.clientHeight < FOLLOW_THRESHOLD_PX;
+              if (!layoutChanged && el.scrollTop < previous.top) {
+                followRef.current = false;
+              } else if (atEnd) {
+                followRef.current = true;
+              }
+              scrollGeometry.current = {
+                top: el.scrollTop,
+                height: el.scrollHeight,
+                viewport: el.clientHeight
+              };
+              setTimelineAtEnd(chatId, followRef.current);
+              if (wantsEarlier(el)) {
+                loadEarlier();
+              }
+              followStrip(el);
+            },
+            children: /*#__PURE__*/_jsxs("div", {
+              ref: contentRef,
+              className: clsx('relative flex min-h-full flex-col', welcome && 'justify-center'),
+              children: [/*#__PURE__*/_jsx(ContextMenu.Trigger, {
+                ref: threadRef,
+                className: clsx('chat-thread flex flex-col px-4 pt-4', !welcome && 'grow'),
+                style: {
+                  paddingLeft,
+                  '--chat-wide-inset': `${2 * (showsScrubber ? STRIP_CLEARANCE_PX : paddingLeft) - paddingLeft}px`
+                },
+                inert: overlay ? true : undefined,
+                onContextMenu: e_0 => setTarget(readTimelineTarget(e_0.target, threadRef.current, withCurrentText(rows, fullItems()))),
+                children: welcome ? /*#__PURE__*/_jsx(WelcomeGreeting, {
+                  chatId: chatId
+                }) : empty ? /*#__PURE__*/_jsx(EmptyThread, {
+                  chatId: chatId
+                }) : /*#__PURE__*/_jsx("div", {
+                  className: "relative w-full shrink-0",
+                  style: {
+                    height: virtualizer.getTotalSize()
+                  },
+                  children: /*#__PURE__*/_jsx(UiReplyNavigationContext.Provider, {
+                    value: uiNavigation,
+                    children: /*#__PURE__*/_jsx(FindRevealContext.Provider, {
+                      value: chatFind.reveal,
+                      children: virtualizer.getVirtualItems().map(virtualRow_1 => {
+                        const row_12 = rows[virtualRow_1.index];
+                        return /*#__PURE__*/_jsx(ThreadRow, {
+                          row: row_12,
+                          previous: virtualRow_1.index > 0 ? rows[virtualRow_1.index - 1] : null,
+                          index: virtualRow_1.index,
+                          top: virtualRow_1.start,
+                          measure: virtualizer.measureElement,
+                          chatId: chatId,
+                          flashNonce: flash !== null && flashedRow === row_12.id ? flash.nonce : null,
+                          bookmark: marks.get(row_12.id) ?? null,
+                          toggleGroup: groups.toggle,
+                          toggleTurn: turns.toggle,
+                          toggleSubagent: subagents.toggle,
+                          openSubagent: openSubagent,
+                          openConversation: openConversation
+                        }, row_12.id);
+                      })
+                    })
+                  })
+                })
+              }), /*#__PURE__*/_jsx(QuoteButton, {
+                thread: threadRef,
+                frame: contentRef,
+                taker: quoteTakerRef
+              }), /*#__PURE__*/_jsx("div", {
+                ref: composerRef
+                // The card is translucent so the thread shows through it, but the pb-3 strip under it must stay opaque.
+                ,
+                className: clsx('relative z-10 shrink-0', composer && 'px-3 pb-3 pt-3 bg-[linear-gradient(to_bottom,transparent_calc(100%-12px),var(--surface)_calc(100%-12px))]'),
+                style: {
+                  position: stickyComposer ? 'sticky' : 'relative',
+                  bottom: 0
+                },
+                children: /*#__PURE__*/_jsx(QuoteTakerContext.Provider, {
+                  value: registerQuoteTaker,
+                  children: composer
+                })
+              })]
+            })
+          }), /*#__PURE__*/_jsx(TimelineMenuPopup, {
+            target: target,
+            thread: threadRef,
+            chatId: onMainAgent ? chatId : null,
+            column: frame.column
+          })]
+        }), drawsVisuals && /*#__PURE__*/_jsx(VisualDialogs, {
+          chatId: chatId
+        }), loadingEarlier && !overlay && /*#__PURE__*/_jsxs("div", {
+          className: "pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center",
+          role: "status",
+          children: [/*#__PURE__*/_jsx(Icon, {
+            icon: LoaderCircle,
+            size: 16,
+            className: "animate-spin text-text-faint"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "sr-only",
+            children: t('timeline.loadingEarlier')
+          })]
+        }), showsScrubber && !overlay && /*#__PURE__*/_jsx("div", {
+          className: "absolute top-4",
+          style: {
+            left: STRIP_INSET_PX,
+            width: STRIP_WIDTH_PX,
+            bottom: coveredHeight
+          },
+          children: /*#__PURE__*/_jsx(ErrorBoundary, {
+            label: t('timeline.stripFailed'),
+            resetKeys: [ticks.length],
+            children: /*#__PURE__*/_jsx(Scrubber, {
+              ticks: ticks,
+              firstInView: inView?.first ?? null,
+              lastInView: inView?.last ?? null,
+              onPick: pick,
+              chat: cardChat,
+              found: found,
+              foundCurrent: foundCurrent
+            })
+          })
+        }), overlay && /*#__PURE__*/_jsx("div", {
+          className: "absolute inset-0 z-5 flex flex-col bg-surface",
+          style: {
+            paddingBottom: coveredHeight
+          },
+          children: overlay
+        })]
+      })
+    })
+  );
+}