@esso0428/pi-subagents 0.15.8 → 0.15.10

package/src/ui/conversation-timeline.ts

@@ -20,6 +20,7 @@ import {
   createViewerCcstyleTool,
   type ViewerToolRenderers,
 } from "./ccstyle/tool-renderer.js";
+import { showMoreHintText } from "./ccstyle/diff/render-utils.js";
 
 export interface TimelineRenderLine {
   text: string;
@@ -32,6 +33,9 @@ export interface TimelineToolSpan {
   toolCallId: string;
   startLine: number;
   height: number;
+  /** The only row that opens a collapsed card with a single click. */
+  clickStartLine?: number;
+  clickHeight?: number;
 }
 
 export interface ConversationTimelineSnapshot {
@@ -58,7 +62,7 @@ function resultContent(result: ConversationToolResultSnapshot): Array<Record<str
   return [];
 }
 
-function fallbackToolLines(block: ConversationBlock, width: number, expanded = false): string[] {
+function fallbackToolLines(block: ConversationBlock, width: number, expanded = false, hovered = false, theme?: Theme): string[] {
   const summary = block.toolLine || block.fullText || block.toolName || "tool";
   const output = block.toolResult
     ? block.toolResult.content
@@ -71,9 +75,17 @@ function fallbackToolLines(block: ConversationBlock, width: number, expanded = f
   const outputLines = outputText.split(/\r?\n/);
   const displayOutput = expanded || outputLines.length <= 4
     ? outputLines
-    : [...outputLines.slice(0, 4), `… (${outputLines.length - 4} more lines · Enter to expand)`];
+    : [...outputLines.slice(0, 4), `… (${outputLines.length - 4} more lines · ${showMoreHintText()})`];
   const body = outputText ? [summary, ...displayOutput].join("\n") : summary;
-  return body.split(/\r?\n/).map((line) => truncateToWidth(line, width, ""));
+  return body.split(/\r?\n/).map((line) => {
+    const clipped = truncateToWidth(line, width, "");
+    if (!hovered || expanded || !theme) return clipped;
+    const plain = stripAnsi(clipped);
+    const marker = plain.includes(showMoreHintText()) ? showMoreHintText() : plain.includes("Enter to expand") ? "Enter to expand" : "";
+    if (!marker) return clipped;
+    const markerIndex = plain.indexOf(marker);
+    return theme.fg("dim", plain.slice(0, markerIndex)) + theme.fg("text", marker) + theme.fg("dim", plain.slice(markerIndex + marker.length));
+  });
 }
 
 function applyToolComponentState(component: any, block: ConversationBlock, expanded: boolean): void {
@@ -95,12 +107,13 @@ function createToolComponent(
   tui: TUI,
   cwd: string,
   expanded: boolean,
+  isHovered: () => boolean,
 ): Component | undefined {
   const Constructor = (CodingAgent as any).ToolExecutionComponent as (new (...args: any[]) => Component) | undefined;
   if (typeof Constructor !== "function" || !block.toolName || !block.toolCallId) return undefined;
 
   try {
-    const renderer = createViewerCcstyleTool(block.toolName) as ViewerToolRenderers;
+    const renderer = createViewerCcstyleTool(block.toolName, isHovered) as ViewerToolRenderers;
     const component = new Constructor(
       block.toolName,
       block.toolCallId,
@@ -129,6 +142,10 @@ export class ConversationTimeline implements Component {
   private showTools = true;
   private focusedToolCallId: string | undefined;
   private expandedTools = new Set<string>();
+  private hoveredToolCallId: string | undefined;
+  /** The last tool clicked; used to make only clickCount=2 collapse it. */
+  private lastClickedToolCallId: string | undefined;
+  private lastClickedPoint: { x: number; y: number } | undefined;
   private toolComponents = new Map<string, Component & { handleMouse?: (event: TuiMouseEvent) => unknown }>();
   private snapshot: ConversationTimelineSnapshot = {
     lines: [],
@@ -149,6 +166,11 @@ export class ConversationTimeline implements Component {
     this.blocks = [...blocks];
     const ids = new Set(this.blocks.filter((block) => block.kind === "tool" && block.toolCallId).map((block) => block.toolCallId!));
     if (this.focusedToolCallId && !ids.has(this.focusedToolCallId)) this.focusedToolCallId = undefined;
+    if (this.hoveredToolCallId && !ids.has(this.hoveredToolCallId)) this.hoveredToolCallId = undefined;
+    if (this.lastClickedToolCallId && !ids.has(this.lastClickedToolCallId)) {
+      this.lastClickedToolCallId = undefined;
+      this.lastClickedPoint = undefined;
+    }
     for (const id of this.expandedTools) if (!ids.has(id)) this.expandedTools.delete(id);
     for (const id of this.toolComponents.keys()) if (!ids.has(id)) this.toolComponents.delete(id);
     this.invalidate();
@@ -157,7 +179,12 @@ export class ConversationTimeline implements Component {
   setShowTools(show: boolean): void {
     if (this.showTools === show) return;
     this.showTools = show;
-    if (!show) this.focusedToolCallId = undefined;
+    if (!show) {
+      this.focusedToolCallId = undefined;
+      this.hoveredToolCallId = undefined;
+      this.lastClickedToolCallId = undefined;
+      this.lastClickedPoint = undefined;
+    }
     this.invalidate();
   }
 
@@ -174,6 +201,10 @@ export class ConversationTimeline implements Component {
     return this.focusedToolCallId;
   }
 
+  getHoveredToolCallId(): string | undefined {
+    return this.hoveredToolCallId;
+  }
+
   getSnapshot(): ConversationTimelineSnapshot {
     if (this.lastWidth <= 0) this.render(80);
     return this.snapshot;
@@ -227,10 +258,14 @@ export class ConversationTimeline implements Component {
         lines.push({ text: truncateToWidth(separator, requestedWidth), plain: stripAnsi(separator), blockIndex });
       }
 
-      const headerLine = ` ${renderConversationRoleHeader(block, this.theme)}`;
-      messageStarts.push(lines.length);
+      const hasRoleHeader = block.role === "user" || block.role === "assistant";
+      const blockStartLine = lines.length;
+      messageStarts.push(blockStartLine);
       messageBlocks.push(block);
-      lines.push({ text: truncateToWidth(headerLine, requestedWidth), plain: stripAnsi(headerLine), blockIndex, railable: true });
+      if (hasRoleHeader) {
+        const headerLine = ` ${renderConversationRoleHeader(block, this.theme)}`;
+        lines.push({ text: truncateToWidth(headerLine, requestedWidth), plain: stripAnsi(headerLine), blockIndex, railable: true });
+      }
 
       if (block.kind === "tool") {
         const id = block.toolCallId;
@@ -242,22 +277,54 @@ export class ConversationTimeline implements Component {
             applyToolComponentState(existing, block, this.expandedTools.has(id));
             component = existing;
           } else {
-            component = createToolComponent(block, this.tui, this.options.cwd ?? process.cwd(), this.expandedTools.has(id)) as (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
+            component = createToolComponent(
+              block,
+              this.tui,
+              this.options.cwd ?? process.cwd(),
+              this.expandedTools.has(id),
+              () => this.hoveredToolCallId === id,
+            ) as (Component & { handleMouse?: (event: TuiMouseEvent) => unknown }) | undefined;
             if (component) this.toolComponents.set(id, component);
           }
         }
         let rendered: string[];
         try {
-          rendered = component?.render(requestedWidth) ?? fallbackToolLines(block, requestedWidth, id ? this.expandedTools.has(id) : false);
+          rendered = component?.render(requestedWidth) ?? fallbackToolLines(
+            block,
+            requestedWidth,
+            id ? this.expandedTools.has(id) : false,
+            id ? this.hoveredToolCallId === id : false,
+            this.theme,
+          );
         } catch {
           // Pi's interactive theme is a capability, not a viewer dependency;
           // test hosts and older Pi versions can lack its initialized theme.
-          rendered = fallbackToolLines(block, requestedWidth, id ? this.expandedTools.has(id) : false);
+          rendered = fallbackToolLines(
+            block,
+            requestedWidth,
+            id ? this.expandedTools.has(id) : false,
+            id ? this.hoveredToolCallId === id : false,
+            this.theme,
+          );
         }
         for (const line of rendered) {
           lines.push({ text: truncateToWidth(line, requestedWidth), plain: stripAnsi(line), blockIndex, railable: true });
         }
-        if (id) toolSpans.push({ toolCallId: id, startLine: messageStarts[messageStarts.length - 1], height: lines.length - messageStarts[messageStarts.length - 1] });
+        if (id) {
+          const startLine = blockStartLine;
+          const hintLine = !this.expandedTools.has(id)
+            ? rendered.findIndex((line) => {
+                const plain = stripAnsi(line);
+                return plain.includes(showMoreHintText()) || plain.includes("Enter to expand");
+              })
+            : -1;
+          toolSpans.push({
+            toolCallId: id,
+            startLine,
+            height: lines.length - startLine,
+            ...(hintLine >= 0 ? { clickStartLine: startLine + (hasRoleHeader ? 1 : 0) + hintLine, clickHeight: 1 } : {}),
+          });
+        }
         continue;
       }
 
@@ -286,14 +353,61 @@ export class ConversationTimeline implements Component {
     return lines.map((line) => line.text);
   }
 
-  handleMouse(event: TuiMouseEvent): { handled?: boolean; render?: boolean } | undefined {
-    // A normalized mouse interaction emits press/release/click. Toggle only
-    // on the terminal click; handling press as well causes one user click to
-    // expand and immediately collapse the same card.
-    if (event.type !== "click" || event.button !== "left") return undefined;
-    const span = this.snapshot.toolSpans.find((candidate) => event.y >= candidate.startLine && event.y < candidate.startLine + candidate.height);
+  handleMouse(event: TuiMouseEvent): { handled?: boolean; capture?: boolean; render?: boolean } | undefined {
+    if (event.type === "move") {
+      const hovered = this.snapshot.toolSpans.find((span) =>
+        span.clickStartLine !== undefined &&
+        event.y >= span.clickStartLine &&
+        event.y < span.clickStartLine + (span.clickHeight ?? 1),
+      )?.toolCallId;
+      if (hovered === this.hoveredToolCallId) return undefined;
+      this.hoveredToolCallId = hovered;
+      this.invalidate();
+      this.options.onChange?.();
+      return { handled: true, render: true };
+    }
+
+    // The TUI sends a click only when a component claims the preceding press.
+    // Claim only the collapsed hint (or the last expanded card's hit area for
+    // a possible second click); never change expansion on press or release.
+    if (event.type !== "click" && event.type !== "press") return undefined;
+    if (event.button !== "left") return undefined;
+    const clickCount = event.clickCount ?? 1;
+    const hintSpan = this.snapshot.toolSpans.find((candidate) =>
+      candidate.clickStartLine !== undefined &&
+      event.y >= candidate.clickStartLine &&
+      event.y < candidate.clickStartLine + (candidate.clickHeight ?? 1),
+    );
+    const fullSpan = this.snapshot.toolSpans.find((candidate) =>
+      event.y >= candidate.startLine &&
+      event.y < candidate.startLine + candidate.height,
+    );
+    const lastSpan = this.lastClickedToolCallId
+      ? this.snapshot.toolSpans.find((candidate) => candidate.toolCallId === this.lastClickedToolCallId)
+      : undefined;
+    const sameLastPoint = this.lastClickedPoint !== undefined
+      && event.screenX === this.lastClickedPoint.x
+      && event.screenY === this.lastClickedPoint.y;
+    const span = event.type === "click" && clickCount === 2 && lastSpan
+      ? lastSpan
+      : hintSpan ?? (sameLastPoint ? lastSpan : undefined);
     if (!span) return undefined;
+    if (event.type === "press") return { handled: true, capture: true, render: false };
+
+    const previousClickedToolCallId = this.lastClickedToolCallId;
     this.focusedToolCallId = span.toolCallId;
+    this.lastClickedToolCallId = span.toolCallId;
+    this.lastClickedPoint = { x: event.screenX, y: event.screenY };
+    const isExpanded = this.expandedTools.has(span.toolCallId);
+    const shouldCollapse = isExpanded && clickCount === 2 && span.toolCallId === previousClickedToolCallId;
+    if (!isExpanded && hintSpan?.toolCallId === span.toolCallId) {
+      this.expandedTools.add(span.toolCallId);
+    } else if (shouldCollapse) {
+      this.expandedTools.delete(span.toolCallId);
+    } else if (!isExpanded) {
+      return { handled: true, render: false };
+    }
+
     const component = this.toolComponents.get(span.toolCallId);
     try {
       // Keep Pi's normalized mouse contract in the component tree. The local
@@ -303,9 +417,6 @@ export class ConversationTimeline implements Component {
     } catch {
       // A missing/older Pi mouse implementation must not break the viewer.
     }
-    this.expandedTools.has(span.toolCallId)
-      ? this.expandedTools.delete(span.toolCallId)
-      : this.expandedTools.add(span.toolCallId);
     this.invalidate();
     this.options.onChange?.();
     return { handled: true, render: true };

package/src/ui/conversation-viewer.ts

@@ -62,6 +62,7 @@ export class ConversationViewer implements Component {
   private lastInnerW = 0;
   private closed = false;
   private stopArmed = false;
+  private hoveredClose = false;
   private keys: ViewerKeys;
   private composer: Input | undefined;
   private searchMode = false;
@@ -125,16 +126,22 @@ export class ConversationViewer implements Component {
     }
     if (matchesKey(data, "enter")) {
       this.buildContentLines(this.lastInnerW || 80);
-      if (this.timeline.isToolFocused()) {
+      const current = this.currentBlock();
+      if (current?.kind === "tool" && current.toolCallId) {
+        this.timeline.setFocusedToolCallId(current.toolCallId);
         this.timeline.toggleFocusedTool();
         return;
       }
-      if (this.canSteer()) {
-        this.stopArmed = false;
-        this.openComposer();
+      if (this.timeline.isToolFocused()) {
+        this.timeline.toggleFocusedTool();
         return;
       }
     }
+    if (data === "e" && this.canSteer()) {
+      this.stopArmed = false;
+      this.openComposer();
+      return;
+    }
     if (matchesKey(data, "x")) {
       if (this.isStoppable()) {
         if (this.stopArmed) {
@@ -160,13 +167,9 @@ export class ConversationViewer implements Component {
       this.invalidate();
       this.tui.requestRender();
     } else if (data === "\t") {
-      this.timeline.moveFocus(1);
-      this.invalidate();
-      this.tui.requestRender();
+      this.moveToolFocus(1);
     } else if (matchesKey(data, Key.shift("tab"))) {
-      this.timeline.moveFocus(-1);
-      this.invalidate();
-      this.tui.requestRender();
+      this.moveToolFocus(-1);
     } else if (data === "J" || matchesKey(data, Key.shift("j"))) {
       this.jumpToMessage(1);
     } else if (data === "K" || matchesKey(data, Key.shift("k"))) {
@@ -208,21 +211,63 @@ export class ConversationViewer implements Component {
     void maxScroll;
   }
 
-  handleMouse(event: TuiMouseEvent): { handled?: boolean; render?: boolean } | undefined {
-    if (this.composer || this.searchMode) return undefined;
+  handleMouse(event: TuiMouseEvent): { handled?: boolean; capture?: boolean; render?: boolean } | undefined {
     const innerW = Math.max(1, this.lastInnerW || event.width - 4);
+    const closeHit = this.isCloseButtonHit(event.x, event.y, innerW);
+    if (event.type === "move") {
+      const closeChanged = closeHit !== this.hoveredClose;
+      this.hoveredClose = closeHit;
+      if (this.composer || this.searchMode) {
+        return closeChanged ? { handled: true, render: true } : undefined;
+      }
+      const contentLines = this.buildContentLines(innerW);
+      const viewportHeight = this.viewportHeight();
+      const maxScroll = Math.max(0, contentLines.length - viewportHeight);
+      const visibleStart = Math.min(this.scrollOffset, maxScroll);
+      const contentOrigin = 3 + (this.invocationLine() ? 1 : 0);
+      const contentY = event.y - contentOrigin + visibleStart;
+      // Forward moves outside the content too so a previously hovered tool
+      // hint is cleared when the pointer returns to the header/footer.
+      const timelineResult = this.timeline.handleMouse({ ...event, y: contentY });
+      return timelineResult ?? (closeChanged ? { handled: true, render: true } : undefined);
+    }
+    if (closeHit && event.button === "left") {
+      if (event.type === "press") return { handled: true, capture: true, render: false };
+      if (event.type === "click") {
+        this.closed = true;
+        this.done(undefined);
+        return { handled: true, render: false };
+      }
+    }
+    if (this.composer || this.searchMode) return undefined;
     const contentLines = this.buildContentLines(innerW);
     const viewportHeight = this.viewportHeight();
     const maxScroll = Math.max(0, contentLines.length - viewportHeight);
     const visibleStart = Math.min(this.scrollOffset, maxScroll);
     const contentOrigin = 3 + (this.invocationLine() ? 1 : 0);
+
+    if (event.type === "wheel") {
+      if (event.y < contentOrigin || event.y >= contentOrigin + viewportHeight) return undefined;
+      const delta = Math.trunc(event.wheelDelta ?? 0);
+      if (delta === 0) return { handled: true, render: false };
+      this.scrollBy(delta);
+      return { handled: true, render: true };
+    }
+
     const contentY = event.y - contentOrigin + visibleStart;
     if (contentY < 0 || contentY >= contentLines.length) return undefined;
     const result = this.timeline.handleMouse({ ...event, y: contentY });
     if (result?.handled) {
-      this.cacheVersion++;
-      this.invalidate();
-      this.tui.requestRender();
+      if (event.type === "click") {
+        const focusedTool = this.timeline.getFocusedToolCallId();
+        const refreshed = this.timeline.getSnapshot();
+        const selected = refreshed.messageBlocks.findIndex((block) => block.toolCallId === focusedTool);
+        if (selected >= 0) this.selectedMessageIdx = selected;
+        this.cacheVersion++;
+        this.invalidate();
+        this.tui.requestRender();
+      }
+      return result;
     }
     return result;
   }
@@ -253,7 +298,12 @@ export class ConversationViewer implements Component {
       const percent = getSessionContextPercent(this.activity?.session);
       headerParts.push(formatSessionTokens(tokens, percent, th, this.record.compactionCount));
     }
-    lines.push(row(`${statusIcon} ${th.bold(name)}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`));
+    const headerText = `${statusIcon} ${th.bold(name)}${modeTag}  ${th.fg("muted", this.record.description)} ${th.fg("dim", "·")} ${fgPreservingNestedStyles(th, "dim", headerParts.join(" · "))}`;
+    const closeLabel = this.hoveredClose ? th.fg("text", th.bold("[esc]")) : th.fg("dim", "[esc]");
+    const closeWidth = visibleWidth(closeLabel);
+    const headerLeft = truncateToWidth(headerText, Math.max(0, innerW - closeWidth - 1), "", true);
+    const headerGap = Math.max(1, innerW - visibleWidth(headerLeft) - closeWidth);
+    lines.push(row(headerLeft + " ".repeat(headerGap) + closeLabel));
     const invocationLine = this.invocationLine();
     if (invocationLine) lines.push(row(invocationLine));
     lines.push(hrMid);
@@ -283,7 +333,10 @@ export class ConversationViewer implements Component {
         if (hits.length > 0) text = highlightConversationLine(text, hits, MATCH_BG, MATCH_BG_CURRENT, BG_RESET);
       }
       if (line.railable && line.blockIndex === currentBlockIdx) {
-        text = text.startsWith(" ") ? th.fg("accent", "▎") + text.slice(1) : th.fg("accent", "▎") + text;
+        const currentBlock = this.cachedMessageBlocks[this.currentMessageIndex()];
+        const railColor = currentBlock?.kind === "tool" ? "toolTitle" : "accent";
+        const railGlyph = currentBlock?.kind === "tool" ? "▌" : "▎";
+        text = text.startsWith(" ") ? th.fg(railColor, railGlyph) + text.slice(1) : th.fg(railColor, railGlyph) + text;
       }
       lines.push(row(text));
     }
@@ -304,11 +357,11 @@ export class ConversationViewer implements Component {
       lines.push(row(truncateToWidth(th.fg("accent", query) + th.fg("dim", matchCount) + hints, innerW, "...", true)));
     } else {
       const actions: string[] = [];
-      if (this.canSteer()) actions.push(th.fg("dim", "Enter steer"));
+      if (this.canSteer()) actions.push(th.fg("dim", "e steer"));
       if (this.isStoppable()) actions.push(this.stopArmed ? th.fg("error", "x again to STOP") : th.fg("dim", "x stop"));
       const editHint = this.isLive() ? " O" : "";
       const shortcutHints = [
-        `j/k · J/K · g/G   t   M o${editHint}   /n N   q`,
+        `j/k scroll · J/K messages · g/G   t   M o${editHint}   /n N   q`,
         `M o${editHint}   /n N   q`,
         `M o${editHint} /n N q`,
       ];
@@ -336,6 +389,13 @@ export class ConversationViewer implements Component {
     return lines;
   }
 
+  private isCloseButtonHit(x: number, y: number, innerW: number): boolean {
+    if (y !== 1) return false;
+    const labelWidth = visibleWidth("[esc]");
+    const labelStart = 2 + Math.max(0, innerW - labelWidth);
+    return x >= labelStart && x < 2 + innerW;
+  }
+
   invalidate(): void {
     this.cachedWidth = 0;
     this.cachedLines = [];
@@ -411,7 +471,10 @@ export class ConversationViewer implements Component {
   }
 
   private activeHeaderLine(): number {
-    return this.cachedMessageStarts[this.currentMessageIndex()] ?? -1;
+    const block = this.cachedMessageBlocks[this.currentMessageIndex()];
+    return block?.role === "user" || block?.role === "assistant"
+      ? this.cachedMessageStarts[this.currentMessageIndex()] ?? -1
+      : -1;
   }
 
   private currentBlock(): ConversationBlock | undefined {
@@ -428,15 +491,42 @@ export class ConversationViewer implements Component {
   }
 
   private jumpToMessage(dir: 1 | -1): void {
-    if (this.cachedMessageStarts.length === 0) return;
-    const target = this.currentMessageIndex() + dir;
-    if (target < 0 || target >= this.cachedMessageStarts.length) return;
+    const messageIndices = this.cachedMessageBlocks
+      .map((block, index) => block.role === "user" || block.role === "assistant" ? index : -1)
+      .filter((index): index is number => index >= 0);
+    if (messageIndices.length === 0) return;
+    const current = this.currentMessageIndex();
+    const currentPosition = messageIndices.indexOf(current);
+    let precedingPosition = -1;
+    for (let index = 0; index < messageIndices.length; index++) {
+      if (messageIndices[index] < current) precedingPosition = index;
+    }
+    const basePosition = currentPosition >= 0
+      ? currentPosition
+      : dir > 0
+        ? messageIndices.findIndex((index) => index > current)
+        : precedingPosition;
+    const position = basePosition < 0 ? (dir > 0 ? 0 : messageIndices.length - 1) : basePosition + dir;
+    if (position < 0 || position >= messageIndices.length) return;
+    const target = messageIndices[position];
     this.selectedMessageIdx = target;
+    this.timeline.setFocusedToolCallId(undefined);
     this.scrollOffset = Math.min(this.cachedMessageStarts[target], Math.max(0, this.cachedLines.length - this.viewportHeight()));
     this.autoScroll = false;
     this.tui.requestRender();
   }
 
+  private moveToolFocus(direction: 1 | -1): void {
+    if (!this.timeline.moveFocus(direction)) return;
+    const focused = this.timeline.getFocusedToolCallId();
+    const refreshed = this.timeline.getSnapshot();
+    const index = refreshed.messageBlocks.findIndex((block) => block.toolCallId === focused);
+    if (index >= 0) this.selectedMessageIdx = index;
+    this.autoScroll = false;
+    this.invalidate();
+    this.tui.requestRender();
+  }
+
   private scrollBy(delta: number): void {
     const max = Math.max(0, this.cachedLines.length - this.viewportHeight());
     this.scrollOffset = Math.max(0, Math.min(max, this.scrollOffset + delta));

package/src/write-execution.ts

@@ -9,6 +9,8 @@ export const MAX_COMPARABLE_WRITE_BYTES = 512_000;
 export const MAX_WRITE_METADATA_ENTRIES = 100;
 
 export interface DurableWriteDetails {
+  /** Persisted so history can distinguish create vs overwrite without file access. */
+  fileExistedBeforeWrite?: boolean;
   diff?: string;
   patch?: string;
   firstChangedLine?: number;
@@ -106,7 +108,10 @@ function durableDetails(
   content: string,
 ): DurableWriteDetails {
   if (metadata.diffUnavailableReason) {
-    return { diffUnavailableReason: metadata.diffUnavailableReason };
+    return {
+      fileExistedBeforeWrite: metadata.fileExistedBeforeWrite,
+      diffUnavailableReason: metadata.diffUnavailableReason,
+    };
   }
   const previousContent = metadata.previousContent ?? "";
   const diffResult = generateDiffString(previousContent, content);
@@ -116,6 +121,7 @@ function durableDetails(
     return { diffUnavailableReason: `durable diff exceeds ${MAX_DURABLE_DIFF_BYTES} bytes` };
   }
   return {
+    fileExistedBeforeWrite: metadata.fileExistedBeforeWrite,
     diff: diffResult.diff,
     patch,
     firstChangedLine: diffResult.firstChangedLine,

package/test/ui/conversation-diff.test.ts

@@ -66,6 +66,19 @@ describe("viewer-local ccstyle diff renderer", () => {
     expect(rendered).not.toContain("later");
   });
 
+  it("labels persisted overwrites correctly without reading the current file", () => {
+    const component = renderRichToolResult("write", {
+      content: [{ type: "text", text: "Successfully wrote" }],
+      details: {
+        diff: "-1 old\n+1 new",
+        patch: "--- file.txt\n+++ file.txt\n@@ -1,1 +1,1 @@\n-old\n+new\n",
+      },
+    }, { expanded: false }, theme, { args: { path: "file.txt", content: "new\n" } });
+
+    expect(component?.render(100).join("\\n")).toContain("overwritten");
+    expect(component?.render(100).join("\\n")).toContain("click to show more");
+  });
+
   it("returns an explicit unavailable row instead of an empty success card", () => {
     const component = renderRichToolResult("write", {
       content: [{ type: "text", text: "Successfully wrote" }],