@golba98/codexa 1.0.3 → 1.0.5

package/src/ui/{timelineMeasure.ts → timeline/timelineMeasure.ts}

@@ -4,17 +4,17 @@ import type {
   RunProgressBlock,
   RunResponseSegment,
   RunToolActivity,
-} from "../session/types.js";
-import * as renderDebug from "../core/perf/renderDebug.js";
-import { getAssistantContent, getResponseSegmentText, getRunPlanText } from "../session/types.js";
-import { normalizeCommand, getFriendlyActionLabel } from "./commandNormalize.js";
-import { formatTerminalAnswerInline } from "./terminalAnswerFormat.js";
-import { RUN_OUTPUT_TRUNCATION_NOTICE } from "../session/chatLifecycle.js";
-import { sanitizeTerminalLines, sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
-import { clampVisualText, transcriptContentIndent } from "./layout.js";
-import type { Segment } from "./Markdown.js";
-import { classifyOutput, formatForBox, normalizeOutput, sanitizeOutput, sanitizeStreamChunk } from "./outputPipeline.js";
-import { maybeRenderDiff, type DiffRenderLineType } from "./diffRenderer.js";
+} from "../../session/types.js";
+import * as renderDebug from "../../core/perf/renderDebug.js";
+import { getAssistantContent, getResponseSegmentText, getRunPlanText } from "../../session/types.js";
+import { normalizeCommand, getFriendlyActionLabel } from "../input/commandNormalize.js";
+import { formatTerminalAnswerInline } from "../render/terminalAnswerFormat.js";
+import { RUN_OUTPUT_TRUNCATION_NOTICE } from "../../session/chatLifecycle.js";
+import { sanitizeTerminalLines, sanitizeTerminalOutput } from "../../core/terminal/terminalSanitize.js";
+import { clampVisualText, transcriptContentIndent } from "../layout.js";
+import type { Segment } from "../render/Markdown.js";
+import { classifyOutput, formatForBox, normalizeOutput, sanitizeOutput, sanitizeStreamChunk } from "../render/outputPipeline.js";
+import { maybeRenderDiff, type DiffRenderLineType } from "../render/diffRenderer.js";
 import {
   formatProgressBlockBodyLines,
   getProgressUpdateCount,
@@ -22,10 +22,10 @@ import {
   type VisibleProgressBlock,
 } from "./progressEntries.js";
 import { selectVisibleRunActivity } from "./runActivityView.js";
-import { getTextUnits, getTextWidth, wrapPlainText, wrapCommandText, splitTextAtColumn } from "./textLayout.js";
+import { getTextUnits, getTextWidth, wrapPlainText, wrapCommandText, splitTextAtColumn } from "../render/textLayout.js";
 import type { RenderTimelineItem } from "./Timeline.js";
-import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
-import { selectLogoVariant, LOGO_LARGE_MIN_COLS } from "./logoVariants.js";
+import { normalizePlanReviewMarkdown } from "../../core/workspace/planStorage.js";
+import { LOGO_COMPACT, LOGO_COMPACT_MIN_COLS, LOGO_LARGE_MIN_COLS, selectLogoVariant } from "../render/logoVariants.js";
 
 // ─── Exported types ───────────────────────────────────────────────────────────
 
@@ -172,6 +172,37 @@ function padSpansToWidth(spans: TimelineRowSpan[], width: number): TimelineRowSp
   return next;
 }
 
+/**
+ * Truncates a span list to at most `width` display columns, cutting the
+ * overflowing span on a grapheme/display-width boundary. Used as a safety net so
+ * a too-wide content row can never push a card border past its declared width.
+ */
+function clampSpansToWidth(spans: TimelineRowSpan[], width: number): TimelineRowSpan[] {
+  const safeWidth = Math.max(0, width);
+  const result: TimelineRowSpan[] = [];
+  let used = 0;
+  for (const span of spans) {
+    if (used >= safeWidth) break;
+    const spanWidth = getTextWidth(span.text);
+    if (used + spanWidth <= safeWidth) {
+      result.push({ ...span });
+      used += spanWidth;
+      continue;
+    }
+    const fitted = splitTextAtColumn(span.text, safeWidth - used).before;
+    if (fitted) {
+      result.push(cloneSpan(span, fitted));
+    }
+    break;
+  }
+  return result;
+}
+
+/** Clamp a row to `width` then pad it back out so it occupies exactly `width`. */
+function fitSpansToWidth(spans: TimelineRowSpan[], width: number): TimelineRowSpan[] {
+  return padSpansToWidth(clampSpansToWidth(spans, width), width);
+}
+
 const ROW_CONTENT_CACHE_LIMIT = 2500;
 const _rowContentCache = new Map<string, TimelineRow>();
 
@@ -432,14 +463,14 @@ function buildDashCardRows(params: {
     return { ...span, tone: borderTone };
   });
 
-  const rows: TimelineRow[] = [createRow(`${params.keyPrefix}-top`, topRow, width)];
+  const rows: TimelineRow[] = [createRow(`${params.keyPrefix}-top`, fitSpansToWidth(topRow, width), width)];
 
   params.contentRows.forEach((row, index) => {
     rows.push(createRow(
       `${params.keyPrefix}-content-${index}`,
       [
         createSpan("│ ", borderTone),
-        ...padSpansToWidth(row, contentWidth),
+        ...fitSpansToWidth(row, contentWidth),
         createSpan(" │", borderTone),
       ],
       width,
@@ -486,7 +517,7 @@ function buildPanelRows(params: {
       `${params.keyPrefix}-content-${index}`,
       [
         createSpan("│ ", "borderActive"),
-        ...padSpansToWidth(row, contentWidth),
+        ...fitSpansToWidth(row, contentWidth),
         createSpan(" │", "borderActive"),
       ],
       width,
@@ -1537,18 +1568,19 @@ export function buildStandaloneEventRows(item: Extract<RenderTimelineItem, { typ
   return rows;
 }
 
-export function buildIntroRows(item: Extract<RenderTimelineItem, { type: "intro" }>, width: number): TimelineRow[] {
+export function buildIntroRows(item: Extract<RenderTimelineItem, { type: "intro" }>, width: number): TimelineRow[] {
   const rows: TimelineRow[] = [];
   const { intro } = item;
   const safeWidth = Math.max(10, width);
   const startupHeaderMode = intro.startupHeaderMode
-    ?? (intro.layoutMode === "full" ? "large" : "compact");
-  if (startupHeaderMode === "tiny") {
-    const messageRows = [
-      "Codexa",
-      "Terminal is too small for the startup view.",
-      "Resize the terminal to continue.",
-    ];
+    ?? (intro.layoutMode === "expanded" ? "large" : "compact");
+  const workspaceName = getWorkspaceDisplayName(intro.workspaceLabel);
+  if (startupHeaderMode === "tiny") {
+    const messageRows = [
+      `Codexa v${intro.version}`,
+      workspaceName ? `Workspace: ${workspaceName}` : null,
+      intro.providerLabel ? `Provider: ${intro.providerLabel}` : `Auth: ${intro.authLabel}`,
+    ].filter((line): line is string => Boolean(line));
     messageRows.forEach((line, index) => {
       rows.push(createRow(
         `${item.key}-resize-${index}`,
@@ -1559,16 +1591,20 @@ export function buildIntroRows(item: Extract<RenderTimelineItem, { type: "intro"
     return rows;
   }
 
-  const logoRows = startupHeaderMode === "large"
-    ? selectLogoVariant(safeWidth)
-    : selectLogoVariant(0); // text-only fallback for compact mode
-  const effectiveLogoRows = logoRows.length > 0 ? logoRows : ["CODEXA"];
+  // Compact startup mode deliberately uses the one-line mark even when the
+  // terminal is wide: its row budget is what made the full logo unsafe.
+  const logoRows = startupHeaderMode === "large"
+    ? selectLogoVariant(safeWidth)
+    : safeWidth >= LOGO_COMPACT_MIN_COLS ? LOGO_COMPACT : [];
+  const effectiveLogoRows = logoRows.length > 0 ? logoRows : ["CODEXA"];
+  if (startupHeaderMode === "large") {
+    rows.push(createBlankRow(`${item.key}-top-gap`, safeWidth));
+  }
   const logoWidth = effectiveLogoRows.reduce((maxWidth, line) => Math.max(maxWidth, getTextWidth(line)), 0);
-  const workspaceName = getWorkspaceDisplayName(intro.workspaceLabel);
-  const metaLines = [
+  const metaLines = [
     `Codexa v${intro.version}`,
-    `Auth: ${intro.authLabel}`,
     workspaceName ? `Workspace: ${workspaceName}` : null,
+    intro.providerLabel ? `Provider: ${intro.providerLabel}` : `Auth: ${intro.authLabel}`,
   ].filter((line): line is string => Boolean(line));
   const gapWidth = 2;
   const widestMetaLine = metaLines.reduce((maxWidth, line) => Math.max(maxWidth, getTextWidth(line)), 0);
@@ -1591,6 +1627,8 @@ export function buildIntroRows(item: Extract<RenderTimelineItem, { type: "intro"
       if (effectiveLogoRows.length === 6) {
         if (rowIndex === 2 || rowIndex === 3) logoTone = "logoSecondary";
         else if (rowIndex === 4 || rowIndex === 5) logoTone = "logoShadow";
+      } else if (effectiveLogoRows === LOGO_COMPACT) {
+        logoTone = "accent";
       }
       // No bold on logo spans — bold on block/box-drawing chars causes spacing artifacts.
       const spans = [
@@ -1614,6 +1652,8 @@ export function buildIntroRows(item: Extract<RenderTimelineItem, { type: "intro"
       if (effectiveLogoRows.length === 6) {
         if (index === 2 || index === 3) logoTone = "logoSecondary";
         else if (index === 4 || index === 5) logoTone = "logoShadow";
+      } else if (effectiveLogoRows === LOGO_COMPACT) {
+        logoTone = "accent";
       }
       rows.push(createRow(
         `${item.key}-logo-${index}`,
@@ -1694,7 +1734,7 @@ function applyTurnOpacity(rows: TimelineRow[], opacity: "active" | "recent" | "d
 // ─── Stream event types ───────────────────────────────────────────────────────
 
 export type StreamEvent =
-  | { kind: "thinking"; streamSeq: number; block: RunProgressBlock; isActive: boolean }
+  | { kind: "thinking"; streamSeq: number; block: RunProgressBlock }
   | { kind: "response"; streamSeq: number; segment: RunResponseSegment }
   | { kind: "action"; streamSeq: number; tool: RunToolActivity }
   | { kind: "actionSummary"; streamSeq: number; id: string; label: string; count: number }
@@ -1711,8 +1751,24 @@ function getCompactableActionLabel(event: StreamEvent): string | null {
   return label === "Read file" || label === "List files" ? label : null;
 }
 
-function compactActionBursts(events: StreamEvent[], verbose: boolean): StreamEvent[] {
-  if (verbose) return events;
+/**
+ * Collapse bursts of same-label completed action cards into a single summary
+ * line. This is a *height-reducing* transform, so it must only run for a
+ * FINISHED turn: applying it while the run is still live shrinks the turn's
+ * total height mid-stream, and the bottom-anchored viewport then re-reveals
+ * earlier (already-scrolled-off) content — the "old states come back" glitch.
+ *
+ * Callers pass `finalized = run.status !== "running"`. We deliberately key off
+ * `run.status` rather than the render phase: `resolveTurnRunPhase` reports
+ * "final" during the ANSWER_VISIBLE window while the run is still running, so a
+ * phase-based gate would compact during that intermediate, still-active frame.
+ */
+export function compactActionBursts(
+  events: StreamEvent[],
+  verbose: boolean,
+  finalized: boolean,
+): StreamEvent[] {
+  if (verbose || !finalized) return events;
 
   const compacted: StreamEvent[] = [];
   for (let index = 0; index < events.length;) {
@@ -1774,13 +1830,11 @@ function buildCodexThinkingRows(params: {
   keyPrefix: string;
   width: number;
   event: Extract<StreamEvent, { kind: "thinking" }>;
-  isLive: boolean;
   verbose: boolean;
 }): TimelineRow[] {
   renderDebug.traceRender("ThinkingBlock", params.event.block.status, {
     keyPrefix: params.keyPrefix,
     streamSeq: params.event.streamSeq,
-    isLive: params.isLive,
     textLength: params.event.block.text.length,
   });
 
@@ -1794,8 +1848,6 @@ function buildCodexThinkingRows(params: {
     textCacheToken(block.text),
     params.width,
     params.verbose,
-    params.isLive,
-    params.event.isActive,
   ]);
 
   return getCachedStreamingBlockRows(cacheKey, () => {
@@ -1816,10 +1868,6 @@ function buildCodexThinkingRows(params: {
       ]);
     }
 
-    if (params.isLive && params.event.isActive) {
-      contentRows.push([createSpan("▌", "accent")]);
-    }
-
     return buildCodexPlainRows(params.keyPrefix, params.width, contentRows);
   });
 }
@@ -1849,10 +1897,15 @@ function getActionDisplayDescriptor(params: {
   isLive: boolean;
   borderTone: TimelineTone;
 }): ActionDisplayDescriptor {
-  const command = normalizeCommand(params.tool.command);
+  // Strip ANSI/control sequences before measuring or wrapping: string-width only
+  // collapses *complete* escape sequences, so leftover bytes would otherwise be
+  // counted (and wrapped) character-by-character and corrupt the card width.
+  const command = normalizeCommand(sanitizeTerminalOutput(params.tool.command));
   const label = getFriendlyActionLabel(command);
+  // Bare label (no leading gap) — the head-row builder right-aligns it and owns
+  // the spacing, so the gap can never get baked into a width calculation.
   const duration = params.tool.completedAt != null
-    ? `  ${formatDuration(params.tool.completedAt - params.tool.startedAt)}`
+    ? formatDuration(params.tool.completedAt - params.tool.startedAt)
     : "";
   const summary = params.verbose ? params.tool.summary ?? "" : "";
   const showLiveCursor = params.isLive && params.tool.status === "running";
@@ -1879,7 +1932,7 @@ function getActionDisplayDescriptor(params: {
   return descriptor;
 }
 
-function buildPlainActionDebugRows(params: {
+function buildPlainActionDebugRows(params: {
   keyPrefix: string;
   width: number;
   descriptor: ActionDisplayDescriptor;
@@ -1887,7 +1940,7 @@ function buildPlainActionDebugRows(params: {
   const statusText = params.descriptor.label
     ? `${params.descriptor.label}: ${params.descriptor.command}`
     : params.descriptor.command;
-  const suffix = params.descriptor.duration ? params.descriptor.duration : "";
+  const suffix = params.descriptor.duration ? `  ${params.descriptor.duration}` : "";
   const text = clampVisualText(`${params.descriptor.icon} ${statusText}${suffix}`, Math.max(1, params.width - 1));
   renderDebug.traceEvent("action", "plainActionRow", {
     actionId: params.descriptor.id,
@@ -1903,10 +1956,56 @@ function buildPlainActionDebugRows(params: {
       ],
       params.width,
     ),
-  ];
-}
-
-export function buildActionEventRows(params: {
+  ];
+}
+
+function compactActionText(descriptor: ActionDisplayDescriptor): string {
+  const command = descriptor.command.replace(/^([a-z][a-z0-9_]*):\s+/i, "$1 ");
+  return descriptor.label && command === descriptor.command
+    ? `${descriptor.label} ${command}`
+    : command;
+}
+
+function buildCompactActionRows(params: {
+  keyPrefix: string;
+  width: number;
+  descriptor: ActionDisplayDescriptor;
+}): TimelineRow[] {
+  const durationSuffix = params.descriptor.duration ? `  ${params.descriptor.duration}` : "";
+  const liveSuffix = params.descriptor.showLiveCursor ? "  ▌" : "";
+  const availableWidth = Math.max(1, params.width - getTextWidth(params.descriptor.icon) - 1 - getTextWidth(durationSuffix) - getTextWidth(liveSuffix));
+  const text = clampVisualText(compactActionText(params.descriptor), availableWidth);
+  const rows: TimelineRow[] = [
+    createRow(
+      `${params.keyPrefix}-plain`,
+      [
+        createSpan(`${params.descriptor.icon} `, params.descriptor.iconTone),
+        createSpan(text || " ", "text"),
+        ...(durationSuffix ? [createSpan(durationSuffix, "dim")] : []),
+        ...(liveSuffix ? [createSpan(liveSuffix, "accent")] : []),
+      ],
+      params.width,
+    ),
+  ];
+
+  if (params.descriptor.verbose) {
+    const detail = params.descriptor.showLiveCursor
+      ? "running"
+      : params.descriptor.summary.trim() || "completed";
+    rows.push(createRow(
+      `${params.keyPrefix}-detail`,
+      [
+        createSpan("  "),
+        createSpan(clampVisualText(detail, Math.max(1, params.width - 2)), "muted"),
+      ],
+      params.width,
+    ));
+  }
+
+  return rows;
+}
+
+export function buildActionEventRows(params: {
   keyPrefix: string;
   width: number;
   event: Extract<StreamEvent, { kind: "action" }>;
@@ -1977,58 +2076,11 @@ export function buildActionEventRows(params: {
     });
   }
 
-  const buildActionRows = () => {
-    const contentWidth = Math.max(1, params.width - 4);
-    const commandWidth = Math.max(1, contentWidth - 2);
-    const detailText = descriptor.showLiveCursor
-      ? "▌"
-      : descriptor.summary.trim()
-        ? descriptor.summary
-        : " ";
-    const contentRows: TimelineRowSpan[][] = [];
-
-    if (descriptor.label) {
-      contentRows.push([
-        createSpan(`${descriptor.icon} `, descriptor.iconTone),
-        createSpan(descriptor.label, "text"),
-        ...(descriptor.duration ? [createSpan(descriptor.duration, "dim")] : []),
-      ]);
-      wrapPlainText(descriptor.command, commandWidth).forEach((row) => {
-        contentRows.push([
-          createSpan("  "),
-          createSpan(row || " ", "muted"),
-        ]);
-      });
-    } else {
-      const headRows = wrapPlainText(descriptor.command, commandWidth);
-      headRows.forEach((row, rowIndex) => {
-        contentRows.push([
-          createSpan(rowIndex === 0 ? `${descriptor.icon} ` : "  ", rowIndex === 0 ? descriptor.iconTone : undefined),
-          createSpan(row || " ", "text"),
-          ...(rowIndex === 0 && descriptor.duration ? [createSpan(descriptor.duration, "dim")] : []),
-        ]);
-      });
-    }
-
-    if (!descriptor.label) {
-      contentRows.push([
-        createSpan("  "),
-        createSpan(" ", "muted"),
-      ]);
-    }
-    contentRows.push([
-      createSpan("  "),
-      createSpan(detailText, descriptor.showLiveCursor ? "accent" : "muted"),
-    ]);
-
-    return buildDashCardRows({
-      keyPrefix: params.keyPrefix,
-      width: params.width,
-      title: "action",
-      borderTone: descriptor.borderTone,
-      contentRows: contentRows.length > 0 ? contentRows : [[createSpan(" ")]],
-    });
-  };
+  const buildActionRows = () => buildCompactActionRows({
+    keyPrefix: params.keyPrefix,
+    width: params.width,
+    descriptor,
+  });
 
   if (isCompleted) {
     const rows = buildActionRows();
@@ -2178,13 +2230,11 @@ function buildApprovedPlanRows(params: {
 
 function buildUnifiedStreamRows(item: Extract<RenderTimelineItem, { type: "turn" }>, width: number, options: { verbose?: boolean; workspaceRoot?: string | null }): TimelineRow[] {
   const run = item.item.run!;
-  const assistant = item.item.assistant;
   const streaming = item.renderState.runPhase === "streaming";
-  const dim = item.renderState.opacity !== "active";
-  const borderTone = dim ? "borderSubtle" : streaming ? "borderActive" : "borderSubtle";
   const actionBorderTone = item.renderState.opacity === "dim" ? "borderSubtle" : "borderActive";
   const verbose = options.verbose ?? false;
-  const events = compactActionBursts(collectStreamEvents(item, streaming), verbose);
+  const finalized = run.status !== "running";
+  const events = compactActionBursts(collectStreamEvents(item), verbose, finalized);
 
   const rows: TimelineRow[] = [];
 
@@ -2193,7 +2243,9 @@ function buildUnifiedStreamRows(item: Extract<RenderTimelineItem, { type: "turn"
     const isLive = run.status === "running" && isLastEvent; // The cursor is on the last event
 
     if (index > 0) {
-      rows.push(createBlankRow(`${item.key}-stream-gap-${index}`, width));
+      // Key the gap by the stable creation-order streamSeq, not the array
+      // index, so gaps don't remount/reorder when the event set changes.
+      rows.push(createBlankRow(`${item.key}-stream-gap-${event.streamSeq}`, width));
     }
 
     if (event.kind === "thinking") {
@@ -2201,7 +2253,6 @@ function buildUnifiedStreamRows(item: Extract<RenderTimelineItem, { type: "turn"
         keyPrefix: `${item.key}-codex-thinking-${event.streamSeq}`,
         width,
         event,
-        isLive,
         verbose,
       }));
     } else if (event.kind === "action") {
@@ -2242,7 +2293,7 @@ function buildUnifiedStreamRows(item: Extract<RenderTimelineItem, { type: "turn"
     }
   });
 
-  if (!streaming && run.status !== "running") {
+  if (!streaming && finalized) {
     if (run.status === "canceled") {
       rows.push(createBlankRow(`${item.key}-cancel-gap`, width));
       rows.push(...buildCodexPlainRows(
@@ -2281,12 +2332,10 @@ function buildUnifiedStreamRows(item: Extract<RenderTimelineItem, { type: "turn"
   return rows;
 }
 
-function collectStreamEvents(
-  item: Extract<RenderTimelineItem, { type: "turn" }>,
-  streaming: boolean,
-): StreamEvent[] {
+function collectStreamEvents(item: Extract<RenderTimelineItem, { type: "turn" }>): StreamEvent[] {
   const run = item.item.run!;
   const assistant = item.item.assistant;
+  const streaming = item.renderState.runPhase === "streaming";
   const blocksById = new Map<string, RunProgressBlock>();
   for (const entry of run.progressEntries ?? []) {
     for (const block of entry.blocks) blocksById.set(block.id, block);
@@ -2298,14 +2347,23 @@ function collectStreamEvents(
   const sortedItems = (run.streamItems ?? []).slice().sort((a, b) => a.streamSeq - b.streamSeq);
   for (const it of sortedItems) {
     if (it.kind === "thinking") {
-      const block = blocksById.get(it.refId);
-      if (block && block.text.trim().length > 0 && !(run.status === "running" && block.status === "active")) {
-        events.push({
-          kind: "thinking",
-          streamSeq: it.streamSeq,
-          block,
-          isActive: run.status === "running" && block.status === "active",
-        });
+      // Active-turn topology stability: while the run is live we never surface
+      // reasoning blocks. A thinking block is assigned its streamSeq early (when
+      // its reasoning first streams) but only *completes* later — revealing it
+      // mid-stream slots it in at that early streamSeq, ABOVE answer/action
+      // blocks that have already streamed at higher streamSeqs. That late
+      // insert-above is what reorders the live turn. Defer all reasoning to
+      // finalize, where the full streamSeq order (reasoning included) reflows
+      // atomically. (Height grows when it appears — never shrinks mid-stream.)
+      if (run.status !== "running") {
+        const block = blocksById.get(it.refId);
+        if (block && block.text.trim().length > 0) {
+          events.push({
+            kind: "thinking",
+            streamSeq: it.streamSeq,
+            block,
+          });
+        }
       }
     } else if (it.kind === "action") {
       const tool = toolsById.get(it.refId);
@@ -2336,13 +2394,15 @@ function collectStreamEvents(
       if (!VISIBLE_THINKING_SOURCES.has(entry.source)) continue;
       for (const block of entry.blocks) {
         if (!block.text.trim()) continue;
-        if (run.status === "running" && block.status === "active") continue;
+        // Same active-turn topology rule as the streamItems path: defer all
+        // reasoning while the run is live so it cannot insert above already
+        // streamed answer/action blocks. Reveal only once finalized.
+        if (run.status === "running") continue;
         legacySeq += 1;
         events.push({
           kind: "thinking",
           streamSeq: legacySeq,
           block,
-          isActive: run.status === "running" && block.status === "active",
         });
       }
     }
@@ -2477,8 +2537,10 @@ function buildStableIntroRows(item: Extract<RenderTimelineItem, { type: "intro"
     innerWidth,
     item.intro.version,
     item.intro.layoutMode,
+    item.intro.startupHeaderMode ?? "",
     item.intro.authLabel,
     textCacheToken(item.intro.workspaceLabel),
+    item.intro.providerLabel ?? "",
   ]);
   return getCachedFrozenRows(cacheKey, () => buildIntroRows(item, innerWidth));
 }
@@ -2552,10 +2614,9 @@ function buildStableActiveTurnGroups(
   }
 
   const streaming = item.renderState.runPhase === "streaming";
-  const dim = item.renderState.opacity !== "active";
-  const borderTone = dim ? "borderSubtle" : streaming ? "borderActive" : "borderSubtle";
   const actionBorderTone = item.renderState.opacity === "dim" ? "borderSubtle" : "borderActive";
-  const events = compactActionBursts(collectStreamEvents(item, streaming), verbose);
+  const finalized = run.status !== "running";
+  const events = compactActionBursts(collectStreamEvents(item), verbose, finalized);
   let orderedRows = [...getCachedFrozenRows(rowCacheKey([
     "stable-active-user",
     item.key,
@@ -2571,7 +2632,9 @@ function buildStableActiveTurnGroups(
     const isLastEvent = index === events.length - 1;
 
     if (index > 0) {
-      targetRows.push(createBlankRow(`${item.key}-stream-gap-${index}`, innerWidth));
+      // Stable creation-order key (streamSeq), not array index — matches the
+      // native path and avoids index-based remount when events change.
+      targetRows.push(createBlankRow(`${item.key}-stream-gap-${event.streamSeq}`, innerWidth));
     }
 
     if (event.kind === "thinking") {
@@ -2579,7 +2642,6 @@ function buildStableActiveTurnGroups(
         keyPrefix: `${item.key}-codex-thinking-${event.streamSeq}`,
         width: innerWidth,
         event,
-        isLive: liveEvent,
         verbose,
       });
       targetRows.push(...(liveEvent ? build() : getCachedFrozenRows(rowCacheKey([
@@ -2708,7 +2770,6 @@ function buildNativeStreamEventRows(params: {
       keyPrefix: `${item.key}-codex-thinking-${event.streamSeq}`,
       width: innerWidth,
       event,
-      isLive: !params.forceStable && isNativeLiveStreamEvent(event, run),
       verbose,
     }));
   } else if (event.kind === "action") {
@@ -2795,8 +2856,9 @@ function appendNativeTurnParts(
   if (!run) return;
 
   const events = compactActionBursts(
-    collectStreamEvents(item, item.renderState.runPhase === "streaming"),
+    collectStreamEvents(item),
     verbose,
+    run.status !== "running",
   );
 
   events.forEach((event, eventIndex) => {
@@ -2975,7 +3037,7 @@ export function buildTimelineSnapshot(
     let builtRows: TimelineRow[];
 
     if (item.type === "intro") {
-      const cacheKey = `i:${item.key}:${innerWidth}:${item.intro.version}:${item.intro.layoutMode}:${item.intro.startupHeaderMode ?? ""}:${item.intro.authLabel}:${item.intro.workspaceLabel}:v${LOGO_LARGE_MIN_COLS}`;
+      const cacheKey = `i:${item.key}:${innerWidth}:${item.intro.version}:${item.intro.layoutMode}:${item.intro.startupHeaderMode ?? ""}:${item.intro.authLabel}:${item.intro.workspaceLabel}:${item.intro.providerLabel ?? ""}:v${LOGO_LARGE_MIN_COLS}`;
       const cached = _staticRowCache.get(cacheKey);
       if (cached) {
         renderDebug.traceEvent("timeline", "rowGeneration", {
@@ -2999,8 +3061,18 @@ export function buildTimelineSnapshot(
         builtRows = r;
       }
     } else if (item.type === "event") {
-      // Standalone events (system, error, etc.) are immutable — cache by key+width.
-      const cacheKey = `e:${item.key}:${innerWidth}`;
+      // Standalone events are immutable for a given event payload, not just id.
+      const cacheKey = rowCacheKey([
+        "event",
+        item.key,
+        item.event.type,
+        item.event.id,
+        innerWidth,
+        textCacheToken("title" in item.event ? item.event.title : item.event.command),
+        textCacheToken("content" in item.event ? item.event.content : item.event.summary ?? ""),
+        "status" in item.event ? item.event.status : "",
+        "durationMs" in item.event ? item.event.durationMs : "",
+      ]);
       const cached = _staticRowCache.get(cacheKey);
       if (cached) {
         renderDebug.traceEvent("timeline", "rowGeneration", {