@adecore/agents-react 0.35.5 → 0.37.0

package/src/chat/ui/Timeline.tsx

@@ -12,7 +12,7 @@ import {
     type ReactNode
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
+import { defaultRangeExtractor, useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
 import { LoaderCircle } from 'lucide-react';
 import type { ChatBookmark } from '@adecore/agent-contracts';
@@ -29,7 +29,6 @@ import {
     setTimelineAtEnd,
     wantsEarlier,
     type ItemJumpOptions,
-    type ReadingAnchor,
     type TurnTarget
 } from '../timeline-scroll';
 import { useTimelineFlash } from '../timeline-flash';
@@ -193,6 +192,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     const visuals = useChatRow(chatId, (row) => row?.visuals);
     const forkedTurns = useForkedTurns(chatId);
     const info = useChatRow(chatId, (row) => row?.info ?? null);
+    const historyPending = useChatRow(chatId, (row) => row?.historyPending === true);
     const cursor = useChatRow(chatId, (row) => row?.history?.cursor ?? null);
     const scope = useChatScope();
     const { id: scopeId, keyOf } = scope;
@@ -226,9 +226,6 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     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) {
@@ -272,9 +269,10 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     );
     const welcomes = useHostWelcome(chatId);
 
+    const loadingHistory = historyPending && ((info !== null && (info.usage.turns > 0 || info.activeTurnId !== null)) || (order?.length ?? 0) > 0);
     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 welcome = !loadingHistory && 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.
@@ -300,7 +298,7 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     );
 
     // Whether the thread's text clears the strip depends on the width of the view, which only the thread's own frame tells.
-    useEffect(() => {
+    useLayoutEffect(() => {
         const element = frameRef.current;
         if (element === null || typeof ResizeObserver === 'undefined') {
             return;
@@ -350,14 +348,34 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         [chatId]
     );
 
+    const [measuredThread, setMeasuredThread] = useState<string | null>(null);
+    const initialLayout = measuredThread !== keyOf(chatId);
+    const [, settleLayout] = useReducer((count: number) => count + 1, 0);
+
+    // Changing this callback invalidates every cached measurement, including on a scroll.
+    const getItemKey = useCallback((index: number) => rows[index]!.id, [rows]);
+
     // Nothing here builds with the React Compiler, so its memoization rule has nothing to break.
     // oxlint-disable-next-line react/incompatible-library
     const virtualizer = useVirtualizer({
-        count: rows.length,
+        count: loadingHistory ? 0 : rows.length,
         getScrollElement: () => scrollRef.current,
         estimateSize: () => ESTIMATED_ROW_PX,
-        getItemKey: (index) => rows[index]!.id,
+        getItemKey,
         overscan: 8,
+        anchorTo: 'end',
+        // Include the end before the first pin, so its actual heights are known before revealing it.
+        rangeExtractor: (range) => {
+            const indexes = defaultRangeExtractor(range);
+            if (!initialLayout) {
+                return indexes;
+            }
+            const tail = Math.max(8, Math.ceil(frame.height / ESTIMATED_ROW_PX));
+            return [...new Set([...indexes, ...Array.from({ length: Math.min(tail, range.count) }, (_, index) => range.count - 1 - index)])].sort(
+                (left, right) => left - right
+            );
+        },
+        measureElement: (element, entry) => Math.round(entry?.borderBoxSize?.[0]?.blockSize ?? (element as HTMLElement).offsetHeight),
         scrollPaddingEnd: coveredHeight
     });
 
@@ -368,6 +386,24 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
      * A word that does not add a line moves nothing, so the thread does not listen to the words.
      */
     const totalSize = virtualizer.getTotalSize();
+    const virtualRows = virtualizer.getVirtualItems();
+    useLayoutEffect(() => {
+        if (!initialLayout || empty || loadingHistory || frame.height === 0) {
+            return;
+        }
+        // Ref measurements can change offsets after render. Commit those offsets before the first paint.
+        const measured = virtualizer.getVirtualItems();
+        if (
+            virtualRows.length !== measured.length ||
+            virtualRows.some((row, index) => row.key !== measured[index]?.key || row.start !== measured[index]?.start || row.size !== measured[index]?.size)
+        ) {
+            settleLayout();
+            return;
+        }
+        if (measured.at(-1)?.index === rows.length - 1) {
+            setMeasuredThread(keyOf(chatId));
+        }
+    }, [initialLayout, empty, loadingHistory, frame.height, virtualRows, virtualizer, rows.length, keyOf, chatId]);
     useLayoutEffect(() => {
         const element = scrollRef.current;
         if (!followRef.current || element === null) {
@@ -378,27 +414,6 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
     }, [rows.length, totalSize, composerHeight, frame.height]);
 
-    // A page that went in above moves every row down by what it measures; the reader stays on the row they were on.
-    useLayoutEffect(() => {
-        const element = scrollRef.current;
-        const head = order?.[0];
-        const moved = head !== headRef.current;
-        headRef.current = head;
-        if (element === null) {
-            return;
-        }
-        const anchor = anchorRef.current;
-        const index = moved && anchor !== null && !followRef.current ? rows.findIndex((row) => row.id === anchor.id) : -1;
-        if (anchor !== null && index !== -1) {
-            // The total measures again what this commit's rows reported; the cache alone lags behind them.
-            virtualizer.getTotalSize();
-            element.scrollTop = virtualizer.measurementsCache[index]!.start - anchor.offset;
-            return;
-        }
-        const row = virtualizer.getVirtualItemForOffset(element.scrollTop);
-        anchorRef.current = row === undefined ? null : { id: String(row.key), offset: row.start - element.scrollTop };
-    });
-
     // 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;
@@ -414,12 +429,15 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
     const readingWidth = useChatPreferences((preferences) => preferences.readingWidth);
     const paddingLeft = threadPaddingLeft(frame.width, showsScrubber, readingMeasure(readingWidth));
 
-    /*
-     * Where each message starts, from the virtualizer's measurements (an estimate for a row it never
-     * drew), so reading the scroll position costs no layout.
-     */
+    // The virtualizer materializes measurements on access; binary searches need only a few message starts.
     const measurements = virtualizer.measurementsCache;
-    const starts = ticks.map((tick) => measurements[tick.rowIndex]?.start ?? tick.rowIndex * ESTIMATED_ROW_PX);
+    const starts = {
+        length: ticks.length,
+        at: (index: number): number | undefined => {
+            const tick = ticks.at(index);
+            return tick === undefined ? undefined : (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);
@@ -507,6 +525,9 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
             setSeeking(null);
             return;
         }
+        if (loadingHistory) {
+            return;
+        }
         if (seeking.block) {
             const jump = uiReplyJump(seeking.block, rows, items, turns.ids, cursor !== null);
             if (jump.kind === 'earlier') {
@@ -547,8 +568,8 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
         }
         setSeeking(null);
         seeking.options?.onMissing?.();
-    }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
-    const waitingForThread = seeking !== null && items === undefined;
+    }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId, loadingHistory]);
+    const waitingForThread = seeking !== null && (items === undefined || loadingHistory);
     useEffect(() => {
         if (!waitingForThread) {
             return;
@@ -724,15 +745,20 @@ export function Timeline({ chatId, composer, overlay }: { chatId: string; compos
                                     setTarget(readTimelineTarget(e.target as HTMLElement, threadRef.current, withCurrentText(rows, fullItems())))
                                 }
                             >
-                                {welcome ? (
+                                {loadingHistory ? (
+                                    <div className="flex grow items-center justify-center gap-2 text-sm text-text-muted" role="status">
+                                        <Icon icon={LoaderCircle} size={16} className="animate-spin" />
+                                        <span>{t('timeline.loading')}</span>
+                                    </div>
+                                ) : welcome ? (
                                     <WelcomeGreeting chatId={chatId} />
                                 ) : empty ? (
                                     <EmptyThread chatId={chatId} />
                                 ) : (
-                                    <div className="relative w-full shrink-0" style={{ height: virtualizer.getTotalSize() }}>
+                                    <div className="relative w-full shrink-0" style={{ height: totalSize, visibility: initialLayout ? 'hidden' : undefined }}>
                                         <UiReplyNavigationContext.Provider value={uiNavigation}>
                                             <FindRevealContext.Provider value={chatFind.reveal}>
-                                                {virtualizer.getVirtualItems().map((virtualRow) => {
+                                                {virtualRows.map((virtualRow) => {
                                                     const row = rows[virtualRow.index]!;
                                                     return (
                                                         <ThreadRow

package/src/chat/ui/code-lines.ts

@@ -9,6 +9,43 @@ export interface CodeToken {
 /* Tokenizes `code` as lines, carrying on from `state` when there is one, and answers the state after it. */
 export type Tokenize<State> = (code: string, state: State | undefined) => { lines: CodeToken[][]; state: State | undefined };
 
+// Virtual rows unmount offscreen; share this budget across their languages and themes.
+const TOKEN_CACHE_BUDGET = 4 * 1024 * 1024;
+const TOKEN_CACHE_ENTRIES = 128;
+
+export class TokenCache<State> {
+    private readonly entries = new Map<string, { result: ReturnType<Tokenize<State>>; cost: number }>();
+    private size = 0;
+
+    wrap(namespace: string, tokenize: Tokenize<State>): Tokenize<State> {
+        return (code, state) => {
+            if (state !== undefined) {
+                return tokenize(code, state);
+            }
+            const key = `${namespace}\0${code}`;
+            const known = this.entries.get(key);
+            if (known !== undefined) {
+                this.entries.delete(key);
+                this.entries.set(key, known);
+                return known.result;
+            }
+            const result = tokenize(code, state);
+            // Account for tokens too, so dense code cannot fill the cache with tiny strings.
+            const cost = key.length * 2 + result.lines.reduce((sum, line) => sum + line.length * 64, 0);
+            if (cost <= TOKEN_CACHE_BUDGET) {
+                while (this.entries.size > 0 && (this.size + cost > TOKEN_CACHE_BUDGET || this.entries.size >= TOKEN_CACHE_ENTRIES)) {
+                    const oldest = this.entries.keys().next().value!;
+                    this.size -= this.entries.get(oldest)!.cost;
+                    this.entries.delete(oldest);
+                }
+                this.entries.set(key, { result, cost });
+                this.size += cost;
+            }
+            return result;
+        };
+    }
+}
+
 /*
  * The lines of a code block that grows at the end. A line that ended keeps the tokens it got, and
  * the grammar state after it is where the next line starts, so a delta tokenizes the lines that are

package/src/chat/ui/composer/ComposerControls.tsx

@@ -76,7 +76,7 @@ export function ComposerControls({
                 <Tooltip label={t('composer.attach')} name>
                     <button
                         type="button"
-                        className="grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover hover:text-text disabled:opacity-50"
+                        className="grid h-8 w-8 shrink-0 place-items-center rounded-full border border-border text-text-muted hover:bg-surface-hover-edged hover:text-text disabled:opacity-50"
                         disabled={!writable}
                         onClick={() => fileInputRef.current?.click()}
                     >

package/src/chat/ui/composer/use-pending-requests.ts

@@ -1,23 +1,15 @@
-import { useMemo } from 'react';
-import type { ChatApprovalItem, ChatQuestionItem } from '@adecore/agent-contracts';
-import { useChatRow, waitingRequestsOf } from '../../../state/chats';
+import { useEffect, useState } from 'react';
+import { useChatScope } from '../../../scope';
+import type { PromptSubject } from '../../../prompts/logic/subjects';
+import { ChatPromptFeed } from '../../pending-prompts';
 
-/* The approvals and then the questions the chat waits on, which take the composer's place until answered. */
-export function usePendingRequests(chatId: string): Array<ChatApprovalItem | ChatQuestionItem> {
-    // The structure, which a delta leaves alone. The prompts and the requests are items of their own.
-    const structure = useChatRow(chatId, (row) => row?.structure);
-    const order = useChatRow(chatId, (row) => row?.order);
-    const waitingBefore = useChatRow(chatId, (row) => row?.waitingBefore);
-    return useMemo(() => {
-        const approvals: ChatApprovalItem[] = [];
-        const questions: ChatQuestionItem[] = [];
-        for (const item of waitingRequestsOf(structure && order ? { structure, order, waitingBefore } : undefined)) {
-            if (item.kind === 'approval') {
-                approvals.push(item);
-            } else {
-                questions.push(item);
-            }
-        }
-        return [...approvals, ...questions];
-    }, [structure, order, waitingBefore]);
+export function usePendingRequests(chatId: string): PromptSubject[] {
+    const scope = useChatScope();
+    const [subjects, setSubjects] = useState<PromptSubject[]>([]);
+    useEffect(() => {
+        const feed = new ChatPromptFeed(scope, chatId, setSubjects);
+        feed.start();
+        return () => feed.dispose();
+    }, [scope, chatId]);
+    return subjects;
 }

package/src/chat/ui/highlighter.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 import type { BundledLanguage, BundledTheme, Highlighter, ThemeRegistration } from 'shiki';
-import type { CodeToken, Tokenize } from './code-lines';
+import { TokenCache, type CodeToken, type Tokenize } from './code-lines';
 import { useChatHost, type ChatHost } from '../../host';
 import { shikiThemeOf } from './code-theme';
 
@@ -42,6 +42,7 @@ function createCodeHighlighter(source: () => Promise<Highlighter>): CodeHighligh
     const languageLoads = new Map<string, Promise<void>>();
     const themes = new Set<string>();
     const themeLoads = new Map<string, Promise<void>>();
+    const tokens = new TokenCache<GrammarState>();
     const tokenizers = new Map<string, { tokenize: Tokenize<GrammarState>; fg: string | undefined }>();
 
     const load = (): Promise<Highlighter> => {
@@ -104,10 +105,10 @@ function createCodeHighlighter(source: () => Promise<Highlighter>): CodeHighligh
             if (!entry) {
                 const options = { lang: resolved as BundledLanguage, theme };
                 entry = {
-                    tokenize: (code, state) => {
+                    tokenize: tokens.wrap(key, (code, state) => {
                         const result = loaded.codeToTokens(code, state ? { ...options, grammarState: state } : options);
                         return { lines: result.tokens, state: result.grammarState };
-                    },
+                    }),
                     fg: loaded.getTheme(theme).fg
                 };
                 tokenizers.set(key, entry);

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

@@ -65,7 +65,7 @@ function AttachmentLink({ chatId, attachment }: { chatId: string; attachment: Ch
                 target="_blank"
                 rel="noreferrer"
                 aria-disabled={url === null}
-                className="flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover"
+                className="flex h-28 w-36 flex-col rounded-xl border border-border bg-surface-raised bg-clip-padding p-2.5 text-left hover:bg-surface-hover-edged"
             >
                 <span className="flex h-6 min-w-6 items-center justify-center self-start rounded-md border border-border px-1.5 text-xs font-medium text-text-muted">
                     {badge ?? <Icon icon={File} size={12} />}

package/src/locales/en/agent-chat.ts

@@ -233,6 +233,7 @@ export default {
             canRead: 'It can read',
             worksIn: 'It works in'
         },
+        loading: 'Loading conversation',
         loadingEarlier: 'Loading earlier messages',
         stripFailed: 'Could not show the messages',
         cardFailed: 'Could not show this card',

package/src/locales/nl/agent-chat.ts

@@ -233,6 +233,7 @@ export default {
             canRead: 'Kan lezen',
             worksIn: 'Werkt in'
         },
+        loading: 'Gesprek laden',
         loadingEarlier: 'Eerdere berichten laden',
         stripFailed: 'Kon de berichten niet tonen',
         cardFailed: 'Kon deze kaart niet tonen',

package/src/prompts/logic/subjects.ts

@@ -1,5 +1,6 @@
 import i18next from 'i18next';
 import type { ReactNode } from 'react';
+import type { AgentKind } from '@adecore/agent-contracts';
 import type { ChatHost } from '../../host';
 import { isBlockingPrompt, type PendingPrompt, type PromptAction, type PromptDraft } from './prompts';
 
@@ -20,7 +21,9 @@ export interface HostPrompt {
 }
 
 /* What a prompt card draws, whatever asked it. The chat's items pass through unchanged. */
-export type PromptSubject = { kind: 'chat'; nodeId: string; item: PendingPrompt } | { kind: 'host'; nodeId: string; prompt: HostPrompt };
+export type PromptSubject =
+    | { kind: 'chat'; nodeId: string; item: PendingPrompt; source?: { label: string; provider?: AgentKind } }
+    | { kind: 'host'; nodeId: string; prompt: HostPrompt };
 
 /* The requests a chat's own prompts are answered with. */
 export interface ChatPromptClients {

package/src/prompts/ui/PromptCard.tsx

@@ -81,7 +81,7 @@ export function PromptCard({ kind, heading, meta, top, actions, busy, notice, er
                             {heading}
                         </h3>
                     </div>
-                    {meta && <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted">{meta}</div>}
+                    {meta && <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-muted">{meta}</div>}
                     {children}
                     {notice && <p className="text-xs text-text-muted">{notice}</p>}
                     {error && (

package/src/prompts/ui/PromptView.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { Pill } from '@adecore/ui';
 import { toolSummary } from '../../chat/logic/tools';
 import { useChatHost } from '../../host';
 import { answerValue, promptAnswers, questionAnswer, type PromptDraft } from '../logic/prompts';
@@ -43,8 +44,13 @@ export function PromptView(props: PromptViewProps) {
     };
     const multiple = item.kind === 'question' && item.questions.length > 1;
     const meta =
-        more > 0 || hasDraft || multiple ? (
+        subject.source !== undefined || more > 0 || hasDraft || multiple ? (
             <>
+                {subject.source && (
+                    <Pill size="sm" className="max-w-full">
+                        <span className="truncate">{subject.source.label}</span>
+                    </Pill>
+                )}
                 {more > 0 && <span className="tabular-nums">{t('meta.waiting', { count: more + 1 })}</span>}
                 {multiple && <span className="tabular-nums">{t('meta.question', { index: draft.index + 1, total: item.questions.length })}</span>}
                 {hasDraft && <span>{t('meta.draftSaved')}</span>}

package/src/state/chats.ts

@@ -17,6 +17,8 @@ import { ChatScopeContext, useChatScope } from '../scope';
 
 export interface ChatState {
     info: ChatInfo;
+    /* Status and live events do not establish where the initial history begins. */
+    historyPending?: boolean;
     items: Record<string, ChatItem>;
     /*
      * The items as the timeline groups them: the same map as `items`, except that a delta growing a
@@ -63,11 +65,18 @@ export type ChatStatuses = Record<string, Pick<ChatState, 'info'>>;
 
 /* What a chat client writes. It owns one host's link, so it speaks in chat ids alone. */
 export interface ChatSink {
+    /*
+     * A token held by the cached thread, replaced on reset or eviction. It may change after a write.
+     * Without it a client can only retain a replay checkpoint while the chat is mounted.
+     */
+    historyIdentity?(chatId: string): object | undefined;
     /* Without a page the items are the whole thread. */
     reset(chatId: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
     /* The page before the one the chat holds, read with `cursor`. */
     prepend(chatId: string, cursor: string, page: ChatHistoryResult): void;
     apply(chatId: string, event: ChatEvent): void;
+    /* A reconnect can publish its complete replay at once; absent sinks receive each event through apply. */
+    replay?(chatId: string, events: readonly ChatEvent[]): void;
     /* What a chat is doing, for a thread nobody in this window has open. */
     status(chatId: string, info: ChatInfo): void;
     bookmarks(chatId: string, bookmarks: ChatBookmark[]): void;
@@ -82,6 +91,7 @@ interface ChatsStore {
     reset(key: string, info: ChatInfo, items: ChatItem[], page?: ChatPage): void;
     prepend(key: string, cursor: string, page: ChatHistoryResult): void;
     apply(key: string, event: ChatEvent): void;
+    replay(key: string, events: readonly ChatEvent[]): void;
     status(key: string, info: ChatInfo): void;
     bookmarks(key: string, bookmarks: ChatBookmark[]): void;
     visuals(key: string, visuals: ChatVisual[]): void;
@@ -121,18 +131,20 @@ function isBeforePage(state: ChatState, historyIndex: number | undefined): boole
     return state.history !== undefined && historyIndex !== undefined && historyIndex < state.history.start;
 }
 
+type ItemWriter = (state: ChatState, item: ChatItem, structural?: boolean) => ChatState;
+
 /* An item from before the page this client holds matters only as a sub-agent, a request that waits, or one that stopped waiting. */
-function withEarlierItem(state: ChatState, item: ChatItem): ChatState {
+function withEarlierItem(state: ChatState, item: ChatItem, write: ItemWriter): ChatState {
     if (item.kind === 'subagent') {
         const subagents = state.subagentsBefore ?? [];
-        return { ...withItem(state, item), subagentsBefore: subagents.includes(item.id) ? subagents : [...subagents, item.id] };
+        return { ...write(state, item), subagentsBefore: subagents.includes(item.id) ? subagents : [...subagents, item.id] };
     }
     const waiting = state.waitingBefore ?? [];
     const held = waiting.includes(item.id);
     if (isWaiting(item)) {
-        return { ...withItem(state, item), waitingBefore: held ? waiting : [...waiting, item.id] };
+        return { ...write(state, item), waitingBefore: held ? waiting : [...waiting, item.id] };
     }
-    return held ? { ...withItem(state, item), waitingBefore: waiting.filter((id) => id !== item.id) } : state;
+    return held ? { ...write(state, item), waitingBefore: waiting.filter((id) => id !== item.id) } : state;
 }
 
 /* The page before the one a chat holds, unless the thread was read again since that page was asked for. */
@@ -140,6 +152,7 @@ export function prependPage(state: ChatState, cursor: string, page: ChatHistoryR
     if (state.history?.cursor !== cursor) {
         return state;
     }
+    const { historyPending: _historyPending, ...loaded } = state;
     const held = new Set(state.order);
     const older = page.items.filter((item) => !held.has(item.id));
     const olderIds = new Set(older.map((item) => item.id));
@@ -150,12 +163,12 @@ export function prependPage(state: ChatState, cursor: string, page: ChatHistoryR
     }
     const order = [...olderIds, ...state.order];
     if (page.history.cursor === null) {
-        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, ...rest } = state;
+        const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, ...rest } = loaded;
         return { ...rest, items, structure: items, order };
     }
     const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
     const subagentsBefore = (state.subagentsBefore ?? []).filter((id) => !olderIds.has(id));
-    return { ...state, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore };
+    return { ...loaded, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore };
 }
 
 /* The requests that still wait, oldest first: those from before the page this client holds, then the thread's own. */
@@ -163,10 +176,9 @@ export function waitingRequestsOf(chat: Pick<ChatState, 'structure' | 'order' |
     return [...(chat?.waitingBefore ?? []), ...(chat?.order ?? [])].map((id) => chat?.structure[id]).filter(isWaiting);
 }
 
-/* The state with one item replaced, in the thread and in the structure the rows come from. */
-function withItem(state: ChatState, item: ChatItem): ChatState {
+function withItem(state: ChatState, item: ChatItem, structural = true): ChatState {
     const items = { ...state.items, [item.id]: item };
-    return { ...state, items, structure: items };
+    return structural ? { ...state, items, structure: items } : { ...state, items };
 }
 
 /* Cheap enough, since a status only arrives when the host saw one change, never on a streamed word. */
@@ -184,26 +196,47 @@ function without<T>(rows: Record<string, T>, matches: (key: string) => boolean):
 }
 
 export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
+    return applyUpdate(state, event, withItem);
+}
+
+function replayEvents(state: ChatState, events: readonly ChatEvent[]): ChatState {
+    let draft: Record<string, ChatItem> | undefined;
+    const write: ItemWriter = (current, item, structural = true) => {
+        // A text delta must leave the last structural snapshot intact, including within this replay.
+        if (draft !== current.items || (!structural && draft === current.structure)) {
+            draft = { ...current.items };
+        }
+        // Item ids may be __proto__, so this must define an own data property.
+        Object.defineProperty(draft, item.id, { value: item, enumerable: true, configurable: true, writable: true });
+        return structural ? { ...current, items: draft, structure: draft } : { ...current, items: draft };
+    };
+    for (const event of events) {
+        state = applyUpdate(state, event, write);
+    }
+    return state;
+}
+
+function applyUpdate(state: ChatState, event: ChatEvent, write: ItemWriter): ChatState {
     switch (event.type) {
         case 'item': {
             if (isBeforePage(state, event.historyIndex)) {
-                return withEarlierItem(state, event.item);
+                return withEarlierItem(state, event.item, write);
             }
             const known = event.item.id in state.items;
-            return { ...withItem(state, event.item), order: known ? state.order : [...state.order, event.item.id] };
+            return { ...write(state, event.item), order: known ? state.order : [...state.order, event.item.id] };
         }
         case 'delta': {
             const item = state.items[event.itemId];
             if (event.uiQueries && item?.kind === 'assistant') {
                 // The text first, as the daemon's thread applies it, then the metadata on what it grew into.
                 const { uiQueries, ...text } = event;
-                const grown = event.text === '' ? state : applyEvent(state, text);
+                const grown = event.text === '' ? state : applyUpdate(state, text, write);
                 const reply = grown.items[event.itemId] ?? item;
-                return { ...grown, items: { ...grown.items, [event.itemId]: { ...reply, uiQueries } as ChatItem } };
+                return write(grown, { ...reply, uiQueries } as ChatItem, false);
             }
             if (event.ui !== undefined && event.text === '') {
                 if (item?.kind === 'assistant' && item.streaming && event.textLength === item.text.length) {
-                    return { ...state, items: { ...state.items, [event.itemId]: { ...item, ui: event.ui } } };
+                    return write(state, { ...item, ui: event.ui }, false);
                 }
                 return state;
             }
@@ -211,14 +244,14 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
                 const grown = { ...item, text: item.text + event.text };
                 // The first text is structure after all, since an empty reply that is not streaming has no row.
                 if (item.text === '') {
-                    return withItem(state, grown);
+                    return write(state, grown);
                 }
-                return { ...state, items: { ...state.items, [event.itemId]: grown } };
+                return write(state, grown, false);
             }
             if (item?.kind === 'tool' && item.state === 'running') {
                 const progress = item.progress ?? { startedAt: null, description: null, output: null };
                 const grown = { ...item, progress: { ...progress, output: appendToolOutput(progress.output, event.text) } };
-                return { ...state, items: { ...state.items, [event.itemId]: grown } };
+                return write(state, grown, false);
             }
             return state;
         }
@@ -272,6 +305,16 @@ export const useChats = create<ChatsStore>((set) => ({
             return { byKey: { ...s.byKey, [key]: next }, statusByKey: withStatus(s.statusByKey, key, next.info) };
         });
     },
+    replay(key, events) {
+        set((store) => {
+            const current = store.byKey[key];
+            if (!current || events.length === 0) {
+                return store;
+            }
+            const next = replayEvents(current, events);
+            return next === current ? store : { byKey: { ...store.byKey, [key]: next }, statusByKey: withStatus(store.statusByKey, key, next.info) };
+        });
+    },
     /*
      * The status of a chat this window is not reading, which the host sends for every chat it has
      * loaded. The thread stays empty until somebody attaches, since this is what a header, a list and
@@ -281,7 +324,7 @@ export const useChats = create<ChatsStore>((set) => ({
         set((s) => {
             const current = s.byKey[key];
             if (!current) {
-                return { byKey: { ...s.byKey, [key]: stateOf(info, []) }, statusByKey: withStatus(s.statusByKey, key, info) };
+                return { byKey: { ...s.byKey, [key]: { ...stateOf(info, []), historyPending: true } }, statusByKey: withStatus(s.statusByKey, key, info) };
             }
             // An attached client already had this on `chat.event`; writing it again would redraw the thread.
             if (sameInfo(current.info, info)) {
@@ -313,9 +356,11 @@ export const useChats = create<ChatsStore>((set) => ({
 /* The sink of one host's chat client: it hands over chat ids, this puts them under the keys of its scope. */
 export function chatSink(keyOf: (chatId: string) => string): ChatSink {
     return {
+        historyIdentity: (chatId) => useChats.getState().byKey[keyOf(chatId)]?.order,
         reset: (chatId, info, items, page) => useChats.getState().reset(keyOf(chatId), info, items, page),
         prepend: (chatId, cursor, page) => useChats.getState().prepend(keyOf(chatId), cursor, page),
         apply: (chatId, event) => useChats.getState().apply(keyOf(chatId), event),
+        replay: (chatId, events) => useChats.getState().replay(keyOf(chatId), events),
         status: (chatId, info) => useChats.getState().status(keyOf(chatId), info),
         bookmarks: (chatId, bookmarks) => useChats.getState().bookmarks(keyOf(chatId), bookmarks),
         visuals: (chatId, visuals) => useChats.getState().visuals(keyOf(chatId), visuals),

package/src/theme.css

@@ -110,7 +110,7 @@
      */
     .chat-column .chat-column-content { margin-inline: auto; max-width: var(--chat-measure, 768px); }
     /* Wide pages clear the scrubber even when the reply column needs no extra padding. */
-    .chat-wide-content { max-width: calc(100% - 2 * var(--chat-wide-inset, 0px)); }
+    .chat-wide-content { max-width: min(calc(100% - 2 * var(--chat-wide-inset, 0px)), var(--chat-wide-measure, 100%)); }
     /* Wider by the input's inset (`.composer-input .cm-content` padding plus the card's border), so what is typed lines up with the thread. */
     .chat-column .chat-composer-content { margin-inline: auto; max-width: calc(var(--chat-measure, 768px) + 2 * 21px); }