@adecore/agents-react 0.21.0 → 0.21.1

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

@@ -1,6 +1,19 @@
 import { type ReactNode } from 'react';
 import type { UiViewNode } from '@adecore/intelligent-ui';
-import { type UiBlockFooterProps } from './UiBlockFooter.js';
+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 interface UiBlockFrameProps extends UiBlockFooterProps {
     nodes: readonly UiViewNode[];
     phase: 'streaming' | 'final';

package/dist/chat/ui/intelligent-ui/UiBlockFrame.js

@@ -1,11 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Skeleton } from '@adecore/ui';
-import { uiBlockHead } from './node-text.js';
+import { Lock, Radio, TriangleAlert, Wrench } from 'lucide-react';
+import { Icon, Skeleton, Spinner, Tooltip, useTickingText } from '@adecore/ui';
+import { formatAgo, formatMoment } from '@adecore/ui/format';
+import { uiBlockHead, uiReasonText } from './node-text.js';
 import { UiHeadContext } from './render-context.js';
-import { UiBlockFooter } from './UiBlockFooter.js';
+import { useLater } from './use-later.js';
+const NO_FIXES = [];
+const READING_SPINNER_MS = 1000;
+/* The one sign of a live block: what it reads, and when it last read it. A reading spins only after a second. */
+function LivePart({ live }) {
+    const { t } = useTranslation('agent-chat');
+    const slow = useLater(live.state === 'reading', READING_SPINNER_MS);
+    const { readAt } = live;
+    const fresh = live.state === 'fresh' || live.state === 'reading';
+    const ago = useTickingText(() => {
+        if (readAt === null) {
+            return '';
+        }
+        const time = formatAgo(Date.now() - readAt);
+        return fresh ? t('blocks.live.read', { time }) : time;
+    });
+    const source = live.source ?? live.sources[0] ?? '';
+    const icon = slow ? (_jsx(Spinner, { size: 12 })) : live.state === 'failed' ? (_jsx(Icon, { icon: TriangleAlert, size: 12, className: "text-status-needs-you" })) : live.state === 'refused' ? (_jsx(Icon, { icon: Lock, size: 12 })) : (_jsx(Icon, { icon: Radio, size: 12, className: "text-status-idle" }));
+    const words = live.state === 'failed'
+        ? t('blocks.live.failed', { source })
+        : live.state === 'refused'
+            ? t('blocks.live.refused', { source })
+            : t('blocks.live.label');
+    const reason = live.state === 'failed' || live.state === 'refused' ? uiReasonText(t, live.code, live.reason) : undefined;
+    const hint = reason !== undefined ? reason : live.sources.length > 0 ? t('blocks.live.sources', { sources: live.sources.join(', ') }) : null;
+    const body = (_jsxs("span", { tabIndex: hint === null ? undefined : 0, className: "flex items-center gap-1.5", children: [icon, _jsx("span", { children: words }), readAt !== null && live.state !== 'refused' && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(readAt).toISOString(), children: _jsx("span", { ref: ago, className: "tabular-nums" }) })] })), readAt === null && fresh && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: t('blocks.live.notRead') })] }))] }));
+    return hint === null ? body : _jsx(Tooltip, { label: hint, children: body });
+}
+/*
+ * The line under a block, only when it has something to say: live, answered, repaired or drawn as
+ * text, in that order. A hairline of the soft border runs the full width of the card over it.
+ */
+function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAsText = null }) {
+    const { t } = useTranslation('agent-chat');
+    const [fixesOpen, setFixesOpen] = useState(false);
+    const listId = useId();
+    if (live === null && answered === null && fixes.length === 0 && shownAsText === null) {
+        return null;
+    }
+    return (_jsxs("div", { className: "-mx-2.25 mt-2.25 -mb-2.25 flex flex-col gap-1.5 border-t border-border-soft px-4.25 py-2 text-xs text-text-faint", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [live !== null && _jsx(LivePart, { live: live }), answered !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.answered', { label: answered.label }) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(answered.at).toISOString(), children: formatMoment(answered.at) })] })), fixes.length > 0 && (_jsxs("button", { type: "button", "aria-expanded": fixesOpen, "aria-controls": listId, className: "flex items-center gap-1.5 rounded-sm hover:text-text-muted", onClick: () => setFixesOpen(!fixesOpen), children: [_jsx(Icon, { icon: Wrench, size: 12 }), t('blocks.fixes', { count: fixes.length })] })), shownAsText !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.shownAsText') }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: shownAsText })] }))] }), fixes.length > 0 && (_jsx("ul", { id: listId, hidden: !fixesOpen, className: "flex flex-col gap-0.5 text-text-muted", children: fixes.map((fix, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "shrink-0 font-mono", children: fix.code }), _jsx("span", { className: "min-w-0", children: fix.message })] }, index))) }))] }));
+}
 const RELEASE_MS = 200;
 /*
  * The tallest the card has been, while `active`: a streaming block grows and never shrinks until its

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

@@ -3,11 +3,13 @@ import { type UiBlock } from '@adecore/intelligent-ui';
 import type { ChatUiAnswer, ChatUiQueryState } from '@adecore/agent-contracts';
 import { ReplyMarkdown } from '../Markdown.js';
 import type { UiRenderContext } from './render-context.js';
+type UiBlockIdentity = Pick<UiRenderContext, 'scopeId' | 'chatId' | 'itemId' | 'blockId' | 'phase'>;
 export declare function UiReply({ text, blocks, context, answers, queries, reply }: {
     text: string;
     blocks: readonly UiBlock[];
-    context: Omit<UiRenderContext, 'blockId'>;
+    context: Omit<UiBlockIdentity, 'blockId'>;
     answers?: Readonly<Record<string, ChatUiAnswer>>;
     queries?: ChatUiQueryState;
     reply?: ComponentProps<typeof ReplyMarkdown>['reply'];
 }): ReactNode;
+export {};

package/dist/chat/ui/intelligent-ui/UiReply.js

@@ -1,26 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component, createContext, Fragment, memo, useContext, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { Component, createContext, Fragment, memo, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import ReactMarkdown, {} from 'react-markdown';
 import { useTranslation } from 'react-i18next';
 import { evaluateUiBlock, uiInputValues, isUiComponent, UI_CATALOG_VERSION, UiState } from '@adecore/intelligent-ui';
-import { ErrorBoundary } from '@adecore/ui';
+import { ErrorBoundary, Tooltip } from '@adecore/ui';
 import { chatHost } from '../../../host.js';
 import { UiReplyNavigationContext } from '../reply-context.js';
 import { ReplyMarkdown } from '../Markdown.js';
 import { rehypeFadeWords } from '../rehype-fade.js';
 import { UI_RENDERERS } from './registry.js';
+import { UiPageMemory } from './block-local.js';
 import { UiBlockFrame } from './UiBlockFrame.js';
 import { UiFallbackPart } from './UiFallbackPart.js';
 import { useUiLinks } from './use-ui-links.js';
 import { useUiQueries, useUiLiveValues } from './use-ui-queries.js';
 import { UiSourceCitation } from './renderers/content.js';
-import { uiChildrenOf, revealUiSource } from './node-text.js';
+import { uiChildrenOf, revealUiSource, uiLiveChoiceReason, uiUrlDomain } from './node-text.js';
 import { uiReplyParts } from './reply-parts.js';
-const localStates = new Map();
-const LOCAL_STATE_LIMIT = 64;
+const localStates = new UiPageMemory(64);
 function localState(key, block, answered) {
     let state = localStates.get(key);
-    localStates.delete(key);
     if (!state) {
         state = new UiState(block);
         if (answered && answered.revision === block.revision) {
@@ -28,10 +27,7 @@ function localState(key, block, answered) {
                 state.set(name, value);
             }
         }
-    }
-    localStates.set(key, state);
-    if (localStates.size > LOCAL_STATE_LIMIT) {
-        localStates.delete(localStates.keys().next().value);
+        localStates.set(key, state);
     }
     return state;
 }
@@ -41,7 +37,7 @@ const BLOCK = '$block';
  * Parents whose text is read as written: code, a short tag, and the labels of controls, whose
  * accessible name and sent text are that same string.
  */
-const LITERAL_PARENTS = new Set(['CodeBlock', 'Tag', 'Choice', 'Item', 'Switch', 'Slider', 'Segmented', 'Option', 'Column']);
+const LITERAL_PARENTS = new Set(['CodeBlock', 'Tag', 'Choice', 'Item', 'Switch', 'Slider', 'Segmented', 'Option', 'Button', 'Column']);
 /* Parents that stack their children, where a run of text and inline nodes is one paragraph. */
 const PARAGRAPHS = {
     [BLOCK]: 'px-2 text-xs text-text',
@@ -129,8 +125,6 @@ function sourceTargets(nodes) {
 }
 const PROSE_PLUGINS = [remarkInlineProse, remarkCitations];
 const PROSE_ELEMENTS = ['p', 'br', 'strong', 'em', 'code', 'a', 'span'];
-// Raw HTML never parses here, so the only spans are the words the fade wraps.
-const FADING_PROSE_ELEMENTS = [...PROSE_ELEMENTS, 'span'];
 const FADE_PLUGINS = [rehypeFadeWords];
 const NO_PLUGINS = [];
 const ProseUrlContext = createContext(undefined);
@@ -140,7 +134,7 @@ function ProseLink({ href, children }) {
     if (openUrl === undefined || href === undefined || !/^https?:\/\//i.test(href)) {
         return children;
     }
-    return (_jsx("button", { type: "button", className: "cursor-pointer text-accent underline underline-offset-2 select-text", onClick: () => openUrl(href), children: children }));
+    return (_jsx(Tooltip, { label: uiUrlDomain(href), children: _jsx("button", { type: "button", className: "cursor-pointer text-accent underline underline-offset-2 select-text", onClick: () => openUrl(href), children: children }) }));
 }
 const PROSE_COMPONENTS = {
     p: ({ children }) => children,
@@ -158,7 +152,7 @@ const UiProse = memo(function UiProse({ text, fade, openUrl }) {
     if (body === '') {
         return text;
     }
-    return (_jsxs(ProseUrlContext, { value: openUrl, children: [lead, _jsx(ReactMarkdown, { remarkPlugins: PROSE_PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, allowedElements: fade ? FADING_PROSE_ELEMENTS : PROSE_ELEMENTS, unwrapDisallowed: true, components: PROSE_COMPONENTS, children: body }), trail] }));
+    return (_jsxs(ProseUrlContext, { value: openUrl, children: [lead, _jsx(ReactMarkdown, { remarkPlugins: PROSE_PLUGINS, rehypePlugins: fade ? FADE_PLUGINS : NO_PLUGINS, allowedElements: PROSE_ELEMENTS, unwrapDisallowed: true, components: PROSE_COMPONENTS, children: body }), trail] }));
 });
 /* Which text nodes of a block the agent wrote out, by id; the value of an expression is data and stays as it is. */
 function writtenTexts(nodes, into = new Map()) {
@@ -183,6 +177,10 @@ function isBlank(node) {
 function UiNodes({ nodes, parent, texts, context }) {
     const drawn = (node) => (_jsx(UiNodeBoundary, { node: node, children: _jsx(UiNodeBody, { node: node, parent: parent, texts: texts, context: context }) }, node.id));
     const paragraph = PARAGRAPHS[parent];
+    if (parent === 'Choices') {
+        // A primary choice stands first in the order a keyboard and a screen reader meet it too, not only on screen.
+        return [...nodes].sort((a, b) => Number(b.props.primary === true) - Number(a.props.primary === true)).map(drawn);
+    }
     if (paragraph === undefined) {
         return nodes.map(drawn);
     }
@@ -239,7 +237,7 @@ function UiBlockBody({ block, context, answered, frozen }) {
     const key = JSON.stringify([context.scopeId, context.chatId, context.itemId, block.id]);
     const [state] = useState(() => localState(key, block, answered));
     state.sync(block);
-    useSyncExternalStore((listener) => state.subscribe(listener), () => state.snapshot(), () => state.snapshot());
+    const stateRevision = useSyncExternalStore((listener) => state.subscribe(listener), () => state.snapshot(), () => state.snapshot());
     const [optimistic, setOptimistic] = useState(null);
     const [failedChoiceId, setFailedChoiceId] = useState(null);
     const pending = useRef(false);
@@ -254,14 +252,26 @@ function UiBlockBody({ block, context, answered, frozen }) {
         ? { choiceId: answered.choiceId, state: answered.queued ? 'queued' : 'sent' }
         : optimistic?.revision === block.revision
             ? optimistic
-            : context.answer;
+            : null;
     const [element, setElement] = useState(null);
     const navigation = useContext(UiReplyNavigationContext);
     const flash = navigation?.flash;
     const flashing = navigation?.chatId === context.chatId && flash?.itemId === context.itemId && flash.blockId === block.id && flash.revision === block.revision;
     const queries = useUiQueries(block, state, context, element, frozen);
     const links = useUiLinks(block, state, context, queries.reads, frozen);
-    const evaluation = evaluateUiBlock(block, state);
+    // The state changes in place, so its revision is what tells this evaluation it went stale.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    const evaluation = useMemo(() => evaluateUiBlock(block, state), [block, state, stateRevision]);
+    const texts = useMemo(() => writtenTexts(block.nodes), [block]);
+    const sources = useMemo(() => sourceTargets(evaluation.nodes), [evaluation]);
+    const citations = useMemo(() => ({
+        sources,
+        reveal: element
+            ? (source) => {
+                void revealUiSource(element, source.id, source.ancestors);
+            }
+            : undefined
+    }), [sources, element]);
     const liveValue = useUiLiveValues(block, evaluation.nodes, queries.currentReadings);
     const sendChoice = chatHost().intelligentUi?.sendChoice;
     const rendering = {
@@ -269,8 +279,9 @@ function UiBlockBody({ block, context, answered, frozen }) {
         ...links,
         answer,
         failedChoiceId,
-        live: queries.live ?? context.live,
-        liveValue: liveValue ?? context.liveValue,
+        live: queries.live,
+        liveValue,
+        choiceReason: uiLiveChoiceReason(t, queries.live),
         onChoose: !queries.ready || queries.reading
             ? undefined
             : sendChoice && block.revision && block.complete && context.phase === 'final'
@@ -305,21 +316,14 @@ function UiBlockBody({ block, context, answered, frozen }) {
                         pending.current = false;
                     });
                 }
-                : context.onChoose
+                : undefined
     };
     const unknown = block.catalogVersion !== UI_CATALOG_VERSION;
     const failed = !unknown && !block.nodes.length && block.diagnostics.length > 0;
     const shownAsText = unknown ? t('blocks.unreadable') : failed ? block.diagnostics[0].message : undefined;
-    return (_jsxs("div", { ref: setElement, className: "relative", "data-ui-block": block.id, "data-ui-revision": block.revision, tabIndex: -1, children: [flashing && _jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce), _jsx(UiBlockFrame, { live: queries.live, nodes: evaluation.nodes, phase: context.phase, fixes: [...block.diagnostics, ...evaluation.diagnostics], shownAsText: shownAsText, answered: answered, children: unknown || failed ? (_jsx(ReplyMarkdown, { text: block.fallback, streaming: false })) : (_jsx(CitationContext, { value: {
-                        sources: sourceTargets(evaluation.nodes),
-                        reveal: element
-                            ? (source) => {
-                                void revealUiSource(element, source.id, source.ancestors);
-                            }
-                            : undefined
-                    }, children: _jsx(UiNodes, { nodes: evaluation.nodes, parent: BLOCK, texts: writtenTexts(block.nodes), context: rendering }) })) })] }));
+    return (_jsxs("div", { ref: setElement, className: "relative", "data-ui-block": block.id, "data-ui-revision": block.revision, tabIndex: -1, children: [flashing && _jsx("span", { className: "chat-flash pointer-events-none absolute inset-0 rounded-lg", "aria-hidden": true }, flash.nonce), _jsx(UiBlockFrame, { live: queries.live, nodes: evaluation.nodes, phase: context.phase, fixes: [...block.diagnostics, ...evaluation.diagnostics], shownAsText: shownAsText, answered: answered, children: unknown || failed ? (_jsx(ReplyMarkdown, { text: block.fallback, streaming: false })) : (_jsx(CitationContext, { value: citations, children: _jsx(UiNodes, { nodes: evaluation.nodes, parent: BLOCK, texts: texts, context: rendering }) })) })] }));
 }
 /* Prose and cards a block gap apart, as the rows of a turn are; text that is only the newline between two fences draws nothing. */
 export function UiReply({ text, blocks, context, answers, queries, reply }) {
-    return (_jsx("div", { className: "flex flex-col gap-(--chat-block-gap)", children: uiReplyParts(text, blocks, context.phase === 'streaming').map((part, index) => part.kind === 'text' ? (part.text.trim() !== '' && (_jsx(Fragment, { children: _jsx(ReplyMarkdown, { text: part.text, streaming: context.phase === 'streaming', reply: reply }) }, `text:${index}`))) : (_jsx(ErrorBoundary, { label: "UI block", resetKeys: [context.scopeId, context.chatId, context.itemId, part.block.id], children: _jsx(UiBlockBody, { block: part.block, frozen: queries?.blocks[part.block.id], answered: answers?.[part.block.id], context: { ...context, blockId: part.block.id } }, JSON.stringify([context.scopeId, context.chatId, context.itemId, part.block.id])) }, part.block.id))) }));
+    return (_jsx("div", { className: "flex flex-col gap-(--chat-block-gap)", children: uiReplyParts(text, blocks, context.phase === 'streaming').map((part, index) => part.kind === 'text' ? (part.text.trim() !== '' && (_jsx(Fragment, { children: _jsx(ReplyMarkdown, { text: part.text, streaming: context.phase === 'streaming', reply: reply }) }, `text:${index}`))) : (_jsx(ErrorBoundary, { label: "UI block", children: _jsx(UiBlockBody, { block: part.block, frozen: queries?.blocks[part.block.id], answered: answers?.[part.block.id], context: { scopeId: context.scopeId, chatId: context.chatId, itemId: context.itemId, phase: context.phase, blockId: part.block.id } }) }, JSON.stringify([context.scopeId, context.chatId, context.itemId, part.block.id])))) }));
 }

package/dist/chat/ui/intelligent-ui/block-local.d.ts

@@ -1,2 +1,11 @@
 import type { UiRenderContext } from './render-context.js';
+export declare class UiPageMemory<Value> {
+    private readonly entries;
+    private readonly limit;
+    constructor(limit: number);
+    has(key: string): boolean;
+    get(key: string): Value | undefined;
+    set(key: string, value: Value): void;
+    get size(): number;
+}
 export declare function useBlockLocal<Value>(context: UiRenderContext, nodeId: string, initial: () => Value): [Value, (next: Value) => void];

package/dist/chat/ui/intelligent-ui/block-local.js

@@ -1,6 +1,35 @@
 import { useState } from 'react';
+/* Values that last as long as the page, past `limit` forgetting the one used longest ago. */
+export class UiPageMemory {
+    entries = new Map();
+    limit;
+    constructor(limit) {
+        this.limit = limit;
+    }
+    has(key) {
+        return this.entries.has(key);
+    }
+    /* Reading a value counts as using it. */
+    get(key) {
+        const value = this.entries.get(key);
+        if (value !== undefined) {
+            this.set(key, value);
+        }
+        return value;
+    }
+    set(key, value) {
+        this.entries.delete(key);
+        this.entries.set(key, value);
+        if (this.entries.size > this.limit) {
+            this.entries.delete(this.entries.keys().next().value);
+        }
+    }
+    get size() {
+        return this.entries.size;
+    }
+}
 // Which tab or section a person opened, so a block the thread unmounts while scrolling comes back as they left it.
-const remembered = new Map();
+const remembered = new UiPageMemory(512);
 /* State of one node that lasts as long as the page, such as a fold; local input state belongs to the runtime instead. */
 export function useBlockLocal(context, nodeId, initial) {
     const key = `${context.scopeId}\n${context.chatId}\n${context.itemId}\n${context.blockId}\n${nodeId}`;

package/dist/chat/ui/intelligent-ui/node-text.d.ts

@@ -1,4 +1,6 @@
+import type { TFunction } from 'i18next';
 import type { UiComponentName, UiProps, UiViewNode } from '@adecore/intelligent-ui';
+import type { UiLiveStatus } from './render-context.js';
 export declare function uiNodeText(node: UiViewNode): string;
 export declare function uiNodeLabel(node: UiViewNode): string;
 export declare function uiChildrenOf<Name extends UiComponentName>(node: UiViewNode, type: Name): UiViewNode<UiProps<Name>>[];
@@ -7,3 +9,7 @@ export declare function uiBlockHead(nodes: readonly UiViewNode[]): {
     label: string;
 } | null;
 export declare function revealUiSource(root: ParentNode, nodeId: string, ancestors?: readonly string[]): Promise<boolean>;
+export declare function uiReasonText(t: TFunction<'agent-chat'>, code: string | undefined, reason: string | undefined): string | undefined;
+export declare function uiWithUnit(text: string, unit: string | undefined): string;
+export declare function uiLiveChoiceReason(t: TFunction<'agent-chat'>, live: UiLiveStatus | null | undefined): string | null;
+export declare function uiUrlDomain(url: string): string;

package/dist/chat/ui/intelligent-ui/node-text.js

@@ -50,3 +50,57 @@ export async function revealUiSource(root, nodeId, ancestors = []) {
     row.scrollIntoView({ block: 'nearest', behavior: reduced ? 'auto' : 'smooth' });
     return true;
 }
+/* The reason codes this version says in its own words; any other code reads as the reason the machine gave. */
+const UI_REASON_CODES = new Set([
+    'access-unavailable',
+    'block-stale',
+    'busy',
+    'link-unchecked',
+    'link-unsupported',
+    'links-unsupported',
+    'no-unique-match',
+    'outside-project',
+    'query-undeclared',
+    'refresh-limit',
+    'result-too-large',
+    'snapshot-too-large',
+    'source-unregistered',
+    'stale-read',
+    'target-unavailable',
+    'timed-out',
+    'unreadable'
+]);
+/* Why a reading failed or a link stayed plain, in the person's language where the code is known. */
+export function uiReasonText(t, code, reason) {
+    return code !== undefined && UI_REASON_CODES.has(code) ? t(`blocks.live.reasons.${code}`) : reason;
+}
+/*
+ * A number with its unit, where a percent sign hugs the number and every other unit stands apart
+ * from it, by a space that never lets the two wrap apart.
+ */
+export function uiWithUnit(text, unit) {
+    if (unit === undefined || unit === '') {
+        return text;
+    }
+    return unit === '%' ? `${text}${unit}` : `${text}\u00a0${unit}`;
+}
+/* Why the choices of a live block are closed: its data is still being read, or the reason a reading failed. Null while nothing live holds them. */
+export function uiLiveChoiceReason(t, live) {
+    if (live === null || live === undefined || live.state === 'fresh') {
+        return null;
+    }
+    if (live.state === 'reading') {
+        return t('blocks.choice.reading');
+    }
+    const source = live.source ?? live.sources[0] ?? '';
+    return uiReasonText(t, live.code, live.reason) ?? t(live.state === 'failed' ? 'blocks.live.failed' : 'blocks.live.refused', { source });
+}
+/* The host of an address without its `www.`, which is how a source or a link in prose says where it goes. */
+export function uiUrlDomain(url) {
+    try {
+        return new URL(url).hostname.replace(/^www\./, '');
+    }
+    catch {
+        return url;
+    }
+}

package/dist/chat/ui/intelligent-ui/registry.js

@@ -2,7 +2,7 @@ import { ChartRenderer } from './renderers/chart.js';
 import { ChoiceRenderer, ChoicesRenderer } from './renderers/choices.js';
 import { CodeBlockRenderer, ImageRenderer, SourceRenderer, SourcesRenderer } from './renderers/content.js';
 import { EntityListRenderer, EntryRenderer, StatRenderer, StatsRenderer, TableRenderer } from './renderers/data.js';
-import { ChecklistRenderer, ItemRenderer, SegmentedRenderer, SliderRenderer, SwitchRenderer } from './renderers/inputs.js';
+import { ButtonRenderer, ChecklistRenderer, ItemRenderer, SegmentedRenderer, SliderRenderer, SwitchRenderer } from './renderers/inputs.js';
 import { CommitRenderer, DiffRenderer, FileRenderer, NodeRenderer } from './renderers/links.js';
 import { SectionRenderer, SectionsRenderer, TabRenderer, TabsRenderer } from './renderers/structure.js';
 import { CalloutRenderer, ProgressRenderer, StepRenderer, StepsRenderer, SummaryRenderer, TagRenderer } from './renderers/text.js';
@@ -43,6 +43,7 @@ export const UI_RENDERERS = {
     Slider: SliderRenderer,
     Segmented: SegmentedRenderer,
     Option: null,
+    Button: ButtonRenderer,
     Show: null,
     Each: null,
     Choices: ChoicesRenderer,

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

@@ -6,6 +6,7 @@ export interface UiLink {
     state: 'chip' | 'plain';
     label?: string;
     reason?: string;
+    code?: string;
 }
 export interface UiAnswer {
     choiceId: string;
@@ -17,6 +18,7 @@ export interface UiLiveStatus {
     readAt: number | null;
     source?: string;
     reason?: string;
+    code?: string;
 }
 export interface UiLiveValue {
     previous?: unknown;
@@ -36,6 +38,7 @@ export interface UiRenderContext {
     openLink?(target: UiLinkTarget): void;
     openUrl?(url: string): void;
     onChoose?(nodeId: string): void;
+    choiceReason?: string | null;
     liveValue?(nodeId: string, prop: string, path?: readonly [row: number, key: string]): UiLiveValue | undefined;
 }
 export interface UiRendererProps<Props> {

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { SegmentBar, useMeasuredWidth } from '@adecore/ui';
 import { formatRounded } from '@adecore/ui/format';
 import { niceCeiling, UI_CHART_ROWS, uiChartData } from '../chart-data.js';
+import { uiWithUnit } from '../node-text.js';
 import { UiFallbackPart } from '../UiFallbackPart.js';
 const HEIGHT = 160;
 const HBAR_ROW = 24;
@@ -21,11 +22,7 @@ function seriesColor(index) {
     return `var(--chart-${index + 1})`;
 }
 function valueText(value, unit) {
-    if (value === null) {
-        return '';
-    }
-    const text = formatRounded(value, 2);
-    return unit === undefined || unit === '' ? text : unit === '%' ? `${text}%` : `${text} ${unit}`;
+    return value === null ? '' : uiWithUnit(formatRounded(value, 2), unit);
 }
 /* The height a chart will take, which its place holds while the node streams. */
 function chartHeight(kind, rows) {
@@ -87,11 +84,12 @@ function VerticalChart({ chart, kind, unit, width }) {
     }, [])
         .join(' ');
     return (_jsxs(_Fragment, { children: [_jsxs("svg", { width: width, height: HEIGHT, "aria-hidden": true, className: "block overflow-visible", onPointerLeave: () => setHover(null), children: [hover !== null && (_jsx("rect", { x: Math.round(AXIS_WIDTH + band * hover), y: PLOT_TOP, width: Math.round(band), height: plotHeight, className: "fill-surface-hover" })), ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: AXIS_WIDTH, x2: width, y1: y(tick), y2: y(tick), className: tick === 0 ? 'stroke-border' : 'stroke-border-soft', shapeRendering: "crispEdges" }), _jsx("text", { x: AXIS_WIDTH - 6, y: y(tick), dy: "0.32em", textAnchor: "end", className: "fill-text-faint text-xs tabular-nums", children: valueText(tick, unit) })] }, tick))), chart.labels.map((label, index) => index % labelEvery === 0 ? (_jsx("text", { x: center(index), y: HEIGHT - 4, textAnchor: "middle", className: "fill-text-faint text-xs", children: label }, index)) : null), kind === 'bar' ? (_jsx("g", { className: clsx(GROW, 'starting:scale-y-0'), style: { transformOrigin: `0px ${baseline}px` }, children: chart.series.map((series, at) => series.values.map((value, index) => value === null ? null : (_jsx("rect", { x: Math.round(AXIS_WIDTH + band * index + gap / 2 + barWidth * at), y: Math.min(y(value), baseline), width: Math.max(1, Math.round(barWidth) - 1), height: Math.abs(y(value) - baseline), rx: 2, style: { fill: seriesColor(at) } }, `${series.key}:${index}`)))) })) : (_jsx("g", { className: clsx(GROW, 'starting:opacity-0'), children: chart.series.map((series, at) => (_jsxs("g", { style: { color: seriesColor(at) }, children: [_jsx("path", { d: segments(series.values), fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }), chart.labels.length <= DOTS_UP_TO &&
-                                    series.values.map((value, index) => value === null ? null : _jsx("circle", { cx: center(index), cy: y(value), r: 2.5, fill: "currentColor" }, index))] }, series.key))) })), chart.labels.map((_, index) => (_jsx("rect", { x: Math.round(AXIS_WIDTH + band * index), y: 0, width: Math.max(1, Math.round(band)), height: HEIGHT, fill: "transparent", onPointerEnter: () => setHover(index) }, index)))] }), hover !== null && _jsx(Readout, { chart: chart, index: hover, unit: unit, left: Math.min(Math.max(center(hover), 64), Math.max(64, width - 64)) })] }));
+                                    series.values.map((value, index) => value === null ? null : _jsx("circle", { cx: center(index), cy: y(value), r: 3, fill: "currentColor" }, index))] }, series.key))) })), chart.labels.map((_, index) => (_jsx("rect", { x: Math.round(AXIS_WIDTH + band * index), y: 0, width: Math.max(1, Math.round(band)), height: HEIGHT, fill: "transparent", onPointerEnter: () => setHover(index) }, index)))] }), hover !== null && _jsx(Readout, { chart: chart, index: hover, unit: unit, left: Math.min(Math.max(center(hover), 64), Math.max(64, width - 64)) })] }));
 }
 /* A row of 24px per category, its label beside the bars. */
 function HorizontalChart({ chart, unit }) {
-    const high = niceCeiling(chart.max);
+    // Bars grow right from zero only, so a chart of only negative values has no length to share and keeps a unit scale.
+    const high = niceCeiling(chart.max) || 1;
     const single = chart.series.length === 1;
     return (_jsx("div", { "aria-hidden": true, className: "flex flex-col", children: chart.labels.map((label, index) => (_jsxs("div", { className: "flex h-6 items-center gap-2 text-xs", children: [_jsx("span", { className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted", children: label }), _jsx("span", { className: "flex min-w-0 grow flex-col justify-center gap-px", children: chart.series.map((series, at) => (_jsx("span", { className: clsx(GROW, 'block origin-left rounded-sm starting:scale-x-0', single ? 'h-3' : 'h-1'), style: { width: `${(Math.max(0, series.values[index] ?? 0) / high) * 100}%`, backgroundColor: seriesColor(at) } }, series.key))) }), single && (_jsx("span", { className: "w-16 shrink-0 text-right text-text-faint tabular-nums", children: valueText(chart.series[0].values[index] ?? null, unit) }))] }, index))) }));
 }

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

@@ -30,12 +30,16 @@ export function ChoiceRenderer({ node, children, context }) {
     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 = (_jsxs("button", { type: "button", "aria-disabled": closed || undefined, "aria-describedby": described ? descriptionId : undefined, className: clsx('flex w-full items-start gap-2 rounded-md border px-2 py-1.5 text-left transition-[opacity,scale,background-color] duration-150 motion-reduce:transition-none', chosen ? 'border-accent bg-accent-soft' : failed ? 'border-status-error bg-surface-hover' : 'border-border bg-surface-hover', !closed && 'hover:bg-surface-active active:scale-99', waiting ? 'opacity-60' : closed && !chosen && 'opacity-50'), onClick: () => {
             if (!closed) {
                 onChoose?.(node.id);
             }
         }, children: [_jsx(Icon, { icon: ArrowRight, size: 14, className: clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint') }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "text-sm font-semibold text-text", children: children }), described && (_jsx("span", { id: descriptionId, className: "line-clamp-2 text-xs text-text-muted", children: detail }))] }), chosen && (_jsxs("span", { className: "mt-0.5 flex shrink-0 items-center gap-1 text-xs text-accent", children: [slow ? _jsx(Spinner, { size: 12 }) : _jsx(Icon, { icon: Check, size: 12 }), answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')] }))] }));
-    return (_jsxs("div", { className: clsx('flex flex-col gap-1', primary === true && 'order-first'), children: [reason !== null ? (_jsx(DisabledReason, { reason: reason, children: row })) : described && detail.length > LONG_CONTEXT ? (_jsx(Tooltip, { label: detail, children: row })) : (row), failed && (_jsx("p", { role: "alert", className: "px-2 text-xs text-status-error", children: t('blocks.choice.failed') }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [reason !== null ? (_jsx(DisabledReason, { reason: reason, children: row })) : described && detail.length > LONG_CONTEXT ? (_jsx(Tooltip, { label: detail, children: row })) : (row), failed && (_jsx("p", { role: "alert", className: "px-2 text-xs text-status-error", children: t('blocks.choice.failed') }))] }));
 }

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PreviewCard } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
@@ -8,7 +8,7 @@ import { chatHost } from '../../../../host.js';
 import { CodeBlock } from '../../CodeBlock.js';
 import { CodeStreamingContext } from '../../code-streaming.js';
 import { ImageThumb } from '../../ImageView.js';
-import { uiChildrenOf, uiNodeLabel, uiNodeText } from '../node-text.js';
+import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text.js';
 // The number of every source by its node id, which the list counts in its own order.
 const SourceNumbers = createContext(new Map());
 /* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
@@ -33,16 +33,9 @@ export function ImageRenderer({ node, children, context }) {
 }
 export function SourcesRenderer({ node, children }) {
     const { t } = useTranslation('agent-chat');
+    const headingId = useId();
     const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
-    return (_jsx(SourceNumbers, { value: numbers, children: _jsxs("section", { "aria-label": t('blocks.sources'), className: "flex flex-col", children: [_jsx("span", { className: "px-2 pb-1 text-xs font-medium text-text-muted", children: t('blocks.sources') }), _jsx("ol", { className: "chat-ui-nodes flex flex-col", children: children })] }) }));
-}
-function domainOf(url) {
-    try {
-        return new URL(url).hostname.replace(/^www\./, '');
-    }
-    catch {
-        return url;
-    }
+    return (_jsx(SourceNumbers, { value: numbers, children: _jsxs("section", { "aria-labelledby": headingId, className: "flex flex-col", children: [_jsx("span", { id: headingId, className: "px-2 pb-1 text-xs font-medium text-text-muted", children: t('blocks.sources') }), _jsx("ol", { className: "chat-ui-nodes flex flex-col", children: children })] }) }));
 }
 /*
  * A source number in running text. Resting on it or focusing it shows the title and the domain, and
@@ -51,7 +44,7 @@ function domainOf(url) {
  */
 export function UiSourceCitation({ number, title, url, onReveal, className }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsxs(PreviewCard.Root, { children: [_jsx(PreviewCard.Trigger, { delay: 300, closeDelay: 150, render: onReveal === undefined ? _jsx("span", {}) : _jsx("button", { type: "button" }), "aria-label": onReveal === undefined ? undefined : t('blocks.citation', { number: formatNumber(number), title }), className: clsx('inline-flex h-4 min-w-4.5 items-center justify-center rounded-sm bg-text/7 px-1 align-[1px] text-2xs leading-4 text-text-muted tabular-nums', onReveal !== undefined && 'cursor-pointer hover:bg-text/12 hover:text-text', className), onClick: onReveal, children: formatNumber(number) }), _jsxs(PreviewCard.Popup, { side: "top", align: "center", sideOffset: 4, className: "flex max-w-72 flex-col px-2.5 py-1.5 text-xs", children: [_jsx("span", { className: "line-clamp-2 text-text", children: title }), _jsx("span", { className: "truncate text-text-faint", children: domainOf(url) })] })] }));
+    return (_jsxs(PreviewCard.Root, { children: [_jsx(PreviewCard.Trigger, { delay: 300, closeDelay: 150, render: onReveal === undefined ? _jsx("span", {}) : _jsx("button", { type: "button" }), "aria-label": onReveal === undefined ? undefined : t('blocks.citation', { number: formatNumber(number), title }), className: clsx('inline-flex h-4 min-w-4.5 items-center justify-center rounded-sm bg-text/7 px-1 align-[1px] text-2xs leading-4 text-text-muted tabular-nums', onReveal !== undefined && 'cursor-pointer hover:bg-text/12 hover:text-text', className), onClick: onReveal, children: formatNumber(number) }), _jsxs(PreviewCard.Popup, { side: "top", align: "center", sideOffset: 4, className: "flex max-w-72 flex-col px-2.5 py-1.5 text-xs", children: [_jsx("span", { className: "line-clamp-2 text-text", children: title }), _jsx("span", { className: "truncate text-text-faint", children: uiUrlDomain(url) })] })] }));
 }
 /*
  * Opens through the host and loads nothing before, not even an icon. The row itself takes focus
@@ -61,6 +54,6 @@ export function SourceRenderer({ node, context }) {
     const number = useContext(SourceNumbers).get(node.id);
     const { title, url } = node.props;
     const { openUrl } = context;
-    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 text-right text-text-faint tabular-nums", children: number }), _jsx("span", { className: "min-w-0 truncate text-text", children: title }), _jsx("span", { className: "shrink-0 text-text-faint", children: domainOf(url) })] }));
+    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 text-right text-text-faint tabular-nums", children: number }), _jsx("span", { className: "min-w-0 truncate text-text", children: title }), _jsx("span", { className: "shrink-0 text-text-faint", children: uiUrlDomain(url) })] }));
     return (_jsx("li", { "data-ui-source": node.id, tabIndex: -1, className: "chat-ui-source scroll-my-2 rounded-md", children: openUrl === undefined ? (_jsx("span", { className: "flex h-8 items-center gap-2 px-2 text-xs", children: face })) : (_jsx("button", { type: "button", className: "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs hover:bg-surface-hover", onClick: () => openUrl(url), children: face })) }));
 }

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) }) }))] }));
 }