@womp/mcp-ui 0.1.11 → 0.1.13

package/src/openai-camera/main.ts

@@ -0,0 +1,576 @@
+import { $, callTool, createCard, pushModelContext, toggleFullscreen } from "../shared/bridge";
+
+/**
+ * The camera card — the OpenAI MCP's first project (swan-backend
+ * docs/OPENAI_MCP.md). Brand-neutral: nothing here may say Womp.
+ *
+ * The 3D view is Carlos's hosted viewer (Kakapo on WebGPU) in a nested frame,
+ * pointed at the scene the server renders for the design's current revision.
+ * Two directions of change meet here:
+ *
+ *  - The user drags a slider in the viewer's Customize panel. The viewer only
+ *    answers `kakapo:getParams`, so the card asks every 1.5s, and a difference
+ *    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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+
+interface DesignOption {
+  name: string;
+  label: string;
+  value: number;
+  display: string;
+}
+
+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[]>;
+  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;
+
+/** 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;
+/** Last knob values read back from the viewer. */
+let viewerParams: Record<string, number> | undefined;
+let webgpu: boolean | undefined;
+let syncTimer: number | undefined;
+let syncing: Promise<void> | undefined;
+let readyTimer: number | undefined;
+let pollTimer: number | undefined;
+let lastActivity = Date.now();
+let statusTimer: number | undefined;
+/** Which colour of a part's gradient the swatches, picker and eyedropper set. */
+const activeStop: Record<Slot, number> = { shell: 0, button: 0 };
+
+function setStatus(text: string, clearAfterMs?: number) {
+  clearTimeout(statusTimer);
+  $("status").textContent = text;
+  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) => {
+    const data = raw as unknown as Partial<Design>;
+    // The bridge also calls this with a bare { status: "running" } placeholder.
+    if (typeof data.designId !== "string") return;
+    adopt(data as Design);
+  },
+});
+
+/** A design arrived from the tool call that rendered this card. */
+function adopt(next: Design) {
+  const isNewDesign = next.designId !== design?.designId;
+  design = next;
+  render();
+  if (isNewDesign) {
+    void loadViewer();
+    schedulePoll(2_500);
+  } else if (next.rev > loadedRev) {
+    void loadViewer();
+  }
+  if (next.mode === "checkout") openOrderForm();
+}
+
+// ---- the viewer -------------------------------------------------------------
+
+async function detectWebGPU(): Promise<boolean> {
+  const gpu = (navigator as Navigator & { gpu?: { requestAdapter(): Promise<unknown> } }).gpu;
+  if (!gpu) return false;
+  try {
+    return Boolean(await gpu.requestAdapter());
+  } catch {
+    return false;
+  }
+}
+
+async function loadViewer(note?: string) {
+  if (!design) return;
+  if (webgpu === undefined) {
+    setStatus("Checking 3D support…");
+    webgpu = await detectWebGPU();
+    report(webgpu ? "webgpu-available" : "webgpu-missing");
+  }
+  loadedRev = design.rev;
+  if (!webgpu) {
+    showFallback();
+    setStatus("");
+    return;
+  }
+  viewerReady = false;
+  viewerParams = undefined;
+  fallback.hidden = true;
+  viewer.hidden = false;
+  viewer.src = design.viewerUrl;
+  setStatus(note ?? "Loading the 3D viewer…");
+  clearTimeout(readyTimer);
+  readyTimer = window.setTimeout(() => {
+    if (viewerReady) return;
+    setStatus("The 3D viewer hasn't loaded — this app may not allow it here.");
+    report("viewer-timeout");
+  }, 25_000);
+}
+
+function showFallback() {
+  if (!design) return;
+  viewer.hidden = true;
+  fallback.hidden = false;
+  fallback.textContent = "";
+  const p = document.createElement("p");
+  p.textContent =
+    "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)],
+    ...design.options.map((o) => [o.label, o.display] as [string, string]),
+  ];
+  for (const [k, v] of rows) {
+    const dt = document.createElement("dt");
+    dt.textContent = k;
+    const dd = document.createElement("dd");
+    dd.textContent = v;
+    list.append(dt, dd);
+  }
+  fallback.append(p, list);
+}
+
+/** The viewer reports `scripts: [{ nodeId, name, params: { knob: value } }]`; knob names are unique across them. */
+function flatten(scripts: unknown): Record<string, number> {
+  const out: Record<string, number> = {};
+  if (!Array.isArray(scripts)) return out;
+  for (const script of scripts) {
+    const params = (script as { params?: Record<string, unknown> })?.params ?? {};
+    for (const [name, value] of Object.entries(params)) {
+      if (typeof value === "number" && Number.isFinite(value)) out[name] = value;
+    }
+  }
+  return out;
+}
+
+window.addEventListener("message", (event) => {
+  if (!design || event.source !== viewer.contentWindow || event.origin !== design.viewerOrigin) return;
+  const msg = event.data as { type?: string; scripts?: unknown };
+  if (msg?.type === "kakapo:ready") {
+    viewerReady = true;
+    clearTimeout(readyTimer);
+    viewerParams = flatten(msg.scripts);
+    setStatus("");
+    report("viewer-ready");
+  } else if (msg?.type === "kakapo:params") {
+    onViewerParams(flatten(msg.scripts));
+  } else if (msg?.type === "kakapo:print") {
+    // The viewer's own Print button is our Order.
+    onViewerParams(flatten(msg.scripts));
+    openOrderForm();
+  }
+});
+
+// The viewer has no change event, so read its knobs on an interval while visible.
+window.setInterval(() => {
+  if (!design || !viewerReady || document.visibilityState !== "visible") return;
+  viewer.contentWindow?.postMessage({ type: "kakapo:getParams" }, design.viewerOrigin);
+}, 1_500);
+
+function onViewerParams(params: Record<string, number>) {
+  if (!viewerParams) {
+    viewerParams = params;
+    return;
+  }
+  const before = viewerParams;
+  if (!Object.keys(params).some((k) => params[k] !== before[k])) return;
+  viewerParams = params;
+  lastActivity = Date.now();
+  setStatus("Saving…");
+  clearTimeout(syncTimer);
+  syncTimer = window.setTimeout(() => void flushSync(), 700);
+}
+
+// ---- saving -------------------------------------------------------------------
+
+/**
+ * Save the viewer's knobs (and a part's colours, if they changed). Serialised,
+ * so two quick changes cannot race each other's baseRev.
+ */
+async function flushSync(colors?: Partial<Record<Slot, string[]>>) {
+  clearTimeout(syncTimer);
+  syncTimer = undefined;
+  while (syncing) await syncing;
+  if (!design) return;
+  const baseRev = design.rev;
+  syncing = (async () => {
+    try {
+      const res = await callTool(app, "sync_camera_design", {
+        designId: design!.designId,
+        baseRev,
+        writer,
+        params: viewerParams ?? {},
+        ...(colors ? { colors } : {}),
+      });
+      const next = res.structuredContent as Design | undefined;
+      if (res.isError || !next) {
+        setStatus("Couldn't save that change.");
+        return;
+      }
+      design = next;
+      render();
+      if (next.rev === baseRev) {
+        setStatus("");
+        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.
+      const merged = next.rev > baseRev + 1;
+      if (merged || colors) void loadViewer(merged ? "Merged with a change from the chat…" : "Applying colour…");
+      else loadedRev = next.rev;
+      if (!merged && !colors) setStatus("Saved", 1_500);
+      void pushModelContext(app, contextLine(next));
+    } catch {
+      setStatus("Couldn't save that change.");
+    }
+  })();
+  try {
+    await syncing;
+  } finally {
+    syncing = undefined;
+  }
+}
+
+/** "coral", or "coral → violet gradient" */
+function paintText(paint: string[]) {
+  return paint.length > 1 ? `${paint.join(" → ")} gradient` : paint[0];
+}
+
+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)}; ` +
+  d.options.map((o) => `${o.label} ${o.display}`).join(", ") +
+  ".";
+
+// ---- picking up chat changes ----------------------------------------------------
+
+function schedulePoll(ms: number) {
+  clearTimeout(pollTimer);
+  pollTimer = window.setTimeout(poll, ms);
+}
+
+async function poll() {
+  const idle = Date.now() - lastActivity;
+  try {
+    if (design && document.visibilityState === "visible" && !syncing) {
+      const res = await callTool(app, "get_camera_design", { designId: design.designId });
+      const next = res.structuredContent as Design | undefined;
+      if (!res.isError && next && next.rev > design.rev) {
+        lastActivity = Date.now();
+        if (syncTimer !== undefined) {
+          // A slider move is waiting to be saved: save it first, so the reload
+          // below shows the chat's change AND the user's.
+          await flushSync();
+        } else {
+          design = next;
+          render();
+          if (next.rev > loadedRev) void loadViewer("Updated from the chat…");
+        }
+      }
+    }
+  } catch {
+    // A failed poll is not a broken card; try again on the next tick.
+  }
+  // Brisk while someone is working on it, lazy once they have moved on.
+  schedulePoll(idle < 120_000 ? 2_500 : idle < 600_000 ? 8_000 : 20_000);
+}
+
+// ---- controls -----------------------------------------------------------------
+
+/** A colour as CSS: a palette name's swatch, or the hex itself. */
+function cssColor(color: string) {
+  return design?.palette.find((p) => p.name === color)?.hex ?? color;
+}
+
+function render() {
+  if (!design) return;
+  for (const slot of SLOTS) {
+    const paint = design.colors[slot];
+    const gradient = paint.length > 1;
+    activeStop[slot] = Math.min(activeStop[slot], paint.length - 1);
+    const chosen = paint[activeStop[slot]];
+
+    $(`solid-${slot}`).setAttribute("aria-pressed", String(!gradient));
+    $(`gradient-${slot}`).setAttribute("aria-pressed", String(gradient));
+    renderStops(slot, paint);
+
+    const row = $(`sw-${slot}`);
+    row.textContent = "";
+    const entries = [...design.palette];
+    // A hex (from the model, the picker or the eyedropper) has no swatch of its own — show it first.
+    for (const color of [...new Set(paint)].reverse()) {
+      if (color.startsWith("#") && !entries.some((p) => p.name === color)) entries.unshift({ name: color, hex: color });
+    }
+    for (const p of entries) {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = p.name === "clear" ? "swatch clear" : "swatch";
+      b.style.background = p.hex;
+      b.title = p.name;
+      b.setAttribute("aria-label", `${slot} colour: ${p.name}`);
+      b.setAttribute("aria-pressed", String(chosen === p.name));
+      b.addEventListener("click", () => void pickColor(slot, p.name));
+      row.append(b);
+    }
+    ($(`pick-${slot}`) as HTMLInputElement).value = cssColor(chosen);
+    $(`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();
+}
+
+/** A gradient's colours on a track, first to last; picking one makes it the one the swatches set. */
+function renderStops(slot: Slot, paint: string[]) {
+  const box = $(`stops-${slot}`);
+  box.hidden = paint.length < 2;
+  box.textContent = "";
+  if (paint.length < 2) return;
+  const track = document.createElement("div");
+  track.className = "track";
+  track.style.background = `linear-gradient(90deg, ${paint.map(cssColor).join(", ")})`;
+  paint.forEach((color, i) => {
+    const stop = document.createElement("button");
+    stop.type = "button";
+    stop.className = "stop";
+    stop.style.left = `calc(11px + (100% - 22px) * ${i / (paint.length - 1)})`;
+    stop.style.background = cssColor(color);
+    stop.title = color;
+    stop.setAttribute("aria-label", `${slot} gradient colour ${i + 1} of ${paint.length}: ${color}`);
+    stop.setAttribute("aria-pressed", String(i === activeStop[slot]));
+    stop.addEventListener("click", () => {
+      activeStop[slot] = i;
+      render();
+    });
+    track.append(stop);
+  });
+  const add = iconButton("+", `${slot}: add a gradient colour`, paint.length >= MAX_COLORS, () => {
+    activeStop[slot] = paint.length;
+    void setPaint(slot, [...paint, partner(paint[paint.length - 1])]);
+  });
+  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);
+}
+
+function iconButton(text: string, label: string, disabled: boolean, onClick: () => void) {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = "icon-button";
+  b.textContent = text;
+  b.title = label;
+  b.setAttribute("aria-label", label);
+  b.disabled = disabled;
+  b.addEventListener("click", onClick);
+  return b;
+}
+
+/** A colour that reads well next to `color`, for a gradient's new end. */
+function partner(color: string) {
+  return color === "violet" ? "sky" : "violet";
+}
+
+/** The eyedropper's answer as #rrggbb; some Chromium versions say `rgb(r, g, b)`. */
+function toHex(color: string) {
+  const rgb = /^rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(color);
+  if (!rgb) return color.toLowerCase();
+  return `#${rgb.slice(1, 4).map((c) => Number(c).toString(16).padStart(2, "0")).join("")}`;
+}
+
+/** Set the colour being edited: the part's only colour, or the selected one of its gradient. */
+async function pickColor(slot: Slot, color: string) {
+  if (!design) return;
+  const paint = [...design.colors[slot]];
+  paint[activeStop[slot]] = color;
+  await setPaint(slot, paint);
+}
+
+async function setPaint(slot: Slot, paint: string[]) {
+  if (!design) return;
+  const current = design.colors[slot];
+  if (paint.length === current.length && paint.every((c, i) => c === current[i])) return;
+  lastActivity = Date.now();
+  // Show it at once; the save's answer replaces it.
+  design = { ...design, colors: { ...design.colors, [slot]: paint } };
+  render();
+  setStatus("Saving…");
+  await flushSync({ [slot]: paint });
+}
+
+for (const slot of SLOTS) {
+  $(`solid-${slot}`).addEventListener("click", () => {
+    if (!design || design.colors[slot].length < 2) return;
+    const keep = design.colors[slot][activeStop[slot]];
+    activeStop[slot] = 0;
+    void setPaint(slot, [keep]);
+  });
+  $(`gradient-${slot}`).addEventListener("click", () => {
+    if (!design || design.colors[slot].length > 1) return;
+    const [only] = design.colors[slot];
+    activeStop[slot] = 1;
+    void setPaint(slot, [only, partner(only)]);
+  });
+  // `change`, not `input`: the picker fires `input` on every drag, and each save reloads the viewer.
+  $(`pick-${slot}`).addEventListener("change", (event) => {
+    void pickColor(slot, (event.target as HTMLInputElement).value.toLowerCase());
+  });
+  $(`dropper-${slot}`).addEventListener("click", async () => {
+    if (!EyeDropper) return;
+    try {
+      const { sRGBHex } = await new EyeDropper().open();
+      await pickColor(slot, toHex(sRGBHex));
+    } catch {
+      // Escape cancels it; a host may also refuse it.
+    }
+  });
+}
+
+// ---- ordering -----------------------------------------------------------------
+
+function openOrderForm() {
+  if (!design) return;
+  lastActivity = Date.now();
+  showView("order");
+  setStatus("");
+  (form.elements.namedItem("name") as HTMLInputElement | null)?.focus();
+}
+
+/** 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;
+  button.disabled = true;
+  setStatus("Placing your order…");
+  try {
+    // Order what is on screen: save any pending knob turn first.
+    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}.`);
+  } catch {
+    setStatus("The order didn't go through. Try again in a moment.");
+  } finally {
+    button.disabled = false;
+  }
+}
+
+$("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();
+});
+
+// The bridge sets data-display-mode from the host; keep the toggle's label honest.
+new MutationObserver(() => {
+  $("customize").textContent = document.documentElement.dataset.displayMode === "fullscreen" ? "Done" : "Customize";
+}).observe(document.documentElement, { attributes: true, attributeFilter: ["data-display-mode"] });
+
+/** Whether the viewer could run, and where — the data that settles "how many sessions have WebGPU". */
+function report(event: string, detail?: string) {
+  void callTool(app, "report_viewer_status", {
+    ...(design ? { designId: design.designId } : {}),
+    writer,
+    event,
+    ...(webgpu === undefined ? {} : { webgpu }),
+    ...(detail ? { detail } : {}),
+    userAgent: navigator.userAgent.slice(0, 300),
+    displayMode: document.documentElement.dataset.displayMode ?? "inline",
+  }).catch(() => {});
+}