@adecore/agents-react 0.28.0 → 0.29.0

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/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.28.0",
+  "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.28.0",
-    "@adecore/editor": "0.28.0",
-    "@adecore/editor-react": "0.28.0",
-    "@adecore/intelligent-ui": "0.28.0",
-    "@adecore/merge": "0.28.0",
+    "@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.28.0",
+    "@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.28.0",
+    "@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/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' }} />;

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

@@ -1,9 +1,10 @@
 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, type UiProps } 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';
 import type { UiRendererProps } from '../render-context';
 import { UiFallbackPart } from '../UiFallbackPart';
 import { useLater } from '../use-later';
@@ -17,7 +18,7 @@ export function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'
     const { t } = useTranslation('agent-chat');
     const [streamed] = useState(context.phase === 'streaming');
     return (
-        <div role="group" aria-label={t('blocks.choices')} className="chat-ui-nodes flex flex-col gap-1.5">
+        <div role="group" aria-label={t('blocks.choices')} className="chat-ui-nodes @container flex flex-wrap items-start gap-2">
             {children}
             <span className="sr-only" role="status">
                 {streamed && context.phase === 'final' ? t('blocks.choice.ready') : ''}
@@ -27,13 +28,15 @@ export function ChoicesRenderer({ children, context }: UiRendererProps<UiProps<'
 }
 
 /*
- * A row that shows what it sends: the label, and under it the context the agent receives. It stays
+ * 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 }: UiRendererProps<UiProps<'Choice'>>) {
     const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
     const descriptionId = useId();
     const { context: detail, primary, disabled } = node.props;
     const { answer, onChoose } = context;
@@ -52,16 +55,22 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
           ? ((disabled === true ? null : context.choiceReason) ?? t('blocks.choice.unavailable'))
           : null;
     const described = detail !== undefined && detail !== '';
+    const strong = primary === true;
 
-    const row = (
+    const button = (
         <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 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',
+                '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={() => {
@@ -70,17 +79,21 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
                 }
             }}
         >
-            <Icon icon={ArrowRight} size={14} className={clsx('mt-1 shrink-0', primary === true ? 'text-accent' : 'text-text-faint')} />
-            <span className="flex min-w-0 grow flex-col">
-                <span className="text-sm font-semibold wrap-anywhere text-text">{children}</span>
+            <span className="flex min-w-0 flex-col">
+                <span className={clsx('wrap-anywhere', strong ? 'font-semibold' : 'font-medium')}>{children}</span>
                 {described && (
-                    <span id={descriptionId} className="line-clamp-2 text-xs wrap-anywhere text-text-muted">
+                    <span id={descriptionId} className={clsx('line-clamp-2 text-2xs wrap-anywhere', strong ? 'text-accent-text/80' : 'text-text-muted')}>
                         {detail}
                     </span>
                 )}
             </span>
+            {strong && !closed && (
+                <kbd aria-hidden className="shrink-0 rounded-md bg-accent-text/18 px-1.5 font-sans text-2xs font-medium">
+                    {formatShortcut(KEY_SHORTCUTS.modEnter, host.isApplePlatform())}
+                </kbd>
+            )}
             {chosen && (
-                <span className="mt-0.5 flex shrink-0 items-center gap-1 text-xs text-accent">
+                <span className={clsx('flex shrink-0 items-center gap-1 text-2xs', strong ? 'text-accent-text' : 'text-accent')}>
                     {slow ? <Spinner size={12} /> : <Icon icon={Check} size={12} />}
                     {answer.state === 'queued' ? t('blocks.choice.queued') : t('blocks.choice.sent')}
                 </span>
@@ -88,17 +101,18 @@ export function ChoiceRenderer({ node, children, context }: UiRendererProps<UiPr
         </button>
     );
 
+    // 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 (
-        <div className="flex flex-col gap-1">
+        <div className="flex max-w-full flex-col gap-1 @min-[420px]:max-w-[calc(50%-4px)]">
             {reason !== null ? (
-                <DisabledReason reason={reason}>{row}</DisabledReason>
+                <DisabledReason reason={reason}>{button}</DisabledReason>
             ) : described && detail.length > LONG_CONTEXT ? (
-                <Tooltip label={detail}>{row}</Tooltip>
+                <Tooltip label={detail}>{button}</Tooltip>
             ) : (
-                row
+                button
             )}
             {failed && (
-                <p role="alert" className="px-2 text-xs text-status-error">
+                <p role="alert" className="px-1 text-2xs text-status-error">
                     {t('blocks.choice.failed')}
                 </p>
             )}