thumbgate 1.5.8 → 1.7.0

package/public/dashboard.html

@@ -6,6 +6,8 @@
 <title>ThumbGate Dashboard — Gate Stats, Approval Rate, Prevention Impact</title>
 <meta name="description" content="Live dashboard showing gate enforcement stats, approval rate trends, prevention impact, and system health for ThumbGate pre-action gates.">
 <link rel="canonical" href="https://thumbgate-production.up.railway.app/dashboard">
+<link rel="icon" type="image/png" href="/thumbgate-icon.png">
+<link rel="apple-touch-icon" href="/assets/brand/thumbgate-mark.svg">
 <meta name="robots" content="noindex">
 <!-- Privacy-friendly analytics by Plausible -->
 <script defer data-domain="thumbgate-production.up.railway.app" src="https://plausible.io/js/script.js"></script>
@@ -26,7 +28,8 @@
   /* NAV */
   nav { position: sticky; top: 0; z-index: 50; background: rgba(10,10,11,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 14px 0; }
   nav .container { display: flex; justify-content: space-between; align-items: center; }
-  .nav-logo { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; }
+  .nav-logo { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
+  .nav-logo .logo-mark { width: 28px; height: 28px; display: block; }
   .nav-links { display: flex; gap: 16px; align-items: center; }
   .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; }
   .nav-links a:hover { color: var(--text); }
@@ -168,7 +171,7 @@
 
 <nav>
   <div class="container">
-    <a href="/" class="nav-logo">👍👎 ThumbGate Dashboard</a>
+    <a href="/" class="nav-logo"><img src="/assets/brand/thumbgate-mark-inline.svg" alt="ThumbGate" class="logo-mark" width="28" height="28"><span class="logo-text">ThumbGate Dashboard</span></a>
     <div class="nav-links">
       <a href="/dashboard" class="active" style="color:var(--cyan);">Dashboard</a>
       <a href="/lessons">Lessons</a>
@@ -219,6 +222,32 @@
     <a class="stat-card" data-card-action="gates" onclick="selectCard(this,'gates');return false;" href="#" style="cursor:pointer;text-decoration:none;color:inherit;display:block;" title="Click to view active gates"><div class="stat-label">Active Gates</div><div class="stat-value cyan" id="statGates">—</div></a>
   </div>
 
+  <div class="panel" id="reviewDeltaPanel" style="margin-bottom:20px;">
+    <div style="display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;">
+      <div>
+        <h3 style="margin:0 0 8px 0;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);">🆕 Since Last Review</h3>
+        <p class="template-summary" id="reviewDeltaHeadline" style="margin-bottom:0;">No review checkpoint yet. Mark the current dashboard as reviewed to start seeing only new changes.</p>
+      </div>
+      <button class="btn-outline" id="reviewCheckpointBtn" onclick="markReviewed()">Mark Current Dashboard Reviewed</button>
+    </div>
+    <div class="generated-grid" id="reviewDeltaStats" style="margin-top:16px;">
+      <div class="team-card"><div class="team-kicker">New feedback</div><div class="team-value" id="reviewDeltaFeedback">0</div><div class="team-note">events since checkpoint</div></div>
+      <div class="team-card"><div class="team-kicker">New negatives</div><div class="team-value" id="reviewDeltaNegative">0</div><div class="team-note">fresh review risk</div></div>
+      <div class="team-card"><div class="team-kicker">New lessons</div><div class="team-value" id="reviewDeltaLessons">0</div><div class="team-note">promoted since checkpoint</div></div>
+      <div class="team-card"><div class="team-kicker">New blocks</div><div class="team-value" id="reviewDeltaBlocks">0</div><div class="team-note">gate hits since checkpoint</div></div>
+    </div>
+    <div class="team-columns" style="margin-top:16px;">
+      <div class="panel">
+        <h3>Checkpoint</h3>
+        <div id="reviewDeltaCheckpoint" class="template-summary" style="margin-bottom:0;">Waiting for dashboard data...</div>
+      </div>
+      <div class="panel">
+        <h3>Newest items</h3>
+        <div id="reviewDeltaLatest" class="template-summary" style="margin-bottom:0;">No new review activity yet.</div>
+      </div>
+    </div>
+  </div>
+
   <!-- TABS -->
   <div class="tabs">
     <div class="tab active" onclick="switchTab('search')">🔍 Search Memories</div>
@@ -706,8 +735,70 @@ async function loadDashboardData() {
   } catch (e) { /* insights degrade gracefully */ }
 }
 
+function formatReviewTimestamp(value) {
+  if (!value) return 'Not reviewed yet';
+  var date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  return date.toLocaleString();
+}
+
+function renderReviewDelta(reviewDelta) {
+  var summary = reviewDelta || {};
+  var button = document.getElementById('reviewCheckpointBtn');
+  document.getElementById('reviewDeltaHeadline').textContent = summary.headline || 'No review checkpoint yet. Mark the current dashboard as reviewed to start seeing only new changes.';
+  document.getElementById('reviewDeltaFeedback').textContent = String(summary.feedbackAdded || 0);
+  document.getElementById('reviewDeltaNegative').textContent = String(summary.negativeAdded || 0);
+  document.getElementById('reviewDeltaLessons').textContent = String(summary.lessonsAdded || 0);
+  document.getElementById('reviewDeltaBlocks').textContent = String(summary.blocksAdded || 0);
+
+  var checkpointParts = [];
+  checkpointParts.push('<div><strong>Reviewed:</strong> ' + escHtml(formatReviewTimestamp(summary.reviewedAt)) + '</div>');
+  if (summary.previousHead || summary.currentHead) {
+    checkpointParts.push('<div style="margin-top:8px;"><strong>Git:</strong> ' + escHtml(summary.previousHead ? summary.previousHead.slice(0, 8) : 'none') + ' → ' + escHtml(summary.currentHead ? summary.currentHead.slice(0, 8) : 'none') + '</div>');
+  }
+  document.getElementById('reviewDeltaCheckpoint').innerHTML = checkpointParts.join('');
+
+  var latestBits = [];
+  if (summary.latestFeedback) {
+    latestBits.push('<div><strong>Feedback:</strong> ' + escHtml(summary.latestFeedback.title || 'Feedback event') + ' <span style="color:var(--text-muted);">(' + escHtml(formatReviewTimestamp(summary.latestFeedback.timestamp)) + ')</span></div>');
+  }
+  if (summary.latestLesson) {
+    latestBits.push('<div style="margin-top:8px;"><strong>Lesson:</strong> ' + escHtml(summary.latestLesson.title || 'Lesson event') + ' <span style="color:var(--text-muted);">(' + escHtml(formatReviewTimestamp(summary.latestLesson.timestamp)) + ')</span></div>');
+  }
+  document.getElementById('reviewDeltaLatest').innerHTML = latestBits.length
+    ? latestBits.join('')
+    : 'No new review activity yet.';
+
+  if (button) {
+    button.textContent = summary.hasBaseline ? 'Reset Review Baseline to Current State' : 'Mark Current Dashboard Reviewed';
+  }
+}
+
+async function markReviewed() {
+  var button = document.getElementById('reviewCheckpointBtn');
+  var previousLabel = button.textContent;
+  button.disabled = true;
+  button.textContent = 'Saving...';
+  try {
+    var res = await fetch('/v1/dashboard/review-state', {
+      method: 'POST',
+      headers: getHeaders()
+    });
+    if (!res.ok) throw new Error('Failed to save review checkpoint');
+    var body = await res.json();
+    renderReviewDelta(body.reviewDelta || {});
+  } catch (e) {
+    document.getElementById('reviewDeltaHeadline').textContent = e && e.message ? e.message : 'Failed to save review checkpoint';
+  } finally {
+    button.disabled = false;
+    if (button.textContent === 'Saving...') button.textContent = previousLabel;
+  }
+}
+
 function renderDashboardData(data) {
   dashboardSnapshot = data;
+  var reviewButton = document.getElementById('reviewCheckpointBtn');
+  if (reviewButton) reviewButton.disabled = false;
   const gates = data.gates || data.activeGates || [];
   const gateStats = data.gateStats || {};
   document.getElementById('statGates').textContent = gates.length || gateStats.totalGates || 0;
@@ -723,6 +814,7 @@ function renderDashboardData(data) {
   }
 
   renderTeam(data.team || {}, data.analytics || {});
+  renderReviewDelta(data.reviewDelta || {});
   renderPredictive(data.predictive || {});
   renderSettingsStatus(data.settingsStatus || {});
   renderTemplates(data.templateLibrary || {});
@@ -1058,6 +1150,44 @@ function loadDemo() {
   document.getElementById('statNegative').textContent = '260';
   document.getElementById('statGates').textContent = '21';
   setSelectedCard('all');
+  // Demo: 260 negative-feedback events have produced ~180 actual gate blocks
+  // and ~85 bot deflections on /checkout/pro. Kept as illustrative defaults
+  // so the savings card never reads "0" in demo mode.
+  var demoSavings = TG_TOKEN_SAVINGS.compute(180, 85);
+  var tEl = document.getElementById('statTokensSaved');
+  var dEl = document.getElementById('statDollarsSaved');
+  if (tEl) tEl.textContent = demoSavings.tokensSavedDisplay;
+  if (dEl) dEl.textContent = '≈ ' + demoSavings.dollarsSavedDisplay + ' saved';
+  renderTopBlockedGates([
+    { name: 'gate:no-force-push', blocked: 47 },
+    { name: 'gate:no-drop-prod', blocked: 31 },
+    { name: 'gate:no-hallucinated-import', blocked: 28 },
+    { name: 'gate:no-secret-commit', blocked: 19 },
+    { name: 'gate:require-tests-before-done', blocked: 14 },
+    { name: 'gate:no-figma-claim-without-check', blocked: 9 },
+  ]);
+  renderReviewDelta({
+    hasBaseline: true,
+    reviewedAt: '2025-06-18T09:00:00Z',
+    previousHead: '9f1a2c3d',
+    currentHead: '5c7e9b1a',
+    feedbackAdded: 6,
+    negativeAdded: 4,
+    lessonsAdded: 2,
+    blocksAdded: 5,
+    warnsAdded: 1,
+    headline: 'Since your last review: 6 feedback events · 4 negative · 2 lessons · 5 gate blocks.',
+    latestFeedback: {
+      title: 'Claimed fix worked without running tests',
+      timestamp: '2025-06-22T10:20:00Z'
+    },
+    latestLesson: {
+      title: 'MISTAKE: Claimed Figma compliance without visual verification',
+      timestamp: '2025-06-21T08:10:00Z'
+    }
+  });
+  document.getElementById('reviewCheckpointBtn').disabled = true;
+  document.getElementById('reviewCheckpointBtn').textContent = 'Connect to save your own review checkpoint';
   // Sample memories — realistic scenarios from real agent-driven development
   var demoResults = [
     { signal: 'down', title: 'Claimed fix worked without running tests', context: 'Agent announced "fixed and pushed" but never ran the test suite. CI failed on 3 tests. Gate now requires test evidence before any completion claim.', tags: ['anti-lying', 'verification-gap', 'ci', 'trust-breach'], timestamp: '2025-06-22T10:20:00Z' },
@@ -1079,19 +1209,17 @@ function loadDemo() {
     { signal: 'up', title: 'DPO export caught systematic failure pattern', context: 'Exported 47 preference pairs revealing that 80% of negative feedback involved claiming work was done without verification. Led to a new mandatory evidence gate.', tags: ['dpo-export', 'evidence-based', 'prevention', 'metric:ROI'], timestamp: '2025-06-05T10:15:00Z' }
   ];
   isDemo = true;
-  demoData = demoResults.slice(0, 3);
+  demoData = demoResults;
   var teaserHtml = demoData.map(renderResult).join('');
-  var upgradeWall = '<div style="position:relative;margin-top:8px;">' +
-    '<div style="filter:blur(4px);pointer-events:none;opacity:0.4;">' + demoResults.slice(3, 6).map(renderResult).join('') + '</div>' +
-    '<div style="position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;">' +
-    '<div style="text-align:center;background:rgba(10,10,15,0.92);border:1px solid #333;border-radius:12px;padding:28px 36px;">' +
-    '<div style="font-size:20px;font-weight:700;color:#fff;margin-bottom:8px;">Unlock your full dashboard</div>' +
-    '<div style="color:#aaa;margin-bottom:16px;">Pro shows your real feedback, gates, and lessons — not sample data.</div>' +
+  var upgradeBanner = '<div style="margin-bottom:12px;padding:12px 16px;background:linear-gradient(90deg,rgba(184,92,45,0.14),rgba(184,92,45,0.06));border:1px solid rgba(184,92,45,0.35);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">' +
+    '<div style="color:#ddd;font-size:14px;">' +
+    '<span style="color:#ffb98a;font-weight:700;">Live demo data below.</span> ' +
+    'Point ThumbGate at your own feedback to see <em>your</em> gates, lessons, and team signals — no signup required.' +
+    '</div>' +
     '<a href="https://buy.stripe.com/7sYcN5bmIf5IcSd8qf3sI0a" target="_blank" rel="noopener" ' +
-    'style="display:inline-block;background:#b85c2d;color:#fff;padding:10px 24px;border-radius:8px;text-decoration:none;font-weight:700;">Start 7-day free trial</a>' +
-    '<div style="color:#666;font-size:12px;margin-top:10px;">npx thumbgate pro --activate --key=YOUR_KEY</div>' +
-    '</div></div></div>';
-  document.getElementById('searchResults').innerHTML = teaserHtml + upgradeWall;
+    'style="flex:none;background:#b85c2d;color:#fff;padding:8px 18px;border-radius:8px;text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap;">Go Pro — $19/mo</a>' +
+    '</div>';
+  document.getElementById('searchResults').innerHTML = upgradeBanner + teaserHtml;
   // Sample gates
   var demoGates = [
     { name: 'no-force-push', pattern: 'Block git push --force to main or master branches', action: 'block' },

package/public/index.html

@@ -19,12 +19,21 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 __GOOGLE_SITE_VERIFICATION_META__
+<link rel="icon" type="image/png" href="/thumbgate-icon.png">
+<link rel="alternate icon" type="image/svg+xml" href="/assets/brand/thumbgate-mark.svg">
+<link rel="apple-touch-icon" href="/assets/brand/thumbgate-mark.svg">
+<meta property="og:image" content="/og.png">
 <title>ThumbGate — Stop paying for the same AI mistake twice</title>
 <meta name="description" content="Stop paying for the same AI mistake twice. ThumbGate turns 👍 thumbs up and 👎 thumbs down feedback into history-aware lessons and Pre-Action Gates that block repeat AI agent mistakes before they reach the model — self-improving agent governance with shared lessons and org visibility for Claude Code, Cursor, Codex, Gemini, Amp, and OpenCode.">
 <meta property="og:title" content="ThumbGate — Stop paying for the same AI mistake twice">
 <meta property="og:description" content="Frontier LLMs are expensive and repeat mistakes cost real money. ThumbGate blocks known-bad AI agent actions before they hit the model — zero tokens spent on retries, hallucinations, or repeat commands. Fix it once, your bill never sees it again.">
 <meta property="og:type" content="website">
+<meta property="og:image" content="https://thumbgate-production.up.railway.app/og.png">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="https://thumbgate-production.up.railway.app/og.png">
 <meta name="keywords" content="ThumbGate, thumbgate, 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 gates, agent governance, Claude Code, Cursor, Codex, Gemini, Amp, OpenCode, workflow hardening, context engineering, AI authenticity, brand authenticity AI">
+<link rel="icon" type="image/png" href="/thumbgate-icon.png">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
 <!-- Privacy-friendly analytics by Plausible -->
 <script defer data-domain="thumbgate-production.up.railway.app" src="https://plausible.io/js/script.js"></script>
@@ -266,7 +275,9 @@ __GA_BOOTSTRAP__
   /* NAV */
   nav { position: sticky; top: 0; z-index: 50; background: rgba(10,10,11,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 14px 0; }
   nav .container { display: flex; justify-content: space-between; align-items: center; }
-  .nav-logo { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
+  .nav-logo { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
+  .nav-logo .logo-mark { width: 28px; height: 28px; display: block; }
+  .nav-logo .logo-text { color: var(--text); }
   .nav-logo span { color: var(--cyan); }
   .nav-links { display: flex; gap: 24px; align-items: center; }
   .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; transition: color 0.15s; }
@@ -310,13 +321,17 @@ __GA_BOOTSTRAP__
   .first-gate-step { border: 1px solid var(--border); border-radius: 10px; background: rgba(10,10,11,0.62); padding: 14px; }
   .first-gate-step strong { display: block; color: var(--cyan); margin-bottom: 6px; }
   .first-gate-step p { font-size: 13px; line-height: 1.5; margin: 0; }
-  .first-gate-example { font-family: var(--mono); color: var(--green); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.24); border-radius: 8px; padding: 10px 12px; font-size: 12px; margin-top: 12px; overflow-x: auto; }
+  .first-gate-examples { display: grid; gap: 8px; margin-top: 12px; }
+  .first-gate-example { font-family: var(--mono); border-radius: 8px; padding: 10px 12px; font-size: 12px; overflow-x: auto; line-height: 1.55; }
+  .first-gate-example.signal-good { color: var(--green); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.24); }
+  .first-gate-example.signal-fix { color: #fda4af; background: rgba(251,113,133,0.08); border: 1px solid rgba(251,113,133,0.24); }
 
   /* SOCIAL PROOF BAR */
-  .proof-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; font-size: 13px; color: var(--text-muted); padding: 0 0 8px; }
-  .proof-bar a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
-  .proof-bar a:hover { color: var(--cyan); }
-  .proof-bar .dot { width: 4px; height: 4px; background: var(--border); border-radius: 50%; display: inline-block; }
+  .proof-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text-muted); padding: 4px 0 12px; max-width: 1040px; margin: 0 auto; }
+  .proof-bar a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; border: 1px solid rgba(34,211,238,0.14); border-radius: 8px; background: rgba(17,17,19,0.72); color: var(--text-muted); text-decoration: none; line-height: 1.25; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
+  .proof-bar a:hover, .proof-bar a:focus-visible { color: var(--cyan); border-color: rgba(34,211,238,0.42); background: rgba(34,211,238,0.08); outline: none; }
+  .proof-bar a:focus-visible { box-shadow: 0 0 0 3px rgba(34,211,238,0.18); }
+  .proof-bar .dot { display: none; }
 
   /* COMPATIBILITY */
   .compatibility { padding: 0 0 80px; }
@@ -368,6 +383,20 @@ __GA_BOOTSTRAP__
   }
   .seo-card .card-arrow { font-size: 13px; color: var(--cyan); margin-top: 12px; font-weight: 500; }
 
+  /* AUTORESEARCH PACK */
+  .autoresearch-pack { padding: 0 0 80px; }
+  .autoresearch-panel { border: 1px solid rgba(34,211,238,0.28); border-radius: 8px; background: linear-gradient(180deg, rgba(17,17,19,0.98) 0%, rgba(10,18,20,0.98) 100%); padding: 28px; }
+  .autoresearch-panel h2 { font-size: 30px; line-height: 1.18; margin-bottom: 12px; }
+  .autoresearch-panel > p { color: var(--text-muted); line-height: 1.65; max-width: 860px; margin-bottom: 22px; }
+  .autoresearch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
+  .autoresearch-card { border: 1px solid var(--border); border-radius: 8px; background: rgba(10,10,11,0.62); padding: 18px; }
+  .autoresearch-card h3 { font-size: 16px; margin-bottom: 8px; }
+  .autoresearch-card p { color: var(--text-muted); font-size: 14px; line-height: 1.55; }
+  .autoresearch-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
+  .autoresearch-cta a { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 700; }
+  .autoresearch-cta .primary { background: var(--cyan); color: #041016; }
+  .autoresearch-cta .secondary { border: 1px solid var(--border); color: var(--text); }
+
   /* HOW IT WORKS */
   .how-it-works { padding: 80px 0; }
   .section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); font-weight: 600; margin-bottom: 12px; text-align: center; }
@@ -470,7 +499,7 @@ __GA_BOOTSTRAP__
   #claude-code-section:hover, #thumbgate-gpt:hover { opacity: 1; }
   
   /* Simplify proof bar — make it less overwhelming */
-  .proof-bar { font-size: 11px; gap: 16px; opacity: 0.8; }
+  .proof-bar { font-size: 13px; gap: 10px; opacity: 1; }
   
   /* RESPONSIVE */
   @media (max-width: 700px) {
@@ -479,13 +508,15 @@ __GA_BOOTSTRAP__
     .first-gate-steps { grid-template-columns: 1fr; }
     .gpt-steps { grid-template-columns: 1fr; }
     .seo-grid { grid-template-columns: 1fr; }
+    .autoresearch-grid { grid-template-columns: 1fr; }
     .pricing-grid { grid-template-columns: 1fr; }
     .team-form { grid-template-columns: 1fr; }
     .hero { padding: 72px 0 56px; }
     .hero-actions { flex-direction: column; }
     .hero-actions a { width: 100%; }
     .nav-links a:not(.nav-cta) { display: none; }
-    .proof-bar { gap: 16px; }
+    .proof-bar { gap: 8px; justify-content: flex-start; }
+    .proof-bar a { width: 100%; min-height: 42px; white-space: normal; }
     .proof-bar .dot { display: none; }
   }
 </style>
@@ -505,10 +536,11 @@ __GA_BOOTSTRAP__
 <!-- NAV -->
 <nav>
   <div class="container">
-    <a href="#" class="nav-logo"><span>👍👎</span> ThumbGate</a>
+    <a href="#" class="nav-logo"><img src="/assets/brand/thumbgate-mark-inline.svg" alt="ThumbGate" class="logo-mark" width="28" height="28"><span class="logo-text">ThumbGate</span></a>
     <div class="nav-links">
       <a href="#how-it-works">How It Works</a>
       <a href="#pricing">Pricing</a>
+      <a href="/guides/autoresearch-agent-safety">Autoresearch</a>
       <a href="#faq">FAQ</a>
       <a href="https://github.com/IgorGanapolsky/ThumbGate" target="_blank" rel="noopener">GitHub</a>
       <a href="#compatibility" style="display:none;">Compatibility</a>
@@ -603,7 +635,7 @@ __GA_BOOTSTRAP__
       <div class="hero-secondary-ctas" style="display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;opacity:0.7;">
         <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="/codex-plugin?utm_source=website&utm_medium=hero_cta&utm_campaign=codex_plugin&cta_id=hero_codex_plugin&cta_placement=hero" class="btn-install-link" 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>
@@ -628,44 +660,36 @@ __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>, <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>
+          <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="/codex-plugin" 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>
-          <p>When your agent makes a mistake, give it a <code>thumbs down</code>. ThumbGate captures the context and distills a lesson from up to 8 prior entries.</p>
+          <p>Give <code>thumbs up</code> when the agent follows your standards, or <code>thumbs down</code> when it misses. ThumbGate captures the context and distills a lesson from up to 8 prior entries.</p>
         </div>
         <div class="first-gate-step">
           <strong>3. The gate blocks the repeat</strong>
           <p>Next time the agent tries the same mistake, the PreToolUse hook fires and physically blocks it. Upgrade after one real blocked repeat when you need the dashboard and exports.</p>
         </div>
       </div>
-      <div class="first-gate-example">thumbs down: the answer ignored my request for exact files and tests; next time include file paths, commands, and verification evidence.</div>
+      <div class="first-gate-examples" aria-label="ThumbGate feedback examples">
+        <div class="first-gate-example signal-good">thumbs up: this review named exact files, commands, and tests; repeat this evidence-first format.</div>
+        <div class="first-gate-example signal-fix">thumbs down: the answer ignored my request for exact files and tests; next time include file paths, commands, and verification evidence.</div>
+      </div>
     </div>
-    <div class="proof-bar">
+    <nav class="proof-bar" aria-label="ThumbGate install and proof links">
       <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-claude-desktop.mcpb" target="_blank" rel="noopener" style="color:var(--cyan);font-weight:600;">Claude Extension →</a>
-      <span class="dot"></span>
       <a href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/.claude-plugin/README.md" target="_blank" rel="noopener">Claude marketplace install →</a>
-      <span class="dot"></span>
       <a href="/guide" rel="noopener">CLI setup guide →</a>
-      <span class="dot"></span>
-      <a href="https://github.com/IgorGanapolsky/ThumbGate/releases/latest/download/thumbgate-codex-plugin.zip" target="_blank" rel="noopener">Codex plugin download →</a>
-      <span class="dot"></span>
+      <a href="/codex-plugin?utm_source=website&utm_medium=proof_bar&utm_campaign=codex_plugin&cta_id=proof_bar_codex_plugin&cta_placement=proof_bar">Codex plugin setup →</a>
       <a href="/go/gpt?utm_source=website&utm_medium=proof_bar&utm_campaign=chatgpt_gpt&cta_id=proof_bar_open_gpt&cta_placement=proof_bar" target="_blank" rel="noopener">ThumbGate GPT →</a>
-      <span class="dot"></span>
       <a href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/docs/VERIFICATION_EVIDENCE.md" target="_blank" rel="noopener">Verification evidence →</a>
-      <span class="dot"></span>
       <a href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/docs/THUMBGATE_BENCH.md" target="_blank" rel="noopener">ThumbGate Bench →</a>
-      <span class="dot"></span>
       <a href="https://github.com/IgorGanapolsky/ThumbGate/actions" target="_blank" rel="noopener">Proof-backed CI →</a>
-      <span class="dot"></span>
       <a href="https://github.com/IgorGanapolsky/ThumbGate/actions" target="_blank" rel="noopener">CI and proof lanes →</a>
-      <span class="dot"></span>
       <a href="https://github.com/IgorGanapolsky/ThumbGate/blob/main/docs/RELEASE_CONFIDENCE.md" target="_blank" rel="noopener">Release confidence →</a>
-      <span class="dot"></span>
       <a href="https://www.producthunt.com/products/thumbgate" target="_blank" rel="noopener">Product Hunt →</a>
-      <span class="dot"></span>
       <a href="#compatibility">Claude Code · Cursor · Codex · Gemini · Amp · OpenCode</a>
-    </div>
+    </nav>
   </div>
 </section>
 
@@ -793,10 +817,10 @@ __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 gates, feedback memory, and enforcement out of the box.</p>
         <div class="card-arrow">Open the setup guide →</div>
       </a>
-      <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'})">
+      <a class="compat-card" href="/codex-plugin?utm_source=website&utm_medium=compatibility&utm_campaign=codex_plugin&cta_id=compat_codex_plugin&cta_placement=compatibility" rel="noopener" onclick="if(typeof posthog!=='undefined')posthog.capture('compat_codex_plugin_click',{cta:'open_codex_plugin_page'})">
         <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. <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>
+        <p>Codex gets a standalone ThumbGate plugin bundle, a repo-local plugin profile, and the same auto-updating MCP launcher. The runtime resolves <code>thumbgate@latest</code> when Codex starts, so npm fixes reach active installs. The install page includes the zip, MCP config, and verification path in one place.</p>
+        <div class="card-arrow">Open the Codex install page →</div>
       </a>
       <a class="compat-card" href="/guides/cursor-prevent-repeated-mistakes.html" rel="noopener">
         <h3>🎯 Cursor plugin</h3>
@@ -810,7 +834,7 @@ __GA_BOOTSTRAP__
       </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>
+        <p>ThumbGate is listed on <code>mcp.so</code> so MCP-compatible clients can verify the package, copy the npx config, and confirm they are installing the real Pre-Action Gates server.</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">
@@ -829,7 +853,7 @@ __GA_BOOTSTRAP__
     <div class="agent-grid">
       <div class="agent-card">
         <h3>🔍 Live Dashboard Demo</h3>
-        <p>Search lessons, inspect gates, and see exactly why risky actions were blocked. No signup or install required.</p>
+        <p>Search lessons, inspect gates, mark a review checkpoint, and see only what changed since the last pass. No signup or install required.</p>
         <a href="/dashboard" style="display:inline-block;margin-top:12px;color:var(--cyan);font-weight:600;text-decoration:underline;">Open Dashboard Demo →</a>
       </div>
       <div class="agent-card">
@@ -909,6 +933,40 @@ __GA_BOOTSTRAP__
         <p>Why Gemini CLI buyers start with memory and convert when they see how memory becomes real pre-action gates.</p>
         <div class="card-arrow">Read the Gemini guide →</div>
       </a>
+      <a class="seo-card" href="/guides/autoresearch-agent-safety">
+        <div class="seo-kicker">Autoresearch</div>
+        <h3>Autoresearch Safety for Self-Improving Agents</h3>
+        <p>Why benchmark-search loops need gates for holdout tests, proof trails, reward hacking, and unsafe promotions.</p>
+        <div class="card-arrow">Read the Autoresearch guide →</div>
+      </a>
+    </div>
+  </div>
+</section>
+
+<section class="autoresearch-pack" id="autoresearch-pack">
+  <div class="container">
+    <div class="autoresearch-panel">
+      <div class="section-label" style="text-align:left;">Autoresearch Safety Pack</div>
+      <h2>Stop self-improving coding loops from hacking the benchmark.</h2>
+      <p>Autoresearch loops run experiments, inspect metrics, and accept better variants. ThumbGate gives those loops a Reliability Gateway: Pre-Action Gates for skipped holdout tests, fake proof, reward hacking, unsafe edits, and promotion without verification evidence.</p>
+      <div class="autoresearch-grid">
+        <div class="autoresearch-card">
+          <h3>Guard the metric</h3>
+          <p>Require primary and holdout checks before an agent can call a variant better. Block cherry-picked runs and missing baselines.</p>
+        </div>
+        <div class="autoresearch-card">
+          <h3>Preserve proof trails</h3>
+          <p>Promotion needs commands, logs, changed files, and verification evidence so the win survives review instead of becoming a vague claim.</p>
+        </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 Team gates for shared workflows.</p>
+        </div>
+      </div>
+      <div class="autoresearch-cta">
+        <a class="primary" href="/guides/autoresearch-agent-safety?utm_source=website&utm_medium=autoresearch_pack&utm_campaign=autoresearch_safety&cta_id=autoresearch_guide&cta_placement=autoresearch_pack">Read the Autoresearch guide</a>
+        <a class="secondary" href="/checkout/pro?utm_source=website&utm_medium=autoresearch_pack&utm_campaign=autoresearch_safety&cta_id=autoresearch_pro_trial&cta_placement=autoresearch_pack&plan_id=pro&landing_path=%2F">Start Pro trial</a>
+      </div>
     </div>
   </div>
 </section>
@@ -916,7 +974,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.8</div>
+    <div class="section-label">New in v1.7.0</div>
     <h2 class="section-title">Three steps to stop repeated AI failures</h2>
     <div class="steps">
       <div class="step">
@@ -1272,7 +1330,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.8</span>
+    <span class="footer-copy">© 2026 Max Smith KDP LLC · MIT License · v1.7.0</span>
   </div>
 </footer>
 

package/public/learn.html

@@ -12,6 +12,8 @@
 <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">
+<link rel="icon" type="image/png" href="/thumbgate-icon.png">
+<link rel="apple-touch-icon" href="/assets/brand/thumbgate-mark.svg">
 
 <script type="application/ld+json">
 {
@@ -105,7 +107,8 @@
   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; }
+  nav .brand { color: var(--text); font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
+  nav .brand .logo-mark { width: 28px; height: 28px; display: block; }
   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; }
@@ -175,7 +178,7 @@
 <body>
 
 <nav>
-  <a href="/" class="brand">👍👎 ThumbGate</a>
+  <a href="/" class="brand"><img src="/assets/brand/thumbgate-mark-inline.svg" alt="ThumbGate" class="logo-mark" width="28" height="28"><span class="logo-text">ThumbGate</span></a>
   <a href="/guide">Setup Guide</a>
   <a href="/learn">Learn</a>
   <a href="/dashboard">Dashboard</a>
@@ -261,6 +264,14 @@
       <span class="article-tag">Memory</span>
       <span class="article-tag">Enforcement</span>
     </a>
+
+    <a href="/guides/autoresearch-agent-safety" class="article-card">
+      <h3>Autoresearch Agent Safety for Self-Improving Coding Agents</h3>
+      <p>The control-plane story for benchmark-search loops that need holdout tests, proof trails, and reward-hacking gates.</p>
+      <span class="article-tag">Autoresearch</span>
+      <span class="article-tag">Holdout Proof</span>
+      <span class="article-tag">Gates</span>
+    </a>
   </div>
 
   <div class="cta-section">

package/public/lessons.html

@@ -4,6 +4,8 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ThumbGate — Lessons Learned</title>
+<link rel="icon" type="image/png" href="/thumbgate-icon.png">
+<link rel="apple-touch-icon" href="/assets/brand/thumbgate-mark.svg">
 <script defer data-domain="thumbgate-production.up.railway.app" src="https://plausible.io/js/script.js"></script>
 <style>
   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@@ -22,7 +24,8 @@
   /* NAV */
   nav { position: sticky; top: 0; z-index: 50; background: rgba(10,10,11,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 14px 0; }
   nav .container { display: flex; justify-content: space-between; align-items: center; }
-  .nav-logo { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; }
+  .nav-logo { font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
+  .nav-logo .logo-mark { width: 28px; height: 28px; display: block; }
   .nav-links { display: flex; gap: 16px; align-items: center; }
   .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 13px; }
   .nav-links a:hover { color: var(--text); }
@@ -185,7 +188,7 @@
 
 <nav>
   <div class="container">
-    <a href="/dashboard" class="nav-logo">👍👎 ThumbGate</a>
+    <a href="/dashboard" class="nav-logo"><img src="/assets/brand/thumbgate-mark-inline.svg" alt="ThumbGate" class="logo-mark" width="28" height="28"><span class="logo-text">ThumbGate</span></a>
     <div class="nav-links">
       <a href="/dashboard">Dashboard</a>
       <a href="/lessons" class="active">Lessons</a>

package/public/pro.html

@@ -11,6 +11,9 @@ __GOOGLE_SITE_VERIFICATION_META__
 <meta property="og:type" content="website">
 <meta property="og:url" content="__APP_ORIGIN__/pro">
 <link rel="canonical" href="__APP_ORIGIN__/pro">
+<link rel="icon" type="image/png" href="/thumbgate-icon.png">
+<link rel="apple-touch-icon" href="/assets/brand/thumbgate-mark.svg">
+<meta property="og:image" content="/og.png">
 <meta name="keywords" content="ThumbGate Pro, AI agent reliability, pre-action gates, DPO export, local dashboard, review-ready evidence, Claude Code reliability, Codex reliability, Cursor reliability">
 
 <script defer data-domain="thumbgate-production.up.railway.app" src="https://plausible.io/js/script.js"></script>
@@ -169,8 +172,12 @@ __GA_BOOTSTRAP__
     font-weight: 700;
     letter-spacing: -0.02em;
     text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
   }
 
+  .nav-logo .logo-mark { width: 28px; height: 28px; display: block; }
   .nav-logo span { color: var(--cyan); }
 
   .nav-links {
@@ -777,7 +784,7 @@ __GA_BOOTSTRAP__
 <body>
 <nav>
   <div class="container">
-    <a href="/" class="nav-logo"><span>👍👎</span> ThumbGate Pro</a>
+    <a href="/" class="nav-logo"><img src="/assets/brand/thumbgate-mark-inline.svg" alt="ThumbGate" class="logo-mark" width="28" height="28"><span class="logo-text">ThumbGate Pro</span></a>
     <div class="nav-links">
       <a href="#why-pay">Why Pro</a>
       <a href="#proof">Proof</a>