@adecore/agents-react 0.20.0 → 0.21.0

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; }
 
@@ -193,9 +212,26 @@
 .chat-markdown :is(th, td) { border: 1px solid var(--tw-prose-td-borders); padding: 4px 8px; text-align: left; }
 
 /* A code block is shiki's own `<pre>`, which brings a background of its own to override. */
-.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: auto; }
-.chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
+.chat-code { position: relative; min-height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--chat-code-bg); overflow: hidden; }
+.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); }
+.chat-code-error { margin: 0; padding: 0 12px 10px; color: var(--status-error); font-size: var(--text-sm); }
+@media (hover: hover) and (pointer: fine) {
+    .chat-code-actions { opacity: 0; pointer-events: none; }
+    .chat-code:hover .chat-code-actions, .chat-code:focus-within .chat-code-actions,
+    .chat-code[data-copy-state="failed"] .chat-code-actions, .chat-code-actions:has([aria-busy="true"]) { opacity: 1; pointer-events: auto; }
+}
+@media (pointer: coarse) {
+    .chat-code { min-height: 54px; }
+    .chat-code-actions { padding: 8px; gap: 17px; }
+    .chat-code-actions .icon-btn { position: relative; }
+    .chat-code-actions .icon-btn::after { content: ''; position: absolute; inset: -8px; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .chat-code-actions .icon-btn { transition: none; }
+    .chat-code-actions .icon-btn:active { scale: 1; }
+}
 
 /* The chat composer is a CodeMirror editor, whose base theme lands in an unlayered style tag at
    mount. These rules stay unlayered too, and carry one class more than the theme's selectors. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.20.0",
+  "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.0",
     "@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.0",
+    "@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/chat-client.ts

@@ -28,6 +28,7 @@ interface ChatOpenOptions {
 }
 
 export interface ChatSendExtras {
+    delivery?: 'steer' | 'queue';
     /* Paths picked with `@`; they also sit in the text, this is what the timeline highlights. */
     mentions?: string[];
     /* Skills picked with `$`; they also sit in the text, this is what the timeline chips. */

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,6 +1,7 @@
-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';
 
 /* What the right-click landed on, read once when the menu opens. */
 export interface TimelineTarget {
@@ -13,6 +14,8 @@ export interface TimelineTarget {
     path: string | null;
     /* The line that file reference named, where it named one. */
     line: number | null;
+    /* Captured at menu opening, before the rendering scope or cwd can change. */
+    file?: { ref: FileRef; cwd: string | null; scopeId: string | null } | null;
 }
 
 export const EMPTY_TARGET: TimelineTarget = { selection: '', row: null, code: null, path: null, line: null };
@@ -41,12 +44,74 @@ export function withCurrentText(rows: TimelineRow[], items: Record<string, ChatI
 export function readTimelineTarget(element: HTMLElement, scroller: HTMLElement | null, rows: TimelineRow[]): TimelineTarget {
     const id = element.closest<HTMLElement>('[data-item-id]')?.dataset.itemId;
     const file = element.closest<HTMLElement>('[data-file-path]');
-    const line = Number(file?.dataset.fileLine);
+    const line = positiveInteger(file?.dataset.fileLine);
+    const column = positiveInteger(file?.dataset.fileColumn);
+    const endLine = positiveInteger(file?.dataset.fileEndLine);
+    const path = file?.dataset.filePath ?? null;
     return {
         selection: selectionWithin(scroller),
         row: rows.find((row) => row.id === id) ?? null,
         code: element.closest('pre')?.textContent ?? null,
-        path: file?.dataset.filePath ?? null,
-        line: Number.isFinite(line) && line > 0 ? line : null
+        path,
+        line,
+        file:
+            path === null
+                ? null
+                : {
+                      ref: {
+                          path,
+                          ...(line === null ? {} : { line }),
+                          ...(column === null ? {} : { column }),
+                          ...(line === null || endLine === null || endLine < line ? {} : { endLine }),
+                          directory: file?.dataset.fileDirectory === 'true'
+                      },
+                      cwd: file?.closest<HTMLElement>('[data-file-cwd]')?.dataset.fileCwd || null,
+                      scopeId: file?.closest<HTMLElement>('[data-file-scope-id]')?.dataset.fileScopeId || null
+                  }
     };
 }
+
+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;
         }
     }
@@ -368,31 +378,35 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
         }
         const turnId = chunk.turnId;
         const turn = chunk.items.find((item): item is ChatTurnItem => item.kind === 'turn');
-        const user = chunk.items.filter((item) => item.kind === 'user');
-        const rest = chunk.items.filter((item) => item.kind !== 'user' && item.kind !== 'turn');
+        const conversation = chunk.items.filter((item) => item.kind !== 'turn');
         if (turn?.origin === 'agent') {
             // The agent started this one itself, so there is no message of the person to show above it.
             rows.push({ kind: 'turn-start', id: `start-${turnId}`, turn, label: agentTurnLabel(turn) });
         }
-        rows.push(...rowsForItems(user, options, children));
         const active = turnId === options.activeTurnId || turn?.state === 'running';
-        const work = rowsForItems(rest, options, children);
         if (!turn || active) {
-            rows.push(...work);
+            rows.push(...rowsForItems(conversation, options, children));
             if (active) {
                 rows.push({ kind: 'working', id: `working-${turnId}`, startedAt: turn?.createdAt ?? Date.now() });
             }
             continue;
         }
-        // The closing answer stays visible; everything before it folds behind the label.
+        // Steering splits the conversation inside a turn. Earlier responses keep their place above it.
+        const lastUser = conversation.findLastIndex((item) => item.kind === 'user');
+        rows.push(...rowsForItems(conversation.slice(0, lastUser + 1), options, children));
+        const rest = conversation.slice(lastUser + 1);
+        const work = rowsForItems(rest, options, children);
+        // 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}`,
@@ -402,17 +416,14 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
                 hiddenCount: folded.length,
                 expanded
             });
-            if (expanded) {
-                rows.push(...folded);
-            }
         }
-        rows.push(...standing);
-        const changed = changedFilesRow(turn, rest);
+        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 });

package/src/chat/subagent-conversation.ts

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import type { ChatItem, ChatSubagentResult } from '@adecore/agent-contracts';
+import type { ChatApprovalItem, ChatItem, ChatQuestionItem, ChatSubagentResult } from '@adecore/agent-contracts';
 import { errorCode, isConnectionError, type ChatTransport } from '../transport';
 
 // What the panel opens on: the newest end of the conversation, which is where an agent that works is.
@@ -8,6 +8,7 @@ export const SUBAGENT_PAGE = 60;
 export interface SubagentConversationState {
     status: 'loading' | 'ready' | 'failed';
     items: ChatItem[];
+    pending: Array<ChatApprovalItem | ChatQuestionItem>;
     source: ChatSubagentResult['source'] | null;
     context: NonNullable<ChatSubagentResult['context']> | null;
     /* Where the page before the oldest item on screen starts; null once the start is there. */
@@ -23,6 +24,7 @@ export interface SubagentConversationState {
 export const INITIAL_CONVERSATION: SubagentConversationState = {
     status: 'loading',
     items: [],
+    pending: [],
     source: null,
     context: null,
     cursor: null,
@@ -59,6 +61,13 @@ export function mergeNewest(
     return { items, cursor: current.length === 0 ? pageCursor : currentCursor };
 }
 
+function pendingOf(items: readonly ChatItem[]): Array<ChatApprovalItem | ChatQuestionItem> {
+    return items.filter(
+        (item): item is ChatApprovalItem | ChatQuestionItem =>
+            (item.kind === 'approval' && item.decision === 'pending') || (item.kind === 'question' && item.state === 'pending')
+    );
+}
+
 function messageOf(error: unknown): string {
     return error instanceof Error ? error.message : i18next.t('agent-chat:subagents.noAnswer');
 }
@@ -131,7 +140,8 @@ export class SubagentConversation {
             this.set({ loadingEarlier: true });
             try {
                 const page = await this.ask({ cursor, limit: SUBAGENT_PAGE });
-                this.set({ items: [...page.items, ...this.state.items], cursor: page.history.cursor, live: page.live, loadingEarlier: false });
+                const items = [...page.items, ...this.state.items];
+                this.set({ items, pending: page.pending ?? pendingOf(items), cursor: page.history.cursor, live: page.live, loadingEarlier: false });
             } catch (error) {
                 if (errorCode(error) === 'history-expired') {
                     // The record was written again under this panel; what it holds now is the only truth.
@@ -167,6 +177,7 @@ export class SubagentConversation {
             this.set({
                 status: 'ready',
                 items: merged.items,
+                pending: page.pending ?? pendingOf(merged.items),
                 cursor: merged.cursor,
                 live: page.live,
                 source: page.source,

package/src/chat/timeline-flash.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import type { UiReplyTarget } from './logic/timeline-target';
 
 /* The row of a thread a jump landed on: it lights up once, and a card of changes opens when the jump asked for it. */
 export interface TimelineFlash {
@@ -6,13 +7,14 @@ export interface TimelineFlash {
     key: string;
     rowId: string;
     opens: boolean;
+    block?: Pick<UiReplyTarget, 'blockId' | 'revision'>;
     /* A second jump to the same row counts. */
     nonce: number;
 }
 
 interface TimelineFlashStore {
     target: TimelineFlash | null;
-    flash(key: string, rowId: string, opens: boolean): void;
+    flash(key: string, rowId: string, opens: boolean, block?: TimelineFlash['block']): void;
 }
 
 /* A little longer than the animation of `.chat-flash`, so a row that scrolls into view again later is neither lit nor opened a second time. */
@@ -20,9 +22,9 @@ const FLASH_MS = 2000;
 
 export const useTimelineFlash = create<TimelineFlashStore>((set, get) => ({
     target: null,
-    flash(key, rowId, opens) {
+    flash(key, rowId, opens, block) {
         const nonce = (get().target?.nonce ?? 0) + 1;
-        set({ target: { key, rowId, opens, nonce } });
+        set({ target: { key, rowId, opens, nonce, ...(block ? { block } : {}) } });
         const timer = setTimeout(() => {
             if (get().target?.nonce === nonce) {
                 set({ target: null });