@adecore/agents-react 0.28.0 → 0.29.0

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

@@ -3,7 +3,8 @@ import { useId, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Info, Lock, Radio, TriangleAlert } from 'lucide-react';
-import { Icon, Skeleton, Spinner, Tooltip, useTickingText } from '@adecore/ui';
+import { Icon, KEY_SHORTCUTS, matchesShortcut, Skeleton, Spinner, Tooltip, useTickingText } from '@adecore/ui';
+import { useChatHost } from '../../../host.js';
 import { formatAgo, formatMoment } from '@adecore/ui/format';
 import { uiBlockHead, uiReasonText } from './node-text.js';
 import { UiHeadContext } from './render-context.js';
@@ -24,7 +25,7 @@ function LivePart({ live }) {
         return fresh ? t('blocks.live.read', { time }) : time;
     });
     const source = live.source ?? live.sources[0] ?? '';
-    const icon = slow ? (_jsx(Spinner, { size: 12 })) : live.state === 'failed' ? (_jsx(Icon, { icon: TriangleAlert, size: 12, className: "text-status-needs-you" })) : live.state === 'refused' ? (_jsx(Icon, { icon: Lock, size: 12 })) : (_jsx(Icon, { icon: Radio, size: 12, className: "text-status-idle" }));
+    const icon = slow ? (_jsx(Spinner, { size: 12 })) : live.state === 'failed' ? (_jsx(Icon, { icon: TriangleAlert, size: 12, className: "text-status-needs-you" })) : live.state === 'refused' ? (_jsx(Icon, { icon: Lock, size: 12 })) : (_jsx(Icon, { icon: Radio, size: 12, className: "text-positive" }));
     const words = live.state === 'failed'
         ? t('blocks.live.failed', { source })
         : live.state === 'refused'
@@ -35,10 +36,7 @@ function LivePart({ live }) {
     const body = (_jsxs("span", { tabIndex: hint === null ? undefined : 0, className: "flex items-center gap-1.5", children: [icon, _jsx("span", { children: words }), readAt !== null && live.state !== 'refused' && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(readAt).toISOString(), children: _jsx("span", { ref: ago, className: "tabular-nums" }) })] })), readAt === null && fresh && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: t('blocks.live.notRead') })] }))] }));
     return hint === null ? body : _jsx(Tooltip, { label: hint, children: body });
 }
-/*
- * The line under a block, only when it has something to say: live, answered, noted or drawn as
- * text, in that order. A hairline of the soft border runs the full width of the card over it.
- */
+/* The line under a block, only when it has something to say: live, answered, noted or drawn as text, in that order. */
 function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAsText = null }) {
     const { t } = useTranslation('agent-chat');
     const [fixesOpen, setFixesOpen] = useState(false);
@@ -46,7 +44,7 @@ function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAs
     if (live === null && answered === null && fixes.length === 0 && shownAsText === null) {
         return null;
     }
-    return (_jsxs("div", { className: "-mx-2.25 mt-2.25 -mb-2.25 flex flex-col gap-1.5 border-t border-border-soft px-4.25 py-2 text-xs text-text-faint", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [live !== null && _jsx(LivePart, { live: live }), answered !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.answered', { label: answered.label }) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(answered.at).toISOString(), children: formatMoment(answered.at) })] })), fixes.length > 0 && (_jsxs("button", { type: "button", "aria-expanded": fixesOpen, "aria-controls": listId, className: "flex items-center gap-1.5 rounded-sm hover:text-text-muted", onClick: () => setFixesOpen(!fixesOpen), children: [_jsx(Icon, { icon: Info, size: 12 }), t('blocks.notes', { count: fixes.length })] })), shownAsText !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.shownAsText') }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: shownAsText })] }))] }), fixes.length > 0 && (_jsx("ul", { id: listId, hidden: !fixesOpen, className: "flex flex-col gap-0.5 text-text-muted", children: fixes.map((fix, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "shrink-0 font-mono", children: fix.code }), _jsx("span", { className: "min-w-0", children: fix.message })] }, index))) }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 text-2xs text-text-faint", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [live !== null && _jsx(LivePart, { live: live }), answered !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.answered', { label: answered.label }) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("time", { dateTime: new Date(answered.at).toISOString(), children: formatMoment(answered.at) })] })), fixes.length > 0 && (_jsxs("button", { type: "button", "aria-expanded": fixesOpen, "aria-controls": listId, className: "flex items-center gap-1.5 rounded-sm hover:text-text-muted", onClick: () => setFixesOpen(!fixesOpen), children: [_jsx(Icon, { icon: Info, size: 12 }), t('blocks.notes', { count: fixes.length })] })), shownAsText !== null && (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { children: t('blocks.shownAsText') }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: shownAsText })] }))] }), fixes.length > 0 && (_jsx("ul", { id: listId, hidden: !fixesOpen, className: "flex flex-col gap-0.5 text-text-muted", children: fixes.map((fix, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "shrink-0 font-mono", children: fix.code }), _jsx("span", { className: "min-w-0", children: fix.message })] }, index))) }))] }));
 }
 const RELEASE_MS = 200;
 /*
@@ -89,15 +87,27 @@ function useRisingFloor(active) {
     return [ref, floor];
 }
 /*
- * The card of one block, with its footer. Named by its Summary and busy while it streams, but never
+ * The band of one block, with its footer. Named by its Summary and busy while it streams, but never
  * live: reading out every compile would be noise. A node fades in as it arrives, without a stagger,
  * and for a person who asked for less motion it only fades; a node inside another only fades
  * (`chat-ui-nodes`). Until the first node a skeleton holds the place of the head.
  */
 export function UiBlockFrame({ nodes, phase, children, className, ...footer }) {
     const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
     const streaming = phase === 'streaming';
     const head = uiBlockHead(nodes);
     const [ref, floor] = useRisingFloor(streaming);
-    return (_jsx(UiHeadContext, { value: head?.id ?? null, children: _jsxs("div", { ref: ref, role: "group", "aria-label": head === null || head.label === '' ? t('blocks.label') : head.label, "aria-busy": streaming || undefined, className: clsx('flex min-h-11 flex-col rounded-2xl border border-border bg-surface-raised p-2.25', className), style: streaming && floor > 0 ? { minHeight: floor } : undefined, children: [_jsx("div", { className: "flex flex-col gap-3 *:transition-[opacity,translate] *:duration-160 *:ease-out *:starting:opacity-0 motion-safe:*:starting:translate-y-0.5", children: nodes.length === 0 && streaming ? _jsx(Skeleton, { className: "mx-2 my-1 w-2/5" }) : children }), _jsx(UiBlockFooter, { ...footer })] }) }));
+    // Only while the focus is inside the block, so the composer keeps the same keys for sending.
+    const pickPrimary = (event) => {
+        if (!matchesShortcut(KEY_SHORTCUTS.modEnter, event, host.isApplePlatform())) {
+            return;
+        }
+        const primary = event.currentTarget.querySelector('[data-ui-primary-choice]');
+        if (primary !== null) {
+            event.preventDefault();
+            primary.click();
+        }
+    };
+    return (_jsx(UiHeadContext, { value: head?.id ?? null, children: _jsx("div", { ref: ref, role: "group", "aria-label": head === null || head.label === '' ? t('blocks.label') : head.label, "aria-busy": streaming || undefined, className: clsx('chat-ui-band flex min-h-11 flex-col', className), style: streaming && floor > 0 ? { minHeight: floor } : undefined, onKeyDown: pickPrimary, children: _jsxs("div", { className: "flex flex-col gap-3 py-5", children: [_jsx("div", { className: "flex flex-col gap-3.5 *:transition-[opacity,translate] *:duration-160 *:ease-out *:starting:opacity-0 motion-safe:*:starting:translate-y-0.5", children: nodes.length === 0 && streaming ? _jsx(Skeleton, { className: "my-1 w-2/5" }) : children }), _jsx(UiBlockFooter, { ...footer })] }) }) }));
 }

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
+import { Info } from 'lucide-react';
+import { Icon } from '@adecore/ui';
 import { Markdown } from '../Markdown.js';
 /*
- * One part of a block as the markdown it stands for, in a quiet surface with a line that says why.
+ * One part of a block as the markdown it stands for, on a card in a quiet tile under a line that says why.
  * A person sees it as a repair, never as an error, so nothing here is red.
  */
 export function UiFallbackPart({ fallback, problem }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsxs("div", { className: "flex flex-col gap-1 rounded-md bg-surface-hover p-2", children: [_jsx("span", { className: "text-xs text-text-faint", children: problem.kind === 'unknown' ? t('blocks.unknownComponent', { component: problem.component }) : t('blocks.renderFailed') }), fallback !== '' && (_jsx("div", { className: "min-w-0 wrap-anywhere", children: _jsx(Markdown, { text: fallback, fileLinks: false }) }))] }));
+    return (_jsxs("div", { className: "chat-ui-flat flex flex-col gap-1.5 rounded-xl bg-ui-tile p-1.5", children: [_jsxs("span", { className: "chat-ui-flat-inner flex items-center gap-1.5 px-1.5 pt-0.5 text-2xs text-text-muted", children: [_jsx(Icon, { icon: Info, size: 12, className: "shrink-0" }), problem.kind === 'unknown' ? t('blocks.unknownComponent', { component: problem.component }) : t('blocks.renderFailed')] }), fallback !== '' && (_jsx("div", { className: "min-w-0 rounded-lg bg-ui-inset px-3 py-2.5 wrap-anywhere shadow-[inset_0_0_0_1px_var(--border)]", children: _jsx(Markdown, { text: fallback, fileLinks: false }) }))] }));
 }

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

@@ -40,8 +40,8 @@ const BLOCK = '$block';
 const LITERAL_PARENTS = new Set(['CodeBlock', 'Tag', 'Choice', 'Item', 'Switch', 'Slider', 'Segmented', 'Option', 'Button', 'Column']);
 /* Parents that stack their children, where a run of text and inline nodes is one paragraph. */
 const PARAGRAPHS = {
-    [BLOCK]: 'px-2 text-xs text-text',
-    Tab: 'px-2 text-xs text-text',
+    [BLOCK]: 'text-xs text-text',
+    Tab: 'text-xs text-text',
     Section: 'text-xs text-text-muted'
 };
 const LINKS = new Set(['File', 'Diff', 'Commit', 'Node']);
@@ -138,7 +138,7 @@ function ProseLink({ href, children }) {
 }
 const PROSE_COMPONENTS = {
     p: ({ children }) => children,
-    code: ({ children }) => _jsx("code", { className: "rounded-sm bg-surface-sunken px-1 py-px font-mono text-code", children: children }),
+    code: ({ children }) => _jsx("code", { className: "rounded-sm bg-ui-tile px-1 py-px font-mono text-code", children: children }),
     a: ({ href, children }) => _jsx(ProseLink, { href: href, children: children }),
     span: ({ node, children, className }) => node?.properties['data-ui-citation'] !== undefined ? (_jsx(ProseCitation, { number: Number(node.properties['data-ui-citation']), children: children })) : (_jsx("span", { className: className, children: children }))
 };

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

@@ -168,7 +168,7 @@ function DrawnChart({ chart, requested, data, unit, context, nodeId }) {
     const [measureRows, rowsCut] = useTruncated(true);
     const values = useMemo(() => uiChartValues(data), [data]);
     const { kind } = chart;
-    return (_jsxs("figure", { className: "flex flex-col gap-2 px-2", children: [chart.series.length > 1 && _jsx(Legend, { chart: chart }), kind !== 'stacked' && unitApart(unit) && _jsx("p", { className: "text-xs text-text-faint", children: unit }), _jsx("div", { ref: measure, role: "img", "aria-label": chartSummary(values, unit, t), className: "relative", children: kind === 'hbar' || kind === 'stacked' ? (_jsx("div", { ref: measureRows, children: kind === 'hbar' ? _jsx(HorizontalChart, { chart: chart, unit: unit }) : _jsx(StackedChart, { chart: chart, unit: unit }) })) : (_jsx("div", { style: { height: HEIGHT }, children: width > 0 && _jsx(VerticalChart, { chart: chart, kind: kind, unit: unit, width: width, character: character }) })) }), _jsx(ChartNotes, { chart: chart, requested: requested, cut: rowsCut || labelsCut(chart, unit, width, character), values: values, unit: unit, context: context, nodeId: nodeId })] }));
+    return (_jsxs("figure", { className: "chat-ui-flat flex flex-col gap-2.5 rounded-xl bg-ui-tile p-3.5", children: [chart.series.length > 1 && _jsx(Legend, { chart: chart }), kind !== 'stacked' && unitApart(unit) && _jsx("p", { className: "text-xs text-text-faint", children: unit }), _jsx("div", { ref: measure, role: "img", "aria-label": chartSummary(values, unit, t), className: "relative", children: kind === 'hbar' || kind === 'stacked' ? (_jsx("div", { ref: measureRows, children: kind === 'hbar' ? _jsx(HorizontalChart, { chart: chart, unit: unit }) : _jsx(StackedChart, { chart: chart, unit: unit }) })) : (_jsx("div", { style: { height: HEIGHT }, children: width > 0 && _jsx(VerticalChart, { chart: chart, kind: kind, unit: unit, width: width, character: character }) })) }), _jsx(ChartNotes, { chart: chart, requested: requested, cut: rowsCut || labelsCut(chart, unit, width, character), values: values, unit: unit, context: context, nodeId: nodeId })] }));
 }
 /*
  * Draws only once its node closed; until then a quiet surface of the height it will take holds its
@@ -178,7 +178,7 @@ export function ChartRenderer({ node, context }) {
     const { kind, data, unit } = node.props;
     const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
     if (!node.complete) {
-        return _jsx("div", { "aria-hidden": true, className: "mx-2 rounded-md bg-surface-hover", style: { height: chartHeight(kind, data.length) } });
+        return _jsx("div", { "aria-hidden": true, className: "rounded-xl bg-ui-tile", style: { height: chartHeight(kind, data.length) } });
     }
     if (chart === null) {
         return _jsx(UiFallbackPart, { fallback: node.fallback, problem: { kind: 'failed' } });

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

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { ArrowRight, Check } from 'lucide-react';
+import { Check } from 'lucide-react';
 import { uiChoiceLabel } from '@adecore/intelligent-ui';
-import { DisabledReason, Icon, Spinner, Tooltip } from '@adecore/ui';
+import { DisabledReason, formatShortcut, Icon, KEY_SHORTCUTS, Spinner, Tooltip } from '@adecore/ui';
+import { useChatHost } from '../../../../host.js';
 import { UiFallbackPart } from '../UiFallbackPart.js';
 import { useLater } from '../use-later.js';
 /* A context this long may run past its two lines, so the row offers all of it in a tooltip. */
@@ -14,16 +15,18 @@ const SPINNER_AFTER_MS = 300;
 export function ChoicesRenderer({ children, context }) {
     const { t } = useTranslation('agent-chat');
     const [streamed] = useState(context.phase === 'streaming');
-    return (_jsxs("div", { role: "group", "aria-label": t('blocks.choices'), className: "chat-ui-nodes flex flex-col gap-1.5", children: [children, _jsx("span", { className: "sr-only", role: "status", children: streamed && context.phase === 'final' ? t('blocks.choice.ready') : '' })] }));
+    return (_jsxs("div", { role: "group", "aria-label": t('blocks.choices'), className: "chat-ui-nodes @container flex flex-wrap items-start gap-2", children: [children, _jsx("span", { className: "sr-only", role: "status", children: streamed && context.phase === 'final' ? t('blocks.choice.ready') : '' })] }));
 }
 /*
- * A row that shows what it sends: the label, and under it the context the agent receives. It stays
+ * A button 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. A finished Choice the host would refuse for
- * its label is no row at all, but its text.
+ * its label is no button at all, but its text. The primary one says the key that picks it while the
+ * focus is in the block (`UiBlockFrame`).
  */
 export function ChoiceRenderer({ node, children, context }) {
     const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
     const descriptionId = useId();
     const { context: detail, primary, disabled } = node.props;
     const { answer, onChoose } = context;
@@ -42,10 +45,12 @@ export function ChoiceRenderer({ node, children, context }) {
             ? ((disabled === true ? null : context.choiceReason) ?? t('blocks.choice.unavailable'))
             : null;
     const described = detail !== undefined && detail !== '';
-    const row = (_jsxs("button", { type: "button", "aria-disabled": closed || undefined, "aria-describedby": described ? descriptionId : undefined, className: clsx('flex w-full items-start gap-2 rounded-md border px-2 py-1.5 text-left transition-[opacity,scale,background-color] duration-150 motion-reduce:transition-none', chosen ? 'border-accent bg-accent-soft' : failed ? 'border-status-error bg-surface-hover' : 'border-border bg-surface-hover', !closed && 'hover:bg-surface-active active:scale-99', waiting ? 'opacity-60' : closed && !chosen && 'opacity-50'), onClick: () => {
+    const strong = primary === true;
+    const button = (_jsxs("button", { type: "button", "aria-disabled": closed || undefined, "aria-describedby": described ? descriptionId : undefined, "aria-keyshortcuts": strong && !closed ? 'Meta+Enter Control+Enter' : undefined, "data-ui-primary-choice": strong && !closed ? '' : undefined, className: clsx('flex max-w-full min-h-9.5 items-center gap-2.5 rounded-xl px-4 py-2 text-left text-xs transition-[opacity,scale,background-color,filter] duration-150 motion-reduce:transition-none', strong ? 'bg-accent text-accent-text' : 'bg-ui-tile text-text', chosen && 'ring-2 ring-accent ring-offset-2 ring-offset-surface', failed && 'ring-2 ring-status-error', !closed && (strong ? 'hover:brightness-110' : 'hover:bg-surface-active'), !closed && 'active:scale-99', waiting ? 'opacity-60' : closed && !chosen && 'opacity-50'), onClick: () => {
             if (!closed) {
                 onChoose?.(node.id);
             }
-        }, children: [_jsx(Icon, { icon: ArrowRight, size: 14, className: clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint') }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "text-sm font-semibold wrap-anywhere text-text", children: children }), described && (_jsx("span", { id: descriptionId, className: "line-clamp-2 text-xs wrap-anywhere text-text-muted", children: detail }))] }), chosen && (_jsxs("span", { className: "mt-0.5 flex shrink-0 items-center gap-1 text-xs text-accent", children: [slow ? _jsx(Spinner, { size: 12 }) : _jsx(Icon, { icon: Check, size: 12 }), answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')] }))] }));
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [reason !== null ? (_jsx(DisabledReason, { reason: reason, children: row })) : described && detail.length > LONG_CONTEXT ? (_jsx(Tooltip, { label: detail, children: row })) : (row), failed && (_jsx("p", { role: "alert", className: "px-2 text-xs text-status-error", children: t('blocks.choice.failed') }))] }));
+        }, children: [_jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: clsx('wrap-anywhere', strong ? 'font-semibold' : 'font-medium'), children: children }), described && (_jsx("span", { id: descriptionId, className: clsx('line-clamp-2 text-2xs wrap-anywhere', strong ? 'text-accent-text/80' : 'text-text-muted'), children: detail }))] }), strong && !closed && (_jsx("kbd", { "aria-hidden": true, className: "shrink-0 rounded-md bg-accent-text/18 px-1.5 font-sans text-2xs font-medium", children: formatShortcut(KEY_SHORTCUTS.modEnter, host.isApplePlatform()) })), chosen && (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-1 text-2xs', strong ? 'text-accent-text' : 'text-accent'), children: [slow ? _jsx(Spinner, { size: 12 }) : _jsx(Icon, { icon: Check, size: 12 }), answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')] }))] }));
+    // At most half the row less half the gap, so two long choices stand side by side and end on one edge; a narrow block gives each the row.
+    return (_jsxs("div", { className: "flex max-w-full flex-col gap-1 @min-[420px]:max-w-[calc(50%-4px)]", children: [reason !== null ? (_jsx(DisabledReason, { reason: reason, children: button })) : described && detail.length > LONG_CONTEXT ? (_jsx(Tooltip, { label: detail, children: button })) : (button), failed && (_jsx("p", { role: "alert", className: "px-1 text-2xs text-status-error", children: t('blocks.choice.failed') }))] }));
 }

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

@@ -15,7 +15,8 @@ import { useTruncated } from '../use-truncated.js';
 const SourceNumbers = createContext(new Map());
 /* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
 export function CodeBlockRenderer({ node }) {
-    return (_jsx(CodeStreamingContext.Provider, { value: !node.complete, children: _jsx(CodeBlock, { code: uiNodeText(node).replace(/^\n|\n$/g, ''), lang: node.props.language ?? 'text' }) }));
+    const { language } = node.props;
+    return (_jsxs("div", { className: "chat-ui-code chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5", children: [language !== undefined && language !== '' && (_jsx("div", { className: "chat-ui-flat-inner flex px-1.5 pt-0.5 pb-1.5", children: _jsx("span", { className: "rounded-md bg-ui-inset px-1.5 font-mono text-2xs text-text shadow-[inset_0_0_0_1px_var(--border)]", children: language }) })), _jsx(CodeStreamingContext.Provider, { value: !node.complete, children: _jsx(CodeBlock, { code: uiNodeText(node).replace(/^\n|\n$/g, ''), lang: language ?? 'text' }) })] }));
 }
 // Set by a Gallery, so the images inside it draw as cells of its grid.
 const GalleryContext = createContext(false);
@@ -27,7 +28,7 @@ function AttachedImage({ scopeId, chatId, attachmentId, alt, cell, unnamed }) {
     const host = useChatHost();
     const source = host.attachments.useUrl(scopeId, chatId, attachmentId);
     if (!cell) {
-        return _jsx(ImageThumb, { source: source, alt: alt, className: "max-h-70 max-w-full object-contain" });
+        return _jsx(ImageThumb, { source: source, alt: alt, className: "max-h-70 max-w-full rounded-xl object-contain" });
     }
     return (_jsxs(_Fragment, { children: [_jsx(ImageThumb, { source: source, alt: alt, aspect: 1 }), unnamed && source.failure !== null && _jsx("figcaption", { className: "text-xs wrap-anywhere text-text-faint", children: alt })] }));
 }
@@ -41,12 +42,12 @@ export function ImageRenderer({ node, children, context }) {
     const { attachment, alt } = node.props;
     const caption = uiNodeLabel(node);
     const name = alt ?? (caption === '' ? t('blocks.image.label') : caption);
-    return (_jsxs("figure", { className: cell ? 'flex min-w-0 flex-col gap-1' : 'flex flex-col items-start gap-1.5', children: [attachment === undefined ? (_jsx(ImageThumb, { source: { url: null, failure: t('blocks.image.unavailable') }, alt: name, aspect: cell ? 1 : undefined })) : (_jsx(AttachedImage, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, alt: name, cell: cell, unnamed: caption === '' })), caption !== '' && _jsx("figcaption", { className: cell ? 'text-xs wrap-anywhere text-text-muted' : 'px-2 text-xs text-text-muted', children: children }), cell && caption === '' && attachment === undefined && (_jsx("figcaption", { className: "text-xs wrap-anywhere text-text-faint", children: alt ?? t('blocks.image.unavailable') }))] }));
+    return (_jsxs("figure", { className: cell ? 'flex min-w-0 flex-col gap-1' : 'flex flex-col items-start gap-1.5', children: [attachment === undefined ? (_jsx(ImageThumb, { source: { url: null, failure: t('blocks.image.unavailable') }, alt: name, aspect: cell ? 1 : undefined })) : (_jsx(AttachedImage, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, alt: name, cell: cell, unnamed: caption === '' })), caption !== '' && _jsx("figcaption", { className: "px-0.5 text-2xs wrap-anywhere text-text-muted", children: children }), cell && caption === '' && attachment === undefined && (_jsx("figcaption", { className: "text-xs wrap-anywhere text-text-faint", children: alt ?? t('blocks.image.unavailable') }))] }));
 }
 /* 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 }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsx(GalleryContext, { value: true, children: _jsx("div", { role: "group", "aria-label": t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length }), className: "@container px-2", children: _jsx("div", { className: "chat-ui-nodes grid grid-cols-2 gap-2 @min-[420px]:grid-cols-3", children: children }) }) }));
+    return (_jsx(GalleryContext, { value: true, children: _jsx("div", { role: "group", "aria-label": t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length }), className: "@container", children: _jsx("div", { className: "chat-ui-nodes grid grid-cols-2 gap-2 @min-[420px]:grid-cols-3", children: children }) }) }));
 }
 // The shape of the frame until the first picture reports its own.
 const COMPARE_ASPECT = 4 / 3;
@@ -76,7 +77,7 @@ export function CompareRenderer({ node, children, context }) {
         body = _jsx(ImageThumb, { source: { url: null, failure: null }, alt: label, aspect: COMPARE_ASPECT });
     }
     else if (first.url !== null && second.url !== null) {
-        body = (_jsxs("div", { className: "relative max-h-96 overflow-hidden rounded-lg border border-border bg-surface-sunken", style: { aspectRatio: aspect, width: `min(100%, ${COMPARE_MAX_HEIGHT * aspect}px)` }, children: [_jsx(Wipe, { value: split, onValueChange: setSplit, label: label, before: _jsx("img", { src: first.url, alt: describe(beforeLabel), draggable: false, className: "size-full object-contain select-none", onLoad: (event) => {
+        body = (_jsxs("div", { className: "relative max-h-96 overflow-hidden rounded-xl bg-ui-tile", style: { aspectRatio: aspect, width: `min(100%, ${COMPARE_MAX_HEIGHT * aspect}px)` }, children: [_jsx(Wipe, { value: split, onValueChange: setSplit, label: label, before: _jsx("img", { src: first.url, alt: describe(beforeLabel), draggable: false, className: "size-full object-contain select-none", onLoad: (event) => {
                             const { naturalWidth, naturalHeight } = event.currentTarget;
                             if (naturalWidth > 0 && naturalHeight > 0) {
                                 setAspect(naturalWidth / naturalHeight);
@@ -88,9 +89,9 @@ export function CompareRenderer({ node, children, context }) {
     }
     else {
         const shown = first.url !== null ? { source: first, name: describe(beforeLabel) } : { source: second, name: describe(afterLabel) };
-        body = (_jsxs(_Fragment, { children: [_jsx(ImageThumb, { source: shown.source, alt: shown.name, className: "max-h-70 max-w-full object-contain" }), _jsx("span", { className: "px-2 text-xs text-text-faint", children: t('blocks.compare.missing') })] }));
+        body = (_jsxs(_Fragment, { children: [_jsx(ImageThumb, { source: shown.source, alt: shown.name, className: "max-h-70 max-w-full object-contain" }), _jsx("span", { className: "text-2xs text-text-faint", children: t('blocks.compare.missing') })] }));
     }
-    return (_jsxs("figure", { className: "flex flex-col items-start gap-1.5 px-2", children: [body, caption !== '' && _jsx("figcaption", { className: "text-xs text-text-muted", children: children })] }));
+    return (_jsxs("figure", { className: "flex w-full flex-col items-start gap-1.5", children: [body, caption !== '' && _jsx("figcaption", { className: "px-0.5 text-2xs text-text-muted", children: children })] }));
 }
 /* A chip on the picture gets a ground of its own, since a pill's alpha ground would vanish over an image. */
 function CompareChip({ side, label }) {
@@ -111,21 +112,21 @@ export function ModelRenderer({ node, children, context }) {
     const View = host.ModelView;
     let body;
     if (View !== undefined && source.url !== null) {
-        body = (_jsx("div", { role: "group", "aria-label": label, className: "relative h-80 w-full overflow-hidden rounded-lg border border-border bg-surface-sunken", children: _jsx(ErrorBoundary, { label: t('blocks.model.crashed'), resetKeys: [attachment, source.url], compact: true, children: _jsx(View, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, url: source.url, label: label, alt: alt, caption: caption }) }) }));
+        body = (_jsx("div", { role: "group", "aria-label": label, className: "relative h-80 w-full overflow-hidden rounded-xl bg-ui-tile", children: _jsx(ErrorBoundary, { label: t('blocks.model.crashed'), resetKeys: [attachment, source.url], compact: true, children: _jsx(View, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, url: source.url, label: label, alt: alt, caption: caption }) }) }));
     }
     else if (View !== undefined && source.failure === null) {
-        body = _jsx("div", { "aria-busy": "true", "aria-label": label, className: "h-80 w-full rounded-lg border border-border bg-surface-sunken" });
+        body = _jsx("div", { "aria-busy": "true", "aria-label": label, className: "h-80 w-full rounded-xl bg-ui-tile" });
     }
     else {
-        body = (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs", children: [_jsx(Icon, { icon: Box, size: 14, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate text-text", children: alt ?? attachment }), _jsx("span", { className: "ml-auto shrink-0 text-text-faint", children: source.failure === null ? t('blocks.model.label') : t('blocks.model.unavailable') })] }));
+        body = (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-2 rounded-xl bg-ui-tile px-3 py-2 text-xs", children: [_jsx(Icon, { icon: Box, size: 14, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate text-text", children: alt ?? attachment }), _jsx("span", { className: "ml-auto shrink-0 text-text-faint", children: source.failure === null ? t('blocks.model.label') : t('blocks.model.unavailable') })] }));
     }
-    return (_jsxs("figure", { className: "flex flex-col items-start gap-1.5 px-2", children: [body, caption !== '' && _jsx("figcaption", { className: "text-xs text-text-muted", children: children })] }));
+    return (_jsxs("figure", { className: "flex w-full flex-col items-start gap-1.5", children: [body, caption !== '' && _jsx("figcaption", { className: "px-0.5 text-2xs text-text-muted", children: children })] }));
 }
 export function SourcesRenderer({ node, children }) {
     const { t } = useTranslation('agent-chat');
     const headingId = useId();
     const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
-    return (_jsx(SourceNumbers, { value: numbers, children: _jsxs("section", { "aria-labelledby": headingId, className: "flex flex-col", children: [_jsx("span", { id: headingId, className: "px-2 pb-1 text-xs font-medium text-text-muted", children: t('blocks.sources') }), _jsx("ol", { className: "chat-ui-nodes flex flex-col", children: children })] }) }));
+    return (_jsx(SourceNumbers, { value: numbers, children: _jsxs("section", { "aria-labelledby": headingId, className: "chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5", children: [_jsx("span", { id: headingId, className: "chat-ui-flat-inner px-1.5 pt-0.5 pb-1 text-2xs font-medium text-text-muted", children: t('blocks.sources') }), _jsx("ol", { className: "chat-ui-nodes flex flex-col", children: children })] }) }));
 }
 /*
  * A source number in running text. Resting on it or focusing it shows the title and the domain, and
@@ -145,6 +146,6 @@ export function SourceRenderer({ node, context }) {
     const { title, url } = node.props;
     const { openUrl } = context;
     const [measureDomain, domainCut] = useTruncated();
-    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5 shrink-0 self-start text-right text-text-faint tabular-nums", children: number }), _jsx("span", { className: "min-w-0 grow wrap-anywhere text-text", children: title }), _jsx("span", { ref: measureDomain, className: "max-w-1/2 min-w-0 shrink-0 self-start truncate text-text-faint", children: uiUrlDomain(url) })] }));
-    return (_jsx("li", { "data-ui-source": node.id, tabIndex: -1, className: "chat-ui-source scroll-my-2 rounded-md", children: _jsx(Tooltip, { label: _jsxs(_Fragment, { children: [_jsx("span", { className: "block", children: title }), _jsx("span", { className: "block text-text-muted", children: url })] }), children: openUrl === undefined ? (_jsx("span", { tabIndex: domainCut ? 0 : undefined, className: "flex min-h-8 items-start gap-2 rounded-md px-2 py-2 text-xs", children: face })) : (_jsx("button", { type: "button", className: "flex min-h-8 w-full items-start gap-2 rounded-md px-2 py-2 text-left text-xs hover:bg-surface-hover", onClick: () => openUrl(url), children: face })) }) }));
+    const face = (_jsxs(_Fragment, { children: [_jsx("span", { className: "grid size-5 shrink-0 place-items-center rounded-md bg-ui-inset text-2xs font-semibold text-text tabular-nums", children: number }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "font-medium wrap-anywhere text-text", children: title }), _jsx("span", { ref: measureDomain, className: "truncate text-text-muted", children: uiUrlDomain(url) })] })] }));
+    return (_jsx("li", { "data-ui-source": node.id, tabIndex: -1, className: "chat-ui-source scroll-my-2 rounded-md", children: _jsx(Tooltip, { label: _jsxs(_Fragment, { children: [_jsx("span", { className: "block", children: title }), _jsx("span", { className: "block text-text-muted", children: url })] }), children: openUrl === undefined ? (_jsx("span", { tabIndex: domainCut ? 0 : undefined, className: "chat-ui-flat-inner flex min-h-8 items-start gap-2.5 rounded-lg px-1.5 py-1.5 text-2xs", children: face })) : (_jsx("button", { type: "button", className: "chat-ui-flat-inner flex min-h-8 w-full items-start gap-2.5 rounded-lg px-1.5 py-1.5 text-left text-2xs hover:bg-text/4", onClick: () => openUrl(url), children: face })) }) }));
 }

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

@@ -1,16 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
-import { Button, Icon, KeyValueList, Pill } from '@adecore/ui';
+import { Button, Icon, KeyValueList, Pill, Tooltip } from '@adecore/ui';
 import { formatBytes, formatDuration, formatMoment, formatNumber, formatPercent, formatRounded } from '@adecore/ui/format';
 import { useBlockLocal } from '../block-local.js';
 import { uiChildrenOf, uiWithUnit } from '../node-text.js';
 import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns } from '../table-data.js';
-import { UI_TONE_TEXT } from '../tones.js';
+import { UI_TONE_PILL } from '../tones.js';
 import { UiFallbackPart } from '../UiFallbackPart.js';
 /* EntityList draws a hairline between its rows from this many on. */
 const DIVIDED_FROM = 7;
+/* Up to this many entries an EntityList is a row of tiles; a longer one is a list in one tile. */
+const TILED_UP_TO = 4;
+const EntityTiles = createContext(false);
 /*
  * A number that live readings keep up to date. Keyed by its text, so a value that changed mounts
  * again and lights up once, even when it changes again before the last light settled.
@@ -22,7 +26,7 @@ function LiveFigure({ text, previous, live, className }) {
 export function StatsRenderer({ children }) {
     return _jsx("div", { className: "chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-2", children: children });
 }
-/* The arrow and the number say which way a value went; only a tone says whether that is good. */
+/* The arrow and the number say which way a value went; only a tone says whether that is good. The tag says the change, its tooltip from what. */
 export function StatRenderer({ node, context }) {
     const { t } = useTranslation('agent-chat');
     const { label, value, previous, unit, tone } = node.props;
@@ -32,12 +36,21 @@ export function StatRenderer({ node, context }) {
     const from = previous === undefined ? '' : uiWithUnit(formatRounded(previous, 2), unit);
     // A change from zero has no percentage.
     const percent = change === null || previous === undefined || previous === 0 ? null : formatPercent(Math.abs((change / previous) * 100));
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5", children: [_jsx("span", { className: "truncate text-xs text-text-muted", children: label }), _jsx(LiveFigure, { text: uiWithUnit(formatRounded(value, 2), unit), previous: typeof live?.previous === 'number' ? uiWithUnit(formatRounded(live.previous, 2), unit) : undefined, live: live, className: "text-lg font-semibold tabular-nums" }), change !== null && (_jsxs("span", { className: clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone]), children: [_jsx(Icon, { icon: arrow, size: 12, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from }) })] }))] }));
+    const said = percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from });
+    return (_jsxs("div", { className: "flex min-w-0 flex-col items-start gap-1.5 rounded-xl bg-ui-tile p-3", children: [_jsx("span", { className: "max-w-full truncate text-2xs text-text-muted", children: label }), _jsx(LiveFigure, { text: uiWithUnit(formatRounded(value, 2), unit), previous: typeof live?.previous === 'number' ? uiWithUnit(formatRounded(live.previous, 2), unit) : undefined, live: live, className: "max-w-full truncate text-lg font-semibold tabular-nums" }), change !== null && (_jsx(Tooltip, { label: said, children: _jsx("span", { tabIndex: 0, className: "max-w-full rounded-md", children: _jsxs(Pill, { shape: "tag", size: "sm", tone: tone === undefined ? 'muted' : UI_TONE_PILL[tone], icon: _jsx(Icon, { icon: arrow, size: 12, className: "shrink-0" }), children: [_jsx("span", { "aria-hidden": true, className: "tabular-nums", children: percent ?? from }), _jsx("span", { className: "sr-only", children: said })] }) }) }))] }));
 }
 export function EntityListRenderer({ node, children }) {
-    return (_jsx(KeyValueList.Root, { divided: uiChildrenOf(node, 'Entry').length >= DIVIDED_FROM, className: "chat-ui-nodes px-2", children: children }));
+    const count = uiChildrenOf(node, 'Entry').length;
+    if (count <= TILED_UP_TO) {
+        return (_jsx(EntityTiles, { value: true, children: _jsx("div", { className: "chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-2", children: children }) }));
+    }
+    return (_jsx(KeyValueList.Root, { divided: count >= DIVIDED_FROM, className: "chat-ui-nodes chat-ui-flat rounded-xl bg-ui-tile px-3 py-2", children: children }));
 }
 export function EntryRenderer({ node, children }) {
+    const tiled = useContext(EntityTiles);
+    if (tiled) {
+        return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5 rounded-xl bg-ui-tile px-3 py-2", children: [_jsx("span", { className: "truncate text-2xs text-text-muted", children: node.props.label }), _jsx("span", { className: "text-2xs font-semibold wrap-break-word text-text", children: children })] }));
+    }
     return (_jsxs(KeyValueList.Item, { children: [_jsx(KeyValueList.Name, { children: node.props.label }), _jsx(KeyValueList.Value, { children: children })] }));
 }
 function numberText(cell, unit) {
@@ -76,5 +89,5 @@ export function TableRenderer({ node, context }) {
     }
     const { rows } = node.props;
     const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
-    return (_jsxs("div", { className: "flex flex-col items-start gap-1.5", children: [_jsx("div", { className: "max-h-80 w-full overflow-auto rounded-md border border-border-soft", children: _jsxs("table", { "aria-label": t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') }), className: "w-full border-collapse text-xs tabular-nums", children: [_jsx("thead", { className: "sticky top-0 z-1 bg-surface-hover", children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", className: clsx('h-8 px-2 font-medium whitespace-nowrap text-text-muted', isNumericColumn(column) ? 'text-right' : 'text-left'), children: column.title }, column.key))) }) }), _jsx("tbody", { children: shown.map((row, index) => (_jsx("tr", { className: "border-t border-border-soft", children: columns.map((column) => (_jsx("td", { className: clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left'), children: _jsx(Cell, { value: row[column.key], column: column, live: isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined }) }, column.key))) }, index))) })] }) }), !all && rows.length > UI_TABLE_ROWS && (_jsx(Button, { size: "xs", variant: "secondary", onClick: () => setAll(true), children: t('blocks.table.showAll', { total: formatNumber(rows.length) }) }))] }));
+    return (_jsxs("div", { className: "flex flex-col items-start gap-1.5", children: [_jsx("div", { className: "chat-ui-flat max-h-80 w-full overflow-auto rounded-xl bg-ui-tile px-1.5 pb-1.5", children: _jsxs("table", { "aria-label": t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') }), className: clsx('w-full border-separate border-spacing-0 text-xs tabular-nums', '[&_tbody_tr:first-child_td:first-child]:rounded-tl-lg [&_tbody_tr:first-child_td:last-child]:rounded-tr-lg', '[&_tbody_tr:last-child_td:first-child]:rounded-bl-lg [&_tbody_tr:last-child_td:last-child]:rounded-br-lg'), children: [_jsx("thead", { className: "sticky top-0 z-1 bg-ui-tile", children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { scope: "col", className: clsx('h-8 px-2 text-2xs font-medium whitespace-nowrap text-text-muted', isNumericColumn(column) ? 'text-right' : 'text-left'), children: column.title }, column.key))) }) }), _jsx("tbody", { children: shown.map((row, index) => (_jsx("tr", { children: columns.map((column, at) => (_jsx("td", { className: clsx('h-9 bg-ui-inset px-2 text-text', index > 0 && 'border-t border-border-soft', at === 0 && 'font-medium', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left'), children: _jsx(Cell, { value: row[column.key], column: column, live: isNumericColumn(column) ? context.liveValue?.(node.id, 'rows', [index, column.key]) : undefined }) }, column.key))) }, index))) })] }) }), !all && rows.length > UI_TABLE_ROWS && (_jsx(Button, { size: "xs", variant: "secondary", onClick: () => setAll(true), children: t('blocks.table.showAll', { total: formatNumber(rows.length) }) }))] }));
 }

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

@@ -11,7 +11,7 @@ const ChecklistContext = createContext({ values: [], enabled: false, toggle: ()
 /* The rows of a checklist as one named group. */
 function ChecklistGroup({ pending, children }) {
     const { t } = useTranslation('agent-chat');
-    return (_jsx("div", { role: "group", "aria-label": t('blocks.checklist'), className: clsx('chat-ui-nodes flex flex-col', pending && PENDING), children: children }));
+    return (_jsx("div", { role: "group", "aria-label": t('blocks.checklist'), className: clsx('chat-ui-nodes flex flex-col gap-1.5', pending && PENDING), children: children }));
 }
 export function ChecklistRenderer({ node, children, context }) {
     const binding = bindingOf(node, context);
@@ -21,20 +21,21 @@ export function ChecklistRenderer({ node, children, context }) {
     };
     return (_jsx(ChecklistContext, { value: { values, enabled: binding !== null, toggle }, children: _jsx(ChecklistGroup, { pending: !node.complete, children: children }) }));
 }
-/* The whole row is the label; a link inside it keeps its own click and checks nothing. */
+/* The whole tile is the label, ringed in the accent while checked; a link inside it keeps its own click and checks nothing. */
 export function ItemRenderer({ node, children }) {
     const list = useContext(ChecklistContext);
     const { value } = node.props;
+    const checked = list.values.includes(value);
     const toggleRow = (event) => {
         if (list.enabled && !event.target.closest('button, a')) {
             list.toggle(value);
         }
     };
-    return (_jsxs("div", { className: clsx('flex min-h-8 items-center gap-2 rounded-md px-2 text-sm text-text', list.enabled && 'hover:bg-surface-hover'), onClick: toggleRow, children: [_jsx(Checkbox, { checked: list.values.includes(value), onCheckedChange: () => list.toggle(value), label: uiNodeLabel(node), disabled: !list.enabled }), _jsx("div", { className: "min-w-0 grow", children: children })] }));
+    return (_jsxs("div", { className: clsx('flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs text-text', checked && 'ring-2 ring-accent ring-inset', list.enabled && 'hover:bg-surface-active'), onClick: toggleRow, children: [_jsx(Checkbox, { className: "mt-0.5", checked: checked, onCheckedChange: () => list.toggle(value), label: uiNodeLabel(node), disabled: !list.enabled }), _jsx("div", { className: "min-w-0 grow", children: children })] }));
 }
 export function SwitchRenderer({ node, children, context }) {
     const binding = bindingOf(node, context);
-    return (_jsxs("div", { className: clsx('flex min-h-7 items-center justify-between gap-3 px-2 text-sm', !node.complete && PENDING), children: [_jsx("span", { className: "min-w-0 text-text", children: children }), _jsx(Switch, { checked: binding?.value ?? node.props.value, onCheckedChange: (next) => binding?.onValueChange(next), label: uiNodeLabel(node), disabled: binding === null })] }));
+    return (_jsxs("div", { className: clsx('chat-ui-flat flex min-h-11 items-center justify-between gap-3 rounded-xl bg-ui-tile px-3 py-2 text-xs', !node.complete && PENDING), children: [_jsx("span", { className: "min-w-0 font-medium text-text", children: children }), _jsx(Switch, { checked: binding?.value ?? node.props.value, onCheckedChange: (next) => binding?.onValueChange(next), label: uiNodeLabel(node), disabled: binding === null })] }));
 }
 /* Its children are the label, read as text: the slider writes its own label line. */
 export function SliderRenderer({ node, context }) {
@@ -42,7 +43,7 @@ export function SliderRenderer({ node, context }) {
     const { value, min, max, step, unit } = node.props;
     return (_jsx(Slider, { value: binding?.value ?? value, onValueChange: (next) => binding?.onValueChange(next), min: min, max: max, step: step, 
         // The slider prints its unit right after the number, so the space a unit stands apart with comes from here.
-        unit: uiWithUnit('', unit), label: uiNodeLabel(node), disabled: binding === null, className: clsx('px-2', !node.complete && PENDING) }));
+        unit: uiWithUnit('', unit), label: uiNodeLabel(node), disabled: binding === null, className: clsx('chat-ui-flat rounded-xl bg-ui-tile p-3', !node.complete && PENDING) }));
 }
 /* A label longer than this reads as a sentence, which wraps badly beside another; the options then stand in a column. */
 const SIDE_BY_SIDE_LABEL = 24;
@@ -53,7 +54,7 @@ export function SegmentedRenderer({ node, context }) {
     const current = binding?.value ?? node.props.value;
     const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
     const picked = options.find((option) => option.value === current)?.id ?? '';
-    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Segmented, { value: picked, options: options, label: t('blocks.options'), orientation: options.some((option) => option.label.length > SIDE_BY_SIDE_LABEL) ? 'vertical' : 'horizontal', disabled: binding === null, onValueChange: (id) => {
+    return (_jsx("div", { className: clsx(!node.complete && PENDING), children: _jsx(Segmented, { value: picked, options: options, label: t('blocks.options'), orientation: options.some((option) => option.label.length > SIDE_BY_SIDE_LABEL) ? 'vertical' : 'horizontal', disabled: binding === null, onValueChange: (id) => {
                 const option = options[Number(id)];
                 if (option !== undefined) {
                     binding?.onValueChange(option.value);
@@ -76,7 +77,7 @@ export function TextFieldRenderer({ node, children, context }) {
     const value = binding?.value ?? node.props.value;
     const countId = `${id}-count`;
     const counting = value.length >= maxLength * COUNT_FROM;
-    return (_jsxs("div", { className: clsx('flex flex-col gap-1 px-2', !node.complete && PENDING), children: [_jsx("label", { htmlFor: id, className: "text-sm text-text-muted", children: children }), _jsx(Input, { id: id, value: value, size: "sm", maxLength: maxLength, placeholder: placeholder, disabled: binding === null, "aria-describedby": counting ? countId : undefined, className: "max-w-96 bg-surface-sunken", onChange: (event) => binding?.onValueChange(event.target.value) }), counting && (_jsx("span", { id: countId, className: "text-xs text-text-muted tabular-nums", children: t('blocks.textField.count', { used: formatNumber(value.length), max: formatNumber(maxLength) }) }))] }));
+    return (_jsxs("div", { className: clsx('flex flex-col gap-1.5', !node.complete && PENDING), children: [_jsx("label", { htmlFor: id, className: "px-0.5 text-2xs text-text-muted", children: children }), _jsx(Input, { id: id, value: value, size: "sm", maxLength: maxLength, placeholder: placeholder, disabled: binding === null, "aria-describedby": counting ? countId : undefined, className: "border-transparent bg-ui-tile", onChange: (event) => binding?.onValueChange(event.target.value) }), counting && (_jsx("span", { id: countId, className: "text-xs text-text-muted tabular-nums", children: t('blocks.textField.count', { used: formatNumber(value.length), max: formatNumber(maxLength) }) }))] }));
 }
 /*
  * Left aligned, never the full width. Like Segmented, each Option is an item by its place, since a value may be any scalar.
@@ -88,7 +89,7 @@ export function SelectRenderer({ node, context }) {
     const current = binding?.value ?? node.props.value;
     const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
     const label = uiOwnLabel(node);
-    return (_jsxs("div", { className: clsx('flex flex-col items-start gap-1 px-2', !node.complete && PENDING), children: [label !== '' && _jsx("span", { className: "text-sm text-text-muted", children: label }), _jsx(Select, { value: options.find((option) => option.value === current)?.id ?? null, items: options.map((option) => ({ value: option.id, label: option.label })), label: label === '' ? t('blocks.options') : label, disabled: binding === null || options.length === 0, onValueChange: (id) => {
+    return (_jsxs("div", { className: clsx('flex flex-col items-start gap-1.5', !node.complete && PENDING), children: [label !== '' && _jsx("span", { className: "px-0.5 text-2xs text-text-muted", children: label }), _jsx(Select, { value: options.find((option) => option.value === current)?.id ?? null, items: options.map((option) => ({ value: option.id, label: option.label })), label: label === '' ? t('blocks.options') : label, disabled: binding === null || options.length === 0, onValueChange: (id) => {
                     const option = options[Number(id)];
                     if (option !== undefined) {
                         binding?.onValueChange(option.value);
@@ -100,5 +101,5 @@ export function ButtonRenderer({ node, children, context }) {
     const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
     const label = uiNodeLabel(node);
     const [measure, truncated] = useTruncated();
-    return (_jsx("div", { className: clsx('px-2', !node.complete && PENDING), children: _jsx(Tooltip, { label: label, disabled: !truncated, children: _jsx(Button, { variant: "secondary", size: "sm", className: "max-w-full", disabled: !enabled, onClick: () => node.onAction?.(), children: _jsx("span", { ref: measure, className: "min-w-0 truncate", children: children }) }) }) }));
+    return (_jsx("div", { className: clsx(!node.complete && PENDING), children: _jsx(Tooltip, { label: label, disabled: !truncated, children: _jsx(Button, { variant: "secondary", size: "sm", className: "max-w-full", disabled: !enabled, onClick: () => node.onAction?.(), children: _jsx("span", { ref: measure, className: "min-w-0 truncate", children: children }) }) }) }));
 }

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

@@ -3,9 +3,11 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { FileDiff, GitCommitHorizontal, SquareDashed } from 'lucide-react';
 import { FileIcon, Icon, Tooltip } from '@adecore/ui';
-import { CHIP_IN_MESSAGE, MENTION_TONE } from '../../chips.js';
+import { CHIP_IN_MESSAGE } from '../../chips.js';
 import { uiReasonText } from '../node-text.js';
 const PLAIN = { state: 'plain' };
+/* A link in a block is a quiet card on its tile, unlike a mention in a message, which wears the accent. */
+const UI_CHIP = 'bg-ui-inset font-mono text-text shadow-[inset_0_0_0_1px_var(--border)]';
 function baseName(path) {
     const trimmed = path.replace(/\/+$/, '');
     return trimmed.slice(trimmed.lastIndexOf('/') + 1) || path;
@@ -62,7 +64,7 @@ export function UiLinkChip({ target, context }) {
     }
     const { face, hint } = chipFace(target, link);
     const { openLink } = context;
-    const chip = openLink === undefined ? (_jsx("span", { className: clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 starting:opacity-0'), children: face })) : (_jsx("button", { type: "button", className: clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 hover:brightness-95 starting:opacity-0'), onClick: () => openLink(target), children: face }));
+    const chip = openLink === undefined ? (_jsx("span", { className: clsx(CHIP_IN_MESSAGE, UI_CHIP, 'transition-opacity duration-120 starting:opacity-0'), children: face })) : (_jsx("button", { type: "button", className: clsx(CHIP_IN_MESSAGE, UI_CHIP, 'transition-opacity duration-120 hover:bg-surface-hover starting:opacity-0'), onClick: () => openLink(target), children: face }));
     return hint === null ? chip : _jsx(Tooltip, { label: hint, children: chip });
 }
 /* A link with children is a row: the chip and what the agent says about it. */
@@ -70,7 +72,7 @@ function LinkRow({ target, context, described, children }) {
     if (!described) {
         return _jsx(UiLinkChip, { target: target, context: context });
     }
-    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm", children: [_jsx("span", { className: "max-w-full min-w-0", children: _jsx(UiLinkChip, { target: target, context: context }) }), _jsx("span", { className: "min-w-0 wrap-break-word text-text-muted", children: children })] }));
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 text-xs", children: [_jsx("span", { className: "max-w-full min-w-0", children: _jsx(UiLinkChip, { target: target, context: context }) }), _jsx("span", { className: "min-w-0 wrap-break-word text-text-muted", children: children })] }));
 }
 export function FileRenderer({ node, children, context }) {
     const { path, line } = node.props;

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

@@ -18,14 +18,14 @@ const MapView = lazyNamed(() => import('./map-view.js'), 'MapView');
 const LOADING_SPINNER_MS = 1000;
 /* The number that ties a row to its marker. The list numbers itself for a screen reader, so the chip is only for the eye. */
 function NumberChip({ number, selected }) {
-    return (_jsx("span", { "aria-hidden": true, className: clsx('mt-px flex size-5 shrink-0 items-center justify-center rounded-full text-xs tabular-nums', selected ? 'bg-accent text-accent-text' : 'bg-map-marker text-map-marker-text'), children: number }));
+    return (_jsx("span", { "aria-hidden": true, className: clsx('mt-px flex size-5 shrink-0 items-center justify-center rounded-md text-2xs font-semibold tabular-nums', selected ? 'bg-accent text-accent-text' : 'bg-ui-inset text-text'), children: number }));
 }
 function PlaceRow({ listed, number, selected, onPick }) {
     const { t } = useTranslation('agent-chat');
     const { detail, address } = listed.node.props;
-    const body = (_jsxs(_Fragment, { children: [_jsx(NumberChip, { number: number, selected: selected }), _jsxs("span", { className: "flex min-w-0 grow flex-col gap-0.5", children: [_jsx("span", { className: "text-sm wrap-break-word text-text", children: listed.name }), detail !== undefined && detail !== '' && _jsx("span", { className: "text-xs wrap-break-word text-text-muted", children: detail }), address !== undefined && address !== '' && _jsx("span", { className: "text-xs wrap-break-word text-text-faint", children: address }), listed.point === undefined && _jsx("span", { className: "text-xs text-text-faint", children: t('blocks.map.lookingUp') }), listed.point === null && _jsx("span", { className: "text-xs text-text-faint", children: t('blocks.map.notFound') })] })] }));
-    const row = 'flex w-full min-h-8 items-start gap-2 rounded-md px-2 py-1.5 text-left';
-    return (_jsx("li", { children: onPick === null ? (_jsx("div", { className: clsx(row, selected && 'bg-surface-hover'), children: body })) : (_jsx("button", { type: "button", "aria-pressed": selected, className: clsx(row, 'hover:bg-surface-hover', selected && 'bg-surface-hover'), onClick: onPick, children: body })) }));
+    const body = (_jsxs(_Fragment, { children: [_jsx(NumberChip, { number: number, selected: selected }), _jsxs("span", { className: "flex min-w-0 grow flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-medium wrap-break-word text-text", children: listed.name }), detail !== undefined && detail !== '' && _jsx("span", { className: "text-xs wrap-break-word text-text-muted", children: detail }), address !== undefined && address !== '' && _jsx("span", { className: "text-xs wrap-break-word text-text-faint", children: address }), listed.point === undefined && _jsx("span", { className: "text-xs text-text-faint", children: t('blocks.map.lookingUp') }), listed.point === null && _jsx("span", { className: "text-xs text-text-faint", children: t('blocks.map.notFound') })] })] }));
+    const row = 'flex h-full w-full min-h-12 items-start gap-2.5 rounded-xl bg-ui-tile px-3 py-2 text-left';
+    return (_jsx("li", { children: onPick === null ? (_jsx("div", { className: clsx(row, selected && 'ring-2 ring-accent ring-inset'), children: body })) : (_jsx("button", { type: "button", "aria-pressed": selected, className: clsx(row, 'hover:bg-surface-active', selected && 'ring-2 ring-accent ring-inset'), onClick: onPick, children: body })) }));
 }
 /* Why the map is not the host's: its own reason when the source has none, or what the view found out on the way. */
 function noteFor(t, source, status) {
@@ -75,7 +75,7 @@ function MapFrame({ markers, source, selected, onPick }) {
     else if (drawn) {
         body = (_jsx(DiffFallbackBoundary, { fallback: quiet(t('blocks.map.unavailable')), resetKeys: [], children: _jsx(LazyBoundary, { children: _jsx(MapView, { markers: markers, source: source ?? { state: 'off', reason: 'unavailable' }, selected: selected, onPick: onPick, onStatus: setStatus }, attempt) }) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setElement, className: "relative h-50 overflow-hidden rounded-lg border border-border bg-surface-sunken @min-[420px]:h-60", children: [body, waiting && (_jsx("div", { className: "pointer-events-none absolute inset-0 grid place-items-center", children: _jsx(Spinner, { size: 16 }) }))] }), note !== null && _jsx("p", { className: "px-0.5 text-xs text-text-faint", children: note })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setElement, className: "relative h-50 overflow-hidden rounded-xl bg-ui-tile @min-[420px]:h-60", children: [body, waiting && (_jsx("div", { className: "pointer-events-none absolute inset-0 grid place-items-center", children: _jsx(Spinner, { size: 16 }) }))] }), note !== null && _jsx("p", { className: "px-0.5 text-xs text-text-faint", children: note })] }));
 }
 /* Asks the host for its tiles in a component of its own, since a host that offers none has no hook to call. */
 function HostedFrame({ maps, scopeId, ...frame }) {
@@ -106,8 +106,8 @@ export function MapRenderer({ node, children, context }) {
     };
     const onPick = binding !== null ? pick : null;
     const frame = maps ? (_jsx(HostedFrame, { maps: maps, scopeId: context.scopeId, markers: markers, selected: selectedId, onPick: onPick })) : (_jsx(MapFrame, { markers: markers, source: null, selected: selectedId, onPick: onPick }));
-    return (_jsxs("div", { className: clsx('@container flex flex-col gap-1.5 px-2', !node.complete && PENDING), children: [frame, _jsx("ol", { "aria-label": t('blocks.map.label', { count: places.length }), className: "flex flex-col", children: places.map((listed, index) => {
+    return (_jsxs("div", { className: clsx('@container flex flex-col gap-1.5', !node.complete && PENDING), children: [frame, _jsx("ol", { "aria-label": t('blocks.map.label', { count: places.length }), className: "grid gap-1.5 @min-[420px]:grid-cols-2", children: places.map((listed, index) => {
                     const { value } = listed.node.props;
                     return (_jsx(PlaceRow, { listed: listed, number: index + 1, selected: value !== undefined && value === current, onPick: binding !== null && value !== undefined ? () => binding.onValueChange(value) : null }, listed.node.id));
-                }) }), node.omitted !== undefined && node.omitted > 0 && (_jsx("p", { className: "px-2 text-xs text-text-faint", children: t('blocks.map.omitted', { count: node.omitted }) })), _jsx("div", { className: "chat-ui-nodes flex flex-col gap-1.5 empty:hidden", children: children })] }));
+                }) }), node.omitted !== undefined && node.omitted > 0 && _jsx("p", { className: "text-2xs text-text-faint", children: t('blocks.map.omitted', { count: node.omitted }) }), _jsx("div", { className: "chat-ui-nodes flex flex-col gap-1.5 empty:hidden", children: children })] }));
 }

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

@@ -11,22 +11,22 @@ export function TabsRenderer({ node, children, context }) {
     const tabs = uiChildrenOf(node, 'Tab');
     const [picked, setPicked] = useBlockLocal(context, node.id, () => null);
     const value = picked !== null && tabs.some((tab) => tab.id === picked) ? picked : (tabs[0]?.id ?? null);
-    return (_jsxs(Tabs.Root, { value: value, onValueChange: (next) => setPicked(String(next)), className: "flex flex-col gap-3", children: [_jsx(Tabs.List, { className: "px-2", children: tabs.map((tab) => (_jsx(Tabs.Tab, { value: tab.id, "data-ui-reveal": tab.id, children: tab.props.title }, tab.id))) }), children] }));
+    return (_jsxs(Tabs.Root, { value: value, onValueChange: (next) => setPicked(String(next)), className: "flex flex-col gap-3", children: [_jsx(Tabs.List, { variant: "pill", overflow: "scroll", className: "w-fit max-w-full rounded-xl bg-ui-tile p-0.75", children: tabs.map((tab) => (_jsx(Tabs.Tab, { value: tab.id, "data-ui-reveal": tab.id, children: tab.props.title }, tab.id))) }), children] }));
 }
 export function TabRenderer({ node, children }) {
     return (_jsx(Tabs.Panel, { value: node.id, className: "chat-ui-nodes flex flex-col gap-3", children: children }));
 }
 export function SectionsRenderer({ node, children, context }) {
     const [touched, setTouched] = useBlockLocal(context, node.id, () => false);
-    return (_jsx(SectionsContext, { value: { touched, touch: () => setTouched(true) }, children: _jsx("div", { className: "chat-ui-nodes flex flex-col divide-y divide-border-soft", children: children }) }));
+    return (_jsx(SectionsContext, { value: { touched, touch: () => setTouched(true) }, children: _jsx("div", { className: "chat-ui-nodes flex flex-col gap-1.5", children: children }) }));
 }
-/* Arrives open until the person folds a section of the set themselves; the content starts under the title. */
+/* Arrives open until the person folds a section of the set themselves; the content keeps one margin on both sides. */
 export function SectionRenderer({ node, children, context }) {
     const fold = useContext(SectionsContext);
     const [open, setOpen] = useBlockLocal(context, node.id, () => !fold.touched);
     const contentId = useId();
-    return (_jsxs("section", { children: [_jsxs("button", { type: "button", "data-ui-reveal": node.id, "aria-expanded": open, "aria-controls": contentId, className: "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm font-medium text-text hover:bg-surface-hover", onClick: () => {
+    return (_jsxs("section", { className: "rounded-xl bg-ui-tile", children: [_jsxs("button", { type: "button", "data-ui-reveal": node.id, "aria-expanded": open, "aria-controls": contentId, className: "flex min-h-10 w-full items-center gap-2 rounded-xl px-3 text-left text-xs font-medium text-text hover:bg-text/4", onClick: () => {
                     fold.touch();
                     setOpen(!open);
-                }, children: [_jsx(Icon, { icon: ChevronRight, size: 14, className: clsx('shrink-0 text-text-faint transition-transform duration-150 motion-reduce:transition-none', open && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate", children: node.props.title })] }), _jsx("div", { id: contentId, hidden: !open, className: "chat-ui-nodes flex flex-col gap-3 pt-1 pr-2 pb-2 pl-7.5", children: children })] }));
+                }, children: [_jsx(Icon, { icon: ChevronRight, size: 14, className: clsx('shrink-0 text-text-faint transition-transform duration-150 motion-reduce:transition-none', open && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate", children: node.props.title })] }), _jsx("div", { id: contentId, hidden: !open, className: "chat-ui-section-body chat-ui-nodes flex flex-col gap-3 px-3 pb-3", children: children })] }));
 }