@womp/mcp-ui 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "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 && yarn build:ui:cart && yarn build:ui:order && yarn build:ui:upload && yarn build:ui:openai-camera",
+    "build:ui": "yarn build:ui:image && yarn build:ui:mesh && yarn build:ui:print && yarn build:ui:cart && yarn build:ui:order && yarn build:ui:upload && yarn build:ui:openai-camera && yarn build:ui:openai-quote",
     "build:bake": "node scripts/bake-html.mjs",
     "dev": "vite",
     "dev:host": "vite",
@@ -31,7 +31,8 @@
     "build:ui:cart": "CARD=cart vite build",
     "build:ui:order": "CARD=order vite build",
     "build:ui:upload": "CARD=upload vite build",
-    "build:ui:openai-camera": "CARD=openai-camera vite build"
+    "build:ui:openai-camera": "CARD=openai-camera vite build",
+    "build:ui:openai-quote": "CARD=openai-quote vite build"
   },
   "devDependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.5",

package/src/cart/main.ts

@@ -10,7 +10,7 @@ import { $, callTool, createCard, openLink, type GenerationResult } from "../sha
  * 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>`.
+ * `ui/open-link` to `/checkout/<ids>`.
  */
 
 interface CartItem {

package/src/openai-camera/index.html

@@ -42,12 +42,6 @@
         height: auto;
         min-height: 0;
       }
-      /* While ordering, the design stays in view but gives the form the room. */
-      .card[data-view="order"] .stage,
-      .card[data-view="done"] .stage {
-        height: 220px;
-        flex: none;
-      }
       .stage iframe {
         display: block;
         width: 100%;
@@ -78,8 +72,6 @@
       .fallback dt { color: var(--color-text-secondary, rgba(27, 27, 26, 0.62)); }
       .fallback dd { margin: 0; font-variant-numeric: tabular-nums; }
 
-      .view[hidden] { display: none; }
-
       .controls {
         display: grid;
         gap: 8px;
@@ -246,51 +238,6 @@
       }
       button.action:disabled { opacity: 0.5; cursor: default; }
 
-      form {
-        display: grid;
-        gap: 8px;
-        padding: 12px 14px 0;
-        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-      }
-      form .wide { grid-column: 1 / -1; }
-      form h2 {
-        margin: 0;
-        font-size: var(--font-text-sm-size, 14px);
-      }
-      form .note {
-        margin: 0;
-        font-size: var(--font-text-xs-size, 12px);
-        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
-      }
-      label {
-        display: grid;
-        gap: 3px;
-        min-width: 0;
-        font-size: var(--font-text-xs-size, 12px);
-        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
-      }
-      input {
-        width: 100%;
-        box-sizing: border-box;
-        font: inherit;
-        font-size: var(--font-text-sm-size, 13px);
-        color: var(--color-text-primary, #1b1b1a);
-        background: var(--color-background-primary, #ffffff);
-        border: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.14));
-        border-radius: 8px;
-        padding: 7px 9px;
-      }
-      input[aria-invalid="true"] { border-color: #c2410c; }
-
-      .done {
-        padding: 14px;
-        display: grid;
-        gap: 6px;
-        font-size: var(--font-text-sm-size, 13px);
-      }
-      .done h2 { margin: 0; font-size: var(--font-text-md-size, 15px); }
-      .done p { margin: 0; color: var(--color-text-secondary, rgba(27, 27, 26, 0.62)); }
-
       .status {
         padding: 0 14px 10px;
         font-size: var(--font-text-xs-size, 11px);
@@ -300,13 +247,13 @@
     </style>
   </head>
   <body>
-    <div class="card" id="card" data-view="design">
+    <div class="card" id="card">
       <div class="stage">
         <iframe id="viewer" title="3D preview of your camera" allow="fullscreen" hidden></iframe>
         <div class="fallback" id="fallback" hidden></div>
       </div>
 
-      <div class="view" id="view-design">
+      <div id="view-design">
         <div class="controls">
           <div class="row">
             <span>Shell</span>
@@ -348,35 +295,6 @@
         </div>
       </div>
 
-      <div class="view" id="view-order" hidden>
-        <form id="order-form" novalidate>
-          <h2 class="wide">Where should we send it?</h2>
-          <p class="note wide" id="order-summary"></p>
-          <label class="wide">Full name<input name="name" autocomplete="name" maxlength="200" /></label>
-          <label class="wide">Email<input name="email" type="email" autocomplete="email" maxlength="200" /></label>
-          <label class="wide">Address<input name="address" autocomplete="street-address" maxlength="200" /></label>
-          <label>City<input name="city" autocomplete="address-level2" maxlength="200" /></label>
-          <label>Postcode / ZIP<input name="postcode" autocomplete="postal-code" maxlength="40" /></label>
-          <label class="wide">Country<input name="country" autocomplete="country-name" maxlength="100" /></label>
-        </form>
-        <div class="foot">
-          <div class="price">Test mode — nothing is charged.</div>
-          <button class="action" id="order-back" type="button">Back</button>
-          <button class="action primary" id="order-place" type="button">Place test order</button>
-        </div>
-      </div>
-
-      <div class="view" id="view-done" hidden>
-        <div class="done">
-          <h2>Order received</h2>
-          <p id="done-text"></p>
-        </div>
-        <div class="foot">
-          <div class="price"></div>
-          <button class="action" id="done-back" type="button">Back to design</button>
-        </div>
-      </div>
-
       <div class="status" id="status">Connecting&hellip;</div>
     </div>
     <script type="module" src="./main.ts"></script>

package/src/openai-camera/main.ts

@@ -1,4 +1,4 @@
-import { $, callTool, createCard, pushModelContext, toggleFullscreen } from "../shared/bridge";
+import { $, callTool, createCard, pushModelContext, sendChatMessage, toggleFullscreen } from "../shared/bridge";
 
 /**
  * The camera card — the OpenAI MCP's first project (swan-backend
@@ -13,17 +13,20 @@ import { $, callTool, createCard, pushModelContext, toggleFullscreen } from "../
  *    is saved with `sync_camera_design` (app-only). The viewer already shows it;
  *    no reload.
  *  - The model calls `update_camera_design`. That renders no card, so this card
- *    polls `get_camera_design` and reloads the viewer when the revision moved
- *    for any reason other than its own write.
+ *    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 then reloads the viewer with the new revision. Each part is solid
- * or a gradient of 2-3 colours; the colours come from the palette, the native
- * colour picker, or the eyedropper where the browser has one.
+ * 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
+ * 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.
  *
- * Ordering happens in the card: Order (or a `checkout_camera` result, which
- * arrives with mode "checkout") opens the shipping form, and the form submits to
- * the app-only `place_order` for the revision on screen. Nothing is charged.
+ * Order asks for a quote in the chat, as if the user had typed it: the model
+ * answers with `checkout_camera`, whose quote card (src/openai-quote) carries the
+ * checkout link. Nothing about paying happens in here.
  */
 
 interface DesignOption {
@@ -36,49 +39,60 @@ interface DesignOption {
 interface Design {
   designId: string;
   rev: number;
-  mode?: "design" | "checkout";
   viewerUrl: string;
   viewerOrigin: string;
   sceneUrl: string;
   options: DesignOption[];
   /** Each part's colours: one is solid, more is a gradient. */
   colors: Record<Slot, string[]>;
+  /** Which way each part's gradient runs, in degrees. */
+  gradientAngles: Record<Slot, number>;
   palette: { name: string; hex: string }[];
   price: { amount: number; currency: string; label: string };
   lastChange?: { source: string; writer: string; fields: string[] };
 }
 
-interface OrderResult {
-  orderId: string;
-  rev: number;
-  price: { label: string };
-}
-
 type Slot = "shell" | "button";
 const SLOTS: Slot[] = ["shell", "button"];
-type View = "design" | "order" | "done";
 
 /** The most colours a gradient takes (the server holds the same limit). */
 const MAX_COLORS = 3;
 
+/** An arrow pointing right (Lucide `arrow-right`, ISC). */
+const ARROW =
+  '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>';
+/**
+ * Where each part's arrow points at 0°, in CSS degrees: the shell runs top to
+ * bottom, the button left to right. In the default view both turn anticlockwise
+ * as the angle grows, so the arrow turns by minus the angle.
+ */
+const ARROW_AT_0: Record<Slot, number> = { shell: 90, button: 0 };
+
 /** Chromium's EyeDropper API; absent elsewhere. */
 type EyeDropperCtor = new () => { open(): Promise<{ sRGBHex: string }> };
 const EyeDropper = (window as Window & { EyeDropper?: EyeDropperCtor }).EyeDropper;
 
-const CONTACT_FIELDS = ["name", "email", "address", "city", "postcode", "country"] as const;
-
 /** 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 cardEl = $("card");
 const viewer = $("viewer") as HTMLIFrameElement;
 const fallback = $("fallback");
-const form = $("order-form") as HTMLFormElement;
 
 let design: Design | undefined;
 /** Revision the viewer is showing. */
 let loadedRev = 0;
 let viewerReady = false;
+/** The design the viewer frame was loaded for. */
+let viewerDesignId: string | undefined;
+/** Whether the viewer takes a new revision by message instead of a reload. */
+let viewerCanSwap = 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. */
 let viewerParams: Record<string, number> | undefined;
 let webgpu: boolean | undefined;
@@ -97,13 +111,6 @@ function setStatus(text: string, clearAfterMs?: number) {
   if (clearAfterMs) statusTimer = window.setTimeout(() => ($("status").textContent = ""), clearAfterMs);
 }
 
-function showView(view: View) {
-  cardEl.dataset.view = view;
-  $("view-design").hidden = view !== "design";
-  $("view-order").hidden = view !== "order";
-  $("view-done").hidden = view !== "done";
-}
-
 const { app } = createCard("Camera", {
   onInput: () => setStatus("Setting up your camera…"),
   onResult: (raw) => {
@@ -125,7 +132,6 @@ function adopt(next: Design) {
   } else if (next.rev > loadedRev) {
     void loadViewer();
   }
-  if (next.mode === "checkout") openOrderForm();
 }
 
 // ---- the viewer -------------------------------------------------------------
@@ -153,8 +159,29 @@ async function loadViewer(note?: string) {
     setStatus("");
     return;
   }
+  if (viewerReady && viewerCanSwap && viewerDesignId === design.designId) swapScene(design.sceneUrl, note);
+  else reloadViewer(note);
+}
+
+/** Hand the viewer another revision of the design on screen. */
+function swapScene(url: string, note?: string) {
+  pendingSwap = url;
+  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);
+}
+
+function reloadViewer(note?: string) {
+  if (!design) return;
   viewerReady = false;
+  viewerCanSwap = false;
   viewerParams = undefined;
+  viewerDesignId = design.designId;
+  pendingSwap = undefined;
+  clearTimeout(swapTimer);
   fallback.hidden = true;
   viewer.hidden = false;
   viewer.src = design.viewerUrl;
@@ -177,8 +204,8 @@ function showFallback() {
     "The 3D preview needs WebGPU, which this browser or device doesn't offer. You can still change the design here or in chat, and order it.";
   const list = document.createElement("dl");
   const rows: [string, string][] = [
-    ["Shell colour", paintText(design.colors.shell)],
-    ["Button colour", paintText(design.colors.button)],
+    ["Shell colour", paintText(design.colors.shell, design.gradientAngles.shell)],
+    ["Button colour", paintText(design.colors.button, design.gradientAngles.button)],
     ...design.options.map((o) => [o.label, o.display] as [string, string]),
   ];
   for (const [k, v] of rows) {
@@ -215,29 +242,56 @@ const fromViewer = (event: MessageEvent, d: Design) =>
 
 window.addEventListener("message", (event) => {
   if (!design || !fromViewer(event, design)) return;
-  const msg = event.data as { type?: string; scripts?: unknown };
+  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");
     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") {
     // The viewer's own Print button is our Order.
     onViewerParams(flatten(msg.scripts));
-    openOrderForm();
+    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;
-  // "*": under an opaque host the viewer's origin is "null", which no target origin can name. The request carries nothing.
-  viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, "*");
+  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;
@@ -254,11 +308,17 @@ function onViewerParams(params: Record<string, number>) {
 
 // ---- saving -------------------------------------------------------------------
 
+/** What the card changes besides the viewer's knobs. */
+interface Finish {
+  colors?: Partial<Record<Slot, string[]>>;
+  gradientAngles?: Partial<Record<Slot, number>>;
+}
+
 /**
- * Save the viewer's knobs (and a part's colours, if they changed). Serialised,
- * so two quick changes cannot race each other's baseRev.
+ * Save the viewer's knobs (and a part's colours or gradient angle, if they
+ * changed). Serialised, so two quick changes cannot race each other's baseRev.
  */
-async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
+async function flushSync(finish?: Finish) {
   clearTimeout(syncTimer);
   syncTimer = undefined;
   while (syncing) await syncing;
@@ -271,7 +331,7 @@ async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
         baseRev,
         writer,
         params: viewerParams ?? {},
-        ...(colors ? { colors } : {}),
+        ...finish,
       });
       const next = res.structuredContent as Design | undefined;
       if (res.isError || !next) {
@@ -285,11 +345,11 @@ async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
         return;
       }
       // Anything besides our own write since baseRev (a chat change merged in)
-      // means the viewer is behind. So is a colour, which it cannot set itself.
+      // means the viewer is behind. So does a colour, which lives in the scene file.
       const merged = next.rev > baseRev + 1;
-      if (merged || colors) void loadViewer(merged ? "Merged with a change from the chat…" : "Applying colour…");
+      if (merged || finish) void loadViewer(merged ? "Merged with a change from the chat…" : "Applying colour…");
       else loadedRev = next.rev;
-      if (!merged && !colors) setStatus("Saved", 1_500);
+      if (!merged && !finish) setStatus("Saved", 1_500);
       void pushModelContext(app, contextLine(next));
     } catch {
       setStatus("Couldn't save that change.");
@@ -302,14 +362,15 @@ async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
   }
 }
 
-/** "coral", or "coral → violet gradient" */
-function paintText(paint: string[]) {
-  return paint.length > 1 ? `${paint.join(" → ")} gradient` : paint[0];
+/** "coral", "coral → violet gradient", or "coral → violet gradient turned 45°" */
+function paintText(paint: string[], angle = 0) {
+  if (paint.length < 2) return paint[0];
+  return `${paint.join(" → ")} gradient${angle ? ` turned ${angle}°` : ""}`;
 }
 
 const contextLine = (d: Design) =>
   `The user adjusted their camera in the card. Design ${d.designId}, revision ${d.rev}: ` +
-  `shell ${paintText(d.colors.shell)}, button ${paintText(d.colors.button)}; ` +
+  `shell ${paintText(d.colors.shell, d.gradientAngles.shell)}, button ${paintText(d.colors.button, d.gradientAngles.button)}; ` +
   d.options.map((o) => `${o.label} ${o.display}`).join(", ") +
   ".";
 
@@ -387,9 +448,6 @@ function render() {
     $(`dropper-${slot}`).hidden = !EyeDropper;
   }
   $("price").textContent = `Full-colour print · ${design.price.label}`;
-  $("order-summary").textContent =
-    `Your camera, printed in full colour: ${design.price.label}. ` +
-    `Shell ${paintText(design.colors.shell)}, button ${paintText(design.colors.button)}.`;
   if (!fallback.hidden) showFallback();
 }
 
@@ -424,7 +482,12 @@ function renderStops(slot: Slot, paint: string[]) {
   const remove = iconButton("−", `${slot}: remove the selected gradient colour`, paint.length <= 2, () => {
     void setPaint(slot, paint.filter((_, i) => i !== activeStop[slot]));
   });
-  box.append(track, add, remove);
+  const angle = design?.gradientAngles[slot] ?? 0;
+  const turn = iconButton("", `${slot}: turn the gradient 45° (now ${angle}°)`, false, () => void setAngle(slot, (angle + 45) % 360));
+  // The arrow points the way the colours run, first to last, as the part sits in the default view.
+  turn.innerHTML = ARROW;
+  turn.style.transform = `rotate(${ARROW_AT_0[slot] - angle}deg)`;
+  box.append(turn, track, add, remove);
 }
 
 function iconButton(text: string, label: string, disabled: boolean, onClick: () => void) {
@@ -468,7 +531,18 @@ async function setPaint(slot: Slot, paint: string[]) {
   design = { ...design, colors: { ...design.colors, [slot]: paint } };
   render();
   setStatus("Saving…");
-  await flushSync({ [slot]: paint });
+  await freshViewerParams();
+  await flushSync({ colors: { [slot]: paint } });
+}
+
+async function setAngle(slot: Slot, angle: number) {
+  if (!design || design.gradientAngles[slot] === angle) return;
+  lastActivity = Date.now();
+  design = { ...design, gradientAngles: { ...design.gradientAngles, [slot]: angle } };
+  render();
+  setStatus("Saving…");
+  await freshViewerParams();
+  await flushSync({ gradientAngles: { [slot]: angle } });
 }
 
 for (const slot of SLOTS) {
@@ -501,55 +575,30 @@ for (const slot of SLOTS) {
 
 // ---- ordering -----------------------------------------------------------------
 
-function openOrderForm() {
-  if (!design) return;
-  lastActivity = Date.now();
-  showView("order");
-  setStatus("");
-  (form.elements.namedItem("name") as HTMLInputElement | null)?.focus();
-}
+let ordering = false;
 
-/** The form's values, or undefined after marking what is missing. */
-function readContact(): Record<(typeof CONTACT_FIELDS)[number], string> | undefined {
-  const contact = {} as Record<(typeof CONTACT_FIELDS)[number], string>;
-  let ok = true;
-  for (const name of CONTACT_FIELDS) {
-    const input = form.elements.namedItem(name) as HTMLInputElement;
-    const value = input.value.trim();
-    const valid = name === "email" ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) : value.length > 0;
-    input.setAttribute("aria-invalid", String(!valid));
-    if (!valid) ok = false;
-    contact[name] = value;
-  }
-  return ok ? contact : undefined;
-}
-
-async function placeOrder() {
-  if (!design) return;
-  const contact = readContact();
-  if (!contact) {
-    setStatus("Fill in the highlighted fields.");
-    return;
-  }
-  const button = $("order-place") as HTMLButtonElement;
+/**
+ * Ask for a quote in the chat. Whatever the user just changed is saved first,
+ * so the quote is for what is on screen, and fullscreen closes so the quote card
+ * that answers is in view.
+ */
+async function order() {
+  if (!design || ordering) return;
+  ordering = true;
+  lastActivity = Date.now();
+  const button = $("order") as HTMLButtonElement;
   button.disabled = true;
-  setStatus("Placing your order…");
+  setStatus("Getting your quote…");
   try {
-    // Order what is on screen: save any pending knob turn first.
+    await freshViewerParams();
     if (syncTimer !== undefined || syncing) await flushSync();
-    const res = await callTool(app, "place_order", { designId: design.designId, rev: design.rev, writer, contact });
-    const order = res.structuredContent as OrderResult | undefined;
-    if (res.isError || !order) {
-      setStatus("The order didn't go through. Check the details and try again.");
-      return;
-    }
-    $("done-text").textContent = `Test order ${order.orderId} is recorded (${order.price.label}). Nothing was charged.`;
-    showView("done");
-    setStatus("");
-    void pushModelContext(app, `The user placed test order ${order.orderId} for camera design ${design.designId}, revision ${order.rev}.`);
+    if (document.documentElement.dataset.displayMode === "fullscreen") await toggleFullscreen(app);
+    const sent = await sendChatMessage(app, "Order it");
+    setStatus(sent ? "" : "Ask in the chat to order it.");
   } catch {
-    setStatus("The order didn't go through. Try again in a moment.");
+    setStatus("Couldn't ask for a quote. Ask in the chat to order it.");
   } finally {
+    ordering = false;
     button.disabled = false;
   }
 }
@@ -558,14 +607,7 @@ $("customize").addEventListener("click", () => {
   lastActivity = Date.now();
   void toggleFullscreen(app);
 });
-$("order").addEventListener("click", openOrderForm);
-$("order-back").addEventListener("click", () => showView("design"));
-$("order-place").addEventListener("click", () => void placeOrder());
-$("done-back").addEventListener("click", () => showView("design"));
-form.addEventListener("submit", (event) => {
-  event.preventDefault();
-  void placeOrder();
-});
+$("order").addEventListener("click", () => void order());
 
 // The bridge sets data-display-mode from the host; keep the toggle's label honest.
 new MutationObserver(() => {