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

package/src/chat/ui/rows/WorkRows.tsx

@@ -0,0 +1,445 @@
+import { Suspense, useEffect, useState } from 'react';
+import clsx from 'clsx';
+import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { ChevronRight, FileDiff, X } from 'lucide-react';
+import type { ChatCheckpointDiff, ChatCheckpointFile, ChatFileChange, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
+import { fileChanges, liveOutput, readImagePath, toolStartedAt, toolSummary, unifiedChanges, type FileChange } from '../../logic/tools';
+import { useOpenForFind } from '../find-reveal';
+import { chatHost } from '../../../host';
+import { lazyNamed } from '../../../lazy';
+import { useChatActions } from '../../actions';
+import { useChatScope } from '../../../scope';
+import { useCurrentItem } from '../../../state/chats';
+import { useTimelineFlash } from '../../timeline-flash';
+import { formatClockDuration, formatElapsedShort } from '@adecore/ui/format';
+import { Icon, Spinner, useTickingText } from '@adecore/ui';
+import { ROW_GUTTER, toolIcon } from '../icons';
+import { AnsiOutput } from '../AnsiOutput';
+
+// The diff renderers carry shiki; they only load once a thread shows a file change.
+const EditDiff = lazyNamed(() => import('../EditDiff'), 'default');
+const UnifiedDiff = lazyNamed(() => import('../UnifiedDiff'), 'default');
+
+const OUTPUT_LIMIT = 4000;
+
+function clip(text: string): string {
+    return text.length > OUTPUT_LIMIT
+        ? `${text.slice(0, OUTPUT_LIMIT)}\n${i18next.t('agent-chat:work.moreCharacters', { count: text.length - OUTPUT_LIMIT })}`
+        : text;
+}
+
+export function ToggleLine({
+    icon,
+    label,
+    detail,
+    open,
+    onToggle,
+    failed,
+    live,
+    trailing,
+    className
+}: {
+    icon: React.ReactNode;
+    label: string;
+    detail?: string;
+    open: boolean;
+    onToggle(): void;
+    failed?: boolean;
+    live?: boolean;
+    trailing?: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <button
+            className={clsx(
+                // Fix the width so long commands reach the truncation inside the negative margins.
+                '-mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover',
+                failed && 'text-status-error',
+                className
+            )}
+            onClick={onToggle}
+        >
+            <span className={clsx(ROW_GUTTER, live && 'text-accent')}>{icon}</span>
+            <span className={clsx('shrink-0', live && 'chat-live-text')}>{label}</span>
+            {detail && (
+                <span data-find-field="summary" className="min-w-0 truncate font-mono text-text-faint">
+                    {detail}
+                </span>
+            )}
+            <span className="grow" />
+            {trailing}
+            {failed && <Icon icon={X} size={12} className="shrink-0" />}
+            <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+        </button>
+    );
+}
+
+function ToolBody({ tool }: { tool: ChatToolItem }) {
+    const { t } = useTranslation('agent-chat');
+    const patches = unifiedChanges(tool);
+    const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
+    return (
+        <div className="mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised">
+            {patches.length > 0 ? (
+                <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                    {patches.map((change, index) => (
+                        <UnifiedDiff key={index} change={change} />
+                    ))}
+                </Suspense>
+            ) : changes.length > 0 ? (
+                <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                    {changes.map((change, index) => (
+                        <EditDiff key={index} change={change} />
+                    ))}
+                </Suspense>
+            ) : (
+                <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text">
+                    {clip(JSON.stringify(tool.input, null, 2) ?? '')}
+                </pre>
+            )}
+            {tool.output !== null && tool.output !== '' && patches.length === 0 && (
+                <pre
+                    data-find-field="output"
+                    className={clsx(
+                        'max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text',
+                        tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'
+                    )}
+                >
+                    <AnsiOutput text={tool.output} limit={OUTPUT_LIMIT} />
+                </pre>
+            )}
+        </div>
+    );
+}
+
+/* One settled tool call: a line, and its input and output behind it. An image the call looked at
+   is drawn under the line, because a picture says more about that read than its path does. */
+export function WorkRow({ tool, nested, detail }: { tool: ChatToolItem; nested?: boolean; detail?: string }) {
+    const [open, setOpen] = useState(false);
+    const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
+    const { ReadImage } = chatHost();
+    useOpenForFind(tool.id, 'output', setOpen);
+    return (
+        <div data-find-item={tool.id} className={nested ? 'ml-6' : undefined}>
+            <ToggleLine
+                icon={toolIcon(tool.name)}
+                label={tool.name}
+                detail={detail ?? toolSummary(tool.name, tool.input)}
+                open={open}
+                onToggle={() => setOpen((o) => !o)}
+                failed={tool.state === 'error'}
+            />
+            {image !== null && ReadImage !== null && <ReadImage path={image} />}
+            {open && <ToolBody tool={tool} />}
+        </div>
+    );
+}
+
+/* "running for 12s" next to a live call. */
+export function RunningFor({ startedAt }: { startedAt: number }) {
+    const { t } = useTranslation('agent-chat');
+    const ref = useTickingText(() => t('work.runningFor', { elapsed: formatElapsedShort(Date.now() - startedAt) }));
+    return <span ref={ref} className="shrink-0 text-xs text-text-faint tabular-nums" />;
+}
+
+/* A call still running: its timer on the line, and for a provider that streams output, the last lines under it. */
+export function WorkLiveRow({ chatId, tool: derived }: { chatId: string; tool: ChatToolItem }) {
+    const [open, setOpen] = useState(false);
+    const tool = useCurrentItem(chatId, derived);
+    const tail = liveOutput(tool);
+    return (
+        <div>
+            <ToggleLine
+                icon={toolIcon(tool.name)}
+                label={tool.name}
+                detail={toolSummary(tool.name, tool.input) || tool.progress?.description || ''}
+                open={open}
+                onToggle={() => setOpen((o) => !o)}
+                trailing={<RunningFor startedAt={toolStartedAt(tool)} />}
+                live
+            />
+            {open && <ToolBody tool={tool} />}
+            {tail !== null && !open && (
+                <pre className="mt-1.5 mb-2 ml-6 max-h-48 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 font-mono text-code whitespace-pre-wrap text-chat-output select-text">
+                    <AnsiOutput text={tail} tailLines={12} />
+                </pre>
+            )}
+        </div>
+    );
+}
+
+/* A run of tool calls as one line ("Read 4 files"); opening it lists every call. */
+export function WorkGroupRow({ tools, summary, expanded, onToggle }: { tools: ChatToolItem[]; summary: string; expanded: boolean; onToggle(): void }) {
+    const failed = tools.some((tool) => tool.state === 'error');
+    return (
+        <div>
+            <ToggleLine icon={toolIcon(tools[0]!.name)} label={summary} open={expanded} onToggle={onToggle} failed={failed} />
+        </div>
+    );
+}
+
+/*
+ * A settled turn folded behind how long it took and what it did. A line and not a button, like the
+ * tool lines it hides; the work reads fainter than the time so the eye lands on the time first.
+ */
+export function TurnFoldRow({
+    turn,
+    label,
+    work,
+    expanded,
+    onToggle
+}: {
+    turn: ChatTurnItem;
+    label: string;
+    work: readonly string[];
+    expanded: boolean;
+    onToggle(): void;
+}) {
+    return (
+        <button
+            className={clsx(
+                'group -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover',
+                turn.state === 'error' && 'text-status-error'
+            )}
+            aria-expanded={expanded}
+            onClick={onToggle}
+        >
+            <span className={ROW_GUTTER}>
+                <Icon icon={ChevronRight} size={12} className={clsx('transition-transform', expanded && 'rotate-90')} />
+            </span>
+            <span className="shrink-0 group-hover:text-text">{label}</span>
+            {work.length > 0 && <span className="min-w-0 truncate text-text-faint">{work.map((part) => ` · ${part}`).join('')}</span>}
+        </button>
+    );
+}
+
+function omittedLabel(reason: 'binary' | 'too-large'): string {
+    return reason === 'binary' ? i18next.t('agent-chat:work.omitted.binary') : i18next.t('agent-chat:work.omitted.tooLarge');
+}
+
+/* One file of a turn's checkpoint diff: its patch, or the reason there is none. */
+function CheckpointFileBody({ file }: { file: ChatCheckpointFile }) {
+    const { t } = useTranslation('agent-chat');
+    if (file.omitted) {
+        return <div className="px-3 py-2 text-xs text-text-faint">{omittedLabel(file.omitted)}</div>;
+    }
+    return (
+        <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+            <UnifiedDiff change={file} />
+        </Suspense>
+    );
+}
+
+/* The frame of a changed files card: a header that folds the list of files away. */
+function ChangedFilesCard({
+    count,
+    truncated,
+    added,
+    deleted,
+    revealNonce = 0,
+    children
+}: {
+    count: number;
+    truncated?: boolean;
+    added?: number;
+    deleted?: number;
+    /* A jump from outside the chat that asked for this card; each new one opens it. */
+    revealNonce?: number;
+    children: React.ReactNode;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const [expanded, setExpanded] = useState(false);
+    // A jump from outside opens the card, also when the jump put the row on screen and so mounted it; the flash is gone by the time the row is scrolled to again.
+    const [seenReveal, setSeenReveal] = useState(0);
+    if (revealNonce > 0 && revealNonce !== seenReveal) {
+        setSeenReveal(revealNonce);
+        setExpanded(true);
+    }
+    return (
+        <div className="mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised">
+            <button
+                className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover"
+                aria-expanded={expanded}
+                onClick={() => setExpanded((value) => !value)}
+            >
+                <Icon icon={FileDiff} size={12} className="shrink-0" />
+                <span className="shrink-0 font-medium text-text">{t('work.changedFiles', { count })}</span>
+                {truncated && <span className="min-w-0 truncate text-text-faint">{t('work.andMore')}</span>}
+                <span className="grow" />
+                {added !== undefined && <span className="text-chat-added tabular-nums">+{added}</span>}
+                {deleted !== undefined && <span className="text-chat-removed tabular-nums">-{deleted}</span>}
+                <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90')} />
+            </button>
+            {expanded && children}
+        </div>
+    );
+}
+
+/*
+ * The files a settled turn changed, as a card; each file opens its diff in place. The host's
+ * checkpoint diff comes first (the working tree against the tree the turn started from), then the
+ * unified diffs the CLI reported, then the before and after of its own edits. A turn that has a
+ * checkpoint but no stored diff asks the host for one, which is also how a running turn gets it.
+ */
+export function ChangedFilesRow({
+    tools,
+    diff,
+    checkpoint,
+    chatId,
+    turnId
+}: {
+    tools: ChatToolItem[];
+    diff: ChatCheckpointDiff | null;
+    checkpoint: boolean;
+    chatId: string;
+    turnId: string;
+}) {
+    const [open, setOpen] = useState<Record<string, boolean>>({});
+    const [fetched, setFetched] = useState<ChatCheckpointDiff | null>(null);
+    const actions = useChatActions();
+    useEffect(() => {
+        if (diff !== null || !checkpoint) {
+            return;
+        }
+        let alive = true;
+        void actions
+            .turnDiff(chatId, turnId)
+            .then((answer) => {
+                if (alive) {
+                    setFetched(answer);
+                }
+            })
+            .catch(() => undefined);
+        return () => {
+            alive = false;
+        };
+    }, [actions, chatId, turnId, diff, checkpoint]);
+    const checkpointDiff = diff ?? fetched;
+    const { keyOf } = useChatScope();
+    const flash = useTimelineFlash((s) => s.target);
+    const revealNonce = flash !== null && flash.opens && flash.key === keyOf(chatId) && flash.rowId === `files-${turnId}` ? flash.nonce : 0;
+    if (checkpointDiff !== null && checkpointDiff.files.length > 0) {
+        const files = checkpointDiff.files;
+        return (
+            <ChangedFilesCard
+                revealNonce={revealNonce}
+                count={files.length}
+                truncated={checkpointDiff.truncated}
+                added={files.reduce((sum, file) => sum + file.added, 0)}
+                deleted={files.reduce((sum, file) => sum + file.deleted, 0)}
+            >
+                {files.map((file) => (
+                    <div key={file.path} className="border-t border-border">
+                        <button
+                            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover"
+                            data-file-path={file.path}
+                            onClick={() => setOpen((o) => ({ ...o, [file.path]: !o[file.path] }))}
+                        >
+                            <Icon
+                                icon={ChevronRight}
+                                size={12}
+                                className={clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90')}
+                            />
+                            <span className="min-w-0 truncate font-mono text-text">{file.path}</span>
+                            <span className="grow" />
+                            <span className="text-chat-added tabular-nums">+{file.added}</span>
+                            <span className="text-chat-removed tabular-nums">-{file.deleted}</span>
+                        </button>
+                        {open[file.path] && (
+                            <div className="border-t border-border">
+                                <CheckpointFileBody file={file} />
+                            </div>
+                        )}
+                    </div>
+                ))}
+            </ChangedFilesCard>
+        );
+    }
+    return <ProviderChangedFiles tools={tools} open={open} setOpen={setOpen} revealNonce={revealNonce} />;
+}
+
+/* The fallback card, built from what the CLI itself reported about its edits. */
+function ProviderChangedFiles({
+    tools,
+    open,
+    setOpen,
+    revealNonce
+}: {
+    tools: ChatToolItem[];
+    open: Record<string, boolean>;
+    revealNonce: number;
+    setOpen: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const byPath = new Map<string, { edits: FileChange[]; patches: ChatFileChange[] }>();
+    const entryFor = (path: string) => {
+        const existing = byPath.get(path);
+        if (existing) {
+            return existing;
+        }
+        const created = { edits: [] as FileChange[], patches: [] as ChatFileChange[] };
+        byPath.set(path, created);
+        return created;
+    };
+    for (const tool of tools) {
+        const patches = unifiedChanges(tool);
+        if (patches.length > 0) {
+            for (const patch of patches) {
+                entryFor(patch.path).patches.push(patch);
+            }
+            continue;
+        }
+        for (const change of fileChanges(tool.name, tool.input)) {
+            entryFor(change.path || tool.id).edits.push(change);
+        }
+    }
+    return (
+        <ChangedFilesCard count={byPath.size} revealNonce={revealNonce}>
+            {[...byPath].map(([path, entry]) => {
+                const count = entry.edits.length + entry.patches.length;
+                return (
+                    <div key={path} className="border-t border-border">
+                        <button
+                            className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover"
+                            data-file-path={path}
+                            onClick={() => setOpen((o) => ({ ...o, [path]: !o[path] }))}
+                        >
+                            <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open[path] && 'rotate-90')} />
+                            <span className="min-w-0 truncate font-mono text-text">{path}</span>
+                            <span className="grow" />
+                            <span className="text-text-faint">{t('work.edits', { count })}</span>
+                        </button>
+                        {open[path] && (
+                            <div className="border-t border-border">
+                                <Suspense fallback={<div className="px-3 py-2 text-xs text-text-faint">{t('work.loadingDiff')}</div>}>
+                                    {entry.patches.map((change, index) => (
+                                        <UnifiedDiff key={`patch-${index}`} change={change} />
+                                    ))}
+                                    {entry.edits.map((change, index) => (
+                                        <EditDiff key={`edit-${index}`} change={change} />
+                                    ))}
+                                </Suspense>
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </ChangedFilesCard>
+    );
+}
+
+/* "Working for 00:14". */
+export function WorkingRow({ startedAt }: { startedAt: number }) {
+    const { t } = useTranslation('agent-chat');
+    const ref = useTickingText(() => formatClockDuration(Date.now() - startedAt));
+    return (
+        <div className="-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-muted">
+            <span className={`${ROW_GUTTER} text-status-running`}>
+                <Spinner size={12} />
+            </span>
+            <span className="chat-live-text">{t('work.workingFor')}</span>
+            <span ref={ref} className="tabular-nums" />
+        </div>
+    );
+}

package/src/chat/ui/rows/WorkflowRow.tsx

@@ -0,0 +1,120 @@
+import { useTranslation } from 'react-i18next';
+import { Bot, ListTree, TriangleAlert, Square } from 'lucide-react';
+import { workflowAgentRef, type ChatToolItem, type ChatWorkflow } from '@adecore/agent-contracts';
+import { workflowAgentTime, workflowPhases, type WorkflowAgentView, type WorkflowPhaseView } from '../../logic/workflow';
+import { useSubagentSupport } from '../../subagent-support';
+import type { SubagentStep } from '../../subagent-view';
+import { ROW_GUTTER } from '../icons';
+import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows';
+import { useChatScope } from '../../../scope';
+import { Icon, IconButton } from '@adecore/ui';
+import { useChatActions } from '../../actions';
+import { chatHost } from '../../../host';
+
+function AgentLine({ view, onOpen }: { view: WorkflowAgentView; onOpen?(step: SubagentStep): void }) {
+    const { agent, state } = view;
+    const time = workflowAgentTime(view);
+    const running = state === 'running';
+    const agentId = agent.agentId;
+    // One still waiting has no transcript yet.
+    const open = onOpen !== undefined && agentId !== null ? () => onOpen({ toolUseId: workflowAgentRef(agentId), description: agent.label }) : () => undefined;
+    return (
+        <ToggleLine
+            icon={<Icon icon={Bot} size={12} />}
+            label={agent.label}
+            detail={running ? (agent.lastTool ?? undefined) : undefined}
+            open={false}
+            onToggle={open}
+            failed={state === 'failed'}
+            live={running}
+            trailing={
+                running && agent.startedAt !== null ? (
+                    <RunningFor startedAt={agent.startedAt} />
+                ) : (
+                    <span className="shrink-0 text-xs text-text-faint tabular-nums">{time}</span>
+                )
+            }
+        />
+    );
+}
+
+function PhaseBlock({ phase, onOpen }: { phase: WorkflowPhaseView; onOpen?(step: SubagentStep): void }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div>
+            {phase.title !== null && (
+                <div className="mb-0.5 flex h-7 min-w-0 items-center gap-2 text-xs text-text-muted">
+                    <span className={ROW_GUTTER}>
+                        <Icon icon={ListTree} size={12} />
+                    </span>
+                    <span className="min-w-0 truncate">{phase.title}</span>
+                    <span className="grow" />
+                    {phase.agents.length === 0 && <span className="shrink-0 text-text-faint">{t('rows.workflow.notStarted')}</span>}
+                </div>
+            )}
+            {phase.agents.length > 0 && (
+                <div className={phase.title === null ? undefined : 'ml-6'}>
+                    {phase.agents.map((view) => (
+                        <AgentLine key={view.agent.index} view={view} onOpen={onOpen} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// Keep background progress visible after the launcher turn ends.
+export function WorkflowRow({
+    tool,
+    workflow,
+    chatId,
+    onOpenAgent
+}: {
+    tool: ChatToolItem;
+    workflow: ChatWorkflow;
+    chatId?: string;
+    onOpenAgent?(step: SubagentStep): void;
+}) {
+    const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    // A host that does not answer `chat.subagent` has no conversation to open for anyone.
+    const refused = useSubagentSupport((s) => s.unsupported[id] === true);
+    const running = tool.state === 'running';
+    const phases = workflowPhases(workflow, running);
+    const onOpen = refused ? undefined : onOpenAgent;
+    const actions = useChatActions();
+    const stop = (): void => {
+        if (chatId && workflow.taskId) {
+            void actions.stopTask(chatId, workflow.taskId).catch((error: unknown) => {
+                chatHost().notify({
+                    kind: 'error',
+                    title: t('activity.stopFailed'),
+                    description: error instanceof Error ? error.message : t('subagents.noAnswer')
+                });
+            });
+        }
+    };
+    return (
+        <div>
+            <div className="flex items-center gap-1">
+                <div className="min-w-0 grow">
+                    {running ? <WorkLiveRow chatId={chatId ?? ''} tool={tool} /> : <WorkRow tool={tool} detail={workflow.name ?? undefined} />}
+                </div>
+                {running && chatId && workflow.taskId && <IconButton icon={Square} size="xs" label={t('activity.stop')} onClick={stop} />}
+            </div>
+            {running && workflow.stalledAt !== undefined && (
+                <p role="status" className="ml-6 mb-1 flex items-start gap-1.5 text-xs text-text-muted">
+                    <Icon icon={TriangleAlert} size={12} className="mt-0.5 shrink-0 text-status-needs-you" />
+                    <span>{t('rows.workflow.stalled')}</span>
+                </p>
+            )}
+            {phases.length > 0 && (
+                <div className="ml-6">
+                    {phases.map((phase) => (
+                        <PhaseBlock key={phase.key} phase={phase} onOpen={onOpen} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/chat/ui/rows/row-rhythm.ts

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import { isBlock, type TimelineRow } from '../../logic/timeline';
+
+/* Below this distance from the bottom a thread follows what the agent writes; above it the reader scrolled back on purpose. */
+export const FOLLOW_THRESHOLD_PX = 40;
+
+/*
+ * The gaps a row wears for where it sits: a question is followed by its answer gap, and a seam where
+ * the list rhythm of tool lines meets the block rhythm of prose gets the block gap. A question
+ * already carries the gap before it, and the row after one is the answer, so neither takes a seam.
+ */
+export function rowRhythm(row: TimelineRow, previous: TimelineRow | null): string {
+    const question = row.kind === 'user';
+    const seam = !question && previous !== null && previous.kind !== 'user' && isBlock(row) !== isBlock(previous);
+    return clsx(question && 'pb-(--chat-answer-gap)', seam && 'pt-(--chat-block-gap)');
+}
+
+/*
+ * Whether a reply's header goes over this row, and the time it shows: the first row after the question
+ * or the agent's own turn opener, whatever row that is, dated when that turn began. A thread that
+ * starts halfway through a reply has no time to show.
+ */
+export function replyHeader(row: TimelineRow, previous: TimelineRow | null): { at: number | null } | null {
+    if (row.kind === 'user' || row.kind === 'turn-start') {
+        return null;
+    }
+    if (previous === null) {
+        return { at: null };
+    }
+    if (previous.kind === 'user') {
+        return { at: previous.item.createdAt };
+    }
+    if (previous.kind === 'turn-start') {
+        return { at: previous.turn.createdAt };
+    }
+    return null;
+}

package/src/chat/ui/useToggleSet.ts

@@ -0,0 +1,39 @@
+import { useCallback, useState } from 'react';
+
+export interface ToggleSet {
+    ids: ReadonlySet<string>;
+    /* Opens what is closed and closes what is open, and tells `onToggle` a person did it. */
+    toggle(id: string): void;
+    /* Opens one without saying a person asked, for a jump that opens what it lands on. */
+    add(id: string): void;
+}
+
+/*
+ * The ids of the folds a thread has open. `onToggle` is what a thread does about a person opening
+ * one, which is to stop following the end: a fold is a deliberate look back, not a reason to jump.
+ */
+export function useToggleSet(onToggle?: () => void): ToggleSet {
+    const [ids, setIds] = useState<ReadonlySet<string>>(() => new Set());
+
+    const toggle = useCallback(
+        (id: string): void => {
+            setIds((current) => {
+                const next = new Set(current);
+                if (next.has(id)) {
+                    next.delete(id);
+                } else {
+                    next.add(id);
+                }
+                return next;
+            });
+            onToggle?.();
+        },
+        [onToggle]
+    );
+
+    const add = useCallback((id: string): void => {
+        setIds((current) => new Set(current).add(id));
+    }, []);
+
+    return { ids, toggle, add };
+}