pi-crew 0.11.0 → 0.11.2

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

@@ -3,16 +3,47 @@
  *
  * R8: Subscribes to session events for real-time streaming updates.
  * Falls back to polling LiveAgentHandle.activity when subscribe is unavailable.
+ *
+ * Frame (RAIL design language, M4/E1 2026-09-16):
+ *
+ *   ┏ LIVE ▸ explorer
+ *   ┃ ◉ building feature · turn 2/10 · 3 tools · 5.1s · ▕██░░░░░░▏ 24% ctx · sonnet
+ *   ┃ <streamed transcript rows…>
+ *   ┗ ↑/↓/PgUp/PgDn/G scroll · A pause · Esc/Q close ···· auto-scroll
+ *
+ * The rounded box (`╭─╮│╰─╯` + its two `│ ──── │` rules) is retired: the canopy
+ * opens the surface, every body row is a `┃` rail line, the `┗` close cap
+ * carries the hint (`formatHint`, close LAST) on the left and the scroll STATE
+ * (`auto-scroll` / `manual 12-30/31`) on the dot-led right segment, so the state
+ * is never the part that gets truncated. Chrome therefore drops from 6 rows to 3
+ * (canopy + meta + cap) and the viewport gains the three freed rows — keys,
+ * scroll rules and clamping are unchanged.
+ *
+ * Keyboard (P1-3: the overlay captures focus while open — see
+ * `handleInput` below for the full key set):
+ *   esc / q                            close, back to the main conversation
+ *   pgup / pgdn / ↑ ↓ / j k / g G      scroll the transcript
+ *   a                                  toggle auto-scroll
  */
+import { matchesKey } from "@earendil-works/pi-tui";
 import type { LiveAgentHandle } from "../runtime/live-session/live-agent-manager.ts";
-import { pad, truncate } from "../utils/visual.ts";
+import { truncate } from "../utils/visual.ts";
+import { formatCount } from "./format-helpers.ts";
 import { computeLiveDurationMs } from "./live-duration.ts";
+import { canopyLine, formatHint, gaugeBar, RAIL, railLeaders, railLine, statusSlot } from "./rail.ts";
 import { spinnerFrame } from "./spinner.ts";
 import { iconForStatus } from "./status-colors.ts";
-import type { CrewTheme } from "./theme-adapter.ts";
+import type { CrewTheme, CrewThemeColor } from "./theme-adapter.ts";
 
-const CHROME_LINES = 6;
+/** Chrome rows: canopy + meta row + close cap. Every other row is transcript. */
+const CHROME_LINES = 3;
 const MIN_VIEWPORT = 3;
+/** Lines moved by one ↑/k or ↓/j press. */
+const SCROLL_LINE_STEP = 1;
+/** Lines moved by one PgUp/PgDn press (same page size as the agent view overlay). */
+const SCROLL_PAGE_STEP = 10;
+/** Bar width of the `% ctx` gauge in the meta row. */
+const CTX_GAUGE_WIDTH = 8;
 
 export class LiveConversationOverlay {
 	private scrollOffset = 0;
@@ -31,11 +62,14 @@ export class LiveConversationOverlay {
 	private handle: LiveAgentHandle;
 	private theme: CrewTheme;
 
-	constructor(handle: LiveAgentHandle, theme: CrewTheme, columns = 80, rows = 24) {
+	private readonly nowMs: () => number;
+
+	constructor(handle: LiveAgentHandle, theme: CrewTheme, columns = 80, rows = 24, nowMs?: () => number) {
 		this.handle = handle;
 		this.theme = theme;
 		this.columns = columns;
 		this.rows = rows;
+		this.nowMs = nowMs ?? Date.now;
 		// R8: Subscribe to real session events if available
 		const session = handle.session as Record<string, unknown>;
 		if (typeof session.subscribe === "function") {
@@ -46,7 +80,7 @@ export class LiveConversationOverlay {
 					const text = typeof obj.text === "string" ? obj.text : typeof obj.content === "string" ? obj.content : "";
 					if (text.trim()) {
 						this.pushLine(text);
-						if (this.autoScroll) this.scrollOffset = Math.max(0, this.cachedLines.length - this.viewportHeight());
+						if (this.autoScroll) this.scrollOffset = this.maxScrollOffset();
 					}
 				});
 			} catch {
@@ -86,83 +120,182 @@ export class LiveConversationOverlay {
 
 	private refreshSummary(): void {
 		const act = this.handle.activity;
-		const summary = `${LiveConversationOverlay.SUMMARY_PREFIX}[${act.turnCount} turns · ${act.toolUses} tools · ${(computeLiveDurationMs(act) / 1000).toFixed(1)}s]`;
+		const summary = `${LiveConversationOverlay.SUMMARY_PREFIX}[${formatCount(act.turnCount ?? 0, "turn")} · ${formatCount(act.toolUses ?? 0, "tool")} · ${(computeLiveDurationMs(act, this.nowMs()) / 1000).toFixed(1)}s]`;
 		const lastLine = this.cachedLines[this.cachedLines.length - 1];
 		if (lastLine?.startsWith(LiveConversationOverlay.SUMMARY_PREFIX)) {
 			this.cachedLines[this.cachedLines.length - 1] = summary;
 		} else {
 			this.pushLine(summary);
 		}
-		if (this.autoScroll) this.scrollOffset = Math.max(0, this.cachedLines.length - this.viewportHeight());
+		if (this.autoScroll) this.scrollOffset = this.maxScrollOffset();
 	}
 
 	private viewportHeight(): number {
 		return Math.max(MIN_VIEWPORT, this.rows - CHROME_LINES);
 	}
 
+	/** Largest offset that still shows the newest line in the viewport. */
+	private maxScrollOffset(): number {
+		return Math.max(0, this.cachedLines.length - this.viewportHeight());
+	}
+
+	/**
+	 * autoScroll rule (M1-6):
+	 *   - a manual scroll always recomputes autoScroll from the position — the
+	 *     viewport tails the stream only while it sits at the newest line;
+	 *   - scrolling DOWN to (or past) the newest line therefore restores
+	 *     autoScroll, and scrolling UP away from it pauses it so incoming lines
+	 *     cannot yank the viewport back;
+	 *   - `a` toggles explicitly: turning it on jumps to the newest line,
+	 *     turning it off pauses wherever the viewport currently is.
+	 */
+	private scrollBy(delta: number): void {
+		this.scrollOffset = Math.max(0, Math.min(this.maxScrollOffset(), this.scrollOffset + delta));
+		this.autoScroll = this.scrollOffset >= this.maxScrollOffset();
+	}
+
+	/** Jump to the oldest buffered line. */
+	private scrollHome(): void {
+		this.scrollBy(-this.cachedLines.length);
+	}
+
+	/** Jump to the newest line (re-enables auto-scroll). */
+	private scrollEnd(): void {
+		this.scrollBy(this.cachedLines.length);
+	}
+
+	/** Toggle auto-scroll; turning it on jumps to the newest line. */
+	private toggleAutoScroll(): void {
+		if (this.autoScroll) this.autoScroll = false;
+		else this.scrollEnd();
+	}
+
+	/**
+	 * Handle a keypress while the overlay has focus. Mirrors the key set of
+	 * src/ui/inline-panel/agent-view-overlay.ts:160-182:
+	 *
+	 *   esc / q            close the overlay
+	 *   ↓ / j              scroll down one line
+	 *   ↑ / k              scroll up one line
+	 *   PgDn / PgUp        scroll one page
+	 *   g (home)           jump to the oldest buffered line
+	 *   G (end)            jump to the newest line (re-enables auto-scroll)
+	 *   a                  toggle auto-scroll
+	 *
+	 * The host component in src/extension/registration/viewers.ts intercepts
+	 * esc/q itself (it owns the `done()` callback) and forwards every other key
+	 * here; the esc/q branch below keeps this class self-contained for direct
+	 * callers and for the host contract. Unrecognised keys are ignored — the
+	 * overlay never leaks keys into the editor underneath.
+	 */
+	handleInput(data: string): void {
+		if (this.closed) return;
+		if (matchesKey(data, "escape") || data === "q") {
+			this.close();
+			return;
+		}
+		if (matchesKey(data, "down") || data === "j") {
+			this.scrollBy(SCROLL_LINE_STEP);
+			return;
+		}
+		if (matchesKey(data, "up") || data === "k") {
+			this.scrollBy(-SCROLL_LINE_STEP);
+			return;
+		}
+		if (matchesKey(data, "pageDown")) {
+			this.scrollBy(SCROLL_PAGE_STEP);
+			return;
+		}
+		if (matchesKey(data, "pageUp")) {
+			this.scrollBy(-SCROLL_PAGE_STEP);
+			return;
+		}
+		if (matchesKey(data, "home") || data === "g") {
+			this.scrollHome();
+			return;
+		}
+		if (matchesKey(data, "end") || data === "G") {
+			this.scrollEnd();
+			return;
+		}
+		if (data === "a") {
+			this.toggleAutoScroll();
+		}
+	}
+
+	/** Left half of the close cap: the key legend, through `formatHint`. */
+	private hintText(): string {
+		return formatHint([
+			[["up", "down", "pageup", "pagedown", "g", "G"], "scroll"],
+			["a", this.autoScroll ? "pause" : "resume"],
+			[["escape", "q"], "close"],
+		]);
+	}
+
+	/**
+	 * Right half of the close cap: the scroll STATE (dot-led so it can never be
+	 * the segment that gets truncated). Every key advertised is handled by
+	 * `handleInput` in BOTH states (P1-3: the old `↑/k ↓/j G/g` hint lived in an
+	 * autoScroll === false branch that could never be reached, because nothing
+	 * ever turned autoScroll off).
+	 */
+	private stateText(): string {
+		if (this.autoScroll) return "auto-scroll";
+		const total = this.cachedLines.length;
+		const from = total === 0 ? 0 : this.scrollOffset + 1;
+		const to = Math.min(total, this.scrollOffset + this.viewportHeight());
+		return `manual ${from}-${to}/${total}`;
+	}
+
 	render(width?: number): string[] {
 		const w = width ?? this.columns;
 		if (w < 6) return [];
 		const th = this.theme;
-		const innerW = w - 4;
-		const row = (content: string) => th.fg("border", "│") + " " + pad(truncate(content, innerW), innerW) + " " + th.fg("border", "│");
-		const hrTop = th.fg("border", `╭${"─".repeat(w - 2)}╮`);
-		const hrBot = th.fg("border", `╰${"─".repeat(w - 2)}╯`);
-		const hrMid = row(th.fg("dim", "─".repeat(innerW)));
+		const budget = w - 2;
+		const act = this.handle.activity;
+		const slot = statusSlot(this.handle.status);
 
 		const lines: string[] = [];
-		lines.push(hrTop);
+		// Canopy: ┏ LIVE ▸ <agent> (every identity field guarded — the handle is
+		// assembled at runtime and a missing name must never print `undefined`).
+		lines.push(canopyLine({ word: "LIVE", subject: this.handle.agent ?? this.handle.taskId ?? "?", theme: th, budget }));
 
-		// Header
+		// Meta row: status glyph, description, then the counters.
 		const statusIcon =
 			this.handle.status === "running"
-				? th.fg("accent", spinnerFrame(this.handle.taskId ?? this.handle.agentId))
+				? th.fg("accent", spinnerFrame(this.handle.taskId ?? this.handle.agentId ?? ""))
 				: iconForStatus(this.handle.status);
-		const name = this.handle.agent ?? this.handle.taskId;
-		const act = this.handle.activity;
-		const elapsed = `${(computeLiveDurationMs(act) / 1000).toFixed(1)}s`;
-		const headerParts: string[] = [];
-		if (act.maxTurns != null) headerParts.push(`turn ${act.turnCount}/${act.maxTurns}`);
-		else if (act.turnCount > 0) headerParts.push(`turn ${act.turnCount}`);
-		if (act.toolUses > 0) headerParts.push(`${act.toolUses} tools`);
-		headerParts.push(elapsed);
-
-		// Context % + compaction
+		const desc = this.handle.description ?? this.handle.role ?? "";
+		const parts: string[] = [];
+		if (act.maxTurns != null) parts.push(`turn ${act.turnCount ?? 0}/${act.maxTurns}`);
+		else if ((act.turnCount ?? 0) > 0) parts.push(`turn ${act.turnCount}`);
+		if ((act.toolUses ?? 0) > 0) parts.push(formatCount(act.toolUses ?? 0, "tool"));
+		parts.push(`${(computeLiveDurationMs(act, this.nowMs()) / 1000).toFixed(1)}s`);
 		try {
 			const ctxPct = this.handle.session.getSessionStats?.()?.contextUsage?.percent;
 			if (ctxPct != null) {
-				const color = ctxPct >= 85 ? "error" : ctxPct >= 70 ? "warning" : "dim";
-				headerParts.push(th.fg(color, `${Math.round(ctxPct)}% ctx`));
+				const color: CrewThemeColor = ctxPct >= 85 ? "error" : ctxPct >= 70 ? "warning" : "dim";
+				parts.push(th.fg(color, `${gaugeBar(ctxPct / 100, CTX_GAUGE_WIDTH, th, color)} ${Math.round(ctxPct)}% ctx`));
 			}
 		} catch {
 			/* ignore */
 		}
-		if (act.compactionCount > 0) headerParts.push(th.fg("dim", `↻${act.compactionCount}`));
-		// Model name
-		if (this.handle.modelName) headerParts.push(th.fg("muted", this.handle.modelName));
+		if ((act.compactionCount ?? 0) > 0) parts.push(th.fg("dim", `↻${act.compactionCount}`));
+		if (this.handle.modelName) parts.push(th.fg("muted", this.handle.modelName));
+		const describe = desc ? `${th.fg("muted", desc)} ${th.fg("dim", "·")} ` : "";
+		lines.push(railLine(RAIL.body, slot, truncate(`${statusIcon} ${describe}${th.fg("dim", parts.join(" · "))}`, budget), th, budget));
 
-		const desc = this.handle.description ?? this.handle.role ?? "";
-		lines.push(
-			row(
-				`${statusIcon} ${th.fg("accent", name)}  ${th.fg("muted", desc)} ${th.fg("dim", "·")} ${th.fg("dim", headerParts.join(" · "))}`,
-			),
-		);
-		lines.push(hrMid);
-
-		// Content
+		// Transcript body.
 		const vh = this.viewportHeight();
 		const visible = this.cachedLines.slice(this.scrollOffset, this.scrollOffset + vh);
 		for (const line of visible) {
-			lines.push(row(th.fg("dim", line)));
+			lines.push(railLine(RAIL.body, "border", th.fg("dim", truncate(line, budget)), th, budget));
 		}
 
-		// Footer
-		lines.push(hrMid);
-		const footerText = this.autoScroll
-			? "auto-scroll · esc/q close"
-			: `line ${this.scrollOffset + 1}/${this.cachedLines.length} · ↑/k ↓/j G/g · esc/q close`;
-		lines.push(row(th.fg("dim", footerText)));
-		lines.push(hrBot);
+		// Close cap: hint (left) ···· scroll state (right).
+		lines.push(
+			railLine(RAIL.close, slot, railLeaders(th.fg("dim", this.hintText()), th.fg("dim", this.stateText()), budget, th), th, budget),
+		);
 		return lines;
 	}
 

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

@@ -5,9 +5,12 @@ import { readCrewAgents } from "../runtime/crew-agent-records.ts";
 import { formatTaskGraphLines, waitingReason } from "../runtime/task-display.ts";
 import { loadRunManifestById } from "../state/stores/state-store.ts";
 import type { TeamTaskState } from "../state/types.ts";
-import { aggregateUsage, formatUsage } from "../state/usage.ts";
+import { aggregateUsage, formatTokens } from "../state/usage.ts";
 import { readJsonFileCoalesced } from "../utils/file-coalescer.ts";
-import { pad, truncate } from "../utils/visual.ts";
+import { truncate } from "../utils/visual.ts";
+import { formatCount, teamWorkflowLabel } from "./format-helpers.ts";
+import { DASHBOARD_KEYS } from "./keybinding-map.ts";
+import { ACTIVE, canopyLine, formatHint, RAIL, type RailSlot, railLine, sectionLine, shortId, statusSlot } 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";
@@ -21,13 +24,11 @@ const TASK_READ_TTL_MS = 200;
 
 type Done = (value: undefined) => void;
 
-function line(text: string, width: number): string {
-	return `│ ${pad(truncate(text, width - 4), width - 4)} │`;
-}
-
-function border(left: string, fill: string, right: string, width: number): string {
-	return `${left}${fill.repeat(Math.max(0, width - 2))}${right}`;
-}
+/** The ONE footer hint of the sidebar: keys label pairs, close LAST (RAIL §1). */
+const SIDEBAR_HINT: ReadonlyArray<readonly [string, string]> = [
+	["/team-dashboard", "details"],
+	[DASHBOARD_KEYS.close[0] ?? "q", "close"],
+];
 
 function readTasks(path: string): TeamTaskState[] {
 	const parse = () => {
@@ -43,7 +44,25 @@ function readTasks(path: string): TeamTaskState[] {
 
 function shortUsage(tasks: TeamTaskState[]): string {
 	const usage = aggregateUsage(tasks);
-	return usage ? formatUsage(usage) : "usage=(none)";
+	return usage ? compactUsage(usage) : "usage=(none)";
+}
+
+/**
+ * TUI form of a usage record: `↑2.8k ↓3.7k $0.000`.
+ *
+ * `formatUsage` (state/usage.ts) is the `key=value` form used by CLI/status
+ * output (`input=2780, output=3715, cacheRead=57216, cost=0.000000, turns=0`) —
+ * correct for a log line, but on a 118-column rail row it buries the numbers
+ * the eye actually wants. The card's usage row has always used this compact
+ * form; the sidebar now matches it.
+ */
+function compactUsage(usage: ReturnType<typeof aggregateUsage>): string {
+	if (!usage) return "usage=(none)";
+	const parts: string[] = [];
+	if (usage.input !== undefined) parts.push(`↑${formatTokens(usage.input)}`);
+	if (usage.output !== undefined) parts.push(`↓${formatTokens(usage.output)}`);
+	if (usage.cost !== undefined && Number.isFinite(usage.cost) && usage.cost > 0) parts.push(`$${usage.cost.toFixed(3)}`);
+	return parts.length > 0 ? parts.join(" ") : "usage=(none)";
 }
 
 export class LiveRunSidebar {
@@ -147,13 +166,14 @@ export class LiveRunSidebar {
 
 	render(width: number): string[] {
 		const w = Math.max(36, width);
+		const budget = w - 2;
 
 		// P0-6: render from snapshots only — never read disk on every render tick.
 		// Production wires a snapshotCache (extension/registration/ui.ts). When
-		// the cache hasn't populated yet we paint a single "(loading…)" line so
-		// the pre-load frame is well-formed instead of an empty panel. When the
-		// cache is undefined (tests/dev) we fall back to direct disk reads so
-		// existing unit tests keep working.
+		// the cache hasn't populated yet we paint a well-formed two-row frame so
+		// the pre-load surface still wears the rail; when the cache is undefined
+		// (tests/dev) we fall back to direct disk reads so existing unit tests
+		// keep working.
 		let run: import("../state/types.ts").TeamRunManifest;
 		let tasks: TeamTaskState[];
 		let rawAgents: ReturnType<typeof readCrewAgents>;
@@ -165,7 +185,16 @@ export class LiveRunSidebar {
 				snapshot = undefined;
 			}
 			if (!snapshot) {
-				return ["(loading…)"];
+				// A well-formed pre-load frame: same canopy/cap grammar as the loaded
+				// one, with a single dim status row.
+				return this.renderFrame(
+					[
+						canopyLine({ word: "LIVE", subject: shortId(this.runId), theme: this.theme, budget }),
+						railLine(RAIL.body, "border", this.theme.fg("dim", "loading…"), this.theme, budget),
+					],
+					budget,
+					"border",
+				);
 			}
 			run = snapshot.manifest;
 			tasks = snapshot.tasks;
@@ -173,14 +202,13 @@ export class LiveRunSidebar {
 		} else {
 			const loaded = loadRunManifestById(this.cwd, this.runId); // NOTE: no withRunLock - best-effort only; concurrent writes may cause inconsistency;
 			if (!loaded) {
-				return renderLines(
+				return this.renderFrame(
 					[
-						border("╭", "─", "╮", w),
-						line(`${this.theme.fg("accent", "▐")} ${this.theme.bold("pi-crew live sidebar")}`, w),
-						line("run not found", w),
-						border("╰", "─", "╯", w),
+						canopyLine({ word: "LIVE", subject: shortId(this.runId), theme: this.theme, budget }),
+						railLine(RAIL.body, "border", this.theme.fg("muted", "run not found"), this.theme, budget),
 					],
-					w,
+					budget,
+					"border",
 				);
 			}
 			run = loaded.manifest;
@@ -194,6 +222,10 @@ export class LiveRunSidebar {
 		const waiting = tasks.filter((task) => task.status === "queued");
 		const signature = this.buildSignature(run.updatedAt, tasks, agents, waiting.length, snapshot);
 		if (signature !== this.cachedSignature || w !== this.cachedWidth) {
+			// RAIL (§2.E): the rounded `╭─╮│╰─╯` box is retired — the surface is a
+			// `┏ LIVE ▸ <run8>` canopy, `┃` body rows, `┣ SECTION` headers and a
+			// `┗ <hint>` cap. The rail colour carries the run's state.
+			const slot: RailSlot = statusSlot(run.status);
 			// L-2: surface the cancellation/failure reason for terminal runs so the
 			// user sees *why* a run ended without having to switch panes. The reason
 			// is already computed on the consumed snapshot (cancellationReason).
@@ -203,59 +235,98 @@ export class LiveRunSidebar {
 					? ` · ${truncate(snapshot.cancellationReason, 40)}`
 					: "";
 			const lines: string[] = [
-				border("╭", "─", "╮", w),
-				line(`${this.theme.fg("accent", "▐")} ${this.theme.bold("pi-crew live sidebar")}`, w),
-				line(`${run.runId.slice(-12)} · ${run.status}${reasonSuffix} · right default`, w),
-				line(`${run.team}/${run.workflow ?? "none"} · ${shortUsage(tasks)}`, w),
-				border("├", "─", "┤", w),
-				line(`Active agents (${active.length})`, w),
+				canopyLine({ word: "LIVE", subject: shortId(run.runId), theme: this.theme, budget, slot }),
+				railLine(
+					RAIL.body,
+					"border",
+					this.theme.fg(
+						"muted",
+						`${shortId(run.runId)} · ${run.status ?? "?"}${reasonSuffix} · ${run.workspaceMode ?? "single"}`,
+					),
+					this.theme,
+					budget,
+				),
+				railLine(
+					RAIL.body,
+					"border",
+					this.theme.fg("muted", `${teamWorkflowLabel(run.team, run.workflow)} · ${shortUsage(tasks)}`),
+					this.theme,
+					budget,
+				),
+				sectionLine({ name: "active", subject: formatCount(active.length, "agent"), theme: this.theme, budget, slot }),
 			];
 			for (const agent of active.slice(0, 8)) {
 				const status = iconForStatus(agent.status, {
 					runningGlyph: spinnerFrame(agent.taskId),
 				});
 				const usage = agent.usage
-					? formatUsage(agent.usage)
+					? compactUsage(agent.usage)
 					: agent.progress?.tokens
 						? `tokens=${agent.progress.tokens}`
 						: "usage=pending";
-				lines.push(line(`${status} ${agent.taskId} ${agent.role}->${agent.agent}`, w));
+				// The record comes from unvalidated `agents.json` — every field is
+				// guarded (`?? "?"`) and the legacy `role->agent` separator is `▸`.
 				lines.push(
-					line(
-						`  ${agent.routing ? `model ${agent.routing.requested ? `${agent.routing.requested} → ` : ""}${agent.routing.resolved}` : agent.model ? `model ${agent.model}` : "model pending"}`,
-						w,
+					railLine(
+						RAIL.body,
+						"border",
+						`${status} ${agent.taskId ?? "?"} ${agent.role ?? "?"} ${ACTIVE} ${agent.agent ?? "?"}`,
+						this.theme,
+						budget,
 					),
 				);
 				lines.push(
-					line(
-						`  ${agent.progress?.currentTool ? `tool ${agent.progress.currentTool} · ` : ""}${agent.toolUses ?? 0} tools · ${usage}`,
-						w,
+					railLine(
+						RAIL.body,
+						"border",
+						this.theme.fg(
+							"muted",
+							`  ${agent.routing ? `model ${agent.routing.requested ? `${agent.routing.requested} → ` : ""}${agent.routing.resolved ?? "pending"}` : agent.model ? `model ${agent.model}` : "model pending"}`,
+						),
+						this.theme,
+						budget,
+					),
+				);
+				lines.push(
+					railLine(
+						RAIL.body,
+						"border",
+						this.theme.fg(
+							"muted",
+							`  ${agent.progress?.currentTool ? `tool ${agent.progress.currentTool} · ` : ""}${formatCount(agent.toolUses ?? 0, "tool")} · ${usage}`,
+						),
+						this.theme,
+						budget,
 					),
 				);
 			}
-			if (!active.length) lines.push(line("- none", w));
-			lines.push(border("├", "─", "┤", w), line(`Waiting tasks (${waiting.length})`, w));
+			if (!active.length) lines.push(this.bodyRow(this.theme.fg("dim", "none"), budget));
+			lines.push(sectionLine({ name: "waiting", subject: formatCount(waiting.length, "task"), theme: this.theme, budget, slot }));
 			for (const task of waiting.slice(0, 8)) {
 				const status = iconForStatus("queued");
-				lines.push(line(`${status} ${task.id} ${waitingReason(task, tasks) ?? "waiting"}`, w));
+				lines.push(this.bodyRow(`${status} ${task.id ?? "?"} ${waitingReason(task, tasks) ?? "waiting"}`, budget));
 			}
-			if (waiting.length === 0) lines.push(line("- none", w));
-			lines.push(border("├", "─", "┤", w), line(`Completed agents (${completed.length})`, w));
+			if (waiting.length === 0) lines.push(this.bodyRow(this.theme.fg("dim", "none"), budget));
+			lines.push(sectionLine({ name: "done", subject: formatCount(completed.length, "agent"), theme: this.theme, budget, slot }));
 			for (const agent of completed) {
 				const status = iconForStatus(agent.status === "running" ? "stopped" : agent.status);
 				lines.push(
-					line(
-						`${status} ${agent.taskId} ${agent.model ? `· ${agent.model}` : ""}${agent.usage ? ` · ${formatUsage(agent.usage)}` : ""}`,
-						w,
+					this.bodyRow(
+						`${status} ${agent.taskId ?? "?"} ${agent.model ? `· ${agent.model}` : ""}${agent.usage ? ` · ${compactUsage(agent.usage)}` : ""}`,
+						budget,
 					),
 				);
 			}
-			if (completed.length === 0) lines.push(line("- none", w));
-			lines.push(border("├", "─", "┤", w));
-			for (const entry of formatTaskGraphLines(tasks).slice(0, 6)) lines.push(line(entry, w));
-			lines.push(line("q close · /team-dashboard details", w));
-			// F-6: compute the auto-close countdown BEFORE pushing the bottom border
-			// so the countdown renders inside the bordered box rather than below it.
+			if (completed.length === 0) lines.push(this.bodyRow(this.theme.fg("dim", "none"), budget));
+			lines.push(sectionLine({ name: "tasks", subject: formatCount(tasks.length, "task"), theme: this.theme, budget, slot }));
+			for (const entry of formatTaskGraphLines(tasks).slice(0, 6)) {
+				// `formatTaskGraphLines` (src/runtime/task-display.ts) still emits the
+				// legacy `role->agent` separator; normalize it at the render boundary
+				// so no `->` can reach the TUI (§4 consistency fix).
+				lines.push(this.bodyRow(this.theme.fg("muted", entry.replace(/->/g, ACTIVE)), budget));
+			}
+			// F-6: compute the auto-close countdown BEFORE the cap so the countdown
+			// renders inside the frame rather than below it.
 			// Auto-close logic: if run is terminal and no active agents, close after delay
 			const isTerminal = ["completed", "failed", "cancelled", "blocked"].includes(run.status);
 			const hasActiveAgents = agents.some((a) => a.status === "running");
@@ -268,7 +339,7 @@ export class LiveRunSidebar {
 						this.done(undefined);
 					}, autoCloseMs);
 					this.autoCloseTimeout?.unref();
-					lines.push(line(`auto-close in ${Math.round(autoCloseMs / 1000)}s…`, w));
+					lines.push(this.bodyRow(this.theme.fg("dim", `auto-close in ${Math.round(autoCloseMs / 1000)}s…`), budget));
 				}
 			}
 			// Clear timeout if conditions change
@@ -276,17 +347,25 @@ export class LiveRunSidebar {
 				clearTimeout(this.autoCloseTimeout);
 				this.autoCloseTimeout = undefined;
 			}
-			lines.push(border("╰", "─", "╯", w));
-			this.cachedLines = renderLines(
-				lines.map((entry) => this.colorLine(entry)),
-				w,
-			);
+			this.cachedLines = renderLines(this.renderFrame(lines, budget, slot), w);
 			this.cachedSignature = signature;
 			this.cachedWidth = w;
 		}
 		return this.cachedLines;
 	}
 
+	/** One `┃` body row (glyph + colour owned by the rail helper). */
+	private bodyRow(content: string, budget: number): string {
+		return railLine(RAIL.body, "border", content, this.theme, budget);
+	}
+
+	/** Append the `┗ <hint>` cap and colorize the glyphs (F-1 / V-3). */
+	private renderFrame(lines: string[], budget: number, slot: RailSlot): string[] {
+		const hint = this.theme.fg("dim", formatHint(SIDEBAR_HINT));
+		const framed = [...lines, railLine(RAIL.close, slot, hint, this.theme, budget)];
+		return framed.map((entry) => this.colorLine(entry));
+	}
+
 	handleInput(data: string): void {
 		if (data === "q" || data === "\u001b") this.done(undefined);
 	}