mixdog 0.8.0 → 0.9.0

package/src/tui/components/ToolExecution.jsx

@@ -1,198 +1,63 @@
-/**
- * components/ToolExecution.jsx — a tool call + its result.
- *
- * Ported from Claude Code's AssistantToolUseMessage.tsx / MessageResponse.tsx:
+/**
+ * components/ToolExecution.jsx — a tool call + its result.
+ *
+ * Tool call + result layout:
  *   - The call line: `● Tool Name(summary)` where the dot is BLACK_CIRCLE
  *     (2-wide gutter), the tool name is the user-facing label and the argument
  *     summary sits in muted parentheses. NOT raw MCP/internal names.
- *   - The result hangs under a single dim `  ⎿  ` gutter — the gutter is placed
- *     once, not repeated per wrapped line (CC MessageResponse.tsx style).
- */
-import React, { useEffect, useRef, useState } from 'react';
+ *   - The result hangs under a single dim `  ⎿  ` gutter — the gutter is placed
+ *     once, not repeated per wrapped line.
+ */
+import React, { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import stringWidth from 'string-width';
-import { theme, TURN_MARKER, RESULT_GUTTER } from '../theme.mjs';
+import { theme, TURN_MARKER, RESULT_GUTTER, RESULT_GUTTER_CONT } from '../theme.mjs';
 import { formatElapsed } from '../time-format.mjs';
 import { BULLET_OPERATOR } from '../figures.mjs';
 import {
   displayToolName as surfaceDisplayToolName,
   formatToolSurface,
-  summarizeToolArgs as surfaceSummarizeToolArgs,
   summarizeToolResult as surfaceSummarizeToolResult,
   formatAggregateHeader,
+  formatToolActionHeader,
+  displayModelName,
+  summarizeAgentSurfaceBrief,
+  AGENT_SURFACE_BRIEF_MAX,
 } from '../../runtime/shared/tool-surface.mjs';
+import { backgroundTaskFailureStatusLabel, isBackgroundErrorOnlyBody } from '../../runtime/shared/err-text.mjs';
+import { formatExpandedResult, wrapExpandedResultLines } from './tool-output-format.mjs';
 
 const MIN_RESULT_LINE_CHARS = 24;
 // Hard cap for the parenthesized header arg summary so a long path/query does
 // not eat the whole header line; anything longer is truncated with an ellipsis.
 const SUMMARY_MAX_CHARS = 48;
+const HEADER_FAILURE_STATUS_MAX = 32;
 
 export function displayToolName(name, args) {
   return surfaceDisplayToolName(name, args);
 }
 
-/** Claude Code-style one-line renderToolUseMessage summary. */
-export function summarizeArgs(name, args) {
-  return surfaceSummarizeToolArgs(name, args);
-}
-
-export const MAX_RESULT_LINES = 8;
 const TOOL_BLINK_MS = 500;
+const TOOL_BLINK_LIMIT_MS = 3000;
 const TOOL_PENDING_SHOW_DELAY_MS = 1000;
-const TOOL_HINT_DONE_COLOR = theme.subtle;
-const COUNT_TWEEN_MS = 700;
-const COUNT_TWEEN_FRAME_MS = 70;
+// Read `theme.subtle` at use-time (not captured here) so a live `/theme`
+// switch re-tones the tool hints. `theme` is mutated in-place on switch.
 
 function normalizeCount(value) {
   const n = Number(value || 0);
   return Number.isFinite(n) ? Math.max(0, Math.floor(n)) : 0;
 }
 
-function baselineCount(value) {
-  return normalizeCount(value) > 0 ? 1 : 0;
-}
-
-function easeOutCubic(t) {
-  const clamped = Math.max(0, Math.min(1, Number(t) || 0));
-  return 1 - Math.pow(1 - clamped, 3);
-}
-
-function tweenCount(from, to, progress) {
-  const start = normalizeCount(from);
-  const end = normalizeCount(to);
-  if (end <= start) return end;
-  const clamped = Math.max(0, Math.min(1, Number(progress) || 0));
-  if (clamped >= 1) return end;
-  return Math.min(end - 1, Math.max(start, Math.floor(start + ((end - start) * easeOutCubic(clamped)))));
-}
-
-function useCountUp(target, enabled = true) {
-  const normalized = normalizeCount(target);
-  const initial = enabled ? normalized : baselineCount(normalized);
-  const [display, setDisplay] = useState(initial);
-  const displayRef = useRef(initial);
-  const timerRef = useRef(null);
-
-  useEffect(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-    if (!enabled) {
-      const baseline = baselineCount(normalized);
-      displayRef.current = baseline;
-      setDisplay(baseline);
-      return undefined;
-    }
-    const from = normalizeCount(displayRef.current);
-    const to = normalized;
-    if (to <= from) {
-      displayRef.current = to;
-      setDisplay(to);
-      return undefined;
-    }
-    const started = Date.now();
-    const tick = () => {
-      const progress = Math.min(1, (Date.now() - started) / COUNT_TWEEN_MS);
-      const next = tweenCount(from, to, progress);
-      displayRef.current = next;
-      setDisplay(next);
-      if (progress >= 1 && timerRef.current) {
-        clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-    displayRef.current = from;
-    setDisplay(from);
-    const timer = setInterval(tick, COUNT_TWEEN_FRAME_MS);
-    timerRef.current = timer;
-    timer.unref?.();
-    return () => {
-      clearInterval(timer);
-      if (timerRef.current === timer) timerRef.current = null;
-    };
-  }, [normalized, enabled]);
-
-  return display;
-}
-
 function normalizeCountMap(value = {}) {
   const out = {};
-  for (const [key, raw] of Object.entries(value || {})) out[key] = normalizeCount(raw);
-  return out;
-}
-
-function baselineCountMap(value = {}) {
-  const out = {};
-  for (const [key, raw] of Object.entries(value || {})) out[key] = baselineCount(raw);
-  return out;
-}
-
-function countMapSignature(value = {}) {
-  return Object.keys(value || {})
-    .sort()
-    .map((key) => `${key}:${normalizeCount(value[key])}`)
-    .join('|');
-}
-
-function useCountUpMap(targets = {}, enabled = true) {
-  const normalizedTargets = normalizeCountMap(targets);
-  const signature = countMapSignature(normalizedTargets);
-  const initial = enabled ? normalizedTargets : baselineCountMap(normalizedTargets);
-  const [display, setDisplay] = useState(initial);
-  const displayRef = useRef(initial);
-  const timerRef = useRef(null);
-
-  useEffect(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-    if (!enabled) {
-      const baseline = baselineCountMap(normalizedTargets);
-      displayRef.current = baseline;
-      setDisplay(baseline);
-      return undefined;
-    }
-    const from = {};
-    let needsTween = false;
-    for (const [key, to] of Object.entries(normalizedTargets)) {
-      const current = normalizeCount(displayRef.current?.[key]);
-      from[key] = current;
-      if (to > current) needsTween = true;
-    }
-    if (!needsTween) {
-      displayRef.current = normalizedTargets;
-      setDisplay(normalizedTargets);
-      return undefined;
+  for (const [key, raw] of Object.entries(value || {})) {
+    if (raw && typeof raw === 'object') {
+      out[key] = { ...raw, count: normalizeCount(raw.count) };
+    } else {
+      out[key] = normalizeCount(raw);
     }
-    const started = Date.now();
-    const tick = () => {
-      const progress = Math.min(1, (Date.now() - started) / COUNT_TWEEN_MS);
-      const next = {};
-      for (const [key, to] of Object.entries(normalizedTargets)) {
-        const start = normalizeCount(from[key]);
-        next[key] = tweenCount(start, to, progress);
-      }
-      displayRef.current = next;
-      setDisplay(next);
-      if (progress >= 1 && timerRef.current) {
-        clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
-    };
-    displayRef.current = from;
-    setDisplay(from);
-    const timer = setInterval(tick, COUNT_TWEEN_FRAME_MS);
-    timerRef.current = timer;
-    timer.unref?.();
-    return () => {
-      clearInterval(timer);
-      if (timerRef.current === timer) timerRef.current = null;
-    };
-  }, [signature, enabled]);
-
-  return display;
+  }
+  return out;
 }
 
 function deltaColor(token) {
@@ -224,91 +89,126 @@ function renderDeltaText(text) {
   ));
 }
 
+// Shared multi-line result body: `└` on the first row, `│` continuation rail on
+// every following row, body text in one flex column so wrapping stays aligned
+// under the head gutter.
+//
+// Two render paths:
+//   - COLLAPSED (raw=false): a single fitted summary line, diff(+/-) colored via
+//     renderDeltaText.
+//   - EXPANDED (raw=true): formatExpandedResult then wrapExpandedResultLines so
+//     each physical row fits the body width before render (rail rows stay 1:1;
+//     ink does not re-wrap).
+function ResultBody({ lines, rawText, pathArg = '', isShell = false, columns, color, raw }) {
+  const renderLines = raw
+    ? wrapExpandedResultLines(formatExpandedResult(rawText, { pathArg, isShell }), columns)
+    : (lines || []);
+  if (!renderLines || renderLines.length === 0) return null;
+  return (
+    <Box flexDirection="row">
+      <Box flexShrink={0} flexDirection="column">
+        {renderLines.map((_, i) => (
+          <Text key={i} color={theme.subtle}>{i === 0 ? RESULT_GUTTER : RESULT_GUTTER_CONT}</Text>
+        ))}
+      </Box>
+      <Box flexDirection="column" flexShrink={1} flexGrow={1}>
+        {renderLines.map((line, i) => (
+          <Text key={i} color={raw ? undefined : color} wrap="truncate">
+            {raw
+              ? (line || ' ')
+              : renderDeltaText(fitResultLine(line || ' ', columns))}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
 function plural(count, singular, pluralText = `${singular}s`) {
   return count === 1 ? singular : pluralText;
 }
 
-function statusCopy(normalizedName, label, count, doneCount, pending, isError) {
+function isShellTool(normalizedName, label = '') {
   const n = String(normalizedName || '').toLowerCase();
   const l = String(label || '').toLowerCase();
+  return n === 'shell' || n === 'bash' || n === 'bash_session' || n === 'shell_command' || n === 'job_wait' || l === 'run';
+}
 
-  const copy = (active, done, noun, pluralNoun = `${noun}s`) => {
-    if (pending) return active;
-    const object = `${count} ${plural(count, noun, pluralNoun)}`;
-    return `${done} ${object}`;
-  };
+function shellResultStatus(value) {
+  const match = String(value || '').match(/(?:^|\b)status:\s*(running|pending|queued|completed|failed|cancelled|canceled)\b/im);
+  return match ? String(match[1] || '').toLowerCase() : '';
+}
 
-  const copyTarget = (active, done, target, pluralTarget = `${target}s`) => {
-    if (pending) return `${active} ${target}`;
-    const singularTarget = pluralTarget === 'web items' ? 'web item' : target;
-    return `${done} ${count} ${plural(count, singularTarget, pluralTarget)}`;
-  };
+function normalizeTerminalStatus(value) {
+  const raw = String(value || '').trim().toLowerCase();
+  if (!raw) return '';
+  if (/^(running|pending|queued|in_progress|in-progress)$/.test(raw)) return 'running';
+  if (/^(completed|complete|done|success|succeeded|ok)$/.test(raw)) return 'completed';
+  if (/^(failed|fail|error|errored|timeout|timed_out|killed)$/.test(raw)) return 'failed';
+  if (/^(cancelled|canceled|cancel)$/.test(raw)) return 'cancelled';
+  return '';
+}
 
-  switch (n) {
-    case 'read':
-    case 'view_image':
-    case 'read_mcp_resource':
-      return copy('Reading', 'Read', 'file');
-    case 'write':
-    case 'edit':
-    case 'apply_patch':
-      return copy('Editing', 'Edited', 'file');
-    case 'grep':
-    case 'glob':
-      return copy('Searching', 'Searched', 'file');
-    case 'list':
-    case 'ls':
-      return copy('Searching', 'Searched', 'item');
-    case 'search':
-    case 'search_query':
-    case 'image_query':
-    case 'web_search':
-    case 'web_search_call':
-    case 'firecrawl_search':
-    case 'web_fetch':
-    case 'fetch':
-    case 'download_attachment':
-      return copyTarget('Researching', 'Researched', 'web', 'web items');
-    case 'tool_search':
-      return copy('Searching', 'Searched', 'tool');
-    case 'explore':
-      return pending ? 'Exploring' : 'Explored';
-    case 'shell':
-    case 'bash':
-    case 'bash_session':
-    case 'shell_command':
-    case 'job_wait':
-      return copy('Running', 'Ran', 'command');
-    case 'bridge':
-    case 'agent':
-    case 'task':
-      return copyTarget('Calling', 'Called', 'agent');
-    case 'recall':
-    case 'recall_memory':
-    case 'search_memories':
-      return copyTarget('Checking', 'Checked', 'memory', 'memories');
-    case 'remember':
-    case 'save_memory':
-    case 'update_memory':
-      return copyTarget('Writing', 'Wrote', 'memory', 'memories');
-    default:
-      if (l === 'web search') return copyTarget('Researching', 'Researched', 'web', 'web items');
-      if (l === 'search') return copy('Searching', 'Searched', 'tool');
-      if (l === 'explore') return pending ? 'Exploring' : 'Explored';
-      if (l === 'update') return copy('Editing', 'Edited', 'file');
-      if (l === 'read') return copy('Reading', 'Read', 'file');
-      if (l === 'run') return copy('Running', 'Ran', 'command');
-      if (l === 'setup') return copy('Setting Up', 'Set Up', 'item');
-      if (l === 'memory') return copyTarget('Checking', 'Checked', 'memory', 'memories');
-      if (l === 'agent') return copyTarget('Calling', 'Called', 'agent');
-      return copy('Calling', 'Called', 'tool');
-  }
+function displayTerminalStatus(value) {
+  const status = normalizeTerminalStatus(value);
+  if (status === 'running') return 'Running';
+  if (status === 'completed') return 'Finished';
+  if (status === 'failed') return 'Failed';
+  if (status === 'cancelled') return 'Cancelled';
+  return '';
+}
+
+function resultTerminalStatus(value) {
+  const text = String(value || '');
+  const tagged = text.match(/<status[^>]*>([\s\S]*?)<\/status>/i)?.[1]?.trim();
+  if (tagged) return normalizeTerminalStatus(tagged);
+  const bracketed = text.match(/^\[status:\s*([^\]]*)\]/mi)?.[1]?.trim();
+  if (bracketed) return normalizeTerminalStatus(bracketed);
+  const inline = text.match(/^(?:status|state):\s*([^\s·,;]+)/mi)?.[1]?.trim();
+  return normalizeTerminalStatus(inline);
+}
+
+function shellDisplayStatus({ pending = false, failedCount = 0, isError = false, result = '' } = {}) {
+  const status = shellResultStatus(result);
+  if (pending || /^(running|pending|queued)$/.test(status)) return 'running';
+  if (/^cancel/.test(status)) return 'cancelled';
+  if (/^(failed|error|killed|timeout)$/.test(status) || isError || failedCount > 0) return 'failed';
+  return 'completed';
+}
+
+function shellHeader(status, count = 1) {
+  const n = Math.max(1, Number(count) || 1);
+  const object = `${n} ${plural(n, 'command')}`;
+  if (status === 'running') return `Running ${object}`;
+  return `Ran ${object}`;
+}
+
+function shellDetail(status, elapsed = '') {
+  const label = displayTerminalStatus(status) || status;
+  return elapsed ? `${elapsed} · ${label}` : label;
+}
+
+function shellResultElapsed(value) {
+  const match = String(value || '').match(/^\[elapsed:\s*(\d+)\s*ms\]/mi);
+  if (!match) return '';
+  const elapsedMs = Number(match[1]);
+  return Number.isFinite(elapsedMs) && elapsedMs >= 1000 ? formatElapsed(elapsedMs) : '';
+}
+
+function statusCopy(name, label, count, doneCount, pending, isError, args = {}) {
+  // No stableVerbWidth padding: it padded the done verb to the active ("-ing")
+  // width, which Ink trims at the line END (vendor output trimEnd) so it never
+  // stabilized the pending→done flip — it only left an UGLY mid-header gap
+  // ("Searched  1 pattern", "Read    1 file"). The header is wrap="truncate"
+  // behind a fixed gutter and the fullscreen full-clear repaints the row, so
+  // dropping the pad just normalizes the spacing.
+  return formatToolActionHeader(name, args, { pending, count });
 }
 
 function fitResultLine(line, columns) {
   const max = Math.max(MIN_RESULT_LINE_CHARS, Number(columns || 80) - 7);
   const text = String(line ?? '');
-  return text.length > max ? `${text.slice(0, Math.max(1, max - 1))}…` : text;
+  return stringWidth(text) > max ? truncateToWidth(text, max) : text;
 }
 
 /** Trim text from the end (by display width) so it fits maxWidth, appending '…'. */
@@ -326,16 +226,19 @@ function truncateToWidth(text, maxWidth) {
 }
 
 function isAgentTool(normalizedName) {
-  return normalizedName === 'bridge' || normalizedName === 'agent' || normalizedName === 'task';
+  return normalizedName === 'agent';
 }
 
+const SKILL_SURFACE_NAMES = new Set([
+  'skill', 'skill_execute', 'skill_view', 'skills_list', 'use_skill',
+]);
+
 function isBackgroundTaskTool(normalizedName) {
   return new Set(['explore', 'search', 'shell', 'bash', 'bash_session', 'shell_command', 'task']).has(String(normalizedName || '').toLowerCase());
 }
 
 const AGENT_DISPLAY_NAMES = new Map([
   ['explore', 'Explore'],
-  ['web-researcher', 'Web Researcher'],
   ['maintainer', 'Maintainer'],
   ['worker', 'Worker'],
   ['heavy-worker', 'Heavy Worker'],
@@ -356,19 +259,60 @@ function titleizeAgentName(value) {
     .join(' ');
 }
 
+function agentModelLabel(args) {
+  const a = args && typeof args === 'object' ? args : {};
+  const provider = String(a.provider || a.providerId || a.provider_id || '').trim();
+  const model = String(a.model || '').trim();
+  const displayHint = String(a.modelDisplay || a.model_display || a.displayModel || '').trim();
+  return displayModelName(model, provider, displayHint);
+}
+
+function withModel(label, args) {
+  const model = agentModelLabel(args);
+  return model ? `${label} (${model})` : label;
+}
+
+function agentTagLabel(args) {
+  // The real spawn tag (engine fills parsedArgs.tag from the envelope target).
+  // Never fall back to task_id — only the human-meaningful spawn tag belongs in
+  // the header parentheses.
+  return String(args?.tag || '').trim();
+}
+
+function withModelAndTag(label, args) {
+  const model = agentModelLabel(args);
+  const tag = agentTagLabel(args);
+  const inner = [model, tag].filter(Boolean).join(', ');
+  return inner ? `${label} (${inner})` : label;
+}
+
+// Append a role name to a base action word without leaving a trailing space
+// when the role is unknown (no generic "Agent" fallback).
+function joinActionRole(action, role) {
+  return role ? `${action} ${role}` : action;
+}
+
 function agentResponseTitle(args) {
   const name = titleizeAgentName(args?.agent || args?.role || args?.subagent_type || args?.name || '');
-  return `${name || 'Agent'} response`;
+  // The agent role + model identify the responder; the response summary itself
+  // is hidden in the collapsed card (ctrl+o expand still shows the full body).
+  // No generic "Agent" fallback — render just "Response" when the role is empty.
+  return withModelAndTag(joinActionRole('Response', name), args);
 }
 
 function agentActionTitle(args) {
   const name = titleizeAgentName(args?.agent || args?.role || args?.subagent_type || args?.name || '');
-  const agent = name || 'Agent';
   const action = String(args?.type || args?.action || '').toLowerCase();
-  const status = String(args?.status || '').toLowerCase();
-  if (action === 'spawn') return /^(running|pending|queued)$/i.test(status) ? `Spawning ${agent}` : `Spawned ${agent}`;
-  if (action === 'send') return /^(running|pending|queued)$/i.test(status) ? `Sending to ${agent}` : `Sent to ${agent}`;
-  if (action === 'read' || action === 'status') return `${agent} status`;
+  // Fixed action verbs regardless of running/completed status. No generic
+  // "Agent" fallback for the role: when the role is unknown render the action
+  // word alone ("Spawn") instead of "Spawn Agent".
+  if (action === 'spawn') return withModelAndTag(joinActionRole('Spawn', name), args);
+  if (action === 'send') return withModelAndTag(joinActionRole('Send', name), args);
+  if (action === 'list') return 'Agent status';
+  if (action === 'cancel') return withModelAndTag(joinActionRole('Cancel', name), args);
+  if (action === 'close') return withModelAndTag(joinActionRole('Close', name), args);
+  if (action === 'cleanup') return withModelAndTag(joinActionRole('Cleanup', name), args);
+  if (action === 'read' || action === 'status') return withModelAndTag(joinActionRole('Status', name), args);
   return '';
 }
 
@@ -377,15 +321,26 @@ function agentActionSummary(args, summary) {
   if (!text) return '';
   const name = titleizeAgentName(args?.agent || args?.role || args?.subagent_type || args?.name || '');
   if (name && text === name) return '';
-  if (name && text.startsWith(`${name} · `)) return text.slice(name.length + 3).trim();
-  return text;
+  let rest = name && text.startsWith(`${name} · `) ? text.slice(name.length + 3).trim() : text;
+  // The role/model/tag surface summary ("Heavy Worker · Opus 4.8") is now folded
+  // into the header label itself ("Spawn Heavy Worker (Opus 4.8, tag)"), so drop
+  // the model and tag tokens from the parenthesized summary to avoid showing
+  // them twice.
+  const model = agentModelLabel(args);
+  if (model && rest === model) return '';
+  const tag = agentTagLabel(args);
+  if (tag && rest === tag) return '';
+  return rest;
 }
 
 function hasAgentResponseResult(value) {
   const text = String(value || '').trim();
   if (!text) return false;
+  if (/^(?:undefined|null)$/i.test(text)) return false;
   if (/^status:\s*(?:running|pending|queued|completed|failed|cancelled|canceled)(?:\s*·\s*task_id:\s*\S+)?$/i.test(text)) return false;
-  const isBridgeEnvelope = /^(?:bridge task:|bridge job:|background task\b|bridge mode:|bridge message queued\b|bridge close:)/i.test(text)
+  const isBridgeEnvelope = /^(?:agent task:|background task\b|agent message queued\b|agent close:)/i.test(text)
+    || /^(?:agents|tasks):\s*\d/i.test(text)
+    || /^\(no agents or tasks\)$/i.test(text)
     || (/^task_id:\s*\S+/mi.test(text) && /^(?:surface|operation|status):\s*/mi.test(text));
   if (!isBridgeEnvelope) return true;
   let sawBlank = false;
@@ -395,10 +350,12 @@ function hasAgentResponseResult(value) {
       sawBlank = true;
       continue;
     }
-    if (/^bridge result\b/i.test(trimmed)) continue;
+    if (/^agent result\b/i.test(trimmed)) continue;
+    if (/^(?:undefined|null)$/i.test(trimmed)) continue;
     if (/^<\/?(?:final-answer|task-notification|task-id|tool-use-id|output-file|result|status|summary|usage|total_tokens|tool_uses|duration_ms|worktree|worktreePath|worktreeBranch)[^>]*>$/i.test(trimmed)) continue;
-    if (!sawBlank && /^(?:bridge job|bridge task|background task|bridge message queued\b|bridge close:|task_id|surface|operation|label|status|type|target|role|agent|preset|model|effort|fast|limits|started|finished|error|notification|queueDepth):?\s*/i.test(trimmed)) continue;
-    if (!sawBlank && /^(?:bridge mode|agents|tasks):\s*/i.test(trimmed)) continue;
+    if (!sawBlank && /^(?:agent task|background task|agent message queued\b|agent close:|task_id|surface|operation|label|status|type|target|role|agent|preset|model|effort|fast|limits|started|finished|error|notification|queueDepth):?\s*/i.test(trimmed)) continue;
+    if (!sawBlank && /^(?:agents|tasks):\s*/i.test(trimmed)) continue;
+    if (/^\(no agents or tasks\)$/i.test(trimmed)) continue;
     if (!sawBlank && /^-\s+\S+/i.test(trimmed)) continue;
     return true;
   }
@@ -421,17 +378,82 @@ function parseBackgroundTaskResult(value) {
     if (match) fields[match[1].toLowerCase()] = match[2].trim();
   }
   const status = String(fields.status || '').toLowerCase();
+  const error = fields.error || '';
   return {
     taskId: fields.task_id || fields.taskid || '',
     surface: fields.surface || '',
     operation: fields.operation || '',
     label: fields.label || '',
     status,
+    startedAt: fields.started || fields.startedat || '',
+    finishedAt: fields.finished || fields.finishedat || '',
     body,
-    hasResponse: Boolean(body) && !/^(running|pending|queued)$/i.test(status),
+    error,
+    hasResponse: Boolean(body) && !isBackgroundErrorOnlyBody(body, error) && !/^(running|pending|queued)$/i.test(status),
+  };
+}
+
+function backgroundTaskMetaFromArgs(args = {}) {
+  const taskId = String(args.task_id || args.taskId || '').trim();
+  if (!taskId) return null;
+  return {
+    taskId,
+    surface: args.surface || '',
+    operation: args.operation || '',
+    label: args.label || '',
+    status: String(args.status || '').toLowerCase(),
+    startedAt: args.startedAt || args.started || '',
+    finishedAt: args.finishedAt || args.finished || '',
+    error: args.error || '',
+    body: '',
+    hasResponse: false,
   };
 }
 
+function resolveBackgroundTaskMeta(parsedArgs = {}, resultText = '') {
+  const parsed = parseBackgroundTaskResult(resultText);
+  if (parsed) {
+    if (!parsed.error && parsedArgs?.error) parsed.error = parsedArgs.error;
+    if (!parsed.status && parsedArgs?.status) parsed.status = String(parsedArgs.status).toLowerCase();
+    if (!parsed.surface && parsedArgs?.surface) parsed.surface = parsedArgs.surface;
+    return parsed;
+  }
+  return backgroundTaskMetaFromArgs(parsedArgs);
+}
+
+function backgroundTaskElapsed(meta = {}, fallback = '') {
+  const startedMs = Date.parse(meta.startedAt || '');
+  const finishedMs = Date.parse(meta.finishedAt || '');
+  if (Number.isFinite(startedMs) && Number.isFinite(finishedMs) && finishedMs >= startedMs) {
+    const elapsedMs = finishedMs - startedMs;
+    return elapsedMs >= 1000 ? formatElapsed(elapsedMs) : '';
+  }
+  return fallback || '';
+}
+
+function prefixElapsed(detail, elapsed = '') {
+  const text = String(detail || '').trim();
+  const time = String(elapsed || '').trim();
+  if (!time) return text;
+  return text ? `${time} · ${text}` : time;
+}
+
+function mergeTerminalDetail(status, detail = '') {
+  const label = displayTerminalStatus(status);
+  const text = String(detail || '').trim();
+  if (!label) return text;
+  if (label === 'Finished' && text) return text;
+  if (!text) return label;
+  if (text.toLowerCase().startsWith(label.toLowerCase())) return text;
+  return `${label} · ${text}`;
+}
+
+function shouldPrefixSyncElapsed(normalizedName, label) {
+  const n = String(normalizedName || '').toLowerCase();
+  const l = String(label || '').toLowerCase();
+  return n === 'explore' || l === 'explore' || n === 'search' || l === 'search' || l === 'web search';
+}
+
 function backgroundTaskDisplayName(normalizedName, meta = {}) {
   const surface = String(meta.surface || normalizedName || '').toLowerCase();
   if (surface === 'explore') return 'Explore';
@@ -454,20 +476,29 @@ function backgroundTaskActionTitle(normalizedName, meta = {}) {
   return `${display} status`;
 }
 
-function backgroundTaskDetail(meta = {}) {
+function backgroundTaskFailureDetail(meta = {}, parsedArgs = {}) {
+  const status = meta.status || parsedArgs?.status;
+  const error = meta.error || parsedArgs?.error;
+  if (!error) return '';
+  const surface = meta.surface || parsedArgs?.surface || '';
+  return backgroundTaskFailureStatusLabel(status, error, { surface });
+}
+
+function backgroundTaskDetail(meta = {}, elapsed = '', parsedArgs = {}) {
   const parts = [];
-  if (meta.status) parts.push(`status: ${meta.status}`);
+  const status = displayTerminalStatus(meta.status);
+  if (status) parts.push(status);
   if (meta.taskId) parts.push(`task_id: ${meta.taskId}`);
   const firstBodyLine = String(meta.body || '').split('\n').map((line) => line.trim()).find(Boolean) || '';
   if (firstBodyLine && /^(running|pending|queued)$/i.test(meta.status || '')) parts.push(firstBodyLine);
-  return parts.join(' · ');
+  return prefixElapsed(parts.join(' · '), elapsed);
 }
 
 function isBackgroundTaskResponseArgs(normalizedName, args = {}) {
   if (!isBackgroundTaskTool(normalizedName)) return false;
   const type = String(args?.type || args?.action || '').toLowerCase();
   const status = String(args?.status || '').toLowerCase();
-  return type === 'result' || type === 'completion' || (/^(completed|failed|cancelled|canceled)$/i.test(status) && Boolean(args?.task_id));
+  return type === 'result' || type === 'completion' || (/^(completed|cancelled|canceled)$/i.test(status) && Boolean(args?.task_id));
 }
 
 function isOutputDetailTool(normalizedName, label) {
@@ -476,26 +507,14 @@ function isOutputDetailTool(normalizedName, label) {
   return new Set([
     'shell', 'bash', 'bash_session', 'shell_command', 'job_wait',
     'read', 'view_image', 'read_mcp_resource',
-    'grep', 'glob', 'search', 'search_query', 'image_query', 'web_search', 'web_search_call', 'firecrawl_search', 'explore', 'web_fetch', 'fetch', 'download_attachment',
+    'grep', 'glob', 'search', 'search_query', 'image_query', 'web_search', 'web_search_call', 'explore', 'web_fetch', 'fetch', 'download_attachment',
     'list', 'ls', 'code_graph',
     'recall', 'recall_memory', 'search_memories', 'remember', 'save_memory', 'update_memory',
   ]).has(n) || l === 'read' || l === 'search' || l === 'web search' || l === 'run';
 }
 
 function progressDetail({ normalizedName, label, elapsed }) {
-  const n = String(normalizedName || '').toLowerCase();
-  const l = String(label || '').toLowerCase();
-  const suffix = elapsed ? ` - ${elapsed}` : '';
-  if (isAgentTool(n) || l === 'agent') return `Calling Agent${suffix}`;
-  if (n === 'shell' || n === 'bash' || n === 'bash_session' || n === 'shell_command' || n === 'job_wait' || l === 'run') return `Running${suffix}`;
-  if (n === 'search' || n === 'search_query' || n === 'image_query' || n === 'web_search' || n === 'web_search_call' || n === 'firecrawl_search' || n === 'web_fetch' || n === 'fetch' || n === 'download_attachment' || l === 'web search') return `Researching Web${suffix}`;
-  if (n === 'explore' || l === 'explore') return `Exploring${suffix}`;
-  if (n === 'grep' || n === 'glob' || n === 'list' || n === 'ls' || l === 'search') return `Searching${suffix}`;
-  if (n === 'read' || n === 'view_image' || n === 'read_mcp_resource' || l === 'read') return `Reading${suffix}`;
-  if (n === 'write' || n === 'edit' || n === 'apply_patch' || l === 'update') return `Editing${suffix}`;
-  if (n === 'recall' || n === 'recall_memory' || n === 'search_memories' || l === 'memory') return `Checking Memory${suffix}`;
-  if (l === 'setup') return `Setting Up${suffix}`;
-  return `Working${suffix}`;
+  return elapsed ? `${elapsed} elapsed` : '';
 }
 
 function genericCompletedDetail({ normalizedName, label, hasResult, firstResultLine, isError }) {
@@ -503,7 +522,7 @@ function genericCompletedDetail({ normalizedName, label, hasResult, firstResultL
   const l = String(label || '').toLowerCase();
   if (isError) return hasResult ? firstResultLine : 'Failed';
   if (n === 'shell' || n === 'bash' || n === 'bash_session' || n === 'shell_command' || n === 'job_wait') {
-    return hasResult ? firstResultLine : '';
+    return '';
   }
   if (isOutputDetailTool(n, l)) {
     return hasResult ? firstResultLine : '';
@@ -511,7 +530,29 @@ function genericCompletedDetail({ normalizedName, label, hasResult, firstResultL
   return '';
 }
 
-function agentTerminalDetail(status, isError, elapsed) {
+function toolSearchLoadedSummary(resultText) {
+  let parsed;
+  try {
+    parsed = JSON.parse(String(resultText || ''));
+  } catch {
+    return '';
+  }
+  const tools = parsed?.selected?.tools;
+  if (!tools || typeof tools !== 'object') return '';
+  const names = [
+    ...(Array.isArray(tools.added) ? tools.added : []),
+    ...(Array.isArray(tools.already) ? tools.already : []),
+  ]
+    .map((name) => String(name || '').trim())
+    .filter(Boolean);
+  return [...new Set(names)].join(', ');
+}
+
+function agentTerminalDetail(status, isError, elapsed, error = '') {
+  const failureDetail = isError && error
+    ? backgroundTaskFailureStatusLabel(status, error, { surface: 'agent' })
+    : '';
+  if (failureDetail) return failureDetail;
   const s = String(status || '').toLowerCase();
   const word = /cancel/.test(s)
     ? 'Cancelled'
@@ -529,16 +570,21 @@ function clampFailureCount(errorCount, groupCount, isError) {
   return isError ? groupCount : 0;
 }
 
-function toolStatusColor({ pending, groupCount, failedCount }) {
-  if (pending) return theme.subtle;
+function toolStatusColor({ pending, groupCount, failedCount, terminalStatus = '' }) {
+  if (pending) return theme.success;
+  const status = normalizeTerminalStatus(terminalStatus);
+  if (status === 'failed') return theme.error;
+  if (status === 'cancelled') return theme.warning || theme.mixdogOrange || theme.subtle;
   if (failedCount <= 0) return theme.success;
   if (groupCount > 1 && failedCount < groupCount) return theme.mixdogOrange || theme.warning;
   return theme.error;
 }
 
-export function ToolExecution({ name, args, result, rawResult, isError, errorCount, expanded, globalExpanded = false, columns = 80, attached = false, count = 1, completedCount = 0, startedAt = 0, completedAt = 0, aggregate = false, categories = {}, headerFinalized = true }) {
+export function ToolExecution({ name, args, result, rawResult, isError, errorCount, expanded, globalExpanded = false, columns = 80, attached = false, count = 1, completedCount = 0, startedAt = 0, completedAt = 0, aggregate = false, categories = {}, headerFinalized = true, deferredDisplayReady = false }) {
   const [blinkOn, setBlinkOn] = useState(true);
+  const [blinkExpired, setBlinkExpired] = useState(false);
   const [pendingDelayElapsed, setPendingDelayElapsed] = useState(false);
+  const [, setElapsedTick] = useState(0);
   const groupCount = Math.max(1, Number(count || 1));
   const doneCount = Math.max(0, Math.min(groupCount, Number(completedCount || (result == null ? 0 : groupCount))));
   const rt = result == null ? null : String(result).replace(/\s+$/, '');
@@ -547,18 +593,30 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   const startedAtMs = Number(startedAt || 0);
   const completedAtMs = Number(completedAt || 0);
   const pendingAgeMs = pending && startedAtMs ? Math.max(0, Date.now() - startedAtMs) : 0;
-  const pendingDisplayReady = !pending || !startedAtMs || pendingDelayElapsed || pendingAgeMs >= TOOL_PENDING_SHOW_DELAY_MS;
-  const completedQuickly = !pending && startedAtMs > 0 && completedAtMs > 0 && Math.max(0, completedAtMs - startedAtMs) < TOOL_PENDING_SHOW_DELAY_MS;
-  const headerPending = pending || (headerFinalized === false && !completedQuickly);
+  // A card that is still pending but already has something to paint (a result
+  // landed, or at least one of an aggregate's parallel calls completed) must
+  // SKIP the blank placeholder: it was pushed early (engine ensureVisible on a
+  // result before the push-delay) so its startedAt is recent and pendingAgeMs <
+  // delay, but it has real header counts + a summary to show. Rendering the
+  // placeholder instead made an empty card scroll up first and only fill in as
+  // each parallel result arrived. Treating "has visible content" as ready lets
+  // the card appear already populated and simply grow taller as more results
+  // land — no empty band.
+  const hasVisibleProgress = doneCount > 0 || Boolean(String(rt || '').trim());
+  const pendingDisplayReady = !pending || !startedAtMs || pendingDelayElapsed || pendingAgeMs >= TOOL_PENDING_SHOW_DELAY_MS || hasVisibleProgress || deferredDisplayReady;
+  // Keep the action verb in its active form until the engine explicitly seals
+  // the tool block. Fast tool batches often complete before the next provider
+  // iteration decides whether to call more tools or emit assistant text; flipping
+  // "Finding" -> "Found" -> "Finding" during that gap makes the transcript jump.
+  const headerPending = pending || headerFinalized === false;
   const hasResult = result != null && Boolean(String(rt || '').trim());
   const hasRawResult = rawResult != null && Boolean(String(rawRt || '').trim());
   const elapsedMs = startedAtMs ? Math.max(0, (pending ? Date.now() : (completedAtMs || Date.now())) - startedAtMs) : 0;
   const elapsed = elapsedMs >= 1000 ? formatElapsed(elapsedMs) : '';
   const failedCount = clampFailureCount(errorCount, groupCount, isError);
   const statusColor = toolStatusColor({ pending, groupCount, failedCount });
-  const countsVisible = !headerPending;
-  const displayGroupCount = useCountUp(groupCount, countsVisible);
-  const displayCategories = useCountUpMap(categories || {}, aggregate === true && countsVisible);
+  const displayGroupCount = groupCount;
+  const displayCategories = normalizeCountMap(categories || {});
 
   useEffect(() => {
     if (!pending) {
@@ -581,12 +639,60 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   }, [pending, startedAt]);
 
   useEffect(() => {
-    if (!pending || !pendingDisplayReady) return undefined;
+    if (!pending || !pendingDisplayReady || blinkExpired) {
+      setBlinkOn(true);
+      return undefined;
+    }
     const timer = setInterval(() => setBlinkOn((on) => !on), TOOL_BLINK_MS);
     return () => clearInterval(timer);
-  }, [pending, pendingDisplayReady]);
+  }, [pending, pendingDisplayReady, blinkExpired]);
+
+  useEffect(() => {
+    if (!pending || !pendingDisplayReady) {
+      setBlinkExpired(false);
+      return undefined;
+    }
+    const started = Number(startedAt || 0);
+    const remaining = TOOL_BLINK_LIMIT_MS - (started ? Math.max(0, Date.now() - started) : 0);
+    if (remaining <= 0) {
+      setBlinkExpired(true);
+      return undefined;
+    }
+    setBlinkExpired(false);
+    const timer = setTimeout(() => setBlinkExpired(true), remaining);
+    return () => clearTimeout(timer);
+  }, [pending, pendingDisplayReady, startedAt]);
 
-  if (pending && !pendingDisplayReady) return null;
+  useEffect(() => {
+    if (!pending || !pendingDisplayReady || !startedAtMs) return undefined;
+    const timer = setInterval(() => setElapsedTick((tick) => (tick + 1) % 1000000), 1000);
+    return () => clearInterval(timer);
+  }, [pending, pendingDisplayReady, startedAtMs]);
+
+  // While a freshly-started tool is still inside its pending-show delay we used
+  // to `return null` (0 rendered rows). But estimateTranscriptItemRows() in
+  // App.jsx counts a collapsed tool item from the moment it is pushed (1 row for
+  // a skill surface, 2 rows otherwise), so the scroll/window math reserved that
+  // height while the component painted 0. The moment the delay elapsed (or the
+  // tool completed) the real card popped in, the rendered transcript grew and
+  // shoved the content above it — the "new tool card jumps up/down as it
+  // settles" bug. Reserve the SAME height the estimator predicts with blank
+  // content instead, so the card occupies a constant height for its whole
+  // lifecycle and nothing reflows when the real header/detail fill in place.
+  if (pending && !pendingDisplayReady) {
+    // Mirror estimateTranscriptItemRows: a non-aggregate skill surface collapses
+    // to a single header row; everything else reserves header + one detail row.
+    const placeholderNormalizedName = String(formatToolSurface(name, args)?.normalizedName || '').toLowerCase();
+    // Skill surfaces collapse to a single header row; agent surfaces reserve
+    // header + one brief detail row (see estimateTranscriptItemRows).
+    const placeholderSingleRow = !aggregate && SKILL_SURFACE_NAMES.has(placeholderNormalizedName);
+    return (
+      <Box flexDirection="column" marginTop={attached ? 0 : 1}>
+        <Text> </Text>
+        {placeholderSingleRow ? null : <Text> </Text>}
+      </Box>
+    );
+  }
 
   // ── Aggregate card ──────────────────────────────────────────────
   if (aggregate) {
@@ -594,28 +700,64 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
     // bounce between "Reading 1 item" and "Reading 4 items". Final counts and
     // result summaries appear only after completion.
     const headerOrder = Array.isArray(args?.categoryOrder) ? args.categoryOrder : null;
+    // No stableVerbWidth: see statusCopy — the padding only left a mid-header
+    // gap ("Searched  1 pattern, Read    1 file") since Ink trims trailing
+    // spaces and never stabilized the flip.
     const headerText = formatAggregateHeader(displayCategories || {}, { pending: headerPending, order: headerOrder });
     let detailText;
     if (hasResult) {
-      detailText = rt;
-    } else if (pending) {
-      detailText = '';
+      // The aggregate card reserves EXACTLY ONE detail row when it is not
+      // expanded-with-raw (App.jsx estimateTranscriptItemRows counts
+      // margin + header + 1 detail row for the no-raw aggregate case). The
+      // summary `rt` can be multiline; a single <Text> containing '\n' renders
+      // MULTIPLE terminal rows, which desyncs the estimate and makes the card
+      // "settle" taller than reserved. Collapse to a single logical line
+      // (whitespace-normalized); fitResultLine below trims it to the column
+      // width so it can never exceed one terminal row.
+      detailText = String(rt).replace(/\s+/g, ' ').trim();
     } else {
       detailText = '';
     }
 
-    const dotColor = statusColor;
-    const dotText = pending && !blinkOn ? ' ' : TURN_MARKER;
+    const dotColor = !hasResult && !pending ? theme.subtle : statusColor;
+    const dotText = pending && !blinkExpired && !blinkOn ? ' ' : TURN_MARKER;
     const gutter = 2;
     const showHeaderExpandHint = hasRawResult;
-    const hintLabel = showHeaderExpandHint ? `ctrl+o ${expanded ? 'collapse' : 'expand'}` : '';
-    const hintText = hintLabel ? ` ${BULLET_OPERATOR} ${hintLabel}` : '';
-    const avail = Math.max(1, (Number(columns) || 80) - 1 - gutter - stringWidth(hintText));
+    const hintLabel = `ctrl+o ${expanded ? 'collapse' : 'expand'}`;
+    const hintText = ` ${BULLET_OPERATOR} ${hintLabel}`;
+    const headerMetaText = pending && elapsed ? ` (${elapsed} elapsed)` : '';
+    // Reserve the expand-hint slot for the card's whole lifecycle so the header
+    // body never reflows when the hint appears on completion. During pending the
+    // elapsed meta shares this same right region; reserving the wider of the two
+    // keeps `avail` (and the header clip point) fixed, so nothing "appears then
+    // shrinks back" on the right edge as counts/results land.
+    const rightReserve = Math.max(stringWidth(hintText), stringWidth(headerMetaText));
+    const avail = Math.max(1, (Number(columns) || 80) - 1 - gutter - rightReserve);
+    const trailingText = headerMetaText || (showHeaderExpandHint ? hintText : '');
+    const trailingColor = theme.subtle;
     const clippedHeader = stringWidth(headerText) > avail
       ? truncateToWidth(headerText, avail)
       : headerText;
-    const detailLines = expanded && hasRawResult ? rawRt.split('\n') : (detailText ? [detailText] : []);
-    const aggregateDetailColor = theme.text;
+    // Trailing content (elapsed while pending, ctrl+o hint when done) always
+    // sits immediately after the header body — no fixed right-edge pin — so it
+    // never jumps to the right edge and snaps back on the pending→done flip.
+    // Keep the aggregate card at a fixed height (header + one detail row) for
+    // its whole lifecycle. Pending cards have no result yet, so reserve the
+    // detail row up front instead of growing from 1→2 rows when the summary
+    // lands on completion — that late row push is the "줄 튐" jump. The empty
+    // placeholder renders as a blank line under the ⎿ gutter; the final summary
+    // simply fills it in place. This matches estimateTranscriptItemRows (always
+    // 2 + resultRows), so windowing/scroll stay in lockstep too.
+    // When there is no summary yet (pending) or none could be derived, fill the
+    // reserved detail row with a status word instead of a blank line so the area
+    // under the ⎿ gutter never looks empty. Real summaries keep the normal text
+    // color; the status placeholder is rendered dim.
+    const isPlaceholderDetail = !(expanded && hasRawResult) && !detailText;
+    const showRawAggregate = expanded && hasRawResult;
+    const detailLines = showRawAggregate
+      ? rawRt.split('\n')
+      : (detailText ? [detailText] : [headerPending ? 'Running' : 'Finished']);
+    const aggregateDetailColor = isPlaceholderDetail ? theme.subtle : theme.text;
     return (
       <Box flexDirection="column" marginTop={attached ? 0 : 1}>
         <Box flexDirection="row">
@@ -624,93 +766,180 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
           </Box>
           <Text wrap="truncate">
             <Text bold color={theme.text}>{clippedHeader}</Text>
-            {showHeaderExpandHint ? <Text color={TOOL_HINT_DONE_COLOR}>{hintText}</Text> : null}
+            {trailingText ? <Text color={trailingColor}>{trailingText}</Text> : null}
           </Text>
         </Box>
-        {detailLines.length > 0 ? (
-          <Box flexDirection="row">
-            <Box flexShrink={0}>
-              <Text color={theme.subtle}>{RESULT_GUTTER}</Text>
-            </Box>
-            <Box flexDirection="column" flexShrink={1} flexGrow={1}>
-              {detailLines.map((line, i) => (
-                <Text key={i} color={aggregateDetailColor}>
-                  {renderDeltaText(fitResultLine(line || ' ', columns))}
-                </Text>
-              ))}
-            </Box>
-          </Box>
-        ) : null}
+        <ResultBody
+          lines={detailLines}
+          rawText={rawRt || ''}
+          columns={columns}
+          color={aggregateDetailColor}
+          raw={showRawAggregate}
+        />
       </Box>
     );
   }
 
   // ── Normal (non-aggregate) tool card ────────────────────────────
   const { label, summary, normalizedName, args: parsedArgs } = formatToolSurface(name, args);
-  const backgroundMeta = !pending && hasResult && isBackgroundTaskTool(normalizedName)
-    ? parseBackgroundTaskResult(rt)
+  const isShellSurface = isShellTool(normalizedName, label);
+  const isSkillSurface = SKILL_SURFACE_NAMES.has(String(normalizedName || '').toLowerCase());
+  const backgroundMeta = !pending && isBackgroundTaskTool(normalizedName)
+    ? resolveBackgroundTaskMeta(parsedArgs, rt || '')
     : null;
+  const backgroundError = backgroundMeta?.error || parsedArgs?.error || '';
+  const errorOnlyResult = Boolean(rt) && isBackgroundErrorOnlyBody(rt, backgroundError);
   const backgroundResultText = backgroundMeta?.hasResponse ? backgroundMeta.body : '';
-  const displayedResultText = backgroundResultText || rt;
+  const displayedResultText = backgroundResultText || (errorOnlyResult ? '' : (rt || ''));
+  const hasDisplayResult = Boolean(String(displayedResultText || '').trim());
   const lines = displayedResultText ? displayedResultText.split('\n') : [];
   const totalLines = lines.length;
   // Semantic one-line summary derived purely from name/args/result text.
   // Shown in the collapsed, non-error view in place of the raw result block.
   // Grouped cards ("Searched N files" / "Read N files") get the same treatment
   // as single calls: a one-line semantic summary stands in for the raw block.
-  const resultSummary = !pending && hasResult
+  const resultSummary = !pending && hasDisplayResult
     ? surfaceSummarizeToolResult(name, args, displayedResultText, isError)
     : null;
   // Same fit budget fitResultLine() uses, to detect a line that will be clipped.
   const maxResultChars = Math.max(MIN_RESULT_LINE_CHARS, Number(columns || 80) - 7);
   const resultColor = theme.text;
-  const firstResultLine = hasResult ? String(lines[0] ?? '') : '';
-  const firstResultLineClipped = hasResult && firstResultLine.length > maxResultChars;
-  const hasHiddenDetail = !pending && hasResult && (totalLines > 1 || firstResultLineClipped || Boolean(resultSummary));
+  const firstResultLine = hasDisplayResult ? String(lines[0] ?? '') : '';
+  const firstResultLineClipped = hasDisplayResult && stringWidth(firstResultLine) > maxResultChars;
+  const hasHiddenDetail = !pending && hasDisplayResult && (totalLines > 1 || firstResultLineClipped || Boolean(resultSummary));
+  const shellStatus = isShellSurface ? shellDisplayStatus({ pending, failedCount, isError, result: displayedResultText }) : '';
+  const shellElapsed = isShellSurface ? (shellResultElapsed(displayedResultText) || elapsed) : '';
+  const shellStatusDetail = isShellSurface ? shellDetail(shellStatus, shellElapsed) : '';
+  const backgroundElapsed = backgroundMeta
+    ? backgroundTaskElapsed(backgroundMeta, elapsed)
+    : (isBackgroundTaskTool(normalizedName) ? backgroundTaskElapsed(parsedArgs, elapsed) : '');
 
   const toolArgPath = parsedArgs?.path ?? parsedArgs?.file_path ?? parsedArgs?.file ?? '';
   const imageDetail = normalizedName === 'view_image' && toolArgPath ? String(toolArgPath) : '';
-  const agentCompletionDetail = !pending && isAgentTool(normalizedName)
-    ? agentTerminalDetail(parsedArgs?.status, isError, elapsed)
+  const isBackgroundResult = !pending && isBackgroundTaskTool(normalizedName) && Boolean(backgroundMeta);
+  const isBackgroundResponse = isBackgroundResult && (backgroundMeta?.hasResponse || isBackgroundTaskResponseArgs(normalizedName, parsedArgs));
+  const isBackgroundMetadataResult = isBackgroundResult && !isBackgroundResponse && Boolean(backgroundMeta);
+  const backgroundMetadataFailureLabel = isBackgroundMetadataResult
+    ? backgroundTaskFailureDetail(backgroundMeta, parsedArgs)
     : '';
-  const agentDetail = !pending && isAgentTool(normalizedName) && !hasResult
-    ? agentCompletionDetail
+  const backgroundMetadataHeaderFailure = Boolean(backgroundMetadataFailureLabel) && !hasDisplayResult
+    ? backgroundMetadataFailureLabel
     : '';
-  const pendingDetail = pending
-    ? progressDetail({ normalizedName, label, elapsed })
+  const agentHeaderFailure = !pending && isAgentTool(normalizedName) && isError && parsedArgs?.error && !hasDisplayResult
+    ? backgroundTaskFailureStatusLabel(parsedArgs?.status, parsedArgs?.error, { surface: 'agent' })
     : '';
-  const genericDetail = !pending && !agentDetail && !imageDetail && !resultSummary
+  const headerFailureStatus = backgroundMetadataHeaderFailure || agentHeaderFailure || '';
+  const agentCompletionDetail = !pending && isAgentTool(normalizedName) && !agentHeaderFailure
+    ? agentTerminalDetail(parsedArgs?.status, isError, elapsed, parsedArgs?.error)
+    : '';
+  const agentDetail = !pending && isAgentTool(normalizedName) && !hasDisplayResult
+    ? agentCompletionDetail
+    : '';
+  const genericDetail = !pending && !isShellSurface && !agentDetail && !imageDetail && !resultSummary
     ? genericCompletedDetail({ normalizedName, label, hasResult, firstResultLine, isError })
     : '';
-  const isBackgroundResult = !pending && hasResult && isBackgroundTaskTool(normalizedName);
-  const isBackgroundResponse = isBackgroundResult && (backgroundMeta?.hasResponse || isBackgroundTaskResponseArgs(normalizedName, parsedArgs));
-  const isBackgroundMetadataResult = isBackgroundResult && !isBackgroundResponse && Boolean(backgroundMeta);
-  const backgroundMetadataDetail = isBackgroundMetadataResult ? backgroundTaskDetail(backgroundMeta) : '';
+  const terminalStatus = pending
+    ? 'running'
+    : (shellStatus || normalizeTerminalStatus(backgroundMeta?.status) || normalizeTerminalStatus(parsedArgs?.status) || resultTerminalStatus(displayedResultText) || (isError || failedCount > 0 ? 'failed' : 'completed'));
+  const backgroundMetadataDetail = isBackgroundMetadataResult && !backgroundMetadataHeaderFailure
+    ? backgroundTaskDetail(backgroundMeta, backgroundElapsed, parsedArgs)
+    : '';
+  const backgroundResponseDetail = isBackgroundResponse && resultSummary
+    ? prefixElapsed(resultSummary, backgroundElapsed)
+    : resultSummary;
+  const syncElapsedDetail = !isBackgroundResponse && shouldPrefixSyncElapsed(normalizedName, label)
+    ? prefixElapsed(backgroundResponseDetail, elapsed)
+    : backgroundResponseDetail;
+  const nonShellDetail = backgroundMetadataDetail || (/^(Cancelled|Failed|Finished)$/i.test(resultSummary || '') && agentCompletionDetail
+    ? agentCompletionDetail
+    : syncElapsedDetail) || agentDetail || imageDetail || genericDetail;
+  // A pending non-aggregate tool used to drop its detail row entirely
+  // (collapsedDetail = ''), so the card rendered as a single header row. But
+  // estimateTranscriptItemRows() in App.jsx reserves 2 rows for a collapsed
+  // non-aggregate tool (1 only for skill surfaces). That left a 1-row gap that
+  // closed the instant the result landed — the surviving "튐". Reserve the same
+  // dim placeholder detail row the aggregate card uses (`Running`) for the whole
+  // pending lifecycle so the height stays fixed at header + one detail row and
+  // the final summary just fills in place. Skill surfaces collapse to a single
+  // row in BOTH the estimate and the render (visibleDetailLines drops the row
+  // for isSkillSurface below), so they get no placeholder.
+  const pendingDetailPlaceholder = pending && !isSkillSurface ? 'Running' : '';
+  const shellCollapsedSummary = isShellSurface && !pending && hasDisplayResult
+    ? (resultSummary || truncateToWidth(firstResultLine, Math.min(120, maxResultChars)))
+    : resultSummary;
   const collapsedDetail = pending
-    ? pendingDetail
-    : backgroundMetadataDetail || (/^(Cancelled|Failed|Finished)$/i.test(resultSummary || '') && agentCompletionDetail
-      ? agentCompletionDetail
-      : resultSummary) || agentDetail || imageDetail || genericDetail;
-  const showRawResult = expanded && hasResult && !isBackgroundMetadataResult;
-  const detailLines = showRawResult ? lines : (collapsedDetail ? [collapsedDetail] : []);
-  const detailIsSynthetic = pending || agentDetail || resultSummary || imageDetail || backgroundMetadataDetail || (genericDetail && genericDetail !== firstResultLine);
-  const detailColor = theme.text;
-
-  const isAgentResult = !isBackgroundResult && !pending && isAgentTool(normalizedName) && hasResult;
+    ? pendingDetailPlaceholder
+    : isShellSurface
+      ? mergeTerminalDetail(shellStatus, shellCollapsedSummary)
+      : mergeTerminalDetail(terminalStatus, nonShellDetail);
+  const backgroundMetadataExpandable = isBackgroundMetadataResult && hasRawResult && !pending;
+  const showRawResult = expanded && (hasDisplayResult || hasRawResult)
+    && (!isBackgroundMetadataResult || hasRawResult);
+  const detailLines = showRawResult
+    ? (hasDisplayResult ? lines : (rawRt ? rawRt.split('\n') : []))
+    : (collapsedDetail ? [collapsedDetail] : []);
+  const isPendingPlaceholderDetail = !showRawResult && Boolean(pendingDetailPlaceholder);
+  const detailColor = isPendingPlaceholderDetail ? theme.subtle : theme.text;
+
+  const isAgentResult = !isBackgroundResult && !pending && isAgentTool(normalizedName) && hasDisplayResult;
   const isAgentResponse = isAgentResult && hasAgentResponseResult(rt);
-  const isAgentMetadataResult = isAgentResult && !isAgentResponse;
-  const dotColor = statusColor;
-  const dotText = pending && !blinkOn ? ' ' : TURN_MARKER;
+  const isAgentSurfaceCard = isAgentTool(normalizedName);
+  const agentSurfaceBriefRaw = isAgentSurfaceCard && !showRawResult
+    ? summarizeAgentSurfaceBrief(name, parsedArgs, displayedResultText || '', { isError, isResponse: isAgentResponse })
+    : '';
+  const agentSurfaceBrief = agentSurfaceBriefRaw
+    ? truncateToWidth(agentSurfaceBriefRaw, Math.min(AGENT_SURFACE_BRIEF_MAX, maxResultChars))
+    : '';
+  // Skill loads carry the skill name in the header already
+  // ("Loaded 1 skill (name)"); the collapsed detail row just repeats it, so
+  // drop it and keep the card a single line. Expanding (ctrl+o) still shows the
+  // full skill body via the raw-result path.
+  // Agent spawn/send/response cards show a tight brief under the ⎿ gutter when
+  // collapsed; ctrl+o expand still surfaces the full body.
+  let visibleDetailLines = detailLines;
+  if (isSkillSurface && !showRawResult) {
+    visibleDetailLines = [];
+  } else if (isBackgroundMetadataResult && backgroundMetadataHeaderFailure && !showRawResult) {
+    visibleDetailLines = [];
+  } else if (isAgentSurfaceCard && !showRawResult) {
+    const agentDetailFallback = collapsedDetail
+      || (pending ? (pendingDetailPlaceholder || 'Running') : 'Finished');
+    const agentDetailLine = agentSurfaceBrief
+      || truncateToWidth(String(agentDetailFallback), Math.min(AGENT_SURFACE_BRIEF_MAX, maxResultChars));
+    visibleDetailLines = agentHeaderFailure && !agentSurfaceBrief ? [] : [agentDetailLine];
+  }
+  const finalStatusColor = toolStatusColor({ pending, groupCount, failedCount, terminalStatus });
+  const dotColor = finalStatusColor;
+  const dotText = pending && !blinkExpired && !blinkOn ? ' ' : TURN_MARKER;
   let labelText;
   if (isAgentResponse) labelText = agentResponseTitle(parsedArgs);
   else if (isBackgroundResponse) labelText = backgroundTaskResultTitle(normalizedName, backgroundMeta || parsedArgs);
   else if (isBackgroundMetadataResult) labelText = backgroundTaskActionTitle(normalizedName, backgroundMeta);
-  else labelText = (isAgentTool(normalizedName) ? agentActionTitle(parsedArgs) : '') || statusCopy(normalizedName, label, displayGroupCount, doneCount, headerPending, isError);
+  else if (isShellSurface) labelText = shellHeader(shellStatus, displayGroupCount);
+  else labelText = (isAgentTool(normalizedName) ? agentActionTitle(parsedArgs) : '') || statusCopy(name, label, displayGroupCount, doneCount, headerPending, isError, parsedArgs);
   // Show the parenthesized arg summary for grouped cards too, matching single
   // calls so the header carries the same context.
-  const summaryText = isAgentResponse || isBackgroundResponse ? '' : (isAgentTool(normalizedName) ? agentActionSummary(parsedArgs, summary) : summary);
-  const showHeaderExpandHint = hasHiddenDetail && !isAgentMetadataResult && !isBackgroundMetadataResult;
-  const expandHintColor = TOOL_HINT_DONE_COLOR;
+  const toolSearchSummary = !pending && normalizedName === 'tool_search' && hasResult
+    ? toolSearchLoadedSummary(displayedResultText)
+    : '';
+  const summaryText = isAgentResponse || isBackgroundResponse
+    ? ''
+    : toolSearchSummary || (isAgentTool(normalizedName) ? agentActionSummary(parsedArgs, summary) : summary);
+  // Agent cards hide their collapsed body but still expose ctrl+o expand only
+  // when expanding would actually reveal something: an agent response body, or a
+  // multiline / clipped raw result (e.g. the "agents: N …" worker list). A
+  // status-only single-line metadata result has nothing extra to show, so it
+  // gets no hint.
+  const agentHasExpandableBody = isAgentSurfaceCard && !pending && hasResult
+    && (isAgentResponse || totalLines > 1 || firstResultLineClipped);
+  // Agent cards gate the hint solely on agentHasExpandableBody — never on
+  // hasHiddenDetail, which goes true for any single-line resultSummary and would
+  // wrongly show ctrl+o on a status-only one-liner that has nothing to expand.
+  const shellHasExpandableBody = isShellSurface && !pending && hasDisplayResult
+    && (totalLines > 1 || firstResultLineClipped || Boolean(shellCollapsedSummary && shellCollapsedSummary !== firstResultLine));
+  const showHeaderExpandHint = (isShellSurface ? shellHasExpandableBody : (isAgentSurfaceCard ? agentHasExpandableBody : (hasHiddenDetail || backgroundMetadataExpandable)))
+    && normalizedName !== 'tool_search';
+  const expandHintColor = theme.subtle;
 
   // Build a single-line header that never wraps: reserve width for the fixed
   // trailing expand hint plus the dot gutter and a 1-col Windows last-column
@@ -720,10 +949,25 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   const gutter = 2;
   const hintLabel = showHeaderExpandHint ? `ctrl+o ${expanded ? 'collapse' : 'expand'}` : '';
   const hintText = hintLabel ? ` ${BULLET_OPERATOR} ${hintLabel}` : '';
-  const avail = Math.max(
-    1,
-    (Number(columns) || 80) - 1 - gutter - stringWidth(hintText),
-  );
+  const headerMetaText = pending && elapsed ? ` (${elapsed} elapsed)` : '';
+  // The expand hint (post-completion) and the elapsed meta (pending) occupy the
+  // SAME trailing region but never at the same time. Subtracting both widths
+  // made `avail` shrink/grow across the pending→completed transition, so the
+  // label/summary clip point shifted and the header text "jumped out then
+  // snapped back" right as a tool finished or cards merged. Reserve the wider of
+  // the two for the whole lifecycle (matching the aggregate card's rightReserve)
+  // so `avail` stays fixed and nothing reflows. The hint slot is reserved even
+  // while pending so its later appearance does not push the body either.
+  const hintReserveLabel = `ctrl+o ${expanded ? 'collapse' : 'expand'}`;
+  const hintReserveText = ` ${BULLET_OPERATOR} ${hintReserveLabel}`;
+  const headerFailureText = headerFailureStatus
+    ? truncateToWidth(headerFailureStatus, HEADER_FAILURE_STATUS_MAX)
+    : '';
+  const inlineFailureText = headerFailureText ? ` ${BULLET_OPERATOR} ${headerFailureText}` : '';
+  const rightReserve = Math.max(stringWidth(hintReserveText), stringWidth(headerMetaText)) + stringWidth(inlineFailureText);
+  const avail = Math.max(1, (Number(columns) || 80) - 1 - gutter - rightReserve);
+  const trailingText = headerMetaText || (showHeaderExpandHint ? hintText : '');
+  const trailingColor = headerMetaText ? theme.subtle : expandHintColor;
   let labelOut;
   let summaryOut;
   if (stringWidth(labelText) >= avail) {
@@ -740,33 +984,38 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
       : '';
     summaryOut = truncatedSummary ? ` (${truncatedSummary})` : '';
   }
+  // Keep trailing content (pending elapsed / completed ctrl+o hint) attached
+  // directly after the body for the whole lifecycle. The fixed-column pin
+  // previously used for elapsed is what made the trailing text jump to the right
+  // edge and snap back on the pending→done flip, so there is no pad. `avail`
+  // stays reserved (rightReserve) so the body clip point never reflows.
   return (
     <Box flexDirection="column" marginTop={attached ? 0 : 1}>
-      <Box flexDirection="row">
-        <Box flexShrink={0} minWidth={2}>
-          <Text color={dotColor}>{dotText}</Text>
+      <Box flexDirection="row" width="100%">
+        <Box flexShrink={1} flexGrow={1} overflow="hidden" minWidth={0}>
+          <Box flexDirection="row">
+            <Box flexShrink={0} minWidth={2}>
+              <Text color={dotColor}>{dotText}</Text>
+            </Box>
+            <Text wrap="truncate">
+              <Text bold color={theme.text}>{labelOut}</Text>
+              {summaryOut ? <Text color={theme.text}>{summaryOut}</Text> : null}
+              {inlineFailureText ? <Text color={theme.error}>{inlineFailureText}</Text> : null}
+              {trailingText ? <Text color={trailingColor}>{trailingText}</Text> : null}
+            </Text>
+          </Box>
         </Box>
-        <Text wrap="truncate">
-          <Text bold color={theme.text}>{labelOut}</Text>
-          {summaryOut ? <Text color={theme.text}>{summaryOut}</Text> : null}
-          {showHeaderExpandHint ? <Text color={expandHintColor}>{hintText}</Text> : null}
-        </Text>
       </Box>
 
-      {detailLines.length > 0 ? (
-        <Box flexDirection="row">
-          <Box flexShrink={0}>
-            <Text color={theme.subtle}>{RESULT_GUTTER}</Text>
-          </Box>
-          <Box flexDirection="column" flexShrink={1} flexGrow={1}>
-            {detailLines.map((line, i) => (
-              <Text key={i} color={showRawResult ? resultColor : detailColor}>
-                {renderDeltaText(fitResultLine(line || ' ', columns))}
-              </Text>
-            ))}
-          </Box>
-        </Box>
-      ) : null}
-    </Box>
-  );
-}
+      <ResultBody
+        lines={visibleDetailLines}
+        rawText={hasDisplayResult ? displayedResultText : (rawRt || '')}
+        pathArg={toolArgPath}
+        isShell={isShellSurface}
+        columns={columns}
+        color={showRawResult ? resultColor : detailColor}
+        raw={showRawResult}
+      />
+    </Box>
+  );
+}