pi-legion 2.0.3 → 3.0.0

package/src/tui/viz/layout.ts

@@ -14,6 +14,8 @@ export interface LegionLayout {
 	header: Rect;
 	galaxy: Rect;
 	chart: Rect;
+	/** Subagent wall/gen/other table (#151). */
+	timing: Rect;
 	log: Rect;
 	footer: Rect;
 }
@@ -28,6 +30,11 @@ export const PORTRAIT_CHART_MAX = 18;
 /** Side-by-side layouts never stretch panels beyond this many rows. */
 export const STACKED_TOP_MAX = 24;
 export const WIDE_CHART_MAX = 24;
+/** Compact timing band in portrait / stacked-strip. */
+export const TIMING_BAND_MIN = 5;
+export const TIMING_BAND_MAX = 10;
+/** Below this bottom height, stacked prefers a timing strip over side-by-side. */
+export const STACKED_TIMING_SIDE_MIN = 8;
 
 /** Terminal cells are ~2:1 (tall), so rows*2 >= cols means the window looks taller than wide. */
 export function isTall(cols: number, rows: number): boolean {
@@ -60,35 +67,65 @@ export function computeLayout(cols: number, rows: number, hints: LayoutHints = {
 		// Chart is capped; on very tall wide terminals the galaxy absorbs the rest.
 		const chartH = Math.min(WIDE_CHART_MAX, Math.max(3, Math.round(bodyH * 0.45)));
 		const galaxyH = bodyH - chartH;
+		const rightW = W - leftW;
+		// Right column: timing on top, log below (#151).
+		const timingH = Math.min(
+			Math.max(TIMING_BAND_MIN, Math.round(bodyH * 0.42)),
+			Math.max(TIMING_BAND_MIN, bodyH - 6),
+		);
 		return {
 			kind,
 			header,
 			footer,
 			galaxy: { x: 0, y: bodyY, w: leftW, h: galaxyH },
 			chart: { x: 0, y: bodyY + galaxyH, w: leftW, h: chartH },
-			log: { x: leftW, y: bodyY, w: W - leftW, h: bodyH },
+			timing: { x: leftW, y: bodyY, w: rightW, h: timingH },
+			log: { x: leftW, y: bodyY + timingH, w: rightW, h: Math.max(0, bodyH - timingH) },
 		};
 	}
 	if (kind === "stacked") {
 		const topH = Math.min(STACKED_TOP_MAX, Math.max(3, Math.round(bodyH * 0.58)));
 		const galaxyW = Math.floor(W * 0.5);
+		const bottomH = bodyH - topH;
+		const bottomY = bodyY + topH;
+		// Prefer timing|log side-by-side; strip when the bottom band is too short (#151).
+		if (bottomH >= STACKED_TIMING_SIDE_MIN) {
+			const timingW = Math.floor(W * 0.45);
+			return {
+				kind,
+				header,
+				footer,
+				galaxy: { x: 0, y: bodyY, w: galaxyW, h: topH },
+				chart: { x: galaxyW, y: bodyY, w: W - galaxyW, h: topH },
+				timing: { x: 0, y: bottomY, w: timingW, h: bottomH },
+				log: { x: timingW, y: bottomY, w: W - timingW, h: bottomH },
+			};
+		}
+		const timingH = Math.min(TIMING_BAND_MAX, Math.max(TIMING_BAND_MIN, Math.round(bottomH * 0.4)), Math.max(3, bottomH - 3));
 		return {
 			kind,
 			header,
 			footer,
 			galaxy: { x: 0, y: bodyY, w: galaxyW, h: topH },
 			chart: { x: galaxyW, y: bodyY, w: W - galaxyW, h: topH },
-			log: { x: 0, y: bodyY + topH, w: W, h: bodyH - topH },
+			timing: { x: 0, y: bottomY, w: W, h: timingH },
+			log: { x: 0, y: bottomY + timingH, w: W, h: Math.max(0, bottomH - timingH) },
 		};
 	}
-	// Portrait: galaxy (aspect-limited), chart (fixed band), log gets the rest.
+	// Portrait: galaxy (aspect-limited), chart (fixed band), timing (compact), log gets the rest.
 	const chartH = Math.min(PORTRAIT_CHART_MAX, Math.max(PORTRAIT_CHART_MIN, Math.round(bodyH * 0.3)), Math.max(3, bodyH - 9));
 	// A visually round galaxy is ~W/2 rows tall (cells are 2:1); allow it up to ~W*0.6.
 	const galaxyCap = Math.max(8, Math.round(W * 0.5));
 	const galaxyGrowCap = Math.max(galaxyCap, Math.round(W * 0.65));
 	let galaxyH = Math.max(3, Math.min(galaxyCap, Math.round(bodyH * 0.4), bodyH - chartH - 6));
-	let logH = bodyH - galaxyH - chartH;
-	// Few events: give some of the empty log area back to the galaxy.
+	// Reserve a compact timing band between chart and log (#151).
+	let timingH = Math.min(
+		TIMING_BAND_MAX,
+		Math.max(TIMING_BAND_MIN, Math.round(bodyH * 0.18)),
+		Math.max(3, bodyH - galaxyH - chartH - 4),
+	);
+	let logH = bodyH - galaxyH - chartH - timingH;
+	// Few events: give some of the empty log area back to the galaxy (keep timing).
 	if (hints.logEvents !== undefined) {
 		const logNeeded = Math.max(8, hints.logEvents + 4);
 		const spare = logH - logNeeded;
@@ -100,12 +137,19 @@ export function computeLayout(cols: number, rows: number, hints: LayoutHints = {
 			}
 		}
 	}
+	// If body is too short, shrink timing before wiping log.
+	if (logH < 3 && timingH > 3) {
+		const give = Math.min(timingH - 3, 3 - logH);
+		timingH -= give;
+		logH += give;
+	}
 	return {
 		kind,
 		header,
 		footer,
 		galaxy: { x: 0, y: bodyY, w: W, h: galaxyH },
 		chart: { x: 0, y: bodyY + galaxyH, w: W, h: chartH },
-		log: { x: 0, y: bodyY + galaxyH + chartH, w: W, h: Math.max(0, logH) },
+		timing: { x: 0, y: bodyY + galaxyH + chartH, w: W, h: Math.max(0, timingH) },
+		log: { x: 0, y: bodyY + galaxyH + chartH + Math.max(0, timingH), w: W, h: Math.max(0, logH) },
 	};
 }

package/src/tui/viz/model.ts

@@ -33,6 +33,10 @@ export interface VizNode {
 	currentTurnStartedAt?: number;
 	/** Unix ms the current turn settled. Absent while it is still in flight. */
 	currentTurnEndedAt?: number;
+	/** Completed turn count (1-based latest); used to gate round clocks on the strip. */
+	turns?: number;
+	/** Unix ms of last visible activity for this seat (not run wall-clock start). */
+	lastActivityAt?: number;
 }
 
 /** Same set the footer/busy label treat as active, so live counts agree everywhere. */
@@ -71,6 +75,8 @@ export function nodesFromEntries(entries: readonly StatusEntry[]): VizNode[] {
 			generationMs: Math.max(0, entry.generationMs ?? 0),
 			...(entry.currentTurnStartedAt !== undefined ? { currentTurnStartedAt: entry.currentTurnStartedAt } : {}),
 			...(entry.currentTurnEndedAt !== undefined ? { currentTurnEndedAt: entry.currentTurnEndedAt } : {}),
+			...(entry.turns !== undefined && entry.turns > 0 ? { turns: entry.turns } : {}),
+			...(entry.lastActivityAt !== undefined ? { lastActivityAt: entry.lastActivityAt } : {}),
 		});
 	}
 	// Parents that are missing from the snapshot re-attach to the nearest known ancestor.

package/src/tui/viz/panels.ts

@@ -5,14 +5,15 @@ import type { Rect } from "./layout.ts";
 import { formatCount, formatDuration, isAgent, type VizNode } 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" | "log";
+export type Pane = "galaxy" | "chart" | "timing" | "log";
 
 export interface ViewData {
 	nodes: readonly VizNode[];
 	sampler: RateSampler;
 	now: number;
-	/** Header "now" tok/s (live agents only; 0 when none running). Chart avg/buckets keep full-series windows. */
+	/** Header tok/s (live agents only; 0 when none running). Chart avg/buckets keep full-series windows. */
 	rate: number;
 }
 
@@ -279,10 +280,16 @@ export interface ChartStats {
 	byRole: Array<{ role: string; tokens: number }>;
 }
 
+/**
+ * Chart x-domain. `to` advances only on substantive RateSampler changes
+ * (tokensOut / generationMs); wall-clock `now` alone does not scroll the axis.
+ * `from` stays relative to that frozen `to` (earliest start, or to−60s).
+ */
 export function chartWindow(data: ViewData): { from: number; to: number } {
 	const starts = data.nodes.filter(isAgent).map((node) => node.startedAt);
-	const from = Math.min(data.sampler.startedAt ?? data.now, ...(starts.length ? starts : [data.now]));
-	return { from: Math.min(from, data.now - 60_000), to: data.now };
+	const earliest = Math.min(data.sampler.startedAt ?? data.now, ...(starts.length ? starts : [data.now]));
+	const to = data.sampler.lastChangeAt ?? data.sampler.startedAt ?? data.now;
+	return { from: Math.min(earliest, to - 60_000), to };
 }
 
 export function computeStats(data: ViewData, buckets: number): ChartStats {
@@ -296,7 +303,7 @@ export function computeStats(data: ViewData, buckets: number): ChartStats {
 			peakIndex = i;
 		}
 	});
-	// "now" is the shared header definition, never the last bucket.
+	// The header tok/s is the shared definition, never the last bucket.
 	peak = Math.max(peak, data.rate);
 	const peakAt = peakIndex >= 0 && peak > data.rate ? series.times[peakIndex]! : to;
 	const roleTotals = new Map<string, number>();
@@ -308,7 +315,7 @@ export function computeStats(data: ViewData, buckets: number): ChartStats {
 	}
 	return {
 		now: data.rate,
-		// Full-series window average (includes settled); differs from header "now" on purpose.
+		// Full-series window average (includes settled); differs from the header tok/s on purpose.
 		avg: data.sampler.totalRate(to, Math.max(1, to - from)),
 		peak,
 		peakAt,
@@ -326,7 +333,7 @@ export function drawChart(cv: Canvas, r: Rect, data: ViewData, selected: VizNode
 	const statsBelow = statsW === 0 ? Math.min(selected ? 4 : 3, Math.max(0, r.h - 6)) : 0;
 	const axisW = 6;
 	const plotX = r.x + axisW;
-	// With side stats, keep room for the "◂ now" label so it never runs into the stats column.
+	// With side stats, keep room for the "◂ N" label so it never runs into the stats column.
 	const plotW = Math.max(4, r.w - axisW - statsW - (statsW ? 9 : 0) - 1);
 	const plotTop = r.y + 1;
 	const plotH = Math.max(1, r.h - 2 - statsBelow);
@@ -387,14 +394,13 @@ export function drawChart(cv: Canvas, r: Rect, data: ViewData, selected: VizNode
 	if (stats.peak > 0) yLabel(max, plotTop);
 	if (plotH >= 5 && max >= 20) yLabel(max / 2, axisY - 1 - Math.floor(plotH / 2));
 	yLabel(0, axisY - 1);
-	// X axis with "now" at the right edge.
+	// X axis: elapsed time since the window start; the right edge is the present.
 	cv.text(plotX - 1, axisY, "└" + "─".repeat(plotW), "borderMuted", { maxX: plotX + plotW });
 	cv.text(plotX, axisY, "0m", "dim");
 	const mid = formatDuration((to - from) / 2);
 	if (plotW > 24) cv.text(plotX + Math.floor(plotW / 2) - Math.floor(mid.length / 2), axisY, mid, "dim");
-	cv.text(plotX + plotW - 3, axisY, "now", "text", { bold: true });
 	const nowLabel = `◂ ${formatCount(stats.now)}`;
-	if (statsW === 0) cv.text(r.x, r.y, `now ${formatCount(stats.now)} tok/s`, "accent", { bold: true, maxX: Math.max(r.x, plotX + plotW - 22) });
+	if (statsW === 0) cv.text(r.x, r.y, `${formatCount(stats.now)} tok/s`, "accent", { bold: true, maxX: Math.max(r.x, plotX + plotW - 22) });
 	else cv.text(plotX + plotW + 1, axisY - 1 - Math.min(plotH - 1, Math.floor(rowsFor(stats.now))), nowLabel, "text", { maxX: r.x + r.w - statsW - 1 });
 
 	const selLines = (): Array<[string, string]> => {
@@ -403,14 +409,14 @@ export function drawChart(cv: Canvas, r: Rect, data: ViewData, selected: VizNode
 		const share = stats.total > 0 ? (selected.tokens / stats.total) * 100 : 0;
 		return [
 			[`▸ ${selected.name}`, roleColor(selected.role)],
-			[`${formatCount(rate)} tok/s now · ${formatCount(selected.tokens)} tok`, "text"],
+			[`${formatCount(rate)} tok/s · ${formatCount(selected.tokens)} tok`, "text"],
 			[`${share.toFixed(1)}% of run · ━ bright line`, "dim"],
 		];
 	};
 	if (statsW) {
 		const sx = r.x + r.w - statsW;
 		const rows: Array<[string, string, string]> = [
-			["now", `${formatCount(stats.now)} tok/s`, "text"],
+			["rate", `${formatCount(stats.now)} tok/s`, "text"],
 			["avg", `${formatCount(stats.avg)} tok/s`, "text"],
 			["peak", stats.peak > 0 ? `${formatCount(stats.peak)} @ ${formatDuration(stats.peakAt - from)}` : "—", "text"],
 			["total", `${formatCount(stats.total)} tok`, "text"],
@@ -536,3 +542,149 @@ export function drawLog(
 		for (let i = 0; i < rows; i++) cv.set(r.x + r.w - 1, r.y + 1 + i, i >= pos && i < pos + thumb ? "┃" : "│", i >= pos && i < pos + thumb ? "scrollbarThumb" : "scrollbarTrack");
 	}
 }
+
+// ---------------------------------------------------------------- timing (#151)
+// TUI scope = current view VizNodes; CLI `/legion timing` = cwd RunStore children.
+// Formula matches #150 (wall / gen / other); the node set can differ.
+
+export interface TimingRow {
+	node: VizNode;
+	wallMs: number;
+	generationMs: number | null;
+	otherMs: number | null;
+	liveWall: boolean;
+}
+
+/**
+ * Build timing rows from viz nodes (agents only).
+ * VizNode has no turn count: generationMs === 0 → gen/other shown as — (no turn data).
+ */
+export function timingRowsFromNodes(nodes: readonly VizNode[], now: number): TimingRow[] {
+	const rows: TimingRow[] = [];
+	for (const node of nodes) {
+		if (!isAgent(node)) continue;
+		const end = node.endedAt ?? now;
+		const wallMs = Math.max(0, end - node.startedAt);
+		const liveWall = node.status === "running" && node.endedAt === undefined;
+		// No turn data on VizNode → treat 0 generationMs as absent (align "无 turn → —").
+		const generationMs = node.generationMs > 0 ? node.generationMs : null;
+		const parts = breakdown(wallMs, generationMs);
+		rows.push({
+			node,
+			wallMs: parts.wall_ms,
+			generationMs: parts.generation_ms,
+			otherMs: parts.other_ms,
+			liveWall,
+		});
+	}
+	rows.sort((a, b) => a.node.startedAt - b.node.startedAt || a.node.name.localeCompare(b.node.name));
+	return rows;
+}
+
+function formatTimingCell(ms: number | null, opts: { live?: boolean } = {}): string {
+	if (ms === null) return "—";
+	const rendered = formatDuration(ms);
+	return opts.live ? `${rendered}+` : rendered;
+}
+
+function roleAbbrev(role: string): string {
+	const t = role.trim();
+	if (!t) return "";
+	if (t.length <= 4) return t;
+	return t.slice(0, 3);
+}
+
+export interface TimingDrawState {
+	offset: number;
+	cursor: number;
+	focused: boolean;
+	selectedId?: string;
+}
+
+export function drawTiming(
+	cv: Canvas,
+	r: Rect,
+	rows: readonly TimingRow[],
+	state: TimingDrawState,
+): void {
+	if (r.w < 8 || r.h < 2) return;
+	const showExtra = r.w >= 36;
+	const showRole = r.w >= 28;
+	const header = showExtra
+		? "name" + (showRole ? " · role" : "") + "   wall    gen   other"
+		: "name" + (showRole ? " · role" : "") + "   wall";
+	cv.text(r.x, r.y, ellipsize(header, r.w), "dim");
+
+	const footerH = rows.length > 0 && r.h >= 4 ? 1 : 0;
+	const rowsAvail = Math.max(0, r.h - 1 - footerH);
+	for (let i = 0; i < rowsAvail; i++) {
+		const index = state.offset + i;
+		const row = rows[index];
+		if (!row) break;
+		const y = r.y + 1 + i;
+		const isCursor = state.focused && index === state.cursor;
+		const highlight = state.selectedId === row.node.id;
+		const dim = state.selectedId !== undefined && !highlight;
+
+		const wall = formatTimingCell(row.wallMs, { live: row.liveWall });
+		const gen = formatTimingCell(row.generationMs);
+		const other = formatTimingCell(row.otherMs);
+
+		const wallW = showExtra ? 8 : Math.max(6, Math.min(10, r.w - 12));
+		const genW = 7;
+		const otherW = 7;
+		const metaW = showExtra ? wallW + 1 + genW + 1 + otherW : wallW;
+		const nameBudget = Math.max(4, r.w - metaW - (showRole ? 5 : 1));
+
+		let name = ellipsize(row.node.name, nameBudget);
+		if (showRole) {
+			const abbr = roleAbbrev(row.node.role);
+			const room = nameBudget - cellWidth(name) - 1;
+			if (abbr && room >= cellWidth(abbr)) {
+				name = `${name} ${abbr}`;
+			}
+		}
+
+		cv.text(r.x, y, ellipsize(name, nameBudget), dim ? "dim" : roleColor(row.node.role), {
+			bold: !dim,
+			inverse: isCursor,
+		});
+
+		const metaX = r.x + r.w - metaW;
+		if (showExtra) {
+			cv.text(metaX, y, wall.padStart(wallW), highlight ? "text" : "dim", { maxX: r.x + r.w });
+			cv.text(metaX + wallW + 1, y, gen.padStart(genW), "dim", { maxX: r.x + r.w });
+			cv.text(metaX + wallW + 1 + genW + 1, y, other.padStart(otherW), "dim", { maxX: r.x + r.w });
+		} else {
+			cv.text(metaX, y, wall.padStart(wallW), highlight ? "text" : "dim", { maxX: r.x + r.w });
+		}
+		if (isCursor && highlight) cv.set(r.x + r.w - 1, y, "◂", "accent", { bold: true });
+	}
+
+	if (footerH && rows.length > 0) {
+		const started = rows.map((row) => row.node.startedAt);
+		const ended = rows.map((row) => (row.liveWall ? null : row.node.endedAt ?? row.node.startedAt + row.wallMs));
+		const ends = ended.filter((v): v is number => v !== null);
+		const span =
+			started.length && ends.length
+				? Math.max(0, Math.max(...ends) - Math.min(...started))
+				: null;
+		const sumWall = rows.reduce((sum, row) => sum + row.wallMs, 0);
+		const fy = r.y + r.h - 1;
+		const spanText = span === null ? "—" : formatDuration(span);
+		cv.text(r.x, fy, ellipsize(`span ${spanText} · sum ${formatDuration(sumWall)}`, r.w), "dim");
+	}
+
+	if (rows.length > rowsAvail && rowsAvail > 0) {
+		const thumb = Math.max(1, Math.round((rowsAvail / rows.length) * rowsAvail));
+		const pos = Math.round((state.offset / Math.max(1, rows.length - rowsAvail)) * (rowsAvail - thumb));
+		for (let i = 0; i < rowsAvail; i++) {
+			cv.set(
+				r.x + r.w - 1,
+				r.y + 1 + i,
+				i >= pos && i < pos + thumb ? "┃" : "│",
+				i >= pos && i < pos + thumb ? "scrollbarThumb" : "scrollbarTrack",
+			);
+		}
+	}
+}

package/src/tui/viz/railway.ts

@@ -9,7 +9,7 @@
  * vertical remains traceable.
  */
 
-import { formatAgentElapsed } from "../status.ts";
+import { formatAgentElapsed, formatActivityAgo } from "../status.ts";
 import { Canvas, ellipsize } from "./canvas.ts";
 import { formatCount, isAgent, type VizNode } from "./model.ts";
 import { roleColor, type VizTheme } from "./palette.ts";
@@ -18,6 +18,19 @@ export const RAIL_MAX_LANES = 4;
 export const RAIL_MAX_LANES_NARROW = 3;
 export const RAIL_NARROW_COLS = 80;
 export const RAIL_WINDOW_MS = 6 * 60 * 1000;
+/**
+ * Floor for the time axis. The right-hand column is measured from what the
+ * lanes actually need and the axis takes whatever is left, but never less
+ * than this — otherwise a long detail would push the graph off the line.
+ */
+export const RAIL_AXIS_MIN_COLS = 10;
+/** Widest a lane name column may grow (it is content-driven, not reserved). */
+export const RAIL_NAME_MAX_COLS = 16;
+/**
+ * Narrowest the lane-name column may shrink. Short names would otherwise
+ * collapse the column to 1 and leave the label cramped against the ▶ marker.
+ */
+export const RAIL_NAME_MIN_COLS = 6;
 
 /**
  * Map a timestamp onto the shared railway axis.
@@ -39,7 +52,7 @@ export interface RailInput {
 	nodes: readonly VizNode[];
 	now: number;
 	width: number;
-	/** Header "now" tok/s (live agents only; 0 when none running). */
+	/** Header tok/s (live agents only; 0 when none running). */
 	rate: number;
 	windowMs?: number;
 	/** Lane scroll position when more agents are live than lanes fit. */
@@ -141,6 +154,128 @@ export function formatRate(rate: number): string {
 	return `${formatCount(rate)} tok/s`;
 }
 
+
+/**
+ * Wide-lane detail after the name: role, turn/lifetime clocks, and
+ * 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
+ * turn's end) and stops when the agent itself ends.
+ *
+ * Clocks show from round 1. #159 gated them behind `turns >= 2`, but a child
+ * is usually dispatched with a single user message, so in practice that gate
+ * hid the clocks almost always and left the lane with a bare `role · 1s ago`
+ * (~13 cols) — the axis then absorbed the rest of the line. A round-1 agent
+ * 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(" · ");
+}
+
+/** Lane detail candidates, richest first (role → clocks → ago). */
+export function laneDetailCandidates(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,
+	];
+}
+
+/**
+ * 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`.
+ *
+ * Planning and painting must agree on this, otherwise the axis is sized for
+ * one width while the row is drawn at another and the tail gets clipped.
+ */
+export function railNameWidth(shown: readonly VizNode[]): number {
+	const longest = shown.length ? Math.max(...shown.map((n) => Array.from(n.name).length)) : 0;
+	return Math.max(RAIL_NAME_MIN_COLS, Math.min(RAIL_NAME_MAX_COLS, longest));
+}
+
+/**
+ * Pick the richest lane detail that fits `room` (role → clocks → ago).
+ *
+ * Callers pass the room shared by every lane, so a field that does not fit
+ * one lane is dropped from all of them instead of stripping the role from a
+ * single long-named row.
+ */
+export function fitRailLaneDetail(node: VizNode, now: number, room: number): string {
+	if (room <= 0) return "";
+	const candidates = laneDetailCandidates(node, now);
+	for (const candidate of candidates) {
+		if (Array.from(candidate).length <= room) return candidate;
+	}
+	return ellipsize(candidates[candidates.length - 1]!, room);
+}
+
+export interface RailColumnPlan {
+	/** Width reserved for the lane name. */
+	nameW: number;
+	/** Index into each lane's candidate list (0 = richest). */
+	grade: number;
+	/** Columns the right-hand block needs, including the ▶ marker. */
+	needed: number;
+}
+
+/**
+ * Measure the right-hand column from the lanes themselves.
+ *
+ * The name/detail block is content-driven: the axis takes whatever the
+ * terminal has left, down to `RAIL_AXIS_MIN_COLS`. Short labels hand the slack
+ * back to the graph; long ones shrink it — so a row always fills the line
+ * instead of trailing blank space after the detail text.
+ */
+export function railColumnPlan(
+	shown: readonly VizNode[],
+	now: number,
+	portrait: boolean,
+	width: number,
+	reserve = 0,
+): RailColumnPlan {
+	if (shown.length === 0) return { nameW: 0, grade: 0, needed: 0 };
+	const nameW = railNameWidth(shown);
+	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 { nameW, grade: 0, needed: label + 2 + reserve };
+	}
+	const candidates = shown.map((n) => laneDetailCandidates(n, now));
+	const grades = Array.from(
+		{ length: Math.max(...candidates.map((c) => c.length)) },
+		(_, g) => Math.max(...candidates.map((c) => Array.from(c[Math.min(g, c.length - 1)]!).length)),
+	);
+	// Richest grade that still leaves the axis its floor.
+	const budget = Math.max(0, width - 1 - reserve - RAIL_AXIS_MIN_COLS - nameW - 3);
+	let grade = grades.length - 1;
+	for (let g = 0; g < grades.length; g++) {
+		if (grades[g]! <= budget) {
+			grade = g;
+			break;
+		}
+	}
+	return { nameW, grade, needed: nameW + grades[grade]! + 3 + reserve };
+}
+
 export function renderRailway(input: RailInput): RailRender | undefined {
 	const width = Math.max(0, Math.floor(input.width));
 	if (width < 20) return undefined;
@@ -151,9 +286,14 @@ export function renderRailway(input: RailInput): RailRender | undefined {
 	if (rows === 0) return undefined;
 	const portrait = width < RAIL_NARROW_COLS;
 	const windowMs = input.windowMs ?? RAIL_WINDOW_MS;
-	const nameCol = portrait ? Math.max(8, Math.min(16, Math.floor(width * 0.32))) : Math.min(38, Math.max(24, Math.floor(width * 0.3)));
+	const live = current.total;
+	const above = current.offset > 0;
+	const below = current.offset + rows < live;
+	// Column widths are measured before the canvas exists: the axis gets the
+	// slack, the lanes get what they need.
+	const plan = railColumnPlan(current.shown, now, portrait, width, above || below ? 2 : 0);
 	const LX = 1;
-	const AW = Math.max(4, width - LX - nameCol - 2);
+	const AW = Math.max(RAIL_AXIS_MIN_COLS, Math.min(width - LX - 1, width - LX - plan.needed));
 	const canvas = new Canvas(width, rows + 1);
 	const hit: Array<Array<string | undefined>> = Array.from({ length: rows + 1 }, () => new Array<string | undefined>(width).fill(undefined));
 	const byId = new Map(nodes.map((node) => [node.id, node]));
@@ -227,9 +367,6 @@ export function renderRailway(input: RailInput): RailRender | undefined {
 		hit[y0 + r]![LX + c] = cell.owner;
 	}
 
-	const live = current.total;
-	const above = current.offset > 0;
-	const below = current.offset + rows < live;
 	const rateText = formatRate(input.rate);
 	const winLabel = ` −${Math.max(1, Math.round(windowMs / 60000))}m `;
 	canvas.text(LX + 1, 0, winLabel, "dim");
@@ -285,22 +422,18 @@ export function renderRailway(input: RailInput): RailRender | undefined {
 		const overflow = i === 0 && above ? " ▲" : i === rows - 1 && below ? " ▼" : "";
 		const avail = width - (nameX + 2) - overflow.length;
 		if (portrait) {
-			canvas.text(nameX + 2, y, ellipsize(node.name, avail), col, { bold: true });
+			const ago = formatActivityAgo(node.lastActivityAt, now);
+			const label = ago === "—" ? node.name : `${node.name} · ${ago}`;
+			canvas.text(nameX + 2, y, ellipsize(label, avail), col, { bold: true });
 		} else {
-			const longest = Math.max(...current.shown.map((n) => Array.from(n.name).length));
-			const nameW = Math.min(16, longest, Math.max(6, avail - 8));
+			// Paint with the same width the plan measured (clamped to what is
+			// actually available): mismatched widths sized the axis for one layout
+			// and drew another, clipping the tail of the detail text.
+			const nameW = Math.min(plan.nameW, Math.max(1, avail));
 			canvas.text(nameX + 2, y, ellipsize(node.name, nameW), col, { bold: true });
-			const room = Math.max(0, avail - nameW - 1);
-			const elapsed = formatAgentElapsed({
-				state: node.status,
-				startedAt: node.startedAt,
-				...(node.endedAt !== undefined ? { finishedAt: node.endedAt } : {}),
-				...(node.currentTurnStartedAt !== undefined ? { currentTurnStartedAt: node.currentTurnStartedAt } : {}),
-				...(node.currentTurnEndedAt !== undefined ? { currentTurnEndedAt: node.currentTurnEndedAt } : {}),
-			}, now);
-			const full = `${node.role} · ${elapsed}`;
-			const detail = ellipsize(Array.from(full).length <= room ? full : elapsed, room);
-			canvas.text(nameX + 3 + nameW, y, detail, "dim");
+			const candidates = laneDetailCandidates(node, now);
+			const detail = candidates[Math.min(plan.grade, candidates.length - 1)]!;
+			canvas.text(nameX + 3 + nameW, y, detail, "dim", { maxX: width - overflow.length });
 		}
 		if (overflow) canvas.text(width - overflow.length, y, overflow, "text", { bold: true });
 	});