mastracode 0.45.0 → 0.46.0-alpha.1

package/dist/{tui-CDdSkr_Q.js → tui-5IfsALo2.js}

@@ -23,7 +23,8 @@ import { DEFAULT_STT_MODEL, defaultModelForProvider, resolveSTTModel, sttModelsF
 import { Readable } from "stream";
 import { DeepgramVoice } from "@mastra/voice-deepgram";
 import { OpenAIVoice } from "@mastra/voice-openai";
-import { THINK_COMMAND_DESCRIPTOR, getAvailableThinkingLevelsForModel, isThinkingLevelSetting, parseThinkCommand } from "@mastra/code-sdk/thinking";
+import { THINK_COMMAND_DESCRIPTOR, isThinkingLevelSetting, parseThinkCommand } from "@mastra/code-sdk/thinking";
+import { getCatalogThinkingLevels, runCatalogThinkingLevel } from "@mastra/code-sdk/thinking-catalog";
 import { VALID_EVENTS } from "@mastra/code-sdk/hooks/index";
 import { openUrlInBrowser } from "@mastra/code-sdk/utils/open-url";
 import { parseError } from "@mastra/code-sdk/utils/errors";
@@ -138,6 +139,7 @@ const textThemeKeys = [
 	"muted",
 	"dim",
 	"text",
+	"secondary",
 	"thinkingText",
 	"userMessageText",
 	"toolTitle",
@@ -171,6 +173,60 @@ const mastra = new Proxy({}, { get(_target, prop) {
 	const surface = getSurface();
 	if (prop in surface) return surface[prop];
 } });
+/**
+* A surface shade derived from the terminal's own background (detected via OSC 11), so panels match the
+* user's theme instead of a fixed grey. Same idea as opencode's "system" theme: each step moves the
+* background's luminance 1/30 of the way toward white (dark) or black (light) while keeping its hue.
+* Step 1 = tool output panels, step 2 = the prompt and sent messages.
+*/
+function surfaceShade(step) {
+	const bg = getContrastBg();
+	const [r, g, b] = [
+		1,
+		3,
+		5
+	].map((i) => parseInt(bg.slice(i, i + 2), 16));
+	const lum = .299 * r + .587 * g + .114 * b;
+	const f = step / 12 * .4;
+	let out;
+	if (currentThemeMode === "light") out = [
+		r,
+		g,
+		b
+	].map((c) => c * (1 - f));
+	else if (lum < 10) {
+		const lift = Math.min(255, step * 18);
+		out = [
+			lift,
+			lift,
+			lift
+		];
+	} else {
+		const ratio = (lum + (255 - lum) * f) / lum;
+		out = [
+			r,
+			g,
+			b
+		].map((c) => Math.min(255, c * ratio));
+	}
+	return `#${out.map((c) => Math.floor(c).toString(16).padStart(2, "0")).join("")}`;
+}
+/**
+* Mode colors (build / plan / fast) as displayed. On dark backgrounds the deep brand colors are lifted
+* toward white the same way the accent is (brand green maps exactly to the accent), so mode-colored text
+* never reads darker than the accent. On light backgrounds brand green maps to the light accent and the
+* others are darkened just enough to read.
+*/
+function displayModeColor(hex) {
+	const isBrandGreen = hex.toLowerCase() === mastraBrand.green.toLowerCase();
+	if (currentThemeMode === "light") return isBrandGreen ? lightTheme.accent : ensureContrast(hex, getContrastBg());
+	if (isBrandGreen) return darkTheme.accent;
+	const mix = (i) => {
+		const c = parseInt(hex.slice(i, i + 2), 16);
+		return Math.round(c + (255 - c) * .35).toString(16).padStart(2, "0");
+	};
+	return `#${mix(1)}${mix(3)}${mix(5)}`;
+}
 /** Tint a hex color by a brightness factor (0–1). e.g. tintHex("#ff8800", 0.15) → near-black orange */
 function tintHex(hex, factor) {
 	const r = Math.floor(parseInt(hex.slice(1, 3), 16) * factor);
@@ -179,16 +235,17 @@ function tintHex(hex, factor) {
 	return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
 }
 const darkTheme = {
-	accent: "#16c858",
+	accent: "#62f69d",
 	border: "#3f3f46",
-	borderAccent: "#16c858",
+	borderAccent: "#62f69d",
 	borderMuted: "#27272a",
-	success: "#22c55e",
+	success: "#62f69d",
 	error: "#ef4444",
 	warning: "#f59e0b",
 	muted: "#8c8c94",
 	dim: "#84848c",
 	text: "#fafafa",
+	secondary: "#d9d9dc",
 	thinkingText: "#a1a1aa",
 	userMessageBg: "#0f172a",
 	userMessageText: "#fafafa",
@@ -199,8 +256,8 @@ const darkTheme = {
 	toolBorderPending: "#52525b",
 	toolBorderSuccess: "#52525b",
 	toolBorderError: "#ef4444",
-	toolTitle: "#fb923c",
-	toolArgs: "#ffe4c4",
+	toolTitle: "#d9d9dc",
+	toolArgs: "#d9d9dc",
 	toolOutput: "#d4d4d8",
 	textHighlight: "#c084fc",
 	errorBg: "#291415",
@@ -215,12 +272,13 @@ const lightTheme = {
 	border: "#d4d4d8",
 	borderAccent: "#0d8020",
 	borderMuted: "#e4e4e7",
-	success: "#15803d",
+	success: "#0d8020",
 	error: "#dc2626",
 	warning: "#d97706",
 	muted: "#595961",
 	dim: "#67676f",
 	text: "#18181b",
+	secondary: "#38383e",
 	thinkingText: "#595961",
 	userMessageBg: "#f0fdf4",
 	userMessageText: "#18181b",
@@ -231,8 +289,8 @@ const lightTheme = {
 	toolBorderPending: "#a1a1aa",
 	toolBorderSuccess: "#a1a1aa",
 	toolBorderError: "#dc2626",
-	toolTitle: "#c2410c",
-	toolArgs: "#92400e",
+	toolTitle: "#38383e",
+	toolArgs: "#38383e",
 	toolOutput: "#3f3f46",
 	textHighlight: "#7c3aed",
 	errorBg: "#fef2f2",
@@ -3191,12 +3249,18 @@ var WrappingSelectList = class {
 	onSelectionChange;
 	/** Called when the user confirms a multi-select list with Enter; receives all checked items in display order. */
 	onConfirmMulti;
-	constructor(items, maxVisible, theme, multiSelect = false) {
+	/**
+	* `card` style (inline prompts): an accent ❯ cursor and a bold label instead of a highlighted row,
+	* and ●/○ instead of [x]/[ ] in multi-select mode.
+	*/
+	cardStyle;
+	constructor(items, maxVisible, theme, multiSelect = false, cardStyle) {
 		this.items = items;
 		this.filteredItems = items;
 		this.maxVisible = maxVisible;
 		this.theme = theme;
 		this.multiSelect = multiSelect;
+		this.cardStyle = cardStyle;
 	}
 	setFilter(filter) {
 		this.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));
@@ -3253,6 +3317,14 @@ var WrappingSelectList = class {
 		const checkboxWidth = this.multiSelect ? CHECKBOX_WIDTH : 0;
 		const wrapped = wrapTextWithAnsi(labelText, Math.max(1, width - PREFIX_WIDTH - checkboxWidth));
 		const checkbox = this.multiSelect ? this.checkedValues.has(item.value) ? CHECKBOX_CHECKED : CHECKBOX_UNCHECKED : "";
+		if (this.cardStyle) {
+			const style = this.cardStyle;
+			const box = this.multiSelect ? this.checkedValues.has(item.value) ? style.checked : style.unchecked : "";
+			return (wrapped.length === 0 ? [""] : wrapped).map((chunk, index) => {
+				if (index > 0) return `${" ".repeat(PREFIX_WIDTH + (this.multiSelect ? CHECKBOX_WIDTH : 0))}${chunk}`;
+				return `${isSelected ? style.cursor : UNSELECTED_PREFIX}${box}${isSelected ? style.selectedLabel(chunk) : chunk}`;
+			});
+		}
 		if (wrapped.length === 0) {
 			const rendered = `${isSelected ? SELECTED_PREFIX : UNSELECTED_PREFIX}${checkbox}`;
 			return [isSelected ? this.theme.selectedText(rendered) : rendered];
@@ -3833,11 +3905,11 @@ const BASE_THINKING_LEVELS = [
 		id: "max",
 		label: "Max",
 		providerValue: "max",
-		description: "Unbounded reasoning (Anthropic, GPT-5.6+)"
+		description: "Unbounded reasoning"
 	}
 ];
 function getThinkingLevelsForModel(modelId) {
-	const availableLevels = getAvailableThinkingLevelsForModel(modelId);
+	const availableLevels = getCatalogThinkingLevels(modelId);
 	const levels = BASE_THINKING_LEVELS.filter((level) => availableLevels.some((available) => available === level.id));
 	if (!modelId.startsWith("openai/")) return [...levels];
 	return levels.map((level) => ({
@@ -3894,6 +3966,7 @@ async function handleThinkCommand(ctx, args = []) {
 	const modelId = ctx.state.session.model.get() ?? "";
 	const thinkingLevels = getThinkingLevelsForModel(modelId);
 	const override = getSessionOverride(ctx);
+	const runningOverride = override && runCatalogThinkingLevel(modelId, override);
 	const configuredDefault = getConfiguredDefault(ctx);
 	const rawArguments = args.join(" ");
 	if (rawArguments) {
@@ -3923,7 +3996,7 @@ async function handleThinkCommand(ctx, args = []) {
 		label: `  Default  ${theme.fg("dim", defaultDescription)}${override === void 0 ? theme.fg("dim", " (current)") : ""}`
 	}, ...thinkingLevels.map((l) => ({
 		value: l.id,
-		label: `  ${l.label}  ${theme.fg("dim", l.description)}${l.id === override ? theme.fg("dim", " (current)") : ""}`
+		label: `  ${l.label}  ${theme.fg("dim", l.description)}${l.id === runningOverride ? theme.fg("dim", " (current)") : ""}`
 	}))];
 	const modelNote = getModelNote(ctx);
 	return new Promise((resolve) => {
@@ -3947,7 +4020,7 @@ async function handleThinkCommand(ctx, args = []) {
 				} else if (isThinkingLevelSetting(selectedValue)) {
 					await ctx.state.session.state.set({ thinkingLevel: selectedValue });
 					const selectedLabel = getThinkingLevelForModel(modelId, selectedValue).label;
-					ctx.showInfo(`Thinking → ${selectedValue === override ? `${selectedLabel} (unchanged)` : `${selectedLabel} (session override)`}`);
+					ctx.showInfo(`Thinking → ${selectedValue === runningOverride ? `${selectedLabel} (unchanged)` : `${selectedLabel} (session override)`}`);
 				}
 			} catch {} finally {
 				resolve();
@@ -3960,7 +4033,7 @@ async function handleThinkCommand(ctx, args = []) {
 		container.addChild(selectList);
 		container.addChild(new Spacer(1));
 		container.addChild(new Text(theme.fg("dim", "↑↓ navigate · Enter select · Esc cancel"), 0, 0));
-		const currentIdx = override === void 0 ? 0 : thinkingLevels.findIndex((l) => l.id === override) + 1;
+		const currentIdx = override === void 0 ? 0 : thinkingLevels.findIndex((l) => l.id === runningOverride) + 1;
 		if (currentIdx > 0) selectList.setSelectedIndex(currentIdx);
 		const modal = container;
 		modal.handleInput = (data) => selectList.handleInput(data);
@@ -5358,6 +5431,227 @@ async function handleModeCommand(ctx, args) {
 	}
 }
 //#endregion
+//#region src/tui/components/ansi.ts
+/**
+* Shared ANSI text-handling helpers for TUI components.
+*/
+const ANSI_CLOSERS = "\x1B]8;;\x07\x1B[0m";
+const ELLIPSIS = "…";
+const ELLIPSIS_WIDTH = visibleWidth(ELLIPSIS);
+const graphemeSegmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function fitVisibleText(text, maxWidth) {
+	if (maxWidth <= 0) return {
+		text: "",
+		width: 0,
+		truncated: text.length > 0
+	};
+	const targetWidth = Math.max(0, maxWidth - ELLIPSIS_WIDTH);
+	let width = 0;
+	let result = "";
+	let resultWidth = 0;
+	for (const { segment: char } of graphemeSegmenter.segment(text)) {
+		const charWidth = visibleWidth(char);
+		if (width + charWidth > maxWidth) return {
+			text: `${result}${ELLIPSIS}`,
+			width: resultWidth + ELLIPSIS_WIDTH,
+			truncated: true
+		};
+		if (width + charWidth <= targetWidth) {
+			result += char;
+			resultWidth += charWidth;
+		}
+		width += charWidth;
+	}
+	return {
+		text,
+		width,
+		truncated: false
+	};
+}
+/** Truncate a string with ANSI codes to a visible width.
+*  Handles both SGR sequences (\x1b[...m) and OSC 8 hyperlinks (\x1b]8;...;\x07).
+*/
+function truncateAnsi(str, maxWidth) {
+	if (maxWidth <= 0) return "";
+	const ansiRegex = /\x1b\[[0-9;]{0,32}m|\x1b\]8;[^\x07\x1b]{0,8192}\x07/g;
+	let visibleLength = 0;
+	let result = "";
+	let lastIndex = 0;
+	let match;
+	while ((match = ansiRegex.exec(str)) !== null) {
+		const fitted = fitVisibleText(str.slice(lastIndex, match.index), maxWidth - visibleLength);
+		if (fitted.truncated) {
+			result += fitted.text;
+			result += ANSI_CLOSERS;
+			return result;
+		}
+		result += fitted.text;
+		visibleLength += fitted.width;
+		result += match[0];
+		lastIndex = match.index + match[0].length;
+	}
+	const fitted = fitVisibleText(str.slice(lastIndex), maxWidth - visibleLength);
+	result += fitted.text;
+	if (fitted.truncated) result += ANSI_CLOSERS;
+	return result;
+}
+//#endregion
+//#region src/tui/components/surface.ts
+/**
+* Shared drawing primitives for the borderless TUI design: half-block panels (prompt, sent messages,
+* tool output), the colored left bar for prompts that wait on the user, and soft keycaps for key hints.
+*/
+/** The xterm-256 gray ramp (232-255) plus black (16) and white (231). */
+const GRAYS_256 = [
+	[16, 0],
+	...Array.from({ length: 24 }, (_, i) => [232 + i, 8 + i * 10]),
+	[231, 255]
+];
+/**
+* Nearest xterm-256 gray. Panel shades are a step off the background, and the nearest color of the 6×6×6 cube
+* is often a saturated one (peach on a cream background, teal on Solarized), so panels stay neutral instead.
+*/
+function nearestGray256(rgb) {
+	const luma = .299 * rgb[0] + .587 * rgb[1] + .114 * rgb[2];
+	let best = GRAYS_256[0];
+	for (const gray of GRAYS_256) if (Math.abs(gray[1] - luma) < Math.abs(best[1] - luma)) best = gray;
+	return best[0];
+}
+/** SGR opening a panel color at the terminal's color depth, so panel bodies and their half-block edges match. */
+function surfaceOpen(hex, layer) {
+	const rgb = [
+		1,
+		3,
+		5
+	].map((i) => parseInt(hex.slice(i, i + 2), 16));
+	if (chalk.level === 0) return "";
+	if (chalk.level === 2) return `\x1b[${layer};5;${nearestGray256(rgb)}m`;
+	return `\x1b[${layer};2;${rgb.join(";")}m`;
+}
+const bgOpen = (hex) => surfaceOpen(hex, 48);
+/** Fill a line with `bg` across `width` columns, re-applying it after any reset inside the line. */
+function fillBg(line, width, bg) {
+	const open = bgOpen(bg);
+	const pad = Math.max(0, width - visibleWidth(line));
+	return open + line.replace(/\x1b\[(?:0|49)?m/g, (m) => m + open) + " ".repeat(pad) + "\x1B[49m";
+}
+/**
+* Rows on a solid background framed by half blocks (▄ above, ▀ below), so the panel reads as starting and
+* ending mid-row instead of using a border.
+*/
+function halfBlockPanel(rows, width, bg) {
+	return [
+		panelEdge("▄", width, bg),
+		...rows.map((r) => fillBg(r, width, bg)),
+		panelEdge("▀", width, bg)
+	];
+}
+/** A panel's ▄ or ▀ edge in the panel color. Without colors there's no panel background, so it's blank. */
+function panelEdge(ch, width, bg) {
+	const open = surfaceOpen(bg, 38);
+	const n = Math.max(0, width);
+	return open ? `${open}${ch.repeat(n)}\x1b[39m` : " ".repeat(n);
+}
+const ESCAPE_TOKEN_RE = /(\x1b(?:\[[0-?]*[ -/]*[@-~]|[\]_][^\x07\x1b]*(?:\x07|\x1b\\)))/;
+const RESET_RE = /^\x1b\[(?:0|49)?m$/;
+const graphemes = new Intl.Segmenter();
+/** Higher = the shade stays strong farther right before fading. 1 is a straight linear fade. */
+const FADE_CURVE = 3;
+function fadeShades(width, step) {
+	const last = Math.max(1, width - 1);
+	return Array.from({ length: Math.max(0, width) }, (_, col) => surfaceShade(step * (1 - (col / last) ** FADE_CURVE)));
+}
+function fadeRow(line, shades) {
+	let out = "";
+	let col = 0;
+	let current = "";
+	const cell = (text) => {
+		const hex = shades[Math.min(col, shades.length - 1)] ?? "";
+		if (hex !== current) {
+			current = hex;
+			out += bgOpen(hex);
+		}
+		out += text;
+		col += visibleWidth(text);
+	};
+	for (const part of line.split(ESCAPE_TOKEN_RE)) {
+		if (!part) continue;
+		if (part.startsWith("\x1B")) {
+			out += part;
+			if (RESET_RE.test(part) && current) out += bgOpen(current);
+			continue;
+		}
+		for (const { segment } of graphemes.segment(part)) cell(segment);
+	}
+	while (col < shades.length) cell(" ");
+	return `${out}\x1b[49m`;
+}
+function fadeEdge(ch, shades) {
+	if (chalk.level === 0) return " ".repeat(shades.length);
+	let out = "";
+	let current = "";
+	for (const hex of shades) {
+		if (hex !== current) {
+			current = hex;
+			out += surfaceOpen(hex, 38);
+		}
+		out += ch;
+	}
+	return `${out}\x1b[39m`;
+}
+/** Like halfBlockPanel, but the shade fades out toward the right edge. */
+function fadePanel(rows, width, step) {
+	if (chalk.level === 2) return halfBlockPanel(rows, width, surfaceShade(step));
+	const shades = fadeShades(width, step);
+	return [
+		fadeEdge("▄", shades),
+		...rows.map((r) => fadeRow(r, shades)),
+		fadeEdge("▀", shades)
+	];
+}
+/** Background of the prompt and sent messages. */
+const promptSurface = () => surfaceShade(2);
+/** Tool blocks with output: the title band is a step lighter than the output panel under it. */
+const toolTitleSurface = () => surfaceShade(2);
+const toolOutputSurface = () => surfaceShade(1);
+/** Status dot in front of a tool-style row: grey while running, green when done, red on failure. */
+function statusDot(status) {
+	return status === "running" ? theme.fg("muted", "•") : theme.fg(status === "error" ? "error" : "success", "•");
+}
+/**
+* Tool-style block: a "• title" row (further title rows indented under it). With output, the title rows sit
+* on a lighter band directly above the output panel, the output lined up under the title text. Without output
+* it's just the title rows, so runs of quiet calls stay one row each.
+*/
+function toolBlock(dot, title, output, width) {
+	const [first = "", ...rest] = Array.isArray(title) ? title : [title];
+	const titleRows = [`${dot} ${first}`, ...rest.map((line) => `  ${line}`)];
+	if (output.length === 0) return titleRows;
+	const contentWidth = Math.max(1, width - 3);
+	const titleBg = toolTitleSurface();
+	const outputBg = toolOutputSurface();
+	return [
+		panelEdge("▄", width, titleBg),
+		...titleRows.map((line) => fillBg(line, width, titleBg)),
+		...output.map((line) => fillBg(`  ${truncateAnsi(line, contentWidth)}`, width, outputBg)),
+		panelEdge("▀", width, outputBg)
+	];
+}
+/** Left-bar card for inline prompts: accent = waiting on you, warning = approval, border = answered. */
+function card(color, lines) {
+	const bar = chalk.hex(color)("▎");
+	return lines.map((l) => l === "" ? bar : `${bar} ${l}`);
+}
+/** Soft keycap: key text between the description grey and full white, on a chip one shade up. */
+function keycap(key) {
+	const fg = theme.getTheme().secondary;
+	return fillBg(chalk.hex(fg)(` ${key} `), visibleWidth(key) + 2, surfaceShade(2));
+}
+/** "key description" hint, e.g. keyHint('/help', 'info & shortcuts'). */
+function keyHint(key, description) {
+	return `${keycap(key)} ${theme.fg("muted", description)}`;
+}
+//#endregion
 //#region src/tui/components/width-aware-container.ts
 /** Rebuilds width-derived children only when state or the received render width changes. */
 var WidthAwareContainer = class extends Container {
@@ -5379,12 +5673,10 @@ var WidthAwareContainer = class extends Container {
 //#endregion
 //#region src/tui/components/slash-command.ts
 /**
-* SlashCommandComponent - renders a bordered box for slash command messages
-* showing the command name as a heading and truncated content that can be
+* SlashCommandComponent - renders a "• skill /name" or "• command /name" block for slash command messages
+* showing the command name as a heading; the content stays hidden until
 * expanded with ctrl+e. The full content is still sent to the assistant.
 */
-const MAX_COLLAPSED_LINES$1 = 3;
-const getBorderColor = () => mastra.green;
 var SlashCommandComponent = class extends WidthAwareContainer {
 	commandName;
 	contentLines;
@@ -5405,14 +5697,17 @@ var SlashCommandComponent = class extends WidthAwareContainer {
 	}
 	rebuildForWidth(termWidth) {
 		this.clear();
-		const border = (char) => chalk.bold.hex(getBorderColor())(char);
-		const maxLineWidth = Math.max(1, termWidth - 6 - 0);
-		const heading = chalk.hex(mastra.specialGray)(`/${this.commandName}`);
-		if (this.contentLines.length === 0) {
-			this.addChild(new Text(`${border("╰──")} ${heading}`, 0, 0));
+		const width = Math.max(1, termWidth - 0);
+		const maxLineWidth = Math.max(1, width - 3);
+		const dot = statusDot("done");
+		const isSkill = this.commandName.startsWith("skill/");
+		const name = isSkill ? this.commandName.slice(6) : this.commandName;
+		const heading = `${theme.bold(theme.fg("success", isSkill ? "skill" : "command"))} ${theme.fg("muted", `/${name}`)}`;
+		const block = (output) => this.addChild(new Text(toolBlock(dot, heading, output, width).join("\n"), 0, 0));
+		if (this.contentLines.length === 0 || !this.expanded) {
+			block([]);
 			return;
 		}
-		this.addChild(new Text(`${border("╭──")}`, 0, 0));
 		const wrappedLines = [];
 		for (const line of this.contentLines) if (line.length > maxLineWidth) {
 			let remaining = line;
@@ -5424,14 +5719,7 @@ var SlashCommandComponent = class extends WidthAwareContainer {
 			}
 			if (remaining) wrappedLines.push(remaining);
 		} else wrappedLines.push(line);
-		const truncated = !this.expanded && wrappedLines.length > 4;
-		const contentText = (truncated ? wrappedLines.slice(0, MAX_COLLAPSED_LINES$1) : wrappedLines).map((line) => `${border("│")} ${chalk.hex(mastra.mainGray)(line.length > maxLineWidth ? line.slice(0, maxLineWidth - 1) + "…" : line)}`).join("\n");
-		this.addChild(new Text(contentText, 0, 0));
-		if (truncated) {
-			const moreText = chalk.hex(mastra.darkGray)(`... ${wrappedLines.length - MAX_COLLAPSED_LINES$1} more lines (ctrl+e to expand)`);
-			this.addChild(new Text(`${border("│")} ${moreText}`, 0, 0));
-		}
-		this.addChild(new Text(`${border("╰──")} ${heading}`, 0, 0));
+		block(wrappedLines.map((line) => chalk.hex(mastra.mainGray)(line.length > maxLineWidth ? line.slice(0, maxLineWidth - 1) + "…" : line)));
 	}
 	getChatSpacingKind() {
 		return "other";
@@ -5441,7 +5729,7 @@ var SlashCommandComponent = class extends WidthAwareContainer {
 //#region src/tui/components/account-switch-notice.ts
 /**
 * One-line transcript notice for persisted `data-mastracode-account-switch`
-* parts: account rotations, pool exhaustion, and starting-on-account notices.
+* parts: account rotations and pool exhaustion.
 * Modeled on OMMarkerComponent (single themed Text row). The copy comes from
 * the SDK's shared formatter so live `info`-event lines and history-reloaded
 * part lines read identically.
@@ -5510,6 +5798,8 @@ var AskQuestionBorderedBox = class {
 	answerIsNegative = false;
 	/** True when created during streaming, before activate() is called */
 	streaming = false;
+	/** Rows the card last took while waiting for an answer; the settled card keeps this height. */
+	liveHeight = 0;
 	constructor(questionLines, hintText, items, selectList, input, streaming) {
 		this.questionLines = questionLines;
 		this.hintText = hintText;
@@ -5558,99 +5848,95 @@ var AskQuestionBorderedBox = class {
 		if (this.answered) {
 			if (this.cachedLines && this.cachedWidth === width && this.cachedThemeGeneration === getThemeGeneration()) return this.cachedLines;
 			const result = this.renderSafe(width);
+			while (result.length < this.liveHeight) result.push("");
 			this.cachedLines = result;
 			this.cachedWidth = width;
 			this.cachedThemeGeneration = getThemeGeneration();
 			return result;
 		}
-		return this.renderSafe(width);
+		const result = this.renderSafe(width);
+		this.liveHeight = result.length;
+		return result;
 	}
 	renderSafe(width) {
 		try {
 			return this._render(width);
 		} catch {
-			return [
-				"" + theme.fg("dim", "╭──── Question ────╮"),
-				"" + theme.fg("dim", "│ (render error)   │"),
-				"" + theme.fg("dim", "╰──────────────────╯")
-			];
+			return card(theme.getTheme().dim, [theme.fg("dim", "(render error)")]);
 		}
 	}
+	/**
+	* Borderless card with a colored left bar (▎):
+	* - waiting for an answer: accent bar, bold question, ❯ options, hint
+	* - answered: muted question with the options frozen (✓ on the chosen ones), or "✓ answer" for
+	*   free text; a card answered live keeps the height it had while waiting (see render)
+	*/
 	_render(width) {
-		const border = (s) => theme.fg("dim", s);
-		const innerWidth = Math.max(1, width - 0 - 4);
-		const boxWidth = innerWidth + 4;
-		const lines = [];
-		lines.push("" + border(`╭${"─".repeat(boxWidth - 2)}╮`));
-		const addLine = (content, contentVisWidth) => {
-			let finalContent = content;
-			let finalWidth = contentVisWidth;
-			if (finalWidth > innerWidth) {
-				finalContent = truncateToWidth(content, innerWidth);
-				finalWidth = visibleWidth(finalContent);
-			}
-			const pad = Math.max(0, innerWidth - finalWidth);
-			lines.push("" + border("│") + " " + finalContent + " ".repeat(pad) + " " + border("│"));
-		};
-		const header = theme.bold(theme.fg("accent", "Question"));
-		addLine(header, visibleWidth(header));
-		for (const qLine of this.questionLines) {
-			const wrapped = wrapTextWithAnsi(qLine, innerWidth);
-			for (const wLine of wrapped) addLine(theme.fg("text", wLine), visibleWidth(wLine));
-		}
-		addLine("", 0);
-		const continuationPrefix = "   ";
-		const addWrappedOptionLine = (prefix, label, style) => {
-			const prefixVis = visibleWidth(prefix);
-			wrapTextWithAnsi(label, Math.max(1, innerWidth - prefixVis)).forEach((line, index) => {
-				const linePrefix = index === 0 ? prefix : continuationPrefix;
-				const content = `${linePrefix}${style(line)}`;
-				addLine(content, visibleWidth(linePrefix) + visibleWidth(line));
-			});
-		};
-		if (this.streaming) {
-			const dim = (s) => theme.fg("dim", s);
-			for (const item of this.items) addWrappedOptionLine(continuationPrefix, item.label, dim);
-			const waiting = theme.fg("dim", "…");
-			addLine(waiting, visibleWidth(waiting));
-		} else if (this.answered && this.items.length > 0) {
-			const dim = (s) => theme.fg("dim", s);
-			if (this.cancelled) {
-				for (const item of this.items) addWrappedOptionLine(continuationPrefix, item.label, dim);
-				const cancelLine = `${theme.fg("error", "✗")}  ${theme.fg("dim", "(cancelled)")}`;
-				addLine(cancelLine, visibleWidth(cancelLine));
-			} else {
-				const text = (s) => theme.fg("text", s);
-				for (const item of this.items) if (this.selectedValues ? this.selectedValues.includes(item.label) : item.label === this.selectedValue) addWrappedOptionLine(`${this.answerIsNegative ? theme.fg("error", "✗") : theme.fg("success", "✓")}  `, item.label, text);
-				else addWrappedOptionLine(continuationPrefix, item.label, dim);
-			}
-			addLine("", 0);
-		} else if (this.answered && this.selectedValue != null) {
-			const iconPrefix = `${this.answerIsNegative ? theme.fg("error", "✗") : theme.fg("success", "✓")}  `;
-			const continuationPrefix = "   ";
-			wrapTextWithAnsi(this.selectedValue, Math.max(1, innerWidth - visibleWidth(iconPrefix))).forEach((line, index) => {
-				const prefix = index === 0 ? iconPrefix : continuationPrefix;
-				const content = `${prefix}${theme.fg("text", line)}`;
-				addLine(content, visibleWidth(prefix) + visibleWidth(line));
-			});
-		} else if (this.answered && this.cancelled) {
-			const cancelLine = `${theme.fg("error", "✗")}  ${theme.fg("dim", "(cancelled)")}`;
-			addLine(cancelLine, visibleWidth(cancelLine));
-		} else {
-			if (this.selectList) {
-				const selectLines = this.selectList.render(innerWidth);
-				for (const sLine of selectLines) addLine(sLine, visibleWidth(sLine));
-			} else if (this.input) {
-				const inputLines = this.input.render(innerWidth);
-				for (const iLine of inputLines) addLine(iLine, visibleWidth(iLine));
-			}
-			const hint = theme.fg("dim", this.hintText);
-			addLine(hint, visibleWidth(hint));
+		const t = theme.getTheme();
+		const innerWidth = Math.max(1, width - 0 - 2);
+		const wrap = (text, style) => wrapTextWithAnsi(text, innerWidth).map((line) => style(line));
+		const question = (style) => this.questionLines.flatMap((line) => line ? wrap(line, style) : [""]);
+		const out = (color, lines) => card(color, lines.map((line) => truncateToWidth(line, innerWidth))).map((line) => "" + line);
+		const icon = this.answerIsNegative ? theme.fg("error", "✗") : theme.fg("success", "✓");
+		if (this.streaming) return out(t.dim, [
+			...question((s) => theme.bold(theme.fg("text", s))),
+			"",
+			...this.items.flatMap((item) => wrap(item.label, (s) => theme.fg("dim", `  ${s}`))),
+			theme.fg("dim", "…")
+		]);
+		if (this.answered) {
+			const asked = question((s) => theme.fg("muted", s));
+			const cancelledLine = `${theme.fg("error", "✗")} ${theme.fg("dim", "(cancelled)")}`;
+			if (this.items.length > 0) {
+				const chosen = new Set(this.selectedValues ?? (this.selectedValue != null ? [this.selectedValue] : []));
+				const optionLines = this.items.flatMap((item) => {
+					const picked = !this.cancelled && chosen.has(item.label);
+					return wrapTextWithAnsi(item.label, Math.max(1, innerWidth - 2)).map((line, j) => `${picked && j === 0 ? icon : " "} ${theme.fg(picked ? "secondary" : "dim", line)}`);
+				});
+				return out(t.border, [
+					...asked,
+					"",
+					...optionLines,
+					...this.cancelled ? [cancelledLine] : []
+				]);
+			}
+			if (this.cancelled) return out(t.border, [
+				...asked,
+				"",
+				cancelledLine
+			]);
+			const answers = this.selectedValues ?? (this.selectedValue != null ? [this.selectedValue] : []);
+			if (answers.length === 0) return out(t.border, asked);
+			const answerLines = answers.flatMap((answer, i) => wrapTextWithAnsi(answer, Math.max(1, innerWidth - 2)).map((line, j) => `${j === 0 ? icon : " "} ${theme.fg("secondary", line)}`));
+			return out(t.border, [
+				...asked,
+				"",
+				...answerLines
+			]);
 		}
-		lines.push("" + border(`╰${"─".repeat(boxWidth - 2)}╯`));
-		return lines;
+		const body = this.selectList ? this.selectList.render(innerWidth) : this.input ? this.input.render(innerWidth) : [];
+		return out(t.accent, [
+			...question((s) => theme.bold(theme.fg("text", s))),
+			"",
+			...body,
+			"",
+			theme.fg("dim", this.hintText)
+		]);
 	}
 };
+/** Option list styling shared by inline prompts: accent ❯ cursor, bold selected label, ●/○ toggles. */
+const INLINE_CARD_LIST_STYLE = {
+	get cursor() {
+		return theme.fg("accent", "❯ ");
+	},
+	get checked() {
+		return theme.fg("accent", "●") + "   ";
+	},
+	get unchecked() {
+		return theme.fg("dim", "○") + "   ";
+	},
+	selectedLabel: (label) => theme.bold(label)
+};
 var AskQuestionInlineComponent = class AskQuestionInlineComponent extends Container {
 	borderedBox;
 	selectList;
@@ -5789,7 +6075,7 @@ var AskQuestionInlineComponent = class AskQuestionInlineComponent extends Contai
 			value: AskQuestionInlineComponent.CUSTOM_RESPONSE_VALUE,
 			label: theme.fg("dim", "✎ Custom response...")
 		});
-		this.selectList = new WrappingSelectList(items, Math.min(items.length, 8), getSelectListTheme(), this.multiSelect);
+		this.selectList = new WrappingSelectList(items, Math.min(items.length, 8), getSelectListTheme(), this.multiSelect, INLINE_CARD_LIST_STYLE);
 		if (this.multiSelect) this.selectList.onConfirmMulti = (selected) => {
 			this.handleMultiAnswer(selected.map((item) => item.value));
 		};
@@ -5945,16 +6231,13 @@ var JudgeDisplayComponent = class extends WidthAwareContainer {
 		this.clear();
 		const border = (char) => chalk.hex(JUDGE_COLOR)(char);
 		const title = chalk.hex(JUDGE_COLOR).bold("Goal");
-		const innerWidth = Math.max(20, termWidth - 0 - 4);
-		const horizontal = "─".repeat(innerWidth + 1);
-		this.addChild(new Text(`${border("╭")}${border(horizontal)}${border("╮")}`, 0, 0));
+		const innerWidth = Math.max(20, termWidth - 0 - 2);
 		this.addChild(new Text(this.renderRow(this.renderHeader(title), innerWidth, border), 0, 0));
 		if (!this.result && this.activity.length === 0 && !this.streamingReason) this.addChild(new Text(this.renderRow(chalk.dim("evaluating…"), innerWidth, border), 0, 0));
 		for (const line of this.activity) this.addChild(new Text(this.renderRow(this.renderActivityLine(line), innerWidth, border), 0, 0));
 		if (this.activity.length > 0 && (this.result || this.streamingReason)) this.addChild(new Text(this.renderRow("", innerWidth, border), 0, 0));
 		const reason = stripControlChars(this.result?.reason ?? this.streamingReason);
 		if (reason) for (const line of this.wrapLine(reason, innerWidth)) this.addChild(new Text(this.renderRow(chalk.dim(line), innerWidth, border), 0, 0));
-		this.addChild(new Text(`${border("╰")}${border(horizontal)}${border("╯")}`, 0, 0));
 	}
 	renderActivityLine(line) {
 		const toolName = getActivityToolName(line);
@@ -5969,9 +6252,9 @@ var JudgeDisplayComponent = class extends WidthAwareContainer {
 		const turnInfo = this.maxTurns > 0 ? chalk.hex(MUTED_COLOR)(`(${this.turnsUsed}/${this.maxTurns})`) : "";
 		return `${title}  ${decisionIcon} ${decisionText}${turnInfo ? `  ${turnInfo}` : ""}`;
 	}
+	/** A row of the left-bar card (`width` is the room for text after the bar). */
 	renderRow(text, width, border) {
-		const content = this.padLine(text, width);
-		return `${border("│")} ${content}${border("│")}`;
+		return text ? `${border("▎")} ${this.padLine(text, width)}` : border("▎");
 	}
 	wrapLine(text, width) {
 		const lines = [];
@@ -6047,9 +6330,6 @@ function priorityColor(priority) {
 }
 const MAX_NOTIFICATION_CONTENT_WIDTH = 100;
 const MIN_NOTIFICATION_CONTENT_WIDTH = 24;
-function padLine$1(value, width) {
-	return value + " ".repeat(Math.max(0, width - visibleWidth(value)));
-}
 function splitLongWord(word, maxWidth) {
 	const segments = [];
 	let current = "";
@@ -6131,7 +6411,7 @@ var NotificationComponent = class extends WidthAwareContainer {
 			options.status
 		].filter(Boolean).join(" · ");
 		const message = options.message.trim();
-		const maxContentWidth = Math.max(MIN_NOTIFICATION_CONTENT_WIDTH, Math.min(MAX_NOTIFICATION_CONTENT_WIDTH, width - 0 - 4));
+		const maxContentWidth = Math.max(MIN_NOTIFICATION_CONTENT_WIDTH, Math.min(MAX_NOTIFICATION_CONTENT_WIDTH, width - 0 - 2));
 		const titleLines = wrapText(titleText, maxContentWidth);
 		const detailLines = details ? wrapText(details, maxContentWidth) : [];
 		const messageLines = message ? this.limitMessageLines(wrapText(message, maxContentWidth), quiet, maxContentWidth) : [];
@@ -6140,22 +6420,13 @@ var NotificationComponent = class extends WidthAwareContainer {
 			options.backgroundCompletion.argsSummary ? `invocation · ${options.backgroundCompletion.argsSummary}` : void 0,
 			options.backgroundCompletion.errorSummary ? `failure · ${options.backgroundCompletion.errorSummary}` : void 0
 		].filter((line) => Boolean(line)).flatMap((line) => wrapText(line, maxContentWidth)) : [];
-		const allLines = [
-			...titleLines,
-			...detailLines,
-			...messageLines,
-			...backgroundDetailLines
+		const lines = [
+			...titleLines.map((line) => chalk.hex(priorityColor(options.priority)).bold(line)),
+			...detailLines.map((line) => theme.fg("dim", line)),
+			...messageLines.map((line) => theme.fg("thinkingText", line)),
+			...backgroundDetailLines.map((line) => theme.fg("dim", line))
 		];
-		const contentWidth = Math.max(...allLines.map((line) => visibleWidth(line)), 1);
-		const borderColor = chalk.hex(mastra.blue);
-		const top = `╭${"─".repeat(contentWidth + 2)}╮`;
-		const bottom = `╰${"─".repeat(contentWidth + 2)}╯`;
-		this.addChild(new Text(borderColor(top), 0, 0));
-		for (const line of titleLines) this.addChild(new Text(`${borderColor("│")} ${chalk.hex(priorityColor(options.priority)).bold(padLine$1(line, contentWidth))} ${borderColor("│")}`, 0, 0));
-		for (const line of detailLines) this.addChild(new Text(`${borderColor("│")} ${theme.fg("dim", padLine$1(line, contentWidth))} ${borderColor("│")}`, 0, 0));
-		for (const line of messageLines) this.addChild(new Text(`${borderColor("│")} ${padLine$1(line, contentWidth)} ${borderColor("│")}`, 0, 0));
-		for (const line of backgroundDetailLines) this.addChild(new Text(`${borderColor("│")} ${theme.fg("dim", padLine$1(line, contentWidth))} ${borderColor("│")}`, 0, 0));
-		this.addChild(new Text(borderColor(bottom), 0, 0));
+		this.addChild(new Text(card(mastra.blue, lines).join("\n"), 0, 0));
 	}
 	limitMessageLines(lines, quiet, maxWidth) {
 		if (!quiet || lines.length <= this.quietPreviewLineLimit) return lines;
@@ -6267,10 +6538,10 @@ function formatMarker(data) {
 //#endregion
 //#region src/tui/components/om-output.ts
 /**
-* TUI component for rendering OM observation/reflection output in a bordered box.
+* TUI component for rendering OM observation/reflection output as a tool-style block.
 * Uses observer (amber) color for observations and reflector (red) color for reflections.
 * Collapsed to COLLAPSED_LINES by default, expandable with ctrl+e.
-* Includes marker info (emoji, compression stats) in the footer.
+* The title row carries the compression stats; the observations sit on a panel below.
 */
 const getObserverColor$1 = () => mastra.orange;
 const getReflectorColor$1 = () => mastra.red;
@@ -6280,33 +6551,6 @@ function formatTokens$1(tokens) {
 	const k = tokens / 1e3;
 	return k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
 }
-/** Truncate a string with ANSI codes to a visible width */
-function truncateAnsi$1(str, maxWidth) {
-	const ansiRegex = /\x1b\[[0-9;]{0,32}m/g;
-	let visibleLength = 0;
-	let result = "";
-	let lastIndex = 0;
-	let match;
-	while ((match = ansiRegex.exec(str)) !== null) {
-		const textBefore = str.slice(lastIndex, match.index);
-		for (const char of textBefore) {
-			if (visibleLength >= maxWidth) break;
-			result += char;
-			visibleLength++;
-		}
-		if (visibleLength >= maxWidth) break;
-		result += match[0];
-		lastIndex = match.index + match[0].length;
-	}
-	const remaining = str.slice(lastIndex);
-	for (const char of remaining) {
-		if (visibleLength >= maxWidth) break;
-		result += char;
-		visibleLength++;
-	}
-	if (visibleLength >= maxWidth) result += "\x1B[0m";
-	return result;
-}
 /**
 * Soft-wrap an array of lines to fit within maxWidth, preserving words where possible.
 * Returns groups where each group corresponds to one original line split into wrapped segments.
@@ -6359,14 +6603,13 @@ var OMOutputComponent = class extends WidthAwareContainer {
 	rebuildForWidth(termWidth) {
 		this.clear();
 		const color = this.data.type === "reflection" ? getReflectorColor$1() : getObserverColor$1();
-		const border = (char) => chalk.bold.hex(color)(char);
-		const maxLineWidth = termWidth - 6 - 0;
+		const width = Math.max(1, termWidth - 0);
+		const maxLineWidth = width - 4;
 		const originalLines = this.data.observations.split("\n");
 		const { groups, flat: wrappedLines } = softWrapLines(originalLines, maxLineWidth);
 		const originalLineCount = originalLines.length;
 		const wrappedLineCount = wrappedLines.length;
 		const footerText = this.buildFooterText(color);
-		this.addChild(new Text(border("╭──"), 0, 0));
 		let truncated = false;
 		const borderedLines = [];
 		if (!this.expanded && wrappedLineCount > 11) {
@@ -6388,40 +6631,31 @@ var OMOutputComponent = class extends WidthAwareContainer {
 			}
 			truncated = tailGroupStart - headGroupCount > 0;
 			if (truncated) {
-				for (const line of headLines) borderedLines.push(border("│") + " " + chalk.hex(mastra.specialGray)(line));
-				borderedLines.push(border("│") + " " + chalk.hex(mastra.mainGray)(`... ${originalLineCount} lines total (ctrl+e to expand)`));
-				for (const line of tailLines) borderedLines.push(border("│") + " " + chalk.hex(mastra.specialGray)(line));
-			} else for (const line of wrappedLines) borderedLines.push(border("│") + " " + chalk.hex(mastra.specialGray)(line));
-		} else for (const line of wrappedLines) borderedLines.push(border("│") + " " + chalk.hex(mastra.specialGray)(line));
-		const displayOutput = borderedLines.join("\n");
-		if (displayOutput.trim()) this.addChild(new Text(displayOutput, 0, 0));
-		if (this.data.currentTask && (this.expanded || !truncated)) {
-			const taskLine = border("│") + " " + chalk.hex(color).bold("Current task: ") + chalk.hex(mastra.specialGray)(this.data.currentTask);
-			this.addChild(new Text(truncateAnsi$1(taskLine, termWidth - 2 - 0), 0, 0));
-		}
-		if (this.data.suggestedResponse && (this.expanded || !truncated)) {
-			const sugLine = border("│") + " " + chalk.hex(color).bold("Suggested response: ") + chalk.hex(mastra.specialGray)(this.data.suggestedResponse);
-			this.addChild(new Text(truncateAnsi$1(sugLine, termWidth - 2 - 0), 0, 0));
-		}
-		this.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+				for (const line of headLines) borderedLines.push(chalk.hex(mastra.specialGray)(line));
+				borderedLines.push(chalk.hex(mastra.mainGray)(`... ${originalLineCount} lines total (ctrl+e to expand)`));
+				for (const line of tailLines) borderedLines.push(chalk.hex(mastra.specialGray)(line));
+			} else for (const line of wrappedLines) borderedLines.push(chalk.hex(mastra.specialGray)(line));
+		} else for (const line of wrappedLines) borderedLines.push(chalk.hex(mastra.specialGray)(line));
+		if (this.data.currentTask && (this.expanded || !truncated)) borderedLines.push(chalk.hex(color).bold("Current task: ") + chalk.hex(mastra.specialGray)(this.data.currentTask));
+		if (this.data.suggestedResponse && (this.expanded || !truncated)) borderedLines.push(chalk.hex(color).bold("Suggested response: ") + chalk.hex(mastra.specialGray)(this.data.suggestedResponse));
+		const output = borderedLines.some((line) => line.trim()) ? borderedLines : [];
+		this.addChild(new Text(toolBlock(chalk.hex(color)("•"), footerText, output, width).join("\n"), 0, 0));
 	}
 	buildFooterText(color) {
-		const isReflection = this.data.type === "reflection";
-		const emoji = "🧠";
-		if (isReflection) {
+		if (this.data.type === "reflection") {
 			const observed = formatTokens$1(this.data.tokensObserved ?? 0);
 			const compressed = formatTokens$1(this.data.compressedTokens ?? this.data.observationTokens ?? 0);
 			const ratio = (this.data.tokensObserved ?? 0) > 0 && (this.data.compressedTokens ?? this.data.observationTokens ?? 0) > 0 ? `${Math.round((this.data.tokensObserved ?? 0) / (this.data.compressedTokens ?? this.data.observationTokens ?? 1))}x` : "";
 			const durationStr = this.data.durationMs ? ` in ${(this.data.durationMs / 1e3).toFixed(1)}s` : "";
 			const ratioStr = ratio ? ` (${ratio} compression)` : "";
-			return `${emoji} ${chalk.hex(color)(`Reflected: ${observed} → ${compressed} tokens${ratioStr}${durationStr}`)} ${chalk.hex(mastra.green)("✓")}`;
+			return `${chalk.hex(color)(`Reflected: ${observed} → ${compressed} tokens${ratioStr}${durationStr}`)}`;
 		} else {
 			const observed = formatTokens$1(this.data.tokensObserved ?? 0);
 			const compressed = formatTokens$1(this.data.observationTokens ?? 0);
 			const ratio = (this.data.tokensObserved ?? 0) > 0 && (this.data.observationTokens ?? 0) > 0 ? `${Math.round((this.data.tokensObserved ?? 0) / (this.data.observationTokens ?? 1))}x` : "";
 			const durationStr = this.data.durationMs ? ` in ${(this.data.durationMs / 1e3).toFixed(1)}s` : "";
 			const ratioStr = ratio ? ` (${ratio} compression)` : "";
-			return `${emoji} ${chalk.hex(color)(`Observed: ${observed} → ${compressed} tokens${ratioStr}${durationStr}`)} ${chalk.hex(mastra.green)("✓")}`;
+			return `${chalk.hex(color)(`Observed: ${observed} → ${compressed} tokens${ratioStr}${durationStr}`)}`;
 		}
 	}
 	getChatSpacingKind() {
@@ -6454,26 +6688,11 @@ var PlanContentBox = class {
 	}
 	render(width) {
 		if (this.cachedLines && this.cachedWidth === width && this.cachedThemeGeneration === getThemeGeneration()) return this.cachedLines;
-		const availableWidth = Math.max(24, width - 0);
-		const innerWidth = Math.max(20, availableWidth - 4);
+		const innerWidth = Math.max(20, width - 0);
 		const rendered = new Markdown(this.plan, 0, 0, getMarkdownTheme(), { color: (text) => theme.fg("text", text) }).render(innerWidth).flatMap((line) => line.length > 0 ? [line] : [""]);
-		const border = (text) => chalk.hex(mastra.purple)(text);
-		const top = `${border("╭")}${border("─".repeat(innerWidth + 2))}${border("╮")}`;
-		const bottom = `${border("╰")}${border("─".repeat(innerWidth + 2))}${border("╯")}`;
 		const body = [];
-		for (const line of rendered) {
-			const wrapped = wrapTextWithAnsi(line, innerWidth);
-			for (const chunk of wrapped) {
-				const chunkVis = visibleWidth(chunk);
-				const padding = " ".repeat(Math.max(0, innerWidth - chunkVis));
-				body.push(`${border("│")} ${chunk}${padding} ${border("│")}`);
-			}
-		}
-		this.cachedLines = [
-			top,
-			...body,
-			bottom
-		];
+		for (const line of rendered) body.push(...wrapTextWithAnsi(line, innerWidth).map((chunk) => chunk.replace(/\s+$/, "")));
+		this.cachedLines = body;
 		this.cachedWidth = width;
 		this.cachedThemeGeneration = getThemeGeneration();
 		return this.cachedLines;
@@ -6498,11 +6717,7 @@ var PlanDiffBox = class {
 	}
 	render(width) {
 		if (this.cachedLines && this.cachedWidth === width && this.cachedThemeGeneration === getThemeGeneration()) return this.cachedLines;
-		const availableWidth = Math.max(24, width - 0);
-		const innerWidth = Math.max(20, availableWidth - 4);
-		const border = (text) => chalk.hex(mastra.purple)(text);
-		const top = `${border("╭")}${border("─".repeat(innerWidth + 2))}${border("╮")}`;
-		const bottom = `${border("╰")}${border("─".repeat(innerWidth + 2))}${border("╯")}`;
+		const innerWidth = Math.max(20, width - 0);
 		const removedColor = chalk.hex(mastra.red);
 		const addedColor = chalk.hex(theme.getTheme().success);
 		const body = [];
@@ -6513,23 +6728,25 @@ var PlanDiffBox = class {
 			const wrappedChunks = wrapTextWithAnsi(entry.text, textWidth);
 			for (let ci = 0; ci < wrappedChunks.length; ci++) {
 				const content = colorFn(`${ci === 0 ? prefix : "  "}${wrappedChunks[ci]}`);
-				const contentVis = visibleWidth(content);
-				const padding = " ".repeat(Math.max(0, innerWidth - contentVis));
-				body.push(`${border("│")} ${content}${padding} ${border("│")}`);
+				body.push(content);
 			}
 		}
-		this.cachedLines = [
-			top,
-			...body,
-			bottom
-		];
+		this.cachedLines = body;
 		this.cachedWidth = width;
 		this.cachedThemeGeneration = getThemeGeneration();
 		return this.cachedLines;
 	}
 };
+/** Plan prompts sit inside a left bar in the plan-mode color, like the other inline prompts. */
+function withPlanBar(lines) {
+	const bar = chalk.hex(displayModeColor(mastra.purple))("▎");
+	return lines.map((line) => line.replace(/\x1b\[[0-9;]*m/g, "").trim() === "" ? bar : `${bar} ${line}`);
+}
 var PlanApprovalInlineComponent = class PlanApprovalInlineComponent extends Container {
 	ui;
+	render(width) {
+		return withPlanBar(super.render(Math.max(1, width - 2)));
+	}
 	contentBox;
 	selectList;
 	onApprove;
@@ -6607,15 +6824,15 @@ var PlanApprovalInlineComponent = class PlanApprovalInlineComponent extends Cont
 		const items = [
 			{
 				value: "approve",
-				label: `  ${theme.fg("success", "Approve")} ${theme.fg("dim", "— switch to Build mode and implement")}`
+				label: `${theme.fg("text", "Approve")}          ${theme.fg("dim", "switch to Build mode and implement")}`
 			},
 			{
 				value: "goal",
-				label: `  ${theme.fg("success", "Use as /goal")} ${theme.fg("dim", "— switch to Build mode and pursue this plan")}`
+				label: `${theme.fg("text", "Use as /goal")}     ${theme.fg("dim", "switch to Build mode and pursue this plan")}`
 			},
 			{
 				value: "changes",
-				label: `  ${theme.fg("warning", "Request changes")} ${theme.fg("dim", "— reject and provide feedback via chat")}`
+				label: `${theme.fg("text", "Request changes")}  ${theme.fg("dim", "reject and give feedback in chat")}`
 			}
 		];
 		this.selectList = new SelectList(items, items.length, getSelectListTheme());
@@ -6627,7 +6844,7 @@ var PlanApprovalInlineComponent = class PlanApprovalInlineComponent extends Cont
 		};
 		this.contentBox.addChild(this.selectList);
 		this.contentBox.addChild(new Spacer(1));
-		this.contentBox.addChild(new Text(theme.fg("dim", "Up/Down navigate  Enter select  Esc reject"), 0, 0));
+		this.contentBox.addChild(new Text(theme.fg("dim", "↑↓ select · Enter confirm · Esc reject"), 0, 0));
 	}
 	renderStreaming() {
 		this.contentBox.clear();
@@ -6637,7 +6854,8 @@ var PlanApprovalInlineComponent = class PlanApprovalInlineComponent extends Cont
 		this.contentBox.addChild(new Text(theme.fg("dim", "Submitting plan…"), 0, 0));
 	}
 	renderPlanHeader(prefix = "") {
-		this.contentBox.addChild(new Text(`${prefix}${theme.bold(theme.fg("accent", `Plan: ${this.planTitle}`))}`, 0, 0));
+		const plan = chalk.bold.hex(displayModeColor(mastra.purple));
+		this.contentBox.addChild(new Text(`${prefix}${plan("Plan:")} ${theme.bold(theme.fg("text", this.planTitle))}`, 0, 0));
 		if (this.planFilename) this.contentBox.addChild(new Text(theme.fg("dim", this.planFilename), 0, 0));
 		this.contentBox.addChild(new Spacer(1));
 	}
@@ -6695,6 +6913,9 @@ var PlanApprovalInlineComponent = class PlanApprovalInlineComponent extends Cont
 	}
 };
 var PlanResultComponent = class extends Container {
+	render(width) {
+		return withPlanBar(super.render(Math.max(1, width - 2)));
+	}
 	getChatSpacingKind() {
 		return "plan";
 	}
@@ -6704,7 +6925,7 @@ var PlanResultComponent = class extends Container {
 		this.addChild(contentBox);
 		const icon = options.isApproved ? theme.fg("success", "✓") : theme.fg("error", "✗");
 		const status = options.isApproved ? "Approved" : options.feedback ? "Changes requested" : "Rejected";
-		contentBox.addChild(new Text(theme.bold(theme.fg("accent", `Plan: ${options.title}`)), 0, 0));
+		contentBox.addChild(new Text(`${chalk.bold.hex(displayModeColor(mastra.purple))("Plan:")} ${theme.bold(theme.fg("text", options.title))}`, 0, 0));
 		if (options.planFilename) contentBox.addChild(new Text(theme.fg("dim", options.planFilename), 0, 0));
 		contentBox.addChild(new Spacer(1));
 		contentBox.addChild(new PlanContentBox(options.plan));
@@ -6962,21 +7183,25 @@ var SubagentExecutionComponent = class extends WidthAwareContainer {
 	}
 	rebuildForWidth(termWidth) {
 		this.clear();
-		const border = (char) => theme.bold(colorText(this.colors.border, char, (text) => theme.fg("accent", text)));
-		const maxLineWidth = Math.max(1, termWidth - 6 - 0);
+		const width = Math.max(1, termWidth - 0);
+		const maxLineWidth = Math.max(1, width - 3);
 		const typeLabelText = this.forked ? "fork" : this.agentType;
 		const typeLabel = theme.bold(colorText(this.colors.agentType, typeLabelText, (text) => theme.fg("accent", text)));
 		const modelLabel = this.modelId ? theme.fg("muted", ` ${this.modelId}`) : "";
-		const statusIcon = this.backgroundTaskId ? this.done ? this.cancelled ? theme.fg("muted", ` ■ background · ${this.backgroundTaskId}`) : this.isError ? theme.fg("error", ` ✗ background · ${this.backgroundTaskId}`) : theme.fg("success", ` ✓ background · ${this.backgroundTaskId}`) : theme.fg("warning", ` ◌ background · ${this.backgroundTaskId}`) : this.done ? this.isError ? colorText(this.colors.icon, ` ${this.icons.error}`, (text) => theme.fg("error", text)) : colorText(this.colors.icon, ` ${this.icons.success}`, (text) => theme.fg("success", text)) : colorText(this.colors.icon, ` ${this.icons.running}`, (text) => theme.fg("muted", text));
+		const statusIcon = this.backgroundTaskId ? this.done ? this.cancelled ? theme.fg("muted", ` ■ background · ${this.backgroundTaskId}`) : this.isError ? theme.fg("error", ` ✗ background · ${this.backgroundTaskId}`) : theme.fg("success", ` ✓ background · ${this.backgroundTaskId}`) : theme.fg("warning", ` ◌ background · ${this.backgroundTaskId}`) : this.done && this.isError ? colorText(this.colors.icon, ` ${this.icons.error}`, (text) => theme.fg("error", text)) : "";
+		const dot = statusDot(this.done ? this.isError ? "error" : "done" : "running");
+		const output = [];
+		const emit = () => {
+			this.addChild(new Text(toolBlock(dot, footerText, output, width).join("\n"), 0, 0));
+			this.invalidate();
+			this.ui.requestRender();
+		};
 		const durationStr = this.done ? theme.fg("muted", ` ${formatDuration$1(this.durationMs)}`) : "";
 		const footerText = `${theme.bold(colorText(this.colors.label, this.label, (text) => theme.fg("toolTitle", text)))} ${typeLabel}${modelLabel}${durationStr}${statusIcon}`;
 		if ((this.collapseOnComplete || this.backgroundTaskId) && this.done && !this.expanded) {
-			this.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
-			this.invalidate();
-			this.ui.requestRender();
+			emit();
 			return;
 		}
-		this.addChild(new Text(border("╭──"), 0, 0));
 		const taskLines = this.task.split("\n");
 		const wrappedTaskLines = [];
 		for (const line of taskLines) if (line.length > maxLineWidth) {
@@ -6991,14 +7216,11 @@ var SubagentExecutionComponent = class extends WidthAwareContainer {
 		} else wrappedTaskLines.push(line);
 		const maxTaskLines = 5;
 		const taskTruncated = !this.expanded && wrappedTaskLines.length > 6;
-		const taskContent = (taskTruncated ? wrappedTaskLines.slice(0, maxTaskLines) : wrappedTaskLines).map((line) => `${border("│")} ${line}`).join("\n");
-		this.addChild(new Text(taskContent, 0, 0));
-		if (taskTruncated) {
-			const moreText = theme.fg("muted", `... ${wrappedTaskLines.length - maxTaskLines} more lines (ctrl+e to expand)`);
-			this.addChild(new Text(`${border("│")} ${moreText}`, 0, 0));
-		}
+		const displayTaskLines = taskTruncated ? wrappedTaskLines.slice(0, maxTaskLines) : wrappedTaskLines;
+		output.push(...displayTaskLines);
+		if (taskTruncated) output.push(theme.fg("muted", `... ${wrappedTaskLines.length - maxTaskLines} more lines (ctrl+e to expand)`));
 		if (this.activity.length > 0) {
-			this.addChild(new Text(`${border("│")} ${theme.fg("muted", "───")}`, 0, 0));
+			output.push(theme.fg("muted", "───"));
 			const activityLines = this.activity.flatMap((item) => formatActivityLine(item, maxLineWidth, this.icons, this.colors.icon));
 			const cap = this.done ? this.collapsedLines : this.maxActivityLines;
 			let displayLines = activityLines;
@@ -7010,22 +7232,15 @@ var SubagentExecutionComponent = class extends WidthAwareContainer {
 			}
 			if (hiddenCount > 0) {
 				const hiddenText = theme.fg("muted", `  ... ${hiddenCount} more above${this.done ? " (ctrl+e to expand)" : ""}`);
-				this.addChild(new Text(`${border("│")} ${hiddenText}`, 0, 0));
+				output.push(hiddenText);
 			}
-			const activityContent = displayLines.map((line) => `${border("│")} ${line}`).join("\n");
-			this.addChild(new Text(activityContent, 0, 0));
+			output.push(...displayLines);
 		}
 		if (this.done && this.finalResult && this.expanded) {
-			this.addChild(new Text(`${border("│")} ${theme.fg("muted", "───")}`, 0, 0));
-			const resultContent = this.finalResult.split("\n").map((line) => {
-				const truncatedLine = line.length > maxLineWidth ? line.slice(0, maxLineWidth - 1) + "…" : line;
-				return `${border("│")} ${theme.fg("muted", truncatedLine)}`;
-			}).join("\n");
-			if (resultContent.trim()) this.addChild(new Text(resultContent, 0, 0));
-		}
-		this.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
-		this.invalidate();
-		this.ui.requestRender();
+			output.push(theme.fg("muted", "───"));
+			for (const line of this.finalResult.split("\n")) output.push(theme.fg("muted", line.length > maxLineWidth ? line.slice(0, maxLineWidth - 1) + "…" : line));
+		}
+		emit();
 	}
 };
 function clampPositiveInt(value, fallback) {
@@ -7217,13 +7432,11 @@ var SystemReminderComponent = class extends WidthAwareContainer {
 		const metadataColor = (text) => theme.fg("dim", text);
 		const bodyColor = (text) => theme.fg("text", text);
 		const hintColor = (text) => theme.fg("dim", text);
-		const innerWidth = Math.max(20, termWidth - 0 - 4);
-		const horizontal = "─".repeat(innerWidth + 1);
+		const innerWidth = Math.max(20, termWidth - 0 - 2);
 		const metadataLines = [this.path ? formatReminderPath(this.path) : void 0].filter((line) => Boolean(line));
 		const wrappedMessageLines = wrapLines(this.messageLines, innerWidth);
 		const shouldCollapse = wrappedMessageLines.length > MAX_COLLAPSED_LINES;
 		const visibleMessageLines = shouldCollapse && !this.expanded ? wrappedMessageLines.slice(0, MAX_COLLAPSED_LINES) : wrappedMessageLines;
-		this.addChild(new Text(`${border("╭")}${border(horizontal)}${border("╮")}`, 0, 0));
 		this.addChild(new Text(renderRow(title, innerWidth, border), 0, 0));
 		for (const line of metadataLines) this.addChild(new Text(renderRow(metadataColor(line), innerWidth, border), 0, 0));
 		if (metadataLines.length > 0 && visibleMessageLines.length > 0) this.addChild(new Text(renderRow("", innerWidth, border), 0, 0));
@@ -7232,13 +7445,11 @@ var SystemReminderComponent = class extends WidthAwareContainer {
 			const hint = hintColor(`... ${wrappedMessageLines.length - visibleMessageLines.length} more lines (ctrl+e to expand)`);
 			this.addChild(new Text(renderRow(hint, innerWidth, border), 0, 0));
 		}
-		this.addChild(new Text(`${border("╰")}${border(horizontal)}${border("╯")}`, 0, 0));
 	}
 };
+/** A row of the left-bar card (`width` is the room for text after the bar). */
 function renderRow(text, width, border) {
-	const content = padLine(text, width);
-	const rightPadding = hasWideGlyph(stripAnsi(text)) ? " " : "";
-	return `${border("│")} ${content}${rightPadding}${border("│")}`;
+	return text ? `${border("▎")} ${padLine(text, width)}` : border("▎");
 }
 function splitMessageLines(message) {
 	return message.split("\n").map((line) => line.trimEnd()).filter((line) => line.length > 0);
@@ -7270,9 +7481,6 @@ function formatReminderPath(path) {
 	const cwdPrefix = `${cwd}/`;
 	return path.startsWith(cwdPrefix) ? path.slice(cwdPrefix.length) : path;
 }
-function hasWideGlyph(text) {
-	return [...text].some((char) => /[\p{Extended_Pictographic}\u1100-\u115F\u2329\u232A\u2E80-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE6F\uFF00-\uFF60\uFFE0-\uFFE6]/u.test(char));
-}
 function wrapLines(lines, maxLineWidth) {
 	if (lines.length === 0) return [""];
 	const wrappedLines = [];
@@ -7303,71 +7511,6 @@ function truncateLine(text, width) {
 	return plain.length <= width ? text : plain.slice(0, Math.max(0, width - 1)) + "…";
 }
 //#endregion
-//#region src/tui/components/ansi.ts
-/**
-* Shared ANSI text-handling helpers for TUI components.
-*/
-const ANSI_CLOSERS = "\x1B]8;;\x07\x1B[0m";
-const ELLIPSIS = "…";
-const ELLIPSIS_WIDTH = visibleWidth(ELLIPSIS);
-const graphemeSegmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
-function fitVisibleText(text, maxWidth) {
-	if (maxWidth <= 0) return {
-		text: "",
-		width: 0,
-		truncated: text.length > 0
-	};
-	const targetWidth = Math.max(0, maxWidth - ELLIPSIS_WIDTH);
-	let width = 0;
-	let result = "";
-	let resultWidth = 0;
-	for (const { segment: char } of graphemeSegmenter.segment(text)) {
-		const charWidth = visibleWidth(char);
-		if (width + charWidth > maxWidth) return {
-			text: `${result}${ELLIPSIS}`,
-			width: resultWidth + ELLIPSIS_WIDTH,
-			truncated: true
-		};
-		if (width + charWidth <= targetWidth) {
-			result += char;
-			resultWidth += charWidth;
-		}
-		width += charWidth;
-	}
-	return {
-		text,
-		width,
-		truncated: false
-	};
-}
-/** Truncate a string with ANSI codes to a visible width.
-*  Handles both SGR sequences (\x1b[...m) and OSC 8 hyperlinks (\x1b]8;...;\x07).
-*/
-function truncateAnsi(str, maxWidth) {
-	if (maxWidth <= 0) return "";
-	const ansiRegex = /\x1b\[[0-9;]{0,32}m|\x1b\]8;[^\x07\x1b]{0,8192}\x07/g;
-	let visibleLength = 0;
-	let result = "";
-	let lastIndex = 0;
-	let match;
-	while ((match = ansiRegex.exec(str)) !== null) {
-		const fitted = fitVisibleText(str.slice(lastIndex, match.index), maxWidth - visibleLength);
-		if (fitted.truncated) {
-			result += fitted.text;
-			result += ANSI_CLOSERS;
-			return result;
-		}
-		result += fitted.text;
-		visibleLength += fitted.width;
-		result += match[0];
-		lastIndex = match.index + match[0].length;
-	}
-	const fitted = fitVisibleText(str.slice(lastIndex), maxWidth - visibleLength);
-	result += fitted.text;
-	if (fitted.truncated) result += ANSI_CLOSERS;
-	return result;
-}
-//#endregion
 //#region src/tui/components/task-progress.ts
 /**
 * Task progress component for the TUI.
@@ -7410,10 +7553,7 @@ var TaskProgressComponent = class extends WidthAwareContainer {
 		this.clear();
 		const completed = this.tasks.filter((t) => t.status === "completed").length;
 		const total = this.tasks.length;
-		if (!(total > 0 && completed !== total)) {
-			this.addChild(new Spacer(1));
-			return;
-		}
+		if (!(total > 0 && completed !== total)) return;
 		this.addChild(new Spacer(1));
 		if (this.quietMode) {
 			for (const line of this.formatQuietTaskLines(completed, total, width)) this.addChild(new Text(line, 0, 0));
@@ -7565,12 +7705,6 @@ var CollapsibleComponent = class extends Container {
 * Enhanced error display component with collapsible stack traces,
 * syntax highlighting, and smart summarization.
 */
-/** A single-width box-drawing border sized to `width`, truncating from the right when the corners don't fit. */
-function fitBorder(width, left, right, fill = "─") {
-	const inner = Math.max(0, width - left.length - right.length);
-	const line = left + fill.repeat(inner) + right;
-	return line.length <= width ? line : line.slice(0, Math.max(0, width));
-}
 /**
 * Parse error information from various error formats
 */
@@ -7660,38 +7794,21 @@ var ErrorDisplayComponent = class extends WidthAwareContainer {
 	rebuildForWidth(width) {
 		this.clear();
 		const info = parseErrorInfo(this.error);
-		const box = new Box(0, 0, (text) => text);
-		this.addChild(box);
-		const borderWidth = Math.max(0, width - 0);
-		const borderTop = new Text(theme.fg("error", fitBorder(borderWidth, "╭─ Error ", "╮")), 0, 0);
-		box.addChild(borderTop);
-		const errorContainer = new Container();
-		const errorBg = (text) => theme.bg("errorBg", text);
-		if (info.name && info.name !== "Error") {
-			const typeLine = new Container();
-			typeLine.addChild(new Text("│ ", 0, 0));
-			typeLine.addChild(new Text(errorBg(` ${theme.bold(theme.fg("error", info.name))} `), 0, 0));
-			errorContainer.addChild(typeLine);
-		}
-		const msgLine = new Container();
-		msgLine.addChild(new Text("│ ", 0, 0));
-		msgLine.addChild(new Text(theme.bold(info.message), 0, 0));
-		errorContainer.addChild(msgLine);
+		const room = Math.max(10, width - 0 - 2);
+		const lines = [theme.bold(theme.fg("error", info.name && info.name !== "Error" ? info.name : "Error")), ...wrapTextWithAnsi(theme.fg("text", info.message), room)];
 		if (info.file && info.line) {
 			const location = `${info.file}:${info.line}${info.column ? `:${info.column}` : ""}`;
-			errorContainer.addChild(new Text(theme.fg("muted", `  at ${location}`), 0, 0));
+			lines.push(theme.fg("muted", `at ${location}`));
 		}
-		box.addChild(errorContainer);
+		this.addChild(new Text(card(theme.getTheme().error, lines).join("\n"), 0, 0));
 		if (this.options.showContext && info.context) {
-			box.addChild(new Spacer(1));
-			box.addChild(this.createCodeContext(info.context, info.line));
+			this.addChild(new Spacer(1));
+			this.addChild(this.createCodeContext(info.context, info.line));
 		}
 		if (this.options.showStack && info.stack) {
-			box.addChild(new Spacer(1));
-			box.addChild(new CollapsibleStackTrace(info.stack, { expanded: this.options.expanded }, this.ui));
+			this.addChild(new Spacer(1));
+			this.addChild(new CollapsibleStackTrace(info.stack, { expanded: this.options.expanded }, this.ui));
 		}
-		const borderBottom = new Text(theme.fg("error", fitBorder(borderWidth, "╰", "╯")), 0, 0);
-		box.addChild(borderBottom);
 	}
 	getChatSpacingKind() {
 		return "other";
@@ -7889,6 +8006,28 @@ const QUIET_CODE_HIGHLIGHT_THEME = {
 	tag: chalk.hex("#c4b5fd"),
 	name: chalk.hex("#c4b5fd")
 };
+/** The same roles in darker tones that read on light backgrounds. */
+const LIGHT_CODE_HIGHLIGHT_THEME = {
+	default: (text) => theme.fg("toolArgs", text),
+	keyword: chalk.hex("#7e22ce"),
+	built_in: chalk.hex("#1d4ed8"),
+	type: chalk.hex("#1d4ed8"),
+	literal: chalk.hex("#b91c1c"),
+	number: chalk.hex("#b45309"),
+	string: chalk.hex("#15803d"),
+	regexp: chalk.hex("#b91c1c"),
+	title: chalk.hex("#1d4ed8"),
+	function: chalk.hex("#1d4ed8"),
+	params: chalk.hex("#3f3f46"),
+	comment: chalk.hex("#71717a"),
+	meta: chalk.hex("#52525b"),
+	attr: chalk.hex("#b45309"),
+	variable: chalk.hex("#3f3f46"),
+	tag: chalk.hex("#7e22ce"),
+	name: chalk.hex("#7e22ce")
+};
+const codeHighlightTheme = () => getThemeMode() === "light" ? LIGHT_CODE_HIGHLIGHT_THEME : CODE_HIGHLIGHT_THEME;
+const quietCodeHighlightTheme = () => getThemeMode() === "light" ? LIGHT_CODE_HIGHLIGHT_THEME : QUIET_CODE_HIGHLIGHT_THEME;
 const SHELL_CONTROL_WORDS = /* @__PURE__ */ new Set([
 	"if",
 	"then",
@@ -7999,6 +8138,8 @@ function extractContent(text) {
 /**
 * Enhanced tool execution component with collapsible sections
 */
+/** Shell output lines shown before the rest is folded behind ctrl+e. */
+const SHELL_OUTPUT_LINES = 8;
 var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 	contentBox;
 	toolName;
@@ -8121,6 +8262,12 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		this.quietShellPreviewRowFloor = Math.min(this.quietShellPreviewRowFloor, this.quietPreviewLineLimit);
 		this.rebuild();
 	}
+	getToolCall() {
+		return {
+			toolName: this.toolName,
+			args: this.args
+		};
+	}
 	setCompactToolModeColor(color) {
 		const nextColor = normalizeHexColor(color);
 		if (this.compactToolModeColor === nextColor) return;
@@ -8402,7 +8549,7 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			return highlight(preview, {
 				language: getLanguageFromPath(path),
 				ignoreIllegals: true,
-				theme: QUIET_CODE_HIGHLIGHT_THEME
+				theme: quietCodeHighlightTheme()
 			});
 		} catch {
 			return theme.fg("toolArgs", preview);
@@ -8551,9 +8698,6 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 	getQuietToolCircleColor(color) {
 		return ensureTerminalGlyphContrast(color);
 	}
-	formatToolBorder(char) {
-		return theme.bold(chalk.hex(ensureTerminalGlyphContrast(theme.getTheme().toolBorderSuccess))(char));
-	}
 	getCompactToolLabelColor() {
 		if (this.compactToolGroupLabelColor) return this.compactToolGroupLabelColor;
 		return this.getOwnCompactToolLabelColor();
@@ -8947,14 +9091,13 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			const to = limit ? from + limit - 1 : void 0;
 			rangeDisplay = theme.fg("muted", to ? `:${from}-${to}` : `:${from}`);
 		}
-		const border = (char) => this.formatToolBorder(char);
 		if (!this.result || this.isPartial) {
 			const path = argsObj?.path ? shortenPath(String(argsObj.path)) : "...";
 			const status = this.getStatusIndicator();
 			const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath, startLine) : theme.fg("toolArgs", path);
 			const footerText = `${theme.bold(theme.fg("toolTitle", "view"))} ${pathDisplay}${rangeDisplay}${status}`;
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.startBlock();
+			this.endBlock(footerText);
 			return;
 		}
 		const status = this.getStatusIndicator();
@@ -8964,7 +9107,7 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath, startLine) : theme.fg("toolArgs", path);
 		const footerText = `${theme.bold(theme.fg("toolTitle", "view"))} ${pathDisplay}${rangeDisplay}${status}`;
 		this.addLeadingPadding();
-		this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+		this.startBlock();
 		const output = this.getFormattedOutput();
 		if (output) {
 			const maxLineWidth = this.renderWidth - 4 - 0;
@@ -8975,15 +9118,15 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			if (hasMore) lines = lines.slice(0, collapsedLines);
 			const borderedLines = lines.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
+				return theme.fg("toolOutput", truncated);
 			});
-			this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
+			this.blockLines(borderedLines);
 			if (hasMore) {
 				const remaining = totalLines - collapsedLines;
-				this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`), 0, 0));
+				this.blockLine(theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`));
 			}
 		}
-		this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+		this.endBlock(footerText);
 	}
 	renderBashToolEnhanced() {
 		const argsObj = this.args;
@@ -9002,37 +9145,26 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const timeoutSuffix = timeout ? theme.fg("muted", ` (timeout ${timeout}s)`) : "";
 		const cwdSuffix = cwd ? theme.fg("muted", ` in ${cwd}`) : "";
 		const timeSuffix = this.isPartial ? timeoutSuffix : this.getDurationSuffix();
-		const renderBorderedShell = (status, outputLines) => {
-			const border = (char) => this.formatToolBorder(char);
-			const footerPrompt = `${theme.bold(theme.fg("toolTitle", "$"))} `;
-			const footerSuffix = `${cwdSuffix}${timeSuffix}${status}`;
-			const termWidth = this.renderWidth;
-			const contentWidth = Math.max(20, termWidth - 0 - 4);
-			const horizontal = "─".repeat(contentWidth + 2);
-			const renderLine = (line, color = (value) => theme.fg("toolOutput", value)) => {
-				const truncated = truncateAnsi(line, contentWidth);
-				const padding = " ".repeat(Math.max(0, contentWidth - visibleWidth(truncated)));
-				return `${border("│")} ${color(truncated)}${padding} ${border("│")}`;
-			};
-			const displayOutput = outputLines.map((line) => renderLine(line)).join("\n");
-			const hasOutput = displayOutput.trim() !== "";
-			this.contentBox.addChild(new Text(`${border("╭")}${border(horizontal)}${border("╮")}`, 0, 0));
-			if (hasOutput) {
-				this.contentBox.addChild(new Text(displayOutput, 0, 0));
-				this.contentBox.addChild(new Text(`${border("├")}${border(horizontal)}${border("┤")}`, 0, 0));
-			}
-			const footerPromptWidth = visibleWidth(footerPrompt);
-			const footerWrapWidth = Math.max(1, contentWidth - 2 - footerPromptWidth);
-			const footerLines = this.wrapQuietShellCommand(command, footerWrapWidth);
-			const footerSuffixWidth = visibleWidth(footerSuffix);
-			const continuationIndent = " ".repeat(footerPromptWidth);
-			footerLines.forEach((footerLine, index) => {
-				const prefix = index === 0 ? footerPrompt : continuationIndent;
-				const suffix = index === footerLines.length - 1 && visibleWidth(footerLine) + footerSuffixWidth <= footerWrapWidth ? footerSuffix : "";
-				this.contentBox.addChild(new Text(renderLine(`${prefix}${footerLine}${suffix}`, (value) => value), 0, 0));
-			});
-			if (visibleWidth(footerLines[footerLines.length - 1] ?? "") + footerSuffixWidth > footerWrapWidth) this.contentBox.addChild(new Text(renderLine(`${continuationIndent}${footerSuffix}`, (value) => value), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰")}${border(horizontal)}${border("╯")}`, 0, 0));
+		const renderShellBlock = (status, outputLines, failed) => {
+			const prompt = `${theme.bold(theme.fg("toolTitle", "$"))} `;
+			const suffix = `${cwdSuffix}${timeSuffix}${status}`;
+			const titleWidth = Math.max(1, this.renderWidth - 0 - 2 - visibleWidth(prompt));
+			const commandLines = this.wrapQuietShellCommand(command, titleWidth);
+			const title = commandLines.map((line, i) => (i === 0 ? prompt : " ".repeat(visibleWidth(prompt))) + line);
+			const last = title.length - 1;
+			if (visibleWidth(commandLines[last] ?? "") + visibleWidth(suffix) <= titleWidth) title[last] += suffix;
+			else title.push(" ".repeat(visibleWidth(prompt)) + suffix);
+			let shown = outputLines;
+			let hiddenNote;
+			if (!this.expanded && outputLines.length > SHELL_OUTPUT_LINES) {
+				const hidden = outputLines.length - SHELL_OUTPUT_LINES;
+				shown = outputLines.slice(-8);
+				hiddenNote = this.isPartial ? theme.fg("dim", `… ${hidden} earlier lines`) : theme.fg("dim", `… ${hidden} more lines · `) + theme.fg("muted", "ctrl+e") + theme.fg("dim", " to expand");
+			}
+			this.startBlock();
+			if (hiddenNote) this.blockLine(hiddenNote);
+			this.blockLines(shown.map((line) => theme.fg("toolOutput", line)));
+			this.endBlock(title, failed);
 		};
 		if (!this.result || this.isPartial) {
 			const status = this.getStatusIndicator();
@@ -9040,7 +9172,7 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			while (lines.length > 0 && lines[0] === "") lines.shift();
 			while (lines.length > 0 && lines[lines.length - 1] === "") lines.pop();
 			if (maxStreamLines && lines.length > maxStreamLines) lines = lines.slice(-maxStreamLines);
-			renderBorderedShell(status, lines);
+			renderShellBlock(status, lines);
 			return;
 		}
 		const prepareOutputLines = (output) => {
@@ -9052,17 +9184,17 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		};
 		const failed = this.getShellFailureLine() !== void 0;
 		const output = this.streamingOutput.trim() || this.getFormattedOutput();
-		renderBorderedShell(this.getStatusIndicator(failed), prepareOutputLines(output));
+		renderShellBlock(this.getStatusIndicator(failed), prepareOutputLines(output), failed);
 	}
 	/**
 	* One call's slice of a shared quiet shell box. The first call in a run opens the box with a
 	* `$ <path>` header, a call in a new directory adds another header, and the last call closes it.
 	*/
 	renderQuietShellGroupRow() {
-		const border = (char) => this.formatToolBorder(char);
 		const fullWidth = Math.max(20, this.renderWidth - 0 - 4);
 		const naturalWidth = this.quietShellGroupWidth ?? this.getQuietShellNaturalWidth() ?? 0;
 		const contentWidth = Math.min(fullWidth, Math.max(QUIET_SHELL_MIN_CONTENT_WIDTH, naturalWidth));
+		const border = (char) => theme.bold(chalk.hex(ensureTerminalGlyphContrast(theme.getTheme().toolBorderSuccess))(char));
 		const rule = (left, right) => `${border(left)}${border("─".repeat(contentWidth + 2))}${border(right)}`;
 		const singleLine = (text) => text.replace(TERMINAL_SEQUENCE_RE, "").replace(/[\t\n\r\v\f]/g, " ").replace(/[\x00-\x08\x0e-\x1f\x7f-\x9f]/g, "");
 		const row = (left, right = "") => {
@@ -9172,16 +9304,15 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const timeSuffix = this.isPartial ? "" : this.getDurationSuffix();
 		const label = isKill ? "kill" : isWait ? "wait" : "output";
 		const renderBorderedProcess = (status, outputLines) => {
-			const border = (char) => this.formatToolBorder(char);
 			const footerText = `${theme.bold(theme.fg("toolTitle", label))} ${theme.fg("toolArgs", `PID ${pid}`)}${timeSuffix}${status}`;
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+			this.startBlock();
 			const maxLineWidth = this.renderWidth - 4 - 0;
-			const displayOutput = outputLines.map((line) => {
+			const borderedLines = outputLines.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
-			}).join("\n");
-			if (displayOutput.trim()) this.contentBox.addChild(new Text(displayOutput, 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+				return theme.fg("toolOutput", truncated);
+			});
+			if (borderedLines.join("\n").trim()) this.blockLines(borderedLines);
+			this.endBlock(footerText);
 		};
 		const prepareOutputLines = (output) => {
 			let lines = output.split("\n");
@@ -9211,11 +9342,10 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			const oldStr = argsObj?.old_str ?? argsObj?.old_string;
 			const newStr = argsObj?.new_str ?? argsObj?.new_string;
 			if (oldStr != null && newStr != null) {
-				const border = (char) => this.formatToolBorder(char);
 				const maxLineWidth = this.renderWidth - 4 - 0;
 				const footerText = `${theme.bold(theme.fg("toolTitle", "edit"))} ${pathDisplay}${theme.fg("muted", startLine)}${status}`;
 				this.addLeadingPadding();
-				this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+				this.startBlock();
 				const { lines: diffLines } = this.generateDiffLines(String(oldStr), String(newStr));
 				const collapsedLines = this.getCollapsedLineLimit(15);
 				const totalLines = diffLines.length;
@@ -9226,22 +9356,20 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 					skippedAbove = totalLines - collapsedLines;
 					linesToShow = diffLines.slice(-collapsedLines);
 				}
-				if (skippedAbove > 0) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`), 0, 0));
+				if (skippedAbove > 0) this.blockLine(theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`));
 				const borderedLines = linesToShow.map((line) => {
 					const truncated = truncateAnsi(line, maxLineWidth);
-					return border("│") + " " + theme.fg("toolOutput", truncated);
+					return theme.fg("toolOutput", truncated);
 				});
-				this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
-				this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+				this.blockLines(borderedLines);
+				this.endBlock(footerText);
 				return;
 			}
-			const editBorder = (char) => this.formatToolBorder(char);
 			const headerText = `${theme.bold(theme.fg("toolTitle", "edit"))} ${pathDisplay}${theme.fg("muted", startLine)}${status}`;
-			this.contentBox.addChild(new Text(editBorder("╭──"), 0, 0));
-			this.contentBox.addChild(new Text(`${editBorder("╰──")} ${headerText}`, 0, 0));
+			this.startBlock();
+			this.endBlock(headerText);
 			return;
 		}
-		const border = (char) => this.formatToolBorder(char);
 		const status = this.getStatusIndicator();
 		const termWidth = this.renderWidth;
 		const availableForPath = termWidth - ("╰── edit  " + startLine + " ✓").length - 6 - 0;
@@ -9250,7 +9378,7 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath, startLineNum) : theme.fg("toolArgs", path);
 		const footerText = `${theme.bold(theme.fg("toolTitle", "edit"))} ${pathDisplay}${theme.fg("muted", startLine)}${status}`;
 		this.addLeadingPadding();
-		this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+		this.startBlock();
 		const finalOldStr = argsObj?.old_str ?? argsObj?.old_string;
 		const finalNewStr = argsObj?.new_str ?? argsObj?.new_string;
 		if (finalOldStr != null && finalNewStr != null && !this.result.isError) {
@@ -9266,15 +9394,15 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 				skippedBefore = start;
 			}
 			const maxLineWidth = termWidth - 4 - 0;
-			if (skippedBefore > 0) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${skippedBefore} lines above`), 0, 0));
+			if (skippedBefore > 0) this.blockLine(theme.fg("muted", `... ${skippedBefore} lines above`));
 			const borderedLines = linesToShow.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
+				return theme.fg("toolOutput", truncated);
 			});
-			this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
+			this.blockLines(borderedLines);
 			if (hasMore) {
 				const remaining = totalLines - (skippedBefore + linesToShow.length);
-				if (remaining > 0) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`), 0, 0));
+				if (remaining > 0) this.blockLine(theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`));
 			}
 		} else if (this.result.isError) {
 			const output = this.getFormattedOutput();
@@ -9282,12 +9410,12 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 				const maxLineWidth = termWidth - 4 - 0;
 				const lines = output.split("\n").map((line) => {
 					const truncated = truncateAnsi(line, maxLineWidth);
-					return border("│") + " " + theme.fg("error", truncated);
+					return theme.fg("error", truncated);
 				});
-				this.contentBox.addChild(new Text(lines.join("\n"), 0, 0));
+				this.blockLines(lines);
 			}
 		}
-		this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+		this.endBlock(footerText);
 		const diagnostics = this.parseLSPDiagnostics();
 		if (diagnostics && !diagnostics.hasIssues) this.contentBox.addChild(new Text(theme.fg("muted", `  ✓ No LSP issues`), 0, 0));
 		else if (diagnostics && diagnostics.hasIssues) {
@@ -9371,16 +9499,14 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const content = argsObj?.content ? String(argsObj.content) : "";
 		if (!this.result || this.isPartial) {
 			if (!content) {
-				const writeBorder = (char) => this.formatToolBorder(char);
 				const path = argsObj?.path ? shortenPath(String(argsObj.path)) : "...";
 				const status = this.getStatusIndicator();
 				const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath) : theme.fg("toolArgs", path);
 				const footerText = `${theme.bold(theme.fg("toolTitle", "write"))} ${pathDisplay}${status}`;
-				this.contentBox.addChild(new Text(writeBorder("╭──"), 0, 0));
-				this.contentBox.addChild(new Text(`${writeBorder("╰──")} ${footerText}`, 0, 0));
+				this.startBlock();
+				this.endBlock(footerText);
 				return;
 			}
-			const border = (char) => this.formatToolBorder(char);
 			const status = this.getStatusIndicator();
 			const termWidth = this.renderWidth;
 			const maxLineWidth = termWidth - 4 - 0;
@@ -9390,8 +9516,8 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath) : theme.fg("toolArgs", path);
 			const footerText = `${theme.bold(theme.fg("toolTitle", "write"))} ${pathDisplay}${status}`;
 			this.addLeadingPadding();
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			let lines = highlightCode(content, fullPath).split("\n");
+			this.startBlock();
+			let lines = highlightCode(content, fullPath, void 0, false).split("\n");
 			const collapsedLines = this.getCollapsedLineLimit(20);
 			const totalLines = lines.length;
 			const hasMore = !this.expanded && totalLines > collapsedLines + 1;
@@ -9400,16 +9526,15 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 				skippedAbove = totalLines - collapsedLines;
 				lines = lines.slice(-collapsedLines);
 			}
-			if (skippedAbove > 0) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`), 0, 0));
+			if (skippedAbove > 0) this.blockLine(theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`));
 			const borderedLines = lines.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
+				return theme.fg("toolOutput", truncated);
 			});
-			this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.blockLines(borderedLines);
+			this.endBlock(footerText);
 			return;
 		}
-		const border = (char) => this.formatToolBorder(char);
 		const status = this.getStatusIndicator();
 		const termWidth = this.renderWidth;
 		const maxLineWidth = termWidth - 4 - 0;
@@ -9419,18 +9544,18 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath) : theme.fg("toolArgs", path);
 		const footerText = `${theme.bold(theme.fg("toolTitle", "write"))} ${pathDisplay}${status}`;
 		this.addLeadingPadding();
-		this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+		this.startBlock();
 		if (this.result.isError) {
 			const output = this.getFormattedOutput();
 			if (output) {
 				const lines = output.split("\n").map((line) => {
 					const truncated = truncateAnsi(line, maxLineWidth);
-					return border("│") + " " + theme.fg("error", truncated);
+					return theme.fg("error", truncated);
 				});
-				this.contentBox.addChild(new Text(lines.join("\n"), 0, 0));
+				this.blockLines(lines);
 			}
 		} else if (content) {
-			let lines = highlightCode(content, fullPath).split("\n");
+			let lines = highlightCode(content, fullPath, void 0, false).split("\n");
 			const collapsedLines = this.getCollapsedLineLimit(20);
 			const totalLines = lines.length;
 			const hasMore = !this.expanded && totalLines > collapsedLines + 1;
@@ -9439,14 +9564,14 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 				skippedAbove = totalLines - collapsedLines;
 				lines = lines.slice(-collapsedLines);
 			}
-			if (skippedAbove > 0) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`), 0, 0));
+			if (skippedAbove > 0) this.blockLine(theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`));
 			const borderedLines = lines.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
+				return theme.fg("toolOutput", truncated);
 			});
-			this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
+			this.blockLines(borderedLines);
 		}
-		this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+		this.endBlock(footerText);
 	}
 	renderListFilesEnhanced() {
 		const argsObj = this.args;
@@ -9454,14 +9579,13 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const path = argsObj?.path ? shortenPath(String(argsObj.path)) : "/";
 		const pattern = argsObj?.pattern ? String(argsObj.pattern) : "";
 		const patternDisplay = pattern ? " " + theme.fg("muted", pattern) : "";
-		const border = (char) => this.formatToolBorder(char);
 		const status = this.getStatusIndicator();
 		const maxLineWidth = this.renderWidth - 4 - 0;
 		if (!this.result || this.isPartial) {
 			const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath) : theme.fg("toolArgs", path);
 			const footerText = `${theme.bold(theme.fg("toolTitle", "list"))} ${pathDisplay}${patternDisplay}${status}`;
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.startBlock();
+			this.endBlock(footerText);
 			return;
 		}
 		const output = this.getFormattedOutput();
@@ -9481,18 +9605,17 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			}
 			const pathDisplay = fullPath ? fileLink(theme.fg("toolArgs", path), fullPath) : theme.fg("toolArgs", path);
 			const footerText = `${theme.bold(theme.fg("toolTitle", "list"))} ${pathDisplay}${patternDisplay}${summaryDisplay}${status}`;
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			if (skippedAbove > 0) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`), 0, 0));
+			this.startBlock();
+			if (skippedAbove > 0) this.blockLine(theme.fg("muted", `... ${skippedAbove} lines above (ctrl+e to expand)`));
 			const borderedLines = lines.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
+				return theme.fg("toolOutput", truncated);
 			});
-			this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.blockLines(borderedLines);
+			this.endBlock(footerText);
 		}
 	}
 	renderLspInspectEnhanced() {
-		const border = (char) => this.formatToolBorder(char);
 		const status = this.getStatusIndicator();
 		const maxLineWidth = this.renderWidth - 4 - 0;
 		const argsObj = this.args;
@@ -9506,17 +9629,17 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		].filter(Boolean).join(" ");
 		if (!this.result || this.isPartial) {
 			const footerText = `${theme.bold(theme.fg("toolTitle", "lsp_inspect"))}${argsSummary ? " " + theme.fg("toolArgs", argsSummary) : ""}${status}`;
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.startBlock();
+			this.endBlock(footerText);
 			return;
 		}
 		const rawText = this.result.content.filter((c) => c.type === "text" && c.text).map((c) => c.text).join("\n");
 		if (this.result.isError || !rawText.trim()) {
 			const footerText = `${theme.bold(theme.fg("toolTitle", "lsp_inspect"))}${argsSummary ? " " + theme.fg("toolArgs", argsSummary) : ""}${status}`;
 			const output = this.getFormattedOutput();
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			if (output) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("error", output), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.startBlock();
+			if (output) this.blockLine(theme.fg("error", output));
+			this.endBlock(footerText);
 			return;
 		}
 		let parsed;
@@ -9528,67 +9651,64 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		}
 		if (parsed.error) {
 			const footerText = `${theme.bold(theme.fg("toolTitle", "lsp_inspect"))}${argsSummary ? " " + theme.fg("toolArgs", argsSummary) : ""}${status}`;
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			this.contentBox.addChild(new Text(border("│") + " " + theme.fg("error", parsed.error), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.startBlock();
+			this.blockLine(theme.fg("error", parsed.error));
+			this.endBlock(footerText);
 			return;
 		}
 		const footerText = `${theme.bold(theme.fg("toolTitle", "lsp_inspect"))}${argsSummary ? " " + theme.fg("toolArgs", argsSummary) : ""}${status}`;
-		this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+		this.startBlock();
 		if (parsed.hover) {
 			const hoverLines = (parsed.hover.value || "").split("\n").filter((line) => line.trim() !== "");
-			if (hoverLines.length > 0) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("toolArgs", "hover:"), 0, 0));
+			if (hoverLines.length > 0) this.blockLine(theme.fg("toolArgs", "hover:"));
 			for (const line of hoverLines) {
 				const truncated = truncateAnsi(line, maxLineWidth - 2);
-				const prefix = border("│") + " ";
-				this.contentBox.addChild(new Text(prefix + theme.fg("text", truncated), 0, 0));
+				this.blockLine(theme.fg("text", truncated));
 			}
 		}
 		if (parsed.diagnostics && parsed.diagnostics.length > 0) {
-			this.contentBox.addChild(new Text(border("│"), 0, 0));
-			this.contentBox.addChild(new Text(border("│") + " " + theme.fg("toolArgs", "diagnostics:"), 0, 0));
+			this.blockLine("");
+			this.blockLine(theme.fg("toolArgs", "diagnostics:"));
 			for (const diagnostic of parsed.diagnostics) {
 				const diagLine = `${diagnostic.source ? `${diagnostic.severity} (${diagnostic.source})` : diagnostic.severity}: ${diagnostic.message}`;
-				this.contentBox.addChild(new Text(border("│") + " " + theme.fg(diagnostic.severity === "error" ? "error" : "text", truncateAnsi(diagLine, maxLineWidth - 2)), 0, 0));
+				this.blockLine(theme.fg(diagnostic.severity === "error" ? "error" : "text", truncateAnsi(diagLine, maxLineWidth - 2)));
 			}
 		}
 		if (parsed.definition && parsed.definition.length > 0) {
-			this.contentBox.addChild(new Text(border("│"), 0, 0));
-			this.contentBox.addChild(new Text(border("│") + " " + theme.fg("toolArgs", "definition:"), 0, 0));
+			this.blockLine("");
+			this.blockLine(theme.fg("toolArgs", "definition:"));
 			for (const def of parsed.definition) {
 				const location = def.location || "";
 				const preview = def.preview || "";
 				const parsedLoc = this.parseLspLocation(location);
-				const displayLoc = parsedLoc ? fileLink(theme.fg("toolOutput", parsedLoc.shortPath + ":" + parsedLoc.lineCol), parsedLoc.absPath, parsedLoc.line) : theme.fg("toolOutput", location);
-				const defLine = border("│") + " " + displayLoc;
-				this.contentBox.addChild(new Text(truncateAnsi(defLine, maxLineWidth), 0, 0));
+				const defLine = parsedLoc ? fileLink(theme.fg("toolOutput", parsedLoc.shortPath + ":" + parsedLoc.lineCol), parsedLoc.absPath, parsedLoc.line) : theme.fg("toolOutput", location);
+				this.blockLine(truncateAnsi(defLine, maxLineWidth));
 				if (preview) {
-					const previewLine = border("│") + "   " + theme.fg("text", truncateAnsi(preview, maxLineWidth - 3));
-					this.contentBox.addChild(new Text(previewLine, 0, 0));
+					const previewLine = "  " + theme.fg("text", truncateAnsi(preview, maxLineWidth - 3));
+					this.blockLine(previewLine);
 				}
 			}
 		}
 		if (parsed.implementation && parsed.implementation.length > 0) {
 			const implCount = parsed.implementation.length;
 			const implLabel = implCount === 1 ? "implementation:" : `implementations (${implCount}):`;
-			this.contentBox.addChild(new Text(border("│"), 0, 0));
+			this.blockLine("");
 			const maxShow = this.expanded ? parsed.implementation.length : 5;
 			const shown = parsed.implementation.slice(0, maxShow);
 			const remaining = parsed.implementation.length - maxShow;
-			this.contentBox.addChild(new Text(border("│") + " " + theme.fg("toolArgs", implLabel), 0, 0));
+			this.blockLine(theme.fg("toolArgs", implLabel));
 			for (const loc of shown) {
 				const parsedLoc = this.parseLspLocation(loc);
-				const displayLoc = parsedLoc ? fileLink(theme.fg("toolOutput", parsedLoc.shortPath + ":" + parsedLoc.lineCol), parsedLoc.absPath, parsedLoc.line) : theme.fg("toolOutput", loc);
-				const implLine = border("│") + " " + displayLoc;
-				this.contentBox.addChild(new Text(truncateAnsi(implLine, maxLineWidth), 0, 0));
+				const implLine = parsedLoc ? fileLink(theme.fg("toolOutput", parsedLoc.shortPath + ":" + parsedLoc.lineCol), parsedLoc.absPath, parsedLoc.line) : theme.fg("toolOutput", loc);
+				this.blockLine(truncateAnsi(implLine, maxLineWidth));
 			}
 			if (remaining > 0 && !this.expanded) {
-				const moreLine = border("│") + " " + theme.fg("toolOutput", `... ${remaining} more (ctrl+e to expand)`);
-				this.contentBox.addChild(new Text(moreLine, 0, 0));
+				const moreLine = theme.fg("toolOutput", `... ${remaining} more (ctrl+e to expand)`);
+				this.blockLine(moreLine);
 			}
 		}
-		if (!parsed.hover && !parsed.diagnostics?.length && !parsed.definition?.length && !parsed.implementation?.length) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", "No hover, diagnostics, definition, or implementation results"), 0, 0));
-		this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+		if (!parsed.hover && !parsed.diagnostics?.length && !parsed.definition?.length && !parsed.implementation?.length) this.blockLine(theme.fg("muted", "No hover, diagnostics, definition, or implementation results"));
+		this.endBlock(footerText);
 	}
 	/**
 	* Parse an LSP location string like "$cwd/path:Lline:Cchar" into components.
@@ -9624,16 +9744,15 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 	renderTaskWriteEnhanced() {
 		const tasks = this.args?.tasks;
 		const status = this.getStatusIndicator();
-		const border = (char) => this.formatToolBorder(char);
 		const count = tasks?.length ?? 0;
 		const countSuffix = count > 0 ? theme.fg("muted", ` (${count} tasks)`) : "";
 		const footerText = `${theme.bold(theme.fg("toolTitle", "task_write"))}${countSuffix}${status}`;
-		this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+		this.startBlock();
 		if (!this.isPartial && this.result?.isError) {
 			const output = this.getFormattedOutput();
-			if (output) this.contentBox.addChild(new Text(border("│") + " " + theme.fg("error", output), 0, 0));
+			if (output) this.blockLine(theme.fg("error", output));
 		}
-		this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+		this.endBlock(footerText);
 	}
 	renderWebSearchEnhanced() {
 		const argsObj = this.args;
@@ -9647,10 +9766,9 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const status = this.getStatusIndicator();
 		const queryDisplay = query ? ` ${theme.fg("toolArgs", `"${query}"`)}` : "";
 		const footerText = `${theme.bold(theme.fg("toolTitle", "web_search"))}${queryDisplay}${status}`;
-		const border = (char) => this.formatToolBorder(char);
 		if (!this.result || this.isPartial) {
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.startBlock();
+			this.endBlock(footerText);
 			return;
 		}
 		if (this.result.isError) {
@@ -9661,7 +9779,7 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		if (output) {
 			const maxLineWidth = this.renderWidth - 4 - 0;
 			this.addLeadingPadding();
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+			this.startBlock();
 			let lines = output.split("\n");
 			const collapsedLines = this.getCollapsedLineLimit(10);
 			const totalLines = lines.length;
@@ -9669,15 +9787,18 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			if (hasMore) lines = lines.slice(0, collapsedLines);
 			const borderedLines = lines.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
+				return theme.fg("toolOutput", truncated);
 			});
-			this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
+			this.blockLines(borderedLines);
 			if (hasMore) {
 				const remaining = totalLines - collapsedLines;
-				this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`), 0, 0));
+				this.blockLine(theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`));
 			}
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
-		} else this.contentBox.addChild(new Text(footerText, 0, 0));
+			this.endBlock(footerText);
+		} else {
+			this.startBlock();
+			this.endBlock(footerText);
+		}
 	}
 	/**
 	* Format web search results as a clean list of titles + URLs.
@@ -9738,8 +9859,7 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		return outcome ? `Outcome: ${outcome}` : "";
 	}
 	renderAgentSignalSendEnhanced() {
-		const border = (char) => this.formatToolBorder(char);
-		const maxLineWidth = Math.max(10, this.renderWidth - 0 - 4);
+		const maxLineWidth = Math.max(10, this.renderWidth - 0 - 6);
 		const args = this.args;
 		const target = sanitizeAnsiForRendering(typeof args?.targetId === "string" ? args.targetId : "unknown peer");
 		const priority = sanitizeAnsiForRendering(typeof args?.priority === "string" ? args.priority : "medium");
@@ -9751,34 +9871,33 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		const renderField = (label, value, preserveMessageFormatting = false) => {
 			const displayValue = value || "—";
 			const lines = preserveMessageFormatting ? this.wrapAgentSignalMessageLines(displayValue, maxLineWidth) : this.wrapPreviewLines(displayValue, maxLineWidth, maxLineWidth);
-			this.contentBox.addChild(new Text(`${border("│")} ${theme.fg("toolArgs", `${label}:`)}`, 0, 0));
-			for (const line of lines) this.contentBox.addChild(new Text(`${border("│")}   ${theme.fg("text", line)}`, 0, 0));
+			this.blockLine(`${theme.fg("toolArgs", `${label}:`)}`);
+			for (const line of lines) this.blockLine(`  ${theme.fg("text", line)}`);
 		};
-		this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+		this.startBlock();
 		renderField("target", target);
-		this.contentBox.addChild(new Text(`${border("│")} ${theme.fg("toolArgs", "priority:")} ${theme.fg("text", priority)}  ${theme.fg("toolArgs", "expects reply:")} ${theme.fg("text", expectsReply)}`, 0, 0));
-		this.contentBox.addChild(new Text(border("│"), 0, 0));
+		this.blockLine(`${theme.fg("toolArgs", "priority:")} ${theme.fg("text", priority)}  ${theme.fg("toolArgs", "expects reply:")} ${theme.fg("text", expectsReply)}`);
+		this.blockLine("");
 		renderField("message", message, true);
 		if (outcome) {
-			this.contentBox.addChild(new Text(border("│"), 0, 0));
+			this.blockLine("");
 			renderField("outcome", outcome);
 		}
-		this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+		this.endBlock(footerText);
 	}
 	renderGenericToolEnhanced() {
-		const border = (char) => this.formatToolBorder(char);
 		const status = this.getStatusIndicator();
 		const argsSummary = this.formatArgsSummary();
 		const footerText = `${theme.bold(theme.fg("toolTitle", this.toolName))}${argsSummary}${status}`;
 		if (!this.result || this.isPartial) {
 			const partialOutput = this.result ? this.getFormattedOutput() : "";
 			const preview = partialOutput ? partialOutput.split("\n") : this.formatArgsPreview();
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+			this.startBlock();
 			if (preview.length > 0) {
-				const previewLines = preview.map((line) => border("│") + " " + theme.fg("toolOutput", line));
-				this.contentBox.addChild(new Text(previewLines.join("\n"), 0, 0));
+				const previewLines = preview.map((line) => theme.fg("toolOutput", line));
+				this.blockLines(previewLines);
 			}
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
+			this.endBlock(footerText);
 			return;
 		}
 		if (this.result.isError) {
@@ -9789,7 +9908,7 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		if (output) {
 			const maxLineWidth = this.renderWidth - 4 - 0;
 			this.addLeadingPadding();
-			this.contentBox.addChild(new Text(border("╭──"), 0, 0));
+			this.startBlock();
 			let lines = output.split("\n");
 			const collapsedLines = this.getCollapsedLineLimit(10);
 			const totalLines = lines.length;
@@ -9797,15 +9916,18 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 			if (hasMore) lines = lines.slice(0, collapsedLines);
 			const borderedLines = lines.map((line) => {
 				const truncated = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + theme.fg("toolOutput", truncated);
+				return theme.fg("toolOutput", truncated);
 			});
-			this.contentBox.addChild(new Text(borderedLines.join("\n"), 0, 0));
+			this.blockLines(borderedLines);
 			if (hasMore) {
 				const remaining = totalLines - collapsedLines;
-				this.contentBox.addChild(new Text(border("│") + " " + theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`), 0, 0));
+				this.blockLine(theme.fg("muted", `... ${remaining} more lines (ctrl+e to expand)`));
 			}
-			this.contentBox.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
-		} else this.contentBox.addChild(new Text(footerText, 0, 0));
+			this.endBlock(footerText);
+		} else {
+			this.startBlock();
+			this.endBlock(footerText);
+		}
 	}
 	/**
 	* Format a compact args preview as key="value" pairs.
@@ -9885,10 +10007,35 @@ var ToolExecutionComponentEnhanced = class extends WidthAwareContainer {
 		if (this.isPartial) return theme.fg("warning", ` ◌ background · ${this.backgroundTaskId}`);
 		return isError ? theme.fg("error", ` ✗ background · ${this.backgroundTaskId}`) : theme.fg("success", ` ✓ background · ${this.backgroundTaskId}`);
 	}
+	/** Output lines of the block being built (see startBlock / endBlock). */
+	pendingBlock = null;
+	/** Start a tool block: collect output lines until endBlock prints the title and the panel. */
+	startBlock() {
+		this.pendingBlock = [];
+	}
+	blockLine(line) {
+		(this.pendingBlock ??= []).push(line);
+	}
+	blockLines(lines) {
+		for (const line of lines) this.blockLine(line);
+	}
+	/**
+	* Finish the block: a "● title" row (the dot carries the status: green done, red failed, grey
+	* running), then any collected output on a shaded half-block panel, indented under the title.
+	*/
+	endBlock(title, isError = this.isErrorResult()) {
+		const output = this.pendingBlock ?? [];
+		this.pendingBlock = null;
+		const width = Math.max(1, this.renderWidth - 0);
+		this.contentBox.addChild(new Text(toolBlock(this.getStatusDot(isError), title, output, width).join("\n"), 0, 0));
+	}
+	getStatusDot(isError = this.isErrorResult()) {
+		return statusDot(this.isPartial ? "running" : isError ? "error" : "done");
+	}
 	getStatusIndicator(isError = this.isErrorResult()) {
 		const backgroundStatus = this.getBackgroundStatusIndicator(isError);
 		if (backgroundStatus) return backgroundStatus;
-		return this.isPartial ? theme.fg("muted", " ⋯") : isError ? theme.fg("error", " ✗") : theme.fg("success", " ✓");
+		return !this.isPartial && isError ? theme.fg("error", " ✗") : "";
 	}
 	getDurationSuffix() {
 		const duration = this.formatDuration();
@@ -10010,13 +10157,13 @@ function getPlainCodeFromViewOutput(content, startLine) {
 	return codeLines.join("\n");
 }
 /** Strip line number formatting (cat -n or workspace →) and apply syntax highlighting */
-function highlightCode(content, path, startLine) {
-	const code = getPlainCodeFromViewOutput(content, startLine);
+function highlightCode(content, path, startLine, hasLineNumbers = true) {
+	const code = hasLineNumbers ? getPlainCodeFromViewOutput(content, startLine) : content.replace(/\n+$/, "");
 	try {
 		return highlight(code, {
 			language: getLanguageFromPath(path),
 			ignoreIllegals: true,
-			theme: CODE_HIGHLIGHT_THEME
+			theme: codeHighlightTheme()
 		});
 	} catch {
 		return code;
@@ -10042,8 +10189,10 @@ function parseErrorFromContent(content) {
 //#endregion
 //#region src/tui/components/user-message.ts
 /**
-* Component that renders a user message with a thin border that fits the content.
+* Component that renders a sent user message on the same half-block panel as the prompt.
 */
+/** Columns of shaded padding on each side of a sent message's text. */
+const PAD = 2;
 /**
 * Strip ANSI escape sequences from a string.
 */
@@ -10051,7 +10200,8 @@ function stripAnsi$1(s) {
 	return s.replace(/\x1b\[[0-9;]*m/g, "");
 }
 /**
-* A renderable wrapper that adds a thin box-drawing border sized to content.
+* A renderable wrapper that puts content on the prompt's half-block panel (full width, shaded, no border).
+* `label` (e.g. "steer") is shown before the text.
 */
 var BorderedBox = class {
 	child;
@@ -10082,52 +10232,18 @@ var BorderedBox = class {
 		return result;
 	}
 	renderUncached(width) {
-		const borderColor = (s) => this.borderColor ? chalk.hex(this.borderColor)(s) : this.pending ? chalk.hex(theme.getTheme().dim)(s) : chalk.hex(tintHex(mastra.green, 1))(s);
-		const maxInnerWidth = Math.max(1, width - 6 - 2 - 0 - 1);
-		const childLines = this.child.render(maxInnerWidth);
+		const prefix = this.label ? theme.fg("dim", `${this.label} · `) : "";
+		const prefixWidth = this.label ? visibleWidth(this.label) + 3 : 0;
+		const contentWidth = Math.max(1, width - 0 - prefixWidth - PAD * 2);
+		const childLines = this.child.render(contentWidth);
 		if (childLines.length === 0) return [];
-		const trimmedLines = [];
-		let maxContentWidth = 0;
-		for (const line of childLines) {
-			const trimmed = line.replace(/\s+$/, "");
-			trimmedLines.push(trimmed);
-			const w = visibleWidth(stripAnsi$1(trimmed));
-			if (w > maxContentWidth) maxContentWidth = w;
-		}
-		maxContentWidth = Math.min(maxContentWidth, maxInnerWidth);
-		let boxInner = maxContentWidth + 2;
-		if (this.label) {
-			const labelOverhead = ` ${this.label} `.length + 2;
-			boxInner = Math.max(boxInner + 4, labelOverhead) - 4;
-		}
-		const boxWidth = boxInner + 4;
-		const lines = [];
-		const promptPrefix = chalk.hex(tintHex(mastra.green, 1))("»") + " ";
-		const promptWidth = 2;
-		if (this.label) {
-			const labelText = ` ${this.label} `;
-			const labelLen = labelText.length;
-			const remaining = Math.max(0, boxWidth - 2 - labelLen);
-			lines.push(borderColor("╭") + chalk.hex(theme.getTheme().dim)(labelText) + borderColor(`${"─".repeat(remaining)}╮`));
-		} else lines.push(borderColor(`╭${"─".repeat(boxWidth - 2)}╮`));
-		for (let i = 0; i < trimmedLines.length; i++) {
-			let trimmed = trimmedLines[i];
-			let vis = visibleWidth(stripAnsi$1(trimmed));
-			const lineMaxWidth = i === 0 ? boxInner - promptWidth : boxInner;
-			if (vis > lineMaxWidth) {
-				trimmed = truncateToWidth(trimmed, lineMaxWidth);
-				vis = visibleWidth(stripAnsi$1(trimmed));
-			}
-			if (i === 0) {
-				const padNeeded = Math.max(0, boxInner - vis - promptWidth);
-				lines.push(borderColor("│") + " " + promptPrefix + trimmed + " ".repeat(padNeeded) + " " + borderColor("│"));
-			} else {
-				const padNeeded = Math.max(0, boxInner - vis);
-				lines.push(borderColor("│") + " " + trimmed + " ".repeat(padNeeded) + " " + borderColor("│"));
-			}
-		}
-		lines.push(borderColor(`╰${"─".repeat(boxWidth - 2)}╯`));
-		return lines.map((l) => "" + l);
+		const rows = childLines.map((line, i) => {
+			let content = line.replace(/\s+$/, "");
+			if (visibleWidth(stripAnsi$1(content)) > contentWidth) content = truncateToWidth(content, contentWidth);
+			return `${" ".repeat(PAD)}${i === 0 ? prefix : " ".repeat(prefixWidth)}${content}`;
+		});
+		const fitWidth = Math.max(...rows.map((r) => visibleWidth(stripAnsi$1(r)))) + PAD;
+		return halfBlockPanel(rows, Math.min(width - 0, fitWidth), promptSurface()).map((l) => "" + l);
 	}
 };
 var UserMessageComponent = class extends Container {
@@ -10160,20 +10276,33 @@ var PendingUserMessageComponent = class extends Container {
 //#endregion
 //#region src/tui/components/tool-approval-dialog.ts
 /**
-* Tool approval dialog component.
-* Shows tool details and prompts user to approve or decline execution.
+* Tool approval prompt: one inline row in the chat, directly under the pending tool call.
 *
 * Keyboard shortcuts:
 *   y       — approve this one call
 *   n / Esc — decline this call
 *   a       — always allow this category for this thread
 *   Y       — switch to YOLO mode (approve all)
+*   Ctrl+E  — show / hide long arguments in full (when the card lists them)
+*/
+/** Long argument values (e.g. file contents) stop after this many lines until expanded with Ctrl+E. */
+const TARGET_MAX_LINES = 40;
+/**
+* Arguments come from the model, so control characters must not reach the terminal: escape sequences could
+* restyle, move or clear what the card shows. They're shown as visible \xNN escapes (the card shows exactly
+* what gets approved); newlines stay, CRLF becomes a newline and tabs become spaces.
 */
-var ToolApprovalDialogComponent = class extends Box {
+function escapeControls(text) {
+	return text.replace(/\r\n/g, "\n").replace(/\t/g, "  ").replace(/[\u0000-\u0009\u000b-\u001f\u007f-\u009f]/g, (c) => `\\x${c.charCodeAt(0).toString(16).padStart(2, "0")}`);
+}
+var ToolApprovalDialogComponent = class {
 	toolName;
 	args;
 	categoryLabel;
+	showTarget;
 	onAction;
+	requestRender;
+	expanded = false;
 	resolved = false;
 	_focused = false;
 	get focused() {
@@ -10183,28 +10312,84 @@ var ToolApprovalDialogComponent = class extends Box {
 		this._focused = value;
 	}
 	constructor(options) {
-		super(2, 1, (text) => theme.bg("overlayBg", text));
 		this.toolName = options.toolName;
 		this.args = options.args;
 		this.categoryLabel = options.categoryLabel;
+		this.showTarget = options.showTarget ?? false;
 		this.onAction = options.onAction;
-		this.buildUI();
+		this.requestRender = options.requestRender;
 	}
-	buildUI() {
-		this.addChild(new Text(theme.fg("warning", "⚠ Tool Approval Required"), 0, 0));
-		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.fg("accent", `Tool: `) + theme.fg("text", this.toolName), 0, 0));
-		if (this.categoryLabel) this.addChild(new Text(theme.fg("accent", `Category: `) + theme.fg("text", this.categoryLabel), 0, 0));
-		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.fg("muted", "Arguments:"), 0, 0));
-		const argsText = this.formatArgs(this.args);
-		for (const line of argsText.split("\n").slice(0, 10)) this.addChild(new Text(theme.fg("text", "  " + line), 0, 0));
-		if (argsText.split("\n").length > 10) this.addChild(new Text(theme.fg("muted", "  ... (truncated)"), 0, 0));
-		this.addChild(new Spacer(1));
-		const categoryHint = this.categoryLabel ? `lways allow ${this.categoryLabel.toLowerCase()}` : "lways allow category";
-		const dimColor = chalk.hex(theme.getTheme().dim);
-		const key = chalk.hex(theme.getTheme().text).bold;
-		this.addChild(new Text(theme.fg("accent", "Allow? ") + key("y") + dimColor("es  ") + key("n") + dimColor("o  ") + key("a") + dimColor(categoryHint + "  ") + key("Y") + dimColor("olo"), 0, 0));
+	invalidate() {}
+	/**
+	* One inline row under the pending tool call (which already shows the command / path):
+	*   ▎ Allow?   y yes  ·  a always allow Execute  ·  Y YOLO  ·  n no
+	* On narrow terminals the options wrap under "Allow?".
+	* When no visible row shows this exact call (`showTarget`), the card names the tool and lists its arguments:
+	*   ▎ Allow write_file?
+	*   ▎   path: src/auth.ts
+	*   ▎ y yes  ·  a always allow Edit  ·  Y YOLO  ·  n no
+	*/
+	render(width) {
+		const warning = theme.getTheme().warning;
+		const key = (k, label) => `${chalk.bold.hex(warning)(k)} ${theme.fg("muted", label)}`;
+		const always = this.categoryLabel ? `always allow ${this.categoryLabel}` : "always allow category";
+		const options = [
+			key("y", "yes"),
+			key("a", always),
+			key("Y", "YOLO"),
+			key("n", "no")
+		];
+		const sep = theme.fg("dim", "  ·  ");
+		const room = width - 2;
+		if (!this.showTarget) {
+			const line = `${theme.bold(theme.fg("text", "Allow?"))}   ${options.join(sep)}`;
+			if (visibleWidth(line) <= room) return card(warning, [line]);
+		}
+		const rows = [this.showTarget ? theme.bold(theme.fg("text", `Allow ${this.toolName}?`)) : theme.bold(theme.fg("text", "Allow?")), ...this.showTarget ? this.targetArgRows(room - 2).map((row) => theme.fg("muted", `  ${row}`)) : []];
+		let row = "";
+		for (const option of options) {
+			const next = row ? `${row}${sep}${option}` : option;
+			if (row && visibleWidth(next) > room) {
+				rows.push(row);
+				row = option;
+			} else row = next;
+		}
+		rows.push(row);
+		return card(warning, rows).map((l) => truncateToWidth(l, width));
+	}
+	/**
+	* Every argument in full, wrapped to `width`: this is what gets approved, so nothing is cut to one line.
+	* Very long values (file contents and the like) stop after TARGET_MAX_LINES until Ctrl+E shows the rest.
+	*/
+	targetArgRows(width) {
+		const args = this.args;
+		if (args === null || args === void 0 || typeof args !== "object") return [escapeControls(String(args ?? "(none)"))];
+		const entries = Object.entries(args).filter(([, v]) => v !== null && v !== void 0);
+		if (entries.length === 0) return ["(none)"];
+		const rows = [];
+		for (const [key, value] of entries) {
+			const wrapped = escapeControls(`${key}: ${typeof value === "string" ? value : safeStringify(value)}`).split("\n").flatMap((line) => line ? wrapTextWithAnsi(line, Math.max(10, width)) : [""]);
+			if (this.expanded || wrapped.length <= TARGET_MAX_LINES) rows.push(...wrapped);
+			else {
+				rows.push(...wrapped.slice(0, TARGET_MAX_LINES));
+				rows.push(`… ${wrapped.length - TARGET_MAX_LINES} more lines · ctrl+e to show all`);
+			}
+		}
+		return rows;
+	}
+	/**
+	* Whether Ctrl+E belongs to the card (it lists the arguments). Otherwise Ctrl+E keeps its usual job of
+	* expanding the tool row above, so a collapsed preview can be read in full before approving.
+	*/
+	handlesExpand() {
+		return this.showTarget;
+	}
+	/** Arguments as "key: value" lines (used by tests and for tools without a call row). */
+	describeArgs() {
+		return this.formatArgs(this.args);
+	}
+	get tool() {
+		return this.toolName;
 	}
 	formatArgs(args) {
 		if (args === null || args === void 0) return "(none)";
@@ -10236,6 +10421,11 @@ var ToolApprovalDialogComponent = class extends Box {
 			this.emit({ type: "decline" });
 			return;
 		}
+		if (data === "" && this.showTarget) {
+			this.expanded = !this.expanded;
+			this.requestRender?.();
+			return;
+		}
 		switch (decodePrintableShortcut(data)) {
 			case "y":
 				this.emit({ type: "approve" });
@@ -10251,9 +10441,6 @@ var ToolApprovalDialogComponent = class extends Box {
 				break;
 		}
 	}
-	render(maxWidth) {
-		return super.render(maxWidth);
-	}
 };
 var RenderScheduler = class {
 	render;
@@ -10639,13 +10826,18 @@ function handleToolApprovalRequired(ctx, toolCallId, toolName, args) {
 	const firePermissionResult = (decision) => {
 		state.hookManager?.runPermissionResult("tool_approval", toolCallId, toolName, decision, args).catch(() => {});
 	};
+	const askPreview = toolName === "ask_user" ? state.pendingAskUserComponents.get(toolCallId) : void 0;
+	askPreview?.updateArgs(args);
+	const visibleCall = state.pendingTools.get(toolCallId)?.getToolCall?.();
 	const dialog = new ToolApprovalDialogComponent({
 		toolCallId,
 		toolName,
 		args,
 		categoryLabel,
+		showTarget: !askPreview && (state.quietMode || !visibleCall || visibleCall.toolName !== toolName || safeStringify(visibleCall.args) !== safeStringify(args)),
+		requestRender: () => state.ui.requestRender(),
 		onAction: (action) => {
-			state.ui.hideOverlay();
+			removeApproval();
 			state.pendingApprovalDismiss = null;
 			if (action.type === "approve") {
 				firePermissionResult("approved");
@@ -10675,8 +10867,13 @@ function handleToolApprovalRequired(ctx, toolCallId, toolName, args) {
 			}
 		}
 	});
+	const removeApproval = () => {
+		if (state.activeInlineApproval === dialog) state.activeInlineApproval = void 0;
+		state.chatContainer.removeChild(dialog);
+		state.ui.requestRender();
+	};
 	state.pendingApprovalDismiss = (declineContext) => {
-		state.ui.hideOverlay();
+		removeApproval();
 		state.pendingApprovalDismiss = null;
 		firePermissionResult("dismissed");
 		state.session.respondToToolApproval({
@@ -10685,7 +10882,8 @@ function handleToolApprovalRequired(ctx, toolCallId, toolName, args) {
 			declineContext
 		});
 	};
-	showModalOverlay(state.ui, dialog, { widthPercent: .7 });
+	ctx.addChildBeforeFollowUps(dialog);
+	state.activeInlineApproval = dialog;
 	dialog.focused = true;
 	flushRender(state);
 }
@@ -11246,9 +11444,12 @@ function removePendingUserMessage(state, messageId) {
 	state.pendingSignalMessageComponentsById.delete(messageId);
 	state.ui.requestRender();
 }
-function clearPendingUserMessages(state) {
-	for (const pending of state.pendingSignalMessageComponentsById.values()) state.chatContainer.removeChild(pending.component);
-	state.pendingSignalMessageComponentsById.clear();
+function clearPendingUserMessages(state, keepIds = []) {
+	for (const [id, pending] of state.pendingSignalMessageComponentsById) {
+		if (keepIds.includes(id)) continue;
+		state.chatContainer.removeChild(pending.component);
+		state.pendingSignalMessageComponentsById.delete(id);
+	}
 	state.ui.requestRender();
 }
 function confirmMatchingPendingUserMessage(state, messageId, text, attachments) {
@@ -11554,14 +11755,6 @@ function addUserMessage(state, message, options) {
 		return;
 	}
 	if (confirmMatchingPendingUserMessage(state, message.id, displayText, attachments)) return;
-	const dedupKey = displayText.trim();
-	const pendingEchoCounts = state.firedQueuedMessageTexts;
-	const dedupCount = pendingEchoCounts?.get(dedupKey) ?? 0;
-	if (dedupCount > 0) {
-		if (dedupCount === 1) pendingEchoCounts.delete(dedupKey);
-		else pendingEchoCounts.set(dedupKey, dedupCount - 1);
-		return;
-	}
 	const legacyReminderMatch = exactDisplayText.match(/^<system-reminder(?<attrs>\s+[^>]*)?>(?<body>[\s\S]*?)<\/system-reminder>$/);
 	if (legacyReminderMatch?.groups?.body) {
 		const attrs = legacyReminderMatch.groups.attrs ?? "";
@@ -13453,56 +13646,90 @@ function formatGoalDuration(goal) {
 	if (hours > 0) return minutes > 0 ? `${hours}hr${minutes}m` : `${hours}hr`;
 	return `${minutes}m`;
 }
+/** Shorten a path under the home directory to ~/… */
+function shortPath(path) {
+	const home = process.env.HOME;
+	return home && (path === home || path.startsWith(`${home}/`)) ? `~${path.slice(home.length)}` : path;
+}
+/**
+* The path, then shorter forms that keep the last directories, like zsh's prompt truncation:
+* ~/dev/mastra/mastracode/tui → ~/…/mastracode/tui → ~/…/tui
+*/
+function compactPaths(path) {
+	const isHome = path.startsWith("~/");
+	const isAbsolute = path.startsWith("/");
+	const segments = (isHome ? path.slice(2) : isAbsolute ? path.slice(1) : path).split("/").filter(Boolean);
+	const prefix = isHome ? "~/…/" : isAbsolute ? "/…/" : "…/";
+	const paths = [path];
+	for (const keep of [2, 1]) if (segments.length > keep) paths.push(prefix + segments.slice(-keep).join("/"));
+	return paths;
+}
+function truncateEnd(value, maxWidth) {
+	return [...value].slice(0, Math.max(0, maxWidth - 1)).join("") + "…";
+}
+/** ~/…/a-very-long-directory-name → ~/…/a-very-l…ry-name */
+function truncateLastSegment(path, maxWidth) {
+	if (visibleWidth(path) <= maxWidth) return path;
+	const slash = path.lastIndexOf("/");
+	const head = path.slice(0, slash + 1);
+	const name = [...path.slice(slash + 1)];
+	const room = maxWidth - visibleWidth(head) - 1;
+	if (room < 2) return truncateEnd(path, maxWidth);
+	const start = Math.ceil(room * .6);
+	return head + name.slice(0, start).join("") + "…" + name.slice(name.length - (room - start)).join("");
+}
+const PULSE_PERIOD_MS = 1600;
+/** How far the dot fades at its dimmest: 0 = no fade, 1 = disappears into the background. */
+const PULSE_DEPTH = 1;
+/** Terminal width at which the footer last needed two rows (see updateStatusLine). */
+const twoRowFooterWidth = /* @__PURE__ */ new WeakMap();
+function pulseDot(color, now) {
+	const wave = (Math.cos(now / PULSE_PERIOD_MS * Math.PI * 2) + 1) / 2;
+	const fade = PULSE_DEPTH * (1 - wave);
+	const bg = getContrastBg();
+	const channel = (i) => {
+		const fg = parseInt(color.slice(i, i + 2), 16);
+		return Math.round(fg + (parseInt(bg.slice(i, i + 2), 16) - fg) * fade);
+	};
+	return chalk.rgb(channel(1), channel(3), channel(5))("•");
+}
 /**
-* Update the status line at the bottom of the TUI.
-* Progressively reduces content to fit the terminal width.
+* Update the status line under the prompt and the Working row above it.
+*
+* Status line: " · "-separated parts, left-aligned with one column of padding:
+*   mode · model · [fallback] · [goal] · [queued] · context · location
+* A long path shortens like zsh (~/…/parent/dir) to stay on one row; only when even that doesn't fit does
+* the location move to a second row.
+* It never changes while the agent runs; run progress (spinner, elapsed time, throughput) lives in the
+* Working row instead. Parts are dropped or shortened from the right until the first row fits.
 */
 function updateStatusLine(state) {
 	if (!state.statusLine) return;
-	const termWidth = getTermWidth();
-	const SEP = "  ";
+	const termWidth = state.ui.terminal?.columns || process.stdout.columns || 80;
+	const PAD = 1;
+	const SEP = theme.fg("dim", " · ");
+	const SEP_WIDTH = 3;
+	const now = Date.now();
 	const displayState = state.session.displayState.get();
 	const omStatus = displayState.omProgress.status;
 	const isJudging = Boolean(state.activeGoalJudge);
 	const isObserving = omStatus === "observing";
 	const showOMMode = !isJudging && (isObserving || omStatus === "reflecting");
-	let modeBadge = "";
-	let modeBadgeWidth = 0;
 	const modes = state.controller.listModes();
 	const configuredMode = state.session.mode.resolve();
 	const currentMode = modes.length > 1 ? configuredMode : void 0;
-	const judgeModeColor = mastra.blue;
 	const currentModeColor = currentMode?.metadata?.color;
-	const mainModeColor = typeof currentModeColor === "string" ? currentModeColor : void 0;
-	const configuredModeColor = configuredMode?.metadata?.color;
-	const contextIndicatorColor = typeof configuredModeColor === "string" ? configuredModeColor : mastra.green;
-	const modeColor = isJudging ? judgeModeColor : showOMMode ? isObserving ? getObserverColor() : getReflectorColor() : mainModeColor;
-	const tintBg = modeColor ? tintHex(modeColor, .15) : void 0;
-	const badgeName = isJudging ? "judge" : showOMMode ? isObserving ? "observe" : "reflect" : currentMode ? currentMode.name || currentMode.id || "unknown" : void 0;
-	if (badgeName && modeColor) {
-		const [mcr, mcg, mcb] = [
-			parseInt(modeColor.slice(1, 3), 16),
-			parseInt(modeColor.slice(3, 5), 16),
-			parseInt(modeColor.slice(5, 7), 16)
-		];
-		let badgeBrightness = .9;
-		if (state.gradientAnimator?.isRunning()) {
-			const fade = state.gradientAnimator.getFadeProgress();
-			const easedFade = fade * fade * (3 - 2 * fade);
-			const offset = state.gradientAnimator.getOffset() % 1;
-			const animBrightness = .65 + .3 * (.5 + .5 * Math.sin(offset * Math.PI * 2 + Math.PI));
-			badgeBrightness = animBrightness + (.9 - animBrightness) * easedFade;
-		}
-		const mr = Math.floor(mcr * badgeBrightness);
-		const mg = Math.floor(mcg * badgeBrightness);
-		const mb = Math.floor(mcb * badgeBrightness);
-		const rightHalf = tintBg ? chalk.rgb(mr, mg, mb).bgHex(tintBg)("▌") : chalk.rgb(mr, mg, mb)("▌");
-		modeBadge = chalk.rgb(mr, mg, mb)("▐") + chalk.bgRgb(mr, mg, mb).hex("#000000").bold(badgeName.toLowerCase()) + rightHalf;
-		modeBadgeWidth = badgeName.length + 2;
-	} else if (badgeName) {
-		modeBadge = " " + theme.fg("dim", badgeName) + " ";
-		modeBadgeWidth = badgeName.length + 2;
-	}
+	const rawModeColor = isJudging ? mastra.blue : showOMMode ? isObserving ? getObserverColor() : getReflectorColor() : typeof currentModeColor === "string" ? currentModeColor : void 0;
+	const modeColor = rawModeColor ? displayModeColor(rawModeColor) : void 0;
+	const modeName = isJudging ? "judge" : showOMMode ? isObserving ? "observe" : "reflect" : currentMode ? (currentMode.name || currentMode.id || "unknown").toLowerCase() : void 0;
+	const modeInitial = modeName ? {
+		plain: modeName.charAt(0),
+		styled: modeColor ? chalk.bold.hex(modeColor)(modeName.charAt(0)) : theme.fg("dim", modeName.charAt(0))
+	} : null;
+	const modePart = modeName ? {
+		plain: modeName,
+		styled: modeColor ? chalk.bold.hex(modeColor)(modeName) : theme.fg("dim", modeName)
+	} : null;
 	const rawModelId = (isJudging ? state.activeGoalJudge?.modelId : showOMMode ? isObserving ? state.session.om.observer.modelId() : state.session.om.reflector.modelId() : state.session.model.get()) ?? "";
 	let fullModelId = rawModelId.startsWith("fireworks-ai/accounts/fireworks/models/") ? "fireworks/" + rawModelId.slice(39) : rawModelId;
 	fullModelId = fullModelId.replace(/\b([a-z]+-[a-z])(\d+)p(\d+)\b/g, "$1$2.$3");
@@ -13514,246 +13741,191 @@ function updateStatusLine(state) {
 	};
 	const shortModelId = compactModelId(fullModelId);
 	const tinyModelId = shortModelId.includes("/") ? shortModelId : shortModelId.replace(/^claude-/, "").replace(/^(\w+)-(\d+)-(\d{1,2})$/, "$1 $2.$3");
-	const branch = state.projectInfo.gitBranch;
-	const threadTitle = state.currentThreadTitle && !isGenericTitle(state.currentThreadTitle) ? state.currentThreadTitle : null;
-	const activeGithubPrSubscriptions = state.activeGithubPrSubscriptions ?? [];
-	const githubPrLabel = activeGithubPrSubscriptions.length > 0 ? formatGithubPrLabel(state, activeGithubPrSubscriptions) : null;
-	const centerText = threadTitle || branch || (githubPrLabel ? "" : null);
-	const centerTextShort = centerText && centerText.length > 24 ? centerText.slice(0, 12) + ".." + centerText.slice(-8) : centerText;
-	const now = Date.now();
-	const queuedCount = state.pendingQueuedActions.length + displayState.queuedFollowUps;
-	const queuedLabel = queuedCount > 0 ? `${queuedCount} queued` : null;
-	const goalState = state.goalManager?.getGoal();
-	const goalDuration = !isJudging && goalState?.status === "active" ? formatGoalDuration(goalState) : null;
-	const goalMatchesActiveRun = goalState?.status === "active" && goalDuration !== null && state.agentRunStartedAt !== void 0 && Math.floor(getGoalDurationMs(goalState, now) / 6e4) === Math.floor((now - state.agentRunStartedAt) / 6e4);
-	const goalLabel = goalDuration ? goalMatchesActiveRun ? "goal" : `goal ${goalDuration}` : null;
-	const fallbackLabel = !isJudging && !showOMMode && state.fallbackStatus ? `Using fallback ${state.fallbackStatus.usingPack} (${state.fallbackStatus.failedPack} failed)` : null;
-	const formatDirPart = (value) => {
-		const separator = githubPrLabel && value ? " " : "";
-		return {
-			plain: githubPrLabel ? `${githubPrLabel.plain}${separator}${value}` : value,
-			styled: githubPrLabel ? `${githubPrLabel.styled}${separator}${theme.fg("thinkingText", value)}` : theme.fg("thinkingText", value)
-		};
-	};
-	const modelTrail = tintBg ? chalk.hex(tintBg)("▌") : "";
-	const styleModelId = (id) => {
+	const modelPart = (id) => {
 		if (!state.modelAuthStatus.hasAuth) {
 			const envVar = state.modelAuthStatus.apiKeyEnvVar;
-			return theme.fg("dim", id) + theme.fg("error", " ✗") + theme.fg("muted", envVar ? ` (${envVar})` : " (no key)");
-		}
-		if (state.gradientAnimator?.isRunning() && modeColor) {
-			const fade = state.gradientAnimator.getFadeProgress();
-			const easedFade = fade * fade * (3 - 2 * fade);
-			const text = applyGradientSweep(id, state.gradientAnimator.getOffset(), modeColor, easedFade);
-			const styled = chalk.italic(text);
-			return (tintBg ? chalk.bgHex(tintBg)(styled) : styled) + modelTrail;
-		}
-		if (modeColor) {
-			const [cr, cg, cb] = [
-				parseInt(modeColor.slice(1, 3), 16),
-				parseInt(modeColor.slice(3, 5), 16),
-				parseInt(modeColor.slice(5, 7), 16)
-			];
-			const idleBright = .8;
-			const fgStyled = chalk.rgb(Math.floor(cr * idleBright), Math.floor(cg * idleBright), Math.floor(cb * idleBright)).bold.italic(id);
-			return (tintBg ? chalk.bgHex(tintBg)(fgStyled) : fgStyled) + modelTrail;
+			const hint = envVar ? ` (${envVar})` : " (no key)";
+			return {
+				plain: `${id} ✗${hint}`,
+				styled: theme.fg("dim", id) + theme.fg("error", " ✗") + theme.fg("muted", hint)
+			};
 		}
-		return chalk.hex(mastra.specialGray).bold.italic(id);
+		const lastRun = state.agentRunStartedAt === void 0 && state.lastAgentRunDurationMs !== void 0 ? formatStatusDuration(state.lastAgentRunDurationMs, { includeSeconds: true }) : "";
+		if (!lastRun) return {
+			plain: id,
+			styled: theme.fg("secondary", id)
+		};
+		const reason = state.lastAgentRunEndReason;
+		const icon = reason === "error" ? " ×" : reason === "aborted" ? "" : " ✓";
+		const tone = reason === "error" ? "error" : reason === "aborted" ? "warning" : "success";
+		return {
+			plain: `${id} ${lastRun}${icon}`,
+			styled: theme.fg("secondary", id) + " " + theme.fg(tone, lastRun + icon)
+		};
 	};
-	let shortModeBadge = "";
-	let shortModeBadgeWidth = 0;
-	if (badgeName && modeColor) {
-		const shortName = badgeName.toLowerCase().charAt(0);
-		const [mcr, mcg, mcb] = [
-			parseInt(modeColor.slice(1, 3), 16),
-			parseInt(modeColor.slice(3, 5), 16),
-			parseInt(modeColor.slice(5, 7), 16)
-		];
-		let sBadgeBrightness = .9;
-		if (state.gradientAnimator?.isRunning()) {
-			const fade = state.gradientAnimator.getFadeProgress();
-			if (fade < 1) {
-				const offset = state.gradientAnimator.getOffset() % 1;
-				const animBrightness = .65 + .3 * (.5 + .5 * Math.sin(offset * Math.PI * 2 + Math.PI));
-				sBadgeBrightness = animBrightness + (.9 - animBrightness) * fade;
-			}
-		}
-		const sr = Math.floor(mcr * sBadgeBrightness);
-		const sg = Math.floor(mcg * sBadgeBrightness);
-		const sb = Math.floor(mcb * sBadgeBrightness);
-		const shortRightHalf = tintBg ? chalk.rgb(sr, sg, sb).bgHex(tintBg)("▌") : chalk.rgb(sr, sg, sb)("▌");
-		shortModeBadge = chalk.rgb(sr, sg, sb)("▐") + chalk.bgRgb(sr, sg, sb).hex("#000000").bold(shortName) + shortRightHalf;
-		shortModeBadgeWidth = shortName.length + 2;
-	} else if (badgeName) {
-		const shortName = badgeName.toLowerCase().charAt(0);
-		shortModeBadge = " " + theme.fg("dim", shortName) + " ";
-		shortModeBadgeWidth = shortName.length + 2;
-	}
-	const activeTimingLabel = state.agentRunStartedAt !== void 0 ? formatStatusDuration(now - state.agentRunStartedAt, { includeSeconds: true }) : "";
-	const activeTimingIsStale = state.agentRunStartedAt !== void 0 && state.agentRunLastStreamPartAt !== void 0 && now - state.agentRunLastStreamPartAt > 3 * 6e4;
-	const completedTimingLabel = !activeTimingLabel && state.lastAgentRunDurationMs !== void 0 ? formatStatusDuration(state.lastAgentRunDurationMs, { includeSeconds: true }) : "";
-	const completedTimingIcon = state.lastAgentRunEndReason === "error" ? "×" : completedTimingLabel && state.lastAgentRunEndReason !== "aborted" ? "✓" : "";
-	const timingLabel = activeTimingLabel || completedTimingLabel;
-	const buildLine = (opts) => {
-		const parts = [];
-		const timingPlain = timingLabel ? ` ${timingLabel}${completedTimingIcon ? ` ${completedTimingIcon}` : ""}` : "";
-		const timingColor = activeTimingIsStale ? theme.fg("error", timingLabel) : activeTimingLabel ? modeColor ? chalk.hex(modeColor)(timingLabel) : theme.fg("dim", timingLabel) : state.lastAgentRunEndReason === "aborted" ? theme.fg("warning", timingLabel) : state.lastAgentRunEndReason === "error" ? theme.fg("error", timingLabel) : theme.fg("success", timingLabel);
-		const timingIconColor = state.lastAgentRunEndReason === "aborted" ? "warning" : state.lastAgentRunEndReason === "error" ? "error" : "success";
-		const timingStyled = timingLabel ? ` ${timingColor}${completedTimingIcon ? ` ${theme.fg(timingIconColor, completedTimingIcon)}` : ""}` : "";
-		parts.push({
-			plain: `${opts.modelId}${tintBg ? " " : ""}${timingPlain}`,
-			styled: styleModelId(opts.modelId) + timingStyled
-		});
-		const visibleFallbackLabel = opts.showFallback === false ? null : fallbackLabel;
-		if (visibleFallbackLabel) parts.push({
-			plain: visibleFallbackLabel,
-			styled: theme.fg("warning", visibleFallbackLabel)
-		});
-		const useBadge = opts.badge === "short" ? shortModeBadge : modeBadge;
-		const useBadgeWidth = opts.badge === "short" ? shortModeBadgeWidth : modeBadgeWidth;
-		const ds = displayState;
-		const messageColor = contextIndicatorColor;
-		const memoryColor = mastraBrand.blue;
-		const unusedColor = "#3f3f46";
-		const messageSegmentStyler = ds.bufferingMessages && state.gradientAnimator?.isRunning() ? (segment) => applyGradientSweep(segment, state.gradientAnimator.getOffset(), messageColor, state.gradientAnimator.getFadeProgress()) : (segment) => chalk.hex(messageColor)(segment);
-		const memorySegmentStyler = ds.bufferingObservations && state.gradientAnimator?.isRunning() ? (segment) => applyGradientSweep(segment, state.gradientAnimator.getOffset(), memoryColor, state.gradientAnimator.getFadeProgress()) : (segment) => chalk.hex(memoryColor)(segment);
-		const unusedSegmentStyler = (segment) => chalk.hex(unusedColor)(segment);
-		const indicatorPart = !isJudging && opts.showOM !== false ? formatOMContextIndicator(ds.omProgress, {
-			messages: messageSegmentStyler,
-			memory: memorySegmentStyler,
-			unused: unusedSegmentStyler,
-			showBar: opts.showOMBar
-		}) : null;
-		if (opts.showQueue && goalLabel) parts.push({
-			plain: goalLabel,
-			styled: theme.fg("success", goalLabel)
-		});
-		if (opts.showQueue && queuedLabel) parts.push({
-			plain: queuedLabel,
-			styled: theme.fg("warning", queuedLabel)
-		});
-		const tpsLabel = state.tokensPerSec > 0 ? `${String(state.tokensPerSec).padStart(3)} t/s` : null;
-		const tpsPart = tpsLabel ? {
-			plain: tpsLabel,
-			styled: theme.fg("text", tpsLabel)
-		} : null;
-		let dirText = opts.dir !== void 0 ? opts.dir : opts.showDir ? centerText : null;
-		const rightParts = indicatorPart ? [tpsPart, indicatorPart].filter((part) => part !== null) : [];
-		const nonDirWidth = useBadgeWidth + [...parts, ...rightParts].reduce((sum, p, i) => sum + visibleWidth(p.plain) + (i > 0 ? 2 : 0), 0);
-		if (dirText !== null) {
-			const dirPart = formatDirPart(dirText);
-			const availableForDir = termWidth - nonDirWidth - 2 - 1;
-			const dirWidth = visibleWidth(dirPart.plain);
-			const availableForText = availableForDir - (githubPrLabel ? visibleWidth(githubPrLabel.plain) + (dirText ? 1 : 0) : 0);
-			const MIN_TRUNCATED_DIR = 10;
-			if (dirWidth > availableForDir && opts.allowDirTruncation === false) return null;
-			if (dirWidth > availableForDir && availableForText >= MIN_TRUNCATED_DIR) dirText = availableForText > 1 ? dirText.slice(0, availableForText - 1) + "…" : null;
-			else if (dirWidth > availableForDir) dirText = githubPrLabel && visibleWidth(githubPrLabel.plain) <= availableForDir ? "" : null;
-		}
-		if (dirText !== null) parts.push(formatDirPart(dirText));
-		if (indicatorPart) parts.push(...rightParts);
-		else if (tpsPart) parts.push(tpsPart);
-		const totalPlain = useBadgeWidth + parts.reduce((sum, p, i) => sum + visibleWidth(p.plain) + (i > 0 ? 2 : 0), 0);
-		if (totalPlain + 1 > termWidth) return null;
-		let styledLine;
-		const hasDir = dirText !== null;
-		if (indicatorPart && parts.length >= 2) {
-			const leftPartCount = 1 + (visibleFallbackLabel ? 1 : 0) + (opts.showQueue && goalLabel ? 1 : 0);
-			const leftParts = parts.slice(0, leftPartCount);
-			const centerParts = parts.slice(leftPartCount, -rightParts.length);
-			const leftSeparatorPlain = timingLabel ? " · " : " ";
-			const leftSeparatorStyled = timingLabel ? ` ${theme.fg("success", "·")} ` : " ";
-			const leftWidth = useBadgeWidth + leftParts.reduce((sum, p, i) => sum + visibleWidth(p.plain) + (i > 0 ? leftSeparatorPlain.length : 0), 0);
-			const centerWidth = centerParts.reduce((sum, p, i) => sum + visibleWidth(p.plain) + (i > 0 ? 2 : 0), 0);
-			const rightWidth = rightParts.reduce((sum, p, i) => sum + visibleWidth(p.plain) + (i > 0 ? 2 : 0), 0);
-			const totalContent = leftWidth + centerWidth + rightWidth;
-			const freeSpace = termWidth - totalContent;
-			const gapLeft = Math.floor(freeSpace / 2);
-			const gapRight = freeSpace - gapLeft;
-			styledLine = useBadge + leftParts.map((p) => p.styled).join(leftSeparatorStyled) + " ".repeat(Math.max(gapLeft, 1)) + centerParts.map((p) => p.styled).join(SEP) + " ".repeat(Math.max(gapRight, 1)) + rightParts.map((p) => p.styled).join(SEP);
-		} else if (hasDir && parts.length === 2) {
-			const mainStr = useBadge + parts[0].styled;
-			const dirPart = parts[parts.length - 1];
-			const gap = termWidth - totalPlain;
-			styledLine = mainStr + " ".repeat(gap + 2) + dirPart.styled;
-		} else styledLine = useBadge + parts.map((p) => p.styled).join(SEP);
+	const fallbackPart = !isJudging && !showOMMode && state.fallbackStatus ? (() => {
+		const label = `Using fallback ${state.fallbackStatus.usingPack} (${state.fallbackStatus.failedPack} failed)`;
 		return {
-			plain: "",
-			styled: styledLine
+			plain: label,
+			styled: theme.fg("warning", label)
 		};
+	})() : null;
+	const goalState = state.goalManager?.getGoal();
+	const goalDuration = !isJudging && goalState?.status === "active" ? formatGoalDuration(goalState) : null;
+	const goalMatchesActiveRun = goalState?.status === "active" && goalDuration !== null && state.agentRunStartedAt !== void 0 && Math.floor(getGoalDurationMs(goalState, now) / 6e4) === Math.floor((now - state.agentRunStartedAt) / 6e4);
+	const goalLabel = goalDuration ? goalMatchesActiveRun ? "goal" : `goal ${goalDuration}` : null;
+	const goalPart = goalLabel ? {
+		plain: goalLabel,
+		styled: theme.fg("success", goalLabel)
+	} : null;
+	const queuedCount = state.pendingSlashCommands.length + displayState.queuedFollowUps;
+	const queuedPart = queuedCount > 0 ? {
+		plain: `${queuedCount} queued`,
+		styled: theme.fg("warning", `${queuedCount} queued`)
+	} : null;
+	const om = displayState.omProgress;
+	const used = Math.max(0, om.pendingTokens) + Math.max(0, om.observationTokens);
+	const capacity = Math.max(0, om.threshold) + Math.max(0, om.reflectionThreshold);
+	const indicator = !isJudging ? formatOMContextIndicator(om, { showBar: false }) : null;
+	const pct = capacity > 0 ? ` ${Math.round(used / capacity * 100)}%` : "";
+	const sweep = (displayState.bufferingMessages || displayState.bufferingObservations) && state.gradientAnimator?.isRunning() ? state.gradientAnimator : void 0;
+	const contextPart = indicator ? {
+		plain: indicator.plain.trimEnd() + pct,
+		styled: (sweep ? applyGradientSweep(indicator.plain.trimEnd(), sweep.getOffset(), displayState.bufferingMessages ? modeColor ?? theme.getTheme().accent : mastra.blue, sweep.getFadeProgress()) : indicator.styled.trimEnd()) + theme.fg("dim", pct)
+	} : null;
+	const branch = state.projectInfo.gitBranch;
+	const threadTitle = state.currentThreadTitle && !isGenericTitle(state.currentThreadTitle) ? state.currentThreadTitle : null;
+	const activeGithubPrSubscriptions = state.activeGithubPrSubscriptions ?? [];
+	const githubPrLabel = activeGithubPrSubscriptions.length > 0 ? formatGithubPrLabel(state, activeGithubPrSubscriptions) : null;
+	const locationPart = (maxWidth, fit) => {
+		const prefix = githubPrLabel ? {
+			plain: `${githubPrLabel.plain} `,
+			styled: `${githubPrLabel.styled} `
+		} : null;
+		const room = maxWidth - (prefix ? visibleWidth(prefix.plain) : 0);
+		const fits = (value) => visibleWidth(value) <= room;
+		let text = null;
+		if (threadTitle) {
+			const title = fits(threadTitle) ? threadTitle : fit === "any" && room >= 10 ? truncateEnd(threadTitle, room) : null;
+			if (title) text = {
+				plain: title,
+				styled: theme.fg("muted", title)
+			};
+		} else {
+			const withBranch = (path) => ({
+				plain: branch ? `${path} (${branch})` : path,
+				styled: theme.fg("muted", path) + (branch ? theme.fg("dim", ` (${branch})`) : "")
+			});
+			const path = shortPath(state.projectInfo.rootPath ?? process.cwd());
+			text = (fit === "full" ? [withBranch(path)] : compactPaths(path).map(withBranch)).find((candidate) => fits(candidate.plain)) ?? null;
+			if (!text && fit === "any" && room >= 10) {
+				const value = branch ? fits(branch) ? branch : truncateEnd(branch, room) : truncateLastSegment(compactPaths(path).at(-1), room);
+				text = {
+					plain: value,
+					styled: theme.fg(branch ? "dim" : "muted", value)
+				};
+			}
+		}
+		if (!text) return prefix && visibleWidth(prefix.plain) - 1 <= maxWidth ? {
+			plain: githubPrLabel.plain,
+			styled: githubPrLabel.styled
+		} : null;
+		return prefix ? {
+			plain: prefix.plain + text.plain,
+			styled: prefix.styled + text.styled
+		} : text;
 	};
-	const result = buildLine({
-		modelId: fullModelId,
-		showDir: false,
-		dir: centerText,
-		allowDirTruncation: false,
-		showQueue: true
-	}) ?? buildLine({
-		modelId: fullModelId,
-		showOMBar: false,
-		showDir: false,
-		dir: centerText,
-		allowDirTruncation: false,
-		showQueue: true
-	}) ?? buildLine({
-		modelId: fullModelId,
-		showOMBar: false,
-		showDir: false,
-		dir: centerTextShort,
-		showQueue: true
-	}) ?? buildLine({
-		modelId: fullModelId,
-		showOMBar: false,
-		showDir: false,
-		showQueue: true
-	}) ?? buildLine({
-		modelId: fullModelId,
-		showOM: false,
-		showDir: false,
-		showQueue: true
-	}) ?? buildLine({
-		modelId: tinyModelId,
-		showOMBar: false,
-		showDir: false,
-		showQueue: true,
-		showFallback: true
-	}) ?? buildLine({
-		modelId: tinyModelId,
-		showOMBar: false,
-		showDir: false,
-		badge: "short",
-		showQueue: true,
-		showFallback: true
-	}) ?? buildLine({
-		modelId: tinyModelId,
-		showOM: false,
-		showDir: false,
-		badge: "short",
-		showQueue: true,
-		showFallback: true
-	}) ?? buildLine({
-		modelId: tinyModelId,
-		showOM: false,
-		showDir: false,
-		showFallback: true
-	}) ?? buildLine({
-		modelId: "",
-		showOMBar: false,
-		showDir: false,
-		badge: "short",
-		showQueue: true,
-		showFallback: false
-	}) ?? buildLine({
-		modelId: "",
-		showOM: false,
-		showDir: false,
-		badge: "short",
-		showFallback: false
-	});
-	state.statusLine.setText(result?.styled ?? shortModeBadge + styleModelId(tinyModelId));
-	if (state.memoryStatusLine) state.memoryStatusLine.setText("");
+	const width = (parts) => PAD + parts.reduce((sum, p, i) => sum + visibleWidth(p.plain) + (i > 0 ? SEP_WIDTH : 0), 0) + 1;
+	const fitsRow = (parts) => {
+		const present = parts.filter((p) => p !== null);
+		return width(present) <= termWidth ? present : null;
+	};
+	const withLocation = (parts, fit) => {
+		const present = parts.filter((p) => p !== null);
+		const location = locationPart(termWidth - width(present) - SEP_WIDTH, fit);
+		return location ? fitsRow([...present, location]) : null;
+	};
+	const transient = [
+		fallbackPart,
+		goalPart,
+		queuedPart
+	];
+	const oneRow = twoRowFooterWidth.get(state) === termWidth ? null : withLocation([
+		modePart,
+		modelPart(fullModelId),
+		...transient,
+		contextPart
+	], "full") ?? withLocation([
+		modePart,
+		modelPart(shortModelId),
+		...transient,
+		contextPart
+	], "full") ?? withLocation([
+		modePart,
+		modelPart(fullModelId),
+		...transient,
+		contextPart
+	], "compact") ?? withLocation([
+		modePart,
+		modelPart(shortModelId),
+		...transient,
+		contextPart
+	], "compact");
+	const row = oneRow ?? fitsRow([
+		modePart,
+		modelPart(fullModelId),
+		...transient,
+		contextPart
+	]) ?? fitsRow([
+		modePart,
+		modelPart(shortModelId),
+		...transient,
+		contextPart
+	]) ?? fitsRow([
+		modePart,
+		modelPart(tinyModelId),
+		...transient,
+		contextPart
+	]) ?? fitsRow([
+		modePart,
+		modelPart(tinyModelId),
+		goalPart,
+		queuedPart,
+		contextPart
+	]) ?? fitsRow([
+		modePart,
+		modelPart(tinyModelId),
+		goalPart,
+		queuedPart
+	]) ?? fitsRow([modePart, modelPart(tinyModelId)]) ?? fitsRow([modeInitial, modelPart(tinyModelId)]) ?? fitsRow([modePart]) ?? [];
+	const secondRow = oneRow ? null : locationPart(termWidth - PAD - 1, "any");
+	if (secondRow) twoRowFooterWidth.set(state, termWidth);
+	else twoRowFooterWidth.delete(state);
+	state.statusLine.setText(" ".repeat(PAD) + row.map((p) => p.styled).join(SEP));
+	if (state.memoryStatusLine) state.memoryStatusLine.setText(secondRow ? " ".repeat(PAD) + secondRow.styled : "");
+	updateActivityLine(state, modeColor, now);
 	state.ui.requestRender();
 }
+/**
+* Working row above the prompt while the agent runs: spinner, elapsed time, throughput, interrupt hint.
+* Empty (renders nothing) when idle.
+*/
+function updateActivityLine(state, modeColor, now) {
+	if (!state.idleCounter) return;
+	if (state.agentRunStartedAt === void 0) {
+		state.idleCounter.setActivity("");
+		return;
+	}
+	const spinner = pulseDot(modeColor ?? theme.getTheme().accent, now);
+	const elapsed = formatStatusDuration(now - state.agentRunStartedAt, { includeSeconds: true });
+	const stale = state.agentRunLastStreamPartAt !== void 0 && now - state.agentRunLastStreamPartAt > 3 * 6e4 ? formatStatusDuration(now - state.agentRunLastStreamPartAt, { includeSeconds: false }) : null;
+	const parts = [theme.fg(stale ? "error" : "dim", elapsed)];
+	if (stale) parts.push(theme.fg("warning", `no output for ${stale}`));
+	if (state.tokensPerSec > 0) parts.push(theme.fg("dim", `${state.tokensPerSec} tok/s`));
+	parts.push(`${theme.fg("muted", "esc")}${theme.fg("dim", " to interrupt")}`);
+	const label = state.idleCounter.isThinking() ? "thinking" : "working ";
+	state.idleCounter.setActivity(` ${spinner} ${theme.bold(theme.fg("secondary", label))} ${parts.join(theme.fg("dim", " · "))}`);
+}
 //#endregion
 //#region src/tui/commands/models-pack.ts
 const SHARE_PREFIX = "mastra-pack:";
@@ -21558,47 +21730,22 @@ function handleAgentEnd(ctx) {
 }
 function drainQueuedAction(ctx) {
 	const { state } = ctx;
-	if (state.session.displayState.get().queuedFollowUps > 0) return true;
-	const nextAction = state.pendingQueuedActions.shift();
-	ctx.updateStatusLine();
-	if (!nextAction) return false;
-	if (nextAction === "message") {
-		const nextMessage = state.pendingFollowUpMessages.shift();
-		if (!nextMessage) return true;
-		ctx.addUserMessage({
-			id: `user-${Date.now()}`,
-			role: "user",
-			content: {
-				format: 2,
-				parts: [{
-					type: "text",
-					text: nextMessage.content
-				}, ...nextMessage.images?.map((img) => ({
-					type: "file",
-					data: img.data,
-					mimeType: img.mimeType
-				})) ?? []]
-			},
-			createdAt: /* @__PURE__ */ new Date()
-		});
-		const key = nextMessage.content.trim();
-		const counts = state.firedQueuedMessageTexts ??= /* @__PURE__ */ new Map();
-		counts.set(key, (counts.get(key) ?? 0) + 1);
-		flushRender(state);
-		ctx.fireMessage(nextMessage.content, nextMessage.images);
-		return true;
-	}
+	if (state.session.displayState.get().queuedFollowUps > 0 || state.pendingQueueSubmissions > 0) return;
 	const nextCommand = state.pendingSlashCommands.shift();
 	const pendingMessageId = state.pendingSlashCommandMessageIds.shift();
+	ctx.updateStatusLine();
 	if (!nextCommand) {
 		if (pendingMessageId) removePendingUserMessage(state, pendingMessageId);
-		return true;
+		return;
 	}
 	if (pendingMessageId) removePendingUserMessage(state, pendingMessageId);
 	ctx.handleSlashCommand(nextCommand).catch((error) => {
 		ctx.showError(error instanceof Error ? error.message : "Queued slash command failed");
 	});
-	return true;
+}
+function drainQueuedActionIfIdle(ctx) {
+	if (ctx.state.session.stream.isActive()) return;
+	drainQueuedAction(ctx);
 }
 function handleAgentAborted(ctx) {
 	const { state } = ctx;
@@ -21624,11 +21771,7 @@ function handleAgentAborted(ctx) {
 		state.activeGoalJudge = void 0;
 	}
 	state.followUpComponents = [];
-	state.pendingFollowUpMessages = [];
-	state.pendingQueuedActions = [];
-	state.pendingSlashCommands = [];
-	state.pendingSlashCommandMessageIds = [];
-	clearPendingUserMessages(state);
+	clearPendingUserMessages(state, state.pendingSlashCommandMessageIds);
 	for (const tool of state.pendingTools.values()) tool.stopLiveUpdates?.();
 	state.idleCounter?.setThinking(false);
 	state.pendingTools.clear();
@@ -21636,6 +21779,7 @@ function handleAgentAborted(ctx) {
 	pruneChatContainer(state);
 	ctx.updateStatusLine();
 	flushRender(state);
+	drainQueuedActionIfIdle(ctx);
 }
 function handleAgentError(ctx) {
 	const { state } = ctx;
@@ -21646,11 +21790,7 @@ function handleAgentError(ctx) {
 		state.activeGoalJudge = void 0;
 	}
 	state.followUpComponents = [];
-	state.pendingFollowUpMessages = [];
-	state.pendingQueuedActions = [];
-	state.pendingSlashCommands = [];
-	state.pendingSlashCommandMessageIds = [];
-	clearPendingUserMessages(state);
+	clearPendingUserMessages(state, state.pendingSlashCommandMessageIds);
 	for (const tool of state.pendingTools.values()) tool.stopLiveUpdates?.();
 	state.idleCounter?.setThinking(false);
 	state.pendingTools.clear();
@@ -21658,6 +21798,7 @@ function handleAgentError(ctx) {
 	pruneChatContainer(state);
 	ctx.updateStatusLine();
 	flushRender(state);
+	drainQueuedActionIfIdle(ctx);
 }
 /** Remove the judge display component from the chat container if present. */
 function removeJudgeComponent(state, component) {
@@ -21735,7 +21876,9 @@ function syncQuietThinkingStatus(ctx, message) {
 	const { state } = ctx;
 	const latest = message ? getRawParts(message).findLast((part) => part.type === "text" || part.type === "reasoning" || part.type === "tool-invocation") : void 0;
 	const thinking = state.quietMode && state.hideThinkingBlock && latest?.type === "reasoning";
-	state.idleCounter?.setThinking(thinking);
+	if (!state.idleCounter || state.idleCounter.isThinking() === thinking) return;
+	state.idleCounter.setThinking(thinking);
+	ctx.updateStatusLine();
 }
 function isToolPart(part) {
 	return part.type === "tool-invocation";
@@ -22855,44 +22998,12 @@ const VOICE_WAVE_BARS = [
 	"▇",
 	"█"
 ];
-const DEFAULT_PROMPT_ICON = "•";
-const PROMPT_ICON_CHOICES = [
-	"☯",
-	"✺",
-	"☻",
-	"✿",
-	"◒",
-	"◓",
-	"♞",
-	"☘",
-	"☸",
-	"❂",
-	"❁",
-	"✽",
-	"❉",
-	"✹",
-	"❨",
-	"❩",
-	"✚",
-	"⚉",
-	"❣",
-	"❥",
-	"♫",
-	"❤"
-];
-function getRandomPromptIcon(currentIcon) {
-	if (Math.random() < .99) return DEFAULT_PROMPT_ICON;
-	const nextChoices = PROMPT_ICON_CHOICES.filter((icon) => icon !== currentIcon);
-	const choices = nextChoices.length > 0 ? nextChoices : PROMPT_ICON_CHOICES;
-	return choices[Math.floor(Math.random() * choices.length)];
-}
 var CustomEditor = class extends Editor {
 	actionHandlers = /* @__PURE__ */ new Map();
 	onCtrlD;
 	escapeEnabled = true;
 	onImagePaste;
 	getModeColor;
-	getPromptAnimator;
 	requestRender;
 	pendingBracketedPaste = null;
 	/**
@@ -22914,8 +23025,6 @@ var CustomEditor = class extends Editor {
 	voiceDictationActive = false;
 	_cachedModeColorHex;
 	_cachedColorFn;
-	promptIcon = DEFAULT_PROMPT_ICON;
-	lastPromptWasInvisible = false;
 	requestEditorRender() {
 		if (this.requestRender) {
 			this.requestRender();
@@ -22953,27 +23062,8 @@ var CustomEditor = class extends Editor {
 		const isSlash = text.startsWith("/");
 		const isAt = text.startsWith("@");
 		const isBang = text.startsWith("!");
-		const color = this.getModeColor?.() || mastra.green;
-		const promptAnimator = this.getPromptAnimator?.();
-		const isPromptAnimated = !isSlash && !isAt && !isBang && Boolean(promptAnimator?.isRunning());
-		const fadeProgress = isPromptAnimated ? promptAnimator.getFadeProgress() : 1;
-		const isTransitioningIn = isPromptAnimated && promptAnimator.isFadingIn();
-		const isTransitioningOut = isPromptAnimated && promptAnimator.isFadingOut();
-		const promptOffset = isPromptAnimated ? promptAnimator.getOffset() : 0;
-		const pulseWave = isPromptAnimated ? (Math.sin(promptOffset * Math.PI * 2) + 1) / 2 : 0;
-		const transitionPhase = isTransitioningIn || isTransitioningOut ? 1 - fadeProgress : 1;
-		const chevronBrightness = isPromptAnimated ? isTransitioningIn ? transitionPhase < .5 ? Math.max(0, 1 - transitionPhase * 2) : 0 : isTransitioningOut ? transitionPhase <= .5 ? Math.max(0, 1 - transitionPhase * 2) : 0 : 0 : 1;
-		const dotBrightness = isPromptAnimated ? isTransitioningIn ? transitionPhase <= .5 ? 0 : Math.max(0, (transitionPhase - .5) * 2) : isTransitioningOut ? transitionPhase < .5 ? 0 : Math.max(0, (transitionPhase - .5) * 2) : pulseWave : 0;
-		const isSteadyPulse = isPromptAnimated && !isTransitioningIn && !isTransitioningOut;
-		if (!isPromptAnimated) {
-			this.promptIcon = DEFAULT_PROMPT_ICON;
-			this.lastPromptWasInvisible = false;
-		} else if (!isSteadyPulse) this.lastPromptWasInvisible = false;
-		const promptIsInvisible = isSteadyPulse && dotBrightness <= .05;
-		if (promptIsInvisible && !this.lastPromptWasInvisible) this.promptIcon = getRandomPromptIcon(this.promptIcon);
-		this.lastPromptWasInvisible = promptIsInvisible;
-		const promptChar = isSlash ? "/" : isAt ? "@" : isBang ? "!" : chevronBrightness > .05 ? "›" : dotBrightness > .05 ? this.promptIcon : " ";
-		const promptBrightness = isPromptAnimated ? Math.max(chevronBrightness, dotBrightness) : 1;
+		const color = displayModeColor(this.getModeColor?.() || mastra.green);
+		const promptChar = isSlash ? "/" : isAt ? "@" : isBang ? "!" : "→";
 		if (this._cachedModeColorHex !== color) {
 			this._cachedModeColorHex = color;
 			this._cachedColorFn = chalk.hex(color);
@@ -22986,9 +23076,9 @@ var CustomEditor = class extends Editor {
 			const bar = VOICE_WAVE_BARS[Math.round(wave * (VOICE_WAVE_BARS.length - 1))];
 			const brightness = .5 + wave * .5;
 			prompt = chalk.bold.rgb(Math.round(r * brightness), Math.round(g * brightness), Math.round(bValue * brightness))(bar);
-		} else prompt = chalk.bold.rgb(Math.round(r * promptBrightness), Math.round(g * promptBrightness), Math.round(bValue * promptBrightness))(promptChar);
-		const promptWidth = 4;
-		const contentWidth = width - 6;
+		} else prompt = chalk.bold.rgb(r, g, bValue)(promptChar);
+		const promptWidth = 3;
+		const contentWidth = width - 4;
 		const editorState = this.state;
 		const decorativePrompt = isSlash ? "/" : isAt ? "@" : isBang ? "!" : void 0;
 		const firstLine = editorState.lines[0];
@@ -23030,14 +23120,8 @@ var CustomEditor = class extends Editor {
 			contentLines.push(line);
 		}
 		const result = [];
-		const hBarLen = width - 2;
-		const top = b("╭") + b("─").repeat(hBarLen) + b("╮");
-		const leftBorder = b("│");
-		const rightBorder = b("│");
-		const bottom = b("╰") + b("─").repeat(hBarLen) + b("╯");
 		const textColorOpen = `\x1b[38;2;${parseHex(theme.getTheme().text).join(";")}m`;
 		const textColorClose = "\x1B[39m";
-		result.push(top);
 		const fullText = this.getText();
 		let greyRemaining = this.voiceTranscriptText.length > 0 && fullText.endsWith(this.voiceTranscriptText) ? [...this.voiceTranscriptText].length : 0;
 		const greyOpen = `\x1b[38;2;${parseHex(theme.getTheme().muted).join(";")}m`;
@@ -23046,12 +23130,11 @@ var CustomEditor = class extends Editor {
 			contentLines[i] = line;
 			greyRemaining -= consumed;
 		}
-		for (let i = 0; i < contentLines.length; i++) {
-			const line = `${textColorOpen}${contentLines[i]}${textColorClose}`;
-			if (i === 0) result.push(`${leftBorder} ${prompt} ${line} ${rightBorder}`);
-			else result.push(`${leftBorder}${" ".repeat(promptWidth - 1)}${line} ${rightBorder}`);
-		}
-		result.push(bottom);
+		const rows = contentLines.map((content, i) => {
+			const line = `${textColorOpen}${content}${textColorClose}`;
+			return i === 0 ? ` ${prompt} ${line}` : `${" ".repeat(promptWidth)}${line}`;
+		});
+		result.push(...fadePanel(rows, width, 1.5));
 		for (const ind of scrollIndicators) result.push(ind);
 		return result;
 	}
@@ -24881,12 +24964,11 @@ function createTUIState(options) {
 		pendingAskUserComponents: /* @__PURE__ */ new Map(),
 		pendingSubmitPlanComponents: /* @__PURE__ */ new Map(),
 		pendingInlineQuestions: [],
-		pendingFollowUpMessages: [],
-		pendingQueuedActions: [],
 		followUpComponents: [],
 		pendingSignalMessageComponentsById: /* @__PURE__ */ new Map(),
 		pendingSlashCommands: [],
 		pendingSlashCommandMessageIds: [],
+		pendingQueueSubmissions: 0,
 		pendingApprovalDismiss: null,
 		projectInfo: detectProject(process.cwd()),
 		modelAuthStatus: { hasAuth: true },
@@ -25386,6 +25468,77 @@ async function dispatchEvent(event, ectx, state) {
 	}
 }
 //#endregion
+//#region src/tui/components/banner.ts
+/** 16 columns × 5 rows: the header logo. */
+const LOGO_HEADER = [
+	"   ⣠⣶⣶⣄  ⣠⣶⣶⣄",
+	"   ⢻⣿⣿⣿  ⣿⣿⣿⡟",
+	" ⢀⣀ ⠈⠻⣿⣄⣠⣿⠟⢻⣷⣀⡀",
+	"⢰⣿⣿⣿⡄ ⣿⣿⣿⣿ ⢸⣿⣿⣿⡆",
+	"⠈⠻⠿⠟⠁ ⠙⠿⠿⠋ ⠈⠻⠿⠟⠁"
+];
+/** 24 columns × 7 rows: setup screens. */
+const LOGO_LARGE = [
+	"     ⣴⣾⣿⣷⣦⡀  ⢀⣴⣾⣿⣷⣦",
+	"    ⢸⣿⣿⣿⣿⣿⡇  ⢸⣿⣿⣿⣿⣿⡇",
+	"     ⠻⢿⣿⣿⣿⡇  ⢸⣿⣿⣿⣿⣿",
+	"       ⠈⢻⣿⣷⡀⢀⣾⣿⡟⠙⢿⣿⣆",
+	" ⣴⣾⣿⣿⣶⡀  ⣿⣿⣿⣿⣿⣿  ⢸⣿⣿⣿⣷⣦",
+	"⠸⣿⣿⣿⣿⣿⡇  ⣿⣿⣿⣿⣿⣿  ⢸⣿⣿⣿⣿⣿⠇",
+	" ⠹⢿⣿⡿⠟⠁  ⠘⠿⣿⣿⠿⠃  ⠈⠻⢿⣿⡿⠏"
+];
+/** Logo rows in the accent color, padded to a common width. */
+function renderLogo(rows = LOGO_HEADER) {
+	const w = Math.max(...rows.map((r) => visibleWidth(r)));
+	return rows.map((r) => theme.fg("accent", r) + " ".repeat(w - visibleWidth(r)));
+}
+const LOGO_GAP = 3;
+/**
+* Header lines for a given width:
+* - wide: logo, then title + info beside it (the info block is padded to the logo's 5 rows)
+* - narrow: logo stacked above title + info
+* - very narrow or a custom app name: one text line
+*/
+function renderHeader(width, { version, appName, info }) {
+	const name = appName || "Mastra Code";
+	const compact = theme.fg("accent", "◆") + " " + theme.bold(theme.fg("accent", name)) + theme.fg("dim", ` v${version}`);
+	if (name !== "Mastra Code" || width < 30) return [compact];
+	const title = theme.bold(theme.fg("text", name)) + theme.fg("dim", ` v${version}`);
+	const fit = (room) => info.map((l) => theme.fg("muted", visibleWidth(l) <= room ? l : [...l].slice(0, Math.max(0, room - 1)).join("") + "…"));
+	const logo = renderLogo();
+	const room = width - visibleWidth(logo[0]) - LOGO_GAP;
+	if (visibleWidth(title) <= room) {
+		const infoLines = fit(room);
+		const block = infoLines.length + 1 < logo.length ? [
+			title,
+			"",
+			...infoLines
+		] : [title, ...infoLines];
+		const top = Math.floor((logo.length - block.length) / 2);
+		return logo.map((row, i) => row + " ".repeat(LOGO_GAP) + (block[i - top] ?? ""));
+	}
+	return [
+		...logo,
+		"",
+		title,
+		...fit(width)
+	];
+}
+/** Startup header component; re-lays out on resize. */
+var HeaderComponent = class {
+	options;
+	paddingX;
+	constructor(options, paddingX = 1) {
+		this.options = options;
+		this.paddingX = paddingX;
+	}
+	invalidate() {}
+	render(width) {
+		const pad = " ".repeat(this.paddingX);
+		return renderHeader(width - this.paddingX * 2, this.options).map((l) => pad + l);
+	}
+};
+//#endregion
 //#region src/tui/onboarding-inline.ts
 /**
 * Setup onboarding component.
@@ -25400,6 +25553,25 @@ async function dispatchEvent(event, ectx, state) {
 * The component renders as a settings overlay. On completion it fires
 * `onComplete` with the collected choices.
 */
+const STEP_LABELS = [
+	"Welcome",
+	"Sign in",
+	"Models",
+	"Memory",
+	"Approval"
+];
+const STEP_INDEX = {
+	welcome: 0,
+	auth: 1,
+	modePack: 2,
+	omPack: 3,
+	yolo: 4,
+	done: 5
+};
+/** "✓ Welcome   ● Sign in   ○ Models …": done steps checked, the current one bold. */
+function renderStepper(current) {
+	return STEP_LABELS.map((label, i) => i < current ? `${theme.fg("success", "✓")} ${theme.fg("muted", label)}` : i === current ? `${theme.fg("accent", "●")} ${theme.bold(theme.fg("text", label))}` : theme.fg("dim", `○ ${label}`)).join("   ");
+}
 var OnboardingInlineComponent = class extends Box {
 	tui;
 	options;
@@ -25421,7 +25593,7 @@ var OnboardingInlineComponent = class extends Box {
 		this._focused = value;
 	}
 	constructor(options) {
-		super(4, 2, (text) => theme.bg("overlayBg", text));
+		super(4, 2, (text) => text);
 		this.tui = options.tui;
 		this.options = options;
 		const prevModePack = options.previous?.modePackId ? options.modePacks.find((p) => p.id === options.previous.modePackId) : void 0;
@@ -25437,6 +25609,60 @@ var OnboardingInlineComponent = class extends Box {
 		if (options.previous?.yolo != null) this.selectedYolo = options.previous.yolo;
 		this.renderStep("welcome");
 	}
+	/**
+	* Full-screen setup: the large logo, a step indicator and the current step, centered. Earlier steps
+	* are not repeated (the indicator shows progress). On short terminals the gaps tighten, then the logo
+	* shrinks, then it is dropped, so the step itself is never cut off.
+	*/
+	render(width) {
+		const rows = this.tui.terminal?.rows ?? 40;
+		const contentWidth = Math.max(20, Math.min(width - 8, 80));
+		const body = (this.stepBox ? this.stepBox.render(contentWidth) : []).map((line) => line.replace(/\s+$/, ""));
+		while (body.length && body[0] === "") body.shift();
+		while (body.length && body.at(-1) === "") body.pop();
+		const center = (lines) => {
+			const blockWidth = Math.max(0, ...lines.map((line) => visibleWidth(line)));
+			const pad = " ".repeat(Math.max(0, Math.floor((width - blockWidth) / 2)));
+			return lines.map((line) => line ? pad + line : "");
+		};
+		const stepper = center([renderStepper(STEP_INDEX[this.currentStep])]);
+		const layouts = [
+			[
+				...center(renderLogo(LOGO_LARGE)),
+				"",
+				"",
+				...stepper,
+				"",
+				"",
+				...center(body)
+			],
+			[
+				...center(renderLogo(LOGO_LARGE)),
+				"",
+				...stepper,
+				"",
+				...center(body)
+			],
+			[
+				...center(renderLogo(LOGO_HEADER)),
+				"",
+				...stepper,
+				"",
+				...center(body)
+			],
+			[
+				...stepper,
+				"",
+				...center(body)
+			],
+			center(body)
+		];
+		const content = layouts.find((layout) => layout.length <= rows) ?? layouts.at(-1);
+		const top = Math.max(0, Math.floor((rows - content.length) / 2));
+		const screen = [...Array.from({ length: top }, () => ""), ...content];
+		while (screen.length < rows) screen.push("");
+		return screen.map((line) => line + " ".repeat(Math.max(0, width - visibleWidth(line))));
+	}
 	get finished() {
 		return this._finished;
 	}
@@ -25487,7 +25713,7 @@ var OnboardingInlineComponent = class extends Box {
 	stepCount = 0;
 	makeBox() {
 		this.clearStep();
-		this.stepBox = new Box(0, 1, (text) => theme.bg("overlayBg", text));
+		this.stepBox = new Box(0, 1, (text) => text);
 		if (this.stepCount > 0) this.addChild(new Spacer(1));
 		this.stepCount++;
 		this.addChild(this.stepBox);
@@ -25495,7 +25721,7 @@ var OnboardingInlineComponent = class extends Box {
 	}
 	renderWelcome() {
 		const box = this.makeBox();
-		box.addChild(new Text(theme.bold(theme.fg("accent", "👋 Welcome to Mastra Code")), 0, 0));
+		box.addChild(new Text(theme.bold(theme.fg("text", "Welcome to Mastra Code")), 0, 0));
 		box.addChild(new Spacer(1));
 		box.addChild(new Text(theme.fg("text", "Let's configure your models and preferences."), 0, 0));
 		box.addChild(new Text(chalk.white("You can re-run this anytime with /setup."), 0, 0));
@@ -25527,7 +25753,7 @@ var OnboardingInlineComponent = class extends Box {
 	}
 	renderAuth() {
 		const box = this.makeBox();
-		box.addChild(new Text(theme.bold(theme.fg("accent", "🔑 Authentication")), 0, 0));
+		box.addChild(new Text(theme.bold(theme.fg("text", "Authentication")), 0, 0));
 		box.addChild(new Spacer(1));
 		const providers = this.options.authProviders;
 		if (providers.length === 0) {
@@ -25580,7 +25806,7 @@ var OnboardingInlineComponent = class extends Box {
 			box.addChild(new Text(theme.fg("dim", "Run /connect to configure an API key or authenticate with an account."), 0, 0));
 			box.addChild(new Spacer(1));
 		}
-		box.addChild(new Text(theme.bold(theme.fg("accent", "Model Packs")), 0, 0));
+		box.addChild(new Text(theme.bold(theme.fg("text", "Model Packs")), 0, 0));
 		box.addChild(new Spacer(1));
 		box.addChild(new Text(theme.fg("text", "Choose default models for each mode (build / plan / fast):"), 0, 0));
 		box.addChild(new Spacer(1));
@@ -25726,7 +25952,7 @@ var OnboardingInlineComponent = class extends Box {
 			return;
 		}
 		const box = this.makeBox();
-		box.addChild(new Text(theme.bold(theme.fg("accent", "🧠 Observational Memory")), 0, 0));
+		box.addChild(new Text(theme.bold(theme.fg("text", "Observational Memory")), 0, 0));
 		box.addChild(new Spacer(1));
 		box.addChild(new Text(theme.fg("text", "Choose the model for observational memory:"), 0, 0));
 		box.addChild(new Text(theme.fg("dim", "https://mastra.ai/docs/memory/observational-memory"), 0, 0));
@@ -25781,7 +26007,7 @@ var OnboardingInlineComponent = class extends Box {
 	}
 	renderYolo() {
 		const box = this.makeBox();
-		box.addChild(new Text(theme.bold(theme.fg("accent", "⚡ Tool Approval")), 0, 0));
+		box.addChild(new Text(theme.bold(theme.fg("text", "Tool Approval")), 0, 0));
 		box.addChild(new Spacer(1));
 		box.addChild(new Text(theme.fg("text", "YOLO mode auto-approves all tool calls (edits, commands, etc)."), 0, 0));
 		box.addChild(new Text(theme.fg("text", "You can toggle this anytime with Ctrl+Y or /yolo."), 0, 0));
@@ -25839,7 +26065,7 @@ var OnboardingInlineComponent = class extends Box {
 	collapseStep(summary) {
 		if (!this.stepBox) return;
 		this.stepBox.clear();
-		this.stepBox.setBgFn((text) => theme.bg("overlayBg", text));
+		this.stepBox.setBgFn((text) => text);
 		this.stepBox.addChild(new Text(`${theme.fg("success", "✓")} ${theme.fg("text", summary)}`, 0, 0));
 		this.selectList = void 0;
 		this.activeInlineQuestion = void 0;
@@ -25866,80 +26092,6 @@ function showSessionError(state, error) {
 	showError(state, error instanceof Error ? error.message : "Unknown error");
 }
 //#endregion
-//#region src/tui/components/banner.ts
-/**
-* ASCII art banner for the Mastra Code TUI header.
-* Renders "MASTRA CODE" or "MASTRA" in block-letter art with a green gradient.
-*/
-const GRADIENT_STOPS = [
-	"#085314",
-	"#0d8020",
-	"#16c858",
-	"#62f69d",
-	"#a1fac7"
-];
-const FULL_ART = [
-	"█▀▄▀█ ▄▀█ █▀ ▀█▀ █▀█ ▄▀█   █▀▀ █▀█ █▀▄ █▀▀",
-	"█ ▀ █ █▀█ ▀█  █  █▀▄ █▀█   █   █ █ █ █ █▀▀",
-	"▀   ▀ ▀ ▀ ▀▀  ▀  ▀ ▀ ▀ ▀   ▀▀▀ ▀▀▀ ▀▀  ▀▀▀"
-];
-const SHORT_ART = [
-	"█▀▄▀█ ▄▀█ █▀ ▀█▀ █▀█ ▄▀█",
-	"█ ▀ █ █▀█ ▀█  █  █▀▄ █▀█",
-	"▀   ▀ ▀ ▀ ▀▀  ▀  ▀ ▀ ▀ ▀"
-];
-/**
-* Interpolate between two hex colors.
-*/
-function lerpColor(hex1, hex2, t) {
-	const r1 = parseInt(hex1.slice(1, 3), 16);
-	const g1 = parseInt(hex1.slice(3, 5), 16);
-	const b1 = parseInt(hex1.slice(5, 7), 16);
-	const r2 = parseInt(hex2.slice(1, 3), 16);
-	const g2 = parseInt(hex2.slice(3, 5), 16);
-	const b2 = parseInt(hex2.slice(5, 7), 16);
-	return [
-		Math.round(r1 + (r2 - r1) * t),
-		Math.round(g1 + (g2 - g1) * t),
-		Math.round(b1 + (b2 - b1) * t)
-	];
-}
-/**
-* Color a single character based on its horizontal position in the gradient.
-*/
-function gradientChar(ch, colIdx, totalCols) {
-	if (ch === " ") return " ";
-	const t = totalCols <= 1 ? .5 : colIdx / (totalCols - 1);
-	const segmentCount = GRADIENT_STOPS.length - 1;
-	const segment = Math.min(Math.floor(t * segmentCount), segmentCount - 1);
-	const frac = t * segmentCount - segment;
-	const [r, g, b] = lerpColor(GRADIENT_STOPS[segment], GRADIENT_STOPS[segment + 1], frac);
-	return chalk.rgb(r, g, b)(ch);
-}
-/**
-* Apply left-to-right purple gradient to a line of text.
-*/
-function colorLine(line) {
-	const chars = [...line];
-	return chars.map((ch, i) => gradientChar(ch, i, chars.length)).join("");
-}
-/**
-* Render the banner header for the TUI.
-*
-* @param version - App version string (e.g. "0.2.0")
-* @param appName - App name. Block art is only used for "Mastra Code" (default).
-* @returns Styled multi-line string ready for display.
-*/
-function renderBanner(version, appName) {
-	const name = appName || "Mastra Code";
-	if (name !== "Mastra Code") return theme.fg("accent", "◆") + " " + theme.bold(theme.fg("accent", name)) + theme.fg("dim", ` v${version}`);
-	const cols = process.stdout.columns || 80;
-	if (cols < 30) return theme.fg("accent", "◆") + " " + theme.bold(theme.fg("accent", "Mastra Code")) + theme.fg("dim", ` v${version}`);
-	const coloredLines = (cols >= 50 ? FULL_ART : SHORT_ART).map((line) => colorLine(line));
-	coloredLines.push(theme.fg("dim", `v${version}`));
-	return coloredLines.join("\n");
-}
-//#endregion
 //#region src/tui/components/idle-counter.ts
 /**
 * Live work/idle-time indicator shown above the user input.
@@ -25949,6 +26101,7 @@ var IdleCounterComponent = class extends Container {
 	timingState;
 	textChild;
 	thinking = false;
+	activity = "";
 	constructor() {
 		super();
 		this.textChild = new Text("", 0, 0);
@@ -25958,17 +26111,18 @@ var IdleCounterComponent = class extends Container {
 		this.timingState = timingState;
 		this.update(now);
 	}
-	/** Quiet mode shows the live "Thinking..." indicator here instead of in the chat. */
+	/** Quiet mode's live thinking state; status-line.ts swaps the Working row's label while it is set. */
 	setThinking(thinking) {
-		if (this.thinking === thinking) return;
 		this.thinking = thinking;
-		this.update();
+	}
+	isThinking() {
+		return this.thinking;
+	}
+	/** The Working row (built in status-line.ts) shares this slot; empty when idle. */
+	setActivity(text) {
+		this.activity = text;
 	}
 	update(now = Date.now()) {
-		if (this.thinking) {
-			this.textChild.setText(`  ${theme.italic(theme.fg("thinkingText", "Thinking..."))}`);
-			return;
-		}
 		const segments = this.timingState ? formatIdleStatusTimingSegments(this.timingState, now) : null;
 		if (!segments) {
 			this.textChild.setText("");
@@ -25978,8 +26132,8 @@ var IdleCounterComponent = class extends Container {
 		this.textChild.setText(idle ? `  ${idle}` : "");
 	}
 	render(width) {
-		const rendered = super.render(width);
-		return rendered.length > 0 ? rendered : [""];
+		if (this.activity) return ["", truncateToWidth(this.activity, width)];
+		return ["", super.render(width)[0] ?? ""];
 	}
 };
 function formatIdleStatusTimingSegments(state, now = Date.now()) {
@@ -26156,24 +26310,39 @@ function abortActiveGoalJudge(state) {
 }
 function buildLayout(state, refreshModelAuthStatus) {
 	const appName = state.options.appName || "Mastra Code";
-	const banner = renderBanner(state.options.version || "0.1.0", appName);
-	const frontmatter = [
+	const version = state.options.version || "0.1.0";
+	const info = [
 		`Project: ${state.projectInfo.name}`,
 		`Resource ID: ${state.projectInfo.resourceId}`,
 		state.projectInfo.gitBranch ? `Branch: ${state.projectInfo.gitBranch}` : null,
 		state.projectInfo.isWorktree ? `Worktree of: ${state.projectInfo.mainRepoPath}` : null
-	].filter(Boolean).map((line) => theme.fg("muted", line)).join("\n");
+	].filter((line) => Boolean(line));
 	const sep = theme.fg("dim", " · ");
 	const hintParts = [];
-	if (state.controller.listModes().length > 1) hintParts.push(`${theme.fg("accent", "⇧+Tab")} ${theme.fg("muted", "cycle modes")}`);
-	hintParts.push(`${theme.fg("accent", "/help")} ${theme.fg("muted", "info & shortcuts")}`);
-	const instructions = `  ${hintParts.join(sep)}`;
-	state.ui.addChild(new Spacer(1));
-	state.ui.addChild(new Text(banner, 1, 0));
-	state.ui.addChild(new Text(frontmatter, 1, 0));
+	if (state.controller.listModes().length > 1) hintParts.push(keyHint("shift+tab", "cycle modes"));
+	hintParts.push(keyHint("/help", "info & shortcuts"));
+	const renderHints = (width) => {
+		for (let count = hintParts.length; count > 0; count--) {
+			const row = `  ${hintParts.slice(0, count).join(sep)}`;
+			if (visibleWidth(row) <= width) return [row];
+		}
+		return [];
+	};
 	state.ui.addChild(new Spacer(1));
-	state.ui.addChild(new Text(instructions, 0, 0));
+	state.ui.addChild(new HeaderComponent({
+		version,
+		appName,
+		info
+	}));
 	state.ui.addChild(new Spacer(1));
+	state.ui.addChild({
+		render: renderHints,
+		invalidate: () => {}
+	});
+	state.ui.addChild({
+		render: () => state.chatContainer.children.length > 0 ? [""] : [],
+		invalidate: () => {}
+	});
 	state.ui.addChild(state.chatContainer);
 	state.taskProgress = new TaskProgressComponent();
 	state.taskProgress.setQuietMode(state.quietMode);
@@ -26189,6 +26358,15 @@ function buildLayout(state, refreshModelAuthStatus) {
 	state.footer.addChild(state.memoryStatusLine);
 	state.ui.addChild(state.footer);
 	updateStatusLine(state);
+	let statusWidth = 0;
+	const renderFooter = state.footer.render.bind(state.footer);
+	state.footer.render = (width) => {
+		if (width !== statusWidth) {
+			statusWidth = width;
+			updateStatusLine(state);
+		}
+		return renderFooter(width);
+	};
 	refreshModelAuthStatus();
 	state.ui.setFocus(state.editor);
 	installOverlayFocusHandoff(state.ui, state);
@@ -26713,7 +26891,7 @@ async function renderExistingTasks(state) {
 //#region src/tui/components/shell-output.ts
 /**
 * Streaming shell output component for the shell passthrough (! command).
-* Shows a bordered box with live stdout/stderr and a status footer.
+* A tool-style block: "● $ command" with live stdout/stderr on a shaded panel below.
 */
 const MAX_LINES = 200;
 const COLLAPSED_LINES = 20;
@@ -26759,33 +26937,25 @@ var ShellStreamComponent = class extends WidthAwareContainer {
 	}
 	rebuildForWidth(termWidth) {
 		this.clear();
-		const border = (char) => theme.bold(theme.fg("accent", char));
-		const maxLineWidth = termWidth - 6;
 		const done = this.exitCode !== void 0;
-		const statusIcon = done ? this.exitCode === 0 ? theme.fg("success", " ✓") : theme.fg("error", " ✗") : theme.fg("muted", " ⋯");
+		const failed = done && this.exitCode !== 0;
 		const durationStr = done ? theme.fg("muted", ` ${formatDuration(Date.now() - this.startTime)}`) : "";
-		const footerText = `${theme.bold(theme.fg("toolTitle", "$"))} ${theme.fg("accent", this.command)}${durationStr}${statusIcon}`;
-		this.addChild(new Text(border("╭──"), 0, 0));
+		const title = `${theme.bold(theme.fg("toolTitle", "$"))} ${theme.fg("toolArgs", this.command)}${durationStr}${failed ? theme.fg("error", " ✗") : ""}`;
 		const displayLines = [...this.lines];
 		if (this.trailingPartial && !done) displayLines.push(this.trailingPartial);
 		while (displayLines.length > 0 && displayLines[0] === "") displayLines.shift();
-		if (displayLines.length > 0) {
-			const maxVisible = this.expanded ? MAX_LINES : COLLAPSED_LINES;
-			const truncated = displayLines.length > maxVisible;
-			const borderedLines = (truncated ? displayLines.slice(-maxVisible) : displayLines).map((line) => {
-				const truncatedLine = truncateAnsi(line, maxLineWidth);
-				return border("│") + " " + truncatedLine;
-			});
-			if (truncated) {
-				const remaining = displayLines.length - maxVisible;
-				const action = this.expanded ? "collapse" : "expand";
-				borderedLines.push(border("│") + " " + theme.fg("muted", `... ${remaining} more lines (Ctrl+E to ${action})`));
-			}
-			const displayOutput = borderedLines.join("\n");
-			if (displayOutput.trim()) this.addChild(new Text(displayOutput, 0, 0));
+		const maxVisible = this.expanded ? MAX_LINES : COLLAPSED_LINES;
+		const truncated = displayLines.length > maxVisible;
+		const output = (truncated ? displayLines.slice(-maxVisible) : displayLines).map((line) => theme.fg("toolOutput", line));
+		if (truncated) {
+			const remaining = displayLines.length - maxVisible;
+			const action = this.expanded ? "collapse" : "expand";
+			output.unshift(theme.fg("dim", `… ${remaining} earlier lines · `) + theme.fg("muted", "ctrl+e") + theme.fg("dim", ` to ${action}`));
 		}
-		this.addChild(new Text(`${border("╰──")} ${footerText}`, 0, 0));
-		if (done && this.exitCode !== 0) this.addChild(new Text(theme.fg("error", `  Exit code: ${this.exitCode}`), 0, 0));
+		if (failed) output.push(theme.fg("error", `Exit code: ${this.exitCode}`));
+		const dot = statusDot(done ? failed ? "error" : "done" : "running");
+		const hasOutput = output.some((line) => line.trim());
+		this.addChild(new Text(toolBlock(dot, title, hasOutput ? output : [], termWidth).join("\n"), 0, 0));
 		this.invalidate();
 	}
 	getChatSpacingKind() {
@@ -27224,7 +27394,21 @@ var MastraTUI = class MastraTUI {
 		this.state.quietModeMaxToolPreviewLines = savedSettings.preferences.quietModeMaxToolPreviewLines;
 		const originalHandleInput = this.state.editor.handleInput.bind(this.state.editor);
 		this.state.editor.handleInput = (data) => {
-			if (this.state.activeInlinePlanApproval) {
+			if (this.state.activeOnboarding) {
+				if (data === "") {
+					this.state.activeOnboarding.cancel();
+					this.state.activeOnboarding = void 0;
+					originalHandleInput(data);
+				} else this.state.activeOnboarding.handleInput(data);
+				return;
+			}
+			if (this.state.activeInlineApproval) {
+				const expandsRow = data === "" && !this.state.activeInlineApproval.handlesExpand?.();
+				if (data !== "" && !expandsRow) {
+					this.state.activeInlineApproval.handleInput(data);
+					return;
+				}
+			} else if (this.state.activeInlinePlanApproval) {
 				if (data !== "") {
 					this.state.activeInlinePlanApproval.handleInput(data);
 					return;
@@ -27235,13 +27419,6 @@ var MastraTUI = class MastraTUI {
 					return;
 				}
 			}
-			if (this.state.activeOnboarding) if (data === "") {
-				this.state.activeOnboarding.cancel();
-				this.state.activeOnboarding = void 0;
-			} else {
-				this.state.activeOnboarding.handleInput(data);
-				return;
-			}
 			originalHandleInput(data);
 		};
 		this.state.editor.onImagePaste = (image) => {
@@ -27249,7 +27426,6 @@ var MastraTUI = class MastraTUI {
 			this.state.editor.insertTextAtCursor?.("[image] ");
 			flushRender(this.state);
 		};
-		this.state.editor.getPromptAnimator = () => this.state.gradientAnimator;
 		setupKeyboardShortcuts(this.state, {
 			stop: () => this.stop(),
 			exit: (exitCode) => this.exit(exitCode),
@@ -27435,9 +27611,19 @@ var MastraTUI = class MastraTUI {
 		this.state.messageComponentsById.set(signalId, component);
 	}
 	createPendingNewThread() {
+		if (this.state.pendingNewThreadCreation) return this.state.pendingNewThreadCreation;
 		if (!this.state.pendingNewThread) return void 0;
 		this.state.pendingNewThread = false;
-		return this.state.session.thread.create().then(() => void 0);
+		const creation = this.state.session.thread.create().then(() => void 0, (error) => {
+			this.state.pendingNewThread = true;
+			throw error;
+		});
+		this.state.pendingNewThreadCreation = creation;
+		const clear = () => {
+			if (this.state.pendingNewThreadCreation === creation) this.state.pendingNewThreadCreation = void 0;
+		};
+		creation.then(clear, clear);
+		return creation;
 	}
 	sendOptimisticSignal(content, images, optimisticMessageId, pendingNewThread) {
 		const send = () => {
@@ -27495,18 +27681,28 @@ var MastraTUI = class MastraTUI {
 			const messageId = `queued-slash-${Date.now()}-${this.state.pendingSlashCommands.length}`;
 			this.state.pendingSlashCommands.push(text);
 			this.state.pendingSlashCommandMessageIds.push(messageId);
-			this.state.pendingQueuedActions.push("slash");
 			addPendingUserMessage(this.state, messageId, text);
 			updateStatusLine(this.state);
 			return;
 		}
 		const { content, images } = consumePendingImages(text, this.state.pendingImages);
 		this.state.pendingImages = [];
-		this.state.pendingFollowUpMessages.push({
+		const files = images?.map((img) => ({
+			data: img.data,
+			mediaType: img.mimeType
+		}));
+		const queue = () => this.state.session.queueMessage({
 			content,
-			images
+			files
+		});
+		const pendingThread = this.createPendingNewThread();
+		this.state.pendingQueueSubmissions++;
+		(pendingThread ? pendingThread.then(queue) : queue()).catch((error) => {
+			showSessionError(this.state, error);
+		}).finally(() => {
+			this.state.pendingQueueSubmissions--;
+			if (this.state.pendingQueueSubmissions === 0) drainQueuedActionIfIdle(this.getEventContext());
 		});
-		this.state.pendingQueuedActions.push("message");
 		updateStatusLine(this.state);
 		flushRender(this.state);
 	}
@@ -28174,7 +28370,12 @@ var MastraTUI = class MastraTUI {
 				}
 			});
 			this.state.activeOnboarding = component;
-			showModalOverlay(this.state.ui, component, { maxHeight: "80%" });
+			showModalOverlay(this.state.ui, component, {
+				widthPercent: 1,
+				maxWidth: 1e4,
+				maxHeight: "100%",
+				minHeightPercent: 1
+			});
 			component.focused = true;
 		});
 	}
@@ -28383,4 +28584,4 @@ var MastraTUI = class MastraTUI {
 //#endregion
 export { mastraBrand as _, OMProgressComponent as a, TUI_CO_AUTHOR as b, ToolExecutionComponentEnhanced as c, detectTerminalTheme as d, applyThemeMode as f, mastra as g, getThemeMode as h, LoginDialogComponent as i, ModelSelectorComponent as l, getMarkdownTheme as m, createTUIState as n, formatOMStatus as o, getEditorTheme as p, LoginSelectorComponent as r, UserMessageComponent as s, MastraTUI as t, AssistantMessageComponent as u, restoreTerminalForeground as v, theme as y };
 
-//# sourceMappingURL=tui-CDdSkr_Q.js.map
+//# sourceMappingURL=tui-5IfsALo2.js.map