pi-crew 0.1.46 → 0.1.49

package/src/ui/loaders.ts

@@ -1,158 +1,158 @@
-import { pad, truncate } from "../utils/visual.ts";
-import type { CrewTheme } from "./theme-adapter.ts";
-import { asCrewTheme } from "./theme-adapter.ts";
-import { DynamicCrewBorder } from "./dynamic-border.ts";
-
-export interface BorderedLoaderOptions {
-	message: string;
-	cancellable?: boolean;
-	frames?: string[];
-	intervalMs?: number;
-	minWidth?: number;
-	onAbort?: () => void;
-}
-
-const DEFAULT_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-
-export class CrewBorderedLoader {
-	private readonly abortController = new AbortController();
-	private readonly frameOptions: string[];
-	private readonly intervalMs: number;
-	private readonly minWidth: number;
-	private readonly onAbort?: () => void;
-	private theme: CrewTheme;
-	private message: string;
-	private lineCache = "";
-	private width = 0;
-	private startedAt = Date.now();
-
-	constructor(_ui: unknown, themeLike: unknown, options: BorderedLoaderOptions) {
-		const theme = asCrewTheme(themeLike);
-		this.theme = theme;
-		this.message = options.message;
-		this.minWidth = Math.max(12, options.minWidth ?? 24);
-		this.onAbort = options.onAbort;
-		this.frameOptions = options.frames ?? DEFAULT_FRAMES;
-		this.intervalMs = Math.max(40, options.intervalMs ?? 120);
-	}
-
-	private spinnerFrame(): string {
-		if (this.frameOptions.length === 0) return "•";
-		const elapsed = Date.now() - this.startedAt;
-		const index = Math.floor(elapsed / this.intervalMs) % this.frameOptions.length;
-		return this.frameOptions[Math.max(0, index)];
-	}
-
-	setMessage(message: string): void {
-		this.message = message;
-	}
-
-	get signal(): AbortSignal {
-		return this.abortController.signal;
-	}
-
-	handleInput(data: string): void {
-		if (!this.onAbort || this.abortController.signal.aborted) return;
-		if (data === "c" || data === "q" || data === "\u001b" || data === "\u0003") {
-			this.abortController.abort();
-			this.onAbort();
-		}
-	}
-
-	render(width: number): string[] {
-		if (width === this.width && this.lineCache) {
-			return this.lineCache.split("\n");
-		}
-		const innerWidth = Math.max(this.minWidth - 4, 1);
-		const contentWidth = Math.max(1, Math.min(width - 4, innerWidth));
-		const frame = this.spinnerFrame();
-		const loaderLine = ` ${frame} ${truncate(this.message, Math.max(1, contentWidth - 4))} `;
-		const body = ` ${truncate(loaderLine, contentWidth - 2)} `;
-		const inner = ` ${pad(body, contentWidth - 1)} `;
-		const padWidth = Math.max(0, width - (contentWidth + 4));
-		const leftRightPad = " ".repeat(Math.floor(padWidth / 2));
-		const widthAwareInner = contentWidth + padWidth;
-		const border = new DynamicCrewBorder(this.theme).render(widthAwareInner + 2)[0];
-		const top = `${leftRightPad}${this.theme.fg("border", "┌")}${border}${this.theme.fg("border", "┐")}`;
-		const line = `${leftRightPad}${this.theme.fg("border", "│")} ${truncate(inner, widthAwareInner)} ${this.theme.fg("border", "│")}`;
-		const hint = `${leftRightPad}${this.theme.fg("border", "│")}${" ".repeat(widthAwareInner + 2)}${this.theme.fg("border", "│")}`;
-		const bottom = `${leftRightPad}${this.theme.fg("border", "└")}${border}${this.theme.fg("border", "┘")}`;
-		const lineWithHint = optionsHint(this.theme, this.message, widthAwareInner);
-		this.width = width;
-		const lines = [
-			top,
-			line,
-			`${leftRightPad}│ ${pad(lineWithHint, widthAwareInner)} │`,
-			hint,
-			bottom,
-		];
-		this.lineCache = lines.join("\n");
-		return lines;
-	}
-
-	invalidate(): void {
-		this.lineCache = "";
-		this.width = 0;
-	}
-
-	dispose(): void {
-		this.abortController.abort();
-	}
-}
-
-export interface CountdownTimerOptions {
-	timeoutMs: number;
-	onTick: (seconds: number) => void;
-	onExpire: () => void;
-}
-
-export class CountdownTimer {
-	private readonly onExpire: () => void;
-	private readonly onTick: (seconds: number) => void;
-	private readonly startedAt: number;
-	private readonly timeoutMs: number;
-	private timer: ReturnType<typeof setTimeout> | undefined;
-	private expired = false;
-
-	constructor(options: CountdownTimerOptions) {
-		this.timeoutMs = Math.max(0, options.timeoutMs);
-		this.onTick = options.onTick;
-		this.onExpire = options.onExpire;
-		this.startedAt = Date.now();
-		this.onTick(this.secondsLeft());
-		if (this.timeoutMs === 0) {
-			this.emitExpire();
-			return;
-		}
-		this.timer = setInterval(() => {
-			const seconds = this.secondsLeft();
-			this.onTick(seconds);
-			if (seconds <= 0) {
-				this.emitExpire();
-			}
-		}, 1000);
-	}
-
-	private emitExpire(): void {
-		if (this.expired) return;
-		this.expired = true;
-		this.dispose();
-		this.onExpire();
-	}
-
-	private secondsLeft(): number {
-		const remainingMs = this.startedAt + this.timeoutMs - Date.now();
-		return Math.max(0, Math.ceil(remainingMs / 1000));
-	}
-
-	dispose(): void {
-		if (this.timer === undefined) return;
-		clearInterval(this.timer);
-		this.timer = undefined;
-	}
-}
-
-function optionsHint(theme: CrewTheme, message: string, width: number): string {
-	if (!message) return "";
-	return truncate(theme.fg("muted", message), width);
-}
+import { pad, truncate } from "../utils/visual.ts";
+import type { CrewTheme } from "./theme-adapter.ts";
+import { asCrewTheme } from "./theme-adapter.ts";
+import { DynamicCrewBorder } from "./dynamic-border.ts";
+
+export interface BorderedLoaderOptions {
+	message: string;
+	cancellable?: boolean;
+	frames?: string[];
+	intervalMs?: number;
+	minWidth?: number;
+	onAbort?: () => void;
+}
+
+const DEFAULT_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export class CrewBorderedLoader {
+	private readonly abortController = new AbortController();
+	private readonly frameOptions: string[];
+	private readonly intervalMs: number;
+	private readonly minWidth: number;
+	private readonly onAbort?: () => void;
+	private theme: CrewTheme;
+	private message: string;
+	private lineCache = "";
+	private width = 0;
+	private startedAt = Date.now();
+
+	constructor(_ui: unknown, themeLike: unknown, options: BorderedLoaderOptions) {
+		const theme = asCrewTheme(themeLike);
+		this.theme = theme;
+		this.message = options.message;
+		this.minWidth = Math.max(12, options.minWidth ?? 24);
+		this.onAbort = options.onAbort;
+		this.frameOptions = options.frames ?? DEFAULT_FRAMES;
+		this.intervalMs = Math.max(40, options.intervalMs ?? 120);
+	}
+
+	private spinnerFrame(): string {
+		if (this.frameOptions.length === 0) return "•";
+		const elapsed = Date.now() - this.startedAt;
+		const index = Math.floor(elapsed / this.intervalMs) % this.frameOptions.length;
+		return this.frameOptions[Math.max(0, index)];
+	}
+
+	setMessage(message: string): void {
+		this.message = message;
+	}
+
+	get signal(): AbortSignal {
+		return this.abortController.signal;
+	}
+
+	handleInput(data: string): void {
+		if (!this.onAbort || this.abortController.signal.aborted) return;
+		if (data === "c" || data === "q" || data === "\u001b" || data === "\u0003") {
+			this.abortController.abort();
+			this.onAbort();
+		}
+	}
+
+	render(width: number): string[] {
+		if (width === this.width && this.lineCache) {
+			return this.lineCache.split("\n");
+		}
+		const innerWidth = Math.max(this.minWidth - 4, 1);
+		const contentWidth = Math.max(1, Math.min(width - 4, innerWidth));
+		const frame = this.spinnerFrame();
+		const loaderLine = ` ${frame} ${truncate(this.message, Math.max(1, contentWidth - 4))} `;
+		const body = ` ${truncate(loaderLine, contentWidth - 2)} `;
+		const inner = ` ${pad(body, contentWidth - 1)} `;
+		const padWidth = Math.max(0, width - (contentWidth + 4));
+		const leftRightPad = " ".repeat(Math.floor(padWidth / 2));
+		const widthAwareInner = contentWidth + padWidth;
+		const border = new DynamicCrewBorder(this.theme).render(widthAwareInner + 2)[0];
+		const top = `${leftRightPad}${this.theme.fg("border", "┌")}${border}${this.theme.fg("border", "┐")}`;
+		const line = `${leftRightPad}${this.theme.fg("border", "│")} ${truncate(inner, widthAwareInner)} ${this.theme.fg("border", "│")}`;
+		const hint = `${leftRightPad}${this.theme.fg("border", "│")}${" ".repeat(widthAwareInner + 2)}${this.theme.fg("border", "│")}`;
+		const bottom = `${leftRightPad}${this.theme.fg("border", "└")}${border}${this.theme.fg("border", "┘")}`;
+		const lineWithHint = optionsHint(this.theme, this.message, widthAwareInner);
+		this.width = width;
+		const lines = [
+			top,
+			line,
+			`${leftRightPad}│ ${pad(lineWithHint, widthAwareInner)} │`,
+			hint,
+			bottom,
+		];
+		this.lineCache = lines.join("\n");
+		return lines;
+	}
+
+	invalidate(): void {
+		this.lineCache = "";
+		this.width = 0;
+	}
+
+	dispose(): void {
+		this.abortController.abort();
+	}
+}
+
+export interface CountdownTimerOptions {
+	timeoutMs: number;
+	onTick: (seconds: number) => void;
+	onExpire: () => void;
+}
+
+export class CountdownTimer {
+	private readonly onExpire: () => void;
+	private readonly onTick: (seconds: number) => void;
+	private readonly startedAt: number;
+	private readonly timeoutMs: number;
+	private timer: ReturnType<typeof setTimeout> | undefined;
+	private expired = false;
+
+	constructor(options: CountdownTimerOptions) {
+		this.timeoutMs = Math.max(0, options.timeoutMs);
+		this.onTick = options.onTick;
+		this.onExpire = options.onExpire;
+		this.startedAt = Date.now();
+		this.onTick(this.secondsLeft());
+		if (this.timeoutMs === 0) {
+			this.emitExpire();
+			return;
+		}
+		this.timer = setInterval(() => {
+			const seconds = this.secondsLeft();
+			this.onTick(seconds);
+			if (seconds <= 0) {
+				this.emitExpire();
+			}
+		}, 1000);
+	}
+
+	private emitExpire(): void {
+		if (this.expired) return;
+		this.expired = true;
+		this.dispose();
+		this.onExpire();
+	}
+
+	private secondsLeft(): number {
+		const remainingMs = this.startedAt + this.timeoutMs - Date.now();
+		return Math.max(0, Math.ceil(remainingMs / 1000));
+	}
+
+	dispose(): void {
+		if (this.timer === undefined) return;
+		clearInterval(this.timer);
+		this.timer = undefined;
+	}
+}
+
+function optionsHint(theme: CrewTheme, message: string, width: number): string {
+	if (!message) return "";
+	return truncate(theme.fg("muted", message), width);
+}

package/src/ui/powerbar-publisher.ts

@@ -10,6 +10,7 @@ import { logInternalError } from "../utils/internal-error.ts";
 import type { ManifestCache } from "../runtime/manifest-cache.ts";
 import type { RunSnapshotCache, RunUiSnapshot } from "./snapshot-types.ts";
 import { notificationBadge } from "./crew-widget.ts";
+import { RenderCoalescer } from "./render-coalescer.ts";
 
 type EventBus = { emit?: (event: string, data: unknown) => void; listenerCount?: (event: string) => number } | undefined;
 type StatusContext = { hasUI?: boolean; ui?: { setStatus?: (key: string, text: string | undefined) => void } } | undefined;
@@ -84,6 +85,8 @@ export function updatePiCrewPowerbar(events: EventBus, cwd: string, config?: Cre
 		return { run, agents, tasks: readTasks(run.tasksPath), snapshot };
 	}).filter((item) => isDisplayActiveRun(item.run, item.agents));
 	if (!active.length) {
+		lastEmittedActive = undefined;
+		lastEmittedProgress = undefined;
 		safeEmit(events, "powerbar:update", { id: "pi-crew-active" });
 		safeEmit(events, "powerbar:update", { id: "pi-crew-progress" });
 		if (useStatusFallback) setStatusFallback(ctx, undefined);
@@ -104,25 +107,84 @@ export function updatePiCrewPowerbar(events: EventBus, cwd: string, config?: Cre
 	const activeText = `crew ${running}a/${waiting}w${notificationBadge(notificationCount)}`;
 	const activeSuffix = [model, tokenText].filter(Boolean).join(" · ") || undefined;
 	const progressSuffix = `${completed}/${total}${tokenText ? ` · ${tokenText}` : ""}`;
-	safeEmit(events, "powerbar:update", {
-		id: "pi-crew-active",
-		icon: "⚙",
-		text: activeText,
-		suffix: activeSuffix,
-		color: running ? "accent" : "warning",
-	});
-	safeEmit(events, "powerbar:update", {
-		id: "pi-crew-progress",
-		text: (active[0]?.run as TeamRunManifest)?.team ?? "crew",
-		bar: Math.round((completed / total) * 100),
-		suffix: progressSuffix,
-		color: completed === total ? "success" : "accent",
-		barSegments: 8,
-	});
+	const activeKey = `${activeText}|${activeSuffix ?? ""}|${running}`;
+	const progressKey = `${(active[0]?.run as TeamRunManifest)?.team ?? "crew"}|${completed}/${total}|${tokenText ?? ""}`;
+	const changed = activeKey !== lastEmittedActive || progressKey !== lastEmittedProgress;
+	if (changed) {
+		lastEmittedActive = activeKey;
+		lastEmittedProgress = progressKey;
+		safeEmit(events, "powerbar:update", {
+			id: "pi-crew-active",
+			icon: "⚙",
+			text: activeText,
+			suffix: activeSuffix,
+			color: running ? "accent" : "warning",
+		});
+		safeEmit(events, "powerbar:update", {
+			id: "pi-crew-progress",
+			text: (active[0]?.run as TeamRunManifest)?.team ?? "crew",
+			bar: Math.round((completed / total) * 100),
+			suffix: progressSuffix,
+			color: completed === total ? "success" : "accent",
+			barSegments: 8,
+		});
+	}
 	if (useStatusFallback) setStatusFallback(ctx, `${activeText}${activeSuffix ? ` · ${activeSuffix}` : ""} · ${progressSuffix}`);
 }
 
+// --- Dedup state: skip emit if segment data unchanged ---
+let lastEmittedActive: string | undefined;
+let lastEmittedProgress: string | undefined;
+
+// --- Coalesced powerbar update ---
+
+interface PowerbarUpdateArgs {
+	events: EventBus;
+	cwd: string;
+	config?: CrewUiConfig;
+	manifestCache?: ManifestCache;
+	snapshotCache?: RunSnapshotCache;
+	ctx?: StatusContext;
+	notificationCount: number;
+	preloadedManifests?: TeamRunManifest[];
+}
+
+let latestArgs: PowerbarUpdateArgs | null = null;
+
+const powerbarCoalescer = new RenderCoalescer(() => {
+	if (!latestArgs) return;
+	const a = latestArgs;
+	latestArgs = null;
+	updatePiCrewPowerbar(a.events, a.cwd, a.config, a.manifestCache, a.snapshotCache, a.ctx, a.notificationCount, a.preloadedManifests);
+}, 200);
+
+/**
+ * Request a coalesced powerbar update. Multiple rapid calls are batched into a single
+ * render pass within 200ms, preventing UI flicker from event bursts.
+ */
+export function requestPowerbarUpdate(
+	events: EventBus,
+	cwd: string,
+	config?: CrewUiConfig,
+	manifestCache?: ManifestCache,
+	snapshotCache?: RunSnapshotCache,
+	ctx?: StatusContext,
+	notificationCount = 0,
+	preloadedManifests?: TeamRunManifest[],
+): void {
+	if (config?.powerbar === false) return;
+	latestArgs = { events, cwd, config, manifestCache, snapshotCache, ctx, notificationCount, preloadedManifests };
+	powerbarCoalescer.request();
+}
+
+/** Dispose the powerbar coalescer. Call during extension cleanup. */
+export function disposePowerbarCoalescer(): void {
+	powerbarCoalescer.dispose();
+}
+
 export function clearPiCrewPowerbar(events: EventBus, ctx?: StatusContext): void {
+	lastEmittedActive = undefined;
+	lastEmittedProgress = undefined;
 	safeEmit(events, "powerbar:update", { id: "pi-crew-active" });
 	safeEmit(events, "powerbar:update", { id: "pi-crew-progress" });
 	setStatusFallback(ctx, undefined);

package/src/ui/render-coalescer.ts

@@ -0,0 +1,51 @@
+/**
+ * RenderCoalescer — batches multiple render requests into single render passes.
+ * Prevents UI flicker when many events arrive in quick succession.
+ * Inspired by oh-my-pi's PROGRESS_COALESCE_MS (150ms) pattern.
+ */
+export class RenderCoalescer {
+	#pending = false;
+	#timerId: ReturnType<typeof setTimeout> | null = null;
+	#callback: () => void;
+	#intervalMs: number;
+
+	constructor(callback: () => void, intervalMs = 32) {
+		this.#callback = callback;
+		this.#intervalMs = intervalMs;
+	}
+
+	/** Request a render. Will be coalesced with other requests within the interval. */
+	request(): void {
+		if (this.#pending) return;
+		this.#pending = true;
+		this.#timerId = setTimeout(() => {
+			this.#pending = false;
+			this.#timerId = null;
+			this.#callback();
+		}, this.#intervalMs);
+	}
+
+	/** Force an immediate render, bypassing coalescing. */
+	flush(): void {
+		if (this.#timerId !== null) {
+			clearTimeout(this.#timerId);
+			this.#timerId = null;
+		}
+		this.#pending = false;
+		this.#callback();
+	}
+
+	/** Check if a render is pending. */
+	get pending(): boolean {
+		return this.#pending;
+	}
+
+	/** Clean up timers. Call when the coalescer is no longer needed. */
+	dispose(): void {
+		if (this.#timerId !== null) {
+			clearTimeout(this.#timerId);
+			this.#timerId = null;
+		}
+		this.#pending = false;
+	}
+}