@ottotheagent/mcp-card-assets 0.5.0 → 0.7.0

package/README.md

@@ -1,13 +1,13 @@
 # @ottotheagent/mcp-card-assets
 
-**Created**: 2026-10-02 | **Last Updated**: 2026-10-02
+**Created**: 2026-10-02 | **Last Updated**: 2026-10-05
 
 Renderers, logos and photo placeholders for the Otto flight, hotel, room and car cards. Each `render_*` MCP tool returns card data and a snippet. The host's model mounts the card in its own widget sandbox, which loads files only from a few public CDNs, so the assets are served from jsDelivr.
 
 ## Contents
 
 - `flight-card.js`, `hotel-card.js`, `room-card.js` and `car-card.js` each draw one card and expose `OttoFlightCard`, `OttoHotelCard`, `OttoRoomCard` or `OttoCarCard` with `render(rootElement, card)`. Each carries its own CSS and only the icons it uses inline, so the sandbox loads one script per card. The server's snippet loads jsDelivr's minified copy (`*-card.min.js`).
-- Select (Show rooms on the hotel card) sends the pick as the traveler's message through the host's `sendPrompt()`: "Book flight …", "Show rooms at …", "Book room …" or "Book car …". The message carries no id.
+- Select (Show rooms on the hotel card) sends the pick as the traveler's message through the host's `sendPrompt()`: "Book flight …", "Show rooms at …", "Select room …" or "Book car …". The message carries no id.
 - `*-card.css` holds each card's CSS as a separate file, for reference.
 - `marks/<IATA>.png` holds airline logos, and `marks/cars/<code>.svg` holds car-company logos.
 - `placeholders/hotel.svg`, `room.svg` and `car.svg` fill the photo plate, because host sandboxes block supplier photos.

package/car-card.js

@@ -43,6 +43,15 @@ function icon(names, fallback, className = "icon") {
   return node;
 }
 
+// The pick message quotes the exact price, so the model can tell apart options that round alike.
+function formatExactMoney(value, currency) {
+  if (value === null || value === undefined) return "";
+  const symbol = SYMBOLS[currency];
+  const fraction = Number.isInteger(value) ? 0 : 2;
+  const amount = value.toLocaleString("en-US", { minimumFractionDigits: fraction, maximumFractionDigits: 2 });
+  return symbol ? `${symbol}${amount}` : `${currency} ${amount}`;
+}
+
 function formatMoney(value, currency) {
   if (value === null || value === undefined) return "";
   const symbol = SYMBOLS[currency];
@@ -87,6 +96,9 @@ function renderInsights(reasons, notes) {
 }
 
 function mount(root, card, spec) {
+  // A second mount on the same root replaces the first card; its lock timer must not
+  // fire later and redraw over the new card.
+  if (root.__ottoCard) root.__ottoCard.cancel();
   let chosen = null;
   let busy = false;
   let timer = null;
@@ -128,7 +140,8 @@ function mount(root, card, spec) {
 
   // One pick at a time: the new pick replaces the old mark, then the card locks so a
   // second click cannot send a second message.
-  root.addEventListener("click", (event) => {
+  // Assigned, not added: a re-mount replaces the handler instead of stacking another.
+  root.onclick = (event) => {
     if (busy) return;
     const button = event.target.closest("[data-select]");
     const item = button && card.items.find((i) => i.id === button.dataset.select);
@@ -143,9 +156,12 @@ function mount(root, card, spec) {
     } catch (error) {
       unlock();
     }
-  });
+  };
 
   draw();
+  const handle = { cancel: () => clearTimeout(timer) };
+  root.__ottoCard = handle;
+  return handle;
 }
 
 /* Otto car card: OttoCarCard.render(root, card), card from render_cars.
@@ -228,6 +244,7 @@ function lineIcon(name) {
 function render(root, card) {
   injectCss("otto-car-card-css");
   const money = (value, item) => formatMoney(value, item?.currency || card.currency);
+  const exactMoney = (value, item) => formatExactMoney(value, item?.currency || card.currency);
   const chips = assignChips(card.items || [], carCallouts(card.items || []));
 
   // Vendor and class as a traveler would say them; the card number only when another
@@ -236,7 +253,7 @@ function render(root, card) {
     const name = oneLine(`${item.vendor} ${item.class_label}`);
     const key = (other) => oneLine(`${other.vendor} ${other.class_label}`).toLowerCase();
     const twin = card.items.some((other) => other !== item && key(other) === key(item));
-    const total = money(item.total_rate, item);
+    const total = exactMoney(item.total_rate, item);
     return [twin ? `${name} (No. ${card.items.indexOf(item) + 1} on the card)` : name, total ? `${total} total` : ""]
       .filter(Boolean)
       .join(", ");

package/flight-card.js

@@ -32,6 +32,9 @@
 
   function render(root, card) {
     injectCss();
+    // A second render into the same root replaces the first card, so the first one's
+    // lock timer must not fire later and redraw over the new card.
+    if (root.__ottoCard) root.__ottoCard.cancel();
     let open = null;
     let chosen = null;
     let busy = false;
@@ -41,6 +44,12 @@
       value === null || value === undefined
         ? ""
         : (SYMBOLS[card.currency] || card.currency + " ") + Math.round(value).toLocaleString();
+    // The message quotes the exact price, so the model can tell apart fares that round alike.
+    const exactMoney = (value) =>
+      value === null || value === undefined
+        ? ""
+        : (SYMBOLS[card.currency] || card.currency + " ") +
+          value.toLocaleString("en-US", { minimumFractionDigits: Number.isInteger(value) ? 0 : 2, maximumFractionDigits: 2 });
     const duration = (m) => (m === null || m === undefined ? "" : `${Math.floor(m / 60)}h ${String(m % 60).padStart(2, "0")}m`);
     const stops = (s) => (!s ? "" : s === 1 ? "1 stop" : `${s} stops`);
     const recommended = (option) => option.fares.find((f) => f.recommended) || option.fares[0];
@@ -65,7 +74,7 @@
         option.depart ? `departing ${oneLine(option.depart, 12)}` : "",
         oneLine(fare.name),
         oneLine(fare.refundable),
-        money(fare.price),
+        exactMoney(fare.price),
       ].filter(Boolean);
       return `Book flight ${parts.join(", ")}`;
     }
@@ -222,7 +231,8 @@
       }
     }
 
-    root.addEventListener("click", (event) => {
+    // Assigned, not added: a re-render replaces the handler instead of stacking another.
+    root.onclick = (event) => {
       if (busy) return;
       const button = event.target.closest("[data-select]");
       if (button) {
@@ -236,9 +246,12 @@
       const id = opener.dataset.fares || opener.dataset.card;
       open = open === id ? null : id;
       draw();
-    });
+    };
 
     draw();
+    const handle = { cancel: () => clearTimeout(timer) };
+    root.__ottoCard = handle;
+    return handle;
   }
 
   window.OttoFlightCard = { render };

package/hotel-card.js

@@ -43,6 +43,15 @@ function icon(names, fallback, className = "icon") {
   return node;
 }
 
+// The pick message quotes the exact price, so the model can tell apart options that round alike.
+function formatExactMoney(value, currency) {
+  if (value === null || value === undefined) return "";
+  const symbol = SYMBOLS[currency];
+  const fraction = Number.isInteger(value) ? 0 : 2;
+  const amount = value.toLocaleString("en-US", { minimumFractionDigits: fraction, maximumFractionDigits: 2 });
+  return symbol ? `${symbol}${amount}` : `${currency} ${amount}`;
+}
+
 function formatMoney(value, currency) {
   if (value === null || value === undefined) return "";
   const symbol = SYMBOLS[currency];
@@ -87,6 +96,9 @@ function renderInsights(reasons, notes) {
 }
 
 function mount(root, card, spec) {
+  // A second mount on the same root replaces the first card; its lock timer must not
+  // fire later and redraw over the new card.
+  if (root.__ottoCard) root.__ottoCard.cancel();
   let chosen = null;
   let busy = false;
   let timer = null;
@@ -128,7 +140,8 @@ function mount(root, card, spec) {
 
   // One pick at a time: the new pick replaces the old mark, then the card locks so a
   // second click cannot send a second message.
-  root.addEventListener("click", (event) => {
+  // Assigned, not added: a re-mount replaces the handler instead of stacking another.
+  root.onclick = (event) => {
     if (busy) return;
     const button = event.target.closest("[data-select]");
     const item = button && card.items.find((i) => i.id === button.dataset.select);
@@ -143,9 +156,12 @@ function mount(root, card, spec) {
     } catch (error) {
       unlock();
     }
-  });
+  };
 
   draw();
+  const handle = { cancel: () => clearTimeout(timer) };
+  root.__ottoCard = handle;
+  return handle;
 }
 
 /* Otto hotel card: OttoHotelCard.render(root, card), card from render_hotels.
@@ -177,6 +193,7 @@ function hotelCallouts(items) {
 function render(root, card) {
   injectCss("otto-hotel-card-css");
   const money = (value, item) => formatMoney(value, item?.currency || card.currency);
+  const exactMoney = (value, item) => formatExactMoney(value, item?.currency || card.currency);
   const labels = hotelCallouts(card.items || []);
 
   // The hotel's name, as a traveler would say it. A detail is added only when the name
@@ -189,7 +206,7 @@ function render(root, card) {
     if (!twins.length && name.length >= MIN_NAME_CHARS) return name;
     const details = (item) => [
       oneLine(item.address || "", 60),
-      item.nightly_rate === null || item.nightly_rate === undefined ? "" : `from ${money(item.nightly_rate, item)}/night`,
+      item.nightly_rate === null || item.nightly_rate === undefined ? "" : `from ${exactMoney(item.nightly_rate, item)}/night`,
       `No. ${card.items.indexOf(item) + 1} on the card`,
     ];
     const detail = details(option).find((value, i) => value && twins.every((twin) => details(twin)[i] !== value));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ottotheagent/mcp-card-assets",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Renderers, styles, logos and photo placeholders for the Otto flight, hotel, room and car cards that Claude draws in its widget sandbox.",
   "license": "UNLICENSED",
   "files": [

package/room-card.js

@@ -43,6 +43,15 @@ function icon(names, fallback, className = "icon") {
   return node;
 }
 
+// The pick message quotes the exact price, so the model can tell apart options that round alike.
+function formatExactMoney(value, currency) {
+  if (value === null || value === undefined) return "";
+  const symbol = SYMBOLS[currency];
+  const fraction = Number.isInteger(value) ? 0 : 2;
+  const amount = value.toLocaleString("en-US", { minimumFractionDigits: fraction, maximumFractionDigits: 2 });
+  return symbol ? `${symbol}${amount}` : `${currency} ${amount}`;
+}
+
 function formatMoney(value, currency) {
   if (value === null || value === undefined) return "";
   const symbol = SYMBOLS[currency];
@@ -87,6 +96,9 @@ function renderInsights(reasons, notes) {
 }
 
 function mount(root, card, spec) {
+  // A second mount on the same root replaces the first card; its lock timer must not
+  // fire later and redraw over the new card.
+  if (root.__ottoCard) root.__ottoCard.cancel();
   let chosen = null;
   let busy = false;
   let timer = null;
@@ -128,7 +140,8 @@ function mount(root, card, spec) {
 
   // One pick at a time: the new pick replaces the old mark, then the card locks so a
   // second click cannot send a second message.
-  root.addEventListener("click", (event) => {
+  // Assigned, not added: a re-mount replaces the handler instead of stacking another.
+  root.onclick = (event) => {
     if (busy) return;
     const button = event.target.closest("[data-select]");
     const item = button && card.items.find((i) => i.id === button.dataset.select);
@@ -143,13 +156,16 @@ function mount(root, card, spec) {
     } catch (error) {
       unlock();
     }
-  });
+  };
 
   draw();
+  const handle = { cancel: () => clearTimeout(timer) };
+  root.__ottoCard = handle;
+  return handle;
 }
 
 /* Otto room card: OttoRoomCard.render(root, card), card from render_hotel_rooms.
- * Select sends "Book room …" as the traveler's message. */
+ * Select sends "Select room …" as the traveler's message. */
 
 // Fact icon → [icon name, text fallback].
 const FACT_ICONS = {
@@ -161,10 +177,11 @@ const FACT_ICONS = {
 function render(root, card) {
   injectCss("otto-room-card-css");
   const money = (value, item) => formatMoney(value, item?.currency || card.currency);
+  const exactMoney = (value, item) => formatExactMoney(value, item?.currency || card.currency);
 
   // The pick as a traveler would say it: room, hotel, rate, and its refund terms.
   function describe(item) {
-    const price = money(item.nightly_rate, item);
+    const price = exactMoney(item.nightly_rate, item);
     const refund = (item.facts || []).find((fact) => fact.icon === "refund");
     return [oneLine(item.name), oneLine(card.title), price ? `${price}/night` : "", refund ? oneLine(refund.text) : ""]
       .filter(Boolean)
@@ -219,7 +236,7 @@ function render(root, card) {
   mount(root, card, {
     empty: "No room options to show.",
     option,
-    message: (item) => `Book room ${describe(item)}`,
+    message: (item) => `Select room ${describe(item)}`,
   });
 }