@adecore/agents-react 0.21.2 → 0.22.1

package/dist/chat/ui/SubagentInfo.js

@@ -1,20 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState } from 'react';
-import clsx from 'clsx';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ChevronDown } from 'lucide-react';
 import { entryTimeOf, statusWordOf, subagentFacts, taskIdOf } from '../subagent-list.js';
 import { useSubagentItem } from '../subagent-view.js';
 import { StatusIcon } from './ChatActivity.js';
-import { Markdown } from './Markdown.js';
-import { Icon, useNow } from '@adecore/ui';
+import { SubagentActions, SubagentBreadcrumb } from './SubagentControls.js';
+import { useNow } from '@adecore/ui';
 import { useModelName } from '../../agents/model-name.js';
 import { useChatRow } from '../../state/chats.js';
 import { chatHost } from '../../host.js';
 import { useChatScope } from '../../scope.js';
 /*
- * What a sub-agent is, over its conversation: its state and time, the model it runs on and what it
- * spent, and the task it was given behind a fold. Nothing for a conversation whose row the thread lost.
+ * What a sub-agent is, over its conversation: the way down to it, its state and time, the model it runs on
+ * and what it spent, and the way out. Only the way down and out for a conversation whose row the thread lost.
  */
 export function SubagentInfo({ chatId, toolUseId }) {
     const { t } = useTranslation('agent-chat');
@@ -24,11 +22,7 @@ export function SubagentInfo({ chatId, toolUseId }) {
     const task = chatHost().tasks.useTask(id, item === null ? null : taskIdOf(item));
     const modelName = useModelName(provider, item?.model ?? '');
     const now = useNow(1000, item?.status === 'running');
-    const [open, setOpen] = useState(false);
-    if (item === null) {
-        return null;
-    }
-    const word = statusWordOf(item, task);
-    const facts = subagentFacts(item, item.model === undefined ? null : modelName);
-    return (_jsx("section", { "aria-label": t('subagents.info.label'), className: "shrink-0 border-b border-border px-4 py-2", children: _jsxs("div", { className: "chat-column-content flex flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-text-faint", children: [_jsx(StatusIcon, { word: word }), _jsx("span", { className: "sr-only", children: t(`common.status.${word}`) }), _jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: entryTimeOf(item, task, now) }), facts.map((fact) => (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "min-w-0 truncate", children: fact })] }, fact))), _jsx("span", { className: "grow" }), item.prompt && (_jsxs("button", { type: "button", className: "flex shrink-0 items-center gap-1.5 text-text-muted hover:text-text", "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [_jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('transition-transform', open && 'rotate-180') }), open ? t('subagents.info.hideTask') : t('subagents.info.showTask')] }))] }), open && item.prompt && (_jsx("div", { className: "max-h-60 overflow-auto rounded-md border border-border bg-surface-raised px-3 py-2 text-xs select-text", children: _jsx(Markdown, { text: item.prompt }) }))] }) }));
+    const word = item === null ? null : statusWordOf(item, task);
+    const facts = item === null ? [] : subagentFacts(item, item.model === undefined ? null : modelName);
+    return (_jsx("section", { "aria-label": t('subagents.info.label'), className: "shrink-0 border-b border-border px-4 py-1.5", children: _jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-text-faint", children: [_jsx(SubagentBreadcrumb, { chatId: chatId, className: "max-w-1/3 shrink-0 font-medium" }), item !== null && word !== null && (_jsxs(_Fragment, { children: [_jsx(StatusIcon, { word: word }), _jsx("span", { className: "sr-only", children: t(`common.status.${word}`) }), _jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: entryTimeOf(item, task, now) })] })), facts.map((fact) => (_jsxs(Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { className: "min-w-0 truncate", children: fact })] }, fact))), _jsx("span", { className: "grow" }), _jsx(SubagentActions, { chatId: chatId })] }) }));
 }

package/dist/chat/ui/SubagentStopButton.js

@@ -19,7 +19,8 @@ export function SubagentStopButton({ chatId, item, size = 'xs', className }) {
     }
     const send = () => {
         void actions.stopSubagent(chatId, item.toolUseId).catch((e) => {
-            const description = e instanceof Error ? e.message : t('subagents.noAnswer');
+            const stale = e instanceof Error && 'code' in e && e.code === 'subagent-stale';
+            const description = stale ? t('subagents.stale') : e instanceof Error ? e.message : t('subagents.noAnswer');
             chatHost().notify({ kind: 'error', title: t('subagents.stopFailed'), description });
         });
     };

package/dist/chat/ui/Timeline.js

@@ -37,6 +37,8 @@ import { AgentIcon } from '../../agents/AgentIcon.js';
 import { useModelName } from '../../agents/model-name.js';
 import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
 const ESTIMATED_ROW_PX = 56;
+// How long a jump waits for a thread that is still loading before it calls the item missing.
+const JUMP_THREAD_WAIT_MS = 8000;
 /* A jump puts its row at the top and stops following the end, so the reader stays where they landed. */
 function showRowAtTop(virtualizer, followRef, index) {
     followRef.current = false;
@@ -347,9 +349,16 @@ export function Timeline({ chatId, composer, overlay }) {
         if (index !== -1) {
             setSeeking(null);
             showRowAtTop(virtualizer, followRef, index);
+            if (seeking.options?.flash) {
+                useTimelineFlash.getState().flash(seeking.key, seeking.itemId, false);
+            }
+            return;
+        }
+        // The thread has not loaded yet, so nothing says the item is missing; the effect below bounds the wait.
+        if (items === undefined) {
             return;
         }
-        const item = items?.[seeking.itemId];
+        const item = items[seeking.itemId];
         if (item === undefined && cursor !== null) {
             loadEarlier();
             return;
@@ -360,10 +369,22 @@ export function Timeline({ chatId, composer, overlay }) {
             return;
         }
         setSeeking(null);
+        seeking.options?.onMissing?.();
     }, [seeking, rows, items, turns, virtualizer, cursor, loadEarlier, keyOf, chatId]);
-    useEffect(() => registerItemJumper(keyOf(chatId), (itemId) => {
+    const waitingForThread = seeking !== null && items === undefined;
+    useEffect(() => {
+        if (!waitingForThread) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            setSeeking(null);
+            seeking?.options?.onMissing?.();
+        }, JUMP_THREAD_WAIT_MS);
+        return () => window.clearTimeout(timer);
+    }, [waitingForThread, seeking]);
+    useEffect(() => registerItemJumper(keyOf(chatId), (itemId, options) => {
         setLanding(null);
-        setSeeking({ itemId, key: keyOf(chatId) });
+        setSeeking({ itemId, key: keyOf(chatId), options });
     }), [keyOf, chatId]);
     useLayoutEffect(() => {
         if (!landing || landing.key !== keyOf(chatId)) {

package/dist/chat/ui/composer/menu-aria.d.ts

@@ -0,0 +1,10 @@
+export interface ComposerMenuAriaInput {
+    label: string;
+    listId: string;
+    open: boolean;
+    activeIndex: number;
+    count: number;
+}
+export declare function clampMenuIndex(index: number, count: number): number;
+export declare function optionIdOf(listId: string, index: number): string;
+export declare function composerMenuAria({ label, listId, open, activeIndex, count }: ComposerMenuAriaInput): Record<string, string>;

package/dist/chat/ui/composer/menu-aria.js

@@ -0,0 +1,18 @@
+/* The index that still points at an option once the list has shrunk under a stale one. */
+export function clampMenuIndex(index, count) {
+    return Math.min(index, Math.max(count - 1, 0));
+}
+export function optionIdOf(listId, index) {
+    return `${listId}-${index}`;
+}
+/*
+ * The attributes the editor's content element takes while a suggestion menu stands beside it. The
+ * element keeps its `textbox` role; ARIA 1.2 lets it name the option the arrow keys are on.
+ */
+export function composerMenuAria({ label, listId, open, activeIndex, count }) {
+    return {
+        'aria-label': label,
+        'aria-autocomplete': 'list',
+        ...(open && count > 0 ? { 'aria-controls': listId, 'aria-activedescendant': optionIdOf(listId, activeIndex) } : {})
+    };
+}

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

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Lock, Radio, TriangleAlert, Wrench } from 'lucide-react';
+import { Info, Lock, Radio, TriangleAlert } 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';
@@ -36,7 +36,7 @@ function LivePart({ live }) {
     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
+ * The line under a block, only when it has something to say: live, answered, noted 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 }) {
@@ -46,7 +46,7 @@ function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAs
     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))) }))] }));
+    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: Info, size: 12 }), t('blocks.notes', { 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;
 /*

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

@@ -7,5 +7,5 @@ import { Markdown } from '../Markdown.js';
  */
 export function UiFallbackPart({ fallback, problem }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsxs("div", { className: "flex flex-col gap-1 rounded-md bg-surface-hover p-2", children: [_jsx("span", { className: "text-xs text-text-faint", children: problem.kind === 'unknown' ? t('blocks.unknownComponent', { component: problem.component }) : t('blocks.renderFailed') }), fallback !== '' && _jsx(Markdown, { text: fallback, fileLinks: false })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1 rounded-md bg-surface-hover p-2", children: [_jsx("span", { className: "text-xs text-text-faint", children: problem.kind === 'unknown' ? t('blocks.unknownComponent', { component: problem.component }) : t('blocks.renderFailed') }), fallback !== '' && (_jsx("div", { className: "min-w-0 wrap-anywhere", children: _jsx(Markdown, { text: fallback, fileLinks: false }) }))] }));
 }

package/dist/chat/ui/intelligent-ui/chart-data.d.ts

@@ -1,16 +1,36 @@
 import type { UiProps } from '@adecore/intelligent-ui';
 export declare const UI_CHART_SERIES = 6;
 export declare const UI_CHART_ROWS = 60;
+type ChartKind = UiProps<'Chart'>['kind'];
 export interface UiChartSeries {
     key: string;
     values: (number | null)[];
 }
-export interface UiChartData {
+export interface UiChartValues {
     labels: string[];
     series: UiChartSeries[];
+}
+export interface UiChartData extends UiChartValues {
+    kind: ChartKind;
     min: number;
     max: number;
     truncated: boolean;
+    total: number;
+    omitted: string[];
 }
-export declare function uiChartData(data: UiProps<'Chart'>['data'], kind: UiProps<'Chart'>['kind']): UiChartData | null;
+export declare function uiChartValues(data: UiProps<'Chart'>['data']): UiChartValues;
+export declare function uiChartRange(min: number, max: number): {
+    low: number;
+    high: number;
+} | null;
+export declare function uiChartData(data: UiProps<'Chart'>['data'], kind: ChartKind): UiChartData | null;
+export declare const UI_CHART_CHARACTER = 7.5;
+export declare function uiChartCharacter(rootFontSize: number): number;
+export declare function uiChartTextWidth(text: string, character?: number): number;
+export declare function uiChartText(text: string, room: number, character?: number): string;
+export declare function uiChartAxis(ticks: readonly string[], width: number, character?: number): {
+    axisWidth: number;
+    tickTexts: string[];
+};
 export declare function niceCeiling(value: number): number;
+export {};

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

@@ -2,38 +2,102 @@
 export const UI_CHART_SERIES = 6;
 /* Categories a chart draws; more would not fit a column of a thread. */
 export const UI_CHART_ROWS = 60;
-/*
- * The series a chart can draw: every key besides `label` with a finite number in some row, the
- * first six of them. A value that is missing or no finite number is a gap. Null when there is no
- * row or no series, which draws the fallback.
- */
-export function uiChartData(data, kind) {
-    const rows = data.slice(0, UI_CHART_ROWS);
+function numericKeys(rows) {
     const keys = [];
     for (const row of rows) {
         for (const [key, value] of Object.entries(row)) {
-            if (key !== 'label' && !keys.includes(key) && keys.length < UI_CHART_SERIES && typeof value === 'number' && Number.isFinite(value)) {
+            if (key !== 'label' && !keys.includes(key) && typeof value === 'number' && Number.isFinite(value)) {
                 keys.push(key);
             }
         }
     }
+    return keys;
+}
+function valuesOf(rows, keys) {
+    return {
+        labels: rows.map((row) => (typeof row.label === 'string' || typeof row.label === 'number' ? String(row.label) : '')),
+        series: keys.map((key) => ({
+            key,
+            values: rows.map((row) => {
+                const value = row[key];
+                return typeof value === 'number' && Number.isFinite(value) ? value : null;
+            })
+        }))
+    };
+}
+/* All of a chart's numbers, for the table a person can open beside a drawing that left some out. */
+export function uiChartValues(data) {
+    return valuesOf(data, numericKeys(data));
+}
+/*
+ * The rounded ends of a value axis, or null when no drawing can scale to them: the span has to be
+ * finite and above zero, and so does one over it, which rules out a subnormal span as well.
+ */
+export function uiChartRange(min, max) {
+    const low = min < 0 ? -niceCeiling(-min) : 0;
+    const high = max > 0 ? niceCeiling(max) : low === 0 ? 1 : 0;
+    const span = high - low;
+    return span > 0 && Number.isFinite(span) && Number.isFinite(1 / span) ? { low, high } : null;
+}
+/*
+ * The series a chart can draw: every key besides `label` with a finite number in some row, the
+ * first six of them. A value that is missing or no finite number is a gap. Null when there is no
+ * row or no series, or when the numbers are too large to scale, which draws the fallback.
+ */
+export function uiChartData(data, kind) {
+    const rows = data.slice(0, UI_CHART_ROWS);
+    const keys = numericKeys(rows);
     if (rows.length === 0 || keys.length === 0) {
         return null;
     }
-    const series = keys.map((key) => ({
-        key,
-        values: rows.map((row) => {
-            const value = row[key];
-            return typeof value === 'number' && Number.isFinite(value) ? value : null;
-        })
-    }));
-    const labels = rows.map((row) => (typeof row.label === 'string' || typeof row.label === 'number' ? String(row.label) : ''));
-    const extents = kind === 'stacked'
-        ? labels.map((_, index) => series.reduce((sum, { values }) => sum + Math.max(0, values[index] ?? 0), 0))
+    const { labels, series } = valuesOf(rows, keys.slice(0, UI_CHART_SERIES));
+    const negative = series.some(({ values }) => values.some((value) => value !== null && value < 0));
+    const drawn = kind === 'stacked' && negative ? 'bar' : kind;
+    const extents = drawn === 'stacked'
+        ? labels.map((_, index) => series.reduce((sum, { values }) => sum + (values[index] ?? 0), 0))
         : series.flatMap(({ values }) => values.filter((value) => value !== null));
     const min = Math.min(0, ...extents);
     const max = Math.max(0, ...extents);
-    return { labels, series, min, max: max === min ? min + 1 : max, truncated: data.length > rows.length };
+    if (uiChartRange(min, max) === null) {
+        return null;
+    }
+    return {
+        labels,
+        series,
+        kind: drawn,
+        min,
+        max: max === min ? min + 1 : max,
+        truncated: data.length > rows.length,
+        total: data.length,
+        omitted: numericKeys(data).filter((key) => !series.some((drawnSeries) => drawnSeries.key === key))
+    };
+}
+/* The width of one character of a chart's type at a 16px root, an estimate since SVG text cannot wrap or be measured before it draws. */
+export const UI_CHART_CHARACTER = 7.5;
+/* The narrowest a value axis is, and the gap between a tick label and the plot. */
+const AXIS_WIDTH = 44;
+const AXIS_GAP = 8;
+/* The character width for a root font size, since chart type is set in rem and follows a person's larger text. */
+export function uiChartCharacter(rootFontSize) {
+    return Number.isFinite(rootFontSize) && rootFontSize > 0 ? (UI_CHART_CHARACTER * rootFontSize) / 16 : UI_CHART_CHARACTER;
+}
+export function uiChartTextWidth(text, character = UI_CHART_CHARACTER) {
+    return Math.ceil(text.length * character);
+}
+/* Text cut to the room it has, so a label never reaches past its place; the whole of it is in the values. */
+export function uiChartText(text, room, character = UI_CHART_CHARACTER) {
+    const fit = Math.floor(room / character);
+    return text.length <= fit ? text : `${text.slice(0, Math.max(1, fit - 1))}…`;
+}
+/* A value axis as wide as its longest tick label, at most two fifths of the chart; a label longer than that is cut. */
+export function uiChartAxis(ticks, width, character = UI_CHART_CHARACTER) {
+    const scale = character / UI_CHART_CHARACTER;
+    const room = Math.max(AXIS_WIDTH * scale, Math.floor(width * 0.4));
+    const tickTexts = ticks.map((tick) => uiChartText(tick, room - AXIS_GAP, character));
+    return {
+        axisWidth: Math.round(Math.min(room, Math.max(AXIS_WIDTH * scale, ...tickTexts.map((text) => uiChartTextWidth(text, character) + AXIS_GAP)))),
+        tickTexts
+    };
 }
 /* A round number at or above `value`, for the top of an axis: 1, 2, 2.5 or 5 times a power of ten. */
 export function niceCeiling(value) {

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

@@ -1,3 +1,3 @@
 import type { UiProps } from '@adecore/intelligent-ui';
 import type { UiRendererProps } from '../render-context.js';
-export declare function ChartRenderer({ node }: UiRendererProps<UiProps<'Chart'>>): import("react").JSX.Element;
+export declare function ChartRenderer({ node, context }: UiRendererProps<UiProps<'Chart'>>): import("react").JSX.Element;

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

@@ -2,17 +2,20 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useMemo, useState } from 'react';
 import clsx from 'clsx';
 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 { Button, SegmentBar, Tooltip, useMeasuredWidth } from '@adecore/ui';
+import { formatNumber, formatRounded } from '@adecore/ui/format';
+import { useBlockLocal } from '../block-local.js';
+import { UI_CHART_CHARACTER, UI_CHART_ROWS, uiChartCharacter, uiChartAxis, uiChartData, uiChartRange, uiChartText, uiChartTextWidth, uiChartValues } from '../chart-data.js';
 import { uiWithUnit } from '../node-text.js';
+import { useTruncated } from '../use-truncated.js';
 import { UiFallbackPart } from '../UiFallbackPart.js';
 const HEIGHT = 160;
 const HBAR_ROW = 24;
 const STACKED_ROW = 28;
-const AXIS_WIDTH = 44;
 const PLOT_TOP = 8;
 const LABEL_ROOM = 20;
+/* A unit longer than this stands once above the plot instead of beside every tick. */
+const UNIT_ON_TICKS = 5;
 /* The narrowest band a category label is written under; narrower bands skip labels. */
 const LABEL_BAND = 56;
 /* Points get a dot up to this many categories; more would crowd the line. */
@@ -24,56 +27,84 @@ function seriesColor(index) {
 function valueText(value, unit) {
     return value === null ? '' : uiWithUnit(formatRounded(value, 2), unit);
 }
+function unitApart(unit) {
+    return unit !== undefined && unit.length > UNIT_ON_TICKS;
+}
+/* Where a value axis stands and how much room its category labels get, from the labels it writes. */
+function verticalLayout(chart, unit, width, character) {
+    // uiChartData only hands over data whose range is finite.
+    const { low, high } = uiChartRange(chart.min, chart.max);
+    const ticks = low === 0 ? [0, high / 2, high] : [low, 0, high];
+    const tickUnit = unitApart(unit) ? undefined : unit;
+    const { axisWidth, tickTexts } = uiChartAxis(ticks.map((tick) => valueText(tick, tickUnit)), width, character);
+    const band = Math.max(0, width - axisWidth) / chart.labels.length;
+    const labelEvery = Math.max(1, Math.ceil(LABEL_BAND / Math.max(1, band)));
+    return { low, high, ticks, tickTexts, axisWidth, band, labelEvery, labelRoom: Math.min(band * labelEvery, Math.max(0, width - axisWidth)) };
+}
+/* Whether a drawing in SVG at this width cuts a category label short, which then offers the values to read it whole; HTML rows are measured where they stand. */
+function labelsCut(chart, unit, width, character) {
+    if (width <= 0 || chart.kind === 'hbar' || chart.kind === 'stacked') {
+        return false;
+    }
+    const { labelRoom } = verticalLayout(chart, unit, width, character);
+    return chart.labels.some((label) => uiChartTextWidth(label, character) > labelRoom);
+}
+/* The character width of chart type, which follows the root font size; a drawing depends on a measured width, so only a page reads it. */
+function useChartCharacter() {
+    const [character] = useState(() => typeof document === 'undefined' ? UI_CHART_CHARACTER : uiChartCharacter(Number.parseFloat(getComputedStyle(document.documentElement).fontSize)));
+    return character;
+}
 /* The height a chart will take, which its place holds while the node streams. */
 function chartHeight(kind, rows) {
     const count = Math.max(1, Math.min(rows, UI_CHART_ROWS));
     return kind === 'hbar' ? count * HBAR_ROW : kind === 'stacked' ? count * STACKED_ROW : HEIGHT;
 }
-/* One sentence with the main point, which a screen reader hears in place of the drawing. */
-function chartSummary(chart, unit, t) {
+/* One sentence with the main point over all of the data, drawn or not, which a screen reader hears in place of the drawing. */
+function chartSummary(values, unit, t) {
     let top = null;
-    for (const series of chart.series) {
+    for (const series of values.series) {
         for (let i = 0; i < series.values.length; i++) {
             const value = series.values[i];
             if (value !== null && value !== undefined && (top === null || value > top.value)) {
-                top = { label: chart.labels[i] ?? '', series: series.key, value };
+                top = { label: values.labels[i] ?? '', series: series.key, value };
             }
         }
     }
     if (top === null) {
         return t('blocks.chart.values');
     }
-    return chart.series.length > 1
-        ? t('blocks.chart.summarySeries', { count: chart.labels.length, series: top.series, label: top.label, value: valueText(top.value, unit) })
-        : t('blocks.chart.summary', { count: chart.labels.length, label: top.label, value: valueText(top.value, unit) });
+    return values.series.length > 1
+        ? t('blocks.chart.summarySeries', { count: values.labels.length, series: top.series, label: top.label, value: valueText(top.value, unit) })
+        : t('blocks.chart.summary', { count: values.labels.length, label: top.label, value: valueText(top.value, unit) });
 }
 function Legend({ chart }) {
     return (_jsx("div", { "aria-hidden": true, className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted", children: chart.series.map((series, index) => (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: seriesColor(index) } }), series.key] }, series.key))) }));
 }
-/* The numbers behind the drawing, for a screen reader. */
-function ValuesTable({ chart, unit }) {
+/* Every number of the data, for a screen reader, and on screen once a person opens it. */
+function ValuesTable({ values, unit, shown }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: t('blocks.chart.values') }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), chart.series.map((series) => (_jsx("th", { scope: "col", children: series.key }, series.key)))] }) }), _jsx("tbody", { children: chart.labels.map((label, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: label }), chart.series.map((series) => (_jsx("td", { children: valueText(series.values[index] ?? null, unit) }, series.key)))] }, index))) })] }));
+    const table = (_jsxs("table", { className: shown ? 'w-full border-collapse text-xs tabular-nums' : undefined, children: [_jsx("caption", { className: shown ? 'sr-only' : undefined, children: t('blocks.chart.values') }), _jsx("thead", { className: shown ? 'sticky top-0 z-1 bg-surface-hover' : undefined, children: _jsxs("tr", { children: [_jsx("td", {}), values.series.map((series) => (_jsx("th", { scope: "col", className: shown ? 'h-8 px-2 text-right font-medium whitespace-nowrap text-text-muted' : undefined, children: series.key }, series.key)))] }) }), _jsx("tbody", { children: values.labels.map((label, index) => (_jsxs("tr", { className: shown ? 'border-t border-border-soft' : undefined, children: [_jsx("th", { scope: "row", className: shown ? 'h-8 px-2 text-left font-normal wrap-anywhere text-text-muted' : undefined, children: label }), values.series.map((series) => (_jsx("td", { className: shown ? 'h-8 px-2 text-right whitespace-nowrap text-text' : undefined, children: valueText(series.values[index] ?? null, unit) }, series.key)))] }, index))) })] }));
+    // A table grows to its widest cell whatever width it is given, so it is hidden inside a block that clips.
+    return _jsx("div", { className: shown ? 'max-h-80 w-full overflow-auto rounded-md border border-border-soft' : 'sr-only', children: table });
 }
 /* The values of one category beside the pointer. */
 function Readout({ chart, index, left, unit }) {
-    return (_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute top-0 z-1 flex -translate-x-1/2 flex-col gap-0.5 rounded-md bg-surface-raised px-2 py-1 text-xs whitespace-nowrap shadow-raised", style: { left }, children: [_jsx("span", { className: "font-medium text-text", children: chart.labels[index] }), chart.series.map((series, at) => (_jsxs("span", { className: "flex items-center gap-1.5 text-text-muted tabular-nums", children: [_jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: seriesColor(at) } }), chart.series.length > 1 && _jsx("span", { children: series.key }), _jsx("span", { className: "text-text", children: valueText(series.values[index] ?? null, unit) })] }, series.key)))] }));
+    return (_jsxs("div", { "aria-hidden": true, className: "pointer-events-none absolute top-0 z-1 flex w-max max-w-56 -translate-x-1/2 flex-col gap-0.5 rounded-md bg-surface-raised px-2 py-1 text-xs shadow-raised", style: { left }, children: [_jsx("span", { className: "font-medium wrap-anywhere text-text", children: chart.labels[index] }), chart.series.map((series, at) => (_jsxs("span", { className: "flex items-center gap-1.5 text-text-muted tabular-nums", children: [_jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: seriesColor(at) } }), chart.series.length > 1 && _jsx("span", { children: series.key }), _jsx("span", { className: "text-text", children: valueText(series.values[index] ?? null, unit) })] }, series.key)))] }));
 }
 /* Bars and lines over a value axis, in SVG at the measured width. */
-function VerticalChart({ chart, kind, unit, width }) {
+function VerticalChart({ chart, kind, unit, width, character }) {
     const [hover, setHover] = useState(null);
-    const low = chart.min < 0 ? -niceCeiling(-chart.min) : 0;
-    const high = chart.max > 0 ? niceCeiling(chart.max) : low === 0 ? 1 : 0;
-    const plotWidth = Math.max(0, width - AXIS_WIDTH);
-    const plotHeight = HEIGHT - PLOT_TOP - LABEL_ROOM;
-    const band = plotWidth / chart.labels.length;
+    const { low, high, ticks, tickTexts, axisWidth, band, labelEvery, labelRoom } = verticalLayout(chart, unit, width, character);
+    const plotHeight = HEIGHT - PLOT_TOP - Math.round((LABEL_ROOM * character) / UI_CHART_CHARACTER);
     const y = (value) => Math.round(PLOT_TOP + ((high - value) / (high - low)) * plotHeight);
     const baseline = y(0);
-    const ticks = low === 0 ? [0, high / 2, high] : [low, 0, high];
-    const labelEvery = Math.max(1, Math.ceil(LABEL_BAND / Math.max(1, band)));
-    const center = (index) => Math.round(AXIS_WIDTH + band * index + band / 2);
+    const center = (index) => Math.round(axisWidth + band * index + band / 2);
     const gap = band * 0.2;
     const barWidth = Math.max(1, (band - gap) / chart.series.length);
+    const labelAt = (index, text) => {
+        const half = uiChartTextWidth(text, character) / 2;
+        return Math.round(Math.min(Math.max(center(index), axisWidth + half), width - half));
+    };
     const segments = (values) => values
         .map((value, index) => (value === null ? null : `${center(index)} ${y(value)}`))
         .reduce((paths, point, index, all) => {
@@ -83,34 +114,67 @@ function VerticalChart({ chart, kind, unit, width }) {
         return paths;
     }, [])
         .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: 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)) })] }));
+    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(axisWidth + band * hover), y: PLOT_TOP, width: Math.round(band), height: plotHeight, className: "fill-surface-hover" })), ticks.map((tick, index) => (_jsxs("g", { children: [_jsx("line", { x1: axisWidth, x2: width, y1: y(tick), y2: y(tick), className: tick === 0 ? 'stroke-border' : 'stroke-border-soft', shapeRendering: "crispEdges" }), _jsx("text", { x: axisWidth - 6, y: y(tick), dy: "0.32em", textAnchor: "end", className: "fill-text-faint text-xs tabular-nums", children: tickTexts[index] })] }, tick))), chart.labels.map((label, index) => {
+                        if (index % labelEvery !== 0) {
+                            return null;
+                        }
+                        const text = uiChartText(label, labelRoom, character);
+                        return (_jsx("text", { x: labelAt(index, text), y: HEIGHT - 4, textAnchor: "middle", className: "fill-text-faint text-xs", children: text }, index));
+                    }), 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(axisWidth + 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: 3, fill: "currentColor" }, index))] }, series.key))) })), chart.labels.map((_, index) => (_jsx("rect", { x: Math.round(axisWidth + 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. */
+/* A row of 24px per category, its label beside the bars, which grow from zero to either side. */
 function HorizontalChart({ chart, unit }) {
-    // 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 valueUnit = unitApart(unit) ? undefined : unit;
+    const { low, high } = uiChartRange(chart.min, chart.max);
+    const span = high - low;
+    const zero = (-low / span) * 100;
     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))) }));
+    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 }), _jsxs("span", { className: "relative flex min-w-0 grow flex-col justify-center gap-px", children: [low < 0 && _jsx("span", { className: "absolute inset-y-0 w-px bg-border", style: { left: `${zero}%` } }), chart.series.map((series, at) => {
+                            const value = series.values[index] ?? 0;
+                            return (_jsx("span", { className: clsx('relative block', single ? 'h-3' : 'h-1'), children: _jsx("span", { className: clsx(GROW, 'absolute inset-y-0 rounded-sm starting:scale-x-0', value < 0 ? 'origin-right' : 'origin-left'), style: {
+                                        left: `${((Math.min(value, 0) - low) / span) * 100}%`,
+                                        width: `${(Math.abs(value) / span) * 100}%`,
+                                        backgroundColor: seriesColor(at)
+                                    } }) }, series.key));
+                        })] }), single && (_jsx("span", { className: "max-w-1/3 min-w-12 shrink-0 truncate text-right text-text-faint tabular-nums", children: valueText(chart.series[0].values[index] ?? null, valueUnit) }))] }, index))) }));
 }
 /* A bar per category split into its series, on one scale so the rows compare. */
 function StackedChart({ chart, unit }) {
     return (_jsx("div", { className: "flex flex-col gap-2", children: chart.labels.map((label, index) => (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [chart.labels.length > 1 && _jsx("span", { className: "w-2/5 max-w-36 shrink-0 truncate text-text-muted", children: label }), _jsx(SegmentBar, { size: "sm", className: "grow", label: label, range: [0, chart.max], parts: chart.series.map((series, at) => ({
-                        value: Math.max(0, series.values[index] ?? 0),
+                        value: series.values[index] ?? 0,
                         color: seriesColor(at),
                         label: `${series.key} ${valueText(series.values[index] ?? 0, unit)}`
                     })) })] }, index))) }));
 }
-function DrawnChart({ chart, kind, unit }) {
+/* What the drawing leaves out or draws otherwise, said in words, with every value a press away. */
+function ChartNotes({ chart, requested, cut, values, unit, context, nodeId }) {
+    const { t } = useTranslation('agent-chat');
+    const [shown, setShown] = useBlockLocal(context, `${nodeId}:values`, () => false);
+    const notes = [
+        ...(chart.truncated ? [t('blocks.chart.rowsLeftOut', { shown: formatNumber(chart.labels.length), total: formatNumber(chart.total) })] : []),
+        ...(chart.omitted.length > 0 ? [t('blocks.chart.seriesLeftOut', { count: chart.omitted.length, series: chart.omitted.join(', ') })] : []),
+        ...(requested === 'stacked' && chart.kind !== 'stacked' ? [t('blocks.chart.sideBySide')] : [])
+    ];
+    const partial = chart.truncated || chart.omitted.length > 0 || cut;
+    const [measure, truncated] = useTruncated();
+    const toggle = shown ? t('blocks.chart.hideValues') : t('blocks.chart.showValues');
+    return (_jsxs(_Fragment, { children: [notes.length > 0 && (_jsx("div", { className: "flex flex-col gap-0.5 text-xs text-text-muted", children: notes.map((note) => (_jsx("p", { children: note }, note))) })), partial && (_jsx(Tooltip, { label: toggle, disabled: !truncated, children: _jsx(Button, { size: "xs", variant: "secondary", className: "max-w-full self-start", "aria-expanded": shown, onClick: () => setShown(!shown), children: _jsx("span", { ref: measure, className: "min-w-0 truncate", children: toggle }) }) })), _jsx(ValuesTable, { values: values, unit: unit, shown: partial && shown })] }));
+}
+function DrawnChart({ chart, requested, data, unit, context, nodeId }) {
     const { t } = useTranslation('agent-chat');
     const [measure, width] = useMeasuredWidth();
-    return (_jsxs("figure", { className: "flex flex-col gap-2 px-2", children: [chart.series.length > 1 && _jsx(Legend, { chart: chart }), _jsx("div", { ref: measure, role: "img", "aria-label": chartSummary(chart, unit, t), className: "relative", children: kind === 'hbar' ? (_jsx(HorizontalChart, { chart: chart, unit: unit })) : kind === 'stacked' ? (_jsx(StackedChart, { chart: chart, unit: unit })) : (_jsx("div", { style: { height: HEIGHT }, children: width > 0 && _jsx(VerticalChart, { chart: chart, kind: kind, unit: unit, width: width }) })) }), _jsx(ValuesTable, { chart: chart, unit: unit })] }));
+    const character = useChartCharacter();
+    const [measureRows, rowsCut] = useTruncated(true);
+    const values = useMemo(() => uiChartValues(data), [data]);
+    const { kind } = chart;
+    return (_jsxs("figure", { className: "flex flex-col gap-2 px-2", children: [chart.series.length > 1 && _jsx(Legend, { chart: chart }), kind !== 'stacked' && unitApart(unit) && _jsx("p", { className: "text-xs text-text-faint", children: unit }), _jsx("div", { ref: measure, role: "img", "aria-label": chartSummary(values, unit, t), className: "relative", children: kind === 'hbar' || kind === 'stacked' ? (_jsx("div", { ref: measureRows, children: kind === 'hbar' ? _jsx(HorizontalChart, { chart: chart, unit: unit }) : _jsx(StackedChart, { chart: chart, unit: unit }) })) : (_jsx("div", { style: { height: HEIGHT }, children: width > 0 && _jsx(VerticalChart, { chart: chart, kind: kind, unit: unit, width: width, character: character }) })) }), _jsx(ChartNotes, { chart: chart, requested: requested, cut: rowsCut || labelsCut(chart, unit, width, character), values: values, unit: unit, context: context, nodeId: nodeId })] }));
 }
 /*
  * Draws only once its node closed; until then a quiet surface of the height it will take holds its
  * place. It grows in once, and not at all for a person who asked for less motion.
  */
-export function ChartRenderer({ node }) {
+export function ChartRenderer({ node, context }) {
     const { kind, data, unit } = node.props;
     const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
     if (!node.complete) {
@@ -119,5 +183,5 @@ export function ChartRenderer({ node }) {
     if (chart === null) {
         return _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });
     }
-    return _jsx(DrawnChart, { chart: chart, kind: kind, unit: unit });
+    return _jsx(DrawnChart, { chart: chart, requested: kind, data: data, unit: unit, context: context, nodeId: node.id });
 }

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

@@ -1,4 +1,4 @@
-import type { UiProps } from '@adecore/intelligent-ui';
+import { type UiProps } from '@adecore/intelligent-ui';
 import type { UiRendererProps } from '../render-context.js';
 export declare function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'Choices'>>): import("react").JSX.Element;
 export declare function ChoiceRenderer({ node, children, context }: UiRendererProps<UiProps<'Choice'>>): import("react").JSX.Element;