pi-background-tasks 0.1.0 → 0.3.0

package/src/ui/background-tasks-manager.ts

@@ -0,0 +1,622 @@
+import { existsSync } from "node:fs";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { formatSize } from "@earendil-works/pi-coding-agent";
+import { matchesKey, truncateToWidth, visibleWidth, type Component, type TUI } from "@earendil-works/pi-tui";
+import {
+	boundedRead,
+	compactWhitespace,
+	formatCompactNumber,
+	formatDuration,
+	taskDisplayName,
+	truncateChars,
+	type BgTaskSnapshot,
+} from "../core/common.js";
+
+export type BackgroundTaskForUi = BgTaskSnapshot & { name: string; outputAbsPath: string };
+type BgTask = BackgroundTaskForUi;
+
+const STATUS_INTERVAL_MS = 1000;
+const DETAIL_TAIL_BYTES = 8 * 1024;
+const LIST_VISIBLE_ROWS = 14;
+const DETAIL_VISIBLE_OUTPUT_LINES = 12;
+const LIGHT_BLUE_BG = "\x1b[48;2;183;223;255m";
+const LIGHT_BLUE_FG = "\x1b[38;2;11;70;110m";
+const LIGHT_BLUE_BORDER = "\x1b[38;2;83;160;215m";
+const ANSI_RESET = "\x1b[0m";
+
+function formatTime(timestamp: number): string {
+	return new Date(timestamp).toLocaleTimeString();
+}
+
+function padAnsi(value: string, width: number): string {
+	return value + " ".repeat(Math.max(0, width - visibleWidth(value)));
+}
+
+function lightBlue(value: string): string {
+	return `${LIGHT_BLUE_BG}${LIGHT_BLUE_FG}${value}${ANSI_RESET}`;
+}
+
+function blueBorder(value: string): string {
+	return `${LIGHT_BLUE_BORDER}${value}${ANSI_RESET}`;
+}
+
+function statusLabel(status: BgTaskSnapshot["status"]): string {
+	if (status === "completed") return "done";
+	if (status === "failed") return "error";
+	if (status === "killed") return "stopped";
+	return "running";
+}
+
+function statusColor(theme: Theme, status: BgTaskSnapshot["status"], text = statusLabel(status)): string {
+	if (status === "completed") return theme.fg("success", text);
+	if (status === "failed") return theme.fg("error", text);
+	if (status === "killed") return theme.fg("warning", text);
+	return theme.fg("accent", text);
+}
+
+function taskAge(task: BgTask, now = Date.now()): string {
+	return formatDuration((task.endTime ?? now) - task.startTime);
+}
+
+function formatContextUsage(task: BgTask): string {
+	const usage = task.contextUsage;
+	if (!usage || !usage.contextWindow) return "—";
+	const window = formatCompactNumber(usage.contextWindow);
+	if (usage.percent === null || usage.tokens === null) return `?/${window}`;
+	return `${usage.percent.toFixed(1)}%/${window}`;
+}
+
+function formatContextDetail(task: BgTask): string {
+	const usage = task.contextUsage;
+	if (!usage || !usage.contextWindow) return "not reported by this background task";
+	const window = formatCompactNumber(usage.contextWindow);
+	if (usage.percent === null || usage.tokens === null) return `unknown tokens / ${window} window`;
+	return `${usage.percent.toFixed(1)}% of ${window} window (${formatCompactNumber(usage.tokens)} tokens)`;
+}
+
+function formatTokenUsage(task: BgTask): string {
+	const usage = task.tokenUsage;
+	if (!usage || usage.totalTokens <= 0) return "";
+	return `tok ${formatCompactNumber(usage.totalTokens)}`;
+}
+
+function formatTokenDetail(task: BgTask): string {
+	const usage = task.tokenUsage;
+	if (!usage || usage.totalTokens <= 0) return "not reported by this background task";
+	const parts = [
+		`input ${formatCompactNumber(usage.input)}`,
+		`output ${formatCompactNumber(usage.output)}`,
+		`cache read ${formatCompactNumber(usage.cacheRead)}`,
+		`cache write ${formatCompactNumber(usage.cacheWrite)}`,
+		`total ${formatCompactNumber(usage.totalTokens)}`,
+	];
+	return parts.join(" · ");
+}
+
+function formatToolUsage(task: BgTask): string {
+	const usage = task.toolUsage;
+	if (!usage || (usage.total <= 0 && usage.failed <= 0)) return "";
+	return usage.failed > 0 ? `tools ${usage.total}/${usage.failed} failed` : `tools ${usage.total}`;
+}
+
+function formatToolDetail(task: BgTask): string {
+	const usage = task.toolUsage;
+	if (!usage || (usage.total <= 0 && usage.failed <= 0)) return "not reported by this background task";
+	const byName = Object.entries(usage.byName ?? {})
+		.sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+		.slice(0, 6)
+		.map(([name, count]) => `${name} ${count}`);
+	const parts = [`${usage.total} total`];
+	if (usage.failed > 0) parts.push(`${usage.failed} failed`);
+	parts.push(...byName);
+	return parts.join(" · ");
+}
+
+function shortModelName(model: string): string {
+	const slash = model.lastIndexOf("/");
+	return slash >= 0 ? model.slice(slash + 1) : model;
+}
+
+function formatModel(task: BgTask): string {
+	if (!task.model) return "";
+	return `model ${shortModelName(task.model)}`;
+}
+
+function formatModelDetail(task: BgTask): string {
+	if (!task.model) return "not reported by this background task";
+	return task.model;
+}
+
+function contextColor(theme: Theme, task: BgTask, text: string): string {
+	const percent = task.contextUsage?.percent ?? 0;
+	if (percent > 90) return theme.fg("error", text);
+	if (percent > 70) return theme.fg("warning", text);
+	return theme.fg("dim", text);
+}
+
+function sortTasksForUi(tasks: BgTask[]): BgTask[] {
+	const rank = (task: BgTask) => (task.status === "running" ? 0 : task.status === "failed" ? 1 : task.status === "killed" ? 2 : 3);
+	return [...tasks].sort((a, b) => {
+		const rankDiff = rank(a) - rank(b);
+		if (rankDiff !== 0) return rankDiff;
+		return (b.endTime ?? b.startTime) - (a.endTime ?? a.startTime);
+	});
+}
+
+export type TaskManagerResult = "closed";
+
+export type StopAllResult = {
+	stopped: number;
+	failures: string[];
+};
+
+export type TaskManagerOptions = {
+	initialTaskId?: string;
+	getTasks: () => BgTask[];
+	stopTask: (task: BgTask) => Promise<void>;
+	stopAllRunning: () => Promise<StopAllResult>;
+	rerunTask: (task: BgTask) => Promise<BgTask>;
+	showOutputPath: (task: BgTask) => void;
+	markSeen: (taskId: string) => void;
+	markFinishedSeen: (taskIds: string[]) => void;
+	isSeen: (taskId: string) => boolean;
+};
+
+export class BackgroundTasksManager implements Component {
+	private mode: "list" | "detail" = "list";
+	private selectedIndex = 0;
+	private listScroll = 0;
+	private detailTaskId: string | undefined;
+	private showHistory = false;
+	private tailText = "";
+	private tailBytesRead = 0;
+	private tailTotalBytes = 0;
+	private tailTruncated = false;
+	private tailError: string | undefined;
+	private actionMessage: string | undefined;
+	private confirmStopAllArmed = false;
+	private readonly lastBytesByTask = new Map<string, number>();
+	private readonly recentActivityByTask = new Map<string, { delta: number; timestamp: number }>();
+	private refreshTimer: NodeJS.Timeout;
+
+	constructor(
+		private readonly tui: Pick<TUI, "requestRender">,
+		private readonly theme: Theme,
+		private readonly done: (result: TaskManagerResult) => void,
+		private readonly options: TaskManagerOptions,
+	) {
+		if (options.initialTaskId) {
+			this.detailTaskId = options.initialTaskId;
+			this.mode = "detail";
+			this.options.markSeen(options.initialTaskId);
+			void this.refreshTail();
+		} else {
+			const allTasks = options.getTasks();
+			const hasRunning = allTasks.some((task) => task.status === "running");
+			const hasFinished = allTasks.some((task) => task.status !== "running");
+			if (!hasRunning && hasFinished) this.showHistory = true;
+		}
+		this.refreshTimer = setInterval(() => {
+			if (this.mode === "detail") void this.refreshTail();
+			this.tui.requestRender();
+		}, STATUS_INTERVAL_MS);
+	}
+
+	dispose(): void {
+		clearInterval(this.refreshTimer);
+	}
+
+	invalidate(): void {}
+
+	handleInput(data: string): void {
+		const stopAllKey = data === "a" || data === "A" || data === "K";
+		if (!stopAllKey) this.confirmStopAllArmed = false;
+		this.actionMessage = undefined;
+
+		if (matchesKey(data, "escape") || data === "q" || data === "Q" || data === "x" || data === "X") {
+			this.close();
+			return;
+		}
+
+		if (this.mode === "detail") {
+			this.handleDetailInput(data);
+			return;
+		}
+		this.handleListInput(data);
+	}
+
+	render(width: number): string[] {
+		const boxWidth = Math.max(2, Math.min(width, 118));
+		return this.mode === "detail" ? this.renderDetail(boxWidth) : this.renderList(boxWidth);
+	}
+
+	private close(): void {
+		this.done("closed");
+	}
+
+	private handleListInput(data: string): void {
+		const tasks = this.currentTasks();
+		if (tasks.length === 0) {
+			if (matchesKey(data, "return")) this.close();
+			if (data === "h" || data === "H") {
+				this.showHistory = !this.showHistory;
+				this.tui.requestRender();
+			}
+			return;
+		}
+		if (matchesKey(data, "up")) {
+			this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+			this.ensureSelectionVisible();
+			this.tui.requestRender();
+			return;
+		}
+		if (matchesKey(data, "down")) {
+			this.selectedIndex = Math.min(tasks.length - 1, this.selectedIndex + 1);
+			this.ensureSelectionVisible();
+			this.tui.requestRender();
+			return;
+		}
+		if (matchesKey(data, "pageUp")) {
+			this.selectedIndex = Math.max(0, this.selectedIndex - LIST_VISIBLE_ROWS);
+			this.ensureSelectionVisible();
+			this.tui.requestRender();
+			return;
+		}
+		if (matchesKey(data, "pageDown")) {
+			this.selectedIndex = Math.min(tasks.length - 1, this.selectedIndex + LIST_VISIBLE_ROWS);
+			this.ensureSelectionVisible();
+			this.tui.requestRender();
+			return;
+		}
+		if (matchesKey(data, "return") || matchesKey(data, "right")) {
+			const task = tasks[this.selectedIndex];
+			if (!task) return;
+			this.openDetail(task.id);
+			return;
+		}
+		if (data === "k") {
+			const task = tasks[this.selectedIndex];
+			if (task) void this.stopTaskFromUi(task);
+			return;
+		}
+		if (data === "K" || data === "a" || data === "A") {
+			void this.stopAllFromUi();
+			return;
+		}
+		if (data === "R") {
+			const task = tasks[this.selectedIndex];
+			if (task) void this.rerunTaskFromUi(task);
+			return;
+		}
+		if (data === "c" || data === "C") {
+			const task = tasks[this.selectedIndex];
+			if (task) this.showOutputPathFromUi(task);
+			return;
+		}
+		if (data === "h" || data === "H") {
+			this.showHistory = !this.showHistory;
+			this.selectedIndex = 0;
+			this.listScroll = 0;
+			this.tui.requestRender();
+		}
+	}
+
+	private handleDetailInput(data: string): void {
+		const task = this.detailTask();
+		if (matchesKey(data, "left")) {
+			this.mode = "list";
+			this.detailTaskId = undefined;
+			this.tui.requestRender();
+			return;
+		}
+		if (data === "r") {
+			void this.refreshTail();
+			return;
+		}
+		if (data === "R" && task) {
+			void this.rerunTaskFromUi(task);
+			return;
+		}
+		if (data === "k" && task) {
+			void this.stopTaskFromUi(task);
+			return;
+		}
+		if ((data === "c" || data === "C") && task) {
+			this.showOutputPathFromUi(task);
+		}
+	}
+
+	private currentTasks(): BgTask[] {
+		const allTasks = this.options.getTasks();
+		let visible = this.showHistory ? allTasks : allTasks.filter((task) => task.status === "running");
+		if (!this.showHistory && visible.length === 0 && allTasks.some((task) => task.status !== "running")) {
+			this.showHistory = true;
+			visible = allTasks;
+		}
+		return sortTasksForUi(visible);
+	}
+
+	private detailTask(): BgTask | undefined {
+		return this.options.getTasks().find((task) => task.id === this.detailTaskId);
+	}
+
+	private openDetail(taskId: string): void {
+		this.detailTaskId = taskId;
+		this.mode = "detail";
+		this.tailText = "";
+		this.tailError = undefined;
+		this.options.markSeen(taskId);
+		void this.refreshTail();
+		this.tui.requestRender();
+	}
+
+	private ensureSelectionVisible(): void {
+		if (this.selectedIndex < this.listScroll) this.listScroll = this.selectedIndex;
+		if (this.selectedIndex >= this.listScroll + LIST_VISIBLE_ROWS) this.listScroll = this.selectedIndex - LIST_VISIBLE_ROWS + 1;
+	}
+
+	private async stopTaskFromUi(task: BgTask): Promise<void> {
+		if (task.status !== "running") {
+			this.actionMessage = `${taskDisplayName(task)} is ${task.status}; nothing to stop.`;
+			this.tui.requestRender();
+			return;
+		}
+		this.actionMessage = `Stopping ${taskDisplayName(task)}…`;
+		this.tui.requestRender();
+		try {
+			await this.options.stopTask(task);
+			this.actionMessage = `Stopped ${taskDisplayName(task)}.`;
+		} catch (error) {
+			this.actionMessage = `Stop failed: ${error instanceof Error ? error.message : String(error)}`;
+		}
+		this.tui.requestRender();
+	}
+
+	private async stopAllFromUi(): Promise<void> {
+		const running = this.options.getTasks().filter((task) => task.status === "running");
+		if (running.length === 0) {
+			this.actionMessage = "No running background tasks to stop.";
+			this.tui.requestRender();
+			return;
+		}
+		if (!this.confirmStopAllArmed) {
+			this.confirmStopAllArmed = true;
+			this.actionMessage = `Press a/K again to stop all ${running.length} running task${running.length === 1 ? "" : "s"}.`;
+			this.tui.requestRender();
+			return;
+		}
+
+		this.confirmStopAllArmed = false;
+		this.actionMessage = `Stopping ${running.length} running task${running.length === 1 ? "" : "s"}…`;
+		this.tui.requestRender();
+		try {
+			const result = await this.options.stopAllRunning();
+			this.actionMessage = result.failures.length > 0
+				? `Stopped ${result.stopped}; ${result.failures.length} failed: ${result.failures.join("; ")}`
+				: `Stopped ${result.stopped} running task${result.stopped === 1 ? "" : "s"}.`;
+		} catch (error) {
+			this.actionMessage = `Stop-all failed: ${error instanceof Error ? error.message : String(error)}`;
+		}
+		this.tui.requestRender();
+	}
+
+	private async rerunTaskFromUi(task: BgTask): Promise<void> {
+		this.actionMessage = `Rerunning ${taskDisplayName(task)}…`;
+		this.tui.requestRender();
+		try {
+			const rerun = await this.options.rerunTask(task);
+			this.showHistory = false;
+			const tasks = this.currentTasks();
+			const index = tasks.findIndex((candidate) => candidate.id === rerun.id);
+			if (index >= 0) {
+				this.selectedIndex = index;
+				this.ensureSelectionVisible();
+			}
+			this.actionMessage = `Reran as ${taskDisplayName(rerun)} (${rerun.id}).`;
+		} catch (error) {
+			this.actionMessage = `Rerun failed: ${error instanceof Error ? error.message : String(error)}`;
+		}
+		this.tui.requestRender();
+	}
+
+	private showOutputPathFromUi(task: BgTask): void {
+		this.options.showOutputPath(task);
+		this.actionMessage = `Output path shown for ${taskDisplayName(task)}.`;
+		this.tui.requestRender();
+	}
+
+	private async refreshTail(): Promise<void> {
+		const task = this.detailTask();
+		if (!task) return;
+		try {
+			if (!existsSync(task.outputAbsPath)) {
+				this.tailText = "";
+				this.tailBytesRead = 0;
+				this.tailTotalBytes = 0;
+				this.tailTruncated = false;
+				this.tailError = `Output file not found: ${task.outputPath}`;
+				return;
+			}
+			const read = await boundedRead(task.outputAbsPath, DETAIL_TAIL_BYTES, true);
+			this.tailText = read.content;
+			this.tailBytesRead = read.bytesRead;
+			this.tailTotalBytes = read.totalBytes;
+			this.tailTruncated = read.truncated;
+			this.tailError = undefined;
+		} catch (error) {
+			this.tailError = `Output read failed: ${error instanceof Error ? error.message : String(error)}`;
+		}
+		this.tui.requestRender();
+	}
+
+	private activityLabel(task: BgTask): string {
+		if (task.status !== "running") return "";
+		const now = Date.now();
+		const previous = this.lastBytesByTask.get(task.id);
+		this.lastBytesByTask.set(task.id, task.bytesWritten);
+		if (previous !== undefined && task.bytesWritten > previous) {
+			const delta = task.bytesWritten - previous;
+			this.recentActivityByTask.set(task.id, { delta, timestamp: now });
+			return `+${formatSize(delta)} ↑`;
+		}
+		const recent = this.recentActivityByTask.get(task.id);
+		if (recent && now - recent.timestamp < 3000) return `+${formatSize(recent.delta)} ↑`;
+		return "";
+	}
+
+	private frame(title: string, subtitle: string, body: string[], footer: string, width: number): string[] {
+		const inner = Math.max(1, width - 2);
+		const top = blueBorder(`╭${"─".repeat(inner)}╮`);
+		const bottom = blueBorder(`╰${"─".repeat(inner)}╯`);
+		const row = (content = "") => `${blueBorder("│")}${padAnsi(truncateToWidth(content, inner), inner)}${blueBorder("│")}`;
+		const header = lightBlue(padAnsi(` ${title}`, inner));
+		const subtitleLine = subtitle ? lightBlue(padAnsi(` ${subtitle}`, inner)) : lightBlue(" ".repeat(inner));
+		const lines = [top, row(header), row(subtitleLine), row()];
+		for (const line of body) lines.push(row(line));
+		lines.push(row());
+		lines.push(row(footer));
+		lines.push(bottom);
+		return lines;
+	}
+
+	private renderList(width: number): string[] {
+		const tasks = this.currentTasks();
+		if (this.selectedIndex >= tasks.length) this.selectedIndex = Math.max(0, tasks.length - 1);
+		this.ensureSelectionVisible();
+
+		const allTasks = this.options.getTasks();
+		const allRunning = allTasks.filter((task) => task.status === "running").length;
+		const historyCount = allTasks.length - allRunning;
+		const unseenFailed = allTasks.filter((task) => task.status === "failed" && !this.options.isSeen(task.id)).length;
+		const unseenStopped = allTasks.filter((task) => task.status === "killed" && !this.options.isSeen(task.id)).length;
+		const unseenDone = allTasks.filter((task) => task.status === "completed" && !this.options.isSeen(task.id)).length;
+		const unread = unseenFailed + unseenStopped + unseenDone;
+		const subtitleParts = this.showHistory
+			? [`${allRunning} active`, `${historyCount} history`]
+			: allRunning > 0
+				? [`${allRunning} active shell${allRunning === 1 ? "" : "s"}`]
+				: ["No active shells"];
+		if (unseenFailed) subtitleParts.push(`${unseenFailed} failed`);
+		if (unseenStopped) subtitleParts.push(`${unseenStopped} stopped`);
+		if (unseenDone) subtitleParts.push(`${unseenDone} done`);
+		if (unread) subtitleParts.push(`${unread} unread`);
+		const subtitle = subtitleParts.join(" · ");
+
+		const body: string[] = [];
+		if (tasks.length === 0) {
+			const message = allTasks.length === 0
+				? "  No background tasks in this session."
+				: this.showHistory
+					? "  No background tasks in this view."
+					: "  No running background tasks. Press h to show recent history.";
+			body.push(this.theme.fg("dim", message));
+		} else {
+			const maxNameWidth = Math.max(12, width - 78);
+			const visible = tasks.slice(this.listScroll, this.listScroll + LIST_VISIBLE_ROWS);
+			for (let i = 0; i < visible.length; i++) {
+				const task = visible[i];
+				if (!task) continue;
+				const index = this.listScroll + i;
+				const selected = index === this.selectedIndex;
+				const pointer = selected ? "›" : " ";
+				const unseen = task.status !== "running" && !this.options.isSeen(task.id);
+				const unreadMark = unseen ? this.theme.fg("warning", "●") : " ";
+				const rawName = truncateChars(taskDisplayName(task), maxNameWidth);
+				const name = task.status === "failed"
+					? this.theme.fg("error", rawName)
+					: task.status === "killed"
+						? this.theme.fg("warning", rawName)
+						: task.status === "completed"
+							? this.theme.fg("success", rawName)
+							: this.theme.fg("text", rawName);
+				const status = statusColor(this.theme, task.status, statusLabel(task.status));
+				const runtime = taskAge(task);
+				const size = formatSize(task.bytesWritten);
+				const context = formatContextUsage(task);
+				const contextText = ` ${contextColor(this.theme, task, `ctx ${context}`)}`;
+				const model = formatModel(task);
+				const modelText = model ? ` ${this.theme.fg("dim", model)}` : "";
+				const tokenUsage = formatTokenUsage(task);
+				const tokenText = tokenUsage ? ` ${this.theme.fg("dim", tokenUsage)}` : "";
+				const toolUsage = formatToolUsage(task);
+				const toolText = toolUsage ? ` ${this.theme.fg("dim", toolUsage)}` : "";
+				const activity = this.activityLabel(task);
+				const activityText = activity ? ` ${this.theme.fg("warning", activity)}` : "";
+				const exit = task.exitCode !== undefined && task.status !== "running" ? this.theme.fg("dim", ` exit=${task.exitCode}`) : "";
+				let row = ` ${pointer} ${unreadMark} ${name} ${this.theme.fg("dim", task.id)} ${this.theme.fg("dim", "·")} ${status}${exit} ${this.theme.fg("dim", `${runtime} ${size}`)}${contextText}${modelText}${tokenText}${toolText}${activityText}`;
+				if (selected) row = lightBlue(padAnsi(truncateToWidth(row, width - 4), width - 4));
+				body.push(row);
+			}
+			if (tasks.length > LIST_VISIBLE_ROWS) {
+				body.push(this.theme.fg("dim", `  Showing ${this.listScroll + 1}-${Math.min(tasks.length, this.listScroll + LIST_VISIBLE_ROWS)} of ${tasks.length}`));
+			}
+		}
+		if (this.actionMessage) body.push(this.theme.fg("warning", `  ${this.actionMessage}`));
+		return this.frame(
+			"bg tasks focused",
+			subtitle,
+			body,
+			` ${this.theme.fg("dim", `↑/↓ select · Enter logs · k stop · a stop all · h ${this.showHistory ? "hide" : "show"} history · R rerun · c path · x close`)}`,
+			width,
+		);
+	}
+
+	private renderDetail(width: number): string[] {
+		const task = this.detailTask();
+		if (!task) {
+			this.mode = "list";
+			return this.renderList(width);
+		}
+		const name = taskDisplayName(task);
+		const status = statusColor(this.theme, task.status);
+		const exit = task.exitCode !== undefined ? ` exit=${task.exitCode}` : "";
+		const body: string[] = [
+			` ${this.theme.fg("toolTitle", "Name:")} ${this.theme.fg("accent", name)}`,
+			` ${this.theme.fg("toolTitle", "ID:")} ${this.theme.fg("accent", task.id)}`,
+			` ${this.theme.fg("toolTitle", "Status:")} ${status}${this.theme.fg("dim", exit)}`,
+			` ${this.theme.fg("toolTitle", "Runtime:")} ${taskAge(task)}${task.pid ? this.theme.fg("dim", ` · pid ${task.pid}`) : ""}`,
+			` ${this.theme.fg("toolTitle", "Started:")} ${formatTime(task.startTime)}${task.endTime ? this.theme.fg("dim", ` · ended ${formatTime(task.endTime)}`) : ""}`,
+			` ${this.theme.fg("toolTitle", "Output:")} ${this.theme.fg("accent", task.outputPath)}`,
+		];
+		if (task.description && compactWhitespace(task.description) !== compactWhitespace(name)) {
+			body.push(` ${this.theme.fg("toolTitle", "Description:")} ${truncateToWidth(task.description, width - 16)}`);
+		}
+		const modelDetail = formatModelDetail(task);
+		body.push(` ${this.theme.fg("toolTitle", "Model:")} ${task.model ? this.theme.fg("accent", modelDetail) : this.theme.fg("dim", modelDetail)}`);
+		const context = formatContextDetail(task);
+		body.push(` ${this.theme.fg("toolTitle", "Context:")} ${contextColor(this.theme, task, context)}`);
+		body.push(` ${this.theme.fg("toolTitle", "Tokens:")} ${this.theme.fg("dim", formatTokenDetail(task))}`);
+		body.push(` ${this.theme.fg("toolTitle", "Tools:")} ${this.theme.fg("dim", formatToolDetail(task))}`);
+		body.push(` ${this.theme.fg("toolTitle", "Command:")} ${truncateToWidth(task.command, width - 13)}`);
+		if (task.error) body.push(` ${this.theme.fg("error", `Error: ${task.error}`)}`);
+		body.push("", ` ${this.theme.fg("toolTitle", "Output tail:")}`);
+		body.push(...this.renderOutputBox(width - 4));
+		if (this.actionMessage) body.push(this.theme.fg("warning", ` ${this.actionMessage}`));
+		const subtitle = `${task.id} · ${task.status === "running" ? "live tail refreshes every second" : "final output"}`;
+		const footer = ` ${this.theme.fg("dim", "← list · r refresh · k stop · R rerun · c path · x close")}`;
+		return this.frame(`bg: ${truncateChars(name, 64)}`, subtitle, body, footer, width);
+	}
+
+	private renderOutputBox(width: number): string[] {
+		const inner = Math.max(1, width - 2);
+		const top = ` ${blueBorder(`╭${"─".repeat(inner)}╮`)}`;
+		const bottom = ` ${blueBorder(`╰${"─".repeat(inner)}╯`)}`;
+		const row = (content = "") => ` ${blueBorder("│")}${padAnsi(truncateToWidth(content, inner), inner)}${blueBorder("│")}`;
+		const lines = [top];
+		if (this.tailError) {
+			lines.push(row(this.theme.fg("error", this.tailError)));
+		} else if (!this.tailText) {
+			lines.push(row(this.theme.fg("dim", "No output yet")));
+		} else {
+			const outputLines = this.tailText.replace(/\r/g, "").split("\n").filter((line, index, array) => line.length > 0 || index < array.length - 1);
+			const visible = outputLines.slice(-DETAIL_VISIBLE_OUTPUT_LINES);
+			for (const line of visible) lines.push(row(this.theme.fg("toolOutput", line)));
+		}
+		while (lines.length < DETAIL_VISIBLE_OUTPUT_LINES + 1) lines.push(row());
+		lines.push(bottom);
+		const suffix = this.tailTruncated ? ` of ${formatSize(this.tailTotalBytes)}` : "";
+		lines.push(` ${this.theme.fg("dim", `Showing tail ${formatSize(this.tailBytesRead)}${suffix}`)}`);
+		return lines;
+	}
+}
+