mixdog 0.9.174 → 1.0.0

package/src/tui/components/status-line/use-statusline-text.mjs

@@ -0,0 +1,319 @@
+/*
+ * components/status-line/use-statusline-text.mjs — the statusline text state:
+ * instant-local snap on identity/theme/route changes plus the debounced async
+ * full render (with boot delay/backoff) and its refresh cadence.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { statuslineFooterIdentityChanged } from '../../statusline-ansi-bridge.mjs';
+import { useSharedTick } from '../../hooks/useSharedTick.mjs';
+import { num, timeMs } from '../../../runtime/shared/statusline/statusline-format.mjs';
+import {
+  STATUSLINE_ACTIVE_REFRESH_MS,
+  STATUSLINE_BOOT_FULL_RETRY_MS,
+  STATUSLINE_REFRESH_MS,
+  STATUSLINE_RENDER_DEBOUNCE_MS,
+  bootFullRenderDelayRemainingMs,
+  canAttemptBootFullRender,
+  hasActiveStatuslineWork,
+  loadStatuslineModule,
+  resetStatuslineModuleLoad,
+  scheduleBootFullRetry,
+  scheduleStatuslineModulePrewarm,
+} from './boot-schedule.mjs';
+import { buildLocalSnapLine, localBootStatusLine, normalizeStatusLine } from './local-line.mjs';
+
+export function useStatusLineText({
+  sessionId,
+  clientHostPid,
+  provider,
+  model,
+  effort,
+  fast,
+  cwd,
+  stats,
+  contextWindow,
+  displayContextWindow,
+  compactBoundaryTokens,
+  autoCompactTokenLimit,
+  rawContextWindow,
+  resizeEpoch,
+  agentRevision,
+  agentWorkers,
+  agentJobs,
+  activeTools,
+  initialLine,
+  themeEpoch,
+}) {
+  const [line, setLine] = useState(() =>
+    normalizeStatusLine(
+      initialLine ||
+        localBootStatusLine({
+          provider,
+          model,
+          effort,
+          fast,
+          stats,
+          contextWindow,
+          displayContextWindow,
+          rawContextWindow,
+          compactBoundaryTokens,
+          autoCompactTokenLimit,
+          agentWorkers,
+          agentJobs,
+          activeTools,
+        })
+    )
+  );
+  const [refreshTick, setRefreshTick] = useState(0);
+  const statuslineArgsRef = useRef(null);
+  const bootFullDoneRef = useRef(false);
+  const mountAtRef = useRef(Date.now());
+  const lineRef = useRef('');
+  const bootFullNextAttemptAtRef = useRef(0);
+  const bootFullRetryBackoffMsRef = useRef(STATUSLINE_BOOT_FULL_RETRY_MS);
+  const renderEffectIdRef = useRef(0);
+  const lastImmediateArgsRef = useRef(null);
+  const themeEpochRef = useRef(themeEpoch);
+  const lastRawFullLineRef = useRef('');
+
+  const statuslineArgs = {
+    sessionId,
+    clientHostPid,
+    provider,
+    model,
+    effort,
+    fast,
+    cwd,
+    stats,
+    contextWindow,
+    displayContextWindow,
+    compactBoundaryTokens,
+    autoCompactTokenLimit,
+    rawContextWindow,
+    agentWorkers,
+    agentJobs,
+    activeTools,
+  };
+  statuslineArgsRef.current = statuslineArgs;
+  lineRef.current = line;
+  // Stable primitive signature for the activeTools object so the render effect
+  // re-runs when the web-search count or start time changes (object identity
+  // would otherwise be a new ref every render and over-fire the effect).
+  const activeToolsSignature = activeTools
+    ? [Number(activeTools.web_search?.count) || 0, Number(activeTools.web_search?.startedAt) || 0].join('|')
+    : '';
+  // Stable primitive signatures so the render effect's dep array doesn't
+  // churn on new array/object identities carrying unchanged content — a new
+  // `agentWorkers`/`agentJobs` array (or `stats` object) reference on every
+  // render was clearing the pending 150ms debounce timer before it could
+  // fire, starving the boot full-render. Only tag|stage per worker/job and
+  // the numeric stats fields actually consumed here are covered.
+  const agentWorkersSignature = Array.isArray(agentWorkers)
+    ? agentWorkers
+        .map(
+          (w) =>
+            `${w?.tag || w?.agent || w?.name || ''}|${w?.stage || w?.status || ''}|${timeMs(w?.startedAt || w?.startTime || w?.createdAt)}`
+        )
+        .join(',')
+    : '';
+  const agentJobsSignature = Array.isArray(agentJobs)
+    ? agentJobs
+        .map(
+          (j) =>
+            `${j?.tag || j?.agent || j?.name || ''}|${j?.status || j?.stage || ''}|${timeMs(j?.startedAt || j?.startTime || j?.createdAt)}`
+        )
+        .join(',')
+    : '';
+  const statsForSignature = stats && typeof stats === 'object' ? stats : {};
+  const statsSignature = [
+    num(statsForSignature.currentContextTokens),
+    num(statsForSignature.currentEstimatedContextTokens),
+    num(statsForSignature.inputTokens),
+    num(statsForSignature.latestInputTokens),
+    num(statsForSignature.promptTokens),
+    num(statsForSignature.turns),
+    num(statsForSignature.contextTokens),
+    String(statsForSignature.currentContextSource || ''),
+  ].join('|');
+  const refreshMs = hasActiveStatuslineWork(line, agentWorkers, agentJobs, activeTools)
+    ? STATUSLINE_ACTIVE_REFRESH_MS
+    : STATUSLINE_REFRESH_MS;
+
+  useEffect(() => {
+    scheduleStatuslineModulePrewarm();
+  }, []);
+
+  // Refresh cadence rides the shared animation tick (no dedicated interval).
+  // The callback bumps refreshTick so the async full-render effect below still
+  // re-fires on schedule; the tick timer stops when nothing is subscribed.
+  useSharedTick(refreshMs, true, () => {
+    setRefreshTick((tick) => (tick + 1) % 1_000_000);
+  });
+
+  useEffect(() => {
+    let alive = true;
+    let bootRetryTimer = null;
+    const effectId = renderEffectIdRef.current + 1;
+    renderEffectIdRef.current = effectId;
+    const isCurrentEffect = () => alive && renderEffectIdRef.current === effectId;
+    const args = statuslineArgsRef.current;
+    const identityChanged = statuslineFooterIdentityChanged({ ...args, agentRevision }, lastImmediateArgsRef.current);
+    // ROUTE identity = the subset that actually changes the async full line's L1
+    // usage/quota segment (provider/model/session/effort/fast). agentRevision,
+    // compactBoundaryTokens, autoCompactTokenLimit, stats-reset AND the context
+    // window fields (contextWindow/displayContextWindow/rawContextWindow) are
+    // NON-ROUTE: the first prompt's API response publishes displayContextWindow
+    // 0→N (engine syncContextDisplayFields), which only moves the ctx% bar —
+    // never the `5H …/7D …` usage windows. Treating it as route wiped the cached
+    // full line and snapped to the usage-less local line for one frame (the
+    // "usage blinks once on first prompt" bug). A real route switch that changes
+    // usage windows always changes provider/model/session anyway. Only a true
+    // route/session switch may wipe the cached full line; non-route churn keeps
+    // the last good full line (identityChanged still snaps, but via the cached
+    // graft path below, so usage survives and the async render refreshes ctx%
+    // within ~150ms). (lastImmediateArgsRef holds these fields, captured at the
+    // end of the previous effect run.)
+    const prevImmediate = lastImmediateArgsRef.current;
+    const routeChanged =
+      !prevImmediate ||
+      prevImmediate.sessionId !== args.sessionId ||
+      prevImmediate.provider !== args.provider ||
+      prevImmediate.model !== args.model ||
+      prevImmediate.effort !== args.effort ||
+      prevImmediate.fast !== args.fast;
+    // A theme switch must re-tone the footer immediately: the stored `line`
+    // holds already-normalized ANSI with the OLD palette, so re-running
+    // normalizeStatusLine on it is a no-op. Force a fresh local rebuild (new
+    // palette) and reset bootFullDone so the next full render re-normalizes.
+    const themeChanged = themeEpochRef.current !== themeEpoch;
+    if (themeChanged) {
+      themeEpochRef.current = themeEpoch;
+    }
+    // Only a real route/session switch invalidates the cached full line (and its
+    // L1 usage segment). On non-route identity churn (agent stage/status, compact
+    // boundary, auto-compact limit, stats reset) KEEP the cache so the usage
+    // segment survives; the async full render scheduled below refreshes any stale
+    // L2 within ~150ms (and every ~250ms while active).
+    if (routeChanged) {
+      lastRawFullLineRef.current = '';
+      bootFullDoneRef.current = false;
+    }
+    const snapLocalNow = themeChanged || bootFullDoneRef.current !== true || identityChanged;
+    if (snapLocalNow) {
+      // Reuse the last good FULL line (with its L1 usage segment) whenever this is
+      // NOT a route switch and a cached full line exists — covers theme re-tone,
+      // agent churn, compact/auto-compact changes and stats reset. We intentionally
+      // do NOT require a matching footer cache key here: it embeds agentRevision
+      // + compact fields, so it differs on exactly the non-route churn we want to
+      // ride through, and requiring equality would fall back to the usage-less
+      // localBootStatusLine and reintroduce the blink. Route switches (routeChanged)
+      // have already wiped the cache above, so they snap local.
+      const localNext = buildLocalSnapLine(args, routeChanged ? '' : lastRawFullLineRef.current);
+      if (localNext) setLine((prev) => (prev === localNext ? prev : localNext));
+    }
+    lastImmediateArgsRef.current = {
+      agentRevision,
+      sessionId: args.sessionId,
+      provider: args.provider,
+      model: args.model,
+      effort: args.effort,
+      fast: args.fast,
+      contextWindow: args.contextWindow,
+      displayContextWindow: args.displayContextWindow,
+      rawContextWindow: args.rawContextWindow,
+      compactBoundaryTokens: args.compactBoundaryTokens,
+      autoCompactTokenLimit: args.autoCompactTokenLimit,
+      stats: args.stats,
+    };
+    // Re-fire this effect after `waitMs` (at least 150ms) via refreshTick.
+    const armBootRetry = (waitMs) => {
+      bootRetryTimer = setTimeout(
+        () => {
+          if (!isCurrentEffect()) return;
+          setRefreshTick((tick) => (tick + 1) % 1_000_000);
+        },
+        Math.max(150, waitMs)
+      );
+      bootRetryTimer.unref?.();
+    };
+    const timer = setTimeout(() => {
+      if (bootFullDoneRef.current !== true) {
+        const bootDelayRemainingMs = bootFullRenderDelayRemainingMs(
+          mountAtRef.current,
+          lineRef.current,
+          args.agentWorkers,
+          args.agentJobs,
+          args.activeTools
+        );
+        if (bootDelayRemainingMs > 0) {
+          // Not eligible yet (boot delay not elapsed). Don't just bail and wait
+          // for the next refreshTick interval (250ms/2000ms) — arm a follow-up
+          // timeout for the REMAINING boot delay so the first full render still
+          // fires on schedule instead of stalling/flickering until the next tick.
+          armBootRetry(bootDelayRemainingMs);
+          return;
+        }
+        if (!canAttemptBootFullRender(bootFullNextAttemptAtRef.current)) {
+          // Backoff window not elapsed yet — arm a follow-up timeout for exactly
+          // the remaining backoff so the retry fires on time instead of waiting
+          // for the next refreshTick interval.
+          armBootRetry(bootFullNextAttemptAtRef.current - Date.now());
+          return;
+        }
+      }
+      loadStatuslineModule()
+        .then((m) => {
+          if (!isCurrentEffect()) return null;
+          return m.renderStatusline(args);
+        })
+        .then((s) => {
+          if (!isCurrentEffect() || s == null) return;
+          lastRawFullLineRef.current = String(s);
+          bootFullDoneRef.current = true;
+          bootFullRetryBackoffMsRef.current = STATUSLINE_BOOT_FULL_RETRY_MS;
+          bootFullNextAttemptAtRef.current = 0;
+          const next = normalizeStatusLine(s);
+          if (next) setLine((prev) => (prev === next ? prev : next));
+        })
+        .catch(() => {
+          if (!isCurrentEffect()) return;
+          if (bootFullDoneRef.current !== true) {
+            scheduleBootFullRetry(bootFullRetryBackoffMsRef, bootFullNextAttemptAtRef);
+            return;
+          }
+          resetStatuslineModuleLoad();
+          // Keep the previous/minimal line. Boot-time gateway/cache races should
+          // never blank the reserved footer and make the statusline flicker.
+        });
+    }, STATUSLINE_RENDER_DEBOUNCE_MS);
+    timer.unref?.();
+    return () => {
+      alive = false;
+      clearTimeout(timer);
+      clearTimeout(bootRetryTimer);
+    };
+  }, [
+    sessionId,
+    clientHostPid,
+    provider,
+    model,
+    effort,
+    fast,
+    cwd,
+    statsSignature,
+    contextWindow,
+    displayContextWindow,
+    compactBoundaryTokens,
+    autoCompactTokenLimit,
+    rawContextWindow,
+    resizeEpoch,
+    agentRevision,
+    agentWorkersSignature,
+    agentJobsSignature,
+    activeToolsSignature,
+    refreshTick,
+    themeEpoch,
+  ]);
+
+  return line;
+}

package/src/tui/components/statusline-module-loader.mjs

@@ -0,0 +1,21 @@
+/*
+ * components/statusline-module-loader.mjs — lazy import of src/ui/statusline.mjs.
+ *
+ * Must stay directly under components/: the specifier is resolved at runtime
+ * relative to this file in source and to src/tui/dist/ in the bundle, and
+ * '../../ui/statusline.mjs' is only correct from both of those depths.
+ */
+// Loaded at RUNTIME (not bundled) so its vendored statusline-lib relative
+// imports resolve from the real src/ui location, not the dist/ bundle dir.
+// esbuild leaves dynamic-import string specifiers alone.
+const STATUSLINE_MODULE = '../../ui/statusline.mjs';
+let statuslineModulePromise = null;
+
+export function loadStatuslineModule() {
+  if (!statuslineModulePromise) statuslineModulePromise = import(STATUSLINE_MODULE);
+  return statuslineModulePromise;
+}
+
+export function resetStatuslineModuleLoad() {
+  statuslineModulePromise = null;
+}

package/src/tui/components/text-entry-layout.mjs

@@ -0,0 +1,104 @@
+/*
+ * components/text-entry-layout.mjs — pure single-line layout helpers for TextEntryPanel.
+ */
+import stringWidth from 'string-width';
+import { caretPosition } from '../input-editing.mjs';
+import { wrappedTextRows } from '../app/text-layout.mjs';
+
+// Collapse newlines to a single visible glyph so multiline pasted input stays a
+// single visual row (the draft itself is unchanged for editing/submit).
+const NEWLINE_GLYPH = '⏎';
+export function flattenForSingleLine(text) {
+  return String(text ?? '').replace(/\n/g, NEWLINE_GLYPH);
+}
+
+// Horizontal viewport over a single (flattened) line. Keeps the caret visible
+// inside `width` cells and returns the visible slice plus the caret column so
+// the content box can be hard-bounded to ONE row: long/multiline pasted input
+// scrolls horizontally instead of wrapping and growing the panel. Offsets are
+// code-unit offsets, which map 1:1 to the flattened string (newline → 1 glyph,
+// mask → 1 char), so selection/cursor offsets carry over unchanged.
+export function windowSingleLine(flat, cursor, width) {
+  const w = Math.max(1, Math.floor(Number(width) || 1));
+  const chars = Array.from(flat);
+  const cells = chars.map((ch) => stringWidth(ch));
+  // Map the code-unit cursor to a char index.
+  let cuIndex = 0;
+  let cursorCharIdx = chars.length;
+  for (let i = 0; i < chars.length; i += 1) {
+    if (cuIndex >= cursor) {
+      cursorCharIdx = i;
+      break;
+    }
+    cuIndex += chars[i].length;
+  }
+  let cursorCell = 0;
+  for (let i = 0; i < cursorCharIdx; i += 1) cursorCell += cells[i];
+  const totalCell = cells.reduce((a, b) => a + b, 0);
+  let startCell = cursorCell > w - 1 ? cursorCell - (w - 1) : 0;
+  startCell = Math.min(startCell, Math.max(0, totalCell - w));
+  startCell = Math.max(0, startCell);
+  let acc = 0;
+  let a = 0;
+  while (a < chars.length && acc + cells[a] <= startCell) {
+    acc += cells[a];
+    a += 1;
+  }
+  const alignedStart = acc;
+  let b = a;
+  let bAcc = 0;
+  while (b < chars.length && bAcc + cells[b] <= w) {
+    bAcc += cells[b];
+    b += 1;
+  }
+  let cuStart = 0;
+  for (let i = 0; i < a; i += 1) cuStart += chars[i].length;
+  let cuEnd = cuStart;
+  for (let i = a; i < b; i += 1) cuEnd += chars[i].length;
+  return {
+    text: chars.slice(a, b).join(''),
+    cuStart,
+    cuEnd,
+    caretCol: Math.max(0, cursorCell - alignedStart),
+  };
+}
+
+// Collapse any whitespace/newlines so a hint is always a single visual line.
+export function singleLine(text) {
+  return String(text ?? '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+// Cursor-anchor callback for the text box node: patched Ink calls it during
+// render to park the hardware cursor at the caret's (row, col) in the box.
+export function createTextEntryCursorAnchor({
+  cursorEnabledRef,
+  draftRef,
+  contentWidthRef,
+  contentCells,
+  mask,
+  multiline,
+  maxContentRows,
+  promptLabel,
+}) {
+  return (yogaNode) => {
+    if (!cursorEnabledRef.current) return null;
+    const d = draftRef.current;
+    const w = Math.max(1, yogaNode?.getComputedWidth?.() ?? contentCells);
+    contentWidthRef.current = w;
+    const visible = mask ? d.value.replace(/[^\n]/g, '*') : d.value;
+    if (multiline) {
+      const trailing = d.cursor >= d.value.length;
+      const totalRows = wrappedTextRows(`${visible}${trailing ? ' ' : ''}`, w);
+      const visibleRows = Math.min(totalRows, Math.max(1, maxContentRows));
+      const caret = caretPosition(visible, d.cursor, w, trailing ? true : undefined);
+      const scrollRow =
+        totalRows > visibleRows ? Math.min(Math.max(0, caret.row - visibleRows + 1), totalRows - visibleRows) : 0;
+      return { row: Math.max(0, caret.row - scrollRow), col: caret.col };
+    }
+    const flat = flattenForSingleLine(visible);
+    const win = windowSingleLine(flat, d.cursor, w);
+    return { row: 0, col: stringWidth(String(promptLabel || '')) + win.caretCol };
+  };
+}

package/src/tui/components/text-entry-value.jsx

@@ -0,0 +1,47 @@
+/*
+ * components/text-entry-value.jsx — the visible (windowed, selection-highlighted)
+ * value of a TextEntryPanel draft, plus the content height it occupies.
+ */
+import { selectionRange, caretPosition } from '../input-editing.mjs';
+import { sliceVisualRowWindow, wrappedTextRows } from '../app/text-layout.mjs';
+import { flattenForSingleLine, windowSingleLine } from './text-entry-layout.mjs';
+import { renderSelectedText } from './prompt-input/selected-text.jsx';
+
+export function renderTextEntryValue({ draft, mask, multiline, contentCells, maxContentRows }) {
+  const visibleValue = mask ? draft.value.replace(/[^\n]/g, '*') : draft.value;
+  let renderedValue;
+  let contentHeight = 1;
+  if (multiline) {
+    const trailingCaret = draft.cursor === draft.value.length;
+    const layoutText = `${visibleValue}${trailingCaret ? ' ' : ''}`;
+    const totalRows = wrappedTextRows(layoutText, contentCells);
+    const visibleRows = Math.min(totalRows, Math.max(1, maxContentRows));
+    contentHeight = visibleRows;
+    const caret = caretPosition(visibleValue, draft.cursor, contentCells, trailingCaret ? true : undefined);
+    const scrollRow =
+      totalRows > visibleRows ? Math.min(Math.max(0, caret.row - visibleRows + 1), totalRows - visibleRows) : 0;
+    const window = sliceVisualRowWindow(visibleValue, contentCells, scrollRow, visibleRows);
+    const windowSelection = (() => {
+      const range = selectionRange(draft);
+      if (!range) return null;
+      const start = Math.max(window.sliceStart, Math.min(window.sliceEnd, range.start)) - window.sliceStart;
+      const end = Math.max(window.sliceStart, Math.min(window.sliceEnd, range.end)) - window.sliceStart;
+      return end > start ? { start, end } : null;
+    })();
+    const sliceTrailing = trailingCaret && draft.cursor >= window.sliceEnd;
+    renderedValue = renderSelectedText(window.slice, windowSelection, sliceTrailing);
+  } else {
+    const flatValue = flattenForSingleLine(visibleValue);
+    const win = windowSingleLine(flatValue, draft.cursor, contentCells);
+    const windowSelection = (() => {
+      const range = selectionRange(draft);
+      if (!range) return null;
+      const start = Math.max(win.cuStart, Math.min(win.cuEnd, range.start)) - win.cuStart;
+      const end = Math.max(win.cuStart, Math.min(win.cuEnd, range.end)) - win.cuStart;
+      return end > start ? { start, end } : null;
+    })();
+    const trailingCaret = draft.cursor === draft.value.length && win.cuEnd >= flatValue.length;
+    renderedValue = renderSelectedText(win.text, windowSelection, trailingCaret);
+  }
+  return { renderedValue, contentHeight };
+}

package/src/tui/components/tool-execution/aggregate-card.jsx

@@ -0,0 +1,141 @@
+/*
+ * components/tool-execution/aggregate-card.jsx — the grouped (aggregate) tool card.
+ */
+import { Box, Text } from 'ink';
+import stringWidth from 'string-width';
+import { theme, TURN_MARKER } from '../../theme.mjs';
+import { BULLET_OPERATOR } from '../../figures.mjs';
+import { formatAggregateHeader } from '../../../runtime/shared/tool-surface.mjs';
+import { safeInlineText, truncateToWidth, resultTerminalStatus } from './text-format.mjs';
+import { toolStatusColor } from './surface-detail.mjs';
+import { ResultBody } from './ResultBody.jsx';
+import { aggregateRawResultForDisplay } from '../../session/tool-result-status.mjs';
+
+export function renderAggregateToolCard(card) {
+  const {
+    args,
+    isError,
+    expanded,
+    columns,
+    attached,
+    rowWidth,
+    groupCount,
+    rt,
+    rawRt,
+    pending,
+    blinkOn,
+    headerPending,
+    hasResult,
+    hasRawResult,
+    failedCount,
+    callFailedCount,
+    exitFailedCount,
+    partialMutation,
+    displayCategories,
+    displayDoneCategories,
+  } = card;
+  // Pending aggregate headers omit counts so intermediate tool batches do not
+  // 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 = safeInlineText(
+    formatAggregateHeader((headerPending ? displayCategories : displayDoneCategories) || {}, {
+      pending: headerPending,
+      order: headerOrder,
+    })
+  );
+  // The aggregate card reserves EXACTLY ONE detail row when it is not
+  // expanded-with-raw (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); ResultBody trims it to the column width.
+  const detailText = hasResult ? safeInlineText(rt) : '';
+
+  // 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.
+  let aggregateTerminalStatus = 'running';
+  if (!pending) {
+    aggregateTerminalStatus = resultTerminalStatus(rt);
+    if (!aggregateTerminalStatus) {
+      aggregateTerminalStatus = isError || failedCount > 0 ? 'failed' : 'completed';
+    }
+  }
+  const dotColor = toolStatusColor({
+    pending,
+    groupCount,
+    callFailedCount,
+    exitFailedCount,
+    terminalStatus: aggregateTerminalStatus,
+    partialMutation,
+  });
+  const dotText = pending && !blinkOn ? ' ' : TURN_MARKER;
+  const gutter = 2;
+  const showHeaderExpandHint = hasRawResult;
+  const hintLabel = `ctrl+o ${expanded ? 'collapse' : 'expand'}`;
+  const hintText = ` ${BULLET_OPERATOR} ${hintLabel}`;
+  // 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 = showHeaderExpandHint ? hintText : '';
+  const trailingColor = theme.subtle;
+  const clippedHeader = stringWidth(headerText) > avail ? truncateToWidth(headerText, avail) : headerText;
+  // 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
+  // lands on completion — that late row push is the "line-jump" 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;
+  // 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.
+  // The placeholder tracks `pending` (real completion), NOT headerPending:
+  // the header verb stays active until the block seals, but the detail row
+  // must not keep saying "Running" after every call already resolved.
+  const pendingPlaceholder = pending ? 'Running' : 'Finished';
+  const detailLines = showRawAggregate ? [] : [detailText || pendingPlaceholder];
+  const aggregateDetailColor = isPlaceholderDetail ? theme.subtle : theme.text;
+  return (
+    <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>
+        <Text wrap="truncate">
+          <Text bold color={theme.text}>
+            {clippedHeader}
+          </Text>
+          {trailingText ? <Text color={trailingColor}>{trailingText}</Text> : null}
+        </Text>
+      </Box>
+      <ResultBody
+        lines={detailLines}
+        rawText={showRawAggregate ? aggregateRawResultForDisplay(rawRt) : ''}
+        columns={columns}
+        color={aggregateDetailColor}
+        raw={showRawAggregate}
+      />
+    </Box>
+  );
+}

package/src/tui/components/tool-execution/pending-placeholder.jsx

@@ -0,0 +1,24 @@
+/*
+ * components/tool-execution/pending-placeholder.jsx — blank card reserved for a
+ * freshly started tool still inside its pending-show delay.
+ */
+import { Box, Text } from 'ink';
+import { formatToolSurface } from '../../../runtime/shared/tool-surface.mjs';
+import { SKILL_SURFACE_NAMES, isAgentTool } from './surface-detail.mjs';
+
+export function renderPendingPlaceholder(card) {
+  const { name, args, aggregate, attached, rowWidth } = card;
+  // 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 AND agent surfaces collapse to a single header row when collapsed
+  // (see estimateTranscriptItemRows); reserve one row for both.
+  const placeholderSingleRow =
+    !aggregate && (SKILL_SURFACE_NAMES.has(placeholderNormalizedName) || isAgentTool(placeholderNormalizedName));
+  return (
+    <Box flexDirection="column" marginTop={attached ? 0 : 1} width={rowWidth} overflow="hidden">
+      <Text> </Text>
+      {placeholderSingleRow ? null : <Text> </Text>}
+    </Box>
+  );
+}