pi-crew 0.9.53 → 0.9.55

package/src/ui/shared-overlay-scheduler.ts

@@ -0,0 +1,96 @@
+import { logInternalError } from "../utils/internal-error.ts";
+import { RenderScheduler } from "./render-scheduler.ts";
+import { runEventBusAsRenderScheduler } from "./run-event-bus.ts";
+
+export interface OverlaySchedulerHandle {
+	/** Force a debounced re-render fan-out (e.g. theme change, dashboard interaction). */
+	schedule(): void;
+	/** Unregister this overlay. Disposes the shared scheduler when the last overlay leaves (ref-count). */
+	dispose(): void;
+}
+
+/**
+ * C3 (Option G): the 3 overlays (widget + sidebar + dashboard) each used to
+ * instantiate an identical RenderScheduler (same run-event-bus channels,
+ * debounce 75ms, fallback 750ms) → 9 subscriptions + 9 live timers + 3×
+ * per-event schedule() CPU during active runs. This module owns ONE shared
+ * RenderScheduler (module singleton) whose `render` and `onInvalidate`
+ * fan out to all registered overlays, with per-callback try/catch isolation
+ * + ref-counted disposal (the underlying scheduler is disposed when the last
+ * overlay leaves, and a future register recreates it).
+ */
+
+const CHANNELS = ["run:state", "worker:lifecycle", "ui:invalidate"] as const;
+
+interface SharedOverlayState {
+	readonly scheduler: RenderScheduler;
+	readonly renderers: Set<() => void>;
+	readonly invalidators: Set<(payload: unknown) => void>;
+}
+
+let shared: SharedOverlayState | undefined;
+
+function ensureShared(): SharedOverlayState {
+	if (shared) return shared;
+	const renderers = new Set<() => void>();
+	const invalidators = new Set<(payload: unknown) => void>();
+	const scheduler = new RenderScheduler(
+		runEventBusAsRenderScheduler([...CHANNELS]),
+		() => {
+			// Fan-out: each registered overlay's render runs in its own
+			// try/catch so one failing component cannot break the others.
+			for (const render of renderers) {
+				try {
+					render();
+				} catch (error) {
+					logInternalError("shared-overlay-scheduler.render", error);
+				}
+			}
+		},
+		{
+			debounceMs: 75,
+			fallbackMs: 750,
+			events: [...CHANNELS],
+			onInvalidate: (payload) => {
+				for (const invalidate of invalidators) {
+					try {
+						invalidate(payload);
+					} catch (error) {
+						logInternalError("shared-overlay-scheduler.invalidate", error);
+					}
+				}
+			},
+		},
+	);
+	shared = { scheduler, renderers, invalidators };
+	return shared;
+}
+
+/**
+ * Register an overlay's render (+ optional onInvalidate) with the shared
+ * scheduler. Returns a handle that lets the overlay force a debounced
+ * fan-out (schedule) and unregister itself (dispose). The underlying shared
+ * scheduler is created lazily on first register and disposed when the last
+ * overlay disposes.
+ */
+export function registerOverlayScheduler(render: () => void, onInvalidate?: (payload: unknown) => void): OverlaySchedulerHandle {
+	const state = ensureShared();
+	state.renderers.add(render);
+	if (onInvalidate) state.invalidators.add(onInvalidate);
+	return {
+		schedule: () => {
+			state.scheduler.schedule();
+		},
+		dispose: () => {
+			state.renderers.delete(render);
+			if (onInvalidate) state.invalidators.delete(onInvalidate);
+			// Ref-count: when the last overlay leaves, dispose the underlying
+			// scheduler (clears subscriptions + timers) and reset the module
+			// variable so a future register recreates a fresh instance.
+			if (state.renderers.size === 0) {
+				state.scheduler.dispose();
+				if (shared === state) shared = undefined;
+			}
+		},
+	};
+}

package/src/ui/snapshot-types.ts

@@ -0,0 +1,90 @@
+import type { CrewAgentRecord } from "../runtime/crew-agent-runtime.ts";
+import type { TeamEvent } from "../state/event-log.ts";
+import type { TeamRunManifest, TeamTaskState } from "../state/types.ts";
+import type { DwfPhaseState } from "./dwf-phase-display.ts";
+
+export interface RunUiProgress {
+	total: number;
+	completed: number;
+	running: number;
+	failed: number;
+	queued: number;
+	waiting?: number;
+	cancelled?: number;
+	skipped?: number;
+	needsAttention?: number;
+}
+
+export interface RunUiUsage {
+	tokensIn: number;
+	tokensOut: number;
+	toolUses: number;
+}
+
+export interface RunUiMailbox {
+	inboxUnread: number;
+	outboxPending: number;
+	needsAttention: number;
+	/** Urgent steering messages count. Default 0. */
+	steerUnread?: number;
+	/** Follow-up / continuation messages count. Default 0. */
+	followUpUnread?: number;
+	/** Response / reply messages count. Default 0. */
+	responseUnread?: number;
+	/** Generic messages count. Default 0. */
+	messageUnread?: number;
+	/** True when counts come from bounded tail reads and older messages may be omitted. */
+	approximate?: boolean;
+}
+
+export interface RunUiGroupJoin {
+	requestId: string;
+	messageId: string;
+	partial: boolean;
+	ack: "pending" | "acknowledged";
+}
+
+export interface RunUiSnapshot {
+	runId: string;
+	cwd: string;
+	fetchedAt: number;
+	signature: string;
+	/**
+	 * 1.6 / 1.7 — per-slice signatures so dashboard panes can short-circuit
+	 * their own render when the slice they care about hasn't changed:
+	 *
+	 *     if (snapshot.sliceSignatures?.tasks === lastTaskSig) return cached;
+	 *
+	 * Optional for backwards-compat; consumers fall back to the full
+	 * `signature` when the field is missing.
+	 */
+	sliceSignatures?: {
+		tasks: string;
+		agents: string;
+		mailbox: string;
+		progress: string;
+		events: string;
+	};
+	manifest: TeamRunManifest;
+	tasks: TeamTaskState[];
+	agents: CrewAgentRecord[];
+	progress: RunUiProgress;
+	usage: RunUiUsage;
+	mailbox: RunUiMailbox;
+	groupJoins?: RunUiGroupJoin[];
+	/** Structured cancellation reason from run.cancelled event data, when available. */
+	cancellationReason?: string;
+	/** DWF phase state derived from `recentEvents`. Null/absent for non-DWF runs. */
+	dwfPhaseState?: DwfPhaseState | null;
+	recentEvents: TeamEvent[];
+	recentOutputLines: string[];
+}
+
+export interface RunSnapshotCache {
+	get(runId: string): RunUiSnapshot | undefined;
+	refresh(runId: string): RunUiSnapshot;
+	refreshIfStale(runId: string): RunUiSnapshot;
+	invalidate(runId?: string): void;
+	snapshotsByKey(): Map<string, RunUiSnapshot>;
+	dispose?(): void;
+}

package/src/ui/spinner.ts

@@ -0,0 +1,17 @@
+export const SUBAGENT_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;
+export const SUBAGENT_SPINNER_FRAME_MS = 160;
+
+export function spinnerBucket(now = Date.now(), frameMs = SUBAGENT_SPINNER_FRAME_MS): number {
+	return Math.floor(now / Math.max(1, frameMs));
+}
+
+function hashKey(key: string): number {
+	let hash = 0;
+	for (let index = 0; index < key.length; index += 1) hash = (hash * 31 + key.charCodeAt(index)) >>> 0;
+	return hash;
+}
+
+export function spinnerFrame(key = "", now = Date.now()): string {
+	const offset = key ? hashKey(key) % SUBAGENT_SPINNER_FRAMES.length : 0;
+	return SUBAGENT_SPINNER_FRAMES[(spinnerBucket(now) + offset) % SUBAGENT_SPINNER_FRAMES.length] ?? SUBAGENT_SPINNER_FRAMES[0];
+}

package/src/ui/status-colors.ts

@@ -0,0 +1,143 @@
+import type { CrewTheme, CrewThemeColor } from "./theme-adapter.ts";
+
+export type RunStatus =
+	| "queued"
+	| "running"
+	| "waiting"
+	| "completed"
+	| "failed"
+	| "cancelled"
+	| "stopped"
+	| "blocked"
+	| "stale"
+	| "needs_attention"
+	| (string & {});
+
+export function colorForStatus(status: RunStatus): CrewThemeColor {
+	switch (status) {
+		case "running":
+			return "accent";
+		case "waiting":
+			return "muted";
+		case "completed":
+			return "success";
+		case "failed":
+		case "stale":
+			return "error";
+		case "cancelled":
+		case "blocked":
+		case "stopped":
+			return "warning";
+		case "needs_attention":
+			return "warning";
+		case "queued":
+		default:
+			return "dim";
+	}
+}
+
+export function iconForStatus(status: RunStatus, options?: { runningGlyph?: string }): string {
+	const glyph = options?.runningGlyph ?? "▶";
+	switch (status) {
+		case "completed":
+			return "✓";
+		case "failed":
+		case "stale":
+			return "✗";
+		case "cancelled":
+		case "stopped":
+			return "■";
+		case "running":
+			return glyph;
+		case "waiting":
+			return "⏳";
+		case "queued":
+			return "◦";
+		case "blocked":
+			return "⏸";
+		case "needs_attention":
+			return "⚠";
+		default:
+			return "·";
+	}
+}
+
+/** @internal */
+function colorForActivity(activityState: string | undefined): CrewThemeColor {
+	if (activityState === "needs_attention") return "warning";
+	if (activityState === "stale") return "error";
+	return "dim";
+}
+
+export function applyStatusColor(theme: CrewTheme, status: RunStatus, text: string): string {
+	return theme.fg(colorForStatus(status), text);
+}
+
+/**
+ * Shared glyph→color map for status glyphs embedded in rendered lines.
+ * Consolidates the duplicated `statusGlyphColor` (widget-renderer.ts) and
+ * `iconColor` (live-run-sidebar.ts) maps into a single source of truth.
+ *
+ * Covers ALL status glyphs, including the two previously-missing ones:
+ *   ⏳ (waiting) → muted, ⚠ (needs_attention) → warning
+ * and the braille spinner range U+2800–U+28FF (⠁–⣿) → accent (V-3).
+ */
+function glyphColor(glyph: string): CrewThemeColor {
+	// Braille Patterns block (U+2800–U+28FF) — running animation frames.
+	const code = glyph.codePointAt(0) ?? 0;
+	if (code >= 0x2800 && code <= 0x28ff) return "accent";
+	switch (glyph) {
+		case "✓":
+			return "success";
+		case "✗":
+			return "error";
+		case "■":
+		case "⏸":
+		case "⚠":
+			return "warning";
+		case "⏳":
+			return "muted";
+		case "◦":
+		case "·":
+			return "dim";
+		case "▶":
+		default:
+			return "accent";
+	}
+}
+
+/**
+ * Status glyph characters used in the fast-path check.
+ */
+const STATUS_GLYPH_CHARS = "\u2713\u2717\u25a0\u23f8\u25e6\u00b7\u25b6\u23f3\u26a0";
+
+/**
+ * Colorize status glyphs embedded in a rendered line. Wraps every status glyph
+ * (✓ ✗ ■ ⏸ ⏳ ⚠ ◦ · ▶ and braille spinner frames ⠁–⣿) in the appropriate theme
+ * color, leaving surrounding text untouched.
+ *
+ * Replaces the duplicated per-module glyph colorizers in widget-renderer.ts
+ * and live-run-sidebar.ts with a single shared helper (F-1, F-2, V-3).
+ */
+export function colorizeStatusGlyphs(line: string, theme: CrewTheme): string {
+	// Fast path: skip regex if line contains no status glyphs at all.
+	let hasGlyph = false;
+	for (let i = 0; i < STATUS_GLYPH_CHARS.length; i++) {
+		if (line.indexOf(STATUS_GLYPH_CHARS[i]) !== -1) {
+			hasGlyph = true;
+			break;
+		}
+	}
+	if (!hasGlyph) {
+		// Check for braille range (U+2800–U+28FF)
+		for (let i = 0; i < line.length; i++) {
+			const cp = line.codePointAt(i)!;
+			if (cp >= 0x2800 && cp <= 0x28ff) {
+				hasGlyph = true;
+				break;
+			}
+		}
+	}
+	if (!hasGlyph) return line;
+	return line.replace(/[✓✗■⏸◦·▶⏳⚠]|[\u2800-\u28FF]/g, (glyph) => theme.fg(glyphColor(glyph), glyph));
+}

package/src/ui/syntax-highlight.ts

@@ -0,0 +1,136 @@
+/**
+ * Syntax highlighting for pi-crew UI.
+ *
+ * Uses cli-highlight (sync) with the active Pi theme's syntax colors.
+ * Falls back to plain text (theme.fg on every line) if the language is
+ * unsupported or highlighting fails.
+ */
+import { highlight, supportsLanguage } from "cli-highlight";
+import type { CrewTheme } from "./theme-adapter.ts";
+import { asCrewTheme } from "./theme-adapter.ts";
+
+// ── cli-highlight theme bridge ──────────────────────────────────────────
+
+function buildCliTheme(theme: CrewTheme): Record<string, (text: string) => string> {
+	return {
+		keyword: (text) => theme.fg("syntaxKeyword", text),
+		built_in: (text) => theme.fg("syntaxType", text),
+		literal: (text) => theme.fg("syntaxNumber", text),
+		number: (text) => theme.fg("syntaxNumber", text),
+		string: (text) => theme.fg("syntaxString", text),
+		comment: (text) => theme.fg("syntaxComment", text),
+		function: (text) => theme.fg("syntaxFunction", text),
+		title: (text) => theme.fg("syntaxFunction", text),
+		class: (text) => theme.fg("syntaxType", text),
+		type: (text) => theme.fg("syntaxType", text),
+		attr: (text) => theme.fg("syntaxVariable", text),
+		variable: (text) => theme.fg("syntaxVariable", text),
+		params: (text) => theme.fg("syntaxVariable", text),
+		operator: (text) => theme.fg("syntaxOperator", text),
+		punctuation: (text) => theme.fg("syntaxPunctuation", text),
+	};
+}
+
+function hlCliSync(code: string, language: string | undefined, theme: CrewTheme): string {
+	if (!language) {
+		return code
+			.split("\n")
+			.map((line) => theme.fg("mdCodeBlock", line))
+			.join("\n");
+	}
+	try {
+		return highlight(code, {
+			language,
+			ignoreIllegals: true,
+			theme: buildCliTheme(theme),
+		}).trimEnd();
+	} catch {
+		return code
+			.split("\n")
+			.map((line) => theme.fg("mdCodeBlock", line))
+			.join("\n");
+	}
+}
+
+// ── Language detection ──────────────────────────────────────────────────
+
+export const languageMap: Record<string, string> = {
+	ts: "typescript",
+	tsx: "typescript",
+	js: "javascript",
+	jsx: "javascript",
+	mjs: "javascript",
+	cjs: "javascript",
+	py: "python",
+	md: "markdown",
+	markdown: "markdown",
+	json: "json",
+	yml: "yaml",
+	yaml: "yaml",
+	toml: "yaml",
+	html: "html",
+	htm: "html",
+	css: "css",
+	scss: "scss",
+	sass: "sass",
+	bash: "bash",
+	sh: "bash",
+	zsh: "bash",
+	fish: "bash",
+	ps1: "powershell",
+	sql: "sql",
+	rust: "rust",
+	rb: "ruby",
+	go: "go",
+	java: "java",
+	kt: "kotlin",
+	cpp: "cpp",
+	cc: "cpp",
+	cxx: "cpp",
+	hpp: "cpp",
+	c: "c",
+	h: "c",
+	cs: "csharp",
+	php: "php",
+};
+
+/** @internal */
+function detectLanguageFromPath(filePath: string): string | undefined {
+	const ext = filePath.split(".").pop()?.toLowerCase();
+	if (!ext) return undefined;
+	return languageMap[ext];
+}
+
+// ── Public API ──────────────────────────────────────────────────────────
+
+export function highlightCode(code: string, language: string | undefined, themeLike: unknown = undefined): string {
+	const theme = asCrewTheme(themeLike);
+	const validLanguage = language && supportsLanguage(language) ? language : undefined;
+	return hlCliSync(code, validLanguage, theme);
+}
+
+export function highlightJson(payload: string, themeLike: unknown = undefined): string {
+	const theme = asCrewTheme(themeLike);
+	try {
+		return highlight(payload, {
+			language: "json",
+			ignoreIllegals: true,
+			theme: buildCliTheme(theme),
+		}).trimEnd();
+	} catch {
+		try {
+			const parsed = JSON.parse(payload);
+			return JSON.stringify(parsed, null, 2)
+				.split("\n")
+				.map((line) => theme.fg("mdCodeBlock", line))
+				.join("\n");
+		} catch {
+			return payload
+				.split("\n")
+				.map((line) => theme.fg("mdCodeBlock", line))
+				.join("\n");
+		}
+	}
+}
+
+export { detectLanguageFromPath };