pi-crew 0.11.0 → 0.11.2

package/src/ui/transcript-viewer.ts

@@ -3,8 +3,9 @@ import { matchesKey } from "@earendil-works/pi-tui";
 import { agentOutputPath, readCrewAgents } from "../runtime/crew-agent-records.ts";
 import type { TeamRunManifest } from "../state/types.ts";
 import { resolveRealContainedPath } from "../utils/safe-paths.ts";
-import { pad, truncate, truncateToVisualLines, truncateToVisualLinesTail } from "../utils/visual.ts";
+import { truncate, truncateToVisualLines, truncateToVisualLinesTail } from "../utils/visual.ts";
 import type { InteractiveComponent } from "./component.ts";
+import { canopyLine, formatHint, overflowHint, RAIL, railLine } from "./rail.ts";
 import { renderDiff } from "./render-diff.ts";
 import { colorForStatus, iconForStatus, type RunStatus } from "./status-colors.ts";
 import { highlightCode, highlightJson } from "./syntax-highlight.ts";
@@ -244,6 +245,21 @@ interface ViewerState {
 	sourceLen: number;
 }
 
+/**
+ * Overlay footer hints in the ONE rail hint format (`formatHint`): keys `label`
+ * pairs joined by ` · `, close action LAST, `Esc` spelled via `keyToken`.
+ * The bound keys/actions are unchanged — `handleInput` still reads j/k, PgUp/
+ * PgDn, g/G, a, f and q/Esc exactly as before.
+ */
+const VIEWER_HINTS = formatHint([
+	[["j", "k"], "scroll"],
+	[["pageup", "pagedown"], "page"],
+	["g/G", "top/bottom"],
+	["a", "auto"],
+	["f", "full/tail"],
+	[["q", "escape"], "close"],
+]);
+
 function renderViewerBase(state: ViewerState, width: number, lines: string[], title: string, subtitle: string): string[] {
 	const inner = Math.max(20, width - 4);
 	// PERF (2026-08-24): transcripts grow to thousands of lines; wrapping every
@@ -289,21 +305,23 @@ function renderViewerBase(state: ViewerState, width: number, lines: string[], ti
 	const totalLines = tailWindow ? skippedCount + visible.length : visualLines.length;
 	const totalLabel = tailWindow && skippedCount > 0 ? `≥ ${totalLines}` : `${totalLines}`;
 	const statusLine = `${totalLabel} lines · ${totalLines ? Math.round(((state.scroll + visible.length) / totalLines) * 100) : 100}% · auto-scroll ${state.autoScroll ? "on" : "off"}`;
-	const fg = (color: Parameters<TranscriptTheme["fg"]>[0], text: string) => state.theme.fg(color, text);
-	const row = (text: string) => `${fg("border", "│")} ${pad(truncate(text, inner), inner)} ${fg("border", "│")}`;
+	// RAIL frame (design system §2.E): `┏ NAME ▸ SUBJECT` canopy, `┃` body rows,
+	// `┗ <outcome/hint>` close. The rounded `╭─╮│╰─╯` box is retired. This
+	// viewer is a standalone overlay that paints its own frame, so the rail
+	// glyphs are correct here (dashboard PANES must not draw them).
+	const budget = Math.max(18, width - 2);
+	const row = (text: string) => railLine(RAIL.body, "border", text, state.theme, budget);
 	const linesOut: string[] = [
-		fg("border", `╭${"─".repeat(inner + 2)}╮`),
-		row(`${fg("accent", title)} ${fg("dim", subtitle)}`),
-		row(fg("dim", "j/k scroll · PgUp/PgDn · g/G top/bottom · a auto · f full/tail · q close")),
-		fg("border", `├${"─".repeat(inner + 2)}┤`),
-		...visible.map(row),
-		fg("border", `├${"─".repeat(inner + 2)}┤`),
-		row(fg("dim", statusLine)),
-		fg("border", `╰${"─".repeat(inner + 2)}╯`),
+		canopyLine({ word: "TRANSCRIPT", subject: title, theme: state.theme, budget, right: subtitle }),
+		row(state.theme.fg("dim", VIEWER_HINTS)),
 	];
 	if (skippedCount > 0) {
-		linesOut.splice(linesOut.length - 1, 0, row(fg("muted", `… (${skippedCount} lines truncated above`)));
+		// ONE overflow dialect (`▲ n above` / `▼ m below`) instead of the legacy
+		// `… (n lines truncated above` (which also never closed its paren).
+		linesOut.push(row(state.theme.fg("muted", overflowHint(skippedCount, 0, state.theme))));
 	}
+	for (const visibleLine of visible) linesOut.push(row(visibleLine));
+	linesOut.push(railLine(RAIL.close, "border", state.theme.fg("dim", statusLine), state.theme, budget));
 	return linesOut.map((line) => truncate(line, width));
 }
 

package/src/ui/widget/index.ts

@@ -14,17 +14,22 @@ import { truncate } from "../../utils/visual.ts";
 import { panelRowsFromRuns } from "../inline-panel/panel-rows.ts";
 import { panelDisplayState, setPanelRowsProvider, subscribePanelChange } from "../inline-panel/panel-store.ts";
 import { requestRender, requestRenderTarget, setExtensionWidget } from "../pi-ui-compat.ts";
+import type { RailSlot } from "../rail.ts";
 import type { OverlaySchedulerHandle } from "../shared-overlay-scheduler.ts";
 import { registerOverlayScheduler } from "../shared-overlay-scheduler.ts";
 import type { RunSnapshotCache } from "../snapshot-types.ts";
-import { spinnerBucket, spinnerFrame } from "../spinner.ts";
+import { spinnerBucket } from "../spinner.ts";
 import type { CrewTheme } from "../theme-adapter.ts";
 import { asCrewTheme, subscribeThemeChange } from "../theme-adapter.ts";
 import { buildTaskListLines } from "./task-list.ts";
 import { activeWidgetRuns, statusSummary } from "./widget-model.ts";
-import { buildWidgetLines, colorWidgetLine, DEFAULT_WIDGET_WIDTH, renderLines, schedulesWidgetLine } from "./widget-renderer.ts";
+import { buildWidgetLines, colorWidgetLine, idleWidgetLine, renderLines, schedulesWidgetLine, widgetRailSlot } from "./widget-renderer.ts";
 import type { CrewWidgetModel, CrewWidgetState, WidgetRun } from "./widget-types.ts";
 
+export {
+	NOTIFICATION_BADGE_CAP,
+	notificationBadge,
+} from "./widget-formatters.ts";
 export { activeWidgetRuns, statusSummary } from "./widget-model.ts";
 export {
 	buildWidgetLines as buildCrewWidgetLines,
@@ -39,27 +44,6 @@ export type {
 	WidgetRun,
 } from "./widget-types.ts";
 
-/**
- * Resolve the real render width for widget lines, in priority order:
- *   1. explicit `width` argument (e.g. from caller that already knows terminal width)
- *   2. `process.stdout.columns` (works in Node when stdout is a TTY)
- *   3. `DEFAULT_WIDGET_WIDTH` (100) — last-resort fallback so we never paint
- *      a line wider than the smallest expected TUI.
- *
- * Callers SHOULD pass the width they already hold (e.g. `WidgetRender.render(width)`
- * in this file already receives one). This helper exists for paths that don't.
- */
-export function getRenderWidth(width?: number): number {
-	if (Number.isFinite(width) && width! > 0) return Math.floor(width!);
-	const stdoutCols = (globalThis as { process?: { stdout?: { columns?: number } } }).process?.stdout?.columns;
-	if (Number.isFinite(stdoutCols) && stdoutCols! > 0) return Math.floor(stdoutCols!);
-	return DEFAULT_WIDGET_WIDTH;
-}
-export {
-	NOTIFICATION_BADGE_CAP,
-	notificationBadge,
-} from "./widget-formatters.ts";
-
 // ── Constants ─────────────────────────────────────────────────────────
 
 const MAX_LINES_DEFAULT = DEFAULT_UI.widgetMaxLines;
@@ -270,9 +254,9 @@ class CrewWidgetComponent implements WidgetComponent {
 		return sig;
 	}
 
-	private colorize(lines: string[], width: number): string[] {
+	private colorize(lines: string[], width: number, slot: RailSlot = "border"): string[] {
 		return renderLines(
-			lines.map((line, index) => colorWidgetLine(line, index, this.theme)),
+			lines.map((line, index) => colorWidgetLine(line, index, this.theme, slot)),
 			width,
 		);
 	}
@@ -334,14 +318,13 @@ class CrewWidgetComponent implements WidgetComponent {
 			this.cachedBuildSignatureAt = now;
 		}
 		const signature = `${sigBase}:${this.model.notificationCount ?? 0}`;
-		const runningGlyph = spinnerFrame("widget-header");
 
 		// Task-list variant: the run's plan above the editor (task-list.ts).
 		// No panel state, no spinner glyph — the list changes only on task
 		// transitions, which the run signature already covers.
 		if (this.variant === "tasks") {
 			if (this.cacheSignature !== signature || width !== this.cachedWidth || this.cachedTheme !== this.theme) {
-				this.cachedBaseLines = buildTaskListLines(runs, width);
+				this.cachedBaseLines = buildTaskListLines(runs, width, this.theme);
 				this.cachedLines = this.colorize(this.cachedBaseLines, width);
 				this.cachedWidth = width;
 				this.cachedTheme = this.theme;
@@ -372,11 +355,12 @@ class CrewWidgetComponent implements WidgetComponent {
 		const schedLine = schedulesWidgetLine(this.model.cwd, schedNow);
 		const signatureWithPanel = `${signature}|panel:${panel.selectedTaskId ?? ""}/${panel.viewedTaskId ?? ""}/${panel.focused ? 1 : 0}|sched:${schedLine ?? ""}`;
 
-		// The spinner-frame swap only belongs on the LEGACY header, whose line 0
-		// already starts with a glyph position (`<frame> Crew agents …`). The
-		// compact dock's line 0 is the HINT text ("agents (N) — ↓ to select"):
-		// swapping would visibly eat its first character on every frame.
-		const compactDock = this.model.rowStyle === "compact";
+		// RAIL (§2.B): the dock is ONE row whose identity is `CREW ▸ <subject>`
+		// and whose leading `┃` carries the AGGREGATE run state as its colour.
+		// The spinner rides INSIDE the row (buildWidgetLines composes it), so the
+		// old "swap line[0]'s first character" hack is gone — it would eat the
+		// rail glyph. The cache key still carries the spinner bucket when a worker
+		// is running, so the row rebuilds once per frame and animates.
 		if (this.cacheSignature !== signatureWithPanel || width !== this.cachedWidth || this.cachedTheme !== this.theme) {
 			this.cachedBaseLines = buildWidgetLines(
 				this.model.cwd,
@@ -385,12 +369,9 @@ class CrewWidgetComponent implements WidgetComponent {
 				runs,
 				this.model.notificationCount ?? 0,
 				width,
-				{ rowStyle: this.model.rowStyle, now: schedNow, ...panel },
-			).map((line, index) => {
-				if (!compactDock && index === 0 && line.length > 0) return `${runningGlyph}${line.slice(1)}`;
-				return line;
-			});
-			this.cachedLines = this.colorize(this.cachedBaseLines, width);
+				{ now: schedNow, ...panel },
+			);
+			this.cachedLines = this.colorize(this.cachedBaseLines, width, widgetRailSlot(runs));
 			this.cachedWidth = width;
 			this.cachedTheme = this.theme;
 			this.cacheSignature = signatureWithPanel;
@@ -408,20 +389,22 @@ class CrewWidgetComponent implements WidgetComponent {
 			// meaningful on run-transition frames, which always have runs>0 and take
 			// a different branch. At zero runs the only paintable content is the
 			// schedules line (or nothing).
-			// Single-line contract (round 3): the keep-alive row carries the
-			// ↓·enter interaction hint + the focused ❯ marker — identical to
-			// buildWidgetLines' zero-runs branch.
-			const zeroBase = `${schedLine} — ↓·enter`;
-			const focused = panel.focused === true;
-			return [truncate(focused ? `❯ ${zeroBase}` : zeroBase, width)];
+			// Single-line contract (round 3): the keep-alive row is the SAME
+			// `┃ CREW ▸ idle · ⏰ … ···· ↓·enter` row buildWidgetLines paints at zero
+			// runs (idleWidgetLine) — one helper, one row shape.
+			// Zero runs + no schedules = nothing to paint. Guard BEFORE composing:
+			// without it the row painted the literal string `undefined — ↓·enter`
+			// (live bug 2026-09-16: right after a team run finished,
+			// activeWidgetRuns() empties and schedulesWidgetLine() returns
+			// undefined). widget-renderer.buildWidgetLines has always guarded this
+			// branch; the component path did not.
+			if (!schedLine) return [];
+			const zeroLine = idleWidgetLine(schedLine, panel.focused === true, width);
+			if (!zeroLine) return [];
+			return [truncate(colorWidgetLine(zeroLine, 0, this.theme), width)];
 		}
 
 		this.ensureTruncated(width);
-		if (!compactDock) {
-			const updatedHeader = `${runningGlyph}${this.cachedBaseLines[0]?.slice(1) ?? ""}`;
-			this.cachedLines[0] = truncate(colorWidgetLine(updatedHeader, 0, this.theme), width);
-			this.truncatedLines[0] = truncate(this.cachedLines[0], width);
-		}
 		return this.truncatedLines;
 	}
 }
@@ -451,7 +434,6 @@ export function updateCrewWidget(
 	}
 
 	const runs = activeWidgetRuns(ctx.cwd, manifestCache, snapshotCache, preloadedManifests, workspaceId);
-	const rowStyle = config?.widgetRowStyle ?? DEFAULT_UI.widgetRowStyle;
 	// The inline panel navigates the same run list the widget paints, and this is
 	// the only place already holding the manifest/snapshot caches — so the row
 	// projection is registered here instead of re-reading state on every keypress.
@@ -524,7 +506,6 @@ export function updateCrewWidget(
 			snapshotCache,
 			preloadManifests: preloadedManifests,
 			workspaceId,
-			rowStyle,
 		};
 	else {
 		state.model.cwd = ctx.cwd;
@@ -535,7 +516,6 @@ export function updateCrewWidget(
 		state.model.snapshotCache = snapshotCache;
 		state.model.preloadManifests = preloadedManifests;
 		state.model.workspaceId = workspaceId;
-		state.model.rowStyle = rowStyle;
 	}
 
 	if (needsWidgetInstall) {

package/src/ui/widget/task-list.ts

@@ -1,18 +1,20 @@
 /**
- * task-list.ts — the run's plan, painted above the editor (pi-tasks /
- * Claude Code style): a `● N tasks (…)` header, then one row per task in
- * PLAN ORDER with task numbers (#1, #2, …) instead of technical ids.
+ * task-list.ts — the run's plan, painted above the editor, in the RAIL card
+ * grammar (design system §2.A): a `┏ PLAN ▸ <team/workflow>` canopy carrying
+ * the progress gauge, one `┃` row per task in PLAN ORDER with task numbers
+ * (#1, #2, …), and a `┗ <counts>` cap.
  * Completed rows are dimmed and struck through; the task actively executing
  * carries a spinner frame with elapsed time and token counts; queued rows
  * name the dependencies they wait on.
  *
  * Example:
  * ```
- * ● 4 tasks (1 done, 1 in progress, 2 open)
- *   ✔ #1 Design the flux capacitor
- *   ⠙ #2 Wire the overlay scroll (2m 49s · ↑ 4.1k ↓ 1.2k)
- *   ◻ #3 Run the suite › blocked by #2
- *   ◻ #4 Report the result
+ * ┏ PLAN ▸ default/build ···················· ▕████▎░░░░░▏ 2/5
+ * ┃ ✔ #1 Design the flux capacitor
+ * ┃ ⠙ #2 Wire the overlay scroll (2m 49s · ↑ 4.1k ↓ 1.2k)
+ * ┃ ◻ #3 Run the suite › blocked by #2
+ * ┃ ◻ #4 Report the result
+ * ┗ 2 done · 2 in progress
  * ```
  *
  * Pure plan surface: which worker/agent/model runs a task is the dock's
@@ -24,11 +26,21 @@
  */
 
 import type { TeamTaskState } from "../../state/types.ts";
-import { truncate } from "../../utils/visual.ts";
+import { visibleWidth } from "../../utils/visual.ts";
+import { formatCount } from "../format-helpers.ts";
+import { canopyLine, gaugeBar, overflowHint, RAIL, railLine, statusSlot } from "../rail.ts";
 import { spinnerFrame } from "../spinner.ts";
+import { asCrewTheme, type CrewTheme } from "../theme-adapter.ts";
 import { shortRunLabel } from "./widget-model.ts";
 import type { WidgetRun } from "./widget-types.ts";
 
+/** Plain (uncoloured) default — the widget component passes the real theme. */
+const PLAIN_THEME = asCrewTheme(undefined);
+
+/** Gauge width on the canopy line (eighth-block precision, so it stays
+ *  truthful even at 10 cells). */
+const GAUGE_WIDTH = 12;
+
 /** Task rows painted before the "… and N more" overflow line (pi-tasks
  *  defaults its `maxVisible` to 10). */
 const MAX_TASK_ROWS = 10;
@@ -125,21 +137,16 @@ function blockedSuffix(task: TeamTaskState, tasks: readonly TeamTaskState[], num
 }
 
 /** One line per task: `#n title` behind its status glyph — pi-tasks style.
- *  Completed titles are dimmed and struck through. */
-function taskRow(
-	task: TeamTaskState,
-	taskNumber: number,
-	tasks: readonly TeamTaskState[],
-	numberById: Map<string, number>,
-	width: number,
-): string {
+ *  Completed titles are dimmed and struck through. Returns the ROW CONTENT:
+ *  the rail glyph (`┃ `) is owned by `railLine`. */
+function taskRow(task: TeamTaskState, taskNumber: number, tasks: readonly TeamTaskState[], numberById: Map<string, number>): string {
 	const title = taskTitle(task);
 	const suffix = task.status === "running" ? runningSuffix(task) : blockedSuffix(task, tasks, numberById);
 	if (task.status === "completed") {
 		const struck = `${STRIKE_ON}${DIM_ON}#${taskNumber} ${title}${DIM_OFF}${STRIKE_OFF}`;
-		return truncate(`  ✔ ${struck}`.trimEnd(), width);
+		return `${taskStatusIcon(task)} ${struck}`;
 	}
-	return truncate(`  ${taskStatusIcon(task)} #${taskNumber} ${title}${suffix}`.trimEnd(), width);
+	return `${taskStatusIcon(task)} #${taskNumber} ${title}${suffix}`.trimEnd();
 }
 
 /** The run whose plan is shown: the first with unfinished work, else the first. */
@@ -163,15 +170,17 @@ function visibleTasks(tasks: readonly TeamTaskState[]): TeamTaskState[] {
 }
 
 /**
- * Build the task-list lines for the current runs. Empty when no run carries a
- * tasks slice (nothing to say — the dock alone stays).
+ * Build the plan card for the current runs: canopy (identity + gauge), one
+ * `┃` row per task, the overflow hint, and the `┗` counts cap. Empty when no
+ * run carries a tasks slice (nothing to say — the dock alone stays).
  */
-export function buildTaskListLines(runs: readonly WidgetRun[], width: number): string[] {
+export function buildTaskListLines(runs: readonly WidgetRun[], width: number, theme: CrewTheme = PLAIN_THEME): string[] {
 	const entry = primaryRun(runs);
 	if (!entry) return [];
 	const tasks = entry.snapshot?.tasks ?? [];
 	if (tasks.length === 0) return [];
 
+	const budget = Math.max(8, width - 2);
 	const numberById = new Map(tasks.map((task, index) => [task.id, index + 1]));
 	const done = tasks.filter((task) => task.status === "completed").length;
 	const dead = tasks.filter((task) => isDoneStatus(task.status) && task.status !== "completed").length;
@@ -179,20 +188,43 @@ export function buildTaskListLines(runs: readonly WidgetRun[], width: number): s
 		(task) => task.status === "running" || task.status === "waiting" || task.status === "needs_attention",
 	).length;
 	const open = tasks.filter((task) => task.status === "queued").length;
-
-	const counts = [`${done} done`];
-	if (dead) counts.push(`${dead} failed`);
-	counts.push(`${inProgress} in progress`, `${open} open`);
-	const headerParts = [`● ${tasks.length} tasks (${counts.join(", ")})`];
-	if (runs.length > 1) headerParts.push(shortRunLabel(entry.run));
-	const lines = [truncate(headerParts.join(" · "), width)];
+	const slot = statusSlot(entry.run.status);
+
+	// Canopy: `┏ PLAN ▸ <title>` + the progress gauge on the right, where a bar
+	// fits (a 12-cell bar plus its tally needs ~6 columns of clearance).
+	const title = shortRunLabel(entry.run);
+	const ratio = done / tasks.length;
+	const tally = `${done}/${tasks.length}`;
+	const gauge = `${gaugeBar(ratio, GAUGE_WIDTH, theme, dead > 0 ? "error" : "success")} ${tally}`;
+	const labelWidth = visibleWidth(`PLAN ${title}`) + 5; // word + ` ▸ `
+	const right = budget - labelWidth - 6 >= GAUGE_WIDTH + tally.length ? gauge : undefined;
+	const lines = [
+		canopyLine({
+			word: "PLAN",
+			subject: title,
+			theme,
+			budget,
+			slot,
+			right,
+		}),
+	];
 
 	const visible = visibleTasks(tasks);
 	for (const task of visible) {
-		lines.push(taskRow(task, numberById.get(task.id) ?? 0, tasks, numberById, width));
+		lines.push(railLine(RAIL.body, "border", taskRow(task, numberById.get(task.id) ?? 0, tasks, numberById), theme, budget));
 	}
-	if (tasks.length > visible.length) {
-		lines.push(truncate(`  … and ${tasks.length - visible.length} more`, width));
+	const hidden = tasks.length - visible.length;
+	if (hidden > 0) {
+		// Canonical overflow dialect (RAIL §1) — the legacy `… and N more` is
+		// retired with the other three overflow spellings.
+		lines.push(railLine(RAIL.body, "border", overflowHint(0, hidden, theme), theme, budget));
 	}
+
+	// Close cap: the counts (formatCount → singular/plural; the participle
+	// labels pass an explicit plural so nothing renders as `2 dones`).
+	const counts = [formatCount(done, "done", "done")];
+	if (dead) counts.push(formatCount(dead, "failed", "failed"));
+	counts.push(formatCount(inProgress, "in progress", "in progress"), formatCount(open, "open", "open"));
+	lines.push(railLine(RAIL.close, slot, counts.join(" · "), theme, budget));
 	return lines;
 }