@dupecom/botcha-cloudflare 0.21.0 → 0.23.0

package/dist/dashboard/mcp-setup.js

@@ -0,0 +1,391 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { DASHBOARD_CSS } from './styles';
+import { GlobalFooter, OGMeta } from './layout';
+// ============ CSS ============
+const MCP_CSS = `
+  .mcp-page {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 3rem 2rem 4rem;
+  }
+
+  /* ---- Header ---- */
+  .mcp-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .mcp-badge {
+    display: inline-block;
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    padding: 0.3rem 0.875rem;
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+  }
+
+  .mcp-title {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1.15;
+    margin: 0 0 0.75rem;
+    color: var(--text);
+  }
+
+  .mcp-subtitle {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin: 0 auto 1.5rem;
+    max-width: 560px;
+  }
+
+  /* ---- One-liner hero ---- */
+  .mcp-oneliner {
+    margin: 0 auto 2.5rem;
+    max-width: 680px;
+  }
+
+  .mcp-oneliner-label {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+  }
+
+  .mcp-oneliner-box {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    border: 1px solid var(--accent);
+    background: var(--bg-raised);
+  }
+
+  .mcp-oneliner-code {
+    flex: 1;
+    padding: 0.875rem 1rem;
+    font-family: var(--font);
+    font-size: 0.875rem;
+    color: var(--green);
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .mcp-copy-btn {
+    padding: 0.875rem 1rem;
+    border: none;
+    border-left: 1px solid var(--accent);
+    background: var(--accent);
+    color: #fff;
+    font-family: var(--font);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: opacity 0.1s;
+  }
+
+  .mcp-copy-btn:hover { opacity: 0.75; }
+  .mcp-copy-btn.copied { background: var(--green); border-color: var(--green); }
+
+  /* ---- Tool tabs ---- */
+  .mcp-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    border: 1px solid var(--border);
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .mcp-tab {
+    padding: 0.625rem 1rem;
+    font-family: var(--font);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    border: none;
+    border-right: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-raised);
+    color: var(--text-muted);
+    transition: background 0.1s, color 0.1s;
+  }
+
+  .mcp-tab:last-child { border-right: none; }
+
+  .mcp-tab.active {
+    background: var(--bg);
+    color: var(--text);
+    border-bottom-color: var(--bg);
+  }
+
+  .mcp-tab:hover:not(.active) {
+    color: var(--text);
+    background: var(--bg);
+  }
+
+  /* ---- Tool panels ---- */
+  .mcp-panels {
+    border: 1px solid var(--border);
+    margin-bottom: 2.5rem;
+  }
+
+  .mcp-panel {
+    display: none;
+    padding: 1.5rem;
+  }
+
+  .mcp-panel.active { display: block; }
+
+  .mcp-panel-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+  }
+
+  .mcp-panel-desc {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin-bottom: 1.25rem;
+  }
+
+  .mcp-panel-desc a {
+    color: var(--text-muted);
+  }
+
+  .mcp-snippet-wrap {
+    position: relative;
+    margin-bottom: 1rem;
+  }
+
+  .mcp-snippet-label {
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    margin-bottom: 0.375rem;
+  }
+
+  .mcp-snippet {
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    padding: 1rem 1.25rem;
+    font-size: 0.8125rem;
+    color: var(--text);
+    white-space: pre;
+    overflow-x: auto;
+    line-height: 1.5;
+    font-family: var(--font);
+  }
+
+  .mcp-snippet-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+  }
+
+  .mcp-snippet-copy {
+    padding: 0.3rem 0.75rem;
+    border: 1px solid var(--border);
+    background: var(--bg);
+    color: var(--text-muted);
+    font-family: var(--font);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: border-color 0.1s, color 0.1s;
+  }
+
+  .mcp-snippet-copy:hover { border-color: var(--accent); color: var(--text); }
+  .mcp-snippet-copy.copied { border-color: var(--green); color: var(--green); }
+
+  .mcp-config-path {
+    font-size: 0.6875rem;
+    color: var(--text-dim);
+    margin-top: 0.375rem;
+    margin-bottom: 1rem;
+  }
+
+  .mcp-config-path code {
+    color: var(--text-muted);
+    font-size: 0.6875rem;
+  }
+
+  /* ---- Info strip ---- */
+  .mcp-info {
+    border: 1px solid var(--border);
+    padding: 1.25rem 1.5rem;
+    margin-bottom: 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+  }
+
+  .mcp-info-item {}
+
+  .mcp-info-label {
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    margin-bottom: 0.25rem;
+  }
+
+  .mcp-info-value {
+    font-size: 0.8125rem;
+    color: var(--text);
+  }
+
+  .mcp-info-value a { color: var(--text); }
+
+  /* ---- Tools table ---- */
+  .mcp-tools-title {
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
+    margin-top: 2rem;
+  }
+
+  .mcp-tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 0.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .mcp-tool-card {
+    border: 1px solid var(--border);
+    padding: 0.875rem 1rem;
+  }
+
+  .mcp-tool-name {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text);
+    margin-bottom: 0.25rem;
+  }
+
+  .mcp-tool-name code {
+    font-size: 0.6875rem;
+    color: var(--green);
+  }
+
+  .mcp-tool-desc {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+  }
+
+  @media (max-width: 600px) {
+    .mcp-title { font-size: 1.5rem; }
+    .mcp-oneliner-code { font-size: 0.75rem; }
+    .mcp-tab { padding: 0.5rem 0.625rem; font-size: 0.5625rem; }
+  }
+`;
+// ============ SNIPPET CONTENT ============
+const SNIPPETS = {
+    claudeCode: {
+        cli: `claude mcp add --transport http botcha https://botcha.ai/mcp`,
+        json: `{
+  "mcpServers": {
+    "botcha": {
+      "type": "http",
+      "url": "https://botcha.ai/mcp"
+    }
+  }
+}`,
+    },
+    claudeDesktop: `{
+  "mcpServers": {
+    "botcha": {
+      "type": "http",
+      "url": "https://botcha.ai/mcp"
+    }
+  }
+}`,
+    opencode: `{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "botcha": {
+      "type": "remote",
+      "url": "https://botcha.ai/mcp",
+      "enabled": true
+    }
+  }
+}`,
+    cursor: `{
+  "mcpServers": {
+    "botcha": {
+      "url": "https://botcha.ai/mcp"
+    }
+  }
+}`,
+    windsurf: `{
+  "mcpServers": {
+    "botcha": {
+      "serverUrl": "https://botcha.ai/mcp"
+    }
+  }
+}`,
+    generic: `{
+  "mcpServers": {
+    "botcha": {
+      "type": "http",
+      "url": "https://botcha.ai/mcp"
+    }
+  }
+}`,
+};
+// ============ COMPONENT ============
+export const MCPSetupPage = ({ version = '0.22.0' }) => {
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charset: "UTF-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0" }), _jsx("title", { children: "BOTCHA MCP Server \u2014 Add to Your AI Agent" }), _jsx(OGMeta, { title: "BOTCHA MCP Server", description: "Add BOTCHA to Claude Code, Claude Desktop, OpenCode, Cursor, or Windsurf in one command. Read-only documentation server \u2014 no auth required.", url: "https://botcha.ai/mcp" }), _jsx("style", { dangerouslySetInnerHTML: { __html: DASHBOARD_CSS + MCP_CSS } })] }), _jsxs("body", { children: [_jsxs("main", { class: "mcp-page", children: [_jsxs("header", { class: "mcp-header", children: [_jsx("div", { class: "mcp-badge", children: "MCP Server" }), _jsx("h1", { class: "mcp-title", children: "Add BOTCHA to your agent" }), _jsxs("p", { class: "mcp-subtitle", children: ["BOTCHA exposes its full API reference as an", ' ', _jsx("a", { href: "https://modelcontextprotocol.io/specification/2025-03-26", target: "_blank", rel: "noopener", children: "MCP (2025-03-26)" }), ' ', "server. Ask it anything about BOTCHA features, endpoints, or get code examples. No authentication required."] })] }), _jsxs("div", { class: "mcp-oneliner", children: [_jsx("div", { class: "mcp-oneliner-label", children: "Fastest way \u2014 Claude Code CLI" }), _jsxs("div", { class: "mcp-oneliner-box", children: [_jsx("div", { class: "mcp-oneliner-code", id: "oneliner-text", children: SNIPPETS.claudeCode.cli }), _jsx("button", { class: "mcp-copy-btn", id: "oneliner-copy", onclick: "copyText('oneliner-text', 'oneliner-copy')", children: "Copy" })] })] }), _jsxs("div", { class: "mcp-info", children: [_jsxs("div", { class: "mcp-info-item", children: [_jsx("div", { class: "mcp-info-label", children: "Endpoint" }), _jsx("div", { class: "mcp-info-value", children: _jsx("a", { href: "/mcp", children: "https://botcha.ai/mcp" }) })] }), _jsxs("div", { class: "mcp-info-item", children: [_jsx("div", { class: "mcp-info-label", children: "Transport" }), _jsx("div", { class: "mcp-info-value", children: "Streamable HTTP" })] }), _jsxs("div", { class: "mcp-info-item", children: [_jsx("div", { class: "mcp-info-label", children: "Auth" }), _jsx("div", { class: "mcp-info-value", children: "None \u2014 read-only docs server" })] }), _jsxs("div", { class: "mcp-info-item", children: [_jsx("div", { class: "mcp-info-label", children: "Discovery" }), _jsx("div", { class: "mcp-info-value", children: _jsx("a", { href: "/.well-known/mcp.json", children: "/.well-known/mcp.json" }) })] })] }), _jsxs("div", { class: "mcp-tabs", id: "mcp-tabs", role: "tablist", children: [_jsx("button", { class: "mcp-tab active", onclick: "switchTab('claude-code')", role: "tab", children: "Claude Code" }), _jsx("button", { class: "mcp-tab", onclick: "switchTab('claude-desktop')", role: "tab", children: "Claude Desktop" }), _jsx("button", { class: "mcp-tab", onclick: "switchTab('opencode')", role: "tab", children: "OpenCode" }), _jsx("button", { class: "mcp-tab", onclick: "switchTab('cursor')", role: "tab", children: "Cursor" }), _jsx("button", { class: "mcp-tab", onclick: "switchTab('windsurf')", role: "tab", children: "Windsurf" }), _jsx("button", { class: "mcp-tab", onclick: "switchTab('generic')", role: "tab", children: ".mcp.json" })] }), _jsxs("div", { class: "mcp-panels", children: [_jsxs("div", { class: "mcp-panel active", id: "panel-claude-code", children: [_jsx("div", { class: "mcp-panel-title", children: "Claude Code" }), _jsxs("p", { class: "mcp-panel-desc", children: ["Run this command once \u2014 it adds BOTCHA to your user-scoped MCP config (", _jsx("code", { children: "~/.claude.json" }), "). Available across all your projects."] }), _jsx("div", { class: "mcp-snippet-label", children: "Terminal" }), _jsx("div", { class: "mcp-snippet", id: "cc-cli", children: SNIPPETS.claudeCode.cli }), _jsx("div", { class: "mcp-snippet-footer", children: _jsx("button", { class: "mcp-snippet-copy", onclick: "copyText('cc-cli', this)", children: "Copy" }) }), _jsxs("p", { class: "mcp-panel-desc", style: "margin-top: 1.25rem;", children: ["Or share with your team by checking a ", _jsx("code", { children: ".mcp.json" }), " file into your project root:"] }), _jsx("div", { class: "mcp-snippet-label", children: ".mcp.json (project root)" }), _jsx("div", { class: "mcp-snippet", id: "cc-json", children: SNIPPETS.claudeCode.json }), _jsx("div", { class: "mcp-snippet-footer", children: _jsx("button", { class: "mcp-snippet-copy", onclick: "copyText('cc-json', this)", children: "Copy" }) })] }), _jsxs("div", { class: "mcp-panel", id: "panel-claude-desktop", children: [_jsx("div", { class: "mcp-panel-title", children: "Claude Desktop" }), _jsx("p", { class: "mcp-panel-desc", children: "Add to your Claude Desktop config file, then restart the app." }), _jsxs("div", { class: "mcp-config-path", children: ["macOS: ", _jsx("code", { children: "~/Library/Application Support/Claude/claude_desktop_config.json" }), _jsx("br", {}), "Windows: ", _jsx("code", { children: "%APPDATA%\\Claude\\claude_desktop_config.json" })] }), _jsx("div", { class: "mcp-snippet-label", children: "claude_desktop_config.json" }), _jsx("div", { class: "mcp-snippet", id: "cd-json", children: SNIPPETS.claudeDesktop }), _jsx("div", { class: "mcp-snippet-footer", children: _jsx("button", { class: "mcp-snippet-copy", onclick: "copyText('cd-json', this)", children: "Copy" }) })] }), _jsxs("div", { class: "mcp-panel", id: "panel-opencode", children: [_jsx("div", { class: "mcp-panel-title", children: "OpenCode" }), _jsxs("p", { class: "mcp-panel-desc", children: ["Add to your", ' ', _jsx("a", { href: "https://opencode.ai/docs/mcp-servers/", target: "_blank", rel: "noopener", children: "OpenCode config" }), ". Global config is at ", _jsx("code", { children: "~/.config/opencode/config.json" }), ", or create ", _jsx("code", { children: "opencode.json" }), " in your project root for per-project config."] }), _jsx("div", { class: "mcp-snippet-label", children: "opencode.json / ~/.config/opencode/config.json" }), _jsx("div", { class: "mcp-snippet", id: "oc-json", children: SNIPPETS.opencode }), _jsx("div", { class: "mcp-snippet-footer", children: _jsx("button", { class: "mcp-snippet-copy", onclick: "copyText('oc-json', this)", children: "Copy" }) })] }), _jsxs("div", { class: "mcp-panel", id: "panel-cursor", children: [_jsx("div", { class: "mcp-panel-title", children: "Cursor" }), _jsxs("p", { class: "mcp-panel-desc", children: ["Add to your Cursor MCP config. Project-level: ", _jsx("code", { children: ".cursor/mcp.json" }), ". Global: ", _jsx("code", { children: "~/.cursor/mcp.json" }), ". Or use ", _jsx("strong", { children: "Cursor Settings \u2192 MCP" }), " to add a remote server."] }), _jsx("div", { class: "mcp-snippet-label", children: ".cursor/mcp.json" }), _jsx("div", { class: "mcp-snippet", id: "cursor-json", children: SNIPPETS.cursor }), _jsx("div", { class: "mcp-snippet-footer", children: _jsx("button", { class: "mcp-snippet-copy", onclick: "copyText('cursor-json', this)", children: "Copy" }) })] }), _jsxs("div", { class: "mcp-panel", id: "panel-windsurf", children: [_jsx("div", { class: "mcp-panel-title", children: "Windsurf (Cascade)" }), _jsxs("p", { class: "mcp-panel-desc", children: ["Add to ", _jsx("code", { children: "~/.codeium/windsurf/mcp_config.json" }), ". Windsurf uses ", _jsx("code", { children: "serverUrl" }), " for remote HTTP MCP servers. You can also add it via ", _jsx("strong", { children: "MCP Marketplace \u2192 Add custom" }), " in the Cascade panel."] }), _jsx("div", { class: "mcp-snippet-label", children: "~/.codeium/windsurf/mcp_config.json" }), _jsx("div", { class: "mcp-snippet", id: "ws-json", children: SNIPPETS.windsurf }), _jsx("div", { class: "mcp-snippet-footer", children: _jsx("button", { class: "mcp-snippet-copy", onclick: "copyText('ws-json', this)", children: "Copy" }) })] }), _jsxs("div", { class: "mcp-panel", id: "panel-generic", children: [_jsx("div", { class: "mcp-panel-title", children: "Generic .mcp.json" }), _jsxs("p", { class: "mcp-panel-desc", children: ["Standard MCP 2025-03-26 config compatible with any Streamable HTTP client. Drop this into your project's ", _jsx("code", { children: ".mcp.json" }), " or your agent's config directory."] }), _jsx("div", { class: "mcp-snippet-label", children: ".mcp.json" }), _jsx("div", { class: "mcp-snippet", id: "gen-json", children: SNIPPETS.generic }), _jsx("div", { class: "mcp-snippet-footer", children: _jsx("button", { class: "mcp-snippet-copy", onclick: "copyText('gen-json', this)", children: "Copy" }) })] })] }), _jsx("div", { class: "mcp-tools-title", children: "Available Tools" }), _jsxs("div", { class: "mcp-tools-grid", children: [_jsxs("div", { class: "mcp-tool-card", children: [_jsx("div", { class: "mcp-tool-name", children: _jsx("code", { children: "list_features" }) }), _jsx("div", { class: "mcp-tool-desc", children: "List all 17 BOTCHA features with category and summary" })] }), _jsxs("div", { class: "mcp-tool-card", children: [_jsx("div", { class: "mcp-tool-name", children: _jsx("code", { children: "get_feature" }) }), _jsx("div", { class: "mcp-tool-desc", children: "Full detail on a feature \u2014 endpoints, spec links, usage notes" })] }), _jsxs("div", { class: "mcp-tool-card", children: [_jsx("div", { class: "mcp-tool-name", children: _jsx("code", { children: "search_docs" }) }), _jsx("div", { class: "mcp-tool-desc", children: "Keyword search across all features and endpoint descriptions" })] }), _jsxs("div", { class: "mcp-tool-card", children: [_jsx("div", { class: "mcp-tool-name", children: _jsx("code", { children: "list_endpoints" }) }), _jsx("div", { class: "mcp-tool-desc", children: "All 25+ API endpoints grouped by category" })] }), _jsxs("div", { class: "mcp-tool-card", children: [_jsx("div", { class: "mcp-tool-name", children: _jsx("code", { children: "get_endpoint" }) }), _jsx("div", { class: "mcp-tool-desc", children: "Auth, params, request/response shape for one endpoint" })] }), _jsxs("div", { class: "mcp-tool-card", children: [_jsx("div", { class: "mcp-tool-name", children: _jsx("code", { children: "get_example" }) }), _jsx("div", { class: "mcp-tool-desc", children: "Code example in TypeScript, Python, or curl" })] })] }), _jsxs("p", { style: "font-size: 0.75rem; color: var(--text-dim); text-align: center;", children: [_jsx("a", { href: "/docs#mcp", children: "Full docs" }), ' · ', _jsx("a", { href: "/.well-known/mcp.json", children: "Discovery JSON" }), ' · ', _jsx("a", { href: "/openapi.json", children: "OpenAPI" }), ' · ', _jsx("a", { href: "/ai.txt", children: "ai.txt" }), ' · ', _jsx("a", { href: "https://github.com/dupe-com/botcha", target: "_blank", rel: "noopener", children: "GitHub" })] })] }), _jsx(GlobalFooter, {}), _jsx("script", { dangerouslySetInnerHTML: { __html: `
+          function switchTab(id) {
+            document.querySelectorAll('.mcp-tab').forEach(function(t, i) {
+              var panels = ['claude-code','claude-desktop','opencode','cursor','windsurf','generic'];
+              t.classList.toggle('active', panels[i] === id);
+            });
+            document.querySelectorAll('.mcp-panel').forEach(function(p) {
+              p.classList.toggle('active', p.id === 'panel-' + id);
+            });
+          }
+
+          function copyText(sourceId, btn) {
+            var el = document.getElementById(sourceId);
+            var text = el ? el.textContent : '';
+            navigator.clipboard.writeText(text.trim()).then(function() {
+              var b = typeof btn === 'string' ? document.getElementById(btn) : btn;
+              if (!b) return;
+              var orig = b.textContent;
+              b.textContent = 'Copied!';
+              b.classList.add('copied');
+              setTimeout(function() {
+                b.textContent = orig;
+                b.classList.remove('copied');
+              }, 1800);
+            });
+          }
+        ` } })] })] }));
+};

package/dist/dashboard/showcase.d.ts

@@ -1,20 +1,16 @@
 /**
- * BOTCHA Showcase Page
+ * BOTCHA Homepage
  *
- * Visual explainer at /showcase — shows what BOTCHA is, how it works,
- * where it fits in the agent infrastructure stack, and lets visitors
- * solve a live challenge.
+ * Served at GET / for HTML (browser) requests.
  *
- * Sections:
- *   1. Hero — side-by-side CAPTCHA vs BOTCHA comparison
- *   2. Protocol Stack — MCP / A2A / TAP positioning
- *   3. Terminal Demo — animated CLI walkthrough
- *   4. Live Demo — interactive challenge solver
+ * Deliberately minimal — this site is for agents.
+ * Humans should point their agent at botcha.ai; the agent
+ * auto-discovers everything via ai.txt, OpenAPI, and MCP.
  */
 import type { FC } from 'hono/jsx';
-export declare const SHOWCASE_CSS = "\n  /* ============ Showcase layout ============ */\n  .showcase-page {\n    max-width: 100%;\n    overflow-x: hidden;\n  }\n\n  .showcase-divider {\n    max-width: 800px;\n    margin: 0 auto;\n    border: none;\n    border-top: 1px solid var(--border);\n  }\n\n  /* ============ Section 1: TAP Announcement Hero ============ */\n  .showcase-tap-hero {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 4rem 2rem 3rem;\n    text-align: center;\n  }\n\n  .showcase-tap-hero-badge {\n    display: inline-block;\n    font-size: 0.625rem;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    padding: 0.3rem 0.875rem;\n    background: var(--green);\n    color: #fff;\n    margin-bottom: 1.5rem;\n  }\n\n  .showcase-tap-hero-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    line-height: 1.1;\n    margin: 0 0 1.25rem;\n    color: var(--text);\n  }\n\n  .showcase-tap-links {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 0.375rem;\n    margin-bottom: 1.5rem;\n  }\n\n  .showcase-tap-link {\n    font-size: 0.6875rem;\n    color: var(--text-muted);\n    text-decoration: underline;\n    text-underline-offset: 3px;\n    transition: color 0.15s;\n  }\n\n  .showcase-tap-link:hover {\n    color: var(--green);\n    opacity: 1;\n  }\n\n  .showcase-tap-links-sep {\n    color: var(--text-dim);\n    font-size: 0.625rem;\n  }\n\n  .showcase-tap-hero-subtitle {\n    font-size: 0.9375rem;\n    line-height: 1.7;\n    color: var(--text-muted);\n    max-width: 600px;\n    margin: 0 auto 2.5rem;\n  }\n\n  .showcase-tap-hero-features {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 1.5rem;\n    text-align: left;\n  }\n\n  .showcase-tap-feature {\n    padding: 1.25rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n  }\n\n  .showcase-tap-feature-title {\n    font-size: 0.8125rem;\n    font-weight: 700;\n    margin-bottom: 0.5rem;\n    color: var(--text);\n  }\n\n  .showcase-tap-feature-desc {\n    font-size: 0.75rem;\n    line-height: 1.6;\n    color: var(--text-muted);\n  }\n\n  /* ============ CAPTCHA vs BOTCHA Comparison ============ */\n  .showcase-hero {\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 4rem 2rem 2rem;\n  }\n\n  .showcase-hero-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 2rem;\n    margin-bottom: 3rem;\n  }\n\n  .showcase-hero-column {\n    border: 2px solid var(--border);\n    padding: 2rem;\n    background: var(--bg);\n  }\n\n  .showcase-hero-column.old-world {\n    border-color: var(--red);\n  }\n\n  .showcase-hero-column.new-world {\n    border-color: var(--green);\n  }\n\n  .showcase-hero-label {\n    font-size: 0.6875rem;\n    font-weight: 700;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    margin-bottom: 0.75rem;\n    color: var(--text-dim);\n  }\n\n  .showcase-hero-title {\n    font-size: 2rem;\n    font-weight: 700;\n    margin-bottom: 1.25rem;\n    line-height: 1;\n  }\n\n  .showcase-hero-title.strikethrough {\n    text-decoration: line-through;\n    color: var(--red);\n  }\n\n  .showcase-hero-title.active {\n    color: var(--green);\n  }\n\n  .showcase-hero-visual {\n    font-family: var(--font);\n    font-size: 0.6875rem;\n    line-height: 1.3;\n    margin: 1.25rem 0;\n    padding: 1rem;\n    background: #fafafa;\n    border: 1px solid var(--border);\n    white-space: pre;\n    overflow-x: auto;\n  }\n\n  .showcase-hero-visual.old-world {\n    color: var(--red);\n    border-color: var(--red);\n    background: #fff5f5;\n  }\n\n  .showcase-hero-visual.new-world {\n    color: var(--green);\n    border-color: var(--green);\n    background: #f5fff7;\n  }\n\n  .showcase-hero-subtitle {\n    font-size: 0.875rem;\n    margin-bottom: 1rem;\n    line-height: 1.5;\n    color: var(--text);\n  }\n\n  .showcase-hero-features {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    font-size: 0.75rem;\n    color: var(--text-muted);\n  }\n\n  .showcase-hero-features li {\n    padding: 0.25rem 0;\n  }\n\n  .showcase-hero-features li::before {\n    content: \"\\2192  \";\n    color: var(--text-dim);\n  }\n\n  .showcase-hero-tagline {\n    text-align: center;\n    padding: 2rem 2rem 0;\n  }\n\n  .showcase-hero-tagline-main {\n    font-size: 1.5rem;\n    font-weight: 700;\n    margin-bottom: 0.5rem;\n    color: var(--text);\n  }\n\n  .showcase-hero-tagline-sub {\n    font-size: 0.875rem;\n    color: var(--text-muted);\n  }\n\n  /* ============ Section 2: Protocol Stack ============ */\n  .showcase-protocol-stack {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 4rem 2rem;\n  }\n\n  .showcase-protocol-stack h2 {\n    font-size: 1.5rem;\n    font-weight: 700;\n    margin-bottom: 0.5rem;\n  }\n\n  .showcase-protocol-stack .subtitle {\n    color: var(--text-muted);\n    font-size: 0.875rem;\n    margin-bottom: 2.5rem;\n  }\n\n  .showcase-stack-diagram {\n    position: relative;\n    margin: 0 0 2rem 0;\n  }\n\n  .showcase-stack-layer {\n    border: 2px solid var(--border);\n    background: var(--bg);\n    padding: 1.25rem 1.5rem;\n    position: relative;\n  }\n\n  .showcase-stack-layer + .showcase-stack-layer {\n    margin-top: -2px;\n  }\n\n  .showcase-stack-layer-highlight {\n    border: 3px solid var(--accent);\n    background: var(--bg-raised);\n    z-index: 1;\n  }\n\n  .showcase-stack-layer-number {\n    font-size: 0.625rem;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--text-dim);\n    margin-bottom: 0.375rem;\n  }\n\n  .showcase-stack-layer-highlight .showcase-stack-layer-number {\n    color: var(--green);\n  }\n\n  .showcase-stack-layer-title {\n    font-size: 1.125rem;\n    font-weight: 700;\n    margin-bottom: 0.25rem;\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n  }\n\n  .showcase-stack-layer-subtitle {\n    font-size: 0.8125rem;\n    color: var(--text-muted);\n    margin-bottom: 0.375rem;\n  }\n\n  .showcase-stack-layer-features {\n    font-size: 0.75rem;\n    color: var(--text-dim);\n  }\n\n  .showcase-you-are-here {\n    display: inline-block;\n    background: var(--green);\n    color: white;\n    font-size: 0.5625rem;\n    font-weight: 700;\n    padding: 0.2rem 0.5rem;\n    letter-spacing: 0.05em;\n  }\n\n  .showcase-buzzword-badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-bottom: 2rem;\n  }\n\n  .showcase-badge {\n    display: inline-block;\n    font-size: 0.6875rem;\n    padding: 0.3rem 0.625rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    color: var(--text-muted);\n    white-space: nowrap;\n  }\n\n  .showcase-protocol-explanation {\n    font-size: 0.8125rem;\n    line-height: 1.7;\n    color: var(--text-muted);\n  }\n\n  /* ============ Section 3: Terminal Demo ============ */\n  .showcase-terminal-section {\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 4rem 2rem;\n  }\n\n  .showcase-terminal-header {\n    text-align: center;\n    margin-bottom: 2.5rem;\n  }\n\n  .showcase-terminal-title {\n    font-size: 1.5rem;\n    font-weight: 700;\n    margin: 0 0 0.5rem 0;\n    color: var(--text);\n  }\n\n  .showcase-terminal-subtitle {\n    font-size: 0.875rem;\n    color: var(--text-muted);\n    margin: 0;\n    line-height: 1.5;\n  }\n\n  .showcase-terminal-container {\n    max-width: 640px;\n    margin: 0 auto;\n  }\n\n  .showcase-terminal-window {\n    background: #0d0d0d;\n    border: 1px solid var(--border);\n    overflow: hidden;\n  }\n\n  .showcase-terminal-chrome {\n    background: #1a1a1a;\n    padding: 0.75rem 1rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    border-bottom: 1px solid #333;\n  }\n\n  .showcase-terminal-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n  }\n\n  .showcase-terminal-dot--red { background: #ff5f56; }\n  .showcase-terminal-dot--yellow { background: #ffbd2e; }\n  .showcase-terminal-dot--green { background: #27c93f; }\n\n  .showcase-terminal-title-text {\n    font-size: 0.6875rem;\n    color: #888;\n    margin-left: 0.5rem;\n  }\n\n  .showcase-terminal-content {\n    padding: 1.5rem;\n    font-size: 0.8125rem;\n    line-height: 1.6;\n    color: #f0f0f0;\n    height: 460px;\n    overflow-y: hidden;\n    font-family: var(--font);\n  }\n\n  .showcase-terminal-line {\n    margin-bottom: 0.375rem;\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .showcase-terminal-prompt { color: #888; }\n  .showcase-terminal-command { color: #f0f0f0; }\n  .showcase-terminal-flag { color: #9a9aff; }\n  .showcase-terminal-success { color: #4ade80; }\n  .showcase-terminal-label { color: #888; }\n  .showcase-terminal-value { color: #fff; }\n\n  .showcase-terminal-cursor {\n    display: inline-block;\n    background: #f0f0f0;\n    animation: showcase-cursor-blink 1s step-end infinite;\n  }\n\n  @keyframes showcase-cursor-blink {\n    0%, 50% { opacity: 1; }\n    51%, 100% { opacity: 0; }\n  }\n\n  .showcase-terminal-replay-container {\n    text-align: center;\n    margin-top: 1.5rem;\n  }\n\n  .showcase-terminal-replay-btn {\n    background: var(--bg);\n    border: 1px solid var(--border);\n    padding: 0.5rem 1rem;\n    font-family: var(--font);\n    font-size: 0.75rem;\n    color: var(--text-muted);\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .showcase-terminal-replay-btn:hover {\n    border-color: var(--accent);\n    color: var(--text);\n  }\n\n  /* ============ Section 4: Live Demo ============ */\n  .showcase-livedemo {\n    padding: 4rem 2rem;\n    background: var(--bg-raised);\n    border-top: 2px solid var(--border);\n    border-bottom: 2px solid var(--border);\n  }\n\n  .showcase-livedemo-container {\n    max-width: 700px;\n    margin: 0 auto;\n    text-align: center;\n  }\n\n  .showcase-livedemo-title {\n    font-size: 1.5rem;\n    font-weight: 700;\n    margin-bottom: 0.5rem;\n    color: var(--text);\n  }\n\n  .showcase-livedemo-subtitle {\n    font-size: 0.875rem;\n    color: var(--text-muted);\n    margin-bottom: 2.5rem;\n    line-height: 1.6;\n  }\n\n  .showcase-livedemo-button {\n    display: inline-block;\n    padding: 1rem 2rem;\n    font-size: 0.875rem;\n    font-weight: 700;\n    font-family: var(--font);\n    color: #fff;\n    background: var(--accent);\n    border: 2px solid var(--accent);\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    box-shadow: 4px 4px 0 var(--border-bright);\n    transition: all 0.15s;\n    margin-bottom: 1.5rem;\n  }\n\n  .showcase-livedemo-button:hover:not(:disabled) {\n    transform: translate(-2px, -2px);\n    box-shadow: 6px 6px 0 var(--border-bright);\n    opacity: 1;\n  }\n\n  .showcase-livedemo-button:active:not(:disabled) {\n    transform: translate(2px, 2px);\n    box-shadow: 2px 2px 0 var(--border-bright);\n  }\n\n  .showcase-livedemo-button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .showcase-livedemo-result {\n    margin-top: 2rem;\n    padding: 1.5rem;\n    background: var(--bg);\n    border: 2px solid var(--border);\n    box-shadow: 4px 4px 0 var(--border-bright);\n    text-align: left;\n    font-size: 0.8125rem;\n    line-height: 1.8;\n  }\n\n  .showcase-livedemo-result-line {\n    opacity: 0;\n    animation: showcase-livedemo-fadein 0.3s ease forwards;\n    margin-bottom: 0.375rem;\n  }\n\n  .showcase-livedemo-result-line:nth-child(1) { animation-delay: 0ms; }\n  .showcase-livedemo-result-line:nth-child(2) { animation-delay: 100ms; }\n  .showcase-livedemo-result-line:nth-child(3) { animation-delay: 200ms; }\n  .showcase-livedemo-result-line:nth-child(4) { animation-delay: 300ms; }\n  .showcase-livedemo-result-line:nth-child(5) { animation-delay: 400ms; }\n  .showcase-livedemo-result-line:nth-child(6) { animation-delay: 500ms; }\n  .showcase-livedemo-result-line:nth-child(7) { animation-delay: 600ms; }\n\n  @keyframes showcase-livedemo-fadein {\n    from { opacity: 0; transform: translateY(-4px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .showcase-livedemo-label {\n    color: var(--text-dim);\n    font-weight: 600;\n  }\n\n  .showcase-livedemo-value {\n    color: var(--text);\n  }\n\n  .showcase-livedemo-time-fast {\n    color: var(--green);\n    font-weight: 700;\n  }\n\n  .showcase-livedemo-time-slow {\n    color: var(--red);\n    font-weight: 700;\n  }\n\n  .showcase-livedemo-status-success {\n    color: var(--green);\n    font-weight: 700;\n    font-size: 1rem;\n  }\n\n  .showcase-livedemo-status-error {\n    color: var(--red);\n    font-weight: 700;\n  }\n\n  .showcase-livedemo-token {\n    font-family: var(--font);\n    color: var(--text-muted);\n    word-break: break-all;\n    font-size: 0.75rem;\n  }\n\n  .showcase-livedemo-counter {\n    margin-top: 1rem;\n    font-size: 0.75rem;\n    color: var(--text-dim);\n  }\n\n  .showcase-livedemo-error {\n    margin-top: 1.5rem;\n    padding: 1rem;\n    background: var(--bg);\n    border: 2px solid var(--red);\n    color: var(--red);\n    text-align: left;\n    font-size: 0.8125rem;\n  }\n\n  /* ============ Showcase footer ============ */\n  .showcase-footer {\n    max-width: 800px;\n    margin: 0 auto;\n    padding: 3rem 2rem 4rem;\n    text-align: center;\n  }\n\n  .showcase-footer-cta {\n    font-size: 1rem;\n    font-weight: 700;\n    margin-bottom: 1rem;\n    color: var(--text);\n  }\n\n  .showcase-footer-steps {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    max-width: 420px;\n    margin: 0 auto 2rem;\n    text-align: left;\n  }\n\n  .showcase-footer-step {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 0.8125rem;\n    padding: 0.625rem 1rem;\n    background: var(--bg-raised);\n    border: 1px solid var(--border);\n  }\n\n  .showcase-footer-step-number {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.375rem;\n    height: 1.375rem;\n    font-size: 0.6875rem;\n    font-weight: 700;\n    border: 1px solid var(--border-bright);\n    color: var(--text-muted);\n    flex-shrink: 0;\n  }\n\n  .showcase-footer-step code {\n    color: var(--text);\n  }\n\n  .showcase-agent-prompt {\n    max-width: 520px;\n    margin: 2rem auto 2.5rem;\n    text-align: center;\n  }\n\n  .showcase-agent-prompt-label {\n    font-size: 0.6875rem;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    color: var(--text-dim);\n    margin-bottom: 0.75rem;\n  }\n\n  .showcase-agent-prompt-card {\n    display: block;\n    width: 100%;\n    padding: 1.25rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    cursor: pointer;\n    font-family: var(--font);\n    text-align: left;\n    transition: border-color 0.15s;\n  }\n\n  .showcase-agent-prompt-card:hover {\n    border-color: var(--accent);\n  }\n\n  .showcase-agent-prompt-card code {\n    display: block;\n    font-size: 0.8125rem;\n    font-weight: 600;\n    color: var(--text);\n    line-height: 1.5;\n    background: none;\n    border: none;\n    padding: 0;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  .showcase-agent-prompt-copy {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    margin-top: 0.75rem;\n    font-size: 0.625rem;\n    font-weight: 500;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    transition: color 0.2s;\n  }\n\n  .showcase-agent-prompt-copy span {\n    display: flex;\n  }\n\n  .showcase-footer-links {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 0.5rem;\n    margin-bottom: 2rem;\n  }\n\n  .showcase-footer-link {\n    font-size: 0.6875rem;\n    color: var(--text);\n    text-decoration: none;\n    padding: 0.25rem 0.625rem;\n    border: 1px solid var(--border-bright);\n    transition: border-color 0.15s;\n  }\n\n  .showcase-footer-link:hover {\n    border-color: var(--accent);\n    opacity: 1;\n  }\n\n  .showcase-footer-meta {\n    font-size: 0.6875rem;\n    color: var(--text-dim);\n  }\n\n  .showcase-footer-meta a {\n    color: var(--text-muted);\n    text-decoration: none;\n  }\n\n  .showcase-footer-sep {\n    margin: 0 0.375rem;\n  }\n\n  /* ============ Responsive ============ */\n  @media (max-width: 768px) {\n    .showcase-tap-hero { padding: 3rem 1rem 2rem; }\n    .showcase-tap-hero-title { font-size: 1.75rem; }\n    .showcase-tap-hero-features {\n      grid-template-columns: 1fr;\n      gap: 1rem;\n    }\n\n    .showcase-hero { padding: 2rem 1rem 1rem; }\n    .showcase-hero-grid {\n      grid-template-columns: 1fr;\n      gap: 1.5rem;\n    }\n    .showcase-hero-column { padding: 1.5rem; }\n    .showcase-hero-title { font-size: 1.5rem; }\n    .showcase-hero-visual { font-size: 0.5625rem; }\n    .showcase-hero-tagline-main { font-size: 1.25rem; }\n\n    .showcase-protocol-stack { padding: 3rem 1rem; }\n    .showcase-stack-layer-title {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 0.375rem;\n      font-size: 1rem;\n    }\n\n    .showcase-terminal-section { padding: 3rem 1rem; }\n    .showcase-terminal-content { padding: 1rem; font-size: 0.75rem; height: 420px; }\n\n    .showcase-livedemo { padding: 3rem 1rem; }\n\n    .showcase-footer { padding: 2rem 1rem 3rem; }\n  }\n\n  @media (max-width: 480px) {\n    .showcase-hero-visual { font-size: 0.5rem; padding: 0.75rem; }\n    .showcase-hero-tagline-main { font-size: 1rem; }\n  }\n";
 export declare const ShowcasePage: FC<{
     version: string;
     error?: string;
+    baseUrl?: string;
 }>;
 //# sourceMappingURL=showcase.d.ts.map

package/dist/dashboard/showcase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"showcase.d.ts","sourceRoot":"","sources":["../../src/dashboard/showcase.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAMnC,eAAO,MAAM,YAAY,+kiBAywBxB,CAAC;AAiRF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAgQhE,CAAC"}
+{"version":3,"file":"showcase.d.ts","sourceRoot":"","sources":["../../src/dashboard/showcase.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAqHnC,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAmFlF,CAAC"}