mixdog 0.9.0 → 0.9.2

package/src/tui/components/ToolExecution.jsx

@@ -11,6 +11,8 @@
 import React, { useEffect, useState } from 'react';
 import { Box, Text } from 'ink';
 import stringWidth from 'string-width';
+import stripAnsi from 'strip-ansi';
+import { displayWidth } from '../display-width.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';
@@ -28,6 +30,11 @@ import { backgroundTaskFailureStatusLabel, isBackgroundErrorOnlyBody } from '../
 import { formatExpandedResult, wrapExpandedResultLines } from './tool-output-format.mjs';
 
 const MIN_RESULT_LINE_CHARS = 24;
+// Hard cap for the collapsed result detail row (the second line under the ⎿
+// gutter). Independent of terminal width so a wide terminal never lets a long
+// line (e.g. an agent response brief) stretch the whole row — anything past
+// this is truncated with an ellipsis. ctrl+o expand still shows the full body.
+const RESULT_LINE_HARD_MAX = 80;
 // 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;
@@ -42,6 +49,21 @@ const TOOL_BLINK_LIMIT_MS = 3000;
 const TOOL_PENDING_SHOW_DELAY_MS = 1000;
 // 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.
+// Collapsed tool headers/details are laid out as single terminal rows. Never let
+// raw C0/control bytes (CR, tabs, cursor escapes, etc.) reach those rows: a
+// terminal can apply them after Ink has already clipped/measured the row, which
+// makes a scrolled tool card appear to write through the prompt/statusline.
+const INLINE_CONTROL_RE = /[\u0000-\u001F\u007F]/g;
+
+function safeInlineText(value) {
+  return stripAnsi(String(value ?? ''))
+    .replace(/\r\n?/g, '\n')
+    .replace(/\t/g, ' ')
+    .replace(/\n+/g, ' ')
+    .replace(INLINE_CONTROL_RE, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
 
 function normalizeCount(value) {
   const n = Number(value || 0);
@@ -98,10 +120,15 @@ function renderDeltaText(text) {
 //     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).
+//     ink does not re-wrap). Physical row mount cap: MIXDOG_TUI_TOOL_OUTPUT_MAX_RENDER_LINES
+//     (default 600; 0 disables). Shell/script bodies keep the newest tail when capped.
 function ResultBody({ lines, rawText, pathArg = '', isShell = false, columns, color, raw }) {
   const renderLines = raw
-    ? wrapExpandedResultLines(formatExpandedResult(rawText, { pathArg, isShell }), columns)
+    ? wrapExpandedResultLines(
+      formatExpandedResult(rawText, { pathArg, isShell }),
+      columns,
+      { isShell },
+    )
     : (lines || []);
   if (!renderLines || renderLines.length === 0) return null;
   return (
@@ -164,10 +191,27 @@ function resultTerminalStatus(value) {
   if (tagged) return normalizeTerminalStatus(tagged);
   const bracketed = text.match(/^\[status:\s*([^\]]*)\]/mi)?.[1]?.trim();
   if (bracketed) return normalizeTerminalStatus(bracketed);
+  // Loose inline `status: x` / `state: x` matches are a last-resort fallback —
+  // prefer the engine-controlled `<status>` tag or `[status: …]` marker above.
+  // A loose match can false-positive on prose that happens to start with
+  // "status:" (rare, but shellResultStatus below already owns real shell
+  // output parsing; this fallback stays narrow and unchanged in behavior).
   const inline = text.match(/^(?:status|state):\s*([^\s·,;]+)/mi)?.[1]?.trim();
   return normalizeTerminalStatus(inline);
 }
 
+const LEADING_STATUS_MARKER_LINE_RE = /^\[status:\s*[^\]]*\]\s*$/i;
+
+function stripLeadingStatusMarkerLines(lines) {
+  const out = Array.isArray(lines) ? lines.slice() : [];
+  if (out.length > 0 && LEADING_STATUS_MARKER_LINE_RE.test(String(out[0] ?? '').trim())) out.shift();
+  return out;
+}
+
+function stripLeadingStatusMarkerFromText(text) {
+  return stripLeadingStatusMarkerLines(String(text || '').split('\n')).join('\n');
+}
+
 function shellDisplayStatus({ pending = false, failedCount = 0, isError = false, result = '' } = {}) {
   const status = shellResultStatus(result);
   if (pending || /^(running|pending|queued)$/.test(status)) return 'running';
@@ -183,11 +227,6 @@ function shellHeader(status, count = 1) {
   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 '';
@@ -206,20 +245,20 @@ function statusCopy(name, label, count, doneCount, pending, isError, args = {})
 }
 
 function fitResultLine(line, columns) {
-  const max = Math.max(MIN_RESULT_LINE_CHARS, Number(columns || 80) - 7);
-  const text = String(line ?? '');
-  return stringWidth(text) > max ? truncateToWidth(text, max) : text;
+  const max = Math.min(RESULT_LINE_HARD_MAX, Math.max(MIN_RESULT_LINE_CHARS, Number(columns || 80) - 7));
+  const text = safeInlineText(line);
+  return displayWidth(text) > max ? truncateToWidth(text, max) : text;
 }
 
 /** Trim text from the end (by display width) so it fits maxWidth, appending '…'. */
 function truncateToWidth(text, maxWidth) {
-  const str = String(text ?? '');
+  const str = safeInlineText(text);
   if (maxWidth < 1) return '';
-  if (stringWidth(str) <= maxWidth) return str;
+  if (displayWidth(str) <= maxWidth) return str;
   const chars = Array.from(str);
   let out = '';
   for (const ch of chars) {
-    if (stringWidth(out + ch + '…') > maxWidth) break;
+    if (displayWidth(out + ch + '…') > maxWidth) break;
     out += ch;
   }
   return `${out}…`;
@@ -267,11 +306,6 @@ function agentModelLabel(args) {
   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
@@ -286,43 +320,46 @@ function withModelAndTag(label, args) {
   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;
+// Append an agent name to a base action word without leaving a trailing space
+// when the agent is unknown (no generic "Agent" fallback).
+function joinActionAgent(action, agent) {
+  return agent ? `${action} ${agent}` : action;
 }
 
 function agentResponseTitle(args) {
-  const name = titleizeAgentName(args?.agent || args?.role || args?.subagent_type || args?.name || '');
-  // The agent role + model identify the responder; the response summary itself
+  const name = titleizeAgentName(args?.agent || args?.subagent_type || args?.name || '');
+  // The agent + 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);
+  // No generic "Agent" fallback — render just "Response" when the agent is empty.
+  return withModelAndTag(joinActionAgent('Response', name), args);
 }
 
 function agentActionTitle(args) {
-  const name = titleizeAgentName(args?.agent || args?.role || args?.subagent_type || args?.name || '');
-  const action = String(args?.type || args?.action || '').toLowerCase();
+  const name = titleizeAgentName(args?.agent || args?.subagent_type || args?.name || '');
+  // Runtime treats an omitted type/action as "spawn" (see agent-tool.mjs default),
+  // so mirror that contract here instead of falling through to the generic
+  // "Called agent" status copy.
+  const action = String(args?.type || args?.action || 'spawn').toLowerCase();
   // Fixed action verbs regardless of running/completed status. No generic
-  // "Agent" fallback for the role: when the role is unknown render the action
+  // "Agent" fallback for the agent: when the agent 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 === 'spawn') return withModelAndTag(joinActionAgent('Spawn', name), args);
+  if (action === 'send') return withModelAndTag(joinActionAgent('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);
+  if (action === 'cancel') return withModelAndTag(joinActionAgent('Cancel', name), args);
+  if (action === 'close') return withModelAndTag(joinActionAgent('Close', name), args);
+  if (action === 'cleanup') return withModelAndTag(joinActionAgent('Cleanup', name), args);
+  if (action === 'read' || action === 'status') return withModelAndTag(joinActionAgent('Status', name), args);
   return '';
 }
 
 function agentActionSummary(args, summary) {
   const text = String(summary || '').trim();
   if (!text) return '';
-  const name = titleizeAgentName(args?.agent || args?.role || args?.subagent_type || args?.name || '');
+  const name = titleizeAgentName(args?.agent || args?.subagent_type || args?.name || '');
   if (name && text === name) return '';
   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
+  // The agent/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.
@@ -353,7 +390,7 @@ function hasAgentResponseResult(value) {
     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 && /^(?: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 && /^(?:agent task|background task|agent message queued\b|agent close:|task_id|surface|operation|label|status|type|target|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;
@@ -435,7 +472,10 @@ function prefixElapsed(detail, elapsed = '') {
   const text = String(detail || '').trim();
   const time = String(elapsed || '').trim();
   if (!time) return text;
-  return text ? `${time} · ${text}` : time;
+  // Unified convention: the elapsed time ALWAYS goes at the END, ` · ` separated.
+  // Guard against a double-append when the text already ends with the same time.
+  if (text && text.endsWith(`· ${time}`)) return text;
+  return text ? `${text} · ${time}` : time;
 }
 
 function mergeTerminalDetail(status, detail = '') {
@@ -513,10 +553,6 @@ function isOutputDetailTool(normalizedName, label) {
   ]).has(n) || l === 'read' || l === 'search' || l === 'web search' || l === 'run';
 }
 
-function progressDetail({ normalizedName, label, elapsed }) {
-  return elapsed ? `${elapsed} elapsed` : '';
-}
-
 function genericCompletedDetail({ normalizedName, label, hasResult, firstResultLine, isError }) {
   const n = String(normalizedName || '').toLowerCase();
   const l = String(label || '').toLowerCase();
@@ -561,7 +597,8 @@ function agentTerminalDetail(status, isError, elapsed, error = '') {
       : /done|success|complete|closed/.test(s)
         ? 'Finished'
         : '';
-  return word ? `${word}${elapsed ? ` after ${elapsed}` : ''}` : '';
+  // Unified ` · <time>` convention (previously "Finished after 12s").
+  return word ? `${word}${elapsed ? ` · ${elapsed}` : ''}` : '';
 }
 
 function clampFailureCount(errorCount, groupCount, isError) {
@@ -570,17 +607,26 @@ function clampFailureCount(errorCount, groupCount, isError) {
   return isError ? groupCount : 0;
 }
 
+// Single source of truth for the tool-card dot (●) color. Both the aggregate
+// and normal (single-tool) render paths must call this with a resolved
+// `terminalStatus` — do not recompute color inline elsewhere.
+//   running/pending      -> mixdogOrange || warning (blink handled by caller)
+// success               -> theme.success
+//   partial failure       -> mixdogOrange (some, not all, of the group failed)
+//   all failed            -> theme.error
+//   cancelled             -> theme.warning
 function toolStatusColor({ pending, groupCount, failedCount, terminalStatus = '' }) {
-  if (pending) return theme.success;
+  if (pending) return theme.mixdogOrange || theme.warning;
   const status = normalizeTerminalStatus(terminalStatus);
+  if (status === 'cancelled') return theme.warning;
   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, deferredDisplayReady = false }) {
+export function ToolExecution({ name, args, result, rawResult, isError, errorCount, expanded, columns = 80, attached = false, count = 1, completedCount = 0, startedAt = 0, completedAt = 0, aggregate = false, categories = {}, headerFinalized = true, deferredDisplayReady = false }) {
+  const rowWidth = Math.max(1, Number(columns || 80));
   const [blinkOn, setBlinkOn] = useState(true);
   const [blinkExpired, setBlinkExpired] = useState(false);
   const [pendingDelayElapsed, setPendingDelayElapsed] = useState(false);
@@ -614,7 +660,6 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   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 displayGroupCount = groupCount;
   const displayCategories = normalizeCountMap(categories || {});
 
@@ -687,7 +732,7 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
     // header + one brief detail row (see estimateTranscriptItemRows).
     const placeholderSingleRow = !aggregate && SKILL_SURFACE_NAMES.has(placeholderNormalizedName);
     return (
-      <Box flexDirection="column" marginTop={attached ? 0 : 1}>
+      <Box flexDirection="column" marginTop={attached ? 0 : 1} width={rowWidth} overflow="hidden">
         <Text> </Text>
         {placeholderSingleRow ? null : <Text> </Text>}
       </Box>
@@ -703,7 +748,7 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
     // 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 });
+    const headerText = safeInlineText(formatAggregateHeader(displayCategories || {}, { pending: headerPending, order: headerOrder }));
     let detailText;
     if (hasResult) {
       // The aggregate card reserves EXACTLY ONE detail row when it is not
@@ -714,33 +759,40 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
       // "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();
+      detailText = safeInlineText(rt);
     } else {
       detailText = '';
     }
 
-    const dotColor = !hasResult && !pending ? theme.subtle : statusColor;
+    // Resolve the aggregate's terminalStatus from the collapsed detail `rt`
+    // (which carries a `[status: cancelled]`/`<status>` marker when the
+    // aggregate was cancelled) plus isError/failedCount for failures. Pending
+    // stays running; a clean completion stays success. toolStatusColor is the
+    // single source of dot color for both aggregate and normal cards.
+    const aggregateTerminalStatus = pending
+      ? 'running'
+      : (resultTerminalStatus(rt) || (isError || failedCount > 0 ? 'failed' : 'completed'));
+    const dotColor = toolStatusColor({ pending, groupCount, failedCount, terminalStatus: aggregateTerminalStatus });
     const dotText = pending && !blinkExpired && !blinkOn ? ' ' : TURN_MARKER;
     const gutter = 2;
     const showHeaderExpandHint = hasRawResult;
     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));
+    // The header right-side trailing slot only ever shows the ctrl+o hint. The
+    // pending elapsed meta was removed from the header — it lives on the detail
+    // row now (`Running · 12s`) so a per-second digit change never reflows the
+    // header. Still reserve the hint slot for the whole lifecycle so the body
+    // clip point stays fixed when the hint appears on completion.
+    const rightReserve = stringWidth(hintText);
     const avail = Math.max(1, (Number(columns) || 80) - 1 - gutter - rightReserve);
-    const trailingText = headerMetaText || (showHeaderExpandHint ? hintText : '');
+    const trailingText = showHeaderExpandHint ? hintText : '';
     const trailingColor = theme.subtle;
     const clippedHeader = stringWidth(headerText) > avail
       ? truncateToWidth(headerText, avail)
       : headerText;
-    // 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.
+    // Trailing content (ctrl+o hint only; pending elapsed lives on the detail
+    // row) 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
@@ -754,13 +806,19 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
     // color; the status placeholder is rendered dim.
     const isPlaceholderDetail = !(expanded && hasRawResult) && !detailText;
     const showRawAggregate = expanded && hasRawResult;
+    // Aggregate cards intentionally omit elapsed time once grouped. A brief
+    // `Running · 1s` tick during the grouped→finished handoff reads as visual
+    // noise, and the grouped header already communicates that work is active.
+    const pendingPlaceholder = headerPending
+      ? 'Running'
+      : 'Finished';
     const detailLines = showRawAggregate
       ? rawRt.split('\n')
-      : (detailText ? [detailText] : [headerPending ? 'Running' : 'Finished']);
+      : (detailText ? [detailText] : [pendingPlaceholder]);
     const aggregateDetailColor = isPlaceholderDetail ? theme.subtle : theme.text;
     return (
-      <Box flexDirection="column" marginTop={attached ? 0 : 1}>
-        <Box flexDirection="row">
+      <Box flexDirection="column" marginTop={attached ? 0 : 1} width={rowWidth} overflow="hidden">
+        <Box flexDirection="row" width={rowWidth} overflow="hidden">
           <Box flexShrink={0} minWidth={2}>
             <Text color={dotColor}>{dotText}</Text>
           </Box>
@@ -792,30 +850,35 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   const backgroundResultText = backgroundMeta?.hasResponse ? backgroundMeta.body : '';
   const displayedResultText = backgroundResultText || (errorOnlyResult ? '' : (rt || ''));
   const hasDisplayResult = Boolean(String(displayedResultText || '').trim());
-  const lines = displayedResultText ? displayedResultText.split('\n') : [];
+  const displayedResultBodyText = stripLeadingStatusMarkerFromText(displayedResultText);
+  const hasDisplayBody = Boolean(String(displayedResultBodyText || '').trim());
+  const lines = displayedResultBodyText ? displayedResultBodyText.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 && hasDisplayResult
-    ? surfaceSummarizeToolResult(name, args, displayedResultText, isError)
+  const resultSummary = !pending && hasDisplayBody
+    ? surfaceSummarizeToolResult(name, args, displayedResultBodyText, 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 maxResultChars = Math.min(RESULT_LINE_HARD_MAX, Math.max(MIN_RESULT_LINE_CHARS, Number(columns || 80) - 7));
   const resultColor = theme.text;
   const firstResultLine = hasDisplayResult ? String(lines[0] ?? '') : '';
-  const firstResultLineClipped = hasDisplayResult && stringWidth(firstResultLine) > maxResultChars;
-  const hasHiddenDetail = !pending && hasDisplayResult && (totalLines > 1 || firstResultLineClipped || Boolean(resultSummary));
+  const firstResultLineClipped = hasDisplayBody && stringWidth(firstResultLine) > maxResultChars;
+  const hasHiddenDetail = !pending && hasDisplayBody && (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) : '';
+  // Audit HIGH: on a FAILED view_image the path detail used to win over the
+  // error cause (nonShellDetail order puts imageDetail before genericDetail),
+  // so the card showed the filename instead of why it failed. Suppress the
+  // path detail on error; the error-cause summary/first line takes the row.
+  const imageDetail = normalizedName === 'view_image' && toolArgPath && !isError ? String(toolArgPath) : '';
   const isBackgroundResult = !pending && isBackgroundTaskTool(normalizedName) && Boolean(backgroundMeta);
   const isBackgroundResponse = isBackgroundResult && (backgroundMeta?.hasResponse || isBackgroundTaskResponseArgs(normalizedName, parsedArgs));
   const isBackgroundMetadataResult = isBackgroundResult && !isBackgroundResponse && Boolean(backgroundMeta);
@@ -863,20 +926,22 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   // 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 pendingDetailPlaceholder = pending && !isSkillSurface
+    ? (elapsed ? `Running · ${elapsed}` : 'Running')
+    : '';
   const shellCollapsedSummary = isShellSurface && !pending && hasDisplayResult
     ? (resultSummary || truncateToWidth(firstResultLine, Math.min(120, maxResultChars)))
     : resultSummary;
   const collapsedDetail = pending
     ? pendingDetailPlaceholder
     : isShellSurface
-      ? mergeTerminalDetail(shellStatus, shellCollapsedSummary)
+      ? prefixElapsed(mergeTerminalDetail(shellStatus, shellCollapsedSummary), shellElapsed)
       : mergeTerminalDetail(terminalStatus, nonShellDetail);
   const backgroundMetadataExpandable = isBackgroundMetadataResult && hasRawResult && !pending;
-  const showRawResult = expanded && (hasDisplayResult || hasRawResult)
+  const showRawResult = expanded && (hasDisplayBody || hasRawResult)
     && (!isBackgroundMetadataResult || hasRawResult);
   const detailLines = showRawResult
-    ? (hasDisplayResult ? lines : (rawRt ? rawRt.split('\n') : []))
+    ? (hasDisplayBody ? lines : (rawRt ? stripLeadingStatusMarkerLines(rawRt.split('\n')) : []))
     : (collapsedDetail ? [collapsedDetail] : []);
   const isPendingPlaceholderDetail = !showRawResult && Boolean(pendingDetailPlaceholder);
   const detailColor = isPendingPlaceholderDetail ? theme.subtle : theme.text;
@@ -898,7 +963,10 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   // collapsed; ctrl+o expand still surfaces the full body.
   let visibleDetailLines = detailLines;
   if (isSkillSurface && !showRawResult) {
-    visibleDetailLines = [];
+    // Audit HIGH: a FAILED skill load used to drop its detail row with the
+    // success path, hiding the one-line cause entirely. Keep the detail row
+    // when the call errored; only the redundant success repeat is dropped.
+    visibleDetailLines = isError && collapsedDetail ? [collapsedDetail] : [];
   } else if (isBackgroundMetadataResult && backgroundMetadataHeaderFailure && !showRawResult) {
     visibleDetailLines = [];
   } else if (isAgentSurfaceCard && !showRawResult) {
@@ -917,14 +985,25 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   else if (isBackgroundMetadataResult) labelText = backgroundTaskActionTitle(normalizedName, backgroundMeta);
   else if (isShellSurface) labelText = shellHeader(shellStatus, displayGroupCount);
   else labelText = (isAgentTool(normalizedName) ? agentActionTitle(parsedArgs) : '') || statusCopy(name, label, displayGroupCount, doneCount, headerPending, isError, parsedArgs);
+  labelText = safeInlineText(labelText);
   // Show the parenthesized arg summary for grouped cards too, matching single
   // calls so the header carries the same context.
   const toolSearchSummary = !pending && normalizedName === 'tool_search' && hasResult
     ? toolSearchLoadedSummary(displayedResultText)
     : '';
-  const summaryText = isAgentResponse || isBackgroundResponse
+  const rawSummaryText = safeInlineText(isAgentResponse || isBackgroundResponse
     ? ''
-    : toolSearchSummary || (isAgentTool(normalizedName) ? agentActionSummary(parsedArgs, summary) : summary);
+    : toolSearchSummary || (isAgentTool(normalizedName) ? agentActionSummary(parsedArgs, summary) : summary));
+  // Drop the parenthesized arg summary when it is a bare "<n> <unit>" count
+  // that the header verb already spells out (e.g. header "Searching 6 patterns"
+  // + summary "6 patterns"). Multi-arg array calls hit this; single calls keep
+  // their descriptive summary ("pattern: \"foo\"") since it never matches the
+  // header tail. Channel surfaces are unaffected — they build the summary from
+  // summarizeToolArgs directly and never render this header verb.
+  const summaryIsHeaderCount = rawSummaryText
+    && /^\d+\s+\S+$/.test(rawSummaryText)
+    && labelText.endsWith(rawSummaryText);
+  const summaryText = summaryIsHeaderCount ? '' : rawSummaryText;
   // 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
@@ -936,6 +1015,7 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
   // 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
+    && hasDisplayBody
     && (totalLines > 1 || firstResultLineClipped || Boolean(shellCollapsedSummary && shellCollapsedSummary !== firstResultLine));
   const showHeaderExpandHint = (isShellSurface ? shellHasExpandableBody : (isAgentSurfaceCard ? agentHasExpandableBody : (hasHiddenDetail || backgroundMetadataExpandable)))
     && normalizedName !== 'tool_search';
@@ -949,25 +1029,22 @@ 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 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.
+  // The header right-side trailing slot only ever shows the ctrl+o hint. The
+  // pending elapsed meta was removed from the header — it lives on the detail
+  // row now (`Running · 12s`) so a per-second digit change (9s→10s) or the
+  // pending→done swap never reflows the header. The hint slot is reserved for
+  // the whole lifecycle (even while pending) so its later appearance on
+  // completion does not push the body clip point.
   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 rightReserve = stringWidth(hintReserveText) + stringWidth(inlineFailureText);
   const avail = Math.max(1, (Number(columns) || 80) - 1 - gutter - rightReserve);
-  const trailingText = headerMetaText || (showHeaderExpandHint ? hintText : '');
-  const trailingColor = headerMetaText ? theme.subtle : expandHintColor;
+  const trailingText = showHeaderExpandHint ? hintText : '';
+  const trailingColor = expandHintColor;
   let labelOut;
   let summaryOut;
   if (stringWidth(labelText) >= avail) {
@@ -984,13 +1061,13 @@ 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.
+  // Keep trailing content (ctrl+o hint only; pending elapsed lives on the detail
+  // row) 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="column" marginTop={attached ? 0 : 1} width={rowWidth} overflow="hidden">
       <Box flexDirection="row" width="100%">
         <Box flexShrink={1} flexGrow={1} overflow="hidden" minWidth={0}>
           <Box flexDirection="row">
@@ -1009,7 +1086,7 @@ export function ToolExecution({ name, args, result, rawResult, isError, errorCou
 
       <ResultBody
         lines={visibleDetailLines}
-        rawText={hasDisplayResult ? displayedResultText : (rawRt || '')}
+        rawText={hasDisplayBody ? displayedResultBodyText : stripLeadingStatusMarkerFromText(rawRt || '')}
         pathArg={toolArgPath}
         isShell={isShellSurface}
         columns={columns}

package/src/tui/components/TurnDone.jsx

@@ -26,7 +26,7 @@ function cleanRightMessage(value) {
   return String(value || '').replace(/\s+/g, ' ').trim();
 }
 
-export function TurnDone({ elapsedMs = 0, status = 'done', verb = 'Thought', rightMessage = '', rightTone = 'info', rightMessageWidth = 24 }) {
+export function TurnDone({ elapsedMs = 0, status = 'done', verb = 'Thought', rightMessage = '', rightTone = 'info', rightMessageWidth = 24, marginTop = 1 }) {
   const elapsed = formatDuration(elapsedMs);
   const cancelled = status === 'cancelled';
   const doneVerb = String(verb || 'Thought').trim() || 'Thought';
@@ -37,7 +37,7 @@ export function TurnDone({ elapsedMs = 0, status = 'done', verb = 'Thought', rig
   const rightWidth = Math.max(1, Number(rightMessageWidth) || 24);
 
   return (
-    <Box marginTop={1} flexDirection="row" width="100%">
+    <Box marginTop={marginTop} flexDirection="row" width="100%">
       <Box flexGrow={1} flexShrink={1} overflow="hidden">
         <Text wrap="truncate">
           <Text color={theme.spinnerGlyph}>{TURN_DONE_MARKER} </Text>
@@ -53,14 +53,14 @@ export function TurnDone({ elapsedMs = 0, status = 'done', verb = 'Thought', rig
   );
 }
 
-export function StatusDone({ label = 'Complete', detail = '', rightMessage = '', rightTone = 'info', rightMessageWidth = 24 }) {
+export function StatusDone({ label = 'Complete', detail = '', rightMessage = '', rightTone = 'info', rightMessageWidth = 24, marginTop = 1 }) {
   const copy = String(label || 'Complete').trim() || 'Complete';
   const suffix = String(detail || '').trim();
   const rightText = cleanRightMessage(rightMessage);
   const rightWidth = Math.max(1, Number(rightMessageWidth) || 24);
 
   return (
-    <Box marginTop={1} flexDirection="row" width="100%">
+    <Box marginTop={marginTop} flexDirection="row" width="100%">
       <Box flexGrow={1} flexShrink={1} overflow="hidden">
         <Text wrap="truncate">
           <Text color={theme.spinnerGlyph}>{TURN_DONE_MARKER} </Text>

package/src/tui/components/UsagePanel.jsx

@@ -12,7 +12,7 @@ const STATUS_SEPARATOR = ' │ ';
 
 function money(value) {
   const n = Number(value);
-  if (!Number.isFinite(n)) return 'n/a';
+  if (!Number.isFinite(n)) return 'N/A';
   if (n === 0) return '$0';
   if (n >= 10) return `$${n.toFixed(0)}`;
   if (n >= 1) return `$${n.toFixed(2)}`;