pi-crew 0.9.10 → 0.9.12

package/src/state/artifact-store.ts

@@ -4,7 +4,7 @@ import { createHash } from "node:crypto";
 import type { ArtifactDescriptor } from "./types.ts";
 import { atomicWriteFile } from "./atomic-write.ts";
 import { resolveRealContainedPath } from "../utils/safe-paths.ts";
-import { redactSecretString } from "../utils/redaction.ts";
+import { redactSecretString, redactSecrets } from "../utils/redaction.ts";
 
 function hashContent(content: string): string {
 	return createHash("sha256").update(content).digest("hex");
@@ -127,7 +127,27 @@ export function writeArtifact(artifactsRoot: string, options: ArtifactWriteOptio
 	const filePath = resolveInside(artifactsRoot, options.relativePath);
 	fs.mkdirSync(path.dirname(filePath), { recursive: true });
 	resolveRealContainedPath(artifactsRoot, path.dirname(filePath));
-	const content = redactSecretString(options.content);
+	let content = options.content;
+	// Structural JSON redaction first — catches quoted-JSON secrets
+	// ("api_key":"sk-...") and nested keys that flat redactSecretString misses.
+	// The flat scan below still catches free-text patterns (Bearer/JWT/Auth
+	// headers) that may live inside JSON string values. See security review M2.
+	//
+	// Formatting preservation: re-stringify with the SAME indentation as the
+	// input so pretty-printed artifacts (e.g. group-join metadata expected by
+	// test/integration/phase4-runtime.test.ts to contain `"partial": false`)
+	// keep their whitespace. Detect pretty-vs-compact from the raw input.
+	const trimmed = content.trim();
+	if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+		try {
+			const parsed: unknown = JSON.parse(content);
+			const isPretty = /\n|"\s*:\s/.test(content);
+			content = JSON.stringify(redactSecrets(parsed), null, isPretty ? 2 : undefined);
+		} catch {
+			// not valid JSON — fall through to flat redaction only
+		}
+	}
+	content = redactSecretString(content);
 	atomicWriteFile(filePath, content);
 	// Compute hash on written bytes for integrity verification.
 	// Read back the actual file content to handle atomicWrite fallback path

package/src/ui/crew-footer.ts

@@ -90,9 +90,9 @@ export class CrewFooter {
 		].join(" • ");
 		const badges = this.data.badges?.length ? this.data.badges.map((badge) => `[${badge}]`).join(" ") : "";
 		this.cacheLines = [
-			this.theme.fg("dim", pad(truncate(firstParts.join(" • "), lineWidth, "..."), lineWidth)),
-			this.theme.fg("dim", pad(truncate(usageLine, lineWidth, "..."), lineWidth)),
-			this.theme.fg("dim", pad(truncate(badges, lineWidth, "..."), lineWidth)),
+			this.theme.fg("dim", pad(truncate(firstParts.join(" • "), lineWidth), lineWidth)),
+			this.theme.fg("dim", pad(truncate(usageLine, lineWidth), lineWidth)),
+			this.theme.fg("dim", pad(truncate(badges, lineWidth), lineWidth)),
 		];
 		this.cacheKey = key;
 		this.cacheWidth = width;

package/src/ui/crew-select-list.ts

@@ -86,7 +86,7 @@ export class CrewSelectList<T = string> {
 			const suffix = item.description ? this.theme.fg("dim", ` — ${item.description}`) : "";
 			const raw = `${prefix}${item.label}${suffix}`;
 			const line = index === this.selectedIndex ? this.theme.inverse?.(raw) ?? raw : raw;
-			lines.push(pad(truncate(line, width, "..."), Math.max(1, width)));
+			lines.push(pad(truncate(line, width), Math.max(1, width)));
 		}
 		if (hasBottom) lines.push(this.theme.fg("muted", `↓ ${this.items.length - (this.scrollOffset + slots)} more`));
 		return lines.slice(0, maxHeight);

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

@@ -6,6 +6,28 @@ import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
 import { formatCost } from "../../state/usage.ts";
 import { listLiveAgents, listLiveAgentsByWorkspace, type LiveAgentHandle } from "../../runtime/live-agent-manager.ts";
 import { computeLiveDurationMs } from "../live-duration.ts";
+import { visibleWidth } from "../../utils/visual.ts";
+
+/**
+ * Fixed visible widths for the per-agent numeric metrics (finding V-1).
+ * Right-aligning each field to a constant width stops the right edge of the
+ * stats block from jittering every tick as values change width
+ * (e.g. `9.9s`→`10.0s`, `950`→`1.0k`, `$0.9`→`$1.0`).
+ */
+const TOKENS_METRIC_WIDTH = 5; // `1.2k`, `12.3k`, `123`
+const COST_METRIC_WIDTH = 7; // `$0.0500`, `$1.50`
+const DURATION_METRIC_WIDTH = 6; // `3.0s`, `59.9s`, `120.0s`
+
+/**
+ * Width-aware right-align (padStart) for a numeric metric so its column stays
+ * stable across ticks. Uses `visibleWidth` so wide/CJK glyphs never misalign
+ * the padding. Values wider than `width` are returned verbatim (no truncation)
+ * so outliers overflow gracefully instead of crashing the render.
+ */
+function alignMetric(value: string, width: number): string {
+	const gap = width - visibleWidth(value);
+	return gap > 0 ? " ".repeat(gap) + value : value;
+}
 
 /**
  * Returns true if this agent did real work (LLM call, tool use, or non-trivial duration).
@@ -89,12 +111,12 @@ export function renderAgentsPane(snapshot: RunUiSnapshot | undefined, options: R
 		const tokenTotal = (agent.usage?.input ?? 0) + (agent.usage?.output ?? 0) + (agent.usage?.cacheRead ?? 0) + (agent.usage?.cacheWrite ?? 0);
 		if (tokenTotal > 0) {
 			const tok = tokenTotal >= 1000 ? `${(tokenTotal / 1000).toFixed(1)}k` : `${tokenTotal}`;
-			stats.push(tok);
+			stats.push(alignMetric(tok, TOKENS_METRIC_WIDTH));
 		}
 		// Per-agent cost (Round 17 BS-1): the data is already on task.usage.cost;
 		// surface it live so the user sees $ burn per agent during a run.
 		if (agent.usage?.cost && agent.usage.cost > 0) {
-			stats.push(formatCost(agent.usage.cost));
+			stats.push(alignMetric(formatCost(agent.usage.cost), COST_METRIC_WIDTH));
 		}
 		if (liveHandle) {
 			// Round 23 (BUG 1): the duration math here was naive —
@@ -104,13 +126,13 @@ export function renderAgentsPane(snapshot: RunUiSnapshot | undefined, options: R
 			// fired for EVERY running live agent in the dashboard. Use the shared,
 			// validated computeLiveDurationMs (mirrors widget-formatters.ts).
 			const ms = computeLiveDurationMs(liveHandle.activity);
-			stats.push(`${(ms / 1000).toFixed(1)}s`);
+			stats.push(alignMetric(`${(ms / 1000).toFixed(1)}s`, DURATION_METRIC_WIDTH));
 			if (options.showModel !== false && liveHandle.modelName && liveHandle.modelName !== "default") {
 				stats.push(liveHandle.modelName);
 			}
 		} else if (agent.startedAt) {
 			const ms = Date.now() - new Date(agent.startedAt).getTime();
-			if (Number.isFinite(ms)) stats.push(`${(ms / 1000).toFixed(1)}s`);
+			if (Number.isFinite(ms)) stats.push(alignMetric(`${(ms / 1000).toFixed(1)}s`, DURATION_METRIC_WIDTH));
 		}
 
 		const statsStr = stats.length ? ` · ${stats.join(" ")}` : "";

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

@@ -40,4 +40,27 @@ export function renderCancellationPane(manifest: TeamRunManifest, tasks: TeamTas
 	}
 
 	return lines;
+}
+
+/**
+ * D-1 / L-2 — a one-line terminal-run reason for the dashboard detail row.
+ *
+ * Surfaces *why* a failed/cancelled/stopped run ended without forcing the
+ * user to switch panes. This also gives this module a real consumer (it was
+ * previously zero-importer dead code per the UI/UX review), wiring it in as
+ * the natural home for cancellation/failure reason display.
+ *
+ * Resolution order: structured `run.cancelled` event reason → first failed
+ * task's error → first policy-decision message.
+ */
+export function summarizeTerminalReason(
+	manifest: TeamRunManifest,
+	tasks: TeamTaskState[],
+	cancellationReason?: string,
+): string | undefined {
+	if (cancellationReason) return cancellationReason;
+	const failed = tasks.find((task) => task.status === "failed" && task.error);
+	if (failed?.error) return failed.error;
+	if (manifest.policyDecisions?.length) return manifest.policyDecisions[0]?.message;
+	return undefined;
 }

package/src/ui/keybinding-map.ts

@@ -26,6 +26,7 @@
 export const DASHBOARD_KEYS = {
 	close: ["q", "\u001b"],
 	select: ["\r", "\n", "s"],
+	help: ["?"],
 	root: {
 		summary: ["u"],
 		artifacts: ["a"],
@@ -67,6 +68,7 @@ export interface KeyBinding {
 
 export type DashboardKeyAction =
 	| "close"
+	| "help"
 	| "select"
 	| "summary"
 	| "artifacts"
@@ -112,6 +114,7 @@ export type DashboardKeyAction =
  */
 const BINDINGS: readonly KeyBinding[] = [
 	{ keys: DASHBOARD_KEYS.close, action: "close" },
+	{ keys: DASHBOARD_KEYS.help, action: "help" },
 	{ keys: DASHBOARD_KEYS.mailbox.openDetail, action: "mailbox-detail", pane: "mailbox" },
 	{ keys: DASHBOARD_KEYS.health.recovery, action: "health-recovery", pane: "health" },
 	{ keys: DASHBOARD_KEYS.health.killStale, action: "health-kill-stale", pane: "health" },
@@ -145,13 +148,14 @@ const BINDINGS: readonly KeyBinding[] = [
  * overlays. Derived from `DASHBOARD_KEYS` (the full key set) rather than from
  * `BINDINGS` (the dispatched subset) so overlay-handled keys stay reserved.
  *
- * @internal Currently unused outside this module but retained to document
- * intent and support future callers that need to know which keys the
- * dashboard ecosystem owns.
+ * @internal Consumed by `test/unit/keybinding-map.parity.test.ts` (asserts
+ * reserved-key membership) and the L2 dispatch smoke script. It is the
+ * canonical "keys the dashboard ecosystem owns" set — NOT dead code.
  */
 const KEY_RESERVED = new Set<string>([
 	...DASHBOARD_KEYS.close,
 	...DASHBOARD_KEYS.select,
+	...DASHBOARD_KEYS.help,
 	...Object.values(DASHBOARD_KEYS.root).flat(),
 	...Object.values(DASHBOARD_KEYS.pane).flat(),
 	...Object.values(DASHBOARD_KEYS.navigation).flat(),

package/src/ui/live-conversation-overlay.ts

@@ -8,6 +8,7 @@ import type { LiveAgentHandle } from "../runtime/live-agent-manager.ts";
 import { iconForStatus } from "./status-colors.ts";
 import { spinnerFrame } from "./spinner.ts";
 import type { CrewTheme } from "./theme-adapter.ts";
+import { pad, truncate } from "../utils/visual.ts";
 
 const CHROME_LINES = 6;
 const MIN_VIEWPORT = 3;
@@ -119,9 +120,8 @@ export class LiveConversationOverlay {
 		if (w < 6) return [];
 		const th = this.theme;
 		const innerW = w - 4;
-		const pad = (s: string, len: number) => s + " ".repeat(Math.max(0, len - s.length));
 		const row = (content: string) =>
-			th.fg("border", "│") + " " + pad(content.slice(0, innerW), innerW) + " " + th.fg("border", "│");
+			th.fg("border", "│") + " " + pad(truncate(content, innerW), innerW) + " " + th.fg("border", "│");
 		const hrTop = th.fg("border", `╭${"─".repeat(w - 2)}╮`);
 		const hrBot = th.fg("border", `╰${"─".repeat(w - 2)}╯`);
 		const hrMid = row(th.fg("dim", "─".repeat(innerW)));

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

@@ -8,7 +8,7 @@ import { aggregateUsage, formatUsage } from "../state/usage.ts";
 import type { TeamTaskState } from "../state/types.ts";
 import { readJsonFileCoalesced } from "../utils/file-coalescer.ts";
 import { pad, truncate } from "../utils/visual.ts";
-import { iconForStatus } from "./status-colors.ts";
+import { colorizeStatusGlyphs, 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";
@@ -93,13 +93,11 @@ export class LiveRunSidebar {
 	}
 
 	private colorLine(line: string): string {
-		const iconColor = (icon: string): Parameters<CrewTheme["fg"]>[0] => {
-			if (icon === "✓") return "success";
-			if (icon === "✗") return "error";
-			if (icon === "■" || icon === "⏸") return "warning";
-			return "accent";
-		};
-		return line.replace(/[✓✗■⏸◦·▶]/g, (icon) => this.theme.fg(iconColor(icon), icon));
+		// F-1 / V-3: delegate to the shared glyph colorizer so ⏳ (waiting),
+		// ⚠ (needs_attention) and the braille spinner frames are colored
+		// consistently with the rest of the UI. The previous local map/regex
+		// omitted all three, leaving the most attention-demanding states uncolored.
+		return colorizeStatusGlyphs(line, this.theme);
 	}
 
 	invalidate(): void {
@@ -150,10 +148,17 @@ export class LiveRunSidebar {
 		const waiting = tasks.filter((task) => task.status === "queued");
 		const signature = this.buildSignature(run.updatedAt, tasks, agents, waiting.length, snapshot);
 		if (signature !== this.cachedSignature || w !== this.cachedWidth) {
+			// L-2: surface the cancellation/failure reason for terminal runs so the
+			// user sees *why* a run ended without having to switch panes. The reason
+			// is already computed on the consumed snapshot (cancellationReason).
+			const TERMINAL_WITH_REASON = ["failed", "cancelled", "stopped"];
+			const reasonSuffix = TERMINAL_WITH_REASON.includes(run.status) && snapshot?.cancellationReason
+				? ` · ${truncate(snapshot.cancellationReason, 40)}`
+				: "";
 			const lines: string[] = [
 				border("╭", "─", "╮", w),
 				line(`${this.theme.fg("accent", "▐")} ${this.theme.bold("pi-crew live sidebar")}`, w),
-				line(`${run.runId.slice(-12)} · ${run.status} · right default`, w),
+				line(`${run.runId.slice(-12)} · ${run.status}${reasonSuffix} · right default`, w),
 				line(`${run.team}/${run.workflow ?? "none"} · ${shortUsage(tasks)}`, w),
 				border("├", "─", "┤", w),
 				line(`Active agents (${active.length})`, w),
@@ -180,7 +185,9 @@ export class LiveRunSidebar {
 			if (completed.length === 0) lines.push(line("- none", w));
 			lines.push(border("├", "─", "┤", w));
 			for (const entry of formatTaskGraphLines(tasks).slice(0, 6)) lines.push(line(entry, w));
-			lines.push(line("q close · /team-dashboard details", w), border("╰", "─", "╯", w));
+			lines.push(line("q close · /team-dashboard details", w));
+			// F-6: compute the auto-close countdown BEFORE pushing the bottom border
+			// so the countdown renders inside the bordered box rather than below it.
 			// Auto-close logic: if run is terminal and no active agents, close after delay
 			const isTerminal = ["completed", "failed", "cancelled", "blocked"].includes(run.status);
 			const hasActiveAgents = agents.some((a) => a.status === "running");
@@ -199,6 +206,7 @@ export class LiveRunSidebar {
 				clearTimeout(this.autoCloseTimeout);
 				this.autoCloseTimeout = undefined;
 			}
+			lines.push(border("╰", "─", "╯", w));
 			this.cachedLines = renderLines(lines.map((entry) => this.colorLine(entry)), w);
 			this.cachedSignature = signature;
 			this.cachedWidth = w;

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

@@ -0,0 +1,166 @@
+/**
+ * K-1 — dashboard keybinding cheatsheet overlay.
+ *
+ * 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.
+ *
+ * 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).
+ *
+ * Template origin: `confirm-overlay.ts`.
+ */
+import { Box, Text } from "../layout-primitives.ts";
+import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
+import { pad, truncate } from "../../utils/visual.ts";
+import { DASHBOARD_KEYS } from "../keybinding-map.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;
+	}
+}
+
+function keyList(keys: readonly string[]): string {
+	return [...keys].map(keyToken).join("/");
+}
+
+interface HelpEntry {
+	readonly keys: string;
+	readonly label: string;
+}
+
+interface HelpGroup {
+	readonly title: string;
+	readonly entries: readonly HelpEntry[];
+}
+
+const ROOT_LABELS: Record<string, string> = {
+	summary: "summary",
+	artifacts: "artifacts",
+	api: "api",
+	agents: "agents",
+	mailbox: "mailbox",
+	events: "events",
+	output: "output",
+	transcript: "transcript",
+	liveConversation: "live conv",
+	reload: "reload",
+	progressToggle: "progress",
+};
+
+const MAILBOX_LABELS: Record<string, string> = {
+	ack: "ack",
+	nudge: "nudge",
+	compose: "compose",
+	preview: "preview",
+	ackAll: "ack all",
+};
+
+const HEALTH_LABELS: Record<string, string> = {
+	recovery: "recover",
+	killStale: "kill stale",
+	diagnosticExport: "diag export",
+};
+
+function buildHelpGroups(): HelpGroup[] {
+	const paneEntries: HelpEntry[] = Object.entries(DASHBOARD_KEYS.pane).map(([name, keys]) => ({
+		keys: keyList(keys),
+		label: name,
+	}));
+	const rootEntries: HelpEntry[] = Object.entries(DASHBOARD_KEYS.root).map(([name, keys]) => ({
+		keys: keyList(keys),
+		label: ROOT_LABELS[name] ?? name,
+	}));
+	const mailboxEntries: HelpEntry[] = Object.entries(DASHBOARD_KEYS.mailbox)
+		.filter(([name]) => name !== "openDetail")
+		.map(([name, keys]) => ({ keys: keyList(keys), label: MAILBOX_LABELS[name] ?? name }));
+	const healthEntries: HelpEntry[] = Object.entries(DASHBOARD_KEYS.health).map(([name, keys]) => ({
+		keys: keyList(keys),
+		label: HEALTH_LABELS[name] ?? name,
+	}));
+	return [
+		{
+			title: "General",
+			entries: [
+				{ keys: keyList(DASHBOARD_KEYS.close), label: "close dashboard" },
+				{ keys: keyList(DASHBOARD_KEYS.select), label: "open run status" },
+				{ keys: "?", label: "toggle this help" },
+			],
+		},
+		{
+			title: "Navigation",
+			entries: [
+				{ keys: `${keyList(DASHBOARD_KEYS.navigation.up)}/${keyList(DASHBOARD_KEYS.navigation.down)}`, label: "move selection" },
+			],
+		},
+		{ title: "Panes", entries: paneEntries },
+		{ title: "Run actions", entries: rootEntries },
+		{ title: "Mailbox (pane 3)", entries: mailboxEntries },
+		{
+			title: "Health & notifications",
+			entries: [
+				...healthEntries,
+				{ keys: keyList(DASHBOARD_KEYS.notification.dismissAll), label: "dismiss notifs" },
+			],
+		},
+	];
+}
+
+export class HelpOverlay {
+	private readonly theme: CrewTheme;
+
+	constructor(theme: unknown = {}) {
+		this.theme = asCrewTheme(theme);
+	}
+
+	invalidate(): void {
+		// Stateless overlay.
+	}
+
+	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)));
+			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("   ")));
+			}
+		}
+		lines.push(bot);
+		const box = new Box(0, 0);
+		for (const line of lines) box.addChild(new Text(line));
+		return box.render(width);
+	}
+}