pi-crew 0.11.0 → 0.11.2

package/src/ui/run-dashboard.ts

@@ -10,14 +10,14 @@ import { readCrewAgents } from "../runtime/crew-agent-records.ts";
 import type { CrewAgentRecord } from "../runtime/crew-agent-runtime.ts";
 import { getLiveAgentContextPercent } from "../runtime/live-session/live-agent-manager.ts";
 import { isPlanApprovalPending } from "../runtime/plan-approval.ts";
-import { isDisplayActiveRun, isLikelyOrphanedActiveRun } from "../runtime/process-status.ts";
+import { isActiveRunStatus, isDisplayActiveRun, isLikelyOrphanedActiveRun } from "../runtime/process-status.ts";
 import type { ScheduledJob } from "../runtime/scheduling/scheduler.ts";
 import type { TeamRunManifest, TeamTaskState, UsageState } from "../state/types.ts";
 import { aggregateUsage } from "../state/usage.ts";
 import { readJsonFileCoalesced } from "../utils/file-coalescer.ts";
 import { logInternalError } from "../utils/internal-error.ts";
 import { resolveRealContainedPath } from "../utils/safe-paths.ts";
-import { pad, sanitizeLine, truncate, visibleWidth } from "../utils/visual.ts";
+import { sanitizeLine, truncate, visibleWidth } from "../utils/visual.ts";
 import type { InteractiveComponent } from "./component.ts";
 import { renderAgentsPane } from "./dashboard-panes/agents-pane.ts";
 import { summarizeTerminalReason } from "./dashboard-panes/cancellation-pane.ts";
@@ -28,9 +28,10 @@ import { renderPlanPane } from "./dashboard-panes/plan-pane.ts";
 import { renderProgressPane } from "./dashboard-panes/progress-pane.ts";
 import { renderScheduleDetails, renderSchedulesPane } from "./dashboard-panes/schedules-pane.ts";
 import { renderTranscriptPane } from "./dashboard-panes/transcript-pane.ts";
-import { DynamicCrewBorder } from "./dynamic-border.ts";
+import { formatCount, teamWorkflowLabel } from "./format-helpers.ts";
 import { type DashboardKeyAction, dashboardActionForKey } from "./keybinding-map.ts";
 import { HelpOverlay } from "./overlays/help-overlay.ts";
+import { ACTIVE, CURSOR, canopyLine, formatHint, gaugeBar, overflowHint, RAIL, railLine, sectionLine } from "./rail.ts";
 import type { OverlaySchedulerHandle } from "./shared-overlay-scheduler.ts";
 import { registerOverlayScheduler } from "./shared-overlay-scheduler.ts";
 import type { RunSnapshotCache, RunUiSnapshot } from "./snapshot-types.ts";
@@ -56,7 +57,6 @@ function safeRenderPane(name: string, fn: () => string[]): string[] {
 interface DashboardComponent extends InteractiveComponent {}
 
 export interface RunDashboardOptions {
-	placement?: "center" | "right";
 	showModel?: boolean;
 	showTokens?: boolean;
 	showTools?: boolean;
@@ -94,6 +94,27 @@ export interface RunDashboardOptions {
  */
 let lastActivePane: "agents" | "progress" | "mailbox" | "output" | "health" | "metrics" | "plan" | "schedules" = "agents";
 
+/**
+ * US-020 AC-2: the selected run SURVIVES dashboard close/reopen (the shared.ts
+ * action loop re-creates RunDashboard after every done() selection — enter on
+ * a run opens its detail, escape returns, and the cursor is where it was).
+ * Persisted per-process like lastActivePane; restored by runId on construct.
+ */
+let lastSelectedRunId: string | undefined;
+
+/** @internal — test isolation hook. US-020 AC-2 persists the cursor in
+ * module-level state (lastSelectedRunId) so it survives close/reopen cycles,
+ * but that state ALSO leaks across RunDashboard instances within one process:
+ * an E2E brute-force that constructs a fresh dashboard per iteration inherits
+ * the previous iteration's cursor, and with wrap-navigation the driven
+ * selection lands somewhere else entirely (measured: count=9 offset=8 restored
+ * run-007 → 8 'j' wraps to run-006, not run-008). Tests that need a clean
+ * cursor call this before constructing. */
+export function __test__resetDashboardState(): void {
+	lastSelectedRunId = undefined;
+	lastActivePane = "agents";
+}
+
 export type RunDashboardAction =
 	| "status"
 	| "summary"
@@ -118,7 +139,8 @@ export type RunDashboardAction =
 	| "schedule-disable"
 	| "schedule-run-now"
 	| "schedule-remove"
-	| "notifications-dismiss";
+	| "notifications-dismiss"
+	| "cancel";
 export interface RunDashboardSelection {
 	runId: string;
 	action: RunDashboardAction;
@@ -187,12 +209,6 @@ const SIGNATURE_CACHE_TTL_MS = 100;
  */
 const STALE_SNAPSHOT_MS = 15_000;
 
-/** Left-pad `value` to a fixed VISIBLE width (ANSI-aware). Used by V-1. */
-function padVis(value: string, width: number): string {
-	const current = visibleWidth(value);
-	return current >= width ? value : `${" ".repeat(width - current)}${value}`;
-}
-
 /**
  * L-1 — compute the run-list window (visible slots + which scroll indicators
  * render) for a given offset. Shared by `ensureRunListWindow()` and the
@@ -323,7 +339,7 @@ function agentPreviewLine(agent: CrewAgentRecord, task: TeamTaskState | undefine
 				(agent.progress?.tokens !== undefined ? `tok=${agent.progress.tokens}` : undefined))
 			: undefined,
 		options.showTools !== false && agent.progress?.currentTool ? `tool=${agent.progress.currentTool}` : undefined,
-		options.showTools !== false && agent.toolUses !== undefined ? `${agent.toolUses} tools` : undefined,
+		options.showTools !== false && agent.toolUses !== undefined ? formatCount(agent.toolUses, "tool") : undefined,
 		agent.progress?.turns !== undefined ? `${agent.progress.turns} turns` : undefined,
 		agent.progress?.failedTool ? `failedTool=${agent.progress.failedTool}` : undefined,
 		agent.startedAt ? `age=${formatAge(agent.completedAt ?? agent.startedAt)}` : undefined,
@@ -332,8 +348,11 @@ function agentPreviewLine(agent: CrewAgentRecord, task: TeamTaskState | undefine
 	const icon = iconForStatus(agent.status, {
 		runningGlyph: spinnerFrame(agent.taskId),
 	});
+	// GUARD (M4, §4): agents.json records are NOT schema-validated at read time,
+	// so every interpolated field needs a fallback — `${agent.role}${ACTIVE}${agent.agent}`
+	// printed `undefined->undefined` for a partially-written record.
 	return sanitizeLine(
-		`Agent: ${icon} ${agent.taskId} ${agent.role}->${agent.agent}${stats.length ? ` · ${stats.join(" · ")}` : ""}${recent ? ` ⎿ ${recent}` : ""}`,
+		`Agent: ${icon} ${agent.taskId ?? "?"} ${agent.role ?? "?"}${ACTIVE}${agent.agent ?? "?"}${stats.length ? ` · ${stats.join(" · ")}` : ""}${recent ? ` ⎿ ${recent}` : ""}`,
 	);
 }
 
@@ -409,7 +428,7 @@ function runLabel(
 				? `queued ${queued.taskId}`
 				: `agents ${agents.length}`;
 	const status: RunStatus = stale ? "stale" : (run.status as RunStatus);
-	const marker = selected ? "›" : " ";
+	const marker = selected ? CURSOR : " ";
 	const icon = iconForStatus(status, {
 		runningGlyph: spinnerFrame(run.runId),
 	});
@@ -420,20 +439,25 @@ function runLabel(
 	// enables the goal-aware truncation; legacy 3-arg callers (dev patch
 	// scripts) get the untruncated full label.
 	const head = `${marker} ${icon} ${run.runId.slice(-8)} ${status}`;
-	const meta = `${run.team}/${run.workflow ?? "none"} · ${step}`;
+	const meta = `${teamWorkflowLabel(run.team, run.workflow)} · ${step}`;
 	const goal = sanitizeLine(run.goal ?? "");
 	if (maxW === undefined) return sanitizeLine(`${head} · ${meta} · ${goal}`);
 	const sepW = 3; // " · "
 	if (visibleWidth(head) + sepW + visibleWidth(meta) + sepW + visibleWidth(goal) <= maxW) {
 		return sanitizeLine(`${head} · ${meta} · ${goal}`);
 	}
-	// Not enough room: keep head + goal; clip the goal only if head+goal alone
-	// cannot fit, then shrink the prefix (meta clips first) to match.
-	const goalFits = visibleWidth(head) + sepW + visibleWidth(goal) <= maxW;
-	const goalRender = goalFits ? goal : truncate(goal, Math.max(8, maxW - visibleWidth(head) - sepW));
-	const prefixBudget = Math.max(0, maxW - visibleWidth(goalRender) - sepW);
-	const prefixRender = truncate(`${head} · ${meta}`, prefixBudget);
-	return sanitizeLine(`${prefixRender} · ${goalRender}`);
+	// Not enough room. The STATUS token is the one that must survive — the run
+	// list is how a failed/cancelled run gets spotted — so meta clips FIRST,
+	// then the goal; the head itself is only clipped if it cannot fit alone.
+	// (Live bug 2026-09-16: the old fallback truncated `head · meta` as ONE
+	// string, so a 118-column render painted `› ✓ 122ab0dd complete…` — the
+	// status cut in half while the meta it should have sacrificed stayed put.)
+	const headW = visibleWidth(head);
+	if (headW + sepW + 8 <= maxW) {
+		const goalBudget = Math.max(8, maxW - headW - sepW);
+		return sanitizeLine(`${head} · ${truncate(goal, goalBudget)}`);
+	}
+	return sanitizeLine(truncate(head, maxW));
 }
 
 interface ResolvedRun {
@@ -482,17 +506,9 @@ function selectedRunFromGrouped(
 	return groupedRuns(runs, snapshotCache, resolve).filter((row) => row.run)[selected]?.run;
 }
 
-function countByStatus(runs: TeamRunManifest[], snapshotCache?: RunSnapshotCache): string {
-	const resolved = resolveRuns(runs, snapshotCache);
-	const counts = new Map<RunStatus, number>();
-	for (const r of resolved.values()) counts.set(r.status, (counts.get(r.status) ?? 0) + 1);
-	return [...counts.entries()].map(([status, count]) => `${status}=${count}`).join(", ") || "none";
-}
-
 export class RunDashboard implements DashboardComponent {
 	private selected = 0;
 	private runScrollOffset = 0;
-	private showFullProgress = false;
 	private showHelp = false;
 	private activePane: "agents" | "progress" | "mailbox" | "output" | "health" | "metrics" | "plan" | "schedules" = lastActivePane;
 	/** WP-7 (R7): pane-scoped revision-diff toggle (X). */
@@ -502,6 +518,11 @@ export class RunDashboard implements DashboardComponent {
 	private scheduleSelected = 0;
 	private scheduleDetails = false;
 	private scheduleDeleteArmed = false;
+	/** US-020 (run cancel): 2-step confirm-gate + refusal status line —
+	 * mirrors the schedules delete gate (first x arms, second x dispatches,
+	 * any other key disarms; a non-running selection refuses with a line). */
+	private runCancelArmed = false;
+	private runCancelRefused = false;
 	private scheduleJobsCache: { at: number; jobs: ScheduledJob[]; hiddenCount: number } | undefined;
 	private runs: TeamRunManifest[];
 	private readonly done: (selection: RunDashboardSelection | undefined) => void;
@@ -529,6 +550,15 @@ export class RunDashboard implements DashboardComponent {
 			? runs.filter((run) => !run.ownerSessionId || run.ownerSessionId === options.workspaceId)
 			: runs;
 		this.runs = filteredRuns;
+		// US-020 AC-2: restore the cursor to the previously selected run (if it
+		// is still in the list) so escape-return keeps the user's place.
+		if (lastSelectedRunId) {
+			// groupedRuns rows include GROUP LABELS ("Active"/"Recent") — index
+			// into the SELECTABLE rows only (the same projection navigation uses).
+			const selectable = groupedRuns(filteredRuns, options.snapshotCache).filter((rowItem) => rowItem.run);
+			const idx = selectable.findIndex((rowItem) => rowItem.run?.runId === lastSelectedRunId);
+			if (idx >= 0) this.selected = idx;
+		}
 		this.done = done;
 		this.theme = asCrewTheme(theme);
 		this.options = options;
@@ -683,7 +713,7 @@ export class RunDashboard implements DashboardComponent {
 		const metricsSig =
 			this.activePane === "metrics" ? `:metrics=${this.options.registry?.snapshot().length ?? 0}:${spinnerBucket()}` : "";
 		const schedulesSig = this.activePane === "schedules" ? `:sched=${this.schedulesSignatureFragment()}` : "";
-		const sig = `${this.selected}:${this.showHelp ? 1 : 0}:${this.showFullProgress ? 1 : 0}:${this.activePane}:${statuses}${hasRunning ? `:spin=${spinnerBucket()}` : ""}${metricsSig}${schedulesSig}`;
+		const sig = `${this.selected}:${this.showHelp ? 1 : 0}:${this.activePane}:${statuses}${hasRunning ? `:spin=${spinnerBucket()}` : ""}${metricsSig}${schedulesSig}`;
 		this.cachedSignature = sig;
 		this.cachedSignatureAt = now;
 		return sig;
@@ -801,17 +831,15 @@ export class RunDashboard implements DashboardComponent {
 		this.refreshRuns(snapshotOnce);
 		const signature = this.buildSignature(snapshotOnce);
 		if (signature !== this.cachedVersion || this.cachedWidth !== width) {
-			const innerWidth = Math.max(20, width - 4);
-			const borderWidth = Math.min(innerWidth, Math.max(0, width - 2));
+			// RAIL frame (M4, 2026-09-16) — the rounded box is retired. The frame
+			// owner prefixes EVERY body row with `┃` (railLine owns the glyph + space
+			// and pads/truncates to `budget`, so no row can spill past the terminal),
+			// sections open with `┣` (sectionLine), the header hint rides the
+			// canopy's right segment (dot-led) and the surface caps with `┗ <hint>`.
+			const budget = Math.max(0, width - 2);
 			const fg = (color: Parameters<CrewTheme["fg"]>[0], text: string) => this.theme.fg(color, text);
-			// PERF (2026-08-24): DynamicCrewBorder caches the rendered fill per
-			// instance — a new instance per line defeated it. One per render
-			// pass; every border()/sep() call below reuses the cached line.
-			const crewBorder = new DynamicCrewBorder(this.theme);
-			const borderFill = (count: number) => crewBorder.render(count)[0];
-			const border = (left: string, right: string) => `${fg("border", left)}${borderFill(borderWidth)}${fg("border", right)}`;
-			const row = (text: string) => `│ ${pad(truncate(text, innerWidth - 1), innerWidth - 1)}│`;
-			const sep = () => border("├", "┤");
+			const row = (text: string) => railLine(RAIL.body, "border", text, this.theme, budget);
+			const section = (name: string, subject?: string) => sectionLine({ name, subject, theme: this.theme, budget });
 
 			const lines: string[] = [];
 			if (this.showHelp) {
@@ -819,17 +847,48 @@ export class RunDashboard implements DashboardComponent {
 				lines.push(...new HelpOverlay(this.theme).render(width));
 			} else {
 				lines.push(
-					border("╭", "╮"),
-					row(
-						`${fg("accent", "▐")} ${this.theme.bold("pi-crew")} · ${this.runs.length} runs  ${fg("dim", "1-8 pane · ↑↓ · Enter · ? help · Esc")}`,
-					),
-					sep(),
+					canopyLine({
+						word: "DASHBOARD",
+						subject: formatCount(this.runs.length, "run"),
+						// US-020: the cancel hint joins the canopy only when the budget
+						// has room — at narrow widths the canopy prefers the run-count
+						// subject over hints, and the 5th hint ellipsized it (regression
+						// caught by run-dashboard.test.ts's 80-col canonical canopy).
+						right: formatHint([
+							["1-8", "pane"],
+							[["up", "down"], "move"],
+							["enter", "select"],
+							...(budget >= 96 ? ([["x", "cancel"]] as const) : []),
+							["?", "help"],
+						]),
+						theme: this.theme,
+						budget,
+					}),
 				);
+				// US-020: run-cancel confirm gate / refusal status line —
+				// rendered right under the canopy so it is visible in EVERY pane
+				// (schedule-delete's warning is pane-8-only by design; run cancel
+				// is a root action).
+				if (this.runCancelArmed) {
+					lines.push(row(fg("warning", `⚠ x again to CANCEL '${this.selectedRunId() ?? "(none)"}' · any other key disarms`)));
+				} else if (this.runCancelRefused) {
+					lines.push(row(fg("dim", "nothing to cancel — the selected run is not active")));
+				}
 
 				if (this.runs.length === 0) {
 					// F-7: actionable empty state instead of a bare "No runs.".
 					lines.push(row(fg("dim", "No runs yet.")));
-					lines.push(row(fg("dim", "Start one: team action='run' · r reload · Esc close")));
+					lines.push(
+						row(
+							fg(
+								"dim",
+								`Start one: team action='run' · ${formatHint([
+									["r", "reload"],
+									["esc", "close"],
+								])}`,
+							),
+						),
+					);
 				} else {
 					// L-1: windowed run list so the selection can never scroll off-screen.
 					const allGrouped = groupedRuns(this.runs, this.options.snapshotCache, snapshotOnce);
@@ -839,9 +898,12 @@ export class RunDashboard implements DashboardComponent {
 					this.ensureRunListWindow(selectableCount);
 					if (selectableCount <= RUN_LIST_MAX) {
 						// Common case (≤8 runs): keep the Active/Recent group headers.
-						for (const rowItem of allGrouped) {
+						for (const [gi, rowItem] of allGrouped.entries()) {
 							if (!rowItem.run) {
-								lines.push(row(fg("dim", `── ${rowItem.label} ──`)));
+								// `┣ ACTIVE ▸ 2` — the group label IS its run count.
+								let groupCount = 0;
+								for (let j = gi + 1; j < allGrouped.length && allGrouped[j]?.run; j++) groupCount++;
+								lines.push(section(rowItem.label, `${groupCount}`));
 								continue;
 							}
 							const idx = selectable.findIndex((c) => c.run?.runId === rowItem.run?.runId);
@@ -849,13 +911,13 @@ export class RunDashboard implements DashboardComponent {
 							const run = snap?.manifest ?? rowItem.run;
 							const agents = snap?.agents ?? agentsFor(rowItem.run, this.options.snapshotCache, snapshotOnce);
 							const status: RunStatus = isLikelyOrphanedActiveRun(run, agents) ? "stale" : (run.status as RunStatus);
-							const label = runLabel(run, idx === this.selected, this.options.snapshotCache, innerWidth - 2, snapshotOnce);
+							const label = runLabel(run, idx === this.selected, this.options.snapshotCache, budget, snapshotOnce);
 							lines.push(row(applyStatusColor(this.theme, status, label)));
 						}
 					} else {
 						// >8 runs: windowed list (group headers omitted to maximise run rows).
 						const win = runListWindow(this.runScrollOffset, selectableCount);
-						if (win.hasTop) lines.push(row(fg("dim", `↑ ${this.runScrollOffset} more above`)));
+						if (win.hasTop) lines.push(row(overflowHint(this.runScrollOffset, 0, this.theme)));
 						for (let gi = this.runScrollOffset; gi < Math.min(this.runScrollOffset + win.slots, selectableCount); gi++) {
 							const rowItem = selectable[gi];
 							if (!rowItem?.run) continue;
@@ -863,11 +925,11 @@ export class RunDashboard implements DashboardComponent {
 							const run = snap?.manifest ?? rowItem.run;
 							const agents = snap?.agents ?? agentsFor(rowItem.run, this.options.snapshotCache, snapshotOnce);
 							const status: RunStatus = isLikelyOrphanedActiveRun(run, agents) ? "stale" : (run.status as RunStatus);
-							const label = runLabel(run, gi === this.selected, this.options.snapshotCache, innerWidth - 2, snapshotOnce);
+							const label = runLabel(run, gi === this.selected, this.options.snapshotCache, budget, snapshotOnce);
 							lines.push(row(applyStatusColor(this.theme, status, label)));
 						}
 						if (win.hasBottom)
-							lines.push(row(fg("dim", `↓ ${selectableCount - (this.runScrollOffset + win.slots)} more below`)));
+							lines.push(row(overflowHint(0, selectableCount - (this.runScrollOffset + win.slots), this.theme)));
 					}
 
 					// Selected run detail — compact. PERF (2026-08-24): reuse the
@@ -883,8 +945,8 @@ export class RunDashboard implements DashboardComponent {
 						const agents = snap?.agents ?? agentsFor(selectedRun, this.options.snapshotCache, snapshotOnce);
 						const statusStr: RunStatus = isLikelyOrphanedActiveRun(r, agents) ? "stale" : (r.status as RunStatus);
 						const selectedTasks = snap?.tasks ?? readRunTasks(r, this.options.snapshotCache, snapshotOnce);
-						lines.push(sep());
-						lines.push(row(`${fg("accent", "▸")} ${truncate(sanitizeLine(r.goal), innerWidth - 6)}`));
+						lines.push(section("run"));
+						lines.push(row(`${fg("accent", "▸")} ${truncate(sanitizeLine(r.goal), budget - 4)}`));
 						// L-2: surface the failure/cancellation reason inline for terminal runs.
 						const isTerminal = statusStr === "failed" || statusStr === "cancelled" || statusStr === "stopped";
 						const reason = isTerminal ? summarizeTerminalReason(r, selectedTasks, snap?.cancellationReason) : undefined;
@@ -894,7 +956,7 @@ export class RunDashboard implements DashboardComponent {
 								fg(
 									"dim",
 									sanitizeLine(
-										`  ${r.team}/${r.workflow ?? "default"} · ${statusStr} · ${r.runId.slice(-10)}${reasonSuffix}`,
+										`  ${teamWorkflowLabel(r.team, r.workflow)} · ${statusStr} · ${r.runId.slice(-8)}${reasonSuffix}`,
 									),
 								),
 							),
@@ -929,9 +991,9 @@ export class RunDashboard implements DashboardComponent {
 								];
 						const filteredPane = paneLines.filter((l) => l && !l.includes("(none)") && l.trim() !== "");
 						if (filteredPane.length > 0) {
-							lines.push(row(fg("dim", `── ${this.activePane} ──`)));
+							lines.push(section(this.activePane));
 							for (const line of filteredPane.slice(0, 8)) {
-								lines.push(colorizeStatusGlyphs(row(truncate(sanitizeLine(line), innerWidth - 2)), this.theme));
+								lines.push(colorizeStatusGlyphs(row(truncate(sanitizeLine(line), budget)), this.theme));
 							}
 						}
 
@@ -961,11 +1023,16 @@ export class RunDashboard implements DashboardComponent {
 								}
 							}
 						}
-						const ctxStr = ctxPct != null ? `${Math.round(ctxPct)}% ctx` : "";
+						// Footer: tokens + a RAIL gauge for the context window. The number
+						// stays next to the bar — the bar reads the trend, the number is
+						// what the user quotes.
 						const footerFields: string[] = [];
-						if (tokStr) footerFields.push(padVis(tokStr, 10));
-						if (ctxStr) footerFields.push(padVis(ctxStr, 9));
-						if (footerFields.length) lines.push(row(fg("dim", footerFields.join(" · "))));
+						if (tokStr) footerFields.push(fg("dim", tokStr));
+						if (ctxPct != null && Number.isFinite(ctxPct)) {
+							const ratio = Math.max(0, Math.min(1, ctxPct / 100));
+							footerFields.push(`${gaugeBar(ratio, 10, this.theme)} ${fg("muted", `${Math.round(ctxPct)}% ctx`)}`);
+						}
+						if (footerFields.length) lines.push(row(footerFields.join(fg("dim", " · "))));
 					}
 				}
 
@@ -976,8 +1043,7 @@ export class RunDashboard implements DashboardComponent {
 				if (this.activePane === "schedules") {
 					const jobs = this.scheduleJobs();
 					const now = this.scheduleNow();
-					lines.push(sep());
-					lines.push(row(fg("dim", "── schedules ──")));
+					lines.push(section("schedules", `${jobs.length}`));
 					const paneLines = safeRenderPane("schedules", () =>
 						this.scheduleDetails && jobs.length > 0
 							? renderScheduleDetails(jobs[Math.min(this.scheduleSelected, jobs.length - 1)], now)
@@ -987,7 +1053,7 @@ export class RunDashboard implements DashboardComponent {
 								}),
 					);
 					for (const line of paneLines.filter((l) => l && l.trim() !== "").slice(0, SCHEDULES_PANE_MAX_LINES)) {
-						lines.push(colorizeStatusGlyphs(row(truncate(sanitizeLine(line), innerWidth - 2)), this.theme));
+						lines.push(colorizeStatusGlyphs(row(truncate(sanitizeLine(line), budget)), this.theme));
 					}
 					if (this.scheduleDeleteArmed) {
 						const victim = jobs[Math.min(this.scheduleSelected, jobs.length - 1)];
@@ -995,16 +1061,26 @@ export class RunDashboard implements DashboardComponent {
 						lines.push(row(fg("warning", `⚠ X again to DELETE '${name}' · any other key cancels`)));
 					}
 				}
-				lines.push(border("╰", "╯"));
+				// Cap: the end of the surface + the close action (LAST, RAIL hint rule).
+				lines.push(
+					railLine(
+						RAIL.close,
+						"border",
+						formatHint([
+							["r", "reload"],
+							["esc", "close"],
+						]),
+						this.theme,
+						budget,
+					),
+				);
 			}
 
 			const target = this.targetHeight();
 			if (lines.length < target) {
-				const innerWidth = Math.max(20, width - 4);
-				const fg = (color: Parameters<CrewTheme["fg"]>[0], text: string) => this.theme.fg(color, text);
-				const blankRow = `│ ${pad("", innerWidth - 1)}│`;
+				const blankRow = railLine(RAIL.body, "border", "", this.theme, budget);
 				const bottom = lines.pop();
-				while (lines.length < target - 1) lines.push(fg("border", blankRow));
+				while (lines.length < target - 1) lines.push(blankRow);
 				if (bottom) lines.push(bottom);
 			} else if (lines.length > target) {
 				const bottom = lines[lines.length - 1];
@@ -1050,7 +1126,16 @@ export class RunDashboard implements DashboardComponent {
 			this.scheduleDeleteArmed = false;
 			this.invalidate();
 		}
+		// US-020: the run-cancel confirm gate disarms on any non-cancel key
+		// (schedule-delete precedent), and a stale refusal line clears.
+		if (this.runCancelArmed && action !== "cancel") {
+			this.runCancelArmed = false;
+			this.invalidate();
+		}
+		if (this.runCancelRefused && action !== "cancel") this.runCancelRefused = false;
 		const selectedRunId = this.selectedRunId();
+		// US-020 AC-2: keep the cursor across close/reopen cycles.
+		if (selectedRunId) lastSelectedRunId = selectedRunId;
 		if (action === "close") {
 			this.done(undefined);
 			return;
@@ -1059,6 +1144,36 @@ export class RunDashboard implements DashboardComponent {
 			this.done(selectedRunId ? { runId: selectedRunId, action: "status" } : undefined);
 			return;
 		}
+		// US-020: cancel the SELECTED run — dedicated branch (plan-approve
+		// precedent) so a stray keystroke can never close the dashboard via
+		// done(undefined). 2-step confirm gate: first x arms (render shows the
+		// warning line), second x dispatches the existing cancel channel; a
+		// non-running selection refuses with a status line (AC-3) — the guard
+		// mutation target.
+		if (action === "cancel") {
+			const run = selectedRunFromGrouped(this.runs, this.selected, this.options.snapshotCache);
+			const manifest = run ? (snapshotFor(run, this.options.snapshotCache)?.manifest ?? run) : undefined;
+			if (this.runCancelArmed) {
+				this.runCancelArmed = false;
+				if (manifest && isActiveRunStatus(manifest.status)) {
+					this.done({ runId: manifest.runId, action: "cancel" });
+				} else {
+					this.runCancelRefused = true;
+					this.invalidate();
+				}
+				return;
+			}
+			this.runCancelRefused = manifest ? !isActiveRunStatus(manifest.status) : false;
+			if (this.runCancelRefused) {
+				this.invalidate();
+				return;
+			}
+			if (manifest) {
+				this.runCancelArmed = true;
+				this.invalidate();
+			}
+			return;
+		}
 		// WP-3 (H4-subset): plan approval keys. Deliberately a DEDICATED branch
 		// (not the generic union block below) because plan actions must gate on
 		// the selected run actually being parked on a pending approval — a
@@ -1139,11 +1254,6 @@ export class RunDashboard implements DashboardComponent {
 			this.done(selectedRunId ? { runId: selectedRunId, action: "browser-open" } : { runId: "", action: "browser-open" });
 			return;
 		}
-		if (action === "progressToggle") {
-			this.showFullProgress = !this.showFullProgress;
-			this.invalidate();
-			return;
-		}
 		if (action === "pane-agents") this.activePane = "agents";
 		else if (action === "pane-progress") this.activePane = "progress";
 		else if (action === "pane-mailbox") this.activePane = "mailbox";
@@ -1156,10 +1266,14 @@ export class RunDashboard implements DashboardComponent {
 			this.planDiff = !this.planDiff;
 			this.invalidate();
 			return;
-		} else if (action === "up") this.selected = Math.max(0, this.selected - 1);
-		else if (action === "down") {
+		} else if (action === "up" || action === "down") {
+			// US-020 AC-1: WRAP at the list edges (was: hard clamp). An empty list
+			// must not divide by zero — stay at 0.
 			const selectableCount = groupedRuns(this.runs, this.options.snapshotCache).filter((row) => row.run).length;
-			this.selected = Math.min(Math.max(0, selectableCount - 1), this.selected + 1);
+			if (selectableCount > 0) {
+				this.selected =
+					action === "up" ? (this.selected - 1 + selectableCount) % selectableCount : (this.selected + 1) % selectableCount;
+			}
 		}
 		if (action) {
 			lastActivePane = this.activePane;
@@ -1173,7 +1287,7 @@ export class RunDashboard implements DashboardComponent {
 	 *  actions + jobId for the extension layer to route through
 	 *  handle-schedule.ts subActions — the UI layer never mutates jobs itself. */
 	private handleSchedulePaneAction(action: DashboardKeyAction): void {
-		// Pane-local state toggles follow the progressToggle/plan-diff precedent:
+		// Pane-local state toggles follow the plan-diff precedent:
 		// invalidate() so the next render (sync in tests, host-tick in the TUI)
 		// recomputes immediately.
 		if (action === "schedule-details") {

package/src/ui/run-snapshot-cache.ts

@@ -27,6 +27,13 @@ export interface RunSnapshotCache extends RunSnapshotCacheBase {
 	preloadAllStale(runIds: string[]): Promise<void>;
 	/** Task 17 (perf/review-2026-08-24): watcher-facing coalesced async refresh. */
 	scheduleRefresh(runId: string): void;
+	/**
+	 * F13 (RR-018): true once dispose() has run. Callers that retain the cache
+	 * (RegistrationContext.getManifestCache/getRunSnapshotCache) use this to
+	 * recreate a FRESH instance even when the cwd is unchanged — a disposed
+	 * instance must never be handed back just because `cacheCwd` still matches.
+	 */
+	isDisposed(): boolean;
 }
 
 /** WP-7 (R7): the plans slice + Plan pane load only when this flag is set —
@@ -840,6 +847,9 @@ export function createRunSnapshotCache(cwd: string, options: RunSnapshotCacheOpt
 	const recentEventsLimit = options.recentEvents ?? DEFAULT_RECENT_EVENTS;
 	const recentOutputLimit = options.recentOutputLines ?? DEFAULT_RECENT_OUTPUT_LINES;
 	const entries = new Map<string, CacheEntry>();
+	// F13 (RR-018): liveness flag — dispose() flips it so cache holders can
+	// detect a disposed instance and recreate instead of reusing it.
+	let disposed = false;
 
 	function touch(runId: string, entry: CacheEntry): RunUiSnapshot {
 		entry.lastAccessMs = Date.now();
@@ -883,7 +893,7 @@ export function createRunSnapshotCache(cwd: string, options: RunSnapshotCacheOpt
 		let tasks: TeamTaskState[];
 		let agents: CrewAgentRecord[];
 		try {
-			// R10-4 (docs/refactor-plan.review.md §ROUND 10): sync/async parity.
+			// R10-4 (docs/archive/refactor-plan.review.md §ROUND 10): sync/async parity.
 			// loadRunManifestById already returns tasks validated against the
 			// current tasks.json (mtime+size+generation check in state-store),
 			// so the old readTasks() re-read only doubled tasks.json I/O per
@@ -1143,9 +1153,16 @@ export function createRunSnapshotCache(cwd: string, options: RunSnapshotCacheOpt
 			return new Map([...entries.entries()].map(([key, entry]) => [key, entry.snapshot]));
 		},
 		dispose(): void {
+			// F13: idempotent — a second dispose must be a no-op, never a throw
+			// (cleanup paths can race a lazy cache swap).
+			if (disposed) return;
+			disposed = true;
 			unsubscribe();
 			inFlightRefreshes.clear();
 			entries.clear();
 		},
+		isDisposed(): boolean {
+			return disposed;
+		},
 	};
 }