@oh-my-pi/pi-coding-agent 16.2.2 → 16.2.3

package/src/advisor/watchdog.ts

@@ -31,79 +31,105 @@ export function formatAdvisorContextPrompt(
 }
 
 /**
- * Discover and load WATCHDOG.md files walking up from cwd, project .omp folder, and user agent dir.
- * Returns formatted watchdog file blocks ready to be appended to the advisor system prompt.
+ * A readable config candidate discovered on the watchdog/advisor search path,
+ * with raw (un-expanded) content and its position metadata.
  */
-export async function discoverWatchdogFiles(cwd: string, agentDir?: string): Promise<string[]> {
+export interface ConfigCandidate {
+	path: string;
+	content: string;
+	level: "user" | "project";
+	depth: number;
+}
+
+/**
+ * Walk the watchdog/advisor config search path — the user agent dir plus every
+ * directory from `cwd` up to the repo root (or home), probing both `<F>` and
+ * `.omp/<F>` for each given filename — and return the readable candidates with
+ * their raw content, sorted user-first then project ancestor→leaf (depth
+ * descending, so the leaf directory is most specific/last). Shared by
+ * {@link discoverWatchdogFiles} and `discoverAdvisorConfigs`. Content is returned
+ * verbatim (no `@import` expansion); callers expand what they need.
+ */
+export async function collectConfigCandidates(
+	cwd: string,
+	agentDir: string | undefined,
+	filenames: string[],
+): Promise<ConfigCandidate[]> {
 	const home = os.homedir();
 	const resolvedAgentDir = agentDir ?? getAgentDir();
-	const userPath = resolvedAgentDir ? path.resolve(resolvedAgentDir, "WATCHDOG.md") : null;
+	const userPaths = new Set<string>();
 	let repoRoot: string | null = null;
 	try {
 		repoRoot = await repo.root(cwd);
 	} catch (err) {
-		logger.debug("Failed to resolve git root for watchdog discovery", { err: String(err) });
+		logger.debug("Failed to resolve git root for config discovery", { err: String(err) });
 	}
 
 	const candidates = new Set<string>();
 
-	// 1. User level: ~/.omp/WATCHDOG.md (or active profile agent dir)
+	// 1. User level: ~/.omp/<F> (or active profile agent dir)
 	if (resolvedAgentDir) {
-		candidates.add(path.resolve(resolvedAgentDir, "WATCHDOG.md"));
+		for (const filename of filenames) {
+			const userPath = path.resolve(resolvedAgentDir, filename);
+			candidates.add(userPath);
+			userPaths.add(userPath);
+		}
 	}
 
 	// 2. Project levels (both standalone and native config .omp/): walk up from cwd to repoRoot / home
 	let current = cwd;
 	while (true) {
-		candidates.add(path.resolve(current, ".omp", "WATCHDOG.md"));
-		candidates.add(path.resolve(current, "WATCHDOG.md"));
-
+		for (const filename of filenames) {
+			candidates.add(path.resolve(current, ".omp", filename));
+			candidates.add(path.resolve(current, filename));
+		}
 		if (current === (repoRoot ?? home)) break;
 		const parent = path.dirname(current);
 		if (parent === current) break;
 		current = parent;
 	}
 
-	const items: Array<{ path: string; content: string; level: "user" | "project"; depth: number }> = [];
-
+	const items: ConfigCandidate[] = [];
 	for (const candidate of candidates) {
 		try {
 			const content = await Bun.file(candidate).text();
-			const expanded = await expandAtImports(content, candidate);
 			const parent = path.dirname(candidate);
 			const baseName = parent.split(path.sep).pop() ?? "";
-
-			const isUser = userPath !== null && candidate === userPath;
+			const isUser = userPaths.has(candidate);
 			const ownerDir = baseName === ".omp" ? path.dirname(parent) : parent;
 			const ownerBaseName = ownerDir.split(path.sep).pop() ?? "";
-
 			if (isUser || !ownerBaseName.startsWith(".") || baseName === ".omp") {
 				const relative = path.relative(cwd, ownerDir);
 				const depth = relative === "" ? 0 : relative.split(path.sep).filter(Boolean).length;
-				items.push({
-					path: candidate,
-					content: expanded,
-					level: isUser ? "user" : "project",
-					depth,
-				});
+				items.push({ path: candidate, content, level: isUser ? "user" : "project", depth });
 			}
 		} catch (err) {
 			if (!isEnoent(err)) {
-				logger.warn("Failed to read WATCHDOG.md candidate", { path: candidate, error: String(err) });
+				logger.warn("Failed to read config candidate", { path: candidate, error: String(err) });
 			}
 		}
 	}
 
-	// Sort files so that user level comes first, then project level sorted by depth (descending).
-	// This means user-level rules are first, then project-level rules from ancestor directories down to the leaf directory (depth 0 is last/most prominent).
+	// User level first, then project levels sorted by depth descending — ancestor
+	// directories first, the leaf (depth 0) last/most prominent.
 	items.sort((a, b) => {
-		if (a.level !== b.level) {
-			return a.level === "user" ? -1 : 1;
-		}
+		if (a.level !== b.level) return a.level === "user" ? -1 : 1;
 		return b.depth - a.depth;
 	});
 
-	return items.map(item => {
-		return `Especially pay attention to:\n<attention>\n${item.content}\n</attention>`;
-	});
+	return items;
+}
+
+/**
+ * Discover and load WATCHDOG.md files walking up from cwd, project .omp folder, and user agent dir.
+ * Returns formatted watchdog file blocks ready to be appended to the advisor system prompt.
+ */
+export async function discoverWatchdogFiles(cwd: string, agentDir?: string): Promise<string[]> {
+	const items = await collectConfigCandidates(cwd, agentDir, ["WATCHDOG.md"]);
+	const blocks: string[] = [];
+	for (const item of items) {
+		const expanded = await expandAtImports(item.content, item.path);
+		blocks.push(`Especially pay attention to:\n<attention>\n${expanded}\n</attention>`);
+	}
+	return blocks;
 }

package/src/autoresearch/index.ts

@@ -320,6 +320,11 @@ export const createAutoresearchExtension: ExtensionFactory = api => {
 		runtime.lastRunDuration = pendingRun?.durationSeconds ?? runtime.lastRunDuration;
 		runtime.lastRunAsi = pendingRun?.parsedAsi ?? runtime.lastRunAsi;
 		const state = runtime.state;
+		// `event.systemPrompt` is typed `string[]`, but upstream code paths can leave
+		// it unset (issue #3665). Coerce defensively so the autoresearch block still
+		// renders — the model just loses the upstream prefix for this turn, which is
+		// strictly better than crashing the handler.
+		const basePrompt = Array.isArray(event.systemPrompt) ? event.systemPrompt.join("\n\n") : "";
 		const currentSegmentResults = currentResults(state.results, state.currentSegment);
 		const baselineMetric = findBaselineMetric(state.results, state.currentSegment);
 		const baselineRunNumber = findBaselineRunNumber(state.results, state.currentSegment);
@@ -358,7 +363,7 @@ export const createAutoresearchExtension: ExtensionFactory = api => {
 			return {
 				systemPrompt: [
 					prompt.render(setupPromptTemplate, {
-						base_system_prompt: event.systemPrompt.join("\n\n"),
+						base_system_prompt: basePrompt,
 						has_goal: goal.trim().length > 0,
 						goal,
 						working_dir: ctx.cwd,
@@ -373,7 +378,7 @@ export const createAutoresearchExtension: ExtensionFactory = api => {
 		return {
 			systemPrompt: [
 				prompt.render(promptTemplate, {
-					base_system_prompt: event.systemPrompt.join("\n\n"),
+					base_system_prompt: basePrompt,
 					has_goal: goal.trim().length > 0,
 					goal,
 					working_dir: ctx.cwd,

package/src/cli/gc-cli.ts

@@ -434,17 +434,24 @@ function sessionIdFromSessionPath(sessionPath: string): string | undefined {
 }
 
 function sessionIdFromSessionText(text: string): string | undefined {
-	const line = text
-		.split(/\r?\n/)
-		.find(candidate => candidate.trim().length > 0)
-		?.trim();
-	if (!line) return undefined;
-	try {
-		const record = JSON.parse(line) as { type?: unknown; id?: unknown };
-		return record.type === "session" && typeof record.id === "string" && record.id.length > 0 ? record.id : undefined;
-	} catch {
-		return undefined;
+	let sawTitleSlot = false;
+	for (const rawLine of text.split(/\r?\n/)) {
+		const line = rawLine.trim();
+		if (!line) continue;
+		try {
+			const record = JSON.parse(line) as { type?: unknown; id?: unknown };
+			if (!sawTitleSlot && record.type === "title") {
+				sawTitleSlot = true;
+				continue;
+			}
+			return record.type === "session" && typeof record.id === "string" && record.id.length > 0
+				? record.id
+				: undefined;
+		} catch {
+			return undefined;
+		}
 	}
+	return undefined;
 }
 
 async function archivedSessionIdFromFile(file: string): Promise<string | undefined> {

package/src/collab/guest.ts

@@ -78,6 +78,46 @@ interface PendingSnapshot {
 	isResync: boolean;
 }
 
+/** Minimal context surface the idle-state reconciler mutates. */
+export interface GuestIdleReconcilerCtx {
+	statusLine: { markActivityEnd: () => void };
+	loadingAnimation: { stop: () => void } | undefined;
+}
+
+/**
+ * Close the guest UI state held open by an earlier `agent_start` whose
+ * matching `agent_end` never reached us — most often because a reconnect
+ * dropped the event mid-stream. Triggered from {@link CollabGuestLink}'s
+ * `state` reconciler when the host reports `isStreaming === false`:
+ * folds the in-flight active-time window into the per-session meter (so
+ * `time_spent` stops ticking) and stops the `Working…` loader if one is
+ * still animating. No-op when the host is still streaming.
+ *
+ * Exported for direct unit testing; mutates the loader field on `ctx` so
+ * the same loader is not stopped twice on subsequent reconciliations.
+ */
+export function reconcileGuestIdleHostState(ctx: GuestIdleReconcilerCtx, isStreaming: boolean): void {
+	if (isStreaming) return;
+	ctx.statusLine.markActivityEnd();
+	if (ctx.loadingAnimation) {
+		ctx.loadingAnimation.stop();
+		ctx.loadingAnimation = undefined;
+	}
+}
+
+/** Reconcile a welcome/resync snapshot's host activity state into the guest meter. */
+export interface GuestSnapshotActivityReconcilerCtx extends GuestIdleReconcilerCtx {
+	statusLine: GuestIdleReconcilerCtx["statusLine"] & { markActivityStart: () => void };
+}
+
+export function reconcileGuestSnapshotHostState(ctx: GuestSnapshotActivityReconcilerCtx, isStreaming: boolean): void {
+	if (isStreaming) {
+		ctx.statusLine.markActivityStart();
+		return;
+	}
+	reconcileGuestIdleHostState(ctx, false);
+}
+
 export class CollabGuestLink {
 	#ctx: InteractiveModeContext;
 	#socket: CollabSocket | null = null;
@@ -355,6 +395,7 @@ export class CollabGuestLink {
 		this.#clearAgentMirror();
 		await this.#ctx.session.switchSession(replicaPath);
 		this.state = pending.state;
+		reconcileGuestSnapshotHostState(this.#ctx, pending.state.isStreaming);
 		this.#applyHostState(pending.state);
 		this.#ctx.resetObserverRegistry();
 		this.#applyAgentSnapshots(pending.agents);
@@ -425,12 +466,7 @@ export class CollabGuestLink {
 				this.#applyHostState(frame.state);
 				setSessionTerminalTitle(frame.state.sessionName, frame.state.cwd);
 				this.#updateStatusSegment();
-				// Reconciler: events normally drive the loader; clear a stale one if
-				// the host reports idle (e.g. events lost across a reconnect).
-				if (!frame.state.isStreaming && this.#ctx.loadingAnimation) {
-					this.#ctx.loadingAnimation.stop();
-					this.#ctx.loadingAnimation = undefined;
-				}
+				reconcileGuestIdleHostState(this.#ctx, frame.state.isStreaming);
 				this.#ctx.statusLine.invalidate();
 				this.#ctx.ui.requestRender();
 				break;
@@ -588,7 +624,7 @@ export class CollabGuestLink {
 		await this.#ctx.session.newSession();
 		setSessionTerminalTitle(this.#ctx.sessionManager.getSessionName(), this.#ctx.sessionManager.getCwd());
 		this.#ctx.statusLine.invalidate();
-		this.#ctx.statusLine.setSessionStartTime(Date.now());
+		this.#ctx.statusLine.resetActiveTime();
 		this.#ctx.updateEditorTopBorder();
 		this.#ctx.updateEditorBorderColor();
 		this.#ctx.renderInitialMessages({ clearTerminalHistory: true });

package/src/config/model-registry.ts

@@ -303,16 +303,82 @@ function resolveConfigValue(valueConfig: string): string | undefined {
 	return valueConfig;
 }
 
-function resolveConfigHeaders(headers: Record<string, string> | undefined): Record<string, string> | undefined {
-	if (!headers) return undefined;
+type HeaderSource = Record<string, string> | undefined;
+
+interface HeaderResolutionOptions {
+	authHeader?: boolean;
+	apiKeyConfig?: string;
+}
+
+function materializeConfigHeaderSources(
+	sources: readonly HeaderSource[],
+	options?: HeaderResolutionOptions,
+): Record<string, string> | undefined {
 	const resolved: Record<string, string> = {};
-	for (const [key, value] of Object.entries(headers)) {
-		const next = resolveConfigValue(value);
-		if (next) resolved[key] = next;
+	for (const source of sources) {
+		if (!source) continue;
+		for (const [key, value] of Object.entries(source)) {
+			const next = resolveConfigValue(value);
+			if (next) resolved[key] = next;
+		}
+	}
+	if (options?.authHeader && options.apiKeyConfig) {
+		const resolvedKey = resolveConfigValue(options.apiKeyConfig);
+		if (resolvedKey) resolved.Authorization = `Bearer ${resolvedKey}`;
 	}
 	return Object.keys(resolved).length > 0 ? resolved : undefined;
 }
 
+function createLiveConfigHeaders(
+	sources: readonly HeaderSource[],
+	options?: HeaderResolutionOptions,
+): Record<string, string> | undefined {
+	const liveSources = sources.filter((source): source is Record<string, string> => source !== undefined);
+	if (liveSources.length === 0 && (!options?.authHeader || !options.apiKeyConfig)) return undefined;
+
+	const localHeaders: Record<string, string> = {};
+	const allSources = [...liveSources, localHeaders];
+	const current = () => materializeConfigHeaderSources(allSources, options) ?? {};
+	return new Proxy(localHeaders, {
+		get(target, property, receiver) {
+			if (typeof property !== "string") return Reflect.get(target, property, receiver);
+			return current()[property];
+		},
+		set(target, property, value) {
+			if (typeof property !== "string" || typeof value !== "string") return false;
+			target[property] = value;
+			return true;
+		},
+		deleteProperty(target, property) {
+			if (typeof property !== "string") return false;
+			delete target[property];
+			return true;
+		},
+		has(_target, property) {
+			if (typeof property !== "string") return false;
+			return Object.hasOwn(current(), property);
+		},
+		ownKeys() {
+			return Reflect.ownKeys(current());
+		},
+		getOwnPropertyDescriptor(_target, property) {
+			if (typeof property !== "string") return undefined;
+			const headers = current();
+			if (!Object.hasOwn(headers, property)) return undefined;
+			return {
+				configurable: true,
+				enumerable: true,
+				value: headers[property],
+				writable: true,
+			};
+		},
+	});
+}
+
+function resolveConfigHeaders(headers: Record<string, string> | undefined): Record<string, string> | undefined {
+	return materializeConfigHeaderSources([headers]);
+}
+
 function extractGoogleOAuthToken(value: string | undefined): string | undefined {
 	if (!isAuthenticated(value)) return undefined;
 	try {
@@ -495,21 +561,15 @@ function mergeCustomModelHeaders(
 	authHeader: boolean | undefined,
 	apiKeyConfig: string | undefined,
 ): Record<string, string> | undefined {
-	const resolvedModelHeaders = resolveConfigHeaders(modelHeaders);
-	return mergeAuthHeader({ ...providerHeaders, ...resolvedModelHeaders }, authHeader, apiKeyConfig);
+	return createLiveConfigHeaders([providerHeaders, modelHeaders], { authHeader, apiKeyConfig });
 }
 
-function mergeAuthHeader(
-	headers: Record<string, string> | undefined,
+function mergeAuthHeaderSources(
+	sources: readonly HeaderSource[],
 	authHeader: boolean | undefined,
 	apiKeyConfig: string | undefined,
 ): Record<string, string> | undefined {
-	const nextHeaders = headers && Object.keys(headers).length > 0 ? { ...headers } : undefined;
-	if (!authHeader || !apiKeyConfig) {
-		return nextHeaders;
-	}
-	const resolvedKey = resolveConfigValue(apiKeyConfig);
-	return resolvedKey ? { ...nextHeaders, Authorization: `Bearer ${resolvedKey}` } : nextHeaders;
+	return createLiveConfigHeaders(sources, { authHeader, apiKeyConfig });
 }
 
 /**
@@ -1661,7 +1721,9 @@ export class ModelRegistry {
 			baseUrl: override.baseUrl ?? baseOverride?.baseUrl,
 			apiKey: override.apiKey ?? baseOverride?.apiKey,
 			authHeader: override.authHeader ?? baseOverride?.authHeader,
-			headers: override.headers ? { ...(baseOverride?.headers ?? {}), ...override.headers } : baseOverride?.headers,
+			headers: override.headers
+				? createLiveConfigHeaders([baseOverride?.headers, override.headers])
+				: baseOverride?.headers,
 			compat: override.compat ? mergeCompat(baseOverride?.compat, override.compat) : baseOverride?.compat,
 			remoteCompaction: mergeRemoteCompactionConfig(baseOverride?.remoteCompaction, override.remoteCompaction),
 			transport: override.transport ?? baseOverride?.transport,
@@ -1676,8 +1738,8 @@ export class ModelRegistry {
 			"baseUrl" | "headers" | "authHeader" | "apiKey" | "remoteCompaction" | "transport"
 		>,
 	): T {
-		const headers = mergeAuthHeader(
-			override.headers ? { ...entry.headers, ...override.headers } : entry.headers,
+		const headers = mergeAuthHeaderSources(
+			override.headers ? [entry.headers, override.headers] : [entry.headers],
 			override.authHeader,
 			override.apiKey,
 		);

package/src/config/settings-schema.ts

@@ -600,6 +600,17 @@ export const SETTINGS_SCHEMA = {
 				"Use the terminal's default background for the status line instead of the theme's `statusLineBg`. Powerline end caps are dropped because they need a contrasting fill to bridge into the surrounding terminal.",
 		},
 	},
+	"statusLine.compactThinkingLevel": {
+		type: "boolean",
+		default: false,
+		ui: {
+			tab: "appearance",
+			group: "Status Line",
+			label: "Compact Thinking Level",
+			description:
+				"Show the thinking level as a single icon on the model name instead of a separate ` · <level>` suffix.",
+		},
+	},
 	"tools.artifactSpillThreshold": {
 		type: "number",
 		default: 50,
@@ -1633,6 +1644,35 @@ export const SETTINGS_SCHEMA = {
 		},
 	},
 
+	"recap.enabled": {
+		type: "boolean",
+		default: true,
+		ui: {
+			tab: "interaction",
+			group: "Notifications",
+			label: "Idle Recap",
+			description: "Generate a brief LLM recap of where things stand after the terminal has been idle",
+		},
+	},
+
+	"recap.idleSeconds": {
+		type: "number",
+		default: 240,
+		ui: {
+			tab: "interaction",
+			group: "Notifications",
+			label: "Idle Recap Delay",
+			description: "Seconds to wait while idle before showing the recap",
+			options: [
+				{ value: "60", label: "1 minute" },
+				{ value: "120", label: "2 minutes" },
+				{ value: "240", label: "4 minutes" },
+				{ value: "300", label: "5 minutes" },
+				{ value: "600", label: "10 minutes" },
+			],
+		},
+	},
+
 	// Collab
 	"collab.relayUrl": {
 		type: "string",
@@ -1889,6 +1929,17 @@ export const SETTINGS_SCHEMA = {
 		},
 	},
 
+	"compaction.remoteStreamingV2Enabled": {
+		type: "boolean",
+		default: true,
+		ui: {
+			tab: "context",
+			group: "Compaction",
+			label: "Remote Compaction V2",
+			description: "Use Responses streaming compaction for compatible remote compaction models",
+		},
+	},
+
 	"compaction.reserveTokens": { type: "number", default: 16384 },
 
 	"compaction.keepRecentTokens": { type: "number", default: 20000 },
@@ -1897,6 +1948,8 @@ export const SETTINGS_SCHEMA = {
 
 	"compaction.remoteEndpoint": { type: "string", default: undefined },
 
+	"compaction.v2RetainedMessageBudget": { type: "number", default: 64000 },
+
 	// Idle compaction
 	"compaction.idleEnabled": {
 		type: "boolean",
@@ -3796,6 +3849,17 @@ export const SETTINGS_SCHEMA = {
 		},
 	},
 
+	"title.refreshOnReplan": {
+		type: "boolean",
+		default: true,
+		ui: {
+			tab: "tasks",
+			group: "Modes",
+			label: "Refresh Title on Replan",
+			description: "Refresh generated session titles after todo init replans unless the title was set by the user",
+		},
+	},
+
 	// Delegation
 	"task.isolation.mode": {
 		type: "enum",
@@ -4850,6 +4914,8 @@ export interface CompactionSettings {
 	autoContinue: boolean;
 	remoteEnabled: boolean;
 	remoteEndpoint: string | undefined;
+	remoteStreamingV2Enabled: boolean;
+	v2RetainedMessageBudget: number;
 	idleEnabled: boolean;
 	idleThresholdTokens: number;
 	idleTimeoutSeconds: number;
@@ -4857,6 +4923,15 @@ export interface CompactionSettings {
 	dropUseless: boolean;
 }
 
+export interface RecapSettings {
+	enabled: boolean;
+	idleSeconds: number;
+}
+
+export interface TitleSettings {
+	refreshOnReplan: boolean;
+}
+
 export interface ContextPromotionSettings {
 	enabled: boolean;
 }
@@ -5002,6 +5077,8 @@ export interface GcSettings {
 /** Map group prefix -> typed settings interface */
 export interface GroupTypeMap {
 	compaction: CompactionSettings;
+	recap: RecapSettings;
+	title: TitleSettings;
 	contextPromotion: ContextPromotionSettings;
 	retry: RetrySettings;
 	memories: MemoriesSettings;

package/src/debug/index.ts

@@ -10,6 +10,7 @@ import {
 	Container,
 	isNotificationSuppressed,
 	Loader,
+	type OverlayHandle,
 	type SelectItem,
 	SelectList,
 	Spacer,
@@ -327,18 +328,29 @@ export class DebugSelectorComponent extends Container {
 				return;
 			}
 
+			let overlay: OverlayHandle | undefined;
+			const close = (): void => {
+				overlay?.hide();
+				overlay = undefined;
+				void this.ctx.showDebugSelector();
+			};
 			const viewer = new DebugLogViewerComponent({
 				logs,
 				terminalRows: this.ctx.ui.terminal.rows,
-				onExit: () => this.ctx.showDebugSelector(),
+				onExit: close,
 				onStatus: message => this.ctx.showStatus(message, { dim: true }),
 				onError: message => this.ctx.showError(message),
 				onUpdate: () => this.ctx.ui.requestRender(),
 				logSource,
 			});
 
-			this.ctx.editorContainer.clear();
-			this.ctx.editorContainer.addChild(viewer);
+			overlay = this.ctx.ui.showOverlay(viewer, {
+				anchor: "top-left",
+				width: "100%",
+				maxHeight: "100%",
+				margin: 0,
+				fullscreen: true,
+			});
 			this.ctx.ui.setFocus(viewer);
 		} catch (err) {
 			this.ctx.showError(`Failed to read logs: ${err instanceof Error ? err.message : String(err)}`);
@@ -348,16 +360,29 @@ export class DebugSelectorComponent extends Container {
 	}
 
 	async #handleViewRawSse(): Promise<void> {
-		const viewer = new RawSseViewerComponent({
+		let overlay: OverlayHandle | undefined;
+		let viewer: RawSseViewerComponent | undefined;
+		const close = (): void => {
+			viewer?.dispose();
+			overlay?.hide();
+			overlay = undefined;
+			void this.ctx.showDebugSelector();
+		};
+		viewer = new RawSseViewerComponent({
 			buffer: resolveRawSseDebugBuffer(this.ctx.session),
 			terminalRows: this.ctx.ui.terminal.rows,
-			onExit: () => this.ctx.showDebugSelector(),
+			onExit: close,
 			onStatus: message => this.ctx.showStatus(message, { dim: true }),
 			onUpdate: () => this.ctx.ui.requestRender(),
 		});
 
-		this.ctx.editorContainer.clear();
-		this.ctx.editorContainer.addChild(viewer);
+		overlay = this.ctx.ui.showOverlay(viewer, {
+			anchor: "top-left",
+			width: "100%",
+			maxHeight: "100%",
+			margin: 0,
+			fullscreen: true,
+		});
 		this.ctx.ui.setFocus(viewer);
 		this.ctx.ui.requestRender();
 	}