pi-legion 2.0.3 → 2.0.4

package/src/tui/live-overlay.ts

@@ -21,6 +21,9 @@ import {
 } from "./chat-items.ts";
 
 export interface LiveOverlayNode extends Pick<LegionNode, "id" | "name" | "role" | "model" | "status" | "createdAt" | "updatedAt"> {
+	/** Null parent = root/主 agent; set for 子 agents so the modal title can mark 主/子. */
+	parentId?: string | null;
+	depth?: number;
 	turn?: number;
 	turns?: number;
 	sessionFile?: string | null;
@@ -147,6 +150,11 @@ const DEFAULT_BACKFILL_TURNS = 3;
 const DEFAULT_TERMINAL_ROWS = 24;
 const TOOL_COLLAPSED_PREVIEW_LINES = 10;
 const BACKFILL_POLL_INTERVAL_MS = 250;
+/** Outer dim mask rows when the terminal is tall enough for a clear floating modal. */
+const MODAL_MARGIN_Y_COMFORTABLE = 1;
+/** Outer dim mask columns (left/right) outside the modal border. */
+const MODAL_MARGIN_X_COMFORTABLE = 2;
+const MODAL_CLOSE_HINT = "Esc";
 
 /**
  * Build an on-demand context-viewer controller. Calling `open` subscribes to
@@ -287,7 +295,13 @@ function createSession(
 		return value;
 	};
 
-	const bodyPageSize = (): number => Math.max(0, currentTerminalRows() - 1);
+	/** Full terminal width last passed to render/handleMouse (modal chrome uses this). */
+	let terminalWidth = 80;
+
+	const layoutFor = (width = terminalWidth): ModalLayout =>
+		resolveModalLayout(currentTerminalRows(), Math.max(1, Math.floor(width)));
+
+	const bodyPageSize = (): number => layoutFor().bodyRows;
 
 	const mountNewItems = (): void => {
 		for (const item of mountedItems) {
@@ -661,13 +675,10 @@ function createSession(
 	};
 
 	let stopPending = false;
-	const headerLine = (width: number): string => {
-		const safeWidth = Math.max(1, Math.floor(width));
+
+	const titlePlain = (): string => {
 		const node = sourceNode();
-		if (!node) {
-			const missing = `● ${nodeId} · node unavailable`;
-			return style(options.theme, "dim", fitLine(missing, safeWidth));
-		}
+		if (!node) return `● ${nodeId} · node unavailable`;
 		const status = node.status;
 		const completed = status === "settled" || status === "failed" || status === "retired";
 		const elapsedEnd = completed ? node.updatedAt : now();
@@ -677,14 +688,42 @@ function createSession(
 			? `${Math.max(0, Math.round((now() - turnStartedAt) / 1_000))}s`
 			: undefined;
 		const turnLabel = `turn ${turnNumber}${turnElapsed !== undefined ? ` (${turnElapsed})` : ""}`;
-		const details = [
+		const kind = contextKindLabel(node, nodeId);
+		return [
 			`● ${safeText(node.name)} (${safeText(node.role)})`,
+			kind,
 			...(node.model ? [safeText(node.model)] : []),
 			turnLabel,
 			elapsed,
 			status,
-		];
-		return style(options.theme, completed ? "dim" : "accent", fitLine(details.join(" · "), safeWidth));
+		].join(" · ");
+	};
+
+	const titleBarInner = (innerWidth: number): string => {
+		const safeWidth = Math.max(1, Math.floor(innerWidth));
+		const node = sourceNode();
+		const completed = node !== undefined &&
+			(node.status === "settled" || node.status === "failed" || node.status === "retired");
+		if (stopPending) {
+			return style(
+				options.theme,
+				"accent",
+				fitLine(
+					`Stop ${safeText(node?.name ?? nodeId)}? Its own subagents are retired with it.  y stop · any other key cancel`,
+					safeWidth,
+				),
+			);
+		}
+		const closeHint = ` ${MODAL_CLOSE_HINT} `;
+		const closeWidth = visibleWidth(closeHint);
+		const titleBudget = Math.max(1, safeWidth - closeWidth);
+		const coloredTitle = style(
+			options.theme,
+			!node || completed ? "dim" : "accent",
+			fitLine(titlePlain(), titleBudget),
+		);
+		const pad = Math.max(0, titleBudget - visibleWidth(stripTerminalSequences(coloredTitle)));
+		return coloredTitle + " ".repeat(pad) + style(options.theme, "dim", closeHint);
 	};
 
 	const close = (): void => {
@@ -741,15 +780,22 @@ function createSession(
 	const component: LiveOverlayComponent = {
 		nodeId,
 		render(width) {
-			contentWidth = Math.max(1, Math.floor(width));
+			terminalWidth = Math.max(1, Math.floor(width));
+			const layout = layoutFor(terminalWidth);
+			contentWidth = layout.innerWidth;
 			lastBodyLines = renderBody(contentWidth);
 			syncScroll(lastBodyLines);
 			const start = Math.max(0, scrollTop);
-			const end = start + bodyPageSize();
-			const header = stopPending
-				? style(options.theme, "accent", fitLine(`Stop ${safeText(sourceNode()?.name ?? nodeId)}? Its own subagents are retired with it.  y stop · any other key cancel`, contentWidth))
-				: headerLine(contentWidth);
-			return [header, ...lastBodyLines.slice(start, end)];
+			const end = start + layout.bodyRows;
+			const visible = lastBodyLines.slice(start, end);
+			while (visible.length < layout.bodyRows) visible.push("");
+			return paintModalFrame({
+				layout,
+				theme: options.theme,
+				titleInner: titleBarInner(layout.innerWidth),
+				bodyLines: visible,
+				footerHint: "↑↓ scroll · Esc close · click mask to dismiss",
+			});
 		},
 		handleInput(data) {
 			if (!open) return;
@@ -794,20 +840,33 @@ function createSession(
 		},
 		handleMouse(event: TuiMouseEvent) {
 			if (!open) return undefined;
+			terminalWidth = Math.max(1, Math.floor(event.width));
+			const layout = layoutFor(terminalWidth);
+			contentWidth = layout.innerWidth;
 			if (event.type === "wheel" && event.wheelDelta) {
+				// Wheel anywhere over the overlay scrolls the modal body (mask included).
 				scrollBy(event.wheelDelta);
 				return { handled: true };
 			}
-			contentWidth = Math.max(1, Math.floor(event.width));
 			lastBodyLines = renderBody(contentWidth);
 			clampScroll(lastBodyLines);
-			const viewportY = event.y - 1;
-			if (viewportY < 0 || viewportY >= bodyPageSize()) return undefined;
-			const transcriptY = viewportY + scrollTop;
-			if (transcriptY >= lastBodyLines.length) return undefined;
+			const hit = hitTestModal(layout, event.x, event.y);
+			if (hit.zone === "mask" || hit.zone === "close") {
+				if (event.type === "click" && event.button === "left") {
+					// Esc / mask / close: dismiss only — never retire or stop (esc-no-retire-v3).
+					close();
+					return { handled: true };
+				}
+				return { handled: true };
+			}
+			if (hit.zone !== "body" || hit.bodyY === undefined) return { handled: true };
+			const transcriptY = hit.bodyY + scrollTop;
+			if (transcriptY >= lastBodyLines.length) return { handled: true };
 			return transcript.handleMouse({
 				...event,
+				x: hit.bodyX ?? 0,
 				y: transcriptY,
+				width: layout.innerWidth,
 				height: lastBodyLines.length,
 			});
 		},
@@ -872,3 +931,125 @@ function style(
 ): string {
 	return theme ? theme.fg(color, line) : line;
 }
+
+/** Label the viewed agent as 主 (root) or 子 (child) for the modal title bar. */
+export function contextKindLabel(node: LiveOverlayNode | undefined, nodeId: string): "主" | "子" {
+	if (node?.parentId === null || node?.depth === 0 || nodeId === "root") return "主";
+	if (node?.parentId !== undefined && node.parentId !== null) return "子";
+	if (node?.depth !== undefined && node.depth > 0) return "子";
+	// Infer from Legion id shape: root has no dots; children are parent.child…
+	return nodeId === "root" || !nodeId.includes(".") ? "主" : "子";
+}
+
+export interface ModalLayout {
+	rows: number;
+	cols: number;
+	marginY: number;
+	marginX: number;
+	titleRow: number;
+	bodyStartRow: number;
+	footerRow: number;
+	bodyRows: number;
+	innerWidth: number;
+	/** Column where modal border (│/┏) starts. */
+	frameCol: number;
+	/** Absolute screen x range of the Esc close hint in the title bar. */
+	closeColStart: number;
+	closeColEnd: number;
+}
+
+export function resolveModalLayout(rows: number, cols: number): ModalLayout {
+	const safeRows = Math.max(1, Math.floor(rows));
+	const safeCols = Math.max(1, Math.floor(cols));
+	// Prefer a 1-row dim mask; collapse it on short terminals so body still has room.
+	const marginY = safeRows >= 6 ? MODAL_MARGIN_Y_COMFORTABLE : 0;
+	const marginX = safeCols >= 24 ? MODAL_MARGIN_X_COMFORTABLE : safeCols >= 12 ? 1 : 0;
+	const chromeY = 2 * marginY + 2; // masks + title + footer
+	const bodyRows = Math.max(1, safeRows - chromeY);
+	const frameCol = marginX;
+	const innerWidth = Math.max(1, safeCols - 2 * marginX - 2);
+	const titleRow = marginY;
+	const bodyStartRow = marginY + 1;
+	const footerRow = marginY + 1 + bodyRows;
+	const closeWidth = visibleWidth(` ${MODAL_CLOSE_HINT} `);
+	const closeColEnd = frameCol + 1 + innerWidth;
+	const closeColStart = Math.max(frameCol + 1, closeColEnd - closeWidth);
+	return {
+		rows: safeRows,
+		cols: safeCols,
+		marginY,
+		marginX,
+		titleRow,
+		bodyStartRow,
+		footerRow,
+		bodyRows,
+		innerWidth,
+		frameCol,
+		closeColStart,
+		closeColEnd,
+	};
+}
+
+type ModalHitZone = "mask" | "close" | "title" | "body" | "footer";
+
+function hitTestModal(
+	layout: ModalLayout,
+	x: number,
+	y: number,
+): { zone: ModalHitZone; bodyX?: number; bodyY?: number } {
+	if (y < layout.marginY || y >= layout.rows - layout.marginY) return { zone: "mask" };
+	if (x < layout.frameCol || x >= layout.frameCol + layout.innerWidth + 2) return { zone: "mask" };
+	if (y === layout.titleRow) {
+		if (x >= layout.closeColStart && x < layout.closeColEnd) return { zone: "close" };
+		return { zone: "title" };
+	}
+	if (y === layout.footerRow) return { zone: "footer" };
+	if (y >= layout.bodyStartRow && y < layout.bodyStartRow + layout.bodyRows) {
+		return {
+			zone: "body",
+			bodyX: Math.max(0, x - (layout.frameCol + 1)),
+			bodyY: y - layout.bodyStartRow,
+		};
+	}
+	return { zone: "mask" };
+}
+
+function padToInner(line: string, innerWidth: number): string {
+	const clipped = fitLine(line, innerWidth);
+	const pad = Math.max(0, innerWidth - visibleWidth(stripTerminalSequences(clipped)));
+	return clipped + " ".repeat(pad);
+}
+
+function paintModalFrame(input: {
+	layout: ModalLayout;
+	theme: LiveOverlayTheme | undefined;
+	titleInner: string;
+	bodyLines: readonly string[];
+	footerHint: string;
+}): string[] {
+	const { layout, theme, titleInner, bodyLines, footerHint } = input;
+	const dim = (s: string) => style(theme, "dim", s);
+	const accent = (s: string) => style(theme, "accent", s);
+	const lines: string[] = [];
+	const maskLine = dim(" ".repeat(layout.cols));
+	const leftMask = dim(" ".repeat(layout.marginX));
+	const rightMaskWidth = Math.max(0, layout.cols - layout.marginX - layout.innerWidth - 2);
+	const rightMask = dim(" ".repeat(rightMaskWidth));
+	const top = leftMask + accent("┏") + padToInner(titleInner, layout.innerWidth) + accent("┓") + rightMask;
+	const bottom = leftMask +
+		accent("┗") +
+		padToInner(dim(` ${footerHint} `), layout.innerWidth) +
+		accent("┛") +
+		rightMask;
+
+	for (let i = 0; i < layout.marginY; i++) lines.push(maskLine);
+	lines.push(top);
+	for (let i = 0; i < layout.bodyRows; i++) {
+		const body = padToInner(bodyLines[i] ?? "", layout.innerWidth);
+		lines.push(leftMask + accent("┃") + body + accent("┃") + rightMask);
+	}
+	lines.push(bottom);
+	for (let i = 0; i < layout.marginY; i++) lines.push(maskLine);
+	while (lines.length < layout.rows) lines.push(maskLine);
+	return lines.slice(0, layout.rows);
+}

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/panels.ts

@@ -5,8 +5,9 @@ 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[];
@@ -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 {
@@ -536,3 +543,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/rate.ts

@@ -53,6 +53,8 @@ export class RateSampler {
 	private readonly series = new Map<string, Series>();
 	private readonly retentionMs: number;
 	private first: number | undefined;
+	/** Wall time of the latest tokensOut/gen change across all series (not flat-collapse moves). */
+	private lastChange: number | undefined;
 
 	constructor(options: { retentionMs?: number } = {}) {
 		this.retentionMs = options.retentionMs ?? DEFAULT_RETENTION_MS;
@@ -62,6 +64,15 @@ export class RateSampler {
 		return this.first;
 	}
 
+	/**
+	 * Latest timestamp where any series recorded a substantive tokensOut or
+	 * generationMs change. Flat-collapse (advancing a flat trailing sample to
+	 * `now`) does not move this — chart x-axis freezes until real data arrives.
+	 */
+	get lastChangeAt(): number | undefined {
+		return this.lastChange;
+	}
+
 	record(now: number, nodes: readonly VizNode[]): void {
 		if (!Number.isFinite(now)) return;
 		if (this.first === undefined) this.first = now;
@@ -85,9 +96,11 @@ export class RateSampler {
 			// Cumulative counters never decrease; ignore regressions from stale sources.
 			const value = last === undefined ? node.tokensOut : Math.max(last, node.tokensOut);
 			const gen = lastGen === undefined ? node.generationMs : Math.max(lastGen, node.generationMs);
+			const changed = last === undefined || value !== last || gen !== lastGen;
 			if (lastTs !== undefined && now <= lastTs) {
 				s.value[s.value.length - 1] = value;
 				s.gen[s.gen.length - 1] = gen;
+				if (changed) this.noteChange(lastTs);
 				continue;
 			}
 			if (
@@ -99,16 +112,23 @@ export class RateSampler {
 				s.gen[s.gen.length - 2] === lastGen
 			) {
 				// Collapse flat runs: move the trailing sample forward.
+				// Does NOT advance lastChangeAt — chart x-axis stays frozen.
 				s.ts[s.ts.length - 1] = now;
 				continue;
 			}
 			s.ts.push(now);
 			s.value.push(value);
 			s.gen.push(gen);
+			if (changed) this.noteChange(now);
 			this.prune(s, now);
 		}
 	}
 
+	private noteChange(at: number): void {
+		if (!Number.isFinite(at)) return;
+		this.lastChange = this.lastChange === undefined ? at : Math.max(this.lastChange, at);
+	}
+
 	private prune(s: Series, now: number): void {
 		const cutoff = now - this.retentionMs;
 		let drop = 0;
@@ -215,6 +235,7 @@ export class RateSampler {
 	clear(): void {
 		this.series.clear();
 		this.first = undefined;
+		this.lastChange = undefined;
 	}
 }