pi-crew 0.2.3 → 0.2.5

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

@@ -1,57 +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);
-		}
-	}
-}
+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

@@ -1,58 +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);
-	}
-}
+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

@@ -1,144 +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);
-	}
-}
+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

@@ -1,63 +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))];
-}
+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))];
+}