thumbgate 1.27.8 → 1.27.10

package/public/index.html

@@ -20,7 +20,7 @@ __GOOGLE_SITE_VERIFICATION_META__
 <meta property="og:image" content="https://thumbgate.ai/og.png">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:image" content="https://thumbgate.ai/og.png">
-<meta name="thumbgate-version" content="1.27.8">
+<meta name="thumbgate-version" content="1.27.7">
 <meta name="keywords" content="ThumbGate, thumbgate, AI agent orchestration, AI experience orchestration, agentic development cycle, AC/DC framework, Guide Generate Verify Solve, agent enforcement layer, save LLM tokens, reduce Claude API cost, reduce OpenAI cost, AI agent token savings, prevent LLM retries, prevent hallucination retries, stop AI token waste, pre-action checks, agent governance, Claude Code, Cursor, Codex, Gemini, Amp, Cline, OpenCode, workflow hardening, context engineering, AI authenticity, brand authenticity AI">
 <link rel="canonical" href="__APP_ORIGIN__/">
 <link rel="alternate" type="text/markdown" title="ThumbGate LLM context" href="__APP_ORIGIN__/llm-context.md">
@@ -337,7 +337,7 @@ __GA_BOOTSTRAP__
       "name": "How does ThumbGate reduce host blast radius for high-risk local runs?",
       "acceptedAnswer": {
         "@type": "Answer",
-        "text": "ThumbGate combines pre-action checks with execution guidance. Workflow Sentinel predicts risky local actions before they execute, and high-risk runs can be routed into Docker Sandboxes instead of running directly on the host. Enterprise workflows also have a signed hosted sandbox lane for isolated automation dispatch."
+        "text": "ThumbGate combines pre-action checks with execution guidance. Workflow Sentinel predicts risky local actions before they execute, and high-risk runs can be routed into Docker Sandboxes instead of running directly on the host. Team workflows also have a signed hosted sandbox lane for isolated automation dispatch."
       }
     },
     {
@@ -430,6 +430,32 @@ __GA_BOOTSTRAP__
   .hero p { font-size: 17px; color: var(--text-muted); max-width: 620px; margin: 0 auto 28px; line-height: 1.6; }
   .hero-lede { font-size: clamp(18px, 2vw, 21px) !important; max-width: 760px !important; color: var(--text-muted); }
   .hero-proof-card { max-width: 720px; margin: 0 auto 28px; padding: 20px 22px; border: 1px solid rgba(34,211,238,0.24); border-radius: 8px; background: #090d12; box-shadow: 0 20px 80px rgba(0,0,0,0.35); font-family: var(--mono); text-align: left; }
+  .interactive-gate-demo { max-width: 980px; margin: 0 auto 28px; text-align: left; border: 1px solid rgba(34,211,238,0.24); border-radius: 14px; background: linear-gradient(180deg, rgba(17,17,19,0.98) 0%, rgba(10,16,18,0.98) 100%); box-shadow: 0 20px 80px rgba(0,0,0,0.28); overflow: hidden; }
+  .interactive-gate-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
+  .interactive-gate-head h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); line-height: 1.15; letter-spacing: -0.025em; }
+  .interactive-gate-head p { max-width: 480px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); text-align: right; }
+  .interactive-gate-body { display: grid; grid-template-columns: minmax(210px, 0.9fr) minmax(0, 1.35fr); gap: 0; }
+  .action-picker { border-right: 1px solid var(--border); padding: 16px; display: grid; gap: 10px; align-content: start; }
+  .action-picker button { width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: rgba(10,10,11,0.82); color: var(--text); padding: 12px 14px; font: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
+  .action-picker button:hover, .action-picker button:focus-visible { border-color: rgba(34,211,238,0.55); outline: none; transform: translateY(-1px); }
+  .action-picker button[aria-pressed="true"] { border-color: rgba(34,211,238,0.72); background: rgba(34,211,238,0.1); }
+  .action-picker strong { display: block; font-size: 13px; line-height: 1.25; margin-bottom: 4px; }
+  .action-picker span { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
+  .gate-visual { padding: 18px; }
+  .gate-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; margin-bottom: 16px; }
+  .gate-node { border: 1px solid var(--border); border-radius: 10px; background: rgba(10,10,11,0.72); padding: 14px; min-height: 112px; }
+  .gate-node-label { color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; font-weight: 800; }
+  .gate-node-value { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
+  .gate-node.blocked { border-color: rgba(248,113,113,0.42); background: rgba(248,113,113,0.08); }
+  .gate-node.allowed { border-color: rgba(74,222,128,0.42); background: rgba(74,222,128,0.08); }
+  .gate-arrow { align-self: center; color: var(--cyan); font-weight: 900; font-size: 20px; }
+  .gate-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+  .gate-metric { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: rgba(10,10,11,0.58); }
+  .gate-metric span { display: block; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
+  .gate-metric strong { display: block; color: var(--text); font-size: 16px; }
+  .gate-metric.block strong { color: var(--red); }
+  .gate-metric.allow strong { color: var(--green); }
+  .gate-caption { margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
   .terminal-row { padding: 8px 0; font-size: 14px; line-height: 1.45; border-bottom: 1px solid rgba(255,255,255,0.06); }
   .terminal-row:last-child { border-bottom: 0; }
   .terminal-row.muted { color: var(--text-muted); }
@@ -703,6 +729,13 @@ __GA_BOOTSTRAP__
     .team-intake-recovery a { width: 100%; }
     .team-form { grid-template-columns: 1fr; }
     .hero { padding: 72px 0 56px; }
+    .interactive-gate-head { display: block; }
+    .interactive-gate-head p { text-align: left; margin-top: 8px; }
+    .interactive-gate-body { grid-template-columns: 1fr; }
+    .action-picker { border-right: 0; border-bottom: 1px solid var(--border); }
+    .gate-flow { grid-template-columns: 1fr; }
+    .gate-arrow { transform: rotate(90deg); justify-self: center; }
+    .gate-result { grid-template-columns: 1fr; }
     .hero-actions { flex-direction: column; }
     .hero-actions a { width: 100%; }
     .offer-router { grid-template-columns: 1fr; }
@@ -770,10 +803,70 @@ __GA_BOOTSTRAP__
       <img src="/media/thumbgate-demo.gif" alt="ThumbGate blocking an AI agent's rm -rf, git push --force, and chmod 777 in real time, while letting safe commands through" style="width:100%;display:block;border-radius:8px;" loading="lazy" />
     </div>
 
+    <div class="interactive-gate-demo" data-gate-demo aria-label="Interactive ThumbGate pre-action gate simulator">
+      <div class="interactive-gate-head">
+        <h2>Click an agent action. See the gate fire before execution.</h2>
+        <p>This is the part dashboards miss: ThumbGate checks the proposed tool call while it is still only intent, then records the receipt.</p>
+      </div>
+      <div class="interactive-gate-body">
+        <div class="action-picker" role="group" aria-label="Choose an AI agent action to simulate">
+          <button type="button" data-demo-action="forcePush" aria-pressed="true">
+            <strong>Force-push main</strong>
+            <span>Known repeated failure from a thumbs-down</span>
+          </button>
+          <button type="button" data-demo-action="secretPaste" aria-pressed="false">
+            <strong>Paste an API key</strong>
+            <span>Public LLM prompt with secret-shaped data</span>
+          </button>
+          <button type="button" data-demo-action="safeTest" aria-pressed="false">
+            <strong>Run tests</strong>
+            <span>Safe local verification command</span>
+          </button>
+          <button type="button" data-demo-action="deployNoProof" aria-pressed="false">
+            <strong>Deploy without proof</strong>
+            <span>Risky production action missing receipts</span>
+          </button>
+        </div>
+        <div class="gate-visual">
+          <div class="gate-flow" aria-live="polite">
+            <div class="gate-node">
+              <div class="gate-node-label">Agent Intent</div>
+              <div class="gate-node-value" data-demo-command>git push --force origin main</div>
+            </div>
+            <div class="gate-arrow" aria-hidden="true">→</div>
+            <div class="gate-node">
+              <div class="gate-node-label">PreToolUse Gate</div>
+              <div class="gate-node-value" data-demo-rule>Rule: never force-push protected branches</div>
+            </div>
+            <div class="gate-arrow" aria-hidden="true">→</div>
+            <div class="gate-node blocked" data-demo-decision-node>
+              <div class="gate-node-label">Decision</div>
+              <div class="gate-node-value" data-demo-decision>BLOCK before execution</div>
+            </div>
+          </div>
+          <div class="gate-result">
+            <div class="gate-metric block" data-demo-status-card>
+              <span>Status</span>
+              <strong data-demo-status>Blocked</strong>
+            </div>
+            <div class="gate-metric">
+              <span>Repeat Tokens</span>
+              <strong data-demo-tokens>0 spent</strong>
+            </div>
+            <div class="gate-metric">
+              <span>Receipt</span>
+              <strong data-demo-receipt>tg_427_force_push</strong>
+            </div>
+          </div>
+          <p class="gate-caption" data-demo-caption>The agent receives a concrete refusal and chooses a safer plan. The audit trail keeps the rule, source feedback, timestamp, and proposed command.</p>
+        </div>
+      </div>
+    </div>
+
     <div class="hero-actions">
       <a href="/checkout/pro?utm_source=website&utm_medium=hero_cta&utm_campaign=pro_upgrade&cta_id=hero_start_pro&cta_placement=hero&plan_id=pro&landing_path=%2F" data-revenue-cta data-cta-id="hero_start_pro" data-cta-placement="hero" data-tier="pro" data-plan-id="pro" data-price="19" onclick="trackRevenueCta(this);try{posthog.capture('hero_pro_checkout_click',{cta:'hero_start_pro',tier:'pro',price:19})}catch(_){}" class="btn-pro-page hero-pro hero-pro-primary">Start Pro — $19/mo</a>
-      <a href="#workflow-sprint-intake" onclick="try{posthog.capture('hero_sprint_click',{cta:'sprint_intake'})}catch(_){};sendFirstPartyTelemetry('hero_sprint_intake_started',{ctaId:'hero_workflow_sprint',ctaPlacement:'hero',offer:'workflow_sprint'});" class="btn-pro-page hero-pro">Workflow Hardening Sprint →</a>
-      <a href="/go/install?utm_source=website&utm_medium=hero_cta&utm_campaign=install_free&cta_id=hero_install_cli&cta_placement=hero" onclick="event.preventDefault(); navigator.clipboard.writeText('npx thumbgate init'); this.textContent='Copied ✓ — paste in your repo'; setTimeout(()=>{this.textContent='Install Free CLI'},2000); try{posthog.capture('hero_install_click',{cta:'install_cli'})}catch(_){}" class="btn-free btn-install-hero" title="Click to copy: npx thumbgate init">Install Free CLI</a>
+      <a href="#workflow-sprint-intake" onclick="try{posthog.capture('hero_sprint_click',{cta:'sprint_intake'})}catch(_){};sendFirstPartyTelemetry('hero_sprint_intake_started',{ctaId:'hero_workflow_sprint',ctaPlacement:'hero',offer:'workflow_sprint'});" class="btn-pro-page hero-pro">Send workflow first</a>
+      <a href="/go/install?utm_source=website&utm_medium=hero_cta&utm_campaign=install_free&cta_id=hero_install_cli&cta_placement=hero" onclick="event.preventDefault(); navigator.clipboard.writeText('npx thumbgate init'); this.textContent='Copied ✓ — paste in your repo'; setTimeout(()=>{this.textContent='Copy Free CLI'},2000); try{posthog.capture('hero_install_click',{cta:'install_cli'})}catch(_){}" class="btn-free btn-install-hero" title="Click to copy: npx thumbgate init">Copy Free CLI</a>
     </div>
 
     <div class="offer-router" aria-label="Choose the right ThumbGate path">
@@ -783,7 +876,7 @@ __GA_BOOTSTRAP__
         <a href="/checkout/pro?utm_source=website&utm_medium=offer_router&cta_id=router_start_pro&cta_placement=offer_router&plan_id=pro" data-revenue-cta data-cta-id="router_start_pro" data-cta-placement="offer_router" data-tier="pro" data-plan-id="pro" data-price="19" onclick="trackRevenueCta(this);">Pay $19/mo with Stripe →</a>
       </div>
       <div class="offer-route">
-        <strong>Enterprise workflow: Start with intake</strong>
+        <strong>Team workflow: Start with intake</strong>
         <p>One repeated failure, one owner, one proof plan.</p>
         <a href="#workflow-sprint-intake" onclick="sendFirstPartyTelemetry('workflow_sprint_intake_started',{ctaId:'router_workflow_sprint',ctaPlacement:'offer_router',offer:'workflow_sprint'});">Talk to us →</a>
       </div>
@@ -1094,21 +1187,6 @@ __GA_BOOTSTRAP__
         <p>Claude Code, Codex, Gemini CLI, Amp, and OpenCode all use the same gateway and memory model. Any MCP-compatible agent gets pre-action checks, feedback memory, and enforcement out of the box.</p>
         <div class="card-arrow">Open the setup guide →</div>
       </a>
-      <a class="compat-card seo-card" href="/guides/hermes-agent-guardrails" rel="noopener">
-        <h3>☤ Hermes Agent guardrails</h3>
-        <p>Hermes-style agents bring persistent memory, generated skills, messaging gateways, scheduled automations, and sandboxed execution. ThumbGate adds the safer self-evolution loop: propose rule and skill changes from failures, then gate them with evidence before anything overwrites stable instructions or repeats an expensive action.</p>
-        <div class="card-arrow">Read the Hermes guardrails guide →</div>
-      </a>
-      <a class="compat-card seo-card" href="/guides/vllm-serving-guardrails" rel="noopener">
-        <h3>vLLM serving guardrails</h3>
-        <p>vLLM makes self-hosted inference cheaper and faster with PagedAttention, continuous batching, chunked prefill, prefix caching, and optimized kernels. ThumbGate gates the routing change with latency, cache-isolation, benchmark, and rollback proof before agent traffic moves.</p>
-        <div class="card-arrow">Read the vLLM guardrails guide →</div>
-      </a>
-      <a class="compat-card seo-card" href="/guides/agent-context-governance" rel="noopener">
-        <h3>Context and tool governance</h3>
-        <p>Long-running agents need cleaner working context, approved model routes, isolated execution, tool lockdown, direct pushback, and evidence before high-risk actions. ThumbGate turns those controls into local pre-action gates.</p>
-        <div class="card-arrow">Read the context governance guide →</div>
-      </a>
       <a class="compat-card seo-card" href="/guides/gcp-mcp-guardrails" rel="noopener">
         <h3>☁️ Google Data Agent Kit</h3>
         <p>Cloud Next 2026 shipped BigQuery, Spanner, AlloyDB, and Cloud SQL as MCP tool calls into Claude Code, Codex, and Gemini CLI. ThumbGate checks the destructive ones — DROP on prod datasets, unscoped DELETEs, IAM escalation — before they fire.</p>
@@ -1159,7 +1237,7 @@ __GA_BOOTSTRAP__
         <p>Every block explains why: which pattern matched, what evidence triggered it, and whether the rule came from your own corrections.</p>
       </div>
       <div class="agent-card">
-        <h3>📊 Org Dashboard</h3>
+        <h3>📊 Org Dashboard (Team)</h3>
         <p>See which agents are creating review churn, which checks are saving time, and where rollout risk is still concentrated across the shared workflow.</p>
       </div>
       <div class="agent-card">
@@ -1182,28 +1260,6 @@ __GA_BOOTSTRAP__
   </div>
 </section>
 
-<section class="compatibility" id="governance-not-logging">
-  <div class="container">
-    <div class="section-label">Governance, Not Logging</div>
-    <h2 class="section-title">Logs describe the damage. ThumbGate blocks the risky action before it runs.</h2>
-    <p style="color:var(--text-dim);max-width:820px;margin:0 auto 22px;">Self-governance is an operator writing local rules and keeping local logs. ThumbGate starts there, then turns each correction into a pre-action decision: allow, block, require evidence, or route for approval before the tool call touches code, data, money, or customers.</p>
-    <div class="agent-grid">
-      <div class="agent-card">
-        <h3>Pre-action enforcement</h3>
-        <p>The rule is evaluated at the execution boundary, not after the fact. Repeated failures are stopped before shell commands, PR actions, deploys, refunds, or production writes run.</p>
-      </div>
-      <div class="agent-card">
-        <h3>Reviewable decision trail</h3>
-        <p>Each event records the rule, source lesson, policy version, actor, action, evidence requirement, and reason so reviewers can inspect the decision instead of trusting an agent summary.</p>
-      </div>
-      <div class="agent-card">
-        <h3>Enterprise governance mode</h3>
-        <p>Org-owned policies, reviewer approvals, signed evidence bundles, and export paths turn local corrections into shared controls without giving the agent unilateral authority over the rules.</p>
-      </div>
-    </div>
-  </div>
-</section>
-
 <section class="compatibility" id="orchestration-layer">
   <div class="container">
     <div class="section-label">Positioning</div>
@@ -1289,7 +1345,7 @@ __GA_BOOTSTRAP__
         </div>
         <div class="autoresearch-card">
           <h3>Ship into CI</h3>
-          <p>Start with templates for <code>npm test</code>, Playwright duration, bundle size, lint, and CI failures, then add shared workflow checks for team-owned releases.</p>
+          <p>Start with templates for <code>npm test</code>, Playwright duration, bundle size, lint, and CI failures, then add Team checks for shared workflows.</p>
         </div>
       </div>
       <div class="autoresearch-cta">
@@ -1325,9 +1381,8 @@ __GA_BOOTSTRAP__
 <!-- HOW IT WORKS -->
 <section class="how-it-works" id="how-it-works">
   <div class="container">
-    <div class="section-label">Self-improving enforcement</div>
+    <div class="section-label">Current release</div>
     <h2 class="section-title">Three steps to stop repeated AI failures</h2>
-    <p class="section-sub" style="max-width:720px;margin:6px auto 22px;text-align:center;color:var(--text-muted);font-size:clamp(16px,1.6vw,18px);">Self-improving — but for safety, not capability: every <code>👎</code> compiles into a hard rule, and each rule regression-tests itself against your history, so it blocks the repeat and never the safe action.</p>
     <div class="steps">
       <div class="step">
         <div class="step-num">1</div>
@@ -1532,7 +1587,7 @@ __GA_BOOTSTRAP__
           <li><strong>Audit-ready enforcement proof</strong> — Personal local dashboard for the individual operator with auditable block history</li>
           <li><strong>Ship hardened agents to production</strong> — Model Hardening Advisor plus HuggingFace dataset export</li>
           <li><strong>Hand a PR with proof</strong> — Review-ready workflow support and proof-ready lesson bundles a reviewer can verify in 30 seconds</li>
-          <li><strong>Hand off without re-onboarding</strong> — Lesson export/import for handoff or migration</li>
+          <li><strong>Hand off without re-onboarding</strong> — Team lesson export/import for handoff or migration</li>
         </ul>
         <div style="margin:12px 0 16px;padding:12px;border:1px solid rgba(34,211,238,0.25);border-radius:8px;background:rgba(34,211,238,0.06);">
           <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">What your Pro dashboard looks like</div>
@@ -1710,7 +1765,7 @@ __GA_BOOTSTRAP__
       </div>
       <div class="faq-item">
         <button class="faq-q" type="button" aria-expanded="false" onclick="toggleFaq(this)" onkeydown="handleFaqKeydown(event)">How do we keep high-risk autonomous runs off the host?</button>
-        <div class="faq-a">ThumbGate is the control plane, not just a prompt layer. Workflow Sentinel predicts blast radius before execution, and risky local autonomy can be routed into Docker Sandboxes instead of running directly on the host. Enterprise workflows also have a signed hosted sandbox lane for isolated dispatch when local repo access is not required.</div>
+        <div class="faq-a">ThumbGate is the control plane, not just a prompt layer. Workflow Sentinel predicts blast radius before execution, and risky local autonomy can be routed into Docker Sandboxes instead of running directly on the host. Team workflows also have a signed hosted sandbox lane for isolated dispatch when local repo access is not required.</div>
       </div>
       <div class="faq-item">
         <div class="faq-q" role="button" tabindex="0" aria-expanded="false" onclick="toggleFaq(this)" onkeydown="handleFaqKeydown(event)">How do we trust a new package release?</div>
@@ -1794,7 +1849,7 @@ __GA_BOOTSTRAP__
       <a href="https://www.linkedin.com/in/igorganapolsky" target="_blank" rel="noopener">LinkedIn</a>
       <a href="/blog">Blog</a>
     </div>
-    <span class="footer-copy">© 2026 ThumbGate · MIT License · npm v1.27.8</span>
+    <span class="footer-copy">© 2026 ThumbGate · MIT License · npm v1.27.7</span>
   </div>
 </footer>
 
@@ -1990,6 +2045,93 @@ function copyInstall(el) {
   });
 }
 
+function initializeGateDemo() {
+  var root = document.querySelector('[data-gate-demo]');
+  if (!root) return;
+  var scenarios = {
+    forcePush: {
+      command: 'git push --force origin main',
+      rule: 'Rule: never force-push protected branches',
+      decision: 'BLOCK before execution',
+      status: 'Blocked',
+      statusClass: 'block',
+      nodeClass: 'blocked',
+      tokens: '0 spent',
+      receipt: 'tg_427_force_push',
+      caption: 'The agent receives a concrete refusal and chooses a safer plan. The audit trail keeps the rule, source feedback, timestamp, and proposed command.'
+    },
+    secretPaste: {
+      command: 'paste STRIPE_SECRET_KEY into a public LLM prompt',
+      rule: 'Rule: sanitize secrets before external AI tools',
+      decision: 'BLOCK before data leaves the machine',
+      status: 'Blocked',
+      statusClass: 'block',
+      nodeClass: 'blocked',
+      tokens: '0 spent',
+      receipt: 'tg_618_secret_prompt',
+      caption: 'ThumbGate treats public prompt submission as an external action. Redact, tokenize, or route through a private endpoint before retrying.'
+    },
+    safeTest: {
+      command: 'npm test -- --runInBand',
+      rule: 'Rule: local verification is allowed',
+      decision: 'ALLOW and log receipt',
+      status: 'Allowed',
+      statusClass: 'allow',
+      nodeClass: 'allowed',
+      tokens: 'normal',
+      receipt: 'tg_102_test_ok',
+      caption: 'Safe verification commands keep moving. ThumbGate records the action so later claims can cite what actually ran.'
+    },
+    deployNoProof: {
+      command: 'railway deploy --production',
+      rule: 'Rule: production deploy requires test, rollback, owner',
+      decision: 'PAUSE for proof before execution',
+      status: 'Needs proof',
+      statusClass: 'block',
+      nodeClass: 'blocked',
+      tokens: 'retry avoided',
+      receipt: 'tg_511_deploy_gate',
+      caption: 'The deploy is not rejected forever; it is held until the agent shows the proof packet: tests, rollback path, owner, and target environment.'
+    }
+  };
+  var fields = {
+    command: root.querySelector('[data-demo-command]'),
+    rule: root.querySelector('[data-demo-rule]'),
+    decision: root.querySelector('[data-demo-decision]'),
+    decisionNode: root.querySelector('[data-demo-decision-node]'),
+    statusCard: root.querySelector('[data-demo-status-card]'),
+    status: root.querySelector('[data-demo-status]'),
+    tokens: root.querySelector('[data-demo-tokens]'),
+    receipt: root.querySelector('[data-demo-receipt]'),
+    caption: root.querySelector('[data-demo-caption]')
+  };
+  function render(key) {
+    var next = scenarios[key] || scenarios.forcePush;
+    fields.command.textContent = next.command;
+    fields.rule.textContent = next.rule;
+    fields.decision.textContent = next.decision;
+    fields.status.textContent = next.status;
+    fields.tokens.textContent = next.tokens;
+    fields.receipt.textContent = next.receipt;
+    fields.caption.textContent = next.caption;
+    fields.decisionNode.classList.remove('blocked', 'allowed');
+    fields.decisionNode.classList.add(next.nodeClass);
+    fields.statusCard.classList.remove('block', 'allow');
+    fields.statusCard.classList.add(next.statusClass);
+    root.querySelectorAll('[data-demo-action]').forEach(function(button) {
+      button.setAttribute('aria-pressed', button.getAttribute('data-demo-action') === key ? 'true' : 'false');
+    });
+    if (typeof plausible === 'function') plausible('interactive_gate_demo', { props: { scenario: key, status: next.status } });
+  }
+  root.querySelectorAll('[data-demo-action]').forEach(function(button) {
+    button.addEventListener('click', function() {
+      render(button.getAttribute('data-demo-action'));
+    });
+  });
+}
+
+initializeGateDemo();
+
 /* ── Plausible custom event tracking ── */
 (function() {
 
@@ -2039,7 +2181,7 @@ function copyInstall(el) {
   trackClick('.btn-demo-link', 'demo_click', { source: 'homepage' });
   trackClick('.nav-cta:not([data-revenue-cta])', 'chatgpt_gpt_click', { tier: 'free', source: 'nav' });
 
-  /* Pricing CTA conversion tracking — fires on every Get Started / Pro / Enterprise button click
+  /* Pricing CTA conversion tracking — fires on every Get Started / Pro / Team button click
      with section context so we can distinguish pricing section vs final CTA section clicks */
   document.querySelectorAll('.btn-pro, .btn-gpt-page, .btn-pro-page, .btn-install-hero, .btn-install-link, .btn-team, .btn-free, .btn-demo-link, .nav-cta').forEach(function(el) {
     el.addEventListener('click', function() {