kryptheon 0.1.21 → 0.1.23

package/kryptheon-dashboard-page.js

@@ -3,9 +3,8 @@
 // Every value on this page can hold text from the app being checked - a line
 // of its code, the heading of a page that broke. So nothing here is ever
 // written as HTML: every node is made with createElement (or createElementNS
-// for the charts and icons, from numbers and fixed path data) and filled with
-// textContent. This file is read by kryptheon-code.js in its own check, and
-// must come back with nothing to report.
+// for the icons, from fixed path data) and filled with textContent. This file
+// is read by kryptheon-code.js in its own check, and must come back clean.
 
 (function () {
   'use strict';
@@ -15,9 +14,6 @@
   var NS = 'http://www.w3.org/2000/svg';
   var state = null;
   var busy = false;
-  var statusFilter = 'all';
-  var range = 'all';
-  var query = '';
   var openRow = null;
   var allLooks = false;
 
@@ -34,20 +30,8 @@
     Object.keys(attrs || {}).forEach(function (k) { node.setAttribute(k, String(attrs[k])); });
     return node;
   }
-  function clear(node) {
-    while (node.firstChild) node.removeChild(node.firstChild);
-  }
-  function byId(id) {
-    return document.getElementById(id);
-  }
-  // A sentence with its important words marked: parts are plain strings, or
-  // { hl: text } for the words someone skimming must not miss.
-  function rich(node, parts) {
-    parts.forEach(function (p) {
-      node.appendChild(typeof p === 'string' ? document.createTextNode(p) : el('span', 'hl', p.hl));
-    });
-    return node;
-  }
+  function clear(node) { while (node.firstChild) node.removeChild(node.firstChild); }
+  function byId(id) { return document.getElementById(id); }
 
   // Line icons from fixed path data only.
   var ICONS = {
@@ -57,10 +41,7 @@
     wrench: 'M14.7 6.3a4 4 0 00-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 005.4-5.4l-2.6 2.6-2.4-.6-.6-2.4 2.6-2.6z',
     toggle: 'M8 7h8a5 5 0 010 10H8A5 5 0 018 7zm0 3a2 2 0 100 4 2 2 0 000-4z',
     play: 'M7 5l12 7-12 7V5z',
-    shield: 'M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3z',
     box: 'M4 7l8-4 8 4v10l-8 4-8-4V7zm0 0l8 4 8-4M12 11v10',
-    search: 'M11 18a7 7 0 100-14 7 7 0 000 14zm9 3l-4.3-4.3',
-    bell: 'M6 16V11a6 6 0 1112 0v5l2 2H4l2-2zm4 4h4',
     alert: 'M12 3l10 18H2L12 3zm0 7v5m0 3v.5',
     eye: 'M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12zm10 3a3 3 0 100-6 3 3 0 000 6z',
     check: 'M5 12.5l4.5 4.5L19 7.5',
@@ -69,7 +50,8 @@
     refresh: 'M20 12a8 8 0 10-2.3 5.7M20 12V6m0 6h-6',
     arrow: 'M5 12h14m-6-6l6 6-6 6',
     sun: 'M12 16a4 4 0 100-8 4 4 0 000 8zM12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4l1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4',
-    lock: 'M6 11h12v10H6zM8 11V7a4 4 0 018 0v4',
+    terminal: 'M4 5h16v14H4zM7 9l3 3-3 3M13 15h4',
+    dot: 'M12 12h.01',
   };
   function icon(name, size) {
     var s = svgEl('svg', {
@@ -85,10 +67,6 @@
     var d = new Date(iso);
     return isNaN(d.getTime()) ? String(iso) : d.toLocaleString();
   }
-  function shortDate(iso) {
-    var d = new Date(iso);
-    return isNaN(d.getTime()) ? '' : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
-  }
   function ago(iso) {
     var d = new Date(iso);
     if (isNaN(d.getTime())) return '';
@@ -98,9 +76,7 @@
     if (s < 86400) return Math.round(s / 3600) + ' h ago';
     return Math.round(s / 86400) + ' d ago';
   }
-  function plural(n, one, many) {
-    return n + ' ' + (n === 1 ? one : many || one + 's');
-  }
+  function plural(n, one, many) { return n + ' ' + (n === 1 ? one : many || one + 's'); }
 
   function toast(text) {
     var t = byId('toast');
@@ -127,13 +103,11 @@
     busy = on;
     Array.prototype.forEach.call(document.querySelectorAll('[data-action]'), function (b) { b.disabled = on; });
   }
-
   function copy(text, done) {
     navigator.clipboard.writeText(text).then(function () { toast(done); }, function () {
       toast('Could not copy - select the text instead');
     });
   }
-
   function button(cls, iconName, text, onClick) {
     var b = el('button', 'btn' + (cls ? ' ' + cls : ''));
     b.type = 'button';
@@ -145,67 +119,35 @@
 
   var CHECK_NAME = { regression: 'Recorded flows', frontend: 'Frontend code', data: 'Database' };
   var CHECK_TONE = { regression: 'sun', frontend: 'amber', data: 'dusk' };
-  var CHECK_COLOR = { regression: '#ec7433', frontend: '#d49b33', data: '#6d4a7c' };
 
   function counts() {
     var confirmed = state.findings.filter(function (f) { return f.status === 'confirmed'; }).length;
-    return {
-      confirmed: confirmed,
-      toVerify: state.findings.length - confirmed,
-      lastRun: state.runs[0],
-      lastLook: (state.looks || [])[0],
-      proven: (state.proven || []).length,
-      built: state.checks.filter(function (c) { return c.available; }).length,
-    };
+    return { confirmed: confirmed, toVerify: state.findings.length - confirmed, proven: (state.proven || []).length };
   }
 
   /* ----------------------------------- views ----------------------------------- */
 
-  // One section on screen at a time; the address keeps it, so a reload or the
-  // back button lands on the same one.
+  // One section on screen at a time; the address keeps it, so a reload lands
+  // on the same one.
   var VIEWS = [
-    { id: 'dashboard', title: 'Dashboard', icon: 'grid', group: 'navOverview' },
-    { id: 'findings', title: 'Findings', icon: 'list', group: 'navOverview' },
-    { id: 'changes', title: 'What changed', icon: 'change', group: 'navOverview' },
-    { id: 'fixes', title: 'Proven fixes', icon: 'wrench', group: 'navOverview' },
-    { id: 'checks', title: 'Checks', icon: 'toggle', group: 'navWorkspace' },
-    { id: 'runs', title: 'Runs', icon: 'play', group: 'navWorkspace' },
-    { id: 'verification', title: 'Verification', icon: 'shield', group: 'navWorkspace' },
-    { id: 'storage', title: 'Where this lives', icon: 'box', group: 'navWorkspace' },
+    { id: 'dashboard', title: 'Dashboard', icon: 'grid' },
+    { id: 'findings', title: 'Findings', icon: 'list' },
+    { id: 'changes', title: 'What changed', icon: 'change' },
+    { id: 'fixes', title: 'Proven fixes', icon: 'wrench' },
+    { id: 'checks', title: 'Checks', icon: 'toggle' },
+    { id: 'runs', title: 'Runs', icon: 'play' },
+    { id: 'storage', title: 'Where this lives', icon: 'box' },
   ];
 
-  // What each section is for, with the words that decide it marked.
-  var WHEN = {
-    findings: ['Open this when something ', { hl: 'broke or looks risky' }, '. Click a row, ', { hl: 'copy the fix prompt' },
-      ' into your AI tool, then press ', { hl: 'Re-check' }, ' - it says FIXED only when it is.'],
-    changes: ['Open this to see ', { hl: 'what your AI changed' }, ' - every file, and what broke or got fixed with it. ',
-      'Kryptheon looks by itself while this page is open.'],
-    fixes: ['Open this for ', { hl: 'proof' }, '. A fix is listed only after a ', { hl: 're-check passed' },
-      ' - never just because the code changed.'],
-    checks: ['Open this to ', { hl: 'switch checks on or off' }, ', or run one now. Checks that are not built yet are listed, and ',
-      { hl: 'never counted as passed' }, '.'],
-    runs: ['Open this when a ', { hl: 'recorded flow' }, ' - sign-up, login, checkout - ', { hl: 'stopped working' },
-      '. Each run replays your recordings against your app.'],
-    verification: ['Open this for the ', { hl: 'Kryptheon Verified' }, ' badge. It is ', { hl: 'not built yet' },
-      ', so nothing here is verified.'],
-    storage: ['Open this to see ', { hl: 'where your records are kept' }, '. Nothing is sent anywhere, and ',
-      { hl: 'nothing is written into your project' }, '.'],
-  };
-
   function currentView() {
     var id = (location.hash || '').replace(/^#/, '');
     return VIEWS.some(function (v) { return v.id === id; }) ? id : 'dashboard';
   }
-
   function go(id, filter) {
-    if (filter) {
-      statusFilter = filter;
-      if (state) { renderStatusFilter(); renderFindings(); }
-    }
+    if (filter) { statusFilter = filter; if (state) { renderStatusFilter(); renderFindings(); } }
     if (currentView() === id) return showView();
     location.hash = id;
   }
-
   function showView() {
     var id = currentView();
     VIEWS.forEach(function (v) { byId('view-' + v.id).hidden = v.id !== id; });
@@ -213,8 +155,6 @@
     byId('viewTitle').textContent = view.title;
     document.title = (id === 'dashboard' ? '' : view.title + ' - ') + 'Kryptheon';
     if (state) renderSide();
-    // The chart measures itself, so it is drawn again once it is on screen.
-    if (state && id === 'dashboard') renderChart();
     window.scrollTo(0, 0);
   }
   window.addEventListener('hashchange', showView);
@@ -228,351 +168,216 @@
       findings: [state.findings.length, c.confirmed > 0],
       changes: [(state.looks || []).length, false],
       fixes: [c.proven, false],
-      runs: [state.runs.length, !!(c.lastRun && c.lastRun.failed)],
+      runs: [state.runs.length, !!(state.runs[0] && state.runs[0].failed)],
     };
-    ['navOverview', 'navWorkspace'].forEach(function (group) {
-      var box = byId(group);
-      clear(box);
-      VIEWS.filter(function (v) { return v.group === group; }).forEach(function (v) {
-        var b = el('button', active === v.id ? 'on' : '');
-        b.type = 'button';
-        b.appendChild(icon(v.icon, 18));
-        b.appendChild(el('span', null, v.title));
-        var n = badge[v.id];
-        if (n && n[0]) b.appendChild(el('span', 'n-count' + (n[1] ? ' hot' : ''), n[0]));
-        if (active === v.id) b.setAttribute('aria-current', 'page');
-        b.addEventListener('click', function () { go(v.id); });
-        box.appendChild(b);
-      });
+    var box = byId('nav');
+    clear(box);
+    VIEWS.forEach(function (v) {
+      var b = el('button', active === v.id ? 'on' : '');
+      b.type = 'button';
+      b.appendChild(icon(v.icon, 18));
+      b.appendChild(el('span', null, v.title));
+      var n = badge[v.id];
+      if (n && n[0]) b.appendChild(el('span', 'n-count' + (n[1] ? ' hot' : ''), n[0]));
+      if (active === v.id) b.setAttribute('aria-current', 'page');
+      b.addEventListener('click', function () { go(v.id); });
+      box.appendChild(b);
     });
-    byId('builtText').textContent = c.built + ' / ' + state.checks.length;
-    byId('builtBar').style.width = Math.round((c.built / state.checks.length) * 100) + '%';
-    byId('builtNote').textContent = (state.checks.length - c.built) + ' more are listed as not available - never as passed.';
+    var built = state.checks.filter(function (x) { return x.available; }).length;
+    byId('builtText').textContent = built + ' / ' + state.checks.length;
+    byId('builtBar').style.width = Math.round((built / state.checks.length) * 100) + '%';
+    byId('builtNote').textContent = (state.checks.length - built) + ' more are listed as not available - never as passed.';
     var name = state.project.name || 'Project';
-    byId('avatar').textContent = name.replace(/[^A-Za-z0-9]/g, '').slice(0, 2).toUpperCase() || 'K';
-    byId('projName').textContent = name;
-    byId('projPath').textContent = state.project.root;
-    byId('projPath').title = state.project.root;
-  }
-
-  /* ---------------------------------- topbar ---------------------------------- */
-
-  function renderTop() {
     var last = (state.looks || [])[0];
-    byId('subline').textContent = last ? 'Watching - last look ' + ago(last.at) : 'Watching for changes';
-    var si = byId('searchIcon');
-    clear(si);
-    si.appendChild(icon('search', 16));
-    var bell = byId('bell');
-    clear(bell);
-    bell.appendChild(icon('bell', 20));
-    var fresh = last && !last.first ? last.newFindings : 0;
-    if (fresh) bell.appendChild(el('span', 'bdot'));
-    bell.title = fresh ? plural(fresh, 'new finding') + ' in the last look - open What changed' : 'Nothing new in the last look';
-    var run = byId('runAll');
-    if (!busy) {
-      clear(run);
-      run.appendChild(icon('play', 15));
-      run.appendChild(el('span', null, 'Run checks'));
-    }
+    byId('subline').textContent = name + '  -  ' + (last ? 'watching, last look ' + ago(last.at) : 'watching for changes');
   }
 
-  /* --------------------------------- dashboard --------------------------------- */
+  /* ------------------------------ right now + steps ------------------------------ */
 
-  function renderSky() {
-    var c = counts();
+  function renderNow() {
     var sky = byId('sky');
     var ic = byId('skyIcon');
     var title = byId('skyTitle');
     var sub = byId('skySub');
     var actions = byId('skyActions');
-    clear(ic);
-    clear(title);
-    clear(sub);
-    clear(actions);
-    if (c.confirmed) {
+    clear(ic); clear(title); clear(sub); clear(actions);
+    var next = state.next || { kind: 'quiet', title: 'Nothing open' };
+    byId('skyEyebrow').textContent = next.kind === 'quiet' ? 'ALL QUIET' : 'DO THIS NEXT';
+    if (next.kind === 'fix') {
       sky.className = 'sky bad';
       ic.style.color = 'var(--ember)';
       ic.appendChild(icon('alert', 28));
-      byId('skyEyebrow').textContent = 'NEEDS YOU NOW';
-      rich(title, [{ hl: plural(c.confirmed, 'confirmed problem') }]);
-      rich(sub, ['Proven by a check that ran. Open ', { hl: 'Findings' }, ', copy the fix prompt into your AI tool, then press ',
-        { hl: 'Re-check' }, '.' + (c.toVerify ? ' ' + c.toVerify + (c.toVerify === 1 ? ' more needs' : ' more need') + ' a look.' : '')]);
+      title.textContent = next.title;
+      sub.textContent = 'Proven by a check that ran. Open it, copy the fix prompt into your AI tool, then press Re-check - it says FIXED only when it is.';
       actions.appendChild(button('sun', 'arrow', 'Open Findings', function () { go('findings', 'confirmed'); }));
-    } else if (c.toVerify) {
+    } else if (next.kind === 'step') {
+      sky.className = 'sky';
+      ic.style.color = 'var(--sun-deep)';
+      ic.appendChild(icon('arrow', 28));
+      title.textContent = next.title;
+      sub.textContent = 'The next step in setting Kryptheon up. Do it below in Start here.';
+      actions.appendChild(button('sun', 'arrow', 'Go to Start here', function () { go('dashboard'); scrollToId('steps'); }));
+    } else if (next.kind === 'verify') {
       sky.className = 'sky';
       ic.style.color = 'var(--amber)';
       ic.appendChild(icon('eye', 28));
-      byId('skyEyebrow').textContent = 'WORTH A LOOK';
-      rich(title, [{ hl: plural(c.toVerify, 'thing') + ' to verify' }]);
-      rich(sub, ['Nothing confirmed broken. These were spotted ', { hl: 'without running anything' },
-        ' - each needs a person to decide.']);
+      title.textContent = next.title;
+      sub.textContent = 'Spotted without running anything. Each needs a person to decide.';
       actions.appendChild(button('sun', 'arrow', 'Open Findings', function () { go('findings', 'verify'); }));
     } else {
       sky.className = 'sky ok';
       ic.style.color = 'var(--leaf)';
       ic.appendChild(icon('sun', 28));
-      byId('skyEyebrow').textContent = 'ALL QUIET';
-      rich(title, ['Holding']);
-      rich(sub, ['Nothing open from the checks that are on and have run. That is ', { hl: 'not the same as nothing wrong' },
-        ' - ' + (state.checks.length - c.built) + ' checks are not built yet.']);
-      actions.appendChild(button('sun', 'arrow', 'See the checks', function () { go('checks'); }));
-    }
-    if (c.lastLook && !c.lastLook.first && c.lastLook.fileCount) {
-      actions.appendChild(button('', 'change', 'What changed', function () { go('changes'); }));
+      title.textContent = 'Nothing open';
+      sub.textContent = 'Nothing open from the checks that are on and have run. That is not the same as nothing wrong - see Checks for what is not built yet.';
+      actions.appendChild(button('', 'toggle', 'See the checks', function () { go('checks'); }));
     }
   }
 
-  function kpi(label, value, iconName, tone, foot, goText, onOpen) {
-    var box = el('button', 'kpi raised');
-    box.type = 'button';
-    var top = el('div', 'kpi-top');
-    var chip = el('div', 'ichip ' + tone);
-    chip.appendChild(icon(iconName, 18));
-    top.appendChild(chip);
-    top.appendChild(el('div', 'kpi-label', label));
-    box.appendChild(top);
-    box.appendChild(el('div', 'kpi-num', value));
-    var f = el('div', 'kpi-foot');
-    foot.forEach(function (part) { f.appendChild(part); });
-    box.appendChild(f);
-    box.appendChild(el('div', 'kpi-go', goText + ' →'));
-    box.addEventListener('click', onOpen);
-    return box;
-  }
-  function delta(kind, text) {
-    return el('span', 'delta ' + kind, (kind === 'up' ? '▲ ' : kind === 'down' ? '▼ ' : '') + text);
+  function scrollToId(id) {
+    var t = byId(id);
+    if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
 
-  function renderKpis() {
-    var box = byId('kpis');
-    clear(box);
-    var c = counts();
-    var newFound = c.lastLook && !c.lastLook.first ? c.lastLook.newFindings : 0;
-    var week = Date.now() - 7 * 86400000;
-    var fixedWeek = (state.proven || []).filter(function (p) { return new Date(p.at).getTime() > week; }).length;
-    box.appendChild(kpi('CONFIRMED', c.confirmed, 'alert', 'ember', newFound
-      ? [delta('down', newFound + ' new'), el('span', null, 'in the last look')]
-      : c.confirmed ? [el('span', null, 'open now, each with a fix prompt')] : [delta('up', 'none open')],
-    'Open Findings', function () { go('findings', 'confirmed'); }));
-    box.appendChild(kpi('TO VERIFY', c.toVerify, 'eye', 'amber', [el('span', null, 'spotted without running anything')],
-      'Open Findings', function () { go('findings', 'verify'); }));
-    box.appendChild(kpi('PROVEN FIXES', c.proven, 'wrench', 'leaf', fixedWeek ? [delta('up', fixedWeek + ' this week')] : [delta('flat', 'none this week')],
-      'Open Proven fixes', function () { go('fixes'); }));
-    var r = c.lastRun;
-    box.appendChild(kpi('FLOWS HELD', r ? r.passed + ' / ' + (r.passed + r.failed) : '-', 'film', 'sun', r
-      ? [delta(r.failed ? 'down' : 'up', r.failed ? r.failed + ' broke' : 'all held'), el('span', null, ago(r.runAt))]
-      : [el('span', null, plural(state.recordings, 'recording') + ', never run')],
-    'Open Runs', function () { go('runs'); }));
-  }
-
-  function renderGuide() {
-    var box = byId('guide');
+  var STEP_WORD = { done: 'Done', todo: 'To do', waiting: 'Waiting', off: 'Switched off' };
+  var STEP_TONE = { done: 'leaf', todo: 'sun', waiting: 'amber', off: 'muted' };
+
+  function renderSteps() {
+    var box = byId('steps');
     clear(box);
-    var c = counts();
-    var looks = state.looks || [];
-    var items = [
-      { view: 'findings', parts: ['Something ', { hl: 'broke or looks risky' }, ' after your AI changed code'],
-        state: state.findings.length ? c.confirmed + ' confirmed, ' + c.toVerify + ' to verify' : 'nothing open',
-        tone: c.confirmed ? 'hot' : c.toVerify ? 'warm' : 'cool' },
-      { view: 'runs', parts: ['A ', { hl: 'recorded flow' }, ' (sign-up, login, checkout) stopped working'],
-        state: c.lastRun ? (c.lastRun.failed ? plural(c.lastRun.failed, 'flow') + ' broke in the last run' : 'last run held') : 'never replayed',
-        tone: c.lastRun ? (c.lastRun.failed ? 'hot' : 'cool') : '' },
-      { view: 'changes', parts: ['You want to see ', { hl: 'what your AI touched' }],
-        state: looks.length ? plural(looks.length, 'look') + ', last ' + ago(looks[0].at) : 'no look yet',
-        tone: c.lastLook && !c.lastLook.first && c.lastLook.newFindings ? 'hot' : looks.length ? 'cool' : '' },
-      { view: 'fixes', parts: ['You fixed something and want ', { hl: 'proof it is fixed' }],
-        state: c.proven ? plural(c.proven, 'fix', 'fixes') + ' proven' : 'none proven yet', tone: c.proven ? 'cool' : '' },
-      { view: 'checks', parts: ['You want to ', { hl: 'switch a check' }, ' on or off, or run one'],
-        state: c.built + ' of ' + state.checks.length + ' built', tone: '' },
-      { view: 'verification', parts: ['You want the ', { hl: 'Kryptheon Verified' }, ' badge'],
-        state: state.verification.state, tone: 'warm' },
-      { view: 'storage', parts: ['You want to know ', { hl: 'where your records are kept' }],
-        state: 'on this machine only', tone: 'cool' },
-    ];
-    items.forEach(function (it) {
-      var v = VIEWS.filter(function (x) { return x.id === it.view; })[0];
-      var row = el('button', 'g-row');
-      row.type = 'button';
-      row.appendChild(el('span', 'g-dot' + (it.tone ? ' ' + it.tone : '')));
-      var text = el('span');
-      rich(text, it.parts);
-      text.appendChild(el('span', 'g-state', it.state));
-      row.appendChild(text);
-      var to = el('span', 'g-to');
-      to.appendChild(el('span', 'ul', v.title));
-      to.appendChild(icon('arrow', 15));
-      row.appendChild(to);
-      row.addEventListener('click', function () { go(it.view); });
+    (state.steps || []).forEach(function (s, i) {
+      var row = el('div', 'step ' + s.state);
+      var num = el('div', 'step-num');
+      if (s.state === 'done') num.appendChild(icon('check', 18));
+      else num.textContent = String(i + 1).padStart(2, '0');
+      row.appendChild(num);
+      var body = el('div', 'step-body');
+      var head = el('div', 'step-head');
+      head.appendChild(el('div', 'step-title', s.title));
+      head.appendChild(el('span', 'tag ' + STEP_TONE[s.state], STEP_WORD[s.state] || s.state));
+      body.appendChild(head);
+      body.appendChild(el('div', 'step-why', s.why + (s.at ? '  -  last ' + ago(s.at) : '') + (s.count ? '  -  ' + plural(s.count, 'recording') + ' held' : '')));
+      if (s.action && s.action.kind === 'run') {
+        var run = button('sun sm', 'play', s.action.label, function () { runChecks([s.action.check], run); });
+        run.setAttribute('data-action', 'run');
+        run.disabled = busy;
+        body.appendChild(run);
+      } else if (s.action && s.action.kind === 'command') {
+        var cmd = el('div', 'cmd');
+        cmd.appendChild(icon('terminal', 15));
+        cmd.appendChild(el('code', null, s.action.command));
+        var cp = el('button', 'cmd-copy');
+        cp.type = 'button';
+        cp.title = 'Copy';
+        cp.appendChild(icon('copy', 14));
+        cp.addEventListener('click', function () { copy(s.action.command, 'Command copied - run it in your terminal'); });
+        cmd.appendChild(cp);
+        body.appendChild(cmd);
+      }
+      row.appendChild(body);
       box.appendChild(row);
     });
   }
 
-  /* ----------------------------------- chart ----------------------------------- */
-
-  function renderRange() {
-    var box = byId('range');
-    clear(box);
-    [['all', 'All'], ['30', '30D'], ['7', '7D']].forEach(function (r) {
-      var b = el('button', range === r[0] ? 'on' : '', r[1]);
+  /* ------------------------------ connect your AI tool ------------------------------ */
+
+  // The same set-up kryptheon.tech shows, so the two never disagree. Every
+  // step comes from that tool's own documentation, except where a tool is
+  // marked tested - there it was run by hand. Static text: nothing here comes
+  // from the project being checked.
+  var SERVER = { command: 'npx', args: ['-y', 'kryptheon-mcp'] };
+  var MCP_JSON = JSON.stringify({ mcpServers: { kryptheon: SERVER } }, null, 2);
+  var VSCODE_JSON = JSON.stringify({ servers: { kryptheon: SERVER } }, null, 2);
+  var AI_TOOLS = [
+    { id: 'claude-code', name: 'Claude Code', tested: true,
+      steps: ['Run this once, in any terminal. That is the whole set-up.'],
+      code: 'claude mcp add kryptheon -- npx -y kryptheon-mcp', file: 'terminal' },
+    { id: 'cursor', name: 'Cursor', tested: false,
+      oneClick: { href: 'cursor://anysphere.cursor-deeplink/mcp/install?name=kryptheon&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImtyeXB0aGVvbi1tY3AiXX0=', label: 'Add to Cursor' },
+      steps: ['Press Add to Cursor. Cursor asks you to confirm - say yes.', 'Or by hand: paste the config into mcp.json in the .cursor folder of your home folder.'],
+      code: MCP_JSON, file: '~/.cursor/mcp.json' },
+    { id: 'vscode', name: 'VS Code', tested: false,
+      oneClick: { href: 'vscode:mcp/install?' + encodeURIComponent(JSON.stringify({ name: 'kryptheon', command: 'npx', args: ['-y', 'kryptheon-mcp'] })), label: 'Install in VS Code' },
+      steps: ['Press Install in VS Code and confirm.', 'Or by hand: run MCP: Add Server from the Command Palette, or put the config in .vscode/mcp.json - VS Code calls the list "servers", not "mcpServers".'],
+      code: VSCODE_JSON, file: '.vscode/mcp.json' },
+    { id: 'antigravity', name: 'Antigravity', tested: false,
+      steps: ['Open Settings, bottom left, then Customizations, then Add MCP. The MCP Store opens.', 'Click Manage MCP Servers, then View raw config.', 'Paste the config and save. Antigravity reloads it by itself.'],
+      code: MCP_JSON, file: '~/.gemini/config/mcp_config.json' },
+    { id: 'windsurf', name: 'Windsurf', tested: false,
+      steps: ['In the Cascade panel, open the ... menu at the top right and click Open MCP config file.', 'Paste the config and save.'],
+      note: 'Windsurf is Devin Desktop now. Use the menu rather than hunting for the file: newer versions keep it in %APPDATA%\\devin, older ones in .codeium\\windsurf.',
+      code: MCP_JSON, file: 'mcp_config.json' },
+    { id: 'claude-desktop', name: 'Claude Desktop', tested: false,
+      steps: ['From the Claude menu choose Settings..., then Developer, then Edit Config.', 'Paste the config and save.', 'Quit Claude completely - not just the window - and open it again.'],
+      code: MCP_JSON, file: 'claude_desktop_config.json' },
+    { id: 'codex', name: 'Codex', tested: false,
+      steps: ['Run this once, in any terminal.'],
+      code: 'codex mcp add kryptheon -- npx -y kryptheon-mcp', file: 'terminal' },
+  ];
+  var aiTool = 'claude-code';
+
+  function renderAI() {
+    var tabs = byId('aiTabs');
+    var panel = byId('aiPanel');
+    if (!tabs || !panel) return;
+    clear(tabs);
+    clear(panel);
+    AI_TOOLS.forEach(function (t, i) {
+      var b = el('button', 'ai-tab' + (t.id === aiTool ? ' on' : ''));
       b.type = 'button';
-      b.addEventListener('click', function () { range = r[0]; renderRange(); renderChart(); });
-      box.appendChild(b);
+      b.setAttribute('role', 'tab');
+      b.setAttribute('aria-selected', t.id === aiTool ? 'true' : 'false');
+      b.appendChild(el('span', 'ai-num', String(i + 1).padStart(2, '0')));
+      b.appendChild(el('span', 'ai-name', t.name));
+      if (t.oneClick) b.appendChild(el('span', 'ai-tag', '1-click'));
+      b.addEventListener('click', function () { aiTool = t.id; renderAI(); });
+      tabs.appendChild(b);
     });
-  }
-
-  function renderChart() {
-    var box = byId('chart');
-    clear(box);
-    var runs = state.runs.slice().reverse();
-    if (range !== 'all') {
-      var since = Date.now() - Number(range) * 86400000;
-      runs = runs.filter(function (r) { return new Date(r.runAt).getTime() >= since; });
-    }
-    byId('chartSub').textContent = runs.length
-      ? plural(runs.length, 'run') + ' - ' + shortDate(runs[0].runAt) + ' to ' + shortDate(runs[runs.length - 1].runAt) + ' - red dots broke'
-      : 'No runs in this range';
-    if (!runs.length) {
-      box.appendChild(el('p', 'empty', 'No recorded flows have been replayed in this range.'));
-      return;
+    var tool = AI_TOOLS.filter(function (t) { return t.id === aiTool; })[0] || AI_TOOLS[0];
+    panel.appendChild(el('span', 'ai-badge' + (tool.tested ? ' tested' : ''), tool.tested ? 'Tested by hand' : "From " + tool.name + "'s own docs - not tested by hand yet"));
+    panel.appendChild(el('h4', null, tool.name));
+    if (tool.oneClick) {
+      var oc = el('div', 'ai-oneclick');
+      var link = el('a', 'btn sun', tool.oneClick.label + ' →');
+      link.href = tool.oneClick.href;
+      oc.appendChild(link);
+      oc.appendChild(el('small', null, 'or by hand, below'));
+      panel.appendChild(oc);
     }
-    var W = 720;
-    var H = 210;
-    var L = 40;
-    var R = 12;
-    var T = 18;
-    var B = 28;
-    var top = Math.max(1, Math.max.apply(null, runs.map(function (r) { return (r.passed || 0) + (r.failed || 0); })));
-    var x = function (i) { return runs.length === 1 ? L + (W - L - R) / 2 : L + (i * (W - L - R)) / (runs.length - 1); };
-    var y = function (v) { return T + (H - T - B) * (1 - v / top); };
-    var svg = svgEl('svg', { viewBox: '0 0 ' + W + ' ' + H, preserveAspectRatio: 'none', role: 'img', 'aria-label': 'Recorded flows that held, per run' });
-    var defs = svgEl('defs');
-    var grad = svgEl('linearGradient', { id: 'kfill', x1: 0, y1: 0, x2: 0, y2: 1 });
-    grad.appendChild(svgEl('stop', { offset: '0%', 'stop-color': '#f39a5c', 'stop-opacity': 0.42 }));
-    grad.appendChild(svgEl('stop', { offset: '100%', 'stop-color': '#fbd3b5', 'stop-opacity': 0.04 }));
-    defs.appendChild(grad);
-    var stroke = svgEl('linearGradient', { id: 'kline', x1: 0, y1: 0, x2: 1, y2: 0 });
-    stroke.appendChild(svgEl('stop', { offset: '0%', 'stop-color': '#d49b33' }));
-    stroke.appendChild(svgEl('stop', { offset: '100%', 'stop-color': '#e5652b' }));
-    defs.appendChild(stroke);
-    svg.appendChild(defs);
-    var steps = top <= 4 ? top : 4;
-    for (var g = 0; g <= steps; g++) {
-      var v = Math.round((top * g) / steps);
-      svg.appendChild(svgEl('line', { x1: L, x2: W - R, y1: y(v), y2: y(v), stroke: 'rgba(138,109,94,0.14)', 'stroke-width': 1 }));
-      var lab = svgEl('text', { x: L - 10, y: y(v) + 4, 'text-anchor': 'end', 'font-size': 11, fill: '#8a6d5e' });
-      lab.textContent = String(v);
-      svg.appendChild(lab);
-    }
-    var pts = runs.map(function (r, i) { return [x(i), y(r.passed || 0)]; });
-    var line = pts.map(function (p, i) { return (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1); }).join(' ');
-    var area = line + ' L' + pts[pts.length - 1][0].toFixed(1) + ' ' + (H - B) + ' L' + pts[0][0].toFixed(1) + ' ' + (H - B) + ' Z';
-    svg.appendChild(svgEl('path', { d: area, fill: 'url(#kfill)' }));
-    svg.appendChild(svgEl('path', { d: line, fill: 'none', stroke: 'url(#kline)', 'stroke-width': 3, 'stroke-linejoin': 'round', 'stroke-linecap': 'round' }));
-    runs.forEach(function (r, i) {
-      if (r.failed) svg.appendChild(svgEl('circle', { cx: pts[i][0], cy: pts[i][1], r: 5, fill: '#c2412d', stroke: '#fffaf5', 'stroke-width': 2 }));
+    var ol = el('ol', 'ai-steps');
+    tool.steps.forEach(function (s, i) {
+      var li = el('li');
+      li.appendChild(el('span', null, String(i + 1)));
+      li.appendChild(el('div', null, s));
+      ol.appendChild(li);
     });
-    // All on one day: the date says nothing, the time does.
-    var sameDay = shortDate(runs[0].runAt) === shortDate(runs[runs.length - 1].runAt);
-    var labels = Math.min(runs.length, 6);
-    var lastLabel = '';
-    for (var k = 0; k < labels; k++) {
-      var idx = labels === 1 ? 0 : Math.round((k * (runs.length - 1)) / (labels - 1));
-      var text = sameDay
-        ? new Date(runs[idx].runAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
-        : shortDate(runs[idx].runAt);
-      // Two runs in the same minute (or day) would print the same label twice.
-      if (text === lastLabel) continue;
-      lastLabel = text;
-      var t = svgEl('text', { x: x(idx), y: H - 6, 'text-anchor': 'middle', 'font-size': 11, fill: '#8a6d5e' });
-      t.textContent = text;
-      svg.appendChild(t);
-    }
-    var ring = svgEl('circle', { r: 7, fill: '#fffaf5', stroke: '#e5652b', 'stroke-width': 3 });
-    svg.appendChild(ring);
-    box.appendChild(svg);
-    var stem = el('div', 'stem');
-    var tip = el('div', 'tip');
-    var tDate = el('div', 't-date');
-    var tVal = el('div', 't-val');
-    tip.appendChild(tDate);
-    tip.appendChild(tVal);
-    box.appendChild(stem);
-    box.appendChild(tip);
-
-    function point(i) {
-      var r = runs[i];
-      ring.setAttribute('cx', pts[i][0]);
-      ring.setAttribute('cy', pts[i][1]);
-      ring.setAttribute('stroke', r.failed ? '#c2412d' : '#e5652b');
-      var rect = svg.getBoundingClientRect();
-      var px = (pts[i][0] / W) * rect.width;
-      var py = (pts[i][1] / H) * rect.height;
-      tDate.textContent = when(r.runAt);
-      clear(tVal);
-      var dot = el('i');
-      dot.style.background = r.failed ? '#c2412d' : '#3b8657';
-      tVal.appendChild(dot);
-      tVal.appendChild(el('span', null, (r.passed || 0) + ' held' + (r.failed ? ', ' + r.failed + ' broke' : '')));
-      tip.style.left = px + 'px';
-      tip.style.top = Math.max(0, py - 22) + 'px';
-      stem.style.left = px + 'px';
-      stem.style.top = Math.max(0, py - 22) + 'px';
-      stem.style.height = '14px';
+    panel.appendChild(ol);
+    var plate = el('div', 'ai-plate');
+    var bar = el('div', 'ai-plate-bar');
+    bar.appendChild(el('span', null, tool.file));
+    var cp = el('button', null, 'Copy');
+    cp.type = 'button';
+    cp.addEventListener('click', function () { copy(tool.code, tool.file === 'terminal' ? 'Command copied - run it in a terminal' : 'Config copied - paste it into ' + tool.file); });
+    bar.appendChild(cp);
+    plate.appendChild(bar);
+    plate.appendChild(el('pre', null, tool.code));
+    panel.appendChild(plate);
+    if (tool.note) panel.appendChild(el('p', 'ai-note', tool.note));
+    if (tool.file !== 'terminal') {
+      panel.appendChild(el('p', 'ai-note', 'On Windows, if it says it cannot start npx: use "command": "cmd" and "args": ["/c", "npx", "-y", "kryptheon-mcp"] instead.'));
     }
-    svg.addEventListener('mousemove', function (e) {
-      var rect = svg.getBoundingClientRect();
-      var mx = ((e.clientX - rect.left) / rect.width) * W;
-      var best = 0;
-      pts.forEach(function (p, i) { if (Math.abs(p[0] - mx) < Math.abs(pts[best][0] - mx)) best = i; });
-      point(best);
-    });
-    requestAnimationFrame(function () { if (!byId('view-dashboard').hidden) point(runs.length - 1); });
-  }
-
-  /* ----------------------------------- donut ----------------------------------- */
-
-  function renderDonut() {
-    var box = byId('donut');
-    clear(box);
-    var by = { regression: 0, frontend: 0, data: 0 };
-    state.findings.forEach(function (f) { if (by[f.check] !== undefined) by[f.check]++; });
-    var total = state.findings.length;
-    var svg = svgEl('svg', { viewBox: '0 0 120 120', role: 'img', 'aria-label': 'Open findings by check' });
-    var R = 44;
-    var C = 2 * Math.PI * R;
-    svg.appendChild(svgEl('circle', { cx: 60, cy: 60, r: R, fill: 'none', stroke: '#f7e4d4', 'stroke-width': 16 }));
-    var offset = 0;
-    Object.keys(by).forEach(function (k) {
-      if (!by[k]) return;
-      var len = (by[k] / total) * C;
-      svg.appendChild(svgEl('circle', {
-        cx: 60, cy: 60, r: R, fill: 'none', stroke: CHECK_COLOR[k], 'stroke-width': 16,
-        'stroke-dasharray': Math.max(0, len - 2).toFixed(2) + ' ' + (C - Math.max(0, len - 2)).toFixed(2),
-        'stroke-dashoffset': (-offset).toFixed(2), transform: 'rotate(-90 60 60)', 'stroke-linecap': 'butt',
-      }));
-      offset += len;
-    });
-    box.appendChild(svg);
-    var center = el('div', 'center');
-    center.appendChild(el('b', null, total));
-    center.appendChild(el('span', null, 'open'));
-    box.appendChild(center);
-    var legend = byId('legend');
-    clear(legend);
-    Object.keys(by).forEach(function (k) {
-      var row = el('div', 'row');
-      var dot = el('i');
-      dot.style.background = CHECK_COLOR[k];
-      row.appendChild(dot);
-      row.appendChild(el('span', null, CHECK_NAME[k]));
-      row.appendChild(el('span', 'v', by[k]));
-      legend.appendChild(row);
-    });
+    panel.appendChild(el('p', 'ai-note', 'To let it check your database too, add "env": { "KN_DATABASE_URL": "postgresql://..." } to the kryptheon entry. Never paste the connection string into the chat - that puts the password to your whole database in a transcript.'));
+    var then = el('p', 'ai-then');
+    then.appendChild(document.createTextNode('Then just ask your assistant: '));
+    then.appendChild(el('b', null, '“Check my app.”'));
+    panel.appendChild(then);
   }
 
   /* ---------------------------------- findings ---------------------------------- */
 
+  var statusFilter = 'all';
+  var query = '';
+
   function renderStatusFilter() {
     var box = byId('statusFilter');
     clear(box);
@@ -583,7 +388,6 @@
       box.appendChild(b);
     });
   }
-
   function statusTag(f) {
     var t = el('span', 'tag ' + (f.status === 'confirmed' ? 'ember' : 'amber'));
     t.appendChild(el('span', f.status === 'confirmed' ? 'g-dot' : 'g-half'));
@@ -594,23 +398,10 @@
     var tone = /CRITICAL/.test(sev) ? 'ember' : sev === 'HIGH' ? 'sun' : sev === 'MEDIUM' ? 'amber' : 'leaf';
     return el('span', 'tag ' + tone, sev);
   }
-  function confidence(level) {
-    var box = el('div', 'conf');
-    var m = el('div', 'meter sunken');
-    var bar = el('i');
-    bar.style.width = (level === 'high' ? 100 : level === 'medium' ? 66 : 33) + '%';
-    m.appendChild(bar);
-    box.appendChild(m);
-    box.appendChild(el('span', null, level));
-    return box;
-  }
 
   var VERDICT_TONE = { fixed: 'leaf', 'still open': 'ember', 'gone with its file': 'amber', 'could not confirm': 'amber' };
 
-  function detailRow(f) {
-    var tr = el('tr', 'detail');
-    var td = el('td');
-    td.colSpan = 6;
+  function detailBox(f) {
     var box = el('div', 'detail-box');
     box.appendChild(el('div', 'd-step', 'WHAT IS WRONG'));
     box.appendChild(el('div', 'd-text', f.detail || f.headline));
@@ -635,70 +426,53 @@
     if (f.attempts && f.attempts.length) {
       var list = el('div', 'attempts');
       f.attempts.slice(-4).reverse().forEach(function (a) {
-        var row = el('div');
-        row.appendChild(el('span', 'tag ' + (VERDICT_TONE[a.verdict] || ''), a.verdict));
-        row.appendChild(el('span', null, 'Re-checked ' + ago(a.at) + (a.why ? ' - ' + a.why : '') +
-          (a.newProblems ? ' - ' + plural(a.newProblems, 'new problem') : '')));
-        list.appendChild(row);
+        var r = el('div');
+        r.appendChild(el('span', 'tag ' + (VERDICT_TONE[a.verdict] || ''), a.verdict));
+        r.appendChild(el('span', null, 'Re-checked ' + ago(a.at) + (a.why ? ' - ' + a.why : '') + (a.newProblems ? ' - ' + plural(a.newProblems, 'new problem') : '')));
+        list.appendChild(r);
       });
       box.appendChild(list);
     }
-    td.appendChild(box);
-    tr.appendChild(td);
-    return tr;
+    return box;
   }
 
   function renderFindings() {
-    var body = byId('findingRows');
+    var body = byId('findingList');
     clear(body);
-    var q = query.trim().toLowerCase();
     var shown = state.findings.filter(function (f) {
       if (statusFilter === 'confirmed' && f.status !== 'confirmed') return false;
       if (statusFilter === 'verify' && f.status === 'confirmed') return false;
-      if (!q) return true;
-      return [f.headline, f.where, f.detail, f.check, f.id].join(' ').toLowerCase().indexOf(q) !== -1;
+      return true;
     });
     byId('findingBadge').textContent = shown.length + (shown.length !== state.findings.length ? ' of ' + state.findings.length : '');
     if (!shown.length) {
-      var tr = el('tr');
-      var td = el('td', 'empty', state.findings.length ? 'Nothing matches.' : 'Nothing found by the checks that are on and have run. That is not the same as nothing wrong - see which checks are not built yet.');
-      td.colSpan = 6;
-      tr.appendChild(td);
-      body.appendChild(tr);
+      body.appendChild(el('p', 'empty', state.findings.length ? 'Nothing matches.' : 'Nothing found by the checks that are on and have run. That is not the same as nothing wrong - see which checks are not built yet.'));
       return;
     }
     shown.forEach(function (f) {
-      var tr = el('tr', 'row ' + (f.status === 'confirmed' ? 'bad' : 'warn'));
-      var c1 = el('td');
-      c1.appendChild(el('div', 'f-title', f.headline));
-      c1.appendChild(el('div', 'f-id', '#' + f.id + (openRow === f.id ? '' : '  -  click for the fix prompt')));
-      tr.appendChild(c1);
-      var c2 = el('td');
-      c2.appendChild(el('span', 'tag ' + (CHECK_TONE[f.check] || ''), CHECK_NAME[f.check] || f.check));
-      tr.appendChild(c2);
-      var c3 = el('td');
-      c3.appendChild(statusTag(f));
-      tr.appendChild(c3);
-      var c4 = el('td');
-      c4.appendChild(sevTag(f.severity));
-      tr.appendChild(c4);
-      tr.appendChild(el('td', 'where', f.where));
-      var c6 = el('td');
-      c6.appendChild(confidence(f.confidence));
-      tr.appendChild(c6);
-      tr.addEventListener('click', function () {
-        openRow = openRow === f.id ? null : f.id;
-        renderFindings();
-      });
-      body.appendChild(tr);
-      if (openRow === f.id) body.appendChild(detailRow(f));
+      var card = el('div', 'finding ' + (f.status === 'confirmed' ? 'bad' : 'warn'));
+      var head = el('button', 'finding-head');
+      head.type = 'button';
+      var left = el('div', 'finding-left');
+      left.appendChild(el('div', 'f-title', f.headline));
+      var meta = el('div', 'f-meta');
+      meta.appendChild(sevTag(f.severity));
+      meta.appendChild(statusTag(f));
+      meta.appendChild(el('span', 'tag ' + (CHECK_TONE[f.check] || ''), CHECK_NAME[f.check] || f.check));
+      meta.appendChild(el('span', 'f-where', f.where));
+      left.appendChild(meta);
+      head.appendChild(left);
+      head.appendChild(icon(openRow === f.id ? 'change' : 'arrow', 18));
+      head.addEventListener('click', function () { openRow = openRow === f.id ? null : f.id; renderFindings(); });
+      card.appendChild(head);
+      if (openRow === f.id) card.appendChild(detailBox(f));
+      body.appendChild(card);
     });
   }
 
   /* -------------------------------- other views -------------------------------- */
 
   var LOOKS_SHOWN = 12;
-
   function renderTimeline() {
     var box = byId('timeline');
     clear(box);
@@ -730,11 +504,7 @@
       box.appendChild(item);
     });
     if (looks.length > LOOKS_SHOWN) {
-      var more = button('sm more', null, allLooks ? 'Show the latest ' + LOOKS_SHOWN : 'Show all ' + looks.length, function () {
-        allLooks = !allLooks;
-        renderTimeline();
-      });
-      box.appendChild(more);
+      box.appendChild(button('sm', null, allLooks ? 'Show the latest ' + LOOKS_SHOWN : 'Show all ' + looks.length, function () { allLooks = !allLooks; renderTimeline(); }));
     }
   }
 
@@ -743,23 +513,19 @@
     clear(box);
     var list = state.proven || [];
     byId('fixBadge').textContent = String(list.length);
-    if (!list.length) {
-      box.appendChild(el('p', 'empty', 'No fix has been proven yet. Open a finding, fix it, and press Re-check.'));
-      return;
-    }
+    if (!list.length) { box.appendChild(el('p', 'empty', 'No fix has been proven yet. Open a finding, fix it, and press Re-check.')); return; }
     list.forEach(function (p) {
-      var row = el('div', 'fix-row');
+      var row = el('div', 'line-row');
       row.appendChild(el('span', 'tag leaf', 'FIXED'));
-      var text = el('div', 'fr-text');
+      var text = el('div', 'lr-text');
       text.appendChild(el('div', null, p.headline));
-      text.appendChild(el('div', 'fr-sub', p.where + ' - proven ' + ago(p.at) + (p.newProblems ? ' - ' + plural(p.newProblems, 'new problem') + ' at the time' : '')));
+      text.appendChild(el('div', 'lr-sub', p.where + ' - proven ' + ago(p.at) + (p.newProblems ? ' - ' + plural(p.newProblems, 'new problem') + ' at the time' : '')));
       row.appendChild(text);
       box.appendChild(row);
     });
   }
 
   var STATE_TONE = { 'problems found': 'ember', 'things to check': 'amber', 'last run held': 'leaf', 'nothing found': 'leaf' };
-
   function checkSwitch(c) {
     var sw = el('label', 'switch');
     var input = el('input');
@@ -772,7 +538,6 @@
     sw.appendChild(el('span', 'track'));
     return sw;
   }
-
   function renderChecks() {
     var box = byId('checkList');
     clear(box);
@@ -782,31 +547,31 @@
     state.checks.forEach(function (c) {
       if (!c.available) {
         missing++;
-        var row = el('div', 'na sunken');
+        var row = el('div', 'na');
         row.appendChild(checkSwitch(c));
-        var name = el('div', null, c.label);
-        name.appendChild(el('span', 'na-lock', 'NOT AVAILABLE'));
-        row.appendChild(name);
+        var nm = el('div', null, c.label);
+        nm.appendChild(el('span', 'na-lock', 'NOT AVAILABLE'));
+        row.appendChild(nm);
         na.appendChild(row);
         return;
       }
-      var card = el('div', 'check raised');
+      var card = el('div', 'check');
       var top = el('div', 'c-top');
       top.appendChild(el('div', 'c-name', c.label));
       top.appendChild(checkSwitch(c));
       card.appendChild(top);
-      card.appendChild(el('div', null)).appendChild(el('span', 'tag ' + (STATE_TONE[c.state] || ''), c.state));
+      var st = el('div');
+      st.appendChild(el('span', 'tag ' + (STATE_TONE[c.state] || ''), c.state));
+      card.appendChild(st);
       if (c.what) card.appendChild(el('div', 'c-what', c.what));
-      var foot = el('div', 'c-foot');
       if (c.runnable && c.enabled) {
         var run = button('sm', 'play', 'Run now', function () { runChecks([c.id], run); });
         run.setAttribute('data-action', 'run');
         run.disabled = busy;
-        foot.appendChild(run);
+        card.appendChild(run);
       } else if (!c.enabled) {
-        foot.appendChild(el('span', 'note', 'Switched off - it will not run.'));
+        card.appendChild(el('div', 'c-what', 'Switched off - it will not run.'));
       }
-      card.appendChild(foot);
       box.appendChild(card);
     });
     byId('naBadge').textContent = String(missing);
@@ -816,43 +581,19 @@
     var box = byId('runList');
     clear(box);
     byId('runBadge').textContent = String(state.runs.length);
-    if (!state.runs.length) {
-      box.appendChild(el('p', 'empty', 'No recorded flows have been replayed yet. Record one with npx kryptheon record, then press Run checks.'));
-      return;
-    }
+    if (!state.runs.length) { box.appendChild(el('p', 'empty', 'No recorded flows have been replayed yet. Record one with npx kryptheon record, then press Run checks.')); return; }
     state.runs.slice(0, 30).forEach(function (r) {
-      var row = el('div', 'fix-row');
+      var row = el('div', 'line-row');
       row.appendChild(el('span', 'tag ' + (r.failed ? 'ember' : 'leaf'), r.failed ? r.failed + ' broke' : 'held'));
-      var text = el('div', 'fr-text');
+      var text = el('div', 'lr-text');
       text.appendChild(el('div', null, (r.passed || 0) + ' held, ' + (r.failed || 0) + ' broke'));
-      text.appendChild(el('div', 'fr-sub', when(r.runAt)));
+      text.appendChild(el('div', 'lr-sub', when(r.runAt)));
       row.appendChild(text);
       if (r.failed) row.appendChild(button('sm', 'arrow', 'See the finding', function () { go('findings', 'confirmed'); }));
       box.appendChild(row);
     });
   }
 
-  var BADGE_STATES = [
-    ['Active', 'This exact version was checked and held.'],
-    ['Outdated', 'The project changed after it was verified.'],
-    ['Revalidation required', 'A check found something new - verify again.'],
-    ['Revoked', 'Withdrawn. The badge says so publicly.'],
-  ];
-
-  function renderVerification() {
-    byId('verifyBadge').textContent = state.verification.state;
-    byId('verifyText').textContent = 'Not verified. ' + state.verification.why +
-      ' When it is built, a verification will stand for one version of this project, and a changed version will need it again. These are the states it will have:';
-    var box = byId('verifyStates');
-    clear(box);
-    BADGE_STATES.forEach(function (s) {
-      var card = el('div', 'state-card sunken');
-      card.appendChild(el('b', null, s[0]));
-      card.appendChild(el('span', null, s[1]));
-      box.appendChild(card);
-    });
-  }
-
   var STORE_FILES = [
     ['baselines.json', 'what each page looked like the last time it worked'],
     ['history.jsonl', 'every run of your recorded flows'],
@@ -864,10 +605,8 @@
     ['fixes.jsonl', 'every re-check and its verdict'],
     ['config.json', 'which checks are switched on'],
   ];
-
   function renderStorage() {
-    byId('storeNote').textContent = 'Everything on this dashboard is read from this folder on your machine. Nothing is sent anywhere. ' +
-      'Your project keeps only its recordings in tests/.';
+    byId('storeNote').textContent = 'Everything on this dashboard is read from this folder on your machine. Nothing is sent anywhere. Your project keeps only its recordings in tests/.';
     byId('storePath').textContent = state.project.storeDir;
     var box = byId('storeFiles');
     clear(box);
@@ -879,15 +618,6 @@
     });
   }
 
-  function renderWhen() {
-    Object.keys(WHEN).forEach(function (id) {
-      var box = byId('when-' + id);
-      clear(box);
-      box.appendChild(el('b', 'lbl', 'THIS SECTION'));
-      box.appendChild(rich(el('span'), WHEN[id]));
-    });
-  }
-
   /* ---------------------------------- actions ---------------------------------- */
 
   function recheck(f, btn) {
@@ -898,21 +628,13 @@
     btn.appendChild(el('span', null, f.check === 'regression' ? 'Replaying...' : 'Re-checking...'));
     post('/api/recheck', { id: f.id }).then(function (r) {
       var words = { fixed: 'FIXED', 'still open': 'STILL OPEN', 'gone with its file': 'GONE WITH ITS FILE - not the same as fixed', 'could not confirm': 'COULD NOT CONFIRM' };
-      toast((words[r.verdict] || r.verdict) + (r.why ? ' - ' + r.why : '') +
-        (r.newProblems && r.newProblems.length ? ' - ' + plural(r.newProblems.length, 'new problem') : ''));
-    }).catch(function (err) {
-      toast('Re-check failed: ' + err.message);
-    }).then(function () {
-      setBusy(false);
-      return load();
-    });
+      toast((words[r.verdict] || r.verdict) + (r.why ? ' - ' + r.why : '') + (r.newProblems && r.newProblems.length ? ' - ' + plural(r.newProblems.length, 'new problem') : ''));
+    }).catch(function (err) { toast('Re-check failed: ' + err.message); }).then(function () { setBusy(false); return load(); });
   }
 
   function runChecks(ids, btn) {
     if (busy || !ids.length) return;
     setBusy(true);
-    var error = byId('checkError');
-    error.hidden = true;
     clear(btn);
     btn.appendChild(el('span', 'spin'));
     btn.appendChild(el('span', null, 'Running...'));
@@ -920,84 +642,56 @@
       return chain.then(function () { return post('/api/run', { id: id }); });
     }, Promise.resolve()).then(function () {
       toast('Finished: ' + ids.map(function (id) { return CHECK_NAME[id] || id; }).join(', '));
-    }).catch(function (err) {
-      error.textContent = 'Run failed: ' + err.message;
-      error.hidden = false;
-      toast('Run failed: ' + err.message);
-    }).then(function () {
-      setBusy(false);
-      return load();
-    });
+    }).catch(function (err) { toast('Run failed: ' + err.message); }).then(function () { setBusy(false); return load(); });
   }
 
   function setCheck(id, on, input) {
-    var error = byId('checkError');
-    error.hidden = true;
     post('/api/check', { id: id, on: on }).then(function () {
       toast((on ? 'Switched on: ' : 'Switched off: ') + (CHECK_NAME[id] || id));
       return load();
-    }).catch(function (err) {
-      input.checked = !on;
-      error.textContent = 'Not saved: ' + err.message;
-      error.hidden = false;
-    });
+    }).catch(function (err) { input.checked = !on; toast('Not saved: ' + err.message); });
   }
 
-  byId('search').addEventListener('input', function (e) {
-    query = e.target.value;
-    if (query.trim() && currentView() !== 'findings') go('findings');
-    if (state) renderFindings();
-  });
-  byId('bell').addEventListener('click', function () { go('changes'); });
   byId('runAll').addEventListener('click', function () {
     if (!state) return;
     var ids = state.checks.filter(function (c) { return c.runnable && c.enabled; }).map(function (c) { return c.id; });
-    if (!ids.length) {
-      toast('Nothing can run from here yet - switch a check on, or record a flow.');
-      return;
-    }
+    if (!ids.length) { toast('Nothing can run from here yet - switch a check on, or record a flow.'); return; }
     runChecks(ids, byId('runAll'));
   });
 
   /* ----------------------------------- load ----------------------------------- */
 
+  function renderTop() {
+    var run = byId('runAll');
+    if (!busy) { clear(run); run.appendChild(icon('play', 15)); run.appendChild(el('span', null, 'Run checks')); }
+  }
+
   function render(next) {
     if (!next) return;
     state = next;
     renderSide();
     renderTop();
-    renderSky();
-    renderKpis();
-    renderGuide();
-    renderRange();
-    renderChart();
-    renderDonut();
+    renderNow();
+    renderSteps();
     renderStatusFilter();
     renderFindings();
     renderTimeline();
     renderFixes();
     renderChecks();
     renderRuns();
-    renderVerification();
     renderStorage();
   }
 
   function load() {
     return fetch('/api/state', { cache: 'no-store' })
-      .then(function (res) {
-        if (!res.ok) throw new Error('the dashboard answered ' + res.status);
-        return res.json();
-      })
+      .then(function (res) { if (!res.ok) throw new Error('the dashboard answered ' + res.status); return res.json(); })
       .then(render)
-      .catch(function (err) {
-        byId('subline').textContent = 'Could not load: ' + err.message;
-      });
+      .catch(function (err) { byId('subline').textContent = 'Could not load: ' + err.message; });
   }
 
-  renderWhen();
+  renderAI();
   showView();
   load();
-  // Not while something runs, and not while a finding is open being read:
-  // a re-render would take the spinner away or close what is being read.
+  // Not while something runs, and not while a finding is open being read.
   setInterval(function () { if (!busy && !openRow) load(); }, 5000);
 })();