pi-studio 0.9.40 → 0.9.42

package/index.ts

@@ -29,8 +29,15 @@ import {
 } from "./shared/studio-markdown-latex-literals.js";
 import { escapeStudioPdfLatexTextFragment } from "./shared/studio-pdf-escape.js";
 import { resolveStudioPdfResourceFile } from "./shared/studio-pdf-resource.js";
+import { isStudioCmuxSession, openStudioUrlInBrowser } from "./shared/studio-browser-launcher.js";
 import { buildStudioReplTmuxStartArgs } from "./shared/studio-repl-tmux.js";
 import { buildStudioForwardingHint, buildStudioSshTunnelHint, isStudioSshSession as isSshSession } from "./shared/studio-ssh-hint.js";
+import {
+	buildStudioPendingPage,
+	buildStudioPendingSecurityHeaders,
+	isValidStudioLaunchId,
+	normalizeStudioPendingKind,
+} from "./shared/studio-tab-launcher.js";
 import { renderStudioAnnotationInlineHtml } from "./shared/studio-annotation-render.js";
 import {
 	buildStudioMermaidCliIconArgs,
@@ -90,6 +97,7 @@ interface StudioQuartoPreviewState {
 const STUDIO_CSS_URL = new URL("./client/studio.css", import.meta.url);
 const STUDIO_ANNOTATION_HELPERS_URL = new URL("./client/studio-annotation-helpers.js", import.meta.url);
 const STUDIO_MERMAID_HELPERS_URL = new URL("./client/studio-mermaid-helpers.js", import.meta.url);
+const STUDIO_NAVIGATION_HELPERS_URL = new URL("./client/studio-navigation-helpers.js", import.meta.url);
 const STUDIO_CLIENT_URL = new URL("./client/studio-client.js", import.meta.url);
 
 interface StudioServerState {
@@ -7259,6 +7267,17 @@ function respondText(res: ServerResponse, status: number, text: string): void {
 	res.end(text);
 }
 
+function respondStudioPendingError(res: ServerResponse, status: number, text: string, allow?: string): void {
+	const nonce = randomUUID().replace(/-/g, "");
+	const headers = {
+		...buildStudioPendingSecurityHeaders(nonce),
+		"Content-Type": "text/plain; charset=utf-8",
+		...(allow ? { Allow: allow } : {}),
+	};
+	res.writeHead(status, headers);
+	res.end(text);
+}
+
 function respondPdfFile(req: IncomingMessage, res: ServerResponse, filePath: string): void {
 	const method = (req.method ?? "GET").toUpperCase();
 	if (method !== "GET" && method !== "HEAD") {
@@ -7394,12 +7413,9 @@ async function respondLocalPreviewLinkJson(req: IncomingMessage, res: ServerResp
 		}
 		const document = buildStudioLocalResourcePreviewDocument(resource);
 		const docId = storeTransientStudioDocument(document);
-		const url = buildStudioUrl(serverState.port, serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true });
-		const parsedUrl = new URL(url);
 		respondJson(res, 200, {
 			...basePayload,
-			url,
-			relativeUrl: `${parsedUrl.pathname}${parsedUrl.search}`,
+			relativeUrl: buildStudioRelativeUrl(serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true }),
 		});
 		return;
 	}
@@ -7459,13 +7475,10 @@ async function respondLocalPreviewLinkJson(req: IncomingMessage, res: ServerResp
 	}
 
 	const docId = storeTransientStudioDocument(document);
-	const url = buildStudioUrl(serverState.port, serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true });
-	const parsedUrl = new URL(url);
 	respondJson(res, 200, {
 		...basePayload,
 		converted,
-		url,
-		relativeUrl: `${parsedUrl.pathname}${parsedUrl.search}`,
+		relativeUrl: buildStudioRelativeUrl(serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true }),
 	});
 }
 
@@ -7532,27 +7545,6 @@ async function handleRevealLocalPreviewResourceRequest(req: IncomingMessage, res
 	}
 }
 
-function openUrlInDefaultBrowser(url: string): Promise<void> {
-	const openCommand =
-		process.platform === "darwin"
-			? { command: "open", args: [url] }
-			: process.platform === "win32"
-				? { command: "cmd", args: ["/c", "start", "", url] }
-				: { command: "xdg-open", args: [url] };
-
-	return new Promise<void>((resolve, reject) => {
-		const child = spawn(openCommand.command, openCommand.args, {
-			stdio: "ignore",
-			detached: true,
-		});
-		child.once("error", reject);
-		child.once("spawn", () => {
-			child.unref();
-			resolve();
-		});
-	});
-}
-
 function openPathInDefaultViewer(path: string): Promise<void> {
 	const openCommand =
 		process.platform === "darwin"
@@ -10078,8 +10070,7 @@ function readTransientStudioDocument(id: string): InitialStudioDocument | null {
 	return entry ? { ...entry.document } : null;
 }
 
-function buildStudioUrl(
-	port: number,
+function buildStudioRelativeUrl(
 	token: string,
 	mode: StudioUiMode = "full",
 	doc?: InitialStudioDocument | null,
@@ -10095,7 +10086,18 @@ function buildStudioUrl(
 	if (doc?.draftId) params.set("draftId", doc.draftId);
 	if (doc?.resourceDir) params.set("resourceDir", doc.resourceDir);
 	if (options?.skipWorkspaceRestore) params.set("skipWorkspaceRestore", "1");
-	return `http://127.0.0.1:${port}/?${params.toString()}`;
+	return `/?${params.toString()}`;
+}
+
+function buildStudioUrl(
+	port: number,
+	token: string,
+	mode: StudioUiMode = "full",
+	doc?: InitialStudioDocument | null,
+	docId?: string,
+	options?: { skipWorkspaceRestore?: boolean },
+): string {
+	return `http://127.0.0.1:${port}${buildStudioRelativeUrl(token, mode, doc, docId, options)}`;
 }
 
 interface StudioLaunchFlags {
@@ -10509,6 +10511,7 @@ function buildStudioHtml(
 	const stylesheetHref = `/studio.css?token=${encodeURIComponent(studioToken ?? "")}`;
 	const annotationHelpersScriptHref = `/studio-annotation-helpers.js?token=${encodeURIComponent(studioToken ?? "")}`;
 	const mermaidHelpersScriptHref = `/studio-mermaid-helpers.js?token=${encodeURIComponent(studioToken ?? "")}`;
+	const navigationHelpersScriptHref = `/studio-navigation-helpers.js?token=${encodeURIComponent(studioToken ?? "")}`;
 	const clientScriptHref = `/studio-client.js?token=${encodeURIComponent(studioToken ?? "")}`;
 	const faviconHref = buildStudioFaviconDataUri(style);
 	const bootConfigJson = JSON.stringify({ mermaidConfig }).replace(/</g, "\\u003c");
@@ -10927,6 +10930,7 @@ ${cssVarsBlock}
   </script>
   <script src="${annotationHelpersScriptHref}"></script>
   <script src="${mermaidHelpersScriptHref}"></script>
+  <script src="${navigationHelpersScriptHref}"></script>
   <script src="${clientScriptHref}"></script>
 </body>
 </html>`;
@@ -11304,14 +11308,7 @@ export default function (pi: ExtensionAPI) {
 		return null;
 	};
 
-	const isProbablyCmuxSession = (): boolean => {
-		const workspaceId = String(process.env.CMUX_WORKSPACE_ID ?? "").trim();
-		if (workspaceId) return true;
-		const termProgram = String(process.env.TERM_PROGRAM ?? "").trim().toLowerCase();
-		if (termProgram === "cmux") return true;
-		const term = String(process.env.TERM ?? "").trim().toLowerCase();
-		return term.includes("cmux");
-	};
+	const isProbablyCmuxSession = (): boolean => isStudioCmuxSession(process.env);
 
 	const sanitizeTerminalNotificationText = (value: string, maxLength = 240): string => {
 		const sanitized = String(value)
@@ -12852,13 +12849,10 @@ export default function (pi: ExtensionAPI) {
 				resourceDir,
 			};
 			const docId = storeTransientStudioDocument(document);
-			const url = buildStudioUrl(serverState.port, serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true });
-			const parsedUrl = new URL(url);
 			sendToClient(client, {
 				type: "editor_only_ready",
 				requestId: msg.requestId,
-				url,
-				relativeUrl: `${parsedUrl.pathname}${parsedUrl.search}`,
+				relativeUrl: buildStudioRelativeUrl(serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true }),
 				message: hasContent
 					? "Editor tab is ready with a detached copy of the current editor text."
 					: "Blank editor tab is ready.",
@@ -14238,8 +14232,6 @@ export default function (pi: ExtensionAPI) {
 					resourceDir: dirname(exportedPath),
 				};
 				const docId = storeTransientStudioDocument(document);
-				const url = buildStudioUrl(serverState.port, serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true });
-				const parsedUrl = new URL(url);
 				respondJson(res, 200, {
 					ok: true,
 					filename,
@@ -14247,8 +14239,7 @@ export default function (pi: ExtensionAPI) {
 					writeError: writeResult.error,
 					warning: warning ?? null,
 					openedStudio: true,
-					url,
-					relativeUrl: `${parsedUrl.pathname}${parsedUrl.search}`,
+					relativeUrl: buildStudioRelativeUrl(serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true }),
 					downloadUrl: `/export-pdf?token=${encodeURIComponent(token)}&id=${encodeURIComponent(exportId)}`,
 				});
 				return;
@@ -14385,8 +14376,6 @@ export default function (pi: ExtensionAPI) {
 					draftId: exportedPath ? undefined : createStudioDraftId(),
 				};
 				const docId = storeTransientStudioDocument(document);
-				const url = buildStudioUrl(serverState.port, serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true });
-				const parsedUrl = new URL(url);
 				respondJson(res, 200, {
 					ok: true,
 					filename,
@@ -14394,8 +14383,7 @@ export default function (pi: ExtensionAPI) {
 					writeError: writeResult.error,
 					warning: warning ?? null,
 					openedStudio: true,
-					url,
-					relativeUrl: `${parsedUrl.pathname}${parsedUrl.search}`,
+					relativeUrl: buildStudioRelativeUrl(serverState.token, "editor-only", document, docId, { skipWorkspaceRestore: true }),
 					downloadUrl: `/export-html?token=${encodeURIComponent(token)}&id=${encodeURIComponent(exportId)}`,
 				});
 				return;
@@ -14454,6 +14442,39 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
+		if (requestUrl.pathname === "/studio-open-pending") {
+			const tokens = requestUrl.searchParams.getAll("token");
+			if (tokens.length !== 1 || tokens[0] !== serverState.token) {
+				respondStudioPendingError(res, 403, "Invalid or expired studio token. Re-run /studio.");
+				return;
+			}
+
+			const method = (req.method ?? "GET").toUpperCase();
+			if (method !== "GET") {
+				respondStudioPendingError(res, 405, "Method not allowed. Use GET.", "GET");
+				return;
+			}
+
+			const allowedKeys = new Set(["token", "launchId", "kind"]);
+			if (Array.from(requestUrl.searchParams.keys()).some((key) => !allowedKeys.has(key))) {
+				respondStudioPendingError(res, 400, "Unsupported Studio pending-page parameter.");
+				return;
+			}
+			const launchIds = requestUrl.searchParams.getAll("launchId");
+			const kinds = requestUrl.searchParams.getAll("kind");
+			const launchId = launchIds.length === 1 ? launchIds[0] : "";
+			const kind = kinds.length === 1 ? normalizeStudioPendingKind(kinds[0]) : null;
+			if (!isValidStudioLaunchId(launchId) || !kind) {
+				respondStudioPendingError(res, 400, "Invalid Studio pending-page request.");
+				return;
+			}
+
+			const nonce = randomUUID().replace(/-/g, "");
+			res.writeHead(200, buildStudioPendingSecurityHeaders(nonce));
+			res.end(buildStudioPendingPage({ token: serverState.token, launchId, kind, nonce }));
+			return;
+		}
+
 		if (requestUrl.pathname === "/studio.css") {
 			const token = requestUrl.searchParams.get("token") ?? "";
 			if (token !== serverState.token) {
@@ -14483,7 +14504,12 @@ export default function (pi: ExtensionAPI) {
 			return;
 		}
 
-		if (requestUrl.pathname === "/studio-annotation-helpers.js" || requestUrl.pathname === "/studio-mermaid-helpers.js" || requestUrl.pathname === "/studio-client.js") {
+		if (
+			requestUrl.pathname === "/studio-annotation-helpers.js"
+			|| requestUrl.pathname === "/studio-mermaid-helpers.js"
+			|| requestUrl.pathname === "/studio-navigation-helpers.js"
+			|| requestUrl.pathname === "/studio-client.js"
+		) {
 			const token = requestUrl.searchParams.get("token") ?? "";
 			if (token !== serverState.token) {
 				respondText(res, 403, "Invalid or expired studio token. Re-run /studio.");
@@ -14501,12 +14527,16 @@ export default function (pi: ExtensionAPI) {
 				? STUDIO_ANNOTATION_HELPERS_URL
 				: requestUrl.pathname === "/studio-mermaid-helpers.js"
 					? STUDIO_MERMAID_HELPERS_URL
-					: STUDIO_CLIENT_URL;
+					: requestUrl.pathname === "/studio-navigation-helpers.js"
+						? STUDIO_NAVIGATION_HELPERS_URL
+						: STUDIO_CLIENT_URL;
 			const targetLabel = requestUrl.pathname === "/studio-annotation-helpers.js"
 				? "studio annotation helper script"
 				: requestUrl.pathname === "/studio-mermaid-helpers.js"
 					? "studio Mermaid helper script"
-					: "studio client script";
+					: requestUrl.pathname === "/studio-navigation-helpers.js"
+						? "studio navigation helper script"
+						: "studio client script";
 
 			try {
 				const clientScript = readFileSync(targetUrl, "utf-8");
@@ -15779,7 +15809,7 @@ export default function (pi: ExtensionAPI) {
 				const skipReason = launchOpenFlags.noBrowser ? "--no-browser was used" : "SSH was detected";
 				ctx.ui.notify(`${openedLabel} is ready. Browser auto-open was skipped because ${skipReason}.`, "info");
 			} else {
-				await openUrlInDefaultBrowser(url);
+				await openStudioUrlInBrowser(url);
 				if (selected.source === "file") {
 					ctx.ui.notify(`Opened ${openedLabel} with file loaded: ${selected.label}`, "info");
 				} else if (selected.source === "last-response") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.40",
+  "version": "0.9.42",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",
@@ -30,6 +30,7 @@
   ],
   "scripts": {
     "test": "node --test",
+    "test:browser": "node --test test/studio-tab-launcher-browser.test.js",
     "typecheck": "tsc --noEmit"
   },
   "pi": {

package/shared/studio-browser-launcher.js

@@ -0,0 +1,139 @@
+import { spawn } from "node:child_process";
+
+export const STUDIO_CMUX_BROWSER_OPEN_TIMEOUT_MS = 5_000;
+
+/**
+ * Detect whether the current process is running inside cmux.
+ *
+ * @param {NodeJS.ProcessEnv | Record<string, string | undefined>} [env]
+ * @returns {boolean}
+ */
+export function isStudioCmuxSession(env = process.env) {
+	const workspaceId = String(env.CMUX_WORKSPACE_ID ?? "").trim();
+	const termProgram = String(env.TERM_PROGRAM ?? "").trim().toLowerCase();
+	const term = String(env.TERM ?? "").trim().toLowerCase();
+	const bundleId = String(env.CMUX_BUNDLE_ID ?? "").trim().toLowerCase();
+	return Boolean(workspaceId || termProgram === "cmux" || term.includes("cmux") || bundleId.includes("cmux"));
+}
+
+/**
+ * Build the cmux CLI invocation for opening Studio in the caller's workspace.
+ *
+ * @param {string} target
+ * @param {NodeJS.ProcessEnv | Record<string, string | undefined>} [env]
+ * @returns {{ command: string, args: string[] } | undefined}
+ */
+export function getStudioCmuxBrowserOpenCommand(target, env = process.env) {
+	if (!isStudioCmuxSession(env)) return undefined;
+
+	const workspaceId = String(env.CMUX_WORKSPACE_ID ?? "").trim();
+	const command = String(env.CMUX_BUNDLED_CLI_PATH ?? "").trim() || "cmux";
+	const args = ["browser", "open", target];
+	if (workspaceId) args.push("--workspace", workspaceId);
+	args.push("--focus", "true");
+	return { command, args };
+}
+
+/**
+ * Build the platform-native system-browser invocation.
+ *
+ * @param {string} target
+ * @param {NodeJS.Platform} [platform]
+ * @returns {{ command: string, args: string[] }}
+ */
+export function getStudioDefaultBrowserOpenCommand(target, platform = process.platform) {
+	if (platform === "darwin") return { command: "open", args: [target] };
+	if (platform === "win32") return { command: "cmd", args: ["/c", "start", "", target] };
+	return { command: "xdg-open", args: [target] };
+}
+
+/**
+ * @param {{ command: string, args: string[] }} openCommand
+ * @param {typeof spawn} spawnProcess
+ * @returns {Promise<void>}
+ */
+function spawnDetachedBrowser(openCommand, spawnProcess) {
+	return new Promise((resolve, reject) => {
+		let child;
+		try {
+			child = spawnProcess(openCommand.command, openCommand.args, {
+				stdio: "ignore",
+				detached: true,
+			});
+		} catch (error) {
+			reject(error);
+			return;
+		}
+		child.once("error", reject);
+		child.once("spawn", () => {
+			child.unref();
+			resolve();
+		});
+	});
+}
+
+/**
+ * Try to open Studio in a focused cmux browser surface.
+ *
+ * @param {string} target
+ * @param {{
+ *   env?: NodeJS.ProcessEnv | Record<string, string | undefined>,
+ *   spawnProcess?: typeof spawn,
+ *   timeoutMs?: number,
+ * }} [options]
+ * @returns {Promise<boolean>}
+ */
+export async function tryOpenStudioUrlInCmuxBrowser(target, options = {}) {
+	const openCommand = getStudioCmuxBrowserOpenCommand(target, options.env ?? process.env);
+	if (!openCommand) return false;
+
+	const spawnProcess = options.spawnProcess ?? spawn;
+	const timeoutMs = Number.isFinite(options.timeoutMs) && options.timeoutMs >= 0
+		? options.timeoutMs
+		: STUDIO_CMUX_BROWSER_OPEN_TIMEOUT_MS;
+
+	return await new Promise((resolve) => {
+		let settled = false;
+		let child;
+		const finish = (opened) => {
+			if (settled) return;
+			settled = true;
+			clearTimeout(timeout);
+			resolve(opened);
+		};
+		const timeout = setTimeout(() => {
+			child?.kill();
+			finish(false);
+		}, timeoutMs);
+		timeout.unref?.();
+
+		try {
+			child = spawnProcess(openCommand.command, openCommand.args, { stdio: "ignore" });
+		} catch {
+			finish(false);
+			return;
+		}
+		child.once("error", () => finish(false));
+		child.once("close", (code) => finish(code === 0));
+	});
+}
+
+/**
+ * Open Studio in cmux when available, falling back to the system browser.
+ *
+ * @param {string} target
+ * @param {{
+ *   env?: NodeJS.ProcessEnv | Record<string, string | undefined>,
+ *   platform?: NodeJS.Platform,
+ *   spawnProcess?: typeof spawn,
+ *   timeoutMs?: number,
+ * }} [options]
+ * @returns {Promise<"cmux" | "system">}
+ */
+export async function openStudioUrlInBrowser(target, options = {}) {
+	if (await tryOpenStudioUrlInCmuxBrowser(target, options)) return "cmux";
+
+	const openCommand = getStudioDefaultBrowserOpenCommand(target, options.platform ?? process.platform);
+	await spawnDetachedBrowser(openCommand, options.spawnProcess ?? spawn);
+	return "system";
+}

package/shared/studio-tab-launcher.js

@@ -0,0 +1,86 @@
+const STUDIO_PENDING_KINDS = Object.freeze(["document", "preview", "export"]);
+const STUDIO_LAUNCH_ID_PATTERN = /^[a-zA-Z0-9_-]{20,128}$/;
+const STUDIO_CSP_NONCE_PATTERN = /^[a-zA-Z0-9_-]{16,128}$/;
+
+function escapeHtmlAttribute(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&")
+    .replace(/"/g, """)
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+export function normalizeStudioPendingKind(value) {
+  return STUDIO_PENDING_KINDS.includes(value) ? value : null;
+}
+
+export function isValidStudioLaunchId(value) {
+  return typeof value === "string" && STUDIO_LAUNCH_ID_PATTERN.test(value);
+}
+
+export function buildStudioPendingSecurityHeaders(nonce) {
+  if (typeof nonce !== "string" || !STUDIO_CSP_NONCE_PATTERN.test(nonce)) {
+    throw new Error("Invalid Studio pending-page CSP nonce.");
+  }
+  return {
+    "Content-Type": "text/html; charset=utf-8",
+    "Cache-Control": "no-store",
+    "X-Content-Type-Options": "nosniff",
+    "Referrer-Policy": "no-referrer",
+    "Cross-Origin-Opener-Policy": "same-origin",
+    "Cross-Origin-Resource-Policy": "same-origin",
+    "Permissions-Policy": "camera=(), microphone=(), geolocation=(), payment=(), usb=()",
+    "Content-Security-Policy": [
+      "default-src 'none'",
+      `script-src 'nonce-${nonce}'`,
+      `style-src 'nonce-${nonce}'`,
+      "base-uri 'none'",
+      "form-action 'none'",
+      "object-src 'none'",
+      "frame-ancestors 'none'",
+    ].join("; "),
+  };
+}
+
+export function buildStudioPendingPage(options) {
+  const config = options && typeof options === "object" ? options : {};
+  const token = typeof config.token === "string" ? config.token : "";
+  const launchId = typeof config.launchId === "string" ? config.launchId : "";
+  const kind = normalizeStudioPendingKind(config.kind);
+  const nonce = typeof config.nonce === "string" ? config.nonce : "";
+  if (!token) throw new Error("Studio pending page requires a token.");
+  if (!isValidStudioLaunchId(launchId)) throw new Error("Invalid Studio launch ID.");
+  if (!kind) throw new Error("Invalid Studio pending-page kind.");
+  buildStudioPendingSecurityHeaders(nonce);
+
+  const kindLabel = kind === "document" ? "document" : (kind === "export" ? "export" : "preview");
+  const helperQuery = new URLSearchParams({ token }).toString();
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Preparing Studio tab…</title>
+  <style nonce="${escapeHtmlAttribute(nonce)}">
+    :root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: Canvas; color: CanvasText; }
+    main { width: min(34rem, calc(100vw - 3rem)); padding: 2rem; border: 1px solid color-mix(in srgb, CanvasText 18%, transparent); border-radius: 12px; }
+    h1 { margin: 0 0 0.65rem; font-size: 1.15rem; }
+    p { margin: 0; line-height: 1.5; opacity: 0.8; overflow-wrap: anywhere; }
+    button { margin-top: 1.25rem; padding: 0.45rem 0.8rem; font: inherit; }
+    [hidden] { display: none !important; }
+  </style>
+</head>
+<body data-studio-pending-launch="1" data-launch-id="${escapeHtmlAttribute(launchId)}" data-launch-kind="${escapeHtmlAttribute(kind)}" data-studio-token="${escapeHtmlAttribute(token)}">
+  <main aria-live="polite" aria-atomic="true">
+    <h1 id="pendingTitle">Preparing Studio ${kindLabel}…</h1>
+    <p id="pendingDetail">Waiting for the originating Studio page.</p>
+    <button id="pendingCloseBtn" type="button" hidden>Close tab</button>
+  </main>
+  <noscript>This Studio tab requires JavaScript. You can close it and return to the originating Studio page.</noscript>
+  <script nonce="${escapeHtmlAttribute(nonce)}" src="/studio-navigation-helpers.js?${escapeHtmlAttribute(helperQuery)}"></script>
+</body>
+</html>`;
+}
+
+export { STUDIO_PENDING_KINDS };