@womp/mcp-ui 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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",
+    "build:ui": "yarn build:ui:image && yarn build:ui:mesh && yarn build:ui:print",
     "build:bake": "node scripts/bake-html.mjs",
     "dev": "vite",
     "dev:host": "vite",
@@ -24,7 +24,8 @@
     "clean": "rm -rf dist",
     "prepublishOnly": "yarn clean && yarn build",
     "build:ui:image": "CARD=image vite build",
-    "build:ui:mesh": "CARD=mesh vite build"
+    "build:ui:mesh": "CARD=mesh vite build",
+    "build:ui:print": "CARD=print vite build"
   },
   "devDependencies": {
     "@modelcontextprotocol/ext-apps": "^1.7.5",

package/src/print/index.html

@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Womp 3D print</title>
+    <style>
+      /* Same var()-with-fallback discipline as the other cards: host style
+         variables arrive over the bridge after the handshake, not as CSS
+         custom properties, so the card must look right without them. */
+      :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: 360px;
+        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;
+      }
+      .title {
+        font-size: var(--font-text-sm-size, 13px);
+        font-weight: 600;
+      }
+      .size {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        white-space: nowrap;
+      }
+      .size:empty { display: none; }
+
+      /* The configurator: three labelled controls in a row. Hidden entirely in
+         static mode (a prepare_print result rendered by a model call). */
+      .controls {
+        margin-top: 10px;
+        display: grid;
+        grid-template-columns: 1fr 76px 64px;
+        gap: 8px;
+      }
+      .controls[hidden] { display: none; }
+      .field {
+        display: grid;
+        gap: 3px;
+        font-size: 10px;
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+      .field select,
+      .field input {
+        font: inherit;
+        font-size: var(--font-text-xs-size, 12px);
+        color: var(--color-text-primary, #e8e8e8);
+        background: var(--color-background-tertiary, #2a2a2e);
+        border: 1px solid var(--color-border-primary, rgba(255, 255, 255, 0.1));
+        border-radius: var(--border-radius-md, 8px);
+        padding: 6px 8px;
+        min-width: 0;
+        box-sizing: border-box;
+      }
+      .field select:focus-visible,
+      .field input:focus-visible {
+        outline: 2px solid var(--color-ring-primary, #7aa2ff);
+        outline-offset: 1px;
+      }
+
+      .price {
+        margin-top: 12px;
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        transition: opacity 120ms ease;
+      }
+      .price:empty { display: none; }
+      .amount {
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+      }
+      .was {
+        font-size: var(--font-text-xs-size, 12px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        text-decoration: line-through;
+      }
+      .per {
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+      }
+
+      .rows {
+        margin-top: 6px;
+        font-size: var(--font-text-xs-size, 11px);
+        color: var(--color-text-secondary, rgba(232, 232, 232, 0.6));
+        display: grid;
+        gap: 2px;
+        transition: opacity 120ms ease;
+      }
+      .rows:empty { display: none; }
+
+      /* Re-quoting: dim the numbers that are about to change, keep the layout. */
+      .quoting .price,
+      .quoting .rows { opacity: 0.35; }
+
+      .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:not(:disabled) { filter: brightness(1.1); }
+      .cta:focus-visible { outline: 2px solid var(--color-ring-primary, #7aa2ff); outline-offset: 1px; }
+      .cta[hidden] { display: none; }
+      .cta:disabled { opacity: 0.55; cursor: default; }
+      .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; }
+      .status.error { color: var(--color-text-danger, #ff8888); }
+    </style>
+  </head>
+  <body>
+    <div class="card" id="card">
+      <div class="head">
+        <div class="title">3D print</div>
+        <div class="size" id="size"></div>
+      </div>
+
+      <div class="controls" id="controls" hidden>
+        <label class="field">
+          material
+          <select id="material"></select>
+        </label>
+        <label class="field">
+          size (cm)
+          <input id="longest" type="number" min="2" max="60" step="0.5" />
+        </label>
+        <label class="field">
+          qty
+          <input id="quantity" type="number" min="1" max="100" step="1" />
+        </label>
+      </div>
+
+      <div class="price" id="price"></div>
+      <div class="rows" id="rows"></div>
+
+      <button class="cta" id="order" 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>
+        <span id="order-label">Continue on womp.com</span>
+      </button>
+      <div class="note" id="note" hidden>
+        Shipping is added at checkout; the final price is confirmed before printing.
+      </div>
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/src/print/main.ts

@@ -0,0 +1,252 @@
+import { $, callTool, createCard, openLink, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The print card — a live configurator, and the way out to checkout.
+ *
+ * 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. */
+interface QuoteRow {
+  salePrice: number;
+  discount: number;
+  unitPrice: number;
+  productionDays: number;
+}
+
+/** structuredContent of estimate_print / prepare_print (api/mcp.ts §13). */
+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 results only. */
+  printUrl?: string;
+}
+
+const usd = (n: number) => `$${n.toFixed(2)}`;
+
+const materialSelect = $("material") as HTMLSelectElement;
+const longestInput = $("longest") as HTMLInputElement;
+const quantityInput = $("quantity") as HTMLInputElement;
+const orderBtn = $("order") as HTMLButtonElement;
+
+/** 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;
+
+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`;
+
+  const solid = data.solid;
+  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);
+    }
+    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;
+}
+
+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);
+  }
+}
+
+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("quoting");
+      setStatus("Measuring mesh…");
+      return;
+    }
+    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);
+  },
+});
+
+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";