mcp-context-card 1.7.0 → 1.8.0

package/dist/render-card.js

@@ -7,214 +7,24 @@
  * ai-catalog; this is the view for people.
  *
  * Self-contained: inline CSS, no external fonts or resources. The only script
- * is the expand-all / print helper (TOGGLE_SCRIPT) — a progressive enhancement;
- * every section still opens on its own without it. Renders anywhere.
+ * in the plain card is the expand-all / print helper. renderAppsCard adds the
+ * MCP Apps helper (src/card-app.bundle.js) and the hidden inline view, and
+ * only ui://mcp-context-card/card.html uses that. Tool text, the saved file,
+ * GET /card and the CLI stay on renderCard. Renders anywhere.
  */
-import { basename, join, resolve } from "node:path";
+import { readFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { parseAgentsMd } from "./agents-md.js";
 import { parseFafm } from "./memory.js";
 import { resolveIdentity, serverCardMeta, META_NS } from "./identity.js";
 import { PUBLISH_MEMORY_ENV, SERVER_CARD_URI } from "./constants.js";
 import { escapeHtml, renderInline, renderMarkdown, slug } from "./md.js";
+import { cardInitials, renderBusinessCard } from "agent-business-card";
+// The renderer lives in agent-business-card; these readers build the card from a project's files.
+export { cardInitials, renderBusinessCard, safeAccent } from "agent-business-card";
 /** AAIF brand orange (aaif.io): this project's own card colour, declared in its `.fafa`. */
 export const AAIF_ACCENT = "#FF702D";
-const ACCENT_OK = /^#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{2})?)?$/;
-/** A valid hex colour, or undefined. Nothing else ever reaches the stylesheet. */
-export function safeAccent(a) {
-    return a && ACCENT_OK.test(a) ? a : undefined;
-}
-/*
- * No colour = ink. A card's colour is the owner's to declare (or the reader's
- * to pass); nothing is guessed. Without one the accent is the card's own ink:
- * black on a light card, white on a dark one, and the monogram's letter takes
- * the card colour so it stays readable.
- */
-const INK_CSS = `
-:root{--accent:#0a0a0a}
-@media (prefers-color-scheme:dark){:root{--accent:#fafafa}}
-.bcard{--accent:var(--fg)}
-.logo{color:var(--card)}
-`;
-const CSS = (accent) => `
-/* The page and the card are themed independently. The page follows the
-   viewer's OS. The card is the owner's choice: body[data-theme] (light | dark;
-   none = follow the OS), and the reader can switch it with the ◐ toggle (#ink). */
-:root{
-  ${accent ? `--accent:${accent};` : ""}
-  --page-bg:#f4f4f5;--page-muted:#6b6b70;--page-line:rgba(0,0,0,.09);--page-chip:rgba(0,0,0,.05);
-}
-@media (prefers-color-scheme:dark){
-  :root{--page-bg:#000;--page-muted:#9a9aa0;--page-line:rgba(255,255,255,.13);--page-chip:rgba(255,255,255,.07)}
-}
-.bcard{--card:#fff;--fg:#0a0a0a;--muted:#6b6b70;--line:rgba(0,0,0,.09);--chip:rgba(0,0,0,.05);--card-shadow:0 1px 3px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10)}
-body[data-theme="dark"] .bcard,
-body[data-theme="light"] #ink:checked~.stage .bcard{--card:#0d0d0d;--fg:#fafafa;--muted:#9a9aa0;--line:rgba(255,255,255,.13);--chip:rgba(255,255,255,.07);--card-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 40px color-mix(in srgb,var(--accent) 20%,transparent)}
-body[data-theme="dark"] #ink:checked~.stage .bcard{--card:#fff;--fg:#0a0a0a;--muted:#6b6b70;--line:rgba(0,0,0,.09);--chip:rgba(0,0,0,.05);--card-shadow:0 1px 3px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10)}
-@media (prefers-color-scheme:dark){
-  body:not([data-theme]) .bcard{--card:#0d0d0d;--fg:#fafafa;--muted:#9a9aa0;--line:rgba(255,255,255,.13);--chip:rgba(255,255,255,.07);--card-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 40px color-mix(in srgb,var(--accent) 20%,transparent)}
-  body:not([data-theme]) #ink:checked~.stage .bcard{--card:#fff;--fg:#0a0a0a;--muted:#6b6b70;--line:rgba(0,0,0,.09);--chip:rgba(0,0,0,.05);--card-shadow:0 1px 3px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10)}
-}
-@media (prefers-color-scheme:light){
-  body:not([data-theme]) #ink:checked~.stage .bcard{--card:#0d0d0d;--fg:#fafafa;--muted:#9a9aa0;--line:rgba(255,255,255,.13);--chip:rgba(255,255,255,.07);--card-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 40px color-mix(in srgb,var(--accent) 20%,transparent)}
-}
-.bcard{color:var(--fg)}
-*{box-sizing:border-box}
-body{margin:0;background:var(--page-bg);color:var(--page-muted);
-  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-  padding:40px 16px}
-/* ── the business card: two faces, flip, two views ─────────────────── */
-.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
-.stage{max-width:760px;margin:0 auto}
-.views{display:flex;justify-content:flex-end;margin:0 0 10px}
-.view,.hint label{cursor:pointer}
-.view{font-size:.78rem;font-weight:600;padding:3px 11px;border-radius:20px;border:1px solid var(--page-line);
-  background:var(--page-chip);color:var(--page-muted);letter-spacing:.2em}
-.views{gap:8px}
-.view:hover,.hint label:hover{color:var(--accent);border-color:var(--accent)}
-.bcard{margin:0 auto;width:100%;aspect-ratio:7/4;perspective:1600px}
-#portrait:checked~.stage{max-width:480px}
-#portrait:checked~.stage .bcard{aspect-ratio:4/7}
-.faces{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s ease}
-#flip:checked~.stage .faces{transform:rotateY(180deg)}
-.face{position:absolute;inset:0;background:var(--card);border:1px solid var(--line);border-radius:16px;
-  box-shadow:var(--card-shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
-.back{transform:rotateY(180deg) translateZ(1px);display:flex;flex-direction:column}
-/* The face turned away takes no pointer or wheel events, so the visible face
-   scrolls (a hidden backface can still win hit-testing, notably in Chrome/Safari on macOS). */
-#flip:checked~.stage .front,#flip:not(:checked)~.stage .back{pointer-events:none;visibility:hidden;transition:visibility 0s .3s}
-#flip:checked~.stage .back,#flip:not(:checked)~.stage .front{visibility:visible;transition:visibility 0s .3s}
-.panes{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
-.front{display:flex;flex-direction:column;justify-content:center;padding:34px 44px;
-  border-top:5px solid var(--accent);
-  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--card)) 0%,var(--card) 55%)}
-.front .id{max-width:34em}
-h1{margin:0;font-size:2.1rem;line-height:1.15;letter-spacing:-.025em}
-.title{margin:8px 0 0;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
-.oneliner{margin:16px 0 0;font-size:1.05rem;color:var(--muted);line-height:1.5}
-.foot-front{position:absolute;left:44px;right:130px;bottom:22px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
-.domain{font:.8rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
-.corner{position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
-  cursor:pointer;font-weight:700;font-size:.9rem;color:var(--muted);background:var(--chip);border:1px solid var(--line);z-index:4}
-.corner:hover{color:var(--accent);border-color:var(--accent)}
-.corner.tr{top:16px;right:16px;font-family:Georgia,serif;font-style:italic}
-.logo{position:absolute;top:34px;left:44px;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
-  color:#fff;font-weight:800;font-size:2rem;letter-spacing:-.02em;line-height:1;
-  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent) 45%,color-mix(in srgb,var(--accent) 50%,#000));
-  box-shadow:0 0 0 3px var(--card),0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent),0 6px 20px color-mix(in srgb,var(--accent) 30%,transparent)}
-.front .id{margin-top:70px}
-.corner.br{bottom:16px;right:16px}
-.flipbtn{position:absolute;right:18px;bottom:16px;z-index:4;cursor:pointer;width:42px;height:42px;border-radius:50%;
-  display:grid;place-items:center;color:var(--fg);background:transparent;box-shadow:inset 0 0 0 2px var(--fg);
-  transition:transform .2s ease}
-.flipbtn span{font-size:1.3rem;line-height:1;font-weight:700}
-
-/* the back's button: same spot and outline as the front's; ↺ instead of ↻. Over
-   scrolling text it takes the card's colour, so the arrow stays readable. */
-.flipbtn.back-btn{background:var(--card)}
-/* fast tooltip: shows at once on hover or keyboard focus (a title tooltip waits ~1 s) */
-.flipbtn[data-tip]::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 8px);white-space:nowrap;
-  font:600 .74rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:0;padding:6px 9px;border-radius:7px;
-  color:var(--card);background:var(--fg);opacity:0;transform:translateY(3px);pointer-events:none;transition:opacity .08s,transform .08s}
-.flipbtn[data-tip]:hover::after,#flip:focus-visible~.stage .flipbtn[data-tip]::after{opacity:1;transform:none}
-.flipbtn:hover{transform:none}.flipbtn:hover span{transform:rotate(-25deg)}.flipbtn span{transition:transform .2s ease}
-.whatis{position:absolute;top:16px;right:16px;z-index:5}
-.whatis>summary{position:static;list-style:none}
-.whatis>summary::-webkit-details-marker{display:none}
-.whatis[open]>summary{color:var(--accent);border-color:var(--accent)}
-.whatis-panel{position:absolute;right:0;top:38px;width:min(320px,70vw);padding:14px 16px;border-radius:12px;
-  background:var(--card);border:1px solid var(--line);box-shadow:var(--card-shadow);font-size:.84rem;line-height:1.5}
-.whatis-panel p{margin:0 0 8px}.whatis-head{font-weight:800;color:var(--accent);letter-spacing:-.01em;font-size:.95rem}
-.whatis-foot{color:var(--muted);margin:0!important}.whatis-panel code{font:.86em ui-monospace,SFMono-Regular,Menlo,monospace}
-.tabbar{display:flex;flex-wrap:wrap;gap:4px;padding:14px 60px 0 18px;border-bottom:1px solid var(--line);border-top:5px solid var(--accent)}
-.tabbar label{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--muted);padding:6px 11px;border-radius:8px 8px 0 0}
-.tabbar label:hover{color:var(--fg)}
-.panes{flex:1;overflow:auto;padding:20px 26px 72px}
-.pane{display:none}
-.lead{margin:0 0 14px;font-size:1rem;line-height:1.6}
-.kv{border-collapse:collapse;font-size:.86rem;width:100%}
-.kv th{text-align:left;font-weight:600;color:var(--muted);padding:6px 14px 6px 0;white-space:nowrap;vertical-align:top}
-.kv td{padding:6px 0;border-bottom:1px solid var(--line)}
-.kv code,.lead code{font:.86em ui-monospace,SFMono-Regular,Menlo,monospace}
-.hint{text-align:center;color:var(--page-muted);font-size:.78rem;margin:14px 0 0}
-.hint label{color:var(--accent)}
-#flip:focus-visible~.stage .flipbtn,#portrait:focus-visible~.stage .view[for=portrait],#ink:focus-visible~.stage .view[for=ink]{outline:2px solid var(--accent);outline-offset:2px}
-@media (max-width:640px){
-  .bcard,#portrait:checked~.stage .bcard{aspect-ratio:auto;height:min(78vh,720px)}
-  .front{padding:28px 26px}.foot-front{left:26px}
-  .logo{top:24px;left:26px;width:64px;height:64px;font-size:1.5rem}.front .id{margin-top:56px}
-  h1{font-size:1.7rem}
-}
-/* flat: expanded render and print — both faces, every tab, no flip */
-.flat .faces,.flat .face{position:static;transform:none!important;height:auto}
-.flat .bcard{aspect-ratio:auto;perspective:none}
-.flat .face{margin:0 0 18px}.flat .front{min-height:260px;position:relative}
-.flat .pane{display:block;margin:0 0 22px}.flat .bcard{color:var(--fg)}.flat .tabbar,.flat .views,.flat .hint,.flat .corner,.flat .flipbtn,.flat .whatis{display:none}
-.flat .panes{overflow:visible}
-@media print{
-  .faces,.face{position:static!important;transform:none!important;height:auto!important}
-  .bcard{aspect-ratio:auto!important}.face{margin:0 0 18px;box-shadow:none}
-  .pane{display:block!important;margin:0 0 22px}.tabbar,.views,.hint,.corner,.flipbtn,.whatis{display:none!important}
-  .panes{overflow:visible}
-}
-.pills{display:flex;flex-wrap:wrap;gap:6px}
-.pill{font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--chip);color:var(--muted)}
-.pill.accent{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
-.label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
-  color:var(--accent);margin:0 0 14px}
-.toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none}
-.toc a{font-size:.82rem;color:var(--muted);text-decoration:none}
-.toc a:hover{color:var(--accent)}
-/* ── collapsible context ─────────────────────────────────────────── */
-.ctx-nav{position:sticky;top:-20px;z-index:3;background:var(--card);
-  margin:0 -26px 16px;padding:11px 26px;border-bottom:1px solid var(--line);
-  display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 16px}
-.xall{margin-left:auto;flex:none;font:inherit;font-size:.76rem;font-weight:600;
-  white-space:nowrap;padding:3px 11px;border-radius:20px;border:1px solid var(--line);
-  background:var(--chip);color:var(--muted);cursor:pointer}
-.xall:hover{color:var(--accent);border-color:var(--accent)}
-.ctx-preamble{padding-bottom:4px}
-details.ctx-section{border-top:1px solid var(--line)}
-details.ctx-section>summary{cursor:pointer;list-style:none;padding:11px 0;
-  font-weight:600;font-size:1rem;letter-spacing:-.01em;display:flex;gap:9px}
-details.ctx-section>summary::-webkit-details-marker{display:none}
-details.ctx-section>summary::before{content:"›";color:var(--accent);font-weight:700;
-  transition:transform .15s ease}
-details.ctx-section[open]>summary::before{transform:rotate(90deg)}
-details.ctx-section>.md{padding:0 0 16px}
-@media print{
-  .ctx-nav{display:none}
-  details.ctx-section:not([open])>.md{display:block!important}
-  details.ctx-section>summary::before{content:""}
-}
-.md h1,.md h2,.md h3,.md h4{margin:22px 0 8px;font-size:1rem;letter-spacing:-.01em}
-.md h1{font-size:1.15rem}
-.md p{margin:8px 0}
-.md ul,.md ol{margin:8px 0;padding-left:22px}
-.md li{margin:3px 0}
-.md code{background:var(--chip);padding:1px 5px;border-radius:5px;
-  font:.86em ui-monospace,SFMono-Regular,Menlo,monospace}
-.md pre{background:var(--chip);padding:14px 16px;border-radius:9px;overflow:auto}
-.md pre code{background:none;padding:0}
-.md table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.88rem;display:block;overflow:auto}
-.md th,.md td{border:1px solid var(--line);padding:6px 10px;text-align:left}
-.md blockquote{margin:10px 0;padding-left:14px;border-left:3px solid var(--line);color:var(--muted)}
-.md a{color:var(--accent)}
-.fact{padding:12px 0;border-bottom:1px solid var(--line)}
-.fact:last-child{border-bottom:0}
-.fact p{margin:0 0 7px}
-.meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
-.tag{font-size:.72rem;padding:2px 8px;border-radius:5px;background:var(--chip);color:var(--muted)}
-.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
-.dot.pending{background:var(--muted)}
-.disc{width:100%;border-collapse:collapse;font-size:.84rem}
-.disc th,.disc td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}
-.disc th{color:var(--muted);font-weight:600}
-.disc code{font:.86em ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
-.fetch{margin:14px 0 0;font-size:.82rem;color:var(--muted)}
-.fetch code{background:var(--chip);padding:1px 5px;border-radius:5px}
-.none{color:var(--muted);font-style:italic}
-`;
-const htmlAttr = (theme) => theme === "auto" ? "" : ` data-theme="${theme}"`;
 /** What the front calls this thing, from where it runs: "MCP server", "A2A agent", or both. */
 export function cardKind(id) {
     const kinds = [];
@@ -229,28 +39,6 @@ export function cardKind(id) {
 export function cardTitle(id) {
     return [cardKind(id).join(" · "), id?.agentVersion ? `v${id.agentVersion}` : ""].filter(Boolean).join(" · ");
 }
-/** The front's logo: the first letters of the name's first two words ("mcp-context-card" → "MC"). */
-/** Words that say what kind of thing it is, not whose: never the logo ("mcp-context-card" → C, not M). */
-const GENERIC_WORDS = new Set(["mcp", "server", "servers", "sdk", "agent", "agents", "api", "cli", "app", "tool", "tools", "plugin", "core", "the"]);
-/** Names whose two-letter mark is obvious. */
-const OBVIOUS_MARKS = { github: "GH", gitlab: "GL", typescript: "TS", javascript: "JS" };
-/**
- * The front's logo: the first letter of the name's first meaningful word
- * (generic words like "mcp", "server", "sdk" skipped), plus a second letter
- * only when it's obvious: a known name (github → GH, typescript → TS) or a
- * word written with two capitals (GitHub, TypeScript). Never more than two.
- */
-export function cardInitials(name) {
-    const words = name.split(/[^\p{L}\p{N}]+/u).filter(Boolean);
-    const first = words.find((w) => !GENERIC_WORDS.has(w.toLowerCase())) ?? words[0] ?? "";
-    const known = OBVIOUS_MARKS[first.toLowerCase()];
-    if (known)
-        return known;
-    const capitals = first.match(/\p{Lu}/gu) ?? [];
-    if (capitals.length === 2 && /^\p{Lu}/u.test(first) && /\p{Ll}/u.test(first))
-        return capitals.join("");
-    return (Array.from(first)[0] ?? "").toUpperCase();
-}
 /** The front's one-liner: the first sentence of the description. */
 export function cardOneLiner(id, max = 140) {
     const d = id?.description;
@@ -264,10 +52,95 @@ export function cardOneLiner(id, max = 140) {
     const pause = /\s[—–]\s|;\s|:\s/.exec(d);
     return pause && pause.index >= 40 && pause.index <= max ? d.slice(0, pause.index).trim() : first;
 }
-/** The project's card: read its files, then draw. */
+/** MCP Apps helper, bundled at build time. Same bytes in src/ and, after build, dist/. */
+const CARD_APP_JS = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "card-app.bundle.js"), "utf8");
+/**
+ * A plain card (tool text, the saved file, GET /card, the CLI, docs/) must
+ * not exceed this. The ui:// resource is separate and is not checked here.
+ */
+export const PLAIN_CARD_LIMIT_BYTES = 64 * 1024;
+/** True when a plain card exceeds 64 KB. card:check fails on that. */
+export function plainCardExceedsLimit(html) {
+    return Buffer.byteLength(html) > PLAIN_CARD_LIMIT_BYTES;
+}
+/**
+ * Add the bundled helper as its own inline script, after the card's script.
+ * Its own element, so an error in the card's script (a malformed URL hash)
+ * can't stop the helper. The page is already the full card; the helper is
+ * only for an MCP Apps host.
+ */
+function withCardApp(html) {
+    const close = html.lastIndexOf("</script>");
+    if (close === -1)
+        return html;
+    const end = close + "</script>".length;
+    return `${html.slice(0, end)}\n<script data-card-app>\n${CARD_APP_JS}\n</script>${html.slice(end)}`;
+}
+/** The same sections, facts and identity the full card is built from. */
+function inlineCounts(root) {
+    const agents = parseAgentsMd(join(root, "AGENTS.md"));
+    const mem = parseFafm(join(root, "project.fafm"));
+    const id = resolveIdentity(root);
+    return {
+        sections: agents?.sections.filter((s) => s.level > 1).length ?? 0,
+        facts: mem.facts.length,
+        identity: id !== null,
+    };
+}
+function countLabel(n, word) {
+    return `${n} ${word}${n === 1 ? "" : "s"}`;
+}
+/**
+ * The inline view: monogram, name, kind · version, one line, a counts strip,
+ * and one action. Hidden until a host's display mode is inline or pip.
+ * No host, and the script off, keep the full card.
+ */
+function inlineView(card, counts) {
+    const kind = card.title ? `<p class="kind">${escapeHtml(card.title)}</p>` : "";
+    const line = card.oneLiner ? `<p class="line">${escapeHtml(card.oneLiner)}</p>` : "";
+    const strip = `${countLabel(counts.sections, "section")} · ${countLabel(counts.facts, "fact")} · ${counts.identity ? "identity" : "no identity"}`;
+    return `<style>
+#inline-view{--iv-fg:#0a0a0a;--iv-bg:#fff;--iv-muted:#6b6b70;--iv-line:rgba(0,0,0,.12);color:var(--iv-fg);background:var(--iv-bg);border:1px solid var(--iv-line);border-top:4px solid var(--accent,#FF702D);border-radius:14px;padding:12px 14px;font:14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
+body[data-theme="dark"] #inline-view{--iv-fg:#fafafa;--iv-bg:#0d0d0d;--iv-muted:#9a9aa0;--iv-line:rgba(255,255,255,.16)}
+@media (prefers-color-scheme:dark){body:not([data-theme]) #inline-view{--iv-fg:#fafafa;--iv-bg:#0d0d0d;--iv-muted:#9a9aa0;--iv-line:rgba(255,255,255,.16)}}
+#inline-view .row{display:flex;gap:12px;align-items:center}
+#inline-view .mark{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-weight:800;background:var(--accent,#FF702D)}
+#inline-view h2{margin:0;font-size:1.05rem;line-height:1.2;letter-spacing:-.02em}
+#inline-view .kind{margin:2px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#FF702D)}
+#inline-view .line{margin:8px 0 0;color:var(--iv-muted)}
+#inline-view .counts{margin:8px 0 0;font-size:.78rem;color:var(--iv-muted)}
+#inline-view .open{margin-top:10px;font:inherit;font-size:.85rem;font-weight:650;padding:6px 12px;border-radius:999px;border:1px solid var(--accent,#FF702D);background:transparent;color:var(--accent,#FF702D);cursor:pointer}
+#inline-view .saved{margin:8px 0 0;font-size:.8rem;color:var(--iv-muted)}
+html[data-view="inline"] body{padding:8px;background:transparent}
+html[data-view="inline"] body>:not(#inline-view){display:none}
+</style>
+<div class="row"><div class="mark" aria-hidden="true">${escapeHtml(cardInitials(card.name))}</div><div><h2>${escapeHtml(card.name)}</h2>${kind}</div></div>
+${line}
+<p class="counts">${strip}</p>
+<button type="button" id="open-full-card" class="open">Open full card</button>
+<p id="inline-saved" class="saved" hidden>This host keeps the inline view. Ask for <code>save_context_card</code> to write the full card to <code>context-card.html</code>.</p>`;
+}
+/** Drop the hidden inline view at the top of <body>. The full card stays the page. */
+function withInlineView(html, block) {
+    const body = /<body[^>]*>/.exec(html);
+    if (!body || body.index === undefined)
+        return html;
+    const at = body.index + body[0].length;
+    return `${html.slice(0, at)}\n<!-- inline-view -->\n<div id="inline-view" hidden>\n${block}\n</div>\n<!-- /inline-view -->${html.slice(at)}`;
+}
+/** The project's card: read its files and draw. No helper, no inline view. */
 export function renderCard(root, opts = {}) {
     return renderBusinessCard(readCard(root, opts), opts);
 }
+/**
+ * ui://mcp-context-card/card.html — the same card, plus the hidden inline
+ * view and the bundled MCP Apps helper. Nothing else calls this.
+ */
+export function renderAppsCard(root, opts = {}) {
+    const card = readCard(root, opts);
+    const drawn = withInlineView(renderBusinessCard(card, opts), inlineView(card, inlineCounts(root)));
+    return withCardApp(drawn);
+}
 /** The (i) panel for an agent or server card. */
 const AGENT_ABOUT = `<p class="whatis-head">Business Cards for Agents</p>
             <p>This is the public card of an AI agent or MCP server: who it is, what it does, where to reach it. Flip it for the detail.</p>
@@ -384,110 +257,6 @@ export function readCard(root, opts = {}) {
         ...(id?.accent ? { accent: id.accent } : {}),
     };
 }
-/** Draw any business card as one self-contained HTML page. */
-export function renderBusinessCard(card, opts = {}) {
-    const theme = opts.theme ?? "auto";
-    const accent = safeAccent(opts.accent) ?? safeAccent(card.accent);
-    const portrait = opts.layout === "portrait";
-    const flat = !!opts.expanded;
-    const { name, title, oneLiner, domain } = card;
-    const tabs = card.tabs.map((t) => ({ ...t, key: t.key.replace(/[^a-z0-9-]/gi, "").toLowerCase() || "tab" }));
-    const pills = card.chips
-        .map((c) => `<span class="pill${c.accent ? " accent" : ""}">${escapeHtml(c.text)}</span>`)
-        .join("");
-    const radios = tabs
-        .map((t, i) => `<input type="radio" name="tab" id="t-${t.key}" class="sr"${i === 0 ? " checked" : ""}>`)
-        .join("");
-    const tabbar = tabs.map((t) => `<label for="t-${t.key}">${escapeHtml(t.label)}</label>`).join("");
-    const panes = tabs
-        .map((t) => `<div class="pane p-${t.key}"><p class="label">${escapeHtml(t.heading)}</p>${t.html}</div>`)
-        .join("");
-    // One CSS rule pair per tab: its pane shows, its label lights, when its radio is checked.
-    const tabCss = tabs
-        .map((t) => `#t-${t.key}:checked~.panes .p-${t.key}{display:block}#t-${t.key}:checked~.tabbar label[for=t-${t.key}]{color:var(--accent);background:var(--chip)}`)
-        .join("");
-    // The (i) panel: the same control, in the same spot, on both faces.
-    const WHATIS = `<details class="whatis">
-          <summary class="corner tr" title="About this card" aria-label="About this card">i</summary>
-          <div class="whatis-panel">
-            ${card.about}
-          </div>
-        </details>`;
-    return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>${escapeHtml(name)} — business card</title>
-<style>${CSS(accent)}${accent ? "" : INK_CSS}${tabCss}</style>
-</head>
-<body${flat ? ` class="flat"` : ""}${htmlAttr(theme)}>
-<input type="checkbox" id="flip" class="sr" aria-label="Flip the card">
-<input type="checkbox" id="ink" class="sr" aria-label="Switch the card between light and dark">
-<input type="checkbox" id="portrait" class="sr" aria-label="Portrait view"${portrait ? " checked" : ""}>
-<div class="stage">
-  <div class="views"><label for="ink" class="view" title="Card: light or dark">◐</label><label for="portrait" class="view" title="Landscape or portrait">▭ ▯</label></div>
-  <main class="bcard">
-    <div class="faces">
-      <section class="face front">
-        <div class="logo" aria-hidden="true">${escapeHtml(cardInitials(name))}</div>
-        ${WHATIS}
-        <div class="id">
-          <h1>${escapeHtml(name)}</h1>
-          ${title ? `<p class="title">${escapeHtml(title)}</p>` : ""}
-          ${oneLiner ? `<p class="oneliner">${escapeHtml(oneLiner)}</p>` : ""}
-        </div>
-        <div class="foot-front">${domain ? `<span class="domain">${escapeHtml(domain)}</span>` : ""}${pills ? `<div class="pills">${pills}</div>` : ""}</div>
-        <label for="flip" class="flipbtn" data-tip="Flip the card" aria-label="Flip the card"><span aria-hidden="true">↻</span></label>
-      </section>
-      <section class="face back">
-        ${radios}
-        ${WHATIS}
-        <div class="tabbar">${tabbar}</div>
-        <div class="panes">${panes}</div>
-        <label for="flip" class="flipbtn back-btn" data-tip="Flip back" aria-label="Flip back"><span aria-hidden="true">↺</span></label>
-      </section>
-    </div>
-  </main>
-  <p class="hint">${escapeHtml(name)} · business card · <label for="flip">flip it over</label></p>
-</div>
-${CARD_SCRIPT}
-</body>
-</html>
-`;
-}
-/**
- * The card's only script — a progressive enhancement. Flip, tabs and the view
- * toggle are CSS (checkbox and radio inputs) and work without it. It adds:
- * Expand all / Collapse all for the context sections, opening the section a
- * `#hash` names (flipping to the back and its Context tab first), and opening
- * every section for printing (browsers disagree on printing a closed
- * `<details>`).
- */
-const CARD_SCRIPT = `<script>
-(function(){
-  var secs=[].slice.call(document.querySelectorAll("details.ctx-section"));
-  var btn=document.querySelector(".xall");
-  var sync=function(){if(btn)btn.textContent=secs.every(function(d){return d.open})?"Collapse all":"Expand all"};
-  if(btn&&secs.length){
-    btn.hidden=false;
-    btn.addEventListener("click",function(){var open=!secs.every(function(d){return d.open});secs.forEach(function(d){d.open=open});sync()});
-    secs.forEach(function(d){d.addEventListener("toggle",sync)});
-  }
-  var openHash=function(){
-    var d=document.getElementById(decodeURIComponent(location.hash.slice(1)));
-    if(!d||d.tagName!=="DETAILS")return;
-    var f=document.getElementById("flip"),t=document.getElementById("t-context");
-    if(f)f.checked=true;if(t)t.checked=true;d.open=true;sync();
-    setTimeout(function(){d.scrollIntoView({block:"nearest"})},620);
-  };
-  addEventListener("hashchange",openHash);openHash();
-  var pre=[];
-  addEventListener("beforeprint",function(){pre=secs.map(function(d){return d.open});secs.forEach(function(d){d.open=true})});
-  addEventListener("afterprint",function(){secs.forEach(function(d,i){d.open=pre[i]});sync()});
-  sync();
-})();
-</script>`;
 const TLDR_FACTS = 5;
 const TLDR_CHARS = 160;
 /**

package/dist/server-card.js

@@ -10,7 +10,8 @@
  * `name`, `title` and `version` are the same values the live connection reports
  * in `serverInfo`, so the card never contradicts runtime.
  */
-import { SUPPORTED_PROTOCOL_VERSIONS } from "@modelcontextprotocol/sdk/types.js";
+import { SUPPORTED_PROTOCOL_VERSIONS } from "@modelcontextprotocol/server";
+import { MODERN_PROTOCOL_VERSIONS } from "./constants.js";
 import { DESCRIPTION, MCP_PATH, REGISTRY_NAME, REPOSITORY_URL, SERVER_CARD_SCHEMA, TITLE, VERSION, } from "./constants.js";
 import { serverCardMeta } from "./identity.js";
 export function serverCard(opts = {}) {
@@ -28,7 +29,7 @@ export function serverCard(opts = {}) {
                     {
                         type: "streamable-http",
                         url: `${opts.origin}${MCP_PATH}`,
-                        supportedProtocolVersions: [...SUPPORTED_PROTOCOL_VERSIONS],
+                        supportedProtocolVersions: [...MODERN_PROTOCOL_VERSIONS, ...SUPPORTED_PROTOCOL_VERSIONS],
                     },
                 ],
             }

package/dist/server.d.ts

@@ -13,10 +13,15 @@
  *      and `GET /.well-known/mcp/server-card` (out of band, http transport).
  *   2. ai-catalog — `GET /.well-known/ai-catalog.json`, three sibling entries
  *      keyed by media type (see catalog-gen.ts).
+ *
+ * Both protocol eras are served: 2026-07-28 (`server/discover`, a `_meta`
+ * envelope on every request) and 2025 (`initialize`). See docs/TRANSPORT.md.
  */
-import { Server } from "@modelcontextprotocol/sdk/server/index.js";
-import type { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
+import { type StdioServerHandle } from "@modelcontextprotocol/server/stdio";
+import { Server } from "@modelcontextprotocol/server";
+import type { ProtocolEra, Transport } from "@modelcontextprotocol/server";
 export { NAME, VERSION, SERVER_CARD_URI } from "./constants.js";
+import { type CardApp } from "./constants.js";
 /** Default package root — `dist/` at runtime, `src/` under tsx. Both are one up. */
 export declare const ROOT: string;
 /**
@@ -40,7 +45,18 @@ export interface ServerOptions {
     detectRoot?: boolean;
     /** The directory the server was started in (default: process.cwd()). */
     cwd?: string;
+    /** What the ui:// card carries: `helper` (MCP Apps helper, the default) or
+     *  `plain`. Default: MCP_CONTEXT_CARD_APP, else `helper`. */
+    cardApp?: CardApp;
+    /** The protocol era this instance serves, set by the stdio/HTTP factory:
+     *  "modern" = 2026-07-28, "legacy" = 2024-10-07 … 2025-11-25 (the default). */
+    era?: ProtocolEra;
 }
 export declare function createServer(root?: string, opts?: ServerOptions): Server;
-/** Connect a server instance to a transport (stdio or http). */
+/** Serve over stdio, both protocol eras: a 2026-07-28 client connects with
+ *  `server/discover`, a 2025 client with `initialize`. The factory builds one
+ *  instance per connection, for that connection's era. */
+export declare function serveStdioServer(root?: string, opts?: ServerOptions): StdioServerHandle;
+/** Connect a server instance to a transport you supply. 2025 era only (the
+ *  transport decides the wire); for both eras use `serveStdioServer` or `httpApp`. */
 export declare function serve(transport: Transport, root?: string, opts?: ServerOptions): Promise<Server>;