@cyanheads/mcp-ts-core 0.6.0 → 0.6.2

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

@@ -9,15 +9,15 @@
  *
  * ## Surfaces
  *
- * - Hero — name, clickable version badge, pre-release pill, tagline, logo,
- *   auth-status banner, copy-to-clipboard connect snippets
- * - Tools section — counts in header; auto-grouped by shared prefix; per-card
- *   annotations, invocation snippet, view-source link, schema preview
+ * - 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 — configured links + auto-derived GitHub cluster + npm/registry +
- *   attribution
+ * - Footer — single-row, dim, separator-dot delimited
  *
  * @module src/mcp-server/transports/http/landing-page
  */
@@ -34,59 +34,69 @@ function renderTokens(accent) {
 :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-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-4xl: 2.25rem;
+  --text-3xl: 1.875rem;
+  --text-display: clamp(2rem, 4.5vw + 0.5rem, 3.5rem);
 
-  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
+  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
+  --radius-lg: 14px; --radius-pill: 999px;
 
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --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-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms;
   --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 
   --accent: ${safeAccent};
-  --accent-fg: color-mix(in oklab, ${safeAccent}, white 85%);
-  --accent-hover: color-mix(in oklab, ${safeAccent}, black 12%);
-  --accent-soft: color-mix(in oklab, ${safeAccent}, transparent 86%);
+  --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: #ffffff;
-  --bg-subtle: #f6f8fa;
+  --bg: #fcfcfd;
+  --bg-subtle: #f5f5f7;
   --bg-elevated: #ffffff;
-  --fg: #1f2328;
-  --fg-muted: #656d76;
-  --fg-subtle: #8c959f;
-  --border: #d0d7de;
-  --border-subtle: #eaeef2;
+  --bg-code: #f7f7f9;
+  --fg: #09090b;
+  --fg-muted: #52525b;
+  --fg-subtle: #71717a;
+  --border: #e4e4e7;
+  --border-subtle: #ececf0;
+  --border-strong: #d4d4d8;
   --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
-  --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 0.08), 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: #0d1117;
-    --bg-subtle: #161b22;
-    --bg-elevated: #161b22;
-    --fg: #e6edf3;
-    --fg-muted: #8d96a0;
-    --fg-subtle: #6e7681;
-    --border: #30363d;
-    --border-subtle: #21262d;
-    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
-    --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.2);
-    --accent-fg: color-mix(in oklab, ${safeAccent}, white 10%);
+    --bg: #08090d;
+    --bg-subtle: #0f1015;
+    --bg-elevated: #0d0e13;
+    --bg-code: #0a0b10;
+    --fg: #ededef;
+    --fg-muted: #a1a1a8;
+    --fg-subtle: #8a8a93;
+    --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;
@@ -95,238 +105,746 @@ body {
   -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: 960px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); }
+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); text-decoration: underline; }
+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;
 }
-code { background: var(--bg-subtle); padding: 0.15em 0.35em; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
 pre {
-  background: var(--bg-subtle);
+  background: var(--bg-code);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   padding: var(--space-4);
   margin: 0;
   overflow-x: auto;
-  line-height: 1.5;
+  line-height: 1.55;
   white-space: pre;
+  color: var(--fg);
 }
-pre code { background: transparent; padding: 0; border: 0; }
+pre code { background: transparent; padding: 0; border: 0; font-size: inherit; }
 
-.hero { padding: var(--space-10) 0 var(--space-8); border-bottom: 1px solid var(--border-subtle); }
-.hero-top { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
-.hero-logo { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: contain; background: var(--bg-subtle); border: 1px solid var(--border-subtle); flex-shrink: 0; }
-.hero-identity { flex: 1; min-width: 0; }
-.hero-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin: 0; font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
-.hero-tagline { margin: var(--space-3) 0 0; color: var(--fg-muted); font-size: var(--text-lg); max-width: 60ch; }
+/* -------------------- Hero -------------------- */
 
-.badge {
-  display: inline-flex; align-items: center; gap: var(--space-1);
-  padding: 2px var(--space-2);
-  border-radius: var(--radius-pill);
-  font-size: var(--text-xs);
+.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;
-  line-height: 1.4;
+  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);
-  background: var(--bg-subtle);
-  text-decoration: none;
-  white-space: nowrap;
+  font-size: var(--text-lg);
+  line-height: 1.5;
+  max-width: 62ch;
 }
-.badge-version { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); font-weight: 600; }
-.badge-version:hover { background: color-mix(in oklab, var(--accent), transparent 75%); text-decoration: none; }
-.badge-pre { background: color-mix(in oklab, #f59e0b, transparent 85%); border-color: color-mix(in oklab, #f59e0b, transparent 60%); color: #b45309; }
-@media (prefers-color-scheme: dark) { .badge-pre { color: #fbbf24; } }
 
-.hero-badges { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
-
-.badge-shield {
+/* Version + pre-release chips */
+.badge-version {
   display: inline-flex;
-  align-items: stretch;
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  font-size: 0.7rem;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
   font-weight: 600;
-  line-height: 1.4;
-  letter-spacing: 0.01em;
+  letter-spacing: -0.01em;
+  color: var(--accent);
+  background: var(--accent-softer);
+  border: 1px solid var(--accent-edge);
   text-decoration: none;
-  font-family: var(--font-sans);
-  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.04);
-  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
+  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%);
 }
-.badge-shield:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.08); }
-.badge-shield-label, .badge-shield-value { padding: 3px var(--space-2); white-space: nowrap; }
-.badge-shield-label { background: #555; color: #fff; }
-.badge-shield-value { background: #2259c9; color: #fff; }
 @media (prefers-color-scheme: dark) {
-  .badge-shield-label { background: #3a3a3a; }
-  .badge-shield-value { background: #3b6fd4; }
+  .badge-pre { color: #fbbf24; }
 }
 
-.auth-banner {
-  margin: var(--space-5) 0 0;
+/* 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(--fg-subtle);
+}
+.status-signin:hover { color: var(--accent); border-color: var(--accent); }
+.status-link {
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-out);
+}
+.status-link .status-value { transition: color var(--duration-fast) var(--ease-out); }
+.status-link:hover,
+.status-link:hover .status-value { color: var(--accent); }
+.status-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 2px;
+}
+
+/* -------------------- 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-radius: var(--radius-md);
-  border: 1px solid var(--border-subtle);
+  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);
-  display: flex; align-items: center; gap: var(--space-2);
+  font-weight: 500;
+  color: var(--fg-muted);
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -1px;
+  white-space: nowrap;
+  transition: color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out),
+              background var(--duration-fast) var(--ease-out);
+}
+.connect-tab-label:hover { color: var(--fg); }
+.connect-tab-input:checked + .connect-tab-label {
+  color: var(--fg);
+  font-weight: 600;
+  border-bottom-color: var(--accent);
+  background: linear-gradient(to top, var(--accent-softer), transparent 70%);
+}
+.connect-tab-input:focus-visible + .connect-tab-label {
+  outline: 2px solid var(--accent);
+  outline-offset: -6px;
+  border-radius: var(--radius-sm);
 }
-.auth-banner-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-.auth-banner-public .auth-banner-dot { background: #22c55e; }
-.auth-banner-gated .auth-banner-dot { background: var(--accent); }
 
-section { padding: var(--space-10) 0 0; }
-.section-heading { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-6); }
-.section-heading h2 { margin: 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; }
-.section-count { color: var(--fg-subtle); font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 500; }
+.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-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
+.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);
+  align-items: start;
+}
 .card {
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: var(--space-5);
-  margin-bottom: var(--space-3);
+  border-radius: var(--radius-md);
+  padding: var(--space-4) var(--space-5);
   background: var(--bg-elevated);
-  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
+  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-md);
+}
+.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:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
-.card-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
-.card-title { margin: 0; font-size: var(--text-base); font-weight: 600; font-family: var(--font-mono); color: var(--fg); }
 .card-title a { color: inherit; }
-.card-desc { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); }
-.card-meta { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--fg-muted); align-items: center; }
+.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: 0.9em; }
+.card-meta code {
+  font-size: 1em;
+  color: var(--fg);
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
 
-.pill-row { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
+/* 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;
-  padding: 1px 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
   border-radius: var(--radius-pill);
-  font-size: 0.7rem;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
   font-weight: 500;
-  line-height: 1.5;
-  border: 1px solid var(--border-subtle);
+  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; border-color: color-mix(in oklab, #16a34a, transparent 70%); background: color-mix(in oklab, #16a34a, transparent 90%); }
-.pill-destructive { color: #dc2626; border-color: color-mix(in oklab, #dc2626, transparent 70%); background: color-mix(in oklab, #dc2626, transparent 90%); }
-.pill-openworld { color: #2563eb; border-color: color-mix(in oklab, #2563eb, transparent 70%); background: color-mix(in oklab, #2563eb, transparent 90%); }
-.pill-task { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
-.pill-app { color: #9333ea; border-color: color-mix(in oklab, #9333ea, transparent 70%); background: color-mix(in oklab, #9333ea, transparent 90%); }
-.pill-auth { color: var(--fg-muted); font-family: var(--font-mono); font-size: 0.65rem; }
+.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; }
 
-.snippet { position: relative; margin-top: var(--space-3); }
-.snippet pre { padding-right: var(--space-12); font-size: 0.8rem; }
-.snippet-copy {
-  position: absolute; top: var(--space-2); right: var(--space-2);
-  font-family: var(--font-sans);
+@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);
-  padding: 2px var(--space-2);
+  color: var(--fg-muted);
+  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: color var(--duration-fast), border-color var(--duration-fast);
+  transition: all var(--duration-fast) var(--ease-out);
+  letter-spacing: 0.02em;
 }
-.snippet-copy:hover { color: var(--accent); border-color: var(--accent); }
+.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: #16a34a; }
+.snippet-copy[data-copied="true"] {
+  color: #16a34a;
+  border-color: color-mix(in oklab, #16a34a, transparent 60%);
+}
 
-details { margin-top: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
+/* Collapsible details (schema preview) */
+details {
+  margin-top: var(--space-1);
+  border: 0;
+  border-radius: 0;
+}
 details > summary {
   cursor: pointer;
-  padding: var(--space-2) var(--space-3);
+  padding: 4px 0;
+  font-family: var(--font-mono);
   font-size: var(--text-xs);
   color: var(--fg-muted);
   list-style: none;
   user-select: none;
-  transition: background var(--duration-fast);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  transition: color var(--duration-fast);
 }
 details > summary::-webkit-details-marker { display: none; }
-details > summary:hover { background: var(--bg-subtle); color: var(--fg); }
-details > summary::before { content: "▸ "; margin-right: 4px; transition: transform var(--duration-fast); display: inline-block; color: var(--fg-subtle); }
-details[open] > summary::before { transform: rotate(90deg); }
-details[open] > summary { border-bottom: 1px solid var(--border-subtle); }
-details > pre { border: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); margin: 0; }
-
-.connect-tabs { display: flex; gap: var(--space-1); margin-top: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
-.connect-tab-input { position: absolute; opacity: 0; pointer-events: none; }
-.connect-tab-label {
-  padding: var(--space-2) var(--space-4);
-  font-size: var(--text-sm);
+details > summary::before {
+  content: "+";
+  display: inline-block;
+  width: 10px;
+  text-align: center;
   color: var(--fg-muted);
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: color var(--duration-fast), border-color var(--duration-fast);
+  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;
 }
-.connect-tab-label:hover { color: var(--fg); }
-.connect-tab-input:focus-visible + .connect-tab-label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
-.connect-panels { position: relative; margin-top: var(--space-3); }
-.connect-panel { display: none; }
-.connect-tab-input:checked + .connect-tab-label { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
-${[0, 1, 2]
-        .map((i) => `.connect-tab-input:nth-of-type(${i + 1}):checked ~ .connect-panels .connect-panel:nth-child(${i + 1}) { display: block; }`)
-        .join('\n')}
 
-footer {
-  margin-top: var(--space-16);
-  padding: var(--space-8) 0 var(--space-6);
-  border-top: 1px solid var(--border-subtle);
-  font-size: var(--text-sm);
+/* 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;
 }
-.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-4); }
-.footer-group { display: flex; flex-direction: column; gap: var(--space-2); min-width: 140px; }
-.footer-group-label { color: var(--fg-subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
-.footer-attrib { font-size: var(--text-xs); color: var(--fg-subtle); }
-.footer-attrib a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); }
-.footer-attrib a:hover { color: var(--accent); text-decoration-color: var(--accent); }
-
-.source-link { font-size: var(--text-xs); color: var(--fg-muted); margin-left: auto; }
-.source-link:hover { color: var(--accent); }
-
-.args-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
-.args-list code { font-size: 0.85em; }
-.args-required { color: var(--accent); font-size: 0.7rem; font-weight: 600; margin-left: var(--space-1); }
 
+/* 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-top: var(--space-2); font-size: var(--text-xs); color: var(--fg-muted); }
+.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);
+}
 
-.empty-state { padding: var(--space-8); text-align: center; color: var(--fg-muted); border: 1px dashed var(--border); border-radius: var(--radius-md); }
+/* -------------------- Footer -------------------- */
 
-@media (max-width: 640px) {
-  main { padding: var(--space-5) var(--space-4) var(--space-12); }
-  .hero-heading { font-size: var(--text-2xl); }
-  .hero-top { flex-direction: column; gap: var(--space-3); }
-  .hero-logo { width: 48px; height: 48px; }
+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;
   }
 }
 `;
@@ -336,8 +854,6 @@ footer {
 // Copy-to-clipboard — single inlined script, < 1KB
 // ---------------------------------------------------------------------------
 function renderCopyScript() {
-    // Works without JS too — the button is inert but the pre/code is still selectable.
-    // `data-copy-target` holds a CSS selector or inline text content.
     const js = `
 document.addEventListener('click', function(e) {
   var btn = e.target.closest('[data-copy]');
@@ -366,17 +882,10 @@ document.addEventListener('click', function(e) {
 // ---------------------------------------------------------------------------
 // Primitives
 // ---------------------------------------------------------------------------
-function renderBadge(label, variant, href) {
-    const cls = variant === 'version' ? 'badge badge-version' : variant === 'pre' ? 'badge badge-pre' : 'badge';
-    if (href) {
-        return html `<a class="${cls}" href="${href}">${label}</a>`;
-    }
-    return html `<span class="${cls}">${label}</span>`;
-}
 /**
- * shields.io-style bi-part badge: grey "Built on" label + accent framework name.
- * Links to the framework's npm page for discoverability. Lives in the hero
- * badge strip when `landing.attribution` is enabled.
+ * 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)}`;
@@ -385,45 +894,104 @@ function renderFrameworkBadge(framework) {
 function renderPill(text, variant) {
     return html `<span class="pill pill-${variant}">${text}</span>`;
 }
-function renderAuthBanner(auth) {
-    if (auth.mode === 'none') {
-        return html `<div class="auth-banner auth-banner-public" role="status"><span class="auth-banner-dot" aria-hidden="true"></span><span>Public access — no authentication required.</span></div>`;
-    }
-    if (auth.mode === 'jwt') {
-        return html `<div class="auth-banner auth-banner-gated" role="status"><span class="auth-banner-dot" aria-hidden="true"></span><span>Requires a bearer token.</span></div>`;
-    }
-    // oauth
-    const issuer = auth.oauthIssuer ? html ` <a href="${auth.oauthIssuer}">Sign in ↗</a>` : html ``;
-    return html `<div class="auth-banner auth-banner-gated" role="status"><span class="auth-banner-dot" aria-hidden="true"></span><span>Requires OAuth.${issuer}</span></div>`;
-}
 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.toLowerCase()}">(${count})</span>
+      <span class="section-count" aria-label="${String(count)} ${label}">${String(count)}</span>
     </div>
   `;
 }
-function renderSnippet(id, text, variant = 'code') {
+function renderSnippet(id, text) {
     const targetId = `snippet-${id}`;
     return html `
     <div class="snippet">
-      <pre id="${targetId}" class="snippet-${variant}"><code>${text}</code></pre>
+      <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" title="${authMeta.ariaLabel}">
+        <span class="status-dot ${authMeta.dotClass}" aria-hidden="true"></span>
+        <span class="status-value">${authMeta.label}</span>${signin}
+      </span>
+      ${counts.map((c) => html `
+          <a class="status-item status-link" href="#section-${c.label}">
+            <span class="status-value">${String(c.n)}</span>
+            <span>${c.label}</span>
+          </a>
+        `)}
+      <span class="status-item" title="MCP protocol version ${protocol.latestVersion}">
+        <span>protocol</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) {
+function renderHero(manifest, baseUrl, degraded) {
     const { server, landing } = manifest;
     const releaseUrl = landing.repoRoot
         ? `${landing.repoRoot.url}/releases/tag/v${server.version}`
         : undefined;
-    const versionBadge = renderBadge(`v${server.version}`, 'version', releaseUrl);
+    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
-        ? renderBadge(landing.preRelease.label ?? 'pre-release', 'pre')
+        ? html `<span class="badge-pre">${landing.preRelease.label ?? 'pre-release'}</span>`
         : html ``;
     const tagline = landing.tagline ?? server.description ?? '';
     const logo = landing.logo
@@ -432,73 +1000,142 @@ function renderHero(manifest, baseUrl) {
     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">
-      <div class="hero-top">
+      <span class="hero-eyebrow" aria-hidden="true">MCP Server</span>
+      <div class="hero-title-row">
         ${logo}
-        <div class="hero-identity">
-          <h1 class="hero-heading">
-            <span>${server.name}</span>
-            ${versionBadge}
-            ${preReleaseBadge}
-          </h1>
-          ${tagline ? html `<p class="hero-tagline">${tagline}</p>` : html ``}
-          ${frameworkBadge}
-        </div>
+        <h1 class="hero-heading">${server.name}</h1>
+        ${versionBadge}
+        ${preReleaseBadge}
       </div>
-      ${renderAuthBanner(manifest.auth)}
-      ${renderConnectSnippets(manifest, baseUrl)}
+      ${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 claudeDesktopConfig = JSON.stringify({
+    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: {
-            [manifest.server.name]: {
-                type: 'http',
-                url: endpoint,
+            [shortName]: {
+                command: 'bunx',
+                args: npmPackage ? [`${npmPackage}@latest`] : ['mcp-remote', endpoint],
+                ...(envObject && { env: envObject }),
             },
         },
     }, null, 2);
-    const mcpRemoteConfig = JSON.stringify({
+    const httpConfig = JSON.stringify({
         mcpServers: {
-            [manifest.server.name]: {
-                command: 'npx',
-                args: ['-y', 'mcp-remote', endpoint],
+            [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');
-    // Radio-hack tabs — no JS required for tab switching.
+    // 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-tabs" role="tablist" aria-label="Connection snippets">
-      <input type="radio" class="connect-tab-input" name="connect" id="connect-tab-http" checked />
-      <label for="connect-tab-http" class="connect-tab-label" role="tab">HTTP client</label>
-      <input type="radio" class="connect-tab-input" name="connect" id="connect-tab-remote" />
-      <label for="connect-tab-remote" class="connect-tab-label" role="tab">mcp-remote (stdio)</label>
-      <input type="radio" class="connect-tab-input" name="connect" id="connect-tab-curl" />
-      <label for="connect-tab-curl" class="connect-tab-label" role="tab">curl</label>
+    <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">
-        <div class="connect-panel" role="tabpanel">${renderSnippet('http', claudeDesktopConfig)}</div>
-        <div class="connect-panel" role="tabpanel">${renderSnippet('remote', mcpRemoteConfig)}</div>
-        <div class="connect-panel" role="tabpanel">${renderSnippet('curl', curl)}</div>
+        ${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 }];
-    // Count first-segment prefixes. A prefix earns a group when >= 2 tools share it.
     const prefixCounts = new Map();
     for (const tool of tools) {
         const prefix = tool.name.split('_', 1)[0];
@@ -509,7 +1146,6 @@ function groupToolsByPrefix(tools) {
     const groupablePrefixes = new Set([...prefixCounts.entries()].filter(([, count]) => count >= 2).map(([p]) => p));
     if (groupablePrefixes.size === 0)
         return [{ label: null, tools }];
-    // Preserve encounter order; create one group per qualifying prefix plus "Other".
     const groups = new Map();
     const other = [];
     for (const tool of tools) {
@@ -574,9 +1210,14 @@ function renderToolCard(tool) {
         </details>
       `
         : html ``;
-    const invocation = buildInvocationSnippet(tool);
+    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 `<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}">
@@ -587,7 +1228,7 @@ function renderToolCard(tool) {
       </div>
       <p class="card-desc">${tool.description}</p>
       ${authBadges}
-      ${renderSnippet(`tool-${tool.name}`, invocation)}
+      ${invocation}
       ${schemaPreview}
     </article>
   `;
@@ -596,9 +1237,12 @@ function renderToolsSection(tools) {
     if (tools.length === 0)
         return html ``;
     const groups = groupToolsByPrefix(tools);
+    // A single group — whether labeled or not — would render as redundant with
+    // the section header. Skip the sub-heading; render a flat grid.
+    const showHeadings = groups.length > 1;
     const body = groups.map((group) => {
-        const heading = group.label ? html `<h4 class="group-heading">${group.label}</h4>` : html ``;
-        return html `${heading}${group.tools.map(renderToolCard)}`;
+        const heading = showHeadings && 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">
@@ -629,8 +1273,8 @@ function renderResourceCard(resource) {
       </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 ``}
+        <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>
   `;
@@ -641,7 +1285,7 @@ function renderResourcesSection(resources) {
     return html `
     <section aria-labelledby="section-resources">
       ${renderSectionHeading('section-resources', 'Resources', resources.length)}
-      ${resources.map(renderResourceCard)}
+      <div class="card-grid">${resources.map(renderResourceCard)}</div>
     </section>
   `;
 }
@@ -682,7 +1326,7 @@ function renderPromptsSection(prompts) {
     return html `
     <section aria-labelledby="section-prompts">
       ${renderSectionHeading('section-prompts', 'Prompts', prompts.length)}
-      ${prompts.map(renderPromptCard)}
+      <div class="card-grid">${prompts.map(renderPromptCard)}</div>
     </section>
   `;
 }
@@ -696,14 +1340,16 @@ function renderExtensionsSection(extensions) {
     return html `
     <section aria-labelledby="section-extensions">
       ${renderSectionHeading('section-extensions', 'Extensions', entries.length)}
-      ${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 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>
   `;
 }
@@ -712,48 +1358,39 @@ function renderExtensionsSection(extensions) {
 // ---------------------------------------------------------------------------
 function renderFooter(manifest) {
     const { landing, framework } = manifest;
-    const groups = [];
+    const links = [];
     // User-supplied links
-    if (landing.links.length > 0) {
-        groups.push({
-            label: 'Links',
-            links: landing.links.map((l) => ({ href: l.href, label: l.label })),
-        });
+    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;
-        groups.push({
-            label: 'Repository',
-            links: [
-                { href: landing.changelogUrl ?? `${repo.url}/blob/main/CHANGELOG.md`, label: 'Changelog' },
-                { href: `${repo.url}/releases/tag/v${version}`, label: `Release v${version}` },
-                { href: `${repo.url}/issues`, label: 'Issues' },
-                { href: repo.url, label: 'Source' },
-            ],
+        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) {
-        groups.push({
-            label: 'Registry',
-            links: [{ href: landing.npmPackage.url, label: `npm: ${landing.npmPackage.name}` }],
-        });
+        links.push({ href: landing.npmPackage.url, label: 'npm' });
     }
-    const groupsHtml = groups.map((g) => html `
-      <div class="footer-group">
-        <span class="footer-group-label">${g.label}</span>
-        ${g.links.map((l) => html `<a href="${l.href}" rel="noopener">${l.label}</a>`)}
-      </div>
-    `);
     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 `<p class="footer-attrib">Built on <a href="${framework.homepage}">${framework.name}</a> v${framework.version} · <a href="${frameworkNpm}" rel="noopener">npm</a></p>`
+        ? 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>
-      ${groups.length > 0 ? html `<div class="footer-links">${groupsHtml}</div>` : html ``}
+      ${linkEls}
+      <span class="footer-spacer"></span>
       ${attribution}
     </footer>
   `;
@@ -771,6 +1408,7 @@ function renderHead(manifest, pageUrl) {
     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',
@@ -785,6 +1423,7 @@ function renderHead(manifest, pageUrl) {
     <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" />
@@ -828,10 +1467,9 @@ function escapeLdJson(json) {
  */
 export function renderLandingPage(manifest, baseUrl, degraded = false) {
     const pageUrl = `${baseUrl.replace(/\/$/, '')}/`;
-    const landing = manifest.landing;
     const body = degraded
         ? html `
-        ${renderHero(manifest, baseUrl)}
+        ${renderHero(manifest, baseUrl, true)}
         <section>
           <p class="empty-state">
             Full server inventory is available to authenticated callers.
@@ -840,7 +1478,7 @@ export function renderLandingPage(manifest, baseUrl, degraded = false) {
         ${renderFooter(manifest)}
       `
         : html `
-        ${renderHero(manifest, baseUrl)}
+        ${renderHero(manifest, baseUrl, false)}
         ${renderToolsSection(manifest.definitions.tools)}
         ${renderResourcesSection(manifest.definitions.resources)}
         ${renderPromptsSection(manifest.definitions.prompts)}
@@ -851,7 +1489,7 @@ export function renderLandingPage(manifest, baseUrl, degraded = false) {
 <html lang="en">
   <head>
     ${renderHead(manifest, pageUrl)}
-    ${renderTokens(landing.theme.accent)}
+    ${renderTokens(manifest.landing.theme.accent)}
   </head>
   <body>
     <main>${body}</main>