@adecore/agents-react 0.44.3 → 0.45.0

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

@@ -1570,133 +1570,166 @@ function _temp4(tool) {
   return tool.state === "error";
 }
 export function TurnFoldRow(t0) {
-  const $ = _c(31);
+  const $ = _c(39);
   const {
     turn,
     label,
     work,
     expanded,
+    expandable,
     onToggle
   } = t0;
   const {
     commandLooks
   } = useChatHost();
+  let className;
   let t1;
   let t2;
   let t3;
-  let t4;
-  let t5;
-  let t6;
-  if ($[0] !== commandLooks || $[1] !== expanded || $[2] !== label || $[3] !== onToggle || $[4] !== turn.state || $[5] !== work) {
+  if ($[0] !== commandLooks || $[1] !== expandable || $[2] !== expanded || $[3] !== label || $[4] !== turn.state || $[5] !== work) {
     const brands = commandLooks?.flatMap(_temp5) ?? [];
-    const t7 = turn.state === "error" && "text-status-error";
-    if ($[12] !== t7) {
-      t1 = clsx("group group/line -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover", t7);
-      $[12] = t7;
-      $[13] = t1;
+    const t4 = expandable && "hover:bg-surface-hover";
+    const t5 = turn.state === "error" && "text-status-error";
+    let t6;
+    if ($[10] !== t4 || $[11] !== t5) {
+      t6 = clsx("group group/line -mx-1 mb-2 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted", t4, t5);
+      $[10] = t4;
+      $[11] = t5;
+      $[12] = t6;
     } else {
-      t1 = $[13];
+      t6 = $[12];
     }
-    t2 = expanded;
-    t3 = onToggle;
-    const t8 = expanded && "rotate-90";
-    let t9;
-    if ($[14] !== t8) {
-      t9 = clsx("transition-transform", t8);
-      $[14] = t8;
-      $[15] = t9;
+    className = t6;
+    let t7;
+    if ($[13] !== expandable || $[14] !== expanded) {
+      t7 = expandable && /*#__PURE__*/_jsx(Icon, {
+        icon: ChevronRight,
+        size: 12,
+        className: clsx("transition-transform", expanded && "rotate-90")
+      });
+      $[13] = expandable;
+      $[14] = expanded;
+      $[15] = t7;
     } else {
-      t9 = $[15];
+      t7 = $[15];
     }
-    if ($[16] !== t9) {
-      t4 = /*#__PURE__*/_jsx("span", {
+    if ($[16] !== t7) {
+      t1 = /*#__PURE__*/_jsx("span", {
         className: ROW_GUTTER,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: ChevronRight,
-          size: 12,
-          className: t9
-        })
+        children: t7
       });
-      $[16] = t9;
-      $[17] = t4;
+      $[16] = t7;
+      $[17] = t1;
     } else {
-      t4 = $[17];
+      t1 = $[17];
     }
-    if ($[18] !== label) {
-      t5 = /*#__PURE__*/_jsx("span", {
-        className: "shrink-0 group-hover:text-text",
+    const t8 = expandable && "group-hover:text-text";
+    let t9;
+    if ($[18] !== t8) {
+      t9 = clsx("shrink-0", t8);
+      $[18] = t8;
+      $[19] = t9;
+    } else {
+      t9 = $[19];
+    }
+    if ($[20] !== label || $[21] !== t9) {
+      t2 = /*#__PURE__*/_jsx("span", {
+        className: t9,
         children: label
       });
-      $[18] = label;
-      $[19] = t5;
+      $[20] = label;
+      $[21] = t9;
+      $[22] = t2;
     } else {
-      t5 = $[19];
+      t2 = $[22];
     }
-    t6 = work.length > 0 && /*#__PURE__*/_jsx("span", {
+    t3 = work.length > 0 && /*#__PURE__*/_jsx("span", {
       className: "min-w-0 truncate text-text-faint",
       children: work.map((part, index) => /*#__PURE__*/_jsxs(Fragment, {
         children: [" \xB7 ", withBrand(part, brands)]
       }, index))
     });
     $[0] = commandLooks;
-    $[1] = expanded;
-    $[2] = label;
-    $[3] = onToggle;
+    $[1] = expandable;
+    $[2] = expanded;
+    $[3] = label;
     $[4] = turn.state;
     $[5] = work;
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = t3;
-    $[9] = t4;
-    $[10] = t5;
-    $[11] = t6;
+    $[6] = className;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
   } else {
-    t1 = $[6];
-    t2 = $[7];
-    t3 = $[8];
-    t4 = $[9];
-    t5 = $[10];
-    t6 = $[11];
+    className = $[6];
+    t1 = $[7];
+    t2 = $[8];
+    t3 = $[9];
   }
-  let t7;
-  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = /*#__PURE__*/_jsx("span", {
+  let t4;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = /*#__PURE__*/_jsx("span", {
       className: "grow"
     });
-    $[20] = t7;
+    $[23] = t4;
   } else {
-    t7 = $[20];
+    t4 = $[23];
   }
-  let t8;
-  if ($[21] !== turn.createdAt) {
-    t8 = /*#__PURE__*/_jsx(RowTime, {
+  let t5;
+  if ($[24] !== turn.createdAt) {
+    t5 = /*#__PURE__*/_jsx(RowTime, {
       at: turn.createdAt
     });
-    $[21] = turn.createdAt;
-    $[22] = t8;
+    $[24] = turn.createdAt;
+    $[25] = t5;
   } else {
-    t8 = $[22];
+    t5 = $[25];
   }
-  let t9;
-  if ($[23] !== t1 || $[24] !== t2 || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6 || $[29] !== t8) {
-    t9 = /*#__PURE__*/_jsxs("button", {
-      className: t1,
-      "aria-expanded": t2,
-      onClick: t3,
-      children: [t4, t5, t6, t7, t8]
-    });
-    $[23] = t1;
-    $[24] = t2;
-    $[25] = t3;
-    $[26] = t4;
-    $[27] = t5;
-    $[28] = t6;
-    $[29] = t8;
-    $[30] = t9;
-  } else {
-    t9 = $[30];
-  }
-  return t9;
+  let t6;
+  if ($[26] !== t1 || $[27] !== t2 || $[28] !== t3 || $[29] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t1, t2, t3, t4, t5]
+    });
+    $[26] = t1;
+    $[27] = t2;
+    $[28] = t3;
+    $[29] = t5;
+    $[30] = t6;
+  } else {
+    t6 = $[30];
+  }
+  const content = t6;
+  if (!expandable) {
+    let t7;
+    if ($[31] !== className || $[32] !== content) {
+      t7 = /*#__PURE__*/_jsx("div", {
+        className: className,
+        children: content
+      });
+      $[31] = className;
+      $[32] = content;
+      $[33] = t7;
+    } else {
+      t7 = $[33];
+    }
+    return t7;
+  }
+  let t7;
+  if ($[34] !== className || $[35] !== content || $[36] !== expanded || $[37] !== onToggle) {
+    t7 = /*#__PURE__*/_jsx("button", {
+      className: className,
+      "aria-expanded": expanded,
+      onClick: onToggle,
+      children: content
+    });
+    $[34] = className;
+    $[35] = content;
+    $[36] = expanded;
+    $[37] = onToggle;
+    $[38] = t7;
+  } else {
+    t7 = $[38];
+  }
+  return t7;
 }
 function _temp5(t0) {
   const {

package/dist/host-hooks.d.ts

@@ -12,6 +12,7 @@ export declare function useHostTask(...args: Parameters<ChatHost['tasks']['useTa
 export declare function useHostExtraPrompts(...args: Parameters<ChatHost['prompts']['useExtra']>): ReturnType<ChatHost['prompts']['useExtra']>;
 export declare function useHostStreaming(): ReturnType<ChatHost['useStreaming']>;
 export declare function useHostSendDelivery(): ReturnType<ChatHost['useSendDelivery']>;
+export declare function useHostHidesToolCalls(...args: Parameters<ChatHost['useHidesToolCalls']>): ReturnType<ChatHost['useHidesToolCalls']>;
 export declare function useHostTimelineFind(...args: Parameters<ChatHost['useTimelineFind']>): ReturnType<ChatHost['useTimelineFind']>;
 export declare function useHostReferableChats(): ReturnType<ChatHost['useReferableChats']>;
 export declare function useHostReferables(scopeId: string, chatId: string): Referables;

package/dist/host-hooks.js

@@ -26,6 +26,9 @@ export function useHostStreaming() {
 export function useHostSendDelivery() {
   return useChatHost().useSendDelivery();
 }
+export function useHostHidesToolCalls(...args) {
+  return useChatHost().useHidesToolCalls(...args);
+}
 export function useHostTimelineFind(...args) {
   return useChatHost().useTimelineFind(...args);
 }

package/dist/host.d.ts

@@ -111,6 +111,12 @@ export interface ComposerSlotProps {
     disabled: boolean;
     insert(text: string): void;
 }
+export interface ComposerHeaderSlotProps {
+    scopeId: string;
+    chatId: string;
+    disabled: boolean;
+    focused: boolean;
+}
 export interface ComposerSendDraft {
     scopeId: string;
     chatId: string;
@@ -252,6 +258,7 @@ export interface ChatHost {
     };
     useStreaming(): 'words' | 'blocks' | 'whole';
     useSendDelivery(): 'queue' | 'steer';
+    useHidesToolCalls(scopeId: string, chatId: string): boolean;
     fileLinks: {
         target(text: string, cwd: string | null, scopeId?: string | null): FileRef | null;
         open(cwd: string | null, ref: FileRef, scopeId?: string | null): void;
@@ -306,6 +313,7 @@ export interface ChatHost {
     useResumeAtReset(scopeId: string): boolean;
     useComposerPlaceholder(scopeId: string, chatId: string): string | null;
     ComposerSlot: ComponentType<ComposerSlotProps> | null;
+    ComposerHeaderSlot?: ComponentType<ComposerHeaderSlotProps> | null;
     useComposerSendActions?(scopeId: string, chatId: string): readonly ComposerSendAction[];
     SubagentSlot: ComponentType<SubagentSlotProps> | null;
     useThreadCards(scopeId: string, chatId: string): readonly ThreadCard[];

package/dist/host.js

@@ -49,6 +49,7 @@ const DEFAULT_HOST = {
   },
   useStreaming: () => 'words',
   useSendDelivery: () => 'queue',
+  useHidesToolCalls: () => false,
   fileLinks: null,
   useTimelineFind: () => NO_FIND,
   dictation: {

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 ComposerSendAction, type ComposerSendDraft, type SubagentSlotProps, type ThreadCard, type VisualHost, type HostMenuAction, 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 ChatActions, type FileRef, type ShellCodeBlockContext, type ChatPlace, type SubagentTask, type TimelineFindOptions, type TimelineFind, type ComposerDictationProps, type ComposerHeaderSlotProps, type ComposerSlotProps, type ComposerSendAction, type ComposerSendDraft, type SubagentSlotProps, type ThreadCard, type VisualHost, type HostMenuAction, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.44.3",
+  "version": "0.45.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -72,11 +72,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.44.3",
-    "@adecore/editor": "0.44.3",
-    "@adecore/editor-react": "0.44.3",
-    "@adecore/intelligent-ui": "0.44.3",
-    "@adecore/merge": "0.44.3",
+    "@adecore/agent-contracts": "0.45.0",
+    "@adecore/editor": "0.45.0",
+    "@adecore/editor-react": "0.45.0",
+    "@adecore/intelligent-ui": "0.45.0",
+    "@adecore/merge": "0.45.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.13.1",
     "@codemirror/state": "^6.7.6",
@@ -100,14 +100,14 @@
     "zustand": "^5.0.16"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.44.3",
+    "@adecore/ui": "^0.45.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.44.3",
+    "@adecore/ui": "0.45.0",
     "@types/bun": "^1.4.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/chat/logic/timeline.ts

@@ -67,7 +67,7 @@ export type TimelineRow =
           // Set when `diff` holds back the diffs past its first few, which the host answers whole.
           heldBack?: boolean;
       }
-    | { kind: 'turn-fold'; id: string; turn: ChatTurnItem; label: string; work: string[]; hiddenCount: number; expanded: boolean }
+    | { kind: 'turn-fold'; id: string; turn: ChatTurnItem; label: string; work: string[]; hiddenCount: number; expanded: boolean; expandable: boolean }
     | { kind: 'forks'; id: string; turnId: string }
     | { kind: 'working'; id: string; startedAt: number }
     // A card of the app's own (`thread-cards.ts`), never derived from an item.
@@ -84,6 +84,15 @@ interface TimelineOptions {
     forkedTurns?: ReadonlySet<string>;
     /* The host's programs drawn as tools of their own, whose runs read as their own sentences. */
     commandLooks?: readonly CommandLook[];
+    /* Leaves out the tool lines and their groups, while a settled turn still says how long it worked. */
+    hideTools?: boolean;
+}
+
+const TOOL_KINDS = new Set<TimelineRow['kind']>(['work', 'work-group', 'work-live']);
+
+// A generated image is drawn as a tool call but reads as the turn's result, so it stays.
+function shownRows(rows: TimelineRow[], options: TimelineOptions): TimelineRow[] {
+    return options.hideTools === true ? rows.filter((row) => !TOOL_KINDS.has(row.kind) || isImageRow(row)) : rows;
 }
 
 /*
@@ -599,7 +608,7 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
 
     for (const chunk of chunksByTurn(items)) {
         if (chunk.turnId === null) {
-            rows.push(...rowsForItems(chunk.items, options, children));
+            rows.push(...shownRows(rowsForItems(chunk.items, options, children), options));
 
             continue;
         }
@@ -616,7 +625,8 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
         const active = turnId === options.activeTurnId || turn?.state === 'running';
 
         if (!turn || active) {
-            const live = rowsForItems(conversation, options, children);
+            // Without its call, a thought has nothing to stand over and stays where it was thought.
+            const live = shownRows(rowsForItems(conversation, options, children), options);
             rows.push(...(active ? withLiveThought(live, conversation) : live));
 
             if (active) {
@@ -628,7 +638,7 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
 
         // 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));
+        rows.push(...shownRows(rowsForItems(conversation.slice(0, lastUser + 1), options, children), options));
         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.
@@ -642,7 +652,9 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
         );
 
         const folded = before.length - standing.length;
-        const expanded = options.expandedTurns.has(turnId);
+        // With the tool lines left out, a turn that only ran tools has nothing behind its fold to open.
+        const expandable = shownRows(before, options).some((row) => !standing.includes(row));
+        const expanded = expandable && options.expandedTurns.has(turnId);
 
         if (folded > 0) {
             const tools = rest.filter(
@@ -656,11 +668,13 @@ export function deriveTimelineRows(items: ChatItem[], options: TimelineOptions):
                 label: turnLabel(turn, chunk.items),
                 work: summarizeTurn(tools, options.commandLooks),
                 hiddenCount: folded,
-                expanded
+                expanded,
+                expandable
             });
         }
 
-        rows.push(...(expanded ? before : standing));
+        // The fold counts the tool lines it would hide, so a turn of only tools still says how long it worked.
+        rows.push(...(expanded ? shownRows(before, options) : standing));
         const changed = changedFilesRow(turn, conversation);
 
         if (changed) {

package/src/chat/ui/Composer.tsx

@@ -247,6 +247,7 @@ export function Composer({ chatId, info, focused, answerPromptsElsewhere, disabl
                 )}
                 {...files.dropTarget}
             >
+                {host.ComposerHeaderSlot && <host.ComposerHeaderSlot scopeId={scope.id} chatId={chatId} disabled={!writable} focused={focused} />}
                 <PromptComposer
                     chatId={chatId}
                     pending={pending}

package/src/chat/ui/SubagentTimeline.tsx

@@ -18,6 +18,7 @@ import { useChatRow } from '../../state/chats';
 import { useChatPreferences } from '../preferences';
 import { readingWidthStyle } from '../reading-width';
 import { useChatHost } from '../../host';
+import { useHostHidesToolCalls } from '../../host-hooks';
 import { useChatScope } from '../../scope';
 import { EmptyState, ContextMenu, Icon } from '@adecore/ui';
 
@@ -67,12 +68,15 @@ export function SubagentTimeline({ chatId, toolUseId }: { chatId: string; toolUs
         }
     }, [state.unsupported, scope]);
 
+    const hideTools = useHostHidesToolCalls(scope.id, chatId);
+
     const rows = deriveTimelineRows(state.items, {
         expandedGroups: groups.ids,
         expandedTurns: NO_TURNS,
         expandedSubagents: subagents.ids,
         activeTurnId: null,
-        commandLooks
+        commandLooks,
+        hideTools
     });
 
     useLayoutEffect(() => {

package/src/chat/ui/Timeline.tsx

@@ -80,7 +80,7 @@ import { FileLinkContext } from './file-links';
 import { AgentIcon } from '../../agents/AgentIcon';
 import { useModelName } from '../../agents/model-name';
 import { ContextMenu, EmptyState, ErrorBoundary, Icon, SectionLabel } from '@adecore/ui';
-import { useHostContextSources, useHostHidesFolder, useHostThreadCards, useHostTimelineFind, useHostWelcome } from '../../host-hooks';
+import { useHostContextSources, useHostHidesFolder, useHostHidesToolCalls, useHostThreadCards, useHostTimelineFind, useHostWelcome } from '../../host-hooks';
 
 const ESTIMATED_ROW_PX = 56;
 // How long a jump waits for a thread that is still loading before it calls the item missing.
@@ -273,6 +273,8 @@ export function Timeline({
             });
     }, [scope, chatId, cursor]);
 
+    const hideTools = useHostHidesToolCalls(scopeId, chatId);
+
     const threadRows = useMemo(() => {
         if (!order || !items) {
             return [];
@@ -286,10 +288,11 @@ export function Timeline({
                 expandedSubagents: subagents.ids,
                 activeTurnId,
                 forkedTurns,
-                commandLooks: host.commandLooks
+                commandLooks: host.commandLooks,
+                hideTools
             }
         );
-    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks]);
+    }, [order, items, groups.ids, turns.ids, subagents.ids, activeTurnId, forkedTurns, host.commandLooks, hideTools]);
 
     const cards = useHostThreadCards(scopeId, chatId);
     const drawsVisuals = host.visuals !== null;
@@ -480,6 +483,34 @@ export function Timeline({
         scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
     }, [rows.length, totalSize, composerHeight, frame.height]);
 
+    /*
+     * A height that changes after the first paint (the composer taking its draft, a row measured again) is
+     * seen by an observer before the page paints, but the state it sets is drawn after that paint. The
+     * end is pinned here as well, so the page never paints the thread with its end out of view.
+     */
+    useLayoutEffect(() => {
+        const content = contentRef.current;
+
+        if (content === null || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+
+        const observer = new ResizeObserver(() => {
+            const element = scrollRef.current;
+
+            if (!followRef.current || element === null) {
+                return;
+            }
+
+            element.scrollTop = element.scrollHeight;
+            scrollGeometry.current = { top: element.scrollTop, height: element.scrollHeight, viewport: element.clientHeight };
+        });
+
+        observer.observe(content);
+
+        return () => observer.disconnect();
+    }, []);
+
     // Prepending history moves rows; keep the reader on the same row at the same height.
     useLayoutEffect(() => {
         const element = scrollRef.current;

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

@@ -78,7 +78,16 @@ export function Row({ row, chatId, toggleGroup, toggleTurn, toggleSubagent, open
         case 'subagent':
             return <SubagentBranchRow chatId={chatId} branch={row} onToggle={toggleSubagent} onOpenConversation={openConversation} />;
         case 'turn-fold':
-            return <TurnFoldRow turn={row.turn} label={row.label} work={row.work} expanded={row.expanded} onToggle={() => toggleTurn(row.turn.id)} />;
+            return (
+                <TurnFoldRow
+                    turn={row.turn}
+                    label={row.label}
+                    work={row.work}
+                    expanded={row.expanded}
+                    expandable={row.expandable}
+                    onToggle={() => toggleTurn(row.turn.id)}
+                />
+            );
         case 'forks':
             return <ForksRow chatId={chatId} turnId={row.turnId} />;
         case 'changed-files':

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

@@ -18,7 +18,7 @@ import { canOpenSubagent, crumbOf, type SubagentStep } from '../../subagent-view
 import { type SubagentTask } from '../../../host';
 import { useChatScope } from '../../../scope';
 import { useCurrentItem } from '../../../state/chats';
-import { useHostTask } from '../../../host-hooks';
+import { useHostHidesToolCalls, useHostTask } from '../../../host-hooks';
 
 // The work of a long-running agent scrolls inside its row instead of pushing the thread away.
 const CHILDREN_MAX_PX = 320;
@@ -81,25 +81,34 @@ function StatusPill({ item, task }: { item: ChatSubagentItem; task: SubagentTask
 /* What the sub-agent did, live: its own tool calls and the text it wrote, as ordinary rows. */
 function SubagentWork({ chatId, item, work }: { chatId: string; item: ChatSubagentItem; work: ChatItem[] }) {
     const { t } = useTranslation('agent-chat');
+    const { id } = useChatScope();
+    const hideTools = useHostHidesToolCalls(id, chatId);
     const scroller = useRef<HTMLDivElement>(null);
     const running = item.status === 'running';
+    // A generated image reads as a result, not as a tool line, so it stays when the lines go.
+    const shown = hideTools ? work.filter((child) => child.kind !== 'tool' || isImageGeneration(child)) : work;
 
     useLayoutEffect(() => {
         // While it works, the newest line is the one worth seeing.
         if (running && scroller.current) {
             scroller.current.scrollTop = scroller.current.scrollHeight;
         }
-    }, [work.length, running]);
+    }, [shown.length, running]);
 
     if (work.length === 0) {
         // A line inside a chat row, where the centered block of an EmptyState would outweigh the row itself.
         return <div className="ml-6 pb-1 text-xs text-text-faint">{t('rows.subagent.nothingYet')}</div>;
     }
 
+    // It did work, only none that is shown; "nothing yet" would say it did none.
+    if (shown.length === 0) {
+        return null;
+    }
+
     return (
         <div ref={scroller} className="ml-6 overflow-y-auto" style={{ maxHeight: CHILDREN_MAX_PX }}>
             {item.itemsTruncated && <div className="pb-1 text-xs text-text-faint">{t('rows.subagent.truncated')}</div>}
-            {work.map((child) => (
+            {shown.map((child) => (
                 <ChildRow key={child.id} chatId={chatId} item={child} />
             ))}
         </div>