@adecore/agents-react 0.22.0 → 0.23.0

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

@@ -3,11 +3,25 @@ import type { TFunction } from 'i18next';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { UiProps } from '@adecore/intelligent-ui';
-import { SegmentBar, useMeasuredWidth } from '@adecore/ui';
-import { formatRounded } from '@adecore/ui/format';
-import { niceCeiling, UI_CHART_ROWS, uiChartData, type UiChartData } from '../chart-data';
+import { Button, SegmentBar, Tooltip, useMeasuredWidth } from '@adecore/ui';
+import { formatNumber, formatRounded } from '@adecore/ui/format';
+import { useBlockLocal } from '../block-local';
+import {
+    UI_CHART_CHARACTER,
+    UI_CHART_ROWS,
+    uiChartCharacter,
+    uiChartAxis,
+    uiChartData,
+    uiChartRange,
+    uiChartText,
+    uiChartTextWidth,
+    uiChartValues,
+    type UiChartData,
+    type UiChartValues
+} from '../chart-data';
 import { uiWithUnit } from '../node-text';
-import type { UiRendererProps } from '../render-context';
+import { useTruncated } from '../use-truncated';
+import type { UiRenderContext, UiRendererProps } from '../render-context';
 import { UiFallbackPart } from '../UiFallbackPart';
 
 type ChartKind = UiProps<'Chart'>['kind'];
@@ -15,9 +29,10 @@ type ChartKind = UiProps<'Chart'>['kind'];
 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. */
@@ -32,29 +47,66 @@ function valueText(value: number | null, unit: string | undefined): string {
     return value === null ? '' : uiWithUnit(formatRounded(value, 2), unit);
 }
 
+function unitApart(unit: string | undefined): boolean {
+    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: UiChartData, unit: string | undefined, width: number, character: number) {
+    // 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: UiChartData, unit: string | undefined, width: number, character: number): boolean {
+    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(): number {
+    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: ChartKind, rows: number): number {
     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: UiChartData, unit: string | undefined, t: TFunction<'agent-chat'>): string {
+/* 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: UiChartValues, unit: string | undefined, t: TFunction<'agent-chat'>): string {
     let top: { label: string; series: string; value: number } | null = 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 }: { chart: UiChartData }) {
@@ -70,34 +122,40 @@ function Legend({ chart }: { chart: UiChartData }) {
     );
 }
 
-/* The numbers behind the drawing, for a screen reader. */
-function ValuesTable({ chart, unit }: { chart: UiChartData; unit: string | undefined }) {
+/* Every number of the data, for a screen reader, and on screen once a person opens it. */
+function ValuesTable({ values, unit, shown }: { values: UiChartValues; unit: string | undefined; shown: boolean }) {
     const { t } = useTranslation('agent-chat');
-    return (
-        <table className="sr-only">
-            <caption>{t('blocks.chart.values')}</caption>
-            <thead>
+    const table = (
+        <table className={shown ? 'w-full border-collapse text-xs tabular-nums' : undefined}>
+            <caption className={shown ? 'sr-only' : undefined}>{t('blocks.chart.values')}</caption>
+            <thead className={shown ? 'sticky top-0 z-1 bg-surface-hover' : undefined}>
                 <tr>
                     <td />
-                    {chart.series.map((series) => (
-                        <th key={series.key} scope="col">
+                    {values.series.map((series) => (
+                        <th key={series.key} scope="col" className={shown ? 'h-8 px-2 text-right font-medium whitespace-nowrap text-text-muted' : undefined}>
                             {series.key}
                         </th>
                     ))}
                 </tr>
             </thead>
             <tbody>
-                {chart.labels.map((label, index) => (
-                    <tr key={index}>
-                        <th scope="row">{label}</th>
-                        {chart.series.map((series) => (
-                            <td key={series.key}>{valueText(series.values[index] ?? null, unit)}</td>
+                {values.labels.map((label, index) => (
+                    <tr key={index} className={shown ? 'border-t border-border-soft' : undefined}>
+                        <th scope="row" className={shown ? 'h-8 px-2 text-left font-normal wrap-anywhere text-text-muted' : undefined}>
+                            {label}
+                        </th>
+                        {values.series.map((series) => (
+                            <td key={series.key} className={shown ? 'h-8 px-2 text-right whitespace-nowrap text-text' : undefined}>
+                                {valueText(series.values[index] ?? null, unit)}
+                            </td>
                         ))}
                     </tr>
                 ))}
             </tbody>
         </table>
     );
+    // A table grows to its widest cell whatever width it is given, so it is hidden inside a block that clips.
+    return <div className={shown ? 'max-h-80 w-full overflow-auto rounded-md border border-border-soft' : 'sr-only'}>{table}</div>;
 }
 
 /* The values of one category beside the pointer. */
@@ -105,10 +163,10 @@ function Readout({ chart, index, left, unit }: { chart: UiChartData; index: numb
     return (
         <div
             aria-hidden
-            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"
+            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 }}
         >
-            <span className="font-medium text-text">{chart.labels[index]}</span>
+            <span className="font-medium wrap-anywhere text-text">{chart.labels[index]}</span>
             {chart.series.map((series, at) => (
                 <span key={series.key} className="flex items-center gap-1.5 text-text-muted tabular-nums">
                     <span className="size-2 rounded-sm" style={{ backgroundColor: seriesColor(at) }} />
@@ -121,20 +179,31 @@ function Readout({ chart, index, left, unit }: { chart: UiChartData; index: numb
 }
 
 /* Bars and lines over a value axis, in SVG at the measured width. */
-function VerticalChart({ chart, kind, unit, width }: { chart: UiChartData; kind: 'bar' | 'line'; unit: string | undefined; width: number }) {
+function VerticalChart({
+    chart,
+    kind,
+    unit,
+    width,
+    character
+}: {
+    chart: UiChartData;
+    kind: 'bar' | 'line';
+    unit: string | undefined;
+    width: number;
+    character: number;
+}) {
     const [hover, setHover] = useState<number | null>(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: number): number => 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: number): number => Math.round(AXIS_WIDTH + band * index + band / 2);
+    const center = (index: number): number => 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: number, text: string): number => {
+        const half = uiChartTextWidth(text, character) / 2;
+        return Math.round(Math.min(Math.max(center(index), axisWidth + half), width - half));
+    };
 
     const segments = (values: (number | null)[]): string =>
         values
@@ -151,30 +220,34 @@ function VerticalChart({ chart, kind, unit, width }: { chart: UiChartData; kind:
         <>
             <svg width={width} height={HEIGHT} aria-hidden className="block overflow-visible" onPointerLeave={() => setHover(null)}>
                 {hover !== null && (
-                    <rect x={Math.round(AXIS_WIDTH + band * hover)} y={PLOT_TOP} width={Math.round(band)} height={plotHeight} className="fill-surface-hover" />
+                    <rect x={Math.round(axisWidth + band * hover)} y={PLOT_TOP} width={Math.round(band)} height={plotHeight} className="fill-surface-hover" />
                 )}
-                {ticks.map((tick) => (
+                {ticks.map((tick, index) => (
                     <g key={tick}>
                         <line
-                            x1={AXIS_WIDTH}
+                            x1={axisWidth}
                             x2={width}
                             y1={y(tick)}
                             y2={y(tick)}
                             className={tick === 0 ? 'stroke-border' : 'stroke-border-soft'}
                             shapeRendering="crispEdges"
                         />
-                        <text x={AXIS_WIDTH - 6} y={y(tick)} dy="0.32em" textAnchor="end" className="fill-text-faint text-xs tabular-nums">
-                            {valueText(tick, unit)}
+                        <text x={axisWidth - 6} y={y(tick)} dy="0.32em" textAnchor="end" className="fill-text-faint text-xs tabular-nums">
+                            {tickTexts[index]}
                         </text>
                     </g>
                 ))}
-                {chart.labels.map((label, index) =>
-                    index % labelEvery === 0 ? (
-                        <text key={index} x={center(index)} y={HEIGHT - 4} textAnchor="middle" className="fill-text-faint text-xs">
-                            {label}
+                {chart.labels.map((label, index) => {
+                    if (index % labelEvery !== 0) {
+                        return null;
+                    }
+                    const text = uiChartText(label, labelRoom, character);
+                    return (
+                        <text key={index} x={labelAt(index, text)} y={HEIGHT - 4} textAnchor="middle" className="fill-text-faint text-xs">
+                            {text}
                         </text>
-                    ) : null
-                )}
+                    );
+                })}
                 {kind === 'bar' ? (
                     <g className={clsx(GROW, 'starting:scale-y-0')} style={{ transformOrigin: `0px ${baseline}px` }}>
                         {chart.series.map((series, at) =>
@@ -182,7 +255,7 @@ function VerticalChart({ chart, kind, unit, width }: { chart: UiChartData; kind:
                                 value === null ? null : (
                                     <rect
                                         key={`${series.key}:${index}`}
-                                        x={Math.round(AXIS_WIDTH + band * index + gap / 2 + barWidth * at)}
+                                        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)}
@@ -216,7 +289,7 @@ function VerticalChart({ chart, kind, unit, width }: { chart: UiChartData; kind:
                 {chart.labels.map((_, index) => (
                     <rect
                         key={index}
-                        x={Math.round(AXIS_WIDTH + band * index)}
+                        x={Math.round(axisWidth + band * index)}
                         y={0}
                         width={Math.max(1, Math.round(band))}
                         height={HEIGHT}
@@ -230,27 +303,40 @@ function VerticalChart({ chart, kind, unit, width }: { chart: UiChartData; kind:
     );
 }
 
-/* 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 }: { chart: UiChartData; unit: string | undefined }) {
-    // 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 (
         <div aria-hidden className="flex flex-col">
             {chart.labels.map((label, index) => (
                 <div key={index} className="flex h-6 items-center gap-2 text-xs">
                     <span className="w-2/5 max-w-36 shrink-0 truncate text-text-muted">{label}</span>
-                    <span className="flex min-w-0 grow flex-col justify-center gap-px">
-                        {chart.series.map((series, at) => (
-                            <span
-                                key={series.key}
-                                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) }}
-                            />
-                        ))}
+                    <span className="relative flex min-w-0 grow flex-col justify-center gap-px">
+                        {low < 0 && <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 (
+                                <span key={series.key} className={clsx('relative block', single ? 'h-3' : 'h-1')}>
+                                    <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)
+                                        }}
+                                    />
+                                </span>
+                            );
+                        })}
                     </span>
                     {single && (
-                        <span className="w-16 shrink-0 text-right text-text-faint tabular-nums">{valueText(chart.series[0]!.values[index] ?? null, unit)}</span>
+                        <span className="max-w-1/3 min-w-12 shrink-0 truncate text-right text-text-faint tabular-nums">
+                            {valueText(chart.series[0]!.values[index] ?? null, valueUnit)}
+                        </span>
                     )}
                 </div>
             ))}
@@ -271,7 +357,7 @@ function StackedChart({ chart, unit }: { chart: UiChartData; unit: string | unde
                         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)}`
                         }))}
@@ -282,22 +368,101 @@ function StackedChart({ chart, unit }: { chart: UiChartData; unit: string | unde
     );
 }
 
-function DrawnChart({ chart, kind, unit }: { chart: UiChartData; kind: ChartKind; unit: string | undefined }) {
+/* 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
+}: {
+    chart: UiChartData;
+    requested: ChartKind;
+    /* Whether a category label is cut short at this width. */
+    cut: boolean;
+    values: UiChartValues;
+    unit: string | undefined;
+    context: UiRenderContext;
+    nodeId: string;
+}) {
+    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<HTMLSpanElement>();
+    const toggle = shown ? t('blocks.chart.hideValues') : t('blocks.chart.showValues');
+    return (
+        <>
+            {notes.length > 0 && (
+                <div className="flex flex-col gap-0.5 text-xs text-text-muted">
+                    {notes.map((note) => (
+                        <p key={note}>{note}</p>
+                    ))}
+                </div>
+            )}
+            {partial && (
+                <Tooltip label={toggle} disabled={!truncated}>
+                    <Button size="xs" variant="secondary" className="max-w-full self-start" aria-expanded={shown} onClick={() => setShown(!shown)}>
+                        <span ref={measure} className="min-w-0 truncate">
+                            {toggle}
+                        </span>
+                    </Button>
+                </Tooltip>
+            )}
+            <ValuesTable values={values} unit={unit} shown={partial && shown} />
+        </>
+    );
+}
+
+function DrawnChart({
+    chart,
+    requested,
+    data,
+    unit,
+    context,
+    nodeId
+}: {
+    chart: UiChartData;
+    requested: ChartKind;
+    data: UiProps<'Chart'>['data'];
+    unit: string | undefined;
+    context: UiRenderContext;
+    nodeId: string;
+}) {
     const { t } = useTranslation('agent-chat');
     const [measure, width] = useMeasuredWidth();
+    const character = useChartCharacter();
+    const [measureRows, rowsCut] = useTruncated<HTMLDivElement>(true);
+    const values = useMemo(() => uiChartValues(data), [data]);
+    const { kind } = chart;
     return (
         <figure className="flex flex-col gap-2 px-2">
             {chart.series.length > 1 && <Legend chart={chart} />}
-            <div ref={measure} role="img" aria-label={chartSummary(chart, unit, t)} className="relative">
-                {kind === 'hbar' ? (
-                    <HorizontalChart chart={chart} unit={unit} />
-                ) : kind === 'stacked' ? (
-                    <StackedChart chart={chart} unit={unit} />
+            {kind !== 'stacked' && unitApart(unit) && <p className="text-xs text-text-faint">{unit}</p>}
+            <div ref={measure} role="img" aria-label={chartSummary(values, unit, t)} className="relative">
+                {kind === 'hbar' || kind === 'stacked' ? (
+                    <div ref={measureRows}>{kind === 'hbar' ? <HorizontalChart chart={chart} unit={unit} /> : <StackedChart chart={chart} unit={unit} />}</div>
                 ) : (
-                    <div style={{ height: HEIGHT }}>{width > 0 && <VerticalChart chart={chart} kind={kind} unit={unit} width={width} />}</div>
+                    <div style={{ height: HEIGHT }}>
+                        {width > 0 && <VerticalChart chart={chart} kind={kind} unit={unit} width={width} character={character} />}
+                    </div>
                 )}
             </div>
-            <ValuesTable chart={chart} unit={unit} />
+            <ChartNotes
+                chart={chart}
+                requested={requested}
+                cut={rowsCut || labelsCut(chart, unit, width, character)}
+                values={values}
+                unit={unit}
+                context={context}
+                nodeId={nodeId}
+            />
         </figure>
     );
 }
@@ -306,7 +471,7 @@ function DrawnChart({ chart, kind, unit }: { chart: UiChartData; kind: ChartKind
  * 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 }: UiRendererProps<UiProps<'Chart'>>) {
+export function ChartRenderer({ node, context }: UiRendererProps<UiProps<'Chart'>>) {
     const { kind, data, unit } = node.props;
     const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
     if (!node.complete) {
@@ -315,5 +480,5 @@ export function ChartRenderer({ node }: UiRendererProps<UiProps<'Chart'>>) {
     if (chart === null) {
         return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
     }
-    return <DrawnChart chart={chart} kind={kind} unit={unit} />;
+    return <DrawnChart chart={chart} requested={kind} data={data} unit={unit} context={context} nodeId={node.id} />;
 }

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

@@ -2,9 +2,10 @@ import { useId, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ArrowRight, Check } from 'lucide-react';
-import type { UiProps } from '@adecore/intelligent-ui';
+import { uiChoiceLabel, type UiProps } from '@adecore/intelligent-ui';
 import { DisabledReason, Icon, Spinner, Tooltip } from '@adecore/ui';
 import type { UiRendererProps } from '../render-context';
+import { UiFallbackPart } from '../UiFallbackPart';
 import { useLater } from '../use-later';
 
 /* A context this long may run past its two lines, so the row offers all of it in a tooltip. */
@@ -28,7 +29,8 @@ export function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'
 /*
  * 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 }: UiRendererProps<UiProps<'Choice'>>) {
     const { t } = useTranslation('agent-chat');
@@ -41,6 +43,9 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
     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 <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
+    }
     const reason = waiting
         ? t('blocks.choice.waiting')
         : answer === null && unavailable
@@ -67,9 +72,9 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
         >
             <Icon icon={ArrowRight} size={14} className={clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint')} />
             <span className="flex min-w-0 grow flex-col">
-                <span className="text-sm font-semibold text-text">{children}</span>
+                <span className="text-sm font-semibold wrap-anywhere text-text">{children}</span>
                 {described && (
-                    <span id={descriptionId} className="line-clamp-2 text-xs text-text-muted">
+                    <span id={descriptionId} className="line-clamp-2 text-xs wrap-anywhere text-text-muted">
                         {detail}
                     </span>
                 )}

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

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { createContext, useContext, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { UiProps } from '@adecore/intelligent-ui';
-import { PreviewCard } from '@adecore/ui';
+import { PreviewCard, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { chatHost } from '../../../../host';
 import { CodeBlock } from '../../CodeBlock';
@@ -10,6 +10,7 @@ import { CodeStreamingContext } from '../../code-streaming';
 import { ImageThumb } from '../../ImageView';
 import { uiChildrenOf, uiNodeLabel, uiNodeText, uiUrlDomain } from '../node-text';
 import type { UiRendererProps } from '../render-context';
+import { useTruncated } from '../use-truncated';
 
 // The number of every source by its node id, which the list counts in its own order.
 const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
@@ -115,26 +116,41 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
     const number = useContext(SourceNumbers).get(node.id);
     const { title, url } = node.props;
     const { openUrl } = context;
+    const [measureDomain, domainCut] = useTruncated<HTMLSpanElement>();
     const face = (
         <>
-            <span className="w-5 shrink-0 text-right text-text-faint tabular-nums">{number}</span>
-            <span className="min-w-0 truncate text-text">{title}</span>
-            <span className="shrink-0 text-text-faint">{uiUrlDomain(url)}</span>
+            <span className="w-5 shrink-0 self-start text-right text-text-faint tabular-nums">{number}</span>
+            <span className="min-w-0 grow wrap-anywhere text-text">{title}</span>
+            <span ref={measureDomain} className="max-w-1/2 min-w-0 shrink-0 self-start truncate text-text-faint">
+                {uiUrlDomain(url)}
+            </span>
         </>
     );
     return (
         <li data-ui-source={node.id} tabIndex={-1} className="chat-ui-source scroll-my-2 rounded-md">
-            {openUrl === undefined ? (
-                <span className="flex h-8 items-center gap-2 px-2 text-xs">{face}</span>
-            ) : (
-                <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)}
-                >
-                    {face}
-                </button>
-            )}
+            {/* The title wraps and the domain may be cut short, so the tooltip says both whole; a row that opens nothing takes focus only while it cuts. */}
+            <Tooltip
+                label={
+                    <>
+                        <span className="block">{title}</span>
+                        <span className="block text-text-muted">{url}</span>
+                    </>
+                }
+            >
+                {openUrl === undefined ? (
+                    <span tabIndex={domainCut ? 0 : undefined} className="flex min-h-8 items-start gap-2 rounded-md px-2 py-2 text-xs">
+                        {face}
+                    </span>
+                ) : (
+                    <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)}
+                    >
+                        {face}
+                    </button>
+                )}
+            </Tooltip>
         </li>
     );
 }

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

@@ -2,9 +2,10 @@ import { createContext, useContext, type MouseEvent, type ReactNode } from 'reac
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { UiBinding, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-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';
 import type { UiRenderContext, UiRendererProps } from '../render-context';
+import { useTruncated } from '../use-truncated';
 
 type Scalar = UiProps<'Item'>['value'];
 
@@ -106,6 +107,9 @@ export function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slide
     );
 }
 
+/* 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 }: UiRendererProps<UiProps<'Segmented'>>) {
     const { t } = useTranslation('agent-chat');
@@ -119,6 +123,7 @@ export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Se
                 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)];
@@ -131,14 +136,20 @@ export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Se
     );
 }
 
-/* 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 }: UiRendererProps<UiProps<'Button'>>) {
     const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
+    const label = uiNodeLabel(node);
+    const [measure, truncated] = useTruncated<HTMLSpanElement>();
     return (
         <div className={clsx('px-2', !node.complete && PENDING)}>
-            <Button variant="secondary" size="sm" disabled={!enabled} onClick={() => node.onAction?.()}>
-                {children}
-            </Button>
+            <Tooltip label={label} disabled={!truncated}>
+                <Button variant="secondary" size="sm" className="max-w-full" disabled={!enabled} onClick={() => node.onAction?.()}>
+                    <span ref={measure} className="min-w-0 truncate">
+                        {children}
+                    </span>
+                </Button>
+            </Tooltip>
         </div>
     );
 }