@womp/mcp-ui 0.1.4 → 0.1.5

package/dist/print/index.html

@@ -225,7 +225,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>bg){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,yg))},o)},l=e=>{e&&(a(),i=e,t.onResult(e),e.status===`running`&&e.operationId!==void 0&&(r=Date.now(),c(e.operationId,vg)))};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}}function gg(e,t){return e.openLink({url:t})}async function _g(e,t,n){return e.request({method:`tools/call`,params:{name:t,arguments:n}},Bp)}var $,vg,yg,bg,xg=t((()=>{mg(),Fm(),$=e=>document.getElementById(e),vg=2e3,yg=1e4,bg=36e4}));n((()=>{xg();var e=e=>`$${e.toFixed(2)}`,t=$(`material`),n=$(`longest`),r=$(`quantity`),i=$(`order`),a,o,s=0,c;function l(e,t=!1){let n=$(`status`);n.textContent=e,n.classList.toggle(`error`,t)}function u(t){$(`card`).classList.remove(`quoting`);let n=t.dimensionsCm;n&&($(`size`).textContent=`${n.width.toFixed(1)} x ${n.height.toFixed(1)} x ${n.depth.toFixed(1)} cm`);let r=t.solid;if(!r)return;let a=$(`price`);a.textContent=``;let o=document.createElement(`span`);if(o.className=`amount`,o.textContent=e(r.unitPrice),a.append(o),r.discount>0){let t=document.createElement(`span`);t.className=`was`,t.textContent=e(r.salePrice),a.append(t)}let s=document.createElement(`span`);s.className=`per`,s.textContent=t.quantity&&t.quantity>1?`per unit x ${t.quantity}`:`per unit`,a.append(s);let c=$(`rows`);if(c.textContent=``,t.hollow){let n=document.createElement(`div`);n.textContent=`hollow (Pro): ${e(t.hollow.unitPrice)} per unit${t.callerIsPro?``:` — requires a subscription`}`,c.append(n)}let u=document.createElement(`div`);u.textContent=`~${r.productionDays} production day${r.productionDays===1?``:`s`}`,c.append(u),$(`note`).hidden=!1,i.hidden=!1,i.disabled=!1,l(``)}function d(e){if(e.material){if(![...t.options].some(t=>t.value===e.material)){let n=document.createElement(`option`);n.value=e.material,n.textContent=e.material,t.append(n)}t.value=e.material}typeof e.longestSideCm==`number`&&(n.value=String(Math.round(e.longestSideCm*10)/10)),typeof e.quantity==`number`&&(r.value=String(e.quantity))}function f(e,n){t.textContent=``;for(let n of e){let e=document.createElement(`option`);e.value=n.id,e.textContent=n.id,t.append(e)}n&&(t.value=n)}function p(){return{...a?.generationId?{generationId:a.generationId}:{},...a?.glbUrl?{glbUrl:a.glbUrl}:{},material:t.value,quantity:Math.min(100,Math.max(1,Math.round(Number(r.value)||1))),longestSideCm:Math.min(60,Math.max(2,Number(n.value)||10))}}async function ee(){if(!a||o)return;let e=++s;$(`card`).classList.add(`quoting`),i.disabled=!0,l(`Updating price…`);try{let t=await _g(ne.app,`estimate_print`,p());if(e!==s)return;if(t.isError){let e=t.content?.find(e=>e.type===`text`)?.text||`Could not update the quote.`;$(`card`).classList.remove(`quoting`),i.disabled=!1,l(String(e),!0);return}u(t.structuredContent||{})}catch{if(e!==s)return;$(`card`).classList.remove(`quoting`),i.disabled=!1,l(`Could not update the quote — check the connection and try again.`,!0)}}function te(){c!==void 0&&clearTimeout(c),c=window.setTimeout(()=>void ee(),600)}t.addEventListener(`change`,te),n.addEventListener(`change`,te),r.addEventListener(`change`,te);var ne=hg(`Womp print`,{onTimeout:()=>l(`Still measuring — ask me to check on it.`),onInput:e=>{d({material:typeof e.material==`string`?e.material:void 0,longestSideCm:typeof e.longestSideCm==`number`?e.longestSideCm:void 0,quantity:typeof e.quantity==`number`?e.quantity:void 0})},onResult:e=>{let t=e;if(t.status===`running`){$(`card`).classList.add(`quoting`),l(`Measuring mesh…`);return}t.source&&(a=t.source),t.printUrl?(o=t.printUrl,$(`controls`).hidden=!0,$(`order-label`).textContent=`Complete order on womp.com`):t.materials?.length&&(f(t.materials,t.material),$(`controls`).hidden=!1),d(t),u(t)}});i.addEventListener(`click`,async()=>{if(o){gg(ne.app,o);return}if(a){i.disabled=!0,$(`order-label`).textContent=`Setting up project…`,l(``);try{let e=await _g(ne.app,`prepare_print`,p()),t=e.structuredContent||{};if(e.isError||!t.printUrl){let t=e.content?.find(e=>e.type===`text`)?.text||`Could not set up the print.`;l(String(t),!0);return}o=t.printUrl,$(`controls`).hidden=!0,u(t),$(`order-label`).textContent=`Complete order on womp.com`,gg(ne.app,t.printUrl)}catch{l(`Could not set up the print — try again.`,!0)}finally{i.disabled=!1,o||($(`order-label`).textContent=`Continue on womp.com`)}}})}))();</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>bg){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,yg))},o)},l=e=>{e&&(a(),i=e,t.onResult(e),e.status===`running`&&e.operationId!==void 0&&(r=Date.now(),c(e.operationId,vg)))};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}}function gg(e,t){return e.openLink({url:t})}async function _g(e,t,n){return e.request({method:`tools/call`,params:{name:t,arguments:n}},Bp)}var $,vg,yg,bg,xg=t((()=>{mg(),Fm(),$=e=>document.getElementById(e),vg=2e3,yg=1e4,bg=36e4}));n((()=>{xg();var e=e=>`$${e.toFixed(2)}`,t=$(`material`),n=$(`longest`),r=$(`quantity`),i=$(`order`),a,o,s=``,c=0,l;function u(e,t=!1){let n=$(`status`);n.textContent=e,n.classList.toggle(`error`,t)}function d(t){$(`card`).classList.remove(`quoting`);let n=t.dimensionsCm;n&&($(`size`).textContent=`${n.width.toFixed(1)} x ${n.height.toFixed(1)} x ${n.depth.toFixed(1)} cm`);let r=t.solid;if(!r)return;let a=$(`price`);a.textContent=``;let o=document.createElement(`span`);if(o.className=`amount`,o.textContent=e(r.unitPrice),a.append(o),r.discount>0){let t=document.createElement(`span`);t.className=`was`,t.textContent=e(r.salePrice),a.append(t)}let s=document.createElement(`span`);s.className=`per`,s.textContent=t.quantity&&t.quantity>1?`per unit x ${t.quantity}`:`per unit`,a.append(s);let c=$(`rows`);if(c.textContent=``,t.hollow){let n=document.createElement(`div`);n.textContent=`hollow (Pro): ${e(t.hollow.unitPrice)} per unit${t.callerIsPro?``:` — requires a subscription`}`,c.append(n)}let l=document.createElement(`div`);l.textContent=`~${r.productionDays} production day${r.productionDays===1?``:`s`}`,c.append(l),$(`note`).hidden=!1,i.hidden=!1,i.disabled=!1,u(``)}function f(e){if(e.material){if(![...t.options].some(t=>t.value===e.material)){let n=document.createElement(`option`);n.value=e.material,n.textContent=e.material,t.append(n)}t.value=e.material}typeof e.longestSideCm==`number`&&(n.value=String(Math.round(e.longestSideCm*10)/10)),typeof e.quantity==`number`&&(r.value=String(e.quantity))}function p(e,n){t.textContent=``;for(let n of e){let e=document.createElement(`option`);e.value=n.id,e.textContent=n.id,t.append(e)}n&&(t.value=n)}function ee(){return{...a?.generationId?{generationId:a.generationId}:{},...a?.glbUrl?{glbUrl:a.glbUrl}:{},material:t.value,quantity:Math.min(100,Math.max(1,Math.round(Number(r.value)||1))),longestSideCm:Math.min(60,Math.max(2,Number(n.value)||10))}}async function te(){if(!a||o)return;let e=++c;$(`card`).classList.add(`quoting`),i.disabled=!0,u(`Updating price…`);try{let t=await _g(re.app,`estimate_print`,ee());if(e!==c)return;if(t.isError){let e=t.content?.find(e=>e.type===`text`)?.text||`Could not update the quote.`;$(`card`).classList.remove(`quoting`),i.disabled=!1,u(String(e),!0);return}d(t.structuredContent||{})}catch{if(e!==c)return;$(`card`).classList.remove(`quoting`),i.disabled=!1,u(`Could not update the quote — check the connection and try again.`,!0)}}function ne(){l!==void 0&&clearTimeout(l),s=``,$(`order-label`).textContent=`Add to cart`,l=window.setTimeout(()=>void te(),600)}t.addEventListener(`change`,ne),n.addEventListener(`change`,ne),r.addEventListener(`change`,ne);var re=hg(`Womp print`,{onTimeout:()=>u(`Still measuring — ask me to check on it.`),onInput:e=>{f({material:typeof e.material==`string`?e.material:void 0,longestSideCm:typeof e.longestSideCm==`number`?e.longestSideCm:void 0,quantity:typeof e.quantity==`number`?e.quantity:void 0})},onResult:e=>{let t=e;if(t.status===`running`){$(`card`).classList.add(`quoting`),u(`Measuring mesh…`);return}t.source&&(a=t.source),t.printUrl?(o=t.printUrl,$(`controls`).hidden=!0,$(`order-label`).textContent=`Complete order on womp.com`):t.materials?.length&&(p(t.materials,t.material),$(`controls`).hidden=!1),f(t),d(t)}});i.addEventListener(`click`,async()=>{if(o){gg(re.app,o);return}if(s){gg(re.app,s);return}if(a){i.disabled=!0,$(`order-label`).textContent=`Adding to cart…`,u(``);try{let e=await _g(re.app,`add_to_cart`,ee()),t=e.structuredContent||{};if(e.isError||!t.payUrl){let t=e.content?.find(e=>e.type===`text`)?.text||`Could not add to the cart.`;u(String(t),!0),$(`order-label`).textContent=`Add to cart`;return}s=t.payUrl,$(`order-label`).textContent=`Checkout on womp.com`,u(`Added — cart has ${t.items?.length??1} item(s), subtotal $${(t.subtotal??0).toFixed(2)}. Shipping and promo codes apply at checkout.`)}catch{u(`Could not add to the cart — try again.`,!0),$(`order-label`).textContent=`Add to cart`}finally{i.disabled=!1}}})}))();</script>
   </head>
   <body>
     <div class="card" id="card">
@@ -256,7 +256,7 @@ container holding the app. Specify either width or maxWidth, and either height o
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
           <path d="M7 17 17 7M9 7h8v8" />
         </svg>
-        <span id="order-label">Continue on womp.com</span>
+        <span id="order-label">Add to cart</span>
       </button>
       <div class="note" id="note" hidden>
         Shipping is added at checkout; the final price is confirmed before printing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "MCP Apps widgets for Womp's MCP server — interactive cards rendered inline in Claude and other MCP hosts.",
   "license": "MIT",
   "type": "commonjs",
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "build": "yarn build:ui && yarn build:bake",
-    "build:ui": "yarn build:ui:image && yarn build:ui:mesh && yarn build:ui:print",
+    "build:ui": "yarn build:ui:image && yarn build:ui:mesh && yarn build:ui:print && yarn build:ui:cart && yarn build:ui:order",
     "build:bake": "node scripts/bake-html.mjs",
     "dev": "vite",
     "dev:host": "vite",
@@ -25,7 +25,9 @@
     "prepublishOnly": "yarn clean && yarn build",
     "build:ui:image": "CARD=image vite build",
     "build:ui:mesh": "CARD=mesh vite build",
-    "build:ui:print": "CARD=print vite build"
+    "build:ui:print": "CARD=print vite build",
+    "build:ui:cart": "CARD=cart vite build",
+    "build:ui:order": "CARD=order vite build"
   },
   "devDependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.5",

package/src/cart/index.html

@@ -0,0 +1,210 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Womp cart</title>
+    <style>
+      /* Same var()-with-fallback discipline as every card: host style
+         variables arrive over the bridge after the handshake. The row layout
+         mirrors swan-frontend's CartPanel item rows (thumbnail · title +
+         material/size/qty · line total) as closely as a card can. */
+      :root {
+        color-scheme: light dark;
+      }
+      body {
+        margin: 0;
+        font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
+        color: var(--color-text-primary, #e8e8e8);
+      }
+
+      .card {
+        max-width: 400px;
+        border-radius: var(--border-radius-lg, 14px);
+        overflow: hidden;
+        background: var(--color-background-secondary, #1b1b1d);
+        border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.08));
+        padding: 14px;
+        box-sizing: border-box;
+      }
+
+      .head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 8px;
+        margin-bottom: 10px;
+      }
+      .title {
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+      }
+      .count {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+
+      .items {
+        display: grid;
+        gap: 10px;
+      }
+      .item {
+        display: grid;
+        grid-template-columns: 56px 1fr auto;
+        gap: 10px;
+        align-items: center;
+      }
+      .thumb {
+        width: 56px;
+        height: 56px;
+        border-radius: var(--border-radius-md, 10px);
+        background: var(--color-background-tertiary, #2a2a2e);
+        object-fit: cover;
+        display: block;
+      }
+      .thumb.pulsing {
+        background: linear-gradient(90deg, #2a2a2e, #37373d, #2a2a2e);
+        background-size: 200% 100%;
+        animation: sweep 1.4s ease-in-out infinite;
+      }
+      @keyframes sweep {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .thumb.pulsing { animation: none; }
+      }
+
+      .item-main {
+        min-width: 0;
+        display: grid;
+        gap: 2px;
+      }
+      .item-title {
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 500;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .item-sub {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .badge {
+        display: inline-block;
+        font-size: 10px;
+        padding: 1px 6px;
+        border-radius: var(--border-radius-full, 999px);
+        background: var(--color-background-tertiary, #2a2a2e);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.7));
+        vertical-align: 1px;
+      }
+
+      .item-price {
+        text-align: right;
+        display: grid;
+        gap: 2px;
+      }
+      .line-total {
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+      }
+      .per-unit {
+        font-size: 10px;
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.55));
+        font-variant-numeric: tabular-nums;
+      }
+
+      .empty {
+        padding: 18px 0;
+        font-size: var(--font-text-sm-size, 13px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        text-align: center;
+      }
+      .empty[hidden] { display: none; }
+
+      .divider {
+        height: 1px;
+        background: var(--color-border-primary, rgba(255, 255, 255, 0.08));
+        margin: 12px 0 10px;
+      }
+      .divider[hidden] { display: none; }
+
+      .totals {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        font-size: var(--font-text-sm-size, 13px);
+      }
+      .totals[hidden] { display: none; }
+      .subtotal {
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+      }
+
+      .cta {
+        margin-top: 12px;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        border: 0;
+        cursor: pointer;
+        font: inherit;
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+        padding: 9px 12px;
+        border-radius: var(--border-radius-full, 999px);
+        color: #fff;
+        background: var(--color-background-accent, #5867dd);
+      }
+      .cta:hover { filter: brightness(1.1); }
+      .cta:focus-visible { outline: 2px solid var(--color-ring-primary, #7aa2ff); outline-offset: 1px; }
+      .cta[hidden] { display: none; }
+      .cta svg { width: 14px; height: 14px; display: block; }
+
+      .note {
+        margin-top: 8px;
+        font-size: 10px;
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.5));
+      }
+      .note[hidden] { display: none; }
+
+      .status {
+        margin-top: 8px;
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+      .status:empty { display: none; }
+    </style>
+  </head>
+  <body>
+    <div class="card" id="card">
+      <div class="head">
+        <div class="title">Cart</div>
+        <div class="count" id="count"></div>
+      </div>
+      <div class="items" id="items"></div>
+      <div class="empty" id="empty" hidden>The cart is empty.</div>
+      <div class="divider" id="divider" hidden></div>
+      <div class="totals" id="totals" hidden>
+        <span>Subtotal</span>
+        <span class="subtotal" id="subtotal"></span>
+      </div>
+      <button class="cta" id="checkout" hidden>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M7 17 17 7M9 7h8v8" />
+        </svg>
+        Checkout on womp.com
+      </button>
+      <div class="note" id="note" hidden>Shipping and promo codes are applied at checkout.</div>
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/src/cart/main.ts

@@ -0,0 +1,157 @@
+import { $, callTool, createCard, openLink, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The cart card — renders add_to_cart / view_cart / remove_from_cart results
+ * as swan-frontend-style cart rows (thumbnail · title + material/size/qty ·
+ * line total) with the checkout link out to the real cart UI.
+ *
+ * Thumbnails lag item creation by a few seconds (the preview render is a GPU
+ * job kicked off at cart-add), so rows start as skeletons and the card polls
+ * the app-callable `view_cart` until every thumbnail exists — the same
+ * self-filling trick as the mesh card, bounded so a dead render can't poll
+ * forever. Like every card, it never touches money: checkout is a
+ * `ui/open-link` to `/pay/<ids>`.
+ */
+
+interface CartItem {
+  orderItemId: number;
+  title: string;
+  material: string;
+  quantity: number;
+  unitPrice: number;
+  dimensionsCm?: { width: number; height: number; depth: number };
+  thumbnailUrl?: string;
+}
+
+interface CartPayload {
+  items?: CartItem[];
+  subtotal?: number;
+  payUrl?: string;
+  removed?: number[];
+}
+
+const usd = (n: number) => `$${n.toFixed(2)}`;
+
+let payUrl = "";
+let pollTimer: number | undefined;
+let pollUntil = 0;
+/** Bound the thumbnail-refresh polling: renders usually land well inside this. */
+const THUMB_POLL_MS = 4_000;
+const THUMB_POLL_CEILING_MS = 90_000;
+
+const setStatus = (text: string) => {
+  $("status").textContent = text;
+};
+
+function itemRow(item: CartItem): HTMLElement {
+  const row = document.createElement("div");
+  row.className = "item";
+
+  if (item.thumbnailUrl) {
+    const img = document.createElement("img");
+    img.className = "thumb";
+    img.alt = item.title;
+    img.src = item.thumbnailUrl;
+    row.append(img);
+  } else {
+    const skeleton = document.createElement("div");
+    skeleton.className = "thumb pulsing";
+    row.append(skeleton);
+  }
+
+  const main = document.createElement("div");
+  main.className = "item-main";
+  const title = document.createElement("div");
+  title.className = "item-title";
+  title.textContent = item.title;
+  const sub = document.createElement("div");
+  sub.className = "item-sub";
+  const badge = document.createElement("span");
+  badge.className = "badge";
+  badge.textContent = item.material;
+  sub.append(badge);
+  const bits: string[] = [];
+  if (item.dimensionsCm) {
+    const d = item.dimensionsCm;
+    bits.push(`${d.width.toFixed(1)} x ${d.height.toFixed(1)} x ${d.depth.toFixed(1)} cm`);
+  }
+  bits.push(`qty ${item.quantity}`);
+  sub.append(` ${bits.join(" · ")}`);
+  main.append(title, sub);
+  row.append(main);
+
+  const price = document.createElement("div");
+  price.className = "item-price";
+  const line = document.createElement("div");
+  line.className = "line-total";
+  line.textContent = usd(item.unitPrice * item.quantity);
+  price.append(line);
+  if (item.quantity > 1) {
+    const per = document.createElement("div");
+    per.className = "per-unit";
+    per.textContent = `${usd(item.unitPrice)} each`;
+    price.append(per);
+  }
+  row.append(price);
+  return row;
+}
+
+function render(data: CartPayload) {
+  const items = data.items || [];
+  if (data.payUrl) payUrl = data.payUrl;
+
+  $("count").textContent = items.length ? `${items.length} item${items.length === 1 ? "" : "s"}` : "";
+  const list = $("items");
+  list.textContent = "";
+  items.forEach((item) => list.append(itemRow(item)));
+
+  $("empty").hidden = items.length > 0;
+  $("divider").hidden = !items.length;
+  $("totals").hidden = !items.length;
+  $("checkout").hidden = !items.length || !payUrl;
+  $("note").hidden = !items.length;
+  if (typeof data.subtotal === "number") $("subtotal").textContent = usd(data.subtotal);
+  setStatus("");
+
+  scheduleThumbnailRefresh(items);
+}
+
+/** Poll view_cart until every row has its render, bounded. */
+function scheduleThumbnailRefresh(items: CartItem[]) {
+  if (pollTimer !== undefined) {
+    clearTimeout(pollTimer);
+    pollTimer = undefined;
+  }
+  if (!items.length || items.every((i) => i.thumbnailUrl)) return;
+  if (!pollUntil) pollUntil = Date.now() + THUMB_POLL_CEILING_MS;
+  if (Date.now() > pollUntil) return;
+
+  pollTimer = window.setTimeout(async () => {
+    try {
+      const res = await callTool(card.app, "view_cart", {});
+      if (!res.isError && res.structuredContent) {
+        render(res.structuredContent as CartPayload);
+        return;
+      }
+    } catch {
+      // A failed refresh only delays thumbnails; the ceiling stops it.
+    }
+    scheduleThumbnailRefresh(items);
+  }, THUMB_POLL_MS);
+}
+
+const card = createCard("Womp cart", {
+  onResult: (raw: GenerationResult) => {
+    const data = raw as CartPayload & GenerationResult;
+    if (data.status === "running") {
+      setStatus("Updating cart…");
+      return;
+    }
+    pollUntil = 0;
+    render(data);
+  },
+});
+
+$("checkout").addEventListener("click", () => {
+  if (payUrl) void openLink(card.app, payUrl);
+});

package/src/order/index.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Womp orders</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+      body {
+        margin: 0;
+        font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
+        color: var(--color-text-primary, #e8e8e8);
+      }
+
+      .card {
+        max-width: 400px;
+        border-radius: var(--border-radius-lg, 14px);
+        overflow: hidden;
+        background: var(--color-background-secondary, #1b1b1d);
+        border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.08));
+        padding: 14px;
+        box-sizing: border-box;
+      }
+
+      .orders { display: grid; gap: 12px; }
+
+      .order { display: grid; gap: 6px; }
+      .order + .order {
+        border-top: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.08));
+        padding-top: 12px;
+      }
+      .order-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      .order-id {
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+      }
+      /* Status chips mirror the orders page's wording; color encodes the band:
+         waiting (amber), moving (blue), done (green), stopped (red/gray). */
+      .chip {
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        padding: 2px 8px;
+        border-radius: var(--border-radius-full, 999px);
+        background: var(--color-background-tertiary, #2a2a2e);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.7));
+        white-space: nowrap;
+      }
+      .chip.wait { background: rgba(217, 174, 85, 0.16); color: #d9ae55; }
+      .chip.move { background: rgba(122, 162, 255, 0.16); color: #7aa2ff; }
+      .chip.done { background: rgba(127, 199, 150, 0.16); color: #7fc796; }
+      .chip.stop { background: rgba(224, 141, 141, 0.16); color: #e08d8d; }
+
+      .lines {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        display: grid;
+        gap: 2px;
+      }
+      .total-row {
+        display: flex;
+        justify-content: space-between;
+        font-size: var(--font-text-xs-size, 12px);
+      }
+      .total-row b { font-variant-numeric: tabular-nums; }
+
+      .action {
+        margin-top: 4px;
+        border-left: 3px solid #d9ae55;
+        background: rgba(217, 174, 85, 0.1);
+        border-radius: 6px;
+        padding: 8px 10px;
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-primary, #e8e8e8);
+      }
+      .action[hidden] { display: none; }
+
+      .tracking {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.7));
+      }
+
+      .empty {
+        padding: 14px 0;
+        font-size: var(--font-text-sm-size, 13px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        text-align: center;
+      }
+      .empty[hidden] { display: none; }
+
+      .status {
+        margin-top: 8px;
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+      .status:empty { display: none; }
+    </style>
+  </head>
+  <body>
+    <div class="card" id="card">
+      <div class="orders" id="orders"></div>
+      <div class="empty" id="empty" hidden>No print orders yet.</div>
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>