@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/chat/ui/Timeline.tsx

@@ -0,0 +1,628 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import clsx from 'clsx';
+import { LoaderCircle } from 'lucide-react';
+import type { ChatBookmark } from '@adecore/agent-contracts';
+import { useForkedTurns } from '../forks';
+import { bookmarkRows } from '../logic/bookmarks';
+import { deriveTimelineRows, findSubagentBranch, type TimelineRow } from '../logic/timeline';
+import { withThreadCards } from '../logic/thread-cards';
+import { openFromMain, useSubagentTrail, type SubagentStep } from '../subagent-view';
+import {
+    registerItemJumper,
+    registerMessageStepper,
+    registerTimeline,
+    registerTurnJumper,
+    setTimelineAtEnd,
+    wantsEarlier,
+    type ReadingAnchor,
+    type TurnTarget
+} from '../timeline-scroll';
+import { useTimelineFlash } from '../timeline-flash';
+import {
+    SCRUBBER_MIN_TICKS,
+    STRIP_INSET_PX,
+    STRIP_WIDTH_PX,
+    messagesInView,
+    stepMessage,
+    threadPaddingLeft,
+    tickOfRow,
+    ticksOf,
+    ticksWithHits
+} from '../logic/scrubber';
+import { EMPTY_TARGET, readTimelineTarget, withCurrentText, type TimelineTarget } from '../logic/timeline-target';
+import { forkRefusal } from '../logic/fork';
+import { FindRevealContext } from './find-reveal';
+import { BookmarkMarker } from './BookmarkMarker';
+import { MessageActions } from './MessageActions';
+import { Scrubber, type CardChat } from './Scrubber';
+import { TimelineMenuPopup } from './TimelineMenu';
+import { FOLLOW_THRESHOLD_PX, replyHeader, rowRhythm } from './rows/row-rhythm';
+import { QuoteButton } from './QuoteButton';
+import { QuoteTakerContext, type QuoteTaker } from './quote-selection';
+import { useToggleSet } from './useToggleSet';
+import { WelcomeGreeting } from './Welcome';
+import { Row } from './rows/Rows';
+import { ReplyHeader } from './rows/MessageRows';
+import { useChatRow, useChats } from '../../state/chats';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { FileLinkContext } from './file-links';
+import { AgentIcon } from '../../agents/AgentIcon';
+import { useModelName } from '../../agents/model-name';
+import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
+
+const ESTIMATED_ROW_PX = 56;
+
+/*
+ * 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 }: { chatId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const info = useChatRow(chatId, (row) => row?.info ?? null);
+    const model = useModelName(info?.provider, info?.selection.model ?? '');
+    const sources = chatHost().useContextSources(chatId);
+    const hidesFolder = chatHost().useHidesFolder(chatId);
+    return (
+        <div className="flex grow items-center justify-center">
+            <div className="flex max-w-sm flex-col items-center gap-3 px-6 py-8 text-center">
+                <EmptyState icon={info ? <AgentIcon kind={info.provider} /> : undefined} className="p-0">
+                    {info ? t('timeline.empty.ready', { model }) : t('timeline.empty.ask')}
+                </EmptyState>
+                {sources.length > 0 && (
+                    <div className="flex max-w-full flex-col items-center gap-1">
+                        <SectionLabel>{t('timeline.empty.canRead')}</SectionLabel>
+                        <span className="max-w-full text-xs text-text-muted">{sources.map((source) => source.title).join(', ')}</span>
+                    </div>
+                )}
+                {info?.cwd && !hidesFolder && (
+                    <div className="flex max-w-full flex-col items-center gap-1">
+                        <SectionLabel>{t('timeline.empty.worksIn')}</SectionLabel>
+                        <span className="max-w-full font-mono text-xs break-all text-text-muted">{info.cwd}</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/*
+ * 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 }: { row: TimelineRow; chatId: string; bookmark: ChatBookmark | null; children: ReactNode }) {
+    if (row.kind !== 'user' && row.kind !== 'assistant') {
+        return (
+            <>
+                {bookmark !== null && <BookmarkMarker chatId={chatId} itemId={bookmark.itemId} bookmark={bookmark} />}
+                {children}
+            </>
+        );
+    }
+    return (
+        <>
+            <BookmarkMarker chatId={chatId} itemId={row.id} bookmark={bookmark} />
+            <div className="group/message">
+                {children}
+                <MessageActions chatId={chatId} row={row} />
+            </div>
+        </>
+    );
+}
+
+/*
+ * `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 }: { chatId: string; composer?: ReactNode; overlay?: ReactNode }) {
+    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 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<HTMLDivElement>(null);
+    const threadRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const quoteTakerRef = useRef<QuoteTaker | null>(null);
+    const registerQuoteTaker = useCallback((take: QuoteTaker) => {
+        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<TimelineTarget>(EMPTY_TARGET);
+    const { trail, show } = useSubagentTrail(chatId);
+    const frameRef = useRef<HTMLDivElement>(null);
+    const composerRef = useRef<HTMLDivElement>(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<ReadingAnchor | null>(null);
+    const headRef = useRef<string | undefined>(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 }
+        );
+    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns]);
+    const cards = chatHost().useThreadCards(scopeId, chatId);
+    const rows = useMemo(() => withThreadCards(threadRows, cards), [threadRows, cards]);
+    const welcomes = chatHost().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<string | null>(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<{ turnId: string; target: TurnTarget } | null>(null);
+    const flash = useTimelineFlash((s) => s.target);
+
+    // 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 = (): void =>
+            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]
+    );
+
+    // The client does not run the React Compiler, so its memoization rule has nothing to break here.
+    // 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
+    });
+
+    // A change in what the last row says (a streaming delta) must also pull the view down.
+    const lastRow = rows[rows.length - 1];
+    const lastReplyLength = useChatRow(chatId, (row) => {
+        const item = lastRow?.kind === 'assistant' ? row?.items[lastRow.id] : undefined;
+        return item?.kind === 'assistant' ? item.text.length : null;
+    });
+    const tail = lastReplyLength ?? rows.length;
+    /*
+     * The rows are measured as they render, so the end of the list moves while it is drawn: a diff
+     * that highlights, an image that loads, a tool row that grows a line of output. `scrollToIndex`
+     * aims at where the row was when it was asked, which is what left the thread short of the end.
+     * The scroller's own bottom is a fact rather than an estimate, and the total size changing is
+     * what says a row was measured again, so this runs for every one of those.
+     */
+    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, tail, 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 };
+    });
+
+    // 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 paddingLeft = threadPaddingLeft(frame.width, showsScrubber);
+
+    /*
+     * 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. The virtualizer renders this component on
+     * every scroll already.
+     */
+    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 inView = showsScrubber ? messagesInView({ starts, scrollTop, visibleHeight }) : null;
+
+    const chatFind = chatHost().useTimelineFind({
+        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 + visibleHeight;
+            if (!virtualizer.getVirtualItems().some((virtualRow) => virtualRow.index === index && virtualRow.end > top && virtualRow.start < bottom)) {
+                virtualizer.scrollToIndex(index, { align: 'center' });
+            }
+        },
+        coveredHeight: () => coveredHeightRef.current,
+        stopFollowing
+    });
+    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: number): void => {
+        const tick = ticks[index];
+        if (!tick) {
+            return;
+        }
+        if (tick.bookmark !== null) {
+            setSeeking(tick.bookmark.itemId);
+            return;
+        }
+        followRef.current = false;
+        virtualizer.scrollToIndex(tick.rowIndex, { align: 'start' });
+    };
+
+    useLayoutEffect(() => {
+        if (seeking === null) {
+            return;
+        }
+        const index = rows.findIndex((row) => row.id === seeking);
+        if (index !== -1) {
+            setSeeking(null);
+            followRef.current = false;
+            virtualizer.scrollToIndex(index, { align: 'start' });
+            return;
+        }
+        const item = items?.[seeking];
+        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, rows, items, turns, virtualizer, cursor, loadEarlier]);
+    useEffect(() => registerItemJumper(keyOf(chatId), setSeeking), [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);
+            followRef.current = false;
+            virtualizer.scrollToIndex(found, { align: 'start' });
+            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: number) => 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<CardChat>(
+        () => ({
+            chatId,
+            canFork: (turnId) => {
+                if (chatHost().fork === null) {
+                    return false;
+                }
+                const row = useChats.getState().byKey[keyOf(chatId)];
+                return forkRefusal(row?.info ?? null, row?.structure[turnId]) === null;
+            },
+            fork: (turnId) => chatHost().fork?.(chatId, turnId)
+        }),
+        [keyOf, chatId]
+    );
+
+    const stepRef = useRef<(direction: -1 | 1) => boolean>(() => 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;
+    };
+    useEffect(() => registerMessageStepper(keyOf(chatId), (direction) => stepRef.current(direction)), [keyOf, chatId]);
+
+    /* The whole of what a sub-agent did, in the thread's place. Its row only keeps the beginning. */
+    const openConversation = (step: SubagentStep): void => {
+        show(openFromMain(step));
+    };
+
+    /* 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 = (toolUseId: string): void => {
+        const found = findSubagentBranch(rows, toolUseId);
+        if (!found) {
+            return;
+        }
+        subagents.add(found.branch.id);
+        followRef.current = false;
+        virtualizer.scrollToIndex(found.index, { align: 'start' });
+    };
+
+    return (
+        // 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.
+        <FileLinkContext.Provider value={info?.cwd ?? null}>
+            <div ref={frameRef} className="relative flex min-h-0 grow flex-col">
+                {searching && chatFind.bar}
+                <ContextMenu.Root>
+                    <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();
+                            }
+                        }}
+                    >
+                        {/* A welcome centers the greeting and the composer as one group. The composer keeps its
+                            place in the tree, so the first message does not mount it again. */}
+                        <div ref={contentRef} className={clsx('relative flex min-h-full flex-col', welcome && 'justify-center')}>
+                            <ContextMenu.Trigger
+                                ref={threadRef}
+                                className={clsx('chat-thread flex flex-col px-4 pt-4', !welcome && 'grow')}
+                                style={{ paddingLeft }}
+                                inert={overlay ? true : undefined}
+                                onContextMenu={(e) =>
+                                    setTarget(readTimelineTarget(e.target as HTMLElement, threadRef.current, withCurrentText(rows, fullItems())))
+                                }
+                            >
+                                {welcome ? (
+                                    <WelcomeGreeting chatId={chatId} />
+                                ) : empty ? (
+                                    <EmptyThread chatId={chatId} />
+                                ) : (
+                                    <div className="chat-column-content relative w-full shrink-0" style={{ height: virtualizer.getTotalSize() }}>
+                                        {virtualizer.getVirtualItems().map((virtualRow) => {
+                                            const row = rows[virtualRow.index]!;
+                                            // Put turn gaps inside the measured row so the virtualizer includes them.
+                                            const question = row.kind === 'user';
+                                            const previous = virtualRow.index > 0 ? rows[virtualRow.index - 1]! : null;
+                                            const header = replyHeader(row, previous);
+                                            return (
+                                                <div
+                                                    key={row.id}
+                                                    data-index={virtualRow.index}
+                                                    data-item-id={row.id}
+                                                    ref={virtualizer.measureElement}
+                                                    className={clsx(
+                                                        'absolute left-0 top-0 w-full',
+                                                        rowRhythm(row, previous),
+                                                        question && virtualRow.index > 0 && 'pt-(--chat-turn-gap)'
+                                                    )}
+                                                    style={{ transform: `translateY(${virtualRow.start}px)` }}
+                                                >
+                                                    {flash !== null && flash.key === keyOf(chatId) && flash.rowId === row.id && (
+                                                        <span
+                                                            key={flash.nonce}
+                                                            className="chat-flash pointer-events-none absolute inset-0 rounded-lg"
+                                                            aria-hidden
+                                                        />
+                                                    )}
+                                                    {header !== null && <ReplyHeader chatId={chatId} at={header.at} />}
+                                                    <FindRevealContext.Provider value={chatFind.reveal}>
+                                                        <MarkableRow row={row} chatId={chatId} bookmark={marks.get(row.id) ?? null}>
+                                                            <Row
+                                                                row={row}
+                                                                chatId={chatId}
+                                                                toggleGroup={groups.toggle}
+                                                                toggleTurn={turns.toggle}
+                                                                toggleSubagent={subagents.toggle}
+                                                                openSubagent={openSubagent}
+                                                                openConversation={openConversation}
+                                                            />
+                                                        </MarkableRow>
+                                                    </FindRevealContext.Provider>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+                            </ContextMenu.Trigger>
+                            <QuoteButton thread={threadRef} frame={contentRef} taker={quoteTakerRef} />
+                            <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 }}
+                            >
+                                <QuoteTakerContext.Provider value={registerQuoteTaker}>{composer}</QuoteTakerContext.Provider>
+                            </div>
+                        </div>
+                    </div>
+                    <TimelineMenuPopup target={target} thread={threadRef} chatId={onMainAgent ? chatId : null} />
+                </ContextMenu.Root>
+                {loadingEarlier && !overlay && (
+                    <div className="pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center" role="status">
+                        <Icon icon={LoaderCircle} size={16} className="animate-spin text-text-faint" />
+                        <span className="sr-only">{t('timeline.loadingEarlier')}</span>
+                    </div>
+                )}
+                {showsScrubber && !overlay && (
+                    <div className="absolute top-4" style={{ left: STRIP_INSET_PX, width: STRIP_WIDTH_PX, bottom: coveredHeight }}>
+                        <ErrorBoundary label={t('timeline.stripFailed')} resetKeys={[ticks.length]}>
+                            <Scrubber
+                                ticks={ticks}
+                                firstInView={inView?.first ?? null}
+                                lastInView={inView?.last ?? null}
+                                onPick={pick}
+                                chat={cardChat}
+                                found={found}
+                                foundCurrent={foundCurrent}
+                            />
+                        </ErrorBoundary>
+                    </div>
+                )}
+                {overlay && (
+                    <div className="absolute inset-0 z-5 flex flex-col bg-surface" style={{ paddingBottom: coveredHeight }}>
+                        {overlay}
+                    </div>
+                )}
+            </div>
+        </FileLinkContext.Provider>
+    );
+}