@adecore/agents-react 0.20.0 → 0.21.0

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

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
+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
@@ -107,18 +121,24 @@ function Writing() {
  */
 export function AssistantRow({ chatId, item: derived }) {
     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 (_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', answer: null } }) })] }));
+    }
     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 }) })), item.streaming && _jsx(Writing, {})] }));
+        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, {})] }));
     }
     if (mode === 'whole' && item.streaming) {
         return (_jsxs("div", { className: "-mx-1 px-1 pb-2", children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx(Writing, {})] }));
     }
-    return (_jsxs("div", { "data-find-item": item.id, className: clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS), children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: reveal.text, streaming: reveal.active }) }), live && item.text === '' && _jsx("span", { className: "inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" })] }));
+    return (_jsxs("div", { "data-find-item": item.id, className: clsx('-mx-1 px-1 pb-2', mode === 'whole' && sawWriting && WHOLE_FADE_CLASS), children: [_jsx(ReplyHeading, { chatId: chatId }), _jsx("div", { "data-find-field": "text", "data-quote-answer": true, className: "contents", children: _jsx(ReplyMarkdown, { text: reveal.text, streaming: reveal.active, reply: reply }) }), live && item.text === '' && _jsx("span", { className: "inline-block h-3.5 w-1.5 animate-pulse rounded-sm bg-text-faint align-middle" })] }));
 }
 /*
  * What the model thought before it answered. It shimmers while it streams and folds itself away

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';
@@ -40,8 +40,18 @@ export interface ChatActions {
 export interface FileRef {
     path: string;
     line?: number;
+    column?: number;
+    endLine?: number;
     directory: boolean;
 }
+export interface ShellCodeBlockContext {
+    scopeId: string;
+    chatId: string;
+    itemId: string;
+    language: 'sh' | 'bash' | 'zsh';
+    code: string;
+    complete: boolean;
+}
 export interface ChatPlace {
     title: string | null;
     go(): void;
@@ -116,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[];
@@ -130,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;
@@ -145,10 +165,12 @@ export interface ChatHost {
         }>;
     };
     useStreaming(): 'words' | 'blocks' | 'whole';
+    useSendDelivery(): 'queue' | 'steer';
     fileLinks: {
-        target(text: string, cwd: string | null): FileRef | null;
-        open(cwd: string | null, ref: FileRef): void;
+        target(text: string, cwd: string | null, scopeId?: string | null): FileRef | null;
+        open(cwd: string | null, ref: FileRef, scopeId?: string | null): void;
     } | null;
+    renderShellCodeBlock?: (context: ShellCodeBlockContext) => ReactNode;
     useTimelineFind(options: TimelineFindOptions): TimelineFind;
     dictation: {
         Textarea: ComponentType<TextareaProps>;

package/dist/host.js

@@ -20,6 +20,7 @@ const DEFAULT_HOST = {
     ReadImage: null,
     code: { useMode: () => 'light', useThemes: () => ({ light: 'github-light', dark: 'github-dark' }), custom: [] },
     useStreaming: () => 'words',
+    useSendDelivery: () => 'queue',
     fileLinks: null,
     useTimelineFind: () => NO_FIND,
     dictation: { Textarea: PlainTextarea, composer: null },

package/dist/locales/en/agent-chat.json

@@ -307,7 +307,9 @@
       "description": "A turn is running. Stop it and clear the thread?",
       "confirm": "Stop and clear"
     },
-    "waitingBelow": "Waiting for your answer below"
+    "waitingBelow": "Waiting for your answer below",
+    "steerButton": "Send to the running agent. Hold Option or Alt to queue after this turn.",
+    "queueWithSteerButton": "Queue after this turn. Hold Option or Alt to send to the running agent."
   },
   "activity": {
     "subagents_one": "{{count}} sub-agent",
@@ -433,6 +435,25 @@
     "zoomOut": "Zoom out",
     "reset": "Reset"
   },
+  "generatedImage": {
+    "label": "Generated image",
+    "generating": "Generating image",
+    "failed": "Image generation failed",
+    "empty": "The image came back empty",
+    "notImage": "The result is not an image",
+    "tooLarge": "The image is larger than {{size}}",
+    "dimensions": "{{width}} × {{height}}",
+    "transparent": "transparent",
+    "actions": "Image actions",
+    "more": "More actions",
+    "copyPrompt": "Copy prompt",
+    "open": "Open",
+    "openLarge": "Open large",
+    "save": "Save to project…",
+    "saved": "Saved",
+    "savedTo": "Saved to <file>{{path}}</file>",
+    "renderFailed": "This image failed to render"
+  },
   "account": {
     "pill": "{{provider}} account {{account}}"
   },
@@ -454,5 +475,72 @@
       "failed": "failed",
       "cancelled": "cancelled"
     }
+  },
+  "code": {
+    "actions": "Code actions",
+    "copyFailed": "Could not copy the code. Try again."
+  },
+  "blocks": {
+    "label": "Interactive block",
+    "progress": {
+      "label": "Progress",
+      "of": "{{value}} of {{max}}"
+    },
+    "step": {
+      "done": "Done",
+      "running": "Running",
+      "pending": "Waiting",
+      "failed": "Failed",
+      "skipped": "Skipped"
+    },
+    "stat": {
+      "change": "{{change}} from {{previous}}",
+      "from": "from {{previous}}"
+    },
+    "table": {
+      "showAll": "Show all {{total}} rows"
+    },
+    "chart": {
+      "values": "Values",
+      "summary": "{{count}} values, highest {{label}} at {{value}}",
+      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}"
+    },
+    "image": {
+      "label": "Image",
+      "unavailable": "The image is not available"
+    },
+    "sources": "Sources",
+    "citation": "Source {{number}}: {{title}}",
+    "outsideProject": "Outside the project, shown as text",
+    "options": "Options",
+    "choices": "Choices",
+    "choice": {
+      "waiting": "Available when the reply is done",
+      "unavailable": "Not available",
+      "sent": "Sent",
+      "queued": "Queued",
+      "failed": "Could not send. Try again.",
+      "ready": "Choices are ready"
+    },
+    "answered": "Answered with “{{label}}”",
+    "chose": "Chose “{{label}}”",
+    "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
+    "sendContext": "Send",
+    "copyText": "Copy text",
+    "fixes_one": "{{count}} fix",
+    "fixes_other": "{{count}} fixes",
+    "shownAsText": "Shown as text",
+    "unknownComponent": "This version cannot draw {{component}}",
+    "renderFailed": "Could not draw this part",
+    "tooLarge": "The block is too large to draw",
+    "unreadable": "The block could not be read",
+    "live": {
+      "label": "Live",
+      "read": "read {{time}}",
+      "sources": "Reads {{sources}}",
+      "failed": "Could not read {{source}}",
+      "refused": "Not allowed to read {{source}}",
+      "notRead": "Not read"
+    }
   }
 }

package/dist/locales/nl/agent-chat.json

@@ -307,7 +307,9 @@
       "description": "Er loopt een turn. Die stoppen en de thread wissen?",
       "confirm": "Stoppen en wissen"
     },
-    "waitingBelow": "Wacht hieronder op je antwoord"
+    "waitingBelow": "Wacht hieronder op je antwoord",
+    "steerButton": "Stuur naar de werkende agent. Houd Option of Alt ingedrukt om te wachten tot deze beurt klaar is.",
+    "queueWithSteerButton": "Wacht tot deze beurt klaar is. Houd Option of Alt ingedrukt om naar de werkende agent te sturen."
   },
   "activity": {
     "subagents_one": "{{count}} sub-agent",
@@ -433,6 +435,25 @@
     "zoomOut": "Uitzoomen",
     "reset": "Herstellen"
   },
+  "generatedImage": {
+    "label": "Gegenereerde afbeelding",
+    "generating": "Afbeelding wordt gemaakt",
+    "failed": "Afbeelding maken mislukt",
+    "empty": "De afbeelding kwam leeg terug",
+    "notImage": "Het resultaat is geen afbeelding",
+    "tooLarge": "De afbeelding is groter dan {{size}}",
+    "dimensions": "{{width}} × {{height}}",
+    "transparent": "transparant",
+    "actions": "Acties voor de afbeelding",
+    "more": "Meer acties",
+    "copyPrompt": "Prompt kopiëren",
+    "open": "Openen",
+    "openLarge": "Groot openen",
+    "save": "Opslaan in project…",
+    "saved": "Opgeslagen",
+    "savedTo": "Opgeslagen in <file>{{path}}</file>",
+    "renderFailed": "Deze afbeelding kon niet worden getoond"
+  },
   "account": {
     "pill": "{{provider}}-account {{account}}"
   },
@@ -454,5 +475,72 @@
       "failed": "mislukt",
       "cancelled": "geannuleerd"
     }
+  },
+  "code": {
+    "actions": "Codeacties",
+    "copyFailed": "De code kon niet worden gekopieerd. Probeer het opnieuw."
+  },
+  "blocks": {
+    "label": "Interactief blok",
+    "progress": {
+      "label": "Voortgang",
+      "of": "{{value}} van {{max}}"
+    },
+    "step": {
+      "done": "Klaar",
+      "running": "Bezig",
+      "pending": "Wacht",
+      "failed": "Mislukt",
+      "skipped": "Overgeslagen"
+    },
+    "stat": {
+      "change": "{{change}} vanaf {{previous}}",
+      "from": "vanaf {{previous}}"
+    },
+    "table": {
+      "showAll": "Alle {{total}} rijen tonen"
+    },
+    "chart": {
+      "values": "Waarden",
+      "summary": "{{count}} waarden, hoogste {{label}} met {{value}}",
+      "summarySeries": "{{count}} categorieën, hoogste {{series}} bij {{label}} met {{value}}"
+    },
+    "image": {
+      "label": "Afbeelding",
+      "unavailable": "De afbeelding is niet beschikbaar"
+    },
+    "sources": "Bronnen",
+    "citation": "Bron {{number}}: {{title}}",
+    "outsideProject": "Buiten het project, als tekst getoond",
+    "options": "Opties",
+    "choices": "Keuzes",
+    "choice": {
+      "waiting": "Beschikbaar zodra het antwoord klaar is",
+      "unavailable": "Niet beschikbaar",
+      "sent": "Verstuurd",
+      "queued": "In de wachtrij",
+      "failed": "Versturen lukte niet. Probeer het opnieuw.",
+      "ready": "De keuzes staan klaar"
+    },
+    "answered": "Beantwoord met “{{label}}”",
+    "chose": "Gekozen: “{{label}}”",
+    "choseOlder": "Gekozen: “{{label}}”, bij het antwoord van {{time}}",
+    "sendContext": "Versturen",
+    "copyText": "Tekst kopiëren",
+    "fixes_one": "{{count}} correctie",
+    "fixes_other": "{{count}} correcties",
+    "shownAsText": "Als tekst getoond",
+    "unknownComponent": "Deze versie kan {{component}} niet tekenen",
+    "renderFailed": "Dit deel kon niet getekend worden",
+    "tooLarge": "Het blok is te groot om te tekenen",
+    "unreadable": "Het blok kon niet gelezen worden",
+    "live": {
+      "label": "Live",
+      "read": "gelezen {{time}}",
+      "sources": "Leest {{sources}}",
+      "failed": "{{source}} lezen lukte niet",
+      "refused": "Geen toegang tot {{source}}",
+      "notRead": "Niet gelezen"
+    }
   }
 }

package/dist/state/chats.js

@@ -79,6 +79,15 @@ export function applyEvent(state, event) {
         }
         case 'delta': {
             const item = state.items[event.itemId];
+            if (event.uiQueries && item?.kind === 'assistant') {
+                return { ...state, items: { ...state.items, [event.itemId]: { ...item, uiQueries: event.uiQueries } } };
+            }
+            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 state;
+            }
             if (item?.kind === 'assistant' || item?.kind === 'thinking') {
                 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.