@adecore/agents-react 0.21.0 → 0.21.2

package/src/chat/ui/VisualFrame.tsx

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

package/src/chat/ui/composer/keys.ts

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

package/src/chat/ui/intelligent-ui/UiBlockFrame.tsx

@@ -1,11 +1,141 @@
-import { useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { useId, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { UiViewNode } from '@adecore/intelligent-ui';
-import { Skeleton } from '@adecore/ui';
-import { uiBlockHead } from './node-text';
-import { UiHeadContext } from './render-context';
-import { UiBlockFooter, type UiBlockFooterProps } from './UiBlockFooter';
+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';
+import { UiHeadContext, type UiLiveStatus } from './render-context';
+import { useLater } from './use-later';
+
+/* Something the compiler repaired, such as a prop it dropped; never an error to a person. */
+export interface UiBlockFix {
+    code: string;
+    message: string;
+}
+
+export interface UiBlockFooterProps {
+    live?: UiLiveStatus | null;
+    /* The label of the Choice that answered the block, and when, in milliseconds since the epoch. */
+    answered?: { label: string; at: number } | null;
+    fixes?: readonly UiBlockFix[];
+    /* Why the whole block is drawn as its text, such as that it is too large. */
+    shownAsText?: string | null;
+}
+
+const NO_FIXES: readonly UiBlockFix[] = [];
+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 }: { live: UiLiveStatus }) {
+    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 ? (
+        <Spinner size={12} />
+    ) : live.state === 'failed' ? (
+        <Icon icon={TriangleAlert} size={12} className="text-status-needs-you" />
+    ) : live.state === 'refused' ? (
+        <Icon icon={Lock} size={12} />
+    ) : (
+        <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 = (
+        <span tabIndex={hint === null ? undefined : 0} className="flex items-center gap-1.5">
+            {icon}
+            <span>{words}</span>
+            {readAt !== null && live.state !== 'refused' && (
+                <>
+                    <span aria-hidden>·</span>
+                    <time dateTime={new Date(readAt).toISOString()}>
+                        <span ref={ago} className="tabular-nums" />
+                    </time>
+                </>
+            )}
+            {readAt === null && fresh && (
+                <>
+                    <span aria-hidden>·</span>
+                    <span>{t('blocks.live.notRead')}</span>
+                </>
+            )}
+        </span>
+    );
+    return hint === null ? body : <Tooltip label={hint}>{body}</Tooltip>;
+}
+
+/*
+ * 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 }: UiBlockFooterProps) {
+    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 (
+        <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">
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                {live !== null && <LivePart live={live} />}
+                {answered !== null && (
+                    <span className="flex items-center gap-1.5">
+                        <span>{t('blocks.answered', { label: answered.label })}</span>
+                        <span aria-hidden>·</span>
+                        <time dateTime={new Date(answered.at).toISOString()}>{formatMoment(answered.at)}</time>
+                    </span>
+                )}
+                {fixes.length > 0 && (
+                    <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)}
+                    >
+                        <Icon icon={Wrench} size={12} />
+                        {t('blocks.fixes', { count: fixes.length })}
+                    </button>
+                )}
+                {shownAsText !== null && (
+                    <span className="flex items-center gap-1.5">
+                        <span>{t('blocks.shownAsText')}</span>
+                        <span aria-hidden>·</span>
+                        <span>{shownAsText}</span>
+                    </span>
+                )}
+            </div>
+            {fixes.length > 0 && (
+                <ul id={listId} hidden={!fixesOpen} className="flex flex-col gap-0.5 text-text-muted">
+                    {fixes.map((fix, index) => (
+                        <li key={index} className="flex gap-2">
+                            <span className="shrink-0 font-mono">{fix.code}</span>
+                            <span className="min-w-0">{fix.message}</span>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
 
 export interface UiBlockFrameProps extends UiBlockFooterProps {
     /* The evaluated top-level nodes, read for the Summary that heads the block. */

package/src/chat/ui/intelligent-ui/UiReply.tsx

@@ -5,6 +5,7 @@ import {
     memo,
     useContext,
     useEffect,
+    useMemo,
     useRef,
     useState,
     useSyncExternalStore,
@@ -23,7 +24,7 @@ import {
     type UiNode,
     type UiViewNode
 } from '@adecore/intelligent-ui';
-import { ErrorBoundary } from '@adecore/ui';
+import { ErrorBoundary, Tooltip } from '@adecore/ui';
 import type { ChatUiAnswer, ChatUiQueryState } from '@adecore/agent-contracts';
 import { chatHost } from '../../../host';
 import { UiReplyNavigationContext } from '../reply-context';
@@ -31,20 +32,19 @@ import { ReplyMarkdown } from '../Markdown';
 import { rehypeFadeWords } from '../rehype-fade';
 import { UI_RENDERERS } from './registry';
 import type { UiRenderContext, UiRenderer } from './render-context';
+import { UiPageMemory } from './block-local';
 import { UiBlockFrame } from './UiBlockFrame';
 import { UiFallbackPart } from './UiFallbackPart';
 import { useUiLinks } from './use-ui-links';
 import { useUiQueries, useUiLiveValues } from './use-ui-queries';
 import { UiSourceCitation } from './renderers/content';
-import { uiChildrenOf, revealUiSource } from './node-text';
+import { uiChildrenOf, revealUiSource, uiLiveChoiceReason, uiUrlDomain } from './node-text';
 import { uiReplyParts } from './reply-parts';
 
-const localStates = new Map<string, UiState>();
-const LOCAL_STATE_LIMIT = 64;
+const localStates = new UiPageMemory<UiState>(64);
 
 function localState(key: string, block: UiBlock, answered?: ChatUiAnswer): UiState {
     let state = localStates.get(key);
-    localStates.delete(key);
     if (!state) {
         state = new UiState(block);
         if (answered && answered.revision === block.revision) {
@@ -52,10 +52,7 @@ function localState(key: string, block: UiBlock, answered?: ChatUiAnswer): UiSta
                 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;
 }
@@ -67,7 +64,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: Readonly<Record<string, string>> = {
@@ -179,8 +176,6 @@ function sourceTargets(nodes: readonly UiViewNode[]): Map<number, CitationTarget
 
 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: typeof FADE_PLUGINS = [];
 
@@ -193,9 +188,11 @@ function ProseLink({ href, children }: { href?: string; children?: ReactNode })
         return children;
     }
     return (
-        <button type="button" className="cursor-pointer text-accent underline underline-offset-2 select-text" onClick={() => openUrl(href)}>
-            {children}
-        </button>
+        <Tooltip label={uiUrlDomain(href)}>
+            <button type="button" className="cursor-pointer text-accent underline underline-offset-2 select-text" onClick={() => openUrl(href)}>
+                {children}
+            </button>
+        </Tooltip>
     );
 }
 
@@ -227,7 +224,7 @@ const UiProse = memo(function UiProse({ text, fade, openUrl }: { text: string; f
             <ReactMarkdown
                 remarkPlugins={PROSE_PLUGINS}
                 rehypePlugins={fade ? FADE_PLUGINS : NO_PLUGINS}
-                allowedElements={fade ? FADING_PROSE_ELEMENTS : PROSE_ELEMENTS}
+                allowedElements={PROSE_ELEMENTS}
                 unwrapDisallowed
                 components={PROSE_COMPONENTS}
             >
@@ -275,6 +272,10 @@ function UiNodes({ nodes, parent, texts, context }: UiNodesProps): ReactNode {
         </UiNodeBoundary>
     );
     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);
     }
@@ -364,6 +365,9 @@ function UiNodeBody({
     );
 }
 
+/* What names a block and whether it still streams; the rest of its render context the block works out itself. */
+type UiBlockIdentity = Pick<UiRenderContext, 'scopeId' | 'chatId' | 'itemId' | 'blockId' | 'phase'>;
+
 function UiBlockBody({
     block,
     context,
@@ -371,7 +375,7 @@ function UiBlockBody({
     frozen
 }: {
     block: UiBlock;
-    context: UiRenderContext;
+    context: UiBlockIdentity;
     answered?: ChatUiAnswer;
     frozen?: ChatUiQueryState['blocks'][string];
 }): ReactNode {
@@ -379,7 +383,7 @@ function UiBlockBody({
     const key = JSON.stringify([context.scopeId, context.chatId, context.itemId, block.id]);
     const [state] = useState(() => localState(key, block, answered));
     state.sync(block);
-    useSyncExternalStore(
+    const stateRevision = useSyncExternalStore(
         (listener) => state.subscribe(listener),
         () => state.snapshot(),
         () => state.snapshot()
@@ -399,7 +403,7 @@ function UiBlockBody({
             ? { choiceId: answered.choiceId, state: answered.queued ? ('queued' as const) : ('sent' as const) }
             : optimistic?.revision === block.revision
               ? optimistic
-              : context.answer;
+              : null;
     const [element, setElement] = useState<HTMLDivElement | null>(null);
     const navigation = useContext(UiReplyNavigationContext);
     const flash = navigation?.flash;
@@ -407,7 +411,22 @@ function UiBlockBody({
         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: CitationTarget) => {
+                      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: UiRenderContext = {
@@ -415,8 +434,9 @@ function UiBlockBody({
         ...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
@@ -452,7 +472,7 @@ function UiBlockBody({
                                 pending.current = false;
                             });
                     }
-                  : context.onChoose
+                  : undefined
     };
     const unknown = block.catalogVersion !== UI_CATALOG_VERSION;
     const failed = !unknown && !block.nodes.length && block.diagnostics.length > 0;
@@ -471,17 +491,8 @@ function UiBlockBody({
                 {unknown || failed ? (
                     <ReplyMarkdown text={block.fallback} streaming={false} />
                 ) : (
-                    <CitationContext
-                        value={{
-                            sources: sourceTargets(evaluation.nodes),
-                            reveal: element
-                                ? (source) => {
-                                      void revealUiSource(element, source.id, source.ancestors);
-                                  }
-                                : undefined
-                        }}
-                    >
-                        <UiNodes nodes={evaluation.nodes} parent={BLOCK} texts={writtenTexts(block.nodes)} context={rendering} />
+                    <CitationContext value={citations}>
+                        <UiNodes nodes={evaluation.nodes} parent={BLOCK} texts={texts} context={rendering} />
                     </CitationContext>
                 )}
             </UiBlockFrame>
@@ -500,7 +511,7 @@ export function UiReply({
 }: {
     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'];
@@ -515,13 +526,12 @@ export function UiReply({
                         </Fragment>
                     )
                 ) : (
-                    <ErrorBoundary key={part.block.id} label="UI block" resetKeys={[context.scopeId, context.chatId, context.itemId, part.block.id]}>
+                    <ErrorBoundary key={JSON.stringify([context.scopeId, context.chatId, context.itemId, part.block.id])} label="UI block">
                         <UiBlockBody
-                            key={JSON.stringify([context.scopeId, context.chatId, context.itemId, part.block.id])}
                             block={part.block}
                             frozen={queries?.blocks[part.block.id]}
                             answered={answers?.[part.block.id]}
-                            context={{ ...context, blockId: part.block.id }}
+                            context={{ scopeId: context.scopeId, chatId: context.chatId, itemId: context.itemId, phase: context.phase, blockId: part.block.id }}
                         />
                     </ErrorBoundary>
                 )

package/src/chat/ui/intelligent-ui/block-local.ts

@@ -1,8 +1,43 @@
 import { useState } from 'react';
 import type { UiRenderContext } from './render-context';
 
+/* Values that last as long as the page, past `limit` forgetting the one used longest ago. */
+export class UiPageMemory<Value> {
+    private readonly entries = new Map<string, Value>();
+    private readonly limit: number;
+
+    constructor(limit: number) {
+        this.limit = limit;
+    }
+
+    has(key: string): boolean {
+        return this.entries.has(key);
+    }
+
+    /* Reading a value counts as using it. */
+    get(key: string): Value | undefined {
+        const value = this.entries.get(key);
+        if (value !== undefined) {
+            this.set(key, value);
+        }
+        return value;
+    }
+
+    set(key: string, value: Value): void {
+        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(): number {
+        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<string, unknown>();
+const remembered = new UiPageMemory<unknown>(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<Value>(context: UiRenderContext, nodeId: string, initial: () => Value): [Value, (next: Value) => void] {

package/src/chat/ui/intelligent-ui/node-text.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';
 
 /* The text a node holds, every `$text` below it joined as written, such as the code of a CodeBlock. */
 export function uiNodeText(node: UiViewNode): string {
@@ -57,3 +59,61 @@ export async function revealUiSource(root: ParentNode, nodeId: string, 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: TFunction<'agent-chat'>, code: string | undefined, reason: string | undefined): string | undefined {
+    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: string, unit: string | undefined): string {
+    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: TFunction<'agent-chat'>, live: UiLiveStatus | null | undefined): string | null {
+    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: string): string {
+    try {
+        return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+        return url;
+    }
+}

package/src/chat/ui/intelligent-ui/registry.ts

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

package/src/chat/ui/intelligent-ui/render-context.ts

@@ -1,9 +1,9 @@
 import { createContext, type ReactNode } from 'react';
 import type { UiComponentName, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-
-export type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 import type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 
+export type { UiLinkTarget };
+
 /* How the host lets a link be drawn: a chip it can open, or plain text it cannot. */
 export interface UiLink {
     state: 'chip' | 'plain';
@@ -11,6 +11,8 @@ export interface UiLink {
     label?: string;
     /* Why a plain link is not a chip, in its tooltip. */
     reason?: string;
+    /* The stable code of that reason, which a client words itself where it knows it. */
+    code?: string;
 }
 
 /* The Choice that answered a block. `sending` already reads as sent, so a second click does nothing. */
@@ -30,6 +32,8 @@ export interface UiLiveStatus {
     source?: string;
     /* Why a reading failed, in its tooltip. */
     reason?: string;
+    /* The stable code of that reason, which a client words itself where it knows it. */
+    code?: string;
 }
 
 /* Live history is separate from the comparison the agent supplies in Stat.previous. */
@@ -57,6 +61,8 @@ export interface UiRenderContext {
     openLink?(target: UiLinkTarget): void;
     openUrl?(url: string): void;
     onChoose?(nodeId: string): void;
+    /* Why the choices are closed while `onChoose` is absent, such as live data still being read; without it they say they are not available. */
+    choiceReason?: string | null;
     /* Table cells use the evaluated rows index and column key. */
     liveValue?(nodeId: string, prop: string, path?: readonly [row: number, key: string]): UiLiveValue | undefined;
 }

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

@@ -6,6 +6,7 @@ import type { UiProps } from '@adecore/intelligent-ui';
 import { SegmentBar, useMeasuredWidth } from '@adecore/ui';
 import { formatRounded } from '@adecore/ui/format';
 import { niceCeiling, UI_CHART_ROWS, uiChartData, type UiChartData } from '../chart-data';
+import { uiWithUnit } from '../node-text';
 import type { UiRendererProps } from '../render-context';
 import { UiFallbackPart } from '../UiFallbackPart';
 
@@ -28,11 +29,7 @@ function seriesColor(index: number): string {
 }
 
 function valueText(value: number | null, unit: string | undefined): string {
-    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. */
@@ -210,7 +207,7 @@ function VerticalChart({ chart, kind, unit, width }: { chart: UiChartData; kind:
                                 />
                                 {chart.labels.length <= DOTS_UP_TO &&
                                     series.values.map((value, index) =>
-                                        value === null ? null : <circle key={index} cx={center(index)} cy={y(value)} r={2.5} fill="currentColor" />
+                                        value === null ? null : <circle key={index} cx={center(index)} cy={y(value)} r={3} fill="currentColor" />
                                     )}
                             </g>
                         ))}
@@ -235,7 +232,8 @@ function VerticalChart({ chart, kind, unit, width }: { chart: UiChartData; kind:
 
 /* A row of 24px per category, its label beside the bars. */
 function HorizontalChart({ chart, unit }: { chart: UiChartData; unit: string | undefined }) {
-    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 (
         <div aria-hidden className="flex flex-col">