@adecore/agents-react 0.27.5 → 0.29.0

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 })] }));
 }

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

@@ -8,7 +8,7 @@ import { Icon, Meter, Pill, Spinner } from '@adecore/ui';
 import { formatNumber, formatPercent } from '@adecore/ui/format';
 import { UiHeadContext } from '../render-context.js';
 import { uiEventTime, uiNodeLabel } from '../node-text.js';
-import { UI_TONE_ICONS, UI_TONE_PILL, UI_TONE_SURFACE, UI_TONE_TEXT } from '../tones.js';
+import { UI_STEP_PILL, UI_TONE_FILL, UI_TONE_ICONS, UI_TONE_PILL, UI_TONE_SURFACE, UI_TONE_TEXT } from '../tones.js';
 const STEP_ICONS = {
     done: CircleCheck,
     pending: Circle,
@@ -22,23 +22,32 @@ const STEP_TONES = {
     failed: 'text-status-error',
     skipped: 'text-text-faint'
 };
+/* A detail longer than this reads as a sentence, which a tag cannot wrap. */
+const DETAIL_AS_TAG = 24;
 /* Whether the block still changes: while it streams, or while it reads live data. Only then does anything spin. */
 function isLive(context) {
     return context.phase === 'streaming' || (context.live !== undefined && context.live !== null && context.live.state !== 'refused');
 }
-/* A badge longer than this is a sentence, which a tag cannot wrap; it stands under the title as text instead. */
-const BADGE_AS_TAG = 32;
-/* The head of the block when it is the first node, a subheading without an icon further down. */
+/* A Summary and a Callout share one row: the icon in a square, and beside it text that centers on the square while it is shorter and starts at its top once it is taller. */
+const ICON_ROW = 'flex items-start gap-3 rounded-xl p-3';
+const ICON_SQUARE = 'grid size-8.5 shrink-0 place-items-center rounded-lg';
+const ICON_TEXT = 'flex min-h-8.5 min-w-0 grow flex-col justify-center gap-0.5';
+/*
+ * A tile in its tone; the badge stands under the title in the tone's color. The head of the block
+ * carries its icon in a square of its own, a Summary further down is a subheading without one. The
+ * icon is the ground's ink in the dark theme, where its tones are too light for white.
+ */
 export function SummaryRenderer({ node, children }) {
     const headId = useContext(UiHeadContext);
     const head = headId === undefined || headId === node.id;
     const { tone, badge } = node.props;
-    const tag = badge !== undefined && badge !== '' && badge.length <= BADGE_AS_TAG;
-    return (_jsxs("div", { className: "flex items-start gap-2 px-2", children: [head && tone !== undefined && _jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16, className: clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone]) }), _jsxs("div", { className: "flex min-w-0 grow flex-wrap items-start gap-x-2 gap-y-1", children: [_jsx("div", { className: "max-w-full min-w-0 grow basis-48 text-sm font-semibold text-balance wrap-break-word text-text", children: children }), tag && (_jsx(Pill, { shape: "tag", tone: tone === undefined ? 'muted' : UI_TONE_PILL[tone], children: badge })), !tag && badge !== undefined && badge !== '' && _jsx("p", { className: "w-full text-xs wrap-anywhere text-text-muted", children: badge })] })] }));
+    const shown = tone ?? 'neutral';
+    return (_jsxs("div", { className: clsx(ICON_ROW, tone === undefined ? 'bg-ui-tile' : UI_TONE_SURFACE[tone]), children: [head && (_jsx("span", { "aria-hidden": true, className: clsx(ICON_SQUARE, 'text-accent-text dark:text-surface', UI_TONE_FILL[shown]), children: _jsx(Icon, { icon: UI_TONE_ICONS[shown], size: 16 }) })), _jsxs("div", { className: ICON_TEXT, children: [_jsx("div", { className: "text-base font-semibold text-balance wrap-break-word text-text", children: children }), badge !== undefined && badge !== '' && (_jsx("p", { className: clsx('text-2xs font-medium wrap-anywhere', tone === undefined ? 'text-text-muted' : UI_TONE_TEXT[tone]), children: badge }))] })] }));
 }
+/* A quiet tile whatever its tone: only the square of its icon wears the tone. */
 export function CalloutRenderer({ node, children }) {
     const { tone, title } = node.props;
-    return (_jsxs("div", { className: clsx('flex gap-2 rounded-md p-2 text-sm', UI_TONE_SURFACE[tone]), children: [_jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16, className: clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone]) }), _jsxs("div", { className: "min-w-0 grow", children: [title !== undefined && title !== '' && _jsx("div", { className: "font-medium text-text", children: title }), _jsx("div", { className: "text-text-muted", children: children })] })] }));
+    return (_jsxs("div", { className: clsx('chat-ui-flat bg-ui-tile text-xs', ICON_ROW), children: [_jsx("span", { "aria-hidden": true, className: clsx(ICON_SQUARE, UI_TONE_SURFACE[tone], UI_TONE_TEXT[tone]), children: _jsx(Icon, { icon: UI_TONE_ICONS[tone], size: 16 }) }), _jsxs("div", { className: ICON_TEXT, children: [title !== undefined && title !== '' && _jsx("div", { className: "font-semibold text-text", children: title }), _jsx("div", { className: "text-text-muted", children: children })] })] }));
 }
 export function TagRenderer({ node, children }) {
     const { tone } = node.props;
@@ -51,22 +60,22 @@ export function ProgressRenderer({ node, children, context }) {
     const limit = max ?? 100;
     const reading = value === undefined ? null : limit === 100 ? formatPercent(value) : t('blocks.progress.of', { value: formatNumber(value), max: formatNumber(limit) });
     const label = uiNodeLabel(node);
-    return (_jsxs("div", { className: "flex flex-col gap-1 px-2", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [_jsx("span", { className: "min-w-0 text-text", children: children }), reading !== null ? (_jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: reading })) : (isLive(context) && _jsx(Spinner, { size: 12, className: "shrink-0 self-center text-text-faint" }))] }), _jsx(Meter, { value: value ?? null, max: limit, label: label === '' ? t('blocks.progress.label') : label, valueText: reading ?? undefined })] }));
+    return (_jsxs("div", { className: "chat-ui-flat flex flex-col gap-2 rounded-xl bg-ui-tile p-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-xs", children: [_jsx("span", { className: "min-w-0 text-text", children: children }), reading !== null ? (_jsx("span", { className: "shrink-0 text-text-muted tabular-nums", children: reading })) : (isLive(context) && _jsx(Spinner, { size: 12, className: "shrink-0 self-center text-text-faint" }))] }), _jsx(Meter, { value: value ?? null, max: limit, label: label === '' ? t('blocks.progress.label') : label, valueText: reading ?? undefined })] }));
 }
 export function StepsRenderer({ children }) {
-    return _jsx("ol", { className: "chat-ui-nodes flex flex-col px-2", children: children });
+    return _jsx("ol", { className: "chat-ui-nodes flex flex-col gap-1.5", children: children });
 }
-/* A running step spins only while the block is live; in a quiet block it is a still dot. */
+/* A tile per step with its state in words at the end. A running step spins only while the block is live; in a quiet block it is a still dot. */
 export function StepRenderer({ node, children, context }) {
     const { t } = useTranslation('agent-chat');
     const { state, detail } = node.props;
     const quiet = state === 'pending' || state === 'skipped';
-    return (_jsxs("li", { className: "flex min-h-7 items-center gap-2 text-sm", children: [_jsx("span", { className: clsx('grid size-4 shrink-0 place-items-center', STEP_TONES[state]), children: state === 'running' ? (isLive(context) ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { icon: CircleDot, size: 14 }))) : (_jsx(Icon, { icon: STEP_ICONS[state], size: 14 })) }), _jsx("span", { className: "sr-only", children: t(`blocks.step.${state}`) }), _jsxs("span", { className: "flex min-w-0 grow flex-wrap items-baseline justify-between gap-x-2", children: [_jsx("span", { className: clsx('max-w-full min-w-0 grow basis-48 wrap-break-word', quiet ? 'text-text-faint' : 'text-text'), children: children }), detail !== undefined && detail !== '' && _jsx("span", { className: "max-w-full text-xs wrap-anywhere text-text-faint tabular-nums", children: detail })] })] }));
+    return (_jsxs("li", { className: "flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs", children: [_jsx("span", { className: clsx('mt-0.5 grid size-4 shrink-0 place-items-center', STEP_TONES[state]), children: state === 'running' ? (isLive(context) ? (_jsx(Spinner, { size: 14 })) : (_jsx(Icon, { icon: CircleDot, size: 14 }))) : (_jsx(Icon, { icon: STEP_ICONS[state], size: 14 })) }), _jsxs("span", { className: "flex min-w-0 grow flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: clsx('max-w-full min-w-0 font-medium wrap-break-word', quiet ? 'text-text-muted' : 'text-text'), children: children }), detail !== undefined && detail !== '' && _jsx("span", { className: "max-w-full text-2xs wrap-anywhere text-text-muted tabular-nums", children: detail })] }), _jsx(Pill, { shape: "tag", size: "sm", tone: UI_STEP_PILL[state], className: "shrink-0", children: t(`blocks.step.${state}`) })] }));
 }
 export function TimelineRenderer({ children }) {
-    return _jsx("ol", { className: "chat-ui-nodes flex flex-col px-2", children: children });
+    return _jsx("ol", { className: "chat-ui-nodes chat-ui-flat flex flex-col rounded-xl bg-ui-tile px-3 py-1.5", children: children });
 }
-/* Each row draws its own stretch of the line, down to the next dot, so a row that failed to draw leaves the others whole. */
+/* A row of the tile: the time, a dot in the tone, the title, and a short detail as a tag at the end or a longer one under the title. */
 export function EventRenderer({ node, children }) {
     const { t } = useTranslation('agent-chat');
     const { at, detail } = node.props;
@@ -74,5 +83,7 @@ export function EventRenderer({ node, children }) {
     const time = uiEventTime(at);
     // A neutral dot says nothing the title does not, and a detail is part of what the row says.
     const label = [time, uiNodeLabel(node), tone === 'neutral' ? '' : t(`blocks.event.tone.${tone}`), detail ?? ''].filter((part) => part !== '').join(', ');
-    return (_jsxs("li", { "aria-label": label, className: "group/event relative flex min-h-7 gap-3 pb-3 last:pb-0", children: [_jsx("span", { "aria-hidden": true, className: clsx('mt-1 size-2 shrink-0 rounded-full bg-current', UI_TONE_TEXT[tone]) }), _jsx("span", { "aria-hidden": true, className: "absolute top-3.5 bottom-0 left-0.75 w-px bg-border group-last/event:hidden" }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-0.5", children: [parseUiEventTime(at) === null ? (_jsx("span", { className: "text-xs wrap-anywhere text-text-muted tabular-nums", children: time })) : (_jsx("time", { dateTime: at, className: "text-xs text-text-muted tabular-nums", children: time })), _jsx("div", { className: "text-sm wrap-break-word text-text", children: children }), detail !== undefined && detail !== '' && _jsx("div", { className: "text-xs wrap-anywhere text-text-muted", children: detail })] })] }));
+    const described = detail !== undefined && detail !== '';
+    const tagged = described && detail.length <= DETAIL_AS_TAG;
+    return (_jsxs("li", { "aria-label": label, className: "flex min-h-9 items-start gap-3 py-2 text-xs", children: [parseUiEventTime(at) === null ? (_jsx("span", { className: "w-24 shrink-0 text-2xs leading-5 wrap-anywhere text-text-muted tabular-nums", children: time })) : (_jsx("time", { dateTime: at, className: "w-24 shrink-0 text-2xs leading-5 text-text-muted tabular-nums", children: time })), _jsx("span", { "aria-hidden": true, className: clsx('mt-1.5 size-2 shrink-0 rounded-full bg-current', tone === 'neutral' ? 'text-text-faint' : UI_TONE_TEXT[tone]) }), _jsxs("div", { className: "flex min-w-0 grow flex-col gap-0.5", children: [_jsx("div", { className: "wrap-break-word text-text", children: children }), described && !tagged && _jsx("div", { className: "text-2xs wrap-anywhere text-text-muted", children: detail })] }), tagged && (_jsx(Pill, { shape: "tag", size: "sm", tone: UI_TONE_PILL[tone], className: "shrink-0", children: detail }))] }));
 }

package/dist/chat/ui/intelligent-ui/tones.d.ts

@@ -5,3 +5,5 @@ export declare const UI_TONE_ICONS: Readonly<Record<UiTone, LucideIcon>>;
 export declare const UI_TONE_TEXT: Readonly<Record<UiTone, string>>;
 export declare const UI_TONE_SURFACE: Readonly<Record<UiTone, string>>;
 export declare const UI_TONE_PILL: Readonly<Record<UiTone, NonNullable<PillProps['tone']>>>;
+export declare const UI_TONE_FILL: Readonly<Record<UiTone, string>>;
+export declare const UI_STEP_PILL: Readonly<Record<'done' | 'running' | 'pending' | 'failed' | 'skipped', NonNullable<PillProps['tone']>>>;

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

@@ -29,3 +29,19 @@ export const UI_TONE_PILL = {
     warning: 'needsYou',
     danger: 'error'
 };
+/* The tone at full strength, for the square that carries the icon of a Summary. */
+export const UI_TONE_FILL = {
+    neutral: 'bg-text-muted',
+    info: 'bg-status-running',
+    success: 'bg-positive',
+    warning: 'bg-status-needs-you',
+    danger: 'bg-status-error'
+};
+/* The tag at the end of a step, in words, so a state never rests on its icon alone. */
+export const UI_STEP_PILL = {
+    done: 'idle',
+    running: 'accent',
+    pending: 'muted',
+    failed: 'error',
+    skipped: 'muted'
+};

package/dist/host.d.ts

@@ -162,6 +162,15 @@ export type UiMapSource = {
     state: 'off';
     reason: 'disabled' | 'signed-out' | 'unavailable';
 };
+export interface UiModelViewProps {
+    scopeId: string;
+    chatId: string;
+    attachmentId: string;
+    url: string;
+    label: string;
+    alt?: string;
+    caption: string;
+}
 export interface ChatHost {
     intelligentUi?: {
         subscribe?(scopeId: string, chatId: string, changed: () => void): () => void;
@@ -195,6 +204,7 @@ export interface ChatHost {
     ReadImage: ComponentType<{
         path: string;
     }> | null;
+    ModelView?: ComponentType<UiModelViewProps>;
     MarkdownImage?: ComponentType<{
         path: string;
         alt: string;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, type UiMapSource, type CommandLook, type CommandLookMatch, type CommandName, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
+export { type ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerSlotProps, type SubagentSlotProps, type ThreadCard, type VisualHost, type ReplyAuthor, type ChatHost, type UiMapSource, type UiModelViewProps, type CommandLook, type CommandLookMatch, type CommandName, ChatHostProvider, useChatHost, type AccentChoice, type ChatToast, type TextareaProps, type ResourceUrl } from './host.js';
 export { type ChatScope, ChatScopeContext, useChatScope } from './scope.js';
 export { type ChatRequestMap, type ChatEventMap, type ChatTransportStatus, type ChatTransport, ChatTransportError, errorCode, isConnectionError } from './transport.js';
 export { portTransport, type PortTransport } from './port-transport.js';

package/dist/locales/en/agent-chat.d.ts

@@ -621,6 +621,11 @@ declare const _default: {
             label: string;
             unavailable: string;
         };
+        model: {
+            label: string;
+            unavailable: string;
+            crashed: string;
+        };
         sources: string;
         citation: string;
         outsideProject: string;

package/dist/locales/en/agent-chat.js

@@ -621,6 +621,11 @@ export default {
             label: 'Image',
             unavailable: 'The image is not available'
         },
+        model: {
+            label: '3D model',
+            unavailable: 'The model is not available',
+            crashed: 'This model failed to render'
+        },
         sources: 'Sources',
         citation: 'Source {{number}}: {{title}}',
         outsideProject: 'Outside the project, shown as text',

package/dist/locales/nl/agent-chat.d.ts

@@ -621,6 +621,11 @@ declare const _default: {
             label: string;
             unavailable: string;
         };
+        model: {
+            label: string;
+            unavailable: string;
+            crashed: string;
+        };
         sources: string;
         citation: string;
         outsideProject: string;

package/dist/locales/nl/agent-chat.js

@@ -621,6 +621,11 @@ export default {
             label: 'Afbeelding',
             unavailable: 'De afbeelding is niet beschikbaar'
         },
+        model: {
+            label: '3D-model',
+            unavailable: 'Het model is niet beschikbaar',
+            crashed: 'Dit model kon niet worden getekend'
+        },
         sources: 'Bronnen',
         citation: 'Bron {{number}}: {{title}}',
         outsideProject: 'Buiten het project, als tekst getoond',

package/dist/theme.css

@@ -30,6 +30,12 @@
     /* The two grounds of the map a page draws without tiles. */
     --map-land: #f2f1ed;
     --map-water: #d3dde5;
+    /* The parts of an intelligent UI block, from the tokens an app's palette sets: a tile on the thread's
+       ground, a card inset in a tile, and the hatch of its band. The tile mixes the ink in so lightly that
+       muted text keeps 4.5 to 1 on it; the design's #f0f0f3 did not. */
+    --chat-ui-tile: color-mix(in srgb, var(--text) 4.5%, var(--surface));
+    --chat-ui-inset: var(--surface);
+    --chat-ui-hatch: var(--separator);
 }
 
 [data-theme="dark"] {
@@ -51,6 +57,9 @@
     --chart-6: #008300;
     --map-land: #2c3135;
     --map-water: #1a2026;
+    --chat-ui-tile: color-mix(in srgb, var(--text) 3%, var(--surface));
+    --chat-ui-inset: var(--surface);
+    --chat-ui-hatch: var(--separator);
 }
 
 /* Output and diffs take the terminal's colors when the app loads `@adecore/terminal/terminal.css`,
@@ -82,6 +91,8 @@
     --color-chat-added: var(--chat-added);
     --color-chat-removed: var(--chat-removed);
     --color-map-marker: var(--map-marker);
+    --color-ui-tile: var(--chat-ui-tile);
+    --color-ui-inset: var(--chat-ui-inset);
     --color-map-marker-text: var(--map-marker-text);
 }
 
@@ -155,6 +166,24 @@
     @media (prefers-reduced-motion: reduce) {
         .chat-ui-changed { animation: none; }
     }
+    /*
+     * A block stands in a band across the whole thread, hatched above and below, with its tiles at the
+     * reading width. The thread's scroller is the container the band measures, so a block anywhere
+     * else keeps the width of its column.
+     */
+    .chat-scroll { container-type: inline-size; }
+    .chat-ui-band { position: relative; padding-block: 14px; }
+    .chat-ui-band::before, .chat-ui-band::after {
+        content: "";
+        position: absolute;
+        inset-inline: 0;
+        height: 14px;
+        border-block: 1px solid var(--border);
+        background-image: repeating-linear-gradient(-45deg, var(--chat-ui-hatch) 0 1px, transparent 1px 7px);
+    }
+    .chat-ui-band::before { top: 0; }
+    .chat-ui-band::after { bottom: 0; }
+    .chat-scroll .chat-ui-band::before, .chat-scroll .chat-ui-band::after { inset-inline: calc(50% - 50cqw); }
     /* A source row a citation revealed. The row only takes focus from code, since its own button takes a click. */
     .chat-ui-source:focus { animation: chat-flash 1600ms ease-out both; }
     /* A visual still on its way says so only once it takes long enough to be noticed. */
@@ -225,6 +254,15 @@
 
 /* A code block is shiki's own `<pre>`, which brings a background of its own to override. */
 .chat-code { position: relative; min-height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: hidden; }
+/* A code block in an intelligent UI block is a card inset in its tile. */
+.chat-ui-code .chat-code { background: var(--chat-ui-inset); }
+/* Inside a Section the section is the tile. A tile that only frames its parts goes flat, so they keep the
+   section's own margin, and a card among them takes the inset ground so it still reads as one. Unlayered, so it outweighs
+   the utilities it overrides. */
+.chat-ui-section-body .bg-ui-tile { background-color: var(--chat-ui-inset); }
+.chat-ui-section-body .chat-ui-flat { background-color: transparent; padding: 0; }
+.chat-ui-section-body .chat-ui-flat .chat-ui-flat-inner { padding-inline: 0; }
+.chat-ui-section-body .chat-ui-flat thead { background-color: var(--chat-ui-tile); }
 .chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); overflow: auto; user-select: text; background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
 .chat-code code { font-family: inherit; }
 .chat-code-actions { position: absolute; top: 4px; right: 4px; border-radius: 6px; background: var(--surface-raised); color: var(--text-muted); box-shadow: 0 0 0 1px var(--border); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.27.5",
+  "version": "0.29.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.27.5",
-    "@adecore/editor": "0.27.5",
-    "@adecore/editor-react": "0.27.5",
-    "@adecore/intelligent-ui": "0.27.5",
-    "@adecore/merge": "0.27.5",
+    "@adecore/agent-contracts": "0.29.0",
+    "@adecore/editor": "0.29.0",
+    "@adecore/editor-react": "0.29.0",
+    "@adecore/intelligent-ui": "0.29.0",
+    "@adecore/merge": "0.29.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.27.5",
+    "@adecore/ui": "^0.29.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.27.5",
+    "@adecore/ui": "0.29.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/ui/intelligent-ui/UiBlockFrame.tsx

@@ -1,9 +1,10 @@
-import { useId, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode, type RefObject } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { UiViewNode } from '@adecore/intelligent-ui';
 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';
 import { formatAgo, formatMoment } from '@adecore/ui/format';
 import { uiBlockHead, uiReasonText } from './node-text';
 import { UiHeadContext, type UiLiveStatus } from './render-context';
@@ -48,7 +49,7 @@ function LivePart({ live }: { live: UiLiveStatus }) {
     ) : live.state === 'refused' ? (
         <Icon icon={Lock} size={12} />
     ) : (
-        <Icon icon={Radio} size={12} className="text-status-idle" />
+        <Icon icon={Radio} size={12} className="text-positive" />
     );
     const words =
         live.state === 'failed'
@@ -81,10 +82,7 @@ function LivePart({ live }: { live: UiLiveStatus }) {
     return hint === null ? body : <Tooltip label={hint}>{body}</Tooltip>;
 }
 
-/*
- * 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 }: UiBlockFooterProps) {
     const { t } = useTranslation('agent-chat');
     const [fixesOpen, setFixesOpen] = useState(false);
@@ -93,7 +91,7 @@ function UiBlockFooter({ live = null, answered = null, fixes = NO_FIXES, shownAs
         return null;
     }
     return (
-        <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">
+        <div className="flex flex-col gap-1.5 text-2xs text-text-faint">
             <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                 {live !== null && <LivePart live={live} />}
                 {answered !== null && (
@@ -189,16 +187,28 @@ function useRisingFloor(active: boolean): [RefObject<HTMLDivElement | null>, num
 }
 
 /*
- * 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 }: UiBlockFrameProps) {
     const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
     const streaming = phase === 'streaming';
     const head = uiBlockHead(nodes);
     const [ref, floor] = useRisingFloor(streaming);
+    // Only while the focus is inside the block, so the composer keeps the same keys for sending.
+    const pickPrimary = (event: KeyboardEvent<HTMLDivElement>): void => {
+        if (!matchesShortcut(KEY_SHORTCUTS.modEnter, event, host.isApplePlatform())) {
+            return;
+        }
+        const primary = event.currentTarget.querySelector<HTMLButtonElement>('[data-ui-primary-choice]');
+        if (primary !== null) {
+            event.preventDefault();
+            primary.click();
+        }
+    };
     return (
         <UiHeadContext value={head?.id ?? null}>
             <div
@@ -206,13 +216,16 @@ export function UiBlockFrame({ nodes, phase, children, className, ...footer }: U
                 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)}
+                className={clsx('chat-ui-band flex min-h-11 flex-col', className)}
                 style={streaming && floor > 0 ? { minHeight: floor } : undefined}
+                onKeyDown={pickPrimary}
             >
-                <div className="flex flex-col gap-3 *:transition-[opacity,translate] *:duration-160 *:ease-out *:starting:opacity-0 motion-safe:*:starting:translate-y-0.5">
-                    {nodes.length === 0 && streaming ? <Skeleton className="mx-2 my-1 w-2/5" /> : children}
+                <div className="flex flex-col gap-3 py-5">
+                    <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">
+                        {nodes.length === 0 && streaming ? <Skeleton className="my-1 w-2/5" /> : children}
+                    </div>
+                    <UiBlockFooter {...footer} />
                 </div>
-                <UiBlockFooter {...footer} />
             </div>
         </UiHeadContext>
     );

package/src/chat/ui/intelligent-ui/UiFallbackPart.tsx

@@ -1,23 +1,26 @@
 import { useTranslation } from 'react-i18next';
+import { Info } from 'lucide-react';
+import { Icon } from '@adecore/ui';
 import { Markdown } from '../Markdown';
 
 /* Why a part is drawn as its text: a component this version does not know, or one it could not draw. */
 export type UiFallbackProblem = { kind: 'unknown'; component: string } | { kind: 'failed' };
 
 /*
- * 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 }: { fallback: string; problem: UiFallbackProblem }) {
     const { t } = useTranslation('agent-chat');
     return (
-        <div className="flex flex-col gap-1 rounded-md bg-surface-hover p-2">
-            <span className="text-xs text-text-faint">
+        <div className="chat-ui-flat flex flex-col gap-1.5 rounded-xl bg-ui-tile p-1.5">
+            <span className="chat-ui-flat-inner flex items-center gap-1.5 px-1.5 pt-0.5 text-2xs text-text-muted">
+                <Icon icon={Info} size={12} className="shrink-0" />
                 {problem.kind === 'unknown' ? t('blocks.unknownComponent', { component: problem.component }) : t('blocks.renderFailed')}
             </span>
             {fallback !== '' && (
                 // A fallback is often data without a space in it, such as the JSON of a chart.
-                <div className="min-w-0 wrap-anywhere">
+                <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)]">
                     <Markdown text={fallback} fileLinks={false} />
                 </div>
             )}

package/src/chat/ui/intelligent-ui/UiReply.tsx

@@ -68,8 +68,8 @@ const LITERAL_PARENTS = new Set(['CodeBlock', 'Tag', 'Choice', 'Item', 'Switch',
 
 /* Parents that stack their children, where a run of text and inline nodes is one paragraph. */
 const PARAGRAPHS: Readonly<Record<string, string>> = {
-    [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'
 };
 
@@ -198,7 +198,7 @@ function ProseLink({ href, children }: { href?: string; children?: ReactNode })
 
 const PROSE_COMPONENTS: Components = {
     p: ({ children }) => children,
-    code: ({ children }) => <code className="rounded-sm bg-surface-sunken px-1 py-px font-mono text-code">{children}</code>,
+    code: ({ children }) => <code className="rounded-sm bg-ui-tile px-1 py-px font-mono text-code">{children}</code>,
     a: ({ href, children }) => <ProseLink href={href}>{children}</ProseLink>,
     span: ({ node, children, className }) =>
         node?.properties['data-ui-citation'] !== undefined ? (

package/src/chat/ui/intelligent-ui/registry.ts

@@ -1,7 +1,7 @@
 import type { UiRenderers } from './render-context';
 import { ChartRenderer } from './renderers/chart';
 import { ChoiceRenderer, ChoicesRenderer } from './renderers/choices';
-import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, SourceRenderer, SourcesRenderer } from './renderers/content';
+import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, ModelRenderer, SourceRenderer, SourcesRenderer } from './renderers/content';
 import { EntityListRenderer, EntryRenderer, StatRenderer, StatsRenderer, TableRenderer } from './renderers/data';
 import {
     ButtonRenderer,
@@ -57,6 +57,7 @@ export const UI_RENDERERS: UiRenderers = {
     Image: ImageRenderer,
     Gallery: GalleryRenderer,
     Compare: CompareRenderer,
+    Model: ModelRenderer,
     Map: MapRenderer,
     Place: null,
     Sources: SourcesRenderer,

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

@@ -442,7 +442,7 @@ function DrawnChart({
     const values = useMemo(() => uiChartValues(data), [data]);
     const { kind } = chart;
     return (
-        <figure className="flex flex-col gap-2 px-2">
+        <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} />}
             {kind !== 'stacked' && unitApart(unit) && <p className="text-xs text-text-faint">{unit}</p>}
             <div ref={measure} role="img" aria-label={chartSummary(values, unit, t)} className="relative">
@@ -475,7 +475,7 @@ export function ChartRenderer({ node, context }: UiRendererProps<UiProps<'Chart'
     const { kind, data, unit } = node.props;
     const chart = useMemo(() => (node.complete ? uiChartData(data, kind) : null), [node.complete, data, kind]);
     if (!node.complete) {
-        return <div aria-hidden className="mx-2 rounded-md bg-surface-hover" style={{ height: chartHeight(kind, data.length) }} />;
+        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' }} />;