pi-tldraw 0.1.0

package/static/app-bridge-bundle.meta.json

@@ -0,0 +1,164 @@
+{
+  "artifact": "static/app-bridge-bundle.js",
+  "builder": "scripts/build-bridge.mjs",
+  "entry": "bridge/app-bridge-entry.js",
+  "format": "iife",
+  "platform": "browser",
+  "target": "es2020",
+  "dependencies": {
+    "@modelcontextprotocol/ext-apps": "1.7.4",
+    "@modelcontextprotocol/sdk": "1.29.0",
+    "zod": "4.4.3",
+    "esbuild": "0.28.1"
+  },
+  "hashes": {
+    "entrySha256": "e79b24d4a80e5d807224d4d424952945569b61b0038fc54eb7d05c7b8342c185",
+    "packageLockSha256": "3b9fbb2b2ffcf8e2bdda32c7eb408d13e5dab795d38a842cec9abb7f1c6829bc",
+    "bundleSha256": "275806b6c861f62a3d9fb9301aa6dad93457315c86ddb937d3a1e4a3352785bd"
+  },
+  "inputs": [
+    "bridge/app-bridge-entry.js",
+    "node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js",
+    "node_modules/@modelcontextprotocol/sdk/dist/esm/experimental/tasks/interfaces.js",
+    "node_modules/@modelcontextprotocol/sdk/dist/esm/server/zod-compat.js",
+    "node_modules/@modelcontextprotocol/sdk/dist/esm/server/zod-json-schema-compat.js",
+    "node_modules/@modelcontextprotocol/sdk/dist/esm/shared/protocol.js",
+    "node_modules/@modelcontextprotocol/sdk/dist/esm/types.js",
+    "node_modules/zod-to-json-schema/dist/esm/Options.js",
+    "node_modules/zod-to-json-schema/dist/esm/Refs.js",
+    "node_modules/zod-to-json-schema/dist/esm/errorMessages.js",
+    "node_modules/zod-to-json-schema/dist/esm/getRelativePath.js",
+    "node_modules/zod-to-json-schema/dist/esm/index.js",
+    "node_modules/zod-to-json-schema/dist/esm/parseDef.js",
+    "node_modules/zod-to-json-schema/dist/esm/parseTypes.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/any.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/array.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/bigint.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/boolean.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/branded.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/catch.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/date.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/default.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/effects.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/enum.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/intersection.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/literal.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/map.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/nativeEnum.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/never.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/null.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/nullable.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/number.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/object.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/optional.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/pipeline.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/promise.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/readonly.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/record.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/set.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/string.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/tuple.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/undefined.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/union.js",
+    "node_modules/zod-to-json-schema/dist/esm/parsers/unknown.js",
+    "node_modules/zod-to-json-schema/dist/esm/selectParser.js",
+    "node_modules/zod-to-json-schema/dist/esm/zodToJsonSchema.js",
+    "node_modules/zod/v3/ZodError.js",
+    "node_modules/zod/v3/errors.js",
+    "node_modules/zod/v3/external.js",
+    "node_modules/zod/v3/helpers/errorUtil.js",
+    "node_modules/zod/v3/helpers/parseUtil.js",
+    "node_modules/zod/v3/helpers/typeAliases.js",
+    "node_modules/zod/v3/helpers/util.js",
+    "node_modules/zod/v3/index.js",
+    "node_modules/zod/v3/locales/en.js",
+    "node_modules/zod/v3/types.js",
+    "node_modules/zod/v4-mini/index.js",
+    "node_modules/zod/v4/classic/checks.js",
+    "node_modules/zod/v4/classic/coerce.js",
+    "node_modules/zod/v4/classic/compat.js",
+    "node_modules/zod/v4/classic/errors.js",
+    "node_modules/zod/v4/classic/external.js",
+    "node_modules/zod/v4/classic/from-json-schema.js",
+    "node_modules/zod/v4/classic/index.js",
+    "node_modules/zod/v4/classic/iso.js",
+    "node_modules/zod/v4/classic/parse.js",
+    "node_modules/zod/v4/classic/schemas.js",
+    "node_modules/zod/v4/core/api.js",
+    "node_modules/zod/v4/core/checks.js",
+    "node_modules/zod/v4/core/core.js",
+    "node_modules/zod/v4/core/doc.js",
+    "node_modules/zod/v4/core/errors.js",
+    "node_modules/zod/v4/core/index.js",
+    "node_modules/zod/v4/core/json-schema-generator.js",
+    "node_modules/zod/v4/core/json-schema-processors.js",
+    "node_modules/zod/v4/core/json-schema.js",
+    "node_modules/zod/v4/core/parse.js",
+    "node_modules/zod/v4/core/regexes.js",
+    "node_modules/zod/v4/core/registries.js",
+    "node_modules/zod/v4/core/schemas.js",
+    "node_modules/zod/v4/core/to-json-schema.js",
+    "node_modules/zod/v4/core/util.js",
+    "node_modules/zod/v4/core/versions.js",
+    "node_modules/zod/v4/index.js",
+    "node_modules/zod/v4/locales/ar.js",
+    "node_modules/zod/v4/locales/az.js",
+    "node_modules/zod/v4/locales/be.js",
+    "node_modules/zod/v4/locales/bg.js",
+    "node_modules/zod/v4/locales/ca.js",
+    "node_modules/zod/v4/locales/cs.js",
+    "node_modules/zod/v4/locales/da.js",
+    "node_modules/zod/v4/locales/de.js",
+    "node_modules/zod/v4/locales/el.js",
+    "node_modules/zod/v4/locales/en.js",
+    "node_modules/zod/v4/locales/eo.js",
+    "node_modules/zod/v4/locales/es.js",
+    "node_modules/zod/v4/locales/fa.js",
+    "node_modules/zod/v4/locales/fi.js",
+    "node_modules/zod/v4/locales/fr-CA.js",
+    "node_modules/zod/v4/locales/fr.js",
+    "node_modules/zod/v4/locales/he.js",
+    "node_modules/zod/v4/locales/hr.js",
+    "node_modules/zod/v4/locales/hu.js",
+    "node_modules/zod/v4/locales/hy.js",
+    "node_modules/zod/v4/locales/id.js",
+    "node_modules/zod/v4/locales/index.js",
+    "node_modules/zod/v4/locales/is.js",
+    "node_modules/zod/v4/locales/it.js",
+    "node_modules/zod/v4/locales/ja.js",
+    "node_modules/zod/v4/locales/ka.js",
+    "node_modules/zod/v4/locales/kh.js",
+    "node_modules/zod/v4/locales/km.js",
+    "node_modules/zod/v4/locales/ko.js",
+    "node_modules/zod/v4/locales/lt.js",
+    "node_modules/zod/v4/locales/mk.js",
+    "node_modules/zod/v4/locales/ms.js",
+    "node_modules/zod/v4/locales/nl.js",
+    "node_modules/zod/v4/locales/no.js",
+    "node_modules/zod/v4/locales/ota.js",
+    "node_modules/zod/v4/locales/pl.js",
+    "node_modules/zod/v4/locales/ps.js",
+    "node_modules/zod/v4/locales/pt.js",
+    "node_modules/zod/v4/locales/ro.js",
+    "node_modules/zod/v4/locales/ru.js",
+    "node_modules/zod/v4/locales/sl.js",
+    "node_modules/zod/v4/locales/sv.js",
+    "node_modules/zod/v4/locales/ta.js",
+    "node_modules/zod/v4/locales/th.js",
+    "node_modules/zod/v4/locales/tr.js",
+    "node_modules/zod/v4/locales/ua.js",
+    "node_modules/zod/v4/locales/uk.js",
+    "node_modules/zod/v4/locales/ur.js",
+    "node_modules/zod/v4/locales/uz.js",
+    "node_modules/zod/v4/locales/vi.js",
+    "node_modules/zod/v4/locales/yo.js",
+    "node_modules/zod/v4/locales/zh-CN.js",
+    "node_modules/zod/v4/locales/zh-TW.js",
+    "node_modules/zod/v4/mini/checks.js",
+    "node_modules/zod/v4/mini/coerce.js",
+    "node_modules/zod/v4/mini/external.js",
+    "node_modules/zod/v4/mini/iso.js",
+    "node_modules/zod/v4/mini/parse.js",
+    "node_modules/zod/v4/mini/schemas.js"
+  ]
+}

package/static/host.html

@@ -0,0 +1,390 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Pi tldraw MCP host</title>
+	<style>
+		html, body { margin: 0; height: 100%; font-family: Inter, system-ui, sans-serif; }
+		#bar { height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid #ddd; background: #fafafa; font-size: 13px; }
+		#status { color: #555; }
+		#folder { color: #888; font-variant-numeric: tabular-nums; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+		#canvas { width: 100%; height: calc(100vh - 36px); border: 0; display: block; }
+		button { font: inherit; }
+	</style>
+</head>
+<body>
+	<div id="bar">
+		<strong>Pi tldraw MCP host</strong>
+		<span id="status">Starting…</span>
+		<span id="folder" title=""></span>
+	</div>
+	<iframe id="canvas" allow="clipboard-write; fullscreen"></iframe>
+	<script src="/static/app-bridge-bundle.js"></script>
+	<script>
+		const { AppBridge, PostMessageTransport } = window.McpAppsBridge
+
+		const statusEl = document.getElementById('status')
+		const folderEl = document.getElementById('folder')
+		const iframe = document.getElementById('canvas')
+		let bridge = null
+		let ready = false
+		let lastCanvasId = null
+		// Persist canvasId across reloads so we can restore after error recovery.
+		try { lastCanvasId = sessionStorage.getItem('pi-tldraw-canvasId') } catch {}
+		let needsRestore = lastCanvasId !== null
+		// Start inline so the later fullscreen update is a real context change.
+		// The tldraw MCP app initializes its React state to inline and only switches
+		// when it receives an onhostcontextchanged notification.
+		let displayMode = 'inline'
+		// Theme is owned by the host and persisted in localStorage so the user's
+		// choice (made via the tldraw settings menu) survives reloads. The tldraw
+		// app's onhostcontextchanged handler overrides its own color preference with
+		// hostContext.theme, so we send the persisted value ONCE at init and then stay
+		// hands-off — we never push a theme change mid-session, which would clobber
+		// the user's live settings-menu toggle. We only WATCH the iframe so we can
+		// remember the choice for next time.
+		let theme = (() => { try { return localStorage.getItem('pi-tldraw-theme-v2') === 'dark' ? 'dark' : 'light' } catch { return 'light' } })()
+
+		function persistTheme(next) {
+			if (next !== 'dark' && next !== 'light' || next === theme) return
+			theme = next
+			try { localStorage.setItem('pi-tldraw-theme-v2', theme) } catch {}
+		}
+
+		function getHostContext() {
+			return {
+				theme,
+				displayMode,
+				availableDisplayModes: ['inline', 'fullscreen'],
+				platform: 'desktop',
+				containerDimensions: { width: window.innerWidth, height: Math.max(400, window.innerHeight - 36) },
+			}
+		}
+
+		function setStatus(text) { statusEl.textContent = text; log('status', text) }
+		function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) }
+		function log(level, message) {
+			console[level === 'error' ? 'error' : 'log']('[pi-tldraw-host]', message)
+			fetch('/api/log', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ level, message: String(message) }) }).catch(() => {})
+		}
+		window.addEventListener('error', (event) => log('error', event.message + (event.filename ? ' @ ' + event.filename + ':' + event.lineno : '')))
+		window.addEventListener('unhandledrejection', (event) => log('error', event.reason?.stack || event.reason?.message || event.reason))
+
+		class McpHttpClient {
+			constructor(endpoint) { this.endpoint = endpoint; this.sessionId = null; this.nextId = 1 }
+			async initialize() {
+				if (this.sessionId) return
+				const { response, payload } = await this.post({
+					jsonrpc: '2.0', id: this.nextId++, method: 'initialize',
+					params: { protocolVersion: '2025-06-18', capabilities: {}, clientInfo: { name: 'pi-tldraw-browser-host', version: '0.0.1' } }
+				})
+				this.sessionId = response.headers.get('mcp-session-id')
+				if (!this.sessionId) throw new Error('Missing mcp-session-id')
+				if (payload.error) throw new Error(payload.error.message)
+				await this.post({ jsonrpc: '2.0', method: 'notifications/initialized' })
+			}
+			async request(method, params) {
+				await this.initialize()
+				const { payload } = await this.post({ jsonrpc: '2.0', id: this.nextId++, method, params })
+				if (payload.error) throw new Error(payload.error.message)
+				return payload.result
+			}
+			async post(body) {
+				const headers = { 'content-type': 'application/json', accept: 'application/json, text/event-stream' }
+				if (this.sessionId) headers['mcp-session-id'] = this.sessionId
+				const response = await fetch(this.endpoint, { method: 'POST', headers, body: JSON.stringify(body) })
+				const text = await response.text()
+				if (!response.ok) throw new Error('MCP HTTP ' + response.status + ': ' + text)
+				return { response, payload: parseMcpResponse(text) }
+			}
+		}
+
+		function parseMcpResponse(text) {
+			const trimmed = text.trim()
+			if (!trimmed) return undefined
+			if (trimmed.startsWith('{') || trimmed.startsWith('[')) return JSON.parse(trimmed)
+			for (const line of trimmed.split(/\r?\n/)) {
+				if (line.startsWith('data:')) return JSON.parse(line.slice(5).trim())
+			}
+			throw new Error('Could not parse MCP response: ' + trimmed.slice(0, 200))
+		}
+
+		const fullscreenFixCss = [
+			'html, body, #root { width: 100%; height: 100%; margin: 0; }',
+			'.mcp-app__canvas-layout, .mcp-app__canvas-layout--fullscreen { height: 100vh !important; min-height: 100vh !important; max-height: none !important; }',
+			'.mcp-app__canvas-layout--fullscreen { position: fixed !important; inset: 0 !important; width: 100vw !important; }',
+			'.mcp-app__canvas-surface, .mcp-app__canvas-surface--fullscreen { height: auto !important; min-height: 0 !important; flex: 1 1 auto !important; }',
+		].join('\n')
+
+		function patchCanvasHtml(html) {
+			const style = '<style id="pi-tldraw-host-fullscreen-fix">' + fullscreenFixCss + '</style>'
+			return html.includes('</head>') ? html.replace('</head>', style + '</head>') : style + html
+		}
+
+		function installIframeFullscreenFix() {
+			const inject = () => {
+				const doc = iframe.contentDocument
+				if (!doc?.head) return false
+				let style = doc.getElementById('pi-tldraw-host-fullscreen-fix-live')
+				if (!style) {
+					style = doc.createElement('style')
+					style.id = 'pi-tldraw-host-fullscreen-fix-live'
+					doc.head.appendChild(style)
+				}
+				style.textContent = fullscreenFixCss
+				return true
+			}
+			let attempts = 0
+			const timer = setInterval(() => {
+				attempts++
+				inject()
+				if (attempts > 80) clearInterval(timer)
+			}, 100)
+			iframe.addEventListener('load', inject)
+			inject()
+		}
+
+		async function waitReady() {
+			for (let i = 0; i < 200; i++) {
+				if (ready) return
+				await delay(100)
+			}
+			throw new Error('Timed out waiting for tldraw iframe to initialize')
+		}
+
+		// Detect theme changes made inside the tldraw app (its own dark-mode menu)
+		// and persist them so they survive reloads. The app doesn't call back to the
+		// host on theme change, so we infer it from the iframe's effective background.
+		function detectIframeTheme() {
+			try {
+				const doc = iframe.contentDocument
+				if (!doc) return null
+				const el = doc.documentElement
+				const bg = getComputedStyle(el).backgroundColor || getComputedStyle(doc.body).backgroundColor
+				const m = bg.match(/\d+(?:\.\d+)?/g)
+				if (!m) return null
+				const [r, g, b] = m.map(Number)
+				const luminance = (0.299 * r + 0.587 * g + 0.114 * b)
+				return luminance < 128 ? 'dark' : 'light'
+			} catch { return null }
+		}
+
+		function startThemeSync() {
+			// Watch only: remember the user's settings-menu choice for the next open.
+			// Never push a hostContext change here — that would override the user's
+			// live toggle (the app's onhostcontextchanged forces colorScheme = our theme).
+			setInterval(() => {
+				if (!ready) return
+				const detected = detectIframeTheme()
+				if (detected) persistTheme(detected)
+			}, 1500)
+		}
+
+		async function init() {
+			const config = await (await fetch('/api/config')).json()
+			if (config.canvasDir) {
+				folderEl.textContent = '📁 ' + config.canvasDir
+				folderEl.title = config.canvasDir + (config.cwd ? '\ncwd: ' + config.cwd : '')
+			}
+			setStatus('Connecting to MCP…')
+			const client = new McpHttpClient(config.endpoint)
+			await client.initialize()
+
+			setStatus('Fetching canvas resource…')
+			const resource = await client.request('resources/read', { uri: config.resourceUri })
+			let html = resource?.contents?.[0]?.text
+			if (!html) throw new Error('Canvas resource did not contain HTML')
+			html = patchCanvasHtml(html)
+
+			bridge = new AppBridge(
+				null,
+				{ name: 'Pi tldraw host', version: '0.0.1' },
+				{
+					openLinks: {}, downloadFile: {}, logging: {},
+					serverTools: { listChanged: true },
+					serverResources: { listChanged: true },
+					updateModelContext: { text: {}, structuredContent: {} },
+					message: { text: {}, structuredContent: {} },
+				},
+				{ hostContext: getHostContext() }
+			)
+			bridge.oninitialized = () => {
+				ready = true
+				// The tldraw MCP app currently starts in inline mode even when the initial
+				// host context says fullscreen. Flip to fullscreen after init and send the
+				// notification a few times because the React handler may attach just after
+				// the protocol initialization completes.
+				displayMode = 'fullscreen'
+				const sendFullscreenContext = () => {
+					bridge.sendHostContextChange(getHostContext()).catch((err) => log('error', err?.message ?? err))
+				}
+				sendFullscreenContext()
+				setTimeout(sendFullscreenContext, 100)
+				setTimeout(sendFullscreenContext, 500)
+				setTimeout(sendFullscreenContext, 1000)
+				setStatus('Canvas ready')
+				startThemeSync()
+			}
+			bridge.onsizechange = () => {}
+			bridge.oncalltool = (params) => client.request('tools/call', params)
+			bridge.onlistresources = (params) => client.request('resources/list', params ?? {})
+			bridge.onreadresource = (params) => client.request('resources/read', params)
+			bridge.onlistresourcetemplates = async () => ({ resourceTemplates: [] })
+			bridge.onmessage = async ({ content }) => { console.log('ui/message', content); return {} }
+			bridge.onupdatemodelcontext = async (params) => { scheduleProjectAutoSave(params); return {} }
+			bridge.onopenlink = async ({ url }) => { window.open(url, '_blank', 'noopener,noreferrer'); return {} }
+			bridge.ondownloadfile = async () => ({})
+			bridge.onrequestdisplaymode = async ({ mode }) => {
+				displayMode = mode === 'fullscreen' ? 'fullscreen' : 'inline'
+				bridge.setHostContext(getHostContext())
+				return { mode: displayMode }
+			}
+			bridge.onloggingmessage = ({ level, data }) => console.log('[iframe]', level, data)
+
+			const transport = new PostMessageTransport(iframe.contentWindow, iframe.contentWindow)
+			await bridge.connect(transport)
+
+			// Keep the iframe's WindowProxy object for PostMessageTransport source validation, but
+			// use srcdoc instead of document.write so module scripts run consistently.
+			iframe.srcdoc = html
+			installIframeFullscreenFix()
+
+			window.addEventListener('resize', () => {
+				bridge.setHostContext(getHostContext())
+			})
+
+			pollLoop(client)
+		}
+
+		let autoSaveTimer = null
+		let pendingAutoSave = null
+
+		function scheduleProjectAutoSave(params) {
+			const state = params?.structuredContent
+			if (!lastCanvasId || !state || !Array.isArray(state.shapes)) return
+			pendingAutoSave = {
+				canvasId: lastCanvasId,
+				state: {
+					shapes: state.shapes,
+					assets: Array.isArray(state.assets) ? state.assets : [],
+					bindings: Array.isArray(state.bindings) ? state.bindings : [],
+				},
+				source: 'ui/update-model-context',
+			}
+			if (autoSaveTimer) clearTimeout(autoSaveTimer)
+			autoSaveTimer = setTimeout(flushProjectAutoSave, 750)
+		}
+
+		async function flushProjectAutoSave() {
+			const payload = pendingAutoSave
+			pendingAutoSave = null
+			autoSaveTimer = null
+			if (!payload) return
+			try {
+				const response = await fetch('/api/autosave', {
+					method: 'POST',
+					headers: { 'content-type': 'application/json' },
+					body: JSON.stringify(payload),
+				})
+				const result = await response.json().catch(() => ({}))
+				if (!response.ok || result.ok === false) throw new Error(result.error || 'autosave failed')
+				log('status', 'Autosaved ' + payload.canvasId + ' · ' + payload.state.shapes.length + ' shape(s)')
+			} catch (error) {
+				log('error', 'Autosave failed: ' + String(error?.message ?? error))
+			}
+		}
+
+		async function runExec(client, task) {
+			await waitReady()
+			const args = { code: task.code }
+			if (task.canvasId || lastCanvasId) args.canvasId = task.canvasId || lastCanvasId
+
+			setStatus('Running exec ' + task.id.slice(0, 8) + '…')
+			const toolPromise = client.request('tools/call', { name: 'exec', arguments: args })
+			// Give the server a moment to create its pending callback before the iframe calls _exec_callback.
+			await delay(200)
+			await bridge.sendToolInput({ arguments: args })
+			const result = await toolPromise
+			await bridge.sendToolResult(result).catch(() => {})
+
+			const text = result?.content?.find?.((c) => c.type === 'text')?.text
+			const match = typeof text === 'string' ? text.match(/Canvas ID: ([^\s]+)/) : null
+			if (match) {
+				lastCanvasId = match[1]
+				try { sessionStorage.setItem('pi-tldraw-canvasId', lastCanvasId) } catch {}
+			}
+			setStatus('Canvas ready' + (lastCanvasId ? ' · ' + lastCanvasId : ''))
+			return result
+		}
+
+		async function pollLoop(client) {
+			while (true) {
+				// After a reload (error recovery), restore the saved canvas before
+				// processing any exec tasks. The iframe is fresh and empty; the
+				// server state was cleared by the error. We pull the saved snapshot
+				// from the extension's project store and push it into the iframe.
+				if (needsRestore && lastCanvasId) {
+					needsRestore = false
+					try {
+						await waitReady()
+						const resp = await fetch('/api/restore?canvasId=' + encodeURIComponent(lastCanvasId))
+						const data = await resp.json()
+						if (data.ok && data.snapshot?.shapes?.length > 0) {
+							const restoreCode = 'const snapshotShapes = ' + JSON.stringify(data.snapshot.shapes) + '\n' +
+								'const currentIds = editor.getCurrentPageShapes().map(s => s.shapeId ?? s.id).filter(Boolean)\n' +
+								'if (currentIds.length) editor.deleteShapes(currentIds)\n' +
+								'const nonArrows = snapshotShapes.filter(s => (s._type ?? s.type) !== \'arrow\')\n' +
+								'const arrows = snapshotShapes.filter(s => (s._type ?? s.type) === \'arrow\')\n' +
+								'for (const s of nonArrows) editor.createShape(s)\n' +
+								'for (const s of arrows) editor.createShape(s)\n' +
+								'return { restored: snapshotShapes.length }'
+							const restoreArgs = { code: restoreCode, canvasId: lastCanvasId }
+							const restorePromise = client.request('tools/call', { name: 'exec', arguments: restoreArgs })
+							await delay(200)
+							await bridge.sendToolInput({ arguments: restoreArgs })
+							await restorePromise
+							log('status', 'Restored ' + data.snapshot.shapes.length + ' shape(s) after reload')
+							setStatus('Canvas restored · ' + lastCanvasId)
+						} else {
+							log('status', 'No saved snapshot to restore after reload')
+						}
+					} catch (err) {
+						log('error', 'Restore after reload failed: ' + String(err?.message ?? err))
+					}
+				}
+				try {
+					const task = await (await fetch('/api/next')).json()
+					if (!task) { await delay(500); continue }
+					try {
+						const result = await runExec(client, task)
+						await fetch('/api/result', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: task.id, ok: true, result }) })
+						// If the exec returned an error, the iframe's editor is now in a
+						// broken state (error banner, editor disposed, never remounts).
+						// Reload the host page to get a fresh iframe. The canvas state is
+						// preserved — the next exec passes canvasId and the mcp-app
+						// restores shapes from the server via _get_canvas_state.
+						// This keeps the extension self-contained: no upstream patch needed.
+						if (result?.isError) {
+							log('status', 'Exec error, reloading host to recover...')
+							setStatus('Recovering from error...')
+							await delay(300)
+							window.location.reload()
+							return
+						}
+					} catch (error) {
+						await bridge?.sendToolCancelled?.({ reason: String(error?.message ?? error) }).catch(() => {})
+						await fetch('/api/result', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id: task.id, ok: false, error: String(error?.message ?? error) }) })
+						setStatus('Error: ' + String(error?.message ?? error))
+					}
+				} catch (error) {
+					console.error(error)
+					await delay(1000)
+				}
+			}
+		}
+
+		init().catch((error) => { console.error(error); setStatus('Error: ' + error.message) })
+	</script>
+</body>
+</html>

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "types": ["node", "vitest/globals"]
+  },
+  "include": ["src/**/*.ts", "test/**/*.ts"]
+}