@oh-my-pi/pi-coding-agent 15.10.12 → 15.11.1

package/src/modes/controllers/event-controller.ts

@@ -21,6 +21,7 @@ import { isSilentAbort, readPendingDisplayTag, resolveAbortLabel } from "../../s
 import type { ResolveToolDetails } from "../../tools/resolve";
 import { interruptHint } from "../shared";
 import { StreamingRevealController } from "./streaming-reveal";
+import { ToolArgsRevealController } from "./tool-args-reveal";
 
 type AgentSessionEventKind = AgentSessionEvent["type"];
 
@@ -77,7 +78,16 @@ export class EventController {
 	// Insertion-ordered IRC cards not yet retired; values are the transcript
 	// components each card contributed (see #retireIrcCard for the guard).
 	#liveIrcCards = new Map<string, Component[]>();
+	// Most recent `job` tool block whose result still had every watched job
+	// running. Kept un-finalized (live) so the next `job` call displaces it —
+	// one persistent poll instead of a stack of "waiting on N jobs" frames —
+	// and sealed in place the moment anything else lands below it.
+	#displaceablePollComponent: ToolExecutionComponent | undefined = undefined;
+	// Most recent TTSR notification block. A new ttsr_triggered event merges its
+	// rules into this block while it is still the (live-region) transcript tail.
+	#lastTtsrNotification: TtsrNotificationComponent | undefined = undefined;
 	#streamingReveal: StreamingRevealController;
+	#toolArgsReveal: ToolArgsRevealController;
 	#handlers: AgentSessionEventHandlers;
 
 	constructor(private ctx: InteractiveModeContext) {
@@ -86,6 +96,10 @@ export class EventController {
 			getHideThinkingBlock: () => this.ctx.hideThinkingBlock,
 			requestRender: () => this.ctx.ui.requestRender(),
 		});
+		this.#toolArgsReveal = new ToolArgsRevealController({
+			getSmoothStreaming: () => this.ctx.settings.get("display.smoothStreaming"),
+			requestRender: () => this.ctx.ui.requestRender(),
+		});
 		this.#handlers = {
 			agent_start: e => this.#handleAgentStart(e),
 			agent_end: e => this.#handleAgentEnd(e),
@@ -119,6 +133,7 @@ export class EventController {
 
 	dispose(): void {
 		this.#streamingReveal.stop();
+		this.#toolArgsReveal.stop();
 		this.#cancelIdleCompaction();
 		for (const timer of this.#ircExpiryTimers.values()) {
 			clearTimeout(timer);
@@ -282,6 +297,7 @@ export class EventController {
 			const signature = `${textContent}\u0000${imageCount}`;
 
 			this.#resetReadGroup();
+			this.#resolveDisplaceablePoll();
 			const wasOptimistic = this.ctx.optimisticUserMessageSignature === signature;
 			const wasLocallySubmitted = this.ctx.locallySubmittedUserSignatures.delete(signature) || wasOptimistic;
 			if (!wasOptimistic) {
@@ -389,6 +405,28 @@ export class EventController {
 		}
 	}
 
+	/**
+	 * Resolve the pending displaceable poll block before the next block lands.
+	 * A follow-up `job` call displaces it — the stale "waiting on N jobs" frame
+	 * is removed so repeated polls read as one persistent poll — while anything
+	 * else seals it in place as final history. Removal is safe only because a
+	 * displaceable block never finalizes: commits stop at the first live block,
+	 * so none of its rows have entered native scrollback (see
+	 * ToolExecutionComponent.isDisplaceableBlock).
+	 */
+	#resolveDisplaceablePoll(nextToolName?: string): void {
+		const previous = this.#displaceablePollComponent;
+		if (!previous) return;
+		this.#displaceablePollComponent = undefined;
+		if (nextToolName === "job" && previous.isDisplaceableBlock()) {
+			this.ctx.chatContainer.removeChild(previous);
+		}
+		// Sealing stops the waiting-poll spinner and freezes the block (for a
+		// just-removed component it only clears the animation timer).
+		previous.seal();
+		this.ctx.ui.requestRender();
+	}
+
 	async #handleNotice(event: Extract<AgentSessionEvent, { type: "notice" }>): Promise<void> {
 		const message = event.source ? `${event.source}: ${event.message}` : event.message;
 		if (event.level === "error") {
@@ -444,6 +482,7 @@ export class EventController {
 						continue;
 					}
 					if (!readArgsTargetInternalUrl(content.arguments)) {
+						if (!this.ctx.pendingTools.has(content.id)) this.#resolveDisplaceablePoll(content.name);
 						this.#trackReadToolCall(content.id, content.arguments);
 						const component = this.ctx.pendingTools.get(content.id);
 						if (component) {
@@ -460,11 +499,25 @@ export class EventController {
 
 				// Preserve the raw partial JSON for renderers that need to surface fields before the JSON object closes.
 				// Bash uses this to show inline env assignments during streaming instead of popping them in at completion.
-				const renderArgs =
-					"partialJson" in content
-						? { ...content.arguments, __partialJson: content.partialJson }
-						: content.arguments;
+				// While the JSON is still open, ToolArgsRevealController paces the
+				// reveal (write/edit/bash previews grow smoothly when a slow provider
+				// delivers large batches); once it closes, the final args render
+				// as-is — mirroring how assistant text snaps at message_end.
+				const partialJson = "partialJson" in content ? content.partialJson : undefined;
+				let renderArgs: Record<string, unknown>;
+				if (typeof partialJson === "string") {
+					renderArgs = this.#toolArgsReveal.setTarget(
+						content.id,
+						partialJson,
+						content.customWireName !== undefined,
+						content.arguments,
+					);
+				} else {
+					this.#toolArgsReveal.finish(content.id);
+					renderArgs = content.arguments;
+				}
 				if (!this.ctx.pendingTools.has(content.id)) {
+					this.#resolveDisplaceablePoll(content.name);
 					this.#resetReadGroup();
 					const tool = this.ctx.session.getToolByName(content.name);
 					const component = new ToolExecutionComponent(
@@ -484,10 +537,12 @@ export class EventController {
 					component.setExpanded(this.ctx.toolOutputExpanded);
 					this.ctx.chatContainer.addChild(component);
 					this.ctx.pendingTools.set(content.id, component);
+					this.#toolArgsReveal.bind(content.id, component);
 				} else {
 					const component = this.ctx.pendingTools.get(content.id);
 					if (component) {
 						component.updateArgs(renderArgs, content.id);
+						this.#toolArgsReveal.bind(content.id, component);
 					}
 				}
 			}
@@ -522,6 +577,7 @@ export class EventController {
 		if (this.ctx.streamingComponent && event.message.role === "assistant") {
 			this.ctx.streamingMessage = event.message;
 			this.#streamingReveal.stop();
+			this.#toolArgsReveal.flushAll();
 			let errorMessage: string | undefined;
 			const aborted = this.ctx.streamingMessage.stopReason === "aborted";
 			const silentlyAborted = aborted && isSilentAbort(this.ctx.streamingMessage.errorMessage);
@@ -561,6 +617,9 @@ export class EventController {
 						component.seal();
 					}
 				}
+				// These calls will never produce a result either, so the tracked
+				// waiting poll cannot be displaced anymore — freeze it in place.
+				this.#resolveDisplaceablePoll();
 			}
 			this.#lastAssistantComponent = this.ctx.streamingComponent;
 			this.#lastAssistantComponent.setUsageInfo(event.message.usage);
@@ -589,6 +648,7 @@ export class EventController {
 	async #handleToolExecutionStart(event: Extract<AgentSessionEvent, { type: "tool_execution_start" }>): Promise<void> {
 		this.#updateWorkingMessageFromIntent(event.intent);
 		if (!this.ctx.pendingTools.has(event.toolCallId)) {
+			this.#resolveDisplaceablePoll(event.toolName);
 			if (event.toolName === "read" && readArgsHaveTarget(event.args) && !readArgsTargetInternalUrl(event.args)) {
 				this.#trackReadToolCall(event.toolCallId, event.args);
 				const component = this.ctx.pendingTools.get(event.toolCallId);
@@ -697,6 +757,14 @@ export class EventController {
 					this.ctx.pendingTools.delete(event.toolCallId);
 					this.#backgroundToolCallIds.delete(event.toolCallId);
 				}
+				if (
+					event.toolName === "job" &&
+					component instanceof ToolExecutionComponent &&
+					component.isDisplaceableBlock()
+				) {
+					// Remember the waiting poll so the next `job` call can displace it.
+					this.#displaceablePollComponent = component;
+				}
 				this.ctx.ui.requestRender();
 			}
 		}
@@ -727,6 +795,7 @@ export class EventController {
 	async #handleAgentEnd(_event: Extract<AgentSessionEvent, { type: "agent_end" }>): Promise<void> {
 		this.#agentTurnActive = false;
 		this.#streamingReveal.stop();
+		this.#toolArgsReveal.flushAll();
 		if (this.ctx.loadingAnimation) {
 			this.ctx.loadingAnimation.stop();
 			this.ctx.loadingAnimation = undefined;
@@ -759,6 +828,9 @@ export class EventController {
 		this.#readToolCallArgs.clear();
 		this.#readToolCallAssistantComponents.clear();
 		this.#resetReadGroup();
+		// The turn is over: nothing else lands this turn, so the waiting poll is
+		// final history — seal it instead of letting its spinner tick while idle.
+		this.#resolveDisplaceablePoll();
 		this.#lastAssistantComponent = undefined;
 		this.ctx.ui.requestRender();
 		this.#scheduleIdleCompaction();
@@ -908,9 +980,26 @@ export class EventController {
 	}
 
 	async #handleTtsrTriggered(event: Extract<AgentSessionEvent, { type: "ttsr_triggered" }>): Promise<void> {
+		// Consecutive notifications (e.g. per-tool matches from one assistant
+		// message) merge into the previous block instead of stacking. Mutating an
+		// existing block is only safe while it sits inside the live region — a
+		// still-mutating block above it means none of its rows have been committed
+		// to native scrollback yet (commits are prefix-only and stop at the first
+		// live block), so the grown block still repaints.
+		const previous = this.#lastTtsrNotification;
+		if (
+			previous &&
+			this.ctx.chatContainer.children.at(-1) === previous &&
+			this.ctx.chatContainer.isWithinLiveRegion(previous)
+		) {
+			previous.addRules(event.rules);
+			this.ctx.ui.requestRender();
+			return;
+		}
 		const component = new TtsrNotificationComponent(event.rules);
 		component.setExpanded(this.ctx.toolOutputExpanded);
 		this.ctx.present(component);
+		this.#lastTtsrNotification = component;
 	}
 
 	async #handleTodoReminder(event: Extract<AgentSessionEvent, { type: "todo_reminder" }>): Promise<void> {

package/src/modes/controllers/extension-ui-controller.ts

@@ -140,7 +140,7 @@ export class ExtensionUiController {
 			reload: async () => {
 				await this.ctx.session.reload();
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				this.ctx.showStatus("Reloaded session");
 			},
@@ -197,7 +197,7 @@ export class ExtensionUiController {
 
 				// Update UI
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				this.ctx.editor.setText(result.selectedText);
 				this.ctx.showStatus("Branched to new session");
@@ -212,7 +212,7 @@ export class ExtensionUiController {
 
 				// Update UI
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				if (result.editorText && !this.ctx.editor.getText().trim()) {
 					this.ctx.editor.setText(result.editorText);
@@ -230,7 +230,7 @@ export class ExtensionUiController {
 				}
 				setSessionTerminalTitle(this.ctx.sessionManager.getSessionName(), this.ctx.sessionManager.getCwd());
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				return { cancelled: false };
 			},
@@ -376,7 +376,7 @@ export class ExtensionUiController {
 			reload: async () => {
 				await this.ctx.session.reload();
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				this.ctx.showStatus("Reloaded session");
 			},
@@ -426,7 +426,7 @@ export class ExtensionUiController {
 
 				// Update UI
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				this.ctx.editor.setText(result.selectedText);
 				this.ctx.showStatus("Branched to new session");
@@ -441,7 +441,7 @@ export class ExtensionUiController {
 
 				// Update UI
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				if (result.editorText && !this.ctx.editor.getText().trim()) {
 					this.ctx.editor.setText(result.editorText);
@@ -458,7 +458,7 @@ export class ExtensionUiController {
 					return { cancelled: true };
 				}
 				this.ctx.chatContainer.clear();
-				this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+				this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 				await this.ctx.reloadTodos();
 				return { cancelled: false };
 			},

package/src/modes/controllers/input-controller.ts

@@ -235,10 +235,26 @@ export class InputController {
 		for (const key of this.ctx.keybindings.getKeys("app.clipboard.copyLine")) {
 			this.ctx.editor.setCustomKeyHandler(key, () => this.handleCopyCurrentLine());
 		}
-		for (const key of this.ctx.keybindings.getKeys("app.session.observe")) {
-			this.ctx.editor.setCustomKeyHandler(key, () => this.ctx.showSessionObserver());
+		const hubKeys = new Set([
+			...this.ctx.keybindings.getKeys("app.agents.hub"),
+			...this.ctx.keybindings.getKeys("app.session.observe"),
+		]);
+		for (const key of hubKeys) {
+			this.ctx.editor.setCustomKeyHandler(key, () => this.ctx.showAgentHub());
 		}
 
+		// Double-tap left arrow on an empty editor opens the agent hub — same
+		// 500ms window as the double-escape state machine above.
+		this.ctx.editor.onLeftAtStart = () => {
+			const now = Date.now();
+			if (now - this.ctx.lastLeftTapTime < 500) {
+				this.ctx.lastLeftTapTime = 0;
+				this.ctx.showAgentHub();
+			} else {
+				this.ctx.lastLeftTapTime = now;
+			}
+		};
+
 		this.#setupEnhancedPaste();
 
 		this.ctx.editor.onChange = (text: string) => {

package/src/modes/controllers/mcp-command-controller.ts

@@ -127,6 +127,7 @@ interface OAuthFlowResult {
 	credentialId: string;
 	clientId?: string;
 	clientSecret?: string;
+	resource?: string;
 }
 
 type MCPAddScope = "user" | "project";
@@ -490,6 +491,7 @@ export class MCPCommandController {
 
 						try {
 							const oauthClientSecret = finalConfig.oauth?.clientSecret ?? "";
+							const oauthResource = oauth.resource ?? finalConfig.url;
 							const oauthResult = await this.#handleOAuthFlow(
 								oauth.authorizationUrl,
 								oauth.tokenUrl,
@@ -499,15 +501,18 @@ export class MCPCommandController {
 								finalConfig.oauth?.callbackPort,
 								finalConfig.oauth?.callbackPath,
 								finalConfig.oauth?.redirectUri,
+								oauthResource,
 							);
 							const persistedClientId = oauthResult.clientId ?? oauth.clientId ?? finalConfig.oauth?.clientId;
 							const persistedClientSecret = oauthResult.clientSecret ?? finalConfig.oauth?.clientSecret;
+							const persistedResource = oauthResult.resource ?? oauthResource;
 							finalConfig = {
 								...finalConfig,
 								auth: {
 									type: "oauth",
 									credentialId: oauthResult.credentialId,
 									tokenUrl: oauth.tokenUrl,
+									resource: persistedResource,
 									clientId: persistedClientId,
 									clientSecret: persistedClientSecret,
 								},
@@ -548,8 +553,25 @@ export class MCPCommandController {
 				done();
 				this.#handleWizardCancel();
 			},
-			async (authUrl: string, tokenUrl: string, clientId: string, clientSecret: string, scopes: string) => {
-				return await this.#handleOAuthFlow(authUrl, tokenUrl, clientId, clientSecret, scopes);
+			async (
+				authUrl: string,
+				tokenUrl: string,
+				clientId: string,
+				clientSecret: string,
+				scopes: string,
+				resource?: string,
+			) => {
+				return await this.#handleOAuthFlow(
+					authUrl,
+					tokenUrl,
+					clientId,
+					clientSecret,
+					scopes,
+					undefined,
+					undefined,
+					undefined,
+					resource,
+				);
 			},
 			async (config: MCPServerConfig) => {
 				return await this.#handleTestConnection(config);
@@ -579,6 +601,7 @@ export class MCPCommandController {
 		callbackPort?: number,
 		callbackPath?: string,
 		redirectUri?: string,
+		resource?: string,
 	): Promise<OAuthFlowResult> {
 		const authStorage = this.ctx.session.modelRegistry.authStorage;
 		let parsedAuthUrl: URL;
@@ -617,6 +640,7 @@ export class MCPCommandController {
 					redirectUri,
 					callbackPort,
 					callbackPath,
+					resource,
 				},
 				{
 					onAuth: (info: { url: string; instructions?: string }) => {
@@ -704,6 +728,7 @@ export class MCPCommandController {
 				credentialId,
 				clientId: flow.resolvedClientId,
 				clientSecret: flow.registeredClientSecret,
+				resource: flow.resource,
 			};
 		} catch (error) {
 			const errorMsg = error instanceof Error ? error.message : String(error);
@@ -804,6 +829,7 @@ export class MCPCommandController {
 		tokenUrl: string;
 		clientId?: string;
 		scopes?: string;
+		resource?: string;
 	}> {
 		// First test if server actually needs auth by connecting without OAuth
 		let connectionSucceeded = false;
@@ -1415,6 +1441,9 @@ export class MCPCommandController {
 
 			this.#showMessage(["", theme.fg("muted", `Reauthorizing "${name}"...`), ""].join("\n"));
 
+			const oauthResource =
+				oauth.resource ?? currentAuth?.resource ?? ("url" in baseConfig ? baseConfig.url : undefined);
+
 			const oauthResult = await this.#handleOAuthFlow(
 				oauth.authorizationUrl,
 				oauth.tokenUrl,
@@ -1424,10 +1453,12 @@ export class MCPCommandController {
 				found.config.oauth?.callbackPort,
 				found.config.oauth?.callbackPath,
 				found.config.oauth?.redirectUri,
+				oauthResource,
 			);
 
 			const persistedClientId = oauthResult.clientId ?? oauth.clientId ?? found.config.oauth?.clientId;
 			const persistedClientSecret = oauthResult.clientSecret ?? (oauthClientSecret || undefined);
+			const persistedResource = oauthResult.resource ?? oauthResource;
 
 			const updated: MCPServerConfig = {
 				...baseConfig,
@@ -1435,6 +1466,7 @@ export class MCPCommandController {
 					type: "oauth",
 					credentialId: oauthResult.credentialId,
 					tokenUrl: oauth.tokenUrl,
+					resource: persistedResource,
 					clientId: persistedClientId,
 					clientSecret: persistedClientSecret,
 				},

package/src/modes/controllers/selector-controller.ts

@@ -40,6 +40,7 @@ import { shortenPath } from "../../tools/render-utils";
 import { copyToClipboard } from "../../utils/clipboard";
 import { setSessionTerminalTitle } from "../../utils/title-generator";
 import { AgentDashboard } from "../components/agent-dashboard";
+import { AgentHubOverlayComponent } from "../components/agent-hub";
 import { AssistantMessageComponent } from "../components/assistant-message";
 import { CopySelectorComponent } from "../components/copy-selector";
 import { ExtensionDashboard } from "../components/extensions";
@@ -47,7 +48,6 @@ import { HistorySearchComponent } from "../components/history-search";
 import { ModelSelectorComponent } from "../components/model-selector";
 import { OAuthSelectorComponent } from "../components/oauth-selector";
 import { PluginSelectorComponent } from "../components/plugin-selector";
-import { SessionObserverOverlayComponent } from "../components/session-observer-overlay";
 import { SessionSelectorComponent } from "../components/session-selector";
 import { SettingsSelectorComponent } from "../components/settings-selector";
 import { ToolExecutionComponent } from "../components/tool-execution";
@@ -120,6 +120,7 @@ export class SelectorController {
 								separator: settings.get("statusLine.separator"),
 								showHookStatus: settings.get("statusLine.showHookStatus"),
 								sessionAccent: settings.get("statusLine.sessionAccent"),
+								transparent: settings.get("statusLine.transparent"),
 								...previewSettings,
 							});
 							this.ctx.updateEditorTopBorder();
@@ -147,6 +148,7 @@ export class SelectorController {
 								separator: settings.get("statusLine.separator"),
 								showHookStatus: settings.get("statusLine.showHookStatus"),
 								sessionAccent: settings.get("statusLine.sessionAccent"),
+								transparent: settings.get("statusLine.transparent"),
 							});
 							this.ctx.updateEditorTopBorder();
 							this.ctx.ui.requestRender();
@@ -351,6 +353,7 @@ export class SelectorController {
 			case "statusLineShowHooks":
 			case "statusLine.showHookStatus":
 			case "statusLine.sessionAccent":
+			case "statusLine.transparent":
 			case "statusLineSegments":
 			case "statusLineModelThinking":
 			case "statusLinePathAbbreviate":
@@ -369,6 +372,7 @@ export class SelectorController {
 					separator: settings.get("statusLine.separator"),
 					showHookStatus: settings.get("statusLine.showHookStatus"),
 					sessionAccent: settings.get("statusLine.sessionAccent"),
+					transparent: settings.get("statusLine.transparent"),
 					segmentOptions: settings.get("statusLine.segmentOptions"),
 				};
 				this.ctx.statusLine.updateSettings(statusLineSettings);
@@ -578,7 +582,7 @@ export class SelectorController {
 					}
 
 					this.ctx.chatContainer.clear();
-					this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+					this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 					this.ctx.editor.setText(result.selectedText);
 					done();
 					this.ctx.showStatus("Branched to new session");
@@ -719,9 +723,10 @@ export class SelectorController {
 							return;
 						}
 
-						// Update UI — pass the context built by navigateTree to skip a second O(N) walk.
+						// Update UI — rebuild the display transcript for the new leaf (the
+						// context from navigateTree is the LLM context, not the transcript).
 						this.ctx.chatContainer.clear();
-						this.ctx.renderInitialMessages(result.sessionContext, { clearTerminalHistory: true });
+						this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 						await this.ctx.reloadTodos();
 						if (result.editorText && !this.ctx.editor.getText().trim()) {
 							this.ctx.editor.setText(result.editorText);
@@ -846,7 +851,7 @@ export class SelectorController {
 		this.ctx.statusLine.setSessionStartTime(Date.now());
 		this.ctx.updateEditorTopBorder();
 		this.ctx.updateEditorBorderColor();
-		this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+		this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 		await this.ctx.reloadTodos();
 		this.ctx.ui.requestRender(true, { clearScrollback: true });
 		return true;
@@ -871,7 +876,7 @@ export class SelectorController {
 
 		// Clear and re-render the chat
 		this.ctx.chatContainer.clear();
-		this.ctx.renderInitialMessages(undefined, { clearTerminalHistory: true });
+		this.ctx.renderInitialMessages({ clearTerminalHistory: true });
 		await this.ctx.reloadTodos();
 		this.ctx.showStatus(movedProject ? `Resumed session in ${shortenPath(newCwd)}` : "Resumed session");
 	}
@@ -1074,31 +1079,34 @@ export class SelectorController {
 		});
 	}
 
-	showSessionObserver(registry: SessionObserverRegistry): void {
-		const observeKeys = this.ctx.keybindings.getKeys("app.session.observe");
-		let cleanup: (() => void) | undefined;
+	showAgentHub(observers: SessionObserverRegistry): void {
+		const hubKeys = [
+			...this.ctx.keybindings.getKeys("app.agents.hub"),
+			...this.ctx.keybindings.getKeys("app.session.observe"),
+		];
+		let hub: AgentHubOverlayComponent | undefined;
 		let overlayHandle: OverlayHandle | undefined;
 
 		const done = () => {
-			cleanup?.();
+			hub?.dispose();
 			overlayHandle?.hide();
 			this.ctx.ui.requestRender();
 		};
 
-		const selector = new SessionObserverOverlayComponent(registry, done, observeKeys);
-
-		cleanup = registry.onChange(() => {
-			selector.refreshFromRegistry();
-			this.ctx.ui.requestRender();
+		hub = new AgentHubOverlayComponent({
+			observers,
+			hubKeys,
+			onDone: done,
+			requestRender: () => this.ctx.ui.requestRender(),
 		});
 
-		overlayHandle = this.ctx.ui.showOverlay(selector, {
+		overlayHandle = this.ctx.ui.showOverlay(hub, {
 			anchor: "bottom-center",
 			width: "100%",
 			maxHeight: "100%",
 			margin: 0,
 		});
-		this.ctx.ui.setFocus(selector);
+		this.ctx.ui.setFocus(hub);
 		this.ctx.ui.requestRender();
 	}
 }