@womp/mcp-ui 0.1.20 → 0.2.0

package/src/openai-camera/index.html

@@ -131,12 +131,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 +483,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/openai-order/index.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Order</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, #1b1b1a);
+      }
+
+      .card {
+        display: grid;
+        gap: 14px;
+        max-width: 520px;
+        padding: 14px;
+        border-radius: var(--border-radius-lg, 14px);
+        background: var(--color-background-secondary, #f6f6f4);
+        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1));
+        box-sizing: border-box;
+      }
+
+      .head {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+      }
+      /* The quote card's picture of the design, from its colours alone. */
+      .thumb {
+        position: relative;
+        flex: none;
+        width: 56px;
+        height: 56px;
+        border-radius: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.14);
+        background: var(--color-background-tertiary, #e8e8e4);
+        box-sizing: border-box;
+      }
+      .thumb .cap {
+        position: absolute;
+        top: 9px;
+        right: 9px;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+      .thumb .cap:not([style]) { display: none; }
+      .titles { min-width: 0; }
+      .titles h2 {
+        margin: 0;
+        font-size: var(--font-text-md-size, 15px);
+      }
+      .titles p {
+        margin: 2px 0 0;
+        font-size: var(--font-text-sm-size, 13px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+
+      /* Paid → Printing → Shipped → Delivered: a bar per step, filled once reached. */
+      .tracker {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 6px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .tracker li {
+        display: grid;
+        gap: 6px;
+        font-size: var(--font-text-xs-size, 12px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+      .tracker li::before {
+        content: "";
+        height: 4px;
+        border-radius: 2px;
+        background: var(--color-border-primary, rgba(0, 0, 0, 0.12));
+      }
+      .tracker li.done::before { background: var(--color-text-primary, #1b1b1a); }
+      .tracker li.now {
+        font-weight: 600;
+        color: var(--color-text-primary, #1b1b1a);
+      }
+
+      button.action {
+        font: inherit;
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+        border-radius: var(--border-radius-full, 999px);
+        padding: 9px 14px;
+        cursor: pointer;
+        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.14));
+        background: transparent;
+        color: var(--color-text-primary, #1b1b1a);
+      }
+
+      .status {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+      .status:empty { display: none; }
+      [hidden] { display: none !important; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="head" id="head" hidden>
+        <div class="thumb" id="thumb" aria-hidden="true"><span class="cap" id="cap"></span></div>
+        <div class="titles">
+          <h2 id="title"></h2>
+          <p id="line"></p>
+        </div>
+      </div>
+
+      <ol class="tracker" id="tracker" aria-label="Order progress" hidden>
+        <li data-step="paid">Paid</li>
+        <li data-step="printing">Printing</li>
+        <li data-step="shipped">Shipped</li>
+        <li data-step="delivered">Delivered</li>
+      </ol>
+
+      <button class="action" id="track" type="button" hidden></button>
+
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>