feat(ui): visible 'Compacting…' banner during transformContext

Audit finding #10: compaction silently freezes the CLI for a few
seconds on long sessions while glue.smart summarises older turns.
Looks like a hang — the user has no signal the agent is working.

New CompactionMonitor (pubsub, same shape as PermissionStore) bridges
the transformContext hook to the TUI. The hook calls start() before
the summarise call, end() in a finally so a thrown error doesn't
leave the banner stuck. App.tsx subscribes and renders a yellow
banner below MessageList with the active message count and an
elapsed-seconds tick. Disappears the moment compaction returns.

Author: halfaipg

src/agent/agent.ts

@@ -3,6 +3,7 @@ import { isAbsolute, join, resolve } from "node:path";
 import { Agent, type AgentEvent } from "@earendil-works/pi-agent-core";
 import type { Model } from "@earendil-works/pi-ai";
 import { CompactionEngine } from "../compaction/engine.js";
+import { CompactionMonitor } from "../compaction/monitor.js";
 import { ConfigStore } from "../config/store.js";
 import { DiagnosticsEngine, formatDiagnostics } from "../diagnostics/engine.js";
 import { GlueClient, resolveGlueModels } from "../glue/client.js";
@@ -66,6 +67,7 @@ export interface AgentBundle {
 	memory: MemoryStore;
 	glue: GlueClient;
 	compaction: CompactionEngine;
+	compactionMonitor: CompactionMonitor;
 	sessions: SessionStore;
 	hooks: HookManager;
 	diagnostics: DiagnosticsEngine;
@@ -103,6 +105,7 @@ export function createAgent(opts: CreateAgentOptions = {}): AgentBundle {
 		apiKey: glueModels.apiKey,
 	});
 	const compaction = new CompactionEngine({ glue, modelId: model.id });
+	const compactionMonitor = new CompactionMonitor();
 	const sessions = new SessionStore({ cwd });
 	const resumed = opts.resume ? sessions.load(model.id) : null;
 
@@ -135,24 +138,31 @@ export function createAgent(opts: CreateAgentOptions = {}): AgentBundle {
 		getApiKey: () => apiKey,
 		transformContext: async (messages, signal) => {
 			if (!compaction.needsCompaction(messages)) return messages;
-			await hooks.dispatch(
-				"PreCompact",
-				{ event: "PreCompact", workingDir: cwd, messageCount: messages.length },
-				signal,
-			);
-			const result = await compaction.compact(messages, signal);
-			await hooks.dispatch(
-				"PostCompact",
-				{
-					event: "PostCompact",
-					workingDir: cwd,
-					messageCount: result.messages.length,
-					collapsedMessageCount: result.details.collapsedMessageCount,
-					truncatedTokens: result.details.truncatedTokens,
-				},
-				signal,
-			);
-			return result.messages;
+			compactionMonitor.start(messages.length);
+			try {
+				await hooks.dispatch(
+					"PreCompact",
+					{ event: "PreCompact", workingDir: cwd, messageCount: messages.length },
+					signal,
+				);
+				const result = await compaction.compact(messages, signal);
+				await hooks.dispatch(
+					"PostCompact",
+					{
+						event: "PostCompact",
+						workingDir: cwd,
+						messageCount: result.messages.length,
+						collapsedMessageCount: result.details.collapsedMessageCount,
+						truncatedTokens: result.details.truncatedTokens,
+					},
+					signal,
+				);
+				return result.messages;
+			} finally {
+				// Always clear — even if compact() threw, the user shouldn't
+				// see a stuck "Compacting…" banner forever.
+				compactionMonitor.end();
+			}
 		},
 		beforeToolCall: async (ctx, signal) => {
 			// 1. Plan mode gate: block destructive tools entirely while planning.
@@ -279,6 +289,7 @@ export function createAgent(opts: CreateAgentOptions = {}): AgentBundle {
 		memory,
 		glue,
 		compaction,
+		compactionMonitor,
 		sessions,
 		hooks,
 		diagnostics,

src/compaction/monitor.ts

@@ -0,0 +1,52 @@
+/**
+ * Live status of in-flight compaction. The agent's transformContext hook
+ * runs synchronously on the critical path: when it triggers, the user
+ * sees a multi-second freeze with no visual signal — looks like a hang.
+ *
+ * CompactionMonitor is the bridge between the hook and the TUI: the hook
+ * calls `start()` before the glue summarize call, `end()` after. The TUI
+ * subscribes and renders a "Compacting…" banner for the duration. Same
+ * pubsub pattern PermissionStore and UserQueryStore use.
+ */
+
+export interface CompactionState {
+	active: boolean;
+	/** Wall-clock ms when start() was called; used for an elapsed-seconds label. */
+	startedAt: number | null;
+	/** How many messages were in the transcript when compaction kicked off. */
+	messageCount: number;
+}
+
+export type CompactionListener = (state: CompactionState) => void;
+
+export class CompactionMonitor {
+	private state: CompactionState = { active: false, startedAt: null, messageCount: 0 };
+	private readonly listeners = new Set<CompactionListener>();
+
+	start(messageCount: number): void {
+		this.state = { active: true, startedAt: Date.now(), messageCount };
+		this.notify();
+	}
+
+	end(): void {
+		this.state = { active: false, startedAt: null, messageCount: 0 };
+		this.notify();
+	}
+
+	current(): CompactionState {
+		return this.state;
+	}
+
+	subscribe(listener: CompactionListener): () => void {
+		this.listeners.add(listener);
+		listener(this.current());
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+
+	private notify(): void {
+		const snapshot = this.current();
+		for (const listener of this.listeners) listener(snapshot);
+	}
+}

src/ui/App.tsx

@@ -9,6 +9,7 @@ import { generateSuggestion } from "../agent/prompt-suggestion.js";
 import { routeUserInput } from "../agent/router.js";
 import { BUILTIN_COMMANDS } from "../commands/builtins.js";
 import { CommandRegistry } from "../commands/registry.js";
+import type { CompactionState } from "../compaction/monitor.js";
 import type { PermissionRequest } from "../permissions/store.js";
 import {
 	buildAgentPrompt,
@@ -91,6 +92,7 @@ function ChatApp({ bundle, onExit }: ChatAppProps) {
 	);
 	const [permRequest, setPermRequest] = useState<PermissionRequest | undefined>(bundle.permissions.current());
 	const [userQuery, setUserQuery] = useState<UserQuery | undefined>(bundle.userQueries.current());
+	const [compactionState, setCompactionState] = useState(bundle.compactionMonitor.current());
 	const [statusLines, setStatusLines] = useState<string[]>([]);
 	// Cap the buffer so noisy emits (long /help, many !cmds) don't grow
 	// the status pane indefinitely. 50 rows ≈ a screen on most terms.
@@ -202,6 +204,10 @@ function ChatApp({ bundle, onExit }: ChatAppProps) {
 		return bundle.permissions.subscribe((req) => setPermRequest(req));
 	}, [bundle]);
 
+	useEffect(() => {
+		return bundle.compactionMonitor.subscribe((s) => setCompactionState(s));
+	}, [bundle]);
+
 	useEffect(() => {
 		return bundle.userQueries.subscribe((q) => setUserQuery(q));
 	}, [bundle]);
@@ -436,6 +442,7 @@ function ChatApp({ bundle, onExit }: ChatAppProps) {
 				</Box>
 			)}
 			<MessageList messages={state.messages} streaming={state.streaming} tools={state.tools} />
+			{compactionState.active ? <CompactionBanner state={compactionState} /> : null}
 			<ToolPanel tools={state.tools} />
 			<TaskPanel tasks={tasks} />
 			{statusLines.length > 0 ? (
@@ -551,3 +558,29 @@ function ExitOnCtrlC({ onExit }: { onExit: () => void }) {
 	}, [onExit]);
 	return null;
 }
+
+/**
+ * Visible banner while the agent is summarising older turns into a
+ * compaction checkpoint. The work itself takes a few seconds on long
+ * sessions — silent before, looked like a hang. The banner re-renders
+ * its elapsed-seconds label every second so the user has a clear
+ * "still working" signal.
+ */
+function CompactionBanner({ state }: { state: CompactionState }) {
+	const [elapsed, setElapsed] = useState(0);
+	useEffect(() => {
+		if (!state.startedAt) return;
+		const tick = () => setElapsed(Math.floor((Date.now() - (state.startedAt ?? Date.now())) / 1000));
+		tick();
+		const id = setInterval(tick, 1000);
+		return () => clearInterval(id);
+	}, [state.startedAt]);
+	return (
+		<Box paddingX={1} marginBottom={0}>
+			<Text color="yellow">
+				⟳ Compacting context ({state.messageCount} messages
+				{elapsed > 0 ? ` · ${elapsed}s` : ""})…
+			</Text>
+		</Box>
+	);
+}