thumbgate 1.1.0 → 1.3.0

package/public/lessons.html

@@ -42,6 +42,49 @@
   .stat-value.purple { color: var(--purple); }
   .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
 
+  /* IMPROVEMENT METRICS */
+  .metrics-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; margin: 0 0 24px; }
+  .metrics-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
+  .metrics-header h2 { margin-bottom: 6px; }
+  .metrics-header p { font-size: 13px; color: var(--text-muted); max-width: 720px; }
+  .metrics-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
+  .metric-tile { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 16px; min-height: 94px; }
+  .metric-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
+  .metric-number { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
+  .metric-number.green { color: var(--green); }
+  .metric-number.red { color: var(--red); }
+  .metric-number.cyan { color: var(--cyan); }
+  .metric-number.purple { color: var(--purple); }
+  .metric-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
+  .metrics-chart-wrap { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
+  .metrics-chart-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
+  .metrics-chart-title h3 { font-size: 14px; margin: 0; }
+  .metrics-chart-title p { font-size: 12px; color: var(--text-muted); }
+  .metrics-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+  .metrics-legend span { display: inline-flex; align-items: center; gap: 6px; }
+  .metrics-legend-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
+  .metrics-legend-dot.up { background: var(--green); }
+  .metrics-legend-dot.down { background: var(--red); }
+  .metrics-legend-dot.deny { background: var(--cyan); }
+  .metrics-legend-dot.warn { background: var(--yellow); }
+  .metrics-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 8px; align-items: end; min-height: 180px; }
+  .metrics-bar { background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 8px 4px; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
+  .metrics-bar:hover { border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.04); }
+  .metrics-bar.selected { border-color: rgba(34,211,238,0.65); background: rgba(34,211,238,0.08); }
+  .metrics-bar-body { width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
+  .metrics-bar-stack { width: 100%; max-width: 28px; height: 120px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
+  .metrics-bar-stack.gate { max-width: 16px; height: 84px; }
+  .metrics-bar-empty { width: 100%; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.05); flex: 1; }
+  .metrics-segment { width: 100%; border-radius: 8px; min-height: 0; }
+  .metrics-segment.up { background: linear-gradient(180deg, rgba(74,222,128,0.95), rgba(74,222,128,0.55)); }
+  .metrics-segment.down { background: linear-gradient(180deg, rgba(248,113,113,0.95), rgba(248,113,113,0.55)); }
+  .metrics-segment.deny { background: linear-gradient(180deg, rgba(34,211,238,0.95), rgba(34,211,238,0.55)); }
+  .metrics-segment.warn { background: linear-gradient(180deg, rgba(251,191,36,0.95), rgba(251,191,36,0.55)); }
+  .metrics-bar-total { font-size: 12px; font-weight: 600; color: var(--text); }
+  .metrics-bar-subtotal { font-size: 10px; color: var(--text-muted); line-height: 1; }
+  .metrics-bar-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
+  .metrics-chart-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
+
   /* TABS */
   .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
   .tab { padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
@@ -114,6 +157,9 @@
 
   @media (max-width: 700px) {
     .stats-grid { grid-template-columns: repeat(2, 1fr); }
+    .metrics-header { flex-direction: column; }
+    .metrics-summary-grid { grid-template-columns: repeat(2, 1fr); }
+    .metrics-chart { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 12px; }
     .filter-row { flex-wrap: wrap; }
     .rule-meta { flex-direction: column; gap: 8px; }
   }
@@ -152,7 +198,7 @@
 <div class="container">
   <div style="margin:32px 0 24px;padding:24px;background:linear-gradient(135deg,rgba(167,139,250,0.08),rgba(34,211,238,0.05));border:1px solid rgba(167,139,250,0.2);border-radius:12px;">
     <h1 style="font-size:22px;font-weight:700;margin-bottom:8px;letter-spacing:-0.02em;">📚 Lessons Learned</h1>
-    <p style="font-size:14px;color:var(--text-muted);line-height:1.6;max-width:700px;">Is your AI getting smarter? See every rule auto-generated from your feedback, how many mistakes each one prevented, and which patterns keep recurring. <span style="color:var(--purple);font-weight:600;">This is the proof your feedback works.</span></p>
+    <p style="font-size:14px;color:var(--text-muted);line-height:1.6;max-width:700px;">See what ThumbGate learned from your feedback, which failure patterns keep repeating, and how many actions the gate layer actually blocked. <span style="color:var(--purple);font-weight:600;">This view separates repeated failures from recorded gate blocks so the proof stays honest.</span></p>
     <div style="display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--text-muted);">
       <span>📋 <strong style="color:var(--text);">Active Rules</strong> — what was learned</span>
       <span>📊 <strong style="color:var(--text);">Timeline</strong> — when it was learned</span>
@@ -171,9 +217,9 @@
       <div class="stat-sub">Highest severity rules</div>
     </div>
     <div class="stat-card" onclick="switchTab('timeline')">
-      <div class="stat-label">Mistakes Prevented</div>
-      <div class="stat-value green" id="statPrevented">0</div>
-      <div class="stat-sub">Gate blocks from learned rules</div>
+      <div class="stat-label">Actions Blocked</div>
+      <div class="stat-value green" id="statBlocked">0</div>
+      <div class="stat-sub">Recorded gate denies, not inferred repeats</div>
     </div>
     <div class="stat-card" onclick="switchTab('insights')">
       <div class="stat-label">Approval Trend</div>
@@ -186,6 +232,54 @@
     Loading lessons view...
   </div>
 
+  <div class="metrics-panel" id="metricsPanel">
+    <div class="metrics-header">
+      <div>
+        <h2>Improvement Over Time</h2>
+        <p id="metricsSummary">Loading defensible live metrics...</p>
+      </div>
+      <button class="filter-btn" id="metricsClearBtn" type="button" style="display:none;" onclick="clearTimelineDayFilter()">Clear day filter</button>
+    </div>
+    <div class="metrics-summary-grid" id="metricsSummaryGrid">
+      <div class="metric-tile">
+        <div class="metric-kicker">7d approval</div>
+        <div class="metric-number purple">--</div>
+        <div class="metric-note">Waiting for live feedback</div>
+      </div>
+      <div class="metric-tile">
+        <div class="metric-kicker">This week negatives</div>
+        <div class="metric-number red">--</div>
+        <div class="metric-note">Waiting for live feedback</div>
+      </div>
+      <div class="metric-tile">
+        <div class="metric-kicker">Actions blocked</div>
+        <div class="metric-number green">--</div>
+        <div class="metric-note">Recorded gate denies</div>
+      </div>
+      <div class="metric-tile">
+        <div class="metric-kicker">Repeat pressure</div>
+        <div class="metric-number cyan">--</div>
+        <div class="metric-note">Share of negatives that repeat</div>
+      </div>
+    </div>
+    <div class="metrics-chart-wrap">
+      <div class="metrics-chart-title">
+        <h3>Recent Feedback + Gate Activity</h3>
+        <p>Click any day to inspect the recorded feedback behind the trend and compare it with gate interceptions.</p>
+      </div>
+      <div class="metrics-legend">
+        <span><i class="metrics-legend-dot up"></i> Positive feedback</span>
+        <span><i class="metrics-legend-dot down"></i> Negative feedback</span>
+        <span><i class="metrics-legend-dot deny"></i> Gate deny</span>
+        <span><i class="metrics-legend-dot warn"></i> Gate warn</span>
+      </div>
+      <div class="metrics-chart" id="metricsChart">
+        <div class="loading" style="grid-column:1 / -1;">Loading chart...</div>
+      </div>
+      <div class="metrics-chart-note" id="metricsChartNote">The chart uses recorded feedback events, not inferred rule strength.</div>
+    </div>
+  </div>
+
   <div class="tabs">
     <div class="tab active" onclick="switchTab('rules')">📋 Active Rules</div>
     <div class="tab" onclick="switchTab('timeline')">📊 Feedback Timeline</div>
@@ -224,13 +318,13 @@
   <!-- TAB 3: INSIGHTS (PRO) -->
   <div class="tab-content" id="tab-insights">
     <div class="insight-card">
-      <h3>🔥 Top Recurring Mistakes This Week</h3>
+      <h3>🔥 Top Recurring Failure Patterns</h3>
       <ul class="insight-list" id="insightMistakes">
         <li><span>Loading...</span></li>
       </ul>
     </div>
     <div class="insight-card">
-      <h3>🛡️ Most Effective Rules</h3>
+      <h3>🛡️ Most Reinforced Rules</h3>
       <ul class="insight-list" id="insightEffective">
         <li><span>Loading...</span></li>
       </ul>
@@ -243,7 +337,7 @@
     </div>
     <div class="pro-badge" id="proBadge" style="display:none;">
       <h3>Unlock Full Insights</h3>
-      <p>DPO training data export, effectiveness charts, pattern clustering, and weekly auto-digests.</p>
+      <p>DPO training data export, effectiveness charts, pattern clustering, weekly auto-digests, and a learned intervention policy trained from feedback, audits, and diagnostics.</p>
       <a href="/#pricing">Get Pro — $19/mo</a>
     </div>
   </div>
@@ -255,10 +349,14 @@ var allTimeline = [];
 var isDemo = true;
 var API_KEY = '';
 var dashboardSnapshot = null;
+var activeTimelineSignal = 'all';
+var activeTimelineDay = null;
+var currentImprovementSeries = [];
 const BOOTSTRAP_API_KEY = __LESSONS_BOOTSTRAP_KEY__;
 const LOCAL_PRO_BOOTSTRAP = __LESSONS_BOOTSTRAP_ENABLED__;
 
 function escHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+function escAttr(s) { return escHtml(String(s || '')).replace(/"/g, '&quot;'); }
 
 function getHeaders() {
   return { 'Authorization': 'Bearer ' + API_KEY, 'Content-Type': 'application/json' };
@@ -284,6 +382,29 @@ function formatDate(value) {
   return ts.toLocaleString(undefined, { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit', second: '2-digit', timeZoneName: 'short' });
 }
 
+function formatShortDay(dayKey) {
+  if (!dayKey) return '';
+  var ts = new Date(dayKey + 'T00:00:00');
+  if (Number.isNaN(ts.getTime())) return dayKey;
+  return ts.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+function normalizeSignal(value) {
+  var signal = String(value || '').toLowerCase();
+  if (signal === 'up' || signal === 'positive' || signal === 'thumbs_up') return 'up';
+  return 'down';
+}
+
+function toDayKey(value) {
+  if (!value) return '';
+  var ts = new Date(value);
+  if (Number.isNaN(ts.getTime())) return '';
+  var year = ts.getFullYear();
+  var month = String(ts.getMonth() + 1).padStart(2, '0');
+  var day = String(ts.getDate()).padStart(2, '0');
+  return year + '-' + month + '-' + day;
+}
+
 function highlightCard(index) {
   document.querySelectorAll('.stat-card').forEach(function(c, i) {
     c.classList.toggle('selected', i === index);
@@ -325,12 +446,54 @@ function filterSeverity(level, el) {
 }
 
 function filterTimeline(signal, el) {
+  activeTimelineSignal = signal;
   if (el) {
     document.querySelectorAll('#tab-timeline .filter-btn').forEach(function(b) { b.classList.remove('active'); });
     el.classList.add('active');
   }
-  var filtered = signal === 'all' ? allTimeline : allTimeline.filter(function(r) { return r.signal === signal; });
-  renderTimeline(filtered);
+  renderTimeline(getFilteredTimelineItems());
+  updateMetricsSelection();
+}
+
+function getFilteredTimelineItems() {
+  return allTimeline.filter(function(item) {
+    if (activeTimelineSignal !== 'all' && item.signal !== activeTimelineSignal) return false;
+    if (activeTimelineDay && item.dayKey !== activeTimelineDay) return false;
+    return true;
+  });
+}
+
+function focusTimelineDay(dayKey) {
+  activeTimelineDay = dayKey;
+  switchTab('timeline');
+  renderTimeline(getFilteredTimelineItems());
+  updateMetricsSelection();
+}
+
+function clearTimelineDayFilter() {
+  activeTimelineDay = null;
+  renderTimeline(getFilteredTimelineItems());
+  updateMetricsSelection();
+}
+
+function updateMetricsSelection() {
+  document.querySelectorAll('.metrics-bar').forEach(function(bar) {
+    bar.classList.toggle('selected', activeTimelineDay && bar.getAttribute('data-day-key') === activeTimelineDay);
+  });
+  var clearBtn = document.getElementById('metricsClearBtn');
+  if (clearBtn) clearBtn.style.display = activeTimelineDay ? 'inline-flex' : 'none';
+  var note = document.getElementById('metricsChartNote');
+  if (!note) return;
+  if (activeTimelineDay) {
+    var selected = currentImprovementSeries.find(function(item) { return item.dayKey === activeTimelineDay; }) || null;
+    if (selected) {
+      note.textContent = 'Showing timeline events for ' + formatShortDay(activeTimelineDay) + '. Feedback: ' + selected.total + ' (' + selected.up + ' positive, ' + selected.down + ' negative). Gate audit: ' + selected.intercepted + ' intercepted (' + selected.deny + ' denies, ' + selected.warn + ' warns).';
+    } else {
+      note.textContent = 'Showing timeline events for ' + formatShortDay(activeTimelineDay) + '. Clear the day filter to return to the full timeline.';
+    }
+  } else {
+    note.textContent = 'The chart combines recorded feedback events with daily gate-audit activity.';
+  }
 }
 
 function searchRules() {
@@ -362,7 +525,7 @@ function renderRules(rules) {
       '</div>' +
       (r.context ? '<div class="rule-context">' + escHtml(r.context) + '</div>' : '') +
       '<div class="rule-meta">' +
-        '<div class="rule-meta-item">Triggered <span class="value">' + (r.occurrences || 0) + '</span> times</div>' +
+        '<div class="rule-meta-item">Seen in feedback <span class="value">' + (r.occurrences || 0) + '</span> times</div>' +
         (r.lastTriggered ? '<div class="rule-meta-item">Last: <span class="value">' + escHtml(r.lastTriggered) + '</span></div>' : '') +
       '</div>' +
       (r.tags && r.tags.length ? '<div class="rule-tags">' + r.tags.map(function(t) { return '<span class="tag">' + escHtml(t) + '</span>'; }).join('') + '</div>' : '') +
@@ -420,17 +583,154 @@ function renderInsights(data) {
 
   mistakes.innerHTML = topMistakes.length ? topMistakes.map(function(r) {
     return insightRow(r, '<span style="color:var(--red);font-weight:600">' + (r.occurrences || 0) + 'x</span>');
-  }).join('') : '<li><span style="color:var(--green)">No critical mistakes this week</span></li>';
+  }).join('') : '<li><span style="color:var(--green)">No critical repeated failures this week</span></li>';
 
   effective.innerHTML = topEffective.length ? topEffective.map(function(r) {
-    return insightRow(r, '<span class="rule-effectiveness">Triggered ' + (r.occurrences || 0) + 'x</span>');
-  }).join('') : '<li><span>No high-frequency rules yet</span></li>';
+    return insightRow(r, '<span class="rule-effectiveness">Seen ' + (r.occurrences || 0) + 'x</span>');
+  }).join('') : '<li><span>No reinforced rules yet</span></li>';
 
   stale.innerHTML = staleRules.length ? staleRules.map(function(r) {
     return insightRow(r, '<span style="color:var(--text-muted)">Archive?</span>');
   }).join('') : '<li><span style="color:var(--green)">All rules are active</span></li>';
 }
 
+function buildFeedbackSeries(items, dayCount) {
+  var series = [];
+  var today = new Date();
+  today.setHours(0, 0, 0, 0);
+  var counts = {};
+  items.forEach(function(item) {
+    if (!item.dayKey) return;
+    if (!counts[item.dayKey]) counts[item.dayKey] = { up: 0, down: 0 };
+    counts[item.dayKey][item.signal] = (counts[item.dayKey][item.signal] || 0) + 1;
+  });
+  for (var idx = dayCount - 1; idx >= 0; idx--) {
+    var day = new Date(today);
+    day.setDate(today.getDate() - idx);
+    var dayKey = toDayKey(day.toISOString());
+    var entry = counts[dayKey] || { up: 0, down: 0 };
+    series.push({
+      dayKey: dayKey,
+      label: formatShortDay(dayKey),
+      up: entry.up || 0,
+      down: entry.down || 0,
+      total: (entry.up || 0) + (entry.down || 0)
+    });
+  }
+  return series;
+}
+
+function renderImprovementMetrics(stats, data) {
+  var summary = document.getElementById('metricsSummary');
+  var grid = document.getElementById('metricsSummaryGrid');
+  var chart = document.getElementById('metricsChart');
+  if (!summary || !grid || !chart) return;
+
+  if (isDemo) {
+    summary.textContent = 'Live improvement trends appear here once local Pro is connected. The chart is based on recorded feedback, gate denials, and repeat-failure pressure.';
+    grid.innerHTML = [
+      { label: '7d approval', value: '12.5%', tone: 'purple', note: 'Demo preview only' },
+      { label: 'This week negatives', value: '4', tone: 'red', note: 'Sample trend only' },
+      { label: 'Actions blocked', value: '42', tone: 'green', note: 'Sample gate denies' },
+      { label: 'Repeat pressure', value: '38%', tone: 'cyan', note: 'Sample repeated failures' }
+    ].map(function(tile) {
+      return '<div class="metric-tile"><div class="metric-kicker">' + escHtml(tile.label) + '</div><div class="metric-number ' + escHtml(tile.tone) + '">' + escHtml(tile.value) + '</div><div class="metric-note">' + escHtml(tile.note) + '</div></div>';
+    }).join('');
+    currentImprovementSeries = [];
+    chart.innerHTML = '<div class="empty" style="grid-column:1 / -1;">Upgrade to Pro to see the clickable live feedback and gate-audit timeline.</div>';
+    updateMetricsSelection();
+    return;
+  }
+
+  var gateStats = (data && data.gateStats) || {};
+  var gateAudit = (data && data.gateAudit) || {};
+  var liveMetrics = (data && data.liveMetrics) || {};
+  var harness = (data && data.harness) || {};
+  var approvalRate = Math.round(((stats && (stats.recentRate || stats.approvalRate)) || 0) * 100);
+  var errorTrend = liveMetrics.errorTrend || {};
+  var repeatPressure = Math.round(((harness.repeatFailureRate || 0) * 100));
+  var repeatedCount = harness.repeatedFailureCount || 0;
+  var thisWeekNeg = errorTrend.thisWeek || 0;
+  var lastWeekNeg = errorTrend.lastWeek || 0;
+  var blocked = gateStats.blocked || 0;
+
+  summary.textContent = '7-day approval is ' + approvalRate + '%. This week logged ' + thisWeekNeg + ' negative signal' + (thisWeekNeg === 1 ? '' : 's')
+    + ' versus ' + lastWeekNeg + ' last week, while gates recorded ' + blocked + ' deny decision' + (blocked === 1 ? '' : 's') + '.';
+
+  grid.innerHTML = [
+    { label: '7d approval', value: approvalRate + '%', tone: 'purple', note: 'Recent approval rate from feedback signals' },
+    { label: 'This week negatives', value: String(thisWeekNeg), tone: 'red', note: 'Vs ' + lastWeekNeg + ' last week' },
+    { label: 'Actions blocked', value: String(blocked), tone: 'green', note: 'Recorded gate denies from the audit trail' },
+    { label: 'Repeat pressure', value: repeatPressure + '%', tone: 'cyan', note: repeatedCount + ' repeated failure pattern' + (repeatedCount === 1 ? '' : 's') }
+  ].map(function(tile) {
+    return '<div class="metric-tile"><div class="metric-kicker">' + escHtml(tile.label) + '</div><div class="metric-number ' + escHtml(tile.tone) + '">' + escHtml(tile.value) + '</div><div class="metric-note">' + escHtml(tile.note) + '</div></div>';
+  }).join('');
+
+  var gateDays = {};
+  ((gateAudit.days) || []).forEach(function(day) {
+    gateDays[day.dayKey] = day;
+  });
+  var series = buildFeedbackSeries(allTimeline, 14).map(function(item) {
+    var gateDay = gateDays[item.dayKey] || { deny: 0, warn: 0, intercepted: 0 };
+    return {
+      dayKey: item.dayKey,
+      label: item.label,
+      up: item.up,
+      down: item.down,
+      total: item.total,
+      deny: gateDay.deny || 0,
+      warn: gateDay.warn || 0,
+      intercepted: gateDay.intercepted || 0
+    };
+  });
+  currentImprovementSeries = series;
+  var maxFeedbackTotal = series.reduce(function(max, item) { return Math.max(max, item.total); }, 0);
+  var maxGateTotal = series.reduce(function(max, item) { return Math.max(max, item.intercepted); }, 0);
+  if (maxFeedbackTotal === 0 && maxGateTotal === 0) {
+    currentImprovementSeries = [];
+    chart.innerHTML = '<div class="empty" style="grid-column:1 / -1;">No recent feedback events to chart yet.</div>';
+    updateMetricsSelection();
+    return;
+  }
+
+  chart.innerHTML = series.map(function(item) {
+    if (!item.total && !item.intercepted) {
+      return '<button class="metrics-bar" type="button" data-day-key="' + escAttr(item.dayKey) + '" onclick="focusTimelineDay(\'' + escAttr(item.dayKey) + '\')">' +
+        '<div class="metrics-bar-body"><div class="metrics-bar-stack"><div class="metrics-bar-empty"></div></div><div class="metrics-bar-stack gate"><div class="metrics-bar-empty"></div></div></div>' +
+        '<div class="metrics-bar-total">F0</div>' +
+        '<div class="metrics-bar-subtotal">G0</div>' +
+        '<div class="metrics-bar-label">' + escHtml(item.label) + '</div>' +
+      '</button>';
+    }
+    var feedbackHeight = item.total > 0 ? Math.max(14, Math.round((item.total / Math.max(maxFeedbackTotal, 1)) * 120)) : 0;
+    var upHeight = item.up > 0 ? Math.max(8, Math.round((item.up / Math.max(item.total, 1)) * feedbackHeight)) : 0;
+    var downHeight = item.down > 0 ? Math.max(8, feedbackHeight - upHeight) : 0;
+    if (item.up > 0 && item.down > 0 && upHeight + downHeight > 120) downHeight = Math.max(8, 120 - upHeight);
+    var gateHeight = item.intercepted > 0 ? Math.max(12, Math.round((item.intercepted / Math.max(maxGateTotal, 1)) * 84)) : 0;
+    var denyHeight = item.deny > 0 ? Math.max(8, Math.round((item.deny / Math.max(item.intercepted, 1)) * gateHeight)) : 0;
+    var warnHeight = item.warn > 0 ? Math.max(8, gateHeight - denyHeight) : 0;
+    if (item.deny > 0 && item.warn > 0 && denyHeight + warnHeight > 84) warnHeight = Math.max(8, 84 - denyHeight);
+    return '<button class="metrics-bar" type="button" data-day-key="' + escAttr(item.dayKey) + '" onclick="focusTimelineDay(\'' + escAttr(item.dayKey) + '\')">' +
+      '<div class="metrics-bar-body">' +
+        '<div class="metrics-bar-stack">' +
+          (item.up ? '<div class="metrics-segment up" style="height:' + upHeight + 'px" title="' + item.up + ' positive feedback"></div>' : '') +
+          (item.down ? '<div class="metrics-segment down" style="height:' + downHeight + 'px" title="' + item.down + ' negative feedback"></div>' : '') +
+          (!item.total ? '<div class="metrics-bar-empty"></div>' : '') +
+        '</div>' +
+        '<div class="metrics-bar-stack gate">' +
+          (item.deny ? '<div class="metrics-segment deny" style="height:' + denyHeight + 'px" title="' + item.deny + ' gate denies"></div>' : '') +
+          (item.warn ? '<div class="metrics-segment warn" style="height:' + warnHeight + 'px" title="' + item.warn + ' gate warns"></div>' : '') +
+          (!item.intercepted ? '<div class="metrics-bar-empty"></div>' : '') +
+        '</div>' +
+      '</div>' +
+      '<div class="metrics-bar-total">F' + item.total + '</div>' +
+      '<div class="metrics-bar-subtotal">G' + item.intercepted + '</div>' +
+      '<div class="metrics-bar-label">' + escHtml(item.label) + '</div>' +
+    '</button>';
+  }).join('');
+  updateMetricsSelection();
+}
+
 function searchAndHighlight(ruleId) {
   var el = document.querySelector('[data-rule-id="' + ruleId + '"]');
   if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center' }); el.style.borderColor = 'var(--cyan)'; setTimeout(function() { el.style.borderColor = ''; }, 2000); }
@@ -452,7 +752,6 @@ function mapLiveRules(payload) {
       title: result.title || ((result.lesson || {}).summary) || 'Lesson',
       context: ((result.lesson || {}).howToAvoid) || ((result.lesson || {}).summary) || (sourceFeedback && sourceFeedback.context) || '',
       occurrences: linkedGate && linkedGate.occurrences ? linkedGate.occurrences : 1,
-      prevented: linkedGate && linkedGate.occurrences ? linkedGate.occurrences : 0,
       severity: deriveSeverity(result),
       tags: Array.isArray(result.tags) ? result.tags : [],
       lastTriggered: sourceFeedback && sourceFeedback.timestamp ? formatDate(sourceFeedback.timestamp) : formatDate(result.timestamp),
@@ -464,10 +763,13 @@ function mapLiveRules(payload) {
 function mapTimelineItems(payload, lessonMap) {
   return (payload.results || []).map(function(entry) {
     var linkedLesson = lessonMap.get(entry.id) || null;
+    var timestamp = entry.timestamp || null;
     return {
-      signal: entry.signal || 'down',
+      signal: normalizeSignal(entry.signal || entry.feedback),
       context: entry.context || entry.title || '',
       date: formatDate(entry.timestamp),
+      timestamp: timestamp,
+      dayKey: toDayKey(timestamp),
       learned: linkedLesson ? linkedLesson.title : '',
       feedbackId: entry.id || ''
     };
@@ -517,16 +819,19 @@ function loadDemo() {
   allRules = demoRules.slice(0, 3);
   allTimeline = demoTimeline.slice(0, 3);
   dashboardSnapshot = null;
+  activeTimelineSignal = 'all';
+  activeTimelineDay = null;
 
   document.getElementById('statRules').textContent = demoRules.length;
   document.getElementById('statCritical').textContent = demoRules.filter(function(r) { return r.severity === 'critical'; }).length;
-  document.getElementById('statPrevented').textContent = demoRules.reduce(function(sum, r) { return sum + (r.prevented || 0); }, 0);
+  document.getElementById('statBlocked').textContent = demoRules.reduce(function(sum, r) { return sum + (r.prevented || 0); }, 0);
   document.getElementById('statTrend').textContent = '12.5%';
   document.getElementById('statTrendSub').textContent = '7-day approval rate';
 
   renderRules(allRules);
   renderTimeline(allTimeline);
   renderInsights();
+  renderImprovementMetrics({ recentRate: 0.125 }, null);
   renderUpgradeWall('rulesList');
   renderUpgradeWall('timelineList');
   setMode('Demo preview — upgrade to Pro to see your live lessons, timeline, and insights.', true);
@@ -560,16 +865,19 @@ async function loadLive() {
       .filter(function(rule) { return rule.sourceFeedbackId; })
       .map(function(rule) { return [rule.sourceFeedbackId, rule]; }));
     allTimeline = mapTimelineItems(feedbackPayload, lessonMap);
+    activeTimelineSignal = 'all';
+    activeTimelineDay = null;
 
     document.getElementById('statRules').textContent = allRules.length;
     document.getElementById('statCritical').textContent = allRules.filter(function(r) { return r.severity === 'critical'; }).length;
-    document.getElementById('statPrevented').textContent = allRules.reduce(function(sum, r) { return sum + (r.prevented || 0); }, 0);
+    document.getElementById('statBlocked').textContent = ((dashboardSnapshot.gateStats || {}).blocked || 0);
     document.getElementById('statTrend').textContent = ((stats.recentRate || stats.approvalRate || 0) * 100).toFixed(1) + '%';
     document.getElementById('statTrendSub').textContent = 'Live approval rate';
 
     renderRules(allRules);
     renderTimeline(allTimeline);
     renderInsights(dashboardSnapshot);
+    renderImprovementMetrics(stats, dashboardSnapshot);
     document.getElementById('proBadge').style.display = 'none';
     setMode('Local Pro connected — this lessons view is reading your live rules, feedback timeline, and insights.', false);
   } catch (_err) {

package/scripts/ai-search-visibility.js

@@ -0,0 +1,142 @@
+'use strict';
+
+const https = require('node:https');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const PROMPTS = [
+  'best pre-action gate tools for AI coding agents',
+  'how to prevent AI coding agent from making mistakes',
+  'Claude Code safety tools',
+  'npm packages for AI agent guardrails',
+  'how to block bad tool calls in AI agents',
+  'alternatives to thumbgate',
+  'pre-tool-use hooks for AI agents',
+  'AI coding agent memory and learning',
+];
+
+function queryPerplexity(prompt, apiKey) {
+  return new Promise((resolve, reject) => {
+    const body = JSON.stringify({
+      model: 'sonar',
+      messages: [{ role: 'user', content: prompt }],
+    });
+    const req = https.request(
+      {
+        hostname: 'api.perplexity.ai',
+        path: '/chat/completions',
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+          'Content-Type': 'application/json',
+          'Content-Length': Buffer.byteLength(body),
+        },
+      },
+      (res) => {
+        const chunks = [];
+        res.on('data', (c) => chunks.push(c));
+        res.on('end', () => {
+          try {
+            const json = JSON.parse(Buffer.concat(chunks).toString());
+            const content = json.choices?.[0]?.message?.content || '';
+            resolve(content);
+          } catch (e) {
+            reject(new Error(`Failed to parse Perplexity response: ${e.message}`));
+          }
+        });
+      }
+    );
+    req.on('error', reject);
+    req.write(body);
+    req.end();
+  });
+}
+
+async function runVisibilityCheck(opts = {}) {
+  const apiKey = opts.apiKey || process.env.PERPLEXITY_API_KEY;
+  const queryFn = opts.queryFn || (apiKey ? (p) => queryPerplexity(p, apiKey) : null);
+
+  const results = [];
+  for (const prompt of PROMPTS) {
+    if (!queryFn) {
+      results.push({ prompt, status: 'MANUAL', response: null });
+      continue;
+    }
+    try {
+      const response = await queryFn(prompt);
+      const found = /thumbgate/i.test(response);
+      results.push({ prompt, status: found ? 'FOUND' : 'MISSING', response });
+    } catch (err) {
+      results.push({ prompt, status: 'ERROR', response: null, error: err.message });
+    }
+  }
+  return results;
+}
+
+function formatReport(results) {
+  const date = new Date().toISOString().slice(0, 10);
+  const lines = [`AI Search Visibility Report — ${date}`, '='.repeat(42)];
+
+  for (const r of results) {
+    const tag = `[${r.status}]`.padEnd(10);
+    const shortPrompt =
+      r.prompt.length > 60 ? r.prompt.slice(0, 57) + '...' : r.prompt;
+    const suffix =
+      r.status === 'FOUND'
+        ? '— mentioned in response'
+        : r.status === 'MISSING'
+          ? '— not found'
+          : r.status === 'MANUAL'
+            ? '— check manually'
+            : `— ${r.error || 'error'}`;
+    lines.push(`${tag} "${shortPrompt}" ${suffix}`);
+  }
+
+  const hasApi = results.some((r) => r.status !== 'MANUAL');
+  if (hasApi) {
+    const found = results.filter((r) => r.status === 'FOUND').length;
+    const total = results.filter((r) => r.status !== 'MANUAL').length;
+    lines.push('', `Score: ${found}/${total} prompts mention ThumbGate`);
+  } else {
+    lines.push('', `Manual checklist: ${results.length} prompts to test`);
+  }
+  return lines.join('\n');
+}
+
+function saveReport(results, opts = {}) {
+  const date = new Date().toISOString().slice(0, 10);
+  const dir = opts.dir || path.join(process.cwd(), '.thumbgate', 'ai-visibility');
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+
+  const filePath = path.join(dir, `${date}.json`);
+  const found = results.filter((r) => r.status === 'FOUND').length;
+  const total = results.filter((r) => r.status !== 'MANUAL').length;
+
+  const report = {
+    date,
+    score: total > 0 ? `${found}/${total}` : 'manual',
+    results: results.map((r) => ({
+      prompt: r.prompt,
+      status: r.status,
+      ...(r.error ? { error: r.error } : {}),
+    })),
+  };
+
+  fs.writeFileSync(filePath, JSON.stringify(report, null, 2));
+  return filePath;
+}
+
+module.exports = { PROMPTS, queryPerplexity, runVisibilityCheck, formatReport, saveReport };
+
+if (require.main === module) {
+  (async () => {
+    const results = await runVisibilityCheck();
+    const report = formatReport(results);
+    console.log(report);
+    const filePath = saveReport(results);
+    console.log(`\nReport saved to ${filePath}`);
+  })().catch((err) => {
+    console.error('Error:', err.message);
+    process.exit(1);
+  });
+}

package/scripts/audit-trail.js

@@ -64,6 +64,12 @@ function recordAuditEvent(params = {}) {
   };
 
   fs.appendFileSync(logPath, JSON.stringify(record) + '\n');
+  try {
+    const { trainAndPersistInterventionPolicy } = require('./intervention-policy');
+    trainAndPersistInterventionPolicy(path.dirname(logPath));
+  } catch {
+    // Keep audit recording resilient even if the learned policy refresh fails.
+  }
   return record;
 }