@womp/mcp-ui 0.1.3 → 0.1.4

package/src/print/main.ts

@@ -1,13 +1,23 @@
-import { $, createCard, openLink, type GenerationResult } from "../shared/bridge";
+import { $, callTool, createCard, openLink, type GenerationResult } from "../shared/bridge";
 
 /**
- * The print card — a quote, and (after prepare_print) the way out to checkout.
+ * The print card — a live configurator, and the way out to checkout.
  *
- * Deliberately has NO payment surface: the button opens womp.com's print flow
- * via `ui/open-link`, where address, shipping and payment run with every gate
- * the web app already has. The card renders what estimate_print /
- * prepare_print returned; it never calls a tool itself, so unlike the mesh
- * card it needs no app-callable visibility anywhere.
+ * The whole point (why this is not a static receipt): the user turns the knobs
+ * — material, size, quantity — and the card re-quotes THROUGH THE HOST by
+ * calling `estimate_print` itself, so tuning a print never round-trips through
+ * the conversation. The model seeds the starting settings simply by calling
+ * the tool with them: the host announces the call's arguments (`ontoolinput`)
+ * before any result exists, and the controls initialize from that.
+ *
+ * Deliberately NO payment surface: "Continue on womp.com" calls
+ * `prepare_print` (creates a free project) and opens the returned URL via
+ * `ui/open-link` — address, shipping and payment all run in the browser flow
+ * with every gate the web app already has.
+ *
+ * Static mode: a result that already carries `printUrl` (the model called
+ * prepare_print directly) renders as a receipt — no controls, the button just
+ * opens the link.
  */
 
 /** One priced variant, as swan-backend's QUOTE_ROW_SCHEMA emits it. */
@@ -22,87 +32,221 @@ interface QuoteRow {
 interface PrintQuoteResult {
   material?: string;
   quantity?: number;
+  longestSideCm?: number;
   dimensionsCm?: { width: number; height: number; depth: number };
   solid?: QuoteRow;
   hollow?: QuoteRow;
   callerIsPro?: boolean;
+  /** Which mesh was quoted — what re-quotes and prepare_print are keyed on. */
+  source?: { generationId?: number; glbUrl?: string };
+  /** Present on estimate results only — populates the material picker. */
+  materials?: { id: string }[];
   projectId?: number;
-  /** Present on prepare_print only — what the CTA opens. */
+  /** Present on prepare_print results only. */
   printUrl?: string;
 }
 
 const usd = (n: number) => `$${n.toFixed(2)}`;
 
-const setStatus = (text: string) => {
-  $("status").textContent = text;
-};
+const materialSelect = $("material") as HTMLSelectElement;
+const longestInput = $("longest") as HTMLInputElement;
+const quantityInput = $("quantity") as HTMLInputElement;
+const orderBtn = $("order") as HTMLButtonElement;
 
-function render(data: PrintQuoteResult) {
-  $("card").classList.remove("measuring");
+/** The mesh being quoted, and whether the card is a receipt or a configurator. */
+let source: { generationId?: number; glbUrl?: string } | undefined;
+let staticPrintUrl: string | undefined;
+/** Monotonic guard: a slow older quote must never overwrite a newer one. */
+let quoteSeq = 0;
+let debounceTimer: number | undefined;
 
-  if (data.material) {
-    $("material").textContent = `${data.quantity && data.quantity > 1 ? `${data.quantity}x ` : ""}${data.material}`;
-  }
+function setStatus(text: string, isError = false) {
+  const el = $("status");
+  el.textContent = text;
+  el.classList.toggle("error", isError);
+}
+
+function renderQuote(data: PrintQuoteResult) {
+  $("card").classList.remove("quoting");
 
   const d = data.dimensionsCm;
-  if (d) {
-    $("size").textContent = `${d.width.toFixed(1)} x ${d.height.toFixed(1)} x ${d.depth.toFixed(1)} cm`;
-  }
+  if (d) $("size").textContent = `${d.width.toFixed(1)} x ${d.height.toFixed(1)} x ${d.depth.toFixed(1)} cm`;
 
   const solid = data.solid;
-  if (solid) {
-    const price = $("price");
-    price.textContent = "";
-    const amount = document.createElement("span");
-    amount.className = "amount";
-    amount.textContent = usd(solid.unitPrice);
-    price.append(amount);
-    if (solid.discount > 0) {
-      const was = document.createElement("span");
-      was.className = "was";
-      was.textContent = usd(solid.salePrice);
-      price.append(was);
-    }
-    const per = document.createElement("span");
-    per.className = "per";
-    per.textContent = "per unit";
-    price.append(per);
-
-    const rows = $("rows");
-    rows.textContent = "";
-    if (data.hollow) {
-      const hollow = document.createElement("div");
-      hollow.textContent = `hollow (Pro): ${usd(data.hollow.unitPrice)} per unit${data.callerIsPro ? "" : " — requires a subscription"}`;
-      rows.append(hollow);
+  if (!solid) return;
+
+  const price = $("price");
+  price.textContent = "";
+  const amount = document.createElement("span");
+  amount.className = "amount";
+  amount.textContent = usd(solid.unitPrice);
+  price.append(amount);
+  if (solid.discount > 0) {
+    const was = document.createElement("span");
+    was.className = "was";
+    was.textContent = usd(solid.salePrice);
+    price.append(was);
+  }
+  const per = document.createElement("span");
+  per.className = "per";
+  per.textContent = data.quantity && data.quantity > 1 ? `per unit x ${data.quantity}` : "per unit";
+  price.append(per);
+
+  const rows = $("rows");
+  rows.textContent = "";
+  if (data.hollow) {
+    const hollow = document.createElement("div");
+    hollow.textContent = `hollow (Pro): ${usd(data.hollow.unitPrice)} per unit${data.callerIsPro ? "" : " — requires a subscription"}`;
+    rows.append(hollow);
+  }
+  const days = document.createElement("div");
+  days.textContent = `~${solid.productionDays} production day${solid.productionDays === 1 ? "" : "s"}`;
+  rows.append(days);
+
+  $("note").hidden = false;
+  orderBtn.hidden = false;
+  orderBtn.disabled = false;
+  setStatus("");
+}
+
+/** Fill the controls from settings without firing their change handlers. */
+function syncControls(data: PrintQuoteResult) {
+  if (data.material) {
+    // The picker may not exist yet on the very first input announcement; the
+    // result's materials list (below) is what populates it.
+    if (![...materialSelect.options].some((o) => o.value === data.material)) {
+      const opt = document.createElement("option");
+      opt.value = data.material;
+      opt.textContent = data.material;
+      materialSelect.append(opt);
     }
-    const days = document.createElement("div");
-    days.textContent = `~${solid.productionDays} production day${solid.productionDays === 1 ? "" : "s"}`;
-    rows.append(days);
+    materialSelect.value = data.material;
+  }
+  if (typeof data.longestSideCm === "number") longestInput.value = String(Math.round(data.longestSideCm * 10) / 10);
+  if (typeof data.quantity === "number") quantityInput.value = String(data.quantity);
+}
+
+function populateMaterials(materials: { id: string }[], selected?: string) {
+  materialSelect.textContent = "";
+  for (const m of materials) {
+    const opt = document.createElement("option");
+    opt.value = m.id;
+    opt.textContent = m.id;
+    materialSelect.append(opt);
+  }
+  if (selected) materialSelect.value = selected;
+}
 
-    $("note").hidden = false;
-    setStatus("");
+function currentSettings() {
+  return {
+    ...(source?.generationId ? { generationId: source.generationId } : {}),
+    ...(source?.glbUrl ? { glbUrl: source.glbUrl } : {}),
+    material: materialSelect.value,
+    quantity: Math.min(100, Math.max(1, Math.round(Number(quantityInput.value) || 1))),
+    longestSideCm: Math.min(60, Math.max(2, Number(longestInput.value) || 10)),
+  };
+}
+
+async function requote() {
+  if (!source || staticPrintUrl) return;
+  const seq = ++quoteSeq;
+  $("card").classList.add("quoting");
+  orderBtn.disabled = true;
+  setStatus("Updating price…");
+  try {
+    const res = await callTool(card.app, "estimate_print", currentSettings());
+    if (seq !== quoteSeq) return; // superseded by a newer knob turn
+    if (res.isError) {
+      const text = (res.content as any[])?.find((c) => c.type === "text")?.text || "Could not update the quote.";
+      $("card").classList.remove("quoting");
+      orderBtn.disabled = false;
+      setStatus(String(text), true);
+      return;
+    }
+    renderQuote((res.structuredContent || {}) as PrintQuoteResult);
+  } catch {
+    if (seq !== quoteSeq) return;
+    $("card").classList.remove("quoting");
+    orderBtn.disabled = false;
+    setStatus("Could not update the quote — check the connection and try again.", true);
   }
+}
 
-  const order = $("order");
-  order.hidden = !data.printUrl;
+function scheduleRequote() {
+  // Same idea as the web print panel's debounce: a slider being dragged must
+  // not fire an engine estimate per pixel.
+  if (debounceTimer !== undefined) clearTimeout(debounceTimer);
+  debounceTimer = window.setTimeout(() => void requote(), 600);
 }
 
+materialSelect.addEventListener("change", scheduleRequote);
+longestInput.addEventListener("change", scheduleRequote);
+quantityInput.addEventListener("change", scheduleRequote);
+
 const card = createCard("Womp print", {
   onTimeout: () => setStatus("Still measuring — ask me to check on it."),
+  onInput: (args) => {
+    // Seed the controls from what the model asked for, before any result: the
+    // user sees "resin-clear, 15cm" selected while the first quote computes.
+    syncControls({
+      material: typeof args.material === "string" ? args.material : undefined,
+      longestSideCm: typeof args.longestSideCm === "number" ? args.longestSideCm : undefined,
+      quantity: typeof args.quantity === "number" ? args.quantity : undefined,
+    });
+  },
   onResult: (raw: GenerationResult) => {
     const data = raw as PrintQuoteResult & GenerationResult;
     // ontoolinput sends {status: "running"} while the engine measures; a print
     // result itself never carries `status`.
     if (data.status === "running") {
-      $("card").classList.add("measuring");
+      $("card").classList.add("quoting");
       setStatus("Measuring mesh…");
       return;
     }
-    render(data);
+    if (data.source) source = data.source;
+    if (data.printUrl) {
+      // A model-initiated prepare_print: render a receipt, not a configurator.
+      staticPrintUrl = data.printUrl;
+      $("controls").hidden = true;
+      $("order-label").textContent = "Complete order on womp.com";
+    } else if (data.materials?.length) {
+      populateMaterials(data.materials, data.material);
+      $("controls").hidden = false;
+    }
+    syncControls(data);
+    renderQuote(data);
   },
 });
 
-$("order").addEventListener("click", () => {
-  const data = card.current() as PrintQuoteResult | undefined;
-  if (data?.printUrl) openLink(card.app, data.printUrl);
+orderBtn.addEventListener("click", async () => {
+  if (staticPrintUrl) {
+    void openLink(card.app, staticPrintUrl);
+    return;
+  }
+  if (!source) return;
+  orderBtn.disabled = true;
+  $("order-label").textContent = "Setting up project…";
+  setStatus("");
+  try {
+    const res = await callTool(card.app, "prepare_print", currentSettings());
+    const data = (res.structuredContent || {}) as PrintQuoteResult;
+    if (res.isError || !data.printUrl) {
+      const text = (res.content as any[])?.find((c) => c.type === "text")?.text || "Could not set up the print.";
+      setStatus(String(text), true);
+      return;
+    }
+    // From here on the card is a receipt for the project that now exists —
+    // silently re-quoting a project the user is already checking out would
+    // desynchronize the two.
+    staticPrintUrl = data.printUrl;
+    $("controls").hidden = true;
+    renderQuote(data);
+    $("order-label").textContent = "Complete order on womp.com";
+    void openLink(card.app, data.printUrl);
+  } catch {
+    setStatus("Could not set up the print — try again.", true);
+  } finally {
+    orderBtn.disabled = false;
+    if (!staticPrintUrl) $("order-label").textContent = "Continue on womp.com";
+  }
 });

package/src/shared/bridge.ts

@@ -69,6 +69,13 @@ export interface CardHooks {
   onResult: (data: GenerationResult) => void;
   /** Called when a poll gives up. */
   onTimeout?: () => void;
+  /**
+   * Called with the tool call's ARGUMENTS when the host announces the input
+   * (before any result exists). This is how a configurator card starts on the
+   * settings the model was asked for — "print it in resin-clear at 15cm" seeds
+   * the controls before the first quote lands.
+   */
+  onInput?: (args: Record<string, unknown>) => void;
 }
 
 export interface Card {
@@ -148,7 +155,10 @@ export function createCard(name: string, hooks: CardHooks): Card {
   };
 
   // Before connect(), always.
-  app.ontoolinput = () => hooks.onResult({ status: "running" });
+  app.ontoolinput = (params) => {
+    hooks.onInput?.(((params as any)?.arguments as Record<string, unknown>) || {});
+    hooks.onResult({ status: "running" });
+  };
   app.ontoolresult = (params) => handle(params?.structuredContent as GenerationResult);
   app.onhostcontextchanged = (ctx) => {
     if (ctx?.theme) applyDocumentTheme(ctx.theme);
@@ -181,6 +191,17 @@ export function openLink(app: App, url: string) {
   return app.openLink({ url });
 }
 
+/**
+ * Call a server tool through the host. Only works for tools that declare
+ * `visibility: ["model", "app"]` — the host refuses everything else, which is
+ * the security boundary keeping credit-spending tools out of widget reach.
+ * Returns the raw result; callers check `isError` themselves because an error
+ * here is normal UI state (bad material, mesh gone), not an exception.
+ */
+export async function callTool(app: App, name: string, args: Record<string, unknown>) {
+  return app.request({ method: "tools/call", params: { name, arguments: args } }, CallToolResultSchema);
+}
+
 /** Toggle fullscreen, trusting the host's answer over our request. */
 export function toggleFullscreen(app: App) {
   const isFull = document.documentElement.dataset.displayMode === "fullscreen";