npm - @ia-qa/self-healing - Versions diffs - 1.6.7 → 1.6.8 - Mend

@ia-qa/self-healing 1.6.7 → 1.6.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/README.md +94 -0
package/TUTORIAL.md +112 -2
package/assets/logoKawaiiGreenTiny.png +0 -0
package/dist/cli/args.js +4 -2
package/dist/cli/args.js.map +1 -1
package/dist/cli/diff.d.ts +6 -1
package/dist/cli/diff.js +114 -4
package/dist/cli/diff.js.map +1 -1
package/dist/cli/emit.d.ts +71 -0
package/dist/cli/emit.js +150 -0
package/dist/cli/emit.js.map +1 -0
package/dist/cli/fix.js +36 -0
package/dist/cli/fix.js.map +1 -1
package/dist/cli/history.d.ts +12 -0
package/dist/cli/history.js +95 -0
package/dist/cli/history.js.map +1 -0
package/dist/cli/index.js +53 -1
package/dist/cli/index.js.map +1 -1
package/dist/cli/init.js +32 -0
package/dist/cli/init.js.map +1 -1
package/dist/cli/map.js +60 -0
package/dist/cli/map.js.map +1 -1
package/dist/cli/run.js +77 -7
package/dist/cli/run.js.map +1 -1
package/dist/cli/ui.d.ts +16 -0
package/dist/cli/ui.js +275 -0
package/dist/cli/ui.js.map +1 -0
package/dist/evidence.d.ts +130 -0
package/dist/evidence.js +232 -0
package/dist/evidence.js.map +1 -0
package/dist/history.d.ts +145 -0
package/dist/history.js +230 -0
package/dist/history.js.map +1 -0
package/dist/htmlReport.d.ts +47 -0
package/dist/htmlReport.js +76 -1
package/dist/htmlReport.js.map +1 -1
package/dist/junit.d.ts +53 -0
package/dist/junit.js +150 -0
package/dist/junit.js.map +1 -0
package/dist/mcp/server.js +41 -0
package/dist/mcp/server.js.map +1 -1
package/dist/ui/icon.d.ts +41 -0
package/dist/ui/icon.js +115 -0
package/dist/ui/icon.js.map +1 -0
package/dist/ui/lock.d.ts +40 -0
package/dist/ui/lock.js +138 -0
package/dist/ui/lock.js.map +1 -0
package/dist/ui/page.d.ts +1 -0
package/dist/ui/page.js +584 -0
package/dist/ui/page.js.map +1 -0
package/dist/ui/registry.d.ts +62 -0
package/dist/ui/registry.js +139 -0
package/dist/ui/registry.js.map +1 -0
package/dist/ui/server.d.ts +67 -0
package/dist/ui/server.js +604 -0
package/dist/ui/server.js.map +1 -0
package/dist/ui/shortcut.d.ts +90 -0
package/dist/ui/shortcut.js +176 -0
package/dist/ui/shortcut.js.map +1 -0
package/package.json +2 -1
package/skills/ia-qa-heal/SKILL.md +27 -0

package/dist/ui/page.js ADDED Viewed

@@ -0,0 +1,584 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderConsoleHtml = renderConsoleHtml;
+/**
+ * The console's single page: inline HTML, CSS and JS, no bundler, no dependency,
+ * no external asset. Same discipline as the HTML report — a page that reaches
+ * the network is a page that can leak the contracts of the user's app.
+ *
+ * The chart palette is not a taste call. Verdicts are a **status** scale
+ * (good / warning / critical), so the three steps are reserved, always carry an
+ * icon and a label beside the colour, and were validated against this surface
+ * rather than eyeballed: `#0d9488 / #d97706 / #e11d48` on `#18181b` clears the
+ * lightness band, the chroma floor, CVD separation (ΔE 9.4 worst adjacent),
+ * the normal-vision floor (16.6) and 3:1 contrast. The bright brand green and
+ * amber that the rest of the product uses do **not** clear that bar as chart
+ * fills, which is exactly the kind of thing nobody catches by looking.
+ *
+ * The hotspots chart is a single series and so needs no legend — its title
+ * names it — and one hue is enough.
+ */
+const server_1 = require("./server");
+function renderConsoleHtml(token) {
+    return `<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>ia-qa-heal — console</title>
+<style>
+:root{
+  --bg:#09090b;--surface:#18181b;--surface2:#111113;--border:#27272a;
+  --text:#fafafa;--muted:#a1a1aa;--orange:#f97316;--orange2:#fb923c;
+  --pass:#0d9488;--fix:#d97706;--block:#e11d48;--info:#8b5cf6;
+}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
+a{color:var(--orange2)}
+header{border-bottom:1px solid var(--border);background:linear-gradient(180deg,#1c1005,var(--surface2));padding:18px 0}
+.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
+.head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
+.head-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.picker{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
+.picker select{font:inherit;font-size:12.5px;max-width:340px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:6px 10px;cursor:pointer}
+.picker select:hover{border-color:var(--orange)}
+.brand{font-size:12.5px;font-weight:700;color:var(--orange2);text-decoration:none;border:1px solid #f9731655;background:#f9731614;border-radius:99px;padding:5px 13px;white-space:nowrap}
+.brand:hover{background:#f9731626}
+footer{border-top:1px solid var(--border);background:var(--surface2);padding:20px 0;margin-top:10px}
+.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
+.foot a{font-weight:600;text-decoration:none}
+.foot a:hover{text-decoration:underline}
+h1{margin:0;font-size:17px;letter-spacing:-.01em}
+h2{margin:0 0 12px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
+.sub{color:var(--muted);font-size:12.5px;margin-top:3px}
+main{padding:22px 0 60px}
+section{margin-bottom:26px}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px}
+.grid{display:grid;gap:16px}
+/* Without this the shorter card is stretched to the taller one and shows a
+   block of dead space under its last tile. */
+.cols{grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);align-items:start}
+@media(max-width:900px){.cols{grid-template-columns:1fr}}
+.verdict{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
+.big{font-size:26px;font-weight:800;letter-spacing:-.02em}
+.v-PASS{color:var(--pass)}.v-FIX{color:var(--fix)}.v-BLOCK{color:var(--block)}
+.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}
+.tile{background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:13px 15px}
+.tile .n{font-size:22px;font-weight:700;letter-spacing:-.02em}
+.tile .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
+.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px}
+.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
+.caveat{margin-top:10px;font-size:12px;color:#fcd34d;background:#f59e0b12;border:1px solid #f59e0b33;border-radius:8px;padding:8px 11px}
+.btns{display:flex;flex-direction:column;gap:8px}
+button{font:inherit;font-size:13px;text-align:left;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px 12px;cursor:pointer}
+button:hover:not(:disabled){border-color:var(--orange);color:var(--orange2)}
+button:disabled{opacity:.5;cursor:progress}
+button.w{border-color:#e11d4840}
+button.w:hover:not(:disabled){border-color:var(--block);color:#fda4af}
+.log{margin-top:12px;background:#000;border:1px solid var(--border);border-radius:9px;padding:11px;font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d4d4d8;white-space:pre-wrap;max-height:320px;overflow:auto}
+.res{margin-top:12px;border-radius:10px;padding:12px 14px;border:1px solid}
+.res-ok{background:#0d948814;border-color:#0d948855}
+.res-fix{background:#d9770614;border-color:#d9770655}
+.res-block{background:#e11d4814;border-color:#e11d4855}
+.res-info,.res-warn{background:#8b5cf614;border-color:#8b5cf655}
+.res-stopped{background:#a1a1aa14;border-color:#a1a1aa55}
+.res-head{font-weight:700;font-size:13.5px;display:flex;gap:8px;align-items:baseline}
+.res-what{margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.5}
+.res-run{margin-top:9px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
+.spin{width:11px;height:11px;border:2px solid var(--border);border-top-color:var(--orange);border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
+@keyframes sp{to{transform:rotate(360deg)}}
+details.tech{margin-top:10px}
+details.tech summary{cursor:pointer;font-size:11.5px;color:var(--muted);list-style:none}
+details.tech summary::-webkit-details-marker{display:none}
+details.tech summary::before{content:"▸ ";color:var(--orange2)}
+details.tech[open] summary::before{content:"▾ "}
+.dec{border:1px solid var(--border);border-radius:12px;padding:15px;margin-bottom:13px;background:var(--surface2)}
+.dec-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
+.badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:99px;border:1px solid}
+.b-ambiguous{color:var(--fix);border-color:#d9770655;background:#d9770614}
+.b-lost{color:var(--block);border-color:#e11d4855;background:#e11d4814}
+.b-rebound{color:var(--block);border-color:#e11d4855;background:#e11d4814}
+.dec-label{font-weight:600}
+.dec-page{font-size:11.5px;color:var(--muted);margin-left:auto}
+.num{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;border:1px solid var(--border);border-radius:99px;padding:1px 8px}
+.todo{margin:9px 0 4px;font-size:13px;line-height:1.55;background:#f9731610;border-left:3px solid var(--orange);border-radius:0 8px 8px 0;padding:9px 12px}
+.todo b{color:var(--orange2)}
+.todo code{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:0 5px;font-size:11.5px;color:var(--orange2)}
+.dec.flash{animation:fl 2.2s ease-out}
+@keyframes fl{0%,55%{box-shadow:0 0 0 3px var(--orange)}100%{box-shadow:0 0 0 0 transparent}}
+.lede{margin-top:12px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.lede-ok{color:var(--muted)}
+.cta{font-size:12.5px;padding:5px 12px;border-radius:99px;border:1px solid var(--orange);background:#f9731618;color:var(--orange2);font-weight:600;cursor:pointer}
+.cta:hover{background:#f9731630}
+#goto .cta{margin-top:10px}
+.tile.clickable{cursor:pointer}
+.tile.clickable:hover{border-color:var(--orange)}
+.proj{display:grid;gap:7px}
+.prow{display:flex;gap:14px;font-size:12.5px;align-items:baseline;flex-wrap:wrap}
+.pk{width:120px;color:var(--muted);flex-shrink:0}
+.pv{flex:1;min-width:0;word-break:break-all}
+.pv code{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:11.5px;color:var(--orange2)}
+.sel{font:11.5px ui-monospace,Menlo,monospace;color:var(--orange2);word-break:break-all}
+.sites{margin-top:7px;font-size:11.5px;color:var(--muted)}
+.sites code{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:0 5px;color:#c4b5fd;margin-right:5px}
+.evid-title{font-size:11.5px;color:var(--orange2);font-weight:700;margin:12px 0 8px}
+.figs{display:flex;gap:14px;flex-wrap:wrap}
+figure{margin:0}
+.crop{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
+.crop-inner{position:absolute;top:0;left:0;transform-origin:0 0;background-repeat:no-repeat}
+.crop-hi{position:absolute;outline:2px solid var(--orange);box-shadow:0 0 0 9999px rgba(0,0,0,.58);border-radius:2px}
+figcaption{margin-top:6px;font-size:11px;color:var(--muted);max-width:360px}
+figcaption b{color:var(--text)}
+figcaption code{display:block;margin-top:2px;font-size:10.5px;color:var(--orange2);word-break:break-all}
+.copy{margin-top:6px;font-size:11px;padding:3px 9px}
+.empty{color:var(--muted);font-size:13px}
+table{width:100%;border-collapse:collapse;font-size:12px;margin-top:12px}
+th,td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--border)}
+th{color:var(--muted);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
+td.n{text-align:right;font-variant-numeric:tabular-nums}
+.axis{fill:#71717a;font-size:10px}
+.note{color:var(--muted);font-size:12px;margin-top:8px}
+</style>
+</head><body>
+<header><div class="wrap head">
+  <div>
+    <h1>🩹 ia-qa-heal <span style="color:var(--muted);font-weight:400">console</span></h1>
+    <div class="sub" id="sub">loading…</div>
+  </div>
+  <div class="head-right">
+    <label class="picker" id="pickerWrap" style="display:none">
+      <span>Project</span>
+      <select id="picker"></select>
+    </label>
+    <a class="brand" href="https://ia-qa.com" target="_blank" rel="noopener">ia-qa.com ↗</a>
+  </div>
+</div></header>
+<main><div class="wrap">
+  <section class="grid cols">
+    <div class="card" id="verdictCard"><div class="empty">loading…</div></div>
+    <div class="card">
+      <h2>Actions</h2>
+      <div class="btns" id="actions"></div>
+      <div class="note">Buttons marked ✎ change files on your computer. The others only look. Nothing is ever committed, and nothing leaves this machine.</div>
+      <div id="result"></div>
+    </div>
+  </section>
+  <section class="card">
+    <h2>Decisions waiting for you</h2>
+    <div id="decisions"><div class="empty">loading…</div></div>
+  </section>
+  <section class="card">
+    <h2>Which project is this?</h2>
+    <div id="project"><div class="empty">loading…</div></div>
+  </section>
+  <section class="card">
+    <h2>History</h2>
+    <div id="history"><div class="empty">loading…</div></div>
+  </section>
+</div></main>
+<footer><div class="wrap foot">
+  <span>Local-first self-healing for UI tests — nothing leaves your machine.</span>
+  <span><a href="https://ia-qa.com" target="_blank" rel="noopener">ia-qa.com</a> · <a href="https://ia-qa.com/method" target="_blank" rel="noopener">Method</a> · <a href="https://www.npmjs.com/package/@ia-qa/self-healing" target="_blank" rel="noopener">@ia-qa/self-healing</a></span>
+</div></footer>
+<script>
+const T = ${JSON.stringify(token)};
+const q = (s) => document.querySelector(s);
+const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+const VC = { PASS:'var(--pass)', FIX:'var(--fix)', BLOCK:'var(--block)' };
+const VI = { PASS:'✅', FIX:'🔧', BLOCK:'⛔' };
+async function load() {
+  const r = await fetch('/api/state?t=' + T);
+  render(await r.json());
+}
+function render(s) {
+  renderPicker(s); renderHead(s); renderVerdict(s); renderActions(s);
+  renderDecisions(s); renderHistory(s); renderGoto(s);
+}
+/* The project switcher. It only ever offers folders the server already knows —
+   the value posted back is one of these strings, and the server resolves it
+   against the same list. Nothing here can name a directory the user never
+   opened a console in. */
+function renderPicker(s) {
+  const list = s.projects || [];
+  const wrap = q('#pickerWrap');
+  // Always shown, even with one project. Hiding it until a second appears made
+  // the switcher undiscoverable at exactly the moment someone needed to find
+  // it — and since the only way to get that second project used to be a
+  // terminal, the feature could never start existing.
+  wrap.style.display = '';
+  const sel = q('#picker');
+  sel.innerHTML =
+    list.map((p) =>
+      '<option value="' + esc(p.dir) + '"' + (p.dir === s.activeDir ? ' selected' : '') + '>'
+      + esc(shortDir(p.dir)) + (p.baseUrl ? '  —  ' + esc(p.baseUrl) : '') + '</option>'
+    ).join('')
+    + '<option value="__add__">＋ Add another project…</option>';
+  sel.onchange = async () => {
+    const wantsAdd = sel.value === '__add__';
+    const dir = wantsAdd ? askForFolder() : sel.value;
+    if (!dir) { sel.value = s.activeDir; return; }   // cancelled — put the menu back
+    sel.disabled = true;
+    try {
+      const r = await fetch('/api/project' + (wantsAdd ? '/add' : '') + '?t=' + T, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ dir }),
+      });
+      const next = await r.json();
+      if (next.error) { alert(next.error); sel.disabled = false; render(s); return; }
+      q('#result').innerHTML = '';   // a result from the previous project would be a lie here
+      render(next);
+      scrollTo({ top: 0, behavior: 'smooth' });
+    } catch (e) { alert('Could not switch project: ' + e); render(s); }
+    sel.disabled = false;
+  };
+}
+/* A browser cannot open a folder picker without a file input, and a file input
+   gives us a file, not the directory the user meant. Asking for the path is the
+   honest version — and it is what someone copies out of their editor's title
+   bar or their terminal anyway. */
+function askForFolder() {
+  const v = prompt(
+    'Add a project to this console.\\n\\n'
+    + 'Paste the full path of the project folder — the one you would open in your '
+    + 'editor. It must already contain a .ia-qa folder (run "ia-qa-heal init" there '
+    + 'if it does not).',
+    ''
+  );
+  return v && v.trim() ? v.trim() : null;
+}
+/* Absolute paths are long and all alike at the front. The tail is what tells
+   two projects apart. */
+function shortDir(dir) {
+  const parts = String(dir).split(/[\\\\/]/).filter(Boolean);
+  return parts.length <= 2 ? dir : '…' + '/' + parts.slice(-2).join('/');
+}
+/* "Needs you to decide" used to be the end of the sentence: the thing to decide
+   was several hundred pixels below, with nothing connecting the two. This is the
+   link — placed inside the result card, where the person is actually looking. */
+function renderGoto(s) {
+  const box = q('#goto');
+  if (!box) return;
+  const n = (s.decisions || []).length;
+  if (n === 0) { box.innerHTML = ''; return; }
+  box.innerHTML = '<button class="cta">👇 Show me the ' + n + ' thing' + (n === 1 ? '' : 's') + ' waiting for me</button>';
+  box.querySelector('button').onclick = () => jumpToDecisions();
+}
+function jumpToDecisions() {
+  const first = document.querySelector('.dec');
+  const target = first || q('#decisions');
+  target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  // A scroll alone leaves you wondering which of them you were sent to.
+  if (first) { first.classList.add('flash'); setTimeout(() => first.classList.remove('flash'), 2200); }
+}
+/* Which app, and which tests. A console opened from a desktop icon has to say
+   this out loud: "localhost:3000" is every project this person has, and the
+   folder it is bound to is the only thing that distinguishes them. */
+function renderHead(s) {
+  const p = s.project || {};
+  q('#sub').innerHTML = p.error ? esc(p.error)
+    : '🌐 ' + esc(p.baseUrl || '(no baseUrl)') + ' · ' + esc(p.pages || 0) + ' pages';
+  const fw = (p.frameworks || []).filter((f) => f !== 'pom');
+  q('#project').innerHTML =
+    '<div class="proj">'
+    + row2('App', esc(p.baseUrl || '—'))
+    + row2('Project folder', '<code>' + esc(p.dir || '—') + '</code>')
+    + row2('Tests', (p.testPaths && p.testPaths.length)
+        ? '<code>' + p.testPaths.map(esc).join('</code> <code>') + '</code>'
+          + (p.scannedFiles ? ' · ' + esc(p.scannedFiles) + ' files read' : '')
+          + (fw.length ? ' · ' + fw.map(esc).join(', ') : '')
+        : '<span style="color:var(--muted)">none declared — add "testPaths" to config.json, then “Read my test files again”</span>')
+    + row2('Run with', p.testCommand ? '<code>' + esc(p.testCommand) + '</code>' : '<span style="color:var(--muted)">not set</span>')
+    + '</div>'
+    + '<div class="note">This console is bound to that folder. To look at another project, run <code>ia-qa-heal ui</code> from it (or give it its own desktop icon with <code>ia-qa-heal ui --shortcut</code>).</div>';
+}
+function row2(k, v) {
+  return '<div class="prow"><span class="pk">' + esc(k) + '</span><span class="pv">' + v + '</span></div>';
+}
+function renderVerdict(s) {
+  const v = s.verdict;
+  if (!v) {
+    q('#verdictCard').innerHTML = '<div class="empty">Nothing to compare yet. Capture the app, promote a baseline, then change something and re-capture.</div>';
+    return;
+  }
+  const t = v.totals || {};
+  const cov = s.coverage || { measured: 0, stale: 0 };
+  const total = cov.measured + cov.stale;
+  const waiting = (s.decisions || []).length;
+  q('#verdictCard').innerHTML =
+    '<div class="verdict"><span class="big v-' + esc(v.verdict) + '">' + (VI[v.verdict]||'') + ' ' + esc(v.verdict) + '</span>'
+    + '<span style="color:var(--muted);font-size:12.5px">' + esc(cov.measured) + ' of ' + esc(total) + ' mapped pages measured'
+    + (cov.stale ? ' · ' + esc(cov.stale) + ' not covered by this verdict' : '') + '</span></div>'
+    + (waiting > 0
+        ? '<div class="lede">' + waiting + ' element' + (waiting === 1 ? '' : 's') + ' need' + (waiting === 1 ? 's' : '')
+          + ' you to decide — the tool refused to guess. <button class="cta" id="lede-go">Show me 👇</button></div>'
+        : '<div class="lede lede-ok">Nothing is waiting on you.</div>')
+    + '<div class="tiles">'
+    + tile(t.ok, 'ok') + tile(t.healable, 'healable', 'var(--fix)') + tile(t.ambiguous, 'ambiguous', 'var(--fix)', true)
+    + tile(t.lost, 'lost', 'var(--block)', true) + tile(t.rebound, 'rebound', 'var(--block)', true)
+    + tile((s.nameDrift||[]).length, 'name drift', 'var(--info)')
+    + '</div>';
+  const go = q('#lede-go');
+  if (go) go.onclick = jumpToDecisions;
+  // A tile counting something a human must look at is itself the way there.
+  document.querySelectorAll('#verdictCard .tile.clickable').forEach((el) => (el.onclick = jumpToDecisions));
+}
+function tile(n, l, c, jumps) {
+  const on = jumps && (n ?? 0) > 0;
+  return '<div class="tile' + (on ? ' clickable' : '') + '"'
+    + (on ? ' title="Jump to the ' + esc(l) + ' element' + (n === 1 ? '' : 's') + ' waiting for you"' : '')
+    + '><div class="n"' + (c && n > 0 ? ' style="color:' + c + '"' : '') + '>' + esc(n ?? 0) + '</div>'
+    + '<div class="l">' + esc(l) + (on ? ' ↓' : '') + '</div></div>';
+}
+/* A result is shown in plain words first. The raw command output stays one
+   click away — a manual QA should never have to read "exit 0" to find out
+   whether something worked, and a developer should never lose the detail. */
+const TONE_WORD = {
+  ok:      { icon: '✅', word: 'All good' },
+  fix:     { icon: '🔧', word: 'Repairs are ready' },
+  block:   { icon: '⛔', word: 'Needs you to decide' },
+  warn:    { icon: '⚠️', word: 'Worth a look' },
+  info:    { icon: 'ℹ️', word: 'Done' },
+  // Not a verdict about the app — the command never got far enough to have one.
+  stopped: { icon: '🚧', word: "It couldn't run yet" },
+};
+function renderActions(s) {
+  q('#actions').innerHTML = (s.actions || []).map((a) =>
+    '<button data-a="' + esc(a.id) + '" title="' + esc(a.means) + '"' + (a.writes ? ' class="w"' : '') + '>'
+    + esc(a.label) + (a.writes ? ' ✎' : '') + '</button>'
+  ).join('');
+  document.querySelectorAll('#actions button').forEach((b) => {
+    b.onclick = async () => {
+      const id = b.dataset.a;
+      const label = b.textContent.replace(' ✎', '').trim();
+      const writes = b.classList.contains('w');
+      if (writes && !confirm('“' + label + '” changes files on your computer.\\n\\nNothing is committed — you can still review or undo it afterwards.\\n\\nGo ahead?')) return;
+      document.querySelectorAll('#actions button').forEach((x) => (x.disabled = true));
+      const box = q('#result');
+      box.innerHTML = '<div class="res res-info"><div class="res-run"><span class="spin"></span> Running “' + esc(label) + '” — this can take a moment.</div></div>';
+      try {
+        const r = await fetch('/api/run?t=' + T, {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action: id }),
+        });
+        const out = await r.json();
+        const t = TONE_WORD[out.tone] || TONE_WORD.info;
+        // When it never ran, the action's "what this means" describes something
+        // that did not happen — so it is left out rather than contradicting the
+        // headline right under it.
+        const means = out.tone === 'stopped' ? '' : (out.means || '');
+        box.innerHTML =
+          '<div class="res res-' + esc(out.tone || 'info') + '">'
+          + '<div class="res-head">' + t.icon + ' <span>' + esc(t.word) + '</span></div>'
+          + '<div class="res-what"><b style="color:var(--text)">' + esc(out.headline || '') + '</b></div>'
+          + (means ? '<div class="res-what">' + esc(means) + '</div>' : '')
+          + '<div id="goto"></div>'
+          + '<details class="tech"><summary>Technical detail</summary>'
+          + '<div class="log">' + esc(out.output || '') + '</div></details>'
+          + '</div>';
+      } catch (e) {
+        box.innerHTML = '<div class="res res-block"><div class="res-head">⛔ <span>It could not run</span></div>'
+          + '<div class="res-what">The console lost contact with the command. It is still running on your machine — check the terminal you started it from.</div></div>';
+      }
+      document.querySelectorAll('#actions button').forEach((x) => (x.disabled = false));
+      load();
+    };
+  });
+}
+function cropHtml(page, c) {
+  const w = Math.round(c.width / c.scale), h = Math.round(c.height / c.scale);
+  return '<div class="crop" style="width:' + c.width + 'px;height:' + c.height + 'px">'
+    + '<div class="crop-inner" style="width:' + w + 'px;height:' + h + 'px;transform:scale(' + c.scale + ');'
+    + "background-image:url('/shot/" + encodeURIComponent(page) + ".jpg?t=" + T + "');"
+    + 'background-position:-' + c.offsetX + 'px -' + c.offsetY + 'px">'
+    + '<div class="crop-hi" style="left:' + c.hi.left + 'px;top:' + c.hi.top + 'px;width:' + c.hi.width + 'px;height:' + c.hi.height + 'px"></div>'
+    + '</div></div>';
+}
+function figHtml(page, item) {
+  return '<figure>' + cropHtml(page, item.crop)
+    + '<figcaption><b>' + esc(item.label) + '</b><code>' + esc(item.selector) + '</code>'
+    + '<button class="copy" data-copy="' + esc(item.selector) + '">copy selector</button></figcaption></figure>';
+}
+/* The sentence the console owed and never said: what this person is supposed to
+   DO. Evidence without an instruction is a puzzle, not a tool — and the answer
+   differs per status, so it cannot be one generic line at the top. */
+function todo(r) {
+  const where = r.sites && r.sites.length
+    ? 'your test at <b>' + esc(r.sites[0].file) + ':' + esc(r.sites[0].line) + '</b>'
+    : 'the test that uses it';
+  if (r.rebound) {
+    return 'Your test still passes — on the wrong element. Open ' + where
+      + ' and point it at the right one, or ask a developer for a <code>data-testid</code> on it.';
+  }
+  if (r.status === 'ambiguous') {
+    return 'Pick the right one from the pictures below, copy its selector, and paste it into ' + where
+      + '. The durable fix is a <code>data-testid</code> on that element — then it can never be confused again.';
+  }
+  if (r.status === 'lost') {
+    return 'This element is not on the page any more. Open ' + where
+      + ' and either point it somewhere else or delete the step — nothing can repair this automatically.';
+  }
+  return 'Open ' + where + ' and check it still does what you meant.';
+}
+function renderDecisions(s) {
+  const d = s.decisions || [];
+  if (d.length === 0) {
+    q('#decisions').innerHTML = '<div class="empty">Nothing is waiting on a human. Every drifted row either matched deterministically or did not drift.</div>';
+    return;
+  }
+  q('#decisions').innerHTML = d.map((r, i) => {
+    const kind = r.rebound ? 'rebound' : r.status;
+    let h = '<div class="dec" id="dec-' + i + '"><div class="dec-head">'
+      + '<span class="num">' + (i + 1) + ' of ' + d.length + '</span>'
+      + '<span class="badge b-' + esc(kind) + '">' + esc(kind) + '</span>'
+      + '<span class="dec-label">' + esc(r.label) + '</span>'
+      + '<span class="dec-page">on page “' + esc(r.page) + '”</span></div>'
+      + '<div class="todo"><b>What to do:</b> ' + todo(r) + '</div>'
+      + '<div class="sel">' + esc(r.selector) + '</div>';
+    if (r.rebound) h += '<div class="note" style="color:#fda4af">⚠️ This selector still resolves — onto ' + esc(r.reboundTo) + '. Your suite is green today while acting on the wrong element.</div>';
+    if (r.sites && r.sites.length) {
+      h += '<div class="sites">📇 ' + r.sites.slice(0, 6).map((x) => '<code>' + esc(x.file) + ':' + esc(x.line) + '</code>').join('')
+        + (r.sites.length > 6 ? '+' + (r.sites.length - 6) + ' more' : '') + '</div>';
+    } else {
+      h += '<div class="sites">Not referenced by any test in your inventory — nothing in your suite breaks today, but the app did change here.</div>';
+    }
+    if (r.nowAt) h += '<div class="evid-title">⚠️ What that selector points at today</div><div class="figs">' + figHtml(r.page, r.nowAt) + '</div>';
+    if (r.candidates && r.candidates.length) {
+      h += '<div class="evid-title">Which one did the test mean? ' + r.candidates.length + ' candidate' + (r.candidates.length === 1 ? '' : 's') + ' on the page now</div>'
+        + '<div class="figs">' + r.candidates.map((c) => figHtml(r.page, c)).join('') + '</div>';
+    }
+    if (r.note) h += '<div class="note">' + esc(r.note) + '</div>';
+    if (!r.nowAt && !(r.candidates || []).length && !r.note) {
+      h += '<div class="note">No picture available — run <code>ia-qa-heal map --screenshots</code> to see this element in place.</div>';
+    }
+    return h + '</div>';
+  }).join('');
+  document.querySelectorAll('[data-copy]').forEach((b) => {
+    b.onclick = () => { navigator.clipboard.writeText(b.dataset.copy); b.textContent = 'copied ✓'; setTimeout(() => (b.textContent = 'copy selector'), 1400); };
+  });
+}
+/* ---- history ---------------------------------------------------------- */
+function renderHistory(s) {
+  const h = s.history || {}; const sum = h.summary || {}; const series = (sum.trend && sum.trend.series) || [];
+  if (!series.length) {
+    q('#history').innerHTML = '<div class="empty">No comparable runs recorded yet. Every <code>diff</code> and <code>run</code> writes one line to <code>.ia-qa/history.jsonl</code> — a trend needs a few.</div>';
+    return;
+  }
+  const drift = (e) => (e.counts ? e.counts.healable + e.counts.ambiguous + e.counts.lost + e.counts.rebound : 0);
+  let html = '<div class="tiles">'
+    + tile(sum.runs, 'runs recorded')
+    + tile(Math.round((sum.driftRate || 0) * 100) + '%', 'runs with drift')
+    + tile(Math.round((sum.coverage || 0) * 100) + '%', 'mean coverage')
+    + tile(sum.healed, 'rewrites applied')
+    + '</div>';
+  html += '<div class="evid-title" style="margin-top:18px">Drift per run — ' + esc(series.length) + ' comparable run' + (series.length === 1 ? '' : 's')
+    + (sum.trend.source ? ' captured by <code>' + esc(sum.trend.source) + '</code>' : '') + '</div>';
+  html += barChart(series, drift);
+  html += '<div class="legend">'
+    + Object.keys(VC).map((k) => '<span><i style="background:' + VC[k] + '"></i>' + VI[k] + ' ' + k + '</span>').join('')
+    + '</div>';
+  if (sum.trend.reason) html += '<div class="caveat">⚠️ ' + esc(sum.trend.reason) + ' Plotting them on one axis would invent a trend out of a capture artifact.</div>';
+  if ((sum.hotspots || []).length) {
+    html += '<div class="evid-title" style="margin-top:20px">Where the churn lives — total drifted elements per page</div>' + hotspots(sum.hotspots);
+  }
+  html += '<table><thead><tr><th>When</th><th>Verb</th><th>Verdict</th><th class="n">Drift</th><th class="n">Coverage</th><th>Commit</th></tr></thead><tbody>'
+    + series.slice(-12).reverse().map((e) =>
+      '<tr><td>' + esc(new Date(e.ts).toLocaleString()) + '</td><td>' + esc(e.verb) + '</td>'
+      + '<td style="color:' + (VC[e.verdict] || 'inherit') + '">' + (VI[e.verdict] || '') + ' ' + esc(e.verdict) + '</td>'
+      + '<td class="n">' + drift(e) + '</td>'
+      + '<td class="n">' + (e.coverage ? e.coverage.measured + '/' + e.coverage.total : '—') + '</td>'
+      + '<td>' + esc(e.commit || '—') + '</td></tr>').join('')
+    + '</tbody></table>';
+  q('#history').innerHTML = html;
+}
+/* Bars: one per run, height by drift count, fill by verdict. Single measure,
+   single axis. 2px gap between bars, 4px rounded top anchored to the baseline. */
+function barChart(series, valueOf) {
+  const W = 1100, H = 170, PB = 24, PL = 34;
+  const n = series.length;
+  const max = Math.max(1, ...series.map(valueOf));
+  const bw = Math.max(3, Math.min(34, (W - PL) / n - 2));
+  const step = (W - PL) / n;
+  const y = (v) => H - PB - (v / max) * (H - PB - 12);
+  let bars = '', grid = '';
+  [0, 0.5, 1].forEach((f) => {
+    const v = Math.round(max * f), yy = y(v);
+    grid += '<line x1="' + PL + '" x2="' + W + '" y1="' + yy + '" y2="' + yy + '" stroke="#27272a" stroke-width="1"/>'
+      + '<text class="axis" x="' + (PL - 7) + '" y="' + (yy + 3) + '" text-anchor="end">' + v + '</text>';
+  });
+  series.forEach((e, i) => {
+    const v = valueOf(e), yy = y(v), x = PL + i * step + 1;
+    const hgt = Math.max(v > 0 ? 3 : 2, H - PB - yy);
+    bars += '<rect x="' + x + '" y="' + (H - PB - hgt) + '" width="' + bw + '" height="' + hgt + '" rx="3" fill="'
+      + (VC[e.verdict] || '#3f3f46') + '"><title>' + new Date(e.ts).toLocaleString() + ' — ' + e.verdict + ' · '
+      + v + ' drifted' + (e.commit ? ' · ' + e.commit : '') + '</title></rect>';
+  });
+  return '<svg viewBox="0 0 ' + W + ' ' + H + '" width="100%" height="' + H + '" role="img" aria-label="Drifted elements per run">'
+    + grid + bars
+    + '<line x1="' + PL + '" x2="' + W + '" y1="' + (H - PB) + '" y2="' + (H - PB) + '" stroke="#3f3f46" stroke-width="1"/>'
+    + '<text class="axis" x="' + PL + '" y="' + (H - 8) + '">oldest</text>'
+    + '<text class="axis" x="' + W + '" y="' + (H - 8) + '" text-anchor="end">latest</text></svg>';
+}
+/* One series, so no legend — the title names it. Direct-labelled, since there
+   are at most five rows and a value axis would be one more thing to read. */
+function hotspots(rows) {
+  const max = Math.max(1, ...rows.map((r) => r.drift));
+  return '<div style="margin-top:6px">' + rows.map((r) =>
+    '<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px">'
+    + '<div style="width:170px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(r.name) + '</div>'
+    + '<div style="flex:1;background:#27272a;border-radius:4px;height:14px;overflow:hidden">'
+    + '<div style="width:' + Math.round((r.drift / max) * 100) + '%;height:100%;background:var(--orange);border-radius:4px"></div></div>'
+    + '<div style="width:82px;text-align:right;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums">'
+    + esc(r.drift) + ' in ' + esc(r.runs) + ' run' + (r.runs === 1 ? '' : 's') + '</div></div>'
+  ).join('') + '</div>';
+}
+/* The console stops when you stop looking at it. Closing the tab cannot end a
+   process by itself, so the page says it is still here — and says goodbye on the
+   way out. A reload cancels the goodbye simply by arriving first. */
+const PING_MS = ${server_1.HEARTBEAT_INTERVAL_MS};
+setInterval(() => { fetch('/api/ping?t=' + T).catch(() => {}); }, PING_MS);
+let saidBye = false;
+function bye() {
+  if (saidBye) return;
+  saidBye = true;
+  // sendBeacon survives the page being torn down; a plain fetch does not.
+  // keepalive is the fallback where sendBeacon is unavailable. Neither is
+  // guaranteed to arrive — the server's idle timeout is what actually bounds
+  // this, and the beacon only makes the common case instant.
+  if (navigator.sendBeacon) navigator.sendBeacon('/api/bye?t=' + T);
+  else fetch('/api/bye?t=' + T, { keepalive: true }).catch(() => {});
+}
+addEventListener('pagehide', bye);
+addEventListener('beforeunload', bye);
+load();
+</script>
+</body></html>`;
+}
+//# sourceMappingURL=page.js.map

package/dist/ui/page.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/ui/page.ts"],"names":[],"mappings":";;AAmBA,8CAijBC;AApkBD;;;;;;;;;;;;;;;;GAgBG;AACH,qCAAiD;AAEjD,SAAgB,iBAAiB,CAAC,KAAa;IAC7C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAoKG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAyXf,8BAAqB;;;;;;;;;;;;;;;;;;eAkBxB,CAAC;AAChB,CAAC"}