pi-crew 0.1.32 → 0.1.34

package/src/ui/dashboard-panes/agents-pane.ts

@@ -0,0 +1,25 @@
+import type { RunDashboardOptions } from "../run-dashboard.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+function tokens(agent: RunUiSnapshot["agents"][number]): string {
+	const total = (agent.usage?.input ?? 0) + (agent.usage?.output ?? agent.progress?.tokens ?? 0) + (agent.usage?.cacheRead ?? 0) + (agent.usage?.cacheWrite ?? 0);
+	return total ? `${total} tok` : "tok pending";
+}
+
+export function renderAgentsPane(snapshot: RunUiSnapshot | undefined, options: RunDashboardOptions = {}): string[] {
+	if (!snapshot) return ["Agents pane: snapshot unavailable"];
+	if (!snapshot.agents.length) return ["Agents pane: no agents"];
+	return [
+		`Agents pane: ${snapshot.agents.length} agents · ${snapshot.progress.completed}/${snapshot.progress.total} tasks done`,
+		...snapshot.agents.slice(0, 12).map((agent) => {
+			const parts = [
+				agent.status,
+				options.showTools !== false && agent.progress?.currentTool ? `tool=${agent.progress.currentTool}` : undefined,
+				options.showTools !== false ? `${agent.toolUses ?? agent.progress?.toolCount ?? 0} tools` : undefined,
+				options.showTokens !== false ? tokens(agent) : undefined,
+				options.showModel !== false ? (agent.model ? `model=${agent.model}` : undefined) : undefined,
+			].filter((part): part is string => Boolean(part));
+			return `${agent.taskId} ${agent.role}->${agent.agent} · ${parts.join(" · ")}`;
+		}),
+	];
+}

package/src/ui/dashboard-panes/health-pane.ts

@@ -0,0 +1,30 @@
+import { summarizeHeartbeats } from "../heartbeat-aggregator.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export interface HealthPaneOptions {
+	staleMs?: number;
+	deadMs?: number;
+	isForeground?: boolean;
+	now?: number | Date;
+}
+
+function seconds(ms: number): string {
+	return `${Math.round(ms / 1000)}s`;
+}
+
+export function renderHealthPane(snapshot: RunUiSnapshot | undefined, opts: HealthPaneOptions = {}): string[] {
+	if (!snapshot) return ["Health pane: snapshot unavailable"];
+	const summary = summarizeHeartbeats(snapshot, opts);
+	const lines = [
+		`Health pane: ${summary.healthy}/${summary.totalTasks} healthy · stale=${summary.stale} · dead=${summary.dead} · missing=${summary.missing}`,
+	];
+	if (summary.worstStaleMs > 0) lines.push(`Worst stale: ${seconds(summary.worstStaleMs)} ago`);
+	const hints: string[] = [];
+	const foreground = opts.isForeground !== false;
+	if ((summary.dead > 0 || summary.missing > 0) && foreground) hints.push("R recovery");
+	if ((summary.dead > 0 || summary.stale > 0) && foreground) hints.push("K kill stale");
+	hints.push("D diagnostic export");
+	lines.push(`Actions: ${hints.join(" · ")}`);
+	if (!foreground && (summary.dead > 0 || summary.missing > 0 || summary.stale > 0)) lines.push("Async run: R/K disabled — inspect process manually or use /team-api.");
+	return lines;
+}

package/src/ui/dashboard-panes/mailbox-pane.ts

@@ -0,0 +1,10 @@
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export function renderMailboxPane(snapshot: RunUiSnapshot | undefined): string[] {
+	if (!snapshot) return ["Mailbox pane: snapshot unavailable"];
+	const mailbox = snapshot.mailbox;
+	return [
+		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}`,
+		mailbox.needsAttention > 0 ? "Needs attention: press Enter for detail · A ack · N nudge · C compose · X ack all." : "No mailbox items need attention. Press Enter for detail or C compose.",
+	];
+}

package/src/ui/dashboard-panes/progress-pane.ts

@@ -0,0 +1,14 @@
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export function renderProgressPane(snapshot: RunUiSnapshot | undefined): string[] {
+	if (!snapshot) return ["Progress pane: snapshot unavailable"];
+	const progress = snapshot.progress;
+	return [
+		`Progress pane: ${progress.completed}/${progress.total} completed · running=${progress.running} queued=${progress.queued} failed=${progress.failed}`,
+		...snapshot.recentEvents.slice(-10).map((event) => {
+			const seq = event.metadata?.seq !== undefined ? `#${event.metadata.seq}` : "#?";
+			return `${seq} ${event.time} ${event.type}${event.taskId ? ` ${event.taskId}` : ""}${event.message ? ` · ${event.message}` : ""}`;
+		}),
+		...(snapshot.recentEvents.length ? [] : ["No recent events"]),
+	];
+}

package/src/ui/dashboard-panes/transcript-pane.ts

@@ -0,0 +1,10 @@
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export function renderTranscriptPane(snapshot: RunUiSnapshot | undefined): string[] {
+	if (!snapshot) return ["Output pane: snapshot unavailable"];
+	return [
+		`Output pane: ${snapshot.recentOutputLines.length} recent lines · press v for transcript viewer · o for raw output`,
+		...snapshot.recentOutputLines.slice(-12).map((line) => `⎿ ${line}`),
+		...(snapshot.recentOutputLines.length ? [] : ["No recent output"]),
+	];
+}

package/src/ui/heartbeat-aggregator.ts

@@ -0,0 +1,53 @@
+import type { TeamTaskState } from "../state/types.ts";
+import type { RunUiSnapshot } from "./snapshot-types.ts";
+
+export interface HeartbeatSummary {
+	runId: string;
+	totalTasks: number;
+	healthy: number;
+	stale: number;
+	dead: number;
+	missing: number;
+	worstStaleMs: number;
+}
+
+export interface HeartbeatSummaryOptions {
+	staleMs?: number;
+	deadMs?: number;
+	now?: number | Date;
+}
+
+function nowMs(now: number | Date | undefined): number {
+	if (typeof now === "number") return now;
+	if (now instanceof Date) return now.getTime();
+	return Date.now();
+}
+
+function isActiveTask(task: TeamTaskState): boolean {
+	return task.status === "running" || task.status === "queued";
+}
+
+export function summarizeHeartbeats(snapshot: RunUiSnapshot, opts: HeartbeatSummaryOptions = {}): HeartbeatSummary {
+	const staleMs = opts.staleMs ?? 60_000;
+	const deadMs = opts.deadMs ?? 5 * 60_000;
+	const current = nowMs(opts.now);
+	const summary: HeartbeatSummary = { runId: snapshot.runId, totalTasks: snapshot.tasks.length, healthy: 0, stale: 0, dead: 0, missing: 0, worstStaleMs: 0 };
+	for (const task of snapshot.tasks) {
+		if (!isActiveTask(task)) continue;
+		const heartbeat = task.heartbeat;
+		if (!heartbeat) {
+			summary.missing += 1;
+			continue;
+		}
+		const age = Math.max(0, current - Date.parse(heartbeat.lastSeenAt));
+		if (!Number.isFinite(age)) {
+			summary.missing += 1;
+			continue;
+		}
+		summary.worstStaleMs = Math.max(summary.worstStaleMs, age);
+		if (heartbeat.alive === false || age > deadMs) summary.dead += 1;
+		else if (age > staleMs) summary.stale += 1;
+		else summary.healthy += 1;
+	}
+	return summary;
+}

package/src/ui/keybinding-map.ts

@@ -0,0 +1,92 @@
+export const DASHBOARD_KEYS = {
+	close: ["q", "\u001b"],
+	select: ["\r", "\n", "s"],
+	root: {
+		summary: ["u"],
+		artifacts: ["a"],
+		api: ["i"],
+		agents: ["d"],
+		mailbox: ["m"],
+		events: ["e"],
+		output: ["o"],
+		transcript: ["v"],
+		reload: ["r"],
+		progressToggle: ["p"],
+	},
+	pane: { agents: ["1"], progress: ["2"], mailbox: ["3"], output: ["4"], health: ["5"] },
+	navigation: { up: ["k", "\u001b[A"], down: ["j", "\u001b[B"] },
+	mailbox: { ack: ["A"], nudge: ["N"], compose: ["C"], preview: ["P"], ackAll: ["X"], openDetail: ["\r", "\n"] },
+	health: { recovery: ["R"], killStale: ["K"], diagnosticExport: ["D"] },
+	notification: { dismissAll: ["H"] },
+} as const;
+
+export const KEY_RESERVED = new Set<string>([
+	...DASHBOARD_KEYS.close,
+	...DASHBOARD_KEYS.select,
+	...Object.values(DASHBOARD_KEYS.root).flat(),
+	...Object.values(DASHBOARD_KEYS.pane).flat(),
+	...Object.values(DASHBOARD_KEYS.navigation).flat(),
+	...Object.values(DASHBOARD_KEYS.mailbox).flat(),
+	...Object.values(DASHBOARD_KEYS.health).flat(),
+	...Object.values(DASHBOARD_KEYS.notification).flat(),
+]);
+
+function includes(values: readonly string[], data: string): boolean {
+	return values.includes(data);
+}
+
+export type DashboardKeyAction =
+	| "close"
+	| "select"
+	| "summary"
+	| "artifacts"
+	| "api"
+	| "agents"
+	| "mailbox"
+	| "events"
+	| "output"
+	| "transcript"
+	| "reload"
+	| "progressToggle"
+	| "pane-agents"
+	| "pane-progress"
+	| "pane-mailbox"
+	| "pane-output"
+	| "pane-health"
+	| "up"
+	| "down"
+	| "mailbox-detail"
+	| "health-recovery"
+	| "health-kill-stale"
+	| "health-diagnostic-export"
+	| "notifications-dismiss";
+
+export function dashboardActionForKey(data: string, activePane?: "agents" | "progress" | "mailbox" | "output" | "health"): DashboardKeyAction | undefined {
+	if (includes(DASHBOARD_KEYS.close, data)) return "close";
+	if (activePane === "mailbox" && includes(DASHBOARD_KEYS.mailbox.openDetail, data)) return "mailbox-detail";
+	if (activePane === "health") {
+		if (includes(DASHBOARD_KEYS.health.recovery, data)) return "health-recovery";
+		if (includes(DASHBOARD_KEYS.health.killStale, data)) return "health-kill-stale";
+		if (includes(DASHBOARD_KEYS.health.diagnosticExport, data)) return "health-diagnostic-export";
+	}
+	if (includes(DASHBOARD_KEYS.notification.dismissAll, data)) return "notifications-dismiss";
+	if (includes(DASHBOARD_KEYS.select, data)) return "select";
+	if (includes(DASHBOARD_KEYS.root.summary, data)) return "summary";
+	if (includes(DASHBOARD_KEYS.root.artifacts, data)) return "artifacts";
+	if (includes(DASHBOARD_KEYS.root.api, data)) return "api";
+	if (includes(DASHBOARD_KEYS.root.agents, data)) return "agents";
+	if (includes(DASHBOARD_KEYS.root.mailbox, data)) return "mailbox";
+	if (includes(DASHBOARD_KEYS.root.events, data)) return "events";
+	if (includes(DASHBOARD_KEYS.root.output, data)) return "output";
+	if (includes(DASHBOARD_KEYS.root.transcript, data)) return "transcript";
+	if (includes(DASHBOARD_KEYS.root.reload, data)) return "reload";
+	if (includes(DASHBOARD_KEYS.root.progressToggle, data)) return "progressToggle";
+	if (includes(DASHBOARD_KEYS.pane.agents, data)) return "pane-agents";
+	if (includes(DASHBOARD_KEYS.pane.progress, data)) return "pane-progress";
+	if (includes(DASHBOARD_KEYS.pane.mailbox, data)) return "pane-mailbox";
+	if (includes(DASHBOARD_KEYS.pane.output, data)) return "pane-output";
+	if (includes(DASHBOARD_KEYS.pane.health, data)) return "pane-health";
+	if (includes(DASHBOARD_KEYS.navigation.up, data)) return "up";
+	if (includes(DASHBOARD_KEYS.navigation.down, data)) return "down";
+	return undefined;
+}

package/src/ui/live-run-sidebar.ts

@@ -12,6 +12,7 @@ import { iconForStatus } from "./status-colors.ts";
 import type { CrewTheme } from "./theme-adapter.ts";
 import { asCrewTheme, subscribeThemeChange } from "./theme-adapter.ts";
 import { Box, Text } from "./layout-primitives.ts";
+import type { RunSnapshotCache, RunUiSnapshot } from "./snapshot-types.ts";
 
 const TASK_READ_TTL_MS = 200;
 const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -58,22 +59,26 @@ export class LiveRunSidebar {
 	private readonly theme: CrewTheme;
 	private readonly config: CrewUiConfig;
 	private readonly unsubscribeTheme: () => void;
+	private readonly snapshotCache?: RunSnapshotCache;
 	private cachedLines: string[] = [];
 	private cachedWidth = 0;
 	private cachedSignature = "";
 
-	constructor(input: { cwd: string; runId: string; done: Done; theme?: unknown; config?: CrewUiConfig }) {
+	constructor(input: { cwd: string; runId: string; done: Done; theme?: unknown; config?: CrewUiConfig; snapshotCache?: RunSnapshotCache }) {
 		this.cwd = input.cwd;
 		this.runId = input.runId;
 		this.done = input.done;
 		this.theme = asCrewTheme(input.theme);
 		this.config = input.config ?? {};
+		this.snapshotCache = input.snapshotCache;
 		this.unsubscribeTheme = subscribeThemeChange(input.theme, () => this.invalidate());
 	}
 
-	private buildSignature(manifestStatus: string, tasks: TeamTaskState[], agentsCount: number, waitingCount: number): string {
-		const agentStatusSig = tasks.map((task) => `${task.id}:${task.status}:${task.startedAt ?? ""}`).join("|");
-		return `${manifestStatus}|${agentsCount}|${waitingCount}|${agentStatusSig}`;
+	private buildSignature(manifestStatus: string, tasks: TeamTaskState[], agents: ReturnType<typeof readCrewAgents>, waitingCount: number, snapshot?: RunUiSnapshot): string {
+		if (snapshot) return `${snapshot.signature}:${waitingCount}`;
+		const taskSig = tasks.map((task) => `${task.id}:${task.status}:${task.startedAt ?? ""}:${task.finishedAt ?? ""}:${task.agentProgress?.currentTool ?? ""}:${task.agentProgress?.toolCount ?? 0}:${task.agentProgress?.tokens ?? 0}:${task.usage ? JSON.stringify(task.usage) : ""}`).join("|");
+		const agentSig = agents.map((agent) => [agent.id, agent.status, agent.startedAt, agent.completedAt ?? "", agent.progress?.currentTool ?? "", agent.progress?.toolCount ?? 0, agent.progress?.tokens ?? 0, agent.progress?.turns ?? 0, agent.progress?.lastActivityAt ?? "", agent.progress?.recentOutput.at(-1) ?? "", agent.toolUses ?? 0].join(":")).join("|");
+		return `${manifestStatus}|${agents.length}|${waitingCount}|${taskSig}|${agentSig}`;
 	}
 
 	private colorLine(line: string): string {
@@ -110,14 +115,21 @@ export class LiveRunSidebar {
 			);
 		}
 
-		const run = loaded.manifest;
-		const tasks = readTasks(run.tasksPath);
+		let snapshot: RunUiSnapshot | undefined;
+		try {
+			snapshot = this.snapshotCache?.refreshIfStale(this.runId);
+		} catch {
+			snapshot = undefined;
+		}
+		const run = snapshot?.manifest ?? loaded.manifest;
+		const tasks = snapshot?.tasks ?? readTasks(run.tasksPath);
 		const controlConfig = resolveCrewControlConfig({ ui: this.config });
-		const agents = readCrewAgents(run).map((agent) => applyAttentionState(run, agent, controlConfig));
+		const rawAgents = snapshot?.agents ?? readCrewAgents(run);
+		const agents = rawAgents.map((agent) => applyAttentionState(run, agent, controlConfig));
 		const active = agents.filter((agent) => agent.status === "running");
 		const completed = agents.filter((agent) => agent.status !== "running").slice(-5);
 		const waiting = tasks.filter((task) => task.status === "queued");
-		const signature = this.buildSignature(run.updatedAt, tasks, agents.length, waiting.length);
+		const signature = this.buildSignature(run.updatedAt, tasks, agents, waiting.length, snapshot);
 		if (signature !== this.cachedSignature || w !== this.cachedWidth) {
 			const lines: string[] = [
 				border("╭", "─", "╮", w),

package/src/ui/overlays/agent-picker-overlay.ts

@@ -0,0 +1,57 @@
+import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
+import { readCrewAgents } from "../../runtime/crew-agent-records.ts";
+import { loadRunManifestById } from "../../state/state-store.ts";
+import { pad, truncate } from "../../utils/visual.ts";
+import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
+
+export interface AgentPickerSelection {
+	agentId: string;
+}
+
+export class AgentPickerOverlay {
+	private readonly agents: CrewAgentRecord[];
+	private readonly done: (selection: AgentPickerSelection | undefined) => void;
+	private readonly theme: CrewTheme;
+	private selected = 0;
+
+	constructor(opts: { cwd: string; runId: string; done: (selection: AgentPickerSelection | undefined) => void; theme?: unknown }) {
+		const loaded = loadRunManifestById(opts.cwd, opts.runId);
+		this.agents = loaded ? readCrewAgents(loaded.manifest) : [];
+		this.done = opts.done;
+		this.theme = asCrewTheme(opts.theme ?? {});
+	}
+
+	invalidate(): void {
+		// Agent list is captured at open time.
+	}
+
+	render(width: number): string[] {
+		const inner = Math.max(24, width - 4);
+		const lines = [
+			this.theme.bold("Select agent"),
+			"↑/↓ move · Enter select · ESC cancel",
+			...this.agents.map((agent, index) => `${index === this.selected ? "›" : " "} ${agent.taskId} · ${agent.status} · ${agent.role}->${agent.agent}`),
+		];
+		if (!this.agents.length) lines.push("No agents found.");
+		return lines.map((line) => pad(truncate(line, inner), inner));
+	}
+
+	handleInput(data: string): void {
+		if (data === "\u001b" || data === "q") {
+			this.done(undefined);
+			return;
+		}
+		if (data === "k" || data === "\u001b[A") {
+			this.selected = Math.max(0, this.selected - 1);
+			return;
+		}
+		if (data === "j" || data === "\u001b[B") {
+			this.selected = Math.min(Math.max(0, this.agents.length - 1), this.selected + 1);
+			return;
+		}
+		if (data === "\r" || data === "\n") {
+			const agent = this.agents[this.selected];
+			this.done(agent ? { agentId: agent.taskId } : undefined);
+		}
+	}
+}

package/src/ui/overlays/confirm-overlay.ts

@@ -0,0 +1,58 @@
+import { Box, Text } from "../layout-primitives.ts";
+import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
+import { pad, truncate } from "../../utils/visual.ts";
+
+export interface ConfirmOptions {
+	title: string;
+	body?: string;
+	dangerLevel?: "low" | "medium" | "high";
+	defaultAction?: "confirm" | "cancel";
+}
+
+export class ConfirmOverlay {
+	private readonly opts: ConfirmOptions;
+	private readonly done: (confirmed: boolean) => void;
+	private readonly theme: CrewTheme;
+
+	constructor(opts: ConfirmOptions, done: (confirmed: boolean) => void, theme: unknown = {}) {
+		this.opts = opts;
+		this.done = done;
+		this.theme = asCrewTheme(theme);
+	}
+
+	invalidate(): void {
+		// Stateless overlay.
+	}
+
+	render(width: number): string[] {
+		const innerWidth = Math.max(24, Math.min(width - 4, 72));
+		const color = this.opts.dangerLevel === "high" ? "error" : this.opts.dangerLevel === "medium" ? "warning" : "accent";
+		const title = this.theme.bold(this.theme.fg(color, this.opts.title));
+		const hint = this.opts.defaultAction === "confirm" ? "Enter/Y confirm · N/ESC cancel" : "Y confirm · Enter/N/ESC cancel";
+		const bodyLines = (this.opts.body ?? "").split(/\r?\n/).filter(Boolean);
+		const lines = [
+			`╭${"─".repeat(innerWidth)}╮`,
+			`│ ${pad(truncate(title, innerWidth - 1), innerWidth - 1)}│`,
+			`├${"─".repeat(innerWidth)}┤`,
+			...(bodyLines.length ? bodyLines : ["Are you sure?"]).map((line) => `│ ${pad(truncate(line, innerWidth - 1), innerWidth - 1)}│`),
+			`├${"─".repeat(innerWidth)}┤`,
+			`│ ${pad(truncate(this.theme.fg("dim", hint), innerWidth - 1), innerWidth - 1)}│`,
+			`╰${"─".repeat(innerWidth)}╯`,
+		];
+		const box = new Box(0, 0);
+		for (const line of lines) box.addChild(new Text(line));
+		return box.render(width);
+	}
+
+	handleInput(data: string): void {
+		if (data === "y" || data === "Y") {
+			this.done(true);
+			return;
+		}
+		if ((data === "\r" || data === "\n") && this.opts.defaultAction === "confirm") {
+			this.done(true);
+			return;
+		}
+		if (data === "n" || data === "N" || data === "\u001b" || data === "q" || data === "\r" || data === "\n") this.done(false);
+	}
+}

package/src/ui/overlays/mailbox-compose-overlay.ts

@@ -0,0 +1,144 @@
+import type { MailboxDirection } from "../../state/mailbox.ts";
+import { pad, truncate } from "../../utils/visual.ts";
+import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
+import { ConfirmOverlay } from "./confirm-overlay.ts";
+import { renderComposePreview } from "./mailbox-compose-preview.ts";
+
+export interface MailboxComposePayload {
+	from: string;
+	to: string;
+	body: string;
+	taskId?: string;
+	direction: MailboxDirection;
+}
+
+export type MailboxComposeResult = { type: "submit"; payload: MailboxComposePayload } | { type: "cancel" };
+
+type FieldName = "from" | "to" | "body" | "taskId" | "direction";
+
+const FIELD_ORDER: FieldName[] = ["from", "to", "body", "taskId", "direction"];
+
+export class MailboxComposeOverlay {
+	private readonly done: (result: MailboxComposeResult) => void;
+	private readonly theme: CrewTheme;
+	private fields: MailboxComposePayload = { from: "operator", to: "leader", body: "", direction: "inbox" };
+	private activeField = 1;
+	private error: string | undefined;
+	private preview = false;
+	private confirm: ConfirmOverlay | undefined;
+
+	constructor(opts: { done: (result: MailboxComposeResult) => void; theme?: unknown; initial?: Partial<MailboxComposePayload> }) {
+		this.done = opts.done;
+		this.theme = asCrewTheme(opts.theme ?? {});
+		this.fields = { ...this.fields, ...opts.initial };
+	}
+
+	invalidate(): void {
+		// State is updated synchronously from input.
+	}
+
+	render(width: number): string[] {
+		if (this.confirm) return this.confirm.render(width);
+		const inner = Math.max(24, width - 4);
+		const formWidth = this.preview ? Math.max(24, Math.floor(inner * 0.6)) : inner;
+		const lines = [
+			this.theme.bold("Compose mailbox message"),
+			this.preview ? "P close preview · Tab cycle · Enter submit · ESC discard" : "P preview · Tab cycle · Enter submit · ESC discard",
+			...(this.error ? [this.theme.fg("error", this.error)] : []),
+			this.fieldLine("from", formWidth),
+			this.fieldLine("to", formWidth),
+			this.fieldLine("body", formWidth),
+			this.fieldLine("taskId", formWidth),
+			`${this.activeField === 4 ? "›" : " "} [${this.fields.direction === "outbox" ? "x" : " "}] Send to outbox`,
+		];
+		if (!this.preview) return lines.map((line) => pad(truncate(line, inner), inner));
+		const previewLines = renderComposePreview(this.fields.body, Math.max(20, inner - formWidth - 3), this.theme);
+		const max = Math.max(lines.length, previewLines.length);
+		const split: string[] = [];
+		for (let index = 0; index < max; index += 1) {
+			split.push(`${pad(truncate(lines[index] ?? "", formWidth), formWidth)} │ ${truncate(previewLines[index] ?? "", inner - formWidth - 3)}`);
+		}
+		return split;
+	}
+
+	private fieldLine(field: Exclude<FieldName, "direction">, width: number): string {
+		const active = FIELD_ORDER[this.activeField] === field;
+		const label = field === "taskId" ? "taskId" : field;
+		return `${active ? "›" : " "} ${label}: ${truncate(this.fields[field] ?? "", Math.max(8, width - label.length - 5))}`;
+	}
+
+	private activeName(): FieldName {
+		return FIELD_ORDER[this.activeField] ?? "body";
+	}
+
+	private appendText(data: string): void {
+		const field = this.activeName();
+		if (field === "direction") return;
+		this.fields = { ...this.fields, [field]: `${this.fields[field] ?? ""}${data}` };
+		this.error = undefined;
+	}
+
+	private backspace(): void {
+		const field = this.activeName();
+		if (field === "direction") return;
+		this.fields = { ...this.fields, [field]: (this.fields[field] ?? "").slice(0, -1) };
+	}
+
+	private submit(): void {
+		const body = this.fields.body.trim();
+		if (!body) {
+			this.error = "Body is required.";
+			return;
+		}
+		if (!this.fields.to.trim()) {
+			this.error = "Recipient is required.";
+			return;
+		}
+		this.done({ type: "submit", payload: { ...this.fields, from: this.fields.from.trim() || "operator", to: this.fields.to.trim(), body, taskId: this.fields.taskId?.trim() || undefined } });
+	}
+
+	private cancel(): void {
+		if (this.fields.body.length <= 50) {
+			this.done({ type: "cancel" });
+			return;
+		}
+		this.confirm = new ConfirmOverlay({ title: "Discard draft?", body: `Body has ${this.fields.body.length} chars. Y=discard, N=continue editing`, dangerLevel: "medium", defaultAction: "cancel" }, (confirmed) => {
+			this.confirm = undefined;
+			if (confirmed) this.done({ type: "cancel" });
+		}, this.theme);
+	}
+
+	handleInput(data: string): void {
+		if (this.confirm) {
+			this.confirm.handleInput(data);
+			return;
+		}
+		if (data === "\u001b") {
+			this.cancel();
+			return;
+		}
+		if (data === "P") {
+			this.preview = !this.preview;
+			return;
+		}
+		if (data === "\t") {
+			this.activeField = (this.activeField + 1) % FIELD_ORDER.length;
+			return;
+		}
+		if (data === " ") {
+			if (this.activeName() === "direction") this.fields.direction = this.fields.direction === "inbox" ? "outbox" : "inbox";
+			else this.appendText(data);
+			return;
+		}
+		if (data === "\b" || data === "\u007f") {
+			this.backspace();
+			return;
+		}
+		if (data === "\r" || data === "\n") {
+			if (this.activeName() === "body" || this.fields.body.trim()) this.submit();
+			else this.activeField = (this.activeField + 1) % FIELD_ORDER.length;
+			return;
+		}
+		if (data.length === 1 && data >= " ") this.appendText(data);
+	}
+}

package/src/ui/overlays/mailbox-compose-preview.ts

@@ -0,0 +1,63 @@
+import type { CrewTheme } from "../theme-adapter.ts";
+import { asCrewTheme } from "../theme-adapter.ts";
+import { truncate } from "../../utils/visual.ts";
+
+export type MarkdownToken = { type: "heading" | "code-block" | "list-item" | "paragraph"; level?: number; text: string };
+
+function stripInlineMarkdown(text: string): string {
+	return text
+		.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
+		.replace(/\[([^\]]+)\]\([^)]*\)/g, "$1")
+		.replace(/`([^`]+)`/g, "$1")
+		.replace(/\*\*([^*]+)\*\*/g, "$1")
+		.replace(/\*([^*]+)\*/g, "$1");
+}
+
+export function tokenizeMarkdown(body: string): MarkdownToken[] {
+	const tokens: MarkdownToken[] = [];
+	const lines = body.split(/\r?\n/);
+	let inCode = false;
+	let codeLines: string[] = [];
+	for (const line of lines) {
+		if (line.trim().startsWith("```")) {
+			if (inCode) {
+				tokens.push({ type: "code-block", text: codeLines.join("\n") });
+				codeLines = [];
+				inCode = false;
+			} else inCode = true;
+			continue;
+		}
+		if (inCode) {
+			codeLines.push(line);
+			continue;
+		}
+		const heading = /^(#{1,3})\s+(.+)$/.exec(line);
+		if (heading) {
+			tokens.push({ type: "heading", level: heading[1]!.length, text: stripInlineMarkdown(heading[2]!) });
+			continue;
+		}
+		const list = /^\s*(?:[-*]|\d+\.)\s+(.+)$/.exec(line);
+		if (list) {
+			tokens.push({ type: "list-item", text: stripInlineMarkdown(list[1]!) });
+			continue;
+		}
+		if (line.trim()) tokens.push({ type: "paragraph", text: stripInlineMarkdown(line.trim()) });
+	}
+	if (inCode && codeLines.length) tokens.push({ type: "code-block", text: codeLines.join("\n") });
+	return tokens;
+}
+
+function renderToken(token: MarkdownToken, width: number, theme: CrewTheme): string[] {
+	const safeWidth = Math.max(10, width);
+	if (token.type === "heading") return [truncate(theme.bold(`${"#".repeat(token.level ?? 1)} ${token.text}`), safeWidth)];
+	if (token.type === "list-item") return [truncate(`• ${token.text}`, safeWidth)];
+	if (token.type === "code-block") return ["```", ...token.text.split(/\r?\n/).map((line) => truncate(`  ${line}`, safeWidth)), "```"];
+	return [truncate(token.text, safeWidth)];
+}
+
+export function renderComposePreview(body: string, width: number, themeLike: unknown = {}): string[] {
+	const theme = asCrewTheme(themeLike);
+	const tokens = tokenizeMarkdown(body);
+	if (!tokens.length) return [theme.fg("dim", "Preview: (empty)")];
+	return [theme.bold("Preview"), ...tokens.flatMap((token) => renderToken(token, width, theme))];
+}