@womp/mcp-ui 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/mcp-ui",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "MCP Apps widgets for Womp's MCP server — interactive cards rendered inline in Claude and other MCP hosts.",
   "license": "MIT",
   "type": "commonjs",

package/src/print/main.ts

@@ -1,4 +1,4 @@
-import { $, callTool, createCard, openLink, type GenerationResult } from "../shared/bridge";
+import { $, callTool, createCard, openLink, pushModelContext, type GenerationResult } from "../shared/bridge";
 import { expandHexInput, nearestPantone, normalizeHex, pantoneChips } from "./pantone";
 
 /**
@@ -96,6 +96,8 @@ const MAX_LONGEST_CM = 60;
 const PANEL_DEFAULT_TINT = "#276ee2";
 /** The panel's own re-price debounce. */
 const REQUOTE_DEBOUNCE_MS = 500;
+/** State push: faster than a re-quote (it prices nothing) but still one per gesture, not per keystroke. */
+const SYNC_DEBOUNCE_MS = 300;
 const AXES: Axis[] = ["width", "height", "depth"];
 
 const state = {
@@ -129,6 +131,7 @@ const state = {
 /** Monotonic guard: a slow older quote must never overwrite a newer one. */
 let quoteSeq = 0;
 let debounceTimer: number | undefined;
+let syncTimer: number | undefined;
 
 // --- helpers ---------------------------------------------------------------
 
@@ -169,6 +172,7 @@ function setQuoting(on: boolean) {
 function markDirty() {
   state.cartCheckoutUrl = "";
   state.preparedUrl = "";
+  scheduleSync();
 }
 
 /**
@@ -668,6 +672,48 @@ function scheduleRequote() {
   debounceTimer = window.setTimeout(() => void requote(), REQUOTE_DEBOUNCE_MS);
 }
 
+/** "Tinted clear (resin-clear-tinted) · matte · #276ee2 (Pantone 2386 C) · 10.2 cm · x2" */
+function describeSelection(): string {
+  const m = selectedMaterial();
+  const snapped = snappedColor();
+  const bits = [`${materialLabel(m)} (${state.material})`];
+  if (state.finish && m?.finishes?.length) bits.push(state.finish);
+  if (snapped) bits.push(`${snapped.hex} (Pantone ${snapped.code})`);
+  if (state.longestSideCm) bits.push(`${fmtDim(state.longestSideCm, state.unit)} ${state.unit} longest side`);
+  bits.push(`x${state.quantity}`);
+  return bits.join(" · ");
+}
+
+/**
+ * Publish what the card is showing — the whole point of the card being live.
+ *
+ * Its re-quotes are app-initiated calls whose results come back here and go
+ * nowhere else, so a configuration tuned for two minutes is invisible to the
+ * conversation: ask for it in chat and the model orders the settings it opened
+ * with. Two channels, deliberately: `sync_print_config` parks the selection on
+ * the server, which is what `add_to_cart` actually reads, and
+ * `updateModelContext` tells the model so it can talk about the right print
+ * (host-gated, and a no-op where it is unsupported).
+ *
+ * Failures are swallowed. A state push that does not land costs an out-of-date
+ * order note, not a broken card, and the user has the button right there.
+ */
+function syncConfig() {
+  if (!state.source || state.staticPrintUrl || !state.material) return;
+  void callTool(card.app, "sync_print_config", baseArgs()).catch(() => {});
+  void pushModelContext(
+    card.app,
+    `The 3D print card in this conversation now shows: ${describeSelection()}. ` +
+      "These are the user's own selections on the card, later than anything said in chat. " +
+      "If they ask to order or add it to the cart, call add_to_cart with only the mesh source.",
+  );
+}
+
+function scheduleSync() {
+  if (syncTimer !== undefined) clearTimeout(syncTimer);
+  syncTimer = window.setTimeout(syncConfig, SYNC_DEBOUNCE_MS);
+}
+
 async function addToCart() {
   const cta = $("cta") as HTMLButtonElement;
   cta.disabled = true;

package/src/shared/bridge.ts

@@ -202,6 +202,29 @@ export async function callTool(app: App, name: string, args: Record<string, unkn
   return app.request({ method: "tools/call", params: { name, arguments: args } }, CallToolResultSchema);
 }
 
+/**
+ * Push what the card is showing into the model's context for the next turn.
+ *
+ * A card's own tool calls are announced to nobody: the host proxies them and
+ * hands the result back to the iframe, so nothing the user changes here reaches
+ * the conversation. `ui/update-model-context` is the channel for that — the
+ * host holds the last update and gives it to the model on the next user
+ * message. It is host-gated, and Claude web was reported to drop the payload
+ * silently, so this is a bonus that makes the model DESCRIBE the right print,
+ * never the thing correctness rests on: the server holds the configuration too.
+ *
+ * No-ops (rather than throws) when the host does not advertise the capability.
+ */
+export async function pushModelContext(app: App, text: string) {
+  const supported = (app.getHostCapabilities() as { updateModelContext?: unknown } | undefined)?.updateModelContext;
+  if (!supported) return;
+  try {
+    await app.updateModelContext({ content: [{ type: "text", text }] });
+  } catch {
+    // A host that rejects the update is not a card the user can do nothing with.
+  }
+}
+
 /** Toggle fullscreen, trusting the host's answer over our request. */
 export function toggleFullscreen(app: App) {
   const isFull = document.documentElement.dataset.displayMode === "fullscreen";