@adecore/agents-react 0.21.0 → 0.21.1

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/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>

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

@@ -498,6 +498,7 @@
       "from": "from {{previous}}"
     },
     "table": {
+      "label": "Table of {{columns}}",
       "showAll": "Show all {{total}} rows"
     },
     "chart": {
@@ -514,8 +515,10 @@
     "outsideProject": "Outside the project, shown as text",
     "options": "Options",
     "choices": "Choices",
+    "checklist": "Checklist",
     "choice": {
       "waiting": "Available when the reply is done",
+      "reading": "Available once the live data is read",
       "unavailable": "Not available",
       "sent": "Sent",
       "queued": "Queued",
@@ -525,14 +528,11 @@
     "answered": "Answered with “{{label}}”",
     "chose": "Chose “{{label}}”",
     "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
-    "sendContext": "Send",
-    "copyText": "Copy text",
     "fixes_one": "{{count}} fix",
     "fixes_other": "{{count}} fixes",
     "shownAsText": "Shown as text",
     "unknownComponent": "This version cannot draw {{component}}",
     "renderFailed": "Could not draw this part",
-    "tooLarge": "The block is too large to draw",
     "unreadable": "The block could not be read",
     "live": {
       "label": "Live",
@@ -540,7 +540,26 @@
       "sources": "Reads {{sources}}",
       "failed": "Could not read {{source}}",
       "refused": "Not allowed to read {{source}}",
-      "notRead": "Not read"
+      "notRead": "Not read",
+      "reasons": {
+        "access-unavailable": "The access of the chat that wrote this is no longer available.",
+        "block-stale": "This block changed since it was drawn.",
+        "busy": "Too many live blocks are reading right now.",
+        "link-unchecked": "This link has to be checked again.",
+        "link-unsupported": "This is not a link the machine can open.",
+        "links-unsupported": "The machine does not open links from blocks.",
+        "no-unique-match": "The source found no single match for that name.",
+        "outside-project": "This is outside the project the agent wrote this in.",
+        "query-undeclared": "This block does not read that source.",
+        "refresh-limit": "This source reads at most once every ten seconds.",
+        "result-too-large": "What the source returned is too large.",
+        "snapshot-too-large": "The first readings were too large to keep.",
+        "source-unregistered": "The machine does not know this source.",
+        "stale-read": "Read the source again before you choose.",
+        "target-unavailable": "What this points to is no longer available.",
+        "timed-out": "The source took too long to answer.",
+        "unreadable": "The source could not be read."
+      }
     }
   }
 }

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

@@ -498,6 +498,7 @@
       "from": "vanaf {{previous}}"
     },
     "table": {
+      "label": "Tabel van {{columns}}",
       "showAll": "Alle {{total}} rijen tonen"
     },
     "chart": {
@@ -514,8 +515,10 @@
     "outsideProject": "Buiten het project, als tekst getoond",
     "options": "Opties",
     "choices": "Keuzes",
+    "checklist": "Checklijst",
     "choice": {
       "waiting": "Beschikbaar zodra het antwoord klaar is",
+      "reading": "Beschikbaar zodra de live gegevens gelezen zijn",
       "unavailable": "Niet beschikbaar",
       "sent": "Verstuurd",
       "queued": "In de wachtrij",
@@ -525,14 +528,11 @@
     "answered": "Beantwoord met “{{label}}”",
     "chose": "Gekozen: “{{label}}”",
     "choseOlder": "Gekozen: “{{label}}”, bij het antwoord van {{time}}",
-    "sendContext": "Versturen",
-    "copyText": "Tekst kopiëren",
     "fixes_one": "{{count}} correctie",
     "fixes_other": "{{count}} correcties",
     "shownAsText": "Als tekst getoond",
     "unknownComponent": "Deze versie kan {{component}} niet tekenen",
     "renderFailed": "Dit deel kon niet getekend worden",
-    "tooLarge": "Het blok is te groot om te tekenen",
     "unreadable": "Het blok kon niet gelezen worden",
     "live": {
       "label": "Live",
@@ -540,7 +540,26 @@
       "sources": "Leest {{sources}}",
       "failed": "{{source}} lezen lukte niet",
       "refused": "Geen toegang tot {{source}}",
-      "notRead": "Niet gelezen"
+      "notRead": "Niet gelezen",
+      "reasons": {
+        "access-unavailable": "De toegang van de chat die dit schreef is niet meer beschikbaar.",
+        "block-stale": "Dit blok is veranderd sinds het getekend werd.",
+        "busy": "Er lezen nu te veel live blokken tegelijk.",
+        "link-unchecked": "Deze link moet opnieuw gecontroleerd worden.",
+        "link-unsupported": "Dit is geen link die de machine kan openen.",
+        "links-unsupported": "De machine opent geen links uit blokken.",
+        "no-unique-match": "De bron vond voor die naam niet precies één overeenkomst.",
+        "outside-project": "Dit valt buiten het project waarin de agent dit schreef.",
+        "query-undeclared": "Dit blok leest die bron niet.",
+        "refresh-limit": "Deze bron leest hooguit eens per tien seconden.",
+        "result-too-large": "Wat de bron teruggaf is te groot.",
+        "snapshot-too-large": "De eerste metingen waren te groot om te bewaren.",
+        "source-unregistered": "De machine kent deze bron niet.",
+        "stale-read": "Lees de bron opnieuw voordat je kiest.",
+        "target-unavailable": "Waar dit naar verwijst is niet meer beschikbaar.",
+        "timed-out": "De bron deed er te lang over om te antwoorden.",
+        "unreadable": "De bron kon niet gelezen worden."
+      }
     }
   }
 }

package/src/state/chats.ts

@@ -160,7 +160,11 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
         case 'delta': {
             const item = state.items[event.itemId];
             if (event.uiQueries && item?.kind === 'assistant') {
-                return { ...state, items: { ...state.items, [event.itemId]: { ...item, uiQueries: event.uiQueries } } };
+                // The text first, as the daemon's thread applies it, then the metadata on what it grew into.
+                const { uiQueries, ...text } = event;
+                const grown = event.text === '' ? state : applyEvent(state, text);
+                const reply = grown.items[event.itemId] ?? item;
+                return { ...grown, items: { ...grown.items, [event.itemId]: { ...reply, uiQueries } as ChatItem } };
             }
             if (event.ui !== undefined && event.text === '') {
                 if (item?.kind === 'assistant' && item.streaming && event.textLength === item.text.length) {

package/dist/chat/ui/intelligent-ui/UiBlockFooter.d.ts

@@ -1,15 +0,0 @@
-import type { UiLiveStatus } from './render-context.js';
-export interface UiBlockFix {
-    code: string;
-    message: string;
-}
-export interface UiBlockFooterProps {
-    live?: UiLiveStatus | null;
-    answered?: {
-        label: string;
-        at: number;
-    } | null;
-    fixes?: readonly UiBlockFix[];
-    shownAsText?: string | null;
-}
-export declare function UiBlockFooter({ live, answered, fixes, shownAsText }: UiBlockFooterProps): import("react").JSX.Element | null;