@yemi33/minions 0.1.1998 → 0.1.2000

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/js/render-prs.js

@@ -4,6 +4,24 @@ let allPrs = [];
 let prPage = 0;
 const PR_PER_PAGE = 25;
 
+function _countPrFollowups(pr) {
+  // PR follow-up chip (W-mpej3cox00099466) — counts WIs whose
+  // meta.pr_followup.parent_pr_url or parent_pr_id matches this PR.
+  if (!pr) return 0;
+  var wis = (window._lastWorkItems) || [];
+  if (!wis.length) return 0;
+  var prUrl = pr.url || '';
+  var prId = pr.id || '';
+  var n = 0;
+  for (var i = 0; i < wis.length; i++) {
+    var f = wis[i] && wis[i].meta && wis[i].meta.pr_followup;
+    if (!f) continue;
+    if (prUrl && f.parent_pr_url === prUrl) { n++; continue; }
+    if (prId && f.parent_pr_id === prId) { n++; }
+  }
+  return n;
+}
+
 function prRow(pr) {
   // Minions review (agent) state — separate from ADO human review
   const sq = pr.minionsReview || {};
@@ -27,9 +45,13 @@ function prRow(pr) {
   const pendingReasonHtml = pendingReason
     ? '<div style="font-size:9px;color:var(--muted);margin-top:2px" title="Pending reason: ' + escapeHtml(pendingReason) + '">' + escapeHtml(pendingReason.replace(/_/g, ' ')) + '</div>'
     : '';
+  var followupCount = _countPrFollowups(pr);
+  var followupChip = followupCount > 0
+    ? ' <span class="pr-badge draft" style="font-size:8px" title="' + followupCount + ' follow-up work item(s) dispatched from comments on this PR">+' + followupCount + ' follow-up' + (followupCount === 1 ? '' : 's') + '</span>'
+    : '';
   return '<tr>' +
     '<td><span class="pr-id">' + escapeHtml(String(prId)) + '</span></td>' +
-    '<td><a class="pr-title" href="' + escapeHtml(safeUrl(url)) + '" target="_blank" rel="noopener">' + escapeHtml(pr.title || 'Untitled') + '</a>' + (pr.description ? '<div class="pr-desc">' + escapeHtml(pr.description.length > 120 ? pr.description.slice(0, 120) + '...' : pr.description) + '</div>' : '') + '</td>' +
+    '<td><a class="pr-title" href="' + escapeHtml(safeUrl(url)) + '" target="_blank" rel="noopener">' + escapeHtml(pr.title || 'Untitled') + '</a>' + followupChip + (pr.description ? '<div class="pr-desc">' + escapeHtml(pr.description.length > 120 ? pr.description.slice(0, 120) + '...' : pr.description) + '</div>' : '') + '</td>' +
     '<td><span class="pr-agent">' + escapeHtml(pr.agent || '—') + '</span></td>' +
     '<td><span class="' + branchClass + '"' + (branchError ? ' title="' + escapeHtml(branchError) + '"' : '') + '>' + escapeHtml(branchLabel) + '</span>' + pendingReasonHtml + '</td>' +
     '<td><span class="pr-badge ' + reviewClass + '"' + (reviewTitle ? ' title="' + escapeHtml(reviewTitle) + '"' : '') + '>' + escapeHtml(reviewLabel) + '</span></td>' +

package/dashboard/js/render-work-items.js

@@ -40,9 +40,19 @@ function wiRow(item) {
     : (item.branchStrategy === 'shared-branch' && item.status === 'done')
       ? '<span style="font-size:9px;color:var(--muted)" title="Part of shared branch — aggregate PR created at verify stage">shared branch</span>'
       : '<span style="color:var(--muted)">—</span>';
+  // PR follow-up chip (W-mpej3cox00099466) — surfaced when the WI was spun
+  // off from a PR comment via meta.pr_followup. Links to the parent PR.
+  var prFollowup = item.meta && item.meta.pr_followup;
+  var followupChip = '';
+  if (prFollowup && prFollowup.parent_pr_url) {
+    var prRef = prFollowup.parent_pr_id || prFollowup.parent_pr_url;
+    var prNumMatch = String(prRef).match(/(\d+)(?!.*\d)/);
+    var prLabel = prNumMatch ? ('PR #' + prNumMatch[1]) : 'parent PR';
+    followupChip = ' <a class="pr-badge draft" style="font-size:8px;text-decoration:none" target="_blank" rel="noopener" href="' + escapeHtml(prFollowup.parent_pr_url) + '" title="Follow-up dispatched from ' + escapeHtml(prRef) + (prFollowup.parent_comment_author ? ' by ' + escapeHtml(prFollowup.parent_comment_author) : '') + '" onclick="event.stopPropagation()">&#8617; from ' + escapeHtml(prLabel) + '</a>';
+  }
   return '<tr data-wi-id="' + escapeHtml(item.id) + '" style="cursor:pointer" onclick="if(shouldIgnoreSelectionClick(event))return;openWorkItemDetail(\'' + escapeHtml(item.id) + '\')">' +
     '<td><span class="pr-id">' + escapeHtml(item.id || '') + '</span></td>' +
-    '<td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escapeHtml((item.title || '').slice(0, 200)) + '">' + escapeHtml(item.title || '') + '</td>' +
+    '<td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escapeHtml((item.title || '').slice(0, 200)) + '">' + escapeHtml(item.title || '') + followupChip + '</td>' +
     '<td><span style="font-size:10px;color:var(--muted)">' + escapeHtml(item._source || '') + '</span>' +
       (item.scope === 'fan-out' ? ' <span class="pr-badge ' + (item.status === 'done' || item.status === 'failed' ? 'draft' : 'building') + '" style="font-size:8px">fan-out</span>' : '') + '</td>' +
     '<td>' + typeBadge(item.type) + '</td>' +