@dupecom/botcha-cloudflare 0.21.0 → 0.23.0

package/dist/dashboard/showcase.js

@@ -1,1048 +1,124 @@
 import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { OGMeta } from './layout';
 import { GlobalFooter } from './layout';
+import { DASHBOARD_CSS } from './styles';
+// ============ ASCII ART ============
+const BOTCHA_LOGO = `\u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2557
+\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u255a\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255d\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255d\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557
+\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551
+\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551
+\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d   \u2588\u2588\u2551   \u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551
+\u255a\u2550\u2550\u2550\u2550\u2550\u255d  \u255a\u2550\u2550\u2550\u2550\u2550\u255d    \u255a\u2550\u255d    \u255a\u2550\u2550\u2550\u2550\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u255d`;
 // ============ CSS ============
-export const SHOWCASE_CSS = `
-  /* ============ Showcase layout ============ */
-  .showcase-page {
-    max-width: 100%;
-    overflow-x: hidden;
-  }
-
-  .showcase-divider {
-    max-width: 800px;
-    margin: 0 auto;
-    border: none;
-    border-top: 1px solid var(--border);
-  }
-
-  /* ============ Section 1: TAP Announcement Hero ============ */
-  .showcase-tap-hero {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 4rem 2rem 3rem;
-    text-align: center;
-  }
-
-  .showcase-tap-hero-badge {
-    display: inline-block;
-    font-size: 0.625rem;
-    font-weight: 700;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    padding: 0.3rem 0.875rem;
-    background: var(--green);
-    color: #fff;
-    margin-bottom: 1.5rem;
-  }
-
-  .showcase-tap-hero-title {
-    font-size: 2.5rem;
-    font-weight: 700;
-    line-height: 1.1;
-    margin: 0 0 1.25rem;
-    color: var(--text);
-  }
-
-  .showcase-tap-links {
+const HOME_CSS = `
+  .home-page {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.375rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .showcase-tap-link {
-    font-size: 0.6875rem;
-    color: var(--text-muted);
-    text-decoration: underline;
-    text-underline-offset: 3px;
-    transition: color 0.15s;
-  }
-
-  .showcase-tap-link:hover {
-    color: var(--green);
-    opacity: 1;
-  }
-
-  .showcase-tap-links-sep {
-    color: var(--text-dim);
-    font-size: 0.625rem;
-  }
-
-  .showcase-tap-hero-subtitle {
-    font-size: 0.9375rem;
-    line-height: 1.7;
-    color: var(--text-muted);
-    max-width: 600px;
-    margin: 0 auto 2.5rem;
-  }
-
-  .showcase-tap-hero-features {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
-    text-align: left;
-  }
-
-  .showcase-tap-feature {
-    padding: 1.25rem;
-    border: 1px solid var(--border);
-    background: var(--bg);
-  }
-
-  .showcase-tap-feature-title {
-    font-size: 0.8125rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    color: var(--text);
-  }
-
-  .showcase-tap-feature-desc {
-    font-size: 0.75rem;
-    line-height: 1.6;
-    color: var(--text-muted);
-  }
-
-  /* ============ CAPTCHA vs BOTCHA Comparison ============ */
-  .showcase-hero {
-    max-width: 1100px;
-    margin: 0 auto;
     padding: 4rem 2rem 2rem;
+    box-sizing: border-box;
   }
 
-  .showcase-hero-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    margin-bottom: 3rem;
-  }
-
-  .showcase-hero-column {
-    border: 2px solid var(--border);
-    padding: 2rem;
-    background: var(--bg);
-  }
-
-  .showcase-hero-column.old-world {
-    border-color: var(--red);
-  }
-
-  .showcase-hero-column.new-world {
-    border-color: var(--green);
-  }
-
-  .showcase-hero-label {
-    font-size: 0.6875rem;
-    font-weight: 700;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    margin-bottom: 0.75rem;
-    color: var(--text-dim);
-  }
-
-  .showcase-hero-title {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 1.25rem;
-    line-height: 1;
-  }
-
-  .showcase-hero-title.strikethrough {
-    text-decoration: line-through;
-    color: var(--red);
-  }
-
-  .showcase-hero-title.active {
-    color: var(--green);
-  }
-
-  .showcase-hero-visual {
+  .home-logo {
+    display: block;
     font-family: var(--font);
-    font-size: 0.6875rem;
-    line-height: 1.3;
-    margin: 1.25rem 0;
-    padding: 1rem;
-    background: #fafafa;
-    border: 1px solid var(--border);
+    font-size: clamp(0.35rem, 1.4vw, 0.6875rem);
+    line-height: 1.15;
     white-space: pre;
-    overflow-x: auto;
-  }
-
-  .showcase-hero-visual.old-world {
-    color: var(--red);
-    border-color: var(--red);
-    background: #fff5f5;
-  }
-
-  .showcase-hero-visual.new-world {
-    color: var(--green);
-    border-color: var(--green);
-    background: #f5fff7;
-  }
-
-  .showcase-hero-subtitle {
-    font-size: 0.875rem;
-    margin-bottom: 1rem;
-    line-height: 1.5;
     color: var(--text);
+    text-decoration: none;
+    margin-bottom: 1.5rem;
+    letter-spacing: 0;
   }
 
-  .showcase-hero-features {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  .home-tagline {
     font-size: 0.75rem;
     color: var(--text-muted);
+    margin: 0 0 3rem;
+    letter-spacing: 0.04em;
   }
 
-  .showcase-hero-features li {
-    padding: 0.25rem 0;
-  }
-
-  .showcase-hero-features li::before {
-    content: "\\2192  ";
-    color: var(--text-dim);
-  }
-
-  .showcase-hero-tagline {
-    text-align: center;
-    padding: 2rem 2rem 0;
-  }
-
-  .showcase-hero-tagline-main {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    color: var(--text);
-  }
-
-  .showcase-hero-tagline-sub {
-    font-size: 0.875rem;
-    color: var(--text-muted);
-  }
-
-  /* ============ Section 2: Protocol Stack ============ */
-  .showcase-protocol-stack {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 4rem 2rem;
-  }
-
-  .showcase-protocol-stack h2 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-  }
-
-  .showcase-protocol-stack .subtitle {
-    color: var(--text-muted);
-    font-size: 0.875rem;
-    margin-bottom: 2.5rem;
-  }
-
-  .showcase-stack-diagram {
-    position: relative;
-    margin: 0 0 2rem 0;
-  }
-
-  .showcase-stack-layer {
-    border: 2px solid var(--border);
-    background: var(--bg);
+  .home-agent-note {
+    max-width: 480px;
+    margin: 0 auto 3.5rem;
+    border: 1px solid var(--border);
     padding: 1.25rem 1.5rem;
-    position: relative;
+    text-align: left;
+    cursor: pointer;
+    user-select: none;
+    transition: border-color 0.15s, background 0.15s;
   }
 
-  .showcase-stack-layer + .showcase-stack-layer {
-    margin-top: -2px;
+  .home-agent-note:hover {
+    border-color: var(--text-muted);
+    background: rgba(0,0,0,0.02);
   }
 
-  .showcase-stack-layer-highlight {
-    border: 3px solid var(--accent);
-    background: var(--bg-raised);
-    z-index: 1;
+  .home-agent-note:active {
+    background: rgba(0,0,0,0.05);
   }
 
-  .showcase-stack-layer-number {
-    font-size: 0.625rem;
+  .home-agent-note-label {
+    font-size: 0.5625rem;
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.12em;
     color: var(--text-dim);
-    margin-bottom: 0.375rem;
-  }
-
-  .showcase-stack-layer-highlight .showcase-stack-layer-number {
-    color: var(--green);
-  }
-
-  .showcase-stack-layer-title {
-    font-size: 1.125rem;
-    font-weight: 700;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.75rem;
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-  }
-
-  .showcase-stack-layer-subtitle {
-    font-size: 0.8125rem;
-    color: var(--text-muted);
-    margin-bottom: 0.375rem;
-  }
-
-  .showcase-stack-layer-features {
-    font-size: 0.75rem;
-    color: var(--text-dim);
-  }
-
-  .showcase-you-are-here {
-    display: inline-block;
-    background: var(--green);
-    color: white;
-    font-size: 0.5625rem;
-    font-weight: 700;
-    padding: 0.2rem 0.5rem;
-    letter-spacing: 0.05em;
-  }
-
-  .showcase-buzzword-badges {
-    display: flex;
-    flex-wrap: wrap;
     gap: 0.5rem;
-    margin-bottom: 2rem;
   }
 
-  .showcase-badge {
-    display: inline-block;
-    font-size: 0.6875rem;
-    padding: 0.3rem 0.625rem;
-    border: 1px solid var(--border);
-    background: var(--bg);
-    color: var(--text-muted);
-    white-space: nowrap;
-  }
-
-  .showcase-protocol-explanation {
-    font-size: 0.8125rem;
-    line-height: 1.7;
-    color: var(--text-muted);
-  }
-
-  /* ============ Section 3: Terminal Demo ============ */
-  .showcase-terminal-section {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 4rem 2rem;
-  }
-
-  .showcase-terminal-header {
-    text-align: center;
-    margin-bottom: 2.5rem;
-  }
-
-  .showcase-terminal-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin: 0 0 0.5rem 0;
-    color: var(--text);
-  }
-
-  .showcase-terminal-subtitle {
-    font-size: 0.875rem;
-    color: var(--text-muted);
-    margin: 0;
-    line-height: 1.5;
-  }
-
-  .showcase-terminal-container {
-    max-width: 640px;
-    margin: 0 auto;
-  }
-
-  .showcase-terminal-window {
-    background: #0d0d0d;
-    border: 1px solid var(--border);
-    overflow: hidden;
-  }
-
-  .showcase-terminal-chrome {
-    background: #1a1a1a;
-    padding: 0.75rem 1rem;
-    display: flex;
+  .home-agent-copy-hint {
+    display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
-    border-bottom: 1px solid #333;
-  }
-
-  .showcase-terminal-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-  }
-
-  .showcase-terminal-dot--red { background: #ff5f56; }
-  .showcase-terminal-dot--yellow { background: #ffbd2e; }
-  .showcase-terminal-dot--green { background: #27c93f; }
-
-  .showcase-terminal-title-text {
-    font-size: 0.6875rem;
-    color: #888;
-    margin-left: 0.5rem;
-  }
-
-  .showcase-terminal-content {
-    padding: 1.5rem;
-    font-size: 0.8125rem;
-    line-height: 1.6;
-    color: #f0f0f0;
-    height: 460px;
-    overflow-y: hidden;
-    font-family: var(--font);
-  }
-
-  .showcase-terminal-line {
-    margin-bottom: 0.375rem;
-    white-space: pre-wrap;
-    word-break: break-word;
-  }
-
-  .showcase-terminal-prompt { color: #888; }
-  .showcase-terminal-command { color: #f0f0f0; }
-  .showcase-terminal-flag { color: #9a9aff; }
-  .showcase-terminal-success { color: #4ade80; }
-  .showcase-terminal-label { color: #888; }
-  .showcase-terminal-value { color: #fff; }
-
-  .showcase-terminal-cursor {
-    display: inline-block;
-    background: #f0f0f0;
-    animation: showcase-cursor-blink 1s step-end infinite;
-  }
-
-  @keyframes showcase-cursor-blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-  }
-
-  .showcase-terminal-replay-container {
-    text-align: center;
-    margin-top: 1.5rem;
-  }
-
-  .showcase-terminal-replay-btn {
-    background: var(--bg);
-    border: 1px solid var(--border);
-    padding: 0.5rem 1rem;
-    font-family: var(--font);
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    cursor: pointer;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .showcase-terminal-replay-btn:hover {
-    border-color: var(--accent);
-    color: var(--text);
-  }
-
-  /* ============ Section 4: Live Demo ============ */
-  .showcase-livedemo {
-    padding: 4rem 2rem;
-    background: var(--bg-raised);
-    border-top: 2px solid var(--border);
-    border-bottom: 2px solid var(--border);
-  }
-
-  .showcase-livedemo-container {
-    max-width: 700px;
-    margin: 0 auto;
-    text-align: center;
-  }
-
-  .showcase-livedemo-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    color: var(--text);
-  }
-
-  .showcase-livedemo-subtitle {
-    font-size: 0.875rem;
-    color: var(--text-muted);
-    margin-bottom: 2.5rem;
-    line-height: 1.6;
-  }
-
-  .showcase-livedemo-button {
-    display: inline-block;
-    padding: 1rem 2rem;
-    font-size: 0.875rem;
-    font-weight: 700;
-    font-family: var(--font);
-    color: #fff;
-    background: var(--accent);
-    border: 2px solid var(--accent);
-    cursor: pointer;
-    text-transform: uppercase;
+    gap: 0.25rem;
+    opacity: 0.6;
+    font-weight: 400;
     letter-spacing: 0.08em;
-    box-shadow: 4px 4px 0 var(--border-bright);
-    transition: all 0.15s;
-    margin-bottom: 1.5rem;
   }
 
-  .showcase-livedemo-button:hover:not(:disabled) {
-    transform: translate(-2px, -2px);
-    box-shadow: 6px 6px 0 var(--border-bright);
+  .home-agent-note:hover .home-agent-copy-hint {
     opacity: 1;
   }
 
-  .showcase-livedemo-button:active:not(:disabled) {
-    transform: translate(2px, 2px);
-    box-shadow: 2px 2px 0 var(--border-bright);
-  }
-
-  .showcase-livedemo-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .showcase-livedemo-result {
-    margin-top: 2rem;
-    padding: 1.5rem;
-    background: var(--bg);
-    border: 2px solid var(--border);
-    box-shadow: 4px 4px 0 var(--border-bright);
-    text-align: left;
+  .home-agent-prompt-text {
     font-size: 0.8125rem;
-    line-height: 1.8;
-  }
-
-  .showcase-livedemo-result-line {
-    opacity: 0;
-    animation: showcase-livedemo-fadein 0.3s ease forwards;
-    margin-bottom: 0.375rem;
-  }
-
-  .showcase-livedemo-result-line:nth-child(1) { animation-delay: 0ms; }
-  .showcase-livedemo-result-line:nth-child(2) { animation-delay: 100ms; }
-  .showcase-livedemo-result-line:nth-child(3) { animation-delay: 200ms; }
-  .showcase-livedemo-result-line:nth-child(4) { animation-delay: 300ms; }
-  .showcase-livedemo-result-line:nth-child(5) { animation-delay: 400ms; }
-  .showcase-livedemo-result-line:nth-child(6) { animation-delay: 500ms; }
-  .showcase-livedemo-result-line:nth-child(7) { animation-delay: 600ms; }
-
-  @keyframes showcase-livedemo-fadein {
-    from { opacity: 0; transform: translateY(-4px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .showcase-livedemo-label {
-    color: var(--text-dim);
-    font-weight: 600;
-  }
-
-  .showcase-livedemo-value {
+    line-height: 1.6;
     color: var(--text);
   }
 
-  .showcase-livedemo-time-fast {
-    color: var(--green);
-    font-weight: 700;
-  }
-
-  .showcase-livedemo-time-slow {
-    color: var(--red);
-    font-weight: 700;
-  }
-
-  .showcase-livedemo-status-success {
-    color: var(--green);
-    font-weight: 700;
-    font-size: 1rem;
-  }
-
-  .showcase-livedemo-status-error {
-    color: var(--red);
-    font-weight: 700;
-  }
-
-  .showcase-livedemo-token {
-    font-family: var(--font);
-    color: var(--text-muted);
-    word-break: break-all;
-    font-size: 0.75rem;
-  }
-
-  .showcase-livedemo-counter {
-    margin-top: 1rem;
+  .home-agent-note-sub {
     font-size: 0.75rem;
     color: var(--text-dim);
-  }
-
-  .showcase-livedemo-error {
-    margin-top: 1.5rem;
-    padding: 1rem;
-    background: var(--bg);
-    border: 2px solid var(--red);
-    color: var(--red);
-    text-align: left;
-    font-size: 0.8125rem;
-  }
-
-  /* ============ Showcase footer ============ */
-  .showcase-footer {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 3rem 2rem 4rem;
-    text-align: center;
-  }
-
-  .showcase-footer-cta {
-    font-size: 1rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: var(--text);
-  }
-
-  .showcase-footer-steps {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    max-width: 420px;
-    margin: 0 auto 2rem;
-    text-align: left;
-  }
-
-  .showcase-footer-step {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 0.8125rem;
-    padding: 0.625rem 1rem;
-    background: var(--bg-raised);
-    border: 1px solid var(--border);
-  }
-
-  .showcase-footer-step-number {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.375rem;
-    height: 1.375rem;
-    font-size: 0.6875rem;
-    font-weight: 700;
-    border: 1px solid var(--border-bright);
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  .showcase-footer-step code {
-    color: var(--text);
-  }
-
-  .showcase-agent-prompt {
-    max-width: 520px;
-    margin: 2rem auto 2.5rem;
-    text-align: center;
-  }
-
-  .showcase-agent-prompt-label {
-    font-size: 0.6875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--text-dim);
-    margin-bottom: 0.75rem;
-  }
-
-  .showcase-agent-prompt-card {
-    display: block;
-    width: 100%;
-    padding: 1.25rem;
-    border: 1px solid var(--border);
-    background: var(--bg);
-    cursor: pointer;
-    font-family: var(--font);
-    text-align: left;
-    transition: border-color 0.15s;
-  }
-
-  .showcase-agent-prompt-card:hover {
-    border-color: var(--accent);
-  }
-
-  .showcase-agent-prompt-card code {
-    display: block;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    color: var(--text);
-    line-height: 1.5;
-    background: none;
-    border: none;
-    padding: 0;
-    text-transform: none;
-    letter-spacing: normal;
-  }
-
-  .showcase-agent-prompt-copy {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
     margin-top: 0.75rem;
-    font-size: 0.625rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    transition: color 0.2s;
-  }
-
-  .showcase-agent-prompt-copy span {
-    display: flex;
-  }
-
-  .showcase-footer-links {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0.5rem;
-    margin-bottom: 2rem;
-  }
-
-  .showcase-footer-link {
-    font-size: 0.6875rem;
-    color: var(--text);
-    text-decoration: none;
-    padding: 0.25rem 0.625rem;
-    border: 1px solid var(--border-bright);
-    transition: border-color 0.15s;
-  }
-
-  .showcase-footer-link:hover {
-    border-color: var(--accent);
-    opacity: 1;
-  }
-
-  .showcase-footer-meta {
-    font-size: 0.6875rem;
-    color: var(--text-dim);
-  }
-
-  .showcase-footer-meta a {
-    color: var(--text-muted);
-    text-decoration: none;
-  }
-
-  .showcase-footer-sep {
-    margin: 0 0.375rem;
   }
 
-  /* ============ Responsive ============ */
-  @media (max-width: 768px) {
-    .showcase-tap-hero { padding: 3rem 1rem 2rem; }
-    .showcase-tap-hero-title { font-size: 1.75rem; }
-    .showcase-tap-hero-features {
-      grid-template-columns: 1fr;
-      gap: 1rem;
-    }
-
-    .showcase-hero { padding: 2rem 1rem 1rem; }
-    .showcase-hero-grid {
-      grid-template-columns: 1fr;
-      gap: 1.5rem;
-    }
-    .showcase-hero-column { padding: 1.5rem; }
-    .showcase-hero-title { font-size: 1.5rem; }
-    .showcase-hero-visual { font-size: 0.5625rem; }
-    .showcase-hero-tagline-main { font-size: 1.25rem; }
-
-    .showcase-protocol-stack { padding: 3rem 1rem; }
-    .showcase-stack-layer-title {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.375rem;
-      font-size: 1rem;
-    }
-
-    .showcase-terminal-section { padding: 3rem 1rem; }
-    .showcase-terminal-content { padding: 1rem; font-size: 0.75rem; height: 420px; }
-
-    .showcase-livedemo { padding: 3rem 1rem; }
-
-    .showcase-footer { padding: 2rem 1rem 3rem; }
+  .home-agent-note-copied {
+    opacity: 0;
+    transition: opacity 0.2s;
+    color: var(--accent);
   }
 
   @media (max-width: 480px) {
-    .showcase-hero-visual { font-size: 0.5rem; padding: 0.75rem; }
-    .showcase-hero-tagline-main { font-size: 1rem; }
-  }
-`;
-// ============ SCRIPTS ============
-const TERMINAL_ANIMATION_SCRIPT = `
-(function() {
-  var commands = [
-    {
-      cmd: 'botcha init --email dev@company.com',
-      response: [
-        '<span class="showcase-terminal-success">\\u2705</span> App created in 312ms!',
-        '   <span class="showcase-terminal-label">App ID:</span> <span class="showcase-terminal-value">app_b18545f37eee64c4</span>',
-        '   <span class="showcase-terminal-label">Config saved to</span> <span class="showcase-terminal-value">~/.botcha/config.json</span>'
-      ]
-    },
-    {
-      cmd: 'botcha tap register --name "shopping-agent" --capabilities browse,search,purchase',
-      response: [
-        '<span class="showcase-terminal-success">\\u2705</span> Agent registered in 467ms!',
-        '   <span class="showcase-terminal-label">Agent ID:</span> <span class="showcase-terminal-value">agent_6ddfd9f10cfd8dfc</span>',
-        '   <span class="showcase-terminal-label">Name:</span> <span class="showcase-terminal-value">shopping-agent</span>',
-        '   <span class="showcase-terminal-label">Capabilities:</span> <span class="showcase-terminal-value">browse, search, purchase</span>'
-      ]
-    },
-    {
-      cmd: 'botcha tap session --action browse --resource products --duration 1h',
-      response: [
-        '<span class="showcase-terminal-success">\\u2705</span> Session created in 374ms!',
-        '   <span class="showcase-terminal-label">Session ID:</span> <span class="showcase-terminal-value">e66323397a809b9b</span>',
-        '   <span class="showcase-terminal-label">Intent:</span> <span class="showcase-terminal-value">browse on products</span>',
-        '   <span class="showcase-terminal-label">Expires in:</span> <span class="showcase-terminal-value">1 hour</span>'
-      ]
-    }
-  ];
-
-  var content = document.getElementById('terminal-content');
-  var replayBtn = document.getElementById('terminal-replay');
-  var currentTimeout;
-  var running = false;
-  var hasPlayed = false;
-  var cancelled = false;
-
-  function highlightFlags(cmd) {
-    return cmd.replace(/(--[a-z-]+)/g, '<span class="showcase-terminal-flag">$1</span>');
-  }
-
-  function sleep(ms) {
-    return new Promise(function(resolve, reject) {
-      currentTimeout = setTimeout(resolve, ms);
-    });
-  }
-
-  async function animate() {
-    if (running) return;
-    running = true;
-    cancelled = false;
-    content.innerHTML = '';
-
-    try {
-      for (var c = 0; c < commands.length; c++) {
-        if (cancelled) return;
-        var item = commands[c];
-        var line = document.createElement('div');
-        line.className = 'showcase-terminal-line';
-        line.innerHTML = '<span class="showcase-terminal-prompt">$ </span><span class="showcase-terminal-command"></span><span class="showcase-terminal-cursor">\\u2589</span>';
-        content.appendChild(line);
-
-        var cmdSpan = line.querySelector('.showcase-terminal-command');
-        var cursor = line.querySelector('.showcase-terminal-cursor');
-
-        for (var i = 0; i < item.cmd.length; i++) {
-          if (cancelled) return;
-          await sleep(35);
-          cmdSpan.textContent = item.cmd.slice(0, i + 1);
-        }
-
-        cmdSpan.innerHTML = highlightFlags(item.cmd);
-        cursor.remove();
-        await sleep(300);
-
-        for (var r = 0; r < item.response.length; r++) {
-          if (cancelled) return;
-          var respLine = document.createElement('div');
-          respLine.className = 'showcase-terminal-line';
-          respLine.innerHTML = item.response[r];
-          content.appendChild(respLine);
-        }
-
-        await sleep(800);
-      }
-    } finally {
-      running = false;
-      hasPlayed = true;
-    }
-  }
-
-  // Replay button — cancel any in-progress animation and restart
-  replayBtn.addEventListener('click', function() {
-    clearTimeout(currentTimeout);
-    cancelled = true;
-    running = false;
-    animate();
-  });
-
-  // IntersectionObserver — play once when terminal scrolls into view
-  var observer = new IntersectionObserver(function(entries) {
-    if (entries[0].isIntersecting && !hasPlayed && !running) {
-      animate();
-      observer.disconnect();
-    }
-  }, { threshold: 0.3 });
-
-  observer.observe(content);
-})();
-`;
-const LIVE_DEMO_SCRIPT = `
-(function() {
-  var solveCount = 0;
-  var isRunning = false;
-
-  function sha256(str) {
-    var encoder = new TextEncoder();
-    var data = encoder.encode(str);
-    return crypto.subtle.digest('SHA-256', data).then(function(buf) {
-      var arr = Array.from(new Uint8Array(buf));
-      var hex = arr.map(function(b) { return b.toString(16).padStart(2, '0'); }).join('');
-      return hex.substring(0, 8);
-    });
+    .home-page { padding: 3rem 1.25rem 2rem; justify-content: flex-start; }
+    .home-logo { font-size: 0.3rem; }
+    .home-agent-note { max-width: 100%; }
   }
-
-  function solveBotcha() {
-    if (isRunning) return;
-    isRunning = true;
-
-    var button = document.getElementById('botcha-demo-button');
-    var resultDiv = document.getElementById('botcha-demo-result');
-    var errorDiv = document.getElementById('botcha-demo-error');
-    var counter = document.getElementById('botcha-demo-counter');
-
-    button.disabled = true;
-    button.textContent = 'SOLVING...';
-    resultDiv.style.display = 'none';
-    errorDiv.style.display = 'none';
-
-    var startTime = Date.now();
-
-    fetch('https://botcha.ai/v1/token')
-      .then(function(res) {
-        if (!res.ok) throw new Error('Failed to fetch challenge: ' + res.status);
-        return res.json();
-      })
-      .then(function(data) {
-        var challenge = data.challenge;
-        if (!challenge || !challenge.problems) throw new Error('Invalid challenge format');
-
-        var numbers = challenge.problems.map(function(p) { return p.num; });
-
-        return Promise.all(
-          numbers.map(function(n) { return sha256(String(n)); })
-        ).then(function(answers) {
-          return fetch('https://botcha.ai/v1/token/verify', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ id: challenge.id, answers: answers })
-          }).then(function(res) {
-            if (!res.ok) throw new Error('Verification failed: ' + res.status);
-            return res.json();
-          }).then(function(verifyData) {
-            var solveTime = Date.now() - startTime;
-            var timeClass = solveTime < 500 ? 'showcase-livedemo-time-fast' : 'showcase-livedemo-time-slow';
-            var token = verifyData.token || verifyData.access_token || 'N/A';
-            var tokenPreview = token.substring(0, 24) + '...';
-
-            resultDiv.innerHTML =
-              '<div class="showcase-livedemo-result-line"><span class="showcase-livedemo-label">Challenge:</span> <span class="showcase-livedemo-value">' + numbers.length + ' SHA-256 hashes</span></div>' +
-              '<div class="showcase-livedemo-result-line"><span class="showcase-livedemo-label">Numbers:</span> <span class="showcase-livedemo-value">[' + numbers.join(', ') + ']</span></div>' +
-              '<div class="showcase-livedemo-result-line"><span class="showcase-livedemo-label">Answers:</span> <span class="showcase-livedemo-value">["' + answers.join('", "') + '"]</span></div>' +
-              '<div class="showcase-livedemo-result-line"><span class="showcase-livedemo-label">Solve time:</span> <span class="' + timeClass + '">' + solveTime + 'ms</span></div>' +
-              '<div class="showcase-livedemo-result-line"><span class="showcase-livedemo-status-success">VERIFIED \\u2014 You are a bot.</span></div>' +
-              '<div class="showcase-livedemo-result-line"><span class="showcase-livedemo-label">Token:</span> <span class="showcase-livedemo-token">' + tokenPreview + '</span></div>';
-
-            resultDiv.style.display = 'block';
-            solveCount++;
-            counter.textContent = 'Challenges solved on this page: ' + solveCount;
-            button.textContent = 'SOLVE ANOTHER';
-          });
-        });
-      })
-      .catch(function(err) {
-        errorDiv.innerHTML = '<span class="showcase-livedemo-status-error">[ERR]</span> ' + err.message;
-        errorDiv.style.display = 'block';
-        button.textContent = 'TRY AGAIN';
-      })
-      .finally(function() {
-        button.disabled = false;
-        isRunning = false;
-      });
-  }
-
-  document.getElementById('botcha-demo-button').addEventListener('click', solveBotcha);
-})();
-`;
-// ============ COPY PROMPT ============
-const COPY_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><rect x="9" y="9" width="13" height="13" rx="0"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg>`;
-const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter"><polyline points="20 6 9 17 4 12"/></svg>`;
-const COPY_PROMPT_SCRIPT = `
-function copyPrompt() {
-  var text = document.getElementById('agent-prompt').textContent.trim();
-  navigator.clipboard.writeText(text).then(function() {
-    var label = document.getElementById('copy-label');
-    var icon = document.getElementById('copy-icon');
-    var txt = document.getElementById('copy-text');
-    label.style.color = 'var(--green)';
-    icon.innerHTML = '${CHECK_ICON.replace(/'/g, "\\'")}';
-    txt.textContent = 'Copied — now paste into your agent';
-    setTimeout(function() {
-      label.style.color = 'var(--text-muted)';
-      icon.innerHTML = '${COPY_ICON.replace(/'/g, "\\'")}';
-      txt.textContent = 'Click to copy';
-    }, 2500);
-  });
-}
 `;
-// ============ ASCII ART ============
-const CAPTCHA_ASCII = `\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
-\u2502  Select all squares    \u2502
-\u2502  with TRAFFIC LIGHTS   \u2502
-\u2502                        \u2502
-\u2502  \u250c\u2500\u2500\u252c\u2500\u2500\u252c\u2500\u2500\u2510            \u2502
-\u2502  \u2502\u2591\u2591\u2502  \u2502  \u2502            \u2502
-\u2502  \u251c\u2500\u2500\u253c\u2500\u2500\u253c\u2500\u2500\u2524            \u2502
-\u2502  \u2502  \u2502\u2591\u2591\u2502  \u2502            \u2502
-\u2502  \u251c\u2500\u2500\u253c\u2500\u2500\u253c\u2500\u2500\u2524            \u2502
-\u2502  \u2502  \u2502  \u2502??\u2502            \u2502
-\u2502  \u2514\u2500\u2500\u2534\u2500\u2500\u2534\u2500\u2500\u2518            \u2502
-\u2502                        \u2502
-\u2502  \u2610 I'm not a robot     \u2502
-\u2502                        \u2502
-\u2502  Try again in 8 sec... \u2502
-\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518`;
-const BOTCHA_SOLVE_ASCII = `\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
-\u2502 SPEED CHALLENGE        \u2502
-\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
-\u2502                        \u2502
-\u2502 SHA-256 x 5 numbers    \u2502
-\u2502 Time limit: 500ms      \u2502
-\u2502                        \u2502
-\u2502 \u2713 hash(42)  = ab34ef12 \u2502
-\u2502 \u2713 hash(7)   = cd56ab78 \u2502
-\u2502 \u2713 hash(99)  = ef12cd34 \u2502
-\u2502 \u2713 hash(13)  = 12ab56ef \u2502
-\u2502 \u2713 hash(256) = 78cd12ab \u2502
-\u2502                        \u2502
-\u2502 \u26a1 Solved in 47ms       \u2502
-\u2502 Status: VERIFIED \u2713     \u2502
-\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518`;
-const BOTCHA_LOGO = `\u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2557
-\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u255a\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255d\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255d\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557
-\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551
-\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551
-\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d   \u2588\u2588\u2551   \u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551
-\u255a\u2550\u2550\u2550\u2550\u2550\u255d  \u255a\u2550\u2550\u2550\u2550\u2550\u255d    \u255a\u2550\u255d    \u255a\u2550\u2550\u2550\u2550\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u255d\u255a\u2550\u255d  \u255a\u2550\u255d`;
 // ============ PAGE COMPONENT ============
-export const ShowcasePage = ({ version, error }) => {
-    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" }), _jsx("title", { children: "BOTCHA \u2014 Trusted Agent Protocol (TAP) for AI Agents" }), _jsx("meta", { name: "description", content: "BOTCHA is one of the first services to support TAP \u2014 the Trusted Agent Protocol. Zero-trust identity for AI agents." }), _jsx("meta", { name: "keywords", content: "AI, bot verification, reverse CAPTCHA, API security, AI agents, agent verification, TAP, Trusted Agent Protocol" }), _jsx("link", { rel: "alternate", type: "application/json", href: "/openapi.json", title: "OpenAPI Specification" }), _jsx("link", { rel: "alternate", type: "application/json", href: "/.well-known/ai-plugin.json", title: "AI Plugin Manifest" }), _jsx("meta", { name: "ai-agent-welcome", content: "true" }), _jsx(OGMeta, {}), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap", rel: "stylesheet" }), _jsx("style", { dangerouslySetInnerHTML: { __html: SHOWCASE_PAGE_CSS } })] }), _jsx("body", { children: _jsxs("div", { class: "showcase-page", children: [error && (_jsx("div", { style: "max-width: 600px; margin: 1.5rem auto 0; padding: 1rem 1.25rem; background: #fff3f0; border: 1px solid #cc3300; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; color: #992200; line-height: 1.5; text-align: center;", children: error })), _jsxs("div", { style: "text-align: center; padding: 3rem 2rem 0;", children: [_jsx("a", { href: "/", class: "ascii-logo", children: BOTCHA_LOGO }), _jsxs("p", { class: "text-muted", style: "font-size: 0.6875rem; margin-top: -0.5rem;", children: ['>', "_\u00A0the identity layer for AI agents"] })] }), _jsxs("section", { class: "showcase-tap-hero", children: [_jsx("div", { class: "showcase-tap-hero-badge", children: "Announcing TAP Support" }), _jsx("h1", { class: "showcase-tap-hero-title", children: "Trusted Agent Protocol" }), _jsxs("div", { class: "showcase-tap-links", children: [_jsx("a", { href: "https://developer.visa.com/capabilities/trusted-agent-protocol/overview", target: "_blank", rel: "noopener", class: "showcase-tap-link", children: "Visa Developer Docs" }), _jsx("span", { class: "showcase-tap-links-sep", children: "\u00B7" }), _jsx("a", { href: "https://investor.visa.com/news/news-details/2025/Visa-Introduces-Trusted-Agent-Protocol-An-Ecosystem-Led-Framework-for-AI-Commerce/default.aspx", target: "_blank", rel: "noopener", class: "showcase-tap-link", children: "Visa Announcement" }), _jsx("span", { class: "showcase-tap-links-sep", children: "\u00B7" }), _jsx("a", { href: "https://github.com/visa/trusted-agent-protocol", target: "_blank", rel: "noopener", class: "showcase-tap-link", children: "GitHub Spec" })] }), _jsx("p", { class: "showcase-tap-hero-subtitle", children: "BOTCHA is one of the first services to implement TAP \u2014 a protocol for zero-trust agent identity. Register agents, scope capabilities, and create sessions with cryptographic proof." }), _jsxs("div", { class: "showcase-tap-hero-features", children: [_jsxs("div", { class: "showcase-tap-feature", children: [_jsx("div", { class: "showcase-tap-feature-title", children: "Agent Registration" }), _jsx("div", { class: "showcase-tap-feature-desc", children: "Register agents with names, capabilities, and operator metadata. Each agent gets a unique cryptographic identity." })] }), _jsxs("div", { class: "showcase-tap-feature", children: [_jsx("div", { class: "showcase-tap-feature-title", children: "Capability Scoping" }), _jsx("div", { class: "showcase-tap-feature-desc", children: "Declare what an agent can do \u2014 browse, search, purchase \u2014 and enforce it at the protocol level. No over-permissioning." })] }), _jsxs("div", { class: "showcase-tap-feature", children: [_jsx("div", { class: "showcase-tap-feature-title", children: "Scoped Sessions" }), _jsx("div", { class: "showcase-tap-feature-desc", children: "Create time-limited sessions tied to specific actions and resources. Sessions expire, capabilities are bounded." })] })] })] }), _jsx("hr", { class: "showcase-divider" }), _jsxs("section", { class: "showcase-protocol-stack", children: [_jsx("h2", { children: "The Agent Infrastructure Stack" }), _jsx("p", { class: "subtitle", children: "Where BOTCHA fits in the new world of agentic AI" }), _jsxs("div", { class: "showcase-stack-diagram", children: [_jsxs("div", { class: "showcase-stack-layer showcase-stack-layer-highlight", children: [_jsx("div", { class: "showcase-stack-layer-number", children: "Layer 3: Identity" }), _jsxs("div", { class: "showcase-stack-layer-title", children: ["TAP (BOTCHA)", _jsx("span", { class: "showcase-you-are-here", children: "YOU ARE HERE" })] }), _jsx("div", { class: "showcase-stack-layer-subtitle", children: "Who agents are" }), _jsx("div", { class: "showcase-stack-layer-features", children: "Agent auth \u00B7 Proof of AI \u00B7 Zero-trust \u00B7 Capability scoping \u00B7 Session management" })] }), _jsxs("div", { class: "showcase-stack-layer", children: [_jsx("div", { class: "showcase-stack-layer-number", children: "Layer 2: Communication" }), _jsx("div", { class: "showcase-stack-layer-title", children: "A2A (Google)" }), _jsx("div", { class: "showcase-stack-layer-subtitle", children: "How agents talk" }), _jsx("div", { class: "showcase-stack-layer-features", children: "Agent-to-agent \u00B7 Task delegation \u00B7 Multi-agent coordination" })] }), _jsxs("div", { class: "showcase-stack-layer", children: [_jsx("div", { class: "showcase-stack-layer-number", children: "Layer 1: Tools" }), _jsx("div", { class: "showcase-stack-layer-title", children: "MCP (Anthropic)" }), _jsx("div", { class: "showcase-stack-layer-subtitle", children: "What agents access" }), _jsx("div", { class: "showcase-stack-layer-features", children: "Tool use \u00B7 Context \u00B7 Data sources \u00B7 Resource bindings" })] })] }), _jsxs("div", { class: "showcase-buzzword-badges", children: [_jsx("span", { class: "showcase-badge", children: "RFC 9421" }), _jsx("span", { class: "showcase-badge", children: "HTTP Message Signatures" }), _jsx("span", { class: "showcase-badge", children: "Zero-Trust" }), _jsx("span", { class: "showcase-badge", children: "Agent Identity" }), _jsx("span", { class: "showcase-badge", children: "Capability Scoping" }), _jsx("span", { class: "showcase-badge", children: "Agentic AI" }), _jsx("span", { class: "showcase-badge", children: "Multi-Agent Systems" })] }), _jsx("p", { class: "showcase-protocol-explanation", children: "Every agent protocol needs an identity layer. MCP gives agents tools. A2A lets agents communicate. TAP proves they're actually AI \u2014 and scopes what they're allowed to do." })] }), _jsx("hr", { class: "showcase-divider" }), _jsxs("section", { class: "showcase-terminal-section", children: [_jsxs("div", { class: "showcase-terminal-header", children: [_jsx("h2", { class: "showcase-terminal-title", children: "See it in action" }), _jsx("p", { class: "showcase-terminal-subtitle", children: "Three commands. Your agent has an identity, capabilities, and a scoped session." })] }), _jsxs("div", { class: "showcase-terminal-container", children: [_jsxs("div", { class: "showcase-terminal-window", children: [_jsxs("div", { class: "showcase-terminal-chrome", children: [_jsx("span", { class: "showcase-terminal-dot showcase-terminal-dot--red" }), _jsx("span", { class: "showcase-terminal-dot showcase-terminal-dot--yellow" }), _jsx("span", { class: "showcase-terminal-dot showcase-terminal-dot--green" }), _jsx("span", { class: "showcase-terminal-title-text", children: "terminal \u2014 botcha" })] }), _jsx("div", { class: "showcase-terminal-content", id: "terminal-content" })] }), _jsx("div", { class: "showcase-terminal-replay-container", children: _jsx("button", { class: "showcase-terminal-replay-btn", id: "terminal-replay", children: "Replay" }) })] }), _jsx("script", { dangerouslySetInnerHTML: { __html: TERMINAL_ANIMATION_SCRIPT } })] }), _jsx("section", { class: "showcase-hero", children: _jsxs("div", { class: "showcase-hero-grid", children: [_jsxs("div", { class: "showcase-hero-column old-world", children: [_jsx("div", { class: "showcase-hero-label", children: "The old world" }), _jsx("h2", { class: "showcase-hero-title strikethrough", children: "CAPTCHA" }), _jsx("div", { class: "showcase-hero-visual old-world", children: CAPTCHA_ASCII }), _jsx("p", { class: "showcase-hero-subtitle", children: "Blocks bots. Annoys humans. Everyone loses." }), _jsxs("ul", { class: "showcase-hero-features", children: [_jsx("li", { children: "Proves you're human" }), _jsx("li", { children: "Blocks automation" }), _jsx("li", { children: "Wastes 5-10 seconds per attempt" }), _jsx("li", { children: "Breaks accessibility" })] })] }), _jsxs("div", { class: "showcase-hero-column new-world", children: [_jsx("div", { class: "showcase-hero-label", children: "The new world" }), _jsx("h2", { class: "showcase-hero-title active", children: "BOTCHA" }), _jsx("div", { class: "showcase-hero-visual new-world", children: BOTCHA_SOLVE_ASCII }), _jsx("p", { class: "showcase-hero-subtitle", children: "Welcomes bots. Proves they're AI. Everyone wins." }), _jsxs("ul", { class: "showcase-hero-features", children: [_jsx("li", { children: "Proves you're a bot" }), _jsx("li", { children: "Agent identity layer" }), _jsx("li", { children: "Sub-500ms verification" }), _jsx("li", { children: "Built for the agentic web" })] })] })] }) }), _jsxs("div", { class: "showcase-footer", children: [_jsx("div", { class: "showcase-footer-cta", children: "Get started in 30 seconds" }), _jsxs("div", { class: "showcase-footer-steps", children: [_jsxs("div", { class: "showcase-footer-step", children: [_jsx("span", { class: "showcase-footer-step-number", children: "1" }), _jsx("code", { children: "npm install -g @dupecom/botcha-cli" })] }), _jsxs("div", { class: "showcase-footer-step", children: [_jsx("span", { class: "showcase-footer-step-number", children: "2" }), _jsx("code", { children: "botcha init --email you@company.com" })] }), _jsxs("div", { class: "showcase-footer-step", children: [_jsx("span", { class: "showcase-footer-step-number", children: "3" }), _jsx("code", { children: "botcha tap register --name \"my-agent\"" })] })] }), _jsxs("div", { class: "showcase-agent-prompt", children: [_jsx("p", { class: "showcase-agent-prompt-label", children: "Or paste this into your AI agent" }), _jsxs("button", { id: "prompt-btn", onclick: "copyPrompt()", type: "button", class: "showcase-agent-prompt-card", children: [_jsx("code", { id: "agent-prompt", children: "Run: curl -s https://botcha.ai -H 'Accept: application/json' \u2014 then follow the instructions in the response to verify yourself and get me access." }), _jsxs("span", { id: "copy-label", class: "showcase-agent-prompt-copy", children: [_jsx("span", { id: "copy-icon", dangerouslySetInnerHTML: { __html: COPY_ICON } }), _jsx("span", { id: "copy-text", children: "Click to copy" })] })] })] })] }), _jsx(GlobalFooter, { version: version }), _jsx("script", { dangerouslySetInnerHTML: { __html: COPY_PROMPT_SCRIPT } })] }) })] }));
+export const ShowcasePage = ({ version, error, baseUrl }) => {
+    const prompt = `Curl ${baseUrl ?? 'https://botcha.ai'} and get me set up.`;
+    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" }), _jsx("title", { children: "BOTCHA \u2014 Prove you're a bot." }), _jsx("meta", { name: "description", content: "BOTCHA is the identity layer for AI agents. Reverse CAPTCHA \u2014 prove you're a bot, not a human. Point your agent at botcha.ai." }), _jsx("link", { rel: "alternate", type: "application/json", href: "/openapi.json", title: "OpenAPI Specification" }), _jsx("link", { rel: "alternate", type: "application/json", href: "/.well-known/ai-plugin.json", title: "AI Plugin Manifest" }), _jsx("meta", { name: "ai-agent-welcome", content: "true" }), _jsx(OGMeta, { title: "BOTCHA \u2014 Prove you're a bot.", description: "The identity layer for AI agents. Reverse CAPTCHA \u2014 prove you're a bot, not a human." }), _jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap", rel: "stylesheet" }), _jsx("style", { dangerouslySetInnerHTML: { __html: DASHBOARD_CSS + HOME_CSS } })] }), _jsxs("body", { children: [error && (_jsx("div", { style: "max-width: 520px; margin: 1.5rem auto 0; padding: 0.875rem 1.25rem; background: #fff3f0; border: 1px solid #cc3300; font-size: 0.8125rem; color: #992200; line-height: 1.5; text-align: center;", children: error })), _jsxs("div", { class: "home-page", children: [_jsx("a", { href: "/", class: "home-logo", children: BOTCHA_LOGO }), _jsxs("p", { class: "home-tagline", children: ['>', "_\u00A0\u00A0prove you're a bot."] }), _jsxs("div", { class: "home-agent-note", role: "button", tabindex: 0, "data-prompt": prompt, onclick: "copyPrompt(this)", onkeydown: "if(event.key==='Enter'||event.key===' ')copyPrompt(this)", title: "Click to copy", children: [_jsxs("div", { class: "home-agent-note-label", children: ["For humans", _jsxs("span", { class: "home-agent-copy-hint", children: [_jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }), "click to copy"] })] }), _jsxs("div", { class: "home-agent-prompt-text", children: ["\"", prompt, "\""] }), _jsx("div", { class: "home-agent-note-sub home-agent-note-copied", id: "copy-confirm", children: "Copied!" })] }), _jsx("script", { dangerouslySetInnerHTML: { __html: `
+            function copyPrompt(el) {
+              var text = el.getAttribute('data-prompt');
+              navigator.clipboard.writeText(text).then(function() {
+                var confirm = document.getElementById('copy-confirm');
+                confirm.style.opacity = '1';
+                setTimeout(function() { confirm.style.opacity = '0'; }, 1500);
+              });
+            }
+          ` } })] }), _jsx(GlobalFooter, { version: version })] })] }));
 };
-// Combined CSS: base dashboard styles (subset) + showcase-specific styles
-import { DASHBOARD_CSS } from './styles';
-const SHOWCASE_PAGE_CSS = DASHBOARD_CSS + SHOWCASE_CSS;