@adecore/agents-react 0.27.5 → 0.29.0

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

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

@@ -1,8 +1,9 @@
 import clsx from 'clsx';
 import { createContext, useContext, useId, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Box } from 'lucide-react';
 import type { UiProps } from '@adecore/intelligent-ui';
-import { Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
+import { ErrorBoundary, Icon, Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { useChatHost } from '../../../../host';
 import { CodeBlock } from '../../CodeBlock';
@@ -17,10 +18,18 @@ const SourceNumbers = createContext<ReadonlyMap<string, number>>(new Map());
 
 /* Plain text in the same measure until the node closes, so highlighting never makes it jump. */
 export function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'CodeBlock'>>) {
+    const { language } = node.props;
     return (
-        <CodeStreamingContext.Provider value={!node.complete}>
-            <CodeBlock code={uiNodeText(node).replace(/^\n|\n$/g, '')} lang={node.props.language ?? 'text'} />
-        </CodeStreamingContext.Provider>
+        <div className="chat-ui-code chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5">
+            {language !== undefined && language !== '' && (
+                <div className="chat-ui-flat-inner flex px-1.5 pt-0.5 pb-1.5">
+                    <span className="rounded-md bg-ui-inset px-1.5 font-mono text-2xs text-text shadow-[inset_0_0_0_1px_var(--border)]">{language}</span>
+                </div>
+            )}
+            <CodeStreamingContext.Provider value={!node.complete}>
+                <CodeBlock code={uiNodeText(node).replace(/^\n|\n$/g, '')} lang={language ?? 'text'} />
+            </CodeStreamingContext.Provider>
+        </div>
     );
 }
 
@@ -49,7 +58,7 @@ function AttachedImage({
     const host = useChatHost();
     const source = host.attachments.useUrl(scopeId, chatId, attachmentId);
     if (!cell) {
-        return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full object-contain" />;
+        return <ImageThumb source={source} alt={alt} className="max-h-70 max-w-full rounded-xl object-contain" />;
     }
     return (
         <>
@@ -76,7 +85,7 @@ export function ImageRenderer({ node, children, context }: UiRendererProps<UiPro
             ) : (
                 <AttachedImage scopeId={context.scopeId} chatId={context.chatId} attachmentId={attachment} alt={name} cell={cell} unnamed={caption === ''} />
             )}
-            {caption !== '' && <figcaption className={cell ? 'text-xs wrap-anywhere text-text-muted' : 'px-2 text-xs text-text-muted'}>{children}</figcaption>}
+            {caption !== '' && <figcaption className="px-0.5 text-2xs wrap-anywhere text-text-muted">{children}</figcaption>}
             {cell && caption === '' && attachment === undefined && (
                 <figcaption className="text-xs wrap-anywhere text-text-faint">{alt ?? t('blocks.image.unavailable')}</figcaption>
             )}
@@ -89,7 +98,7 @@ export function GalleryRenderer({ node, children }: UiRendererProps<UiProps<'Gal
     const { t } = useTranslation('agent-chat');
     return (
         <GalleryContext value>
-            <div role="group" aria-label={t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length })} className="@container px-2">
+            <div role="group" aria-label={t('blocks.gallery.label', { count: uiChildrenOf(node, 'Image').length })} className="@container">
                 <div className="chat-ui-nodes grid grid-cols-2 gap-2 @min-[420px]:grid-cols-3">{children}</div>
             </div>
         </GalleryContext>
@@ -128,7 +137,7 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
         body = (
             // The frame keeps the picture's shape inside its tallest height: past it the width follows, so a portrait picture is not letterboxed.
             <div
-                className="relative max-h-96 overflow-hidden rounded-lg border border-border bg-surface-sunken"
+                className="relative max-h-96 overflow-hidden rounded-xl bg-ui-tile"
                 style={{ aspectRatio: aspect, width: `min(100%, ${COMPARE_MAX_HEIGHT * aspect}px)` }}
             >
                 <Wipe
@@ -162,14 +171,14 @@ export function CompareRenderer({ node, children, context }: UiRendererProps<UiP
         body = (
             <>
                 <ImageThumb source={shown.source} alt={shown.name} className="max-h-70 max-w-full object-contain" />
-                <span className="px-2 text-xs text-text-faint">{t('blocks.compare.missing')}</span>
+                <span className="text-2xs text-text-faint">{t('blocks.compare.missing')}</span>
             </>
         );
     }
     return (
-        <figure className="flex flex-col items-start gap-1.5 px-2">
+        <figure className="flex w-full flex-col items-start gap-1.5">
             {body}
-            {caption !== '' && <figcaption className="text-xs text-text-muted">{children}</figcaption>}
+            {caption !== '' && <figcaption className="px-0.5 text-2xs text-text-muted">{children}</figcaption>}
         </figure>
     );
 }
@@ -187,14 +196,63 @@ function CompareChip({ side, label }: { side: 'left' | 'right'; label: string })
     );
 }
 
+/*
+ * The host draws the model, since the chat knows no 3D format. The frame has a fixed height in the reply column,
+ * so a view that loads late never moves the thread. Without a view of the host, or without the bytes, the model
+ * stays a quiet row that names it.
+ */
+export function ModelRenderer({ node, children, context }: UiRendererProps<UiProps<'Model'>>) {
+    const { t } = useTranslation('agent-chat');
+    const host = useChatHost();
+    const { attachment, alt } = node.props;
+    const source = host.attachments.useUrl(context.scopeId, context.chatId, attachment);
+    const caption = uiNodeLabel(node);
+    const label = alt ?? (caption === '' ? t('blocks.model.label') : caption);
+    const View = host.ModelView;
+    let body: ReactNode;
+    if (View !== undefined && source.url !== null) {
+        body = (
+            <div role="group" aria-label={label} className="relative h-80 w-full overflow-hidden rounded-xl bg-ui-tile">
+                <ErrorBoundary label={t('blocks.model.crashed')} resetKeys={[attachment, source.url]} compact>
+                    <View
+                        scopeId={context.scopeId}
+                        chatId={context.chatId}
+                        attachmentId={attachment}
+                        url={source.url}
+                        label={label}
+                        alt={alt}
+                        caption={caption}
+                    />
+                </ErrorBoundary>
+            </div>
+        );
+    } else if (View !== undefined && source.failure === null) {
+        body = <div aria-busy="true" aria-label={label} className="h-80 w-full rounded-xl bg-ui-tile" />;
+    } else {
+        body = (
+            <div className="flex w-full min-w-0 items-center gap-2 rounded-xl bg-ui-tile px-3 py-2 text-xs">
+                <Icon icon={Box} size={14} className="shrink-0 text-text-muted" />
+                <span className="min-w-0 truncate text-text">{alt ?? attachment}</span>
+                <span className="ml-auto shrink-0 text-text-faint">{source.failure === null ? t('blocks.model.label') : t('blocks.model.unavailable')}</span>
+            </div>
+        );
+    }
+    return (
+        <figure className="flex w-full flex-col items-start gap-1.5">
+            {body}
+            {caption !== '' && <figcaption className="px-0.5 text-2xs text-text-muted">{children}</figcaption>}
+        </figure>
+    );
+}
+
 export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>) {
     const { t } = useTranslation('agent-chat');
     const headingId = useId();
     const numbers = new Map(uiChildrenOf(node, 'Source').map((source, index) => [source.id, index + 1]));
     return (
         <SourceNumbers value={numbers}>
-            <section aria-labelledby={headingId} className="flex flex-col">
-                <span id={headingId} className="px-2 pb-1 text-xs font-medium text-text-muted">
+            <section aria-labelledby={headingId} className="chat-ui-flat flex flex-col rounded-xl bg-ui-tile p-1.5">
+                <span id={headingId} className="chat-ui-flat-inner px-1.5 pt-0.5 pb-1 text-2xs font-medium text-text-muted">
                     {t('blocks.sources')}
                 </span>
                 <ol className="chat-ui-nodes flex flex-col">{children}</ol>
@@ -255,10 +313,12 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
     const [measureDomain, domainCut] = useTruncated<HTMLSpanElement>();
     const face = (
         <>
-            <span className="w-5 shrink-0 self-start text-right text-text-faint tabular-nums">{number}</span>
-            <span className="min-w-0 grow wrap-anywhere text-text">{title}</span>
-            <span ref={measureDomain} className="max-w-1/2 min-w-0 shrink-0 self-start truncate text-text-faint">
-                {uiUrlDomain(url)}
+            <span className="grid size-5 shrink-0 place-items-center rounded-md bg-ui-inset text-2xs font-semibold text-text tabular-nums">{number}</span>
+            <span className="flex min-w-0 grow flex-col">
+                <span className="font-medium wrap-anywhere text-text">{title}</span>
+                <span ref={measureDomain} className="truncate text-text-muted">
+                    {uiUrlDomain(url)}
+                </span>
             </span>
         </>
     );
@@ -274,13 +334,16 @@ export function SourceRenderer({ node, context }: UiRendererProps<UiProps<'Sourc
                 }
             >
                 {openUrl === undefined ? (
-                    <span tabIndex={domainCut ? 0 : undefined} className="flex min-h-8 items-start gap-2 rounded-md px-2 py-2 text-xs">
+                    <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"
+                    >
                         {face}
                     </span>
                 ) : (
                     <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"
+                        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)}
                     >
                         {face}

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

@@ -1,19 +1,25 @@
+import { createContext, useContext } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
 import type { UiProps } from '@adecore/intelligent-ui';
-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';
 import { uiChildrenOf, uiWithUnit } from '../node-text';
 import type { UiLiveValue, UiRendererProps } from '../render-context';
 import { isNumericColumn, UI_TABLE_ROWS, uiTableCell, uiTableColumns, type UiTableCell, type UiTableColumn } from '../table-data';
-import { UI_TONE_TEXT } from '../tones';
+import { UI_TONE_PILL } from '../tones';
 import { UiFallbackPart } from '../UiFallbackPart';
 
 /* 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.
@@ -31,7 +37,7 @@ export function StatsRenderer({ children }: UiRendererProps<UiProps<'Stats'>>) {
     return <div className="chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-2">{children}</div>;
 }
 
-/* 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 }: UiRendererProps<UiProps<'Stat'>>) {
     const { t } = useTranslation('agent-chat');
     const { label, value, previous, unit, tone } = node.props;
@@ -41,36 +47,63 @@ export function StatRenderer({ node, context }: UiRendererProps<UiProps<'Stat'>>
     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));
+    const said = percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from });
     return (
-        <div className="flex min-w-0 flex-col gap-0.5 rounded-md bg-surface-hover px-2 py-1.5">
-            <span className="truncate text-xs text-text-muted">{label}</span>
+        <div className="flex min-w-0 flex-col items-start gap-1.5 rounded-xl bg-ui-tile p-3">
+            <span className="max-w-full truncate text-2xs text-text-muted">{label}</span>
             <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"
+                className="max-w-full truncate text-lg font-semibold tabular-nums"
             />
             {change !== null && (
-                <span className={clsx('flex items-center gap-1 text-xs tabular-nums', tone === undefined ? 'text-text-faint' : UI_TONE_TEXT[tone])}>
-                    <Icon icon={arrow} size={12} className="shrink-0" />
-                    <span className="min-w-0 truncate">
-                        {percent === null ? t('blocks.stat.from', { previous: from }) : t('blocks.stat.change', { change: percent, previous: from })}
+                <Tooltip label={said}>
+                    <span tabIndex={0} className="max-w-full rounded-md">
+                        <Pill
+                            shape="tag"
+                            size="sm"
+                            tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]}
+                            icon={<Icon icon={arrow} size={12} className="shrink-0" />}
+                        >
+                            <span aria-hidden className="tabular-nums">
+                                {percent ?? from}
+                            </span>
+                            <span className="sr-only">{said}</span>
+                        </Pill>
                     </span>
-                </span>
+                </Tooltip>
             )}
         </div>
     );
 }
 
 export function EntityListRenderer({ node, children }: UiRendererProps<UiProps<'EntityList'>>) {
+    const count = uiChildrenOf(node, 'Entry').length;
+    if (count <= TILED_UP_TO) {
+        return (
+            <EntityTiles value>
+                <div className="chat-ui-nodes grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] gap-2">{children}</div>
+            </EntityTiles>
+        );
+    }
     return (
-        <KeyValueList.Root divided={uiChildrenOf(node, 'Entry').length >= DIVIDED_FROM} className="chat-ui-nodes px-2">
+        <KeyValueList.Root divided={count >= DIVIDED_FROM} className="chat-ui-nodes chat-ui-flat rounded-xl bg-ui-tile px-3 py-2">
             {children}
         </KeyValueList.Root>
     );
 }
 
 export function EntryRenderer({ node, children }: UiRendererProps<UiProps<'Entry'>>) {
+    const tiled = useContext(EntityTiles);
+    if (tiled) {
+        return (
+            <div className="flex min-w-0 flex-col gap-0.5 rounded-xl bg-ui-tile px-3 py-2">
+                <span className="truncate text-2xs text-text-muted">{node.props.label}</span>
+                <span className="text-2xs font-semibold wrap-break-word text-text">{children}</span>
+            </div>
+        );
+    }
     return (
         <KeyValueList.Item>
             <KeyValueList.Name>{node.props.label}</KeyValueList.Name>
@@ -129,19 +162,23 @@ export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'
     const shown = all ? rows : rows.slice(0, UI_TABLE_ROWS);
     return (
         <div className="flex flex-col items-start gap-1.5">
-            <div className="max-h-80 w-full overflow-auto rounded-md border border-border-soft">
+            <div className="chat-ui-flat max-h-80 w-full overflow-auto rounded-xl bg-ui-tile px-1.5 pb-1.5">
                 <table
                     aria-label={t('blocks.table.label', { columns: columns.map((column) => column.title).join(', ') })}
-                    className="w-full border-collapse text-xs tabular-nums"
+                    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'
+                    )}
                 >
-                    <thead className="sticky top-0 z-1 bg-surface-hover">
+                    <thead className="sticky top-0 z-1 bg-ui-tile">
                         <tr>
                             {columns.map((column) => (
                                 <th
                                     key={column.key}
                                     scope="col"
                                     className={clsx(
-                                        'h-8 px-2 font-medium whitespace-nowrap text-text-muted',
+                                        'h-8 px-2 text-2xs font-medium whitespace-nowrap text-text-muted',
                                         isNumericColumn(column) ? 'text-right' : 'text-left'
                                     )}
                                 >
@@ -153,11 +190,16 @@ export function TableRenderer({ node, context }: UiRendererProps<UiProps<'Table'
                     <tbody>
                         {shown.map((row, index) => (
                             // Rows only ever grow at the end while a block streams, so the place of a row is a stable key.
-                            <tr key={index} className="border-t border-border-soft">
-                                {columns.map((column) => (
+                            <tr key={index}>
+                                {columns.map((column, at) => (
                                     <td
                                         key={column.key}
-                                        className={clsx('h-8 px-2 text-text', isNumericColumn(column) ? 'text-right whitespace-nowrap' : 'text-left')}
+                                        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'
+                                        )}
                                     >
                                         <Cell
                                             value={row[column.key]}

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

@@ -23,7 +23,7 @@ const ChecklistContext = createContext<ChecklistState>({ values: [], enabled: fa
 function ChecklistGroup({ pending, children }: { pending: boolean; children: ReactNode }) {
     const { t } = useTranslation('agent-chat');
     return (
-        <div role="group" aria-label={t('blocks.checklist')} className={clsx('chat-ui-nodes flex flex-col', pending && PENDING)}>
+        <div role="group" aria-label={t('blocks.checklist')} className={clsx('chat-ui-nodes flex flex-col gap-1.5', pending && PENDING)}>
             {children}
         </div>
     );
@@ -42,10 +42,11 @@ export function ChecklistRenderer({ node, children, context }: UiRendererProps<U
     );
 }
 
-/* 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 }: UiRendererProps<UiProps<'Item'>>) {
     const list = useContext(ChecklistContext);
     const { value } = node.props;
+    const checked = list.values.includes(value);
     const toggleRow = (event: MouseEvent<HTMLDivElement>): void => {
         if (list.enabled && !(event.target as Element).closest('button, a')) {
             list.toggle(value);
@@ -53,10 +54,14 @@ export function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>
     };
     return (
         <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')}
+            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}
         >
-            <Checkbox checked={list.values.includes(value)} onCheckedChange={() => list.toggle(value)} label={uiNodeLabel(node)} disabled={!list.enabled} />
+            <Checkbox className="mt-0.5" checked={checked} onCheckedChange={() => list.toggle(value)} label={uiNodeLabel(node)} disabled={!list.enabled} />
             <div className="min-w-0 grow">{children}</div>
         </div>
     );
@@ -65,8 +70,10 @@ export function ItemRenderer({ node, children }: UiRendererProps<UiProps<'Item'>
 export function SwitchRenderer({ node, children, context }: UiRendererProps<UiProps<'Switch'>>) {
     const binding = bindingOf(node, context);
     return (
-        <div className={clsx('flex min-h-7 items-center justify-between gap-3 px-2 text-sm', !node.complete && PENDING)}>
-            <span className="min-w-0 text-text">{children}</span>
+        <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)}
+        >
+            <span className="min-w-0 font-medium text-text">{children}</span>
             <Switch
                 checked={binding?.value ?? node.props.value}
                 onCheckedChange={(next) => binding?.onValueChange(next)}
@@ -92,7 +99,7 @@ export function SliderRenderer({ node, context }: UiRendererProps<UiProps<'Slide
             unit={uiWithUnit('', unit)}
             label={uiNodeLabel(node)}
             disabled={binding === null}
-            className={clsx('px-2', !node.complete && PENDING)}
+            className={clsx('chat-ui-flat rounded-xl bg-ui-tile p-3', !node.complete && PENDING)}
         />
     );
 }
@@ -108,7 +115,7 @@ export function SegmentedRenderer({ node, context }: UiRendererProps<UiProps<'Se
     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 (
-        <div className={clsx('px-2', !node.complete && PENDING)}>
+        <div className={clsx(!node.complete && PENDING)}>
             <Segmented
                 value={picked}
                 options={options}
@@ -145,8 +152,8 @@ export function TextFieldRenderer({ node, children, context }: UiRendererProps<U
     const countId = `${id}-count`;
     const counting = value.length >= maxLength * COUNT_FROM;
     return (
-        <div className={clsx('flex flex-col gap-1 px-2', !node.complete && PENDING)}>
-            <label htmlFor={id} className="text-sm text-text-muted">
+        <div className={clsx('flex flex-col gap-1.5', !node.complete && PENDING)}>
+            <label htmlFor={id} className="px-0.5 text-2xs text-text-muted">
                 {children}
             </label>
             <Input
@@ -157,7 +164,7 @@ export function TextFieldRenderer({ node, children, context }: UiRendererProps<U
                 placeholder={placeholder}
                 disabled={binding === null}
                 aria-describedby={counting ? countId : undefined}
-                className="max-w-96 bg-surface-sunken"
+                className="border-transparent bg-ui-tile"
                 onChange={(event) => binding?.onValueChange(event.target.value)}
             />
             {counting && (
@@ -180,8 +187,8 @@ export function SelectRenderer({ node, context }: UiRendererProps<UiProps<'Selec
     const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
     const label = uiOwnLabel(node);
     return (
-        <div className={clsx('flex flex-col items-start gap-1 px-2', !node.complete && PENDING)}>
-            {label !== '' && <span className="text-sm text-text-muted">{label}</span>}
+        <div className={clsx('flex flex-col items-start gap-1.5', !node.complete && PENDING)}>
+            {label !== '' && <span className="px-0.5 text-2xs text-text-muted">{label}</span>}
             <Select
                 value={options.find((option) => option.value === current)?.id ?? null}
                 items={options.map((option) => ({ value: option.id, label: option.label }))}
@@ -204,7 +211,7 @@ export function ButtonRenderer({ node, children, context }: UiRendererProps<UiPr
     const label = uiNodeLabel(node);
     const [measure, truncated] = useTruncated<HTMLSpanElement>();
     return (
-        <div className={clsx('px-2', !node.complete && PENDING)}>
+        <div className={clsx(!node.complete && PENDING)}>
             <Tooltip label={label} disabled={!truncated}>
                 <Button variant="secondary" size="sm" className="max-w-full" disabled={!enabled} onClick={() => node.onAction?.()}>
                     <span ref={measure} className="min-w-0 truncate">

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

@@ -4,12 +4,15 @@ import { useTranslation } from 'react-i18next';
 import { FileDiff, GitCommitHorizontal, SquareDashed } from 'lucide-react';
 import type { UiProps } from '@adecore/intelligent-ui';
 import { FileIcon, Icon, Tooltip } from '@adecore/ui';
-import { CHIP_IN_MESSAGE, MENTION_TONE } from '../../chips';
+import { CHIP_IN_MESSAGE } from '../../chips';
 import { uiReasonText } from '../node-text';
 import type { UiLink, UiLinkTarget, UiRenderContext, UiRendererProps } from '../render-context';
 
 const PLAIN: UiLink = { 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: string): string {
     const trimmed = path.replace(/\/+$/, '');
     return trimmed.slice(trimmed.lastIndexOf('/') + 1) || path;
@@ -96,11 +99,11 @@ export function UiLinkChip({ target, context }: { target: UiLinkTarget; context:
     const { openLink } = context;
     const chip =
         openLink === undefined ? (
-            <span className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 starting:opacity-0')}>{face}</span>
+            <span className={clsx(CHIP_IN_MESSAGE, UI_CHIP, 'transition-opacity duration-120 starting:opacity-0')}>{face}</span>
         ) : (
             <button
                 type="button"
-                className={clsx(CHIP_IN_MESSAGE, MENTION_TONE, 'transition-opacity duration-120 hover:brightness-95 starting:opacity-0')}
+                className={clsx(CHIP_IN_MESSAGE, UI_CHIP, 'transition-opacity duration-120 hover:bg-surface-hover starting:opacity-0')}
                 onClick={() => openLink(target)}
             >
                 {face}
@@ -115,7 +118,7 @@ function LinkRow({ target, context, described, children }: { target: UiLinkTarge
         return <UiLinkChip target={target} context={context} />;
     }
     return (
-        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 px-2 text-sm">
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 text-xs">
             <span className="max-w-full min-w-0">
                 <UiLinkChip target={target} context={context} />
             </span>