@adecore/agents-react 0.21.0 → 0.21.2

package/src/chat/ui/intelligent-ui/renderers/choices.tsx

@@ -41,7 +41,11 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
     const failed = answer === null && context.failedChoiceId === node.id;
     const closed = waiting || unavailable || answer !== null;
     const slow = useLater(chosen && answer.state === 'sending', SPINNER_AFTER_MS);
-    const reason = waiting ? t('blocks.choice.waiting') : answer === null && unavailable ? t('blocks.choice.unavailable') : null;
+    const reason = waiting
+        ? t('blocks.choice.waiting')
+        : answer === null && unavailable
+          ? ((disabled === true ? null : context.choiceReason) ?? t('blocks.choice.unavailable'))
+          : null;
     const described = detail !== undefined && detail !== '';
 
     const row = (
@@ -80,7 +84,7 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
     );
 
     return (
-        <div className={clsx('flex flex-col gap-1', primary === true && 'order-first')}>
+        <div className="flex flex-col gap-1">
             {reason !== null ? (
                 <DisabledReason reason={reason}>{row}</DisabledReason>
             ) : described && detail.length > LONG_CONTEXT ? (

package/src/chat/ui/intelligent-ui/renderers/content.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { UiProps } from '@adecore/intelligent-ui';
 import { PreviewCard } from '@adecore/ui';
@@ -8,7 +8,7 @@ import { chatHost } from '../../../../host';
 import { CodeBlock } from '../../CodeBlock';
 import { CodeStreamingContext } from '../../code-streaming';
 import { ImageThumb } from '../../ImageView';
-import { uiChildrenOf, uiNodeLabel, uiNodeText } from '../node-text';
+import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text';
 import type { UiRendererProps } from '../render-context';
 
 // The number of every source by its node id, which the list counts in its own order.
@@ -52,25 +52,20 @@ export function ImageRenderer({ node, children, context }: UiRendererProps<UiPro
 
 export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>) {
     const { t } = useTranslation('agent-chat');
+    const headingId = useId();
     const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
     return (
         <SourceNumbers value={numbers}>
-            <section aria-label={t('blocks.sources')} className="flex flex-col">
-                <span className="px-2 pb-1 text-xs font-medium text-text-muted">{t('blocks.sources')}</span>
+            <section aria-labelledby={headingId} className="flex flex-col">
+                <span id={headingId} className="px-2 pb-1 text-xs font-medium text-text-muted">
+                    {t('blocks.sources')}
+                </span>
                 <ol className="chat-ui-nodes flex flex-col">{children}</ol>
             </section>
         </SourceNumbers>
     );
 }
 
-function domainOf(url: string): string {
-    try {
-        return new URL(url).hostname.replace(/^www\./, '');
-    } catch {
-        return url;
-    }
-}
-
 export interface UiSourceCitationProps {
     /* The number of the Source, as its row in the list counts it. */
     number: number;
@@ -106,7 +101,7 @@ export function UiSourceCitation({ number, title, url, onReveal, className }: Ui
             </PreviewCard.Trigger>
             <PreviewCard.Popup side="top" align="center" sideOffset={4} className="flex max-w-72 flex-col px-2.5 py-1.5 text-xs">
                 <span className="line-clamp-2 text-text">{title}</span>
-                <span className="truncate text-text-faint">{domainOf(url)}</span>
+                <span className="truncate text-text-faint">{uiUrlDomain(url)}</span>
             </PreviewCard.Popup>
         </PreviewCard.Root>
     );
@@ -124,7 +119,7 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
         <>
             <span className="w-5 shrink-0 text-right text-text-faint tabular-nums">{number}</span>
             <span className="min-w-0 truncate text-text">{title}</span>
-            <span className="shrink-0 text-text-faint">{domainOf(url)}</span>
+            <span className="shrink-0 text-text-faint">{uiUrlDomain(url)}</span>
         </>
     );
     return (

package/src/chat/ui/intelligent-ui/renderers/data.tsx

@@ -5,24 +5,15 @@ import type { UiProps } from '@adecore/intelligent-ui';
 import { Button, Icon, KeyValueList, Pill } from '@adecore/ui';
 import { formatBytes, formatDuration, formatMoment, formatNumber, formatPercent, formatRounded } from '@adecore/ui/format';
 import { useBlockLocal } from '../block-local';
-import { uiChildrenOf } from '../node-text';
-import type { UiLiveValue, UiRenderContext, UiRendererProps } from '../render-context';
+import { uiChildrenOf, uiWithUnit } from '../node-text';
+import type { UiLiveValue, UiRendererProps } from '../render-context';
 import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns, type UiTableCell, type UiTableColumn } from '../table-data';
 import { UI_TONE_TEXT } from '../tones';
 import { UiFallbackPart } from '../UiFallbackPart';
-import { UiLinkChip } from './links';
 
 /* 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: string, unit: string | undefined): string {
-    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.
@@ -47,15 +38,15 @@ export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>
     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 (
         <div className="flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5">
             <span className="truncate text-xs text-text-muted">{label}</span>
             <LiveFigure
-                text={withUnit(formatRounded(value, 2), unit)}
-                previous={typeof live?.previous === 'number' ? withUnit(formatRounded(live.previous, 2), unit) : undefined}
+                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"
             />
@@ -89,10 +80,10 @@ export function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry
 }
 
 function numberText(cell: Extract<UiTableCell, { kind: 'number' }>, unit: string | undefined): string {
-    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 }: { value: unknown; column: UiTableColumn; live?: UiLiveValue; context: UiRenderContext }) {
+function Cell({ value, column, live }: { value: unknown; column: UiTableColumn; live?: UiLiveValue }) {
     const cell = uiTableCell(value, column);
     switch (cell.kind) {
         case 'empty':
@@ -112,7 +103,8 @@ function Cell({ value, column, live, context }: { value: unknown; column: UiTabl
         case 'date':
             return <time dateTime={new Date(cell.at).toISOString()}>{formatMoment(cell.at)}</time>;
         case 'file':
-            return <UiLinkChip target={{ type: 'File', path: cell.path }} context={context} />;
+            // A cell is no link target the host checked, so its path stays text.
+            return <span className="font-mono text-code break-all">{cell.path}</span>;
         case 'tag':
             return (
                 <Pill shape="tag" size="sm">
@@ -138,7 +130,10 @@ export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'
     return (
         <div className="flex flex-col items-start gap-1.5">
             <div className="max-h-80 w-full overflow-auto rounded-md border border-border-soft">
-                <table className="w-full border-collapse text-xs tabular-nums">
+                <table
+                    aria-label={t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') })}
+                    className="w-full border-collapse text-xs tabular-nums"
+                >
                     <thead className="sticky top-0 z-1 bg-surface-hover">
                         <tr>
                             {columns.map((column) => (
@@ -168,7 +163,6 @@ export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'
                                             value={row[column.key]}
                                             column={column}
                                             live={isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined}
-                                            context={context}
                                         />
                                     </td>
                                 ))}

package/src/chat/ui/intelligent-ui/renderers/inputs.tsx

@@ -1,9 +1,9 @@
-import { createContext, useContext, type MouseEvent } from 'react';
+import { createContext, useContext, type MouseEvent, type ReactNode } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { UiBinding, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-import { Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
-import { uiChildrenOf, uiNodeLabel } from '../node-text';
+import { Button, Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
+import { uiChildrenOf, uiNodeLabel, uiWithUnit } from '../node-text';
 import type { UiRenderContext, UiRendererProps } from '../render-context';
 
 type Scalar = UiProps<'Item'>['value'];
@@ -28,6 +28,16 @@ function bindingOf<Value>(node: UiViewNode<{ value: Value }>, context: UiRenderC
 /* 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 }: { pending: boolean; children: ReactNode }) {
+    const { t } = useTranslation('agent-chat');
+    return (
+        <div role="group" aria-label={t('blocks.checklist')} className={clsx('chat-ui-nodes flex flex-col', pending && PENDING)}>
+            {children}
+        </div>
+    );
+}
+
 export function ChecklistRenderer({ node, children, context }: UiRendererProps<UiProps<'Checklist'>>) {
     const binding = bindingOf(node, context);
     const values = binding?.value ?? node.props.value;
@@ -36,7 +46,7 @@ export function ChecklistRenderer({ node, children, context }: UiRendererProps<U
     };
     return (
         <ChecklistContext value={{ values, enabled: binding !== null, toggle }}>
-            <div className={clsx('chat-ui-nodes flex flex-col', !node.complete && PENDING)}>{children}</div>
+            <ChecklistGroup pending={!node.complete}>{children}</ChecklistGroup>
         </ChecklistContext>
     );
 }
@@ -87,7 +97,8 @@ export function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slide
             min={min}
             max={max}
             step={step}
-            unit={unit}
+            // 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)}
@@ -119,3 +130,15 @@ export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Se
         </div>
     );
 }
+
+/* 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 }: UiRendererProps<UiProps<'Button'>>) {
+    const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
+    return (
+        <div className={clsx('px-2', !node.complete && PENDING)}>
+            <Button variant="secondary" size="sm" disabled={!enabled} onClick={() => node.onAction?.()}>
+                {children}
+            </Button>
+        </div>
+    );
+}

package/src/chat/ui/intelligent-ui/renderers/links.tsx

@@ -5,6 +5,7 @@ import { FileDiff, GitCommitHorizontal, SquareDashed } from 'lucide-react';
 import type { UiProps } from '@adecore/intelligent-ui';
 import { FileIcon, Icon, Tooltip } from '@adecore/ui';
 import { CHIP_IN_MESSAGE, MENTION_TONE } from '../../chips';
+import { uiReasonText } from '../node-text';
 import type { UiLink, UiLinkTarget, UiRenderContext, UiRendererProps } from '../render-context';
 
 const PLAIN: UiLink = { state: 'plain' };
@@ -82,7 +83,7 @@ export function UiLinkChip({ target, context }: { target: UiLinkTarget; 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 = (
             <span tabIndex={reason === null ? undefined : 0} className="font-mono text-code break-all text-text-muted">

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

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ChatUiLinkReading, ChatUiQueryState } from '@adecore/agent-contracts';
 import { uiLinkTargets, type UiLinkTarget } from '@adecore/intelligent-ui/links';
-import { uiInputValues, type UiBlock, UiState } from '@adecore/intelligent-ui';
+import { uiInputValues, UI_HOST_LIMITS, type UiBlock, UiState } from '@adecore/intelligent-ui';
 import { chatHost } from '../../../host';
 import type { UiRenderContext } from './render-context';
 
@@ -10,14 +10,19 @@ interface LinkState {
     reading: ChatUiLinkReading;
 }
 
+// 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: UiBlock,
     state: UiState,
-    context: UiRenderContext,
+    context: Pick<UiRenderContext, 'scopeId' | 'chatId' | 'itemId' | 'phase'>,
     reads: Readonly<Record<string, string>>,
     frozen?: ChatUiQueryState['blocks'][string]
 ) {
     const [checked, setChecked] = useState<Record<string, LinkState>>({});
+    // What each node was last checked as, so a change of input checks only the targets it moved.
+    const asked = useRef(new Map<string, string>());
     const host = chatHost().intelligentUi;
     const values = uiInputValues(block, state);
     const scope = state.scope();
@@ -35,14 +40,25 @@ export function useUiLinks(
     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) as Record<string, UiLinkTarget>).slice(0, 64)) {
+            const moved = Object.entries(JSON.parse(signature) as Record<string, UiLinkTarget>)
+                .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: ChatUiLinkReading) => {
+                    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,
@@ -56,18 +72,20 @@ export function useUiLinks(
                     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: UiLinkTarget) => Object.entries(targets).find(([, entry]) => JSON.stringify(entry) === JSON.stringify(target))?.[0];
@@ -79,7 +97,7 @@ export function useUiLinks(
         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')
@@ -115,9 +133,11 @@ export function useUiLinks(
                 setChecked((previous) => ({ ...previous, [nodeId]: { target: JSON.stringify(target), reading: { state: 'plain' } } }));
             });
     };
+    const hostOpenUrl = host?.openUrl;
+    const openUrl = useCallback((url: string) => hostOpenUrl?.(context.scopeId, url), [hostOpenUrl, context.scopeId]);
     return {
-        link: link ? resolution : context.link,
-        openLink: link && host?.openLink ? open : context.openLink,
-        openUrl: host?.openUrl ? (url: string) => host.openUrl!(context.scopeId, url) : context.openUrl
+        link: link ? resolution : undefined,
+        openLink: link && host?.openLink ? open : undefined,
+        openUrl: hostOpenUrl ? openUrl : undefined
     };
 }

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

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { ChatUiQueryReading, ChatUiQueryState } from '@adecore/agent-contracts';
-import { uiInputValues, UI_CATALOG_VERSION, UiState, type UiBlock, type UiViewNode, type UiNode } from '@adecore/intelligent-ui';
+import { uiInputValues, UI_CATALOG_VERSION, UI_HOST_LIMITS, UiState, type UiBlock, type UiViewNode, type UiNode } from '@adecore/intelligent-ui';
 import { chatHost } from '../../../host';
 import type { UiLiveValue, UiLiveStatus, UiRenderContext } from './render-context';
 
@@ -10,6 +10,28 @@ interface LocalReading {
     successful?: { inputs: string; reading: ChatUiQueryReading };
 }
 
+const NO_READINGS: ChatUiQueryState['blocks'][string]['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: LocalReading | undefined,
+    initial: ChatUiQueryReading | undefined,
+    identity: string,
+    signature: string,
+    defaultInputs: string
+): ChatUiQueryReading | undefined {
+    if (local?.identity === identity && local.successful?.inputs === signature) {
+        return local.successful.reading;
+    }
+    return signature === defaultInputs && initial?.state === 'fresh' ? initial : undefined;
+}
+
+function settleDeadline(): number {
+    return Date.now() + INPUT_SETTLE_MS;
+}
+
 function documentVisible(): boolean {
     return document.visibilityState !== 'hidden';
 }
@@ -17,27 +39,22 @@ function documentVisible(): boolean {
 export function useUiQueries(
     block: UiBlock,
     state: UiState,
-    context: UiRenderContext,
+    context: Pick<UiRenderContext, 'scopeId' | 'chatId' | 'itemId' | 'phase'>,
     element: HTMLDivElement | null,
     frozen?: ChatUiQueryState['blocks'][string]
 ) {
     const [readings, setReadings] = useState<Record<string, LocalReading>>({});
     const [busyInput, setBusyInput] = useState<string | null>(null);
-    const lastReadAt = useRef({ identity: '', at: 0 });
+    const 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: string, signature: string): ChatUiQueryReading | undefined => {
-        const local = readings[name];
-        if (local?.identity === identity && local.successful?.inputs === signature) {
-            return local.successful.reading;
-        }
-        return signature === defaultInputs && initial[name]?.state === 'fresh' ? initial[name] : undefined;
-    };
+    const defaultInputs = useMemo(() => JSON.stringify(uiInputValues(block, new UiState(block))), [block]);
+    const initial = frozen && frozen.revision === block.revision ? frozen.readings : NO_READINGS;
+    const successfulFor = (name: string, signature: string): ChatUiQueryReading | undefined =>
+        successfulReading(readings[name], initial[name], identity, signature, defaultInputs);
     const readsFor = (values: Readonly<Record<string, unknown>>): Record<string, string> | null => {
         const signature = JSON.stringify(values);
         const reads: Record<string, string> = {};
@@ -57,13 +74,13 @@ export function useUiQueries(
     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 ||
@@ -81,11 +98,17 @@ export function useUiQueries(
         let busy = false;
 
         let timer: ReturnType<typeof setTimeout> | null = 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()) {
@@ -99,9 +122,9 @@ export function useUiQueries(
                 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;
                 }
@@ -137,7 +160,7 @@ export function useUiQueries(
                         ...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
                         }
                     }));
@@ -151,7 +174,7 @@ export function useUiQueries(
             timer = setTimeout(() => {
                 timer = null;
                 void refresh();
-            }, 10_000);
+            }, UI_HOST_LIMITS.refreshMilliseconds);
         };
         const observer =
             typeof IntersectionObserver === 'undefined'
@@ -176,6 +199,8 @@ export function useUiQueries(
         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);
@@ -200,7 +225,8 @@ export function useUiQueries(
                   .filter((reading) => reading.state === 'fresh')
                   .reduce<number | null>((at, value) => (at === null ? value.readAt : Math.min(at, value.readAt)), null),
               source: failed ? block.queries[failed[0]]?.source : undefined,
-              reason: failed?.[1].reason
+              reason: failed?.[1].reason,
+              code: failed?.[1].code
           }
         : undefined;
     return { live, reads: reads ?? {}, reading, ready, readsFor, currentReadings };

package/src/chat/ui/rehype-chips.ts

@@ -1,6 +1,6 @@
 import { chipText, tokenizeChips, type ChipSegment } from '../mentions';
 
-/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of hast this plugin touches; the package's own types are not a dependency here. */
 interface HastText {
     type: 'text';
     value: string;

package/src/chat/ui/rehype-fade.ts

@@ -1,4 +1,4 @@
-/* Just the part of hast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of hast this plugin touches; the package's own types are not a dependency here. */
 interface HastText {
     type: 'text';
     value: string;

package/src/chat/ui/remark-html-as-text.ts

@@ -1,4 +1,4 @@
-/* Just the part of mdast this plugin touches; the package's own types are not a dependency of the client. */
+/* Just the part of mdast this plugin touches; the package's own types are not a dependency here. */
 interface MdastNode {
     type: string;
     value?: string;

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

@@ -248,7 +248,7 @@ export function AssistantRow({ chatId, item: derived }: { chatId: string; item:
                         answers={item.uiAnswers}
                         queries={item.uiQueries}
                         reply={reply}
-                        context={{ scopeId: scope.id, chatId, itemId: item.id, phase: item.streaming ? 'streaming' : 'final', answer: null }}
+                        context={{ scopeId: scope.id, chatId, itemId: item.id, phase: item.streaming ? 'streaming' : 'final' }}
                     />
                 </div>
             </div>
@@ -391,9 +391,8 @@ function OpenChatButton({ chatId }: { chatId: string }) {
 }
 
 /*
- * 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 }: { label: string; onOpen?: () => void }) {
     const line = 'mb-0.5 flex h-7 w-full items-center gap-2 text-left text-xs text-text-muted';
@@ -430,7 +429,7 @@ export function CompactionRow({ preTokens }: { preTokens: number | null }) {
     );
 }
 
-const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, React.ReactNode> = {
+const DECISION_ICON: Record<Exclude<ChatApprovalItem['decision'], 'pending'>, ReactNode> = {
     allow: <Icon icon={Check} size={12} />,
     'allow-always': <Icon icon={Check} size={12} />,
     deny: <Icon icon={X} size={12} />,