@yemi33/minions 0.1.2105 → 0.1.2107

package/dashboard/js/qa.js

@@ -1,24 +1,31 @@
-// dashboard/js/qa.js — QA tab UI (W-mpeiwz6k0005bf34-d).
+// dashboard/js/qa.js — QA tab UI.
 //
-// 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>
+// Originally W-mpeiwz6k0005bf34-d shipped this as a three-section tab with
+// inline forms for "Start QA Session" and "+ New runbook". W-mpxp7a3e000g0a49
+// (this rewrite) demoted the page to passive monitoring: session and runbook
+// CREATION now flow through Command Center; this page only renders what is
+// happening and exposes per-row operational controls.
+//
+// Sections (top → bottom):
+//  1. Active QA Sessions — non-terminal sessions only, with a CC-pitch card
+//     at the top and a collapsed disclosure for terminal sessions (last 10).
+//     Per-card controls: approve / edit / cancel / dismiss / kill.
+//  2. Live Targets — slim dedup'd list of /api/managed-processes +
+//     /api/keep-processes with a health badge and a link to /engine
+//     (W-mpdad3mq000m53bb — do NOT mirror the full inventory here).
+//  3. Recent Runs — list from GET /api/qa/runs?limit=20, 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/.
+//  4. Validation Runbooks — collapsed disclosure with a small CC-pitch and
+//     the runbook list. Each row has a Run + Delete button.
 //
-// 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.
+// The polling interval is cleared on page navigation via the PAGE_LEAVE_HOOKS
+// in state.js (W-mpgb0xa7000d90d4). closeManagedLog is invoked from the same
+// hook so a modal opened from /engine doesn't keep streaming after the user
+// navigates.
 
 let _qaRunsPollInterval = null;
 let _qaTargetsCache = [];
@@ -39,6 +46,22 @@ function _startQaRunsPoll() {
   _qaRunsPollInterval = setInterval(loadQaRuns, 5000);
 }
 
+// W-mpxp7a3e000g0a49 — open Command Center drawer + focus the composer.
+// toggleCommandCenter() flips _ccOpen, so re-invoking when already open
+// would close it; guard against that and just focus the input instead.
+function qaFocusCommandCenter() {
+  try {
+    const alreadyOpen = (typeof _ccOpen !== 'undefined') ? !!_ccOpen
+      : ((typeof window !== 'undefined') && !!window._ccOpen);
+    if (!alreadyOpen && typeof toggleCommandCenter === 'function') {
+      toggleCommandCenter();
+      return; // toggleCommandCenter focuses #cc-input on open
+    }
+    const input = document.getElementById('cc-input');
+    if (input) input.focus();
+  } catch (_e) { /* never let a focus helper crash the page */ }
+}
+
 // ── Section 1: Targets ─────────────────────────────────────────────────────
 async function loadQaTargets() {
   const root = document.getElementById('qa-targets-content');
@@ -176,6 +199,7 @@ async function loadQaRunbooks() {
     }
   } catch (e) { err = e; }
   _qaRunbooksCache = items;
+  _qaUpdateRunbooksDisclosureCount(items.length);
 
   if (err) {
     // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: err.message)
@@ -187,7 +211,7 @@ async function loadQaRunbooks() {
   }
   if (!items.length) {
     const frag = document.createRange().createContextualFragment(
-      '<p class="empty">No runbooks yet. Click <strong>+ New runbook</strong> to create one.</p>'
+      '<p class="empty">No runbooks saved yet.</p>'
     );
     root.replaceChildren(frag);
     return;
@@ -204,7 +228,10 @@ async function loadQaRunbooks() {
           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 class="qa-runbook-actions" style="display:flex;gap:var(--space-2)">' +
+        '<button class="qa-btn-primary qa-runbook-run-btn" data-runbook-id="' + escHtml(id) + '" onclick="qaRunRunbook(this.dataset.runbookId)">Run</button>' +
+        '<button class="qa-btn-ghost qa-btn-danger qa-runbook-delete-btn" data-runbook-id="' + escHtml(id) + '" onclick="qaDeleteRunbook(this.dataset.runbookId)">Delete</button>' +
+      '</div>' +
       '</div>';
   }).join('');
   // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: runbook id, name, target)
@@ -212,93 +239,27 @@ async function loadQaRunbooks() {
   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();
+// W-mpxp7a3e000g0a49 — keep the "Show saved runbooks (N)" disclosure summary
+// in sync with the runbook count after every load.
+function _qaUpdateRunbooksDisclosureCount(n) {
+  const sum = document.getElementById('qa-runbooks-disclosure-summary');
+  if (sum) sum.textContent = 'Show saved runbooks (' + n + ')';
 }
 
-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)'; }
+async function qaDeleteRunbook(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('Delete runbook "' + label + '"? This cannot be undone.')) return;
   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,
-      }),
-    });
+    const res = await fetch('/api/qa/runbooks/' + encodeURIComponent(id), { method: 'DELETE' });
     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)'; }
+    alert('Failed to delete runbook "' + label + '": ' + (e.message || String(e)));
   }
 }
 
@@ -331,7 +292,7 @@ async function loadQaRuns() {
   let items = [];
   let err = null;
   try {
-    const res = await fetch('/api/qa/runs?limit=50');
+    const res = await fetch('/api/qa/runs?limit=20');
     if (res.ok) {
       const data = await res.json();
       items = Array.isArray(data && data.items) ? data.items : (Array.isArray(data) ? data : []);
@@ -550,29 +511,16 @@ function _startQaSessionsPoll() {
   _qaSessionsPollInterval = setInterval(loadQaSessions, 3000);
 }
 
-// Show / hide the per-target-kind sub-input. Called from the kind dropdown
-// onchange so users only see the field that maps to their selected kind.
-function qaSessionTargetKindChanged() {
-  const kind = document.getElementById('qa-session-target-kind');
-  if (!kind) return;
-  const wraps = {
-    pr: 'qa-session-target-pr-wrap',
-    branch: 'qa-session-target-branch-wrap',
-    commit: 'qa-session-target-sha-wrap',
-    current: 'qa-session-target-worktree-wrap',
-  };
-  for (const id of Object.values(wraps)) {
-    const el = document.getElementById(id);
-    if (el) el.style.display = 'none';
-  }
-  const showId = wraps[kind.value];
-  if (showId) {
-    const el = document.getElementById(showId);
-    if (el) el.style.display = '';
-  }
-}
+// W-mpxp7a3e000g0a49 — qaSessionTargetKindChanged removed; the inline
+// "Start QA Session" form has moved to Command Center. loadQaRunners and
+// loadQaProjectsSelect below are no-ops on this page (their target DOM
+// elements were removed with the form) but remain exported so the
+// PAGE_LAZY_LOADERS registry in state.js can still reference them by
+// name without throwing.
 
 async function loadQaRunners() {
+  // Form removed (W-mpxp7a3e000g0a49) — dropdown no longer exists, so this
+  // early-returns. Kept exported because PAGE_LAZY_LOADERS.qa references it.
   const sel = document.getElementById('qa-session-runner');
   if (!sel) return;
   try {
@@ -628,8 +576,9 @@ async function loadQaProjectsSelect() {
 }
 
 async function loadQaSessions() {
-  const root = document.getElementById('qa-sessions-content');
-  if (!root) return;
+  const activeRoot = document.getElementById('qa-sessions-content');
+  const recentRoot = document.getElementById('qa-sessions-recent-content');
+  if (!activeRoot) return;
   let sessions = [];
   let err = null;
   try {
@@ -643,27 +592,46 @@ async function loadQaSessions() {
     const frag = document.createRange().createContextualFragment(
       '<p class="empty" style="color:var(--red)">Failed to load sessions: ' + escHtml(err.message || String(err)) + '</p>'
     );
-    root.replaceChildren(frag);
+    activeRoot.replaceChildren(frag);
     return;
   }
 
   _qaSessionsCache = sessions;
-  if (!sessions.length) {
+
+  // W-mpxp7a3e000g0a49 — split into active (non-terminal) + recent (terminal,
+  // last 10). Active list is the primary surface; terminal sessions live
+  // behind a collapsed disclosure to keep the page scannable.
+  const active = sessions.filter(s => s && !QA_SESSION_TERMINAL_STATES.has(s.state));
+  const terminal = sessions.filter(s => s && QA_SESSION_TERMINAL_STATES.has(s.state)).slice(0, 10);
+
+  if (!active.length) {
     const frag = document.createRange().createContextualFragment(
-      '<p class="empty">No QA sessions yet. Use the form above to start one.</p>'
+      '<p class="empty">No active QA sessions.</p>'
     );
-    root.replaceChildren(frag);
-    _qaAfterSessionsRender();
-    return;
+    activeRoot.replaceChildren(frag);
+  } else {
+    let html = '';
+    for (const s of active) html += _qaRenderSessionCard(s);
+    // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: session id, state, target sub-fields, mode, runner, error/summary/failureClass)
+    const frag = document.createRange().createContextualFragment(html);
+    activeRoot.replaceChildren(frag);
   }
 
-  let html = '';
-  for (const s of sessions) {
-    html += _qaRenderSessionCard(s);
+  if (recentRoot) {
+    if (!terminal.length) {
+      const frag = document.createRange().createContextualFragment(
+        '<p class="empty">No recent sessions.</p>'
+      );
+      recentRoot.replaceChildren(frag);
+    } else {
+      let html = '';
+      for (const s of terminal) html += _qaRenderSessionCard(s);
+      // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: session id, state, target sub-fields, mode, runner, error/summary/failureClass)
+      const frag = document.createRange().createContextualFragment(html);
+      recentRoot.replaceChildren(frag);
+    }
   }
-  // eslint-disable-next-line no-unsanitized/method -- reason: structural HTML is a string literal; all user data wrapped in escHtml() (fields: session id, state, target sub-fields, mode, runner, error/summary/failureClass)
-  const frag = document.createRange().createContextualFragment(html);
-  root.replaceChildren(frag);
+
   _qaAfterSessionsRender();
 }
 
@@ -695,11 +663,13 @@ function _qaRenderSessionCard(s) {
   const phases = _qaRenderPhaseChips(state);
 
   // Action buttons depend on session state:
-  //   - awaiting-approval → [APPROVE & RUN] [EDIT] [CANCEL]
+  //   - awaiting-approval → [REVIEW DRAFT] [APPROVE & RUN] [EDIT] [CANCEL]
+  //     The Review draft button comes first so users read before approving.
   //   - non-terminal      → footer always shows [DISMISS] [KILL SPAWN]
   //   - terminal          → no actions
   let actions = '';
   if (state === 'awaiting-approval') {
+    actions += '<button class="qa-btn-ghost" onclick="qaSessionReviewDraft(\'' + escHtml(id) + '\')">Review draft</button>';
     actions += '<button class="qa-btn-primary" onclick="qaSessionApprove(\'' + escHtml(id) + '\')">Approve &amp; run</button>';
     actions += '<button class="qa-btn-ghost" onclick="qaSessionEditPrompt(\'' + escHtml(id) + '\')">Edit</button>';
     actions += '<button class="qa-btn-ghost" onclick="qaSessionCancel(\'' + escHtml(id) + '\')">Cancel</button>';
@@ -788,71 +758,9 @@ function _qaSummarizeTarget(target) {
   }
 }
 
-async function qaSubmitSessionForm() {
-  const msg = document.getElementById('qa-session-form-msg');
-  const submit = document.getElementById('qa-session-submit');
-  if (msg) msg.textContent = '';
-  if (submit) submit.disabled = true;
-
-  const kind = (document.getElementById('qa-session-target-kind') || {}).value;
-  const target = { kind };
-  if (kind === 'pr')     target.prId    = (document.getElementById('qa-session-target-pr-id') || {}).value || '';
-  if (kind === 'branch') target.branch  = (document.getElementById('qa-session-target-branch') || {}).value || '';
-  if (kind === 'commit') target.sha     = (document.getElementById('qa-session-target-sha') || {}).value || '';
-  if (kind === 'current') {
-    const wt = (document.getElementById('qa-session-target-worktree') || {}).value || '';
-    if (wt) target.worktree = wt;
-  }
-  const flowsRaw = (document.getElementById('qa-session-flows') || {}).value || '';
-  const mode = (document.getElementById('qa-session-mode') || {}).value || 'confirm';
-  const runner = (document.getElementById('qa-session-runner') || {}).value || '';
-  // W-mpq6xqzj000606d0 — Multi-select projects dropdown. First selected =
-  // primary (drives DRAFT/EXECUTE); rest = co-services (dev-up only).
-  // Empty selection = central (no project).
-  const projectsSel = document.getElementById('qa-session-projects');
-  const projects = projectsSel
-    ? Array.from(projectsSel.selectedOptions || []).map(o => o.value).filter(Boolean)
-    : [];
-  const capture = {
-    video: !!(document.getElementById('qa-session-capture-video') || {}).checked,
-    screenshots: !!(document.getElementById('qa-session-capture-screenshots') || {}).checked,
-    logs: !!(document.getElementById('qa-session-capture-logs') || {}).checked,
-  };
-  const body = { target, flowsRaw, mode, capture };
-  if (runner) body.runner = runner;
-  if (projects.length > 0) body.projects = projects;
-
-  try {
-    const res = await fetch('/api/qa/session', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body),
-    });
-    const json = await res.json().catch(() => ({}));
-    if (!res.ok) {
-      if (msg) msg.textContent = 'Error ' + res.status + ': ' + (json.error || 'unknown');
-      if (msg) msg.style.color = 'var(--red)';
-      return;
-    }
-    if (msg) {
-      msg.textContent = 'Session ' + (json.sessionId || '') + ' queued.';
-      msg.style.color = 'var(--green)';
-    }
-    // Reset only the flows (the rest is sticky for fast iteration).
-    const flowsEl = document.getElementById('qa-session-flows');
-    if (flowsEl) flowsEl.value = '';
-    // Optimistic refresh + restart polling — a new non-terminal session
-    // means the auto-stop heuristic should reactivate.
-    _startQaSessionsPoll();
-  } catch (e) {
-    if (msg) {
-      msg.textContent = 'Network error: ' + (e && e.message || String(e));
-      msg.style.color = 'var(--red)';
-    }
-  } finally {
-    if (submit) submit.disabled = false;
-  }
-}
+// W-mpxp7a3e000g0a49 — qaSubmitSessionForm removed; creating QA sessions
+// now flows through Command Center (POST /api/qa/session is still wired
+// for CC and external callers, but the inline form on this page is gone).
 
 async function _qaSessionPost(url, label, body) {
   try {
@@ -904,3 +812,289 @@ function qaSessionEditPrompt(id) {
   if (!fb || !fb.trim()) return null;
   return qaSessionEdit(id, fb);
 }
+
+// ── Review draft modal (W-mpxpvpwn000ra419) ──────────────────────────────
+//
+// Greenfield modal infrastructure. There is no reusable generic modal in
+// dashboard/js/* today (modal-qa.js is doc-chat, not a modal shell), so the
+// minimal one below is inlined here. Read-only by design — editing a draft
+// continues to flow through the existing prompt()-based qaSessionEditPrompt
+// path. The "Request edit" button in the modal footer just calls it.
+//
+// All DOM construction uses document.createElement + appendChild (and
+// textContent for any caller-supplied content) so eslint-plugin-no-unsanitized
+// stays happy. The only HTML-string interpolation is for static structural
+// markup (icons + class names), which the lint rule explicitly allows.
+//
+// State invariants:
+//  - Idempotent open: a re-open while a modal is already mounted no-ops if
+//    the sessionId matches, or closes-then-reopens for a different session.
+//  - Close on backdrop click + Esc; both paths route through _qaModalClose
+//    so the keydown listener and focus restore happen exactly once.
+//  - Focus restores to the originating button on close (a11y).
+
+let _qaModalState = null; // { sessionId, root, originButton, keydownHandler }
+
+function qaSessionReviewDraft(id) {
+  if (!id) return null;
+  // Idempotent: same id → no-op; different id → close + reopen.
+  if (_qaModalState) {
+    if (_qaModalState.sessionId === id) return null;
+    _qaModalClose();
+  }
+  _qaInstallModalStyle();
+  // Capture the focused button so we can restore focus on close (a11y).
+  const originButton = (document.activeElement && document.activeElement.tagName === 'BUTTON')
+    ? document.activeElement
+    : null;
+  // Mount the shell synchronously with a "Loading…" body so the modal feels
+  // responsive even on slow fetches. We replace the body once the test file
+  // comes back from /api/qa/sessions/<id>/test.
+  const root = _qaBuildModalShell(id);
+  document.body.appendChild(root);
+  const keydownHandler = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      _qaModalClose();
+    }
+  };
+  document.addEventListener('keydown', keydownHandler);
+  _qaModalState = { sessionId: id, root, originButton, keydownHandler };
+  // Fetch + render body. We don't block opening on the fetch — the spinner
+  // is shown until the response lands.
+  fetch('/api/qa/sessions/' + encodeURIComponent(id) + '/test')
+    .then(res => res.json().catch(() => ({})).then(json => ({ res, json })))
+    .then(({ res, json }) => {
+      if (!_qaModalState || _qaModalState.sessionId !== id) return; // closed mid-flight
+      if (!res.ok || !json || !json.ok) {
+        _qaModalRenderError(json && json.error ? String(json.error) : 'Failed to load draft (' + res.status + ')');
+        return;
+      }
+      _qaModalRenderBody(json);
+    })
+    .catch((e) => {
+      if (!_qaModalState || _qaModalState.sessionId !== id) return;
+      _qaModalRenderError(e && e.message || String(e));
+    });
+  return null;
+}
+
+function _qaModalClose() {
+  if (!_qaModalState) return;
+  const { root, originButton, keydownHandler } = _qaModalState;
+  _qaModalState = null;
+  if (keydownHandler) document.removeEventListener('keydown', keydownHandler);
+  if (root && root.parentNode) root.parentNode.removeChild(root);
+  // Restore focus to the originating button for keyboard navigation.
+  if (originButton && typeof originButton.focus === 'function') {
+    try { originButton.focus(); } catch (_) { /* noop */ }
+  }
+}
+
+function _qaBuildModalShell(sessionId) {
+  const backdrop = document.createElement('div');
+  backdrop.className = 'qa-modal-backdrop';
+  backdrop.setAttribute('role', 'dialog');
+  backdrop.setAttribute('aria-modal', 'true');
+  backdrop.setAttribute('aria-label', 'Review drafted QA test');
+  backdrop.addEventListener('click', (e) => {
+    if (e.target === backdrop) _qaModalClose();
+  });
+
+  const shell = document.createElement('div');
+  shell.className = 'qa-modal-shell';
+  backdrop.appendChild(shell);
+
+  // Header
+  const header = document.createElement('div');
+  header.className = 'qa-modal-header';
+  const title = document.createElement('div');
+  title.className = 'qa-modal-title';
+  title.textContent = 'Drafted test — (loading…)';
+  header.appendChild(title);
+  const closeBtn = document.createElement('button');
+  closeBtn.type = 'button';
+  closeBtn.className = 'qa-btn-ghost qa-modal-close';
+  closeBtn.setAttribute('aria-label', 'Close');
+  closeBtn.textContent = '×';
+  closeBtn.addEventListener('click', _qaModalClose);
+  header.appendChild(closeBtn);
+  shell.appendChild(header);
+
+  // Meta strip
+  const meta = document.createElement('div');
+  meta.className = 'qa-modal-meta';
+  meta.setAttribute('data-qa-modal-region', 'meta');
+  const metaSession = document.createElement('span');
+  metaSession.className = 'qa-modal-meta-item';
+  metaSession.textContent = 'session: ' + sessionId;
+  meta.appendChild(metaSession);
+  shell.appendChild(meta);
+
+  // Body
+  const body = document.createElement('div');
+  body.className = 'qa-modal-body';
+  body.setAttribute('data-qa-modal-region', 'body');
+  const loading = document.createElement('p');
+  loading.className = 'qa-modal-loading';
+  loading.textContent = 'Loading draft…';
+  body.appendChild(loading);
+  shell.appendChild(body);
+
+  // Footer
+  const footer = document.createElement('div');
+  footer.className = 'qa-modal-footer';
+  footer.setAttribute('data-qa-modal-region', 'footer');
+  shell.appendChild(footer);
+
+  return backdrop;
+}
+
+function _qaModalRenderError(message) {
+  if (!_qaModalState) return;
+  const body = _qaModalState.root.querySelector('[data-qa-modal-region="body"]');
+  if (!body) return;
+  body.textContent = '';
+  const err = document.createElement('p');
+  err.className = 'qa-modal-error';
+  err.textContent = message;
+  body.appendChild(err);
+}
+
+function _qaModalRenderBody(payload) {
+  if (!_qaModalState) return;
+  const id = _qaModalState.sessionId;
+  const root = _qaModalState.root;
+  // Update header title with the test file path.
+  const title = root.querySelector('.qa-modal-title');
+  if (title) title.textContent = 'Drafted test — ' + (payload.path || '(unknown file)');
+
+  // Augment meta strip with language + size.
+  const meta = root.querySelector('[data-qa-modal-region="meta"]');
+  if (meta) {
+    const lang = document.createElement('span');
+    lang.className = 'qa-modal-meta-item';
+    lang.textContent = 'language: ' + (payload.language || 'plaintext');
+    meta.appendChild(lang);
+    const size = document.createElement('span');
+    size.className = 'qa-modal-meta-item';
+    size.textContent = 'size: ' + (typeof payload.size === 'number' ? payload.size + ' bytes' : 'unknown');
+    meta.appendChild(size);
+  }
+
+  // Body: either code block or "too large" placeholder.
+  const body = root.querySelector('[data-qa-modal-region="body"]');
+  if (body) {
+    body.textContent = '';
+    if (payload.truncated) {
+      const tooBig = document.createElement('p');
+      tooBig.className = 'qa-modal-too-big';
+      // payload.path is the relative session.testFile from the API; render the
+      // hint with textContent so escHtml-style XSS is impossible by construction.
+      tooBig.textContent = 'File is ' + (payload.size || 0) +
+        ' bytes — open engine/qa-tests/' + id + '/' + (payload.path || '') +
+        ' to review.';
+      body.appendChild(tooBig);
+    } else {
+      const pre = document.createElement('pre');
+      pre.className = 'qa-modal-code';
+      const code = document.createElement('code');
+      // Assign the raw file content via textContent — the DOM treats the value
+      // as literal text and neutralizes any HTML/script for free. Do NOT wrap
+      // with escHtml(): textContent would then render the escape entities
+      // (&lt;, &gt;, &#39;, &amp;) verbatim, defeating the source preview for
+      // any TS/JS/Py file with <, >, &, or ' characters (W-mpxpvpwn000ra419).
+      code.textContent = String(payload.content || '');
+      pre.appendChild(code);
+      body.appendChild(pre);
+    }
+  }
+
+  // Footer: Approve & run + Request edit + Close. Approve is suppressed when
+  // the file is truncated (>256KB) so users can't blind-approve a megabyte.
+  const footer = root.querySelector('[data-qa-modal-region="footer"]');
+  if (footer) {
+    footer.textContent = '';
+    if (!payload.truncated) {
+      const approve = document.createElement('button');
+      approve.type = 'button';
+      approve.className = 'qa-btn-primary';
+      approve.textContent = 'Approve & run';
+      approve.addEventListener('click', () => {
+        _qaModalClose();
+        qaSessionApprove(id);
+      });
+      footer.appendChild(approve);
+    }
+    const editBtn = document.createElement('button');
+    editBtn.type = 'button';
+    editBtn.className = 'qa-btn-ghost';
+    editBtn.textContent = 'Request edit';
+    editBtn.addEventListener('click', () => {
+      _qaModalClose();
+      qaSessionEditPrompt(id);
+    });
+    footer.appendChild(editBtn);
+    const closeBtn = document.createElement('button');
+    closeBtn.type = 'button';
+    closeBtn.className = 'qa-btn-ghost';
+    closeBtn.textContent = 'Close';
+    closeBtn.addEventListener('click', _qaModalClose);
+    footer.appendChild(closeBtn);
+  }
+}
+
+// Inject modal CSS once. Keyed off a data attribute on the <style> tag so
+// repeated calls (e.g. from a re-rendered card) don't duplicate the block.
+function _qaInstallModalStyle() {
+  if (document.querySelector('style[data-qa-modal-style]')) return;
+  const style = document.createElement('style');
+  style.setAttribute('data-qa-modal-style', '1');
+  style.textContent = [
+    '.qa-modal-backdrop {',
+    '  position: fixed; inset: 0; z-index: 9999;',
+    '  background: rgba(0,0,0,0.5);',
+    '  display: flex; align-items: center; justify-content: center;',
+    '}',
+    '.qa-modal-shell {',
+    '  background: var(--surface, #fff);',
+    '  color: var(--text, #111);',
+    '  border-radius: 8px;',
+    '  max-width: 80vw; max-height: 80vh;',
+    '  width: 800px;',
+    '  display: flex; flex-direction: column;',
+    '  box-shadow: 0 8px 32px rgba(0,0,0,0.3);',
+    '  border: 1px solid var(--border, #ddd);',
+    '}',
+    '.qa-modal-header {',
+    '  display: flex; align-items: center; justify-content: space-between;',
+    '  padding: 12px 16px; border-bottom: 1px solid var(--border, #ddd);',
+    '}',
+    '.qa-modal-title { font-weight: 600; }',
+    '.qa-modal-close { font-size: 20px; padding: 0 8px; }',
+    '.qa-modal-meta {',
+    '  display: flex; gap: 12px; flex-wrap: wrap;',
+    '  padding: 8px 16px; border-bottom: 1px solid var(--border, #ddd);',
+    '  font-size: 12px; color: var(--muted, #666);',
+    '}',
+    '.qa-modal-meta-item { white-space: nowrap; }',
+    '.qa-modal-body { flex: 1; overflow: auto; padding: 12px 16px; }',
+    '.qa-modal-code {',
+    '  font-family: ui-monospace, Menlo, Consolas, monospace;',
+    '  font-size: 12px; line-height: 1.5;',
+    '  background: var(--surface2, #f6f6f6);',
+    '  border: 1px solid var(--border, #ddd);',
+    '  border-radius: 4px; padding: 12px;',
+    '  white-space: pre; overflow: auto;',
+    '  margin: 0;',
+    '}',
+    '.qa-modal-too-big { color: var(--muted, #666); font-style: italic; }',
+    '.qa-modal-error { color: var(--red, #c00); }',
+    '.qa-modal-loading { color: var(--muted, #666); }',
+    '.qa-modal-footer {',
+    '  display: flex; gap: 8px; justify-content: flex-end;',
+    '  padding: 12px 16px; border-top: 1px solid var(--border, #ddd);',
+    '}',
+  ].join('\n');
+  document.head.appendChild(style);
+}