@oh-my-pi/pi-coding-agent 15.9.67 → 15.10.1

package/src/modes/components/plan-toc.ts

@@ -0,0 +1,138 @@
+/**
+ * Pure heading/section parser for the plan-review overlay. It splits a plan's
+ * markdown into a flat list of sections — a leading preamble (text before the
+ * first heading) followed by one entry per ATX heading — preserving the exact
+ * source bytes of each section so the overlay can render, reorder-free delete,
+ * and round-trip the document without a full markdown re-render.
+ *
+ * No TUI dependencies: this module is unit-tested in isolation.
+ */
+
+/** ATX heading: 1-6 `#`, required whitespace, a title, optional closing `#`s. */
+const HEADING_RE = /^(#{1,6})[ \t]+(.+?)[ \t]*#*[ \t]*$/;
+/** Opening/closing code fence run (``` or ~~~), allowing up to 3 lead spaces. */
+const FENCE_RE = /^ {0,3}(`{3,}|~{3,})(.*)$/;
+
+export interface PlanSection {
+	/** `0` = preamble (no heading, no ToC entry); `1..6` = heading depth. */
+	level: number;
+	/** Plain-text heading label with inline markdown lightly stripped. */
+	title: string;
+	/** Exact source slice for this section, including its trailing newline(s). */
+	raw: string;
+}
+
+/**
+ * Collapse inline markdown emphasis/link/code syntax to readable text. This is
+ * a deliberately light strip (not a full markdown render) just so ToC entries
+ * read cleanly — `**Goal** & [docs](x)` becomes `Goal & docs`.
+ */
+export function stripInlineMarkdown(text: string): string {
+	let out = text;
+	// Images first (so the link pass below does not eat the `(url)`), then links.
+	out = out.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1");
+	out = out.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1");
+	out = out.replace(/\[([^\]]*)\]\[[^\]]*\]/g, "$1");
+	// Autolinks `<https://…>` keep their URL as the readable text.
+	out = out.replace(/<([^>\s]+)>/g, "$1");
+	// Inline code, then bold/italic/strikethrough emphasis runs.
+	out = out.replace(/`([^`]+)`/g, "$1");
+	out = out.replace(/(\*\*|__)(.+?)\1/g, "$2");
+	out = out.replace(/(\*|_)(.+?)\1/g, "$2");
+	out = out.replace(/~~(.+?)~~/g, "$1");
+	return out.replace(/\s+/g, " ").trim();
+}
+
+/**
+ * Split `text` into preamble + heading sections. `#` characters inside fenced
+ * code blocks are never treated as headings. Concatenating every section's
+ * `raw` reproduces the original text exactly.
+ */
+export function parsePlanSections(text: string): PlanSection[] {
+	const lines = text.split("\n");
+	// Character offset of each line start so section `raw` can slice the source.
+	const offsets: number[] = new Array(lines.length);
+	let cursor = 0;
+	for (let i = 0; i < lines.length; i++) {
+		offsets[i] = cursor;
+		cursor += lines[i]!.length + 1; // +1 for the "\n" join separator
+	}
+
+	// Heading line indices (start of each heading section), with metadata.
+	const heads: { line: number; level: number; title: string }[] = [];
+	let fenceChar: string | null = null;
+	let fenceLen = 0;
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i]!;
+		const fence = FENCE_RE.exec(line);
+		if (fenceChar === null) {
+			if (fence) {
+				fenceChar = fence[1]![0]!;
+				fenceLen = fence[1]!.length;
+			}
+			// Opening-fence lines are body, not headings.
+			if (fence) continue;
+		} else {
+			// Inside a fence: only a matching-or-longer run of the same char closes.
+			if (fence && fence[1]![0] === fenceChar && fence[1]!.length >= fenceLen && fence[2]!.trim() === "") {
+				fenceChar = null;
+				fenceLen = 0;
+			}
+			continue;
+		}
+		const heading = HEADING_RE.exec(line);
+		if (heading) {
+			heads.push({ line: i, level: heading[1]!.length, title: stripInlineMarkdown(heading[2]!) });
+		}
+	}
+
+	const sections: PlanSection[] = [];
+	const sliceRaw = (startLine: number, endLine: number): string => {
+		const startOffset = offsets[startLine]!;
+		const endOffset = endLine < lines.length ? offsets[endLine]! : text.length;
+		return text.slice(startOffset, endOffset);
+	};
+
+	// Preamble: everything before the first heading (only when non-empty).
+	const firstHeadLine = heads.length > 0 ? heads[0]!.line : lines.length;
+	if (firstHeadLine > 0) {
+		const raw = sliceRaw(0, firstHeadLine);
+		if (raw.length > 0) sections.push({ level: 0, title: "", raw });
+	}
+
+	for (let h = 0; h < heads.length; h++) {
+		const head = heads[h]!;
+		const endLine = h + 1 < heads.length ? heads[h + 1]!.line : lines.length;
+		sections.push({ level: head.level, title: head.title, raw: sliceRaw(head.line, endLine) });
+	}
+
+	return sections;
+}
+
+/**
+ * Concatenate every section's `raw` back into a single document and guarantee a
+ * single trailing newline. Inverse of {@link parsePlanSections} for any input
+ * that already ends with a newline.
+ */
+export function joinPlanSections(sections: readonly PlanSection[]): string {
+	let joined = "";
+	for (const section of sections) joined += section.raw;
+	if (joined.length === 0) return "";
+	return joined.endsWith("\n") ? joined : `${joined}\n`;
+}
+
+/**
+ * Indices to remove when deleting `sections[index]`: the heading itself plus
+ * every following section nested deeper than it (its sub-headings). The
+ * preamble (level 0) is never a deletion target and yields an empty span.
+ */
+export function sectionDeletionSpan(sections: readonly PlanSection[], index: number): number[] {
+	const target = sections[index];
+	if (!target || target.level === 0) return [];
+	const span = [index];
+	for (let j = index + 1; j < sections.length; j++) {
+		if (sections[j]!.level > target.level) span.push(j);
+		else break;
+	}
+	return span;
+}

package/src/modes/components/read-tool-group.ts

@@ -81,6 +81,14 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 	#text: Text;
 	#expanded = false;
 	#showContentPreview: boolean;
+	// A read group accretes entries across multiple assistant completions for as
+	// long as the run of reads is uninterrupted. While it is the active group it
+	// must stay in the transcript's repaintable live region — its header line
+	// re-layouts from `Read <path>` to `Read (N)` + tree as entries arrive, so a
+	// frozen snapshot taken on a risk terminal would strand the single-entry form
+	// (see TranscriptContainer / NativeScrollbackLiveRegion). The controller calls
+	// `finalize()` once the run breaks so the block can commit to native scrollback.
+	#finalized = false;
 
 	constructor(options: ReadToolGroupOptions = {}) {
 		super();
@@ -90,6 +98,14 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		this.#updateDisplay();
 	}
 
+	isTranscriptBlockFinalized(): boolean {
+		return this.#finalized;
+	}
+
+	finalize(): void {
+		this.#finalized = true;
+	}
+
 	updateArgs(args: ReadRenderArgs, toolCallId?: string): void {
 		if (!toolCallId) return;
 		const basePath = args.file_path || args.path || "";
@@ -181,9 +197,9 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 		const total = entriesWithoutPreview.length;
 		for (const [index, entry] of entriesWithoutPreview.entries()) {
 			const connector = index === total - 1 ? theme.tree.last : theme.tree.branch;
-			const statusSymbol = this.#formatStatus(entry.status);
+			const statusPrefix = entry.status === "success" ? "" : `${this.#formatStatus(entry.status)} `;
 			const pathDisplay = this.#formatPath(entry);
-			lines.push(`   ${theme.fg("dim", connector)} ${statusSymbol} ${pathDisplay}`.trimEnd());
+			lines.push(`   ${theme.fg("dim", connector)} ${statusPrefix}${pathDisplay}`.trimEnd());
 		}
 
 		this.#text.setText(lines.join("\n"));
@@ -198,7 +214,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 
 	/**
 	 * Add a code-cell content preview below the entry summary.
-	 * When collapsed: shows first COLLAPSED_PREVIEW_LINES lines with "… N more lines (Ctrl+O for more)" hint.
+	 * When collapsed: shows first COLLAPSED_PREVIEW_LINES lines with a "… N more lines ⟨<key>: Expand⟩" hint.
 	 * When expanded: shows full content.
 	 */
 	#addContentPreview(entry: ReadEntry): void {
@@ -254,7 +270,7 @@ export class ReadToolGroupComponent extends Container implements ToolExecutionHa
 
 	#formatStatus(status: ReadEntry["status"]): string {
 		if (status === "success") {
-			return theme.fg("success", theme.status.success);
+			return theme.fg("text", theme.status.enabled);
 		}
 		if (status === "warning") {
 			return theme.fg("warning", theme.status.warning);

package/src/modes/components/skill-message.ts

@@ -11,7 +11,6 @@ export class SkillMessageComponent extends Container {
 
 	constructor(private readonly message: CustomMessage<SkillPromptDetails>) {
 		super();
-		this.addChild(new Spacer(1));
 
 		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
 		this.#rebuild();

package/src/modes/components/status-line.ts

@@ -546,7 +546,7 @@ export class StatusLineComponent implements Component {
 		return `${modelId}|${sp.length}:${sp[0]?.length ?? 0}|${tools.length}|${skills.length}`;
 	}
 
-	#buildSegmentContext(width: number): SegmentContext {
+	#buildSegmentContext(width: number, segmentOptions: StatusLineSettings["segmentOptions"]): SegmentContext {
 		const state = this.session.state;
 
 		// Trigger background fetch (5-min TTL); render uses cached value
@@ -575,7 +575,7 @@ export class StatusLineComponent implements Component {
 		return {
 			session: this.session,
 			width,
-			options: this.#resolveSettings().segmentOptions ?? {},
+			options: segmentOptions ?? {},
 			planMode: this.#planModeStatus,
 			loopMode: this.#loopModeStatus,
 			goalMode: this.#goalModeStatus,
@@ -632,8 +632,8 @@ export class StatusLineComponent implements Component {
 	}
 
 	#buildStatusLine(width: number): string {
-		const ctx = this.#buildSegmentContext(width);
 		const effectiveSettings = this.#resolveSettings();
+		const ctx = this.#buildSegmentContext(width, effectiveSettings.segmentOptions);
 		const separatorDef = getSeparator(effectiveSettings.separator ?? "powerline-thin", theme);
 
 		const bgAnsi = theme.getBgAnsi("statusLineBg");
@@ -759,8 +759,6 @@ export class StatusLineComponent implements Component {
 			return leftGroup + (leftGroup && rightGroup ? " " : "") + rightGroup;
 		}
 
-		leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
-		rightWidth = groupWidth(right, rightCapWidth, rightSepWidth);
 		const gapWidth = Math.max(1, topFillWidth - leftWidth - rightWidth);
 		const sessionName =
 			effectiveSettings.sessionAccent !== false ? this.session.sessionManager?.getSessionName() : undefined;

package/src/modes/components/tips.txt

@@ -1,5 +1,6 @@
 Tired of typing "keep going"? Just send a '.'
 You can /btw to ask a side question
+Use /tan to fork the current conversation into a background agent
 Ctrl+D can be used to exit, but with your draft saved!
 Find out which model you emotionally abuse the most with `omp stats`
 Try task isolation to create CoW worktrees

package/src/modes/components/todo-reminder.ts

@@ -16,8 +16,6 @@ export class TodoReminderComponent extends Container {
 	) {
 		super();
 
-		this.addChild(new Spacer(1));
-
 		this.#box = new Box(1, 1, t => theme.inverse(theme.fg("warning", t)));
 		this.addChild(this.#box);
 

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

@@ -31,26 +31,12 @@ import {
 	renderJsonTreeLines,
 } from "../../tools/json-tree";
 import { formatExpandHint, replaceTabs, resolveImageOptions, truncateToWidth } from "../../tools/render-utils";
-import { toolRenderers } from "../../tools/renderers";
+import { type ToolRenderer, toolRenderers } from "../../tools/renderers";
 import { TODO_STRIKE_TOTAL_FRAMES } from "../../tools/todo";
 import { isFramedBlockComponent, renderStatusLine } from "../../tui";
 import { sanitizeWithOptionalSixelPassthrough } from "../../utils/sixel";
 import { renderDiff } from "./diff";
 
-function ensureInvalidate(component: unknown): Component {
-	const c = component as { render: Component["render"]; invalidate?: () => void };
-	if (!c.invalidate) {
-		c.invalidate = () => {};
-	}
-	return c as Component;
-}
-
-function addBoxChild(box: Box, component: unknown): boolean {
-	const child = ensureInvalidate(component);
-	box.addChild(child);
-	return isFramedBlockComponent(child);
-}
-
 /**
  * Drop trailing removal/hunk-header lines that appear in a streaming diff
  * before the matching `+added` lines have arrived. Without this, a partial
@@ -147,12 +133,12 @@ export interface ToolExecutionHandle {
 	setExpanded(expanded: boolean): void;
 }
 
-/** Drive pending-tool redraws at ~60fps so the animated border sweep is smooth.
- * The TUI already throttles at its 16ms `MIN_RENDER_INTERVAL_MS`, so this is the
- * natural upper bound and static frames diff to a no-op redraw at ~zero cost. */
-const SPINNER_RENDER_INTERVAL_MS = 16;
+/** Drive pending-tool redraws at 30fps so the animated border sweep stays
+ * smooth without spending twice the frame budget. The TUI throttles at the same
+ * cadence, and static frames diff to a no-op redraw at ~zero cost. */
+const SPINNER_RENDER_INTERVAL_MS = 1000 / 30;
 /** Advance the spinner glyph at its classic ~12.5fps step, decoupled from the
- * 60fps render cadence (mirrors `Loader`). */
+ * render cadence (mirrors `Loader`). */
 const SPINNER_GLYPH_ADVANCE_MS = 80;
 
 // Stable per-instance counter so each tool execution's inline images get a
@@ -239,11 +225,13 @@ export class ToolExecutionComponent extends Container {
 		this.#cwd = cwd;
 		this.#args = args;
 
-		this.addChild(new Spacer(1));
-
-		// Always create both - contentBox for custom tools/bash/tools with renderers, contentText for other built-ins
-		this.#contentBox = new Box(1, 1, (text: string) => theme.bg("toolPendingBg", text));
-		this.#contentText = new Text("", 1, 1, (text: string) => theme.bg("toolPendingBg", text));
+		// Always create both - contentBox for custom tools/bash/tools with renderers, contentText for other built-ins.
+		// paddingY is 1 so background-tinted blocks (custom/extension tools and the
+		// generic fallback) get top/bottom breathing room. TranscriptContainer
+		// strips PLAIN-blank edges, so framed/minimal blocks (no bg set) drop these
+		// lines and keep their tight spacing — only tinted lines survive.
+		this.#contentBox = new Box(0, 1);
+		this.#contentText = new Text("", 1, 1);
 
 		// Use Box for custom tools or built-in tools that have renderers
 		const hasRenderer = toolName in toolRenderers;
@@ -433,26 +421,43 @@ export class ToolExecutionComponent extends Container {
 	#updateSpinnerAnimation(): void {
 		// Spinner for: task tool with partial result, or edit/write while args streaming
 		const isStreamingArgs = !this.#argsComplete && (isEditLikeToolName(this.#toolName) || this.#toolName === "write");
-		const isBackgroundAsyncTask =
-			this.#toolName === "task" &&
+		const isBackgroundAsyncRunning =
 			(this.#result?.details as { async?: { state?: string } } | undefined)?.async?.state === "running";
+		const isBackgroundAsyncTask = this.#toolName === "task" && isBackgroundAsyncRunning;
 		const isPartialTask = this.#isPartial && this.#toolName === "task" && !isBackgroundAsyncTask;
-		// Sweep the border of bash/eval execution blocks while they're pending.
+		// Sweep the border of bash/eval execution blocks while they're pending — but
+		// not once they've been backgrounded: a backgrounded job's block gets
+		// committed to scrollback and finalizes later via the async update path, so a
+		// mid-sweep frame would freeze a stray dark "bar" segment into the border.
 		const isPendingExecBlock =
-			this.#isPartial && shimmerEnabled() && (this.#toolName === "bash" || this.#toolName === "eval");
+			this.#isPartial &&
+			shimmerEnabled() &&
+			(this.#toolName === "bash" || this.#toolName === "eval") &&
+			!isBackgroundAsyncRunning;
 		const needsSpinner = isStreamingArgs || isPartialTask || isPendingExecBlock;
 		if (needsSpinner && !this.#spinnerInterval) {
-			this.#lastSpinnerAdvanceAt = performance.now();
+			const now = performance.now();
+			const frameCount = theme.spinnerFrames.length;
+			this.#lastSpinnerAdvanceAt = now;
+			if (frameCount > 0 && this.#spinnerFrame === undefined) {
+				this.#spinnerFrame = 0;
+				this.#renderState.spinnerFrame = 0;
+			}
 			this.#spinnerInterval = setInterval(() => {
 				const now = performance.now();
 				const frameCount = theme.spinnerFrames.length;
-				// Redraw at ~60fps for a smooth border sweep, but only step the spinner
-				// glyph at its classic ~12.5fps cadence. The TUI throttles renders at
-				// 16ms and the differ drops no-op redraws, so the extra ticks are free.
-				if (frameCount > 0 && now - this.#lastSpinnerAdvanceAt >= SPINNER_GLYPH_ADVANCE_MS) {
-					this.#spinnerFrame = ((this.#spinnerFrame ?? -1) + 1) % frameCount;
-					this.#renderState.spinnerFrame = this.#spinnerFrame;
-					this.#lastSpinnerAdvanceAt = now;
+				// Redraw at 30fps for a smooth border sweep, but keep the spinner
+				// glyph phase-locked to its classic ~12.5fps cadence. Advancing the
+				// anchor by elapsed frames instead of resetting to `now` avoids the
+				// 30fps timer quantizing the glyph down to one step every three ticks.
+				if (frameCount > 0) {
+					const elapsed = now - this.#lastSpinnerAdvanceAt;
+					if (elapsed >= SPINNER_GLYPH_ADVANCE_MS) {
+						const steps = Math.floor(elapsed / SPINNER_GLYPH_ADVANCE_MS);
+						this.#spinnerFrame = ((this.#spinnerFrame ?? 0) + steps) % frameCount;
+						this.#renderState.spinnerFrame = this.#spinnerFrame;
+						this.#lastSpinnerAdvanceAt += steps * SPINNER_GLYPH_ADVANCE_MS;
+					}
 				}
 				this.#ui.requestRender();
 			}, SPINNER_RENDER_INTERVAL_MS);
@@ -524,6 +529,39 @@ export class ToolExecutionComponent extends Container {
 		return (this.#result.details as { async?: { state?: string } } | undefined)?.async?.state === "running";
 	}
 
+	/**
+	 * While a tool's preview is still streaming, a block whose preview is
+	 * append-only (rows only grow at the bottom, never re-layout) lets the
+	 * renderer commit the scrolled-off head of an over-tall preview to native
+	 * scrollback instead of dropping it — the same anti-yank path a streaming
+	 * assistant reply uses (see {@link TranscriptContainer} +
+	 * `NativeScrollbackLiveRegion`). Covers both phases: a pre-result call preview
+	 * (a `write` whose content streams in) and a partial-result preview that
+	 * streams output below fixed input (an `eval`/`bash` whose stdout grows under
+	 * its code cell). Gated on {@link isTranscriptBlockFinalized} so the boundary
+	 * closes the instant the block reaches a terminal state — a final result that
+	 * may collapse to a compact view, a backgrounded async tool, or a seal — and
+	 * the renderer decides whether its current preview shape qualifies via
+	 * `isStreamingPreviewAppendOnly` (typically: only the expanded full view,
+	 * which is top-anchored; the collapsed tail window re-layouts but is bounded
+	 * so it never overflows anyway).
+	 */
+	isTranscriptBlockAppendOnly(): boolean {
+		// A finalized block's preview can collapse/re-layout; only a live,
+		// still-streaming block is a candidate.
+		if (this.isTranscriptBlockFinalized()) return false;
+		const predicate =
+			(this.#tool as { isStreamingPreviewAppendOnly?: ToolRenderer["isStreamingPreviewAppendOnly"] } | undefined)
+				?.isStreamingPreviewAppendOnly ?? toolRenderers[this.#toolName]?.isStreamingPreviewAppendOnly;
+		if (!predicate) return false;
+		try {
+			return predicate(this.#getCallArgsForRender(), this.#renderState, this.#result);
+		} catch (err) {
+			logger.warn("Tool append-only predicate failed", { tool: this.#toolName, error: String(err) });
+			return false;
+		}
+	}
+
 	/**
 	 * Mark the tool terminal even though no result arrived (the turn aborted or
 	 * abandoned it) and stop animating, so it can freeze and stops pinning the
@@ -568,49 +606,49 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	#updateDisplay(): void {
-		// Set background based on state
-		const bgFn = this.#isPartial
-			? (text: string) => theme.bg("toolPendingBg", text)
-			: this.#result?.isError
-				? (text: string) => theme.bg("toolErrorBg", text)
-				: (text: string) => theme.bg("toolSuccessBg", text);
-
 		// Sync shared mutable render state for component closures
 		this.#renderState.expanded = this.#expanded;
 		this.#renderState.isPartial = this.#isPartial;
 		this.#renderState.spinnerFrame = this.#spinnerFrame;
 
+		// Non-self-framing tools (custom/extension renderers and the generic
+		// fallback) get a padded, state-tinted block — built-ins that draw their
+		// own frame opt out below via the framed-component mark.
+		const stateBgKey = this.#isPartial ? "toolPendingBg" : this.#result?.isError ? "toolErrorBg" : "toolSuccessBg";
+		const stateBgFn = (t: string) => theme.bg(stateBgKey, t);
+
 		// Check for custom tool rendering
 		if (this.#tool && (this.#tool.renderCall || this.#tool.renderResult)) {
 			const tool = this.#tool;
 			const mergeCallAndResult = Boolean((tool as { mergeCallAndResult?: boolean }).mergeCallAndResult);
 			// Custom tools use Box for flexible component rendering
-			const inline = Boolean((tool as { inline?: boolean }).inline);
-			this.#contentBox.setBgFn(inline ? undefined : bgFn);
+			this.#contentBox.setBgFn(undefined);
 			this.#contentBox.clear();
-			let contentBoxHasFramedBlock = false;
 			// Mirror the built-in renderer branch so custom renderers (notably the
 			// task tool, whose live instance routes through here) receive the same
 			// render context — e.g. the `hasResult` flag that suppresses the task
 			// call preview once result lines exist.
 			this.#renderState.renderContext = this.#buildRenderContext();
 
-			// Render call component
+			// Render call component. The fallback label only stands in for a
+			// missing `renderCall`; when the call is intentionally suppressed
+			// (mergeCallAndResult once a result exists) we render nothing here so
+			// the result component isn't preceded by a redundant tool-name line.
 			const shouldRenderCall = !this.#result || !mergeCallAndResult;
-			if (shouldRenderCall && tool.renderCall) {
-				try {
-					const callComponent = tool.renderCall(this.#getCallArgsForRender(), this.#renderState, theme);
-					if (callComponent) {
-						contentBoxHasFramedBlock = addBoxChild(this.#contentBox, callComponent) || contentBoxHasFramedBlock;
+			if (shouldRenderCall) {
+				if (tool.renderCall) {
+					try {
+						const callComponent = tool.renderCall(this.#getCallArgsForRender(), this.#renderState, theme);
+						if (callComponent) this.#contentBox.addChild(callComponent as Component);
+					} catch (err) {
+						logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
+						// Fall back to default on error
+						this.#contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
 					}
-				} catch (err) {
-					logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
-					// Fall back to default on error
-					addBoxChild(this.#contentBox, new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
+				} else {
+					// No custom renderCall, show tool name
+					this.#contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
 				}
-			} else {
-				// No custom renderCall, show tool name
-				addBoxChild(this.#contentBox, new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
 			}
 
 			// Render result component if we have a result
@@ -632,25 +670,27 @@ export class ToolExecutionComponent extends Container {
 						theme,
 						this.#args,
 					);
-					if (resultComponent) {
-						contentBoxHasFramedBlock = addBoxChild(this.#contentBox, resultComponent) || contentBoxHasFramedBlock;
-					}
+					if (resultComponent) this.#contentBox.addChild(resultComponent);
 				} catch (err) {
 					logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
 					// Fall back to showing raw output on error
 					const output = this.#getTextOutput();
 					if (output) {
-						addBoxChild(this.#contentBox, new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
+						this.#contentBox.addChild(new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
 					}
 				}
 			} else if (this.#result) {
 				// Has result but no custom renderResult
 				const output = this.#getTextOutput();
 				if (output) {
-					addBoxChild(this.#contentBox, new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
+					this.#contentBox.addChild(new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
 				}
 			}
-			this.#contentBox.setPaddingX(contentBoxHasFramedBlock ? 0 : 1);
+			// Custom tools that draw their own frame (task) render flush; plain
+			// extension renderers get the padded, state-tinted block back.
+			const customFramed = this.#contentBox.children.some(isFramedBlockComponent);
+			this.#contentBox.setPaddingX(customFramed ? 0 : 1);
+			this.#contentBox.setBgFn(customFramed ? undefined : stateBgFn);
 		} else if (this.#toolName in toolRenderers) {
 			// Built-in tools with renderers
 			const renderer = toolRenderers[this.#toolName];
@@ -669,7 +709,6 @@ export class ToolExecutionComponent extends Container {
 				// Multi-file: render each file as its own Box (identical to separate tool calls)
 				this.#contentBox.setBgFn(undefined);
 				this.#contentBox.clear();
-				this.#contentBox.setPaddingX(1);
 
 				const renderContext = this.#buildRenderContext();
 				this.#renderState.renderContext = renderContext;
@@ -681,20 +720,14 @@ export class ToolExecutionComponent extends Container {
 						this.#multiFileBoxes.push(spacer);
 						this.addChild(spacer);
 					}
-					const fileBgFn = fileResult.isError
-						? (text: string) => theme.bg("toolErrorBg", text)
-						: (text: string) => theme.bg("toolSuccessBg", text);
-					const fileBox = new Box(1, 1, fileBgFn);
+					const fileBox = new Box(0, 0);
 					try {
 						const resultComponent = renderer.renderResult(
 							{ content: [], details: fileResult, isError: fileResult.isError },
 							this.#renderState,
 							theme,
 						);
-						if (resultComponent) {
-							const fileBoxHasFramedBlock = addBoxChild(fileBox, resultComponent);
-							fileBox.setPaddingX(fileBoxHasFramedBlock ? 0 : 1);
-						}
+						if (resultComponent) fileBox.addChild(resultComponent);
 					} catch (err) {
 						logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
 					}
@@ -711,7 +744,7 @@ export class ToolExecutionComponent extends Container {
 					const pendingSpacer = new Spacer(1);
 					this.#multiFileBoxes.push(pendingSpacer);
 					this.addChild(pendingSpacer);
-					const pendingBox = new Box(1, 1, (text: string) => theme.bg("toolPendingBg", text));
+					const pendingBox = new Box(0, 0);
 					const pendingText = renderStatusLine(
 						{
 							icon: "pending",
@@ -727,9 +760,8 @@ export class ToolExecutionComponent extends Container {
 			} else {
 				// Single-file or no result: standard rendering
 				// Inline renderers skip background styling
-				this.#contentBox.setBgFn(renderer.inline ? undefined : bgFn);
+				this.#contentBox.setBgFn(undefined);
 				this.#contentBox.clear();
-				let contentBoxHasFramedBlock = false;
 
 				const renderContext = this.#buildRenderContext();
 				this.#renderState.renderContext = renderContext;
@@ -739,14 +771,11 @@ export class ToolExecutionComponent extends Container {
 					// Render call component
 					try {
 						const callComponent = renderer.renderCall(this.#getCallArgsForRender(), this.#renderState, theme);
-						if (callComponent) {
-							contentBoxHasFramedBlock =
-								addBoxChild(this.#contentBox, callComponent) || contentBoxHasFramedBlock;
-						}
+						if (callComponent) this.#contentBox.addChild(callComponent);
 					} catch (err) {
 						logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
 						// Fall back to default on error
-						addBoxChild(this.#contentBox, new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
+						this.#contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
 					}
 				}
 
@@ -763,24 +792,20 @@ export class ToolExecutionComponent extends Container {
 							theme,
 							this.#getCallArgsForRender(),
 						);
-						if (resultComponent) {
-							contentBoxHasFramedBlock =
-								addBoxChild(this.#contentBox, resultComponent) || contentBoxHasFramedBlock;
-						}
+						if (resultComponent) this.#contentBox.addChild(resultComponent);
 					} catch (err) {
 						logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
 						// Fall back to showing raw output on error
 						const output = this.#getTextOutput();
 						if (output) {
-							addBoxChild(this.#contentBox, new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
+							this.#contentBox.addChild(new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
 						}
 					}
 				}
-				this.#contentBox.setPaddingX(contentBoxHasFramedBlock ? 0 : 1);
 			}
 		} else {
 			// Other built-in tools: use Text directly with caching
-			this.#contentText.setCustomBgFn(bgFn);
+			this.#contentText.setCustomBgFn(stateBgFn);
 			this.#contentText.setText(this.#formatToolExecution());
 		}