npm - @cyanmycelium/mcp-broker - Versions diffs - 0.4.0 → 1.2.0 - Mend

@cyanmycelium/mcp-broker 0.4.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/.mcp-broker.example/CONFIGURATION-EN.md +861 -0
package/.mcp-broker.example/CONFIGURATION-FR.md +871 -0
package/.mcp-broker.example/README.md +8 -3
package/.mcp-broker.example/config.json +86 -0
package/README.md +122 -3
package/dist/bin.d.ts +0 -1
package/dist/bin.js +180 -208
package/dist/bin.js.map +1 -1
package/dist/chunk-FTDKH2C4.js +3670 -0
package/dist/chunk-FTDKH2C4.js.map +1 -0
package/dist/{broker/grammars → grammars}/claude/en.json +1 -1
package/dist/{broker/grammars → grammars}/claude/fr.json +1 -1
package/dist/index.d.ts +1790 -18
package/dist/index.js +2 -14
package/dist/index.js.map +1 -1
package/package.json +14 -8
package/scripts/copy-assets.mjs +16 -10
package/scripts/gen-cert.mjs +5 -5
package/scripts/pack-mcpb.mjs +5 -5
package/scripts/sign-bundle.mjs +6 -6
package/src/auth/auth.config.ts +98 -0
package/src/auth/auth.types.ts +120 -0
package/src/auth/http.auth.ts +128 -0
package/src/auth/index.ts +34 -0
package/src/auth/jwt.validator.ts +63 -0
package/src/auth/provider.auth.ts +114 -0
package/src/auth/resource.metadata.ts +34 -0
package/src/authorization/audit.ts +35 -0
package/src/authorization/capability.classifier.ts +114 -0
package/src/authorization/index.ts +37 -0
package/src/authorization/policy.engine.ts +212 -0
package/src/authorization/policy.types.ts +105 -0
package/src/authorization/resource.path.ts +126 -0
package/src/authorization/runtime.ts +56 -0
package/src/authorization/slot.resource.ts +50 -0
package/src/authorization/subject.mapper.ts +81 -0
package/src/bin.ts +90 -7
package/src/broker/adapters/broker.adapter.info.ts +3 -3
package/src/broker/adapters/broker.adapter.providers.ts +3 -3
package/src/broker/aggregate/aggregate.catalog.ts +49 -21
package/src/broker/aggregate/aggregate.server.ts +149 -19
package/src/broker/aggregate/provider.client.session.ts +22 -22
package/src/broker/behaviors/broker.behavior.info.ts +4 -4
package/src/broker/behaviors/broker.behavior.providers.ts +6 -6
package/src/broker/broker.context.ts +10 -4
package/src/broker/broker.grammars.ts +16 -13
package/src/broker/broker.server.ts +12 -9
package/src/broker/grammars/claude/en.json +1 -1
package/src/broker/grammars/claude/fr.json +1 -1
package/src/broker/index.ts +9 -9
package/src/config.ts +81 -8
package/src/index.ts +121 -20
package/src/{mcpb.loader.ts → mcpb/mcpb.loader.ts} +24 -21
package/src/{mcpb.unzip.ts → mcpb/mcpb.unzip.ts} +2 -2
package/src/remote.transports.ts +11 -8
package/src/remote.upstream.ts +11 -8
package/src/stdio.upstream.ts +9 -6
package/src/upstream.ts +6 -3
package/src/ws/ws.interfaces.ts +357 -0
package/src/{ws.tunnel.builder.ts → ws/ws.tunnel.builder.ts} +112 -9
package/src/{ws.tunnel.ts → ws/ws.tunnel.ts} +646 -457
package/web/README.md +94 -0
package/web/assets/logo.png +0 -0
package/web/broker-self-mcp.html +338 -0
package/web/css/styles.css +580 -0
package/web/demos/DemoPlaceholder.html +258 -0
package/web/demos/broker-explorer/css/app.css +393 -0
package/web/demos/broker-explorer/index.html +94 -0
package/web/demos/broker-explorer/js/app.js +271 -0
package/web/demos/broker-explorer/js/mcp-ws-client.js +132 -0
package/web/demos/oauth-lab/README.md +94 -0
package/web/demos/oauth-lab/config.json +117 -0
package/web/demos/oauth-lab/css/app.css +1097 -0
package/web/demos/oauth-lab/index.html +323 -0
package/web/demos/oauth-lab/js/app.js +654 -0
package/web/demos/oauth-lab/server/auth-server.mjs +426 -0
package/web/demos/oauth-lab/server/factory-provider.mjs +269 -0
package/web/demos/oauth-lab/server/smoke-test.mjs +308 -0
package/web/demos/oauth-lab/server/start.mjs +106 -0
package/web/demos/provider-tunnel/css/app.css +384 -0
package/web/demos/provider-tunnel/index.html +99 -0
package/web/demos/provider-tunnel/js/app.js +226 -0
package/web/demos/provider-tunnel/js/toolbox-server.js +186 -0
package/web/index.html +558 -0
package/web/js/lib/broker-tunnel.js +173 -0
package/dist/broker/adapters/broker.adapter.info.d.ts +0 -16
package/dist/broker/adapters/broker.adapter.info.js +0 -43
package/dist/broker/adapters/broker.adapter.info.js.map +0 -1
package/dist/broker/adapters/broker.adapter.providers.d.ts +0 -18
package/dist/broker/adapters/broker.adapter.providers.js +0 -61
package/dist/broker/adapters/broker.adapter.providers.js.map +0 -1
package/dist/broker/aggregate/aggregate.catalog.d.ts +0 -54
package/dist/broker/aggregate/aggregate.catalog.js +0 -105
package/dist/broker/aggregate/aggregate.catalog.js.map +0 -1
package/dist/broker/aggregate/aggregate.server.d.ts +0 -47
package/dist/broker/aggregate/aggregate.server.js +0 -151
package/dist/broker/aggregate/aggregate.server.js.map +0 -1
package/dist/broker/aggregate/provider.client.session.d.ts +0 -52
package/dist/broker/aggregate/provider.client.session.js +0 -140
package/dist/broker/aggregate/provider.client.session.js.map +0 -1
package/dist/broker/behaviors/broker.behavior.info.d.ts +0 -15
package/dist/broker/behaviors/broker.behavior.info.js +0 -41
package/dist/broker/behaviors/broker.behavior.info.js.map +0 -1
package/dist/broker/behaviors/broker.behavior.providers.d.ts +0 -19
package/dist/broker/behaviors/broker.behavior.providers.js +0 -69
package/dist/broker/behaviors/broker.behavior.providers.js.map +0 -1
package/dist/broker/broker.context.d.ts +0 -59
package/dist/broker/broker.context.js +0 -2
package/dist/broker/broker.context.js.map +0 -1
package/dist/broker/broker.grammars.d.ts +0 -130
package/dist/broker/broker.grammars.js +0 -229
package/dist/broker/broker.grammars.js.map +0 -1
package/dist/broker/broker.server.d.ts +0 -66
package/dist/broker/broker.server.js +0 -73
package/dist/broker/broker.server.js.map +0 -1
package/dist/broker/index.d.ts +0 -9
package/dist/broker/index.js +0 -7
package/dist/broker/index.js.map +0 -1
package/dist/config.d.ts +0 -136
package/dist/config.js +0 -61
package/dist/config.js.map +0 -1
package/dist/mcpb.loader.d.ts +0 -24
package/dist/mcpb.loader.js +0 -161
package/dist/mcpb.loader.js.map +0 -1
package/dist/mcpb.unzip.d.ts +0 -6
package/dist/mcpb.unzip.js +0 -95
package/dist/mcpb.unzip.js.map +0 -1
package/dist/remote.transports.d.ts +0 -16
package/dist/remote.transports.js +0 -297
package/dist/remote.transports.js.map +0 -1
package/dist/remote.upstream.d.ts +0 -36
package/dist/remote.upstream.js +0 -52
package/dist/remote.upstream.js.map +0 -1
package/dist/stdio.upstream.d.ts +0 -45
package/dist/stdio.upstream.js +0 -85
package/dist/stdio.upstream.js.map +0 -1
package/dist/upstream.d.ts +0 -33
package/dist/upstream.js +0 -2
package/dist/upstream.js.map +0 -1
package/dist/version.d.ts +0 -2
package/dist/version.js +0 -9
package/dist/version.js.map +0 -1
package/dist/ws.tunnel.builder.d.ts +0 -139
package/dist/ws.tunnel.builder.js +0 -205
package/dist/ws.tunnel.builder.js.map +0 -1
package/dist/ws.tunnel.d.ts +0 -373
package/dist/ws.tunnel.js +0 -1090
package/dist/ws.tunnel.js.map +0 -1
/package/dist/{broker/grammars → grammars}/default/en.json +0 -0
/package/dist/{broker/grammars → grammars}/default/fr.json +0 -0
/package/dist/{broker/grammars → grammars}/default/zh.json +0 -0

package/web/demos/DemoPlaceholder.html ADDED Viewed

@@ -0,0 +1,258 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Demo coming soon · @cyanmycelium/mcp-broker</title>
+  <meta name="description" content="This demo is not bundled yet." />
+  <link rel="icon" type="image/png" href="../assets/logo.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap">
+  <link rel="stylesheet" href="../css/styles.css" />
+  <style>
+    /* --- Placeholder layout ----------------------------------------------- */
+    main.center {
+      min-height: calc(100vh - 56px - 145px);
+      display: grid;
+      place-items: center;
+      padding: 64px 0;
+    }
+    .ph-shell {
+      max-width: 640px;
+      margin: 0 auto;
+      padding: 0 var(--gutter);
+      text-align: center;
+    }
+    /* Big terminal-style placeholder mark, repeats the dotted/striped pattern
+       we already use for placeholders elsewhere, but in the brand palette */
+    .ph-mark {
+      width: 140px;
+      height: 140px;
+      margin: 0 auto 28px;
+      border: 1px dashed var(--rule-strong);
+      border-radius: 12px;
+      display: grid;
+      place-items: center;
+      background:
+        repeating-linear-gradient(
+          45deg,
+          transparent 0 6px,
+          rgba(59, 130, 246, 0.05) 6px 7px
+        ),
+        var(--bg-elev-1);
+      color: var(--blue);
+      position: relative;
+    }
+    .ph-mark::after {
+      content: "DEMO";
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--bg);
+      padding: 0 8px;
+      font-family: var(--font-mono);
+      font-size: 10px;
+      letter-spacing: 0.2em;
+      color: var(--fg-dim);
+    }
+    .ph-mark svg { opacity: 0.85; }
+    .ph-eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: var(--font-mono);
+      font-size: 11px;
+      color: var(--fg-dim);
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      margin-bottom: 14px;
+    }
+    .ph-eyebrow .dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: var(--fg-dim);
+    }
+    .ph-title {
+      font-family: var(--font-mono);
+      font-size: clamp(26px, 4vw, 36px);
+      font-weight: 500;
+      letter-spacing: -0.02em;
+      line-height: 1.2;
+      margin: 0 0 16px;
+      color: var(--fg);
+    }
+    .ph-title .slot {
+      color: var(--blue);
+    }
+    .ph-sub {
+      font-size: 17px;
+      color: var(--fg-muted);
+      line-height: 1.55;
+      margin: 0 0 32px;
+      text-wrap: pretty;
+    }
+    /* Slot panel, pulls the slot name out of ?slot= or the URL path so the
+       page is generic-by-default but feels specific when linked to */
+    .ph-slot {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 14px;
+      margin-bottom: 32px;
+      background: var(--bg-elev-1);
+      border: 1px solid var(--rule);
+      border-radius: 6px;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--fg-muted);
+    }
+    .ph-slot .k { color: var(--fg-dim); }
+    .ph-slot .v { color: var(--blue); }
+    .ph-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      justify-content: center;
+    }
+    /* "What you can do instead": a compact 2-up below the fold */
+    .ph-meanwhile {
+      max-width: 640px;
+      margin: 56px auto 0;
+      padding: 22px 24px;
+      background: var(--bg-elev-1);
+      border: 1px solid var(--rule);
+      border-radius: 8px;
+      text-align: left;
+    }
+    .ph-meanwhile .h {
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.16em;
+      color: var(--blue);
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+    .ph-meanwhile p {
+      margin: 0 0 6px;
+      font-size: 14px;
+      color: var(--fg-muted);
+      line-height: 1.55;
+    }
+    .ph-meanwhile p:last-child { margin-bottom: 0; }
+    .ph-meanwhile code {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--blue);
+      background: var(--bg-inline);
+      border: 1px solid var(--rule);
+      padding: 1px 5px;
+      border-radius: 3px;
+    }
+  </style>
+</head>
+<body>
+<!-- ============================== TOPBAR ============================== -->
+<header class="topbar">
+  <div class="shell topbar-inner">
+    <a class="brand" href="/">
+      <img class="brand-mark" src="../assets/logo.png" alt="" aria-hidden="true" />
+      <span>@cyanmycelium/mcp-broker</span>
+    </a>
+    <nav class="topbar-links">
+      <a href="/">← Back to launcher</a>
+      <a href="https://github.com/pandaGaume/mcp-broker" target="_blank" rel="noopener">GitHub →</a>
+    </nav>
+  </div>
+</header>
+<main class="center">
+  <div class="ph-shell">
+    <div class="ph-mark" aria-hidden="true">
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="4" width="18" height="14" rx="2"/>
+        <path d="M3 8h18"/>
+        <path d="M7 12h2M11 12h6"/>
+        <path d="M7 15h4"/>
+      </svg>
+    </div>
+    <div class="ph-eyebrow"><span class="dot"></span>placeholder · not bundled yet</div>
+    <h1 class="ph-title">
+      Demo <span class="slot" id="slot-name">, </span> isn't ready yet.
+    </h1>
+    <p class="ph-sub">
+      This page is a stand-in. The example it links to hasn't been packaged
+      into this build of the broker. The broker itself is running fine: it's
+      just this demo's static assets that are missing.
+    </p>
+    <div class="ph-slot">
+      <span class="k">requested slot</span>
+      <span class="v" id="slot-path">/examples/…</span>
+    </div>
+    <div class="ph-actions">
+      <a class="btn btn-primary" href="/">← Back to launcher</a>
+      <a class="btn btn-secondary" href="https://github.com/pandaGaume/mcp-broker" target="_blank" rel="noopener">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+        Contribute this demo
+      </a>
+    </div>
+    <div class="ph-meanwhile">
+      <div class="h">In the meantime</div>
+      <p>The broker is still serving the standard MCP endpoints. Point a client at <code>http://localhost:3000/_broker/mcp</code> to talk to the broker itself.</p>
+      <p>Or drop your own static demo into <code>.mcp-broker/www/</code> and refresh: the static mount picks it up immediately.</p>
+    </div>
+  </div>
+</main>
+<!-- ================================ FOOTER ============================= -->
+<footer>
+  <div class="shell footer-inner">
+    <div class="footer-links">
+      <a href="https://github.com/pandaGaume/mcp-broker" target="_blank" rel="noopener">github.com/pandaGaume/mcp-broker</a>
+      <a href="https://npmjs.com/package/@cyanmycelium/mcp-broker" target="_blank" rel="noopener">npmjs.com/package/@cyanmycelium/mcp-broker</a>
+      <a href="https://github.com/pandaGaume/mcp-broker/tree/main/docs" target="_blank" rel="noopener">Docs</a>
+    </div>
+    <div>© CyanMycelium · Apache-2.0</div>
+  </div>
+</footer>
+<script>
+  /* Read ?slot=name (preferred) or fall back to the URL path so the page
+     can be linked to as either /placeholder.html?slot=babylon-scene
+     or /examples/babylon-scene/ (with this file served from there). */
+  (function () {
+    const url = new URL(window.location.href);
+    let slot = url.searchParams.get('slot');
+    if (!slot) {
+      const m = url.pathname.match(/\/examples\/([^/]+)/);
+      slot = m ? m[1] : null;
+    }
+    if (slot) {
+      document.getElementById('slot-name').textContent = slot;
+      document.getElementById('slot-path').textContent = '/examples/' + slot + '/';
+      document.title = 'Demo "' + slot + '" coming soon · @cyanmycelium/mcp-broker';
+    } else {
+      document.getElementById('slot-name').textContent = 'this';
+      document.getElementById('slot-path').textContent = '/examples/<name>/';
+    }
+  })();
+</script>
+</body>
+</html>

package/web/demos/broker-explorer/css/app.css ADDED Viewed

@@ -0,0 +1,393 @@
+/* =============================================================
+   Broker Explorer Demo, app-specific overrides
+   Base: ../../css/styles.css
+   ============================================================= */
+:root {
+    --amber: #ffb86b;
+    --red: #f78c6c;
+    --bg-code: #0a0e13;
+}
+/* App shell: full-viewport, no scroll */
+html, body {
+    height: 100dvh;
+}
+body {
+    font-size: 15px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+code {
+    font-family: var(--font-mono);
+}
+/* Topbar */
+.topbar {
+    flex-shrink: 0;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 22px;
+}
+.brand {
+    color: var(--fg);
+    text-decoration: none;
+}
+.brand:hover {
+    text-decoration: none;
+}
+.brand-mark {
+    width: 26px;
+    height: 26px;
+}
+.topbar-tag {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--blue);
+    padding: 3px 9px;
+    border: 1px solid var(--rule-strong);
+    border-radius: 4px;
+}
+.topbar-spacer {
+    flex: 1;
+}
+.topbar-link {
+    font-size: 13px;
+    color: var(--fg-muted);
+    text-decoration: none;
+}
+.topbar-link:hover {
+    color: var(--fg);
+    text-decoration: none;
+}
+/* Status badge */
+.badge {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    padding: 4px 11px;
+    border-radius: 99px;
+    border: 1px solid var(--rule-strong);
+    height: auto;
+    background: none;
+    color: var(--fg-muted);
+}
+.badge.disconnected {
+    color: var(--red);
+    background: rgba(247, 140, 108, 0.08);
+    border-color: rgba(247, 140, 108, 0.3);
+}
+.badge.connecting {
+    color: var(--amber);
+    background: rgba(255, 184, 107, 0.08);
+    border-color: rgba(255, 184, 107, 0.3);
+}
+.badge.connected {
+    color: var(--lime);
+    background: rgba(184, 224, 96, 0.08);
+    border-color: rgba(184, 224, 96, 0.32);
+}
+/* Buttons */
+.btn {
+    height: 38px;
+    padding: 0 16px;
+    gap: 8px;
+}
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.btn-primary:not(:disabled):hover {
+    background: var(--blue-bright);
+    border-color: var(--blue-bright);
+    color: var(--blue-deep);
+}
+.btn-secondary:not(:disabled):hover {
+    border-color: var(--fg-muted);
+    background: var(--bg-elev-1);
+}
+/* Layout */
+.layout {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+}
+.left-panel {
+    width: 360px;
+    flex-shrink: 0;
+    border-right: 1px solid var(--rule);
+}
+.right-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.panel {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.panel-title {
+    flex-shrink: 0;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--blue);
+    padding: 11px 18px;
+    background: var(--bg-elev-1);
+    border-bottom: 1px solid var(--rule);
+}
+.panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 18px;
+}
+.catalog-panel {
+    flex: 1;
+    border-bottom: 1px solid var(--rule);
+}
+.console-panel {
+    height: 240px;
+    flex-shrink: 0;
+}
+/* Form controls */
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 16px;
+}
+.field label {
+    font-size: 12px;
+    color: var(--fg-dim);
+}
+input[type="text"] {
+    width: 100%;
+    background: var(--bg-code);
+    border: 1px solid var(--rule-strong);
+    border-radius: 6px;
+    color: var(--fg);
+    font-family: var(--font-mono);
+    font-size: 13px;
+    padding: 8px 11px;
+}
+input[type="text"]:focus {
+    outline: none;
+    border-color: var(--blue-dim);
+}
+input[readonly] {
+    color: var(--blue-bright);
+    cursor: text;
+}
+/* Slot preset chips */
+.slot-presets {
+    display: flex;
+    gap: 8px;
+    margin: -6px 0 16px;
+}
+.preset {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--fg-muted);
+    background: var(--bg-elev-1);
+    border: 1px solid var(--rule-strong);
+    border-radius: 4px;
+    padding: 4px 10px;
+    cursor: pointer;
+    transition: color 120ms, border-color 120ms;
+}
+.preset:hover {
+    color: var(--blue);
+    border-color: var(--blue-dim);
+}
+.btn-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 9px;
+    margin-top: 4px;
+}
+/* Endpoints */
+.endpoints {
+    margin-top: 20px;
+    padding-top: 16px;
+    border-top: 1px solid var(--rule);
+}
+.endpoints .field {
+    margin-bottom: 12px;
+}
+.endpoints .field label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--blue);
+}
+.endpoints .field:last-child {
+    margin-bottom: 0;
+}
+.hint {
+    margin-top: 18px;
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--fg-dim);
+}
+.hint code {
+    font-size: 0.86em;
+    color: var(--blue);
+    background: var(--bg-inline);
+    border: 1px solid var(--rule);
+    padding: 1px 5px;
+    border-radius: 4px;
+}
+.hint strong {
+    color: var(--fg-muted);
+    font-weight: 600;
+}
+/* Catalog */
+.empty-note {
+    color: var(--fg-dim);
+    font-size: 14px;
+}
+.cat-group {
+    margin-bottom: 20px;
+}
+.cat-group-title {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--fg-dim);
+    margin-bottom: 10px;
+}
+.cat-item {
+    background: var(--bg-elev-1);
+    border: 1px solid var(--rule);
+    border-radius: 8px;
+    padding: 12px 14px;
+    margin-bottom: 9px;
+    transition: border-color 140ms, background 140ms;
+}
+.cat-item:hover {
+    border-color: var(--blue-dim);
+}
+.cat-item-name {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--blue);
+    word-break: break-all;
+}
+.cat-item-desc {
+    font-size: 13px;
+    color: var(--fg-muted);
+    margin-top: 3px;
+    line-height: 1.5;
+}
+.cat-item-params {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--fg-dim);
+    margin-top: 5px;
+}
+.cat-item-params .pname {
+    color: var(--amber);
+}
+.cat-item-params .preq {
+    color: var(--red);
+}
+/* Tool call row */
+.cat-item-call {
+    display: flex;
+    gap: 8px;
+    margin-top: 10px;
+}
+.cat-item-call input {
+    flex: 1;
+    min-width: 0;
+}
+.call-btn {
+    flex-shrink: 0;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--blue);
+    background: var(--bg-elev-2);
+    border: 1px solid var(--blue-dim);
+    border-radius: 6px;
+    padding: 0 14px;
+    cursor: pointer;
+    transition: background 120ms, color 120ms;
+}
+.call-btn:hover {
+    background: var(--blue);
+    color: #ffffff;
+}
+.call-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.cat-result {
+    margin-top: 9px;
+    background: var(--bg-code);
+    border: 1px solid var(--rule);
+    border-radius: 6px;
+    padding: 9px 11px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--syn-fg);
+    white-space: pre-wrap;
+    overflow-x: auto;
+}
+.cat-result.error {
+    color: var(--red);
+    border-color: rgba(247, 140, 108, 0.3);
+}
+/* Console */
+#console-output {
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    line-height: 1.65;
+    background: var(--bg-code);
+}
+.log-line {
+    display: flex;
+    gap: 10px;
+}
+.log-line .ts {
+    color: var(--fg-dim);
+    user-select: none;
+    flex-shrink: 0;
+}
+.log-line .msg {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+.log-line.info .msg { color: var(--fg); }
+.log-line.ok   .msg { color: var(--lime); }
+.log-line.warn .msg { color: var(--amber); }
+.log-line.error .msg { color: var(--red); }
+.log-line.dim  .msg { color: var(--fg-dim); }