@gajae-code/coding-agent 0.11.11 → 0.12.0

package/src/modes/components/tool-execution.ts

@@ -129,6 +129,21 @@ function stabilizeStreamingPreviews(previews: PerFileDiffPreview[]): PerFileDiff
 	return changed ? next : previews;
 }
 
+function previewsAreEqual(a: PerFileDiffPreview[] | undefined, b: PerFileDiffPreview[]): boolean {
+	return (
+		a?.length === b.length &&
+		a.every((preview, index) => {
+			const next = b[index];
+			return (
+				preview.path === next?.path &&
+				preview.diff === next.diff &&
+				preview.error === next.error &&
+				preview.firstChangedLine === next.firstChangedLine
+			);
+		})
+	);
+}
+
 function isEditLikeToolName(toolName: string): boolean {
 	return toolName === "edit" || toolName === "apply_patch";
 }
@@ -144,6 +159,8 @@ export interface ToolExecutionOptions {
 	editFuzzyThreshold?: number;
 	editAllowFuzzy?: boolean;
 	hashlineAutoDropPureInsertDuplicates?: boolean;
+	/** Internal observer for visible asynchronous renderer mutations. */
+	onVisibleTranscriptMutation?: () => void;
 }
 
 export interface ToolExecutionHandle {
@@ -168,6 +185,11 @@ export interface ToolExecutionHandle {
 	 * back to {@link setExpanded}.
 	 */
 	setManuallyExpanded?(expanded: boolean): void;
+	/**
+	 * Internal capability for dispatchers that need exact synchronous visible-output
+	 * detection. Optional so existing structural handles remain source compatible.
+	 */
+	consumeVisibleTranscriptChange?(): boolean;
 }
 
 /**
@@ -213,8 +235,11 @@ export class ToolExecutionComponent extends Container {
 	#argsIdentityVersion = 0;
 	#lastArgsReference: any;
 	#shareArgsWithRenderer = false;
-	// Cached converted images for Kitty protocol (which requires PNG), keyed by index
-	#convertedImages: Map<number, { data: string; mimeType: string }> = new Map();
+	// Cached converted images for Kitty protocol (which requires PNG), keyed by index and source.
+	#convertedImages: Map<number, { data: string; mimeType: string; source: string }> = new Map();
+	#imageConversionGenerations = new Map<number, number>();
+	#imageConversionsInFlight = new Map<number, string>();
+
 	// Spinner animation for partial task results
 	#spinnerFrame?: number;
 	#spinnerAnimation?: AnimationRegistration;
@@ -229,6 +254,10 @@ export class ToolExecutionComponent extends Container {
 		expanded: false,
 		isPartial: true,
 	};
+	#onVisibleTranscriptMutation?: () => void;
+	#visibleTranscriptChanged = false;
+	#visibleProjection = "";
+	#disposed = false;
 
 	constructor(
 		toolName: string,
@@ -246,6 +275,8 @@ export class ToolExecutionComponent extends Container {
 		this.#editFuzzyThreshold = options.editFuzzyThreshold;
 		this.#editAllowFuzzy = options.editAllowFuzzy;
 		this.#hashlineAutoDropPureInsertDuplicates = options.hashlineAutoDropPureInsertDuplicates;
+		this.#onVisibleTranscriptMutation = options.onVisibleTranscriptMutation;
+
 		this.#tool = tool;
 		this.#ui = ui;
 		this.#cwd = cwd;
@@ -273,18 +304,23 @@ export class ToolExecutionComponent extends Container {
 		this.#editMode = resolveEditModeForTool(toolName, tool);
 
 		this.#updateDisplay();
+		this.#visibleProjection = this.#captureLogicalVisibleProjection();
+
 		void this.#runPreviewDiff();
 	}
 
 	updateArgs(args: any, _toolCallId?: string): void {
+		const argsChanged = !Bun.deepEquals(this.#args, args);
+		if (!argsChanged && !this.#editMode) return;
 		if (args !== this.#lastArgsReference) {
 			this.#lastArgsReference = args;
 			this.#argsIdentityVersion += 1;
 		}
-		this.#args = this.#shareArgsWithRenderer ? args : cloneToolArgs(args);
+		this.#args = argsChanged ? (this.#shareArgsWithRenderer ? args : cloneToolArgs(args)) : this.#args;
 		this.#updateSpinnerAnimation();
 		void this.#runPreviewDiff();
 		this.#updateDisplay();
+		this.#markVisibleMutationIfChanged();
 	}
 
 	/**
@@ -295,6 +331,8 @@ export class ToolExecutionComponent extends Container {
 		this.#argsComplete = true;
 		this.#updateSpinnerAnimation();
 		void this.#runPreviewDiff();
+		this.#updateDisplay();
+		this.#markVisibleMutationIfChanged();
 	}
 
 	async #runPreviewDiff(): Promise<void> {
@@ -338,14 +376,17 @@ export class ToolExecutionComponent extends Container {
 				hashlineAutoDropPureInsertDuplicates: this.#hashlineAutoDropPureInsertDuplicates,
 				isStreaming,
 			});
-			if (controller.signal.aborted) return;
+			if (this.#disposed || controller.signal.aborted) return;
 			if (previews) {
-				this.#editDiffPreview = isStreaming ? stabilizeStreamingPreviews(previews) : previews;
+				const nextPreview = isStreaming ? stabilizeStreamingPreviews(previews) : previews;
+				const changed = !previewsAreEqual(this.#editDiffPreview, nextPreview);
+				this.#editDiffPreview = nextPreview;
 				this.#updateDisplay();
 				this.#ui.requestRender();
+				if (changed) this.#markVisibleMutationIfChanged(true);
 			}
 		} catch (err) {
-			if (controller.signal.aborted) return;
+			if (this.#disposed || controller.signal.aborted) return;
 			logger.warn("Edit preview diff failed", { tool: this.#toolName, error: String(err) });
 		}
 	}
@@ -359,8 +400,10 @@ export class ToolExecutionComponent extends Container {
 		isPartial = false,
 		_toolCallId?: string,
 	): void {
+		if (this.#isPartial === isPartial && Bun.deepEquals(this.#result, result)) return;
 		this.#textOutputCache = undefined;
 		this.#result = result;
+		this.#invalidateStaleKittyConversions();
 		this.#isPartial = isPartial;
 		// When tool is complete, ensure args are marked complete so spinner stops
 		if (!isPartial) {
@@ -370,6 +413,7 @@ export class ToolExecutionComponent extends Container {
 		this.#updateDisplay();
 		// Convert non-PNG images to PNG for Kitty protocol (async)
 		this.#maybeConvertImagesForKitty();
+		this.#markVisibleMutationIfChanged();
 	}
 
 	/**
@@ -383,40 +427,101 @@ export class ToolExecutionComponent extends Container {
 		return [...contentImages, ...detailImages];
 	}
 
-	/**
-	 * Convert non-PNG images to PNG for Kitty graphics protocol.
-	 * Kitty requires PNG format (f=100), so JPEG/GIF/WebP won't display.
-	 */
-	#maybeConvertImagesForKitty(): void {
-		// Only needed for Kitty protocol
-		if (TERMINAL.imageProtocol !== ImageProtocol.Kitty) return;
-		if (!this.#result) return;
-
-		const imageBlocks = this.#getAllImageBlocks();
+	#imageSource(image: { data?: string; mimeType?: string }): string | undefined {
+		return image.data && image.mimeType ? `${image.mimeType}\u0000${image.data}` : undefined;
+	}
 
-		for (let i = 0; i < imageBlocks.length; i++) {
-			const img = imageBlocks[i];
-			if (!img.data || !img.mimeType) continue;
-			// Skip if already PNG or already converted
-			if (img.mimeType === "image/png") continue;
-			if (this.#convertedImages.has(i)) continue;
+	#invalidateStaleKittyConversions(): void {
+		const images = this.#getAllImageBlocks();
+		const indices = new Set<number>();
+		for (let index = 0; index < images.length; index++) {
+			const source = this.#imageSource(images[index]);
+			if (!source) continue;
+			indices.add(index);
+			if (this.#convertedImages.get(index)?.source !== source) this.#convertedImages.delete(index);
+			if (this.#imageConversionsInFlight.get(index) !== source) {
+				this.#imageConversionsInFlight.delete(index);
+				this.#imageConversionGenerations.set(index, (this.#imageConversionGenerations.get(index) ?? 0) + 1);
+			}
+		}
+		for (const index of this.#convertedImages.keys()) {
+			if (!indices.has(index)) this.#convertedImages.delete(index);
+		}
+		for (const index of this.#imageConversionsInFlight.keys()) {
+			if (!indices.has(index)) {
+				this.#imageConversionsInFlight.delete(index);
+				this.#imageConversionGenerations.set(index, (this.#imageConversionGenerations.get(index) ?? 0) + 1);
+			}
+		}
+	}
 
-			// Convert async - catch errors from processing
-			const index = i;
-			new Bun.Image(Buffer.from(img.data, "base64"))
+	/** Convert non-PNG images to PNG for Kitty graphics protocol. */
+	#maybeConvertImagesForKitty(): void {
+		if (TERMINAL.imageProtocol !== ImageProtocol.Kitty) return;
+		for (const [index, image] of this.#getAllImageBlocks().entries()) {
+			const source = this.#imageSource(image);
+			if (!source || image.mimeType === "image/png") continue;
+			if (
+				this.#convertedImages.get(index)?.source === source ||
+				this.#imageConversionsInFlight.get(index) === source
+			)
+				continue;
+			const generation = this.#imageConversionGenerations.get(index) ?? 0;
+			this.#imageConversionsInFlight.set(index, source);
+			new Bun.Image(Buffer.from(image.data!, "base64"))
 				.png()
 				.toBase64()
 				.then(data => {
-					this.#convertedImages.set(index, { data, mimeType: "image/png" });
+					if (
+						this.#disposed ||
+						this.#imageConversionGenerations.get(index) !== generation ||
+						this.#imageConversionsInFlight.get(index) !== source ||
+						this.#imageSource(this.#getAllImageBlocks()[index] ?? {}) !== source
+					)
+						return;
+					this.#imageConversionsInFlight.delete(index);
+					this.#convertedImages.set(index, { data, mimeType: "image/png", source });
 					this.#updateDisplay();
 					this.#ui.requestRender();
+					this.#markVisibleMutationIfChanged(true);
 				})
 				.catch(() => {
-					// Ignore conversion failures - display will use original image format
+					if (
+						this.#disposed ||
+						this.#imageConversionGenerations.get(index) !== generation ||
+						this.#imageConversionsInFlight.get(index) !== source
+					)
+						return;
+					this.#imageConversionsInFlight.delete(index);
 				});
 		}
 	}
 
+	#captureLogicalVisibleProjection(): string {
+		return this.render(10_000).join("\n");
+	}
+
+	#markVisibleMutationIfChanged(notify = false): void {
+		const projection = this.#captureLogicalVisibleProjection();
+		if (projection === this.#visibleProjection) return;
+		this.#visibleProjection = projection;
+		this.#markVisibleMutation(notify);
+	}
+
+	#markVisibleMutation(notify = false): void {
+		if (notify) {
+			this.#onVisibleTranscriptMutation?.();
+			return;
+		}
+		this.#visibleTranscriptChanged = true;
+	}
+
+	consumeVisibleTranscriptChange(): boolean {
+		const changed = this.#visibleTranscriptChanged;
+		this.#visibleTranscriptChanged = false;
+		return changed;
+	}
+
 	/**
 	 * Start or stop spinner animation based on whether this is a partial task result.
 	 */
@@ -430,6 +535,7 @@ export class ToolExecutionComponent extends Container {
 		const needsSpinner = isStreamingArgs || isPartialTask;
 		if (needsSpinner && !this.#spinnerAnimation) {
 			this.#spinnerAnimation = registerAnimationCallback(() => {
+				if (this.#disposed) return;
 				const frameCount = theme.spinnerFrames.length;
 				if (frameCount === 0) return;
 				this.#spinnerFrame = ((this.#spinnerFrame ?? -1) + 1) % frameCount;
@@ -456,6 +562,11 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	override dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		this.#imageConversionGenerations.clear();
+		this.#imageConversionsInFlight.clear();
+		this.#convertedImages.clear();
 		this.stopAnimation();
 		super.dispose();
 	}

package/src/modes/controllers/event-controller.ts

@@ -12,7 +12,7 @@ import {
 	readArgsTargetInternalUrl,
 } from "../../modes/components/read-tool-group";
 import { TodoReminderComponent } from "../../modes/components/todo-reminder";
-import { ToolExecutionComponent } from "../../modes/components/tool-execution";
+import { ToolExecutionComponent, type ToolExecutionHandle } from "../../modes/components/tool-execution";
 import { TtsrNotificationComponent } from "../../modes/components/ttsr-notification";
 import { getSymbolTheme, theme } from "../../modes/theme/theme";
 import type { InteractiveModeContext, TodoPhase } from "../../modes/types";
@@ -23,6 +23,7 @@ import type { AgentSessionEvent } from "../../session/agent-session";
 import { type CustomMessage, isSilentAbort, readPendingDisplayTag } from "../../session/messages";
 import { transferSessionMessageIdentity } from "../../session/session-manager";
 import type { ResolveToolDetails } from "../../tools/resolve";
+import { computeIrcSplitWidths, getIrcSidebarSemanticToken } from "../components/irc-sidebar";
 import type { IrcObservationRecord } from "../irc-observation-ledger";
 import { interruptHint } from "../shared";
 import { buildAbortDisplayMessage } from "../utils/abort-message";
@@ -36,7 +37,14 @@ type AgentSessionEventKind = AgentSessionEvent["type"];
 
 /** Test-only performance counters for advisory baseline tests. */
 export const __eventControllerPerfCounters = {
+	enabled: false,
 	messageUpdateContentVisits: 0,
+	enable(): void {
+		this.enabled = true;
+	},
+	disable(): void {
+		this.enabled = false;
+	},
 	reset(): void {
 		this.messageUpdateContentVisits = 0;
 	},
@@ -118,6 +126,9 @@ export class EventController {
 	#toolIntentCache = new Map<string, { args: unknown; intent: string | undefined }>();
 	#thinkingContentIndices = new Set<number>();
 	#handlers: AgentSessionEventHandlers;
+	#visibleTranscriptChanged = false;
+	#handlingEvent = false;
+	#eventQueue: Promise<void> = Promise.resolve();
 
 	constructor(private ctx: InteractiveModeContext) {
 		this.#handlers = {
@@ -162,6 +173,26 @@ export class EventController {
 		this.clearIrcExpiryTimers();
 	}
 
+	#recordVisibleTranscriptMutation(): void {
+		this.#visibleTranscriptChanged = true;
+	}
+
+	#observeVisibleTranscriptMutation(): void {
+		if (this.#handlingEvent) {
+			this.#recordVisibleTranscriptMutation();
+			return;
+		}
+		this.ctx.recordVisibleTranscriptMutation?.();
+	}
+
+	#consumeToolVisibleChange(handle: ToolExecutionHandle): void {
+		// Structural third-party renderers may not implement the optional exact-consume
+		// capability; preserve revision correctness conservatively until they opt in.
+		if (typeof handle.consumeVisibleTranscriptChange !== "function" || handle.consumeVisibleTranscriptChange()) {
+			this.#recordVisibleTranscriptMutation();
+		}
+	}
+
 	#resetReadGroup(): void {
 		this.#lastReadGroup = undefined;
 	}
@@ -228,17 +259,26 @@ export class EventController {
 		});
 	}
 
-	async handleEvent(event: AgentSessionEvent): Promise<void> {
-		if (!this.ctx.isInitialized) {
-			await this.ctx.init();
-		}
-
-		this.ctx.statusLine.invalidate();
-		this.ctx.updateEditorTopBorder();
+	handleEvent(event: AgentSessionEvent): Promise<void> {
+		const dispatch = this.#eventQueue.then(() => this.#dispatchEvent(event));
+		this.#eventQueue = dispatch.catch(() => {});
+		return dispatch;
+	}
 
-		const run = this.#handlers[event.type] as (e: AgentSessionEvent) => Promise<void>;
-		await run(event);
-		if (this.ctx.isTranscriptViewerOpen?.()) this.ctx.refreshTranscriptViewer?.();
+	async #dispatchEvent(event: AgentSessionEvent): Promise<void> {
+		if (!this.ctx.isInitialized) await this.ctx.init();
+		this.#visibleTranscriptChanged = false;
+		this.#handlingEvent = true;
+		try {
+			this.ctx.statusLine.invalidate();
+			this.ctx.updateEditorTopBorder();
+			const run = this.#handlers[event.type] as (e: AgentSessionEvent) => Promise<void>;
+			await run(event);
+			if (this.#visibleTranscriptChanged) this.ctx.recordVisibleTranscriptMutation?.();
+			if (this.ctx.isTranscriptViewerOpen?.()) this.ctx.refreshTranscriptViewer?.();
+		} finally {
+			this.#handlingEvent = false;
+		}
 	}
 
 	async #handleAgentStart(_event: Extract<AgentSessionEvent, { type: "agent_start" }>): Promise<void> {
@@ -268,8 +308,12 @@ export class EventController {
 		const parsed = parseIrcMessage(message);
 		if (!parsed) return;
 		const arrival = this.ctx.captureIrcArrivalSnapshot();
+		const rightWidth = arrival.panelVisible
+			? computeIrcSplitWidths(this.ctx.ui.terminal?.columns ?? 0).rightWidth
+			: 0;
+		const beforeToken = rightWidth > 0 ? getIrcSidebarSemanticToken(this.ctx.ircLedger, rightWidth) : "";
 		const record = this.ctx.ircLedger.observe(parsed, arrival.panelVisible);
-		this.#cleanupEvictedIrcObservations();
+		const evictedInlineRemoved = this.#cleanupIrcObservationIds(this.ctx.ircLedger.drainEvictedObservationIds());
 		if (!record) return;
 		const signature = `irc:${record.observationId}`;
 		if (this.#renderedCustomMessages.has(signature)) return;
@@ -279,9 +323,13 @@ export class EventController {
 		this.#renderedIrcComponents.set(record.observationId, components);
 		this.#scheduleIrcExpiry(record, components);
 		this.ctx.ui.requestRender();
+		const afterToken = rightWidth > 0 ? getIrcSidebarSemanticToken(this.ctx.ircLedger, rightWidth) : "";
+		if (components.length > 0 || evictedInlineRemoved || (rightWidth > 0 && beforeToken !== afterToken)) {
+			this.#recordVisibleTranscriptMutation();
+		}
 	}
 
-	#cleanupIrcObservationIds(observationIds: readonly string[]): void {
+	#cleanupIrcObservationIds(observationIds: readonly string[]): boolean {
 		const removedComponents = new Set<Component>();
 		for (const observationId of observationIds) {
 			const timer = this.#ircExpiryTimers.get(observationId);
@@ -294,23 +342,26 @@ export class EventController {
 			for (const component of this.ctx.removeRenderedIrcInlineComponents(observationId) ?? []) {
 				removedComponents.add(component);
 			}
-
 			this.#renderedCustomMessages.delete(`irc:${observationId}`);
 		}
 		for (const component of removedComponents) this.ctx.chatContainer.removeChild(component);
+		return removedComponents.size > 0;
 	}
 
 	#cleanupEvictedIrcObservations(): void {
-		this.#cleanupIrcObservationIds(this.ctx.ircLedger.drainEvictedObservationIds());
+		if (this.#cleanupIrcObservationIds(this.ctx.ircLedger.drainEvictedObservationIds())) {
+			this.#recordVisibleTranscriptMutation();
+		}
 	}
 
-	#cleanupExpiredIrcInlineComponents(observationId: string): void {
+	#cleanupExpiredIrcInlineComponents(observationId: string): boolean {
 		const removedComponents = new Set<Component>(this.#renderedIrcComponents.get(observationId));
 		this.#renderedIrcComponents.delete(observationId);
 		for (const component of this.ctx.removeRenderedIrcInlineComponents(observationId) ?? []) {
 			removedComponents.add(component);
 		}
 		for (const component of removedComponents) this.ctx.chatContainer.removeChild(component);
+		return removedComponents.size > 0;
 	}
 
 	async #handleMessageStart(event: Extract<AgentSessionEvent, { type: "message_start" }>): Promise<void> {
@@ -326,6 +377,7 @@ export class EventController {
 			this.#renderedCustomMessages.add(signature);
 			this.#resetReadGroup();
 			this.ctx.addMessageToChat(event.message);
+			if (event.message.display) this.#recordVisibleTranscriptMutation();
 			// Tag-keyed pending-bar refresh: when AgentSession.#handleAgentEvent
 			// spliced this dequeued custom message out of #steeringMessages /
 			// #followUpMessages (it ran before this emit), the array state is
@@ -373,10 +425,12 @@ export class EventController {
 				this.ctx.updatePendingMessagesDisplay();
 			}
 			this.ctx.ui.requestRender();
+			if (!wasOptimistic) this.#recordVisibleTranscriptMutation();
 		} else if (event.message.role === "fileMention") {
 			this.#resetReadGroup();
 			this.ctx.addMessageToChat(event.message);
 			this.ctx.ui.requestRender();
+			this.#recordVisibleTranscriptMutation();
 		} else if (event.message.role === "assistant") {
 			this.#lastThinkingCount = 0;
 			this.#resetReadGroup();
@@ -387,6 +441,7 @@ export class EventController {
 				this.ctx.hideThinkingBlock,
 				() => this.ctx.ui.requestRender(),
 				this.ctx.getAssistantViewportAnchorId?.(event.message),
+				() => this.#observeVisibleTranscriptMutation(),
 			);
 			this.ctx.streamingMessage = event.message;
 			addChatChild(this.ctx, this.ctx.streamingComponent);
@@ -429,15 +484,10 @@ export class EventController {
 		this.#cleanupEvictedIrcObservations();
 		const projectedObservationIds = new Set(inlineProjection.map(record => record.observationId));
 		for (const [observationId, components] of componentsByObservationId) {
-			const record = this.ctx.ircLedger.getRecord(observationId);
-			if (
-				!projectedObservationIds.has(observationId) ||
-				(record?.mode === "ephemeral" && record.expiresAt! - now <= 0)
-			) {
+			if (!projectedObservationIds.has(observationId)) {
 				for (const component of components) {
 					this.ctx.chatContainer.removeChild(component);
 				}
-				this.#renderedIrcComponents.delete(observationId);
 				componentsByObservationId.delete(observationId);
 			}
 		}
@@ -468,12 +518,12 @@ export class EventController {
 		}
 		const remainingMs = record.expiresAt! - Date.now();
 		if (remainingMs <= 0) {
-			this.#cleanupExpiredIrcInlineComponents(record.observationId);
+			if (this.#cleanupExpiredIrcInlineComponents(record.observationId)) this.#observeVisibleTranscriptMutation();
 			return false;
 		}
 		const timer = setTimeout(() => {
 			this.#ircExpiryTimers.delete(record.observationId);
-			this.#cleanupExpiredIrcInlineComponents(record.observationId);
+			if (this.#cleanupExpiredIrcInlineComponents(record.observationId)) this.#observeVisibleTranscriptMutation();
 			this.ctx.ui.requestRender();
 		}, remainingMs);
 		timer.unref?.();
@@ -496,6 +546,7 @@ export class EventController {
 		this.#resetReadGroup();
 		this.ctx.addMessageToChat(event.message);
 		this.ctx.ui.requestRender();
+		this.#recordVisibleTranscriptMutation();
 	}
 
 	async #handleModelFallbackSwitched(
@@ -549,19 +600,24 @@ export class EventController {
 			}
 
 			for (const content of contentsToProcess) {
-				__eventControllerPerfCounters.messageUpdateContentVisits += 1;
+				if (__eventControllerPerfCounters.enabled) __eventControllerPerfCounters.messageUpdateContentVisits += 1;
 				if (content.type !== "toolCall") continue;
 				if (content.name === "read") {
 					if (!readArgsHaveTarget(content.arguments)) continue;
 					if (!readArgsTargetInternalUrl(content.arguments)) {
 						this.#trackReadToolCall(content.id, content.arguments);
 						const component = this.ctx.pendingTools.get(content.id);
-						if (component) component.updateArgs(content.arguments, content.id);
-						else {
+						if (component) {
+							component.updateArgs(content.arguments, content.id);
+							this.#consumeToolVisibleChange(component);
+						} else {
 							const group = this.#getReadGroup();
 							group.updateArgs(content.arguments, content.id);
 							this.ctx.pendingTools.set(content.id, group);
+							this.#recordVisibleTranscriptMutation();
+							group.consumeVisibleTranscriptChange();
 						}
+
 						continue;
 					}
 				}
@@ -582,6 +638,7 @@ export class EventController {
 							editFuzzyThreshold: settings.get("edit.fuzzyThreshold"),
 							editAllowFuzzy: settings.get("edit.fuzzyMatch"),
 							hashlineAutoDropPureInsertDuplicates: settings.get("edit.hashlineAutoDropPureInsertDuplicates"),
+							onVisibleTranscriptMutation: () => this.#observeVisibleTranscriptMutation(),
 						},
 						tool,
 						this.ctx.ui,
@@ -591,8 +648,10 @@ export class EventController {
 					component.setExpanded(this.ctx.toolOutputExpanded);
 					this.ctx.pendingTools.set(content.id, component);
 					addChatChild(this.ctx, component);
+					this.#recordVisibleTranscriptMutation();
 				} else {
 					this.ctx.pendingTools.get(content.id)?.updateArgs(renderArgs, content.id);
+					this.#consumeToolVisibleChange(this.ctx.pendingTools.get(content.id)!);
 				}
 
 				const args = content.arguments;
@@ -659,6 +718,7 @@ export class EventController {
 			if (this.ctx.streamingMessage.stopReason !== "aborted" && this.ctx.streamingMessage.stopReason !== "error") {
 				for (const [toolCallId, component] of this.ctx.pendingTools.entries()) {
 					component.setArgsComplete(toolCallId);
+					this.#consumeToolVisibleChange(component);
 				}
 			}
 			this.#lastAssistantComponent = this.ctx.streamingComponent;
@@ -685,6 +745,8 @@ export class EventController {
 					this.ctx.pendingTools.set(event.toolCallId, group);
 				}
 				this.ctx.ui.requestRender();
+				this.#consumeToolVisibleChange(this.ctx.pendingTools.get(event.toolCallId)!);
+
 				return;
 			}
 
@@ -698,6 +760,7 @@ export class EventController {
 					editFuzzyThreshold: settings.get("edit.fuzzyThreshold"),
 					editAllowFuzzy: settings.get("edit.fuzzyMatch"),
 					hashlineAutoDropPureInsertDuplicates: settings.get("edit.hashlineAutoDropPureInsertDuplicates"),
+					onVisibleTranscriptMutation: () => this.#observeVisibleTranscriptMutation(),
 				},
 				tool,
 				this.ctx.ui,
@@ -707,6 +770,8 @@ export class EventController {
 			component.setExpanded(this.ctx.toolOutputExpanded);
 			this.ctx.pendingTools.set(event.toolCallId, component);
 			addChatChild(this.ctx, component);
+			this.#recordVisibleTranscriptMutation();
+
 			this.ctx.ui.requestRender();
 		}
 	}
@@ -723,6 +788,8 @@ export class EventController {
 				!isFinalAsyncState,
 				event.toolCallId,
 			);
+			this.#consumeToolVisibleChange(component);
+
 			if (isFinalAsyncState) {
 				this.ctx.pendingTools.delete(event.toolCallId);
 				this.#backgroundToolCallIds.delete(event.toolCallId);
@@ -737,6 +804,8 @@ export class EventController {
 				const component = this.ctx.pendingTools.get(event.toolCallId);
 				if (component) {
 					component.updateResult({ ...event.result, isError: event.isError }, false, event.toolCallId);
+					this.#consumeToolVisibleChange(component);
+
 					this.ctx.pendingTools.delete(event.toolCallId);
 				}
 				const asyncState = (event.result.details as { async?: { state?: string } } | undefined)?.async?.state;
@@ -761,6 +830,8 @@ export class EventController {
 				const asyncState = (event.result.details as { async?: { state?: string } } | undefined)?.async?.state;
 				const isBackgroundRunning = asyncState === "running";
 				component.updateResult({ ...event.result, isError: event.isError }, isBackgroundRunning, event.toolCallId);
+				this.#consumeToolVisibleChange(component);
+
 				if (isBackgroundRunning) {
 					this.#backgroundToolCallIds.add(event.toolCallId);
 				} else {
@@ -776,6 +847,8 @@ export class EventController {
 				const asyncState = (event.result.details as { async?: { state?: string } } | undefined)?.async?.state;
 				const isBackgroundRunning = asyncState === "running";
 				component.updateResult({ ...event.result, isError: event.isError }, isBackgroundRunning, event.toolCallId);
+				this.#consumeToolVisibleChange(component);
+
 				if (isBackgroundRunning) {
 					this.#backgroundToolCallIds.add(event.toolCallId);
 				} else {
@@ -893,6 +966,12 @@ export class EventController {
 			} else if (event.willRetry && !isHandoffAction) {
 				this.ctx.showStatus("Context overflow maintenance completed");
 			}
+		} else if (
+			event.skipped &&
+			event.errorMessage?.startsWith("Context overflow recovery skipped: nothing eligible to compact.") &&
+			!isHandoffAction
+		) {
+			this.ctx.showStatus(event.errorMessage);
 		} else if (event.errorMessage) {
 			this.ctx.showWarning(event.errorMessage);
 		} else if (isHandoffAction) {
@@ -999,12 +1078,15 @@ export class EventController {
 		const component = new TtsrNotificationComponent(event.rules);
 		component.setExpanded(this.ctx.toolOutputExpanded);
 		addChatChild(this.ctx, component);
+		this.#recordVisibleTranscriptMutation();
+
 		this.ctx.ui.requestRender();
 	}
 
 	async #handleTodoReminder(event: Extract<AgentSessionEvent, { type: "todo_reminder" }>): Promise<void> {
 		const component = new TodoReminderComponent(event.todos, event.attempt, event.maxAttempts);
 		addChatChild(this.ctx, component);
+		this.#recordVisibleTranscriptMutation();
 		this.ctx.ui.requestRender();
 	}