@adecore/agents-react 0.21.0 → 0.21.2

package/dist/chat/ui/intelligent-ui/renderers/data.js

@@ -5,20 +5,12 @@ import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
 import { Button, Icon, KeyValueList, Pill } from '@adecore/ui';
 import { formatBytes, formatDuration, formatMoment, formatNumber, formatPercent, formatRounded } from '@adecore/ui/format';
 import { useBlockLocal } from '../block-local.js';
-import { uiChildrenOf } from '../node-text.js';
+import { uiChildrenOf, uiWithUnit } from '../node-text.js';
 import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns } from '../table-data.js';
 import { UI_TONE_TEXT } from '../tones.js';
 import { UiFallbackPart } from '../UiFallbackPart.js';
-import { UiLinkChip } from './links.js';
 /* EntityList draws a hairline between its rows from this many on. */
 const DIVIDED_FROM = 7;
-/* A number with its unit, where a percent sign hugs the number and every other unit stands apart from it. */
-function withUnit(text, unit) {
-    if (unit === undefined || unit === '') {
-        return text;
-    }
-    return unit === '%' ? `${text}${unit}` : `${text} ${unit}`;
-}
 /*
  * A number that live readings keep up to date. Keyed by its text, so a value that changed mounts
  * again and lights up once, even when it changes again before the last light settled.
@@ -37,10 +29,10 @@ export function StatRenderer({ node, context }) {
     const live = context.liveValue?.(node.id, 'value');
     const change = previous === undefined ? null : value - previous;
     const arrow = change === null || change === 0 ? ArrowRight : change > 0 ? ArrowUp : ArrowDown;
-    const from = previous === undefined ? '' : withUnit(formatRounded(previous, 2), unit);
+    const from = previous === undefined ? '' : uiWithUnit(formatRounded(previous, 2), unit);
     // A change from zero has no percentage.
     const percent = change === null || previous === undefined || previous === 0 ? null : formatPercent(Math.abs((change / previous) * 100));
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5", children: [_jsx("span", { className: "truncate text-xs text-text-muted", children: label }), _jsx(LiveFigure, { text: withUnit(formatRounded(value, 2), unit), previous: typeof live?.previous === 'number' ? withUnit(formatRounded(live.previous, 2), unit) : undefined, live: live, className: "text-lg font-semibold tabular-nums" }), change !== null && (_jsxs("span", { className: clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone]), children: [_jsx(Icon, { icon: arrow, size: 12, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from }) })] }))] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5", children: [_jsx("span", { className: "truncate text-xs text-text-muted", children: label }), _jsx(LiveFigure, { text: uiWithUnit(formatRounded(value, 2), unit), previous: typeof live?.previous === 'number' ? uiWithUnit(formatRounded(live.previous, 2), unit) : undefined, live: live, className: "text-lg font-semibold tabular-nums" }), change !== null && (_jsxs("span", { className: clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone]), children: [_jsx(Icon, { icon: arrow, size: 12, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from }) })] }))] }));
 }
 export function EntityListRenderer({ node, children }) {
     return (_jsx(KeyValueList.Root, { divided: uiChildrenOf(node, 'Entry').length >= DIVIDED_FROM, className: "chat-ui-nodes px-2", children: children }));
@@ -49,9 +41,9 @@ export function EntryRenderer({ node, children }) {
     return (_jsxs(KeyValueList.Item, { children: [_jsx(KeyValueList.Name, { children: node.props.label }), _jsx(KeyValueList.Value, { children: children })] }));
 }
 function numberText(cell, unit) {
-    return cell.as === 'bytes' ? formatBytes(cell.value) : cell.as === 'duration' ? formatDuration(cell.value) : withUnit(formatRounded(cell.value, 2), unit);
+    return cell.as === 'bytes' ? formatBytes(cell.value) : cell.as === 'duration' ? formatDuration(cell.value) : uiWithUnit(formatRounded(cell.value, 2), unit);
 }
-function Cell({ value, column, live, context }) {
+function Cell({ value, column, live }) {
     const cell = uiTableCell(value, column);
     switch (cell.kind) {
         case 'empty':
@@ -65,7 +57,8 @@ function Cell({ value, column, live, context }) {
         case 'date':
             return _jsx("time", { dateTime: new Date(cell.at).toISOString(), children: formatMoment(cell.at) });
         case 'file':
-            return _jsx(UiLinkChip, { target: { type: 'File', path: cell.path }, context: context });
+            // A cell is no link target the host checked, so its path stays text.
+            return _jsx("span", { className: "font-mono text-code break-all", children: cell.path });
         case 'tag':
             return (_jsx(Pill, { shape: "tag", size: "sm", children: cell.text }));
     }
@@ -83,5 +76,5 @@ export function TableRenderer({ node, context }) {
     }
     const { rows } = node.props;
     const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
-    return (_jsxs("div", { className: "flex flex-col items-start gap-1.5", children: [_jsx("div", { className: "max-h-80 w-full overflow-auto rounded-md border border-border-soft", children: _jsxs("table", { className: "w-full border-collapse text-xs tabular-nums", children: [_jsx("thead", { className: "sticky top-0 z-1 bg-surface-hover", children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", className: clsx('h-8 px-2 font-medium whitespace-nowrap text-text-muted', isNumericColumn(column) ? 'text-right' : 'text-left'), children: column.title }, column.key))) }) }), _jsx("tbody", { children: shown.map((row, index) => (_jsx("tr", { className: "border-t border-border-soft", children: columns.map((column) => (_jsx("td", { className: clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left'), children: _jsx(Cell, { value: row[column.key], column: column, live: isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined, context: context }) }, column.key))) }, index))) })] }) }), !all && rows.length > UI_TABLE_ROWS && (_jsx(Button, { size: "xs", variant: "secondary", onClick: () => setAll(true), children: t('blocks.table.showAll', { total: formatNumber(rows.length) }) }))] }));
+    return (_jsxs("div", { className: "flex flex-col items-start gap-1.5", children: [_jsx("div", { className: "max-h-80 w-full overflow-auto rounded-md border border-border-soft", children: _jsxs("table", { "aria-label": t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') }), className: "w-full border-collapse text-xs tabular-nums", children: [_jsx("thead", { className: "sticky top-0 z-1 bg-surface-hover", children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", className: clsx('h-8 px-2 font-medium whitespace-nowrap text-text-muted', isNumericColumn(column) ? 'text-right' : 'text-left'), children: column.title }, column.key))) }) }), _jsx("tbody", { children: shown.map((row, index) => (_jsx("tr", { className: "border-t border-border-soft", children: columns.map((column) => (_jsx("td", { className: clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left'), children: _jsx(Cell, { value: row[column.key], column: column, live: isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined }) }, column.key))) }, index))) })] }) }), !all && rows.length > UI_TABLE_ROWS && (_jsx(Button, { size: "xs", variant: "secondary", onClick: () => setAll(true), children: t('blocks.table.showAll', { total: formatNumber(rows.length) }) }))] }));
 }

package/dist/chat/ui/intelligent-ui/renderers/inputs.d.ts

@@ -5,3 +5,4 @@ export declare function ItemRenderer({ node, children }: UiRendererProps<UiProps
 export declare function SwitchRenderer({ node, children, context }: UiRendererProps<UiProps<'Switch'>>): import("react").JSX.Element;
 export declare function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slider'>>): import("react").JSX.Element;
 export declare function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Segmented'>>): import("react").JSX.Element;
+export declare function ButtonRenderer({ node, children, context }: UiRendererProps<UiProps<'Button'>>): import("react").JSX.Element;

package/dist/chat/ui/intelligent-ui/renderers/inputs.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
-import { uiChildrenOf, uiNodeLabel } from '../node-text.js';
+import { Button, Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
+import { uiChildrenOf, uiNodeLabel, uiWithUnit } from '../node-text.js';
 const ChecklistContext = createContext({ values: [], enabled: false, toggle: () => undefined });
 /*
  * The binding of an input, or null for a read-only node. An input works once its own node closed and
@@ -15,13 +15,18 @@ function bindingOf(node, context) {
 }
 /* An input whose node has not closed yet stands at 60% and takes no pointer. */
 const PENDING = 'pointer-events-none opacity-60';
+/* The rows of a checklist as one named group. */
+function ChecklistGroup({ pending, children }) {
+    const { t } = useTranslation('agent-chat');
+    return (_jsx("div", { role: "group", "aria-label": t('blocks.checklist'), className: clsx('chat-ui-nodes flex flex-col', pending && PENDING), children: children }));
+}
 export function ChecklistRenderer({ node, children, context }) {
     const binding = bindingOf(node, context);
     const values = binding?.value ?? node.props.value;
     const toggle = (value) => {
         binding?.onValueChange(values.includes(value) ? values.filter((entry) => entry !== value) : [...values, value]);
     };
-    return (_jsx(ChecklistContext, { value: { values, enabled: binding !== null, toggle }, children: _jsx("div", { className: clsx('chat-ui-nodes flex flex-col', !node.complete && PENDING), children: children }) }));
+    return (_jsx(ChecklistContext, { value: { values, enabled: binding !== null, toggle }, children: _jsx(ChecklistGroup, { pending: !node.complete, children: children }) }));
 }
 /* The whole row is the label; a link inside it keeps its own click and checks nothing. */
 export function ItemRenderer({ node, children }) {
@@ -42,7 +47,9 @@ export function SwitchRenderer({ node, children, context }) {
 export function SliderRenderer({ node, context }) {
     const binding = bindingOf(node, context);
     const { value, min, max, step, unit } = node.props;
-    return (_jsx(Slider, { value: binding?.value ?? value, onValueChange: (next) => binding?.onValueChange(next), min: min, max: max, step: step, unit: unit, label: uiNodeLabel(node), disabled: binding === null, className: clsx('px-2', !node.complete && PENDING) }));
+    return (_jsx(Slider, { value: binding?.value ?? value, onValueChange: (next) => binding?.onValueChange(next), min: min, max: max, step: step, 
+        // The slider prints its unit right after the number, so the space a unit stands apart with comes from here.
+        unit: uiWithUnit('', unit), label: uiNodeLabel(node), disabled: binding === null, className: clsx('px-2', !node.complete && PENDING) }));
 }
 /* Left aligned, never the full width. Each Option is a segment by its place, since a value may be any scalar. */
 export function SegmentedRenderer({ node, context }) {
@@ -58,3 +65,8 @@ export function SegmentedRenderer({ node, context }) {
                 }
             } }) }));
 }
+/* Runs its local action once its own node closed; like an input, it closes once the block is answered. */
+export function ButtonRenderer({ node, children, context }) {
+    const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
+    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Button, { variant: "secondary", size: "sm", disabled: !enabled, onClick: () => node.onAction?.(), children: children }) }));
+}

package/dist/chat/ui/intelligent-ui/renderers/links.js

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { FileDiff, GitCommitHorizontal, SquareDashed } from 'lucide-react';
 import { FileIcon, Icon, Tooltip } from '@adecore/ui';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from '../../chips.js';
+import { uiReasonText } from '../node-text.js';
 const PLAIN = { state: 'plain' };
 function baseName(path) {
     const trimmed = path.replace(/\/+$/, '');
@@ -54,7 +55,7 @@ export function UiLinkChip({ target, context }) {
     const { t } = useTranslation('agent-chat');
     const link = context.link?.(target) ?? PLAIN;
     if (link.state === 'plain') {
-        const reason = link.reason ?? (context.link === undefined ? null : t('blocks.outsideProject'));
+        const reason = uiReasonText(t, link.code, link.reason) ?? (context.link === undefined ? null : t('blocks.outsideProject'));
         // Focusable only with a reason, so a keyboard reaches the tooltip.
         const text = (_jsx("span", { tabIndex: reason === null ? undefined : 0, className: "font-mono text-code break-all text-text-muted", children: plainText(target, link) }));
         return reason === null ? text : _jsx(Tooltip, { label: reason, children: text });

package/dist/chat/ui/intelligent-ui/use-ui-links.d.ts

@@ -1,9 +1,9 @@
-import type { ChatUiQueryState } from '@adecore/agent-contracts';
+import type { ChatUiLinkReading, ChatUiQueryState } from '@adecore/agent-contracts';
 import { type UiLinkTarget } from '@adecore/intelligent-ui/links';
 import { type UiBlock, UiState } from '@adecore/intelligent-ui';
 import type { UiRenderContext } from './render-context.js';
-export declare function useUiLinks(block: UiBlock, state: UiState, context: UiRenderContext, reads: Readonly<Record<string, string>>, frozen?: ChatUiQueryState['blocks'][string]): {
-    link: ((target: UiLinkTarget) => import("./render-context.js").UiLink) | undefined;
+export declare function useUiLinks(block: UiBlock, state: UiState, context: Pick<UiRenderContext, 'scopeId' | 'chatId' | 'itemId' | 'phase'>, reads: Readonly<Record<string, string>>, frozen?: ChatUiQueryState['blocks'][string]): {
+    link: ((target: UiLinkTarget) => ChatUiLinkReading) | undefined;
     openLink: ((target: UiLinkTarget) => void) | undefined;
-    openUrl: ((url: string) => void) | undefined;
+    openUrl: ((url: string) => void | undefined) | undefined;
 };

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

@@ -1,9 +1,13 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { uiLinkTargets } from '@adecore/intelligent-ui/links';
-import { uiInputValues, UiState } from '@adecore/intelligent-ui';
+import { uiInputValues, UI_HOST_LIMITS, UiState } from '@adecore/intelligent-ui';
 import { chatHost } from '../../../host.js';
+// Inputs that change in a run, such as a dragged slider, check their links once the run rested.
+const LINK_SETTLE_MS = 300;
 export function useUiLinks(block, state, context, reads, frozen) {
     const [checked, setChecked] = useState({});
+    // What each node was last checked as, so a change of input checks only the targets it moved.
+    const asked = useRef(new Map());
     const host = chatHost().intelligentUi;
     const values = uiInputValues(block, state);
     const scope = state.scope();
@@ -20,14 +24,25 @@ export function useUiLinks(block, state, context, reads, frozen) {
     const signature = JSON.stringify(targets);
     const input = JSON.stringify(values);
     const tickets = JSON.stringify(reads);
+    const defaultInput = useMemo(() => JSON.stringify(uiInputValues(block, new UiState(block))), [block]);
     const link = host?.link;
+    useEffect(() => {
+        asked.current.clear();
+    }, [block.id, block.revision, context.scopeId, context.chatId, context.itemId, link]);
     useEffect(() => {
         if (!link || !block.revision || context.phase !== 'final') {
             return;
         }
         let stopped = false;
         const validate = async () => {
-            for (const [nodeId, target] of Object.entries(JSON.parse(signature)).slice(0, 64)) {
+            const moved = Object.entries(JSON.parse(signature))
+                .slice(0, UI_HOST_LIMITS.links)
+                .filter(([nodeId, target]) => asked.current.get(nodeId) !== JSON.stringify(target));
+            for (const [nodeId, target] of moved) {
+                const record = (reading) => {
+                    asked.current.set(nodeId, JSON.stringify(target));
+                    setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading } }));
+                };
                 try {
                     const reading = await link(context.scopeId, {
                         chatId: context.chatId,
@@ -41,19 +56,21 @@ export function useUiLinks(block, state, context, reads, frozen) {
                     if (stopped) {
                         return;
                     }
-                    setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading } }));
+                    record(reading);
                 }
                 catch {
                     if (stopped) {
                         return;
                     }
-                    setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading: { state: 'plain' } } }));
+                    record({ state: 'plain' });
                 }
             }
         };
-        void validate();
+        // The first check runs at once; a later one waits until the inputs rested.
+        const timer = setTimeout(() => void validate(), asked.current.size === 0 ? 0 : LINK_SETTLE_MS);
         return () => {
             stopped = true;
+            clearTimeout(timer);
         };
     }, [block.id, block.revision, context.scopeId, context.chatId, context.itemId, context.phase, signature, input, tickets, link]);
     const idOf = (target) => Object.entries(targets).find(([, entry]) => JSON.stringify(entry) === JSON.stringify(target))?.[0];
@@ -65,7 +82,7 @@ export function useUiLinks(block, state, context, reads, frozen) {
         if (checked[id]?.target === JSON.stringify(target)) {
             return checked[id].reading;
         }
-        if (input === JSON.stringify(uiInputValues(block, new UiState(block))) && frozen && frozen.revision === block.revision) {
+        if (input === defaultInput && frozen && frozen.revision === block.revision) {
             const firstQueries = Object.fromEntries(Object.entries(frozen.readings)
                 .filter(([, reading]) => reading.state === 'fresh')
                 .map(([name, reading]) => [name, reading.value]));
@@ -99,9 +116,11 @@ export function useUiLinks(block, state, context, reads, frozen) {
             setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading: { state: 'plain' } } }));
         });
     };
+    const hostOpenUrl = host?.openUrl;
+    const openUrl = useCallback((url) => hostOpenUrl?.(context.scopeId, url), [hostOpenUrl, context.scopeId]);
     return {
-        link: link ? resolution : context.link,
-        openLink: link && host?.openLink ? open : context.openLink,
-        openUrl: host?.openUrl ? (url) => host.openUrl(context.scopeId, url) : context.openUrl
+        link: link ? resolution : undefined,
+        openLink: link && host?.openLink ? open : undefined,
+        openUrl: hostOpenUrl ? openUrl : undefined
     };
 }

package/dist/chat/ui/intelligent-ui/use-ui-queries.d.ts

@@ -1,7 +1,7 @@
 import type { ChatUiQueryReading, ChatUiQueryState } from '@adecore/agent-contracts';
 import { UiState, type UiBlock, type UiViewNode } from '@adecore/intelligent-ui';
 import type { UiLiveValue, UiLiveStatus, UiRenderContext } from './render-context.js';
-export declare function useUiQueries(block: UiBlock, state: UiState, context: UiRenderContext, element: HTMLDivElement | null, frozen?: ChatUiQueryState['blocks'][string]): {
+export declare function useUiQueries(block: UiBlock, state: UiState, context: Pick<UiRenderContext, 'scopeId' | 'chatId' | 'itemId' | 'phase'>, element: HTMLDivElement | null, frozen?: ChatUiQueryState['blocks'][string]): {
     live: UiLiveStatus | undefined;
     reads: Record<string, string>;
     reading: boolean;
@@ -13,6 +13,7 @@ export declare function useUiQueries(block: UiBlock, state: UiState, context: Ui
             value?: unknown;
             readId?: string | undefined;
             readAt: number;
+            code?: string | undefined;
             reason?: string | undefined;
         };
     };

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

@@ -1,27 +1,34 @@
-import { useEffect, useRef, useState } from 'react';
-import { uiInputValues, UI_CATALOG_VERSION, UiState } from '@adecore/intelligent-ui';
+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 lastReadAt = useRef({ identity: '', at: 0 });
+    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 = JSON.stringify(uiInputValues(block, new UiState(block)));
-    const initial = frozen && frozen.revision === block.revision ? frozen.readings : {};
-    const successfulFor = (name, signature) => {
-        const local = readings[name];
-        if (local?.identity === identity && local.successful?.inputs === signature) {
-            return local.successful.reading;
-        }
-        return signature === defaultInputs && initial[name]?.state === 'fresh' ? initial[name] : undefined;
-    };
+    const 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 = {};
@@ -41,13 +48,13 @@ export function useUiQueries(block, state, context, element, frozen) {
     const subscribe = chatHost().intelligentUi?.subscribe;
     useEffect(() => {
         const scope = state.scope();
-        for (const name of names) {
-            const successful = successfulFor(name, inputs);
+        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 ||
@@ -62,11 +69,14 @@ export function useUiQueries(block, state, context, element, frozen) {
         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 = lastReadAt.current.identity === identity ? 10_000 - (Date.now() - lastReadAt.current.at) : 0;
+            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()) {
@@ -80,9 +90,9 @@ export function useUiQueries(block, state, context, element, frozen) {
                 return;
             }
             busy = true;
-            lastReadAt.current = { identity, at: Date.now() };
+            lastRead.current = { inputKey, at: Date.now() };
             setBusyInput(inputKey);
-            for (const name of Object.keys(block.queries).slice(0, 8)) {
+            for (const name of Object.keys(block.queries).slice(0, UI_HOST_LIMITS.queries)) {
                 if (!visible || !documentVisible()) {
                     break;
                 }
@@ -118,7 +128,7 @@ export function useUiQueries(block, state, context, element, frozen) {
                         ...previous,
                         [name]: {
                             identity,
-                            reading: { state: 'failed', readAt: Date.now(), reason: error instanceof Error ? error.message : 'This query could not be read.' },
+                            reading: { state: 'failed', readAt: Date.now(), code: 'unreadable', reason: error instanceof Error ? error.message : undefined },
                             successful: previous[name]?.identity === identity ? previous[name].successful : undefined
                         }
                     }));
@@ -132,7 +142,7 @@ export function useUiQueries(block, state, context, element, frozen) {
             timer = setTimeout(() => {
                 timer = null;
                 void refresh();
-            }, 10_000);
+            }, UI_HOST_LIMITS.refreshMilliseconds);
         };
         const observer = typeof IntersectionObserver === 'undefined'
             ? null
@@ -157,6 +167,8 @@ export function useUiQueries(block, state, context, element, frozen) {
         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);
@@ -179,7 +191,8 @@ export function useUiQueries(block, state, context, element, frozen) {
                 .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
+            reason: failed?.[1].reason,
+            code: failed?.[1].code
         }
         : undefined;
     return { live, reads: reads ?? {}, reading, ready, readsFor, currentReadings };

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

@@ -129,7 +129,7 @@ export function AssistantRow({ chatId, item: derived }) {
     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 } }) })] }));
+        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;
@@ -186,9 +186,8 @@ function OpenChatButton({ chatId }) {
     return (_jsx("button", { className: "text-text-muted hover:text-text", onClick: place.go, children: t('rows.note.openFork') }));
 }
 /*
- * 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/WorkRows.d.ts

@@ -1,20 +1,21 @@
+import { type ReactNode } from 'react';
 import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
 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;

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,17 +85,16 @@ 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 }) {
     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);
@@ -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, 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;