@ottotheagent/mcp-card-assets 0.1.0 → 0.3.0

package/README.md

@@ -2,14 +2,20 @@
 
 **Created**: 2026-10-02 | **Last Updated**: 2026-10-02
 
-Airline logos for the Otto flight card. The `render_flights` MCP tool returns card data, and the host's model draws the card in its own widget sandbox. That sandbox loads images only from a few public CDNs, so the logos are served from jsDelivr: `https://cdn.jsdelivr.net/npm/@ottotheagent/mcp-card-assets@<version>/marks/<IATA>.png`.
+The Otto flight card renderer and airline logos. The `render_flights` 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.
 
-## Publish a new version
+## Contents
+
+- `flight-card.js` draws the card and exposes `OttoFlightCard.render(rootElement, card)`. It carries its CSS inline, so the sandbox loads one script. Select builds "Book flight … (flight_id …)" from the fare and sends it through the host's `sendPrompt()`.
+- `flight-card.css` is the same CSS as a separate file, for reference.
+- `marks/<IATA>.png` holds the airline logos.
 
-The PNGs are generated from `server/mcp/apps/static/airline-marks.json` and are not committed.
+The source is `src/flight-card.js`. `scripts/mcp/build_card_assets.py` writes the published files from it, from the card CSS in `server/mcp/apps/static/`, and from `airline-marks.json`. The generated files are not committed.
+
+## Publish a new version
 
 1. Bump `version` in `package.json`.
-2. Set `CARD_ASSETS_PACKAGE` in `server/mcp/apps/airline_marks.py` to the same `name@version`. A test checks that the two match.
-3. Run `npm publish --access public` in this directory. `prepack` writes `marks/*.png` first.
+2. Run `npm publish --access public` in this directory. The `prepack` step builds the files first.
+3. Set `CARD_ASSETS_PACKAGE` in `server/mcp/apps/card_assets.py` to the same `name@version`. A test checks that the two match.
 
-Published versions are immutable, so the server can pin one and let browsers cache it.
+Publish before you deploy the server change. The server pins the version, and an unpublished version returns 404, which leaves the card empty.

package/flight-card.css

@@ -0,0 +1 @@
+:root{--otto-card-bg:#ffffff;--otto-card-border:#d4d4d4;--otto-btn-border:#525252;--otto-accent:#08c0cc;--otto-divider:#e5e5e5;--otto-strip-bg:#f5f5f5;--otto-fare-bg:#262624;--otto-on-fare:#ffffff;--otto-chip-bg:#ccfbf1;--otto-chip-text:#0a0a0a;--otto-text-primary:#0a0a0a;--otto-text-body:#0a0a0a;--otto-text-secondary:#737373;--otto-link-hover:#0369a1;--otto-banner-bg:#171717;--otto-on-banner:#ffffff;--otto-caution-bg:#fdf0dd;--otto-caution-text:#96590b;--otto-positive-text:#1c7a3e;--otto-photo-bg:#f5f5f5;--otto-font:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--otto-line:1.5;--otto-text-xs:10px;--otto-text-sm:11px;--otto-text-md:12px;--otto-text-base:13px;--otto-text-lg:14px;--otto-text-xl:18px;--otto-text-2xl:19px;--otto-weight-regular:400;--otto-weight-medium:500;--otto-weight-semibold:600;--otto-space-1:2px;--otto-space-2:6px;--otto-space-3:8px;--otto-space-4:10px;--otto-space-5:12px;--otto-space-6:14px;--otto-space-7:16px;--otto-space-8:18px;--otto-radius-card:12px;--otto-radius-fare:10px;--otto-radius-md:8px;--otto-radius-pill:999px;--otto-card-width:304px;--otto-icon-size:14px;--otto-photo-height:170px;--otto-mark-size:24px;--otto-chip-height:24px;--otto-tap-min:44px;}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--otto-card-bg:#262624;--otto-card-border:#3d3d3a;--otto-btn-border:#a3a3a3;--otto-divider:#3d3d3a;--otto-strip-bg:#1c1c1b;--otto-fare-bg:#3d3d3a;--otto-text-primary:#ffffff;--otto-text-body:#f5f5f5;--otto-text-secondary:#a3a3a3;--otto-link-hover:#38bdf8;--otto-banner-bg:#3d3d3a;--otto-chip-bg:#0d3d3a;--otto-chip-text:#ccfbf1;--otto-caution-bg:#3b2a12;--otto-caution-text:#f5b65b;--otto-positive-text:#5fd08a;--otto-photo-bg:#1c1c1b;}}:root[data-theme="dark"]{--otto-card-bg:#262624;--otto-card-border:#3d3d3a;--otto-btn-border:#a3a3a3;--otto-divider:#3d3d3a;--otto-strip-bg:#1c1c1b;--otto-fare-bg:#3d3d3a;--otto-text-primary:#ffffff;--otto-text-body:#f5f5f5;--otto-text-secondary:#a3a3a3;--otto-link-hover:#38bdf8;--otto-banner-bg:#3d3d3a;--otto-chip-bg:#0d3d3a;--otto-chip-text:#ccfbf1;--otto-caution-bg:#3b2a12;--otto-caution-text:#f5b65b;--otto-positive-text:#5fd08a;--otto-photo-bg:#1c1c1b;}html,body{margin:0;background:transparent;font-family:var(--otto-font);line-height:var(--otto-line);color:var(--otto-text-primary);}#root{min-height:120px;padding:0;}button{font:inherit;}.head{margin-bottom:var(--otto-space-5);}.title{font-size:var(--otto-text-lg);line-height:22px;font-weight:var(--otto-weight-semibold);}.subtitle,.empty{font-size:var(--otto-text-base);color:var(--otto-text-secondary);}.row{display:flex;gap:var(--otto-space-5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--otto-space-2);}.opt{flex:0 0 var(--otto-card-width);width:var(--otto-card-width);min-width:0;overflow-wrap:anywhere;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;padding:var(--otto-space-7);background:var(--otto-card-bg);border:1px solid var(--otto-card-border);border-radius:var(--otto-radius-card);}.opt.chosen{border-color:var(--otto-accent);}@media (hover:hover){.opt:hover{border-color:var(--otto-accent);}}.chip{display:inline-flex;align-items:center;height:var(--otto-chip-height);padding:0 var(--otto-space-4);box-sizing:border-box;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:var(--otto-radius-pill);font-size:var(--otto-text-sm);font-weight:var(--otto-weight-semibold);background:var(--otto-chip-bg);color:var(--otto-chip-text);}.chip.caution{background:var(--otto-caution-bg);color:var(--otto-caution-text);}.btn{flex-shrink:0;min-height:41px;padding:9px var(--otto-space-7);box-sizing:border-box;white-space:nowrap;cursor:pointer;border-radius:var(--otto-radius-md);font-size:var(--otto-text-lg);font-weight:var(--otto-weight-medium);display:inline-flex;align-items:center;justify-content:center;gap:var(--otto-space-2);background:transparent;color:var(--otto-text-primary);border:1px solid var(--otto-btn-border);}.btn:disabled{cursor:default;opacity:0.45;}.why{margin-top:var(--otto-space-7);font-size:var(--otto-text-base);color:var(--otto-text-body);}.whyHead{font-weight:var(--otto-weight-semibold);}.whyLine{display:flex;gap:var(--otto-space-3);}.tick{--otto-icon-size:12px;height:19.5px;font-size:var(--otto-text-md);}.tick.note{color:var(--otto-text-secondary);}@media (max-width:480px){.opt{flex-basis:min(var(--otto-card-width),82vw);width:min(var(--otto-card-width),82vw);}.btn{min-height:var(--otto-tap-min);}}.carrier{display:flex;align-items:center;gap:var(--otto-space-3);min-height:var(--otto-chip-height);}.airline{flex:1;min-width:0;display:flex;align-items:center;gap:var(--otto-space-4);font-size:var(--otto-text-lg);font-weight:var(--otto-weight-medium);}.airlineName{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.chips{display:flex;gap:var(--otto-space-1);flex-shrink:0;}.mark{width:var(--otto-mark-size);height:var(--otto-mark-size);border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:var(--otto-text-xs);font-weight:var(--otto-weight-semibold);letter-spacing:0.3px;color:#fff;background:#5b6470;}img.mark{object-fit:contain;background:transparent;border:0;padding:0;}.fltline{display:flex;justify-content:space-between;margin-top:var(--otto-space-8);font-size:var(--otto-text-md);color:var(--otto-text-body);}.times,.ports{display:flex;align-items:center;justify-content:space-between;}.times{margin-top:var(--otto-space-2);gap:var(--otto-space-3);}.ports{margin-top:var(--otto-space-1);font-size:var(--otto-text-lg);color:var(--otto-text-body);}.clock{font-size:var(--otto-text-xl);font-weight:var(--otto-weight-semibold);white-space:nowrap;}.plus{font-size:var(--otto-text-sm);vertical-align:super;color:var(--otto-caution-text);}.rule{flex:1;height:1px;background:var(--otto-divider);}.plane{color:var(--otto-text-secondary);}.fareBlock{margin-top:var(--otto-space-6);display:flex;flex-direction:column;}.strip{height:66px;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--otto-space-3);padding:9px var(--otto-space-5) 0;border:1px solid var(--otto-divider);border-radius:var(--otto-radius-md);background:var(--otto-strip-bg);font-size:var(--otto-text-base);}.strip + .fareRow{margin-top:-27px;}.lowest{min-width:0;font-weight:var(--otto-weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.lowestName{font-weight:var(--otto-weight-regular);color:var(--otto-text-secondary);}.strip button.link{flex-shrink:0;display:inline-flex;gap:6px;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;appearance:none;cursor:pointer;align-items:center;font-size:var(--otto-text-base);line-height:var(--otto-line);color:var(--otto-text-primary);}@media (hover:hover){.opt.hasFares:hover .link{color:var(--otto-link-hover);}.opt.hasFares:hover .linkText{text-decoration:underline;}}.fareRow{position:relative;height:78px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--otto-space-4);padding:var(--otto-space-2) var(--otto-space-5) var(--otto-space-2) var(--otto-space-6);border-radius:var(--otto-radius-fare);background:var(--otto-fare-bg);color:var(--otto-on-fare);}.fareText{min-width:0;}.amount{font-size:var(--otto-text-2xl);font-weight:var(--otto-weight-semibold);}.fareName{font-size:var(--otto-text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.fareFacts{font-size:var(--otto-text-md);opacity:0.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.tag{font-size:var(--otto-text-md);}.fareRow .btn.onFare{padding:9px 20px;background:var(--otto-on-fare);color:var(--otto-fare-bg);border-color:var(--otto-on-fare);}.fareRow .btn.onFare.chosen{padding:9px var(--otto-space-7);border-color:var(--otto-accent);}.opt.hasFares{cursor:pointer;}.opt.open{border-color:var(--otto-accent);}.fareList{margin-top:var(--otto-space-7);padding:var(--otto-space-7);border:1px solid var(--otto-card-border);border-radius:var(--otto-radius-card);background:var(--otto-card-bg);display:flex;flex-direction:column;gap:var(--otto-space-3);}.fareListHead{margin-bottom:var(--otto-space-1);font-size:var(--otto-text-md);font-weight:var(--otto-weight-semibold);color:var(--otto-text-primary);}.ladderRow{display:flex;align-items:center;justify-content:space-between;gap:var(--otto-space-4);padding:var(--otto-space-3) var(--otto-space-3) var(--otto-space-3) var(--otto-space-6);border:1px solid var(--otto-divider);border-radius:var(--otto-radius-md);background:var(--otto-strip-bg);}.ladderRow.recommended{border-color:var(--otto-text-primary);}@media (hover:hover){.ladderRow:hover{border-color:var(--otto-accent);}}.ladderLabel{min-width:0;}.ladderName{font-size:var(--otto-text-base);font-weight:var(--otto-weight-semibold);color:var(--otto-text-primary);}.ladderFacts{font-size:var(--otto-text-md);color:var(--otto-text-secondary);}.ladderRight{flex-shrink:0;display:flex;align-items:center;gap:var(--otto-space-5);}.ladderAmount{font-size:var(--otto-text-lg);font-weight:var(--otto-weight-semibold);}.ladderRow .btn{min-height:36px;padding:6px var(--otto-space-6);background:var(--otto-card-bg);border-color:var(--otto-text-primary);}.btn.chosen:not(.onFare){background:var(--otto-text-primary);color:var(--otto-card-bg);border-color:var(--otto-text-primary);}#root.busy .opt{cursor:default;}#root.busy .opt:not(.chosen):hover{border-color:var(--otto-card-border);}#root.busy .opt.open:not(.chosen){border-color:var(--otto-accent);}#root.busy .opt.hasFares:hover .link{color:var(--otto-text-primary);}#root.busy .opt.hasFares:hover .linkText{text-decoration:none;}#root.busy .ladderRow:hover{border-color:var(--otto-divider);}#root.busy .ladderRow.recommended:hover{border-color:var(--otto-text-primary);}.strip button.link:disabled{cursor:default;opacity:0.45;}.btn.chosen:disabled{opacity:1;}

package/flight-card.js

@@ -0,0 +1,245 @@
+/* Otto flight card renderer for host widget sandboxes (Claude's generative UI).
+ *
+ * The render_flights MCP tool returns `card`; the host's model pastes it into
+ *   <div id="root"></div><script src=".../flight-card.js"></script>
+ *   <script>OttoFlightCard.render(document.getElementById("root"), CARD)</script>
+ * The CSS is inlined at build time (scripts/mcp/build_card_assets.py), so the
+ * sandbox only has to allow this one script. Select sends "Book flight …
+ * (flight_id …)" through the host's global sendPrompt().
+ */
+(function () {
+  "use strict";
+
+  const CSS = ":root{--otto-card-bg:#ffffff;--otto-card-border:#d4d4d4;--otto-btn-border:#525252;--otto-accent:#08c0cc;--otto-divider:#e5e5e5;--otto-strip-bg:#f5f5f5;--otto-fare-bg:#262624;--otto-on-fare:#ffffff;--otto-chip-bg:#ccfbf1;--otto-chip-text:#0a0a0a;--otto-text-primary:#0a0a0a;--otto-text-body:#0a0a0a;--otto-text-secondary:#737373;--otto-link-hover:#0369a1;--otto-banner-bg:#171717;--otto-on-banner:#ffffff;--otto-caution-bg:#fdf0dd;--otto-caution-text:#96590b;--otto-positive-text:#1c7a3e;--otto-photo-bg:#f5f5f5;--otto-font:Inter,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\";--otto-line:1.5;--otto-text-xs:10px;--otto-text-sm:11px;--otto-text-md:12px;--otto-text-base:13px;--otto-text-lg:14px;--otto-text-xl:18px;--otto-text-2xl:19px;--otto-weight-regular:400;--otto-weight-medium:500;--otto-weight-semibold:600;--otto-space-1:2px;--otto-space-2:6px;--otto-space-3:8px;--otto-space-4:10px;--otto-space-5:12px;--otto-space-6:14px;--otto-space-7:16px;--otto-space-8:18px;--otto-radius-card:12px;--otto-radius-fare:10px;--otto-radius-md:8px;--otto-radius-pill:999px;--otto-card-width:304px;--otto-icon-size:14px;--otto-photo-height:170px;--otto-mark-size:24px;--otto-chip-height:24px;--otto-tap-min:44px;}@media (prefers-color-scheme:dark){:root:not([data-theme=\"light\"]){--otto-card-bg:#262624;--otto-card-border:#3d3d3a;--otto-btn-border:#a3a3a3;--otto-divider:#3d3d3a;--otto-strip-bg:#1c1c1b;--otto-fare-bg:#3d3d3a;--otto-text-primary:#ffffff;--otto-text-body:#f5f5f5;--otto-text-secondary:#a3a3a3;--otto-link-hover:#38bdf8;--otto-banner-bg:#3d3d3a;--otto-chip-bg:#0d3d3a;--otto-chip-text:#ccfbf1;--otto-caution-bg:#3b2a12;--otto-caution-text:#f5b65b;--otto-positive-text:#5fd08a;--otto-photo-bg:#1c1c1b;}}:root[data-theme=\"dark\"]{--otto-card-bg:#262624;--otto-card-border:#3d3d3a;--otto-btn-border:#a3a3a3;--otto-divider:#3d3d3a;--otto-strip-bg:#1c1c1b;--otto-fare-bg:#3d3d3a;--otto-text-primary:#ffffff;--otto-text-body:#f5f5f5;--otto-text-secondary:#a3a3a3;--otto-link-hover:#38bdf8;--otto-banner-bg:#3d3d3a;--otto-chip-bg:#0d3d3a;--otto-chip-text:#ccfbf1;--otto-caution-bg:#3b2a12;--otto-caution-text:#f5b65b;--otto-positive-text:#5fd08a;--otto-photo-bg:#1c1c1b;}html,body{margin:0;background:transparent;font-family:var(--otto-font);line-height:var(--otto-line);color:var(--otto-text-primary);}#root{min-height:120px;padding:0;}button{font:inherit;}.head{margin-bottom:var(--otto-space-5);}.title{font-size:var(--otto-text-lg);line-height:22px;font-weight:var(--otto-weight-semibold);}.subtitle,.empty{font-size:var(--otto-text-base);color:var(--otto-text-secondary);}.row{display:flex;gap:var(--otto-space-5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--otto-space-2);}.opt{flex:0 0 var(--otto-card-width);width:var(--otto-card-width);min-width:0;overflow-wrap:anywhere;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;padding:var(--otto-space-7);background:var(--otto-card-bg);border:1px solid var(--otto-card-border);border-radius:var(--otto-radius-card);}.opt.chosen{border-color:var(--otto-accent);}@media (hover:hover){.opt:hover{border-color:var(--otto-accent);}}.chip{display:inline-flex;align-items:center;height:var(--otto-chip-height);padding:0 var(--otto-space-4);box-sizing:border-box;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:var(--otto-radius-pill);font-size:var(--otto-text-sm);font-weight:var(--otto-weight-semibold);background:var(--otto-chip-bg);color:var(--otto-chip-text);}.chip.caution{background:var(--otto-caution-bg);color:var(--otto-caution-text);}.btn{flex-shrink:0;min-height:41px;padding:9px var(--otto-space-7);box-sizing:border-box;white-space:nowrap;cursor:pointer;border-radius:var(--otto-radius-md);font-size:var(--otto-text-lg);font-weight:var(--otto-weight-medium);display:inline-flex;align-items:center;justify-content:center;gap:var(--otto-space-2);background:transparent;color:var(--otto-text-primary);border:1px solid var(--otto-btn-border);}.btn:disabled{cursor:default;opacity:0.45;}.why{margin-top:var(--otto-space-7);font-size:var(--otto-text-base);color:var(--otto-text-body);}.whyHead{font-weight:var(--otto-weight-semibold);}.whyLine{display:flex;gap:var(--otto-space-3);}.tick{--otto-icon-size:12px;height:19.5px;font-size:var(--otto-text-md);}.tick.note{color:var(--otto-text-secondary);}@media (max-width:480px){.opt{flex-basis:min(var(--otto-card-width),82vw);width:min(var(--otto-card-width),82vw);}.btn{min-height:var(--otto-tap-min);}}.carrier{display:flex;align-items:center;gap:var(--otto-space-3);min-height:var(--otto-chip-height);}.airline{flex:1;min-width:0;display:flex;align-items:center;gap:var(--otto-space-4);font-size:var(--otto-text-lg);font-weight:var(--otto-weight-medium);}.airlineName{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.chips{display:flex;gap:var(--otto-space-1);flex-shrink:0;}.mark{width:var(--otto-mark-size);height:var(--otto-mark-size);border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:var(--otto-text-xs);font-weight:var(--otto-weight-semibold);letter-spacing:0.3px;color:#fff;background:#5b6470;}img.mark{object-fit:contain;background:transparent;border:0;padding:0;}.fltline{display:flex;justify-content:space-between;margin-top:var(--otto-space-8);font-size:var(--otto-text-md);color:var(--otto-text-body);}.times,.ports{display:flex;align-items:center;justify-content:space-between;}.times{margin-top:var(--otto-space-2);gap:var(--otto-space-3);}.ports{margin-top:var(--otto-space-1);font-size:var(--otto-text-lg);color:var(--otto-text-body);}.clock{font-size:var(--otto-text-xl);font-weight:var(--otto-weight-semibold);white-space:nowrap;}.plus{font-size:var(--otto-text-sm);vertical-align:super;color:var(--otto-caution-text);}.rule{flex:1;height:1px;background:var(--otto-divider);}.plane{color:var(--otto-text-secondary);}.fareBlock{margin-top:var(--otto-space-6);display:flex;flex-direction:column;}.strip{height:66px;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--otto-space-3);padding:9px var(--otto-space-5) 0;border:1px solid var(--otto-divider);border-radius:var(--otto-radius-md);background:var(--otto-strip-bg);font-size:var(--otto-text-base);}.strip + .fareRow{margin-top:-27px;}.lowest{min-width:0;font-weight:var(--otto-weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.lowestName{font-weight:var(--otto-weight-regular);color:var(--otto-text-secondary);}.strip button.link{flex-shrink:0;display:inline-flex;gap:6px;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;appearance:none;cursor:pointer;align-items:center;font-size:var(--otto-text-base);line-height:var(--otto-line);color:var(--otto-text-primary);}@media (hover:hover){.opt.hasFares:hover .link{color:var(--otto-link-hover);}.opt.hasFares:hover .linkText{text-decoration:underline;}}.fareRow{position:relative;height:78px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--otto-space-4);padding:var(--otto-space-2) var(--otto-space-5) var(--otto-space-2) var(--otto-space-6);border-radius:var(--otto-radius-fare);background:var(--otto-fare-bg);color:var(--otto-on-fare);}.fareText{min-width:0;}.amount{font-size:var(--otto-text-2xl);font-weight:var(--otto-weight-semibold);}.fareName{font-size:var(--otto-text-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.fareFacts{font-size:var(--otto-text-md);opacity:0.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.tag{font-size:var(--otto-text-md);}.fareRow .btn.onFare{padding:9px 20px;background:var(--otto-on-fare);color:var(--otto-fare-bg);border-color:var(--otto-on-fare);}.fareRow .btn.onFare.chosen{padding:9px var(--otto-space-7);border-color:var(--otto-accent);}.opt.hasFares{cursor:pointer;}.opt.open{border-color:var(--otto-accent);}.fareList{margin-top:var(--otto-space-7);padding:var(--otto-space-7);border:1px solid var(--otto-card-border);border-radius:var(--otto-radius-card);background:var(--otto-card-bg);display:flex;flex-direction:column;gap:var(--otto-space-3);}.fareListHead{margin-bottom:var(--otto-space-1);font-size:var(--otto-text-md);font-weight:var(--otto-weight-semibold);color:var(--otto-text-primary);}.ladderRow{display:flex;align-items:center;justify-content:space-between;gap:var(--otto-space-4);padding:var(--otto-space-3) var(--otto-space-3) var(--otto-space-3) var(--otto-space-6);border:1px solid var(--otto-divider);border-radius:var(--otto-radius-md);background:var(--otto-strip-bg);}.ladderRow.recommended{border-color:var(--otto-text-primary);}@media (hover:hover){.ladderRow:hover{border-color:var(--otto-accent);}}.ladderLabel{min-width:0;}.ladderName{font-size:var(--otto-text-base);font-weight:var(--otto-weight-semibold);color:var(--otto-text-primary);}.ladderFacts{font-size:var(--otto-text-md);color:var(--otto-text-secondary);}.ladderRight{flex-shrink:0;display:flex;align-items:center;gap:var(--otto-space-5);}.ladderAmount{font-size:var(--otto-text-lg);font-weight:var(--otto-weight-semibold);}.ladderRow .btn{min-height:36px;padding:6px var(--otto-space-6);background:var(--otto-card-bg);border-color:var(--otto-text-primary);}.btn.chosen:not(.onFare){background:var(--otto-text-primary);color:var(--otto-card-bg);border-color:var(--otto-text-primary);}#root.busy .opt{cursor:default;}#root.busy .opt:not(.chosen):hover{border-color:var(--otto-card-border);}#root.busy .opt.open:not(.chosen){border-color:var(--otto-accent);}#root.busy .opt.hasFares:hover .link{color:var(--otto-text-primary);}#root.busy .opt.hasFares:hover .linkText{text-decoration:none;}#root.busy .ladderRow:hover{border-color:var(--otto-divider);}#root.busy .ladderRow.recommended:hover{border-color:var(--otto-text-primary);}.strip button.link:disabled{cursor:default;opacity:0.45;}.btn.chosen:disabled{opacity:1;}";
+  const SYMBOLS = { USD: "$", EUR: "€", GBP: "£", JPY: "¥", CNY: "¥", AUD: "A$", CAD: "C$" };
+  // The widget cannot see when the host's reply ends, so the lock lifts on a timer.
+  const BUSY_MS = 60000;
+
+  function injectCss() {
+    if (!CSS || document.getElementById("otto-flight-card-css")) return;
+    const style = document.createElement("style");
+    style.id = "otto-flight-card-css";
+    style.textContent = CSS;
+    document.head.appendChild(style);
+  }
+
+  function el(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined && text !== null) node.textContent = text;
+    return node;
+  }
+
+  function render(root, card) {
+    injectCss();
+    let open = null;
+    let chosen = null;
+    let busy = false;
+    let timer = null;
+
+    const money = (value) =>
+      value === null || value === undefined
+        ? ""
+        : (SYMBOLS[card.currency] || card.currency + " ") + Math.round(value).toLocaleString();
+    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];
+    const allFares = () => card.items.flatMap((o) => o.fares || []);
+    const optionOf = (fare) => card.items.find((o) => (o.fares || []).includes(fare));
+
+    // Supplier text flattened to one short line, quotes out, before it becomes the traveler's message.
+    const oneLine = (value, max = 60) =>
+      String(value ?? "")
+        .replace(/["“”‘’`]/g, "'")
+        .replace(/[\s\u0000-\u001f]+/g, " ")
+        .trim()
+        .slice(0, max);
+
+    // The pick in words, then the id the model books with.
+    function bookMessage(option, fare) {
+      const carrier = [option.airline_name, option.flight_number].filter(Boolean).join(" ");
+      const route = option.origin && option.destination ? `${oneLine(option.origin, 5)}→${oneLine(option.destination, 5)}` : "";
+      const parts = [
+        oneLine(carrier),
+        route,
+        option.depart ? `departing ${oneLine(option.depart, 12)}` : "",
+        oneLine(fare.name),
+        oneLine(fare.refundable),
+        money(fare.price),
+      ].filter(Boolean);
+      return `Book flight ${parts.join(", ")} (flight_id ${fare.id})`;
+    }
+
+    // Logo from the CDN; the code circle in the airline's color when it does not load.
+    function mark(option) {
+      const circle = () => {
+        const node = el("div", "mark", option.airline || "");
+        if (option.mark_color) node.style.background = option.mark_color;
+        return node;
+      };
+      if (!option.mark_url) return circle();
+      const img = el("img", "mark");
+      img.alt = "";
+      img.src = option.mark_url;
+      img.onerror = () => img.replaceWith(circle());
+      return img;
+    }
+
+    function selectButton(className, fare) {
+      const picked = chosen === fare.id;
+      const button = el("button", className + (picked ? " chosen" : ""), picked ? "✓ Selected" : "Select");
+      button.dataset.select = fare.id;
+      return button;
+    }
+
+    function optionCard(option) {
+      const fares = option.fares || [];
+      const top = recommended(option);
+      const many = fares.length > 1;
+      const classes = ["opt"];
+      if (many) classes.push("hasFares");
+      if (open === option.id) classes.push("open");
+      if (fares.some((f) => f.id === chosen)) classes.push("chosen");
+      const box = el("div", classes.join(" "));
+      box.dataset.card = option.id;
+
+      const carrier = el("div", "carrier");
+      const airline = el("div", "airline");
+      airline.append(mark(option), el("span", "airlineName", option.airline_name || option.airline || ""));
+      carrier.append(airline);
+      const outOfPolicy = (option.badges || []).includes("out_of_policy");
+      if (outOfPolicy || option.callout) {
+        const chips = el("div", "chips");
+        chips.append(el("span", outOfPolicy ? "chip caution" : "chip", outOfPolicy ? "Out of policy" : option.callout));
+        carrier.append(chips);
+      }
+
+      const fltline = el("div", "fltline");
+      fltline.append(
+        el("span", null, option.flight_number || ""),
+        el("span", null, [stops(option.stops), duration(option.duration_minutes)].filter(Boolean).join(" · ")),
+      );
+
+      const times = el("div", "times");
+      const arrive = el("span", "clock", option.arrive || "—");
+      if (option.arrives_next_day > 0) arrive.append(el("span", "plus", `+${option.arrives_next_day}`));
+      times.append(el("span", "clock", option.depart || "—"), el("span", "rule"), el("span", "plane", "✈"), el("span", "rule"), arrive);
+
+      const ports = el("div", "ports");
+      ports.append(el("span", null, option.origin || ""), el("span", null, option.destination || ""));
+
+      const fareBlock = el("div", "fareBlock");
+      if (many) {
+        const cheapest = fares.reduce((low, f) => (typeof f.price === "number" && (!low || f.price < low.price) ? f : low), null);
+        const strip = el("div", "strip");
+        const lowest = el("span", "lowest");
+        if (cheapest) lowest.append(`from ${money(cheapest.price)}`, el("span", "lowestName", ` for ${cheapest.name}`));
+        const link = el("button", "link");
+        link.dataset.fares = option.id;
+        link.append(el("span", "linkText", open === option.id ? "Hide fares" : "Other fares"), el("span", null, open === option.id ? "×" : "→"));
+        strip.append(lowest, link);
+        fareBlock.append(strip);
+      }
+      const row = el("div", "fareRow");
+      const text = el("div", "fareText");
+      text.append(el("div", "amount", money(top.price)), el("div", "fareName", top.name || " "));
+      text.append(many ? el("div", "tag", "☆ Recommended") : el("div", "fareFacts", (top.facts || []).join(" · ") || " "));
+      row.append(text, selectButton("btn onFare", top));
+      fareBlock.append(row);
+
+      box.append(carrier, fltline, times, ports, fareBlock);
+      if (option.reasons && option.reasons.length) {
+        const why = el("div", "why");
+        why.append(el("div", "whyHead", "Insights"));
+        for (const reason of option.reasons) {
+          const line = el("div", "whyLine");
+          line.append(el("span", "tick", "✓"), el("span", null, reason));
+          why.append(line);
+        }
+        box.append(why);
+      }
+      return box;
+    }
+
+    function fareList() {
+      const option = card.items.find((o) => o.id === open);
+      if (!option) return null;
+      const box = el("div", "fareList");
+      box.append(el("div", "fareListHead", `Fares · ${[option.airline_name, option.flight_number].filter(Boolean).join(" · ")}`));
+      const sorted = [...(option.fares || [])].sort((a, b) => (a.price ?? Infinity) - (b.price ?? Infinity));
+      for (const fare of sorted) {
+        const row = el("div", "ladderRow" + (fare.recommended ? " recommended" : ""));
+        const label = el("div", "ladderLabel");
+        label.append(el("div", "ladderName", fare.name + (fare.recommended ? " · Recommended" : "")));
+        const facts = [...(fare.facts || []), fare.within_policy === false ? "Out of policy" : ""].filter(Boolean).join(" · ");
+        if (facts) label.append(el("div", "ladderFacts", facts));
+        const right = el("div", "ladderRight");
+        right.append(el("div", "ladderAmount", money(fare.price)), selectButton("btn", fare));
+        row.append(label, right);
+        box.append(row);
+      }
+      return box;
+    }
+
+    function draw() {
+      const scroll = root.querySelector(".row")?.scrollLeft || 0;
+      root.replaceChildren();
+      if (!card || !card.items || !card.items.length) {
+        root.append(el("p", "empty", "No flight options to show."));
+        return;
+      }
+      const head = el("div", "head");
+      const label = card.price_label && card.price_label !== "total" ? `Prices are ${card.price_label}s` : "";
+      head.append(el("div", "title", card.title), el("div", "subtitle", [card.subtitle, label].filter(Boolean).join(" · ")));
+      const row = el("div", "row");
+      for (const option of card.items) row.append(optionCard(option));
+      root.append(head, row);
+      row.scrollLeft = scroll;
+      const list = fareList();
+      if (list) root.append(list);
+      root.classList.toggle("busy", busy);
+      root.querySelectorAll("button").forEach((b) => (b.disabled = busy));
+    }
+
+    function unlock() {
+      clearTimeout(timer);
+      busy = false;
+      draw();
+    }
+
+    // One pick at a time: the new fare replaces the old mark everywhere, then the card
+    // locks so a second click cannot send a second booking.
+    function select(fare) {
+      chosen = fare.id;
+      busy = true;
+      draw();
+      timer = setTimeout(unlock, BUSY_MS);
+      try {
+        const sent = window.sendPrompt(bookMessage(optionOf(fare), fare));
+        if (sent && typeof sent.catch === "function") sent.catch(unlock);
+      } catch (error) {
+        unlock();
+      }
+    }
+
+    root.addEventListener("click", (event) => {
+      if (busy) return;
+      const button = event.target.closest("[data-select]");
+      if (button) {
+        const fare = allFares().find((f) => f.id === button.dataset.select);
+        if (fare) select(fare);
+        return;
+      }
+      if (window.getSelection()?.toString()) return;
+      const opener = event.target.closest("[data-fares], .opt.hasFares");
+      if (!opener) return;
+      const id = opener.dataset.fares || opener.dataset.card;
+      open = open === id ? null : id;
+      draw();
+    });
+
+    draw();
+  }
+
+  window.OttoFlightCard = { render };
+})();

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@ottotheagent/mcp-card-assets",
-  "version": "0.1.0",
-  "description": "Static assets (airline logos) for the Otto flight card that Claude draws in its widget sandbox.",
+  "version": "0.3.0",
+  "description": "Renderer, styles and airline logos for the Otto flight card that Claude draws in its widget sandbox.",
   "license": "UNLICENSED",
   "files": [
+    "flight-card.js",
+    "flight-card.css",
     "marks/*.png",
     "README.md"
   ],