pi-legion 3.0.3 → 4.0.0

package/src/tui/viz/panels.ts

@@ -2,12 +2,12 @@
 
 import { Canvas, cellWidth, ellipsize } from "./canvas.ts";
 import type { Rect } from "./layout.ts";
-import { formatCount, formatDuration, isAgent, type VizNode } from "./model.ts";
+import { formatCount, formatDuration, isAgent, type VizNode, type VizStatus } from "./model.ts";
 import { nodeToken, roleColor } from "./palette.ts";
 import type { RateSampler } from "./rate.ts";
 import { breakdown } from "../../shared/timing-breakdown.ts";
 
-export type Pane = "galaxy" | "chart" | "timing" | "log";
+export type Pane = "galaxy" | "chart" | "timing" | "log" | "status";
 
 export interface ViewData {
 	nodes: readonly VizNode[];
@@ -477,6 +477,13 @@ export interface LogEvent {
 	parentName?: string;
 }
 
+/** Display states that describe a *finished* lifecycle: the only ones the log knows. */
+const LOG_END_KINDS: ReadonlySet<VizStatus> = new Set<VizStatus>(["settled", "failed", "retired"]);
+
+function isLogEndKind(status: VizStatus): status is Exclude<LogEvent["kind"], "spawn"> {
+	return LOG_END_KINDS.has(status);
+}
+
 export function buildLog(nodes: readonly VizNode[]): LogEvent[] {
 	const byId = new Map(nodes.map((node) => [node.id, node]));
 	const out: LogEvent[] = [];
@@ -484,7 +491,7 @@ export function buildLog(nodes: readonly VizNode[]): LogEvent[] {
 		if (!isAgent(node)) continue;
 		const parentName = node.parentId ? byId.get(node.parentId)?.name : undefined;
 		out.push({ ts: node.startedAt, kind: "spawn", node, ...(parentName ? { parentName } : {}) });
-		if (node.status !== "running" && node.endedAt !== undefined) out.push({ ts: node.endedAt, kind: node.status, node });
+		if (node.endedAt !== undefined && isLogEndKind(node.status)) out.push({ ts: node.endedAt, kind: node.status, node });
 	}
 	return out.sort((a, b) => b.ts - a.ts || (a.kind === "spawn" ? 1 : -1));
 }
@@ -503,8 +510,14 @@ export function drawLog(
 	state: { offset: number; cursor: number; focused: boolean; selectedId?: string; origin: number },
 ): void {
 	if (r.w < 8 || r.h < 2) return;
+	// Belt and braces (#251): the border column is `r.x + r.w` (this is the INNER rect
+	// `frame()` hands back), and `Canvas.text`'s `maxX` is exclusive, so `r.x + r.w` is
+	// exactly "the last inner cell, never the border" — the same value `frame()` and
+	// `drawStatus` use. The budgets below already keep every write inside it; this is
+	// what stops a future edit to those budgets from silently running onto the border.
+	const maxX = r.x + r.w;
 	const filter = state.selectedId ? events.find((e) => e.node.id === state.selectedId)?.node.name : undefined;
-	cv.text(r.x, r.y, ellipsize(`${events.length} events${filter ? ` · highlight: ${filter}` : ""}`, r.w), "dim");
+	cv.text(r.x, r.y, ellipsize(`${events.length} events${filter ? ` · highlight: ${filter}` : ""}`, r.w), "dim", { maxX });
 	const rows = r.h - 1;
 	const maxDepth = Math.max(1, ...events.map((e) => e.node.depth));
 	const graphW = Math.min(8, maxDepth * 2);
@@ -517,7 +530,7 @@ export function drawLog(
 		const isCursor = state.focused && index === state.cursor;
 		const highlight = state.selectedId === event.node.id;
 		const dim = state.selectedId !== undefined && !highlight;
-		cv.text(r.x, y, formatDuration(event.ts - state.origin).padStart(timeW - 1), "dim");
+		cv.text(r.x, y, formatDuration(event.ts - state.origin).padStart(timeW - 1), "dim", { maxX });
 		const gx = r.x + timeW;
 		if (r.w > timeW + graphW + 10) {
 			for (let d = 1; d < Math.min(event.node.depth, graphW / 2 + 1); d++) cv.set(gx + (d - 1) * 2, y, "│", "borderMuted");
@@ -527,13 +540,21 @@ export function drawLog(
 		const tx = r.w > timeW + graphW + 10 ? gx + graphW + 1 : gx;
 		const [glyph, glyphCol] = KIND_GLYPH[event.kind];
 		cv.set(tx, y, glyph, glyphCol, { bold: true });
-		const nameW = Math.min(16, Math.max(6, Math.floor((r.x + r.w - tx - 2) * 0.45)));
+		// Room between the glyph and the border: `r.x + r.w` is the border column, so the
+		// last cell the name may use is `r.x + r.w - 1`. The old `Math.max(6, …)` floor
+		// ignored this room, so on a narrow pane `nameW` stayed 6 with 1–2 cells left and
+		// the name ran through the border (#251). `nameW <= nameRoom` also bounds the detail
+		// below: its budget is `r.x + r.w - (tx + 3 + nameW)` cells, so the detail's last
+		// cell is `tx + 3 + nameW + budget - 1 <= r.x + r.w - 1`. `nameRoom <= 0` degrades
+		// to "" (ellipsize(_, 0) === "") instead of printing a truncated name past the rect.
+		const nameRoom = r.x + r.w - (tx + 2);
+		const nameW = Math.min(16, Math.max(0, Math.floor(nameRoom * 0.45)));
 		const name = ellipsize(event.node.name, nameW);
-		cv.text(tx + 2, y, name, dim ? "dim" : roleColor(event.node.role), { bold: !dim, inverse: isCursor });
+		cv.text(tx + 2, y, name, dim ? "dim" : roleColor(event.node.role), { bold: !dim, inverse: isCursor, maxX });
 		const detail = event.kind === "spawn"
 			? `${event.parentName ?? "root"} → ${event.node.role}`
 			: `${event.kind === "settled" ? "done" : event.kind} · ${formatCount(event.node.tokens)} tok`;
-		cv.text(tx + 3 + nameW, y, ellipsize(detail, Math.max(0, r.x + r.w - (tx + 3 + nameW))), highlight ? "text" : "dim");
+		cv.text(tx + 3 + nameW, y, ellipsize(detail, Math.max(0, r.x + r.w - (tx + 3 + nameW))), highlight ? "text" : "dim", { maxX });
 		if (isCursor && highlight) cv.set(r.x + r.w - 1, y, "◂", "accent", { bold: true });
 	}
 	if (events.length > rows) {
@@ -688,3 +709,196 @@ export function drawTiming(
 		}
 	}
 }
+
+// ---------------------------------------------------------------- status (D1)
+// The `/legion status` table, on the board. Every new field is optional on
+// VizNode (D6), so a missing `spawnMode` prints `unknown` — never a guessed
+// `rpc` — and an `inprocess` child prints `—` for rss instead of a share of the
+// host figure it does not own (D2).
+
+export interface StatusDrawState {
+	offset: number;
+	cursor: number;
+	focused: boolean;
+	selectedId?: string;
+}
+
+export interface StatusColumn {
+	key: "name" | "role" | "state" | "supervisor" | "ctx" | "rss" | "turns";
+	label: string;
+	width: number;
+	align: "left" | "right";
+}
+
+/** Placeholder for "there is no honest value here" — never a fabricated number. */
+const NO_VALUE = "\u2014";
+
+/** Agents in the status table, oldest first. The root row is the run, not an agent. */
+export function statusRowsFromNodes(nodes: readonly VizNode[]): VizNode[] {
+	return nodes
+		.filter(isAgent)
+		.sort((a, b) => a.startedAt - b.startedAt || a.name.localeCompare(b.name));
+}
+
+/**
+ * D7 width grading in **absolute columns**, never a ratio (the `drawTiming`
+ * convention): the row always keeps `name · state`, and the optional fields come
+ * back one at a time as the rect grows. `undefined` = below the 20-column floor,
+ * so the pane paints nothing instead of a column of stubs.
+ *
+ * The widths sum exactly to `width`, so a row can never spill past its rect.
+ */
+export function statusColumns(width: number): StatusColumn[] | undefined {
+	if (width < 20) return undefined;
+	const state: StatusColumn = { key: "state", label: "state", width: 7, align: "left" };
+	if (width < 36) {
+		return [{ key: "name", label: "name", width: width - 8, align: "left" }, state];
+	}
+	if (width < 52) {
+		return [
+			{ key: "name", label: "name", width: width - 15, align: "left" },
+			state,
+			{ key: "ctx", label: "ctx", width: 6, align: "right" },
+		];
+	}
+	if (width < 72) {
+		return [
+			{ key: "name", label: "name", width: width - 25, align: "left" },
+			state,
+			{ key: "supervisor", label: "sup", width: 9, align: "left" },
+			{ key: "ctx", label: "ctx", width: 6, align: "right" },
+		];
+	}
+	return [
+		{ key: "name", label: "name", width: width - 43, align: "left" },
+		{ key: "role", label: "role", width: 4, align: "left" },
+		state,
+		{ key: "supervisor", label: "sup", width: 9, align: "left" },
+		{ key: "ctx", label: "ctx", width: 6, align: "right" },
+		{ key: "rss", label: "rss", width: 6, align: "right" },
+		{ key: "turns", label: "turns", width: 5, align: "right" },
+	];
+}
+
+/**
+ * Rows `drawStatus` can paint for a pane whose **outer** (framed) height is
+ * `outerH`. Exported so the view clamps the scroll offset with the draw layer's
+ * own arithmetic instead of the off-by-one `layout.h - 3` it uses for timing.
+ */
+export function statusVisibleRows(outerH: number, total: number): number {
+	const innerH = Math.max(0, outerH - 2);
+	const footerH = total > 0 && innerH >= 4 ? 1 : 0;
+	return Math.max(0, innerH - 1 - footerH);
+}
+
+/** `unknown` for a missing mode (D6): a legacy row is not evidence of `rpc`. */
+function statusSupervisor(node: VizNode): string {
+	return node.spawnMode ?? "unknown";
+}
+
+/**
+ * D2: only an `rpc` child owns a process, so only it has an honest RSS. An
+ * `inprocess` child shares this host process — apportioning the host figure
+ * across children would be fabricated data the user then decides on, so it
+ * prints `—`. Lowercase `m` keeps the panel inside the plain glyph set.
+ */
+function statusRss(node: VizNode): string {
+	if (node.spawnMode === "inprocess") return NO_VALUE;
+	if (node.rss === undefined || !Number.isFinite(node.rss) || node.rss < 0) return NO_VALUE;
+	return `${Math.round(node.rss)}m`;
+}
+
+function statusValue(node: VizNode, key: StatusColumn["key"]): string {
+	switch (key) {
+		case "name":
+			return node.name;
+		case "role":
+			return roleAbbrev(node.role);
+		case "state":
+			return node.status === "settled" ? "done" : node.status;
+		case "supervisor":
+			return statusSupervisor(node);
+		case "ctx":
+			return node.contextTokens !== undefined && node.contextTokens > 0 ? formatCount(node.contextTokens) : NO_VALUE;
+		case "rss":
+			return statusRss(node);
+		case "turns":
+			return node.turns !== undefined && node.turns > 0 ? String(node.turns) : NO_VALUE;
+	}
+}
+
+function statusColor(node: VizNode, key: StatusColumn["key"], dim: boolean): string {
+	if (dim) return "dim";
+	if (key === "name") return roleColor(node.role);
+	if (key === "state") {
+		if (node.status === "failed") return "error";
+		if (node.status === "settled") return "success";
+		if (node.status === "running") return "accent";
+		return "dim";
+	}
+	return "dim";
+}
+
+/** Ellipsize then pad to exactly `width` cells (grapheme-safe, never overflows). */
+function padCell(value: string, width: number, align: "left" | "right"): string {
+	const clipped = ellipsize(value, width);
+	const pad = " ".repeat(Math.max(0, width - cellWidth(clipped)));
+	return align === "right" ? pad + clipped : clipped + pad;
+}
+
+/**
+ * Status table: header row, one row per agent, optional footer.
+ *
+ * `r` is the **inner** rect `frame()` hands back, so the header line sits on the
+ * first row inside the border. Every `cv.text` is ellipsized to its column *and*
+ * carries `maxX` — the pane never writes past its own rect the way `drawLog`
+ * can on a very narrow terminal.
+ */
+export function drawStatus(
+	cv: Canvas,
+	r: Rect,
+	nodes: readonly VizNode[],
+	state: StatusDrawState,
+): void {
+	if (r.w < 20 || r.h < 2) return;
+	const columns = statusColumns(r.w);
+	if (!columns) return;
+	const maxX = r.x + r.w;
+	const rows = statusRowsFromNodes(nodes);
+	const footerH = rows.length > 0 && r.h >= 4 ? 1 : 0;
+	const rowsAvail = Math.max(0, r.h - 1 - footerH);
+
+	// Header: labels only. Panel content never lands on the title rule.
+	let x = r.x;
+	columns.forEach((column, index) => {
+		cv.text(x, r.y, padCell(column.label, column.width, column.align), "dim", { maxX });
+		x += column.width + (index < columns.length - 1 ? 1 : 0);
+	});
+
+	for (let i = 0; i < rowsAvail; i++) {
+		const index = state.offset + i;
+		const node = rows[index];
+		if (!node) break;
+		const y = r.y + 1 + i;
+		const isCursor = state.focused && index === state.cursor;
+		const highlight = state.selectedId === node.id;
+		const dim = state.selectedId !== undefined && !highlight;
+		let cx = r.x;
+		columns.forEach((column, ci) => {
+			cv.text(cx, y, padCell(statusValue(node, column.key), column.width, column.align), statusColor(node, column.key, dim), {
+				...(column.key === "name" && !dim ? { bold: true } : {}),
+				...(column.key === "name" && isCursor ? { inverse: true } : {}),
+				maxX,
+			});
+			cx += column.width + (ci < columns.length - 1 ? 1 : 0);
+		});
+	}
+
+	if (footerH) {
+		const live = rows.filter((node) => node.status === "running").length;
+		const hidden = Math.max(0, rows.length - rowsAvail);
+		const parts = [`${rows.length} agents`, `${live} live`];
+		if (hidden > 0) parts.push(`+${hidden} more`);
+		cv.text(r.x, r.y + r.h - 1, ellipsize(parts.join(" · "), r.w), "dim", { maxX });
+	}
+}

package/src/tui/viz/railway.ts

@@ -156,8 +156,8 @@ export function formatRate(rate: number): string {
 
 
 /**
- * Wide-lane detail after the name: role, turn/lifetime clocks, and
- * last-activity age.
+ * Wide-lane detail after the name: role, turn/lifetime clocks, and — once it
+ * is at least a minute old — the last-activity age.
  *
  * The leading clock is "time since the last task started": it keeps ticking
  * through the quiet gap after a turn settles (the old behavior froze at that
@@ -170,34 +170,37 @@ export function formatRate(rate: number): string {
  * has a real start time and a real lifetime; show both.
  */
 export function formatRailLaneDetail(node: VizNode, now: number): string {
-	const parts: string[] = [node.role];
-	parts.push(formatAgentElapsed({
-		state: node.status,
-		startedAt: node.startedAt,
-		...(node.endedAt !== undefined ? { finishedAt: node.endedAt } : {}),
-		...(node.currentTurnStartedAt !== undefined ? { currentTurnStartedAt: node.currentTurnStartedAt } : {}),
-	}, now));
-	parts.push(formatActivityAgo(node.lastActivityAt, now));
-	return parts.join(" · ");
+	return laneDetailParts(node, now).join(" · ");
 }
 
-/** Lane detail candidates, richest first (role → clocks → ago). */
-export function laneDetailCandidates(node: VizNode, now: number): string[] {
+/**
+ * Lane detail fields, richest first: role, clocks, then last-activity age —
+ * the age is omitted entirely while it is under a minute, because a lane that
+ * just saw activity is already visibly live and `1s ago` was pure noise.
+ */
+function laneDetailParts(node: VizNode, now: number): string[] {
 	const ago = formatActivityAgo(node.lastActivityAt, now);
-	const clocks = formatAgentElapsed({
-		state: node.status,
-		startedAt: node.startedAt,
-		...(node.endedAt !== undefined ? { finishedAt: node.endedAt } : {}),
-		...(node.currentTurnStartedAt !== undefined ? { currentTurnStartedAt: node.currentTurnStartedAt } : {}),
-	}, now);
 	return [
-		`${node.role} · ${clocks} · ${ago}`,
-		`${clocks} · ${ago}`,
-		clocks,
-		ago,
+		node.role,
+		formatAgentElapsed({
+			state: node.status,
+			startedAt: node.startedAt,
+			...(node.endedAt !== undefined ? { finishedAt: node.endedAt } : {}),
+			...(node.currentTurnStartedAt !== undefined ? { currentTurnStartedAt: node.currentTurnStartedAt } : {}),
+		}, now),
+		...(ago ? [ago] : []),
 	];
 }
 
+/** Lane detail candidates, richest first (role → clocks → ago). */
+export function laneDetailCandidates(node: VizNode, now: number): string[] {
+	const parts = laneDetailParts(node, now);
+	// Drop fields from the left: the role goes first, the clocks are the last
+	// thing to give up. A fresh lane has no age field, so it ends at the clocks
+	// instead of paying for a `1s ago` suffix it never shows.
+	return parts.map((_, start) => parts.slice(start).join(" · "));
+}
+
 /**
  * Width of the lane-name column: as wide as the longest name, clamped to
  * `RAIL_NAME_MAX_COLS` and never below `RAIL_NAME_MIN_COLS`.
@@ -255,7 +258,7 @@ export function railColumnPlan(
 	if (portrait) {
 		const label = Math.max(...shown.map((n) => {
 			const ago = formatActivityAgo(n.lastActivityAt, now);
-			return Array.from(ago === "—" ? n.name : `${n.name} · ${ago}`).length;
+			return Array.from(ago === "" || ago === "—" ? n.name : `${n.name} · ${ago}`).length;
 		}));
 		return { nameW, grade: 0, needed: label + 2 + reserve };
 	}
@@ -423,7 +426,7 @@ export function renderRailway(input: RailInput): RailRender | undefined {
 		const avail = width - (nameX + 2) - overflow.length;
 		if (portrait) {
 			const ago = formatActivityAgo(node.lastActivityAt, now);
-			const label = ago === "—" ? node.name : `${node.name} · ${ago}`;
+			const label = ago === "" || ago === "—" ? node.name : `${node.name} · ${ago}`;
 			canvas.text(nameX + 2, y, ellipsize(label, avail), col, { bold: true });
 		} else {
 			// Paint with the same width the plan measured (clamped to what is

package/src/tui/viz/view.ts

@@ -2,7 +2,7 @@
 
 import { Key, matchesKey } from "@earendil-works/pi-tui";
 import { Canvas, cellWidth, ellipsize } from "./canvas.ts";
-import { computeLayout, type LayoutKind } from "./layout.ts";
+import { computeLayout, type LayoutKind, type LegionLayout } from "./layout.ts";
 import { formatCount, formatDuration, isAgent, type VizNode } from "./model.ts";
 import { roleColor, type VizTheme } from "./palette.ts";
 import {
@@ -11,8 +11,11 @@ import {
 	drawChart,
 	drawGalaxy,
 	drawLog,
+	drawStatus,
 	drawTiming,
 	frame,
+	statusRowsFromNodes,
+	statusVisibleRows,
 	timingRowsFromNodes,
 	type Pane,
 	type ViewData,
@@ -25,15 +28,35 @@ export interface LegionViewState {
 	logCursor: number;
 	timingOffset: number;
 	timingCursor: number;
+	statusOffset: number;
+	statusCursor: number;
 	/** `x` pressed: an in-view y/N prompt for stopping this agent (dialogs would be hidden behind the full-screen view). */
 	pendingStopId?: string;
 }
 
 export function initialViewState(): LegionViewState {
-	return { focus: "galaxy", logOffset: 0, logCursor: 0, timingOffset: 0, timingCursor: 0 };
+	return {
+		focus: "galaxy",
+		logOffset: 0,
+		logCursor: 0,
+		timingOffset: 0,
+		timingCursor: 0,
+		statusOffset: 0,
+		statusCursor: 0,
+	};
 }
 
-const PANES: Pane[] = ["galaxy", "chart", "timing", "log"];
+/** Tab order (D8): `status` last, so the existing galaxy→chart→timing→log walk is unchanged. */
+const PANES: readonly Pane[] = ["galaxy", "chart", "timing", "log", "status"];
+
+/**
+ * Panes this layout actually placed. Portrait leaves no room for a fifth pane
+ * and returns a zero-height `status` rect (D1); Tab must skip what is not drawn
+ * rather than park the focus on an invisible box.
+ */
+export function availablePanes(layout: LegionLayout): Pane[] {
+	return PANES.filter((pane) => layout[pane].h > 0);
+}
 
 /** Min grapheme cells before painting a selection badge. Shared by portrait + landscape so a truncated stub never paints (#128). Was portrait `>4` vs landscape `>0`. */
 export const MIN_SELECTION_BADGE_W = 5;
@@ -114,6 +137,25 @@ export function renderLegionView(data: ViewData, state: LegionViewState, cols: n
 		origin,
 	});
 
+	// Status table (D1/D7). Portrait hands back a zero-area rect, so `frame()`
+	// paints nothing and `drawStatus` bails on `r.w < 20` — no special case here.
+	const statusRows = statusRowsFromNodes(data.nodes);
+	const statusVisible = Math.max(1, statusVisibleRows(layout.status.h, statusRows.length));
+	clampList(state, "status", statusRows.length, statusVisible);
+	const statusInner = frame(
+		cv,
+		layout.status,
+		portrait ? "status" : "status · agents",
+		state.focus === "status",
+		statusInnerHint(layout.kind),
+	);
+	drawStatus(cv, statusInner, statusRows, {
+		offset: state.statusOffset,
+		cursor: state.statusCursor,
+		focused: state.focus === "status",
+		...(state.selectedId ? { selectedId: state.selectedId } : {}),
+	});
+
 	// Footer.
 	const keys: Array<[string, string]> = portrait
 		? [["Tab", "pane"], ["↑↓", ""], ["⏎", "sel"], ["o", "open"], ["x", "stop"], ["esc", ""], ["q", ""]]
@@ -143,31 +185,44 @@ function statusLabel(node: VizNode): string {
 	return node.status === "settled" ? "done" : node.status;
 }
 
+/**
+ * Key hint on the status title rule. Suppressed in portrait, where the pane is
+ * zero-area and never drawn at all.
+ */
+function statusInnerHint(kind: LayoutKind): string | undefined {
+	return kind === "portrait" ? undefined : "↑↓ scroll · ⏎ select";
+}
+
 function clampList(
 	state: LegionViewState,
-	which: "log" | "timing",
+	which: "log" | "timing" | "status",
 	count: number,
 	visible: number,
 ): void {
-	if (which === "log") {
-		state.logCursor = Math.max(0, Math.min(state.logCursor, count - 1));
-		if (state.logCursor < state.logOffset) state.logOffset = state.logCursor;
-		if (state.logCursor >= state.logOffset + visible) state.logOffset = state.logCursor - visible + 1;
-		state.logOffset = Math.max(0, Math.min(state.logOffset, Math.max(0, count - visible)));
-		return;
-	}
-	state.timingCursor = Math.max(0, Math.min(state.timingCursor, count - 1));
-	if (state.timingCursor < state.timingOffset) state.timingOffset = state.timingCursor;
-	if (state.timingCursor >= state.timingOffset + visible) state.timingOffset = state.timingCursor - visible + 1;
-	state.timingOffset = Math.max(0, Math.min(state.timingOffset, Math.max(0, count - visible)));
+	const [cursorKey, offsetKey] = which === "log"
+		? (["logCursor", "logOffset"] as const)
+		: which === "status"
+			? (["statusCursor", "statusOffset"] as const)
+			: (["timingCursor", "timingOffset"] as const);
+	state[cursorKey] = Math.max(0, Math.min(state[cursorKey], count - 1));
+	if (state[cursorKey] < state[offsetKey]) state[offsetKey] = state[cursorKey];
+	if (state[cursorKey] >= state[offsetKey] + visible) state[offsetKey] = state[cursorKey] - visible + 1;
+	state[offsetKey] = Math.max(0, Math.min(state[offsetKey], Math.max(0, count - visible)));
 }
 
 export type ViewAction = "none" | "render" | "close" | "open" | "stop";
 
 /** Pure key handling so it can be unit tested without a terminal. */
-export function handleViewKey(data: string, state: LegionViewState, nodes: readonly VizNode[], page = 10): ViewAction {
+export function handleViewKey(
+	data: string,
+	state: LegionViewState,
+	nodes: readonly VizNode[],
+	page = 10,
+	panes: readonly Pane[] = PANES,
+): ViewAction {
 	const events = buildLog(nodes);
 	const timingRows = timingRowsFromNodes(nodes, Date.now());
+	const statusRows = statusRowsFromNodes(nodes);
 	const order = dfsOrder(nodes).filter(isAgent);
 	if (state.pendingStopId) {
 		const confirmed = matchesKey(data, "y") || data === "Y" || matchesKey(data, Key.enter);
@@ -183,12 +238,16 @@ export function handleViewKey(data: string, state: LegionViewState, nodes: reado
 		}
 		return "close";
 	}
-	if (matchesKey(data, Key.tab)) {
-		state.focus = PANES[(PANES.indexOf(state.focus) + 1) % PANES.length]!;
-		return "render";
-	}
-	if (matchesKey(data, Key.shift("tab"))) {
-		state.focus = PANES[(PANES.indexOf(state.focus) + PANES.length - 1) % PANES.length]!;
+	if (matchesKey(data, Key.tab) || matchesKey(data, Key.shift("tab"))) {
+		// `panes` defaults to every pane so existing callers keep the full walk;
+		// the host passes `availablePanes(layout)` so Tab skips the zero-area
+		// status pane in portrait (D1).
+		const ring = panes.length > 0 ? panes : PANES;
+		const step = matchesKey(data, Key.tab) ? 1 : ring.length - 1;
+		const at = ring.indexOf(state.focus);
+		// A focus outside `ring` (e.g. status after a resize to portrait) restarts
+		// the walk at a pane that is actually drawn.
+		state.focus = ring[(at < 0 ? (step > 0 ? 0 : ring.length - 1) : (at + step) % ring.length)]!;
 		return "render";
 	}
 	if (matchesKey(data, "o")) return state.selectedId ? "open" : "none";
@@ -230,6 +289,21 @@ export function handleViewKey(data: string, state: LegionViewState, nodes: reado
 		} else return "none";
 		return "render";
 	}
+	if (state.focus === "status") {
+		if (down) state.statusCursor = Math.min(statusRows.length - 1, state.statusCursor + 1);
+		else if (up) state.statusCursor = Math.max(0, state.statusCursor - 1);
+		else if (matchesKey(data, Key.pageDown)) state.statusCursor = Math.min(statusRows.length - 1, state.statusCursor + page);
+		else if (matchesKey(data, Key.pageUp)) state.statusCursor = Math.max(0, state.statusCursor - page);
+		else if (matchesKey(data, Key.home)) state.statusCursor = 0;
+		else if (matchesKey(data, Key.end)) state.statusCursor = Math.max(0, statusRows.length - 1);
+		else if (matchesKey(data, Key.enter)) {
+			const row = statusRows[state.statusCursor];
+			if (!row) return "none";
+			state.selectedId = state.selectedId === row.id ? undefined : row.id;
+			if (state.selectedId === undefined) delete state.selectedId;
+		} else return "none";
+		return "render";
+	}
 	if (down || up || matchesKey(data, Key.right) || matchesKey(data, Key.left)) {
 		if (order.length === 0) return "none";
 		const step = down || matchesKey(data, Key.right) ? 1 : -1;
@@ -261,6 +335,12 @@ export function createLegionViewFactory(options: LegionViewOptions) {
 		const state = initialViewState();
 		const timer = setInterval(() => tui.requestRender(), options.refreshMs ?? 1000);
 		(timer as { unref?: () => void }).unref?.();
+		/**
+		 * Panes the last painted frame actually placed, so Tab walks what the user
+		 * can see: portrait leaves no room for a fifth pane (D1). Before the first
+		 * paint this stays at the full ring, which is also `handleViewKey`'s default.
+		 */
+		let panes: Pane[] = [...PANES];
 		let closed = false;
 		const close = (): void => {
 			if (closed) return;
@@ -272,10 +352,17 @@ export function createLegionViewFactory(options: LegionViewOptions) {
 			render(width: number): string[] {
 				// Rendered as a full-screen overlay: own the whole terminal height.
 				const rows = Math.max(6, tui.terminal.rows ?? 24);
+				panes = availablePanes(computeLayout(width, rows));
 				return renderLegionView(options.getData(), state, width, rows).canvas.toLines(theme);
 			},
 			handleInput(data: string): void {
-				const action = handleViewKey(data, state, options.getData().nodes, Math.max(1, (tui.terminal.rows ?? 24) - 8));
+				const action = handleViewKey(
+					data,
+					state,
+					options.getData().nodes,
+					Math.max(1, (tui.terminal.rows ?? 24) - 8),
+					panes,
+				);
 				if (action === "close") return close();
 				if (action === "open" && state.selectedId) options.onOpenNode?.(state.selectedId);
 				if (action === "stop" && state.pendingStopId) {