pi-crew 0.2.3 → 0.2.4

package/src/ui/snapshot-types.ts

@@ -1,70 +1,86 @@
-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";
-
-export interface RunUiProgress {
-	total: number;
-	completed: number;
-	running: number;
-	failed: number;
-	queued: number;
-	waiting?: number;
-	cancelled?: number;
-	skipped?: 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;
-	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;
-	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;
-}
+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";
+
+export interface RunUiProgress {
+	total: number;
+	completed: number;
+	running: number;
+	failed: number;
+	queued: number;
+	waiting?: number;
+	cancelled?: number;
+	skipped?: 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;
+	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/theme-adapter.ts

@@ -1,190 +1,190 @@
-export type CrewThemeColor =
-	| "accent"
-	| "border"
-	| "borderAccent"
-	| "borderMuted"
-	| "success"
-	| "error"
-	| "warning"
-	| "muted"
-	| "dim"
-	| "text"
-	| "toolDiffAdded"
-	| "toolDiffRemoved"
-	| "toolDiffContext"
-	| "syntaxKeyword"
-	| "syntaxString"
-	| "syntaxNumber"
-	| "syntaxComment"
-	| "syntaxFunction"
-	| "syntaxVariable"
-	| "syntaxType"
-	| "syntaxOperator"
-	| "syntaxPunctuation"
-	| "mdCodeBlock";
-
-export type CrewThemeBg =
-	| "selectedBg"
-	| "userMessageBg"
-	| "toolPendingBg"
-	| "toolSuccessBg"
-	| "toolErrorBg";
-
-export interface CrewTheme {
-	fg(color: CrewThemeColor, text: string): string;
-	bg?(color: CrewThemeBg, text: string): string;
-	bold(text: string): string;
-	italic?(text: string): string;
-	underline?(text: string): string;
-	inverse?(text: string): string;
-}
-
-function inverseAnsi(text: string): string {
-	return `\u001b[7m${text}\u001b[27m`;
-}
-
-function safeNoopTheme(): CrewTheme {
-	return {
-		fg: (_color, text) => text,
-		bold: (text) => text,
-		inverse: inverseAnsi,
-	};
-}
-
-function asStringFn(value: unknown, owner?: object): ((color: CrewThemeColor | CrewThemeBg, text: string) => string) | undefined {
-	if (typeof value !== "function") return undefined;
-	return (color: CrewThemeColor | CrewThemeBg, text: string) => {
-		try {
-			const fn = value as (this: object | undefined, color: CrewThemeColor | CrewThemeBg, text: string) => unknown;
-			const result = fn.call(owner, color, text);
-			return typeof result === "string" ? result : text;
-		} catch {
-			return text;
-		}
-	};
-}
-
-function asUnaryFn(value: unknown, owner?: object): ((text: string) => string) | undefined {
-	if (typeof value !== "function") return undefined;
-	return (text: string) => {
-		try {
-			const fn = value as (this: object | undefined, text: string) => unknown;
-			const result = fn.call(owner, text);
-			return typeof result === "string" ? result : text;
-		} catch {
-			return text;
-		}
-	};
-}
-
-function asInverse(value: unknown, owner?: object): (text: string) => string {
-	return asUnaryFn(value, owner) ?? inverseAnsi;
-}
-
-function asRecord(value: unknown): Record<string, unknown> | undefined {
-	return value && typeof value === "object" ? (value as Record<string, unknown>) : undefined;
-}
-
-function callMaybeString(fn: unknown): string | undefined {
-	if (typeof fn !== "function") return undefined;
-	try {
-		const result = (fn as () => unknown)();
-		return typeof result === "string" || typeof result === "number" || typeof result === "boolean" ? String(result) : undefined;
-	} catch {
-		return undefined;
-	}
-}
-
-function themeSignature(theme: object): string {
-	const record = theme as Record<string, unknown>;
-	const primitiveEntries = Object.entries(record)
-		.filter(([_key, value]) => value === undefined || value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean")
-		.map(([key, value]) => `${key}:${String(value)}`)
-		.sort();
-	const colorMode = callMaybeString(record.getColorMode);
-	return [colorMode ? `mode:${colorMode}` : undefined, ...primitiveEntries].filter((item): item is string => Boolean(item)).join("|");
-}
-
-type Unsubscribe = () => void;
-
-interface ThemeSourceSubscription {
-	callbacks: Set<() => void>;
-	unsubscribeSource?: Unsubscribe;
-	pollTimer?: ReturnType<typeof setInterval>;
-	lastSignature: string;
-}
-
-const themeSubscriptions = new WeakMap<object, ThemeSourceSubscription>();
-
-function asUnsubscribe(value: unknown): Unsubscribe | undefined {
-	if (typeof value === "function") return value as Unsubscribe;
-	const record = asRecord(value);
-	if (!record) return undefined;
-	if (typeof record.unsubscribe === "function") return () => (record.unsubscribe as () => void)();
-	if (typeof record.dispose === "function") return () => (record.dispose as () => void)();
-	return undefined;
-}
-
-function startThemeSourceSubscription(theme: object, subscription: ThemeSourceSubscription): void {
-	const record = theme as Record<string, unknown>;
-	const emit = () => {
-		for (const callback of [...subscription.callbacks]) callback();
-	};
-	if (typeof record.onThemeChange === "function") {
-		const result = (record.onThemeChange as (callback: () => void) => unknown)(emit);
-		subscription.unsubscribeSource = asUnsubscribe(result);
-		return;
-	}
-	if (typeof record.addEventListener === "function") {
-		(record.addEventListener as (type: string, callback: () => void) => void)("change", emit);
-		if (typeof record.removeEventListener === "function") {
-			subscription.unsubscribeSource = () => (record.removeEventListener as (type: string, callback: () => void) => void)("change", emit);
-		}
-		return;
-	}
-	subscription.pollTimer = setInterval(() => {
-		const nextSignature = themeSignature(theme);
-		if (nextSignature === subscription.lastSignature) return;
-		subscription.lastSignature = nextSignature;
-		emit();
-	}, 1000);
-	subscription.pollTimer.unref();
-}
-
-export function subscribeThemeChange(theme: unknown, callback: () => void): () => void {
-	if (!theme || typeof theme !== "object") return () => {};
-	const key = theme;
-	let subscription = themeSubscriptions.get(key);
-	if (!subscription) {
-		subscription = { callbacks: new Set(), lastSignature: themeSignature(key) };
-		themeSubscriptions.set(key, subscription);
-		startThemeSourceSubscription(key, subscription);
-	}
-	subscription.callbacks.add(callback);
-	return () => {
-		const current = themeSubscriptions.get(key);
-		if (!current) return;
-		current.callbacks.delete(callback);
-		if (current.callbacks.size > 0) return;
-		if (current.pollTimer) clearInterval(current.pollTimer);
-		current.unsubscribeSource?.();
-		themeSubscriptions.delete(key);
-	};
-}
-
-export function asCrewTheme(raw: unknown): CrewTheme {
-	const fallback = safeNoopTheme();
-	if (!raw || typeof raw !== "object") return fallback;
-	const record = raw as Record<string, unknown>;
-	const fg = asStringFn(record.fg, raw);
-	const bold = asUnaryFn(record.bold, raw);
-	if (!fg || !bold) return fallback;
-	return {
-		fg,
-		bg: asStringFn(record.bg, raw),
-		bold,
-		italic: asUnaryFn(record.italic, raw),
-		underline: asUnaryFn(record.underline, raw),
-		inverse: asInverse(record.inverse, raw),
-	};
-}
+export type CrewThemeColor =
+	| "accent"
+	| "border"
+	| "borderAccent"
+	| "borderMuted"
+	| "success"
+	| "error"
+	| "warning"
+	| "muted"
+	| "dim"
+	| "text"
+	| "toolDiffAdded"
+	| "toolDiffRemoved"
+	| "toolDiffContext"
+	| "syntaxKeyword"
+	| "syntaxString"
+	| "syntaxNumber"
+	| "syntaxComment"
+	| "syntaxFunction"
+	| "syntaxVariable"
+	| "syntaxType"
+	| "syntaxOperator"
+	| "syntaxPunctuation"
+	| "mdCodeBlock";
+
+export type CrewThemeBg =
+	| "selectedBg"
+	| "userMessageBg"
+	| "toolPendingBg"
+	| "toolSuccessBg"
+	| "toolErrorBg";
+
+export interface CrewTheme {
+	fg(color: CrewThemeColor, text: string): string;
+	bg?(color: CrewThemeBg, text: string): string;
+	bold(text: string): string;
+	italic?(text: string): string;
+	underline?(text: string): string;
+	inverse?(text: string): string;
+}
+
+function inverseAnsi(text: string): string {
+	return `\u001b[7m${text}\u001b[27m`;
+}
+
+function safeNoopTheme(): CrewTheme {
+	return {
+		fg: (_color, text) => text,
+		bold: (text) => text,
+		inverse: inverseAnsi,
+	};
+}
+
+function asStringFn(value: unknown, owner?: object): ((color: CrewThemeColor | CrewThemeBg, text: string) => string) | undefined {
+	if (typeof value !== "function") return undefined;
+	return (color: CrewThemeColor | CrewThemeBg, text: string) => {
+		try {
+			const fn = value as (this: object | undefined, color: CrewThemeColor | CrewThemeBg, text: string) => unknown;
+			const result = fn.call(owner, color, text);
+			return typeof result === "string" ? result : text;
+		} catch {
+			return text;
+		}
+	};
+}
+
+function asUnaryFn(value: unknown, owner?: object): ((text: string) => string) | undefined {
+	if (typeof value !== "function") return undefined;
+	return (text: string) => {
+		try {
+			const fn = value as (this: object | undefined, text: string) => unknown;
+			const result = fn.call(owner, text);
+			return typeof result === "string" ? result : text;
+		} catch {
+			return text;
+		}
+	};
+}
+
+function asInverse(value: unknown, owner?: object): (text: string) => string {
+	return asUnaryFn(value, owner) ?? inverseAnsi;
+}
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+	return value && typeof value === "object" ? (value as Record<string, unknown>) : undefined;
+}
+
+function callMaybeString(fn: unknown): string | undefined {
+	if (typeof fn !== "function") return undefined;
+	try {
+		const result = (fn as () => unknown)();
+		return typeof result === "string" || typeof result === "number" || typeof result === "boolean" ? String(result) : undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function themeSignature(theme: object): string {
+	const record = theme as Record<string, unknown>;
+	const primitiveEntries = Object.entries(record)
+		.filter(([_key, value]) => value === undefined || value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean")
+		.map(([key, value]) => `${key}:${String(value)}`)
+		.sort();
+	const colorMode = callMaybeString(record.getColorMode);
+	return [colorMode ? `mode:${colorMode}` : undefined, ...primitiveEntries].filter((item): item is string => Boolean(item)).join("|");
+}
+
+type Unsubscribe = () => void;
+
+interface ThemeSourceSubscription {
+	callbacks: Set<() => void>;
+	unsubscribeSource?: Unsubscribe;
+	pollTimer?: ReturnType<typeof setInterval>;
+	lastSignature: string;
+}
+
+const themeSubscriptions = new WeakMap<object, ThemeSourceSubscription>();
+
+function asUnsubscribe(value: unknown): Unsubscribe | undefined {
+	if (typeof value === "function") return value as Unsubscribe;
+	const record = asRecord(value);
+	if (!record) return undefined;
+	if (typeof record.unsubscribe === "function") return () => (record.unsubscribe as () => void)();
+	if (typeof record.dispose === "function") return () => (record.dispose as () => void)();
+	return undefined;
+}
+
+function startThemeSourceSubscription(theme: object, subscription: ThemeSourceSubscription): void {
+	const record = theme as Record<string, unknown>;
+	const emit = () => {
+		for (const callback of [...subscription.callbacks]) callback();
+	};
+	if (typeof record.onThemeChange === "function") {
+		const result = (record.onThemeChange as (callback: () => void) => unknown)(emit);
+		subscription.unsubscribeSource = asUnsubscribe(result);
+		return;
+	}
+	if (typeof record.addEventListener === "function") {
+		(record.addEventListener as (type: string, callback: () => void) => void)("change", emit);
+		if (typeof record.removeEventListener === "function") {
+			subscription.unsubscribeSource = () => (record.removeEventListener as (type: string, callback: () => void) => void)("change", emit);
+		}
+		return;
+	}
+	subscription.pollTimer = setInterval(() => {
+		const nextSignature = themeSignature(theme);
+		if (nextSignature === subscription.lastSignature) return;
+		subscription.lastSignature = nextSignature;
+		emit();
+	}, 1000);
+	subscription.pollTimer.unref();
+}
+
+export function subscribeThemeChange(theme: unknown, callback: () => void): () => void {
+	if (!theme || typeof theme !== "object") return () => {};
+	const key = theme;
+	let subscription = themeSubscriptions.get(key);
+	if (!subscription) {
+		subscription = { callbacks: new Set(), lastSignature: themeSignature(key) };
+		themeSubscriptions.set(key, subscription);
+		startThemeSourceSubscription(key, subscription);
+	}
+	subscription.callbacks.add(callback);
+	return () => {
+		const current = themeSubscriptions.get(key);
+		if (!current) return;
+		current.callbacks.delete(callback);
+		if (current.callbacks.size > 0) return;
+		if (current.pollTimer) clearInterval(current.pollTimer);
+		current.unsubscribeSource?.();
+		themeSubscriptions.delete(key);
+	};
+}
+
+export function asCrewTheme(raw: unknown): CrewTheme {
+	const fallback = safeNoopTheme();
+	if (!raw || typeof raw !== "object") return fallback;
+	const record = raw as Record<string, unknown>;
+	const fg = asStringFn(record.fg, raw);
+	const bold = asUnaryFn(record.bold, raw);
+	if (!fg || !bold) return fallback;
+	return {
+		fg,
+		bg: asStringFn(record.bg, raw),
+		bold,
+		italic: asUnaryFn(record.italic, raw),
+		underline: asUnaryFn(record.underline, raw),
+		inverse: asInverse(record.inverse, raw),
+	};
+}

package/src/ui/tool-progress-formatter.ts

@@ -0,0 +1,89 @@
+import type { CrewAgentRecord } from "../runtime/crew-agent-runtime.ts";
+import type { TeamRunManifest, TeamTaskState } from "../state/types.ts";
+
+export interface ToolProgressInput {
+	/** Subagent record id or synthetic agent label shown in the header. */
+	agentId?: string;
+	/** Subagent/run status string ("queued", "running", "blocked", ...). */
+	status: string;
+	/** Optional run id once the underlying team run has been created. */
+	runId?: string;
+	/** Timestamp (ms) when the parent tool call started. */
+	startedAt: number;
+	/** Optional manifest snapshot for richer detail. */
+	manifest?: TeamRunManifest;
+	/** Optional materialized task list for waiting/running counts. */
+	tasks?: TeamTaskState[];
+	/** Optional crew agent records to surface the currently active worker. */
+	agents?: CrewAgentRecord[];
+	/** Optional last error to surface (e.g. spawn failure). */
+	error?: string;
+}
+
+const MAX_OUTPUT_LINE = 80;
+
+function pickActiveAgent(agents: CrewAgentRecord[] | undefined): CrewAgentRecord | undefined {
+	if (!agents || agents.length === 0) return undefined;
+	return agents.find((agent) => agent.status === "running")
+		?? agents.find((agent) => agent.status === "waiting")
+		?? agents.find((agent) => agent.status === "queued")
+		?? agents[agents.length - 1];
+}
+
+function totalTokens(agent: CrewAgentRecord): number {
+	const fromProgress = agent.progress?.tokens;
+	if (typeof fromProgress === "number" && fromProgress > 0) return fromProgress;
+	const usage = agent.usage;
+	if (!usage) return 0;
+	const input = typeof usage.input === "number" ? usage.input : 0;
+	const output = typeof usage.output === "number" ? usage.output : 0;
+	return input + output;
+}
+
+function trimLine(value: string): string {
+	const oneLine = value.replace(/\s+/g, " ").trim();
+	if (oneLine.length <= MAX_OUTPUT_LINE) return oneLine;
+	return `${oneLine.slice(0, MAX_OUTPUT_LINE - 3)}...`;
+}
+
+function taskCounts(tasks: TeamTaskState[] | undefined): string | undefined {
+	if (!tasks || tasks.length === 0) return undefined;
+	const buckets = new Map<string, number>();
+	for (const task of tasks) buckets.set(task.status, (buckets.get(task.status) ?? 0) + 1);
+	const summary = [...buckets.entries()]
+		.map(([status, count]) => `${status}=${count}`)
+		.join(" ");
+	return `tasks ${summary}`;
+}
+
+/**
+ * Format a compact 3-4 line progress block used as streaming `onUpdate`
+ * content for the `Agent` and `team` tool calls. Keeps each line short so
+ * the chat widget overlay does not jitter.
+ */
+export function formatCompactToolProgress(input: ToolProgressInput): string {
+	const elapsedSec = Math.max(0, Math.round((Date.now() - input.startedAt) / 1000));
+	const head = input.agentId ? `agent=${input.agentId}` : "agent";
+	const lines: string[] = [`${head} status=${input.status} elapsed=${elapsedSec}s`];
+
+	const active = pickActiveAgent(input.agents);
+	if (active) {
+		const turns = active.progress?.turns ?? 0;
+		const tokens = totalTokens(active);
+		lines.push(`  ${active.role}->${active.agent} turn=${turns} tokens=${tokens}`);
+		if (active.progress?.currentTool) {
+			const count = active.progress.toolCount ? ` (#${active.progress.toolCount})` : "";
+			lines.push(`  tool: ${active.progress.currentTool}${count}`);
+		}
+		const recent = active.progress?.recentOutput?.at(-1);
+		if (recent && recent.trim()) lines.push(`  ${trimLine(recent)}`);
+	} else if (input.runId) {
+		const counts = taskCounts(input.tasks);
+		lines.push(counts ? `  run=${input.runId} ${counts}` : `  run=${input.runId} (starting)`);
+	} else if (input.error) {
+		lines.push(`  error: ${trimLine(input.error)}`);
+	} else {
+		lines.push("  waiting for run to start");
+	}
+	return lines.join("\n");
+}