@adecore/agents-react 0.22.0 → 0.22.1

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;

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

@@ -3,7 +3,9 @@ import { useId, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ArrowRight, Check } from 'lucide-react';
+import { uiChoiceLabel } from '@adecore/intelligent-ui';
 import { DisabledReason, Icon, Spinner, Tooltip } from '@adecore/ui';
+import { UiFallbackPart } from '../UiFallbackPart.js';
 import { useLater } from '../use-later.js';
 /* A context this long may run past its two lines, so the row offers all of it in a tooltip. */
 const LONG_CONTEXT = 120;
@@ -17,7 +19,8 @@ export function ChoicesRenderer({ children, context }) {
 /*
  * A row that shows what it sends: the label, and under it the context the agent receives. It stays
  * closed while the reply streams, once the block is answered and without a host to send it, and
- * remains focusable then so a screen reader hears why.
+ * remains focusable then so a screen reader hears why. A finished Choice the host would refuse for
+ * its label is no row at all, but its text.
  */
 export function ChoiceRenderer({ node, children, context }) {
     const { t } = useTranslation('agent-chat');
@@ -30,6 +33,9 @@ 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);
+    if (!waiting && uiChoiceLabel(node) === null) {
+        return _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });
+    }
     const reason = waiting
         ? t('blocks.choice.waiting')
         : answer === null && unavailable
@@ -40,6 +46,6 @@ export function ChoiceRenderer({ node, children, context }) {
             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')] }))] }));
+        }, 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 wrap-anywhere text-text", children: children }), described && (_jsx("span", { id: descriptionId, className: "line-clamp-2 text-xs wrap-anywhere 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: "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

@@ -2,13 +2,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import clsx from 'clsx';
 import { createContext, useContext, useId } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PreviewCard } from '@adecore/ui';
+import { PreviewCard, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 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, uiUrlDomain } from '../node-text.js';
+import { useTruncated } from '../use-truncated.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. */
@@ -54,6 +55,7 @@ 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: 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 })) }));
+    const [measureDomain, domainCut] = useTruncated();
+    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 self-start text-right text-text-faint tabular-nums", children: number }), _jsx("span", { className: "min-w-0 grow wrap-anywhere text-text", children: title }), _jsx("span", { ref: measureDomain, className: "max-w-1/2 min-w-0 shrink-0 self-start truncate 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: _jsx(Tooltip, { label: _jsxs(_Fragment, { children: [_jsx("span", { className: "block", children: title }), _jsx("span", { className: "block text-text-muted", children: url })] }), children: openUrl === undefined ? (_jsx("span", { tabIndex: domainCut ? 0 : undefined, className: "flex min-h-8 items-start gap-2 rounded-md px-2 py-2 text-xs", children: face })) : (_jsx("button", { type: "button", className: "flex min-h-8 w-full items-start gap-2 rounded-md px-2 py-2 text-left text-xs hover:bg-surface-hover", onClick: () => openUrl(url), children: face })) }) }));
 }

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

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Button, Checkbox, Segmented, Slider, Switch } from '@adecore/ui';
+import { Button, Checkbox, Segmented, Slider, Switch, Tooltip } from '@adecore/ui';
 import { uiChildrenOf, uiNodeLabel, uiWithUnit } from '../node-text.js';
+import { useTruncated } from '../use-truncated.js';
 const ChecklistContext = createContext({ values: [], enabled: false, toggle: () => undefined });
 /*
  * The binding of an input, or null for a read-only node. An input works once its own node closed and
@@ -51,6 +52,8 @@ export function SliderRenderer({ node, context }) {
         // The slider prints its unit right after the number, so the space a unit stands apart with comes from here.
         unit: uiWithUnit('', unit), label: uiNodeLabel(node), disabled: binding === null, className: clsx('px-2', !node.complete && PENDING) }));
 }
+/* A label longer than this reads as a sentence, which wraps badly beside another; the options then stand in a column. */
+const SIDE_BY_SIDE_LABEL = 24;
 /* Left aligned, never the full width. Each Option is a segment by its place, since a value may be any scalar. */
 export function SegmentedRenderer({ node, context }) {
     const { t } = useTranslation('agent-chat');
@@ -58,15 +61,17 @@ export function SegmentedRenderer({ node, context }) {
     const current = binding?.value ?? node.props.value;
     const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
     const picked = options.find((option) => option.value === current)?.id ?? '';
-    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Segmented, { value: picked, options: options, label: t('blocks.options'), disabled: binding === null, onValueChange: (id) => {
+    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Segmented, { value: picked, options: options, label: t('blocks.options'), orientation: options.some((option) => option.label.length > SIDE_BY_SIDE_LABEL) ? 'vertical' : 'horizontal', disabled: binding === null, onValueChange: (id) => {
                 const option = options[Number(id)];
                 if (option !== undefined) {
                     binding?.onValueChange(option.value);
                 }
             } }) }));
 }
-/* Runs its local action once its own node closed; like an input, it closes once the block is answered. */
+/* Runs its local action once its own node closed; like an input, it closes once the block is answered. A label cut to the button's one line reads whole in its tooltip. */
 export function ButtonRenderer({ node, children, context }) {
     const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
-    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Button, { variant: "secondary", size: "sm", disabled: !enabled, onClick: () => node.onAction?.(), children: children }) }));
+    const label = uiNodeLabel(node);
+    const [measure, truncated] = useTruncated();
+    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Tooltip, { label: label, disabled: !truncated, children: _jsx(Button, { variant: "secondary", size: "sm", className: "max-w-full", disabled: !enabled, onClick: () => node.onAction?.(), children: _jsx("span", { ref: measure, className: "min-w-0 truncate", children: children }) }) }) }));
 }

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

@@ -70,7 +70,7 @@ function LinkRow({ target, context, described, children }) {
     if (!described) {
         return _jsx(UiLinkChip, { target: target, context: context });
     }
-    return (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2 px-2 text-sm", children: [_jsx("span", { className: "shrink-0", children: _jsx(UiLinkChip, { target: target, context: context }) }), _jsx("span", { className: "min-w-0 text-text-muted", children: children })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm", children: [_jsx("span", { className: "max-w-full min-w-0", children: _jsx(UiLinkChip, { target: target, context: context }) }), _jsx("span", { className: "min-w-0 wrap-break-word text-text-muted", children: children })] }));
 }
 export function FileRenderer({ node, children, context }) {
     const { path, line } = node.props;

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

@@ -25,12 +25,15 @@ const STEP_TONES = {
 function isLive(context) {
     return context.phase === 'streaming' || (context.live !== undefined && context.live !== null && context.live.state !== 'refused');
 }
+/* A badge longer than this is a sentence, which a tag cannot wrap; it stands under the title as text instead. */
+const BADGE_AS_TAG = 32;
 /* The head of the block when it is the first node, a subheading without an icon further down. */
 export function SummaryRenderer({ node, children }) {
     const headId = useContext(UiHeadContext);
     const head = headId === undefined || headId === node.id;
     const { tone, badge } = node.props;
-    return (_jsxs("div", { className: "flex items-start gap-2 px-2", children: [head && tone !== undefined && _jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16, className: clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone]) }), _jsx("div", { className: "min-w-0 grow text-sm font-semibold text-balance text-text", children: children }), badge !== undefined && badge !== '' && (_jsx(Pill, { shape: "tag", tone: tone === undefined ? 'muted' : UI_TONE_PILL[tone], className: "shrink-0", children: badge }))] }));
+    const tag = badge !== undefined && badge !== '' && badge.length <= BADGE_AS_TAG;
+    return (_jsxs("div", { className: "flex items-start gap-2 px-2", children: [head && tone !== undefined && _jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16, className: clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone]) }), _jsxs("div", { className: "flex min-w-0 grow flex-wrap items-start gap-x-2 gap-y-1", children: [_jsx("div", { className: "max-w-full min-w-0 grow basis-48 text-sm font-semibold text-balance wrap-break-word text-text", children: children }), tag && (_jsx(Pill, { shape: "tag", tone: tone === undefined ? 'muted' : UI_TONE_PILL[tone], children: badge })), !tag && badge !== undefined && badge !== '' && _jsx("p", { className: "w-full text-xs wrap-anywhere text-text-muted", children: badge })] })] }));
 }
 export function CalloutRenderer({ node, children }) {
     const { tone, title } = node.props;
@@ -57,5 +60,5 @@ export function StepRenderer({ node, children, context }) {
     const { t } = useTranslation('agent-chat');
     const { state, detail } = node.props;
     const quiet = state === 'pending' || state === 'skipped';
-    return (_jsxs("li", { className: "flex min-h-7 items-center gap-2 text-sm", children: [_jsx("span", { className: clsx('grid size-4 shrink-0 place-items-center', STEP_TONES[state]), children: state === 'running' ? (isLive(context) ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { icon: CircleDot, size: 14 }))) : (_jsx(Icon, { icon: STEP_ICONS[state], size: 14 })) }), _jsx("span", { className: "sr-only", children: t(`blocks.step.${state}`) }), _jsx("span", { className: clsx('min-w-0 grow', quiet ? 'text-text-faint' : 'text-text'), children: children }), detail !== undefined && detail !== '' && _jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: detail })] }));
+    return (_jsxs("li", { className: "flex min-h-7 items-center gap-2 text-sm", children: [_jsx("span", { className: clsx('grid size-4 shrink-0 place-items-center', STEP_TONES[state]), children: state === 'running' ? (isLive(context) ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { icon: CircleDot, size: 14 }))) : (_jsx(Icon, { icon: STEP_ICONS[state], size: 14 })) }), _jsx("span", { className: "sr-only", children: t(`blocks.step.${state}`) }), _jsxs("span", { className: "flex min-w-0 grow flex-wrap items-baseline justify-between gap-x-2", children: [_jsx("span", { className: clsx('max-w-full min-w-0 grow basis-48 wrap-break-word', quiet ? 'text-text-faint' : 'text-text'), children: children }), detail !== undefined && detail !== '' && _jsx("span", { className: "max-w-full text-xs wrap-anywhere text-text-faint tabular-nums", children: detail })] })] }));
 }