@adecore/agents-react 0.38.0 → 0.40.0

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

@@ -17,15 +17,18 @@ export class UiPageMemory<Value> {
     /* Reading a value counts as using it. */
     get(key: string): Value | undefined {
         const value = this.entries.get(key);
+
         if (value !== undefined) {
             this.set(key, value);
         }
+
         return value;
     }
 
     set(key: string, value: Value): void {
         this.entries.delete(key);
         this.entries.set(key, value);
+
         if (this.entries.size > this.limit) {
             this.entries.delete(this.entries.keys().next().value!);
         }
@@ -43,9 +46,11 @@ const remembered = new UiPageMemory<unknown>(512);
 export function useBlockLocal<Value>(context: UiRenderContext, nodeId: string, initial: () => Value): [Value, (next: Value) => void] {
     const key = `${context.scopeId}\n${context.chatId}\n${context.itemId}\n${context.blockId}\n${nodeId}`;
     const [value, setValue] = useState<Value>(() => (remembered.has(key) ? (remembered.get(key) as Value) : initial()));
+
     const set = (next: Value): void => {
         remembered.set(key, next);
         setValue(next);
     };
+
     return [value, set];
 }

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

@@ -36,6 +36,7 @@ export interface UiChartData extends UiChartValues {
 
 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) && typeof value === 'number' && Number.isFinite(value)) {
@@ -43,6 +44,7 @@ function numericKeys(rows: readonly ChartRow[]): string[] {
             }
         }
     }
+
     return keys;
 }
 
@@ -53,6 +55,7 @@ function valuesOf(rows: readonly ChartRow[], keys: readonly string[]): UiChartVa
             key,
             values: rows.map((row) => {
                 const value = row[key];
+
                 return typeof value === 'number' && Number.isFinite(value) ? value : null;
             })
         }))
@@ -72,6 +75,7 @@ export function uiChartRange(min: number, max: number): { low: number; high: num
     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;
 }
 
@@ -83,21 +87,27 @@ export function uiChartRange(min: number, max: number): { low: number; high: num
 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 { 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);
+
     if (uiChartRange(min, max) === null) {
         return null;
     }
+
     return {
         labels,
         series,
@@ -112,6 +122,7 @@ export function uiChartData(data: UiProps<'Chart'>['data'], kind: ChartKind): Ui
 
 /* 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;
@@ -128,6 +139,7 @@ export function uiChartTextWidth(text: string, character = UI_CHART_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))}…`;
 }
 
@@ -136,6 +148,7 @@ export function uiChartAxis(ticks: readonly string[], width: number, 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
@@ -147,7 +160,9 @@ export function niceCeiling(value: number): number {
     if (value <= 0) {
         return 0;
     }
+
     const power = 10 ** Math.floor(Math.log10(value));
     const step = [1, 2, 2.5, 5, 10].find((factor) => factor * power >= value) ?? 10;
+
     return step * power;
 }

package/src/chat/ui/intelligent-ui/node-text.ts

@@ -39,9 +39,11 @@ function withoutMarks(text: string): string {
 /* The Summary that heads a block, which is its first node; a Summary further down is a subheading. */
 export function uiBlockHead(nodes: readonly UiViewNode[]): { id: string; label: string } | null {
     const first = nodes[0];
+
     if (first === undefined || first.type !== 'Summary' || first.error !== undefined) {
         return null;
     }
+
     return { id: first.id, label: withoutMarks(uiNodeLabel(first)) };
 }
 
@@ -52,22 +54,28 @@ export function uiBlockHead(nodes: readonly UiViewNode[]): { id: string; label:
 export async function revealUiSource(root: ParentNode, nodeId: string, ancestors: readonly string[] = []): Promise<boolean> {
     for (const id of ancestors) {
         const control = [...root.querySelectorAll<HTMLButtonElement>('[data-ui-reveal]')].find((element) => element.dataset.uiReveal === id);
+
         if (control && (control.getAttribute('aria-expanded') === 'false' || control.getAttribute('aria-selected') === 'false')) {
             control.click();
             await new Promise<void>((resolve) => setTimeout(resolve, 0));
         }
     }
+
     const row = [...root.querySelectorAll<HTMLElement>('[data-ui-source]')].find((element) => element.dataset.uiSource === nodeId);
+
     if (row === undefined) {
         return false;
     }
+
     // The light runs when focus arrives, so a row that already has it lets go first.
     if (row.ownerDocument.activeElement === row) {
         row.blur();
     }
+
     row.focus({ preventScroll: true });
     const reduced = row.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches === true;
     row.scrollIntoView({ block: 'nearest', behavior: reduced ? 'auto' : 'smooth' });
+
     return true;
 }
 
@@ -105,6 +113,7 @@ export function uiWithUnit(text: string, unit: string | undefined): string {
     if (unit === undefined || unit === '') {
         return text;
     }
+
     return unit === '%' ? `${text}${unit}` : `${text}\u00a0${unit}`;
 }
 
@@ -113,10 +122,13 @@ export function uiLiveChoiceReason(t: TFunction<'agent-chat'>, live: UiLiveStatu
     if (live === null || live === undefined || live.state === 'fresh') {
         return null;
     }
+
     if (live.state === 'reading') {
         return t('blocks.choice.reading');
     }
+
     const source = live.source ?? live.sources[0] ?? '';
+
     return uiReasonText(t, live.code, live.reason) ?? t(live.state === 'failed' ? 'blocks.live.failed' : 'blocks.live.refused', { source });
 }
 
@@ -136,19 +148,24 @@ export function uiUrlDomain(url: string): string {
  */
 export function uiEventTime(at: string, now: Date | number = Date.now()): string {
     const moment = parseUiEventTime(at);
+
     if (moment === null) {
         return at;
     }
+
     const zone = moment.written ? 'UTC' : undefined;
     const year = moment.written ? moment.date.getUTCFullYear() : moment.date.getFullYear();
     const withYear = year !== new Date(now).getFullYear();
+
     if (moment.kind === 'time') {
         return moment.seconds
             ? formatDateTime(moment.date, { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'UTC' })
             : formatClock(moment.date, zone);
     }
+
     if (moment.kind === 'date') {
         return withYear ? formatDayWithYear(moment.date, zone) : formatDay(moment.date, zone);
     }
+
     return withYear ? formatDayClockWithYear(moment.date, zone) : formatDayClock(moment.date, zone);
 }

package/src/chat/ui/intelligent-ui/renderers/binding.ts

@@ -7,6 +7,7 @@ import type { UiRenderContext } from '../render-context';
  */
 export function bindingOf<Value>(node: UiViewNode<{ value?: Value }>, context: UiRenderContext): UiBinding<Value> | null {
     const binding = node.bindings.value as UiBinding<Value> | undefined;
+
     return binding === undefined || !node.complete || context.answer !== null ? null : binding;
 }
 

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

@@ -57,13 +57,16 @@ function verticalLayout(chart: UiChartData, unit: string | undefined, width: num
     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)) };
 }
 
@@ -72,7 +75,9 @@ function labelsCut(chart: UiChartData, unit: string | undefined, width: number,
     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);
 }
 
@@ -81,29 +86,35 @@ 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 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 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: values.labels[i] ?? '', series: series.key, value };
             }
         }
     }
+
     if (top === null) {
         return t('blocks.chart.values');
     }
+
     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) });
@@ -125,6 +136,7 @@ function Legend({ chart }: { chart: UiChartData }) {
 /* 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');
+
     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>
@@ -154,6 +166,7 @@ function ValuesTable({ values, unit, shown }: { values: UiChartValues; unit: str
             </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>;
 }
@@ -195,13 +208,19 @@ function VerticalChart({
     const [hover, setHover] = useState<number | null>(null);
     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 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));
     };
 
@@ -212,6 +231,7 @@ function VerticalChart({
                 if (point !== null) {
                     paths.push(`${index === 0 || all[index - 1] === null ? 'M' : 'L'}${point}`);
                 }
+
                 return paths;
             }, [])
             .join(' ');
@@ -241,7 +261,9 @@ function VerticalChart({
                     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}
@@ -310,6 +332,7 @@ function HorizontalChart({ chart, unit }: { chart: UiChartData; unit: string | u
     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) => (
@@ -319,6 +342,7 @@ function HorizontalChart({ chart, unit }: { chart: UiChartData; unit: string | u
                         {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
@@ -389,14 +413,17 @@ function ChartNotes({
 }) {
     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 && (
@@ -441,6 +468,7 @@ function DrawnChart({
     const [measureRows, rowsCut] = useTruncated<HTMLDivElement>(true);
     const values = uiChartValues(data);
     const { kind } = chart;
+
     return (
         <figure className="chat-ui-flat flex flex-col gap-2.5 rounded-xl bg-ui-tile p-3.5">
             {chart.series.length > 1 && <Legend chart={chart} />}
@@ -474,11 +502,14 @@ function DrawnChart({
 export function ChartRenderer({ node, context }: UiRendererProps<UiProps<'Chart'>>) {
     const { kind, data, unit } = node.props;
     const chart = node.complete ? uiChartData(data, kind) : null;
+
     if (!node.complete) {
         return <div aria-hidden className="rounded-xl bg-ui-tile" style={{ height: chartHeight(kind, data.length) }} />;
     }
+
     if (chart === null) {
         return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
     }
+
     return <DrawnChart chart={chart} requested={kind} data={data} unit={unit} context={context} nodeId={node.id} />;
 }

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

@@ -17,6 +17,7 @@ const SPINNER_AFTER_MS = 300;
 export function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'Choices'>>) {
     const { t } = useTranslation('agent-chat');
     const [streamed] = useState(context.phase === 'streaming');
+
     return (
         <div role="group" aria-label={t('blocks.choices')} className="chat-ui-nodes @container flex flex-wrap items-start gap-2">
             {children}
@@ -46,14 +47,17 @@ 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
           ? ((disabled === true ? null : context.choiceReason) ?? t('blocks.choice.unavailable'))
           : null;
+
     const described = detail !== undefined && detail !== '';
     const strong = primary === true;
 

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

@@ -20,6 +20,7 @@ const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
 /* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
 export function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'CodeBlock'>>) {
     const { language } = node.props;
+
     return (
         <div className="chat-ui-code chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5">
             {language !== undefined && language !== '' && (
@@ -57,9 +58,11 @@ function AttachedImage({
     unnamed: boolean;
 }) {
     const source = useHostAttachmentUrl(scopeId, chatId, attachmentId);
+
     if (!cell) {
         return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full rounded-xl object-contain" />;
     }
+
     return (
         <>
             <ImageThumb source={source} alt={alt} aspect={1} />
@@ -78,6 +81,7 @@ export function ImageRenderer({ node, children, context }: UiRendererProps<UiPro
     const { attachment, alt } = node.props;
     const caption = uiNodeLabel(node);
     const name = alt ?? (caption === '' ? t('blocks.image.label') : caption);
+
     return (
         <figure className={cell ? 'flex min-w-0 flex-col gap-1' : 'flex flex-col items-start gap-1.5'}>
             {attachment === undefined ? (
@@ -96,6 +100,7 @@ export function ImageRenderer({ node, children, context }: UiRendererProps<UiPro
 /* Three columns, two in a narrow block; the container decides, not the window, since a chat can be any width. */
 export function GalleryRenderer({ node, children }: UiRendererProps<UiProps<'Gallery'>>) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <GalleryContext value>
             <div role="group" aria-label={t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length })} className="@container">
@@ -125,11 +130,15 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
     const [split, setSplit] = useState(0.5);
     const [aspect, setAspect] = useState(COMPARE_ASPECT);
     const caption = uiNodeLabel(node);
+
     // Each picture is named by its side and by what the whole comparison shows.
     const describe = (side: string): string => (caption === '' ? side : `${side}: ${caption}`);
+
     const loading = (source: typeof first) => source.url === null && source.failure === null;
+
     const label = t('blocks.compare.label', { before: beforeLabel, after: afterLabel });
     let body: ReactNode;
+
     if (loading(first) || loading(second)) {
         body = <ImageThumb source={{ url: null, failure: null }} alt={label} aspect={COMPARE_ASPECT} />;
     } else if (first.url !== null && second.url !== null) {
@@ -151,6 +160,7 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
                             className="size-full object-contain select-none"
                             onLoad={(event) => {
                                 const { naturalWidth, naturalHeight } = event.currentTarget;
+
                                 if (naturalWidth > 0 && naturalHeight > 0) {
                                     setAspect(naturalWidth / naturalHeight);
                                 }
@@ -167,6 +177,7 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
         body = <ImageThumb source={first} alt={label} aspect={COMPARE_ASPECT} />;
     } else {
         const shown = first.url !== null ? { source: first, name: describe(beforeLabel) } : { source: second, name: describe(afterLabel) };
+
         body = (
             <>
                 <ImageThumb source={shown.source} alt={shown.name} className="max-h-70 max-w-full object-contain" />
@@ -174,6 +185,7 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
             </>
         );
     }
+
     return (
         <figure className="flex w-full flex-col items-start gap-1.5">
             {body}
@@ -209,6 +221,7 @@ export function ModelRenderer({ node, children, context }: UiRendererProps<UiPro
     const label = alt ?? (caption === '' ? t('blocks.model.label') : caption);
     const View = host.ModelView;
     let body: ReactNode;
+
     if (View !== undefined && source.url !== null) {
         body = (
             <div role="group" aria-label={label} className="relative h-80 w-full overflow-hidden rounded-xl bg-ui-tile">
@@ -236,6 +249,7 @@ export function ModelRenderer({ node, children, context }: UiRendererProps<UiPro
             </div>
         );
     }
+
     return (
         <figure className="flex w-full flex-col items-start gap-1.5">
             {body}
@@ -248,6 +262,7 @@ export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sou
     const { t } = useTranslation('agent-chat');
     const headingId = useId();
     const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
+
     return (
         <SourceNumbers value={numbers}>
             <section aria-labelledby={headingId} className="chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5">
@@ -277,6 +292,7 @@ export interface UiSourceCitationProps {
  */
 export function UiSourceCitation({ number, title, url, onReveal, className }: UiSourceCitationProps) {
     const { t } = useTranslation('agent-chat');
+
     return (
         <PreviewCard.Root>
             <PreviewCard.Trigger
@@ -310,6 +326,7 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
     const { title, url } = node.props;
     const { openUrl } = context;
     const [measureDomain, domainCut] = useTruncated<HTMLSpanElement>();
+
     const face = (
         <>
             <span className="grid size-5 shrink-0 place-items-center rounded-md bg-ui-inset text-2xs font-semibold text-text tabular-nums">{number}</span>
@@ -321,6 +338,7 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
             </span>
         </>
     );
+
     return (
         <li data-ui-source={node.id} tabIndex={-1} className="chat-ui-source scroll-my-2 rounded-md">
             {/* 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. */}

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

@@ -26,6 +26,7 @@ const EntityTiles = createContext(false);
  */
 function LiveFigure({ text, previous, live, className }: { text: string; previous?: string; live?: UiLiveValue; className?: string }) {
     const lit = live !== undefined && live.changed && !live.stale && previous !== text;
+
     return (
         <span key={text} className={clsx(live?.stale ? 'text-text-muted' : 'text-text', lit && 'chat-ui-changed', className)}>
             {text}
@@ -48,6 +49,7 @@ export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>
     // A change from zero has no percentage.
     const percent = change === null || previous === undefined || previous === 0 ? null : formatPercent(Math.abs((change / previous) * 100));
     const said = percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from });
+
     return (
         <div className="flex min-w-0 flex-col items-start gap-1.5 rounded-xl bg-ui-tile p-3">
             <span className="max-w-full truncate text-2xs text-text-muted">{label}</span>
@@ -80,6 +82,7 @@ export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>
 
 export function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'EntityList'>>) {
     const count = uiChildrenOf(node, 'Entry').length;
+
     if (count <= TILED_UP_TO) {
         return (
             <EntityTiles value>
@@ -87,6 +90,7 @@ export function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'
             </EntityTiles>
         );
     }
+
     return (
         <KeyValueList.Root divided={count >= DIVIDED_FROM} className="chat-ui-nodes chat-ui-flat rounded-xl bg-ui-tile px-3 py-2">
             {children}
@@ -96,6 +100,7 @@ export function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'
 
 export function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry'>>) {
     const tiled = useContext(EntityTiles);
+
     if (tiled) {
         return (
             <div className="flex min-w-0 flex-col gap-0.5 rounded-xl bg-ui-tile px-3 py-2">
@@ -104,6 +109,7 @@ export function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry
             </div>
         );
     }
+
     return (
         <KeyValueList.Item>
             <KeyValueList.Name>{node.props.label}</KeyValueList.Name>
@@ -118,6 +124,7 @@ function numberText(cell: Extract<UiTableCell, { kind: 'number' }>, unit: string
 
 function Cell({ value, column, live }: { value: unknown; column: UiTableColumn; live?: UiLiveValue }) {
     const cell = uiTableCell(value, column);
+
     switch (cell.kind) {
         case 'empty':
             return null;
@@ -125,6 +132,7 @@ function Cell({ value, column, live }: { value: unknown; column: UiTableColumn;
             return <>{cell.text}</>;
         case 'number': {
             const before = live?.previous === undefined ? undefined : uiTableCell(live.previous, column);
+
             return (
                 <LiveFigure
                     text={numberText(cell, column.unit)}
@@ -155,11 +163,14 @@ export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'
     const { t } = useTranslation('agent-chat');
     const [all, setAll] = useBlockLocal(context, node.id, () => false);
     const columns = uiTableColumns(node);
+
     if (columns.length === 0) {
         return <UiFallbackPart fallback={node.fallback} problem={{ kind: 'failed' }} />;
     }
+
     const { rows } = node.props;
     const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
+
     return (
         <div className="flex flex-col items-start gap-1.5">
             <div className="chat-ui-flat max-h-80 w-full overflow-auto rounded-xl bg-ui-tile px-1.5 pb-1.5">