@writepanda/mcp 1.259.0 → 1.262.0

package/bin/apps/viewKit.mjs

@@ -0,0 +1,506 @@
+// Shared by the MCP Apps views (edit preview, clips): the host bridge, theme
+// handling and base styles.
+//
+// The views are plain HTML with inline script, so they run in a host's
+// sandboxed iframe with the default CSP (no network, data: images). The
+// functions below are real code serialized with Function.prototype.toString
+// into the page; they must not reference anything outside their own body.
+
+/**
+ * The view side of MCP Apps (SEP-1865, protocol 2026-01-26): JSON-RPC 2.0
+ * over postMessage to the host. Installs `window.PandaKit`.
+ *
+ * ChatGPT implements the same protocol; when a host doesn't answer
+ * ui/initialize but exposes the older `window.openai` bridge, that is used.
+ */
+export function installKit(appVersion) {
+	const PROTOCOL = "2026-01-26";
+	const pending = new Map();
+	const listeners = {};
+	let nextId = 1;
+	let legacy = null;
+	const state = {
+		hostContext: {},
+		hostCapabilities: {},
+		toolInput: null,
+		toolResult: null,
+	};
+
+	const post = (msg) => window.parent.postMessage(msg, "*");
+	const emit = (name, value) => {
+		for (const fn of listeners[name] ?? []) {
+			try {
+				fn(value);
+			} catch (err) {
+				console.error(err);
+			}
+		}
+	};
+
+	function request(method, params, timeoutMs = 600_000) {
+		const id = nextId++;
+		post({ jsonrpc: "2.0", id, method, params });
+		return new Promise((resolve, reject) => {
+			const timer = setTimeout(() => {
+				if (pending.delete(id)) reject(new Error(`${method} timed out`));
+			}, timeoutMs);
+			pending.set(id, {
+				resolve: (v) => {
+					clearTimeout(timer);
+					resolve(v);
+				},
+				reject: (e) => {
+					clearTimeout(timer);
+					reject(e);
+				},
+			});
+		});
+	}
+	const notify = (method, params) => post({ jsonrpc: "2.0", method, params });
+
+	function applyContext(ctx) {
+		if (!ctx || typeof ctx !== "object") return;
+		state.hostContext = { ...state.hostContext, ...ctx };
+		const root = document.documentElement;
+		if (ctx.theme === "dark" || ctx.theme === "light") {
+			root.dataset.theme = ctx.theme;
+			root.style.colorScheme = ctx.theme;
+		}
+		const vars = ctx.styles?.variables;
+		if (vars && typeof vars === "object") {
+			for (const [k, v] of Object.entries(vars)) {
+				if (k.startsWith("--") && typeof v === "string" && v) root.style.setProperty(k, v);
+			}
+		}
+		const fonts = ctx.styles?.css?.fonts;
+		if (typeof fonts === "string" && fonts && !document.getElementById("host-fonts")) {
+			const style = document.createElement("style");
+			style.id = "host-fonts";
+			style.textContent = fonts;
+			document.head.appendChild(style);
+		}
+		emit("context", state.hostContext);
+	}
+
+	window.addEventListener("message", (event) => {
+		if (event.source !== window.parent) return;
+		const msg = event.data;
+		if (!msg || msg.jsonrpc !== "2.0") return;
+		if (typeof msg.method === "string") {
+			if (msg.id !== undefined && msg.id !== null) {
+				// A request from the host.
+				if (msg.method === "ui/resource-teardown" || msg.method === "ping") {
+					emit("teardown");
+					post({ jsonrpc: "2.0", id: msg.id, result: {} });
+				} else {
+					post({
+						jsonrpc: "2.0",
+						id: msg.id,
+						error: { code: -32601, message: `Method not found: ${msg.method}` },
+					});
+				}
+				return;
+			}
+			const p = msg.params ?? {};
+			if (msg.method === "ui/notifications/tool-input") {
+				state.toolInput = p.arguments ?? {};
+				emit("input", state.toolInput);
+			} else if (msg.method === "ui/notifications/tool-result") {
+				state.toolResult = p;
+				emit("result", p);
+			} else if (msg.method === "ui/notifications/tool-cancelled") {
+				emit("cancelled", p.reason);
+			} else if (msg.method === "ui/notifications/host-context-changed") {
+				applyContext(p);
+			}
+			return;
+		}
+		const waiter = pending.get(msg.id);
+		if (!waiter) return;
+		pending.delete(msg.id);
+		if (msg.error) waiter.reject(new Error(msg.error.message ?? "Request failed"));
+		else waiter.resolve(msg.result);
+	});
+
+	// Keep the iframe as tall as the content (measured like the reference
+	// App SDK: html at max-content, once per frame), from initialization on.
+	let lastWidth = 0;
+	let lastHeight = 0;
+	let sizeQueued = false;
+	const reportSize = () => {
+		if (sizeQueued || legacy) return;
+		sizeQueued = true;
+		requestAnimationFrame(() => {
+			sizeQueued = false;
+			const root = document.documentElement;
+			const prev = root.style.height;
+			root.style.height = "max-content";
+			const height = Math.ceil(root.getBoundingClientRect().height);
+			root.style.height = prev;
+			const width = Math.ceil(window.innerWidth);
+			if (width === lastWidth && height === lastHeight) return;
+			lastWidth = width;
+			lastHeight = height;
+			notify("ui/notifications/size-changed", { width, height });
+		});
+	};
+	const watchSize = () => {
+		const ro = new ResizeObserver(reportSize);
+		ro.observe(document.documentElement);
+		ro.observe(document.body);
+		reportSize();
+	};
+
+	/** The data of a PandaStudio tool result: structuredContent, else the JSON
+	 *  text block, unwrapped from the automation server's { ok, data }. */
+	function resultData(result) {
+		if (!result) return null;
+		let body = result.structuredContent;
+		if (!body) {
+			const text = (result.content ?? []).find((c) => c?.type === "text")?.text;
+			if (typeof text === "string") {
+				try {
+					body = JSON.parse(text);
+				} catch {
+					body = null;
+				}
+			}
+		}
+		if (body && typeof body === "object" && "ok" in body && "data" in body) return body.data;
+		return body ?? null;
+	}
+	function resultError(result) {
+		if (!result?.isError) return null;
+		const data = resultData(result);
+		if (data && typeof data === "object" && typeof data.error === "string") return data.error;
+		const text = (result.content ?? []).find((c) => c?.type === "text")?.text;
+		if (typeof text === "string") {
+			try {
+				const body = JSON.parse(text);
+				if (typeof body?.error === "string") return body.error;
+			} catch {
+				/* plain text */
+			}
+			return text.replace(/^tool error: /, "");
+		}
+		return "Something went wrong";
+	}
+
+	/** Call one of this server's tools; resolves to its data, throws its error. */
+	async function callTool(name, args = {}) {
+		let result;
+		if (legacy) {
+			const out = await legacy.callTool(name, args);
+			result = out?.content || out?.structuredContent ? out : { structuredContent: out };
+		} else {
+			result = await request("tools/call", { name, arguments: args });
+		}
+		const error = resultError(result);
+		if (error) throw new Error(error);
+		return { data: resultData(result), result };
+	}
+
+	/** Load images the app reported (frames, clip stills) as data: URLs. Paths
+	 *  the server hasn't seen this session come back as null. */
+	async function loadImages(paths) {
+		const wanted = [...new Set(paths.filter((p) => typeof p === "string" && p))];
+		const out = new Map();
+		if (!wanted.length) return out;
+		const { result } = await callTool("ui_read_media", { paths: wanted });
+		const images = (result.content ?? []).filter((c) => c?.type === "image");
+		const items = result.structuredContent?.items ?? [];
+		for (const item of items) {
+			const img = typeof item.image === "number" ? images[item.image] : null;
+			out.set(item.path, img ? `data:${img.mimeType};base64,${img.data}` : null);
+		}
+		return out;
+	}
+
+	const canMessage = () => !legacy && !!state.hostCapabilities.message;
+	async function sendMessage(text) {
+		if (legacy?.sendFollowUpMessage) return legacy.sendFollowUpMessage({ prompt: text });
+		return request("ui/message", { role: "user", content: [{ type: "text", text }] });
+	}
+	async function updateModelContext(text) {
+		if (legacy || !state.hostCapabilities.updateModelContext) return;
+		try {
+			await request("ui/update-model-context", { content: [{ type: "text", text }] }, 10_000);
+		} catch {
+			/* best effort */
+		}
+	}
+	const canFullscreen = () =>
+		!legacy && (state.hostContext.availableDisplayModes ?? []).includes("fullscreen");
+	async function requestDisplayMode(mode) {
+		if (legacy?.requestDisplayMode) return legacy.requestDisplayMode({ mode });
+		return request("ui/request-display-mode", { mode }, 10_000);
+	}
+
+	function adoptLegacyBridge(openai) {
+		legacy = openai;
+		state.hostContext = { theme: openai.theme, displayMode: openai.displayMode };
+		applyContext(state.hostContext);
+		if (openai.toolInput) {
+			state.toolInput = openai.toolInput;
+			emit("input", state.toolInput);
+		}
+		const deliver = () => {
+			if (!openai.toolOutput) return false;
+			state.toolResult = { structuredContent: openai.toolOutput };
+			emit("result", state.toolResult);
+			return true;
+		};
+		if (!deliver()) {
+			window.addEventListener("openai:set_globals", deliver, { once: true });
+		}
+	}
+
+	/** ui/initialize, sent again while unanswered: a host that starts
+	 *  listening after the page loads would otherwise miss it. */
+	function initialize() {
+		const params = {
+			appInfo: { name: "PandaStudio", version: appVersion },
+			appCapabilities: { availableDisplayModes: ["inline", "fullscreen"] },
+			protocolVersion: PROTOCOL,
+		};
+		const deadline = Date.now() + (window.openai ? 1500 : 30_000);
+		return new Promise((resolve, reject) => {
+			let settled = false;
+			let tries = 0;
+			const attempt = () => {
+				if (settled) return;
+				tries += 1;
+				request("ui/initialize", params, Math.max(250, deadline - Date.now())).then(
+					(r) => {
+						if (settled) return;
+						settled = true;
+						resolve(r);
+					},
+					(err) => {
+						if (settled || Date.now() < deadline) return;
+						settled = true;
+						reject(err);
+					},
+				);
+				if (Date.now() + 500 * tries < deadline) setTimeout(attempt, 500 * tries);
+			};
+			attempt();
+		});
+	}
+
+	async function connect() {
+		try {
+			const init = await initialize();
+			state.hostCapabilities = init?.hostCapabilities ?? {};
+			applyContext(init?.hostContext ?? {});
+			notify("ui/notifications/initialized", {});
+			watchSize();
+		} catch (err) {
+			if (window.openai) adoptLegacyBridge(window.openai);
+			else throw err;
+		}
+	}
+
+	window.PandaKit = {
+		state,
+		on: (name, fn) => {
+			if (!listeners[name]) listeners[name] = [];
+			listeners[name].push(fn);
+		},
+		connect,
+		callTool,
+		loadImages,
+		resultData,
+		resultError,
+		canMessage,
+		sendMessage,
+		updateModelContext,
+		canFullscreen,
+		requestDisplayMode,
+		toolName: () => state.hostContext.toolInfo?.tool?.name ?? null,
+	};
+}
+
+/** Small DOM + formatting helpers every view uses (window.PandaUI). */
+export function installUi() {
+	const h = (tag, attrs, ...children) => {
+		const el = document.createElement(tag);
+		for (const [k, v] of Object.entries(attrs ?? {})) {
+			if (v === undefined || v === null || v === false) continue;
+			if (k === "class") el.className = v;
+			else if (k.startsWith("on") && typeof v === "function") el.addEventListener(k.slice(2), v);
+			else if (k === "style" && typeof v === "object") {
+				for (const [prop, val] of Object.entries(v)) {
+					if (prop.startsWith("--")) el.style.setProperty(prop, val);
+					else el.style[prop] = val;
+				}
+			} else el.setAttribute(k, v === true ? "" : String(v));
+		}
+		for (const c of children.flat()) {
+			if (c === null || c === undefined || c === false) continue;
+			el.append(c instanceof Node ? c : document.createTextNode(String(c)));
+		}
+		return el;
+	};
+	const duration = (ms) => {
+		const total = Math.max(0, Math.round((ms ?? 0) / 1000));
+		const hr = Math.floor(total / 3600);
+		const m = Math.floor((total % 3600) / 60);
+		const s = String(total % 60).padStart(2, "0");
+		return hr > 0 ? `${hr}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
+	};
+	/** A button that disables itself and shows a busy label while `run` works. */
+	const actionButton = (label, run, opts = {}) => {
+		const btn = h("button", {
+			class: opts.primary ? "btn primary" : "btn",
+			type: "button",
+			title: opts.title,
+		});
+		btn.textContent = label;
+		btn.addEventListener("click", async (e) => {
+			e.stopPropagation();
+			if (btn.disabled) return;
+			btn.disabled = true;
+			const prev = btn.textContent;
+			if (opts.busy) btn.textContent = opts.busy;
+			try {
+				await run(btn);
+			} catch (err) {
+				window.PandaUI.toast(err?.message ?? String(err), true);
+			} finally {
+				if (btn.isConnected) {
+					btn.disabled = false;
+					if (btn.textContent === opts.busy) btn.textContent = prev;
+				}
+			}
+		});
+		return btn;
+	};
+	let toastTimer = 0;
+	const toast = (text, isError = false) => {
+		let el = document.getElementById("toast");
+		if (!el) {
+			el = h("div", { id: "toast", role: "status" });
+			document.body.append(el);
+		}
+		el.textContent = text;
+		el.className = isError ? "show error" : "show";
+		clearTimeout(toastTimer);
+		toastTimer = setTimeout(() => {
+			el.className = "";
+		}, 4000);
+	};
+	window.PandaUI = { h, duration, actionButton, toast };
+}
+
+export const BASE_CSS = `
+:root {
+	color-scheme: light dark;
+	--bg: var(--color-background-primary, #ffffff);
+	--bg2: var(--color-background-secondary, #f4f4f5);
+	--bg3: var(--color-background-tertiary, #e9e9ec);
+	--fg: var(--color-text-primary, #18181b);
+	--fg2: var(--color-text-secondary, #52525b);
+	--fg3: var(--color-text-tertiary, #8a8a93);
+	--line: var(--color-border-primary, rgba(0, 0, 0, 0.12));
+	--line2: var(--color-border-secondary, rgba(0, 0, 0, 0.07));
+	--danger: var(--color-text-danger, #c2410c);
+	--success: var(--color-text-success, #15803d);
+	--accent: #ff5a1f;
+	--radius: var(--border-radius-md, 8px);
+	--radius-lg: var(--border-radius-lg, 12px);
+	--font: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
+}
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme="light"]) {
+		--bg: var(--color-background-primary, #1c1c1f);
+		--bg2: var(--color-background-secondary, #26262a);
+		--bg3: var(--color-background-tertiary, #303035);
+		--fg: var(--color-text-primary, #f4f4f5);
+		--fg2: var(--color-text-secondary, #b4b4bb);
+		--fg3: var(--color-text-tertiary, #85858d);
+		--line: var(--color-border-primary, rgba(255, 255, 255, 0.14));
+		--line2: var(--color-border-secondary, rgba(255, 255, 255, 0.08));
+		--danger: var(--color-text-danger, #fb923c);
+		--success: var(--color-text-success, #4ade80);
+	}
+}
+:root[data-theme="dark"] {
+	--bg: var(--color-background-primary, #1c1c1f);
+	--bg2: var(--color-background-secondary, #26262a);
+	--bg3: var(--color-background-tertiary, #303035);
+	--fg: var(--color-text-primary, #f4f4f5);
+	--fg2: var(--color-text-secondary, #b4b4bb);
+	--fg3: var(--color-text-tertiary, #85858d);
+	--line: var(--color-border-primary, rgba(255, 255, 255, 0.14));
+	--line2: var(--color-border-secondary, rgba(255, 255, 255, 0.08));
+	--danger: var(--color-text-danger, #fb923c);
+	--success: var(--color-text-success, #4ade80);
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+	background: var(--bg);
+	color: var(--fg);
+	font: 14px/1.45 var(--font);
+	-webkit-font-smoothing: antialiased;
+}
+#app { padding: 14px; }
+.row { display: flex; align-items: center; gap: 8px; }
+.spread { justify-content: space-between; }
+.wrap { flex-wrap: wrap; }
+.muted { color: var(--fg2); }
+.faint { color: var(--fg3); }
+.small { font-size: 12px; }
+h1 { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.3; }
+.brand { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
+	letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg3); }
+.brand i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); display: inline-block; }
+.btn {
+	font: inherit; font-size: 13px; font-weight: 500; color: var(--fg); background: var(--bg2);
+	border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 11px; cursor: pointer;
+	white-space: nowrap;
+}
+.btn:hover:not(:disabled) { background: var(--bg3); }
+.btn:disabled { opacity: 0.55; cursor: default; }
+.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+.btn.primary:hover:not(:disabled) { opacity: 0.88; background: var(--fg); }
+.btn.danger { color: var(--danger); }
+.btn.ghost { background: transparent; border-color: transparent; padding: 4px 6px; }
+.btn.ghost:hover:not(:disabled) { background: var(--bg2); }
+.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px;
+	border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); color: var(--fg2); }
+.chip.strong { color: var(--fg); font-weight: 500; }
+.skeleton { background: linear-gradient(90deg, var(--bg2), var(--bg3), var(--bg2)); background-size: 200% 100%;
+	animation: shimmer 1.4s infinite linear; }
+@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+.bar { height: 4px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
+.bar > div { height: 100%; background: var(--accent); transition: width 0.4s ease; }
+.error { color: var(--danger); }
+#toast { position: fixed; left: 50%; bottom: 12px; transform: translate(-50%, 20px); opacity: 0;
+	background: var(--fg); color: var(--bg); padding: 7px 12px; border-radius: var(--radius); font-size: 13px;
+	transition: all 0.2s ease; pointer-events: none; max-width: calc(100% - 24px); }
+#toast.show { opacity: 1; transform: translate(-50%, 0); }
+#toast.error { background: var(--danger); color: #fff; }
+`;
+
+/** One self-contained view page. `main` runs once the kit is connected. */
+export function viewPage({ title, version, css, main }) {
+	return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+<style>${BASE_CSS}${css}</style>
+</head>
+<body>
+<div id="app"></div>
+<script>
+(${installKit.toString()})(${JSON.stringify(version)});
+(${installUi.toString()})();
+(${main.toString()})(window.PandaKit, window.PandaUI);
+</script>
+</body>
+</html>`;
+}