@womp/mcp-ui 0.1.21 → 0.2.1

package/dist/upload/index.html

@@ -280,7 +280,7 @@ Boolean requesting whether a visible border and background is provided by the ho
 - omitted: host decides border`)}),F({method:B(`ui/request-display-mode`),params:F({mode:Uh.describe(`The display mode being requested.`)})}),og=F({mode:Uh.describe(`The display mode that was actually set. May differ from requested if not supported.`)}).passthrough(),sg=L([B(`model`),B(`app`)]).describe(`Tool visibility scope - who can access the tool.`),F({resourceUri:A().optional(),visibility:P(sg).optional().describe(`Who can access this tool. Default: ["model", "app"]
 - "model": Tool visible to and callable by the agent
 - "app": Tool callable by the app from this server only`),csp:Hl().optional(),permissions:Hl().optional()}),F({mimeTypes:P(A()).optional().describe('Array of supported MIME types for UI resources.\nMust include `"text/html;profile=mcp-app"` for MCP Apps support.')}),F({method:B(`ui/download-file`),params:F({contents:P(L([kp,Ap])).describe(`Resource contents to download — embedded (inline data) or linked (host fetches). Uses standard MCP resource types.`)})}),F({method:B(`ui/message`),params:F({role:B(`user`).describe(`Message role, currently only "user" is supported.`),content:P(jp).describe(`Message content blocks (text, image, etc.).`)})}),F({method:B(`ui/notifications/sandbox-resource-ready`),params:F({html:A().describe(`HTML content to load into the inner iframe.`),sandbox:A().optional().describe(`Optional override for the inner iframe's sandbox attribute.`),csp:Yh.optional().describe(`CSP configuration from resource metadata.`),permissions:Xh.optional().describe(`Sandbox permissions from resource metadata.`)})}),cg=F({method:B(`ui/notifications/tool-result`),params:Bp.describe(`Standard MCP tool execution result.`)}),lg=F({toolInfo:F({id:rf.optional().describe(`JSON-RPC id of the tools/call request.`),tool:Lp.describe(`Tool definition including name, inputSchema, etc.`)}).optional().describe(`Metadata of the tool call that instantiated this App.`),theme:Hh.optional().describe(`Current color theme preference.`),styles:tg.optional().describe(`Style configuration for theming the app.`),displayMode:Uh.optional().describe(`How the UI is currently displayed.`),availableDisplayModes:P(Uh).optional().describe(`Display modes the host supports.`),containerDimensions:L([F({height:j().describe(`Fixed container height in pixels.`)}),F({maxHeight:L([j(),zl()]).optional().describe(`Maximum container height in pixels.`)})]).and(L([F({width:j().describe(`Fixed container width in pixels.`)}),F({maxWidth:L([j(),zl()]).optional().describe(`Maximum container width in pixels.`)})])).optional().describe(`Container dimensions. Represents the dimensions of the iframe or other
-container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:A().optional().describe(`User's language and region preference in BCP 47 format.`),timeZone:A().optional().describe(`User's timezone in IANA format.`),userAgent:A().optional().describe(`Host application identifier.`),platform:L([B(`web`),B(`desktop`),B(`mobile`)]).optional().describe(`Platform type for responsive design decisions.`),deviceCapabilities:F({touch:M().optional().describe(`Whether the device supports touch input.`),hover:M().optional().describe(`Whether the device supports hover interactions.`)}).optional().describe(`Device input capabilities.`),safeAreaInsets:F({top:j().describe(`Top safe area inset in pixels.`),right:j().describe(`Right safe area inset in pixels.`),bottom:j().describe(`Bottom safe area inset in pixels.`),left:j().describe(`Left safe area inset in pixels.`)}).optional().describe(`Mobile safe area boundaries in pixels.`)}).passthrough(),ug=F({method:B(`ui/notifications/host-context-changed`),params:lg.describe(`Partial context update containing only changed fields.`)}),F({method:B(`ui/update-model-context`),params:F({content:P(jp).optional().describe(`Context content blocks (text, image, etc.).`),structuredContent:R(A(),N().describe(`Structured content for machine-readable context data.`)).optional().describe(`Structured content for machine-readable context data.`)})}),F({method:B(`ui/initialize`),params:F({appInfo:bf.describe(`App identification (name and version).`),appCapabilities:ag.describe(`Features and capabilities this app provides.`),protocolVersion:A().describe(`Protocol version this app supports.`)})}),dg=F({protocolVersion:A().describe(`Negotiated protocol version string (e.g., "2025-11-21").`),hostInfo:bf.describe(`Host application identification and version.`),hostCapabilities:ig.describe(`Features and capabilities provided by the host.`),hostContext:lg.describe(`Rich context about the host environment.`)}).passthrough(),fg={target:`draft-2020-12`},pg=class e extends zh{_appInfo;_capabilities;options;_hostCapabilities;_hostInfo;_hostContext;_registeredTools={};_initializedSent=!1;_assertInitialized(e){if(this._initializedSent)return;let t=`[ext-apps] App.${e}() called before connect() completed the ui/initialize handshake. Await app.connect() before calling this method, or move data loading to an ontoolresult handler.`;if(this.options?.strict)throw Error(t);console.warn(`${t}. This will throw in a future release.`)}eventSchemas={toolinput:Zh,toolinputpartial:Qh,toolresult:cg,toolcancelled:$h,hostcontextchanged:ug};static ONE_SHOT_EVENTS=new Set([`toolinput`,`toolinputpartial`,`toolresult`,`toolcancelled`]);_everHadListener=new Set;_assertHandlerTiming(t){if(!e.ONE_SHOT_EVENTS.has(t)||this._everHadListener.has(t)||(this._everHadListener.add(t),!this._initializedSent))return;let n=`[ext-apps] "${String(t)}" handler registered after connect() completed the ui/initialize handshake. The host may have already sent this notification. Register handlers before calling app.connect().`;if(this.options?.strict)throw Error(n);console.warn(n)}setEventHandler(e,t){t&&this._assertHandlerTiming(e),super.setEventHandler(e,t)}addEventListener(e,t){this._assertHandlerTiming(e),super.addEventListener(e,t)}onEventDispatch(e,t){e===`hostcontextchanged`&&(this._hostContext={...this._hostContext,...t})}constructor(e,t={},n={autoResize:!0}){super(n),this._appInfo=e,this._capabilities=t,this.options=n,n.allowUnsafeEval||o({jitless:!0}),this.setRequestHandler(jf,e=>(console.log(`Received ping:`,e.params),{})),this.setEventHandler(`hostcontextchanged`,void 0)}registerCapabilities(e){if(this.transport)throw Error(`Cannot register capabilities after transport is established`);this._capabilities=Dh(this._capabilities,e)}registerTool(e,t,n){if(this._registeredTools[e])throw Error(`Tool ${e} is already registered`);let r=this,i=()=>{r._initializedSent&&r._capabilities.tools?.listChanged&&r.sendToolListChanged()},a=t.inputSchema!==void 0,o={title:t.title,description:t.description,inputSchema:t.inputSchema,outputSchema:t.outputSchema,annotations:t.annotations,_meta:t._meta,enabled:!0,enable(){this.enabled=!0,i()},disable(){this.enabled=!1,i()},update(e){Object.assign(this,e),i()},remove(){r._registeredTools[e]===o&&(delete r._registeredTools[e],i())},handler:async(t,r)=>{if(!o.enabled)throw Error(`Tool ${e} is disabled`);let i;if(a){let a=o.inputSchema;i=await n(a?await Ih(a,t??{},`Invalid input for tool ${e}: `):t??{},r)}else i=await n(r);return o.outputSchema&&!i.isError&&(i.structuredContent=await Ih(o.outputSchema,i.structuredContent,`Invalid output for tool ${e}: `)),i}};return this._registeredTools[e]=o,!this._capabilities.tools&&!this.transport&&this.registerCapabilities({tools:{listChanged:!0}}),this.ensureToolHandlersInitialized(),i(),o}_toolHandlersInitialized=!1;ensureToolHandlersInitialized(){this._toolHandlersInitialized||(this._toolHandlersInitialized=!0,this.oncalltool=async(e,t)=>{let n=this._registeredTools[e.name];if(!n)throw Error(`Tool ${e.name} not found`);return n.handler(e.arguments,t)},this.onlisttools=async(e,t)=>({tools:await Promise.all(Object.entries(this._registeredTools).filter(([e,t])=>t.enabled).map(async([e,t])=>{let n={name:e,title:t.title,description:t.description,inputSchema:t.inputSchema?await Fh(t.inputSchema,`input`):{type:`object`,properties:{}}};return t.outputSchema&&(n.outputSchema=await Fh(t.outputSchema,`output`)),t.annotations&&(n.annotations=t.annotations),t._meta&&(n._meta=t._meta),n}))}))}async sendToolListChanged(e={}){this._assertInitialized(`sendToolListChanged`),await this.notification({method:`notifications/tools/list_changed`,params:e})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler(`toolinput`)}set ontoolinput(e){this.setEventHandler(`toolinput`,e)}get ontoolinputpartial(){return this.getEventHandler(`toolinputpartial`)}set ontoolinputpartial(e){this.setEventHandler(`toolinputpartial`,e)}get ontoolresult(){return this.getEventHandler(`toolresult`)}set ontoolresult(e){this.setEventHandler(`toolresult`,e)}get ontoolcancelled(){return this.getEventHandler(`toolcancelled`)}set ontoolcancelled(e){this.setEventHandler(`toolcancelled`,e)}get onhostcontextchanged(){return this.getEventHandler(`hostcontextchanged`)}set onhostcontextchanged(e){this.setEventHandler(`hostcontextchanged`,e)}_onteardown;get onteardown(){return this._onteardown}set onteardown(e){this.warnIfRequestHandlerReplaced(`onteardown`,this._onteardown,e),this._onteardown=e,this.replaceRequestHandler(ng,(e,t)=>{if(!this._onteardown)throw Error(`No onteardown handler set`);return this._onteardown(e.params,t)})}_oncalltool;get oncalltool(){return this._oncalltool}set oncalltool(e){this.warnIfRequestHandlerReplaced(`oncalltool`,this._oncalltool,e),this._oncalltool=e,this.replaceRequestHandler(Hp,(e,t)=>{if(!this._oncalltool)throw Error(`No oncalltool handler set`);return this._oncalltool(e.params,t)})}_onlisttools;get onlisttools(){return this._onlisttools}set onlisttools(e){this.warnIfRequestHandlerReplaced(`onlisttools`,this._onlisttools,e),this._onlisttools=e,this.replaceRequestHandler(Rp,(e,t)=>{if(!this._onlisttools)throw Error(`No onlisttools handler set`);return this._onlisttools(e.params,t)})}assertCapabilityForMethod(e){if(e===`sampling/createMessage`&&!this._hostCapabilities?.sampling)throw Error(`Host does not support sampling (required for ${e})`)}assertRequestHandlerCapability(e){switch(e){case`tools/call`:case`tools/list`:if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${e})`);return;case`ping`:case`ui/resource-teardown`:return;default:throw Error(`No handler for method ${e} registered`)}}assertNotificationCapability(e){}assertTaskCapability(e){throw Error(`Tasks are not supported in MCP Apps`)}assertTaskHandlerCapability(e){throw Error(`Task handlers are not supported in MCP Apps`)}async callServerTool(e,t){if(this._assertInitialized(`callServerTool`),typeof e==`string`)throw Error(`callServerTool() expects an object as its first argument, but received a string ("${e}"). Did you mean: callServerTool({ name: "${e}", arguments: { ... } })?`);return await this.request({method:`tools/call`,params:e},Bp,{onprogress:()=>{},resetTimeoutOnProgress:!0,...t})}async readServerResource(e,t){return this._assertInitialized(`readServerResource`),await this.request({method:`resources/read`,params:e},dp,t)}async listServerResources(e,t){return this._assertInitialized(`listServerResources`),await this.request({method:`resources/list`,params:e},ap,t)}async createSamplingMessage(e,t){this._assertInitialized(`createSamplingMessage`);let n=e.tools?am:im;return await this.request({method:`sampling/createMessage`,params:e},n,t)}sendMessage(e,t){return this._assertInitialized(`sendMessage`),this.request({method:`ui/message`,params:e},Jh,t)}sendLog(e){return this.notification({method:`notifications/message`,params:e})}updateModelContext(e,t){return this._assertInitialized(`updateModelContext`),this.request({method:`ui/update-model-context`,params:e},mf,t)}openLink(e,t){return this._assertInitialized(`openLink`),this.request({method:`ui/open-link`,params:e},Kh,t)}sendOpenLink=this.openLink;downloadFile(e,t){return this._assertInitialized(`downloadFile`),this.request({method:`ui/download-file`,params:e},qh,t)}requestTeardown(e={}){return this.notification({method:`ui/notifications/request-teardown`,params:e})}requestDisplayMode(e,t){return this._assertInitialized(`requestDisplayMode`),this.request({method:`ui/request-display-mode`,params:e},og,t)}sendSizeChanged(e){return this.notification({method:`ui/notifications/size-changed`,params:e})}setupSizeChangedNotifications(){let e=!1,t=0,n=0,r=()=>{e||(e=!0,requestAnimationFrame(()=>{e=!1;let r=document.documentElement,i=r.style.height;r.style.height=`max-content`;let a=Math.ceil(r.getBoundingClientRect().height);r.style.height=i;let o=Math.ceil(window.innerWidth);(o!==t||a!==n)&&(t=o,n=a,this.sendSizeChanged({width:o,height:a}))}))};r();let i=new ResizeObserver(r);return i.observe(document.documentElement),i.observe(document.body),()=>i.disconnect()}async connect(e=new Vh(window.parent,window.parent),t){if(this.transport)throw Error(`App is already connected. Call close() before connecting again.`);this._initializedSent=!1,await super.connect(e);try{let e=await this.request({method:`ui/initialize`,params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:Bh}},dg,t);if(e===void 0)throw Error(`Server sent invalid initialize result: ${e}`);this._hostCapabilities=e.hostCapabilities,this._hostInfo=e.hostInfo,this._hostContext=e.hostContext,await this.notification({method:`ui/notifications/initialized`}),this._initializedSent=!0,this.options?.autoResize&&this.setupSizeChangedNotifications()}catch(e){throw this.close(),e}}}}));function hg(e,t){let n,r=0,i,a=()=>{n!==void 0&&(clearTimeout(n),n=void 0)},o=new pg({name:e,version:`0.0.1`},{}),s=async e=>{let t=await o.request({method:`tools/call`,params:{name:`get_generation`,arguments:{operationId:e}}},Bp);if(!t.isError)return t.structuredContent},c=(e,o)=>{n=window.setTimeout(async()=>{if(Date.now()-r>yg){t.onTimeout?.();return}try{let n=await s(e);if(n?.status===`complete`){a(),i=n,t.onResult(n);return}}catch{}c(e,Math.min(o*1.5,vg))},o)},l=e=>{e&&(a(),i=e,t.onResult(e),e.status===`running`&&e.operationId!==void 0&&(r=Date.now(),c(e.operationId,_g)))};return o.ontoolinput=e=>{t.onInput?.(e?.arguments||{}),t.onResult({status:`running`})},o.ontoolresult=e=>l(e?.structuredContent),o.onhostcontextchanged=e=>{if(e?.theme&&Lh(e.theme),e?.styles?.variables&&Rh(e.styles.variables),e?.displayMode&&(document.documentElement.dataset.displayMode=e.displayMode),e?.safeAreaInsets){let{top:t=0,right:n=0,bottom:r=0,left:i=0}=e.safeAreaInsets;document.body.style.padding=`${t}px ${n}px ${r}px ${i}px`}},o.onteardown=async()=>(a(),{}),o.connect(new Vh(window.parent,window.parent)).catch(()=>{}),{app:o,current:()=>i}}async function gg(e,t,n){return e.request({method:`tools/call`,params:{name:t,arguments:n}},Bp)}var $,_g,vg,yg,bg=t((()=>{mg(),Fm(),$=e=>document.getElementById(e),_g=2e3,vg=1e4,yg=36e4}));n((()=>{bg();var e=1048576,t=5e3,n=15e3,r={phase:`connecting`},i,a=(e,t=!1)=>{let n=$(`status`);n.textContent=e,n.classList.toggle(`error`,t)},o=t=>{if(t<e)return`${Math.max(1,Math.round(t/1024))} KB`;let n=t/e;return`${n>=10?n.toFixed(0):n.toFixed(1)} MB`},s=e=>{let t=e.lastIndexOf(`.`);return t<0||t>=e.length-1?``:e.slice(t+1).toLowerCase()},c=e=>{let t=new Date(e);return Number.isNaN(t.getTime())?``:`until ${t.toLocaleTimeString([],{hour:`2-digit`,minute:`2-digit`})}`};function l(e){for(let t of[`drop`,`progress`,`done`,`expired`])$(t).hidden=t!==e}function u(e){$(`error-text`).textContent=e,$(`error`).hidden=!1}function d(){$(`error`).hidden=!0}function f(){let e=r.summary;if(!e){$(`title`).textContent=r.fileName?`Send ${r.fileName} to Womp`:`Send your 3D model to Womp`,$(`sub`).textContent=`so it can be quoted and printed`,l(null);return}switch($(`title`).textContent=`Send ${e.fileName} to Womp`,$(`sub`).textContent=`so it can be quoted and printed`,r.phase){case`pending`:{$(`drop-text`).textContent=`Drop ${e.fileName} here`;let t=c(e.expiresAt);$(`drop-hint`).textContent=`Only .${e.format} · up to ${e.maxMb} MB${t?` · link valid ${t}`:``}`,$(`file`).accept=`.${e.format}`,l(`drop`);break}case`uploading`:$(`progress-name`).textContent=`Uploading ${r.fileName||e.fileName}…`,l(`progress`);break;case`done`:{$(`done-name`).textContent=r.fileName||e.fileName;let t=r.fileSize??e.fileSize;$(`done-size`).textContent=t?` (${o(t)})`:``,$(`sub`).textContent=`ready to quote`,l(`done`);break}case`expired`:$(`expired-name`).textContent=e.fileName,$(`sub`).textContent=`upload link expired`,l(`expired`);break;default:l(null)}}function ee(e){let t=Math.min(99,Math.round(e*100));$(`fill`).style.width=`${t}%`,$(`progress-pct`).textContent=`${t}%`}function p(e){r.summary=e,e.status===`ready`?(r.phase=`done`,te()):e.status===`expired`?(r.phase=`expired`,te()):r.phase!==`uploading`&&(r.phase=`pending`),d(),e.status===`pending`&&e.lastError&&r.phase===`pending`&&u(`A previous attempt was refused: ${e.lastError}`),f(),a(``),r.phase===`pending`&&ne(t)}function te(){i!==void 0&&(clearTimeout(i),i=void 0)}function ne(e){te();let t=r.summary;if(!t||r.phase!==`pending`)return;let a=new Date(t.expiresAt).getTime();Number.isFinite(a)&&Date.now()>a+6e4||(i=window.setTimeout(async()=>{if(r.phase===`pending`){try{let e=await gg(ae.app,`get_upload`,{uploadId:t.uploadId});if(!e.isError&&e.structuredContent){let n=e.structuredContent;if(n.status!==`pending`||n.lastError!==t.lastError){p(n);return}}}catch{}ne(Math.min(e*1.5,n))}},e))}function re(e,t){let n=s(e.name);return n===t.format?e.size>t.maxBytes?`"${e.name}" is ${o(e.size)}; this account's limit is ${t.maxMb} MB per file.`:null:`This upload expects a .${t.format} file (${t.fileName}); "${e.name}" is a .${n||`?`}. Ask your assistant for a new upload if the format changed.`}function ie(e,t){try{let t=JSON.parse(e);if(t?.error?.message)return t.error.message}catch{}return t?`Upload failed (${t}). Try again.`:``}function m(e){let n=r.summary;if(!n||r.phase!==`pending`)return;d();let i=re(e,n);if(i){u(i);return}te(),r.phase=`uploading`,r.fileName=e.name,r.fileSize=e.size,ee(0),f(),a(``);let o=new XMLHttpRequest;o.open(`PUT`,n.uploadUrl),o.setRequestHeader(`Content-Type`,`application/octet-stream`),o.upload.onprogress=e=>{e.lengthComputable&&ee(e.loaded/e.total)},o.onload=()=>{if(o.status>=200&&o.status<300){let t;try{t=JSON.parse(o.responseText)}catch{}p(t??{...n,status:`ready`,fileSize:e.size});return}if(o.status===409){p({...n,status:`ready`});return}if(o.status===410){p({...n,status:`expired`});return}r.phase=`pending`,f(),u(ie(o.responseText,o.status)||`Upload failed (${o.status}). Try again.`),ne(t)};let s=()=>{r.phase=`pending`,f(),u(`Could not send the file from here. Try again — or ask your assistant to upload it for you.`),a(`PUT to the upload URL got no response — check connectDomains / CORS if this repeats.`,!0),ne(t)};o.onerror=s,o.onabort=s,o.send(e)}var ae=hg(`Womp upload`,{onInput:e=>{typeof e.fileName==`string`&&(r.fileName=e.fileName),f(),a(`Preparing upload…`)},onResult:e=>{let t=e;if(t.status===`running`){f(),a(`Preparing upload…`);return}if(typeof t.uploadId!=`number`||!t.uploadUrl){a(`The upload result is missing its URL — is swan-backend on a build with create_upload?`,!0);return}p(t)}}),oe=$(`drop`),h=$(`file`);$(`choose`).addEventListener(`click`,()=>h.click()),h.addEventListener(`change`,()=>{let e=h.files?.[0];h.value=``,e&&m(e)});for(let e of[`dragenter`,`dragover`])oe.addEventListener(e,e=>{e.preventDefault(),oe.classList.add(`active`)});for(let e of[`dragleave`,`drop`])oe.addEventListener(e,e=>{e.preventDefault(),oe.classList.remove(`active`)});oe.addEventListener(`drop`,e=>{let t=e.dataTransfer?.files?.[0];t&&m(t)})}))();</script>
+container holding the app. Specify either width or maxWidth, and either height or maxHeight.`),locale:A().optional().describe(`User's language and region preference in BCP 47 format.`),timeZone:A().optional().describe(`User's timezone in IANA format.`),userAgent:A().optional().describe(`Host application identifier.`),platform:L([B(`web`),B(`desktop`),B(`mobile`)]).optional().describe(`Platform type for responsive design decisions.`),deviceCapabilities:F({touch:M().optional().describe(`Whether the device supports touch input.`),hover:M().optional().describe(`Whether the device supports hover interactions.`)}).optional().describe(`Device input capabilities.`),safeAreaInsets:F({top:j().describe(`Top safe area inset in pixels.`),right:j().describe(`Right safe area inset in pixels.`),bottom:j().describe(`Bottom safe area inset in pixels.`),left:j().describe(`Left safe area inset in pixels.`)}).optional().describe(`Mobile safe area boundaries in pixels.`)}).passthrough(),ug=F({method:B(`ui/notifications/host-context-changed`),params:lg.describe(`Partial context update containing only changed fields.`)}),F({method:B(`ui/update-model-context`),params:F({content:P(jp).optional().describe(`Context content blocks (text, image, etc.).`),structuredContent:R(A(),N().describe(`Structured content for machine-readable context data.`)).optional().describe(`Structured content for machine-readable context data.`)})}),F({method:B(`ui/initialize`),params:F({appInfo:bf.describe(`App identification (name and version).`),appCapabilities:ag.describe(`Features and capabilities this app provides.`),protocolVersion:A().describe(`Protocol version this app supports.`)})}),dg=F({protocolVersion:A().describe(`Negotiated protocol version string (e.g., "2025-11-21").`),hostInfo:bf.describe(`Host application identification and version.`),hostCapabilities:ig.describe(`Features and capabilities provided by the host.`),hostContext:lg.describe(`Rich context about the host environment.`)}).passthrough(),fg={target:`draft-2020-12`},pg=class e extends zh{_appInfo;_capabilities;options;_hostCapabilities;_hostInfo;_hostContext;_registeredTools={};_initializedSent=!1;_assertInitialized(e){if(this._initializedSent)return;let t=`[ext-apps] App.${e}() called before connect() completed the ui/initialize handshake. Await app.connect() before calling this method, or move data loading to an ontoolresult handler.`;if(this.options?.strict)throw Error(t);console.warn(`${t}. This will throw in a future release.`)}eventSchemas={toolinput:Zh,toolinputpartial:Qh,toolresult:cg,toolcancelled:$h,hostcontextchanged:ug};static ONE_SHOT_EVENTS=new Set([`toolinput`,`toolinputpartial`,`toolresult`,`toolcancelled`]);_everHadListener=new Set;_assertHandlerTiming(t){if(!e.ONE_SHOT_EVENTS.has(t)||this._everHadListener.has(t)||(this._everHadListener.add(t),!this._initializedSent))return;let n=`[ext-apps] "${String(t)}" handler registered after connect() completed the ui/initialize handshake. The host may have already sent this notification. Register handlers before calling app.connect().`;if(this.options?.strict)throw Error(n);console.warn(n)}setEventHandler(e,t){t&&this._assertHandlerTiming(e),super.setEventHandler(e,t)}addEventListener(e,t){this._assertHandlerTiming(e),super.addEventListener(e,t)}onEventDispatch(e,t){e===`hostcontextchanged`&&(this._hostContext={...this._hostContext,...t})}constructor(e,t={},n={autoResize:!0}){super(n),this._appInfo=e,this._capabilities=t,this.options=n,n.allowUnsafeEval||o({jitless:!0}),this.setRequestHandler(jf,e=>(console.log(`Received ping:`,e.params),{})),this.setEventHandler(`hostcontextchanged`,void 0)}registerCapabilities(e){if(this.transport)throw Error(`Cannot register capabilities after transport is established`);this._capabilities=Dh(this._capabilities,e)}registerTool(e,t,n){if(this._registeredTools[e])throw Error(`Tool ${e} is already registered`);let r=this,i=()=>{r._initializedSent&&r._capabilities.tools?.listChanged&&r.sendToolListChanged()},a=t.inputSchema!==void 0,o={title:t.title,description:t.description,inputSchema:t.inputSchema,outputSchema:t.outputSchema,annotations:t.annotations,_meta:t._meta,enabled:!0,enable(){this.enabled=!0,i()},disable(){this.enabled=!1,i()},update(e){Object.assign(this,e),i()},remove(){r._registeredTools[e]===o&&(delete r._registeredTools[e],i())},handler:async(t,r)=>{if(!o.enabled)throw Error(`Tool ${e} is disabled`);let i;if(a){let a=o.inputSchema;i=await n(a?await Ih(a,t??{},`Invalid input for tool ${e}: `):t??{},r)}else i=await n(r);return o.outputSchema&&!i.isError&&(i.structuredContent=await Ih(o.outputSchema,i.structuredContent,`Invalid output for tool ${e}: `)),i}};return this._registeredTools[e]=o,!this._capabilities.tools&&!this.transport&&this.registerCapabilities({tools:{listChanged:!0}}),this.ensureToolHandlersInitialized(),i(),o}_toolHandlersInitialized=!1;ensureToolHandlersInitialized(){this._toolHandlersInitialized||(this._toolHandlersInitialized=!0,this.oncalltool=async(e,t)=>{let n=this._registeredTools[e.name];if(!n)throw Error(`Tool ${e.name} not found`);return n.handler(e.arguments,t)},this.onlisttools=async(e,t)=>({tools:await Promise.all(Object.entries(this._registeredTools).filter(([e,t])=>t.enabled).map(async([e,t])=>{let n={name:e,title:t.title,description:t.description,inputSchema:t.inputSchema?await Fh(t.inputSchema,`input`):{type:`object`,properties:{}}};return t.outputSchema&&(n.outputSchema=await Fh(t.outputSchema,`output`)),t.annotations&&(n.annotations=t.annotations),t._meta&&(n._meta=t._meta),n}))}))}async sendToolListChanged(e={}){this._assertInitialized(`sendToolListChanged`),await this.notification({method:`notifications/tools/list_changed`,params:e})}getHostCapabilities(){return this._hostCapabilities}getHostVersion(){return this._hostInfo}getHostContext(){return this._hostContext}get ontoolinput(){return this.getEventHandler(`toolinput`)}set ontoolinput(e){this.setEventHandler(`toolinput`,e)}get ontoolinputpartial(){return this.getEventHandler(`toolinputpartial`)}set ontoolinputpartial(e){this.setEventHandler(`toolinputpartial`,e)}get ontoolresult(){return this.getEventHandler(`toolresult`)}set ontoolresult(e){this.setEventHandler(`toolresult`,e)}get ontoolcancelled(){return this.getEventHandler(`toolcancelled`)}set ontoolcancelled(e){this.setEventHandler(`toolcancelled`,e)}get onhostcontextchanged(){return this.getEventHandler(`hostcontextchanged`)}set onhostcontextchanged(e){this.setEventHandler(`hostcontextchanged`,e)}_onteardown;get onteardown(){return this._onteardown}set onteardown(e){this.warnIfRequestHandlerReplaced(`onteardown`,this._onteardown,e),this._onteardown=e,this.replaceRequestHandler(ng,(e,t)=>{if(!this._onteardown)throw Error(`No onteardown handler set`);return this._onteardown(e.params,t)})}_oncalltool;get oncalltool(){return this._oncalltool}set oncalltool(e){this.warnIfRequestHandlerReplaced(`oncalltool`,this._oncalltool,e),this._oncalltool=e,this.replaceRequestHandler(Hp,(e,t)=>{if(!this._oncalltool)throw Error(`No oncalltool handler set`);return this._oncalltool(e.params,t)})}_onlisttools;get onlisttools(){return this._onlisttools}set onlisttools(e){this.warnIfRequestHandlerReplaced(`onlisttools`,this._onlisttools,e),this._onlisttools=e,this.replaceRequestHandler(Rp,(e,t)=>{if(!this._onlisttools)throw Error(`No onlisttools handler set`);return this._onlisttools(e.params,t)})}assertCapabilityForMethod(e){if(e===`sampling/createMessage`&&!this._hostCapabilities?.sampling)throw Error(`Host does not support sampling (required for ${e})`)}assertRequestHandlerCapability(e){switch(e){case`tools/call`:case`tools/list`:if(!this._capabilities.tools)throw Error(`Client does not support tool capability (required for ${e})`);return;case`ping`:case`ui/resource-teardown`:return;default:throw Error(`No handler for method ${e} registered`)}}assertNotificationCapability(e){}assertTaskCapability(e){throw Error(`Tasks are not supported in MCP Apps`)}assertTaskHandlerCapability(e){throw Error(`Task handlers are not supported in MCP Apps`)}async callServerTool(e,t){if(this._assertInitialized(`callServerTool`),typeof e==`string`)throw Error(`callServerTool() expects an object as its first argument, but received a string ("${e}"). Did you mean: callServerTool({ name: "${e}", arguments: { ... } })?`);return await this.request({method:`tools/call`,params:e},Bp,{onprogress:()=>{},resetTimeoutOnProgress:!0,...t})}async readServerResource(e,t){return this._assertInitialized(`readServerResource`),await this.request({method:`resources/read`,params:e},dp,t)}async listServerResources(e,t){return this._assertInitialized(`listServerResources`),await this.request({method:`resources/list`,params:e},ap,t)}async createSamplingMessage(e,t){this._assertInitialized(`createSamplingMessage`);let n=e.tools?am:im;return await this.request({method:`sampling/createMessage`,params:e},n,t)}sendMessage(e,t){return this._assertInitialized(`sendMessage`),this.request({method:`ui/message`,params:e},Jh,t)}sendLog(e){return this.notification({method:`notifications/message`,params:e})}updateModelContext(e,t){return this._assertInitialized(`updateModelContext`),this.request({method:`ui/update-model-context`,params:e},mf,t)}openLink(e,t){return this._assertInitialized(`openLink`),this.request({method:`ui/open-link`,params:e},Kh,t)}sendOpenLink=this.openLink;downloadFile(e,t){return this._assertInitialized(`downloadFile`),this.request({method:`ui/download-file`,params:e},qh,t)}requestTeardown(e={}){return this.notification({method:`ui/notifications/request-teardown`,params:e})}requestDisplayMode(e,t){return this._assertInitialized(`requestDisplayMode`),this.request({method:`ui/request-display-mode`,params:e},og,t)}sendSizeChanged(e){return this.notification({method:`ui/notifications/size-changed`,params:e})}setupSizeChangedNotifications(){let e=!1,t=0,n=0,r=()=>{e||(e=!0,requestAnimationFrame(()=>{e=!1;let r=document.documentElement,i=r.style.height;r.style.height=`max-content`;let a=Math.ceil(r.getBoundingClientRect().height);r.style.height=i;let o=Math.ceil(window.innerWidth);(o!==t||a!==n)&&(t=o,n=a,this.sendSizeChanged({width:o,height:a}))}))};r();let i=new ResizeObserver(r);return i.observe(document.documentElement),i.observe(document.body),()=>i.disconnect()}async connect(e=new Vh(window.parent,window.parent),t){if(this.transport)throw Error(`App is already connected. Call close() before connecting again.`);this._initializedSent=!1,await super.connect(e);try{let e=await this.request({method:`ui/initialize`,params:{appCapabilities:this._capabilities,appInfo:this._appInfo,protocolVersion:Bh}},dg,t);if(e===void 0)throw Error(`Server sent invalid initialize result: ${e}`);this._hostCapabilities=e.hostCapabilities,this._hostInfo=e.hostInfo,this._hostContext=e.hostContext,await this.notification({method:`ui/notifications/initialized`}),this._initializedSent=!0,this.options?.autoResize&&this.setupSizeChangedNotifications()}catch(e){throw this.close(),e}}}}));function hg(e,t){let n,r=0,i,a=()=>{n!==void 0&&(clearTimeout(n),n=void 0)},o=new pg({name:e,version:`0.0.1`},{}),s=async e=>{let t=await o.request({method:`tools/call`,params:{name:`get_generation`,arguments:{operationId:e}}},Bp);if(!t.isError)return t.structuredContent},c=(e,o)=>{n=window.setTimeout(async()=>{if(Date.now()-r>yg){t.onTimeout?.();return}try{let n=await s(e);if(n?.status===`complete`){a(),i=n,t.onResult(n);return}}catch{}c(e,Math.min(o*1.5,vg))},o)},l=e=>{e&&(a(),i=e,t.onResult(e),e.status===`running`&&e.operationId!==void 0&&(r=Date.now(),c(e.operationId,_g)))};return o.ontoolinput=e=>{t.onInput?.(e?.arguments||{}),t.onResult({status:`running`})},o.ontoolresult=e=>l(e?.structuredContent),o.onhostcontextchanged=e=>{if(e?.theme&&Lh(e.theme),e?.styles?.variables&&Rh(e.styles.variables),e?.displayMode&&(document.documentElement.dataset.displayMode=e.displayMode),e?.safeAreaInsets){let{top:t=0,right:n=0,bottom:r=0,left:i=0}=e.safeAreaInsets;document.body.style.padding=`${t}px ${n}px ${r}px ${i}px`}},o.onteardown=async()=>(a(),t.onTeardown?.(),{}),o.connect(new Vh(window.parent,window.parent)).catch(()=>{}),{app:o,current:()=>i}}async function gg(e,t,n){return e.request({method:`tools/call`,params:{name:t,arguments:n}},Bp)}var $,_g,vg,yg,bg=t((()=>{mg(),Fm(),$=e=>document.getElementById(e),_g=2e3,vg=1e4,yg=36e4}));n((()=>{bg();var e=1048576,t=5e3,n=15e3,r={phase:`connecting`},i,a=(e,t=!1)=>{let n=$(`status`);n.textContent=e,n.classList.toggle(`error`,t)},o=t=>{if(t<e)return`${Math.max(1,Math.round(t/1024))} KB`;let n=t/e;return`${n>=10?n.toFixed(0):n.toFixed(1)} MB`},s=e=>{let t=e.lastIndexOf(`.`);return t<0||t>=e.length-1?``:e.slice(t+1).toLowerCase()},c=e=>{let t=new Date(e);return Number.isNaN(t.getTime())?``:`until ${t.toLocaleTimeString([],{hour:`2-digit`,minute:`2-digit`})}`};function l(e){for(let t of[`drop`,`progress`,`done`,`expired`])$(t).hidden=t!==e}function u(e){$(`error-text`).textContent=e,$(`error`).hidden=!1}function d(){$(`error`).hidden=!0}function f(){let e=r.summary;if(!e){$(`title`).textContent=r.fileName?`Send ${r.fileName} to Womp`:`Send your 3D model to Womp`,$(`sub`).textContent=`so it can be quoted and printed`,l(null);return}switch($(`title`).textContent=`Send ${e.fileName} to Womp`,$(`sub`).textContent=`so it can be quoted and printed`,r.phase){case`pending`:{$(`drop-text`).textContent=`Drop ${e.fileName} here`;let t=c(e.expiresAt);$(`drop-hint`).textContent=`Only .${e.format} · up to ${e.maxMb} MB${t?` · link valid ${t}`:``}`,$(`file`).accept=`.${e.format}`,l(`drop`);break}case`uploading`:$(`progress-name`).textContent=`Uploading ${r.fileName||e.fileName}…`,l(`progress`);break;case`done`:{$(`done-name`).textContent=r.fileName||e.fileName;let t=r.fileSize??e.fileSize;$(`done-size`).textContent=t?` (${o(t)})`:``,$(`sub`).textContent=`ready to quote`,l(`done`);break}case`expired`:$(`expired-name`).textContent=e.fileName,$(`sub`).textContent=`upload link expired`,l(`expired`);break;default:l(null)}}function ee(e){let t=Math.min(99,Math.round(e*100));$(`fill`).style.width=`${t}%`,$(`progress-pct`).textContent=`${t}%`}function p(e){r.summary=e,e.status===`ready`?(r.phase=`done`,te()):e.status===`expired`?(r.phase=`expired`,te()):r.phase!==`uploading`&&(r.phase=`pending`),d(),e.status===`pending`&&e.lastError&&r.phase===`pending`&&u(`A previous attempt was refused: ${e.lastError}`),f(),a(``),r.phase===`pending`&&ne(t)}function te(){i!==void 0&&(clearTimeout(i),i=void 0)}function ne(e){te();let t=r.summary;if(!t||r.phase!==`pending`)return;let a=new Date(t.expiresAt).getTime();Number.isFinite(a)&&Date.now()>a+6e4||(i=window.setTimeout(async()=>{if(r.phase===`pending`){try{let e=await gg(ae.app,`get_upload`,{uploadId:t.uploadId});if(!e.isError&&e.structuredContent){let n=e.structuredContent;if(n.status!==`pending`||n.lastError!==t.lastError){p(n);return}}}catch{}ne(Math.min(e*1.5,n))}},e))}function re(e,t){let n=s(e.name);return n===t.format?e.size>t.maxBytes?`"${e.name}" is ${o(e.size)}; this account's limit is ${t.maxMb} MB per file.`:null:`This upload expects a .${t.format} file (${t.fileName}); "${e.name}" is a .${n||`?`}. Ask your assistant for a new upload if the format changed.`}function ie(e,t){try{let t=JSON.parse(e);if(t?.error?.message)return t.error.message}catch{}return t?`Upload failed (${t}). Try again.`:``}function m(e){let n=r.summary;if(!n||r.phase!==`pending`)return;d();let i=re(e,n);if(i){u(i);return}te(),r.phase=`uploading`,r.fileName=e.name,r.fileSize=e.size,ee(0),f(),a(``);let o=new XMLHttpRequest;o.open(`PUT`,n.uploadUrl),o.setRequestHeader(`Content-Type`,`application/octet-stream`),o.upload.onprogress=e=>{e.lengthComputable&&ee(e.loaded/e.total)},o.onload=()=>{if(o.status>=200&&o.status<300){let t;try{t=JSON.parse(o.responseText)}catch{}p(t??{...n,status:`ready`,fileSize:e.size});return}if(o.status===409){p({...n,status:`ready`});return}if(o.status===410){p({...n,status:`expired`});return}r.phase=`pending`,f(),u(ie(o.responseText,o.status)||`Upload failed (${o.status}). Try again.`),ne(t)};let s=()=>{r.phase=`pending`,f(),u(`Could not send the file from here. Try again — or ask your assistant to upload it for you.`),a(`PUT to the upload URL got no response — check connectDomains / CORS if this repeats.`,!0),ne(t)};o.onerror=s,o.onabort=s,o.send(e)}var ae=hg(`Womp upload`,{onInput:e=>{typeof e.fileName==`string`&&(r.fileName=e.fileName),f(),a(`Preparing upload…`)},onResult:e=>{let t=e;if(t.status===`running`){f(),a(`Preparing upload…`);return}if(typeof t.uploadId!=`number`||!t.uploadUrl){a(`The upload result is missing its URL — is swan-backend on a build with create_upload?`,!0);return}p(t)}}),oe=$(`drop`),h=$(`file`);$(`choose`).addEventListener(`click`,()=>h.click()),h.addEventListener(`change`,()=>{let e=h.files?.[0];h.value=``,e&&m(e)});for(let e of[`dragenter`,`dragover`])oe.addEventListener(e,e=>{e.preventDefault(),oe.classList.add(`active`)});for(let e of[`dragleave`,`drop`])oe.addEventListener(e,e=>{e.preventDefault(),oe.classList.remove(`active`)});oe.addEventListener(`drop`,e=>{let t=e.dataTransfer?.files?.[0];t&&m(t)})}))();</script>
   </head>
   <body>
     <div class="card" id="card">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.21",
+  "version": "0.2.1",
   "description": "MCP Apps widgets for Womp's MCP server — interactive cards rendered inline in Claude and other MCP hosts.",
   "license": "MIT",
   "type": "commonjs",
@@ -39,6 +39,7 @@
     "@modelcontextprotocol/ext-apps": "^1.7.5",
     "@modelcontextprotocol/sdk": "^1.30.0",
     "@types/three": "^0.185.4",
+    "@womp/kakapo-web": "^0.1.0",
     "express": "^5.2.1",
     "three": "^0.185.1",
     "typescript": "^5.9.3",

package/src/openai-camera/index.html

@@ -72,14 +72,15 @@
       :root:not([data-display-mode="fullscreen"]) .full-only { display: none !important; }
       :root[data-display-mode="fullscreen"] .inline-only { display: none !important; }
 
+      /*
+       * No border or corner of its own: the server asks the host for its frame
+       * (`prefersBorder`), and ChatGPT draws it. A second one inside it read as
+       * a card in a card.
+       */
       .card {
         display: grid;
         grid-template-columns: minmax(0, 1fr);
-        max-width: 760px;
-        border-radius: var(--radius);
-        overflow: hidden;
         background: var(--bg);
-        border: 1px solid var(--line);
         box-sizing: border-box;
       }
       /* The chat column is wide enough on desktop: render left, choices right. */
@@ -131,12 +132,12 @@
         overflow: hidden;
         background: radial-gradient(120% 90% at 50% 35%, var(--stage-a), var(--stage-b));
       }
-      .stage iframe {
+      .stage canvas {
         display: block;
         width: 100%;
         height: 100%;
-        border: 0;
       }
+      .stage canvas[hidden] { display: none; }
       .preview {
         position: absolute;
         inset: 0;
@@ -483,7 +484,7 @@
       </div>
 
       <div class="stage">
-        <iframe id="viewer" title="3D preview of your camera" allow="fullscreen" hidden></iframe>
+        <canvas id="canvas" aria-label="3D preview of your camera" hidden></canvas>
         <div class="preview" id="fallback" hidden></div>
         <div class="status" id="status" role="status">Connecting&hellip;</div>
       </div>

package/src/openai-camera/main.ts

@@ -1,25 +1,25 @@
+import { createViewer, type Script, type Viewer, type ViewerError } from "@womp/kakapo-web";
 import { $, callTool, createCard, openExternal, pushModelContext, toggleFullscreen } from "../shared/bridge";
 
 /**
  * The camera card — the OpenAI MCP's first project (swan-backend
  * docs/OPENAI_MCP.md). Brand-neutral: nothing here may say Womp.
  *
- * The 3D view is Carlos's hosted viewer (Kakapo on WebGPU) in a nested frame,
- * pointed at the scene the server renders for the design's current revision.
- * Two directions of change meet here:
+ * The 3D view is kakapo-web (Kakapo on WebGPU), bundled into the card: its
+ * viewer draws on the stage's canvas, from the scene the server renders for the
+ * design's current revision. The scene is all it fetches: its fonts and
+ * environment map are built in. Two directions of change meet here:
  *
- *  - The user drags a slider in the viewer's Customize panel. The viewer only
- *    answers `kakapo:getParams`, so the card asks every 1.5s, and a difference
- *    is saved with `sync_camera_design` (app-only). The viewer already shows it;
- *    no reload.
+ *  - The user turns a shape knob in the card. The viewer shows it at once
+ *    (`setParams`), and the change is saved with `sync_camera_design`
+ *    (app-only).
  *  - The model calls `update_camera_design`. That renders no card, so this card
  *    polls `get_camera_design` and moves the viewer to the new revision when it
  *    changed for any reason other than its own write.
  *
  * Colours are not viewer knobs (they live in the scene's materials), so a swatch
- * saves and moves the viewer to the new revision. A viewer that says it can
- * (`kakapo:setScene` in its ready message) swaps the revision in place, keeping
- * its camera and re-modelling only what changed; any other is reloaded. Each part
+ * saves and moves the viewer to the new revision: `setScene` swaps it in place,
+ * keeping its camera and re-modelling only what changed. Each part
  * is solid or a gradient of 2-3 colours, turned 45° at a time by the arrow; the
  * colours come from the palette, the native colour picker, or the eyedropper
  * where the browser has one.
@@ -27,9 +27,8 @@ import { $, callTool, createCard, openExternal, pushModelContext, toggleFullscre
  * Inline, the card is the render, the two colours, the price, Customize and
  * Order. Customize goes fullscreen, where the same card grows every control:
  * gradients, the picker, and the shape knobs under plain names. The card owns
- * those controls; the viewer is asked to hide its own panel and Print button
- * (`embed=1`). Until it takes `kakapo:setParams`, a knob turned here saves and
- * swaps in the new revision, the way a colour does.
+ * those controls; the viewer only draws. Without a viewer, a knob turned here
+ * saves and the drawing shows the new revision, the way a colour does.
  *
  * Order gets the quote from `checkout_camera` and opens its checkout link on
  * the web, all from here; paying happens there. In the chat, "order it" makes
@@ -56,8 +55,6 @@ interface DesignOption {
 interface Design {
   designId: string;
   rev: number;
-  viewerUrl: string;
-  viewerOrigin: string;
   sceneUrl: string;
   options: DesignOption[];
   /** Each part's colours: one is solid, more is a gradient. */
@@ -94,32 +91,20 @@ const EyeDropper = (window as Window & { EyeDropper?: EyeDropperCtor }).EyeDropp
 /** Marks this card's own writes, so its polling does not reload the viewer for them. */
 const writer = `card-${Math.random().toString(36).slice(2, 10)}`;
 
-const viewer = $("viewer") as HTMLIFrameElement;
+const canvas = $("canvas") as HTMLCanvasElement;
 const fallback = $("fallback");
 
 let design: Design | undefined;
 /** Revision the viewer is showing. */
 let loadedRev = 0;
-let viewerReady = false;
-/** The design the viewer frame was loaded for. */
+let viewer: Viewer | undefined;
+/** The design the viewer was created for. */
 let viewerDesignId: string | undefined;
-/** Whether the viewer takes a new revision by message instead of a reload. */
-let viewerCanSwap = false;
-/** Whether the viewer takes knob values by message, so a knob needs no new scene. */
-let viewerCanSetParams = false;
-/** Where to post to the viewer: its origin, or "*" when it speaks as "null" (an opaque host). */
-let viewerTarget = "*";
-/** The scene URL a swap is waiting on, and the reload that stands in if it never lands. */
-let pendingSwap: string | undefined;
-let swapTimer: number | undefined;
-/** Waiting for the viewer's next params message. */
-const paramsWaiters: (() => void)[] = [];
-/** Last knob values read back from the viewer. */
+/** Counts viewer starts, so a slow one that a newer start overtook is dropped. */
+let viewerRequest = 0;
 let viewerParams: Record<string, number> | undefined;
 let webgpu: boolean | undefined;
-let syncTimer: number | undefined;
 let syncing: Promise<void> | undefined;
-let readyTimer: number | undefined;
 let pollTimer: number | undefined;
 let lastActivity = Date.now();
 let statusTimer: number | undefined;
@@ -142,6 +127,11 @@ const { app } = createCard("Camera", {
     if (typeof data.designId !== "string") return;
     adopt(data as Design);
   },
+  // The host is removing the card: release the GPU device and stop asking the server.
+  onTeardown: () => {
+    clearTimeout(pollTimer);
+    closeViewer();
+  },
 });
 
 /** A design arrived from the tool call that rendered this card. */
@@ -182,49 +172,78 @@ async function loadViewer(note?: string) {
     setStatus("");
     return;
   }
-  if (viewerReady && viewerCanSwap && viewerDesignId === design.designId) swapScene(design.sceneUrl, note);
-  else reloadViewer(note);
+  if (viewer && viewerDesignId === design.designId) await moveViewer(viewer, design.sceneUrl, note);
+  else await startViewer(note);
 }
 
-/** Hand the viewer another revision of the design on screen. */
-function swapScene(url: string, note?: string) {
-  pendingSwap = url;
+async function moveViewer(current: Viewer, url: string, note?: string) {
   setStatus(note ?? "Updating the 3D view…");
-  viewer.contentWindow?.postMessage({ type: "kakapo:setScene", url }, viewerTarget);
-  clearTimeout(swapTimer);
-  swapTimer = window.setTimeout(() => {
-    if (pendingSwap === url) reloadViewer(note);
-  }, 15_000);
+  try {
+    if (!(await current.setScene(url)) || current !== viewer) return;
+    viewerParams = flatten(current.getScripts());
+    setStatus("");
+  } catch {
+    if (current === viewer) await startViewer(note);
+  }
 }
 
-function reloadViewer(note?: string) {
+async function startViewer(note?: string) {
   if (!design) return;
-  viewerReady = false;
-  viewerCanSwap = false;
-  viewerCanSetParams = false;
-  viewerParams = undefined;
-  viewerDesignId = design.designId;
-  pendingSwap = undefined;
-  clearTimeout(swapTimer);
-  viewer.hidden = false;
-  // The drawing stands in until the viewer says it is ready.
+  const d = design;
+  const request = ++viewerRequest;
+  closeViewer();
+  canvas.hidden = false;
   drawPreview(false);
-  // The card owns the controls: ask the viewer to drop its own panel and Print button.
-  const src = new URL(design.viewerUrl);
-  src.searchParams.set("embed", "1");
-  viewer.src = src.toString();
   setStatus(note ?? "Loading the 3D viewer…");
-  clearTimeout(readyTimer);
-  readyTimer = window.setTimeout(() => {
-    if (viewerReady) return;
-    setStatus("The 3D viewer hasn't loaded — this app may not allow it here.");
-    report("viewer-timeout");
-  }, 25_000);
+  let modelled = false;
+  try {
+    const next = await createViewer(canvas, {
+      sceneUrl: d.sceneUrl,
+      onProgress: ({ built, total }) => {
+        if (modelled || request !== viewerRequest) return;
+        modelled = built === total;
+        if (modelled) {
+          fallback.hidden = true;
+          setStatus("");
+        }
+      },
+      onError: (e) => {
+        if (e.code === "device-lost") {
+          showFallback();
+          setStatus("The 3D view stopped. Reopen the card to restart it.");
+        }
+        report(`viewer-${e.code}`, e.message);
+      },
+    });
+    if (request !== viewerRequest) {
+      next.destroy();
+      return;
+    }
+    viewer = next;
+    viewerDesignId = d.designId;
+    viewerParams = flatten(next.getScripts());
+    report("viewer-ready");
+  } catch (e) {
+    if (request !== viewerRequest) return;
+    const err = e as ViewerError;
+    closeViewer();
+    if (err.code === "no-webgpu") webgpu = false;
+    showFallback();
+    setStatus(err.code === "no-webgpu" ? "" : "The 3D view couldn't load. You can still change the design and order it.");
+    report(`viewer-${err.code ?? "failed"}`, String(err.message ?? err));
+  }
+}
+
+function closeViewer() {
+  viewer?.destroy();
+  viewer = undefined;
+  viewerDesignId = undefined;
+  viewerParams = undefined;
 }
 
 function showFallback() {
   if (!design) return;
-  viewer.hidden = true;
+  canvas.hidden = true;
   drawPreview(true);
 }
 
@@ -279,96 +298,16 @@ function cameraSvg(d: Design) {
   );
 }
 
-/** The viewer reports `scripts: [{ nodeId, name, params: { knob: value } }]`; knob names are unique across them. */
-function flatten(scripts: unknown): Record<string, number> {
+function flatten(scripts: Script[]): Record<string, number> {
   const out: Record<string, number> = {};
-  if (!Array.isArray(scripts)) return out;
   for (const script of scripts) {
-    const params = (script as { params?: Record<string, unknown> })?.params ?? {};
-    for (const [name, value] of Object.entries(params)) {
-      if (typeof value === "number" && Number.isFinite(value)) out[name] = value;
+    for (const p of script.params) {
+      if (typeof p.value === "number" && Number.isFinite(p.value)) out[p.name] = p.value;
     }
   }
   return out;
 }
 
-/**
- * Where the viewer's messages come from. A host that frames the card on an
- * opaque origin (a sandbox without allow-same-origin) passes that sandbox down
- * to the viewer's frame, which then speaks as "null" — still our frame, as
- * `event.source` proves.
- */
-const fromViewer = (event: MessageEvent, d: Design) =>
-  event.source === viewer.contentWindow && (event.origin === d.viewerOrigin || event.origin === "null");
-
-window.addEventListener("message", (event) => {
-  if (!design || !fromViewer(event, design)) return;
-  const msg = event.data as { type?: string; scripts?: unknown; messages?: unknown; url?: string; error?: string };
-  if (msg?.type === "kakapo:ready") {
-    viewerReady = true;
-    viewerTarget = event.origin === "null" ? "*" : event.origin;
-    viewerCanSwap = Array.isArray(msg.messages) && msg.messages.includes("kakapo:setScene");
-    viewerCanSetParams = Array.isArray(msg.messages) && msg.messages.includes("kakapo:setParams");
-    fallback.hidden = true;
-    clearTimeout(readyTimer);
-    viewerParams = flatten(msg.scripts);
-    setStatus("");
-    report("viewer-ready");
-  } else if (msg?.type === "kakapo:sceneSet") {
-    if (msg.url !== pendingSwap) return; // an earlier swap, answering late
-    pendingSwap = undefined;
-    clearTimeout(swapTimer);
-    if (msg.error) {
-      reloadViewer();
-      return;
-    }
-    // The revision's knob values are the viewer's now: the baseline for spotting the user's next change.
-    viewerParams = flatten(msg.scripts);
-    setStatus("");
-  } else if (msg?.type === "kakapo:params") {
-    onViewerParams(flatten(msg.scripts));
-    for (const done of paramsWaiters.splice(0)) done();
-  } else if (msg?.type === "kakapo:print") {
-    // A viewer that ignores embed=1 still shows Print: treat it as Order.
-    onViewerParams(flatten(msg.scripts));
-    void order();
-  }
-});
-
-// The viewer has no change event, so read its knobs on an interval while visible.
-window.setInterval(() => {
-  if (!design || !viewerReady || document.visibilityState !== "visible") return;
-  viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, viewerTarget);
-}, 1_500);
-
-/**
- * The viewer's knobs as they are now rather than at the last poll, for a save
- * the user just asked for: one made with values up to 1.5s old would put back
- * a slider they had just moved.
- */
-function freshViewerParams(): Promise<void> {
-  if (!viewerReady) return Promise.resolve();
-  return new Promise((resolve) => {
-    paramsWaiters.push(resolve);
-    viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, viewerTarget);
-    window.setTimeout(resolve, 500);
-  });
-}
-
-function onViewerParams(params: Record<string, number>) {
-  if (!viewerParams) {
-    viewerParams = params;
-    return;
-  }
-  const before = viewerParams;
-  if (!Object.keys(params).some((k) => params[k] !== before[k])) return;
-  viewerParams = params;
-  lastActivity = Date.now();
-  setStatus("Saving…");
-  clearTimeout(syncTimer);
-  syncTimer = window.setTimeout(() => void flushSync(), 700);
-}
-
 // ---- saving -------------------------------------------------------------------
 
 /** What the card changes besides the viewer's knobs. */
@@ -382,8 +321,6 @@ interface Finish {
  * changed). Serialised, so two quick changes cannot race each other's baseRev.
  */
 async function flushSync(finish?: Finish) {
-  clearTimeout(syncTimer);
-  syncTimer = undefined;
   while (syncing) await syncing;
   if (!design) return;
   const baseRev = design.rev;
@@ -452,15 +389,9 @@ async function poll() {
       const next = res.structuredContent as Design | undefined;
       if (!res.isError && next && next.rev > design.rev) {
         lastActivity = Date.now();
-        if (syncTimer !== undefined) {
-          // A slider move is waiting to be saved: save it first, so the reload
-          // below shows the chat's change AND the user's.
-          await flushSync();
-        } else {
-          design = next;
-          render();
-          if (next.rev > loadedRev) void loadViewer("Updated from the chat…");
-        }
+        design = next;
+        render();
+        if (next.rev > loadedRev) void loadViewer("Updated from the chat…");
       }
     }
   } catch {
@@ -552,7 +483,7 @@ function render() {
 
   $("price").textContent = design.price.label;
   $("price-inline").textContent = design.price.label;
-  if (!fallback.hidden) drawPreview(viewer.hidden);
+  if (!fallback.hidden) drawPreview(canvas.hidden);
 }
 
 /** An eyedropper (Lucide `pipette`, ISC). */
@@ -677,11 +608,10 @@ async function setKnob(name: string, value: number) {
   design = { ...design, options: design.options.map((o) => (o.name === name ? { ...o, value } : o)) };
   render();
   setStatus("Saving…");
-  await freshViewerParams();
   viewerParams = { ...(viewerParams ?? {}), [name]: value };
-  if (viewerCanSetParams) {
+  if (viewer) {
     // The viewer shows it at once; the save only records it.
-    viewer.contentWindow?.postMessage({ type: "kakapo:setParams", params: { [name]: value } }, viewerTarget);
+    viewer.setParams({ [name]: value });
     await flushSync();
   } else {
     // An empty finish still means "the viewer is behind": swap in the saved revision.
@@ -769,7 +699,6 @@ async function setPaint(slot: Slot, paint: string[]) {
   design = { ...design, colors: { ...design.colors, [slot]: paint } };
   render();
   setStatus("Saving…");
-  await freshViewerParams();
   await flushSync({ colors: { [slot]: paint } });
 }
 
@@ -779,7 +708,6 @@ async function setAngle(slot: Slot, angle: number) {
   design = { ...design, gradientAngles: { ...design.gradientAngles, [slot]: angle } };
   render();
   setStatus("Saving…");
-  await freshViewerParams();
   await flushSync({ gradientAngles: { [slot]: angle } });
 }
 
@@ -827,8 +755,7 @@ async function order() {
   button.disabled = true;
   setStatus("Opening checkout…");
   try {
-    await freshViewerParams();
-    if (syncTimer !== undefined || syncing) await flushSync();
+    await syncing;
     const res = await callTool(app, "checkout_camera", { designId: design.designId });
     const quote = res.structuredContent as Quote | undefined;
     if (res.isError || typeof quote?.checkoutUrl !== "string") {

package/src/shared/bridge.ts

@@ -76,6 +76,8 @@ export interface CardHooks {
    * the controls before the first quote lands.
    */
   onInput?: (args: Record<string, unknown>) => void;
+  /** Called when the host is about to remove the card: release what outlives the DOM (a GPU device). */
+  onTeardown?: () => void;
 }
 
 export interface Card {
@@ -175,6 +177,7 @@ export function createCard(name: string, hooks: CardHooks): Card {
   // hidden iframe.
   app.onteardown = async () => {
     stopPolling();
+    hooks.onTeardown?.();
     return {};
   };