@cyanheads/mcp-ts-core 0.5.4 → 0.6.1

package/dist/mcp-server/transports/http/landing-page.js

@@ -0,0 +1,1529 @@
+/**
+ * @fileoverview HTML landing page served at `GET /`. Self-contained,
+ * zero-dependency renderer producing a branded, a11y-conscious,
+ * `prefers-color-scheme`-aware page from the shared `ServerManifest`.
+ *
+ * The page is the human-facing sibling of `/mcp` (bespoke JSON) and
+ * `/.well-known/mcp.json` (SEP-1649 Server Card). Framework owns the design
+ * system; servers supply content through `LandingConfig`.
+ *
+ * ## Surfaces
+ *
+ * - Hero — eyebrow, display-size server name, version + pre-release chips,
+ *   tagline, single-line status strip, terminal-chrome connection card,
+ *   framework attribution pill
+ * - Tools section — responsive 2-column card grid; prefix-grouped; per-card
+ *   annotation chips, invocation snippet, view-source link, schema preview
+ * - Resources section — URI template, mime type, description, view-source link
+ * - Prompts section — args list, view-source link
+ * - Extensions section — rendered when SEP-2133 extensions are present
+ * - Footer — single-row, dim, separator-dot delimited
+ *
+ * @module src/mcp-server/transports/http/landing-page
+ */
+import { escapeHtml, html, unsafeRaw } from '../../../utils/formatting/html.js';
+import { logger } from '../../../utils/internal/logger.js';
+import { requestContextService } from '../../../utils/internal/requestContext.js';
+// ---------------------------------------------------------------------------
+// Tokens — inlined once per page
+// ---------------------------------------------------------------------------
+/** Single inlined `<style>` block. No external CSS, no fonts. */
+function renderTokens(accent) {
+    const safeAccent = escapeHtml(accent);
+    const css = `
+:root {
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
+  --space-12: 48px; --space-16: 64px; --space-20: 80px;
+
+  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
+  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-display: clamp(2rem, 4.5vw + 0.5rem, 3.5rem);
+
+  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
+  --radius-lg: 14px; --radius-pill: 999px;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  --accent: ${safeAccent};
+  --accent-hover: color-mix(in oklab, ${safeAccent}, black 10%);
+  --accent-edge: color-mix(in oklab, ${safeAccent}, transparent 65%);
+  --accent-soft: color-mix(in oklab, ${safeAccent}, transparent 82%);
+  --accent-softer: color-mix(in oklab, ${safeAccent}, transparent 92%);
+
+  --bg: #fcfcfd;
+  --bg-subtle: #f5f5f7;
+  --bg-elevated: #ffffff;
+  --bg-code: #f7f7f9;
+  --fg: #09090b;
+  --fg-muted: #52525b;
+  --fg-subtle: #a1a1aa;
+  --border: #e4e4e7;
+  --border-subtle: #ececf0;
+  --border-strong: #d4d4d8;
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
+  --shadow-md: 0 4px 20px -8px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
+  --grid-dot: rgb(0 0 0 / 0.045);
+  --glow-strength: 0.08;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #08090d;
+    --bg-subtle: #0f1015;
+    --bg-elevated: #0d0e13;
+    --bg-code: #0a0b10;
+    --fg: #ededef;
+    --fg-muted: #a1a1a8;
+    --fg-subtle: #6b6b73;
+    --border: #1f2027;
+    --border-subtle: #16171c;
+    --border-strong: #2a2b33;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
+    --shadow-md: 0 4px 24px -8px rgb(0 0 0 / 0.55), 0 1px 2px rgb(0 0 0 / 0.3);
+    --grid-dot: rgb(255 255 255 / 0.028);
+    --glow-strength: 0.12;
+  }
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+html { color-scheme: light dark; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: 1.5;
+  color: var(--fg);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Top accent hairline — spans viewport, brand-variable gradient. */
+body::before {
+  content: "";
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    color-mix(in oklab, var(--accent), transparent 60%) 15%,
+    var(--accent) 50%,
+    color-mix(in oklab, var(--accent), transparent 60%) 85%,
+    transparent 100%);
+  z-index: 100;
+  pointer-events: none;
+}
+
+/* Ambient background — radial accent glow top-left + fine dot grid. */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(ellipse 70% 55% at 12% -5%, color-mix(in oklab, var(--accent), transparent calc((1 - var(--glow-strength)) * 100%)), transparent 60%),
+    radial-gradient(circle at center, var(--grid-dot) 1px, transparent 1.5px);
+  background-size: 100% 100%, 24px 24px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+::selection { background: var(--accent-soft); color: var(--fg); }
+
+main {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: var(--space-10) var(--space-6) var(--space-20);
+  position: relative;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+a:hover { color: var(--accent-hover); }
+a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
+
+code, pre {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  font-feature-settings: "liga" 0, "calt" 0;
+}
+code {
+  background: var(--bg-subtle);
+  padding: 0.1em 0.35em;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border-subtle);
+  font-size: 0.85em;
+}
+pre {
+  background: var(--bg-code);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: var(--space-4);
+  margin: 0;
+  overflow-x: auto;
+  line-height: 1.55;
+  white-space: pre;
+  color: var(--fg);
+}
+pre code { background: transparent; padding: 0; border: 0; font-size: inherit; }
+
+/* -------------------- Hero -------------------- */
+
+.hero {
+  padding: var(--space-12) 0 var(--space-10);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+.hero-eyebrow::before {
+  content: "";
+  width: 5px; height: 5px;
+  background: var(--accent);
+  border-radius: 50%;
+  box-shadow: 0 0 10px var(--accent);
+}
+
+.hero-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.hero-logo {
+  width: 44px; height: 44px;
+  border-radius: var(--radius-md);
+  object-fit: contain;
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  flex-shrink: 0;
+}
+.hero-heading {
+  margin: 0;
+  font-size: var(--text-display);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.02;
+  color: var(--fg);
+  word-break: break-word;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .hero-heading {
+    background: linear-gradient(180deg, var(--fg) 0%, color-mix(in oklab, var(--fg), transparent 25%) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+  }
+}
+.hero-tagline {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: var(--text-lg);
+  line-height: 1.5;
+  max-width: 62ch;
+}
+
+/* Version + pre-release chips */
+.badge-version {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--accent);
+  background: var(--accent-softer);
+  border: 1px solid var(--accent-edge);
+  text-decoration: none;
+  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
+}
+.badge-version:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+.badge-pre {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: #b45309;
+  background: color-mix(in oklab, #f59e0b, transparent 88%);
+  border: 1px solid color-mix(in oklab, #f59e0b, transparent 65%);
+}
+@media (prefers-color-scheme: dark) {
+  .badge-pre { color: #fbbf24; }
+}
+
+/* Status strip — single line under the tagline. */
+.status-strip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-3) 0;
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  letter-spacing: 0.01em;
+}
+.status-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+}
+.status-item + .status-item::before {
+  content: "·";
+  color: var(--fg-subtle);
+  margin-right: var(--space-2);
+  opacity: 0.7;
+}
+.status-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.status-dot-public {
+  background: #22c55e;
+  box-shadow: 0 0 0 3px color-mix(in oklab, #22c55e, transparent 80%);
+  animation: status-pulse 2.4s ease-in-out infinite;
+}
+.status-dot-gated {
+  background: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 75%);
+}
+@keyframes status-pulse {
+  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, #22c55e, transparent 80%); }
+  50% { box-shadow: 0 0 0 6px color-mix(in oklab, #22c55e, transparent 92%); }
+}
+.status-value {
+  color: var(--fg);
+  font-weight: 500;
+}
+.status-signin {
+  color: var(--fg-muted);
+  text-decoration: none;
+  border-bottom: 1px dotted var(--border-strong);
+}
+.status-signin:hover { color: var(--accent); border-color: var(--accent); }
+
+/* -------------------- Connect card -------------------- */
+
+.connect {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elevated);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  position: relative;
+}
+
+/* Chrome header — three dots + endpoint path */
+.connect-chrome {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-subtle);
+}
+.connect-chrome-dots {
+  display: inline-flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.connect-chrome-dot {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+  background: color-mix(in oklab, var(--fg-subtle), transparent 60%);
+  display: inline-block;
+}
+.connect-chrome-endpoint {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  color: var(--fg-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+/* Radio-hack tabs */
+.connect-tab-input { position: absolute; opacity: 0; pointer-events: none; }
+.connect-tabs {
+  display: flex;
+  gap: 0;
+  padding: 0 var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.connect-tabs::-webkit-scrollbar { display: none; }
+.connect-tab-label {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--fg-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  white-space: nowrap;
+  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
+}
+.connect-tab-label:hover { color: var(--fg); }
+.connect-tab-input:checked + .connect-tab-label {
+  color: var(--fg);
+  border-bottom-color: var(--accent);
+}
+.connect-tab-input:focus-visible + .connect-tab-label {
+  outline: 2px solid var(--accent);
+  outline-offset: -6px;
+  border-radius: var(--radius-sm);
+}
+
+.connect-panels { position: relative; padding: var(--space-5) var(--space-4); }
+.connect-panel { display: none; }
+.connect:has(#connect-tab-stdio:checked) .panel-stdio,
+.connect:has(#connect-tab-http:checked) .panel-http,
+.connect:has(#connect-tab-claude:checked) .panel-claude,
+.connect:has(#connect-tab-curl:checked) .panel-curl { display: block; }
+/* Fallback when :has() unsupported — show first visible panel */
+@supports not selector(:has(*)) {
+  .connect-panel:first-of-type { display: block; }
+}
+.connect-panel pre {
+  padding: var(--space-4);
+  padding-right: var(--space-12);
+  background: var(--bg-code);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+.connect-copy {
+  position: absolute;
+  top: calc(var(--space-5) + 8px);
+  right: calc(var(--space-4) + 8px);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-out);
+  letter-spacing: 0.02em;
+}
+.connect-copy:hover {
+  color: var(--accent);
+  border-color: var(--accent-edge);
+  background: var(--accent-softer);
+}
+.connect-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.connect-copy[data-copied="true"] {
+  color: #16a34a;
+  border-color: color-mix(in oklab, #16a34a, transparent 60%);
+  background: color-mix(in oklab, #16a34a, transparent 92%);
+}
+
+/* Framework attribution pill */
+.hero-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.badge-shield {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: var(--fg-muted);
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-subtle);
+  text-decoration: none;
+  transition: all var(--duration-fast) var(--ease-out);
+}
+.badge-shield:hover {
+  color: var(--accent);
+  border-color: var(--accent-edge);
+  background: var(--accent-softer);
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+.badge-shield-label { color: var(--fg-subtle); transition: color var(--duration-fast); }
+.badge-shield-value { color: var(--fg-muted); transition: color var(--duration-fast); }
+.badge-shield:hover .badge-shield-label,
+.badge-shield:hover .badge-shield-value { color: var(--accent); }
+
+/* -------------------- Sections -------------------- */
+
+section { padding: var(--space-12) 0 0; }
+
+.section-heading {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  margin: 0 0 var(--space-6);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.section-heading h2 {
+  margin: 0;
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  color: var(--fg);
+  text-transform: lowercase;
+}
+.section-count {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.group-heading {
+  margin: var(--space-6) 0 var(--space-3);
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.group-heading:first-child { margin-top: 0; }
+
+/* -------------------- Cards -------------------- */
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: var(--space-3);
+}
+.card {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--space-4) var(--space-5);
+  background: var(--bg-elevated);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  transition: border-color var(--duration-fast) var(--ease-out),
+              transform var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+  position: relative;
+}
+.card:hover {
+  border-color: var(--accent-edge);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+.card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.card-title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--fg);
+  letter-spacing: -0.015em;
+}
+.card-title a { color: inherit; }
+.card-title a:hover { color: var(--accent); text-decoration: none; }
+.card-desc {
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+.card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+  align-items: center;
+}
+.card-meta-label { color: var(--fg-subtle); }
+.card-meta code {
+  font-size: 1em;
+  color: var(--fg);
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+/* Annotation pills — dot-chip style */
+.pill-row { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--fg-muted);
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-subtle);
+  letter-spacing: 0.01em;
+}
+.pill::before {
+  content: "";
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+.pill-readonly { color: #16a34a; background: color-mix(in oklab, #16a34a, transparent 92%); border-color: color-mix(in oklab, #16a34a, transparent 72%); }
+.pill-destructive { color: #dc2626; background: color-mix(in oklab, #dc2626, transparent 92%); border-color: color-mix(in oklab, #dc2626, transparent 72%); }
+.pill-openworld { color: #2563eb; background: color-mix(in oklab, #2563eb, transparent 92%); border-color: color-mix(in oklab, #2563eb, transparent 72%); }
+.pill-task { color: var(--accent); background: var(--accent-softer); border-color: var(--accent-edge); }
+.pill-app { color: #9333ea; background: color-mix(in oklab, #9333ea, transparent 92%); border-color: color-mix(in oklab, #9333ea, transparent 72%); }
+.pill-auth { color: var(--fg-subtle); font-size: 0.65rem; }
+.pill-auth::before { display: none; }
+
+@media (prefers-color-scheme: dark) {
+  .pill-readonly { color: #4ade80; }
+  .pill-destructive { color: #f87171; }
+  .pill-openworld { color: #60a5fa; }
+  .pill-app { color: #c084fc; }
+}
+
+.source-link {
+  font-size: var(--text-xs);
+  color: var(--fg-subtle);
+  margin-left: auto;
+  font-family: var(--font-mono);
+  transition: color var(--duration-fast);
+}
+.source-link:hover { color: var(--accent); text-decoration: none; }
+
+/* Inline snippet (tool invocation) */
+.snippet {
+  position: relative;
+  margin-top: var(--space-2);
+}
+.snippet pre {
+  padding: var(--space-3);
+  padding-right: var(--space-12);
+  background: var(--bg-code);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  line-height: 1.55;
+}
+.snippet-copy {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-out);
+  letter-spacing: 0.02em;
+}
+.snippet-copy:hover { color: var(--accent); border-color: var(--accent-edge); }
+.snippet-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.snippet-copy[data-copied="true"] {
+  color: #16a34a;
+  border-color: color-mix(in oklab, #16a34a, transparent 60%);
+}
+
+/* Collapsible details (schema preview) */
+details {
+  margin-top: var(--space-1);
+  border: 0;
+  border-radius: 0;
+}
+details > summary {
+  cursor: pointer;
+  padding: 4px 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--fg-subtle);
+  list-style: none;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  transition: color var(--duration-fast);
+}
+details > summary::-webkit-details-marker { display: none; }
+details > summary::before {
+  content: "+";
+  display: inline-block;
+  width: 10px;
+  text-align: center;
+  color: var(--fg-subtle);
+  font-weight: 600;
+  transition: transform var(--duration-fast), color var(--duration-fast);
+}
+details[open] > summary::before { content: "−"; color: var(--accent); }
+details > summary:hover { color: var(--accent); }
+details > pre {
+  margin-top: var(--space-2);
+  font-size: 0.7rem;
+  line-height: 1.55;
+}
+
+/* Prompt args */
+.args-list {
+  list-style: none;
+  padding: 0;
+  margin: var(--space-1) 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  font-family: var(--font-mono);
+}
+.args-list li { line-height: 1.6; }
+.args-list code {
+  font-size: 1em;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--fg);
+}
+.args-required {
+  color: var(--accent);
+  font-size: 0.625rem;
+  font-weight: 600;
+  margin-left: 5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* Extensions */
+.ext-card { background: var(--bg-subtle); border-color: var(--border-subtle); }
+.ext-key { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg); }
+.ext-preview {
+  margin: var(--space-2) 0 0;
+  font-size: 0.7rem;
+  line-height: 1.55;
+}
+
+/* Empty / degraded state */
+.empty-state {
+  padding: var(--space-10) var(--space-6);
+  text-align: center;
+  color: var(--fg-muted);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg-subtle);
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+}
+
+/* -------------------- Footer -------------------- */
+
+footer {
+  margin-top: var(--space-20);
+  padding: var(--space-6) 0;
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--fg-subtle);
+  letter-spacing: 0.01em;
+}
+footer a {
+  color: var(--fg-muted);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+footer a:hover { color: var(--accent); text-decoration: none; }
+.footer-sep { color: var(--fg-subtle); opacity: 0.5; user-select: none; }
+.footer-spacer { flex: 1 0 var(--space-4); }
+.footer-attrib { color: var(--fg-subtle); }
+.footer-attrib a { color: var(--fg-muted); }
+
+/* -------------------- Responsive -------------------- */
+
+@media (max-width: 760px) {
+  main { padding: var(--space-6) var(--space-4) var(--space-16); }
+  .hero { padding: var(--space-8) 0 var(--space-6); gap: var(--space-5); }
+  .hero-heading { font-size: clamp(1.875rem, 7vw + 0.5rem, 2.5rem); letter-spacing: -0.035em; }
+  .hero-title-row { gap: var(--space-3); }
+  .hero-logo { width: 40px; height: 40px; }
+  .hero-tagline { font-size: var(--text-base); }
+  .status-strip { gap: var(--space-2); font-size: 0.6875rem; }
+  .connect-chrome-endpoint { display: none; }
+  .card-grid { grid-template-columns: 1fr; }
+  section { padding: var(--space-8) 0 0; }
+  .section-heading h2 { font-size: var(--text-xl); }
+  .section-count { font-size: var(--text-xl); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+`;
+    return unsafeRaw(`<style>${css}</style>`);
+}
+// ---------------------------------------------------------------------------
+// Copy-to-clipboard — single inlined script, < 1KB
+// ---------------------------------------------------------------------------
+function renderCopyScript() {
+    const js = `
+document.addEventListener('click', function(e) {
+  var btn = e.target.closest('[data-copy]');
+  if (!btn) return;
+  var selector = btn.getAttribute('data-copy-target');
+  var text = '';
+  if (selector) {
+    var node = document.querySelector(selector);
+    if (node) text = node.textContent || '';
+  } else {
+    text = btn.getAttribute('data-copy') || '';
+  }
+  if (!text || !navigator.clipboard) return;
+  navigator.clipboard.writeText(text).then(function() {
+    var prev = btn.textContent;
+    btn.setAttribute('data-copied', 'true');
+    btn.textContent = 'Copied';
+    setTimeout(function() {
+      btn.removeAttribute('data-copied');
+      btn.textContent = prev;
+    }, 1500);
+  });
+});`;
+    return unsafeRaw(`<script>${js}</script>`);
+}
+// ---------------------------------------------------------------------------
+// Primitives
+// ---------------------------------------------------------------------------
+/**
+ * shields.io-style bi-part badge: "Built on" label + framework name. Links to
+ * the framework's npm page. Lives in the hero when `landing.attribution` is
+ * enabled.
+ */
+function renderFrameworkBadge(framework) {
+    const npmUrl = `https://www.npmjs.com/package/${encodeURIComponent(framework.name)}`;
+    return html `<a class="badge-shield" href="${npmUrl}" rel="noopener" aria-label="Built on ${framework.name} v${framework.version}"><span class="badge-shield-label">Built on</span><span class="badge-shield-value">${framework.name} v${framework.version}</span></a>`;
+}
+function renderPill(text, variant) {
+    return html `<span class="pill pill-${variant}">${text}</span>`;
+}
+function renderSectionHeading(id, label, count) {
+    return html `
+    <div class="section-heading">
+      <h2 id="${id}">${label}</h2>
+      <span class="section-count" aria-label="${String(count)} ${label}">${String(count)}</span>
+    </div>
+  `;
+}
+function renderSnippet(id, text) {
+    const targetId = `snippet-${id}`;
+    return html `
+    <div class="snippet">
+      <pre id="${targetId}"><code>${text}</code></pre>
+      <button type="button" class="snippet-copy" data-copy data-copy-target="#${targetId}" aria-label="Copy">Copy</button>
+    </div>
+  `;
+}
+// ---------------------------------------------------------------------------
+// Status strip — replaces the old auth banner
+// ---------------------------------------------------------------------------
+/**
+ * Single-line status strip under the hero. Communicates auth mode, capability
+ * counts, and protocol version in one mono-spaced, dot-separated row.
+ *
+ * Accessibility:
+ * - `role="status"` so changes are announced live
+ * - `aria-label` carries the long-form auth phrase for screen readers
+ *   ("Public access", "Requires OAuth", etc.) even when the visible label is
+ *   compact ("public", "oauth")
+ */
+function renderStatusStrip(manifest, degraded) {
+    const { auth, definitionCounts, protocol } = manifest;
+    const authMeta = describeAuth(auth);
+    // Counts hidden in degraded mode to avoid leaking inventory shape.
+    const counts = degraded
+        ? []
+        : [
+            { n: definitionCounts.tools, label: 'tools' },
+            { n: definitionCounts.resources, label: 'resources' },
+            { n: definitionCounts.prompts, label: 'prompts' },
+        ].filter((c) => c.n > 0);
+    const signin = auth.mode === 'oauth' && auth.oauthIssuer
+        ? html ` <a class="status-signin" href="${auth.oauthIssuer}" rel="noopener">sign in ↗</a>`
+        : html ``;
+    return html `
+    <div class="status-strip" role="status" aria-label="${authMeta.ariaLabel}">
+      <span class="status-item">
+        <span class="status-dot ${authMeta.dotClass}" aria-hidden="true"></span>
+        <span class="status-value">${authMeta.label}</span>${signin}
+      </span>
+      ${counts.map((c) => html `
+          <span class="status-item">
+            <span class="status-value">${String(c.n)}</span>
+            <span>${c.label}</span>
+          </span>
+        `)}
+      <span class="status-item">
+        <span>MCP</span>
+        <span class="status-value">${protocol.latestVersion}</span>
+      </span>
+    </div>
+  `;
+}
+/** Visible label, dot class, and long-form aria phrase for the auth strip item. */
+function describeAuth(auth) {
+    if (auth.mode === 'none') {
+        return {
+            label: 'public',
+            dotClass: 'status-dot-public',
+            ariaLabel: 'Public access — no authentication required',
+        };
+    }
+    if (auth.mode === 'jwt') {
+        return {
+            label: 'bearer',
+            dotClass: 'status-dot-gated',
+            ariaLabel: 'Requires a bearer token',
+        };
+    }
+    return {
+        label: 'oauth',
+        dotClass: 'status-dot-gated',
+        ariaLabel: 'Requires OAuth',
+    };
+}
+// ---------------------------------------------------------------------------
+// Hero
+// ---------------------------------------------------------------------------
+function renderHero(manifest, baseUrl, degraded) {
+    const { server, landing } = manifest;
+    const releaseUrl = landing.repoRoot
+        ? `${landing.repoRoot.url}/releases/tag/v${server.version}`
+        : undefined;
+    const versionBadge = releaseUrl
+        ? html `<a class="badge-version" href="${releaseUrl}" aria-label="v${server.version} release notes">v${server.version}</a>`
+        : html `<span class="badge-version">v${server.version}</span>`;
+    const preReleaseBadge = landing.preRelease.isPreRelease
+        ? html `<span class="badge-pre">${landing.preRelease.label ?? 'pre-release'}</span>`
+        : html ``;
+    const tagline = landing.tagline ?? server.description ?? '';
+    const logo = landing.logo
+        ? html `<img class="hero-logo" src="${landing.logo}" alt="" aria-hidden="true" />`
+        : html ``;
+    const frameworkBadge = landing.attribution
+        ? html `<div class="hero-badges">${renderFrameworkBadge(manifest.framework)}</div>`
+        : html ``;
+    const connect = degraded ? html `` : renderConnectSnippets(manifest, baseUrl);
+    return html `
+    <header class="hero">
+      <span class="hero-eyebrow" aria-hidden="true">MCP Server</span>
+      <div class="hero-title-row">
+        ${logo}
+        <h1 class="hero-heading">${server.name}</h1>
+        ${versionBadge}
+        ${preReleaseBadge}
+      </div>
+      ${tagline ? html `<p class="hero-tagline">${tagline}</p>` : html ``}
+      ${renderStatusStrip(manifest, degraded)}
+      ${connect}
+      ${frameworkBadge}
+    </header>
+  `;
+}
+/**
+ * `@scope/pkg-name` → `pkg-name`. Fall through for bare names.
+ * Used as the `mcpServers` key and the Claude CLI server alias.
+ */
+function deriveShortName(serverName) {
+    const slash = serverName.lastIndexOf('/');
+    return slash >= 0 ? serverName.slice(slash + 1) : serverName;
+}
+/** Convert ordered env entries to the `{ KEY: value }` shape MCP clients expect. */
+function envFromEntries(entries) {
+    return Object.fromEntries(entries.map(({ key, value }) => [key, value]));
+}
+/** `claude mcp add --transport stdio <name> [--env K=V]* -- bunx <pkg>@latest` */
+function buildClaudeStdioCmd(shortName, npmPackage, envExample) {
+    const envFlags = envExample.map(({ key, value }) => `--env ${key}=${value}`).join(' ');
+    const envSegment = envFlags.length > 0 ? ` ${envFlags}` : '';
+    return `claude mcp add --transport stdio ${shortName}${envSegment} -- bunx ${npmPackage}@latest`;
+}
+/** `claude mcp add --transport http <name> <url>` */
+function buildClaudeHttpCmd(shortName, endpoint) {
+    return `claude mcp add --transport http ${shortName} ${endpoint}`;
+}
+function renderConnectSnippets(manifest, baseUrl) {
+    const endpoint = `${baseUrl.replace(/\/$/, '')}${manifest.transport.endpointPath}`;
+    const npmPackage = manifest.landing.npmPackage?.name;
+    // `@cyanheads/mcp-ts-core` → `mcp-ts-core`. Short aliases match the convention
+    // used in real Claude Desktop / Cursor configs and make the `claude mcp add`
+    // command more ergonomic.
+    const shortName = deriveShortName(manifest.server.name);
+    const envExample = manifest.landing.envExample;
+    const envObject = envExample.length > 0 ? envFromEntries(envExample) : undefined;
+    // STDIO: prefer native `bunx <pkg>@latest` when the server is published;
+    // fall back to `mcp-remote` as a stdio → HTTP bridge so the tab is always
+    // useful even for unpublished servers.
+    const stdioConfig = JSON.stringify({
+        mcpServers: {
+            [shortName]: {
+                command: 'bunx',
+                args: npmPackage ? [`${npmPackage}@latest`] : ['mcp-remote', endpoint],
+                ...(envObject && { env: envObject }),
+            },
+        },
+    }, null, 2);
+    const httpConfig = JSON.stringify({
+        mcpServers: {
+            [shortName]: {
+                type: 'http',
+                url: endpoint,
+                ...(envObject && { env: envObject }),
+            },
+        },
+    }, null, 2);
+    // `claude mcp add` — published package routes through stdio; otherwise
+    // point it straight at the HTTP endpoint.
+    const claudeCmd = npmPackage
+        ? buildClaudeStdioCmd(shortName, npmPackage, envExample)
+        : buildClaudeHttpCmd(shortName, endpoint);
+    const curl = [
+        `curl -X POST ${endpoint} \\`,
+        `  -H "Content-Type: application/json" \\`,
+        `  -H "MCP-Protocol-Version: ${manifest.protocol.latestVersion}" \\`,
+        `  -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"${manifest.protocol.latestVersion}","capabilities":{},"clientInfo":{"name":"curl","version":"1.0.0"}}}'`,
+    ].join('\n');
+    // Chrome label — npm package when published, else the HTTP endpoint (trimmed).
+    const chromeLabel = npmPackage ?? endpoint.replace(/^https?:\/\//, '');
+    const panels = [
+        { id: 'stdio', label: 'STDIO', content: stdioConfig, copyAriaLabel: 'Copy stdio config' },
+        {
+            id: 'http',
+            label: 'Streamable HTTP',
+            content: httpConfig,
+            copyAriaLabel: 'Copy HTTP config',
+        },
+        {
+            id: 'claude',
+            label: 'Claude',
+            content: claudeCmd,
+            copyAriaLabel: 'Copy claude mcp add command',
+        },
+        { id: 'curl', label: 'curl', content: curl, copyAriaLabel: 'Copy curl command' },
+    ];
+    return html `
+    <div class="connect" aria-label="Connection snippets">
+      <div class="connect-chrome">
+        <span class="connect-chrome-dots" aria-hidden="true">
+          <span class="connect-chrome-dot"></span>
+          <span class="connect-chrome-dot"></span>
+          <span class="connect-chrome-dot"></span>
+        </span>
+        <span class="connect-chrome-endpoint" title="${endpoint}">${chromeLabel}</span>
+      </div>
+      ${panels.map((p, i) => i === 0
+        ? html `<input type="radio" class="connect-tab-input" name="connect" id="connect-tab-${p.id}" checked />`
+        : html `<input type="radio" class="connect-tab-input" name="connect" id="connect-tab-${p.id}" />`)}
+      <div class="connect-tabs" role="tablist">
+        ${panels.map((p) => html `<label for="connect-tab-${p.id}" class="connect-tab-label" role="tab">${p.label}</label>`)}
+      </div>
+      <div class="connect-panels">
+        ${panels.map((p) => renderConnectPanel(p.id, p.content, p.copyAriaLabel))}
+      </div>
+    </div>
+  `;
+}
+/** Single panel inside the connect card — pre/code + copy button. */
+function renderConnectPanel(id, content, copyAriaLabel) {
+    const snippetId = `connect-snippet-${id}`;
+    return html `
+    <div class="connect-panel panel-${id}" role="tabpanel">
+      <pre id="${snippetId}"><code>${content}</code></pre>
+      <button type="button" class="connect-copy" data-copy data-copy-target="#${snippetId}" aria-label="${copyAriaLabel}">Copy</button>
+    </div>
+  `;
+}
+// ---------------------------------------------------------------------------
+// Tools section
+// ---------------------------------------------------------------------------
+function groupToolsByPrefix(tools) {
+    if (tools.length < 3)
+        return [{ label: null, tools }];
+    const prefixCounts = new Map();
+    for (const tool of tools) {
+        const prefix = tool.name.split('_', 1)[0];
+        if (!prefix)
+            continue;
+        prefixCounts.set(prefix, (prefixCounts.get(prefix) ?? 0) + 1);
+    }
+    const groupablePrefixes = new Set([...prefixCounts.entries()].filter(([, count]) => count >= 2).map(([p]) => p));
+    if (groupablePrefixes.size === 0)
+        return [{ label: null, tools }];
+    const groups = new Map();
+    const other = [];
+    for (const tool of tools) {
+        const prefix = tool.name.split('_', 1)[0];
+        if (prefix && groupablePrefixes.has(prefix)) {
+            const list = groups.get(prefix) ?? [];
+            list.push(tool);
+            groups.set(prefix, list);
+        }
+        else {
+            other.push(tool);
+        }
+    }
+    const out = [];
+    for (const [prefix, list] of groups) {
+        out.push({ label: titleCase(prefix), tools: list });
+    }
+    if (other.length > 0)
+        out.push({ label: 'Other', tools: other });
+    return out;
+}
+function titleCase(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function buildInvocationSnippet(tool) {
+    const args = {};
+    for (const field of tool.requiredFields) {
+        args[field] = `<${field}>`;
+    }
+    return JSON.stringify({
+        jsonrpc: '2.0',
+        id: 1,
+        method: 'tools/call',
+        params: {
+            name: tool.name,
+            arguments: args,
+        },
+    }, null, 2);
+}
+function renderToolCard(tool) {
+    const anchor = `tool-${tool.name}`;
+    const annotations = tool.annotations;
+    const pills = [];
+    if (annotations?.readOnlyHint)
+        pills.push(renderPill('read-only', 'readonly'));
+    if (annotations?.destructiveHint === true)
+        pills.push(renderPill('destructive', 'destructive'));
+    if (annotations?.openWorldHint)
+        pills.push(renderPill('open-world', 'openworld'));
+    if (tool.isTask)
+        pills.push(renderPill('task', 'task'));
+    if (tool.isApp)
+        pills.push(renderPill('app', 'app'));
+    const source = tool.sourceUrl
+        ? html `<a class="source-link" href="${tool.sourceUrl}" rel="noopener">view source ↗</a>`
+        : html ``;
+    const schemaPreview = tool.inputSchema
+        ? html `
+        <details>
+          <summary>Input schema</summary>
+          <pre><code>${JSON.stringify(tool.inputSchema, null, 2)}</code></pre>
+        </details>
+      `
+        : html ``;
+    const invocation = html `
+    <details>
+      <summary>Invocation</summary>
+      ${renderSnippet(`tool-${tool.name}`, buildInvocationSnippet(tool))}
+    </details>
+  `;
+    const authBadges = tool.auth && tool.auth.length > 0
+        ? html `<div class="card-meta"><span class="card-meta-label">scopes</span>${tool.auth.map((scope) => html ` <span class="pill pill-auth">${scope}</span>`)}</div>`
+        : html ``;
+    return html `
+    <article class="card" id="${anchor}">
+      <div class="card-head">
+        <h3 class="card-title"><a href="#${anchor}">${tool.name}</a></h3>
+        <div class="pill-row" role="list">${pills}</div>
+        ${source}
+      </div>
+      <p class="card-desc">${tool.description}</p>
+      ${authBadges}
+      ${invocation}
+      ${schemaPreview}
+    </article>
+  `;
+}
+function renderToolsSection(tools) {
+    if (tools.length === 0)
+        return html ``;
+    const groups = groupToolsByPrefix(tools);
+    const body = groups.map((group) => {
+        const heading = group.label ? html `<h4 class="group-heading">${group.label}</h4>` : html ``;
+        return html `${heading}<div class="card-grid">${group.tools.map(renderToolCard)}</div>`;
+    });
+    return html `
+    <section aria-labelledby="section-tools">
+      ${renderSectionHeading('section-tools', 'Tools', tools.length)}
+      ${body}
+    </section>
+  `;
+}
+// ---------------------------------------------------------------------------
+// Resources section
+// ---------------------------------------------------------------------------
+function slugifyUri(template) {
+    return template
+        .replace(/[^a-z0-9]+/gi, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+}
+function renderResourceCard(resource) {
+    const anchor = `resource-${slugifyUri(resource.uriTemplate || resource.name)}`;
+    const source = resource.sourceUrl
+        ? html `<a class="source-link" href="${resource.sourceUrl}" rel="noopener">view source ↗</a>`
+        : html ``;
+    return html `
+    <article class="card" id="${anchor}">
+      <div class="card-head">
+        <h3 class="card-title"><a href="#${anchor}">${resource.name}</a></h3>
+        ${source}
+      </div>
+      <p class="card-desc">${resource.description}</p>
+      <div class="card-meta">
+        <span><span class="card-meta-label">uri</span> <code>${resource.uriTemplate}</code></span>
+        ${resource.mimeType ? html `<span><span class="card-meta-label">mime</span> <code>${resource.mimeType}</code></span>` : html ``}
+      </div>
+    </article>
+  `;
+}
+function renderResourcesSection(resources) {
+    if (resources.length === 0)
+        return html ``;
+    return html `
+    <section aria-labelledby="section-resources">
+      ${renderSectionHeading('section-resources', 'Resources', resources.length)}
+      <div class="card-grid">${resources.map(renderResourceCard)}</div>
+    </section>
+  `;
+}
+// ---------------------------------------------------------------------------
+// Prompts section
+// ---------------------------------------------------------------------------
+function renderPromptCard(prompt) {
+    const anchor = `prompt-${prompt.name}`;
+    const source = prompt.sourceUrl
+        ? html `<a class="source-link" href="${prompt.sourceUrl}" rel="noopener">view source ↗</a>`
+        : html ``;
+    const argsList = prompt.args.length > 0
+        ? html `
+        <ul class="args-list">
+          ${prompt.args.map((arg) => html `
+              <li>
+                <code>${arg.name}</code>${arg.required ? html `<span class="args-required">required</span>` : html ``}
+                ${arg.description ? html ` — ${arg.description}` : html ``}
+              </li>
+            `)}
+        </ul>
+      `
+        : html ``;
+    return html `
+    <article class="card" id="${anchor}">
+      <div class="card-head">
+        <h3 class="card-title"><a href="#${anchor}">${prompt.name}</a></h3>
+        ${source}
+      </div>
+      <p class="card-desc">${prompt.description}</p>
+      ${argsList}
+    </article>
+  `;
+}
+function renderPromptsSection(prompts) {
+    if (prompts.length === 0)
+        return html ``;
+    return html `
+    <section aria-labelledby="section-prompts">
+      ${renderSectionHeading('section-prompts', 'Prompts', prompts.length)}
+      <div class="card-grid">${prompts.map(renderPromptCard)}</div>
+    </section>
+  `;
+}
+// ---------------------------------------------------------------------------
+// Extensions section
+// ---------------------------------------------------------------------------
+function renderExtensionsSection(extensions) {
+    if (!extensions || Object.keys(extensions).length === 0)
+        return html ``;
+    const entries = Object.entries(extensions);
+    return html `
+    <section aria-labelledby="section-extensions">
+      ${renderSectionHeading('section-extensions', 'Extensions', entries.length)}
+      <div class="card-grid">
+        ${entries.map(([key, value]) => html `
+            <article class="card ext-card">
+              <div class="card-head">
+                <h3 class="card-title ext-key">${key}</h3>
+              </div>
+              <pre class="ext-preview"><code>${JSON.stringify(value, null, 2)}</code></pre>
+            </article>
+          `)}
+      </div>
+    </section>
+  `;
+}
+// ---------------------------------------------------------------------------
+// Footer
+// ---------------------------------------------------------------------------
+function renderFooter(manifest) {
+    const { landing, framework } = manifest;
+    const links = [];
+    // User-supplied links
+    for (const link of landing.links) {
+        links.push({ href: link.href, label: link.label });
+    }
+    // Auto-derived GitHub cluster
+    if (landing.repoRoot) {
+        const repo = landing.repoRoot;
+        const version = manifest.server.version;
+        links.push({
+            href: landing.changelogUrl ?? `${repo.url}/blob/main/CHANGELOG.md`,
+            label: 'Changelog',
+        });
+        links.push({
+            href: `${repo.url}/releases/tag/v${version}`,
+            label: `v${version}`,
+        });
+        links.push({ href: `${repo.url}/issues`, label: 'Issues' });
+        links.push({ href: repo.url, label: 'Source' });
+    }
+    // Package / registry
+    if (landing.npmPackage) {
+        links.push({ href: landing.npmPackage.url, label: 'npm' });
+    }
+    const frameworkNpm = `https://www.npmjs.com/package/${encodeURIComponent(framework.name)}`;
+    const linkEls = links.map((l, i) => html `${i > 0 ? html `<span class="footer-sep">·</span>` : html ``}<a href="${l.href}" rel="noopener">${l.label}</a>`);
+    const attribution = landing.attribution
+        ? html `<span class="footer-attrib">built on <a href="${framework.homepage}">${framework.name}</a> v${framework.version} · <a href="${frameworkNpm}" rel="noopener">npm</a></span>`
+        : html ``;
+    return html `
+    <footer>
+      ${linkEls}
+      <span class="footer-spacer"></span>
+      ${attribution}
+    </footer>
+  `;
+}
+// ---------------------------------------------------------------------------
+// <head> metadata
+// ---------------------------------------------------------------------------
+function renderHead(manifest, pageUrl) {
+    const { server, landing } = manifest;
+    const title = `${server.name} · MCP server`;
+    const description = landing.tagline ?? server.description ?? `MCP server: ${server.name}`;
+    const ogImage = landing.logo?.startsWith('http')
+        ? html `<meta property="og:image" content="${landing.logo}" />`
+        : html ``;
+    const favicon = landing.logo && isImageDataUri(landing.logo)
+        ? html `<link rel="icon" href="${landing.logo}" />`
+        : html ``;
+    const themeColor = html `<meta name="theme-color" content="${landing.theme.accent}" />`;
+    const jsonLd = JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareApplication',
+        name: server.name,
+        description,
+        applicationCategory: 'DeveloperApplication',
+        softwareVersion: server.version,
+        ...(server.homepage && { url: server.homepage }),
+    });
+    return html `
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${title}</title>
+    <meta name="description" content="${description}" />
+    ${themeColor}
+    <meta property="og:title" content="${title}" />
+    <meta property="og:description" content="${description}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="${pageUrl}" />
+    ${ogImage}
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="${title}" />
+    <meta name="twitter:description" content="${description}" />
+    ${favicon}
+    <link rel="mcp-endpoint" href="${manifest.transport.endpointPath}" />
+    <link rel="alternate" type="application/json" href="/.well-known/mcp.json" title="MCP Server Card" />
+    <script type="application/ld+json">${unsafeRaw(escapeLdJson(jsonLd))}</script>
+  `;
+}
+function isImageDataUri(value) {
+    if (!value)
+        return false;
+    return /^data:image\/(png|svg\+xml|jpeg|gif|webp|x-icon|vnd\.microsoft\.icon)/i.test(value);
+}
+/**
+ * Escape a JSON string for safe embedding inside `<script type="application/ld+json">`.
+ * Replaces HTML-sensitive characters with Unicode escapes — `<` → `<`,
+ * `>` → `>`, `&` → `&`, U+2028/U+2029 line terminators → escaped.
+ * Matches the hardening recommendation in https://html.spec.whatwg.org/#script-data-state.
+ */
+function escapeLdJson(json) {
+    return json
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029');
+}
+// ---------------------------------------------------------------------------
+// Page composition
+// ---------------------------------------------------------------------------
+/**
+ * Render the full landing page. `baseUrl` is the request origin
+ * (e.g. `https://pubmed.example.com`) — used in connect snippets and OG meta.
+ * `degraded` reduces the body when `requireAuth` gates unauth callers.
+ */
+export function renderLandingPage(manifest, baseUrl, degraded = false) {
+    const pageUrl = `${baseUrl.replace(/\/$/, '')}/`;
+    const body = degraded
+        ? html `
+        ${renderHero(manifest, baseUrl, true)}
+        <section>
+          <p class="empty-state">
+            Full server inventory is available to authenticated callers.
+          </p>
+        </section>
+        ${renderFooter(manifest)}
+      `
+        : html `
+        ${renderHero(manifest, baseUrl, false)}
+        ${renderToolsSection(manifest.definitions.tools)}
+        ${renderResourcesSection(manifest.definitions.resources)}
+        ${renderPromptsSection(manifest.definitions.prompts)}
+        ${renderExtensionsSection(manifest.extensions)}
+        ${renderFooter(manifest)}
+      `;
+    const doc = html `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    ${renderHead(manifest, pageUrl)}
+    ${renderTokens(manifest.landing.theme.accent)}
+  </head>
+  <body>
+    <main>${body}</main>
+    ${renderCopyScript()}
+  </body>
+</html>`;
+    return doc.toString();
+}
+// ---------------------------------------------------------------------------
+// Hono handler
+// ---------------------------------------------------------------------------
+/**
+ * Factory for the `GET /` route handler.
+ *
+ * Cache behavior and body shape depend on `manifest.landing.requireAuth`:
+ *
+ * | `requireAuth` | Authenticated | Unauthenticated |
+ * |:---|:---|:---|
+ * | `false` (default) | full page · `Cache-Control: public, max-age=60` | full page · same |
+ * | `true` | full page · `Cache-Control: private, max-age=60` · `Vary: Authorization` | reduced hero-only page · same cache headers |
+ *
+ * The check is header-presence based — we don't validate the bearer token
+ * here (that's the MCP endpoint's job). If a caller presents any Authorization
+ * header, the full inventory renders; if not, they see a stub and a pointer
+ * to the docs link when available.
+ */
+export function createLandingPageHandler(manifest) {
+    return (c) => {
+        const context = requestContextService.createRequestContext({
+            operation: 'landingPageHandler',
+        });
+        const url = new URL(c.req.url);
+        const baseUrl = url.origin;
+        const requireAuth = manifest.landing.requireAuth;
+        const authHeader = c.req.header('authorization');
+        const isAuthenticated = Boolean(authHeader && authHeader.trim().length > 0);
+        const degraded = requireAuth && !isAuthenticated;
+        const html = renderLandingPage(manifest, baseUrl, degraded);
+        logger.debug('Serving landing page.', {
+            ...context,
+            accept: c.req.header('accept'),
+            bytes: html.length,
+            requireAuth,
+            degraded,
+        });
+        c.header('Content-Type', 'text/html; charset=utf-8');
+        c.header('X-Content-Type-Options', 'nosniff');
+        if (requireAuth) {
+            c.header('Cache-Control', 'private, max-age=60');
+            c.header('Vary', 'Authorization');
+        }
+        else {
+            c.header('Cache-Control', 'public, max-age=60');
+        }
+        return c.body(html);
+    };
+}
+//# sourceMappingURL=landing-page.js.map