@yemi33/minions 0.1.1998 → 0.1.1999

package/dashboard/js/qa.js

@@ -1,29 +1,514 @@
-// dashboard/js/qa.js — QA tab wiring (W-mpd5ewhj000oc5c5).
+// dashboard/js/qa.js — QA tab UI (W-mpeiwz6k0005bf34-d).
 //
-// The QA tab hosts validation runbooks (human-driven and agent-driven) against
-// running managed instances. It does NOT mirror the live-process inventory —
-// that lives on /engine (Managed Processes + Keep-Processes panels). Runbook
-// rows in the next WI will link to their targets by name rather than duplicate
-// the inventory tables (W-mpdad3mq000m53bb).
+// Three sections:
+//  1. Targets — slim dedup'd list of /api/managed-processes + /api/keep-processes
+//     with a health badge and a link back to /engine (full inventory tables
+//     live on /engine; see W-mpdad3mq000m53bb — do NOT mirror them here).
+//  2. Runbooks — list from GET /api/qa/runbooks with an enabled "+ New runbook"
+//     button that opens an inline form (name / target dropdown / steps textarea
+//     / expected-artifacts repeater) wired to POST /api/qa/runbooks. Each row
+//     has a "Run" button that POSTs to /api/qa/runbooks/run.
+//  3. Runs — list from GET /api/qa/runs?limit=50, polled every 5s while the
+//     QA page is active. Each row links to the live agent stream and renders
+//     inline artifact previews via /api/qa/artifacts/<runId>/<file>
+//     (screenshots as <img>, videos as <video>, logs as 40-line text preview
+//     with a "View full" link). No direct filesystem paths are exposed —
+//     artifact URLs always go through /api/qa/artifacts/.
 //
-// The only wiring this file owns is the switchPage SSE-close hook: if the
-// user has the managed-log modal (defined in render-managed.js) open on the
-// engine page and navigates away, we close the EventSource so it doesn't
-// keep streaming behind the new page. The hook is harmless when the QA page
-// never opens the modal itself, and matches the broader page-navigation
-// contract for SSE cleanup.
+// The polling interval is cleared on page navigation via the switchPage
+// wrapper below (matches the same pattern keep_processes / managed-spawn
+// uses on /engine). The wrapper ALSO closes any open managed-log SSE so a
+// modal opened from /engine doesn't keep streaming after the user navigates.
 
-(function () {
-  // Close any open managed-log SSE stream when the user navigates away from a
-  // page that triggered it — the modal otherwise floats over the new page and
-  // the EventSource keeps streaming. Hooks into the existing switchPage()
-  // function from state.js without changing its signature.
-  if (typeof switchPage === 'function' && !switchPage.__qaWrapped) {
-    const _origSwitchPage = switchPage;
-    window.switchPage = function (page, pushState) {
-      try { if (typeof closeManagedLog === 'function') closeManagedLog(); } catch {}
-      return _origSwitchPage(page, pushState);
-    };
-    window.switchPage.__qaWrapped = true;
+let _qaRunsPollInterval = null;
+let _qaTargetsCache = [];
+let _qaRunbooksCache = [];
+
+function _stopQaRunsPoll() {
+  if (_qaRunsPollInterval) {
+    clearInterval(_qaRunsPollInterval);
+    _qaRunsPollInterval = null;
+  }
+}
+
+function _startQaRunsPoll() {
+  _stopQaRunsPoll();
+  // Initial fetch + 5s poll (per acceptance criteria). The poll is bounded
+  // to the QA page via switchPage cleanup below.
+  loadQaRuns();
+  _qaRunsPollInterval = setInterval(loadQaRuns, 5000);
+}
+
+// ── Section 1: Targets ─────────────────────────────────────────────────────
+async function loadQaTargets() {
+  const root = document.getElementById('qa-targets-content');
+  if (!root) return;
+  let managed = [];
+  let keep = [];
+  let err = null;
+  try {
+    const [mRes, kRes] = await Promise.all([
+      fetch('/api/managed-processes').then(r => r.ok ? r.json() : { items: [] }).catch(() => ({ items: [] })),
+      fetch('/api/keep-processes').then(r => r.ok ? r.json() : { items: [] }).catch(() => ({ items: [] })),
+    ]);
+    managed = Array.isArray(mRes && mRes.items) ? mRes.items : [];
+    keep = Array.isArray(kRes && kRes.items) ? kRes.items : [];
+  } catch (e) { err = e; }
+
+  if (err) {
+    const frag = document.createRange().createContextualFragment(
+      '<p class="empty" style="color:var(--red)">Failed to load targets: ' + escHtml(err.message || String(err)) + '</p>'
+    );
+    root.replaceChildren(frag);
+    _qaTargetsCache = [];
+    _qaPopulateTargetDropdown();
+    return;
+  }
+
+  // Dedup by name+project: a managed spec and a keep_processes entry can
+  // declare the same name (managed is canonical because the engine owns the
+  // lifecycle). Build a Set keyed by `<project>::<name>` and skip keep entries
+  // whose name is already represented in managed.
+  const seen = new Set();
+  const targets = [];
+  for (const m of managed) {
+    if (!m || !m.name) continue;
+    const key = (m.owner_project || '') + '::' + m.name;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    targets.push({
+      name: m.name,
+      project: m.owner_project || '',
+      source: 'managed',
+      healthy: !!m.healthy,
+      alive: !!m.alive,
+      ports: Array.isArray(m.ports) ? m.ports.slice() : [],
+    });
+  }
+  for (const k of keep) {
+    if (!k || !k.valid) continue;
+    // Keep-processes entries are keyed by agent — use the agent's purpose
+    // as a friendly name fallback when no explicit name is present.
+    const name = k.name || k.purpose || k.agentId || '';
+    if (!name) continue;
+    const project = k.project || '';
+    const key = project + '::' + name;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const anyAlive = Array.isArray(k.pids) && k.pids.some(p => p && p.alive);
+    targets.push({
+      name,
+      project,
+      source: 'keep',
+      healthy: anyAlive,
+      alive: anyAlive,
+      ports: Array.isArray(k.ports) ? k.ports.slice() : [],
+    });
+  }
+
+  _qaTargetsCache = targets;
+  _qaPopulateTargetDropdown();
+
+  if (!targets.length) {
+    const frag = document.createRange().createContextualFragment(
+      '<p class="empty">No live targets. Spawn a service via <code>meta.managed_spawn</code> or <code>meta.keep_processes</code> to populate this list. Full inventory on <a href="/engine">/engine</a>.</p>'
+    );
+    root.replaceChildren(frag);
+    return;
+  }
+
+  const rows = targets.map(function (t) {
+    const badge = t.healthy
+      ? '<span class="qa-health-dot qa-health-ok">●</span> healthy'
+      : (t.alive ? '<span class="qa-health-dot qa-health-warn">●</span> starting' : '<span class="qa-health-dot qa-health-down">○</span> down');
+    const portsTxt = (t.ports && t.ports.length) ? ' ports: ' + t.ports.join(',') : '';
+    const projTxt = t.project ? ' <span class="qa-target-project">(' + escHtml(t.project) + ')</span>' : '';
+    const srcTxt = '<span class="qa-target-source">' + escHtml(t.source) + '</span>';
+    return '<div class="qa-target-row">' +
+      '<div class="qa-target-main"><span class="qa-target-name">' + escHtml(t.name) + '</span>' + projTxt + ' ' + srcTxt + '</div>' +
+      '<div class="qa-target-meta">' + badge + escHtml(portsTxt) + '</div>' +
+      '<a href="/engine" class="qa-target-link">View on /engine</a>' +
+      '</div>';
+  }).join('');
+  // Use createContextualFragment + replaceChildren to keep this file out of
+  // the dynamic-innerHTML regression gate (cf. test/unit.test.js
+  // DYNAMIC_INNERHTML_BASELINE — all interpolated fields above are wrapped
+  // in escHtml()).
+  const frag = document.createRange().createContextualFragment(rows);
+  root.replaceChildren(frag);
+}
+
+function _qaPopulateTargetDropdown() {
+  const sel = document.getElementById('qa-runbook-target');
+  if (!sel) return;
+  const current = sel.value;
+  // Build option nodes via DOM API — no innerHTML.
+  while (sel.firstChild) sel.removeChild(sel.firstChild);
+  const placeholder = document.createElement('option');
+  placeholder.value = '';
+  placeholder.textContent = '— select a target —';
+  sel.appendChild(placeholder);
+  for (const t of _qaTargetsCache) {
+    const opt = document.createElement('option');
+    opt.value = t.name;
+    const projLabel = t.project ? ' (' + t.project + ')' : '';
+    opt.textContent = t.name + projLabel + ' [' + t.source + ']';
+    sel.appendChild(opt);
+  }
+  if (current) sel.value = current;
+}
+
+// ── Section 2: Runbooks ────────────────────────────────────────────────────
+async function loadQaRunbooks() {
+  const root = document.getElementById('qa-runbooks-content');
+  if (!root) return;
+  let items = [];
+  let err = null;
+  try {
+    const res = await fetch('/api/qa/runbooks');
+    if (res.ok) {
+      const data = await res.json();
+      items = Array.isArray(data && data.items) ? data.items : (Array.isArray(data) ? data : []);
+    } else if (res.status !== 404) {
+      err = new Error('HTTP ' + res.status);
+    }
+  } catch (e) { err = e; }
+  _qaRunbooksCache = items;
+
+  if (err) {
+    const frag = document.createRange().createContextualFragment(
+      '<p class="empty" style="color:var(--red)">Failed to load runbooks: ' + escHtml(err.message || String(err)) + '</p>'
+    );
+    root.replaceChildren(frag);
+    return;
+  }
+  if (!items.length) {
+    const frag = document.createRange().createContextualFragment(
+      '<p class="empty">No runbooks yet. Click <strong>+ New runbook</strong> to create one.</p>'
+    );
+    root.replaceChildren(frag);
+    return;
+  }
+  const rows = items.map(function (rb) {
+    const id = rb.id || rb.name || '';
+    const stepsCount = Array.isArray(rb.steps) ? rb.steps.length : (rb.steps ? String(rb.steps).split(/\r?\n/).filter(Boolean).length : 0);
+    const artifactsCount = Array.isArray(rb.expectedArtifacts) ? rb.expectedArtifacts.length : 0;
+    return '<div class="qa-runbook-row">' +
+      '<div class="qa-runbook-main">' +
+        '<div class="qa-runbook-name">' + escHtml(rb.name || id) + '</div>' +
+        '<div class="qa-runbook-meta">target: <code>' + escHtml(rb.target || '?') + '</code> · ' +
+          stepsCount + ' step' + (stepsCount === 1 ? '' : 's') + ' · ' +
+          artifactsCount + ' expected artifact' + (artifactsCount === 1 ? '' : 's') +
+        '</div>' +
+      '</div>' +
+      '<button class="qa-btn-primary qa-runbook-run-btn" data-runbook-id="' + escHtml(id) + '" onclick="qaRunRunbook(this.dataset.runbookId)">Run</button>' +
+      '</div>';
+  }).join('');
+  const frag = document.createRange().createContextualFragment(rows);
+  root.replaceChildren(frag);
+}
+
+function qaShowNewRunbookForm() {
+  const wrap = document.getElementById('qa-runbook-form-wrap');
+  if (!wrap) return;
+  wrap.style.display = 'block';
+  // Make sure target dropdown reflects the current target cache.
+  _qaPopulateTargetDropdown();
+  const name = document.getElementById('qa-runbook-name');
+  if (name) name.focus();
+}
+
+function qaHideNewRunbookForm() {
+  const wrap = document.getElementById('qa-runbook-form-wrap');
+  if (!wrap) return;
+  wrap.style.display = 'none';
+  const msg = document.getElementById('qa-runbook-form-msg');
+  if (msg) msg.textContent = '';
+}
+
+function qaAddArtifactRow() {
+  const wrap = document.getElementById('qa-runbook-artifacts');
+  if (!wrap) return;
+  const row = document.createElement('div');
+  row.className = 'qa-artifact-row';
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'qa-form-input qa-artifact-input';
+  input.placeholder = 'log:test.log';
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'qa-btn-ghost';
+  btn.textContent = '−';
+  btn.onclick = function () { qaRemoveArtifactRow(btn); };
+  row.appendChild(input);
+  row.appendChild(btn);
+  wrap.appendChild(row);
+}
+
+function qaRemoveArtifactRow(btn) {
+  const row = btn && btn.closest ? btn.closest('.qa-artifact-row') : null;
+  if (!row) return;
+  const wrap = document.getElementById('qa-runbook-artifacts');
+  if (wrap && wrap.children.length <= 1) {
+    // Don't delete the last row — just clear it.
+    const inp = row.querySelector('input');
+    if (inp) inp.value = '';
+    return;
   }
+  row.remove();
+}
+
+async function qaSaveRunbook() {
+  const msg = document.getElementById('qa-runbook-form-msg');
+  const name = (document.getElementById('qa-runbook-name') || {}).value || '';
+  const target = (document.getElementById('qa-runbook-target') || {}).value || '';
+  const stepsRaw = (document.getElementById('qa-runbook-steps') || {}).value || '';
+  const artifactInputs = document.querySelectorAll('#qa-runbook-artifacts .qa-artifact-input');
+  const expectedArtifacts = Array.from(artifactInputs)
+    .map(function (i) { return (i.value || '').trim(); })
+    .filter(Boolean);
+  if (!name.trim() || !target.trim() || !stepsRaw.trim()) {
+    if (msg) { msg.textContent = 'Name, target and steps are required.'; msg.style.color = 'var(--red)'; }
+    return;
+  }
+  if (msg) { msg.textContent = 'Saving…'; msg.style.color = 'var(--muted)'; }
+  try {
+    const res = await fetch('/api/qa/runbooks', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name: name.trim(),
+        target: target.trim(),
+        steps: stepsRaw,
+        expectedArtifacts,
+      }),
+    });
+    if (!res.ok) {
+      const txt = await res.text().catch(() => '');
+      throw new Error('HTTP ' + res.status + (txt ? ': ' + txt.slice(0, 200) : ''));
+    }
+    if (msg) { msg.textContent = 'Saved.'; msg.style.color = 'var(--green)'; }
+    // Reset form + reload list.
+    const form = document.getElementById('qa-runbook-form');
+    if (form) form.reset();
+    qaHideNewRunbookForm();
+    loadQaRunbooks();
+  } catch (e) {
+    if (msg) { msg.textContent = 'Failed to save: ' + (e.message || String(e)); msg.style.color = 'var(--red)'; }
+  }
+}
+
+async function qaRunRunbook(id) {
+  if (!id) return;
+  const rb = _qaRunbooksCache.find(function (r) { return (r.id || r.name) === id; });
+  const label = rb ? (rb.name || id) : id;
+  if (!confirm('Dispatch a validation agent for runbook "' + label + '"?')) return;
+  try {
+    const res = await fetch('/api/qa/runbooks/run', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id }),
+    });
+    if (!res.ok) {
+      const txt = await res.text().catch(() => '');
+      throw new Error('HTTP ' + res.status + (txt ? ': ' + txt.slice(0, 200) : ''));
+    }
+    // Reload runs immediately so the new dispatch shows up in section 3.
+    loadQaRuns();
+  } catch (e) {
+    alert('Failed to dispatch runbook "' + label + '": ' + (e.message || String(e)));
+  }
+}
+
+// ── Section 3: Runs ─────────────────────────────────────────────────────────
+async function loadQaRuns() {
+  const root = document.getElementById('qa-runs-content');
+  if (!root) return;
+  let items = [];
+  let err = null;
+  try {
+    const res = await fetch('/api/qa/runs?limit=50');
+    if (res.ok) {
+      const data = await res.json();
+      items = Array.isArray(data && data.items) ? data.items : (Array.isArray(data) ? data : []);
+    } else if (res.status !== 404) {
+      err = new Error('HTTP ' + res.status);
+    }
+  } catch (e) { err = e; }
+
+  if (err) {
+    const frag = document.createRange().createContextualFragment(
+      '<p class="empty" style="color:var(--red)">Failed to load runs: ' + escHtml(err.message || String(err)) + '</p>'
+    );
+    root.replaceChildren(frag);
+    return;
+  }
+  if (!items.length) {
+    const frag = document.createRange().createContextualFragment(
+      '<p class="empty">No runs yet. Dispatch a runbook above to see results here.</p>'
+    );
+    root.replaceChildren(frag);
+    return;
+  }
+  const rows = items.map(_qaRenderRunRow).join('');
+  const frag = document.createRange().createContextualFragment(rows);
+  root.replaceChildren(frag);
+}
+
+function _qaRenderRunRow(run) {
+  const id = run.id || run.runId || '';
+  const status = run.status || 'unknown';
+  const statusClass = 'qa-status-' + status.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  const runbook = run.runbookName || run.runbook || '';
+  const target = run.target || '';
+  const ts = run.startedAt || run.createdAt || '';
+  const workItemId = run.workItemId || run.workItem || '';
+  const agentId = run.agentId || '';
+  // Live-stream link to /agent/<workItemId> per the acceptance contract;
+  // routes through openAgentDetail when available so the existing dashboard
+  // detail panel handles the live tail. Falls back to a plain anchor when
+  // the page is loaded standalone (e.g. snapshot test).
+  const linkLabel = workItemId ? 'View live agent →' : (agentId ? 'View live agent →' : '');
+  let liveLink = '';
+  if (workItemId) {
+    liveLink = '<a href="/agent/' + encodeURIComponent(workItemId) + '" class="qa-run-link" ' +
+      'onclick="event.preventDefault();qaOpenRunAgent(this.dataset.wi,this.dataset.agent);" ' +
+      'data-wi="' + escHtml(workItemId) + '" data-agent="' + escHtml(agentId) + '">' + escHtml(linkLabel) + '</a>';
+  } else if (agentId) {
+    liveLink = '<a href="#" class="qa-run-link" onclick="event.preventDefault();qaOpenRunAgent(\'\',this.dataset.agent);" data-agent="' + escHtml(agentId) + '">' + escHtml(linkLabel) + '</a>';
+  }
+  const artifactsHtml = _qaRenderArtifactPreviews(id, run.artifacts || []);
+  return '<div class="qa-run-row">' +
+    '<div class="qa-run-head">' +
+      '<span class="qa-run-status ' + escHtml(statusClass) + '">' + escHtml(status) + '</span>' +
+      '<span class="qa-run-name">' + escHtml(runbook) + '</span>' +
+      (target ? '<span class="qa-run-target">→ <code>' + escHtml(target) + '</code></span>' : '') +
+      (ts ? '<span class="qa-run-ts">' + escHtml(String(ts).slice(0, 19).replace('T', ' ')) + '</span>' : '') +
+      (liveLink ? '<span class="qa-run-actions">' + liveLink + '</span>' : '') +
+    '</div>' +
+    (artifactsHtml ? '<div class="qa-run-artifacts">' + artifactsHtml + '</div>' : '') +
+    '</div>';
+}
+
+function _qaRenderArtifactPreviews(runId, artifacts) {
+  if (!runId || !Array.isArray(artifacts) || !artifacts.length) return '';
+  const parts = [];
+  for (const a of artifacts) {
+    // Accept either a string filename or { file, kind } shape. Strip any
+    // path separators so a malicious entry can't escape the /api/qa/artifacts/
+    // namespace — the server is canonical here, but client-side normalization
+    // keeps the URL pattern observable in source-inspection tests.
+    const fileRaw = (typeof a === 'string') ? a : (a && (a.file || a.name || a.path) || '');
+    if (!fileRaw) continue;
+    const file = String(fileRaw).split(/[\\/]/).pop();
+    if (!file) continue;
+    const kindHint = (typeof a === 'object' && a && a.kind) ? String(a.kind).toLowerCase() : '';
+    const ext = (file.match(/\.([a-z0-9]+)$/i) || ['', ''])[1].toLowerCase();
+    const url = '/api/qa/artifacts/' + encodeURIComponent(runId) + '/' + encodeURIComponent(file);
+    if (kindHint === 'screenshot' || ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(ext)) {
+      parts.push(
+        '<div class="qa-artifact qa-artifact-image">' +
+          '<img src="' + escHtml(url) + '" alt="' + escHtml(file) + '" loading="lazy">' +
+          '<div class="qa-artifact-caption">' + escHtml(file) + '</div>' +
+        '</div>'
+      );
+    } else if (kindHint === 'video' || ['mp4', 'webm', 'ogg', 'mov'].includes(ext)) {
+      parts.push(
+        '<div class="qa-artifact qa-artifact-video">' +
+          '<video controls src="' + escHtml(url) + '"></video>' +
+          '<div class="qa-artifact-caption">' + escHtml(file) + '</div>' +
+        '</div>'
+      );
+    } else {
+      // Log / text — render an asynchronously-filled <pre>; first 40 lines
+      // fetched lazily so we don't N+1-flood the network on every poll.
+      const blockId = 'qa-log-' + runId + '-' + file.replace(/[^a-zA-Z0-9_-]/g, '_');
+      parts.push(
+        '<div class="qa-artifact qa-artifact-log">' +
+          '<div class="qa-artifact-caption">' +
+            escHtml(file) + ' ' +
+            '<a href="' + escHtml(url) + '" target="_blank" rel="noopener" class="qa-artifact-fulllink">View full</a>' +
+          '</div>' +
+          '<pre id="' + escHtml(blockId) + '" class="qa-artifact-log-preview" data-qa-log-url="' + escHtml(url) + '">Loading…</pre>' +
+        '</div>'
+      );
+    }
+  }
+  return parts.join('');
+}
+
+// Lazily fetch log previews after the runs DOM is in place. Runs every time
+// loadQaRuns finishes; cheap because the `data-qa-log-url` lookup short-
+// circuits on already-loaded blocks.
+function _qaFillLogPreviews() {
+  const blocks = document.querySelectorAll('#qa-runs-content .qa-artifact-log-preview[data-qa-log-url]');
+  blocks.forEach(function (el) {
+    const url = el.getAttribute('data-qa-log-url');
+    if (!url || el.__qaLoaded) return;
+    el.__qaLoaded = true;
+    fetch(url)
+      .then(function (r) { return r.ok ? r.text() : ''; })
+      .then(function (txt) {
+        const head = (txt || '').split(/\r?\n/).slice(0, 40).join('\n');
+        el.textContent = head || '(empty)';
+      })
+      .catch(function () { el.textContent = '(failed to load)'; });
+  });
+}
+
+function qaOpenRunAgent(workItemId, agentId) {
+  // Prefer the agent live-detail panel if available; fall back to the
+  // work-item detail; fall back to a hard navigation as a last resort.
+  if (agentId && typeof openAgentDetail === 'function') { try { openAgentDetail(agentId); return; } catch {} }
+  if (workItemId && typeof openWorkItemDetail === 'function') { try { openWorkItemDetail(workItemId); return; } catch {} }
+  if (workItemId) location.href = '/agent/' + encodeURIComponent(workItemId);
+}
+
+// ── Page-navigation hooks ──────────────────────────────────────────────────
+// switchPage wrapper:
+//  - clears the runs polling interval (section 3) so the QA page stops
+//    polling when the user navigates away
+//  - closes any open managed-log SSE stream so a modal opened from /engine
+//    doesn't keep streaming behind the new page
+//  - lazily kicks off QA page loads + polling when entering /qa
+(function () {
+  if (typeof switchPage !== 'function' || switchPage.__qaWrapped) return;
+  const _origSwitchPage = switchPage;
+  window.switchPage = function (page, pushState) {
+    try { if (typeof closeManagedLog === 'function') closeManagedLog(); } catch {}
+    try { _stopQaRunsPoll(); } catch {}
+    const ret = _origSwitchPage(page, pushState);
+    if (page === 'qa') {
+      try { loadQaTargets(); } catch {}
+      try { loadQaRunbooks(); } catch {}
+      try { _startQaRunsPoll(); } catch {}
+    }
+    return ret;
+  };
+  window.switchPage.__qaWrapped = true;
+})();
+
+// Refresh log previews after every runs render — _qaFillLogPreviews is a
+// no-op for already-loaded blocks, so polling repeatedly is safe.
+(function () {
+  const _origLoad = loadQaRuns;
+  window.loadQaRuns = async function () {
+    const ret = await _origLoad.apply(this, arguments);
+    try { _qaFillLogPreviews(); } catch {}
+    return ret;
+  };
+})();
+
+// If the user landed directly on /qa (deep-link), the switchPage wrapper
+// above runs after refresh.js calls switchPage(currentPage) — but only if
+// qa.js was already evaluated. Guard with currentPage so we initialize
+// targets/runbooks/runs immediately on first paint.
+(function () {
+  try {
+    if (typeof currentPage !== 'undefined' && currentPage === 'qa') {
+      loadQaTargets();
+      loadQaRunbooks();
+      _startQaRunsPoll();
+    }
+  } catch {}
 })();

package/dashboard/pages/qa.html

@@ -1,11 +1,58 @@
       <section>
         <h2>QA</h2>
-        <p class="empty" style="margin:4px 0 12px 0">Canonical home for human-driven and agent-driven validation against running managed instances. Runbook dispatch lands in a follow-up WI.</p>
+        <p class="empty" style="margin:4px 0 12px 0">Validation runbooks dispatched against live managed instances. Targets, runbooks, and run history with artifact previews.</p>
       </section>
-      <section id="qa-runbooks-section">
-        <h2>Validation Runbooks <span style="font-size:10px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">human or agent-driven smoke / E2E flows against the live instances above</span></h2>
-        <div style="border:1px dashed var(--border);border-radius:6px;padding:16px;background:var(--surface2);text-align:center">
-          <p class="empty" style="margin:0 0 12px 0">Validation runbooks will live here. Coming soon: dispatch a human or agent to validate a running instance.</p>
-          <button id="qa-new-runbook-btn" disabled title="Coming soon — runbook schema lands in the next WI" style="padding:6px 14px;background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:4px;cursor:not-allowed;font-size:12px">+ New runbook</button>
+      <section id="qa-targets-section" class="qa-section">
+        <h2>Targets <span class="qa-section-subtitle">live managed/keep processes available as runbook targets — full inventory lives on <a href="/engine" class="qa-engine-link">/engine</a></span></h2>
+        <div id="qa-targets-content" class="qa-targets-list">
+          <p class="empty">Loading targets…</p>
+        </div>
+      </section>
+      <section id="qa-runbooks-section" class="qa-section">
+        <h2>Validation Runbooks <span class="qa-section-subtitle">human or agent-driven smoke / E2E flows against the targets above</span></h2>
+        <div class="qa-runbooks-actions">
+          <button id="qa-new-runbook-btn" class="qa-btn-primary" onclick="qaShowNewRunbookForm()">+ New runbook</button>
+        </div>
+        <div id="qa-runbook-form-wrap" class="qa-runbook-form" style="display:none">
+          <form id="qa-runbook-form" onsubmit="event.preventDefault();qaSaveRunbook();">
+            <div class="qa-form-row">
+              <label class="qa-form-label" for="qa-runbook-name">Name</label>
+              <input id="qa-runbook-name" type="text" class="qa-form-input" placeholder="login-smoke" required>
+            </div>
+            <div class="qa-form-row">
+              <label class="qa-form-label" for="qa-runbook-target">Target</label>
+              <select id="qa-runbook-target" class="qa-form-input" required>
+                <option value="">— select a target —</option>
+              </select>
+            </div>
+            <div class="qa-form-row">
+              <label class="qa-form-label" for="qa-runbook-steps">Steps</label>
+              <textarea id="qa-runbook-steps" class="qa-form-input qa-form-textarea" placeholder="1. Open the app&#10;2. Click login&#10;3. Verify dashboard loads" required></textarea>
+            </div>
+            <div class="qa-form-row">
+              <label class="qa-form-label">Expected artifacts</label>
+              <div id="qa-runbook-artifacts" class="qa-artifacts-repeater">
+                <div class="qa-artifact-row">
+                  <input type="text" class="qa-form-input qa-artifact-input" placeholder="screenshot:dashboard.png">
+                  <button type="button" class="qa-btn-ghost" onclick="qaRemoveArtifactRow(this)">−</button>
+                </div>
+              </div>
+              <button type="button" class="qa-btn-ghost qa-add-artifact-btn" onclick="qaAddArtifactRow()">+ Add artifact</button>
+            </div>
+            <div class="qa-form-row qa-form-actions">
+              <button type="submit" class="qa-btn-primary">Save</button>
+              <button type="button" class="qa-btn-ghost" onclick="qaHideNewRunbookForm()">Cancel</button>
+              <span id="qa-runbook-form-msg" class="qa-form-msg"></span>
+            </div>
+          </form>
+        </div>
+        <div id="qa-runbooks-content" class="qa-runbooks-list">
+          <p class="empty">Loading runbooks…</p>
+        </div>
+      </section>
+      <section id="qa-runs-section" class="qa-section">
+        <h2>Recent Runs <span class="qa-section-subtitle">latest 50 dispatched validation runs — polled every 5s while this page is active</span></h2>
+        <div id="qa-runs-content" class="qa-runs-list">
+          <p class="empty">Loading runs…</p>
         </div>
       </section>

package/dashboard/styles.css

@@ -736,3 +736,152 @@
     display: inline-block; max-width: 240px; overflow: hidden;
     text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
   }
+
+  /* QA tab (W-mpeiwz6k0005bf34-d) — targets / runbooks / runs sections.
+   * Reuses surface/border/text tokens defined in :root so the QA page
+   * blends with the rest of the dashboard. */
+  .qa-section { padding: var(--space-7) var(--space-9); }
+  .qa-section h2 { display: flex; align-items: baseline; gap: var(--space-4); }
+  .qa-section-subtitle {
+    font-size: var(--text-sm); color: var(--muted);
+    font-weight: 400; text-transform: none; letter-spacing: 0;
+  }
+  .qa-engine-link { color: var(--blue); text-decoration: none; }
+  .qa-engine-link:hover { text-decoration: underline; }
+
+  /* Targets list — slim row per dedup'd target. */
+  .qa-targets-list {
+    display: flex; flex-direction: column; gap: var(--space-2);
+    border: 1px solid var(--border); border-radius: var(--radius-md);
+    background: var(--surface2); padding: var(--space-4);
+  }
+  .qa-target-row {
+    display: flex; align-items: center; gap: var(--space-5);
+    padding: var(--space-3) var(--space-4);
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); font-size: var(--text-md);
+  }
+  .qa-target-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .qa-target-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--text); }
+  .qa-target-project { color: var(--muted); font-size: var(--text-base); }
+  .qa-target-source {
+    display: inline-block; margin-left: var(--space-3);
+    font-size: var(--text-xs); color: var(--muted);
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: 1px var(--space-3); text-transform: uppercase;
+  }
+  .qa-target-meta { font-size: var(--text-base); color: var(--muted); white-space: nowrap; }
+  .qa-target-link {
+    font-size: var(--text-sm); color: var(--blue); text-decoration: none;
+    padding: var(--space-1) var(--space-4); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); background: var(--surface2);
+  }
+  .qa-target-link:hover { background: var(--bg); }
+  .qa-health-dot { font-size: var(--text-md); }
+  .qa-health-ok { color: var(--green); }
+  .qa-health-warn { color: var(--yellow); }
+  .qa-health-down { color: var(--muted); }
+
+  /* Runbooks list + inline new-runbook form. */
+  .qa-runbooks-actions { margin-bottom: var(--space-5); }
+  .qa-runbook-form {
+    border: 1px solid var(--border); border-radius: var(--radius-md);
+    background: var(--surface2); padding: var(--space-5);
+    margin-bottom: var(--space-5);
+  }
+  .qa-form-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
+  .qa-form-label { font-size: var(--text-base); color: var(--muted); font-weight: 600; }
+  .qa-form-input {
+    background: var(--bg); color: var(--text);
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: var(--space-3) var(--space-4); font-size: var(--text-md);
+    font-family: inherit;
+  }
+  .qa-form-input:focus { border-color: var(--blue); outline: none; }
+  .qa-form-textarea { min-height: 88px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
+  .qa-artifacts-repeater { display: flex; flex-direction: column; gap: var(--space-2); }
+  .qa-artifact-row { display: flex; gap: var(--space-3); align-items: center; }
+  .qa-artifact-input { flex: 1; }
+  .qa-add-artifact-btn { align-self: flex-start; margin-top: var(--space-2); }
+  .qa-form-actions { flex-direction: row; align-items: center; gap: var(--space-4); }
+  .qa-form-msg { font-size: var(--text-base); margin-left: var(--space-3); }
+  .qa-btn-primary {
+    background: var(--blue); color: #fff; border: none;
+    border-radius: var(--radius-sm); padding: var(--space-3) var(--space-7);
+    font-size: var(--text-md); font-weight: 600; cursor: pointer;
+  }
+  .qa-btn-primary:hover { opacity: 0.9; }
+  .qa-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
+  .qa-btn-ghost {
+    background: transparent; color: var(--muted);
+    border: 1px solid var(--border); border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-5); font-size: var(--text-base);
+    cursor: pointer;
+  }
+  .qa-btn-ghost:hover { color: var(--text); background: var(--surface); }
+
+  .qa-runbooks-list { display: flex; flex-direction: column; gap: var(--space-3); }
+  .qa-runbook-row {
+    display: flex; align-items: center; gap: var(--space-5);
+    padding: var(--space-4) var(--space-5);
+    background: var(--surface2); border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+  }
+  .qa-runbook-main { flex: 1; min-width: 0; }
+  .qa-runbook-name { font-weight: 600; color: var(--text); font-size: var(--text-md); }
+  .qa-runbook-meta { font-size: var(--text-base); color: var(--muted); margin-top: var(--space-1); }
+
+  /* Runs list — status badge + inline artifact previews. */
+  .qa-runs-list { display: flex; flex-direction: column; gap: var(--space-4); }
+  .qa-run-row {
+    border: 1px solid var(--border); border-radius: var(--radius-md);
+    background: var(--surface2); padding: var(--space-4) var(--space-5);
+  }
+  .qa-run-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-md); }
+  .qa-run-status {
+    display: inline-block; font-size: var(--text-xs); font-weight: 700;
+    padding: 2px var(--space-3); border-radius: var(--radius-sm);
+    text-transform: uppercase; letter-spacing: 0.5px;
+    background: var(--surface); color: var(--muted); border: 1px solid var(--border);
+  }
+  .qa-status-passed, .qa-status-success { color: var(--green); border-color: var(--green); }
+  .qa-status-failed, .qa-status-error { color: var(--red); border-color: var(--red); }
+  .qa-status-running, .qa-status-dispatched { color: var(--blue); border-color: var(--blue); }
+  .qa-status-pending { color: var(--yellow); border-color: var(--yellow); }
+  .qa-run-name { font-weight: 600; color: var(--text); }
+  .qa-run-target { color: var(--muted); font-size: var(--text-base); }
+  .qa-run-ts { color: var(--muted); font-size: var(--text-base); margin-left: auto; }
+  .qa-run-actions { margin-left: var(--space-5); }
+  .qa-run-link { color: var(--blue); text-decoration: none; font-size: var(--text-base); }
+  .qa-run-link:hover { text-decoration: underline; }
+
+  .qa-run-artifacts {
+    display: flex; flex-wrap: wrap; gap: var(--space-4);
+    margin-top: var(--space-4); padding-top: var(--space-4);
+    border-top: 1px solid var(--border);
+  }
+  .qa-artifact {
+    display: flex; flex-direction: column; gap: var(--space-2);
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius-sm); padding: var(--space-3);
+    max-width: 320px;
+  }
+  .qa-artifact img, .qa-artifact video {
+    max-width: 100%; max-height: 200px; border-radius: var(--radius-sm);
+    background: var(--bg);
+  }
+  .qa-artifact-caption {
+    font-size: var(--text-xs); color: var(--muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    word-break: break-all;
+  }
+  .qa-artifact-fulllink { color: var(--blue); text-decoration: none; margin-left: var(--space-3); }
+  .qa-artifact-fulllink:hover { text-decoration: underline; }
+  .qa-artifact-log-preview {
+    background: var(--bg); color: var(--text);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: var(--text-xs); padding: var(--space-3);
+    border-radius: var(--radius-sm); margin: 0;
+    max-height: 160px; overflow: auto; white-space: pre;
+  }
+  .qa-artifact-log { max-width: 480px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.1998",
+  "version": "0.1.1999",
   "description": "Multi-agent AI dev team that runs from ~/.minions/ — five autonomous agents share a single engine, dashboard, and knowledge base",
   "bin": {
     "minions": "bin/minions.js"