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

package/src/chat/ui/Scrubber.tsx

@@ -0,0 +1,265 @@
+import { Fragment, memo, useEffect, useMemo, useState, type ComponentProps, type MouseEvent as ReactMouseEvent } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Bookmark, Copy, GitFork, type LucideIcon } from 'lucide-react';
+import { layoutTicks, messageAt, slotInView, slotOf, tickWidth, TICK_HEIGHT_PX, type ScrubberTick } from '../logic/scrubber';
+import { BookmarkMenuItems } from './TimelineMenu';
+import { formatMoment } from '@adecore/ui/format';
+import { cameThroughPortal, ContextMenu, copyText, Icon, Menu, PreviewCard } from '@adecore/ui';
+
+const PREVIEW_CHARS = 280;
+
+const FOUND_WIDTH_PX = 4;
+
+function timeOf(createdAt: number): string {
+    return formatMoment(createdAt);
+}
+
+/* What the card may do to the chat the strip belongs to; absent, the card only offers what needs no chat. */
+export interface CardChat {
+    chatId: string;
+    canFork(turnId: string): boolean;
+    fork(turnId: string): void;
+}
+
+/* What the card offers for a message. An action a tick cannot take is not drawn at all, not even disabled. */
+type CardActionId = 'copy-message' | 'fork';
+
+interface CardAction {
+    /* The key of its label in the `chat` namespace; the card reads the words where it draws them. */
+    label: string;
+    icon: LucideIcon;
+    offers(tick: ScrubberTick, chat: CardChat | null): boolean;
+    run(tick: ScrubberTick, chat: CardChat | null): void;
+}
+
+const CARD_ACTIONS: Record<CardActionId, CardAction> = {
+    'copy-message': {
+        label: 'timeline.menu.copyMessage',
+        icon: Copy,
+        // A wake carries the machine's label, not anything a person wrote.
+        offers: (tick) => tick.kind === 'person' && tick.text !== '',
+        run: (tick) => copyText(tick.text)
+    },
+    fork: {
+        label: 'timeline.menu.forkFromHere',
+        icon: GitFork,
+        offers: (tick, chat) => chat !== null && tick.turnId !== null && chat.canFork(tick.turnId),
+        run: (tick, chat) => {
+            if (chat !== null && tick.turnId !== null) {
+                chat.fork(tick.turnId);
+            }
+        }
+    }
+};
+
+interface ScrubberProps {
+    ticks: readonly ScrubberTick[];
+    /* The indexes in `ticks` of the first and last message on screen; two numbers, so the memo holds while scrolling within them. */
+    firstInView: number | null;
+    lastInView: number | null;
+    onPick(index: number): void;
+    chat?: CardChat | null;
+    /* Per tick, whether a find hit falls in its stretch of the thread; empty while nothing is searched. */
+    found?: readonly boolean[];
+    /* The tick of the hit the find bar is on. */
+    foundCurrent?: number | null;
+}
+
+const NOTHING_FOUND: readonly boolean[] = [];
+
+/*
+ * The strip at the left edge of a chat view: a tick per message of the person, per wake by tasks and
+ * per other message with a bookmark, the ones on screen bright and the rest dimmed, a bookmark in the accent, growing only under the pointer. A single hover card follows the pointer along the strip, anchored at the tick
+ * it points at, so a thousand ticks are a thousand spans and not a thousand popups. While a find is
+ * open, a short mark at the strip's right edge stands beside every tick with a hit under it.
+ */
+export const Scrubber = memo(function Scrubber({
+    ticks,
+    firstInView,
+    lastInView,
+    onPick,
+    chat = null,
+    found = NOTHING_FOUND,
+    foundCurrent = null
+}: ScrubberProps) {
+    const { t } = useTranslation('agent-chat');
+    // State rather than a ref. The card's anchor is built during render and has to change when the strip does.
+    const [strip, setStrip] = useState<HTMLDivElement | null>(null);
+    const [height, setHeight] = useState(0);
+    // The message the card is about; it stays while the card closes, so the card never empties as it fades.
+    const [hovered, setHovered] = useState<number | null>(null);
+    // Apart from `hovered`, which outlives the pointer for the card's sake. The ticks shrink back the moment it leaves.
+    const [pointing, setPointing] = useState(false);
+    const [cardOpen, setCardOpen] = useState(false);
+    // The message a right-click was on, kept apart from `hovered`, which moves on with the pointer while the menu is up.
+    const [menuIndex, setMenuIndex] = useState<number | null>(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    useEffect(() => {
+        if (strip === null || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => setHeight(strip.offsetHeight));
+        observer.observe(strip);
+        return () => observer.disconnect();
+    }, [strip]);
+
+    const kinds = useMemo(() => ticks.map((tick) => tick.kind), [ticks]);
+    const marked = useMemo(() => ticks.map((tick) => tick.bookmark !== null), [ticks]);
+    const layout = useMemo(() => layoutTicks(kinds, height, marked, found), [kinds, height, marked, found]);
+    const currentSlot = foundCurrent === null ? null : slotOf(layout, foundCurrent);
+    const inView = firstInView === null || lastInView === null ? null : { first: firstInView, last: lastInView };
+    const hoveredTick = hovered === null ? null : (ticks[hovered] ?? null);
+    const hoveredSlot = hovered === null ? null : slotOf(layout, hovered);
+    const anchorY = hoveredSlot === null ? null : layout.slots[hoveredSlot]!.y;
+
+    const anchor = useMemo(() => {
+        const element = strip;
+        if (anchorY === null || element === null) {
+            return undefined;
+        }
+        return {
+            contextElement: element,
+            getBoundingClientRect: () => {
+                const rect = element.getBoundingClientRect();
+                return DOMRect.fromRect({ x: rect.left, y: rect.top + anchorY + TICK_HEIGHT_PX / 2, width: rect.width, height: 0 });
+            }
+        };
+    }, [anchorY, strip]);
+
+    const pointAt = (e: ReactMouseEvent<HTMLDivElement>): number | null => messageAt(layout, e.clientY - e.currentTarget.getBoundingClientRect().top);
+
+    const actionsFor = (tick: ScrubberTick | null): CardAction[] =>
+        tick === null ? [] : Object.values(CARD_ACTIONS).filter((action) => action.offers(tick, chat));
+    const actions = actionsFor(hoveredTick);
+    /* The message a bookmark goes on: the one it is on already, or the person's own. A wake is the machine's and holds none. */
+    const markableOf = (tick: ScrubberTick | null): string | null =>
+        tick === null || chat === null ? null : (tick.bookmark?.itemId ?? (tick.kind === 'person' ? tick.id : null));
+    const menuTick = menuIndex === null ? null : (ticks[menuIndex] ?? null);
+    const menuMarkable = markableOf(menuTick);
+
+    const onContextMenu: NonNullable<ComponentProps<typeof ContextMenu.Trigger>['onContextMenu']> = (e) => {
+        // The hover card is a child here as well, and a click in it is about no tick.
+        const index = strip === null || cameThroughPortal(e) ? null : messageAt(layout, e.clientY - strip.getBoundingClientRect().top);
+        const tick = index === null ? null : (ticks[index] ?? null);
+        if (tick === null || (actionsFor(tick).length === 0 && markableOf(tick) === null)) {
+            e.preventBaseUIHandler();
+            return;
+        }
+        setMenuIndex(index);
+    };
+
+    return (
+        <ContextMenu.Root onOpenChange={setMenuOpen}>
+            <ContextMenu.Trigger className="h-full w-full" onContextMenu={onContextMenu}>
+                <PreviewCard.Root open={cardOpen && !menuOpen} onOpenChange={setCardOpen}>
+                    <PreviewCard.Trigger
+                        delay={150}
+                        closeDelay={150}
+                        render={
+                            <div
+                                ref={setStrip}
+                                role="navigation"
+                                aria-label={t('scrubber.strip')}
+                                className="relative h-full w-full cursor-pointer select-none"
+                                onPointerMove={(e) => {
+                                    setPointing(true);
+                                    const index = pointAt(e);
+                                    if (index !== hovered) {
+                                        setHovered(index);
+                                    }
+                                }}
+                                onPointerLeave={() => setPointing(false)}
+                                onClick={(e) => {
+                                    const index = pointAt(e);
+                                    if (index !== null) {
+                                        onPick(index);
+                                    }
+                                }}
+                            />
+                        }
+                    >
+                        {layout.slots.map((slot, index) => {
+                            const distance = pointing && hoveredSlot !== null ? Math.abs(index - hoveredSlot) : null;
+                            // A bookmark is a place to find again from anywhere, so it never dims with the rest.
+                            const bright = slot.marked || slotInView(slot, inView) || distance === 0;
+                            return (
+                                <Fragment key={slot.first}>
+                                    <span
+                                        aria-hidden
+                                        className={clsx(
+                                            'absolute left-1 rounded-full transition-[width,opacity] duration-100 ease-out motion-reduce:transition-none',
+                                            slot.marked ? 'bg-accent' : slot.kind === 'wake' ? 'bg-text-muted' : 'bg-text',
+                                            bright ? 'opacity-100' : 'opacity-30'
+                                        )}
+                                        style={{ top: slot.y, height: TICK_HEIGHT_PX, width: tickWidth(slot.kind, distance) }}
+                                    />
+                                    {slot.found && (
+                                        <span
+                                            aria-hidden
+                                            className={clsx(
+                                                'absolute right-0 rounded-full bg-find-current',
+                                                index === currentSlot ? 'opacity-100' : 'opacity-50'
+                                            )}
+                                            style={{ top: slot.y, height: TICK_HEIGHT_PX, width: FOUND_WIDTH_PX }}
+                                        />
+                                    )}
+                                </Fragment>
+                            );
+                        })}
+                    </PreviewCard.Trigger>
+                    <PreviewCard.Popup anchor={anchor} side="right" align="center" sideOffset={4} className="w-72">
+                        {hoveredTick !== null && (
+                            <>
+                                <div className="px-2.5 pt-1.5 pb-2">
+                                    <div className="flex items-baseline justify-between gap-3 text-xs text-text-faint">
+                                        {hoveredTick.bookmark === null ? (
+                                            <span>{hoveredTick.kind === 'person' ? t('rows.user.heading') : t('scrubber.tasks')}</span>
+                                        ) : (
+                                            <span className="flex min-w-0 items-center gap-1 self-center text-text-muted">
+                                                <Icon icon={Bookmark} size={12} className="shrink-0 text-accent" />
+                                                <span className="truncate">{hoveredTick.bookmark.name ?? t('bookmarks.unnamed')}</span>
+                                            </span>
+                                        )}
+                                        <time className="tabular-nums">{timeOf(hoveredTick.createdAt)}</time>
+                                    </div>
+                                    <p className="mt-1 line-clamp-4 text-sm break-words whitespace-pre-line text-text">
+                                        {hoveredTick.text.slice(0, PREVIEW_CHARS) || t('pickers.stash.noText')}
+                                    </p>
+                                </div>
+                                {actions.length > 0 && (
+                                    <>
+                                        <Menu.Separator />
+                                        {actions.map((action) => (
+                                            <button
+                                                key={action.label}
+                                                type="button"
+                                                className="menu-item w-full hover:bg-surface-hover"
+                                                onClick={() => action.run(hoveredTick, chat)}
+                                            >
+                                                <Icon icon={action.icon} size={14} /> {t(action.label)}
+                                            </button>
+                                        ))}
+                                    </>
+                                )}
+                            </>
+                        )}
+                    </PreviewCard.Popup>
+                </PreviewCard.Root>
+            </ContextMenu.Trigger>
+            <ContextMenu.Popup>
+                {menuTick !== null &&
+                    actionsFor(menuTick).map((action) => (
+                        <ContextMenu.Item key={action.label} onClick={() => action.run(menuTick, chat)}>
+                            <Icon icon={action.icon} size={14} /> {t(action.label)}
+                        </ContextMenu.Item>
+                    ))}
+                {menuTick !== null && actionsFor(menuTick).length > 0 && menuMarkable !== null && <ContextMenu.Separator />}
+                {chat !== null && menuIndex !== null && menuMarkable !== null && (
+                    <BookmarkMenuItems chatId={chat.chatId} itemId={menuMarkable} onName={() => onPick(menuIndex)} />
+                )}
+            </ContextMenu.Popup>
+        </ContextMenu.Root>
+    );
+});

package/src/chat/ui/SubagentControls.tsx

@@ -0,0 +1,66 @@
+import { Fragment, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ChevronRight, X } from 'lucide-react';
+import { breadcrumbOf, MAIN_AGENT, trailTo, useOpenableSubagents, useSubagentTrail } from '../subagent-view';
+import { SubagentStopButton } from './SubagentStopButton';
+import { Icon, IconButton } from '@adecore/ui';
+
+const CRUMB_LINK = 'truncate text-text-muted hover:text-text';
+
+/*
+ * The chat's own title where the bar draws it. While a sub-agent stands in the chat's place it is the first crumb of the way down, so pressing it goes back to the main agent.
+ */
+export function SubagentTitleCrumb({ chatId, className, children }: { chatId: string; className?: string; children: ReactNode }) {
+    const { trail, show } = useSubagentTrail(chatId);
+    if (trail.length === 0) {
+        return <>{children}</>;
+    }
+    return (
+        <button type="button" className={clsx('flex min-w-0 items-center', className)} onClick={() => show(MAIN_AGENT)}>
+            {children}
+        </button>
+    );
+}
+
+/*
+ * The way down after the chat's title, each step a way back up, and a close that goes straight back
+ * to the main agent. A bar that does not draw the title itself passes it, and it opens the way.
+ * Nothing while the main agent itself is on screen.
+ */
+export function SubagentBreadcrumb({ chatId, title, className }: { chatId: string; title?: string; className?: string }) {
+    const { t } = useTranslation('agent-chat');
+    const { trail, show } = useSubagentTrail(chatId);
+    const subagents = useOpenableSubagents(chatId);
+    if (trail.length === 0) {
+        return null;
+    }
+    const steps = breadcrumbOf(trail);
+    // Only a row of the chat's own thread can be stopped; a grandchild belongs to the sub-agent that opened it.
+    const shown = trail.length === 1 ? subagents.find((item) => item.toolUseId === trail[0]!.toolUseId) : undefined;
+    return (
+        <nav aria-label={t('subagents.title')} className={clsx('flex min-w-0 items-center gap-1 text-xs', className)}>
+            {title !== undefined && (
+                <button type="button" className={clsx(CRUMB_LINK, 'min-w-0 shrink')} onClick={() => show(MAIN_AGENT)}>
+                    {title}
+                </button>
+            )}
+            {steps.map((step) => (
+                <Fragment key={step.depth}>
+                    <Icon icon={ChevronRight} size={12} className="shrink-0 text-text-faint" />
+                    {step.current ? (
+                        <span aria-current="page" className="min-w-0 truncate text-text">
+                            {step.label}
+                        </span>
+                    ) : (
+                        <button type="button" className={clsx(CRUMB_LINK, 'min-w-0 shrink')} onClick={() => show(trailTo(trail, step.depth))}>
+                            {step.label}
+                        </button>
+                    )}
+                </Fragment>
+            ))}
+            {shown !== undefined && <SubagentStopButton chatId={chatId} item={shown} size="sm" />}
+            <IconButton icon={X} size="sm" label={t('subagents.backToMain')} onClick={() => show(MAIN_AGENT)} />
+        </nav>
+    );
+}

package/src/chat/ui/SubagentInfo.tsx

@@ -0,0 +1,67 @@
+import { Fragment, useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown } from 'lucide-react';
+import { entryTimeOf, statusWordOf, subagentFacts, taskIdOf } from '../subagent-list';
+import { useSubagentItem } from '../subagent-view';
+import { StatusIcon } from './ChatActivity';
+import { Markdown } from './Markdown';
+import { Icon, useNow } from '@adecore/ui';
+import { useModelName } from '../../agents/model-name';
+import { useChatRow } from '../../state/chats';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+
+/*
+ * What a sub-agent is, over its conversation: its state and time, the model it runs on and what it
+ * spent, and the task it was given behind a fold. Nothing for a conversation whose row the thread lost.
+ */
+export function SubagentInfo({ chatId, toolUseId }: { chatId: string; toolUseId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const item = useSubagentItem(chatId, toolUseId);
+    const provider = useChatRow(chatId, (row) => row?.info.provider);
+    const task = chatHost().tasks.useTask(id, item === null ? null : taskIdOf(item));
+    const modelName = useModelName(provider, item?.model ?? '');
+    const now = useNow(1000, item?.status === 'running');
+    const [open, setOpen] = useState(false);
+    if (item === null) {
+        return null;
+    }
+    const word = statusWordOf(item, task);
+    const facts = subagentFacts(item, item.model === undefined ? null : modelName);
+    return (
+        <section aria-label={t('subagents.info.label')} className="shrink-0 border-b border-border px-4 py-2">
+            <div className="chat-column-content flex flex-col gap-2">
+                <div className="flex min-w-0 items-center gap-2 text-xs text-text-faint">
+                    <StatusIcon word={word} />
+                    <span className="sr-only">{t(`common.status.${word}`)}</span>
+                    <span className="shrink-0 text-text-muted tabular-nums">{entryTimeOf(item, task, now)}</span>
+                    {facts.map((fact) => (
+                        <Fragment key={fact}>
+                            <span aria-hidden="true">·</span>
+                            <span className="min-w-0 truncate">{fact}</span>
+                        </Fragment>
+                    ))}
+                    <span className="grow" />
+                    {item.prompt && (
+                        <button
+                            type="button"
+                            className="flex shrink-0 items-center gap-1.5 text-text-muted hover:text-text"
+                            aria-expanded={open}
+                            onClick={() => setOpen((current) => !current)}
+                        >
+                            <Icon icon={ChevronDown} size={12} className={clsx('transition-transform', open && 'rotate-180')} />
+                            {open ? t('subagents.info.hideTask') : t('subagents.info.showTask')}
+                        </button>
+                    )}
+                </div>
+                {open && item.prompt && (
+                    <div className="max-h-60 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 text-xs select-text">
+                        <Markdown text={item.prompt} />
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+}

package/src/chat/ui/SubagentStopButton.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+import { Square } from 'lucide-react';
+import type { ChatSubagentItem } from '@adecore/agent-contracts';
+import { chatHost } from '../../host';
+import { useChatScope } from '../../scope';
+import { useChatRow } from '../../state/chats';
+import { useChatActions } from '../actions';
+import { stopLabel, stopOf, subagentTitle } from '../subagent-list';
+import { IconButton } from '@adecore/ui';
+
+/* Stops one active sub-agent of a chat, or says nothing when stopping it is not on offer. */
+export function SubagentStopButton({
+    chatId,
+    item,
+    size = 'xs',
+    className
+}: {
+    chatId: string;
+    item: ChatSubagentItem;
+    size?: 'sm' | 'xs';
+    className?: string;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const actions = useChatActions();
+    const turnRunning = useChatRow(chatId, (row) => (row?.info.activeTurnId ?? null) !== null);
+    const stop = stopOf(item, turnRunning);
+    if (stop === null) {
+        return null;
+    }
+    const send = (): void => {
+        void actions.stopSubagent(chatId, item.toolUseId).catch((e: unknown) => {
+            const description = e instanceof Error ? e.message : t('subagents.noAnswer');
+            chatHost().notify({ kind: 'error', title: t('subagents.stopFailed'), description });
+        });
+    };
+    const run = (): void => {
+        if (stop === 'task' && item.childId !== undefined) {
+            chatHost().confirm.stopTask(id, item.childId, subagentTitle(item), send);
+            return;
+        }
+        send();
+    };
+    return <IconButton icon={Square} size={size} label={stopLabel(stop)} className={className} onClick={run} />;
+}

package/src/chat/ui/SubagentTimeline.tsx

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Bot, LoaderCircle } from 'lucide-react';
+import { deriveTimelineRows } from '../logic/timeline';
+import { INITIAL_CONVERSATION, SubagentConversation, type SubagentConversationState } from '../subagent-conversation';
+import { useSubagentSupport } from '../subagent-support';
+import { firstRowInView, restoreAnchor, wantsEarlier, type ReadingAnchor } from '../timeline-scroll';
+import { EMPTY_TARGET, readTimelineTarget, type TimelineTarget } from '../logic/timeline-target';
+import { openBelow, useSubagentTrail, type SubagentStep } from '../subagent-view';
+import { Row } from './rows/Rows';
+import { ReplyContext } from './reply-context';
+import { SubagentInfo } from './SubagentInfo';
+import { TimelineMenuPopup } from './TimelineMenu';
+import { FOLLOW_THRESHOLD_PX, rowRhythm } from './rows/row-rhythm';
+import { useToggleSet } from './useToggleSet';
+import { FileLinkContext } from './file-links';
+import { useChatRow } from '../../state/chats';
+import { useChatScope } from '../../scope';
+import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
+
+const NO_TURNS = new Set<string>();
+
+/*
+ * A sub-agent's whole conversation, read back from the host and grown while it is on screen. It
+ * stands in the chat's own place, read-only, and a sub-agent it opened goes one level further down.
+ */
+export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUseId: string }) {
+    const { t } = useTranslation('agent-chat');
+    const scope = useChatScope();
+    const { trail, show } = useSubagentTrail(chatId);
+    const [state, setState] = useState<SubagentConversationState>(INITIAL_CONVERSATION);
+    const controller = useRef<SubagentConversation | null>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const threadRef = useRef<HTMLDivElement>(null);
+    const [target, setTarget] = useState<TimelineTarget>(EMPTY_TARGET);
+    const followRef = useRef(true);
+    const stopFollowing = useCallback(() => {
+        followRef.current = false;
+    }, []);
+    const groups = useToggleSet(stopFollowing);
+    const subagents = useToggleSet(stopFollowing);
+    // The row being read when an earlier page was asked for, so it stays where it was once that page is in.
+    const anchorRef = useRef<ReadingAnchor | null>(null);
+    const headRef = useRef<string | undefined>(undefined);
+    const cwd = useChatRow(chatId, (row) => row?.info.cwd ?? null);
+
+    useEffect(() => {
+        const conversation = new SubagentConversation(scope.transport, chatId, toolUseId, setState);
+        controller.current = conversation;
+        void conversation.start();
+        return () => {
+            conversation.dispose();
+            controller.current = null;
+        };
+    }, [scope, chatId, toolUseId]);
+
+    useEffect(() => {
+        if (state.unsupported) {
+            useSubagentSupport.getState().markUnsupported(scope.id);
+        }
+    }, [state.unsupported, scope]);
+
+    const rows = useMemo(
+        () => deriveTimelineRows(state.items, { expandedGroups: groups.ids, expandedTurns: NO_TURNS, expandedSubagents: subagents.ids, activeTurnId: null }),
+        [state.items, groups.ids, subagents.ids]
+    );
+
+    useLayoutEffect(() => {
+        const element = scrollRef.current;
+        if (element === null) {
+            return;
+        }
+        const head = state.items[0]?.id;
+        const moved = head !== headRef.current;
+        headRef.current = head;
+        if (moved && anchorRef.current !== null && !followRef.current) {
+            restoreAnchor(element, anchorRef.current);
+        } else if (followRef.current) {
+            element.scrollTop = element.scrollHeight;
+        }
+        if (moved) {
+            anchorRef.current = null;
+        }
+    }, [rows, state.live, state.items]);
+
+    const loadEarlier = useCallback(() => {
+        const element = scrollRef.current;
+        if (element === null || state.cursor === null || !wantsEarlier(element)) {
+            return;
+        }
+        // Taken on every call, since the reader may scroll on while a page is on its way.
+        anchorRef.current = firstRowInView(element);
+        void controller.current?.loadEarlier();
+    }, [state.cursor]);
+
+    // Close to the top, the page before goes in; again after each page that left too little above the reader.
+    // A page that failed changes no row, so it is asked for again only on the next scroll.
+    useEffect(() => {
+        if (state.status === 'ready') {
+            loadEarlier();
+        }
+    }, [rows, state.status, loadEarlier]);
+
+    const openChild = (step: SubagentStep): void => {
+        show(openBelow(trail, step));
+    };
+
+    return (
+        <div className="flex h-full min-h-0 flex-col">
+            <SubagentInfo chatId={chatId} toolUseId={toolUseId} />
+            {state.status === 'loading' && <div className="chat-column-content px-4 pt-4 text-xs text-text-faint">{t('subagents.loading')}</div>}
+            {state.status === 'failed' && (
+                <EmptyState icon={Bot}>{state.unsupported ? t('subagents.unsupported') : (state.error ?? t('subagents.unreadable'))}</EmptyState>
+            )}
+            {state.status === 'ready' && (
+                <FileLinkContext.Provider value={state.context?.cwd ?? cwd}>
+                    <ReplyContext.Provider value={state.context ?? { provider: state.source === 'codex-thread' ? 'codex' : 'claude' }}>
+                        <div
+                            ref={scrollRef}
+                            className="chat-thread relative min-h-0 grow overflow-auto px-4 pt-4 pb-3"
+                            // The thread keeps its reader in place itself when a page goes in above.
+                            style={{ overflowAnchor: 'none' }}
+                            onScroll={(event) => {
+                                const element = event.currentTarget;
+                                followRef.current = element.scrollHeight - element.scrollTop - element.clientHeight < FOLLOW_THRESHOLD_PX;
+                                loadEarlier();
+                            }}
+                        >
+                            {/* The same menu the chat's own thread has; this transcript is read-only, so the chat
+                    it belongs to is not passed on and the fork item stays out. */}
+                            <ContextMenu.Root>
+                                <ContextMenu.Trigger
+                                    ref={threadRef}
+                                    className="chat-column-content"
+                                    onContextMenu={(event) => setTarget(readTimelineTarget(event.target as HTMLElement, threadRef.current, rows))}
+                                >
+                                    {state.loadingEarlier && (
+                                        <div className="pointer-events-none sticky top-0 z-10 flex h-0 justify-center" role="status">
+                                            <Icon icon={LoaderCircle} size={16} className="animate-spin text-text-faint" />
+                                            <span className="sr-only">{t('timeline.loadingEarlier')}</span>
+                                        </div>
+                                    )}
+                                    {rows.length === 0 && !state.live && <EmptyState icon={Bot}>{t('rows.subagent.nothingYet')}</EmptyState>}
+                                    {rows.map((row, index) => {
+                                        const previous = index > 0 ? rows[index - 1]! : null;
+                                        return (
+                                            <div key={row.id} data-item-id={row.id} className={rowRhythm(row, previous)}>
+                                                <Row
+                                                    row={row}
+                                                    chatId={chatId}
+                                                    toggleGroup={groups.toggle}
+                                                    toggleTurn={() => undefined}
+                                                    toggleSubagent={subagents.toggle}
+                                                    openSubagent={() => undefined}
+                                                    openConversation={openChild}
+                                                />
+                                            </div>
+                                        );
+                                    })}
+                                    {state.live && <div className="chat-live-text pt-1 text-xs">{t('subagents.working')}</div>}
+                                </ContextMenu.Trigger>
+                                <TimelineMenuPopup target={target} thread={threadRef} />
+                            </ContextMenu.Root>
+                        </div>
+                    </ReplyContext.Provider>
+                </FileLinkContext.Provider>
+            )}
+        </div>
+    );
+}