@adecore/agents-react 0.21.1 → 0.22.0

package/dist/chat/ui/UnifiedDiff.js

@@ -6,9 +6,8 @@ import { chatHost } from '../../host.js';
 import { useDiffTheme } from './diff-theme.js';
 import { fullFileDiff } from './full-diff.js';
 /*
- * A patch the CLI reported itself (Codex writes unified diffs). The renderer needs a file header
- * to know what it is looking at, and a CLI that only sends hunks gets one from the path we know.
- * A diff without hunks at all is shown as its own lines, so nothing is ever swallowed.
+ * A patch the CLI reported itself. The renderer needs a file header, which a CLI that only sends hunks
+ * gets from the path we know; a diff without hunks is shown as its own lines, so nothing is swallowed.
  */
 function asPatch(change) {
     if (!/^@@/m.test(change.diff)) {
@@ -21,8 +20,7 @@ function asPatch(change) {
     const to = change.kind === 'delete' ? '/dev/null' : `b/${change.path}`;
     return `--- ${from}\n+++ ${to}\n${change.diff}`;
 }
-/* Lets a diff with a view of its own run to the bottom of it, so the scrollbar of a short one sits
-   there instead of under its last line; the lines themselves keep their height. */
+/* Lets a diff with a view of its own run to its bottom, so a short one's scrollbar sits there and not under its last line. */
 const FILL_CSS = `
 :host { display: flex; flex-direction: column; flex-grow: 1; }
 pre { flex-grow: 1; align-content: start; }

package/dist/chat/ui/VisualFrame.js

@@ -19,10 +19,9 @@ function personActsIn(frame) {
     return frame.ownerDocument.activeElement === frame && navigator.userActivation?.isActive !== false;
 }
 /*
- * One visual's page in a frame on the thread's own ground. The frame loads the app's sandbox host
- * page and the bridge hands it the page and the theme. The frame never gets `allow-same-origin`,
- * which keeps the page on an opaque origin even when the host page is served on the app's own. Its
- * box keeps one height while the page loads and when it fails, so nothing under it moves.
+ * One visual's page in a frame that loads the app's sandbox host page; the bridge hands it the page and
+ * the theme. The frame never gets `allow-same-origin`, which keeps the page on an opaque origin even
+ * when the host page is served on the app's own. Its box keeps one height while it loads or fails.
  */
 export function VisualFrame({ chatId, visual, fill = false, className }) {
     const { t } = useTranslation('agent-chat');

package/dist/chat/ui/composer/keys.js

@@ -30,24 +30,32 @@ export function enterAction(keys, { inOpenFence, list, column }) {
     }
     return list.empty ? 'leave-list' : 'continue-list';
 }
-/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
-export function inOpenFence(tree, pos) {
+/* The innermost fenced code block around `pos`, if any. */
+function enclosingFence(tree, pos) {
     for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && node.getChildren('CodeMark').length < 2;
+            return node;
         }
     }
-    return false;
+    return null;
+}
+/* A fence nobody has closed yet has its opening mark only. */
+function isOpenFence(fence) {
+    return fence.getChildren('CodeMark').length < 2;
+}
+/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
+export function inOpenFence(tree, pos) {
+    const fence = enclosingFence(tree, pos);
+    return fence !== null && pos > fence.from && isOpenFence(fence);
 }
 /* Whether `pos` sits in the body of a fenced code block, open or closed: below its opening line and before its end. */
 export function inFenceBody(tree, text, pos) {
-    for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
-        if (node.name === 'FencedCode') {
-            const openingEnd = text.indexOf('\n', node.from);
-            return openingEnd !== -1 && pos > openingEnd && (pos < node.to || node.getChildren('CodeMark').length < 2);
-        }
+    const fence = enclosingFence(tree, pos);
+    if (fence === null) {
+        return false;
     }
-    return false;
+    const openingEnd = text.indexOf('\n', fence.from);
+    return openingEnd !== -1 && pos > openingEnd && (pos < fence.to || isOpenFence(fence));
 }
 /* The spaces Tab inserts at `column`, up to the next stop of four, the way a code editor lines up. */
 export function tabSpaces(column) {
@@ -63,7 +71,7 @@ export function inCode(tree, text, pos) {
     let blockFrom = null;
     for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && (pos < node.to || node.getChildren('CodeMark').length < 2);
+            return pos > node.from && (pos < node.to || isOpenFence(node));
         }
         if (node.name === 'InlineCode' && pos > node.from && pos < node.to) {
             return true;

package/dist/chat/ui/composer/menu-aria.d.ts

@@ -0,0 +1,10 @@
+export interface ComposerMenuAriaInput {
+    label: string;
+    listId: string;
+    open: boolean;
+    activeIndex: number;
+    count: number;
+}
+export declare function clampMenuIndex(index: number, count: number): number;
+export declare function optionIdOf(listId: string, index: number): string;
+export declare function composerMenuAria({ label, listId, open, activeIndex, count }: ComposerMenuAriaInput): Record<string, string>;

package/dist/chat/ui/composer/menu-aria.js

@@ -0,0 +1,18 @@
+/* The index that still points at an option once the list has shrunk under a stale one. */
+export function clampMenuIndex(index, count) {
+    return Math.min(index, Math.max(count - 1, 0));
+}
+export function optionIdOf(listId, index) {
+    return `${listId}-${index}`;
+}
+/*
+ * The attributes the editor's content element takes while a suggestion menu stands beside it. The
+ * element keeps its `textbox` role; ARIA 1.2 lets it name the option the arrow keys are on.
+ */
+export function composerMenuAria({ label, listId, open, activeIndex, count }) {
+    return {
+        'aria-label': label,
+        'aria-autocomplete': 'list',
+        ...(open && count > 0 ? { 'aria-controls': listId, 'aria-activedescendant': optionIdOf(listId, activeIndex) } : {})
+    };
+}

package/dist/chat/ui/intelligent-ui/render-context.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import type { UiComponentName, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-export type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 import type { UiLinkTarget } from '@adecore/intelligent-ui/links';
+export type { UiLinkTarget };
 export interface UiLink {
     state: 'chip' | 'plain';
     label?: string;

package/dist/chat/ui/quote-selection.d.ts

@@ -1,3 +1,6 @@
-export type QuoteTaker = (quote: string) => void;
+export type QuoteTaker = (quote: string, itemId: string | null) => void;
 export declare const QuoteTakerContext: import("react").Context<((take: QuoteTaker) => () => void) | null>;
-export declare function selectedAnswerQuote(selection: Selection | null, thread: HTMLElement | null): string | null;
+export declare function selectedAnswerQuote(selection: Selection | null, thread: HTMLElement | null): {
+    text: string;
+    itemId: string | null;
+} | null;

package/dist/chat/ui/quote-selection.js

@@ -28,7 +28,7 @@ function selectsOutside(range, answer) {
     }
     return false;
 }
-/* The quote the selection makes, when it lies in one answer of this thread. */
+/* The quote the selection makes, when it lies in one answer of this thread, and the reply it was taken from. */
 export function selectedAnswerQuote(selection, thread) {
     if (thread === null || selection === null || selection.isCollapsed || selection.rangeCount === 0) {
         return null;
@@ -42,5 +42,6 @@ export function selectedAnswerQuote(selection, thread) {
     if (!inside && selectsOutside(range, answer)) {
         return null;
     }
-    return quoteOf(selection.toString());
+    const text = quoteOf(selection.toString());
+    return text === null ? null : { text, itemId: answer.closest('[data-find-item]')?.getAttribute('data-find-item') ?? null };
 }

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

@@ -3,10 +3,13 @@ import { useContext, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Bot, Brain, Check, ChevronDown, CircleAlert, File, Info, MessageCircleQuestionMark, Reply, TriangleAlert, X } from 'lucide-react';
+import { WAITING_NOTE_PREFIX } from '@adecore/agent-contracts';
 import { fileBadge, formatBytes, isImageAttachment } from '../../attachments.js';
 import { useChatRow, useCurrentItem } from '../../../state/chats.js';
 import { chatHost } from '../../../host.js';
 import { useChatScope } from '../../../scope.js';
+import { splitQuote } from '../../quote.js';
+import { jumpToTimelineItem } from '../../timeline-scroll.js';
 import { useProviders } from '../../../state/providers.js';
 import { ChatReferenceChip } from '../ChatReferenceChip.js';
 import { ImageThumb } from '../ImageView.js';
@@ -55,8 +58,24 @@ export function UserRow({ chatId, item }) {
     const long = item.text.split('\n').length > USER_FOLD_LINES || item.text.length > USER_FOLD_CHARS;
     const attachments = item.attachments ?? [];
     const chats = item.chats ?? [];
+    const [missing, setMissing] = useState(false);
+    const { keyOf } = useChatScope();
     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.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')] }))] }))] }));
+    // A quote only leads somewhere when the message still opens with the blockquote it was sent with.
+    const quoted = item.quoteSource === undefined ? null : splitQuote(item.text);
+    const source = item.quoteSource?.itemId;
+    function goToSource() {
+        if (source !== undefined) {
+            setMissing(false);
+            jumpToTimelineItem(keyOf(chatId), source, { flash: true, onMissing: () => setMissing(true) });
+        }
+    }
+    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: quoted !== null && source !== undefined ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: t('composer.quote.goToSource'), children: _jsx("div", { role: "button", tabIndex: 0, className: "mb-2 cursor-pointer rounded-sm border-l-2 border-border-strong pl-2.5 text-text-muted hover:bg-text/5 hover:text-text focus-visible:outline-2 focus-visible:outline-accent", onClick: goToSource, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                goToSource();
+                                            }
+                                        }, children: _jsx(MessageMarkdown, { text: quoted.quote }) }) }), missing && _jsx("div", { className: "mb-2 text-xs text-text-faint", children: t('rows.user.quoteGone') }), quoted.rest !== '' && _jsx(MessageMarkdown, { text: quoted.rest, mentions: item.mentions, skills: item.skills })] })) : (_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
@@ -174,21 +193,20 @@ export function NoteRow({ id, level, text, from }) {
     const head = breakAt === -1 ? text : text.slice(0, breakAt);
     const rest = breakAt === -1 ? '' : text.slice(breakAt + 1).trim();
     useOpenForFind(id, 'output', setOpen);
-    return (_jsxs("div", { "data-find-item": id, className: clsx('-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs', level === 'error' ? 'text-status-error' : level === 'warning' ? 'text-status-needs-you' : 'text-text-faint'), children: [_jsx("span", { className: ROW_GUTTER, children: NOTE_ICON[level] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2", children: [_jsx("span", { "data-find-field": "summary", className: "select-text", children: head }), rest !== '' && (_jsx("button", { className: "text-text-muted hover:text-text", onClick: () => setOpen(!open), children: open ? t('rows.note.hide') : t('rows.note.show') })), from !== undefined && _jsx(OpenChatButton, { chatId: from })] }), open && rest !== '' && (_jsx("div", { "data-find-field": "output", className: "mt-1 text-text-muted select-text", children: _jsx(MessageMarkdown, { text: rest }) }))] })] }));
+    return (_jsxs("div", { "data-find-item": id, className: clsx('-mx-1 mb-0.5 flex min-h-7 items-start gap-2 px-1 py-1 text-xs', level === 'error' ? 'text-status-error' : level === 'warning' ? 'text-status-needs-you' : 'text-text-faint'), children: [_jsx("span", { className: ROW_GUTTER, children: NOTE_ICON[level] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2", children: [_jsx("span", { "data-find-field": "summary", className: "select-text", children: head }), rest !== '' && (_jsx("button", { className: "text-text-muted hover:text-text", onClick: () => setOpen(!open), children: open ? t('rows.note.hide') : t('rows.note.show') })), from !== undefined && _jsx(OpenChatButton, { chatId: from, label: id.startsWith(WAITING_NOTE_PREFIX) ? 'openWaiting' : 'openFork' })] }), open && rest !== '' && (_jsx("div", { "data-find-field": "output", className: "mt-1 text-text-muted select-text", children: _jsx(MessageMarkdown, { text: rest }) }))] })] }));
 }
-/* "Open fork" on a note a fork sent, while that fork is still in the project. */
-function OpenChatButton({ chatId }) {
+/* "Open fork" on a note a fork sent, or "Open to answer" on one about a waiting child, while that chat is still in the project. */
+function OpenChatButton({ chatId, label }) {
     const { t } = useTranslation('agent-chat');
     const place = chatHost().useChatPlace(chatId);
     if (place.title === null) {
         return null;
     }
-    return (_jsx("button", { className: "text-text-muted hover:text-text", onClick: place.go, children: t('rows.note.openFork') }));
+    return (_jsx("button", { className: "text-text-muted hover:text-text", onClick: place.go, children: t(`rows.note.${label}`) }));
 }
 /*
- * The header of a turn the agent started itself, in place of the message of the person that is
- * missing. It is one line: what the sub-agent came back with lives on that agent's own row, behind
- * "Show result". When the CLI named the sub-agent it woke up about, the header opens that row.
+ * The header of a turn the agent started itself, in place of a message of the person. What the
+ * sub-agent came back with lives on its own row, which the header opens when the CLI named it.
  */
 export function AgentTurnRow({ label, onOpen }) {
     const line = 'mb-0.5 flex h-7 w-full items-center gap-2 text-left text-xs text-text-muted';

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

@@ -47,7 +47,7 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
         case 'forks':
             return _jsx(ForksRow, { chatId: chatId, turnId: row.turnId });
         case 'changed-files':
-            return _jsx(ChangedFilesRow, { chatId: chatId, turnId: row.turnId, tools: row.tools, diff: row.diff, checkpoint: row.checkpoint });
+            return (_jsx(ChangedFilesRow, { chatId: chatId, turnId: row.turnId, tools: row.tools, diff: row.diff, checkpoint: row.checkpoint, baseMoved: row.baseMoved }));
         case 'approval':
             return _jsx(ApprovalHistoryRow, { item: row.item });
         case 'question':

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

@@ -1,20 +1,22 @@
+import { type ReactNode } from 'react';
 import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
+import type { BaseMoved } from '../../logic/timeline.js';
 export declare function ToggleLine({ icon, label, detail, open, onToggle, failed, live, trailing, className }: {
-    icon: React.ReactNode;
+    icon: ReactNode;
     label: string;
     detail?: string;
     open: boolean;
     onToggle(): void;
     failed?: boolean;
     live?: boolean;
-    trailing?: React.ReactNode;
+    trailing?: ReactNode;
     className?: string;
 }): import("react").JSX.Element;
 export declare function WorkRow({ tool, nested, detail, icon, label, failed }: {
     tool: ChatToolItem;
     nested?: boolean;
     detail?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     label?: string;
     failed?: boolean;
 }): import("react").JSX.Element;
@@ -38,10 +40,11 @@ export declare function TurnFoldRow({ turn, label, work, expanded, onToggle }: {
     expanded: boolean;
     onToggle(): void;
 }): import("react").JSX.Element;
-export declare function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }: {
+export declare function ChangedFilesRow({ tools, diff, checkpoint, baseMoved, chatId, turnId }: {
     tools: ChatToolItem[];
     diff: ChatCheckpointDiff | null;
     checkpoint: boolean;
+    baseMoved?: BaseMoved | undefined;
     chatId: string;
     turnId: string;
 }): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
@@ -30,15 +30,24 @@ export function ToggleLine({ icon, label, detail, open, onToggle, failed, live,
         // Fix the width so long commands reach the truncation inside the negative margins.
         '-mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover', failed && 'text-status-error', className), onClick: onToggle, children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsx("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: label }), detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: detail })), _jsx("span", { className: "grow" }), trailing, failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] }));
 }
-function ToolBody({ tool }) {
+/* The diff renderers load lazily, so a diff waits on them under a line that says so. */
+function DiffSuspense({ children }) {
     const { t } = useTranslation('agent-chat');
+    return _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: children });
+}
+/* A file in a changed files card, which opens its diff under it. */
+function ChangedFileLine({ path, open, onToggle, trailing, children }) {
+    return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": path, onClick: onToggle, children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: path }), _jsx("span", { className: "grow" }), trailing] }), open && _jsx("div", { className: "border-t border-border", children: children })] }));
+}
+function ToolBody({ tool }) {
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
-    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 }) }))] }));
+    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(DiffSuspense, { children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(DiffSuspense, { 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.
-   `icon`, `label` and `failed` let a row that knows the call better name it in its own words. */
+/*
+ * One settled tool call: a line, and its input and output behind it. An image the call looked at is
+ * drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
+ */
 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;
@@ -76,23 +85,22 @@ function omittedLabel(reason) {
 }
 /* One file of a turn's checkpoint diff: its patch, or the reason there is none. */
 function CheckpointFileBody({ file }) {
-    const { t } = useTranslation('agent-chat');
     if (file.omitted) {
         return _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: omittedLabel(file.omitted) });
     }
-    return (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(UnifiedDiff, { change: file }) }));
+    return (_jsx(DiffSuspense, { children: _jsx(UnifiedDiff, { change: file }) }));
 }
 /* The frame of a changed files card: a header that folds the list of files away. */
-function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, children }) {
+function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, baseMoved, children }) {
     const { t } = useTranslation('agent-chat');
     const [expanded, setExpanded] = useState(false);
-    // A jump from outside opens the card, also when the jump put the row on screen and so mounted it; the flash is gone by the time the row is scrolled to again.
+    // A jump opens the card, also one that mounted it by scrolling it on screen; the flash is gone by the next visit.
     const [seenReveal, setSeenReveal] = useState(0);
     if (revealNonce > 0 && revealNonce !== seenReveal) {
         setSeenReveal(revealNonce);
         setExpanded(true);
     }
-    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: t('work.changedFiles', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), expanded && children] }));
+    return (_jsxs("div", { className: "mb-3 overflow-hidden rounded-lg border border-border bg-surface-raised", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-text-muted hover:bg-surface-hover", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [_jsx(Icon, { icon: FileDiff, size: 12, className: "shrink-0" }), _jsx("span", { className: "shrink-0 font-medium text-text", children: baseMoved === undefined ? t('work.changedFiles', { count }) : t('work.folderChanges', { count }) }), truncated && _jsx("span", { className: "min-w-0 truncate text-text-faint", children: t('work.andMore') }), _jsx("span", { className: "grow" }), added !== undefined && _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", added] }), deleted !== undefined && _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", deleted] }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', expanded && 'rotate-90') })] }), baseMoved !== undefined && (_jsx("div", { className: "pr-3 pb-2 pl-8 text-xs text-text-faint", children: t('work.baseMoved', { from: baseMoved.from.slice(0, 7), to: baseMoved.to.slice(0, 7) }) })), expanded && children] }));
 }
 /*
  * The files a settled turn changed, as a card; each file opens its diff in place. The host's
@@ -100,7 +108,7 @@ function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, c
  * unified diffs the CLI reported, then the before and after of its own edits. A turn that has a
  * checkpoint but no stored diff asks the host for one, which is also how a running turn gets it.
  */
-export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
+export function ChangedFilesRow({ tools, diff, checkpoint, baseMoved, chatId, turnId }) {
     const [open, setOpen] = useState({});
     const [fetched, setFetched] = useState(null);
     const actions = useChatActions();
@@ -127,7 +135,7 @@ export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
     const revealNonce = flash !== null && flash.opens && flash.key === keyOf(chatId) && flash.rowId === `files-${turnId}` ? flash.nonce : 0;
     if (checkpointDiff !== null && checkpointDiff.files.length > 0) {
         const files = checkpointDiff.files;
-        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": file.path, onClick: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: file.path }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), open[file.path] && (_jsx("div", { className: "border-t border-border", children: _jsx(CheckpointFileBody, { file: file }) }))] }, file.path))) }));
+        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, baseMoved: baseMoved, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsx(ChangedFileLine, { path: file.path, open: open[file.path] === true, onToggle: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), trailing: _jsxs(_Fragment, { children: [_jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), children: _jsx(CheckpointFileBody, { file: file }) }, file.path))) }));
     }
     return _jsx(ProviderChangedFiles, { tools: tools, open: open, setOpen: setOpen, revealNonce: revealNonce });
 }
@@ -156,10 +164,7 @@ function ProviderChangedFiles({ tools, open, setOpen, revealNonce }) {
             entryFor(change.path || tool.id).edits.push(change);
         }
     }
-    return (_jsx(ChangedFilesCard, { count: byPath.size, revealNonce: revealNonce, children: [...byPath].map(([path, entry]) => {
-            const count = entry.edits.length + entry.patches.length;
-            return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": path, onClick: () => setOpen((o) => ({ ...o, [path]: !o[path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: path }), _jsx("span", { className: "grow" }), _jsx("span", { className: "text-text-faint", children: t('work.edits', { count }) })] }), open[path] && (_jsx("div", { className: "border-t border-border", children: _jsxs(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: [entry.patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, `patch-${index}`))), entry.edits.map((change, index) => (_jsx(EditDiff, { change: change }, `edit-${index}`)))] }) }))] }, path));
-        }) }));
+    return (_jsx(ChangedFilesCard, { count: byPath.size, revealNonce: revealNonce, children: [...byPath].map(([path, entry]) => (_jsx(ChangedFileLine, { path: path, open: open[path] === true, onToggle: () => setOpen((o) => ({ ...o, [path]: !o[path] })), trailing: _jsx("span", { className: "text-text-faint", children: t('work.edits', { count: entry.edits.length + entry.patches.length }) }), children: _jsxs(DiffSuspense, { children: [entry.patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, `patch-${index}`))), entry.edits.map((change, index) => (_jsx(EditDiff, { change: change }, `edit-${index}`)))] }) }, path))) }));
 }
 /* "Working for 00:14". */
 export function WorkingRow({ startedAt }) {

package/dist/chat/visual-viewport.d.ts

@@ -1,6 +1,5 @@
 import type { VisualScrollRequest } from '@adecore/agent-contracts/visual';
 import type { VisualBridge } from './visual-bridge.js';
-/** Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
 export declare class VisualViewportController {
     private readonly box;
     private readonly viewport;
@@ -18,5 +17,6 @@ export declare class VisualViewportController {
     refresh(): void;
     scroll(request: VisualScrollRequest): void;
     dispose(): void;
+    private offsetInScroller;
     private schedule;
 }

package/dist/chat/visual-viewport.js

@@ -1,5 +1,5 @@
 import { visualViewportGeometry } from './logic/visual-viewport.js';
-/** Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
+/* Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
 export class VisualViewportController {
     box;
     viewport;
@@ -35,11 +35,7 @@ export class VisualViewportController {
         if (this.disposed) {
             return;
         }
-        const outer = this.scroller.getBoundingClientRect();
-        const box = this.box.getBoundingClientRect();
-        // A chat on a canvas can be scaled; messages inside its frame use unscaled CSS pixels.
-        const scale = outer.height / this.scroller.offsetHeight || 1;
-        const top = (box.top - outer.top) / scale - this.scroller.clientTop;
+        const top = this.offsetInScroller(this.scroller.getBoundingClientRect(), this.box.getBoundingClientRect());
         const available = this.scroller.clientHeight;
         const geometry = visualViewportGeometry(this.box.offsetHeight, available, top);
         this.viewport.style.height = `${geometry.height}px`;
@@ -61,8 +57,7 @@ export class VisualViewportController {
             return;
         }
         this.pendingDelta = 0;
-        const scale = outer.height / this.scroller.offsetHeight || 1;
-        const start = this.scroller.scrollTop + (box.top - outer.top) / scale - this.scroller.clientTop;
+        const start = this.scroller.scrollTop + this.offsetInScroller(outer, box);
         const top = 'to' in request ? start + request.to : request.edge === 'start' ? 0 : this.scroller.scrollHeight;
         this.scroller.scrollTo({ top, behavior: 'instant' });
         this.refresh();
@@ -75,6 +70,12 @@ export class VisualViewportController {
         this.scroller.removeEventListener('scroll', this.onScroll);
         this.bridge.setViewport(null);
     }
+    /* The box's top below the scroller's visible top, in the scroller's own pixels. */
+    offsetInScroller(outer, box) {
+        // A chat on a canvas can be scaled; messages inside its frame use unscaled CSS pixels.
+        const scale = outer.height / this.scroller.offsetHeight || 1;
+        return (box.top - outer.top) / scale - this.scroller.clientTop;
+    }
     schedule() {
         if (this.frame || this.disposed) {
             return;

package/dist/host.d.ts

@@ -194,6 +194,7 @@ export interface ChatHost {
         name: string;
         mark: ReactNode;
     } | null;
+    useMachineLabel(scopeId: string): string | null;
     useChatPlace(chatId: string): ChatPlace;
     useContextSources(chatId: string): ReadonlyArray<{
         title: string;

package/dist/host.js

@@ -29,6 +29,7 @@ const DEFAULT_HOST = {
     openLogin: null,
     useLoginBlocked: () => null,
     useProjectLook: () => null,
+    useMachineLabel: () => null,
     useChatPlace: () => NOWHERE,
     useContextSources: () => NO_SOURCES,
     useHidesFolder: () => false,

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

@@ -91,7 +91,8 @@
     "user": {
       "heading": "You",
       "showAll": "Show all",
-      "showLess": "Show less"
+      "showLess": "Show less",
+      "quoteGone": "The reply this quote came from is no longer in this chat."
     },
     "report": {
       "heading": "Report"
@@ -107,7 +108,8 @@
     "note": {
       "hide": "Hide",
       "show": "Show",
-      "openFork": "Open fork"
+      "openFork": "Open fork",
+      "openWaiting": "Open to answer"
     },
     "compaction": {
       "plain": "Context compacted",
@@ -165,6 +167,9 @@
     },
     "changedFiles_one": "{{count}} changed file",
     "changedFiles_other": "{{count}} changed files",
+    "folderChanges_one": "{{count}} change in the folder this turn",
+    "folderChanges_other": "{{count}} changes in the folder this turn",
+    "baseMoved": "The branch moved during this turn ({{from}} to {{to}}), so this includes what came in with it.",
     "andMore": "and more, truncated",
     "edits_one": "{{count}} edit",
     "edits_other": "{{count}} edits",
@@ -249,6 +254,17 @@
   },
   "composer": {
     "slotFailed": "This control failed to render",
+    "inputLabel": "Message",
+    "menu": {
+      "commands": "Commands",
+      "skills": "Skills",
+      "mentions": "Mentions"
+    },
+    "held": {
+      "question": "A question is waiting. It opens when you pause typing.",
+      "approval": "An approval is waiting. It opens when you pause typing.",
+      "show": "Show now"
+    },
     "commands": {
       "model": "Switch the model",
       "compact": "Compact the context",
@@ -294,7 +310,8 @@
     },
     "quote": {
       "add": "Quote",
-      "remove": "Remove quote"
+      "remove": "Remove quote",
+      "goToSource": "Go to the reply"
     },
     "removeAttachment": "Remove {{name}}",
     "attach": "Attach files",
@@ -319,6 +336,9 @@
     "monitors_one": "{{count}} monitor",
     "monitors_other": "{{count}} monitors",
     "pausedUntil": "paused until {{time}}",
+    "progress": "{{done}} of {{total}} sub-agents done",
+    "needsYou_one": "{{count}} needs you",
+    "needsYou_other": "{{count}} need you",
     "took": {
       "done": "done in {{duration}}",
       "failed": "failed after {{duration}}",
@@ -332,8 +352,10 @@
   "subagents": {
     "stop": {
       "task": "Stop this task",
+      "native": "Stop this sub-agent",
       "mark": "Mark as stopped. The CLI cannot stop one sub-agent, so it may keep working until the chat's process ends."
     },
+    "stale": "This sub-agent belongs to a process that has ended.",
     "title": "Sub-agents",
     "backToMain": "Back to the main agent",
     "loading": "Loading the conversation…",
@@ -344,9 +366,7 @@
     "stopFailed": "The sub-agent could not be stopped",
     "info": {
       "label": "About this sub-agent",
-      "tokens": "{{tokens}} tokens",
-      "showTask": "Show its task",
-      "hideTask": "Hide its task"
+      "tokens": "{{tokens}} tokens"
     }
   },
   "modes": {
@@ -382,7 +402,10 @@
       "noMatch": "No models match",
       "legacyGroup_one": "Legacy models ({{count}})",
       "legacyGroup_other": "Legacy models ({{count}})",
-      "legacy": "Legacy"
+      "legacy": "Legacy",
+      "requires": "Requires {{cli}} {{version}} or later on {{machine}}",
+      "requiresHere": "Requires {{cli}} {{version}} or later",
+      "providerSettings": "Provider settings"
     },
     "stash": {
       "title": "Stashed prompts",