pi-crew 0.9.11 → 0.9.12

package/src/ui/widget/index.ts

@@ -13,7 +13,7 @@ import type { RunSnapshotCache, RunUiSnapshot } from "../snapshot-types.ts";
 import type { CrewTheme } from "../theme-adapter.ts";
 import { asCrewTheme, subscribeThemeChange } from "../theme-adapter.ts";
 import { truncate } from "../../utils/visual.ts";
-import { requestRender, setExtensionWidget } from "../pi-ui-compat.ts";
+import { requestRender, requestRenderTarget, setExtensionWidget } from "../pi-ui-compat.ts";
 import { spinnerBucket, spinnerFrame } from "../spinner.ts";
 import { runEventBus } from "../run-event-bus.ts";
 import { DEFAULT_UI } from "../../config/defaults.ts";
@@ -51,6 +51,35 @@ const LEGACY_WIDGET_KEY = "pi-crew";
 const WIDGET_KEY = "pi-crew-active";
 const STATUS_KEY = "pi-crew";
 
+// ── Terminal resize handling (T-2) ────────────────────────────────────
+// On a terminal resize the widget's cached render width goes stale until the
+// next invalidate; a mid-run resize could briefly paint a frame at the old
+// width. We register ONE debounced process-level listener (guarded so it never
+// accumulates across widget reinstalls) that busts the active widget's cache
+// and pokes Pi to repaint at the new width. The listener references a
+// module-level `activeResizeTarget` (the most-recently-mounted widget) rather
+// than a specific instance, so replaced widgets do not leak listeners.
+let resizeListenerInstalled = false;
+let activeResizeTarget: { invalidate(): void; requestRepaint(): void } | undefined;
+
+function installResizeListener(): void {
+	if (resizeListenerInstalled) return;
+	resizeListenerInstalled = true;
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	const onResize = (): void => {
+		if (timer) clearTimeout(timer);
+		// Debounce (~120ms) so a drag-resize doesn't thrash renders.
+		timer = setTimeout(() => {
+			timer = undefined;
+			activeResizeTarget?.invalidate();
+			activeResizeTarget?.requestRepaint();
+		}, 120);
+	};
+	process.on("SIGWINCH", onResize);
+	// Windows has no SIGWINCH; Node emits "resize" on stdout instead.
+	if (typeof process.stdout?.on === "function") process.stdout.on("resize", onResize);
+}
+
 // ── Widget Component ──────────────────────────────────────────────────
 
 interface WidgetComponent {
@@ -66,13 +95,21 @@ class CrewWidgetComponent implements WidgetComponent {
 	private cachedLines: string[] = [];
 	private cachedBaseLines: string[] = [];
 	private cachedTheme: CrewTheme;
+	private readonly tui: unknown;
 	private readonly unsubscribeTheme: () => void;
 	private readonly unsubscribeEventBus: () => void;
 
-	constructor(model: CrewWidgetModel, themeLike: unknown) {
+	constructor(model: CrewWidgetModel, themeLike: unknown, tui?: unknown) {
 		this.model = model;
 		this.theme = asCrewTheme(themeLike);
 		this.cachedTheme = this.theme;
+		this.tui = tui;
+		// Register as the active resize target and ensure the single, guarded
+		// terminal-resize listener is installed. On a resize the cached width
+		// goes stale; busting the cache + requesting a repaint refreshes the
+		// widget at the new width without waiting for the next event tick (T-2).
+		activeResizeTarget = this;
+		installResizeListener();
 		this.unsubscribeTheme = subscribeThemeChange(themeLike, () => this.invalidate());
 		this.unsubscribeEventBus = (() => {
 		const unsub1 = runEventBus.onChannel("run:state", () => this.invalidate());
@@ -114,9 +151,15 @@ class CrewWidgetComponent implements WidgetComponent {
 		this.cachedLines = [];
 	}
 
+	/** Poke the host TUI to repaint immediately (defensive: no-op if unavailable). */
+	requestRepaint(): void {
+		requestRenderTarget(this.tui);
+	}
+
 	dispose(): void {
 		this.unsubscribeTheme();
 		this.unsubscribeEventBus();
+		if (activeResizeTarget === this) activeResizeTarget = undefined;
 	}
 
 	render(width: number): string[] {
@@ -215,7 +258,7 @@ export function updateCrewWidget(
 		setExtensionWidget(
 			ctx,
 			WIDGET_KEY,
-			((_tui: unknown, theme: unknown) => new CrewWidgetComponent(model, theme)) as never,
+			((_tui: unknown, theme: unknown) => new CrewWidgetComponent(model, theme, _tui)) as never,
 			{ placement, persist: true },
 		);
 		state.lastVisibility = "visible";

package/src/ui/widget/widget-formatters.ts

@@ -8,9 +8,24 @@ import type { CrewAgentRecord } from "../../runtime/crew-agent-runtime.ts";
 import type { LiveAgentHandle } from "../../runtime/live-agent-manager.ts";
 import { getTaskUsage } from "../../runtime/usage-tracker.ts";
 import { computeLiveDurationMs } from "../live-duration.ts";
+import { visibleWidth } from "../../utils/visual.ts";
 
 // ── Token formatting ──────────────────────────────────────────────────
 
+// V-1: fixed visible widths for per-agent numeric metrics so columns don't
+// jitter every tick as values change width (e.g. 9.9s→10.0s, 950→1.0k).
+// alignMetric right-aligns to the width; values wider than the width overflow
+// verbatim (no truncation/crash) — these are rare one-off states, not jitter.
+const TOOLS_METRIC_WIDTH = 8;   // "127 tools"
+const TOKENS_METRIC_WIDTH = 10; // "1.2k tok", "12.3M tok"
+const CTX_METRIC_WIDTH = 7;     // "100% ctx"
+const DURATION_METRIC_WIDTH = 6; // "120.0s"
+
+function alignMetric(value: string, width: number): string {
+	const pad = Math.max(0, width - visibleWidth(value));
+	return " ".repeat(pad) + value;
+}
+
 export function formatTokensCompact(count: number): string {
 	if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M tok`;
 	if (count >= 1_000) return `${(count / 1_000).toFixed(1)}k tok`;
@@ -107,22 +122,22 @@ export function agentStats(agent: CrewAgentRecord, liveHandle?: LiveAgentHandle)
 	const parts: string[] = [];
 	if (liveHandle) {
 		const act = liveHandle.activity;
-		if (act.toolUses > 0) parts.push(`${act.toolUses} tools`);
+		if (act.toolUses > 0) parts.push(alignMetric(`${act.toolUses} tools`, TOOLS_METRIC_WIDTH));
 		const usage = getTaskUsage(liveHandle.taskId);
 		const total = (usage.input ?? 0) + (usage.output ?? 0) + (usage.cacheWrite ?? 0);
-		if (total > 0) parts.push(formatTokensCompact(total));
+		if (total > 0) parts.push(alignMetric(formatTokensCompact(total), TOKENS_METRIC_WIDTH));
 		try {
 			const stats = liveHandle.session.getSessionStats?.();
 			const ctxPct = stats?.contextUsage?.percent;
-			if (ctxPct != null) parts.push(`${Math.round(ctxPct)}% ctx`);
+			if (ctxPct != null) parts.push(alignMetric(`${Math.round(ctxPct)}% ctx`, CTX_METRIC_WIDTH));
 		} catch { /* ignore */ }
 		const ms = computeLiveDurationMs(act);
-		parts.push(`${(ms / 1000).toFixed(1)}s`);
+		parts.push(alignMetric(`${(ms / 1000).toFixed(1)}s`, DURATION_METRIC_WIDTH));
 	} else {
-		if (agent.toolUses) parts.push(`${agent.toolUses} tools`);
-		if (agent.progress?.tokens) parts.push(formatTokensCompact(agent.progress.tokens));
+		if (agent.toolUses) parts.push(alignMetric(`${agent.toolUses} tools`, TOOLS_METRIC_WIDTH));
+		if (agent.progress?.tokens) parts.push(alignMetric(formatTokensCompact(agent.progress.tokens), TOKENS_METRIC_WIDTH));
 		const age = elapsed(agent.completedAt ?? agent.startedAt);
-		if (age) parts.push(age);
+		if (age) parts.push(alignMetric(age, DURATION_METRIC_WIDTH));
 	}
 	return parts.join(" · ");
 }

package/src/ui/widget/widget-renderer.ts

@@ -5,7 +5,7 @@
  */
 
 import type { CrewTheme } from "../theme-adapter.ts";
-import { iconForStatus } from "../status-colors.ts";
+import { iconForStatus, colorizeStatusGlyphs } from "../status-colors.ts";
 import { truncate } from "../../utils/visual.ts";
 import { Box, Text } from "../layout-primitives.ts";
 import { listLiveAgents } from "../../runtime/live-agent-manager.ts";
@@ -89,19 +89,21 @@ export function buildWidgetLines(cwd: string, frame = 0, maxLines = 8, providedR
 
 		const liveForRun = listLiveAgents().filter((a) => a.runId === run.runId);
 
-		for (const agent of finishedAgents.slice(0, 2)) {
-			const liveHandle = liveForRun.find((h) => h.taskId === agent.taskId);
-			const name = liveHandle?.agent ?? agent.agent;
-			const icon = agent.status === "completed" ? "✓" : agent.status === "failed" ? "✗" : agent.status === "needs_attention" ? "⚠" : "▪";
-			const stats = agentStats(agent, liveHandle);
-			const desc = truncate(liveHandle?.description ?? agent.role ?? "", TASK_DESC_MAX);
-			const _finished = truncate(`│  ├─ ${icon} ${name} · ${desc}${stats ? ` · ${stats}` : ""}`, width);
-			lines.push(_finished);
-		}
-
-		const visibleAgents = activeAgents.slice(0, MAX_AGENTS_DISPLAY);
+		// L-4: prioritize RUNNING > QUEUED > WAITING within the visible window so the
+		// most relevant live workers are always shown. Finished rows fill only the
+		// leftover budget and never steal slots from running agents.
+		const ACTIVE_PRIORITY: Record<string, number> = { running: 0, queued: 1, waiting: 2 };
+		const prioritizedActive = [...activeAgents].sort(
+			(a, b) => (ACTIVE_PRIORITY[a.status] ?? 9) - (ACTIVE_PRIORITY[b.status] ?? 9),
+		);
+		// Finished rows only appear in slots not used by active agents (max 2). When
+		// there are >= MAX_AGENTS_DISPLAY live workers, finished rows are suppressed
+		// entirely so they cannot push a live agent's activity line off-screen.
+		const finishedSlots = Math.max(0, Math.min(2, MAX_AGENTS_DISPLAY - activeAgents.length));
+
+		const visibleAgents = prioritizedActive.slice(0, MAX_AGENTS_DISPLAY);
 		for (const [index, agent] of visibleAgents.entries()) {
-			const last = index === visibleAgents.length - 1 && activeAgents.length <= MAX_AGENTS_DISPLAY;
+			const last = index === visibleAgents.length - 1 && activeAgents.length <= MAX_AGENTS_DISPLAY && finishedSlots === 0;
 			const branch = last ? "└─" : "├─";
 			const agentGlyph = iconForStatus(agent.status, { runningGlyph });
 			const liveHandle = liveForRun.find((h) => h.taskId === agent.taskId);
@@ -118,6 +120,18 @@ export function buildWidgetLines(cwd: string, frame = 0, maxLines = 8, providedR
 			lines.push(truncate(`│  └─ … +${activeAgents.length - MAX_AGENTS_DISPLAY} more agents`, width));
 		}
 
+		for (const [index, agent] of finishedAgents.slice(0, finishedSlots).entries()) {
+			const liveHandle = liveForRun.find((h) => h.taskId === agent.taskId);
+			const name = liveHandle?.agent ?? agent.agent;
+			const icon = agent.status === "completed" ? "✓" : agent.status === "failed" ? "✗" : agent.status === "needs_attention" ? "⚠" : "▪";
+			const stats = agentStats(agent, liveHandle);
+			const desc = truncate(liveHandle?.description ?? agent.role ?? "", TASK_DESC_MAX);
+			const isLastFinished = index === Math.min(finishedAgents.length, finishedSlots) - 1;
+			const branch = isLastFinished ? "└─" : "├─";
+			const _finished = truncate(`│  ${branch} ${icon} ${name} · ${desc}${stats ? ` · ${stats}` : ""}`, width);
+			lines.push(_finished);
+		}
+
 		if (lines.length >= maxLines) break;
 	}
 
@@ -126,25 +140,15 @@ export function buildWidgetLines(cwd: string, frame = 0, maxLines = 8, providedR
 
 // ── Colorization ──────────────────────────────────────────────────────
 
-function statusGlyphColor(icon: string): Parameters<CrewTheme["fg"]>[0] {
-	const mapping: Record<string, Parameters<CrewTheme["fg"]>[0]> = {
-		"✓": "success",
-		"✗": "error",
-		"■": "warning",
-		"⏸": "warning",
-		"◦": "dim",
-		"·": "dim",
-		"▶": "accent",
-	};
-	return mapping[icon] ?? "accent";
-}
-
 export function colorWidgetLine(line: string, index: number, theme: CrewTheme): string {
 	let result = line;
 	if (index === 0) {
 		result = result.replace("Crew agents", theme.bold(theme.fg("accent", "Crew agents")));
 	}
-	result = result.replace(/[✓✗■⏸◦·▶]/g, (icon) => theme.fg(statusGlyphColor(icon), icon));
+	// Shared glyph colorizer covers ALL status glyphs — including ⏳ (waiting),
+	// ⚠ (needs_attention), and the braille spinner range ⠁-⣿ (running) — which the
+	// previous local statusGlyphColor map + regex omitted (F-1, V-3).
+	result = colorizeStatusGlyphs(result, theme);
 	if (index === 0) {
 		result = theme.fg("accent", result);
 	}

package/src/utils/visual.ts

@@ -39,8 +39,10 @@ const WIDE_RANGES: Array<[number, number]> = [
 	[0x1FA00, 0x1FAFF], // Symbols Extended-A
 	[0x1F000, 0x1F02F], // Mahjong, Dominos
 	[0xFE00, 0xFE0F],   // Variation Selectors (emoji presentation)
-	[0x200D, 0x200D],   // Zero Width Joiner (creates compound emoji)
 ];
+// NOTE: U+200D (Zero Width Joiner, ZWJ) is intentionally NOT listed as wide.
+// ZWJ has zero advance width by Unicode definition; miscounting it as 2 caused
+// slight over-truncation/over-padding of compound-emoji goals (T-1).
 
 function isWideCodePoint(code: number): boolean {
 	for (const [lo, hi] of WIDE_RANGES) {