@adecore/agents-react 0.27.5 → 0.29.0

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

@@ -34,8 +34,8 @@ function NumberChip({ number, selected }: { number: number; selected: boolean })
         <span
             aria-hidden
             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'
+                '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'
             )}
         >
             {number}
@@ -50,7 +50,7 @@ function PlaceRow({ listed, number, selected, onPick }: { listed: ListedPlace; n
         <>
             <NumberChip number={number} selected={selected} />
             <span className="flex min-w-0 grow flex-col gap-0.5">
-                <span className="text-sm wrap-break-word text-text">{listed.name}</span>
+                <span className="text-xs font-medium wrap-break-word text-text">{listed.name}</span>
                 {detail !== undefined && detail !== '' && <span className="text-xs wrap-break-word text-text-muted">{detail}</span>}
                 {address !== undefined && address !== '' && <span className="text-xs wrap-break-word text-text-faint">{address}</span>}
                 {listed.point === undefined && <span className="text-xs text-text-faint">{t('blocks.map.lookingUp')}</span>}
@@ -58,13 +58,18 @@ function PlaceRow({ listed, number, selected, onPick }: { listed: ListedPlace; n
             </span>
         </>
     );
-    const row = 'flex w-full min-h-8 items-start gap-2 rounded-md px-2 py-1.5 text-left';
+    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 (
         <li>
             {onPick === null ? (
-                <div className={clsx(row, selected && 'bg-surface-hover')}>{body}</div>
+                <div className={clsx(row, selected && 'ring-2 ring-accent ring-inset')}>{body}</div>
             ) : (
-                <button type="button" aria-pressed={selected} className={clsx(row, 'hover:bg-surface-hover', selected && 'bg-surface-hover')} onClick={onPick}>
+                <button
+                    type="button"
+                    aria-pressed={selected}
+                    className={clsx(row, 'hover:bg-surface-active', selected && 'ring-2 ring-accent ring-inset')}
+                    onClick={onPick}
+                >
                     {body}
                 </button>
             )}
@@ -150,7 +155,7 @@ function MapFrame({ markers, source, selected, onPick }: FrameProps) {
     }
     return (
         <>
-            <div ref={setElement} className="relative h-50 overflow-hidden rounded-lg border border-border bg-surface-sunken @min-[420px]:h-60">
+            <div ref={setElement} className="relative h-50 overflow-hidden rounded-xl bg-ui-tile @min-[420px]:h-60">
                 {body}
                 {waiting && (
                     <div className="pointer-events-none absolute inset-0 grid place-items-center">
@@ -200,9 +205,9 @@ export function MapRenderer({ node, children, context }: UiRendererProps<UiProps
         <MapFrame markers={markers} source={null} selected={selectedId} onPick={onPick} />
     );
     return (
-        <div className={clsx('@container flex flex-col gap-1.5 px-2', !node.complete && PENDING)}>
+        <div className={clsx('@container flex flex-col gap-1.5', !node.complete && PENDING)}>
             {frame}
-            <ol aria-label={t('blocks.map.label', { count: places.length })} className="flex flex-col">
+            <ol aria-label={t('blocks.map.label', { count: places.length })} className="grid gap-1.5 @min-[420px]:grid-cols-2">
                 {places.map((listed, index) => {
                     const { value } = listed.node.props;
                     return (
@@ -216,9 +221,7 @@ export function MapRenderer({ node, children, context }: UiRendererProps<UiProps
                     );
                 })}
             </ol>
-            {node.omitted !== undefined && node.omitted > 0 && (
-                <p className="px-2 text-xs text-text-faint">{t('blocks.map.omitted', { count: node.omitted })}</p>
-            )}
+            {node.omitted !== undefined && node.omitted > 0 && <p className="text-2xs text-text-faint">{t('blocks.map.omitted', { count: node.omitted })}</p>}
             {/* A place the catalog refused draws as its text, which is all its node renders. */}
             <div className="chat-ui-nodes flex flex-col gap-1.5 empty:hidden">{children}</div>
         </div>

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

@@ -22,7 +22,7 @@ export function TabsRenderer({ node, children, context }: UiRendererProps<UiProp
     const value = picked !== null && tabs.some((tab) => tab.id === picked) ? picked : (tabs[0]?.id ?? null);
     return (
         <Tabs.Root value={value} onValueChange={(next) => setPicked(String(next))} className="flex flex-col gap-3">
-            <Tabs.List className="px-2">
+            <Tabs.List variant="pill" overflow="scroll" className="w-fit max-w-full rounded-xl bg-ui-tile p-0.75">
                 {tabs.map((tab) => (
                     <Tabs.Tab key={tab.id} value={tab.id} data-ui-reveal={tab.id}>
                         {tab.props.title}
@@ -46,24 +46,24 @@ export function SectionsRenderer({ node, children, context }: UiRendererProps<Ui
     const [touched, setTouched] = useBlockLocal(context, node.id, () => false);
     return (
         <SectionsContext value={{ touched, touch: () => setTouched(true) }}>
-            <div className="chat-ui-nodes flex flex-col divide-y divide-border-soft">{children}</div>
+            <div className="chat-ui-nodes flex flex-col gap-1.5">{children}</div>
         </SectionsContext>
     );
 }
 
-/* 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 }: UiRendererProps<UiProps<'Section'>>) {
     const fold = useContext(SectionsContext);
     const [open, setOpen] = useBlockLocal(context, node.id, () => !fold.touched);
     const contentId = useId();
     return (
-        <section>
+        <section className="rounded-xl bg-ui-tile">
             <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"
+                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);
@@ -76,7 +76,7 @@ export function SectionRenderer({ node, children, context }: UiRendererProps<UiP
                 />
                 <span className="min-w-0 truncate">{node.props.title}</span>
             </button>
-            <div id={contentId} hidden={!open} className="chat-ui-nodes flex flex-col gap-3 pt-1 pr-2 pb-2 pl-7.5">
+            <div id={contentId} hidden={!open} className="chat-ui-section-body chat-ui-nodes flex flex-col gap-3 px-3 pb-3">
                 {children}
             </div>
         </section>

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

@@ -7,7 +7,7 @@ import { Icon, Meter, Pill, Spinner } from '@adecore/ui';
 import { formatNumber, formatPercent } from '@adecore/ui/format';
 import { UiHeadContext, type UiRenderContext, type UiRendererProps } from '../render-context';
 import { uiEventTime, uiNodeLabel } from '../node-text';
-import { UI_TONE_ICONS, UI_TONE_PILL, UI_TONE_SURFACE, UI_TONE_TEXT } from '../tones';
+import { UI_STEP_PILL, UI_TONE_FILL, UI_TONE_ICONS, UI_TONE_PILL, UI_TONE_SURFACE, UI_TONE_TEXT } from '../tones';
 
 type StepState = UiProps<'Step'>['state'];
 
@@ -26,43 +26,56 @@ const STEP_TONES: Readonly<Record<StepState, string>> = {
     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: UiRenderContext): boolean {
     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;
+/* 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';
 
-/* The head of the block when it is the first node, a subheading without an icon further down. */
+/*
+ * 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 }: UiRendererProps<UiProps<'Summary'>>) {
     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;
+    const shown = tone ?? 'neutral';
     return (
-        <div className="flex items-start gap-2 px-2">
-            {head && tone !== undefined && <Icon icon={UI_TONE_ICONS[tone]} size={16} className={clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone])} />}
-            <div className="flex min-w-0 grow flex-wrap items-start gap-x-2 gap-y-1">
-                <div className="max-w-full min-w-0 grow basis-48 text-sm font-semibold text-balance wrap-break-word text-text">{children}</div>
-                {tag && (
-                    <Pill shape="tag" tone={tone === undefined ? 'muted' : UI_TONE_PILL[tone]}>
-                        {badge}
-                    </Pill>
+        <div className={clsx(ICON_ROW, tone === undefined ? 'bg-ui-tile' : UI_TONE_SURFACE[tone])}>
+            {head && (
+                <span aria-hidden className={clsx(ICON_SQUARE, 'text-accent-text dark:text-surface', UI_TONE_FILL[shown])}>
+                    <Icon icon={UI_TONE_ICONS[shown]} size={16} />
+                </span>
+            )}
+            <div className={ICON_TEXT}>
+                <div className="text-base font-semibold text-balance wrap-break-word text-text">{children}</div>
+                {badge !== undefined && badge !== '' && (
+                    <p className={clsx('text-2xs font-medium wrap-anywhere', tone === undefined ? 'text-text-muted' : UI_TONE_TEXT[tone])}>{badge}</p>
                 )}
-                {!tag && badge !== undefined && badge !== '' && <p className="w-full text-xs wrap-anywhere text-text-muted">{badge}</p>}
             </div>
         </div>
     );
 }
 
+/* A quiet tile whatever its tone: only the square of its icon wears the tone. */
 export function CalloutRenderer({ node, children }: UiRendererProps<UiProps<'Callout'>>) {
     const { tone, title } = node.props;
     return (
-        <div className={clsx('flex gap-2 rounded-md p-2 text-sm', UI_TONE_SURFACE[tone])}>
-            <Icon icon={UI_TONE_ICONS[tone]} size={16} className={clsx('mt-0.75 shrink-0', UI_TONE_TEXT[tone])} />
-            <div className="min-w-0 grow">
-                {title !== undefined && title !== '' && <div className="font-medium text-text">{title}</div>}
+        <div className={clsx('chat-ui-flat bg-ui-tile text-xs', ICON_ROW)}>
+            <span aria-hidden className={clsx(ICON_SQUARE, UI_TONE_SURFACE[tone], UI_TONE_TEXT[tone])}>
+                <Icon icon={UI_TONE_ICONS[tone]} size={16} />
+            </span>
+            <div className={ICON_TEXT}>
+                {title !== undefined && title !== '' && <div className="font-semibold text-text">{title}</div>}
                 <div className="text-text-muted">{children}</div>
             </div>
         </div>
@@ -87,7 +100,7 @@ export function ProgressRenderer({ node, children, context }: UiRendererProps<Ui
         value === undefined ? null : limit === 100 ? formatPercent(value) : t('blocks.progress.of', { value: formatNumber(value), max: formatNumber(limit) });
     const label = uiNodeLabel(node);
     return (
-        <div className="flex flex-col gap-1 px-2">
+        <div className="chat-ui-flat flex flex-col gap-2 rounded-xl bg-ui-tile p-3">
             <div className="flex items-baseline justify-between gap-3 text-xs">
                 <span className="min-w-0 text-text">{children}</span>
                 {reading !== null ? (
@@ -102,17 +115,17 @@ export function ProgressRenderer({ node, children, context }: UiRendererProps<Ui
 }
 
 export function StepsRenderer({ children }: UiRendererProps<UiProps<'Steps'>>) {
-    return <ol className="chat-ui-nodes flex flex-col px-2">{children}</ol>;
+    return <ol className="chat-ui-nodes flex flex-col gap-1.5">{children}</ol>;
 }
 
-/* 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 }: UiRendererProps<UiProps<'Step'>>) {
     const { t } = useTranslation('agent-chat');
     const { state, detail } = node.props;
     const quiet = state === 'pending' || state === 'skipped';
     return (
-        <li className="flex min-h-7 items-center gap-2 text-sm">
-            <span className={clsx('grid size-4 shrink-0 place-items-center', STEP_TONES[state])}>
+        <li className="flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs">
+            <span className={clsx('mt-0.5 grid size-4 shrink-0 place-items-center', STEP_TONES[state])}>
                 {state === 'running' ? (
                     isLive(context) ? (
                         <Spinner size={14} />
@@ -123,21 +136,23 @@ export function StepRenderer({ node, children, context }: UiRendererProps<UiProp
                     <Icon icon={STEP_ICONS[state]} size={14} />
                 )}
             </span>
-            <span className="sr-only">{t(`blocks.step.${state}`)}</span>
             {/* A short detail stays beside the title; one that does not fit beside it takes the line under it. */}
-            <span className="flex min-w-0 grow flex-wrap items-baseline justify-between gap-x-2">
-                <span className={clsx('max-w-full min-w-0 grow basis-48 wrap-break-word', quiet ? 'text-text-faint' : 'text-text')}>{children}</span>
-                {detail !== undefined && detail !== '' && <span className="max-w-full text-xs wrap-anywhere text-text-faint tabular-nums">{detail}</span>}
+            <span className="flex min-w-0 grow flex-wrap items-baseline gap-x-2">
+                <span className={clsx('max-w-full min-w-0 font-medium wrap-break-word', quiet ? 'text-text-muted' : 'text-text')}>{children}</span>
+                {detail !== undefined && detail !== '' && <span className="max-w-full text-2xs wrap-anywhere text-text-muted tabular-nums">{detail}</span>}
             </span>
+            <Pill shape="tag" size="sm" tone={UI_STEP_PILL[state]} className="shrink-0">
+                {t(`blocks.step.${state}`)}
+            </Pill>
         </li>
     );
 }
 
 export function TimelineRenderer({ children }: UiRendererProps<UiProps<'Timeline'>>) {
-    return <ol className="chat-ui-nodes flex flex-col px-2">{children}</ol>;
+    return <ol className="chat-ui-nodes chat-ui-flat flex flex-col rounded-xl bg-ui-tile px-3 py-1.5">{children}</ol>;
 }
 
-/* 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 }: UiRendererProps<UiProps<'Event'>>) {
     const { t } = useTranslation('agent-chat');
     const { at, detail } = node.props;
@@ -145,22 +160,28 @@ export function EventRenderer({ node, children }: UiRendererProps<UiProps<'Event
     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(', ');
+    const described = detail !== undefined && detail !== '';
+    const tagged = described && detail.length <= DETAIL_AS_TAG;
     return (
-        <li aria-label={label} className="group/event relative flex min-h-7 gap-3 pb-3 last:pb-0">
-            <span aria-hidden className={clsx('mt-1 size-2 shrink-0 rounded-full bg-current', UI_TONE_TEXT[tone])} />
-            <span aria-hidden className="absolute top-3.5 bottom-0 left-0.75 w-px bg-border group-last/event:hidden" />
+        <li aria-label={label} className="flex min-h-9 items-start gap-3 py-2 text-xs">
+            {/* A time nobody could read stays as written and is no `dateTime` for a machine to read. */}
+            {parseUiEventTime(at) === null ? (
+                <span className="w-24 shrink-0 text-2xs leading-5 wrap-anywhere text-text-muted tabular-nums">{time}</span>
+            ) : (
+                <time dateTime={at} className="w-24 shrink-0 text-2xs leading-5 text-text-muted tabular-nums">
+                    {time}
+                </time>
+            )}
+            <span aria-hidden className={clsx('mt-1.5 size-2 shrink-0 rounded-full bg-current', tone === 'neutral' ? 'text-text-faint' : UI_TONE_TEXT[tone])} />
             <div className="flex min-w-0 grow flex-col gap-0.5">
-                {/* A time nobody could read stays as written and is no `dateTime` for a machine to read. */}
-                {parseUiEventTime(at) === null ? (
-                    <span className="text-xs wrap-anywhere text-text-muted tabular-nums">{time}</span>
-                ) : (
-                    <time dateTime={at} className="text-xs text-text-muted tabular-nums">
-                        {time}
-                    </time>
-                )}
-                <div className="text-sm wrap-break-word text-text">{children}</div>
-                {detail !== undefined && detail !== '' && <div className="text-xs wrap-anywhere text-text-muted">{detail}</div>}
+                <div className="wrap-break-word text-text">{children}</div>
+                {described && !tagged && <div className="text-2xs wrap-anywhere text-text-muted">{detail}</div>}
             </div>
+            {tagged && (
+                <Pill shape="tag" size="sm" tone={UI_TONE_PILL[tone]} className="shrink-0">
+                    {detail}
+                </Pill>
+            )}
         </li>
     );
 }

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

@@ -35,3 +35,21 @@ export const UI_TONE_PILL: Readonly<Record<UiTone, NonNullable<PillProps['tone']
     warning: 'needsYou',
     danger: 'error'
 };
+
+/* The tone at full strength, for the square that carries the icon of a Summary. */
+export const UI_TONE_FILL: Readonly<Record<UiTone, string>> = {
+    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: Readonly<Record<'done' | 'running' | 'pending' | 'failed' | 'skipped', NonNullable<PillProps['tone']>>> = {
+    done: 'idle',
+    running: 'accent',
+    pending: 'muted',
+    failed: 'error',
+    skipped: 'muted'
+};

package/src/host.ts

@@ -260,6 +260,23 @@ export type UiMapSource =
       }
     | { state: 'off'; reason: 'disabled' | 'signed-out' | 'unavailable' };
 
+/*
+ * What the host's view of a Model block gets. It is drawn only once the attachment has a URL, inside a frame
+ * of fixed height that the block sizes and captions itself, so the view fills its parent and draws no caption.
+ */
+export interface UiModelViewProps {
+    scopeId: string;
+    chatId: string;
+    attachmentId: string;
+    /* The attachment's bytes, as `attachments.useUrl` resolved them. */
+    url: string;
+    /* What the model shows, for a screen reader: the block's alt, its caption, or a word for a 3D model. */
+    label: string;
+    alt?: string;
+    /* The caption as plain text, empty without one. */
+    caption: string;
+}
+
 /*
  * What the app around the chat decides and the chat cannot, handed to the views by a `ChatHostProvider`.
  * Whatever an app leaves out keeps the default here, which is the chat without that part. One host may
@@ -313,6 +330,8 @@ export interface ChatHost {
     };
     /* The image a tool read, drawn under its row; null draws none. */
     ReadImage: ComponentType<{ path: string }> | null;
+    /* The 3D view of a Model block; left out, a model shows as a row with its name and caption. */
+    ModelView?: ComponentType<UiModelViewProps>;
     /* An image a reply's markdown names by a path on the host's machine, absolute or under the chat's cwd; left out, the `<img>` stays as written. */
     MarkdownImage?: ComponentType<{ path: string; alt: string }>;
     code: {

package/src/index.ts

@@ -15,6 +15,7 @@ export {
     type ReplyAuthor,
     type ChatHost,
     type UiMapSource,
+    type UiModelViewProps,
     type CommandLook,
     type CommandLookMatch,
     type CommandName,

package/src/locales/en/agent-chat.ts

@@ -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/src/locales/nl/agent-chat.ts

@@ -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/src/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); }