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

package/src/modes/components/model-selector.ts

@@ -6,6 +6,7 @@ import {
 	getKeybindings,
 	Input,
 	matchesKey,
+	ScrollView,
 	Spacer,
 	type Tab,
 	TabBar,
@@ -13,6 +14,7 @@ import {
 	type TUI,
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
+import { formatNumber } from "@oh-my-pi/pi-utils";
 import type { ModelRegistry } from "../../config/model-registry";
 import { getKnownRoleIds, getRoleInfo, MODEL_ROLE_IDS, MODEL_ROLES } from "../../config/model-registry";
 import { resolveModelRoleValue } from "../../config/model-resolver";
@@ -147,6 +149,7 @@ export class ModelSelectorComponent extends Container {
 	#tui: TUI;
 	#scopedModels: ReadonlyArray<ScopedModelItem>;
 	#temporaryOnly: boolean;
+	#currentContextTokens: number;
 
 	#menuRoleActions: MenuRoleAction[] = [];
 
@@ -172,7 +175,7 @@ export class ModelSelectorComponent extends Container {
 		scopedModels: ReadonlyArray<ScopedModelItem>,
 		onSelect: RoleSelectCallback,
 		onCancel: () => void,
-		options?: { temporaryOnly?: boolean; initialSearchInput?: string },
+		options?: { temporaryOnly?: boolean; initialSearchInput?: string; currentContextTokens?: number },
 	) {
 		super();
 
@@ -183,6 +186,9 @@ export class ModelSelectorComponent extends Container {
 		this.#onSelectCallback = onSelect;
 		this.#onCancelCallback = onCancel;
 		this.#temporaryOnly = options?.temporaryOnly ?? false;
+		const currentContextTokens = options?.currentContextTokens ?? 0;
+		this.#currentContextTokens =
+			Number.isFinite(currentContextTokens) && currentContextTokens > 0 ? Math.floor(currentContextTokens) : 0;
 		const initialSearchInput = options?.initialSearchInput;
 
 		// Initialize menu role actions (built-in + custom from settings)
@@ -215,8 +221,8 @@ export class ModelSelectorComponent extends Container {
 			this.#searchInput.setValue(initialSearchInput);
 		}
 		this.#searchInput.onSubmit = () => {
-			// Enter on search input opens menu if we have a selection
-			if (this.#filteredModels[this.#selectedIndex]) {
+			// Enter on search input opens menu if we have an enabled selection
+			if (this.#getSelectedItem()) {
 				this.#openMenu();
 			}
 		};
@@ -460,7 +466,11 @@ export class ModelSelectorComponent extends Container {
 		this.#filteredModels = models;
 		this.#canonicalModels = canonicalModels;
 		this.#filteredCanonicalModels = canonicalModels;
-		this.#selectedIndex = Math.min(this.#selectedIndex, Math.max(0, models.length - 1));
+		const visibleModels = this.#isCanonicalTab() ? canonicalModels : models;
+		this.#selectedIndex = this.#coerceSelectedIndex(
+			Math.min(this.#selectedIndex, Math.max(0, visibleModels.length - 1)),
+			visibleModels,
+		);
 	}
 
 	async #loadModels(): Promise<void> {
@@ -626,6 +636,74 @@ export class ModelSelectorComponent extends Container {
 		return this.#getActiveTabId() === CANONICAL_TAB;
 	}
 
+	#isModelOverContextLimit(model: Model): boolean {
+		const contextWindow = model.contextWindow ?? 0;
+		return this.#currentContextTokens > 0 && contextWindow > 0 && this.#currentContextTokens > contextWindow;
+	}
+
+	#isItemDisabled(item: ModelItem | CanonicalModelItem): boolean {
+		return this.#isModelOverContextLimit(item.model);
+	}
+
+	#formatContextLimitSuffix(model: Model): string {
+		if (!this.#isModelOverContextLimit(model)) {
+			return "";
+		}
+		return ` ${theme.status.disabled} context>${formatNumber(model.contextWindow).toLowerCase()}`;
+	}
+
+	#getVisibleItems(): ReadonlyArray<ModelItem | CanonicalModelItem> {
+		return this.#isCanonicalTab() ? this.#filteredCanonicalModels : this.#filteredModels;
+	}
+
+	#coerceSelectedIndex(
+		index: number,
+		visibleItems: ReadonlyArray<ModelItem | CanonicalModelItem> = this.#getVisibleItems(),
+	): number {
+		const maxIndex = visibleItems.length - 1;
+		if (maxIndex < 0) {
+			return 0;
+		}
+		const clamped = Math.max(0, Math.min(index, maxIndex));
+		const clampedItem = visibleItems[clamped];
+		if (clampedItem && !this.#isItemDisabled(clampedItem)) {
+			return clamped;
+		}
+		for (let i = clamped + 1; i <= maxIndex; i++) {
+			const item = visibleItems[i];
+			if (item && !this.#isItemDisabled(item)) {
+				return i;
+			}
+		}
+		for (let i = clamped - 1; i >= 0; i--) {
+			const item = visibleItems[i];
+			if (item && !this.#isItemDisabled(item)) {
+				return i;
+			}
+		}
+		return clamped;
+	}
+
+	#moveSelection(delta: number): void {
+		const visibleItems = this.#getVisibleItems();
+		const count = visibleItems.length;
+		if (count === 0) {
+			return;
+		}
+		let index = this.#selectedIndex;
+		for (let step = 0; step < count; step++) {
+			index = (index + delta + count) % count;
+			const item = visibleItems[index];
+			if (item && !this.#isItemDisabled(item)) {
+				this.#selectedIndex = index;
+				this.#updateList();
+				return;
+			}
+		}
+		this.#selectedIndex = this.#coerceSelectedIndex(this.#selectedIndex, visibleItems);
+		this.#updateList();
+	}
+
 	#filterModels(query: string): void {
 		const activeTabId = this.#getActiveTabId();
 		const activeProviderId = this.#getActiveProviderId();
@@ -696,8 +774,11 @@ export class ModelSelectorComponent extends Container {
 			this.#filteredCanonicalModels = baseCanonicalModels;
 		}
 
-		const visibleCount = isCanonicalTab ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
-		this.#selectedIndex = Math.min(this.#selectedIndex, Math.max(0, visibleCount - 1));
+		const visibleItems = isCanonicalTab ? this.#filteredCanonicalModels : this.#filteredModels;
+		this.#selectedIndex = this.#coerceSelectedIndex(
+			Math.min(this.#selectedIndex, Math.max(0, visibleItems.length - 1)),
+			visibleItems,
+		);
 		this.#updateList();
 	}
 
@@ -778,6 +859,7 @@ export class ModelSelectorComponent extends Container {
 
 		const showProvider = this.#getActiveTabId() === ALL_TAB;
 
+		const rows: string[] = [];
 		// Show visible slice of filtered models
 		for (let i = startIndex; i < endIndex; i++) {
 			const item = visibleItems[i];
@@ -786,6 +868,8 @@ export class ModelSelectorComponent extends Container {
 			const providerItem = isCanonicalTab ? undefined : (item as ModelItem);
 
 			const isSelected = i === this.#selectedIndex;
+			const isDisabled = this.#isItemDisabled(item);
+			const disabledSuffix = this.#formatContextLimitSuffix(item.model);
 
 			// Build role badges (inverted: color as background, black text)
 			const roleBadgeTokens: string[] = [];
@@ -815,34 +899,42 @@ export class ModelSelectorComponent extends Container {
 				if (isCanonicalTab) {
 					const variants = theme.fg("dim", ` [${canonicalItem?.variantCount ?? 0}]`);
 					const backing = theme.fg("dim", ` -> ${item.model.provider}/${item.model.id}`);
-					line = `${prefix}${theme.fg("accent", item.id)}${variants}${backing}${badgeText}`;
+					line = `${prefix}${theme.fg("accent", item.id)}${variants}${backing}${badgeText}${disabledSuffix}`;
 				} else if (showProvider) {
 					const providerPrefix = theme.fg("dim", `${providerItem?.provider ?? ""}/`);
-					line = `${prefix}${providerPrefix}${theme.fg("accent", providerItem?.id ?? item.id)}${badgeText}`;
+					line = `${prefix}${providerPrefix}${theme.fg("accent", providerItem?.id ?? item.id)}${badgeText}${disabledSuffix}`;
 				} else {
-					line = `${prefix}${theme.fg("accent", item.id)}${badgeText}`;
+					line = `${prefix}${theme.fg("accent", item.id)}${badgeText}${disabledSuffix}`;
 				}
 			} else {
 				const prefix = "  ";
 				if (isCanonicalTab) {
 					const variants = theme.fg("dim", ` [${canonicalItem?.variantCount ?? 0}]`);
 					const backing = theme.fg("dim", ` -> ${item.model.provider}/${item.model.id}`);
-					line = `${prefix}${item.id}${variants}${backing}${badgeText}`;
+					line = `${prefix}${item.id}${variants}${backing}${badgeText}${disabledSuffix}`;
 				} else if (showProvider) {
 					const providerPrefix = theme.fg("dim", `${providerItem?.provider ?? ""}/`);
-					line = `${prefix}${providerPrefix}${providerItem?.id ?? item.id}${badgeText}`;
+					line = `${prefix}${providerPrefix}${providerItem?.id ?? item.id}${badgeText}${disabledSuffix}`;
 				} else {
-					line = `${prefix}${item.id}${badgeText}`;
+					line = `${prefix}${item.id}${badgeText}${disabledSuffix}`;
 				}
 			}
 
-			this.#listContainer.addChild(new Text(line, 0, 0));
+			if (isDisabled) {
+				line = theme.fg("dim", Bun.stripANSI(line));
+			}
+			rows.push(line);
 		}
 
-		// Add scroll indicator if needed
-		if (startIndex > 0 || endIndex < visibleItems.length) {
-			const scrollInfo = theme.fg("muted", `  (${this.#selectedIndex + 1}/${visibleItems.length})`);
-			this.#listContainer.addChild(new Text(scrollInfo, 0, 0));
+		if (rows.length > 0) {
+			const sv = new ScrollView(rows, {
+				height: rows.length,
+				scrollbar: "auto",
+				totalRows: visibleItems.length,
+				theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+			});
+			sv.setScrollOffset(startIndex);
+			this.#listContainer.addChild(sv);
 		}
 
 		// Show error message or "no results" if empty
@@ -863,8 +955,14 @@ export class ModelSelectorComponent extends Container {
 			const suffix = isCanonicalTab
 				? ` (${selected.model.provider}/${selected.model.id}, ${(selected as CanonicalModelItem).variantCount} variants)`
 				: "";
+			const limitWarning = this.#isItemDisabled(selected)
+				? theme.fg(
+						"dim",
+						` — current context ${formatNumber(this.#currentContextTokens).toLowerCase()} > ${formatNumber(selected.model.contextWindow).toLowerCase()} limit`,
+					)
+				: "";
 			this.#listContainer.addChild(
-				new Text(theme.fg("muted", `  Model Name: ${selected.model.name}${suffix}`), 0, 0),
+				new Text(theme.fg("muted", `  Model Name: ${selected.model.name}${suffix}`) + limitWarning, 0, 0),
 			);
 		}
 	}
@@ -890,7 +988,8 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	#openMenu(): void {
-		if (!this.#getSelectedItem()) return;
+		const selectedItem = this.#getSelectedItem();
+		if (!selectedItem || this.#isItemDisabled(selectedItem)) return;
 
 		this.#isMenuOpen = true;
 		this.#menuStep = "role";
@@ -978,26 +1077,20 @@ export class ModelSelectorComponent extends Container {
 
 		// Up arrow - navigate list (wrap to bottom when at top)
 		if (matchesSelectUp(keyData)) {
-			const itemCount = this.#isCanonicalTab() ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
-			if (itemCount === 0) return;
-			this.#selectedIndex = this.#selectedIndex === 0 ? itemCount - 1 : this.#selectedIndex - 1;
-			this.#updateList();
+			this.#moveSelection(-1);
 			return;
 		}
 
 		// Down arrow - navigate list (wrap to top when at bottom)
 		if (matchesSelectDown(keyData)) {
-			const itemCount = this.#isCanonicalTab() ? this.#filteredCanonicalModels.length : this.#filteredModels.length;
-			if (itemCount === 0) return;
-			this.#selectedIndex = this.#selectedIndex === itemCount - 1 ? 0 : this.#selectedIndex + 1;
-			this.#updateList();
+			this.#moveSelection(1);
 			return;
 		}
 
 		// Enter - open context menu or select directly in temporary mode
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selectedItem = this.#getSelectedItem();
-			if (selectedItem) {
+			if (selectedItem && !this.#isItemDisabled(selectedItem)) {
 				if (this.#temporaryOnly) {
 					// In temporary mode, skip menu and select directly
 					this.#handleSelect(selectedItem, null);
@@ -1020,7 +1113,7 @@ export class ModelSelectorComponent extends Container {
 	}
 	#handleMenuInput(keyData: string): void {
 		const selectedItem = this.#getSelectedItem();
-		if (!selectedItem) return;
+		if (!selectedItem || this.#isItemDisabled(selectedItem)) return;
 
 		const optionCount =
 			this.#menuStep === "thinking" && this.#menuSelectedRole !== null
@@ -1079,6 +1172,9 @@ export class ModelSelectorComponent extends Container {
 		role: string | null,
 		thinkingLevel?: ConfiguredThinkingLevel,
 	): void {
+		if (this.#isItemDisabled(item)) {
+			return;
+		}
 		// For temporary role, don't save to settings - just notify caller
 		if (role === null) {
 			this.#onSelectCallback(item.model, null, undefined, item.selector);

package/src/modes/components/oauth-selector.ts

@@ -1,6 +1,14 @@
 import { getOAuthProviders } from "@oh-my-pi/pi-ai/utils/oauth";
 import type { OAuthProviderInfo } from "@oh-my-pi/pi-ai/utils/oauth/types";
-import { Container, extractPrintableText, fuzzyFilter, matchesKey, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
+import {
+	Container,
+	extractPrintableText,
+	fuzzyFilter,
+	matchesKey,
+	ScrollView,
+	Spacer,
+	TruncatedText,
+} from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import type { AuthStorage } from "../../session/auth-storage";
@@ -162,14 +170,10 @@ export class OAuthSelectorComponent extends Container {
 		return this.#isSearchEnabled() || this.#searchQuery.length > 0;
 	}
 
-	#renderStatusLine(total: number): string {
-		const selectedCount = total === 0 ? 0 : this.#selectedIndex + 1;
-		const count =
-			this.#searchQuery.trim() && total !== this.#allProviders.length
-				? `${selectedCount}/${total} of ${this.#allProviders.length}`
-				: `${selectedCount}/${total}`;
-		const suffix = this.#searchQuery.trim() ? `  Search: ${this.#searchQuery}` : "  Type to search";
-		return theme.fg("muted", `  (${count})${suffix}`);
+	#renderStatusLine(_total: number): string {
+		const query = this.#searchQuery.trim();
+		const suffix = query ? `Search: ${this.#searchQuery}` : "Type to search";
+		return theme.fg("muted", `  ${suffix}`);
 	}
 
 	#getProviderSearchText(provider: OAuthProviderInfo): string {
@@ -223,6 +227,7 @@ export class OAuthSelectorComponent extends Container {
 				: Math.max(0, Math.min(this.#selectedIndex - Math.floor(maxVisible / 2), total - maxVisible));
 		const endIndex = Math.min(startIndex + maxVisible, total);
 
+		const rows: string[] = [];
 		for (let i = startIndex; i < endIndex; i++) {
 			const provider = this.#filteredProviders[i];
 			if (!provider) continue;
@@ -239,11 +244,22 @@ export class OAuthSelectorComponent extends Container {
 				const text = isAvailable ? `  ${provider.name}` : theme.fg("dim", `  ${provider.name}`);
 				line = text + statusIndicator;
 			}
-			this.#listContainer.addChild(new TruncatedText(line, 0, 0));
+			rows.push(line);
 		}
 
-		// Scroll/search indicator when list is windowed or searchable
-		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus()) {
+		if (rows.length > 0) {
+			const sv = new ScrollView(rows, {
+				height: rows.length,
+				scrollbar: "auto",
+				totalRows: total,
+				theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+			});
+			sv.setScrollOffset(startIndex);
+			this.#listContainer.addChild(sv);
+		}
+
+		// Search status line (scrollbar covers overflow indication)
+		if (this.#shouldRenderSearchStatus()) {
 			this.#listContainer.addChild(new TruncatedText(this.#renderStatusLine(total), 0, 0));
 		}
 

package/src/modes/components/session-observer-overlay.ts

@@ -15,7 +15,7 @@
  *   - Enter on main session -> close overlay (jump back)
  */
 import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
-import { Container, Markdown, type MarkdownTheme, matchesKey } from "@oh-my-pi/pi-tui";
+import { Container, Markdown, type MarkdownTheme, matchesKey, ScrollView } from "@oh-my-pi/pi-tui";
 import { formatDuration, formatNumber, logger } from "@oh-my-pi/pi-utils";
 import type { KeyId } from "../../config/keybindings";
 import { isSilentAbort } from "../../session/messages";
@@ -230,23 +230,21 @@ export class SessionObserverOverlayComponent extends Container {
 		lines.push(...new DynamicBorder().render(width));
 
 		// --- Scrolled content viewport ---
-		const visibleLines = this.#renderedLines.slice(this.#scrollOffset, this.#scrollOffset + this.#viewportHeight);
-		for (const vl of visibleLines) {
-			lines.push(` ${vl}`);
-		}
-		// Pad to fill viewport if content is shorter
-		const pad = this.#viewportHeight - visibleLines.length;
-		for (let i = 0; i < pad; i++) {
-			lines.push("");
-		}
+		const sv = new ScrollView(
+			this.#renderedLines.slice(this.#scrollOffset, this.#scrollOffset + this.#viewportHeight),
+			{
+				height: this.#viewportHeight,
+				scrollbar: "auto",
+				totalRows: this.#renderedLines.length,
+				theme: { track: t => theme.fg("dim", t), thumb: t => theme.fg("accent", t) },
+			},
+		);
+		sv.setScrollOffset(this.#scrollOffset);
+		for (const row of sv.render(Math.max(1, width - 1))) lines.push(` ${row}`);
 
 		// --- Footer ---
-		const scrollInfo =
-			this.#renderedLines.length > this.#viewportHeight
-				? ` ${theme.fg("dim", `[${this.#scrollOffset + 1}-${Math.min(this.#scrollOffset + this.#viewportHeight, this.#renderedLines.length)}/${this.#renderedLines.length}]`)}`
-				: "";
 		lines.push("");
-		lines.push(` ${this.#viewerFooterLines[0] ?? ""}${scrollInfo}`);
+		lines.push(` ${this.#viewerFooterLines[0] ?? ""}`);
 		for (let i = 1; i < this.#viewerFooterLines.length; i++) {
 			lines.push(` ${this.#viewerFooterLines[i]}`);
 		}

package/src/modes/components/session-selector.ts

@@ -6,6 +6,7 @@ import {
 	matchesKey,
 	padding,
 	replaceTabs,
+	ScrollView,
 	Spacer,
 	Text,
 	truncateToWidth,
@@ -247,6 +248,11 @@ class SessionList implements Component {
 		const endIndex = Math.min(startIndex + maxVisible, this.#filteredSessions.length);
 
 		// Render visible sessions (3 lines, or 4 when a title adds a preview line).
+		// Each session block is built into sessionLines, then wrapped by ScrollView
+		// so the right-edge scrollbar is proportional at the physical-line level.
+		const sessionLines: string[] = [];
+		const overflow = this.#filteredSessions.length > maxVisible;
+		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
 		for (let i = startIndex; i < endIndex; i++) {
 			const session = this.#filteredSessions[i];
 			const isSelected = i === this.#selectedIndex;
@@ -258,22 +264,22 @@ class SessionList implements Component {
 			const cursorSymbol = `${theme.nav.cursor} `;
 			const cursorWidth = visibleWidth(cursorSymbol);
 			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(cursorWidth);
-			const maxWidth = width - cursorWidth; // Account for cursor width
+			const maxWidth = rowWidth - cursorWidth; // Account for cursor width
 
 			if (session.title) {
 				// Has title: show title on first line, dimmed first message on second line
 				const truncatedTitle = truncateToWidth(session.title, maxWidth);
 				const titleLine = cursor + (isSelected ? theme.bold(truncatedTitle) : truncatedTitle);
-				lines.push(titleLine);
+				sessionLines.push(titleLine);
 
 				// Second line: dimmed first message preview
 				const truncatedPreview = truncateToWidth(normalizedMessage, maxWidth);
-				lines.push(`  ${theme.fg("dim", truncatedPreview)}`);
+				sessionLines.push(`  ${theme.fg("dim", truncatedPreview)}`);
 			} else {
 				// No title: show first message as main line
 				const truncatedMsg = truncateToWidth(normalizedMessage, maxWidth);
 				const messageLine = cursor + (isSelected ? theme.bold(truncatedMsg) : truncatedMsg);
-				lines.push(messageLine);
+				sessionLines.push(messageLine);
 			}
 
 			// Metadata line: date + file size + lifecycle status (+ project dir in
@@ -290,18 +296,23 @@ class SessionList implements Component {
 			if (this.#showCwd && session.cwd) {
 				metadata += ` ${dot} ${dim(shortenPath(session.cwd))}`;
 			}
-			const metadataLine = truncateToWidth(metadata, width);
+			const metadataLine = truncateToWidth(metadata, rowWidth);
 
-			lines.push(metadataLine);
-			lines.push(""); // Blank line between sessions
+			sessionLines.push(metadataLine);
+			sessionLines.push(""); // Blank line between sessions
 		}
 
-		// Add scroll indicator if needed
-		if (startIndex > 0 || endIndex < this.#filteredSessions.length) {
-			const scrollText = `  (${this.#selectedIndex + 1}/${this.#filteredSessions.length})`;
-			const scrollInfo = theme.fg("muted", truncateToWidth(scrollText, width));
-			lines.push(scrollInfo);
-		}
+		// Wrap the rendered window in a ScrollView for a proportional right-edge bar.
+		const visibleCount = endIndex - startIndex;
+		const linesPerItem = visibleCount > 0 ? sessionLines.length / visibleCount : 1;
+		const sv = new ScrollView(sessionLines, {
+			height: sessionLines.length,
+			scrollbar: "auto",
+			totalRows: Math.round(this.#filteredSessions.length * linesPerItem),
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		sv.setScrollOffset(Math.round(startIndex * linesPerItem));
+		lines.push(...sv.render(width));
 
 		// Add keybinding hint
 		lines.push("");

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

@@ -33,7 +33,7 @@ import {
 import { formatExpandHint, replaceTabs, resolveImageOptions, truncateToWidth } from "../../tools/render-utils";
 import { toolRenderers } from "../../tools/renderers";
 import { TODO_STRIKE_TOTAL_FRAMES } from "../../tools/todo";
-import { renderStatusLine } from "../../tui";
+import { isFramedBlockComponent, renderStatusLine } from "../../tui";
 import { sanitizeWithOptionalSixelPassthrough } from "../../utils/sixel";
 import { renderDiff } from "./diff";
 
@@ -45,6 +45,12 @@ function ensureInvalidate(component: unknown): Component {
 	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
@@ -107,7 +113,7 @@ function rawTextInputFromPartialJson(partialJson: unknown): string | undefined {
 	// Function-tool arguments stream as JSON. Custom/free-form tools stream raw
 	// text in the same transport field; only the raw form is a valid fallback for
 	// the conventional `input` parameter.
-	if (first === "{" || first === "[" || first === '"') return undefined;
+	if (first === "{" || first === '"') return undefined;
 	return partialJson;
 }
 
@@ -582,6 +588,7 @@ export class ToolExecutionComponent extends Container {
 			const inline = Boolean((tool as { inline?: boolean }).inline);
 			this.#contentBox.setBgFn(inline ? undefined : bgFn);
 			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
@@ -594,16 +601,16 @@ export class ToolExecutionComponent extends Container {
 				try {
 					const callComponent = tool.renderCall(this.#getCallArgsForRender(), this.#renderState, theme);
 					if (callComponent) {
-						this.#contentBox.addChild(ensureInvalidate(callComponent));
+						contentBoxHasFramedBlock = addBoxChild(this.#contentBox, callComponent) || contentBoxHasFramedBlock;
 					}
 				} 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));
+					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));
+				addBoxChild(this.#contentBox, new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
 			}
 
 			// Render result component if we have a result
@@ -626,23 +633,24 @@ export class ToolExecutionComponent extends Container {
 						this.#args,
 					);
 					if (resultComponent) {
-						this.#contentBox.addChild(ensureInvalidate(resultComponent));
+						contentBoxHasFramedBlock = addBoxChild(this.#contentBox, resultComponent) || contentBoxHasFramedBlock;
 					}
 				} 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) {
-						this.#contentBox.addChild(new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
+						addBoxChild(this.#contentBox, 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) {
-					this.#contentBox.addChild(new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
+					addBoxChild(this.#contentBox, new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
 				}
 			}
+			this.#contentBox.setPaddingX(contentBoxHasFramedBlock ? 0 : 1);
 		} else if (this.#toolName in toolRenderers) {
 			// Built-in tools with renderers
 			const renderer = toolRenderers[this.#toolName];
@@ -661,6 +669,7 @@ 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;
@@ -683,7 +692,8 @@ export class ToolExecutionComponent extends Container {
 							theme,
 						);
 						if (resultComponent) {
-							fileBox.addChild(ensureInvalidate(resultComponent));
+							const fileBoxHasFramedBlock = addBoxChild(fileBox, resultComponent);
+							fileBox.setPaddingX(fileBoxHasFramedBlock ? 0 : 1);
 						}
 					} catch (err) {
 						logger.warn("Tool renderer failed", { tool: this.#toolName, error: String(err) });
@@ -719,6 +729,7 @@ export class ToolExecutionComponent extends Container {
 				// Inline renderers skip background styling
 				this.#contentBox.setBgFn(renderer.inline ? undefined : bgFn);
 				this.#contentBox.clear();
+				let contentBoxHasFramedBlock = false;
 
 				const renderContext = this.#buildRenderContext();
 				this.#renderState.renderContext = renderContext;
@@ -729,12 +740,13 @@ export class ToolExecutionComponent extends Container {
 					try {
 						const callComponent = renderer.renderCall(this.#getCallArgsForRender(), this.#renderState, theme);
 						if (callComponent) {
-							this.#contentBox.addChild(ensureInvalidate(callComponent));
+							contentBoxHasFramedBlock =
+								addBoxChild(this.#contentBox, callComponent) || contentBoxHasFramedBlock;
 						}
 					} 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));
+						addBoxChild(this.#contentBox, new Text(theme.fg("toolTitle", theme.bold(this.#toolLabel)), 0, 0));
 					}
 				}
 
@@ -752,17 +764,19 @@ export class ToolExecutionComponent extends Container {
 							this.#getCallArgsForRender(),
 						);
 						if (resultComponent) {
-							this.#contentBox.addChild(ensureInvalidate(resultComponent));
+							contentBoxHasFramedBlock =
+								addBoxChild(this.#contentBox, resultComponent) || contentBoxHasFramedBlock;
 						}
 					} 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) {
-							this.#contentBox.addChild(new Text(theme.fg("toolOutput", replaceTabs(output)), 0, 0));
+							addBoxChild(this.#contentBox, 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