@womp/mcp-ui 0.1.14 → 0.1.16

package/src/openai-quote/index.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Quote</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: 12px;
+        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;
+      }
+      /* A picture of the design from its colours alone: the shell, and the shutter button on it. */
+      .thumb {
+        position: relative;
+        flex: none;
+        width: 56px;
+        height: 56px;
+        border-radius: 12px;
+        border: 1px solid rgba(0, 0, 0, 0.14);
+        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);
+      }
+      .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));
+      }
+
+      .lines {
+        display: grid;
+        gap: 6px;
+        margin: 0;
+        padding-top: 12px;
+        border-top: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1));
+        font-size: var(--font-text-sm-size, 13px);
+      }
+      .lines > div {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+      }
+      .lines dt { color: var(--color-text-secondary, rgba(27, 27, 26, 0.62)); }
+      .lines dd { margin: 0; font-variant-numeric: tabular-nums; }
+      .lines .total {
+        padding-top: 6px;
+        border-top: 1px solid var(--color-border-primary, rgba(0, 0, 0, 0.1));
+        font-weight: 600;
+      }
+      .lines .total dt { color: inherit; }
+
+      .note {
+        margin: 0;
+        font-size: var(--font-text-xs-size, 12px);
+        color: var(--color-text-secondary, rgba(27, 27, 26, 0.62));
+      }
+
+      .foot {
+        display: flex;
+        gap: 8px;
+      }
+      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);
+      }
+      button.action.primary {
+        flex: 1;
+        border-color: transparent;
+        background: var(--color-text-primary, #1b1b1a);
+        color: var(--color-background-primary, #ffffff);
+      }
+      button.action:disabled { opacity: 0.5; cursor: default; }
+
+      .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">
+        <div class="thumb" id="thumb" aria-hidden="true"><span class="cap" id="cap"></span></div>
+        <div class="titles">
+          <h2 id="title"></h2>
+          <p id="summary"></p>
+        </div>
+      </div>
+
+      <dl class="lines" id="lines" hidden>
+        <div><dt id="item-label"></dt><dd id="item-amount"></dd></div>
+        <div><dt id="shipping-label"></dt><dd id="shipping-amount"></dd></div>
+        <div class="total"><dt id="total-label">Total</dt><dd id="total"></dd></div>
+      </dl>
+      <p class="note" id="note" hidden></p>
+
+      <div class="foot" id="foot" hidden>
+        <button class="action" id="edit" type="button">Edit design</button>
+        <button class="action primary" id="checkout" type="button"></button>
+      </div>
+
+      <div class="status" id="status">Connecting&hellip;</div>
+    </div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/src/openai-quote/main.ts

@@ -0,0 +1,131 @@
+import { $, createCard, openExternal, pushModelContext, sendChatMessage, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The quote card: what `checkout_camera` answers on the OpenAI MCP (swan-backend
+ * docs/OPENAI_MCP.md). The camera's price, shipping to the user's country, the
+ * total and an arrival date, for the design as it was when the user asked.
+ *
+ * It never touches money or an address. Checkout opens the quote's checkout
+ * link on the web, where the user pays; every browser that opens it gets its
+ * own copy of this design in its cart. Edit design asks the chat to reopen the
+ * designer, as if the user had typed it.
+ */
+
+interface Quote {
+  designId: string;
+  rev: number;
+  title: string;
+  summary: string;
+  /** Each part's colours as CSS, first to last. */
+  swatches: { shell: string[]; button: string[] };
+  currency: string;
+  item: { label: string; amount: number };
+  shipping: { country: string; countryName: string; amount: number } | null;
+  total: number;
+  /** YYYY-MM-DD */
+  arrivesBy: string | null;
+  checkoutUrl: string;
+  expiresAt: string;
+}
+
+let quote: Quote | undefined;
+
+const setStatus = (text: string) => {
+  $("status").textContent = text;
+};
+
+/** One colour fills; two or three run top to bottom, as on the shell. */
+const paint = (colors: string[]) => (colors.length > 1 ? `linear-gradient(180deg, ${colors.join(", ")})` : colors[0] || "transparent");
+
+/** "Nov 2", or "Nov 2, 2027" when it isn't this year. A date-only string is the user's calendar day, not UTC midnight. */
+function day(iso: string) {
+  const [y, m, d] = iso.split("-").map(Number);
+  const date = new Date(y, m - 1, d);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    ...(y !== new Date().getFullYear() ? { year: "numeric" } : {}),
+  });
+}
+
+/** "womp.com" from the link, so the button names where it goes on every environment. */
+function host(url: string) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return "the web";
+  }
+}
+
+const expired = (q: Quote) => Date.parse(q.expiresAt) <= Date.now();
+
+function render(q: Quote) {
+  const money = (amount: number) => new Intl.NumberFormat("en-US", { style: "currency", currency: q.currency }).format(amount);
+
+  $("thumb").style.background = paint(q.swatches.shell);
+  $("cap").style.background = paint(q.swatches.button);
+  $("title").textContent = q.title;
+  $("summary").textContent = q.summary;
+
+  $("item-label").textContent = q.item.label;
+  $("item-amount").textContent = money(q.item.amount);
+  if (q.shipping) {
+    $("shipping-label").textContent = `Shipping to ${q.shipping.countryName}`;
+    $("shipping-amount").textContent = money(q.shipping.amount);
+    $("total-label").textContent = "Total";
+  } else {
+    $("shipping-label").textContent = "Shipping";
+    $("shipping-amount").textContent = "Added at checkout";
+    $("total-label").textContent = "Total before shipping";
+  }
+  $("total").textContent = money(q.total);
+  $("lines").hidden = false;
+
+  const made = "Printed and assembled by Womp";
+  $("note").textContent = q.arrivesBy ? `Arrives by ${day(q.arrivesBy)} · ${made}` : made;
+  $("note").hidden = false;
+
+  const checkout = $("checkout") as HTMLButtonElement;
+  checkout.textContent = `Checkout on ${host(q.checkoutUrl)} ↗`;
+  checkout.disabled = expired(q);
+  $("foot").hidden = false;
+  setStatus(expired(q) ? "This quote has expired. Ask in the chat for a new one." : "");
+}
+
+const card = createCard("Quote", {
+  onInput: () => setStatus("Getting your quote…"),
+  onResult: (raw: GenerationResult) => {
+    const data = raw as unknown as Partial<Quote>;
+    // The bridge also calls this with a bare { status: "running" } placeholder.
+    if (typeof data.checkoutUrl !== "string" || typeof data.designId !== "string") return;
+    quote = data as Quote;
+    render(quote);
+  },
+});
+
+$("checkout").addEventListener("click", async () => {
+  if (!quote) return;
+  if (expired(quote)) {
+    render(quote);
+    return;
+  }
+  try {
+    await openExternal(card.app, quote.checkoutUrl);
+    setStatus("Checkout is open in your browser. Your design and total carry over.");
+    void pushModelContext(
+      card.app,
+      `The user opened checkout for camera design ${quote.designId}, revision ${quote.rev}. They enter their address and pay on that page.`,
+    );
+  } catch {
+    setStatus("Couldn't open checkout here. Ask in the chat for the checkout link.");
+  }
+});
+
+$("edit").addEventListener("click", async () => {
+  try {
+    const sent = await sendChatMessage(card.app, "Edit the design");
+    if (!sent) setStatus("Ask in the chat to change the design.");
+  } catch {
+    setStatus("Ask in the chat to change the design.");
+  }
+});

package/src/print/main.ts

@@ -28,9 +28,9 @@ import { expandHexInput, nearestPantone, normalizeHex, pantoneChips } from "./pa
  *
  * Deliberately NO payment surface. "Add to cart" calls the app-callable
  * `add_to_cart` (a free project + a real cart item) and then becomes "Checkout
- * on womp.com" — a `ui/open-link` to /pay/<ids>, where address, shipping, promo
- * codes and payment run in the one existing cart UI. Hollow never orders from
- * here at all: escape holes are placed in the editor, so its button is
+ * on womp.com" — a `ui/open-link` to /checkout/<ids>, where address, shipping,
+ * promo codes and payment run in the one existing cart UI. Hollow never orders
+ * from here at all: escape holes are placed in the editor, so its button is
  * "Continue on womp.com" via `prepare_print`.
  *
  * Colour: the panel snaps a pick to the nearest Pantone coated shade and sends

package/src/shared/bridge.ts

@@ -232,3 +232,44 @@ export function toggleFullscreen(app: App) {
     if (res?.mode) document.documentElement.dataset.displayMode = res.mode;
   });
 }
+
+/** What ChatGPT's own `window.openai` adds for things MCP Apps has no message for. */
+interface OpenAiBridge {
+  openExternal?: (args: { href: string; redirectUrl?: false }) => unknown;
+  sendFollowUpMessage?: (args: { prompt: string }) => unknown;
+}
+const openAiBridge = () => (window as Window & { openai?: OpenAiBridge }).openai;
+
+/**
+ * Open a page outside the chat, such as a checkout. ChatGPT opens a URL on one
+ * of the card's declared redirect domains (`openai/widgetCSP.redirect_domains`)
+ * without making the user confirm the link, but only through its own
+ * `openExternal`; every other host gets the standard `ui/open-link`.
+ * `redirectUrl: false` stops ChatGPT adding a query parameter of its own.
+ */
+export async function openExternal(app: App, url: string) {
+  const bridge = openAiBridge();
+  if (bridge?.openExternal) {
+    await bridge.openExternal({ href: url, redirectUrl: false });
+    return;
+  }
+  await app.openLink({ url });
+}
+
+/**
+ * Post a message in the chat as the user, for a button that stands for
+ * something they would otherwise type ("Order it"): the model answers it like
+ * any other turn. False when the host takes no messages from a card.
+ */
+export async function sendChatMessage(app: App, text: string): Promise<boolean> {
+  if ((app.getHostCapabilities() as { message?: unknown } | undefined)?.message) {
+    const res = await app.sendMessage({ role: "user", content: [{ type: "text", text }] });
+    return !res.isError;
+  }
+  const bridge = openAiBridge();
+  if (bridge?.sendFollowUpMessage) {
+    await bridge.sendFollowUpMessage({ prompt: text });
+    return true;
+  }
+  return false;
+}