pi-background-tasks 0.6.0 → 0.7.2

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

@@ -1,16 +1,26 @@
-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 { existsSync } from 'node:fs';
+import type { Theme } from '@earendil-works/pi-coding-agent';
+import { formatSize } from '@earendil-works/pi-coding-agent';
 import {
-	boundedRead,
-	compactWhitespace,
-	formatCompactNumber,
-	formatDuration,
-	taskDisplayName,
-	truncateChars,
-	type BgTaskSnapshot,
-} from "../core/common.js";
+  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 interface TaskManagerTheme {
+  fg: Theme['fg'];
+}
 
 export type BackgroundTaskForUi = BgTaskSnapshot & { name: string; outputAbsPath: string };
 type BgTask = BackgroundTaskForUi;
@@ -22,663 +32,743 @@ const STATUS_INTERVAL_MS = 1000;
 const DETAIL_TAIL_BYTES = 128 * 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";
+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();
+  return new Date(timestamp).toLocaleTimeString();
+}
+
+function formatCount(value: number): string {
+  return value.toString();
+}
+
+function pluralSuffix(count: number): '' | 's' {
+  return count === 1 ? '' : 's';
+}
+
+function formatExitCodeText(exitCode: BgTask['exitCode']): string {
+  return typeof exitCode === 'number' ? ` exit=${formatCount(exitCode)}` : '';
+}
+
+function formatPidText(pid: BgTask['pid']): string {
+  return typeof pid === 'number' ? ` · pid ${formatCount(pid)}` : '';
 }
 
 /** Normalize raw output bytes into display lines, dropping only the trailing empty line from a final newline. */
 function toOutputLines(content: string): string[] {
-	return content.replace(/\r/g, "").split("\n").filter((line, index, array) => line.length > 0 || index < array.length - 1);
+  return content
+    .replace(/\r/g, '')
+    .split('\n')
+    .filter((line, index, array) => line.length > 0 || index < array.length - 1);
 }
 
 function padAnsi(value: string, width: number): string {
-	return value + " ".repeat(Math.max(0, width - visibleWidth(value)));
+  return value + ' '.repeat(Math.max(0, width - visibleWidth(value)));
 }
 
 function lightBlue(value: string): string {
-	return `${LIGHT_BLUE_BG}${LIGHT_BLUE_FG}${value}${ANSI_RESET}`;
+  return `${LIGHT_BLUE_BG}${LIGHT_BLUE_FG}${value}${ANSI_RESET}`;
 }
 
 function blueBorder(value: string): string {
-	return `${LIGHT_BLUE_BORDER}${value}${ANSI_RESET}`;
+  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 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 statusColor(
+  theme: TaskManagerTheme,
+  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);
+  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}`;
+  const usage = task.contextUsage;
+  if (!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)`;
+  const usage = task.contextUsage;
+  if (!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)}`;
+  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(" · ");
+  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}`;
+  const usage = task.toolUsage;
+  if (!usage || (usage.total <= 0 && usage.failed <= 0)) return '';
+  const total = formatCount(usage.total);
+  const failed = formatCount(usage.failed);
+  return usage.failed > 0 ? `tools ${total}/${failed} failed` : `tools ${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(" · ");
+  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} ${formatCount(count)}`);
+  const parts = [`${formatCount(usage.total)} total`];
+  if (usage.failed > 0) parts.push(`${formatCount(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;
+  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)}`;
+  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;
+  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 contextColor(theme: TaskManagerTheme, 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);
-	});
+  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 type TaskManagerResult = 'closed';
 
-export class BackgroundTasksManager implements Component {
-	private mode: "list" | "detail" = "list";
-	private selectedIndex = 0;
-	private listScroll = 0;
-	private detailTaskId: string | undefined;
-	private showHistory = false;
-	private detailLines: string[] = [];
-	private detailFollow = true;
-	private detailScrollTop = 0;
-	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 (matchesKey(data, "up")) {
-			this.scrollDetail(-1);
-			return;
-		}
-		if (matchesKey(data, "down")) {
-			this.scrollDetail(1);
-			return;
-		}
-		if (matchesKey(data, "pageUp")) {
-			this.scrollDetail(-DETAIL_VISIBLE_OUTPUT_LINES);
-			return;
-		}
-		if (matchesKey(data, "pageDown")) {
-			this.scrollDetail(DETAIL_VISIBLE_OUTPUT_LINES);
-			return;
-		}
-		if (data === "r") {
-			this.detailFollow = true;
-			this.detailScrollTop = 0;
-			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.detailLines = [];
-		this.detailFollow = true;
-		this.detailScrollTop = 0;
-		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();
-	}
-
-	/** Scroll the detail output window. Scrolling up pauses the live tail; reaching the bottom resumes it. */
-	private scrollDetail(delta: number): void {
-		const maxTop = Math.max(0, this.detailLines.length - DETAIL_VISIBLE_OUTPUT_LINES);
-		if (maxTop === 0) return;
-		if (this.detailFollow) {
-			this.detailFollow = false;
-			this.detailScrollTop = maxTop;
-		}
-		this.detailScrollTop = Math.min(maxTop, Math.max(0, this.detailScrollTop + delta));
-		if (this.detailScrollTop >= maxTop) {
-			this.detailFollow = true;
-			this.detailScrollTop = 0;
-			void this.refreshTail();
-		}
-		this.tui.requestRender();
-	}
-
-	private async refreshTail(): Promise<void> {
-		const task = this.detailTask();
-		if (!task) return;
-		// While the user has scrolled up, the buffer is frozen so their view stays stable.
-		if (!this.detailFollow) return;
-		try {
-			if (!existsSync(task.outputAbsPath)) {
-				this.detailLines = [];
-				this.tailBytesRead = 0;
-				this.tailTotalBytes = 0;
-				this.tailTruncated = false;
-				this.tailError = `Output file not found: ${task.outputPath}`;
-				this.tui.requestRender();
-				return;
-			}
-			const read = await boundedRead(task.outputAbsPath, DETAIL_TAIL_BYTES, true);
-			this.detailLines = toOutputLines(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", "↑/↓ scroll · ← 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.detailLines.length === 0) {
-			lines.push(row(this.theme.fg("dim", "No output yet")));
-		} else {
-			const maxTop = Math.max(0, this.detailLines.length - DETAIL_VISIBLE_OUTPUT_LINES);
-			const start = this.detailFollow ? maxTop : Math.min(this.detailScrollTop, maxTop);
-			const windowLines = this.detailLines.slice(start, start + DETAIL_VISIBLE_OUTPUT_LINES);
-			for (const line of windowLines) lines.push(row(this.theme.fg("toolOutput", line)));
-		}
-		while (lines.length < DETAIL_VISIBLE_OUTPUT_LINES + 1) lines.push(row());
-		lines.push(bottom);
-		lines.push(` ${this.theme.fg("dim", this.outputStatusLine())}`);
-		return lines;
-	}
-
-	private outputStatusLine(): string {
-		const total = this.detailLines.length;
-		if (!this.detailFollow && total > 0) {
-			const maxTop = Math.max(0, total - DETAIL_VISIBLE_OUTPUT_LINES);
-			const start = Math.min(this.detailScrollTop, maxTop);
-			const end = Math.min(total, start + DETAIL_VISIBLE_OUTPUT_LINES);
-			return `lines ${start + 1}\u2013${end} of ${total} · ↑/↓ PgUp/PgDn scroll · ↓ at bottom follows`;
-		}
-		const suffix = this.tailTruncated ? ` of ${formatSize(this.tailTotalBytes)}` : "";
-		return `following tail ${formatSize(this.tailBytesRead)}${suffix} · ↑ scroll`;
-	}
+export interface StopAllResult {
+  stopped: number;
+  failures: string[];
 }
 
+export interface 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 detailLines: string[] = [];
+  private detailFollow = true;
+  private detailScrollTop = 0;
+  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: TaskManagerTheme,
+    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 {
+    this.tui.requestRender();
+  }
+
+  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 (matchesKey(data, 'up')) {
+      this.scrollDetail(-1);
+      return;
+    }
+    if (matchesKey(data, 'down')) {
+      this.scrollDetail(1);
+      return;
+    }
+    if (matchesKey(data, 'pageUp')) {
+      this.scrollDetail(-DETAIL_VISIBLE_OUTPUT_LINES);
+      return;
+    }
+    if (matchesKey(data, 'pageDown')) {
+      this.scrollDetail(DETAIL_VISIBLE_OUTPUT_LINES);
+      return;
+    }
+    if (data === 'r') {
+      this.detailFollow = true;
+      this.detailScrollTop = 0;
+      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.detailLines = [];
+    this.detailFollow = true;
+    this.detailScrollTop = 0;
+    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 ${formatCount(running.length)} running task${pluralSuffix(running.length)}.`;
+      this.tui.requestRender();
+      return;
+    }
+
+    this.confirmStopAllArmed = false;
+    this.actionMessage = `Stopping ${formatCount(running.length)} running task${pluralSuffix(running.length)}…`;
+    this.tui.requestRender();
+    try {
+      const result = await this.options.stopAllRunning();
+      this.actionMessage =
+        result.failures.length > 0
+          ? `Stopped ${formatCount(result.stopped)}; ${formatCount(result.failures.length)} failed: ${result.failures.join('; ')}`
+          : `Stopped ${formatCount(result.stopped)} running task${pluralSuffix(result.stopped)}.`;
+    } 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();
+  }
+
+  /** Scroll the detail output window. Scrolling up pauses the live tail; reaching the bottom resumes it. */
+  private scrollDetail(delta: number): void {
+    const maxTop = Math.max(0, this.detailLines.length - DETAIL_VISIBLE_OUTPUT_LINES);
+    if (maxTop === 0) return;
+    if (this.detailFollow) {
+      this.detailFollow = false;
+      this.detailScrollTop = maxTop;
+    }
+    this.detailScrollTop = Math.min(maxTop, Math.max(0, this.detailScrollTop + delta));
+    if (this.detailScrollTop >= maxTop) {
+      this.detailFollow = true;
+      this.detailScrollTop = 0;
+      void this.refreshTail();
+    }
+    this.tui.requestRender();
+  }
+
+  private async refreshTail(): Promise<void> {
+    const task = this.detailTask();
+    if (!task) return;
+    // While the user has scrolled up, the buffer is frozen so their view stays stable.
+    if (!this.detailFollow) return;
+    try {
+      if (!existsSync(task.outputAbsPath)) {
+        this.detailLines = [];
+        this.tailBytesRead = 0;
+        this.tailTotalBytes = 0;
+        this.tailTruncated = false;
+        this.tailError = `Output file not found: ${task.outputPath}`;
+        this.tui.requestRender();
+        return;
+      }
+      const read = await boundedRead(task.outputAbsPath, DETAIL_TAIL_BYTES, true);
+      this.detailLines = toOutputLines(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
+      ? [`${formatCount(allRunning)} active`, `${formatCount(historyCount)} history`]
+      : allRunning > 0
+        ? [`${formatCount(allRunning)} active shell${pluralSuffix(allRunning)}`]
+        : ['No active shells'];
+    if (unseenFailed) subtitleParts.push(`${formatCount(unseenFailed)} failed`);
+    if (unseenStopped) subtitleParts.push(`${formatCount(unseenStopped)} stopped`);
+    if (unseenDone) subtitleParts.push(`${formatCount(unseenDone)} done`);
+    if (unread) subtitleParts.push(`${formatCount(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.status !== 'running' ? this.theme.fg('dim', formatExitCodeText(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) {
+        const firstVisible = formatCount(this.listScroll + 1);
+        const lastVisible = formatCount(
+          Math.min(tasks.length, this.listScroll + LIST_VISIBLE_ROWS),
+        );
+        const totalVisible = formatCount(tasks.length);
+        body.push(
+          this.theme.fg('dim', `  Showing ${firstVisible}-${lastVisible} of ${totalVisible}`),
+        );
+      }
+    }
+    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 = formatExitCodeText(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)}${this.theme.fg('dim', formatPidText(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', '↑/↓ scroll · ← 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.detailLines.length === 0) {
+      lines.push(row(this.theme.fg('dim', 'No output yet')));
+    } else {
+      const maxTop = Math.max(0, this.detailLines.length - DETAIL_VISIBLE_OUTPUT_LINES);
+      const start = this.detailFollow ? maxTop : Math.min(this.detailScrollTop, maxTop);
+      const windowLines = this.detailLines.slice(start, start + DETAIL_VISIBLE_OUTPUT_LINES);
+      for (const line of windowLines) lines.push(row(this.theme.fg('toolOutput', line)));
+    }
+    while (lines.length < DETAIL_VISIBLE_OUTPUT_LINES + 1) lines.push(row());
+    lines.push(bottom);
+    lines.push(` ${this.theme.fg('dim', this.outputStatusLine())}`);
+    return lines;
+  }
+
+  private outputStatusLine(): string {
+    const total = this.detailLines.length;
+    if (!this.detailFollow && total > 0) {
+      const maxTop = Math.max(0, total - DETAIL_VISIBLE_OUTPUT_LINES);
+      const start = Math.min(this.detailScrollTop, maxTop);
+      const end = Math.min(total, start + DETAIL_VISIBLE_OUTPUT_LINES);
+      return `lines ${formatCount(start + 1)}\u2013${formatCount(end)} of ${formatCount(total)} · ↑/↓ PgUp/PgDn scroll · ↓ at bottom follows`;
+    }
+    const suffix = this.tailTruncated ? ` of ${formatSize(this.tailTotalBytes)}` : '';
+    return `following tail ${formatSize(this.tailBytesRead)}${suffix} · ↑ scroll`;
+  }
+}