@adecore/agents-react 0.20.0 → 0.21.0

package/src/chat/ui/intelligent-ui/use-ui-queries.ts

@@ -0,0 +1,282 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ChatUiQueryReading, ChatUiQueryState } from '@adecore/agent-contracts';
+import { uiInputValues, UI_CATALOG_VERSION, UiState, type UiBlock, type UiViewNode, type UiNode } from '@adecore/intelligent-ui';
+import { chatHost } from '../../../host';
+import type { UiLiveValue, UiLiveStatus, UiRenderContext } from './render-context';
+
+interface LocalReading {
+    identity: string;
+    reading: ChatUiQueryReading;
+    successful?: { inputs: string; reading: ChatUiQueryReading };
+}
+
+function documentVisible(): boolean {
+    return document.visibilityState !== 'hidden';
+}
+
+export function useUiQueries(
+    block: UiBlock,
+    state: UiState,
+    context: UiRenderContext,
+    element: HTMLDivElement | null,
+    frozen?: ChatUiQueryState['blocks'][string]
+) {
+    const [readings, setReadings] = useState<Record<string, LocalReading>>({});
+    const [busyInput, setBusyInput] = useState<string | null>(null);
+    const lastReadAt = useRef({ identity: '', at: 0 });
+    const names = Object.keys(block.queries);
+    const inputs = JSON.stringify(uiInputValues(block, state));
+    const identity = JSON.stringify([context.scopeId, context.chatId, context.itemId, block.id, block.revision]);
+    const inputKey = JSON.stringify([identity, inputs]);
+    const reading = busyInput === inputKey;
+    const defaultInputs = JSON.stringify(uiInputValues(block, new UiState(block)));
+    const initial = frozen && frozen.revision === block.revision ? frozen.readings : {};
+    const successfulFor = (name: string, signature: string): ChatUiQueryReading | undefined => {
+        const local = readings[name];
+        if (local?.identity === identity && local.successful?.inputs === signature) {
+            return local.successful.reading;
+        }
+        return signature === defaultInputs && initial[name]?.state === 'fresh' ? initial[name] : undefined;
+    };
+    const readsFor = (values: Readonly<Record<string, unknown>>): Record<string, string> | null => {
+        const signature = JSON.stringify(values);
+        const reads: Record<string, string> = {};
+        for (const name of names) {
+            const local = readings[name];
+            const successful = successfulFor(name, signature);
+            if (!successful?.readId || (local?.identity === identity && local.reading.state === 'refused')) {
+                return null;
+            }
+            reads[name] = successful.readId;
+        }
+        return reads;
+    };
+    const reads = readsFor(JSON.parse(inputs));
+    const ready = reads !== null;
+    const query = chatHost().intelligentUi?.query;
+    const subscribe = chatHost().intelligentUi?.subscribe;
+    useEffect(() => {
+        const scope = state.scope();
+        for (const name of names) {
+            const successful = successfulFor(name, inputs);
+            if (successful && JSON.stringify(scope[name]) !== JSON.stringify(successful.value)) {
+                state.setQuery(name, successful.value, block);
+            }
+        }
+    });
+    useEffect(() => {
+        if (
+            !query ||
+            !element ||
+            !block.complete ||
+            block.catalogVersion !== UI_CATALOG_VERSION ||
+            !block.revision ||
+            !Object.keys(block.queries).length ||
+            context.phase !== 'final'
+        ) {
+            return;
+        }
+        let stopped = false;
+        let visible = typeof IntersectionObserver === 'undefined';
+        let busy = false;
+
+        let timer: ReturnType<typeof setTimeout> | null = null;
+        const refresh = async () => {
+            if (stopped || !visible || !documentVisible() || busy) {
+                return;
+            }
+            const wait = lastReadAt.current.identity === identity ? 10_000 - (Date.now() - lastReadAt.current.at) : 0;
+            if (wait > 0) {
+                if (timer === null) {
+                    if (!visible || !documentVisible()) {
+                        return;
+                    }
+                    timer = setTimeout(() => {
+                        timer = null;
+                        void refresh();
+                    }, wait);
+                }
+                return;
+            }
+            busy = true;
+            lastReadAt.current = { identity, at: Date.now() };
+            setBusyInput(inputKey);
+            for (const name of Object.keys(block.queries).slice(0, 8)) {
+                if (!visible || !documentVisible()) {
+                    break;
+                }
+                try {
+                    const reading = await query(context.scopeId, {
+                        chatId: context.chatId,
+                        itemId: context.itemId,
+                        blockId: block.id,
+                        revision: block.revision!,
+                        query: name,
+                        values: JSON.parse(inputs)
+                    });
+                    if (stopped) {
+                        return;
+                    }
+                    if (reading.state === 'fresh') {
+                        state.setQuery(name, reading.value, block);
+                    }
+                    setReadings((previous) => ({
+                        ...previous,
+                        [name]: {
+                            identity,
+                            reading,
+                            successful:
+                                reading.state === 'fresh' ? { inputs, reading } : previous[name]?.identity === identity ? previous[name].successful : undefined
+                        }
+                    }));
+                } catch (error) {
+                    if (stopped) {
+                        return;
+                    }
+                    setReadings((previous) => ({
+                        ...previous,
+                        [name]: {
+                            identity,
+                            reading: { state: 'failed', readAt: Date.now(), reason: error instanceof Error ? error.message : 'This query could not be read.' },
+                            successful: previous[name]?.identity === identity ? previous[name].successful : undefined
+                        }
+                    }));
+                }
+            }
+            busy = false;
+            if (stopped) {
+                return;
+            }
+            setBusyInput(null);
+            timer = setTimeout(() => {
+                timer = null;
+                void refresh();
+            }, 10_000);
+        };
+        const observer =
+            typeof IntersectionObserver === 'undefined'
+                ? null
+                : new IntersectionObserver((entries) => {
+                      visible = entries.some((entry) => entry.isIntersecting);
+                      if (visible) {
+                          void refresh();
+                      } else if (timer !== null) {
+                          clearTimeout(timer);
+                          timer = null;
+                      }
+                  });
+        if (element) {
+            observer?.observe(element);
+        }
+        const focus = () => {
+            void refresh();
+        };
+        document.addEventListener('visibilitychange', focus);
+        const unsubscribe = subscribe?.(context.scopeId, context.chatId, focus);
+        void refresh();
+        return () => {
+            stopped = true;
+            observer?.disconnect();
+            unsubscribe?.();
+            document.removeEventListener('visibilitychange', focus);
+            if (timer !== null) {
+                clearTimeout(timer);
+            }
+        };
+    }, [block, state, context.scopeId, context.chatId, context.itemId, context.phase, inputs, query, subscribe, element, identity, inputKey]);
+    const currentReadings = Object.fromEntries(
+        names.flatMap((name) => {
+            const local = readings[name];
+            const reading = local?.identity === identity ? local.reading : initial[name];
+            return reading ? [[name, reading]] : [];
+        })
+    );
+    const failed = Object.entries(currentReadings).find(([, value]) => value.state !== 'fresh');
+    const live: UiLiveStatus | undefined = names.length
+        ? {
+              state: reading || (!ready && !failed) ? 'reading' : (failed?.[1].state ?? 'fresh'),
+              sources: names.map((name) => block.queries[name].source),
+              readAt: Object.values(currentReadings)
+                  .filter((reading) => reading.state === 'fresh')
+                  .reduce<number | null>((at, value) => (at === null ? value.readAt : Math.min(at, value.readAt)), null),
+              source: failed ? block.queries[failed[0]]?.source : undefined,
+              reason: failed?.[1].reason
+          }
+        : undefined;
+    return { live, reads: reads ?? {}, reading, ready, readsFor, currentReadings };
+}
+
+export function useUiLiveValues(block: UiBlock, nodes: readonly UiViewNode[], readings: Readonly<Record<string, ChatUiQueryReading>>) {
+    const [committed, setCommitted] = useState<{ token: string; values: Map<string, Record<string, unknown>>; previous: Map<string, Record<string, unknown>> }>(
+        {
+            token: '',
+            values: new Map(),
+            previous: new Map()
+        }
+    );
+    const dependencies = new Map<string, Set<string>>();
+    const names = new Set(Object.keys(block.queries));
+    const references = (value: unknown, into: Set<string>) => {
+        if (!value || typeof value !== 'object') {
+            return;
+        }
+        const expression = value as Record<string, unknown>;
+        if (expression.kind === 'reference' && names.has(String(expression.name))) {
+            into.add(String(expression.name));
+        }
+        for (const child of Object.values(expression)) {
+            if (Array.isArray(child)) {
+                child.forEach((item) => references(item, into));
+            } else if (typeof child === 'object') {
+                references(child, into);
+            }
+        }
+    };
+    const written = (nodes: readonly UiNode[], inherited = new Set<string>()) => {
+        for (const node of nodes) {
+            const related = new Set(inherited);
+            references(node.expressions, related);
+            dependencies.set(node.id, related);
+            written(node.children, node.type === 'Each' ? related : inherited);
+        }
+    };
+    written(block.nodes);
+    const values = new Map<string, Record<string, unknown>>();
+    const sources = new Map<string, Set<string>>();
+    const collect = (nodes: readonly UiViewNode[]) => {
+        for (const node of nodes) {
+            const related = dependencies.get(node.sourceId ?? node.id);
+            if (related?.size && !node.error) {
+                values.set(node.id, node.props);
+                sources.set(node.id, related);
+            }
+            collect(node.children);
+        }
+    };
+    collect(nodes);
+    const token = JSON.stringify([block.revision, Object.entries(readings).map(([name, reading]) => [name, reading.state, reading.readId, reading.readAt])]);
+    const previous = committed.token === token ? committed.previous : committed.values;
+    if (committed.token !== token) {
+        setCommitted({ token, values, previous });
+    }
+    if (!names.size) {
+        return undefined;
+    }
+    return (id: string, prop: string, path?: readonly [number, string]): UiLiveValue | undefined => {
+        const related = sources.get(id);
+        if (!related) {
+            return undefined;
+        }
+        const get = (props?: Record<string, unknown>): unknown => {
+            const value = props?.[prop];
+            return path && Array.isArray(value) ? value[path[0]]?.[path[1]] : value;
+        };
+        const before = get(previous.get(id));
+        const value = get(values.get(id));
+        return {
+            previous: before,
+            changed: before !== undefined && JSON.stringify(before) !== JSON.stringify(value),
+            stale: [...related].some((name) => readings[name]?.state === 'failed' || readings[name]?.state === 'refused')
+        };
+    };
+}

package/src/chat/ui/reply-context.ts

@@ -1,4 +1,11 @@
 import { createContext } from 'react';
+import type { UiReplyTarget } from '../logic/timeline-target';
 import type { ChatInfo } from '@adecore/agent-contracts';
 
 export const ReplyContext = createContext<{ provider: ChatInfo['provider']; chatId?: string } | null>(null);
+
+export const UiReplyNavigationContext = createContext<{
+    chatId: string;
+    reveal(target: UiReplyTarget): void;
+    flash: (UiReplyTarget & { nonce: number }) | null;
+} | null>(null);

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

@@ -0,0 +1,244 @@
+import { useEffect, useState } from 'react';
+import type { TFunction } from 'i18next';
+import clsx from 'clsx';
+import { Trans, useTranslation } from 'react-i18next';
+import { Check, Copy, Ellipsis, ExternalLink, FolderDown, ImageIcon, Maximize2 } from 'lucide-react';
+import type { ChatAttachment, ChatToolItem } from '@adecore/agent-contracts';
+import { Button, ButtonGroup, copyText, ErrorBoundary, FileIcon, Icon, IconButton, Menu, Surface } from '@adecore/ui';
+import { chatHost } from '../../../host';
+import { useChatScope } from '../../../scope';
+import { useCurrentItem } from '../../../state/chats';
+import { formatBytes } from '../../attachments';
+import { attachmentAspect, generatedImageView, type GeneratedImageFailure } from '../../logic/generated-image';
+import { toolStartedAt } from '../../logic/tools';
+import { CHIP_IN_MESSAGE, MENTION_TONE } from '../chips';
+import { openFileLink, useFileLinkCwd } from '../file-links';
+import { ImageThumb } from '../ImageView';
+import { ROW_GUTTER } from '../icons';
+import { RunningFor, WorkRow } from './WorkRows';
+
+const SAVED_FLASH_MS = 2000;
+
+// Where each image went, so a row the thread unmounts while scrolling still says so when it comes back.
+const savedPaths = new Map<string, string>();
+
+/* True for `ms` after `start()`, for a check mark that says an action landed. */
+function useFlash(ms: number): [boolean, () => void] {
+    const [on, setOn] = useState(false);
+    useEffect(() => {
+        if (!on) {
+            return;
+        }
+        const timer = setTimeout(() => setOn(false), ms);
+        return () => clearTimeout(timer);
+    }, [on, ms]);
+    return [on, () => setOn(true)];
+}
+
+function failureText(failure: GeneratedImageFailure, t: TFunction<'agent-chat'>): string | undefined {
+    switch (failure.kind) {
+        case 'provider':
+            return failure.message ?? undefined;
+        case 'empty':
+            return t('generatedImage.empty');
+        case 'not-image':
+            return t('generatedImage.notImage');
+        case 'too-large':
+            return t('generatedImage.tooLarge', { size: formatBytes(failure.limit) });
+    }
+}
+
+/* The line over the image, in the measures of a tool line but nothing to fold. */
+function HeadLine({ label, detail, live, startedAt }: { label: string; detail?: string; live?: boolean; startedAt?: number }) {
+    return (
+        <div className="-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-muted">
+            <span className={clsx(ROW_GUTTER, live && 'text-accent')}>
+                <Icon icon={ImageIcon} size={12} />
+            </span>
+            <span className={clsx('shrink-0', live && 'chat-live-text')}>{label}</span>
+            {detail && <span className="min-w-0 truncate text-text-faint">{detail}</span>}
+            <span className="grow" />
+            {startedAt !== undefined && <RunningFor startedAt={startedAt} />}
+        </div>
+    );
+}
+
+/* The file a saved image became, which opens where the app opens a file link. */
+function SavedFile({ path }: { path: string }) {
+    const cwd = useFileLinkCwd();
+    const { id } = useChatScope();
+    const chip = (
+        <>
+            <FileIcon path={path} size={14} />
+            <span className="truncate">{path}</span>
+        </>
+    );
+    if (chatHost().fileLinks === null) {
+        return <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE)}>{chip}</span>;
+    }
+    return (
+        <button
+            type="button"
+            className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'hover:brightness-95')}
+            data-file-path={path}
+            onClick={() => openFileLink(cwd, { path, directory: false }, id)}
+        >
+            {chip}
+        </button>
+    );
+}
+
+function ReadyImage({ chatId, attachment, prompt, transparent }: { chatId: string; attachment: ChatAttachment; prompt: string | null; transparent: boolean }) {
+    const { t } = useTranslation('agent-chat');
+    const { id: scopeId } = useChatScope();
+    const { attachments } = chatHost();
+    const source = attachments.useUrl(scopeId, chatId, attachment.id);
+    const savedKey = `${scopeId}\n${chatId}\n${attachment.id}`;
+    const [lightbox, setLightbox] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [savedPath, setSavedPath] = useState(() => savedPaths.get(savedKey) ?? null);
+    const [savedFlash, flashSaved] = useFlash(SAVED_FLASH_MS);
+    const missing = source.failure !== null;
+    const aspect = attachmentAspect(attachment);
+    const { open, saveToProject } = attachments;
+
+    const detail = [
+        attachment.width !== undefined && attachment.height !== undefined
+            ? t('generatedImage.dimensions', { width: attachment.width, height: attachment.height })
+            : null,
+        formatBytes(attachment.size),
+        transparent ? t('generatedImage.transparent') : null
+    ]
+        .filter((part) => part !== null)
+        .join(' · ');
+
+    const openFile = open === undefined ? undefined : () => open(scopeId, chatId, attachment.id, attachment.name);
+
+    const save =
+        saveToProject === undefined
+            ? undefined
+            : async (): Promise<void> => {
+                  setSaving(true);
+                  try {
+                      const path = await saveToProject(scopeId, chatId, attachment.id, attachment.name);
+                      if (path !== null) {
+                          savedPaths.set(savedKey, path);
+                          setSavedPath(path);
+                          flashSaved();
+                      }
+                  } catch {
+                      // The host's dialog shows why; the row stays as it was.
+                  } finally {
+                      setSaving(false);
+                  }
+              };
+
+    const lightboxActions = (
+        <>
+            {openFile !== undefined && <IconButton icon={ExternalLink} size="sm" label={t('generatedImage.open')} onClick={openFile} />}
+            {save !== undefined && <IconButton icon={FolderDown} size="sm" label={t('generatedImage.save')} disabled={saving} onClick={() => void save()} />}
+        </>
+    );
+
+    return (
+        <div>
+            <HeadLine label={t('generatedImage.label')} detail={detail} />
+            <div className="flex max-w-90 flex-col gap-1.5">
+                <div
+                    className={clsx(
+                        'group/image relative',
+                        aspect === undefined && 'w-fit',
+                        transparent && source.url !== null && 'chat-checkerboard rounded-lg'
+                    )}
+                >
+                    <ImageThumb
+                        source={source}
+                        alt={attachment.name}
+                        aspect={aspect}
+                        className={aspect === undefined ? 'max-h-90 max-w-full object-contain' : undefined}
+                        actions={lightboxActions}
+                        open={lightbox}
+                        onOpenChange={setLightbox}
+                    />
+                    {source.url !== null && (
+                        <Surface
+                            role="toolbar"
+                            aria-label={t('generatedImage.actions')}
+                            className="absolute top-2 right-2 rounded-lg p-0.5 opacity-0 transition-opacity group-focus-within/image:opacity-100 group-hover/image:opacity-100 has-[[data-popup-open]]:opacity-100 pointer-coarse:opacity-100"
+                        >
+                            <ButtonGroup>
+                                <IconButton icon={Maximize2} size="sm" label={t('generatedImage.openLarge')} onClick={() => setLightbox(true)} />
+                                {prompt !== null && (
+                                    <Menu.Root>
+                                        <IconButton icon={Ellipsis} size="sm" label={t('generatedImage.more')} render={<Menu.Trigger />} />
+                                        <Menu.Popup align="end">
+                                            <Menu.Item onClick={() => copyText(prompt)}>
+                                                <Icon icon={Copy} size={14} /> {t('generatedImage.copyPrompt')}
+                                            </Menu.Item>
+                                        </Menu.Popup>
+                                    </Menu.Root>
+                                )}
+                            </ButtonGroup>
+                        </Surface>
+                    )}
+                </div>
+                {(openFile !== undefined || save !== undefined) && (
+                    <div className="flex items-center gap-1.5">
+                        {openFile !== undefined && (
+                            <Button size="xs" variant="secondary" disabled={missing} onClick={openFile}>
+                                {t('generatedImage.open')}
+                            </Button>
+                        )}
+                        {save !== undefined && (
+                            <Button size="xs" variant="secondary" disabled={missing || saving || savedFlash} onClick={() => void save()}>
+                                {savedFlash ? (
+                                    <>
+                                        <Icon icon={Check} size={12} /> {t('generatedImage.saved')}
+                                    </>
+                                ) : (
+                                    t('generatedImage.save')
+                                )}
+                            </Button>
+                        )}
+                    </div>
+                )}
+                {savedPath !== null && !savedFlash && (
+                    <div className="flex min-w-0 items-center gap-1.5 text-xs text-text-muted">
+                        <Trans t={t} i18nKey="generatedImage.savedTo" values={{ path: savedPath }} components={{ file: <SavedFile path={savedPath} /> }} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/*
+ * The row of an image generation. Not a fold like other tool calls: the image is the result a person
+ * came for, so it stays open, opens large in the lightbox and offers what the host lets a person do
+ * with it. A failure is an ordinary failed tool line, with the reason as its detail.
+ */
+export function GeneratedImageRow({ chatId, tool: derived }: { chatId: string; tool: ChatToolItem }) {
+    const { t } = useTranslation('agent-chat');
+    const tool = useCurrentItem(chatId, derived);
+    const view = generatedImageView(tool);
+    switch (view.state) {
+        case 'generating':
+            return <HeadLine label={t('generatedImage.generating')} live startedAt={toolStartedAt(tool)} />;
+        case 'failed':
+            return (
+                <WorkRow
+                    tool={tool}
+                    icon={<Icon icon={ImageIcon} size={12} />}
+                    label={t('generatedImage.failed')}
+                    detail={failureText(view.failure, t) ?? ''}
+                    failed
+                />
+            );
+        case 'ready':
+            return (
+                <ErrorBoundary label={t('generatedImage.renderFailed')} resetKeys={[view.attachment]} compact className="relative rounded-lg">
+                    <ReadyImage chatId={chatId} attachment={view.attachment} prompt={view.prompt} transparent={view.transparent} />
+                </ErrorBoundary>
+            );
+    }
+}

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

@@ -1,8 +1,16 @@
-import { useContext, useState, type ReactNode } from 'react';
+import { useContext, useMemo, useState, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, TriangleAlert, X } from 'lucide-react';
-import type { ChatApprovalItem, ChatAttachment, ChatAssistantItem, ChatQuestionItem, ChatThinkingItem, ChatUserItem } from '@adecore/agent-contracts';
+import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, Reply, TriangleAlert, X } from 'lucide-react';
+import type {
+    ChatApprovalItem,
+    ChatAttachment,
+    ChatAssistantItem,
+    ChatQuestionItem,
+    ChatThinkingItem,
+    ChatUiChoiceOrigin,
+    ChatUserItem
+} from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments';
 import { useChatRow, useCurrentItem } from '../../../state/chats';
 import { chatHost } from '../../../host';
@@ -15,12 +23,13 @@ import { FadingWords } from '../FadingWords';
 import { settledBlocksText } from '../markdown-blocks';
 import { WHOLE_FADE_CLASS } from '../rehype-fade';
 import { useRevealedText } from '../reveal';
-import { formatAgo, formatElapsedShort, formatTokens } from '@adecore/ui/format';
+import { formatAgo, formatElapsedShort, formatMoment, formatTokens } from '@adecore/ui/format';
 import { Icon, Tooltip, useTickingText } from '@adecore/ui';
 import { toolSummary } from '../../logic/tools';
 import { ROW_GUTTER } from '../icons';
 import { useOpenForFind } from '../find-reveal';
-import { ReplyContext } from '../reply-context';
+import { ReplyContext, UiReplyNavigationContext } from '../reply-context';
+import { UiReply } from '../intelligent-ui/UiReply';
 
 // A long prompt folds so the answer stays in view; the reader can open it.
 const USER_FOLD_LINES = 8;
@@ -99,6 +108,7 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
                     ))}
                 </div>
             )}
+            {item.uiChoice !== undefined && <ChoiceLine chatId={chatId} choice={item.uiChoice} />}
             {item.text !== '' && (
                 <div className="relative max-w-[80%] rounded-2xl bg-surface-active px-3.5 py-2.5 text-sm wrap-anywhere text-text select-text">
                     <div data-find-field="text" className={clsx(long && !open && FOLD)}>
@@ -116,6 +126,34 @@ export function UserRow({ chatId, item }: { chatId: string; item: ChatUserItem }
     );
 }
 
+/*
+ * The choice a message answers. The label stays out of the message, which holds exactly what the agent
+ * read, and out of a copied selection; a screen reader hears it between the heading and the message.
+ */
+function ChoiceLine({ chatId, choice }: { chatId: string; choice: ChatUiChoiceOrigin }) {
+    const { t } = useTranslation('agent-chat');
+    const inherited = useContext(UiReplyNavigationContext);
+    const navigation = inherited?.chatId === chatId ? inherited : null;
+    const Tag = navigation ? 'button' : 'div';
+    return (
+        <Tag
+            type={navigation ? 'button' : undefined}
+            onClick={navigation ? () => navigation.reveal(choice) : undefined}
+            className={clsx(
+                'mb-1 flex max-w-[80%] items-start gap-1.5 px-1 text-left text-xs text-text-muted select-none',
+                navigation && 'rounded-md hover:text-text focus-visible:outline-2 focus-visible:outline-accent'
+            )}
+        >
+            <Icon icon={Reply} size={12} className="mt-1 shrink-0" />
+            <span className="min-w-0 wrap-anywhere">
+                {choice.older
+                    ? t('blocks.choseOlder', { label: choice.label, time: formatMoment(choice.sourceAt) })
+                    : t('blocks.chose', { label: choice.label })}
+            </span>
+        </Tag>
+    );
+}
+
 /*
  * Who wrote a message, for a screen reader only: one heading per message is what lets VoiceOver's
  * rotor walk a thread from message to message. `select-none`, so a selection copied across two
@@ -188,11 +226,35 @@ function Writing() {
  */
 export function AssistantRow({ chatId, item: derived }: { chatId: string; item: ChatAssistantItem }) {
     const item = useCurrentItem(chatId, derived);
+    const scope = useChatScope();
+    const context = useContext(ReplyContext);
+    const reply = useMemo(
+        () => (context === null && !item.parentToolUseId ? { scopeId: scope.id, chatId, itemId: item.id, streaming: item.streaming } : undefined),
+        [context, item.parentToolUseId, scope.id, chatId, item.id, item.streaming]
+    );
     const mode = chatHost().useStreaming();
     const [sawWriting] = useState(item.streaming);
     const live = mode === 'words' && item.streaming;
     const reveal = useRevealedText(item.text, live);
 
+    if (item.ui?.length && !item.parentToolUseId && !(mode === 'whole' && item.streaming)) {
+        return (
+            <div data-find-item={item.id} className="-mx-1 px-1 pb-2">
+                <ReplyHeading chatId={chatId} />
+                <div data-find-field="text" data-quote-answer className="contents">
+                    <UiReply
+                        text={item.text}
+                        blocks={item.ui}
+                        answers={item.uiAnswers}
+                        queries={item.uiQueries}
+                        reply={reply}
+                        context={{ scopeId: scope.id, chatId, itemId: item.id, phase: item.streaming ? 'streaming' : 'final', answer: null }}
+                    />
+                </div>
+            </div>
+        );
+    }
+
     if (mode === 'blocks') {
         const settled = item.streaming ? settledBlocksText(item.text) : item.text;
         return (
@@ -200,7 +262,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
                 <ReplyHeading chatId={chatId} />
                 {settled !== '' && (
                     <div data-find-field="text" data-quote-answer className="contents">
-                        <ReplyMarkdown text={settled} streaming={false} arriving={sawWriting} />
+                        <ReplyMarkdown text={settled} streaming={false} arriving={sawWriting} reply={reply} />
                     </div>
                 )}
                 {item.streaming && <Writing />}
@@ -219,7 +281,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
         <div data-find-item={item.id} className={clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS)}>
             <ReplyHeading chatId={chatId} />
             <div data-find-field="text" data-quote-answer className="contents">
-                <ReplyMarkdown text={reveal.text} streaming={reveal.active} />
+                <ReplyMarkdown text={reveal.text} streaming={reveal.active} reply={reply} />
             </div>
             {live && item.text === '' && <span className="inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" />}
         </div>