droid-style 1.0.0

package/README.md

@@ -0,0 +1,34 @@
+# Droid-style extension
+
+A "droid" look for pi:
+
+- a boxed input editor
+- custom tool-call badges for the built-in tools
+- compact tool-call spacing (one blank line between consecutive calls)
+
+## Features
+
+- Closed rectangular input box (Unicode box drawing)
+- Light gray input border (`#c0c0c0`)
+- Prompt styling:
+  - `>` uses the current theme's accent color
+  - `!` / `!!` (bash modes) use a bright green prompt
+- Slash-command autocomplete dropdown is rendered in a bordered droid-style panel
+  - selected row uses droid orange
+  - footer hint shows navigation keys and visible range
+- Droid-style tool-call badges for: `read`, `write`, `edit`, `ls`, `find`, `grep`, `bash` (badge bg: `#feb17f`)
+- Assistant responses are prefixed with `•` in `#a35626`
+- Auto-activates the `droid` theme on session start
+
+## Installation
+
+1. Copy to `~/.pi/agent/extensions/droid-style/`
+2. Reload extensions (`/reload`) or restart pi
+
+The `droid` theme is bundled in this extension (`themes/droid.json`) and is discovered automatically.
+
+## Notes
+
+- Tool badges are implemented by **overriding** the built-in tools via `pi.registerTool()` (last registration wins).
+- Assistant/user message styling uses prototype patching to inject `•` / `›` prefixes.
+- Tool block spacing is compacted via prototype patching of `ToolExecutionComponent`.

package/ansi.ts

@@ -0,0 +1,90 @@
+// Shared ANSI helpers for the droid-style extension
+
+// Strip ANSI escape codes
+export function stripAnsi(str: string): string {
+	return str
+		.replace(/\x1b\[[0-9;]*[a-zA-Z]/g, "")
+		.replace(/\x1b\]8;;[^\x07]*\x07/g, "")
+		.replace(/\x1b_[^\x07\x1b]*(?:\x07|\x1b\\)/g, "");
+}
+
+// ------------------------------------------------------------
+// Color helpers (truecolor + 256color fallback)
+// ------------------------------------------------------------
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+	const cleaned = hex.replace("#", "");
+	const r = Number.parseInt(cleaned.slice(0, 2), 16);
+	const g = Number.parseInt(cleaned.slice(2, 4), 16);
+	const b = Number.parseInt(cleaned.slice(4, 6), 16);
+	return { r, g, b };
+}
+
+const CUBE_VALUES = [0, 95, 135, 175, 215, 255];
+const GRAY_VALUES = Array.from({ length: 24 }, (_, i) => 8 + i * 10);
+
+function colorDistance(r1: number, g1: number, b1: number, r2: number, g2: number, b2: number): number {
+	const dr = r1 - r2;
+	const dg = g1 - g2;
+	const db = b1 - b2;
+	return dr * dr * 0.299 + dg * dg * 0.587 + db * db * 0.114;
+}
+
+function findClosestCubeIndex(value: number): number {
+	let minDist = Number.POSITIVE_INFINITY;
+	let minIdx = 0;
+	for (let i = 0; i < CUBE_VALUES.length; i++) {
+		const dist = Math.abs(value - CUBE_VALUES[i]!);
+		if (dist < minDist) {
+			minDist = dist;
+			minIdx = i;
+		}
+	}
+	return minIdx;
+}
+
+function findClosestGrayIndex(gray: number): number {
+	let minDist = Number.POSITIVE_INFINITY;
+	let minIdx = 0;
+	for (let i = 0; i < GRAY_VALUES.length; i++) {
+		const dist = Math.abs(gray - GRAY_VALUES[i]!);
+		if (dist < minDist) {
+			minDist = dist;
+			minIdx = i;
+		}
+	}
+	return minIdx;
+}
+
+function rgbTo256(r: number, g: number, b: number): number {
+	const rIdx = findClosestCubeIndex(r);
+	const gIdx = findClosestCubeIndex(g);
+	const bIdx = findClosestCubeIndex(b);
+	const cubeR = CUBE_VALUES[rIdx]!;
+	const cubeG = CUBE_VALUES[gIdx]!;
+	const cubeB = CUBE_VALUES[bIdx]!;
+	const cubeIndex = 16 + 36 * rIdx + 6 * gIdx + bIdx;
+	const cubeDist = colorDistance(r, g, b, cubeR, cubeG, cubeB);
+
+	const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+	const grayIdx = findClosestGrayIndex(gray);
+	const grayValue = GRAY_VALUES[grayIdx]!;
+	const grayIndex = 232 + grayIdx;
+	const grayDist = colorDistance(r, g, b, grayValue, grayValue, grayValue);
+
+	const spread = Math.max(r, g, b) - Math.min(r, g, b);
+	if (spread < 10 && grayDist < cubeDist) {
+		return grayIndex;
+	}
+	return cubeIndex;
+}
+
+export function fgHex(theme: any, hex: string, text: string): string {
+	const { r, g, b } = hexToRgb(hex);
+	const mode = typeof theme?.getColorMode === "function" ? theme.getColorMode() : "truecolor";
+	if (mode === "256color") {
+		const idx = rgbTo256(r, g, b);
+		return `\x1b[38;5;${idx}m${text}\x1b[39m`;
+	}
+	return `\x1b[38;2;${r};${g};${b}m${text}\x1b[39m`;
+}

package/editor/box-editor.ts

@@ -0,0 +1,262 @@
+import { CustomEditor } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+
+import { fgHex, stripAnsi } from "../ansi.js";
+
+const INPUT_BORDER_COLOR = "#c0c0c0";
+const BASH_PROMPT_COLOR = "#05ff03";
+
+const SLASH_SELECTED_COLOR = "#d26825";
+const SLASH_COMMAND_COLOR = "#e8dcc0";
+const SLASH_DESCRIPTION_COLOR = "#8f8a85";
+const SLASH_HINT_COLOR = "#8f8a85";
+
+type SlashAutocompleteItem = {
+	value?: string;
+	label?: string;
+	description?: string;
+};
+
+type SlashAutocompleteModel = {
+	items: SlashAutocompleteItem[];
+	selectedIndex: number;
+	maxVisible: number;
+	showSlashPrefix: boolean;
+};
+
+function isBorderLine(line: string): boolean {
+	const clean = stripAnsi(line).replace(/\s/g, "");
+	return clean.replace(/─/g, "") === "";
+}
+
+function findLastBorderIndex(lines: string[]): number {
+	for (let i = lines.length - 1; i >= 0; i--) {
+		if (isBorderLine(lines[i] ?? "")) return i;
+	}
+	return -1;
+}
+
+function stripBashPrefix(line: string): string {
+	if (line.startsWith("!!")) return line.slice(2);
+	if (line.startsWith("!")) return line.slice(1);
+	return line;
+}
+
+function normalizeSingleLine(text: string): string {
+	return text.replace(/[\r\n]+/g, " ").trim();
+}
+
+function clamp(value: number, min: number, max: number): number {
+	return Math.max(min, Math.min(max, value));
+}
+
+export class BoxEditor extends CustomEditor {
+	constructor(
+		tui: any,
+		theme: any,
+		kb: any,
+		private readonly fullTheme: any,
+	) {
+		super(tui, theme, kb);
+	}
+
+	private color(hex: string, text: string): string {
+		return this.fullTheme ? fgHex(this.fullTheme, hex, text) : text;
+	}
+
+	private getSlashAutocompleteModel(): SlashAutocompleteModel | null {
+		const editorState = (this as any)?.state as
+			| {
+					lines?: string[];
+					cursorLine?: number;
+					cursorCol?: number;
+			  }
+			| undefined;
+		if (!editorState || !Array.isArray(editorState.lines)) return null;
+
+		const cursorLine = typeof editorState.cursorLine === "number" ? editorState.cursorLine : 0;
+		const cursorCol = typeof editorState.cursorCol === "number" ? editorState.cursorCol : 0;
+		const currentLine = editorState.lines[cursorLine] ?? "";
+		const textBeforeCursor = currentLine.slice(0, Math.max(0, cursorCol));
+
+		const trimmedBeforeCursor = textBeforeCursor.trimStart();
+		if (cursorLine !== 0 || !trimmedBeforeCursor.startsWith("/")) return null;
+
+		const autocompleteState = (this as any)?.autocompleteState;
+		const autocompleteList = (this as any)?.autocompleteList as
+			| {
+					filteredItems?: SlashAutocompleteItem[];
+					selectedIndex?: number;
+					maxVisible?: number;
+			  }
+			| undefined;
+
+		if (!autocompleteState || !autocompleteList) return null;
+
+		const items = Array.isArray(autocompleteList.filteredItems) ? autocompleteList.filteredItems : [];
+		const selectedIndex = clamp(
+			typeof autocompleteList.selectedIndex === "number" ? autocompleteList.selectedIndex : 0,
+			0,
+			Math.max(0, items.length - 1),
+		);
+		const maxVisible = clamp(
+			typeof autocompleteList.maxVisible === "number" ? autocompleteList.maxVisible : 6,
+			1,
+			20,
+		);
+
+		return {
+			items,
+			selectedIndex,
+			maxVisible,
+			showSlashPrefix: !trimmedBeforeCursor.includes(" "),
+		};
+	}
+
+	private formatSlashAutocompleteRow(
+		item: SlashAutocompleteItem,
+		isSelected: boolean,
+		width: number,
+		showSlashPrefix: boolean,
+	): string {
+		const rawCommand = normalizeSingleLine(item.label || item.value || "");
+		const command =
+			showSlashPrefix && rawCommand.length > 0 && !rawCommand.startsWith("/") ? `/${rawCommand}` : rawCommand;
+		const description = typeof item.description === "string" ? normalizeSingleLine(item.description) : "";
+		const prefix = isSelected ? "> " : "  ";
+		const prefixWidth = visibleWidth(prefix);
+
+		if (description && width > 40) {
+			const maxCommandWidth = Math.min(30, Math.max(8, width - prefixWidth - 10));
+			const commandText = truncateToWidth(command, maxCommandWidth, "");
+			const spacing = " ".repeat(Math.max(1, 32 - visibleWidth(commandText)));
+			const remaining = width - prefixWidth - visibleWidth(commandText) - visibleWidth(spacing);
+
+			if (remaining > 8) {
+				const descriptionText = truncateToWidth(description, remaining, "");
+				if (isSelected) {
+					return this.color(SLASH_SELECTED_COLOR, `${prefix}${commandText}${spacing}${descriptionText}`);
+				}
+				const commandColored = this.color(SLASH_COMMAND_COLOR, commandText);
+				const descriptionColored = this.color(SLASH_DESCRIPTION_COLOR, `${spacing}${descriptionText}`);
+				return `${prefix}${commandColored}${descriptionColored}`;
+			}
+		}
+
+		const commandOnly = truncateToWidth(command, Math.max(1, width - prefixWidth), "");
+		if (isSelected) return this.color(SLASH_SELECTED_COLOR, `${prefix}${commandOnly}`);
+		return `${prefix}${this.color(SLASH_COMMAND_COLOR, commandOnly)}`;
+	}
+
+	private renderSlashAutocomplete(width: number, border: (text: string) => string): string[] | null {
+		const model = this.getSlashAutocompleteModel();
+		if (!model) return null;
+
+		const totalItems = model.items.length;
+		const innerWidth = Math.max(1, width - 2);
+
+		const startIndex =
+			totalItems > 0
+				? Math.max(
+						0,
+						Math.min(
+							model.selectedIndex - Math.floor(model.maxVisible / 2),
+							Math.max(0, totalItems - model.maxVisible),
+						),
+				  )
+				: 0;
+		const endIndex = Math.min(startIndex + model.maxVisible, totalItems);
+		const visibleItems = model.items.slice(startIndex, endIndex);
+
+		const lines: string[] = [];
+		lines.push(" ".repeat(width));
+
+		lines.push(border(`╭${"─".repeat(innerWidth)}╮`));
+		if (visibleItems.length === 0) {
+			const noMatch = this.color(SLASH_DESCRIPTION_COLOR, "  No matching commands");
+			const paddedNoMatch = `${noMatch}${" ".repeat(Math.max(0, innerWidth - visibleWidth(noMatch)))}`;
+			lines.push(`${border("│")}${paddedNoMatch}${border("│")}`);
+		} else {
+			for (let i = 0; i < visibleItems.length; i++) {
+				const item = visibleItems[i];
+				if (!item) continue;
+
+				const itemIndex = startIndex + i;
+				const row = this.formatSlashAutocompleteRow(
+					item,
+					itemIndex === model.selectedIndex,
+					innerWidth,
+					model.showSlashPrefix,
+				);
+				const paddedRow = `${row}${" ".repeat(Math.max(0, innerWidth - visibleWidth(row)))}`;
+				lines.push(`${border("│")}${paddedRow}${border("│")}`);
+			}
+		}
+		lines.push(border(`╰${"─".repeat(innerWidth)}╯`));
+
+		const shownStart = visibleItems.length > 0 ? startIndex + 1 : 0;
+		const shownEnd = startIndex + visibleItems.length;
+		const hint = ` Use ↑↓ to navigate, Tab/Enter to select, Esc to cancel • Showing ${shownStart}-${shownEnd} of ${totalItems}`;
+		const coloredHint = this.color(SLASH_HINT_COLOR, hint);
+		const truncatedHint = visibleWidth(coloredHint) > width ? truncateToWidth(coloredHint, width, "") : coloredHint;
+		lines.push(`${truncatedHint}${" ".repeat(Math.max(0, width - visibleWidth(truncatedHint)))}`);
+
+		return lines;
+	}
+
+	render(width: number): string[] {
+		const innerWidth = Math.max(1, width - 2);
+		const border = this.fullTheme
+			? (text: string) => fgHex(this.fullTheme, INPUT_BORDER_COLOR, text)
+			: this.borderColor;
+
+		const text = this.getText();
+		const isBashMode = text.startsWith("!");
+		const isDoubleBang = text.startsWith("!!");
+
+		const promptChar = isDoubleBang ? "!!" : isBashMode ? "!" : ">";
+		const prompt = this.fullTheme
+			? isBashMode
+				? fgHex(this.fullTheme, BASH_PROMPT_COLOR, promptChar)
+				: this.fullTheme.fg("accent", ">")
+			: promptChar;
+		const promptPrefix = ` ${prompt} `;
+		const prefixWidth = visibleWidth(promptPrefix);
+		const contentWidth = Math.max(1, innerWidth - prefixWidth);
+
+		const parentLines = super.render(contentWidth);
+		if (parentLines.length === 0) return parentLines;
+
+		const bottomBorderIndex = findLastBorderIndex(parentLines);
+		const rawContentLines =
+			bottomBorderIndex > 0 ? parentLines.slice(1, bottomBorderIndex) : parentLines.slice(1);
+		const autocompleteLines = bottomBorderIndex >= 0 ? parentLines.slice(bottomBorderIndex + 1) : [];
+
+		const displayLines = rawContentLines.length > 0 ? [...rawContentLines] : [""];
+		if (isBashMode && displayLines[0]) {
+			displayLines[0] = stripBashPrefix(displayLines[0]);
+		}
+
+		const boxedLines = displayLines.map((line, index) => {
+			const prefix = index === 0 ? promptPrefix : " ".repeat(prefixWidth);
+			const lineWidth = visibleWidth(line);
+			const padding = " ".repeat(Math.max(0, contentWidth - lineWidth));
+			return `${border("│")}${prefix}${line}${padding}${border("│")}`;
+		});
+
+		const topBorder = border(`╭${"─".repeat(innerWidth)}╮`);
+		const bottomBorder = border(`╰${"─".repeat(innerWidth)}╯`);
+
+		const customSlashAutocomplete = this.renderSlashAutocomplete(width, border);
+		if (customSlashAutocomplete) {
+			return [topBorder, ...boxedLines, bottomBorder, ...customSlashAutocomplete];
+		}
+
+		const paddedAutocomplete = autocompleteLines.map((line) => {
+			const padding = " ".repeat(Math.max(0, width - visibleWidth(line)));
+			return `${line}${padding}`;
+		});
+
+		return [topBorder, ...boxedLines, bottomBorder, ...paddedAutocomplete];
+	}
+}

package/index.ts

@@ -0,0 +1,40 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+
+import { BoxEditor } from "./editor/box-editor.js";
+import { installAssistantMessagePrefix } from "./messages/assistant-prefix.js";
+import { installUserMessagePrefix } from "./messages/user-prefix.js";
+import { installCompactToolSpacing } from "./tool-tags/compact-tool-spacing.js";
+import { registerToolCallTags } from "./tool-tags/register-tool-call-tags.js";
+
+const baseDir = dirname(fileURLToPath(import.meta.url));
+
+export default function (pi: ExtensionAPI) {
+	installCompactToolSpacing();
+
+	pi.on("resources_discover", () => {
+		return {
+			themePaths: [join(baseDir, "themes", "droid.json")],
+		};
+	});
+
+	pi.on("session_start", (_event, ctx) => {
+		// Auto-activate droid theme. resources_discover runs after session_start,
+		// so retry on next tick if the first switch fails.
+		const tryApplyTheme = () => ctx.ui.setTheme("droid").success;
+		if (!tryApplyTheme()) {
+			setTimeout(() => {
+				tryApplyTheme();
+			}, 0);
+		}
+
+		registerToolCallTags(pi);
+		installAssistantMessagePrefix(ctx.ui.theme);
+		installUserMessagePrefix(ctx.ui.theme);
+
+		ctx.ui.setEditorComponent((tui, theme, kb) => {
+			return new BoxEditor(tui, theme, kb, ctx.ui.theme ?? theme);
+		});
+	});
+}

package/messages/assistant-prefix.ts

@@ -0,0 +1,232 @@
+import { AssistantMessageComponent } from "@mariozechner/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
+
+import { fgHex, stripAnsi } from "../ansi.js";
+
+const ASSISTANT_PREFIX = "•";
+const ASSISTANT_PREFIX_COLOR = "#feb17f";
+
+let activeTheme: any = null;
+let isPatched = false;
+
+function buildPrefixSegment(): string {
+	return activeTheme ? fgHex(activeTheme, ASSISTANT_PREFIX_COLOR, ASSISTANT_PREFIX) : ASSISTANT_PREFIX;
+}
+
+function readAnsiToken(text: string, index: number): string | undefined {
+	if (text[index] !== "\x1b") return undefined;
+	const tail = text.slice(index);
+	// CSI sequences: \x1b[...m (colors, cursor, etc.)
+	const csi = tail.match(/^\x1b\[[0-9;?]*[ -/]*[@-~]/)?.[0];
+	if (csi) return csi;
+	// OSC sequences: \x1b]...\x07 (hyperlinks, window title, etc.)
+	const osc = tail.match(/^\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/)?.[0];
+	return osc;
+}
+
+function dropLeadingColumns(line: string, columns: number): string {
+	if (columns <= 0 || line.length === 0) return line;
+
+	let i = 0;
+	let dropped = 0;
+	let leadingAnsi = "";
+
+	while (i < line.length && dropped < columns) {
+		const ansi = readAnsiToken(line, i);
+		if (ansi) {
+			leadingAnsi += ansi;
+			i += ansi.length;
+			continue;
+		}
+
+		const codePoint = line.codePointAt(i);
+		if (codePoint === undefined) break;
+		const charLen = codePoint > 0xffff ? 2 : 1;
+		const char = line.slice(i, i + charLen);
+		i += charLen;
+		dropped += Math.max(1, visibleWidth(char));
+	}
+
+	return `${leadingAnsi}${line.slice(i)}`;
+}
+
+function startsWithVisibleSpace(line: string): boolean {
+	if (!line) return false;
+
+	let i = 0;
+	while (i < line.length) {
+		const ansi = readAnsiToken(line, i);
+		if (ansi) {
+			i += ansi.length;
+			continue;
+		}
+
+		const codePoint = line.codePointAt(i);
+		if (codePoint === undefined) return false;
+		const charLen = codePoint > 0xffff ? 2 : 1;
+		const char = line.slice(i, i + charLen);
+		return char === " ";
+	}
+
+	return false;
+}
+
+function composePrefixedLine(line: string): string {
+	const prefix = buildPrefixSegment();
+	if (!line) return `${prefix} `;
+	return startsWithVisibleSpace(line) ? `${prefix}${line}` : `${prefix} ${line}`;
+}
+
+function isVisibleTextBlock(contentBlock: any): boolean {
+	return (
+		contentBlock?.type === "text" &&
+		typeof contentBlock.text === "string" &&
+		contentBlock.text.trim().length > 0
+	);
+}
+
+function isVisibleThinkingBlock(contentBlock: any): boolean {
+	return (
+		contentBlock?.type === "thinking" &&
+		typeof contentBlock.thinking === "string" &&
+		contentBlock.thinking.trim().length > 0
+	);
+}
+
+function hasVisibleAssistantContent(contentBlocks: any[]): boolean {
+	return contentBlocks.some((contentBlock) => isVisibleTextBlock(contentBlock) || isVisibleThinkingBlock(contentBlock));
+}
+
+function isToolCallOnlyAssistantMessage(message: any): boolean {
+	if (!message || !Array.isArray(message.content)) return false;
+	const contentBlocks = message.content as any[];
+	if (hasVisibleAssistantContent(contentBlocks)) return false;
+	return contentBlocks.some((contentBlock) => contentBlock?.type === "toolCall");
+}
+
+function prefixFirstNonEmptyLine(lines: string[], width: number): string[] {
+	if (width <= 0 || lines.length === 0) return lines;
+
+	const compactPrefixBase = composePrefixedLine("");
+	const compactPrefix =
+		visibleWidth(compactPrefixBase) > width ? truncateToWidth(compactPrefixBase, width, "") : compactPrefixBase;
+	const output = [...lines];
+
+	let targetIndex = -1;
+	for (let i = 0; i < output.length; i++) {
+		const clean = stripAnsi(output[i] ?? "");
+		if (clean.trim().length > 0) {
+			targetIndex = i;
+			break;
+		}
+	}
+
+	if (targetIndex === -1) return [compactPrefix];
+
+	const remainder = dropLeadingColumns(output[targetIndex] ?? "", 1); // drop 1-column left padding from Markdown/Text
+	output[targetIndex] = composePrefixedLine(remainder);
+
+	return output.map((renderedLine) =>
+		visibleWidth(renderedLine) > width ? truncateToWidth(renderedLine, width, "") : renderedLine,
+	);
+}
+
+export function installAssistantMessagePrefix(theme: any): void {
+	activeTheme = theme;
+	if (isPatched) return;
+	isPatched = true;
+
+	const baseUpdateContent = (AssistantMessageComponent.prototype as any).updateContent;
+	if (typeof baseUpdateContent === "function") {
+		(AssistantMessageComponent.prototype as any).updateContent = function patchedAssistantUpdateContent(message: any): void {
+			baseUpdateContent.call(this, message);
+
+			if (!message || !Array.isArray(message.content)) return;
+
+			const contentBlocks = message.content as Array<any>;
+			const firstTextIndex = contentBlocks.findIndex((contentBlock) => isVisibleTextBlock(contentBlock));
+			if (firstTextIndex === -1) return;
+
+			const hasThinkingBeforeText = contentBlocks
+				.slice(0, firstTextIndex)
+				.some((contentBlock) => isVisibleThinkingBlock(contentBlock));
+			if (!hasThinkingBeforeText) return;
+
+			const hasVisibleContent = contentBlocks.some(
+				(contentBlock) => isVisibleTextBlock(contentBlock) || isVisibleThinkingBlock(contentBlock),
+			);
+			let childIndex = hasVisibleContent ? 1 : 0; // leading Spacer(1)
+			let targetChild: any = undefined;
+
+			for (let i = 0; i < contentBlocks.length; i++) {
+				const contentBlock = contentBlocks[i];
+				if (isVisibleTextBlock(contentBlock)) {
+					if (i === firstTextIndex) {
+						targetChild = this?.contentContainer?.children?.[childIndex];
+						break;
+					}
+					childIndex += 1;
+				} else if (isVisibleThinkingBlock(contentBlock)) {
+					childIndex += 1; // thinking component
+					const hasVisibleContentAfter = contentBlocks
+						.slice(i + 1)
+						.some((nextBlock) => isVisibleTextBlock(nextBlock) || isVisibleThinkingBlock(nextBlock));
+					if (hasVisibleContentAfter) childIndex += 1; // inter-block Spacer(1)
+				}
+			}
+
+			if (!targetChild || typeof targetChild.render !== "function") return;
+
+			const childState = targetChild as any;
+			if (childState.__droidAssistantResponsePrefixPatched) return;
+			childState.__droidAssistantResponsePrefixPatched = true;
+
+			const baseChildRender = targetChild.render.bind(targetChild);
+			targetChild.render = (width: number): string[] => {
+				const lines = baseChildRender(width);
+				return prefixFirstNonEmptyLine(lines, width);
+			};
+		};
+	}
+
+	const baseRender = AssistantMessageComponent.prototype.render;
+
+	AssistantMessageComponent.prototype.render = function patchedAssistantMessageRender(width: number): string[] {
+		const lines = baseRender.call(this, width);
+		if (width <= 0) return lines;
+
+		const compactPrefixBase = composePrefixedLine("");
+		const compactPrefix =
+			visibleWidth(compactPrefixBase) > width ? truncateToWidth(compactPrefixBase, width, "") : compactPrefixBase;
+
+		if (lines.length === 0) {
+			// Render standalone prefix only for finalized tool-call-only assistant turns.
+			// During normal streaming startup (before thinking/text arrives), keep empty.
+			return isToolCallOnlyAssistantMessage((this as any)?.lastMessage) ? [compactPrefix] : lines;
+		}
+
+		const output = [...lines];
+		const startIndex = lines.length > 1 ? 1 : 0; // preserve leading spacer line
+
+		let targetIndex = -1;
+		for (let i = startIndex; i < output.length; i++) {
+			const clean = stripAnsi(output[i] ?? "");
+			if (clean.trim().length > 0) {
+				targetIndex = i;
+				break;
+			}
+		}
+
+		if (targetIndex === -1) {
+			return isToolCallOnlyAssistantMessage((this as any)?.lastMessage) ? [compactPrefix] : lines;
+		}
+
+		const line = output[targetIndex] ?? "";
+		const remainder = dropLeadingColumns(line, 1); // drop the 1-column padding, keep content
+		output[targetIndex] = composePrefixedLine(remainder);
+
+		return output.map((renderedLine) =>
+			visibleWidth(renderedLine) > width ? truncateToWidth(renderedLine, width, "") : renderedLine,
+		);
+	};
+}