pi-crew 0.11.0 → 0.11.1

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

@@ -1,52 +1,51 @@
 /**
- * K-1 — dashboard keybinding cheatsheet overlay.
+ * K-1 — dashboard keybinding cheatsheet overlay (RAIL design language, M4/E1).
  *
  * Toggled by `?` (bound in keybinding-map.ts). Renders the dashboard's
- * keybindings grouped by scope (general / navigation / panes / run actions /
- * mailbox / health) directly from `DASHBOARD_KEYS`, so adding a key in one
- * place is reflected here automatically.
+ * keybindings grouped by scope (general / navigation / panes / schedules /
+ * plan / run actions / mailbox / health) directly from `DASHBOARD_KEYS`, so
+ * adding a key in one place is reflected here automatically.
  *
- * Uses the same `innerWidth = max(20, width - 4)` formula as `run-dashboard.ts`
- * so the overlay's border column aligns with the dashboard's stable-height
- * blank-padding rows (preserves the "stable overlay height" strength — the
- * blank rows injected by the dashboard's pad/trim must land in the same
- * column as this overlay's `│` borders).
+ * Grammar (docs/UI-DESIGN-SYSTEM.md §2.E):
  *
- * Template origin: `confirm-overlay.ts`.
+ *   ┏ HELP ▸ dashboard
+ *   ┣ GENERAL
+ *   ┃ Q/Esc   close dashboard    Enter/S/Tab/Space   open run status
+ *   ┗ ? toggle · Esc dismiss
+ *
+ * The legacy rounded box (`╭─╮│╰─╯├─┤`) is retired: the overlay is a canopy +
+ * `┣ SECTION` group headers + `┃` rows. Each group title is a RAIL section
+ * (replacing the old accent-only row), and the always-visible column key/token
+ * pair now goes through the SHARED `keyToken()` from `src/ui/rail.ts`.
+ *
+ * Why that mattered: the old file-local `keyToken` had no `case "\t"` branch, so
+ * `DASHBOARD_KEYS.select`'s raw tab byte was rendered verbatim into the table
+ * and knocked the row's alignment out by one column (audit §4). The shared
+ * tokenizer maps it to `Tab` (and `Esc`/`↑/↓`/`PgUp`/`Space` consistently).
+ *
+ * Width contract: `render(width)` — every line is built through `railLine`,
+ * which owns the `glyph + space` separator and never emits a line wider than
+ * the render width. Nothing is baked at build time.
  */
 
-import { pad, truncate } from "../../utils/visual.ts";
+import { pad, truncate, visibleWidth } from "../../utils/visual.ts";
 import { DASHBOARD_KEYS } from "../keybinding-map.ts";
-import { Box, Text } from "../layout-primitives.ts";
+import { canopyLine, formatHint, keyToken, RAIL, railLine, sectionLine } from "../rail.ts";
 import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
 
-/** Translate a raw key sequence into a readable token for the cheatsheet. */
-function keyToken(key: string): string {
-	switch (key) {
-		case "\u001b":
-			return "Esc";
-		case "\u001b[A":
-			return "↑";
-		case "\u001b[B":
-			return "↓";
-		case "\r":
-		case "\n":
-			return "Enter";
-		default:
-			return key;
-	}
-}
-
+/** Translate a raw key sequence into a readable token for the cheatsheet.
+ *  Delegates to the SHARED `keyToken` (rail.ts) so the cheatsheet, the footer
+ *  hints and the tool cards can never drift apart. */
 function keyList(keys: readonly string[]): string {
-	return [...keys].map(keyToken).join("/");
+	return [...new Set(keys.map((key) => keyToken(key)))].join("/");
 }
 
-interface HelpEntry {
+export interface HelpEntry {
 	readonly keys: string;
 	readonly label: string;
 }
 
-interface HelpGroup {
+export interface HelpGroup {
 	readonly title: string;
 	readonly entries: readonly HelpEntry[];
 }
@@ -62,7 +61,24 @@ const ROOT_LABELS: Record<string, string> = {
 	transcript: "transcript",
 	liveConversation: "live conv",
 	reload: "reload",
-	progressToggle: "progress",
+	// NOTE: `progressToggle` deliberately has no label here — the `p` binding
+	// had no visible effect (P1-5, phantom key) and is being removed from
+	// keybinding-map.ts. Entries derive from Object.entries(DASHBOARD_KEYS.root),
+	// so the row disappears entirely once that key is gone.
+};
+
+const SCHEDULES_LABELS: Record<string, string> = {
+	toggle: "toggle",
+	runNow: "run now",
+	details: "details",
+	delete: "delete",
+	refresh: "refresh",
+};
+
+const PLAN_LABELS: Record<string, string> = {
+	approve: "approve",
+	deny: "deny",
+	diff: "diff",
 };
 
 const MAILBOX_LABELS: Record<string, string> = {
@@ -88,6 +104,16 @@ function buildHelpGroups(): HelpGroup[] {
 		keys: keyList(keys),
 		label: ROOT_LABELS[name] ?? name,
 	}));
+	// P1-14: pane 8 (schedules) and pane 7 (plan) have pane-scoped action keys
+	// that were missing from this cheatsheet entirely.
+	const scheduleEntries: HelpEntry[] = Object.entries(DASHBOARD_KEYS.schedules).map(([name, keys]) => ({
+		keys: keyList(keys),
+		label: SCHEDULES_LABELS[name] ?? name,
+	}));
+	const planEntries: HelpEntry[] = Object.entries(DASHBOARD_KEYS.plan).map(([name, keys]) => ({
+		keys: keyList(keys),
+		label: PLAN_LABELS[name] ?? name,
+	}));
 	const mailboxEntries: HelpEntry[] = Object.entries(DASHBOARD_KEYS.mailbox)
 		.filter(([name]) => name !== "openDetail")
 		.map(([name, keys]) => ({
@@ -117,12 +143,18 @@ function buildHelpGroups(): HelpGroup[] {
 			title: "Navigation",
 			entries: [
 				{
-					keys: `${keyList(DASHBOARD_KEYS.navigation.up)}/${keyList(DASHBOARD_KEYS.navigation.down)}`,
+					// Union of the up/down aliases, deduped through the shared
+					// `keyToken` (`k`/`up` and `j`/`down` collapse to one `↑/↓`).
+					keys: [
+						...new Set([...DASHBOARD_KEYS.navigation.up, ...DASHBOARD_KEYS.navigation.down].map((key) => keyToken(key))),
+					].join("/"),
 					label: "move selection",
 				},
 			],
 		},
 		{ title: "Panes", entries: paneEntries },
+		{ title: "Schedules (pane 8)", entries: scheduleEntries },
+		{ title: "Plan (pane 7)", entries: planEntries },
 		{ title: "Run actions", entries: rootEntries },
 		{ title: "Mailbox (pane 3)", entries: mailboxEntries },
 		{
@@ -138,6 +170,21 @@ function buildHelpGroups(): HelpGroup[] {
 	];
 }
 
+/** Test seam (mirrors `__test__openPane` / `__resetInlinePanelForTest`): the
+ *  generated groups, so tests can assert keys/labels without parsing the
+ *  rendered surface. The overlay itself renders through `buildHelpGroups()`. */
+export function __test__buildHelpGroups(): HelpGroup[] {
+	return buildHelpGroups();
+}
+
+/** Width of the key column: the widest rendered token list, capped at 20 so a
+ *  future key set cannot push the labels off the row. Derived from the data —
+ *  never a hand-tuned constant that silently misaligns when a key is added. */
+function keyColumnWidth(groups: readonly HelpGroup[]): number {
+	const widths = groups.flatMap((group) => group.entries.map((entry) => visibleWidth(entry.keys)));
+	return Math.min(20, Math.max(1, ...widths));
+}
+
 export class HelpOverlay {
 	private readonly theme: CrewTheme;
 
@@ -150,28 +197,36 @@ export class HelpOverlay {
 	}
 
 	render(width: number): string[] {
-		// MUST mirror run-dashboard.ts's innerWidth so the dashboard's
-		// stable-height blank-padding rows align with this overlay's borders.
-		const innerWidth = Math.max(20, width - 4);
-		const fg = (color: Parameters<CrewTheme["fg"]>[0], text: string) => this.theme.fg(color, text);
-		const row = (text: string) => `│ ${pad(truncate(text, innerWidth - 1), innerWidth - 1)}│`;
-		const bar = "─".repeat(innerWidth);
-		const top = fg("border", `╭${bar}╮`);
-		const mid = fg("border", `├${bar}┤`);
-		const bot = fg("border", `╰${bar}╯`);
-		const keyCol = 9;
-		const lines: string[] = [top, row(`${fg("accent", "pi-crew dashboard")} ${fg("dim", "— key reference (press ? to close)")}`), mid];
-		for (const group of buildHelpGroups()) {
-			lines.push(row(fg("accent", group.title)));
+		if (width < 6) return [];
+		const theme = this.theme;
+		const budget = width - 2;
+		const groups = buildHelpGroups();
+		const keyCol = keyColumnWidth(groups);
+		const lines: string[] = [canopyLine({ word: "HELP", subject: "dashboard", theme, budget })];
+		for (const group of groups) {
+			lines.push(sectionLine({ name: group.title, theme, budget }));
 			for (let i = 0; i < group.entries.length; i += 2) {
 				const pair = group.entries.slice(i, i + 2);
-				const cell = (entry: HelpEntry) => `${this.theme.bold(pad(entry.keys, keyCol))}${fg("dim", truncate(entry.label, 16))}`;
-				lines.push(row(pair.map(cell).join("   ")));
+				const cell = (entry: HelpEntry) =>
+					`${theme.bold(pad(truncate(entry.keys, keyCol), keyCol))} ${theme.fg("dim", truncate(entry.label, 16))}`;
+				lines.push(railLine(RAIL.body, "border", truncate(pair.map(cell).join("   "), budget), theme, budget));
 			}
 		}
-		lines.push(bot);
-		const box = new Box(0, 0);
-		for (const line of lines) box.addChild(new Text(line));
-		return box.render(width);
+		lines.push(
+			railLine(
+				RAIL.close,
+				"border",
+				theme.fg(
+					"dim",
+					formatHint([
+						["?", "toggle"],
+						["escape", "dismiss"],
+					]),
+				),
+				theme,
+				budget,
+			),
+		);
+		return lines;
 	}
 }

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

@@ -1,6 +1,28 @@
+/**
+ * Mailbox compose overlay — RAIL design language (M4/E1, 2026-09-16).
+ *
+ *   ┏ COMPOSE ▸ mailbox
+ *   ┃ › from: operator                    │ Preview
+ *   ┃ › to: leader                        │ # Title
+ *   ┃ › body: hello                       │ • item
+ *   ┃ › taskId:                           │
+ *   ┃ › [ ] Send to outbox                │
+ *   ┗ P close preview · Tab cycle · Enter submit · Esc discard
+ *
+ * Frame: canopy + `┃` body + `┗` close cap. When the preview is on, the body is
+ * a genuine two-column layout and `│` is the inner COLUMN separator (§2.D); the
+ * canopy/hint rows are NOT part of the split any more, so the hint keeps its
+ * full width instead of being cropped to 60% of the overlay.
+ *
+ * Keys/behaviour are unchanged (same `overlay:*` dispatch, same free-text
+ * passthrough, same validation errors, same discard confirmation). Hints come
+ * from `formatHint` (discard LAST, keys through `keyToken`).
+ */
+
 import type { MailboxDirection } from "../../state/coordination/mailbox.ts";
-import { pad, truncate } from "../../utils/visual.ts";
-import { matchesKey } from "../key-utils.ts";
+import { pad, sanitizeLine, truncate } from "../../utils/visual.ts";
+import { overlayActionForKey } from "../keybinding-map.ts";
+import { CURSOR, canopyLine, formatHint, RAIL, railLine, railRaw } from "../rail.ts";
 import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
 import { ConfirmOverlay } from "./confirm-overlay.ts";
 import { renderComposePreview } from "./mailbox-compose-preview.ts";
@@ -49,36 +71,53 @@ export class MailboxComposeOverlay {
 
 	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 (width < 10) return [];
+		const theme = this.theme;
+		const budget = width - 2;
+		const hint = formatHint([
+			["P", this.preview ? "close preview" : "preview"],
+			["tab", "cycle"],
+			["enter", "submit"],
+			["escape", "discard"],
+		]);
+		const lines: string[] = [canopyLine({ word: "COMPOSE", subject: "mailbox", theme, budget })];
+		if (this.error) lines.push(railLine(RAIL.body, "error", truncate(this.error, budget), theme, budget));
+
+		const formBudget = this.preview ? Math.max(10, Math.floor(budget * 0.6)) : budget;
+		const previewBudget = Math.max(8, budget - formBudget - 3);
+		const formRows = [
+			this.fieldLine("from", formBudget),
+			this.fieldLine("to", formBudget),
+			this.fieldLine("body", formBudget),
+			this.fieldLine("taskId", formBudget),
+			`${this.activeField === 4 ? CURSOR : " "} [${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)}`,
-			);
+		if (!this.preview) {
+			for (const row of formRows) lines.push(railLine(RAIL.body, "border", truncate(row, budget), theme, budget));
+		} else {
+			const previewLines = renderComposePreview(this.fields.body, previewBudget, theme);
+			const max = Math.max(formRows.length, previewLines.length);
+			for (let index = 0; index < max; index += 1) {
+				const left = pad(truncate(formRows[index] ?? "", formBudget), formBudget);
+				const right = truncate(previewLines[index] ?? "", previewBudget);
+				// No separator when the preview column has no row at this height:
+				// a `│` with nothing to its right reads as a frame edge.
+				lines.push(railRaw(RAIL.body, "border", right ? `${left} ${theme.fg("dim", "│")} ${right}` : left, theme));
+			}
 		}
-		return split;
+		lines.push(railLine(RAIL.close, "border", theme.fg("dim", hint), theme, budget));
+		return lines;
 	}
 
 	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))}`;
+		// `sanitizeLine`: a pasted / pre-filled value can carry a raw newline or
+		// TAB — printing it verbatim would break the rail row into several lines
+		// (the field is a single-line cell; multi-line content belongs to the
+		// preview column).
+		const value = sanitizeLine(this.fields[field] ?? "");
+		return `${active ? CURSOR : " "} ${label}: ${truncate(value, Math.max(8, width - label.length - 5))}`;
 	}
 
 	private activeName(): FieldName {
@@ -151,32 +190,32 @@ export class MailboxComposeOverlay {
 			this.confirm.handleInput(data);
 			return;
 		}
-		if (matchesKey(data, "escape")) {
-			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 (matchesKey(data, "backspace")) {
-			this.backspace();
-			return;
-		}
-		if (matchesKey(data, "return")) {
-			if (this.activeName() === "body" || this.fields.body.trim()) this.submit();
-			else this.activeField = (this.activeField + 1) % FIELD_ORDER.length;
-			return;
+		// M2-1: keys come from the central `overlay:*` keyspace (remappable via
+		// `.crew/config.json` → keybindings["overlay:mailbox-compose:<action>"]).
+		switch (overlayActionForKey("mailbox-compose", data)) {
+			case "cancel":
+				this.cancel();
+				return;
+			case "preview":
+				this.preview = !this.preview;
+				return;
+			case "nextField":
+				this.activeField = (this.activeField + 1) % FIELD_ORDER.length;
+				return;
+			case "space":
+				if (this.activeName() === "direction") this.fields.direction = this.fields.direction === "inbox" ? "outbox" : "inbox";
+				else this.appendText(data);
+				return;
+			case "backspace":
+				this.backspace();
+				return;
+			case "submit":
+				if (this.activeName() === "body" || this.fields.body.trim()) this.submit();
+				else this.activeField = (this.activeField + 1) % FIELD_ORDER.length;
+				return;
 		}
+		// Free-text passthrough (unchanged): any other printable char is typed
+		// into the active field.
 		if (data.length === 1 && data >= " ") this.appendText(data);
 	}
 }

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

@@ -1,7 +1,32 @@
+/**
+ * Mailbox detail overlay — RAIL design language (M4/E1, 2026-09-16).
+ *
+ *   ┏ MAILBOX ▸ 1a2b3c4d
+ *   ┃ Inbox                 │ Outbox
+ *   ┃ ›✓ lead ▸ one: ping    │  !
+ *   ┃ ▼ 3 below
+ *   ┣ MESSAGE
+ *   ┃ lead ▸ one (one) · pending
+ *   ┗ Tab side · ↑/↓ select · Enter expand · … ···· Esc close
+ *
+ * The `│` in the body is a genuine inner COLUMN separator of the two-column
+ * mailbox table (§2.D) — it is not a frame edge. The frame is canopy + `┃`
+ * body + `┗` close cap; the legacy title/hint header rows, the `───` inline
+ * rule before the expanded message and the hand-typed hint string are gone.
+ *
+ * Hints: built by `formatHint` (close LAST) and laid out with `railLeaders` so
+ * the `Esc close` segment stays visible on a narrow overlay instead of being
+ * truncated away with the long action list.
+ *
+ * Every disk-sourced field is guarded (`?? "?"`): mailbox JSON is not
+ * schema-validated at read time.
+ */
+
 import { type MailboxMessage, readDeliveryState, readMailbox } from "../../state/coordination/mailbox.ts";
 import { loadRunManifestById } from "../../state/stores/state-store.ts";
 import { pad, truncate } from "../../utils/visual.ts";
-import { keyOf, matchesKey } from "../key-utils.ts";
+import { overlayActionForKey } from "../keybinding-map.ts";
+import { ACTIVE, CURSOR, canopyLine, formatHint, overflowHint, RAIL, railLeaders, railLine, sectionLine, shortId } from "../rail.ts";
 import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
 
 export type MailboxAction =
@@ -11,6 +36,9 @@ export type MailboxAction =
 	| { type: "ackAll" }
 	| { type: "close" };
 
+/** Rows shown per column before the overflow hint takes over. */
+const MAX_ROWS = 12;
+
 export class MailboxDetailOverlay {
 	private readonly runId: string;
 	private readonly cwd: string;
@@ -84,72 +112,124 @@ export class MailboxDetailOverlay {
 			this.refresh();
 			this.needsRefresh = false;
 		}
-		const inner = Math.max(40, width - 4);
-		const col = Math.max(18, Math.floor((inner - 3) / 2));
-		const lines = [
-			this.theme.bold(`Mailbox detail · ${this.runId}`),
-			"Tab side · ↑/↓ select · Enter expand · A ack · N nudge · C compose · X ack all · ESC close",
-			`${pad(this.theme.bold("Inbox"), col)} │ ${pad(this.theme.bold("Outbox"), col)}`,
-		];
-		const max = Math.max(this.inbox.length, this.outbox.length, 1);
-		for (let index = 0; index < Math.min(max, 12); index += 1) {
-			lines.push(`${this.row(this.inbox[index], "inbox", index, col)} │ ${this.row(this.outbox[index], "outbox", index, col)}`);
+		if (width < 10) return [];
+		const theme = this.theme;
+		const budget = width - 2;
+		const lines: string[] = [canopyLine({ word: "MAILBOX", subject: shortId(this.runId), theme, budget })];
+
+		// Two-column body (inbox ↔ outbox): `│` is the inner column separator.
+		const col = Math.max(10, Math.floor((budget - 3) / 2));
+		const rightCol = Math.max(1, budget - col - 3);
+		const twoCol = (left: string, right: string) =>
+			`${pad(truncate(left, col), col)} ${theme.fg("dim", "│")} ${truncate(right, rightCol)}`;
+		lines.push(railLine(RAIL.body, "border", twoCol(theme.bold("Inbox"), theme.bold("Outbox")), theme, budget));
+		const total = Math.max(this.inbox.length, this.outbox.length);
+		const shown = Math.min(total, MAX_ROWS);
+		for (let index = 0; index < shown; index += 1) {
+			lines.push(
+				railLine(
+					RAIL.body,
+					"border",
+					twoCol(this.row(this.inbox[index], "inbox", index, col), this.row(this.outbox[index], "outbox", index, col)),
+					theme,
+					budget,
+				),
+			);
+		}
+		if (total > shown) {
+			lines.push(railLine(RAIL.body, "border", overflowHint(0, total - shown, theme), theme, budget));
 		}
+
 		const selected = this.selectedMessage();
 		if (this.expanded && selected) {
-			lines.push("─".repeat(Math.min(inner, 72)));
-			lines.push(`${selected.from} → ${selected.to}${selected.taskId ? ` (${selected.taskId})` : ""} · ${selected.status}`);
-			lines.push(...selected.body.split(/\r?\n/).map((line) => truncate(line, inner)));
+			const from = selected.from ?? "?";
+			const to = selected.to ?? "?";
+			lines.push(sectionLine({ name: "Message", theme, budget }));
+			lines.push(
+				railLine(
+					RAIL.body,
+					"border",
+					truncate(
+						`${from} ${ACTIVE} ${to}${selected.taskId ? ` (${selected.taskId})` : ""} · ${selected.status ?? "?"}`,
+						budget,
+					),
+					theme,
+					budget,
+				),
+			);
+			for (const line of (selected.body ?? "").split(/\r?\n/)) {
+				lines.push(railLine(RAIL.body, "border", truncate(line, budget), theme, budget));
+			}
+		}
+
+		if (!this.inbox.length && !this.outbox.length) {
+			lines.push(railLine(RAIL.body, "border", theme.fg("dim", "Mailbox is empty."), theme, budget));
 		}
-		if (!this.inbox.length && !this.outbox.length) lines.push("Mailbox is empty.");
-		return lines.map((line) => truncate(line, inner));
+
+		const actions = formatHint([
+			["tab", "side"],
+			[["up", "down"], "select"],
+			["enter", "expand"],
+			["A", "ack"],
+			["N", "nudge"],
+			["C", "compose"],
+			["X", "ack all"],
+		]);
+		const close = formatHint([["escape", "close"]]);
+		lines.push(
+			railLine(RAIL.close, "border", railLeaders(theme.fg("dim", actions), theme.fg("dim", close), budget, theme), theme, budget),
+		);
+		return lines;
 	}
 
 	private row(message: MailboxMessage | undefined, side: "inbox" | "outbox", index: number, width: number): string {
-		if (!message) return pad("", width);
-		const marker = this.side === side && this.selected === index ? "›" : " ";
-		const status = message.status === "acknowledged" ? "✓" : "!";
-		return pad(truncate(`${marker}${status} ${message.from}->${message.to}: ${message.body.replace(/\s+/g, " ")}`, width), width);
+		if (!message) return "";
+		const marker = this.side === side && this.selected === index ? CURSOR : " ";
+		const acknowledged = message.status === "acknowledged";
+		const status = this.theme.fg(acknowledged ? "success" : "warning", acknowledged ? "✓" : "!");
+		const from = message.from ?? "?";
+		const to = message.to ?? "?";
+		const body = (message.body ?? "").replace(/\s+/g, " ");
+		return truncate(`${marker}${status} ${from} ${ACTIVE} ${to}: ${body}`, width);
 	}
 
 	handleInput(data: string): void {
-		if (matchesKey(data, "escape") || data === "q") {
-			this.done({ type: "close" });
-			return;
-		}
-		if (data === "\t") {
-			this.side = this.side === "inbox" ? "outbox" : "inbox";
-			this.selected = Math.min(this.selected, Math.max(0, this.current().length - 1));
-			return;
-		}
-		if (data === "k" || keyOf(data) === "up") {
-			this.selected = Math.max(0, this.selected - 1);
-			return;
-		}
-		if (data === "j" || keyOf(data) === "down") {
-			this.selected = Math.min(Math.max(0, this.current().length - 1), this.selected + 1);
-			return;
-		}
-		if (matchesKey(data, "return")) {
-			this.expanded = !this.expanded;
-			return;
-		}
-		if (data === "A") {
-			const message = this.selectedMessage();
-			if (message) this.done({ type: "ack", messageId: message.id });
-			return;
-		}
-		if (data === "N") {
-			this.done({
-				type: "nudge",
-				agentId: this.selectedMessage()?.taskId,
-			});
-			return;
-		}
-		if (data === "C") {
-			this.done({ type: "compose" });
-			return;
+		// M2-1: keys come from the central `overlay:*` keyspace (remappable via
+		// `.crew/config.json` → keybindings["overlay:mailbox-detail:<action>"]).
+		switch (overlayActionForKey("mailbox-detail", data)) {
+			case "close":
+				this.done({ type: "close" });
+				return;
+			case "toggleSide":
+				this.side = this.side === "inbox" ? "outbox" : "inbox";
+				this.selected = Math.min(this.selected, Math.max(0, this.current().length - 1));
+				return;
+			case "up":
+				this.selected = Math.max(0, this.selected - 1);
+				return;
+			case "down":
+				this.selected = Math.min(Math.max(0, this.current().length - 1), this.selected + 1);
+				return;
+			case "toggleDetail":
+				this.expanded = !this.expanded;
+				return;
+			case "ack": {
+				const message = this.selectedMessage();
+				if (message) this.done({ type: "ack", messageId: message.id });
+				return;
+			}
+			case "nudge":
+				this.done({
+					type: "nudge",
+					agentId: this.selectedMessage()?.taskId,
+				});
+				return;
+			case "compose":
+				this.done({ type: "compose" });
+				return;
+			case "ackAll":
+				this.done({ type: "ackAll" });
+				return;
 		}
-		if (data === "X") this.done({ type: "ackAll" });
 	}
 }

package/src/ui/powerbar-publisher.ts

@@ -271,7 +271,6 @@ class PowerbarPublisher {
 		workspaceId?: string,
 	): void {
 		if (config?.powerbar === false) return;
-		const useStatusFallback = !hasPowerbarConsumer(events);
 		// P3 (#10): prefer an explicit workspaceId arg; otherwise self-derive
 		// from the ctx every caller already passes (ExtensionContext exposes
 		// sessionManager). Back-compat: when neither is present, no filtering.