@womp/mcp-ui 0.1.4 → 0.1.6

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>

package/src/order/main.ts

@@ -0,0 +1,110 @@
+import { $, createCard, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The order-status card — renders get_print_order (one order) and
+ * list_print_orders ({orders}) with the orders page's own status wording,
+ * colored by band: waiting / moving / done / stopped. A pending diff charge
+ * renders as the amber action strip so a blocked order explains itself.
+ * Read-only: no tool calls, no links out beyond what the model narrates.
+ */
+
+interface OrderSummary {
+  orderId: number;
+  status: string;
+  totalCost: number;
+  discount: number;
+  items: { title: string; materialName: string; quantity: number }[];
+  tracking: { carrier: string; trackingNumber: string }[];
+  actionRequired?: { type: string; amount: number };
+}
+
+interface OrderPayload {
+  orders?: OrderSummary[];
+  orderId?: number;
+}
+
+const usd = (n: number) => `$${n.toFixed(2)}`;
+
+/** The orders page's label set, mapped to a color band. */
+function chipClass(status: string): string {
+  const s = status.toLowerCase();
+  if (s.includes("pending") || s.includes("review") || s.includes("action")) return "wait";
+  if (s.includes("printing") || s.includes("processing") || s.includes("way") || s.includes("returning"))
+    return "move";
+  if (s.includes("delivered")) return "done";
+  if (s.includes("canceled")) return "stop";
+  return "";
+}
+
+function orderBlock(order: OrderSummary): HTMLElement {
+  const block = document.createElement("div");
+  block.className = "order";
+
+  const head = document.createElement("div");
+  head.className = "order-head";
+  const id = document.createElement("div");
+  id.className = "order-id";
+  id.textContent = `Order #${order.orderId}`;
+  const chip = document.createElement("span");
+  chip.className = `chip ${chipClass(order.status)}`.trim();
+  chip.textContent = order.status;
+  head.append(id, chip);
+  block.append(head);
+
+  const lines = document.createElement("div");
+  lines.className = "lines";
+  (order.items || []).forEach((item) => {
+    const line = document.createElement("div");
+    line.textContent = `${item.quantity}x ${item.title} (${item.materialName})`;
+    lines.append(line);
+  });
+  block.append(lines);
+
+  const total = document.createElement("div");
+  total.className = "total-row";
+  const label = document.createElement("span");
+  label.textContent = order.discount > 0 ? `Total (after ${usd(order.discount)} discount)` : "Total";
+  const value = document.createElement("b");
+  value.textContent = usd(order.totalCost);
+  total.append(label, value);
+  block.append(total);
+
+  (order.tracking || []).forEach((t) => {
+    const track = document.createElement("div");
+    track.className = "tracking";
+    track.textContent = `Tracking: ${t.carrier ? `${t.carrier} ` : ""}${t.trackingNumber}`;
+    block.append(track);
+  });
+
+  if (order.actionRequired) {
+    const action = document.createElement("div");
+    action.className = "action";
+    action.textContent =
+      `Action required: the measured piece costs ${usd(order.actionRequired.amount)} more than quoted. ` +
+      `Approve the adjustment on womp.com under Profile -> Orders to unblock production.`;
+    block.append(action);
+  }
+
+  return block;
+}
+
+function render(data: OrderPayload) {
+  // list_print_orders sends {orders}; get_print_order sends one order flat.
+  const orders: OrderSummary[] = data.orders ?? (data.orderId ? [data as unknown as OrderSummary] : []);
+  const list = $("orders");
+  list.textContent = "";
+  orders.forEach((order) => list.append(orderBlock(order)));
+  $("empty").hidden = orders.length > 0;
+  $("status").textContent = "";
+}
+
+createCard("Womp orders", {
+  onResult: (raw: GenerationResult) => {
+    const data = raw as OrderPayload & GenerationResult;
+    if (data.status === "running") {
+      $("status").textContent = "Loading…";
+      return;
+    }
+    render(data);
+  },
+});

package/src/print/index.html

@@ -150,7 +150,21 @@
       }
       .status:empty { display: none; }
       .status.error { color: var(--color-text-danger, #ff8888); }
-    </style>
+      .material-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  /* Small, and it disappears entirely when the catalog has no swatch for the
+     selection — an empty box next to a picker reads as a broken image. */
+  .swatch {
+    width: 28px;
+    height: 20px;
+    object-fit: cover;
+    border-radius: 4px;
+    flex: none;
+  }
+</style>
   </head>
   <body>
     <div class="card" id="card">
@@ -162,7 +176,10 @@
       <div class="controls" id="controls" hidden>
         <label class="field">
           material
-          <select id="material"></select>
+          <span class="material-row">
+            <select id="material"></select>
+            <img id="swatch" class="swatch" alt="" hidden />
+          </span>
         </label>
         <label class="field">
           size (cm)
@@ -181,7 +198,7 @@
         <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/src/print/main.ts

@@ -10,10 +10,12 @@ import { $, callTool, createCard, openLink, type GenerationResult } from "../sha
  * 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.
+ * Deliberately NO payment surface: "Add to cart" calls the app-callable
+ * `add_to_cart` (creates a free project + a real cart item), and the button
+ * then becomes "Checkout on womp.com" — a `ui/open-link` to the cart checkout
+ * at /pay/<ids>, where address, shipping, promo codes and payment all run in
+ * the one existing cart UI. Turning any knob after an add resets the button
+ * to "Add to cart" so the checkout link always matches the shown settings.
  *
  * Static mode: a result that already carries `printUrl` (the model called
  * prepare_print directly) renders as a receipt — no controls, the button just
@@ -39,16 +41,34 @@ interface PrintQuoteResult {
   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 }[];
+  /**
+   * Present on estimate results only — populates the material picker.
+   *
+   * `label` and `swatchUrl` come from the backend material catalog
+   * (swan-backend docs/PRINT_MATERIALS.md). Before it existed this was a list
+   * of pricing ids, so the picker read "resin-clear-glossy" where the print
+   * flow says "Clear". Both stay optional: an id with no catalog entry yet
+   * still has to appear.
+   */
+  materials?: PrintMaterialOption[];
   projectId?: number;
   /** Present on prepare_print results only. */
   printUrl?: string;
 }
 
+interface PrintMaterialOption {
+  id: string;
+  label?: string;
+  group?: "standard" | "enterprise";
+  swatchUrl?: string;
+  available?: boolean;
+  colorRequired?: boolean;
+}
+
 const usd = (n: number) => `$${n.toFixed(2)}`;
 
 const materialSelect = $("material") as HTMLSelectElement;
+const swatchImg = $("swatch") as HTMLImageElement;
 const longestInput = $("longest") as HTMLInputElement;
 const quantityInput = $("quantity") as HTMLInputElement;
 const orderBtn = $("order") as HTMLButtonElement;
@@ -56,6 +76,8 @@ 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;
+/** Set once the shown settings are in the cart; cleared by any knob turn. */
+let cartCheckoutUrl = "";
 /** Monotonic guard: a slow older quote must never overwrite a newer one. */
 let quoteSeq = 0;
 let debounceTimer: number | undefined;
@@ -121,20 +143,45 @@ function syncControls(data: PrintQuoteResult) {
       materialSelect.append(opt);
     }
     materialSelect.value = data.material;
+    showSwatch();
   }
   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) {
+/** Swatches by material id, so the preview can follow the selection. */
+let swatches: Record<string, string> = {};
+
+function populateMaterials(materials: PrintMaterialOption[], 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);
+  swatches = {};
+  // Grouped the way the print flow groups them. An Enterprise material this
+  // account cannot order is shown DISABLED rather than dropped: the reader can
+  // see it exists, which is the same thing the web panel does.
+  for (const group of ["standard", "enterprise"] as const) {
+    const rows = materials.filter((m) => (m.group || "standard") === group);
+    if (!rows.length) continue;
+    const holder =
+      group === "enterprise" ? Object.assign(document.createElement("optgroup"), { label: "Enterprise" }) : null;
+    for (const m of rows) {
+      const opt = document.createElement("option");
+      opt.value = m.id;
+      opt.textContent = m.label || m.id;
+      if (m.available === false) opt.disabled = true;
+      (holder || materialSelect).append(opt);
+      if (m.swatchUrl) swatches[m.id] = m.swatchUrl;
+    }
+    if (holder) materialSelect.append(holder);
   }
   if (selected) materialSelect.value = selected;
+  showSwatch();
+}
+
+/** The selected material's preview image, when the catalog has one. */
+function showSwatch() {
+  const url = swatches[materialSelect.value];
+  swatchImg.src = url || "";
+  swatchImg.hidden = !url;
 }
 
 function currentSettings() {
@@ -176,10 +223,17 @@ 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);
+  // The settings changed: whatever was added to the cart no longer matches
+  // what the card shows, so the button goes back to adding.
+  cartCheckoutUrl = "";
+  $("order-label").textContent = "Add to cart";
   debounceTimer = window.setTimeout(() => void requote(), 600);
 }
 
-materialSelect.addEventListener("change", scheduleRequote);
+materialSelect.addEventListener("change", () => {
+  showSwatch();
+  scheduleRequote();
+});
 longestInput.addEventListener("change", scheduleRequote);
 quantityInput.addEventListener("change", scheduleRequote);
 
@@ -223,30 +277,33 @@ orderBtn.addEventListener("click", async () => {
     void openLink(card.app, staticPrintUrl);
     return;
   }
+  if (cartCheckoutUrl) {
+    void openLink(card.app, cartCheckoutUrl);
+    return;
+  }
   if (!source) return;
   orderBtn.disabled = true;
-  $("order-label").textContent = "Setting up project…";
+  $("order-label").textContent = "Adding to cart…";
   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.";
+    const res = await callTool(card.app, "add_to_cart", currentSettings());
+    const data = (res.structuredContent || {}) as { payUrl?: string; items?: unknown[]; subtotal?: number };
+    if (res.isError || !data.payUrl) {
+      const text = (res.content as any[])?.find((c) => c.type === "text")?.text || "Could not add to the cart.";
       setStatus(String(text), true);
+      $("order-label").textContent = "Add to cart";
       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);
+    cartCheckoutUrl = data.payUrl;
+    $("order-label").textContent = "Checkout on womp.com";
+    setStatus(
+      `Added — cart has ${data.items?.length ?? 1} item(s), subtotal $${(data.subtotal ?? 0).toFixed(2)}. ` +
+        `Shipping and promo codes apply at checkout.`,
+    );
   } catch {
-    setStatus("Could not set up the print — try again.", true);
+    setStatus("Could not add to the cart — try again.", true);
+    $("order-label").textContent = "Add to cart";
   } finally {
     orderBtn.disabled = false;
-    if (!staticPrintUrl) $("order-label").textContent = "Continue on womp.com";
   }
 });