@adecore/agents-react 0.20.1 → 0.21.0

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

@@ -435,6 +435,25 @@
     "zoomOut": "Zoom out",
     "reset": "Reset"
   },
+  "generatedImage": {
+    "label": "Generated image",
+    "generating": "Generating image",
+    "failed": "Image generation failed",
+    "empty": "The image came back empty",
+    "notImage": "The result is not an image",
+    "tooLarge": "The image is larger than {{size}}",
+    "dimensions": "{{width}} × {{height}}",
+    "transparent": "transparent",
+    "actions": "Image actions",
+    "more": "More actions",
+    "copyPrompt": "Copy prompt",
+    "open": "Open",
+    "openLarge": "Open large",
+    "save": "Save to project…",
+    "saved": "Saved",
+    "savedTo": "Saved to <file>{{path}}</file>",
+    "renderFailed": "This image failed to render"
+  },
   "account": {
     "pill": "{{provider}} account {{account}}"
   },
@@ -460,5 +479,68 @@
   "code": {
     "actions": "Code actions",
     "copyFailed": "Could not copy the code. Try again."
+  },
+  "blocks": {
+    "label": "Interactive block",
+    "progress": {
+      "label": "Progress",
+      "of": "{{value}} of {{max}}"
+    },
+    "step": {
+      "done": "Done",
+      "running": "Running",
+      "pending": "Waiting",
+      "failed": "Failed",
+      "skipped": "Skipped"
+    },
+    "stat": {
+      "change": "{{change}} from {{previous}}",
+      "from": "from {{previous}}"
+    },
+    "table": {
+      "showAll": "Show all {{total}} rows"
+    },
+    "chart": {
+      "values": "Values",
+      "summary": "{{count}} values, highest {{label}} at {{value}}",
+      "summarySeries": "{{count}} categories, highest {{series}} for {{label}} at {{value}}"
+    },
+    "image": {
+      "label": "Image",
+      "unavailable": "The image is not available"
+    },
+    "sources": "Sources",
+    "citation": "Source {{number}}: {{title}}",
+    "outsideProject": "Outside the project, shown as text",
+    "options": "Options",
+    "choices": "Choices",
+    "choice": {
+      "waiting": "Available when the reply is done",
+      "unavailable": "Not available",
+      "sent": "Sent",
+      "queued": "Queued",
+      "failed": "Could not send. Try again.",
+      "ready": "Choices are ready"
+    },
+    "answered": "Answered with “{{label}}”",
+    "chose": "Chose “{{label}}”",
+    "choseOlder": "Chose “{{label}}” on the reply of {{time}}",
+    "sendContext": "Send",
+    "copyText": "Copy text",
+    "fixes_one": "{{count}} fix",
+    "fixes_other": "{{count}} fixes",
+    "shownAsText": "Shown as text",
+    "unknownComponent": "This version cannot draw {{component}}",
+    "renderFailed": "Could not draw this part",
+    "tooLarge": "The block is too large to draw",
+    "unreadable": "The block could not be read",
+    "live": {
+      "label": "Live",
+      "read": "read {{time}}",
+      "sources": "Reads {{sources}}",
+      "failed": "Could not read {{source}}",
+      "refused": "Not allowed to read {{source}}",
+      "notRead": "Not read"
+    }
   }
 }

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

@@ -435,6 +435,25 @@
     "zoomOut": "Uitzoomen",
     "reset": "Herstellen"
   },
+  "generatedImage": {
+    "label": "Gegenereerde afbeelding",
+    "generating": "Afbeelding wordt gemaakt",
+    "failed": "Afbeelding maken mislukt",
+    "empty": "De afbeelding kwam leeg terug",
+    "notImage": "Het resultaat is geen afbeelding",
+    "tooLarge": "De afbeelding is groter dan {{size}}",
+    "dimensions": "{{width}} × {{height}}",
+    "transparent": "transparant",
+    "actions": "Acties voor de afbeelding",
+    "more": "Meer acties",
+    "copyPrompt": "Prompt kopiëren",
+    "open": "Openen",
+    "openLarge": "Groot openen",
+    "save": "Opslaan in project…",
+    "saved": "Opgeslagen",
+    "savedTo": "Opgeslagen in <file>{{path}}</file>",
+    "renderFailed": "Deze afbeelding kon niet worden getoond"
+  },
   "account": {
     "pill": "{{provider}}-account {{account}}"
   },
@@ -460,5 +479,68 @@
   "code": {
     "actions": "Codeacties",
     "copyFailed": "De code kon niet worden gekopieerd. Probeer het opnieuw."
+  },
+  "blocks": {
+    "label": "Interactief blok",
+    "progress": {
+      "label": "Voortgang",
+      "of": "{{value}} van {{max}}"
+    },
+    "step": {
+      "done": "Klaar",
+      "running": "Bezig",
+      "pending": "Wacht",
+      "failed": "Mislukt",
+      "skipped": "Overgeslagen"
+    },
+    "stat": {
+      "change": "{{change}} vanaf {{previous}}",
+      "from": "vanaf {{previous}}"
+    },
+    "table": {
+      "showAll": "Alle {{total}} rijen tonen"
+    },
+    "chart": {
+      "values": "Waarden",
+      "summary": "{{count}} waarden, hoogste {{label}} met {{value}}",
+      "summarySeries": "{{count}} categorieën, hoogste {{series}} bij {{label}} met {{value}}"
+    },
+    "image": {
+      "label": "Afbeelding",
+      "unavailable": "De afbeelding is niet beschikbaar"
+    },
+    "sources": "Bronnen",
+    "citation": "Bron {{number}}: {{title}}",
+    "outsideProject": "Buiten het project, als tekst getoond",
+    "options": "Opties",
+    "choices": "Keuzes",
+    "choice": {
+      "waiting": "Beschikbaar zodra het antwoord klaar is",
+      "unavailable": "Niet beschikbaar",
+      "sent": "Verstuurd",
+      "queued": "In de wachtrij",
+      "failed": "Versturen lukte niet. Probeer het opnieuw.",
+      "ready": "De keuzes staan klaar"
+    },
+    "answered": "Beantwoord met “{{label}}”",
+    "chose": "Gekozen: “{{label}}”",
+    "choseOlder": "Gekozen: “{{label}}”, bij het antwoord van {{time}}",
+    "sendContext": "Versturen",
+    "copyText": "Tekst kopiëren",
+    "fixes_one": "{{count}} correctie",
+    "fixes_other": "{{count}} correcties",
+    "shownAsText": "Als tekst getoond",
+    "unknownComponent": "Deze versie kan {{component}} niet tekenen",
+    "renderFailed": "Dit deel kon niet getekend worden",
+    "tooLarge": "Het blok is te groot om te tekenen",
+    "unreadable": "Het blok kon niet gelezen worden",
+    "live": {
+      "label": "Live",
+      "read": "gelezen {{time}}",
+      "sources": "Leest {{sources}}",
+      "failed": "{{source}} lezen lukte niet",
+      "refused": "Geen toegang tot {{source}}",
+      "notRead": "Niet gelezen"
+    }
   }
 }

package/dist/state/chats.js

@@ -79,6 +79,15 @@ export function applyEvent(state, event) {
         }
         case 'delta': {
             const item = state.items[event.itemId];
+            if (event.uiQueries && item?.kind === 'assistant') {
+                return { ...state, items: { ...state.items, [event.itemId]: { ...item, uiQueries: event.uiQueries } } };
+            }
+            if (event.ui !== undefined && event.text === '') {
+                if (item?.kind === 'assistant' && item.streaming && event.textLength === item.text.length) {
+                    return { ...state, items: { ...state.items, [event.itemId]: { ...item, ui: event.ui } } };
+                }
+                return state;
+            }
             if (item?.kind === 'assistant' || item?.kind === 'thinking') {
                 const grown = { ...item, text: item.text + event.text };
                 // The first text is structure after all, since an empty reply that is not streaming has no row.

package/dist/theme.css

@@ -117,6 +117,11 @@
     }
     @keyframes chat-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
 
+    /* What shows through a transparent image: a checkerboard of two grounds, so its edges read in both themes. */
+    .chat-checkerboard {
+        background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--surface-raised) 0 50%) 0 0 / 16px 16px;
+    }
+
     /* A word of a reply that just arrived. The duration is REVEAL_FADE_MS in chat/ui/reveal.ts, which
        keeps the spans until it is over; ease-in-out, because ease-out jumps up and then trails. */
     .chat-fade { animation: chat-fade 300ms ease-in-out both; }
@@ -129,6 +134,20 @@
         @starting-style { opacity: 0; }
     }
     @keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
+    /* A node of an intelligent UI block that lands inside another, such as a step or a row: 160ms like
+       the card's own children, but only a fade, so a parent arriving with its children rises once. */
+    .chat-ui-nodes > * {
+        transition: opacity 160ms ease-out;
+        @starting-style { opacity: 0; }
+    }
+    /* A value a live reading changed lights up in the accent once and settles back in 800ms. */
+    .chat-ui-changed { animation: chat-ui-changed 800ms ease-out; }
+    @keyframes chat-ui-changed { from { color: var(--accent); } }
+    @media (prefers-reduced-motion: reduce) {
+        .chat-ui-changed { animation: none; }
+    }
+    /* 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. */
     .chat-visual-wait { animation: chat-fade 200ms ease-out 600ms both; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -129,6 +129,11 @@
       "types": "./dist/chat/logic/fork.d.ts",
       "default": "./dist/chat/logic/fork.js"
     },
+    "./chat/logic/generated-image": {
+      "source": "./src/chat/logic/generated-image.ts",
+      "types": "./dist/chat/logic/generated-image.d.ts",
+      "default": "./dist/chat/logic/generated-image.js"
+    },
     "./chat/logic/handback": {
       "source": "./src/chat/logic/handback.ts",
       "types": "./dist/chat/logic/handback.d.ts",
@@ -514,6 +519,101 @@
       "types": "./dist/chat/ui/icons.d.ts",
       "default": "./dist/chat/ui/icons.js"
     },
+    "./chat/ui/intelligent-ui/UiBlockFooter": {
+      "source": "./src/chat/ui/intelligent-ui/UiBlockFooter.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/UiBlockFooter.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/UiBlockFooter.js"
+    },
+    "./chat/ui/intelligent-ui/UiBlockFrame": {
+      "source": "./src/chat/ui/intelligent-ui/UiBlockFrame.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/UiBlockFrame.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/UiBlockFrame.js"
+    },
+    "./chat/ui/intelligent-ui/UiFallbackPart": {
+      "source": "./src/chat/ui/intelligent-ui/UiFallbackPart.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/UiFallbackPart.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/UiFallbackPart.js"
+    },
+    "./chat/ui/intelligent-ui/block-local": {
+      "source": "./src/chat/ui/intelligent-ui/block-local.ts",
+      "types": "./dist/chat/ui/intelligent-ui/block-local.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/block-local.js"
+    },
+    "./chat/ui/intelligent-ui/chart-data": {
+      "source": "./src/chat/ui/intelligent-ui/chart-data.ts",
+      "types": "./dist/chat/ui/intelligent-ui/chart-data.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/chart-data.js"
+    },
+    "./chat/ui/intelligent-ui/node-text": {
+      "source": "./src/chat/ui/intelligent-ui/node-text.ts",
+      "types": "./dist/chat/ui/intelligent-ui/node-text.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/node-text.js"
+    },
+    "./chat/ui/intelligent-ui/registry": {
+      "source": "./src/chat/ui/intelligent-ui/registry.ts",
+      "types": "./dist/chat/ui/intelligent-ui/registry.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/registry.js"
+    },
+    "./chat/ui/intelligent-ui/render-context": {
+      "source": "./src/chat/ui/intelligent-ui/render-context.ts",
+      "types": "./dist/chat/ui/intelligent-ui/render-context.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/render-context.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/chart": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/chart.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/chart.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/chart.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/choices": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/choices.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/choices.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/choices.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/content": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/content.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/content.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/content.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/data": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/data.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/data.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/data.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/inputs": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/inputs.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/inputs.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/inputs.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/links": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/links.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/links.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/links.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/structure": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/structure.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/structure.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/structure.js"
+    },
+    "./chat/ui/intelligent-ui/renderers/text": {
+      "source": "./src/chat/ui/intelligent-ui/renderers/text.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/renderers/text.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/renderers/text.js"
+    },
+    "./chat/ui/intelligent-ui/table-data": {
+      "source": "./src/chat/ui/intelligent-ui/table-data.ts",
+      "types": "./dist/chat/ui/intelligent-ui/table-data.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/table-data.js"
+    },
+    "./chat/ui/intelligent-ui/tones": {
+      "source": "./src/chat/ui/intelligent-ui/tones.ts",
+      "types": "./dist/chat/ui/intelligent-ui/tones.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/tones.js"
+    },
+    "./chat/ui/intelligent-ui/use-later": {
+      "source": "./src/chat/ui/intelligent-ui/use-later.ts",
+      "types": "./dist/chat/ui/intelligent-ui/use-later.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/use-later.js"
+    },
     "./chat/ui/markdown-blocks": {
       "source": "./src/chat/ui/markdown-blocks.ts",
       "types": "./dist/chat/ui/markdown-blocks.d.ts",
@@ -554,6 +654,11 @@
       "types": "./dist/chat/ui/rows/ForksRow.d.ts",
       "default": "./dist/chat/ui/rows/ForksRow.js"
     },
+    "./chat/ui/rows/GeneratedImageRow": {
+      "source": "./src/chat/ui/rows/GeneratedImageRow.tsx",
+      "types": "./dist/chat/ui/rows/GeneratedImageRow.d.ts",
+      "default": "./dist/chat/ui/rows/GeneratedImageRow.js"
+    },
     "./chat/ui/rows/MessageRows": {
       "source": "./src/chat/ui/rows/MessageRows.tsx",
       "types": "./dist/chat/ui/rows/MessageRows.d.ts",
@@ -882,6 +987,26 @@
       "source": "./src/chat/visual-viewport.ts",
       "types": "./dist/chat/visual-viewport.d.ts",
       "default": "./dist/chat/visual-viewport.js"
+    },
+    "./chat/ui/intelligent-ui/use-ui-links": {
+      "source": "./src/chat/ui/intelligent-ui/use-ui-links.ts",
+      "types": "./dist/chat/ui/intelligent-ui/use-ui-links.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/use-ui-links.js"
+    },
+    "./chat/ui/intelligent-ui/use-ui-queries": {
+      "source": "./src/chat/ui/intelligent-ui/use-ui-queries.ts",
+      "types": "./dist/chat/ui/intelligent-ui/use-ui-queries.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/use-ui-queries.js"
+    },
+    "./chat/ui/intelligent-ui/UiReply": {
+      "source": "./src/chat/ui/intelligent-ui/UiReply.tsx",
+      "types": "./dist/chat/ui/intelligent-ui/UiReply.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/UiReply.js"
+    },
+    "./chat/ui/intelligent-ui/reply-parts": {
+      "source": "./src/chat/ui/intelligent-ui/reply-parts.ts",
+      "types": "./dist/chat/ui/intelligent-ui/reply-parts.d.ts",
+      "default": "./dist/chat/ui/intelligent-ui/reply-parts.js"
     }
   },
   "scripts": {
@@ -891,6 +1016,8 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
+    "@adecore/agent-contracts": "0.21.0",
+    "@adecore/intelligent-ui": "0.21.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -899,7 +1026,6 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/markdown": "^1.7.2",
     "@pierre/diffs": "^1.4.3",
-    "@adecore/agent-contracts": "0.20.1",
     "@tanstack/react-virtual": "^3.14.13",
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0",
@@ -912,7 +1038,7 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.20.1",
+    "@adecore/ui": "^0.21.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
@@ -920,14 +1046,14 @@
   },
   "devDependencies": {
     "@adecore/ui": "workspace:*",
-    "i18next": "^26.4.2",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "react-i18next": "^17.0.15",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "i18next": "^26.4.2",
     "linkedom": "^0.18.13",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-i18next": "^17.0.15",
     "typescript": "^7.0.2"
   },
   "license": "FSL-1.1-MIT",

package/src/chat/logic/generated-image.ts

@@ -0,0 +1,48 @@
+import { CHAT_ATTACHMENT_MAX_BYTES, GeneratedImageInputSchema, type ChatAttachment, type ChatToolItem } from '@adecore/agent-contracts';
+
+export const IMAGE_GENERATION_TOOL = 'ImageGeneration';
+
+/* Why a generation shows no image: the provider's own words, or a check of what came back. */
+export type GeneratedImageFailure =
+    | { kind: 'provider'; message: string | null }
+    | { kind: 'empty' }
+    | { kind: 'not-image' }
+    | { kind: 'too-large'; limit: number };
+
+export type GeneratedImageView =
+    | { state: 'generating' }
+    | { state: 'failed'; failure: GeneratedImageFailure }
+    | { state: 'ready'; attachment: ChatAttachment; prompt: string | null; transparent: boolean };
+
+export function isImageGeneration(tool: ChatToolItem): boolean {
+    return tool.name === IMAGE_GENERATION_TOOL;
+}
+
+/* What the row of an image generation draws, from the tool call alone. */
+export function generatedImageView(tool: ChatToolItem): GeneratedImageView {
+    if (tool.state === 'running') {
+        return { state: 'generating' };
+    }
+    const parsed = GeneratedImageInputSchema.safeParse(tool.input);
+    const input = parsed.success ? parsed.data : {};
+    const output = tool.output?.trim() || null;
+    if (tool.state === 'error' || input.attachment === undefined) {
+        return { state: 'failed', failure: output === null && tool.state !== 'error' ? { kind: 'empty' } : { kind: 'provider', message: output } };
+    }
+    const attachment = input.attachment;
+    if (attachment.size === 0) {
+        return { state: 'failed', failure: { kind: 'empty' } };
+    }
+    if (!attachment.mime.startsWith('image/')) {
+        return { state: 'failed', failure: { kind: 'not-image' } };
+    }
+    if (attachment.size > CHAT_ATTACHMENT_MAX_BYTES) {
+        return { state: 'failed', failure: { kind: 'too-large', limit: CHAT_ATTACHMENT_MAX_BYTES } };
+    }
+    return { state: 'ready', attachment, prompt: input.revisedPrompt?.trim() || null, transparent: input.transparentBackground === true };
+}
+
+/* Width over height, when the attachment carries both. */
+export function attachmentAspect(attachment: ChatAttachment): number | undefined {
+    return attachment.width !== undefined && attachment.height !== undefined ? attachment.width / attachment.height : undefined;
+}

package/src/chat/logic/timeline-target.ts

@@ -1,4 +1,4 @@
-import type { ChatItem } from '@adecore/agent-contracts';
+import type { ChatItem, ChatUiChoiceOrigin } from '@adecore/agent-contracts';
 import type { TimelineRow } from './timeline';
 import { selectionWithin } from '@adecore/ui';
 import type { FileRef } from '../../host';
@@ -75,3 +75,43 @@ function positiveInteger(value: string | undefined): number | null {
     const number = Number(value);
     return Number.isSafeInteger(number) && number > 0 ? number : null;
 }
+
+export type UiReplyTarget = Pick<ChatUiChoiceOrigin, 'itemId' | 'blockId' | 'revision'>;
+export type UiReplyJump = { kind: 'missing' | 'earlier' } | { kind: 'turn'; turnId: string } | { kind: 'row'; index: number };
+
+export function uiReplyJump(
+    target: UiReplyTarget,
+    rows: readonly TimelineRow[],
+    items: Record<string, ChatItem> | undefined,
+    expandedTurns: ReadonlySet<string>,
+    hasEarlier: boolean
+): UiReplyJump {
+    const item = items?.[target.itemId];
+    if (!item) {
+        return { kind: hasEarlier ? 'earlier' : 'missing' };
+    }
+    if (item.kind !== 'assistant' || !item.ui?.some((block) => block.id === target.blockId && block.revision === target.revision)) {
+        return { kind: 'missing' };
+    }
+    const index = rows.findIndex((row) => row.kind === 'assistant' && row.id === target.itemId);
+    if (index !== -1) {
+        return { kind: 'row', index };
+    }
+    return item.turnId && !expandedTurns.has(item.turnId) ? { kind: 'turn', turnId: item.turnId } : { kind: 'missing' };
+}
+
+export function revealUiReplyBlock(scroller: HTMLElement, target: UiReplyTarget): boolean {
+    // Compare attributes instead of interpolating provider ids into CSS selectors.
+    const row = Array.from(scroller.querySelectorAll<HTMLElement>('[data-item-id]')).find((element) => element.dataset.itemId === target.itemId);
+    const block =
+        row &&
+        Array.from(row.querySelectorAll<HTMLElement>('[data-ui-block]')).find(
+            (element) => element.dataset.uiBlock === target.blockId && element.dataset.uiRevision === target.revision
+        );
+    if (!block) {
+        return false;
+    }
+    scroller.scrollTop += block.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+    block.focus({ preventScroll: true });
+    return true;
+}

package/src/chat/logic/timeline.ts

@@ -16,6 +16,7 @@ import type {
 import { abortedByMachine } from '@adecore/agent-contracts';
 import type { ThreadCard } from '../../host';
 import { formatElapsedShort } from '@adecore/ui/format';
+import { isImageGeneration } from './generated-image';
 import { handbackReportOf } from './handback';
 import { toolEntry } from './tool-catalog';
 import { hasFileChanges, isFileChange } from './tools';
@@ -77,7 +78,7 @@ interface TimelineOptions {
 const BLOCK_KINDS = new Set<TimelineRow['kind']>(['assistant', 'report', 'thinking', 'changed-files', 'compaction', 'app-card', 'visual']);
 
 export function isBlock(row: TimelineRow): boolean {
-    return BLOCK_KINDS.has(row.kind);
+    return BLOCK_KINDS.has(row.kind) || isImageRow(row);
 }
 
 /* "Read 4 files", "Ran 2 commands", or "12 tool calls" when the run mixes kinds. */
@@ -245,6 +246,10 @@ function flushTools(buffer: ChatToolItem[], rows: TimelineRow[], options: Timeli
     }
 }
 
+function isImageRow(row: TimelineRow): boolean {
+    return (row.kind === 'work' || row.kind === 'work-live') && isImageGeneration(row.tool);
+}
+
 /* Rows for a run of items, in order, with tool runs folded and a subagent's work under its own row. */
 function rowsForItems(items: ChatItem[], options: TimelineOptions, children: Map<string, ChatItem[]>): TimelineRow[] {
     const rows: TimelineRow[] = [];
@@ -259,6 +264,11 @@ function rowsForItems(items: ChatItem[], options: TimelineOptions, children: Map
             rows.push({ kind: 'workflow', id: item.id, tool: item, workflow: item.workflow });
             continue;
         }
+        if (item.kind === 'tool' && isImageGeneration(item)) {
+            flushTools(tools, rows, options);
+            rows.push({ kind: item.state === 'running' ? 'work-live' : 'work', id: item.id, tool: item });
+            continue;
+        }
         if (item.kind === 'tool' && report === null) {
             tools.push(item);
             continue;
@@ -328,7 +338,7 @@ function lastAssistantRow(rows: TimelineRow[]): TimelineRow | null {
         if (row.kind === 'assistant') {
             return row;
         }
-        if (row.kind !== 'note') {
+        if (row.kind !== 'note' && !isImageRow(row)) {
             return null;
         }
     }
@@ -389,12 +399,14 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
         // The closing answer stays visible; the work after the last input folds behind the label.
         const finalAssistant = lastAssistantRow(work);
         const before = finalAssistant ? work.slice(0, work.indexOf(finalAssistant)) : work;
-        // A workflow runs on past the turn that launched it, so its row stays in sight until it ends.
-        const standing = before.filter((row) => row.kind === 'workflow' && row.tool.state === 'running');
+        // Images remain a turn's visible result, and a workflow may still be running after its turn ends.
+        const standing = before.filter((row) => isImageRow(row) || (row.kind === 'workflow' && row.tool.state === 'running'));
         const folded = before.filter((row) => !standing.includes(row));
         const expanded = options.expandedTurns.has(turnId);
         if (folded.length > 0) {
-            const tools = rest.filter((item): item is ChatToolItem => item.kind === 'tool' && parentOf(item) === null && handbackReportOf(item) === null);
+            const tools = rest.filter(
+                (item): item is ChatToolItem => item.kind === 'tool' && parentOf(item) === null && handbackReportOf(item) === null && !isImageGeneration(item)
+            );
             rows.push({
                 kind: 'turn-fold',
                 id: `fold-${turnId}`,
@@ -404,17 +416,14 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
                 hiddenCount: folded.length,
                 expanded
             });
-            if (expanded) {
-                rows.push(...folded);
-            }
         }
-        rows.push(...standing);
+        rows.push(...(expanded ? before : standing));
         const changed = changedFilesRow(turn, conversation);
         if (changed) {
             rows.push(changed);
         }
         if (finalAssistant) {
-            rows.push(finalAssistant);
+            rows.push(...work.slice(work.indexOf(finalAssistant)));
         }
         if (options.forkedTurns?.has(turnId) === true) {
             rows.push({ kind: 'forks', id: `forks-${turnId}`, turnId });