@adecore/agents-react 0.20.1 → 0.21.1

package/dist/chat/ui/intelligent-ui/use-ui-queries.js

@@ -0,0 +1,272 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { uiInputValues, UI_CATALOG_VERSION, UI_HOST_LIMITS, UiState } from '@adecore/intelligent-ui';
+import { chatHost } from '../../../host.js';
+const NO_READINGS = {};
+// A changed input reads once it has rested this long, so dragging a slider reads its last value only.
+const INPUT_SETTLE_MS = 300;
+/* The reading that holds for these inputs: this view's own read of them, or the frozen first one for the inputs the block starts with. */
+function successfulReading(local, initial, identity, signature, defaultInputs) {
+    if (local?.identity === identity && local.successful?.inputs === signature) {
+        return local.successful.reading;
+    }
+    return signature === defaultInputs && initial?.state === 'fresh' ? initial : undefined;
+}
+function settleDeadline() {
+    return Date.now() + INPUT_SETTLE_MS;
+}
+function documentVisible() {
+    return document.visibilityState !== 'hidden';
+}
+export function useUiQueries(block, state, context, element, frozen) {
+    const [readings, setReadings] = useState({});
+    const [busyInput, setBusyInput] = useState(null);
+    const lastRead = useRef({ inputKey: '', 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 = useMemo(() => JSON.stringify(uiInputValues(block, new UiState(block))), [block]);
+    const initial = frozen && frozen.revision === block.revision ? frozen.readings : NO_READINGS;
+    const successfulFor = (name, signature) => successfulReading(readings[name], initial[name], identity, signature, defaultInputs);
+    const readsFor = (values) => {
+        const signature = JSON.stringify(values);
+        const reads = {};
+        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 Object.keys(block.queries)) {
+            const successful = successfulReading(readings[name], initial[name], identity, inputs, defaultInputs);
+            if (successful && JSON.stringify(scope[name]) !== JSON.stringify(successful.value)) {
+                state.setQuery(name, successful.value, block);
+            }
+        }
+    }, [state, block, readings, identity, inputs, defaultInputs, initial]);
+    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 = null;
+        // The first read of this block reads at once; a changed input waits until it rests.
+        const changed = lastRead.current.inputKey !== '' && lastRead.current.inputKey !== inputKey;
+        const settledAt = changed ? settleDeadline() : 0;
+        const refresh = async () => {
+            if (stopped || !visible || !documentVisible() || busy) {
+                return;
+            }
+            const wait = Math.max(settledAt - Date.now(), lastRead.current.inputKey === inputKey ? UI_HOST_LIMITS.refreshMilliseconds - (Date.now() - lastRead.current.at) : 0);
+            if (wait > 0) {
+                if (timer === null) {
+                    if (!visible || !documentVisible()) {
+                        return;
+                    }
+                    timer = setTimeout(() => {
+                        timer = null;
+                        void refresh();
+                    }, wait);
+                }
+                return;
+            }
+            busy = true;
+            lastRead.current = { inputKey, at: Date.now() };
+            setBusyInput(inputKey);
+            for (const name of Object.keys(block.queries).slice(0, UI_HOST_LIMITS.queries)) {
+                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(), code: 'unreadable', reason: error instanceof Error ? error.message : undefined },
+                            successful: previous[name]?.identity === identity ? previous[name].successful : undefined
+                        }
+                    }));
+                }
+            }
+            busy = false;
+            if (stopped) {
+                return;
+            }
+            setBusyInput(null);
+            timer = setTimeout(() => {
+                timer = null;
+                void refresh();
+            }, UI_HOST_LIMITS.refreshMilliseconds);
+        };
+        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;
+            // A read cut short by this cleanup never reaches its own reset, which would leave the choices closed.
+            setBusyInput((current) => (current === inputKey ? null : current));
+            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 = 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((at, value) => (at === null ? value.readAt : Math.min(at, value.readAt)), null),
+            source: failed ? block.queries[failed[0]]?.source : undefined,
+            reason: failed?.[1].reason,
+            code: failed?.[1].code
+        }
+        : undefined;
+    return { live, reads: reads ?? {}, reading, ready, readsFor, currentReadings };
+}
+export function useUiLiveValues(block, nodes, readings) {
+    const [committed, setCommitted] = useState({
+        token: '',
+        values: new Map(),
+        previous: new Map()
+    });
+    const dependencies = new Map();
+    const names = new Set(Object.keys(block.queries));
+    const references = (value, into) => {
+        if (!value || typeof value !== 'object') {
+            return;
+        }
+        const expression = value;
+        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, inherited = new Set()) => {
+        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();
+    const sources = new Map();
+    const collect = (nodes) => {
+        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, prop, path) => {
+        const related = sources.get(id);
+        if (!related) {
+            return undefined;
+        }
+        const get = (props) => {
+            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/dist/chat/ui/reply-context.d.ts

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

package/dist/chat/ui/reply-context.js

@@ -1,2 +1,3 @@
 import { createContext } from 'react';
 export const ReplyContext = createContext(null);
+export const UiReplyNavigationContext = createContext(null);

package/dist/chat/ui/rows/GeneratedImageRow.d.ts

@@ -0,0 +1,5 @@
+import type { ChatToolItem } from '@adecore/agent-contracts';
+export declare function GeneratedImageRow({ chatId, tool: derived }: {
+    chatId: string;
+    tool: ChatToolItem;
+}): import("react").JSX.Element;

package/dist/chat/ui/rows/GeneratedImageRow.js

@@ -0,0 +1,121 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { Trans, useTranslation } from 'react-i18next';
+import { Check, Copy, Ellipsis, ExternalLink, FolderDown, ImageIcon, Maximize2 } from 'lucide-react';
+import { Button, ButtonGroup, copyText, ErrorBoundary, FileIcon, Icon, IconButton, Menu, Surface } from '@adecore/ui';
+import { chatHost } from '../../../host.js';
+import { useChatScope } from '../../../scope.js';
+import { useCurrentItem } from '../../../state/chats.js';
+import { formatBytes } from '../../attachments.js';
+import { attachmentAspect, generatedImageView } from '../../logic/generated-image.js';
+import { toolStartedAt } from '../../logic/tools.js';
+import { CHIP_IN_MESSAGE, MENTION_TONE } from '../chips.js';
+import { openFileLink, useFileLinkCwd } from '../file-links.js';
+import { ImageThumb } from '../ImageView.js';
+import { ROW_GUTTER } from '../icons.js';
+import { RunningFor, WorkRow } from './WorkRows.js';
+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();
+/* True for `ms` after `start()`, for a check mark that says an action landed. */
+function useFlash(ms) {
+    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, t) {
+    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 }) {
+    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-muted", children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: _jsx(Icon, { icon: ImageIcon, size: 12 }) }), _jsx("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: label }), detail && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: detail }), _jsx("span", { className: "grow" }), startedAt !== undefined && _jsx(RunningFor, { startedAt: startedAt })] }));
+}
+/* The file a saved image became, which opens where the app opens a file link. */
+function SavedFile({ path }) {
+    const cwd = useFileLinkCwd();
+    const { id } = useChatScope();
+    const chip = (_jsxs(_Fragment, { children: [_jsx(FileIcon, { path: path, size: 14 }), _jsx("span", { className: "truncate", children: path })] }));
+    if (chatHost().fileLinks === null) {
+        return _jsx("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE), children: chip });
+    }
+    return (_jsx("button", { type: "button", className: clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'hover:brightness-95'), "data-file-path": path, onClick: () => openFileLink(cwd, { path, directory: false }, id), children: chip }));
+}
+function ReadyImage({ chatId, attachment, prompt, transparent }) {
+    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 () => {
+            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 = (_jsxs(_Fragment, { children: [openFile !== undefined && _jsx(IconButton, { icon: ExternalLink, size: "sm", label: t('generatedImage.open'), onClick: openFile }), save !== undefined && _jsx(IconButton, { icon: FolderDown, size: "sm", label: t('generatedImage.save'), disabled: saving, onClick: () => void save() })] }));
+    return (_jsxs("div", { children: [_jsx(HeadLine, { label: t('generatedImage.label'), detail: detail }), _jsxs("div", { className: "flex max-w-90 flex-col gap-1.5", children: [_jsxs("div", { className: clsx('group/image relative', aspect === undefined && 'w-fit', transparent && source.url !== null && 'chat-checkerboard rounded-lg'), children: [_jsx(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 && (_jsx(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", children: _jsxs(ButtonGroup, { children: [_jsx(IconButton, { icon: Maximize2, size: "sm", label: t('generatedImage.openLarge'), onClick: () => setLightbox(true) }), prompt !== null && (_jsxs(Menu.Root, { children: [_jsx(IconButton, { icon: Ellipsis, size: "sm", label: t('generatedImage.more'), render: _jsx(Menu.Trigger, {}) }), _jsx(Menu.Popup, { align: "end", children: _jsxs(Menu.Item, { onClick: () => copyText(prompt), children: [_jsx(Icon, { icon: Copy, size: 14 }), " ", t('generatedImage.copyPrompt')] }) })] }))] }) }))] }), (openFile !== undefined || save !== undefined) && (_jsxs("div", { className: "flex items-center gap-1.5", children: [openFile !== undefined && (_jsx(Button, { size: "xs", variant: "secondary", disabled: missing, onClick: openFile, children: t('generatedImage.open') })), save !== undefined && (_jsx(Button, { size: "xs", variant: "secondary", disabled: missing || saving || savedFlash, onClick: () => void save(), children: savedFlash ? (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: Check, size: 12 }), " ", t('generatedImage.saved')] })) : (t('generatedImage.save')) }))] })), savedPath !== null && !savedFlash && (_jsx("div", { className: "flex min-w-0 items-center gap-1.5 text-xs text-text-muted", children: _jsx(Trans, { t: t, i18nKey: "generatedImage.savedTo", values: { path: savedPath }, components: { file: _jsx(SavedFile, { path: savedPath }) } }) }))] })] }));
+}
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-chat');
+    const tool = useCurrentItem(chatId, derived);
+    const view = generatedImageView(tool);
+    switch (view.state) {
+        case 'generating':
+            return _jsx(HeadLine, { label: t('generatedImage.generating'), live: true, startedAt: toolStartedAt(tool) });
+        case 'failed':
+            return (_jsx(WorkRow, { tool: tool, icon: _jsx(Icon, { icon: ImageIcon, size: 12 }), label: t('generatedImage.failed'), detail: failureText(view.failure, t) ?? '', failed: true }));
+        case 'ready':
+            return (_jsx(ErrorBoundary, { label: t('generatedImage.renderFailed'), resetKeys: [view.attachment], compact: true, className: "relative rounded-lg", children: _jsx(ReadyImage, { chatId: chatId, attachment: view.attachment, prompt: view.prompt, transparent: view.transparent }) }));
+    }
+}

package/dist/chat/ui/rows/MessageRows.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useContext, useMemo, useState } 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 { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, Reply, TriangleAlert, X } from 'lucide-react';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments.js';
 import { useChatRow, useCurrentItem } from '../../../state/chats.js';
 import { chatHost } from '../../../host.js';
@@ -15,12 +15,13 @@ import { FadingWords } from '../FadingWords.js';
 import { settledBlocksText } from '../markdown-blocks.js';
 import { WHOLE_FADE_CLASS } from '../rehype-fade.js';
 import { useRevealedText } from '../reveal.js';
-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.js';
 import { ROW_GUTTER } from '../icons.js';
 import { useOpenForFind } from '../find-reveal.js';
-import { ReplyContext } from '../reply-context.js';
+import { ReplyContext, UiReplyNavigationContext } from '../reply-context.js';
+import { UiReply } from '../intelligent-ui/UiReply.js';
 // A long prompt folds so the answer stays in view; the reader can open it.
 const USER_FOLD_LINES = 8;
 const USER_FOLD_CHARS = 600;
@@ -55,7 +56,20 @@ export function UserRow({ chatId, item }) {
     const attachments = item.attachments ?? [];
     const chats = item.chats ?? [];
     useOpenForFind(item.id, 'text', setOpen);
-    return (_jsxs("div", { "data-find-item": item.id, className: "flex flex-col items-end", children: [_jsx(MessageHeading, { children: t('rows.user.heading') }), attachments.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: attachments.map((attachment) => isImageAttachment(attachment.mime) ? (_jsx(AttachmentThumb, { chatId: chatId, attachment: attachment }, attachment.id)) : (_jsx(AttachmentLink, { chatId: chatId, attachment: attachment }, attachment.id))) })), chats.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id }, id))) })), item.text !== '' && (_jsxs("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", children: [_jsx("div", { "data-find-field": "text", className: clsx(long && !open && FOLD), children: _jsx(MessageMarkdown, { text: item.text, mentions: item.mentions, skills: item.skills }) }), long && (_jsxs("button", { className: "mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text", onClick: () => setOpen((o) => !o), children: [_jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') }), ' ', open ? t('rows.user.showLess') : t('rows.user.showAll')] }))] }))] }));
+    return (_jsxs("div", { "data-find-item": item.id, className: "flex flex-col items-end", children: [_jsx(MessageHeading, { children: t('rows.user.heading') }), attachments.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: attachments.map((attachment) => isImageAttachment(attachment.mime) ? (_jsx(AttachmentThumb, { chatId: chatId, attachment: attachment }, attachment.id)) : (_jsx(AttachmentLink, { chatId: chatId, attachment: attachment }, attachment.id))) })), chats.length > 0 && (_jsx("div", { className: "mb-1.5 flex max-w-[80%] flex-wrap justify-end gap-1.5", children: chats.map((id) => (_jsx(ChatReferenceChip, { chatId: id }, id))) })), item.uiChoice !== undefined && _jsx(ChoiceLine, { chatId: chatId, choice: item.uiChoice }), item.text !== '' && (_jsxs("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", children: [_jsx("div", { "data-find-field": "text", className: clsx(long && !open && FOLD), children: _jsx(MessageMarkdown, { text: item.text, mentions: item.mentions, skills: item.skills }) }), long && (_jsxs("button", { className: "mt-1 flex items-center gap-1 text-xs text-text-muted hover:text-text", onClick: () => setOpen((o) => !o), children: [_jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') }), ' ', open ? t('rows.user.showLess') : t('rows.user.showAll')] }))] }))] }));
+}
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-chat');
+    const inherited = useContext(UiReplyNavigationContext);
+    const navigation = inherited?.chatId === chatId ? inherited : null;
+    const Tag = navigation ? 'button' : 'div';
+    return (_jsxs(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'), children: [_jsx(Icon, { icon: Reply, size: 12, className: "mt-1 shrink-0" }), _jsx("span", { className: "min-w-0 wrap-anywhere", children: choice.older
+                    ? t('blocks.choseOlder', { label: choice.label, time: formatMoment(choice.sourceAt) })
+                    : t('blocks.chose', { label: choice.label }) })] }));
 }
 /*
  * Who wrote a message, for a screen reader only: one heading per message is what lets VoiceOver's
@@ -114,6 +128,9 @@ export function AssistantRow({ chatId, item: derived }) {
     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 (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(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' } }) })] }));
+    }
     if (mode === 'blocks') {
         const settled = item.streaming ? settledBlocksText(item.text) : item.text;
         return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), settled !== '' && (_jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: settled, streaming: false, arriving: sawWriting, reply: reply }) })), item.streaming && _jsx(Writing, {})] }));

package/dist/chat/ui/rows/Rows.js

@@ -2,7 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { ErrorBoundary } from '@adecore/ui';
 import { AgentTurnRow, ApprovalHistoryRow, AssistantRow, CompactionRow, NoteRow, QuestionHistoryRow, ReportRow, ThinkingRow, UserRow } from './MessageRows.js';
+import { isImageGeneration } from '../../logic/generated-image.js';
 import { ForksRow } from './ForksRow.js';
+import { GeneratedImageRow } from './GeneratedImageRow.js';
 import { SubagentBranchRow } from './SubagentRow.js';
 import { VisualRow } from './VisualRow.js';
 import { WorkflowRow } from './WorkflowRow.js';
@@ -31,9 +33,9 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
         case 'thinking':
             return _jsx(ThinkingRow, { chatId: chatId, item: row.item });
         case 'work':
-            return _jsx(WorkRow, { tool: row.tool });
+            return isImageGeneration(row.tool) ? _jsx(GeneratedImageRow, { chatId: chatId, tool: row.tool }) : _jsx(WorkRow, { tool: row.tool });
         case 'work-live':
-            return _jsx(WorkLiveRow, { chatId: chatId, tool: row.tool });
+            return isImageGeneration(row.tool) ? _jsx(GeneratedImageRow, { chatId: chatId, tool: row.tool }) : _jsx(WorkLiveRow, { chatId: chatId, tool: row.tool });
         case 'workflow':
             return _jsx(WorkflowRow, { chatId: chatId, tool: row.tool, workflow: row.workflow, onOpenAgent: openConversation });
         case 'work-group':

package/dist/chat/ui/rows/SubagentRow.js

@@ -8,6 +8,8 @@ import { Icon, useNow } from '@adecore/ui';
 import { useOpenForFind } from '../find-reveal.js';
 import { Markdown } from '../Markdown.js';
 import { TaskRow } from './TaskRow.js';
+import { isImageGeneration } from '../../logic/generated-image.js';
+import { GeneratedImageRow } from './GeneratedImageRow.js';
 import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows.js';
 import { entryTimeOf, statusWordOf, taskIdOf } from '../../subagent-list.js';
 import { useSubagentSupport } from '../../subagent-support.js';
@@ -24,6 +26,9 @@ const CHILDREN_MAX_PX = 320;
  */
 function ChildRow({ chatId, item }) {
     if (item.kind === 'tool') {
+        if (isImageGeneration(item)) {
+            return _jsx(GeneratedImageRow, { chatId: chatId, tool: item });
+        }
         return item.state === 'running' ? _jsx(WorkLiveRow, { chatId: chatId, tool: item }) : _jsx(WorkRow, { tool: item });
     }
     if (item.kind === 'assistant') {

package/dist/chat/ui/rows/WorkRows.d.ts

@@ -10,10 +10,13 @@ export declare function ToggleLine({ icon, label, detail, open, onToggle, failed
     trailing?: React.ReactNode;
     className?: string;
 }): import("react").JSX.Element;
-export declare function WorkRow({ tool, nested, detail }: {
+export declare function WorkRow({ tool, nested, detail, icon, label, failed }: {
     tool: ChatToolItem;
     nested?: boolean;
     detail?: string;
+    icon?: React.ReactNode;
+    label?: string;
+    failed?: boolean;
 }): import("react").JSX.Element;
 export declare function RunningFor({ startedAt }: {
     startedAt: number;

package/dist/chat/ui/rows/WorkRows.js

@@ -37,13 +37,14 @@ function ToolBody({ tool }) {
     return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("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'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
 }
 /* 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 }) {
+   is drawn under the line, because a picture says more about that read than its path does.
+   `icon`, `label` and `failed` let a row that knows the call better name it in its own words. */
+export function WorkRow({ tool, nested, detail, icon, label, failed }) {
     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 (_jsxs("div", { "data-find-item": tool.id, className: nested ? 'ml-6' : undefined, children: [_jsx(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 && _jsx(ReadImage, { path: image }), open && _jsx(ToolBody, { tool: tool })] }));
+    return (_jsxs("div", { "data-find-item": tool.id, className: nested ? 'ml-6' : undefined, children: [_jsx(ToggleLine, { icon: icon ?? toolIcon(tool.name), label: label ?? tool.name, detail: detail ?? toolSummary(tool.name, tool.input), open: open, onToggle: () => setOpen((o) => !o), failed: failed ?? tool.state === 'error' }), image !== null && ReadImage !== null && _jsx(ReadImage, { path: image }), open && _jsx(ToolBody, { tool: tool })] }));
 }
 /* "running for 12s" next to a live call. */
 export function RunningFor({ startedAt }) {

package/dist/host.d.ts

@@ -2,7 +2,7 @@ import type { ComponentProps, ComponentType, ReactNode, RefObject } from 'react'
 import type { Extension } from '@codemirror/state';
 import type { EditorView } from '@codemirror/view';
 import type { ThemeRegistration } from 'shiki';
-import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatItem, ChatSubagentItem } from '@adecore/agent-contracts';
+import type { AgentKind, ChatCheckpointDiff, ChatConfigurePayload, ChatItem, ChatSubagentItem, ChatUiChoicePayload, ChatUiQueryPayload, ChatUiQueryReading, ChatUiLinkPayload, ChatUiLinkReading } from '@adecore/agent-contracts';
 import type { TimelineRow } from './chat/logic/timeline.js';
 import type { FindReveal } from './chat/ui/find-reveal.js';
 import type { PromptAction } from './prompts/logic/prompts.js';
@@ -126,6 +126,14 @@ export interface ReplyAuthor {
 }
 export interface ChatHost {
     storage?: ChatStorageOptions;
+    intelligentUi?: {
+        subscribe?(scopeId: string, chatId: string, changed: () => void): () => void;
+        link?(scopeId: string, payload: ChatUiLinkPayload): Promise<ChatUiLinkReading>;
+        openLink?(scopeId: string, reading: ChatUiLinkReading): void;
+        openUrl?(scopeId: string, url: string): void;
+        query?(scopeId: string, payload: ChatUiQueryPayload): Promise<ChatUiQueryReading>;
+        sendChoice(scopeId: string, payload: ChatUiChoicePayload): Promise<'sent' | 'queued'>;
+    };
     accents: {
         all: readonly AccentChoice[];
         featured: readonly string[];
@@ -140,6 +148,8 @@ export interface ChatHost {
     attachments: {
         useUrl(scopeId: string, chatId: string, attachmentId: string): ResourceUrl;
         read(scopeId: string, chatId: string, attachmentId: string): Promise<Blob>;
+        open?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): void;
+        saveToProject?(scopeId: string, chatId: string, attachmentId: string, suggestedName: string): Promise<string | null>;
     };
     ReadImage: ComponentType<{
         path: string;