thumbgate 1.5.3 → 1.5.8

package/public/dashboard.html

@@ -330,6 +330,21 @@
       <h2>📊 Feedback Insights &amp; Lesson Pipeline</h2>
       <p class="template-summary">How your thumbs-up/down signals turn into lessons that prevent repeat mistakes.</p>
 
+      <!-- Token Savings — computed from real gate-block counts -->
+      <div class="panel" id="tokenSavingsPanel" style="margin-bottom:24px;background:linear-gradient(135deg,rgba(74,222,128,0.04),rgba(34,211,238,0.03));border-color:rgba(74,222,128,0.25);">
+        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;">
+          <div style="flex:1;min-width:240px;">
+            <h3 style="margin-bottom:6px;">💸 Estimated tokens saved</h3>
+            <div style="font-size:12px;color:var(--text-muted);line-height:1.55;">Computed from your real blocked-action count × 2,000 input + 600 output tokens per avoided retry, priced at a Sonnet-heavy blend (80% Sonnet 4.5 / 15% Opus 4.6 / 5% Haiku 4.5). Conservative estimate — actual savings may be higher.</div>
+          </div>
+          <div style="text-align:right;min-width:220px;">
+            <div id="tokenSavingsDollars" style="font-size:40px;font-weight:800;color:#4ade80;letter-spacing:-0.02em;line-height:1;">—</div>
+            <div id="tokenSavingsTokens" style="font-size:13px;color:var(--text-muted);margin-top:6px;">— tokens · from <span id="tokenSavingsBlocks">—</span> blocked calls</div>
+          </div>
+        </div>
+        <div id="tokenSavingsSource" style="margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);line-height:1.6;"></div>
+      </div>
+
       <!-- Pipeline Flow -->
       <div class="panel" style="margin-bottom:24px;">
         <h3 style="margin-bottom:16px;">Feedback → Lesson Pipeline</h3>
@@ -1220,12 +1235,49 @@ var lessonChart = null;
 var gateAuditChart = null;
 
 function renderInsights(data) {
+  renderTokenSavings(data.tokenSavings, data.gateStats || {});
   renderPipeline(data.lessonPipeline || {});
   renderFeedbackTrendChart(data.feedbackTimeSeries || {});
   renderLessonTrendChart(data.feedbackTimeSeries || {});
   renderGateAuditChartFromData(data.gateAudit || {});
 }
 
+/**
+ * Render token-savings panel from /v1/dashboard.tokenSavings.
+ * Only shows a dollar figure when it's backed by real gate blocks.
+ * Otherwise shows an honest "$0.00 — no blocks yet" state, NEVER
+ * a marketing placeholder.
+ */
+function renderTokenSavings(savings, gateStats) {
+  var panel = document.getElementById('tokenSavingsPanel');
+  if (!panel) return;
+  var dollarsEl = document.getElementById('tokenSavingsDollars');
+  var tokensEl = document.getElementById('tokenSavingsTokens');
+  var blocksEl = document.getElementById('tokenSavingsBlocks');
+  var sourceEl = document.getElementById('tokenSavingsSource');
+
+  if (!savings || typeof savings.dollarsSaved !== 'number') {
+    dollarsEl.textContent = '$0.00';
+    tokensEl.innerHTML = 'No blocked calls yet — estimate will appear after your first gate fires';
+    if (blocksEl) blocksEl.textContent = '0';
+    sourceEl.textContent = '';
+    return;
+  }
+
+  dollarsEl.textContent = savings.dollarsSavedDisplay || ('$' + Number(savings.dollarsSaved).toFixed(2));
+  tokensEl.innerHTML = (savings.tokensSavedDisplay || '0') + ' tokens · from <span id="tokenSavingsBlocks">' +
+    (savings.blockedCalls || 0) + '</span> blocked calls';
+
+  var mix = savings.modelMix || {};
+  var mixParts = [];
+  for (var m in mix) { mixParts.push(Math.round(mix[m] * 100) + '% ' + m); }
+  var blend = savings.blendedPricePer1M || { input: 0, output: 0 };
+  sourceEl.textContent =
+    'Methodology: blended ' + mixParts.join(' / ') +
+    ' at $' + blend.input.toFixed(2) + '/1M input + $' + blend.output.toFixed(2) + '/1M output. ' +
+    'Data source: actual blocked count from gate-stats.json. No sample numbers.';
+}
+
 function renderPipeline(pipeline) {
   var stages = pipeline.stages || [];
   var rates = pipeline.rates || {};

package/public/index.html

@@ -283,9 +283,13 @@ __GA_BOOTSTRAP__
   .hero p { font-size: 17px; color: var(--text-muted); max-width: 520px; margin: 0 auto 36px; line-height: 1.6; }
   .hero-persona { font-size: 15px; color: var(--cyan); max-width: 600px; margin: 0 auto 20px; line-height: 1.5; font-weight: 500; }
   .hero-signals { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 auto 28px; max-width: 760px; }
-  .signal-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
+  .signal-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-raised); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
+  .signal-pill:hover { transform: translateY(-1px); border-color: rgba(34, 211, 238, 0.5); background: rgba(34, 211, 238, 0.06); }
+  .signal-pill:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
   .signal-pill.signal-up { border-color: rgba(74, 222, 128, 0.28); color: #b8f7c8; background: rgba(74, 222, 128, 0.08); }
+  .signal-pill.signal-up:hover { border-color: rgba(74, 222, 128, 0.6); background: rgba(74, 222, 128, 0.14); }
   .signal-pill.signal-down { border-color: rgba(248, 113, 113, 0.28); color: #ffc0c0; background: rgba(248, 113, 113, 0.08); }
+  .signal-pill.signal-down:hover { border-color: rgba(248, 113, 113, 0.6); background: rgba(248, 113, 113, 0.14); }
   .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 auto 16px; max-width: 760px; }
   .btn-pro-page { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; background: var(--cyan); color: var(--bg); border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700; box-shadow: 0 0 0 1px rgba(34,211,238,0.28), 0 12px 32px rgba(34,211,238,0.18); transition: opacity 0.15s, transform 0.15s; }
   .btn-pro-page:hover { opacity: 0.9; transform: translateY(-1px); }
@@ -528,6 +532,35 @@ __GA_BOOTSTRAP__
     <div class="hero-badge">● Your AI coding bill has a leak</div>
     <h1>Stop paying $ for the same AI mistake.</h1>
     <p style="font-size:18px;color:var(--text-muted);max-width:720px;margin:0 auto 20px;line-height:1.6;">Every retry loop, every hallucinated import, every "let me try a different approach" — those are billable tokens on every LLM vendor's bill. Thumbs-down once; ThumbGate blocks that exact mistake on every future call. Across Claude Code, Cursor, Codex, Gemini, Amp, OpenCode — any MCP-compatible agent, forever, including fast-moving vibe coding workflows.</p>
+
+    <!-- HERO PRICING CARD — visible in first viewport so $19/mo and $149/yr never get buried -->
+    <div id="pro-pitch" style="max-width:820px;margin:0 auto 32px;padding:24px 28px;background:linear-gradient(180deg,rgba(17,17,19,0.94) 0%,rgba(22,22,24,0.94) 100%);border:1px solid rgba(34,211,238,0.32);border-radius:20px;box-shadow:0 0 0 1px rgba(34,211,238,0.18),0 24px 64px rgba(0,0,0,0.35);text-align:left;">
+      <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;">
+        <div>
+          <div style="display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(34,211,238,0.25);background:var(--cyan-dim);color:var(--cyan);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;">Start 7-day free trial</div>
+          <h2 style="margin:10px 0 4px;font-size:22px;letter-spacing:-0.025em;line-height:1.2;">Go Pro — one correction, every agent, every session.</h2>
+          <p style="margin:0;font-size:13px;color:var(--text-muted);">Personal local dashboard · DPO export from real corrections · founder support on risky flows.</p>
+        </div>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(34,211,238,0.35);background:rgba(34,211,238,0.06);">
+          <div style="text-align:left;">
+            <div style="font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;">$19<span style="font-size:13px;font-weight:600;color:var(--text-muted);">/mo</span></div>
+            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">Monthly Pro</div>
+          </div>
+          <a href="/checkout/pro?utm_source=website&utm_medium=hero_pricing_card&utm_campaign=pro_pack&cta_id=hero_pro_monthly&cta_placement=hero_pricing&plan_id=pro&landing_path=%2F" onclick="posthog.capture('hero_pricing_monthly_click',{cta:'choose_monthly'})" style="display:inline-flex;align-items:center;gap:6px;padding:11px 20px;background:var(--cyan);color:#041016;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;box-shadow:0 0 0 1px rgba(34,211,238,0.28),0 12px 32px rgba(34,211,238,0.18);white-space:nowrap;">Choose monthly →</a>
+        </div>
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,0.02);">
+          <div style="text-align:left;">
+            <div style="font-size:22px;font-weight:800;letter-spacing:-0.03em;line-height:1.1;">$149<span style="font-size:13px;font-weight:600;color:var(--text-muted);">/yr</span> <span style="font-size:11px;color:#4ade80;background:rgba(74,222,128,0.14);padding:2px 7px;border-radius:999px;font-weight:700;vertical-align:middle;margin-left:4px;">SAVE 35%</span></div>
+            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">Annual Pro</div>
+          </div>
+          <a href="/checkout/pro?utm_source=website&utm_medium=hero_pricing_card&utm_campaign=pro_pack&cta_id=hero_pro_annual&cta_placement=hero_pricing&plan_id=pro&billing_cycle=annual&landing_path=%2F" onclick="posthog.capture('hero_pricing_annual_click',{cta:'choose_annual'})" style="display:inline-flex;align-items:center;gap:6px;padding:11px 20px;background:rgba(17,17,19,0.75);color:var(--text);border:1px solid var(--border);border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap;">Choose annual →</a>
+        </div>
+      </div>
+      <p style="margin:14px 0 0;font-size:11px;color:var(--text-muted);text-align:center;">No credit card for 7-day trial · cancel anytime · your rules and captures stay local. <a href="/go/install" style="color:var(--cyan);text-decoration:none;">Prefer free? Install CLI →</a></p>
+    </div>
+
     <a href="/dashboard" class="hero-dashboard-preview" style="display:block;max-width:620px;margin:0 auto 28px;background:linear-gradient(135deg,#0d1220 0%,#121a2e 100%);border:1px solid rgba(34,211,238,0.35);border-radius:12px;padding:20px 24px;box-shadow:0 0 48px rgba(34,211,238,0.15);font-family:var(--mono);text-align:left;text-decoration:none;color:inherit;" title="Open your live dashboard">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);">
         <span>Your dashboard · <span style="color:#eab308;background:rgba(234,179,8,0.1);padding:2px 6px;border-radius:3px;letter-spacing:0.04em;">Sample</span></span>
@@ -554,9 +587,9 @@ __GA_BOOTSTRAP__
       })();
     </script>
     <div class="hero-signals">
-      <div class="signal-pill signal-down">Block repeat hallucinations before the model sees them</div>
-      <div class="signal-pill signal-up">Thumbs-down once, blocked forever, across every agent</div>
-      <div class="signal-pill">CLI-first workflow governance with a live tokens-saved counter</div>
+      <a class="signal-pill signal-down" href="#how-it-works" title="See how gate interception works">Block repeat hallucinations before the model sees them</a>
+      <a class="signal-pill signal-up" href="#how-it-works" title="See the one-thumbs-down enforcement loop">Thumbs-down once, blocked forever, across every agent</a>
+      <a class="signal-pill" href="#install" title="Install the CLI">CLI-first workflow governance with a live tokens-saved counter</a>
     </div>
     <p class="hero-persona" style="display:none">For consultancies, platform teams, and AI product teams with one workflow owner, one repeated failure, and one buyer who needs proof before a wider rollout.</p>
     <div class="hero-actions" style="margin-top:32px;">
@@ -571,6 +604,7 @@ __GA_BOOTSTRAP__
         <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-claude-desktop.mcpb" class="btn-gpt-page" target="_blank" rel="noopener" onclick="posthog.capture('hero_claude_extension_click',{cta:'install_claude_extension'})" style="font-size:12px;padding:8px 16px;background:#d97706;color:#fff;box-shadow:none;">Install Claude Extension</a>
         <a href="/go/github?utm_source=website&utm_medium=hero_cta&utm_campaign=github_repo&cta_id=hero_star_github&cta_placement=hero" target="_blank" rel="noopener" class="btn-free" style="display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:12px;">⭐ Star on GitHub</a>
         <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-codex-plugin.zip" class="btn-install-link" target="_blank" rel="noopener" onclick="posthog.capture('hero_codex_plugin_click',{cta:'install_codex_plugin'})" style="font-size:11px;color:var(--text-muted);text-decoration:none;padding:6px 10px;">Install Codex plugin →</a>
+        <a href="https://github.com/IgorGanapolsky/ThumbGate/tree/main/plugins/cursor-marketplace" class="btn-install-link" target="_blank" rel="noopener" onclick="posthog.capture('hero_cursor_plugin_click',{cta:'install_cursor_plugin'})" style="font-size:11px;color:var(--text-muted);text-decoration:none;padding:6px 10px;">Install Cursor plugin →</a>
         <a href="/go/gpt?utm_source=website&utm_medium=hero_cta&utm_campaign=chatgpt_gpt&cta_id=hero_open_gpt&cta_placement=hero" class="btn-gpt-page" target="_blank" rel="noopener" onclick="posthog.capture('hero_cta_click',{cta:'open_gpt'})" style="font-size:11px;padding:6px 12px;background:transparent;border:1px solid rgba(74,222,128,0.3);color:var(--green);">Open ThumbGate GPT</a>
       </div>
     </div>
@@ -594,7 +628,7 @@ __GA_BOOTSTRAP__
       <div class="first-gate-steps">
         <div class="first-gate-step">
           <strong>1. Install ThumbGate</strong>
-          <p>Run <code>npx thumbgate init</code> in your repo. Or install the <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-claude-desktop.mcpb" style="color:var(--cyan);">Claude Extension</a>, <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-codex-plugin.zip" style="color:var(--cyan);">Codex plugin</a>, or <a href="/go/gpt" style="color:var(--cyan);">open the GPT</a>. Native ChatGPT rating buttons are not the ThumbGate capture path.</p>
+          <p>Run <code>npx thumbgate init</code> in your repo. Or install the <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-claude-desktop.mcpb" style="color:var(--cyan);">Claude Extension</a>, <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-codex-plugin.zip" style="color:var(--cyan);">Codex plugin</a>, <a href="https://github.com/IgorGanapolsky/ThumbGate/tree/main/plugins/cursor-marketplace" style="color:var(--cyan);">Cursor plugin</a>, or <a href="/go/gpt" style="color:var(--cyan);">open the GPT</a>. Native ChatGPT rating buttons are not the ThumbGate capture path.</p>
         </div>
         <div class="first-gate-step">
           <strong>2. Give feedback</strong>
@@ -701,7 +735,7 @@ __GA_BOOTSTRAP__
       </div>
       <div style="display:flex;gap:12px;flex-wrap:wrap;">
         <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-claude-desktop.mcpb" class="btn-gpt-page" target="_blank" rel="noopener" onclick="posthog.capture('claude_section_extension_click',{cta:'install_claude_extension'})" style="background:#d97706;color:#fff;">Download Claude Extension (.mcpb)</a>
-        <a href="/guides/claude-desktop" class="btn-free" style="display:inline-flex;align-items:center;padding:12px 20px;border-radius:8px;">Claude Desktop setup guide</a>
+        <a href="/guide.html" class="btn-free" style="display:inline-flex;align-items:center;padding:12px 20px;border-radius:8px;">Claude Desktop setup guide</a>
         <a href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/.claude-plugin/README.md" class="btn-free" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;padding:12px 20px;border-radius:8px;">Claude plugin docs</a>
       </div>
       <p class="gpt-note"><strong>Claude Code Skill:</strong> Type <code>/thumbgate</code> in any Claude Code session. Auto-triggers on “gate”, “feedback”, “block mistake”. Free skill on top of the same local gateway.</p>
@@ -744,30 +778,40 @@ __GA_BOOTSTRAP__
     <div class="section-label">Compatibility</div>
     <h2 class="section-title">One gateway across the agent surfaces you already use</h2>
     <div class="compatibility-grid">
-      <a class="compat-card" href="/guides/claude-desktop" style="border-color:rgba(217,119,6,0.3);background:linear-gradient(135deg, rgba(217,119,6,0.06) 0%, var(--bg-card) 100%);">
+      <a class="compat-card" href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-claude-desktop.mcpb" target="_blank" rel="noopener" onclick="if(typeof posthog!=='undefined')posthog.capture('compat_claude_desktop_click',{cta:'download_claude_desktop'})" style="border-color:rgba(217,119,6,0.3);background:linear-gradient(135deg, rgba(217,119,6,0.06) 0%, var(--bg-card) 100%);">
         <h3>🧩 Claude Desktop Extension</h3>
-        <p>Install the published Claude Desktop plugin <code>.mcpb</code> bundle today. Claude Code users can add the repo marketplace immediately with <code>/plugin marketplace add</code>. No waiting for directory approval.</p>
-        <div class="card-arrow" style="color:#d97706;">Get the Claude plugin →</div>
+        <p>Install the published Claude Desktop plugin <code>.mcpb</code> bundle today. Claude Code users can add the repo marketplace immediately with <code>/plugin marketplace add</code>. No waiting for directory approval. <a href="/guide.html" style="color:var(--text-muted);text-decoration:underline;" onclick="event.stopPropagation();">60-second setup guide →</a></p>
+        <div class="card-arrow" style="color:#d97706;">Download .mcpb bundle →</div>
       </a>
-      <a class="compat-card seo-card" href="https://github.com/IgorGanapolsky/ThumbGate/tree/main/.claude/skills/thumbgate" target="_blank" rel="noopener">
+      <a class="compat-card seo-card" href="/guides/claude-code-prevent-repeated-mistakes.html" rel="noopener">
         <h3>⚡ Claude Code Skill</h3>
         <p>Type <code>/thumbgate</code> in any Claude Code session. Auto-triggers on "gate", "feedback", "block mistake". Free skill on top of the same local gateway teams later harden into a shared workflow.</p>
-        <div class="card-arrow">View skill on GitHub →</div>
+        <div class="card-arrow">Read the Claude Code guide →</div>
       </a>
-      <a class="compat-card" href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/plugins/claude-codex-bridge/INSTALL.md" target="_blank" rel="noopener">
+      <a class="compat-card" href="/guide.html" rel="noopener">
         <h3>🤖 AI CLIs</h3>
         <p>Claude Code, Codex, Gemini CLI, Amp, and OpenCode all use the same gateway and memory model. Any MCP-compatible agent gets pre-action gates, feedback memory, and enforcement out of the box.</p>
-        <div class="card-arrow">View setup guide →</div>
+        <div class="card-arrow">Open the setup guide →</div>
       </a>
-      <a class="compat-card" href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/plugins/codex-profile/INSTALL.md" target="_blank" rel="noopener">
+      <a class="compat-card" href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-codex-plugin.zip" target="_blank" rel="noopener" onclick="if(typeof posthog!=='undefined')posthog.capture('compat_codex_plugin_click',{cta:'download_codex_plugin'})">
         <h3>🧩 Codex plugin</h3>
-        <p>Codex ships with a published standalone ThumbGate plugin bundle plus a repo-local plugin profile. Download the zip, extract it, and install without wiring MCP by hand.</p>
-        <div class="card-arrow">Get the Codex plugin →</div>
+        <p>Codex ships with a published standalone ThumbGate plugin bundle plus a repo-local plugin profile. Download the zip, extract it, and install without wiring MCP by hand. <a href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/plugins/codex-profile/INSTALL.md" target="_blank" rel="noopener" style="color:var(--text-muted);text-decoration:underline;" onclick="event.stopPropagation();">Setup instructions →</a></p>
+        <div class="card-arrow">Download the Codex plugin →</div>
       </a>
-      <a class="compat-card" href="https://github.com/IgorGanapolsky/ThumbGate/tree/main/plugins" target="_blank" rel="noopener">
+      <a class="compat-card" href="/guides/cursor-prevent-repeated-mistakes.html" rel="noopener">
+        <h3>🎯 Cursor plugin</h3>
+        <p>Drop the ThumbGate MCP config into <code>.cursor/mcp.json</code> and Cursor gets the same pre-action gates as Claude Code and Codex. Ships with bundled rules, commands, hooks, and agents.</p>
+        <div class="card-arrow">Read the Cursor guide →</div>
+      </a>
+      <a class="compat-card" href="/guide.html" rel="noopener">
         <h3>✏️ Editor workflows</h3>
-        <p>Cursor ships with a bundled marketplace plugin. VS Code works when you run an MCP-compatible agent inside it.</p>
-        <div class="card-arrow">Browse plugins →</div>
+        <p>VS Code works when you run an MCP-compatible agent inside it (Continue, Cline, etc.). Any editor that speaks MCP stdio gets the same gateway.</p>
+        <div class="card-arrow">Open the setup guide →</div>
+      </a>
+      <a class="compat-card" href="https://mcp.so/server/thumbgate" target="_blank" rel="noopener" onclick="if(typeof posthog!=='undefined')posthog.capture('compat_mcp_so_click',{cta:'view_mcp_directory'})">
+        <h3>🗂️ MCP Server Directory</h3>
+        <p>ThumbGate is listed on <code>mcp.so</code> — the largest public MCP server directory. Install via Smithery CLI, copy-paste config for your client, or verify it's a legitimate server before running it.</p>
+        <div class="card-arrow">View on mcp.so →</div>
       </a>
       <a class="compat-card" href="/go/gpt?utm_source=website&utm_medium=compatibility&utm_campaign=chatgpt_gpt&cta_id=compat_open_gpt&cta_placement=compatibility" target="_blank" rel="noopener">
         <h3>💬 ChatGPT GPT Actions</h3>
@@ -872,7 +916,7 @@ __GA_BOOTSTRAP__
 <!-- HOW IT WORKS -->
 <section class="how-it-works" id="how-it-works">
   <div class="container">
-    <div class="section-label">New in v1.5.3</div>
+    <div class="section-label">New in v1.5.8</div>
     <h2 class="section-title">Three steps to stop repeated AI failures</h2>
     <div class="steps">
       <div class="step">
@@ -1228,7 +1272,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 Max Smith KDP LLC · MIT License · v1.5.3</span>
+    <span class="footer-copy">© 2026 Max Smith KDP LLC · MIT License · v1.5.8</span>
   </div>
 </footer>
 

package/public/learn.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Learn — AI Agent Safety, Pre-Action Gates, and Vibe Coding Guardrails</title>
+<script defer data-domain="thumbgate-production.up.railway.app" src="https://plausible.io/js/script.js"></script>
+<meta name="description" content="Practical guides for stopping AI coding agent mistakes. Learn about pre-action gates, MCP guardrails, feedback-driven enforcement, and vibe coding safety for Claude Code, Cursor, Codex, and more.">
+<meta name="keywords" content="AI agent safety, pre-action gates, vibe coding guardrails, Claude Code mistakes, Cursor agent memory, MCP server hooks, AI coding agent feedback, ThumbGate guides">
+<meta property="og:title" content="Learn — AI Agent Safety Guides by ThumbGate">
+<meta property="og:description" content="Practical guides for stopping AI coding agent mistakes with pre-action gates and feedback-driven enforcement.">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://thumbgate-production.up.railway.app/learn">
+<link rel="canonical" href="https://thumbgate-production.up.railway.app/learn">
+
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "CollectionPage",
+  "name": "ThumbGate Learning Hub",
+  "description": "Practical guides for AI coding agent safety, pre-action gates, and vibe coding guardrails.",
+  "url": "https://thumbgate-production.up.railway.app/learn",
+  "publisher": {
+    "@type": "Organization",
+    "name": "ThumbGate",
+    "url": "https://thumbgate-production.up.railway.app"
+  },
+  "mainEntity": {
+    "@type": "ItemList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "url": "https://thumbgate-production.up.railway.app/learn/stop-ai-agent-force-push",
+        "name": "How to Stop AI Agents From Force-Pushing to Main"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "url": "https://thumbgate-production.up.railway.app/learn/vibe-coding-safety-net",
+        "name": "The Vibe Coding Safety Net You Are Missing"
+      },
+      {
+        "@type": "ListItem",
+        "position": 3,
+        "url": "https://thumbgate-production.up.railway.app/learn/mcp-pre-action-gates-explained",
+        "name": "MCP Pre-Action Gates Explained"
+      },
+      {
+        "@type": "ListItem",
+        "position": 4,
+        "url": "https://thumbgate-production.up.railway.app/learn/agent-harness-pattern",
+        "name": "The Agent Harness Pattern: Why Your AI Needs a Seatbelt"
+      },
+      {
+        "@type": "ListItem",
+        "position": 5,
+        "url": "https://thumbgate-production.up.railway.app/learn/ai-agent-persistent-memory",
+        "name": "How to Give Your AI Coding Agent Persistent Memory Across Sessions"
+      },
+      {
+        "@type": "ListItem",
+        "position": 6,
+        "url": "https://thumbgate-production.up.railway.app/guides/stop-repeated-ai-agent-mistakes",
+        "name": "How to Stop AI Coding Agents From Repeating Mistakes"
+      },
+      {
+        "@type": "ListItem",
+        "position": 7,
+        "url": "https://thumbgate-production.up.railway.app/guides/cursor-agent-guardrails",
+        "name": "Cursor Guardrails That Block Repeated Mistakes"
+      },
+      {
+        "@type": "ListItem",
+        "position": 8,
+        "url": "https://thumbgate-production.up.railway.app/guides/codex-cli-guardrails",
+        "name": "Codex CLI Guardrails That Actually Enforce"
+      },
+      {
+        "@type": "ListItem",
+        "position": 9,
+        "url": "https://thumbgate-production.up.railway.app/guides/gemini-cli-feedback-memory",
+        "name": "Gemini CLI Feedback Memory That Leads to Enforcement"
+      }
+    ]
+  }
+}
+</script>
+
+<style>
+  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+  :root {
+    --bg: #0a0a0b;
+    --bg-card: #161618;
+    --bg-raised: #111113;
+    --border: #222225;
+    --text: #e8e8ec;
+    --muted: #8b8b94;
+    --cyan: #22d3ee;
+    --green: #34d399;
+    --red: #f87171;
+  }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; }
+  .container { max-width: 780px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
+  nav { padding: 1rem 2rem; border-bottom: 1px solid var(--border); display: flex; gap: 1.5rem; align-items: center; }
+  nav a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
+  nav a:hover { color: var(--cyan); }
+  nav .brand { color: var(--text); font-weight: 700; font-size: 1.1rem; }
+  h1 { font-size: 2.2rem; line-height: 1.2; margin: 2rem 0 1rem; }
+  h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; color: var(--cyan); }
+  p { color: var(--text); margin-bottom: 0.75rem; }
+  .hero-sub { color: var(--muted); font-size: 1.1rem; max-width: 600px; margin-bottom: 2rem; }
+  .section-intro { color: var(--muted); margin-bottom: 1rem; }
+
+  .article-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 2rem; }
+  .article-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 28px;
+    text-decoration: none;
+    display: block;
+    transition: border-color 0.2s, transform 0.15s;
+  }
+  .article-card:hover {
+    border-color: rgba(34,211,238,0.3);
+    transform: translateY(-2px);
+  }
+  .article-card h3 {
+    font-size: 1.25rem;
+    color: var(--text);
+    margin-bottom: 8px;
+  }
+  .article-card p {
+    color: var(--muted);
+    font-size: 0.95rem;
+    margin-bottom: 12px;
+  }
+  .article-tag {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 3px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    color: var(--cyan);
+    background: rgba(34,211,238,0.06);
+    margin-right: 6px;
+  }
+  .cta-section {
+    margin-top: 3rem;
+    padding: 2rem;
+    background: var(--bg-raised);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    text-align: center;
+  }
+  .cta-section p { color: var(--muted); margin-bottom: 1rem; }
+  .cta-install {
+    display: inline-block;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px 20px;
+    font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
+    font-size: 0.95rem;
+    color: var(--cyan);
+  }
+  @media (max-width: 700px) {
+    h1 { font-size: 1.6rem; }
+    .container { padding: 1.5rem 1rem 3rem; }
+  }
+</style>
+</head>
+<body>
+
+<nav>
+  <a href="/" class="brand">👍👎 ThumbGate</a>
+  <a href="/guide">Setup Guide</a>
+  <a href="/learn">Learn</a>
+  <a href="/dashboard">Dashboard</a>
+  <a href="https://github.com/IgorGanapolsky/ThumbGate" target="_blank" rel="noopener">GitHub</a>
+</nav>
+
+<div class="container">
+  <h1>Learn: AI Agent Safety</h1>
+  <p class="hero-sub">Practical guides for developers who use AI coding agents and want them to stop repeating the same mistakes. Every article ends with something you can ship today.</p>
+
+  <div class="article-grid">
+    <a href="/learn/stop-ai-agent-force-push" class="article-card">
+      <h3>How to Stop AI Agents From Force-Pushing to Main</h3>
+      <p>Your agent just ran git push --force on main. Again. Here is how to make that physically impossible with a pre-action gate that takes two minutes to set up.</p>
+      <span class="article-tag">Claude Code</span>
+      <span class="article-tag">Git Safety</span>
+      <span class="article-tag">Pre-Action Gates</span>
+    </a>
+
+    <a href="/learn/vibe-coding-safety-net" class="article-card">
+      <h3>The Vibe Coding Safety Net You Are Missing</h3>
+      <p>Vibe coding is fast until your agent deletes a production table or rewrites a file you did not ask it to touch. This guide shows how to add guardrails without slowing down.</p>
+      <span class="article-tag">Vibe Coding</span>
+      <span class="article-tag">Guardrails</span>
+      <span class="article-tag">MCP</span>
+    </a>
+
+    <a href="/learn/mcp-pre-action-gates-explained" class="article-card">
+      <h3>MCP Pre-Action Gates Explained</h3>
+      <p>What pre-action gates are, how they differ from prompt rules, and why enforcement beats instructions. A technical deep-dive for developers building on the Model Context Protocol.</p>
+      <span class="article-tag">MCP</span>
+      <span class="article-tag">PreToolUse</span>
+      <span class="article-tag">Technical</span>
+    </a>
+    <a href="/learn/agent-harness-pattern" class="article-card">
+      <h3>The Agent Harness Pattern: Why Your AI Needs a Seatbelt</h3>
+      <p>Tsinghua researchers formalized agent harnesses as first-class objects with contracts, verification gates, and durable state. ThumbGate implements this pattern in production today.</p>
+      <span class="article-tag">Research</span>
+      <span class="article-tag">Agent Harness</span>
+      <span class="article-tag">NLAH</span>
+    </a>
+
+    <a href="/learn/ai-agent-persistent-memory" class="article-card">
+      <h3>How to Give Your AI Coding Agent Persistent Memory Across Sessions</h3>
+      <p>Your agent forgets everything when the session ends. Here is how to give Claude Code, Cursor, Codex, and Gemini memory that survives restarts — without retraining.</p>
+      <span class="article-tag">Memory</span>
+      <span class="article-tag">SQLite+FTS5</span>
+      <span class="article-tag">Session Persistence</span>
+    </a>
+  </div>
+
+  <h2>Popular buyer questions</h2>
+  <p class="section-intro">These are the high-intent guides for buyers who already know the pain and want to understand where ThumbGate fits fast.</p>
+  <div class="article-grid">
+    <a href="/guides/stop-repeated-ai-agent-mistakes" class="article-card">
+      <h3>How to Stop AI Coding Agents From Repeating Mistakes</h3>
+      <p>The fastest explanation of why memory alone is not enough when your agent keeps making the same bad move twice.</p>
+      <span class="article-tag">Repeat Failures</span>
+      <span class="article-tag">Guardrails</span>
+      <span class="article-tag">Buyer Guide</span>
+    </a>
+
+    <a href="/guides/cursor-agent-guardrails" class="article-card">
+      <h3>Cursor Guardrails That Block Repeated Mistakes</h3>
+      <p>For Cursor users who need to keep speed while adding a runtime enforcement layer that does more than prompt politely.</p>
+      <span class="article-tag">Cursor</span>
+      <span class="article-tag">Guardrails</span>
+      <span class="article-tag">Integration</span>
+    </a>
+
+    <a href="/guides/codex-cli-guardrails" class="article-card">
+      <h3>Codex CLI Guardrails That Actually Enforce</h3>
+      <p>Why operators looking for Codex CLI guardrails are really looking for a feedback-to-enforcement loop they can trust.</p>
+      <span class="article-tag">Codex</span>
+      <span class="article-tag">CLI</span>
+      <span class="article-tag">Reliability</span>
+    </a>
+
+    <a href="/guides/gemini-cli-feedback-memory" class="article-card">
+      <h3>Gemini CLI Feedback Memory That Leads to Enforcement</h3>
+      <p>A memory-first buyer path for Gemini CLI users who will eventually care about gates, proof, and operational control.</p>
+      <span class="article-tag">Gemini</span>
+      <span class="article-tag">Memory</span>
+      <span class="article-tag">Enforcement</span>
+    </a>
+  </div>
+
+  <div class="cta-section">
+    <h2 style="color:var(--text);font-size:1.3rem;margin:0 0 8px;">Ready to try it?</h2>
+    <p>One command. Works with Claude Code, Cursor, Codex, Gemini, Amp, and any MCP agent.</p>
+    <div class="cta-install">$ npx thumbgate init</div>
+  </div>
+</div>
+
+</body>
+</html>