@adecore/agents-react 0.21.2 → 0.22.1

package/src/chat/ui/intelligent-ui/chart-data.ts

@@ -5,55 +5,141 @@ 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;
 
+type ChartRow = UiProps<'Chart'>['data'][number];
+type ChartKind = UiProps<'Chart'>['kind'];
+
 export interface UiChartSeries {
     key: string;
     /* One per label, null where a row has no number for this series. */
     values: (number | null)[];
 }
 
-export interface UiChartData {
+/* Every row and every numeric series of a chart's data, whatever a drawing can hold. */
+export interface UiChartValues {
     labels: string[];
     series: UiChartSeries[];
+}
+
+export interface UiChartData extends UiChartValues {
+    /* What it is drawn as: stacked data with a negative value stands side by side as bars. */
+    kind: ChartKind;
     /* The range the axis covers, from zero or below it, never empty. */
     min: number;
     max: number;
     /* Whether rows past `UI_CHART_ROWS` were left out. */
     truncated: boolean;
+    /* The rows of the data, drawn or not. */
+    total: number;
+    /* The numeric series past the first six, which only the values hold. */
+    omitted: string[];
 }
 
-/*
- * 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: UiProps<'Chart'>['data'], kind: UiProps<'Chart'>['kind']): UiChartData | null {
-    const rows = data.slice(0, UI_CHART_ROWS);
+function numericKeys(rows: readonly ChartRow[]): string[] {
     const keys: string[] = [];
     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: readonly ChartRow[], keys: readonly string[]): UiChartValues {
+    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: UiProps<'Chart'>['data']): UiChartValues {
+    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: number, max: number): { low: number; high: number } | null {
+    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: UiProps<'Chart'>['data'], kind: ChartKind): UiChartData | null {
+    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 { 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 =
-        kind === 'stacked'
-            ? labels.map((_, index) => series.reduce((sum, { values }) => sum + Math.max(0, values[index] ?? 0), 0))
+        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: number): number {
+    return Number.isFinite(rootFontSize) && rootFontSize > 0 ? (UI_CHART_CHARACTER * rootFontSize) / 16 : UI_CHART_CHARACTER;
+}
+
+export function uiChartTextWidth(text: string, character = UI_CHART_CHARACTER): number {
+    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: string, room: number, character = UI_CHART_CHARACTER): string {
+    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: readonly string[], width: number, character = UI_CHART_CHARACTER): { axisWidth: number; tickTexts: string[] } {
+    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. */

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} />;
 }