@adecore/agents-react 0.27.4 → 0.28.0

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

@@ -1,6 +1,6 @@
 import { ChartRenderer } from './renderers/chart.js';
 import { ChoiceRenderer, ChoicesRenderer } from './renderers/choices.js';
-import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, SourceRenderer, SourcesRenderer } from './renderers/content.js';
+import { CodeBlockRenderer, CompareRenderer, GalleryRenderer, ImageRenderer, ModelRenderer, SourceRenderer, SourcesRenderer } from './renderers/content.js';
 import { EntityListRenderer, EntryRenderer, StatRenderer, StatsRenderer, TableRenderer } from './renderers/data.js';
 import { ButtonRenderer, ChecklistRenderer, ItemRenderer, SegmentedRenderer, SelectRenderer, SliderRenderer, SwitchRenderer, TextFieldRenderer } from './renderers/inputs.js';
 import { CommitRenderer, DiffRenderer, FileRenderer, NodeRenderer } from './renderers/links.js';
@@ -37,6 +37,7 @@ export const UI_RENDERERS = {
     Image: ImageRenderer,
     Gallery: GalleryRenderer,
     Compare: CompareRenderer,
+    Model: ModelRenderer,
     Map: MapRenderer,
     Place: null,
     Sources: SourcesRenderer,

package/dist/chat/ui/intelligent-ui/renderers/content.d.ts

@@ -4,6 +4,7 @@ export declare function CodeBlockRenderer({ node }: UiRendererProps<UiProps<'Cod
 export declare function ImageRenderer({ node, children, context }: UiRendererProps<UiProps<'Image'>>): import("react").JSX.Element;
 export declare function GalleryRenderer({ node, children }: UiRendererProps<UiProps<'Gallery'>>): import("react").JSX.Element;
 export declare function CompareRenderer({ node, children, context }: UiRendererProps<UiProps<'Compare'>>): import("react").JSX.Element;
+export declare function ModelRenderer({ node, children, context }: UiRendererProps<UiProps<'Model'>>): import("react").JSX.Element;
 export declare function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>): import("react").JSX.Element;
 export interface UiSourceCitationProps {
     number: number;

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

@@ -2,7 +2,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import clsx from 'clsx';
 import { createContext, useContext, useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
+import { Box } from 'lucide-react';
+import { ErrorBoundary, Icon, Pill, PreviewCard, Tooltip, Wipe } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { useChatHost } from '../../../../host.js';
 import { CodeBlock } from '../../CodeBlock.js';
@@ -95,6 +96,31 @@ export function CompareRenderer({ node, children, context }) {
 function CompareChip({ side, label }) {
     return (_jsx("span", { className: clsx('pointer-events-none absolute top-2 z-20 max-w-2/5 truncate rounded-md bg-surface-raised', side === 'left' ? 'left-2' : 'right-2'), children: _jsx(Pill, { shape: "tag", size: "sm", tone: "muted", children: label }) }));
 }
+/*
+ * 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 }) {
+    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;
+    if (View !== undefined && source.url !== null) {
+        body = (_jsx("div", { role: "group", "aria-label": label, className: "relative h-80 w-full overflow-hidden rounded-lg border border-border bg-surface-sunken", children: _jsx(ErrorBoundary, { label: t('blocks.model.crashed'), resetKeys: [attachment, source.url], compact: true, children: _jsx(View, { scopeId: context.scopeId, chatId: context.chatId, attachmentId: attachment, url: source.url, label: label, alt: alt, caption: caption }) }) }));
+    }
+    else if (View !== undefined && source.failure === null) {
+        body = _jsx("div", { "aria-busy": "true", "aria-label": label, className: "h-80 w-full rounded-lg border border-border bg-surface-sunken" });
+    }
+    else {
+        body = (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs", children: [_jsx(Icon, { icon: Box, size: 14, className: "shrink-0 text-text-muted" }), _jsx("span", { className: "min-w-0 truncate text-text", children: alt ?? attachment }), _jsx("span", { className: "ml-auto shrink-0 text-text-faint", children: source.failure === null ? t('blocks.model.label') : t('blocks.model.unavailable') })] }));
+    }
+    return (_jsxs("figure", { className: "flex flex-col items-start gap-1.5 px-2", children: [body, caption !== '' && _jsx("figcaption", { className: "text-xs text-text-muted", children: children })] }));
+}
 export function SourcesRenderer({ node, children }) {
     const { t } = useTranslation('agent-chat');
     const headingId = useId();

package/dist/chat/ui/rows/MessageRows.js

@@ -185,7 +185,7 @@ export function ThinkingRow({ chatId, item: derived }) {
     const preview = useMemo(() => (item.streaming ? '' : thoughtPreview(item.text)), [item.streaming, item.text]);
     const duration = formatElapsedShort((item.endedAt ?? item.createdAt) - item.createdAt);
     useOpenForFind(item.id, 'text', setOpen);
-    return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsxs("button", { className: "flex w-full min-w-0 items-center gap-2 text-left text-xs text-text-muted hover:text-text", disabled: item.streaming, "aria-expanded": item.streaming ? undefined : open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), item.streaming ? (_jsx("span", { className: "chat-live-text min-w-0 truncate", children: live || t('rows.thinking.live') })) : preview === '' ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('rows.thinking.thoughtFor', { duration }) }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate", children: open ? t('rows.thinking.thought') : preview }), _jsx("span", { className: "grow" }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: duration }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] }))] }), shown && text !== '' && (_jsx("div", { "data-find-field": "text", className: "mt-1 border-l border-border pl-2.5 select-text", children: reveal.active ? (_jsx("div", { className: "text-sm whitespace-pre-wrap text-text-faint", children: _jsx(FadingWords, { text: reveal.text }) })) : (_jsx(Markdown, { text: text, muted: true })) }))] }));
+    return (_jsxs("div", { "data-find-item": item.id, className: "-mx-1 px-1 pb-2", children: [_jsxs("button", { className: "flex w-full min-w-0 items-center gap-2 text-left text-xs text-text-muted hover:text-text", disabled: item.streaming, "aria-expanded": item.streaming ? undefined : open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: ROW_GUTTER, children: _jsx(Icon, { icon: Brain, size: 12 }) }), item.streaming ? (_jsx("span", { className: "chat-live-text min-w-0 truncate", children: live || t('rows.thinking.live') })) : preview === '' ? (_jsxs(_Fragment, { children: [_jsx("span", { children: t('rows.thinking.thoughtFor', { duration }) }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 truncate", children: open ? t('rows.thinking.thought') : preview }), _jsx("span", { className: "grow" }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: duration }), _jsx(Icon, { icon: ChevronDown, size: 12, className: clsx('shrink-0 transition-transform', open && 'rotate-180') })] }))] }), shown && text !== '' && (_jsx("div", { "data-find-field": "text", className: "mt-1 ml-1.75 border-l border-border pl-4 select-text", children: reveal.active ? (_jsx("div", { className: "text-sm whitespace-pre-wrap text-text-faint", children: _jsx(FadingWords, { text: reveal.text }) })) : (_jsx(Markdown, { text: text, muted: true })) }))] }));
 }
 /*
  * The latest thought of a running turn over the call it led to, as its heading or first sentence,
@@ -257,7 +257,7 @@ export function ApprovalHistoryRow({ item }) {
     if (item.decision === 'pending') {
         return null;
     }
-    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint", children: [_jsx("span", { className: clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error'), children: DECISION_ICON[item.decision] }), _jsx("span", { className: clsx(item.decision === 'deny' && 'text-status-error'), children: t(`rows.approval.${item.decision}`) }), _jsx("span", { className: "text-text-muted", children: item.toolName }), _jsx("span", { className: "min-w-0 truncate font-mono", children: toolSummaryIsPath(item.toolName, item.input) ? (_jsx(MiddleTruncate, { text: toolSummary(item.toolName, item.input) })) : (toolSummary(item.toolName, item.input)) })] }));
+    return (_jsxs("div", { className: "-mx-1 mb-0.5 flex h-7 items-center gap-2 px-1 text-xs text-text-faint", children: [_jsx("span", { className: clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error'), children: DECISION_ICON[item.decision] }), _jsx("span", { className: clsx(item.decision === 'deny' && 'text-status-error'), children: t(`rows.approval.${item.decision}`) }), _jsx("span", { className: "text-text-muted", children: item.toolName }), _jsx("span", { className: "min-w-0 truncate font-mono text-code", children: toolSummaryIsPath(item.toolName, item.input) ? (_jsx(MiddleTruncate, { text: toolSummary(item.toolName, item.input) })) : (toolSummary(item.toolName, item.input)) })] }));
 }
 export function QuestionHistoryRow({ item }) {
     const { t } = useTranslation('agent-chat');

package/dist/chat/ui/rows/TaskRow.js

@@ -10,6 +10,7 @@ import { useChatScope } from '../../../scope.js';
 import { useChats } from '../../../state/chats.js';
 import { useProviders } from '../../../state/providers.js';
 import { taskRowStateOf } from '../../subagent-list.js';
+import { ROW_GUTTER } from '../icons.js';
 const DOT = {
     running: 'bg-status-running',
     waiting: 'bg-status-needs-you',
@@ -34,7 +35,7 @@ function StateLine({ state, task }) {
     const { t } = useTranslation('agent-chat');
     const until = state === 'paused' ? task?.paused?.until : undefined;
     const now = useNow(60_000, until === undefined);
-    return (_jsx("span", { className: clsx('truncate text-xs', STATE_TONE[state]), children: until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) }) }));
+    return (_jsx("span", { className: clsx('truncate text-2xs', STATE_TONE[state]), children: until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) }) }));
 }
 /*
  * The row of a task given to another node: that agent's mark and model, what the task is about and
@@ -59,5 +60,5 @@ export function TaskRow({ item, task, open, onPress }) {
     const startedAt = task?.createdAt ?? item.startedAt;
     const finishedAt = task === null ? item.finishedAt : (task.settledAt ?? item.finishedAt);
     const settled = state === 'done' || state === 'failed' || state === 'cancelled';
-    return (_jsxs("button", { className: "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-center gap-2.5 rounded-md px-1 py-1 text-left hover:bg-surface-hover", onClick: onPress, children: [_jsxs("span", { className: "relative grid size-7 shrink-0 place-items-center rounded-full bg-surface-raised text-text", children: [provider === undefined ? _jsx(Icon, { icon: Bot, size: 14 }) : _jsx(AgentIcon, { kind: provider, size: 14 }), _jsx("span", { className: clsx('absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2 ring-surface', DOT[state]) })] }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { "data-find-field": "summary", className: "truncate text-xs font-medium text-text", children: model === null ? title : t('rows.task.named', { model, title }) }), _jsx(StateLine, { state: state, task: task })] }), (state === 'running' || state === 'waiting') && startedAt > 0 && _jsx(Elapsed, { startedAt: startedAt }), settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (_jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: formatElapsedShort(finishedAt - startedAt) })), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] }));
+    return (_jsxs("button", { className: "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left hover:bg-surface-hover", onClick: onPress, children: [_jsxs("span", { className: clsx(ROW_GUTTER, 'relative text-text'), children: [provider === undefined ? _jsx(Icon, { icon: Bot, size: 14 }) : _jsx(AgentIcon, { kind: provider, size: 14 }), _jsx("span", { className: clsx('absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface', DOT[state]) })] }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { "data-find-field": "summary", className: "truncate text-xs font-medium text-text", children: model === null ? title : t('rows.task.named', { model, title }) }), _jsx(StateLine, { state: state, task: task })] }), _jsxs("span", { className: "flex h-5 shrink-0 items-center gap-2", children: [(state === 'running' || state === 'waiting') && startedAt > 0 && _jsx(Elapsed, { startedAt: startedAt }), settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (_jsx("span", { className: "shrink-0 text-xs text-text-faint tabular-nums", children: formatElapsedShort(finishedAt - startedAt) })), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] })] }));
 }

package/dist/chat/ui/rows/WorkRows.js

@@ -76,7 +76,7 @@ export function ToggleLine({ icon, label, brand, detail, command, look, path, op
     const classes = clsx(
     // Fix the width so long commands reach the truncation inside the negative margins.
     'group/line -mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted', onToggle !== undefined && 'hover:bg-surface-hover', failed && 'text-status-error', className);
-    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsxs("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: [brand !== undefined && _jsx("span", { className: BRAND, children: brand }), brand !== undefined && label !== '' && ' ', label] }), look !== undefined ? (_jsxs(_Fragment, { children: [look.run.detail !== '' && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: _jsx(LookDetail, { run: look.run, chatId: look.chatId }) })), _jsx(LookTags, { run: look.run })] })) : (detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail }))), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsxs("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: [brand !== undefined && _jsx("span", { className: BRAND, children: brand }), brand !== undefined && label !== '' && ' ', label] }), look !== undefined ? (_jsxs(_Fragment, { children: [look.run.detail !== '' && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: _jsx(LookDetail, { run: look.run, chatId: look.chatId }) })), _jsx(LookTags, { run: look.run })] })) : (detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-code text-text-faint", children: command ? _jsx(ShellCommand, { command: detail }) : path ? _jsx(MiddleTruncate, { text: detail }) : detail }))), _jsx("span", { className: "grow" }), trailing, time !== undefined && _jsx(RowTime, { at: time }), failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), onToggle !== undefined && (_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }))] }));
     if (onToggle === undefined) {
         return _jsx("div", { className: classes, children: content });
     }

package/dist/host.d.ts

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

package/dist/index.d.ts

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

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

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

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

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

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

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

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

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

package/package.json

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

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

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

package/src/chat/ui/intelligent-ui/renderers/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';
@@ -187,6 +188,55 @@ 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-lg border border-border bg-surface-sunken">
+                <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-lg border border-border bg-surface-sunken" />;
+    } else {
+        body = (
+            <div className="flex w-full min-w-0 items-center gap-2 rounded-lg border border-border 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 flex-col items-start gap-1.5 px-2">
+            {body}
+            {caption !== '' && <figcaption className="text-xs text-text-muted">{children}</figcaption>}
+        </figure>
+    );
+}
+
 export function SourcesRenderer({ node, children }: UiRendererProps<UiProps<'Sources'>>) {
     const { t } = useTranslation('agent-chat');
     const headingId = useId();

package/src/chat/ui/rows/MessageRows.tsx

@@ -381,7 +381,7 @@ export function ThinkingRow({ chatId, item: derived }: { chatId: string; item: C
                 )}
             </button>
             {shown && text !== '' && (
-                <div data-find-field="text" className="mt-1 border-l border-border pl-2.5 select-text">
+                <div data-find-field="text" className="mt-1 ml-1.75 border-l border-border pl-4 select-text">
                     {reveal.active ? (
                         <div className="text-sm whitespace-pre-wrap text-text-faint">
                             <FadingWords text={reveal.text} />
@@ -535,7 +535,7 @@ export function ApprovalHistoryRow({ item }: { item: ChatApprovalItem }) {
             <span className={clsx(ROW_GUTTER, item.decision === 'deny' && 'text-status-error')}>{DECISION_ICON[item.decision]}</span>
             <span className={clsx(item.decision === 'deny' && 'text-status-error')}>{t(`rows.approval.${item.decision}`)}</span>
             <span className="text-text-muted">{item.toolName}</span>
-            <span className="min-w-0 truncate font-mono">
+            <span className="min-w-0 truncate font-mono text-code">
                 {toolSummaryIsPath(item.toolName, item.input) ? (
                     <MiddleTruncate text={toolSummary(item.toolName, item.input)} />
                 ) : (

package/src/chat/ui/rows/TaskRow.tsx

@@ -11,6 +11,7 @@ import { useChatScope } from '../../../scope';
 import { useChats } from '../../../state/chats';
 import { useProviders } from '../../../state/providers';
 import { taskRowStateOf, type TaskRowState } from '../../subagent-list';
+import { ROW_GUTTER } from '../icons';
 
 const DOT: Record<TaskRowState, string> = {
     running: 'bg-status-running',
@@ -40,7 +41,7 @@ function StateLine({ state, task }: { state: TaskRowState; task: SubagentTask |
     const until = state === 'paused' ? task?.paused?.until : undefined;
     const now = useNow(60_000, until === undefined);
     return (
-        <span className={clsx('truncate text-xs', STATE_TONE[state])}>
+        <span className={clsx('truncate text-2xs', STATE_TONE[state])}>
             {until === undefined ? t(`rows.task.${state}`) : t('rows.task.pausedUntil', { time: formatMoment(until, now) })}
         </span>
     );
@@ -70,10 +71,10 @@ export function TaskRow({ item, task, open, onPress }: { item: ChatSubagentItem;
     const finishedAt = task === null ? item.finishedAt : (task.settledAt ?? item.finishedAt);
     const settled = state === 'done' || state === 'failed' || state === 'cancelled';
     return (
-        <button className="-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-center gap-2.5 rounded-md px-1 py-1 text-left hover:bg-surface-hover" onClick={onPress}>
-            <span className="relative grid size-7 shrink-0 place-items-center rounded-full bg-surface-raised text-text">
+        <button className="-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left hover:bg-surface-hover" onClick={onPress}>
+            <span className={clsx(ROW_GUTTER, 'relative text-text')}>
                 {provider === undefined ? <Icon icon={Bot} size={14} /> : <AgentIcon kind={provider} size={14} />}
-                <span className={clsx('absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2 ring-surface', DOT[state])} />
+                <span className={clsx('absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface', DOT[state])} />
             </span>
             <span className="flex min-w-0 grow flex-col">
                 <span data-find-field="summary" className="truncate text-xs font-medium text-text">
@@ -81,11 +82,13 @@ export function TaskRow({ item, task, open, onPress }: { item: ChatSubagentItem;
                 </span>
                 <StateLine state={state} task={task} />
             </span>
-            {(state === 'running' || state === 'waiting') && startedAt > 0 && <Elapsed startedAt={startedAt} />}
-            {settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (
-                <span className="shrink-0 text-xs text-text-faint tabular-nums">{formatElapsedShort(finishedAt - startedAt)}</span>
-            )}
-            <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+            <span className="flex h-5 shrink-0 items-center gap-2">
+                {(state === 'running' || state === 'waiting') && startedAt > 0 && <Elapsed startedAt={startedAt} />}
+                {settled && startedAt > 0 && finishedAt !== null && finishedAt >= startedAt && (
+                    <span className="shrink-0 text-xs text-text-faint tabular-nums">{formatElapsedShort(finishedAt - startedAt)}</span>
+                )}
+                <Icon icon={ChevronRight} size={12} className={clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90')} />
+            </span>
         </button>
     );
 }

package/src/chat/ui/rows/WorkRows.tsx

@@ -162,7 +162,7 @@ export function ToggleLine({
             {look !== undefined ? (
                 <>
                     {look.run.detail !== '' && (
-                        <span data-find-field="summary" className="min-w-0 truncate font-mono text-text-faint">
+                        <span data-find-field="summary" className="min-w-0 truncate font-mono text-code text-text-faint">
                             <LookDetail run={look.run} chatId={look.chatId} />
                         </span>
                     )}
@@ -170,7 +170,7 @@ export function ToggleLine({
                 </>
             ) : (
                 detail && (
-                    <span data-find-field="summary" className="min-w-0 truncate font-mono text-text-faint">
+                    <span data-find-field="summary" className="min-w-0 truncate font-mono text-code text-text-faint">
                         {command ? <ShellCommand command={detail} /> : path ? <MiddleTruncate text={detail} /> : detail}
                     </span>
                 )

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',