@yemi33/minions 0.1.2071 → 0.1.2072

package/dashboard/js/qa.js

@@ -503,7 +503,365 @@ function qaOpenRunAgent(workItemId, agentId) {
     if (typeof currentPage !== 'undefined' && currentPage === 'qa') {
       loadQaTargets();
       loadQaRunbooks();
+      loadQaRunners();
+      loadQaSessions();
+      _startQaSessionsPoll();
       _startQaRunsPoll();
     }
   } catch {}
 })();
+
+// ── P-h7e4f9b2: QA Sessions section ───────────────────────────────────────
+//
+// Three sub-UIs that mirror the Targets / Runbooks / Runs trio above:
+//   1. "Start QA Session" form posts to POST /api/qa/session.
+//   2. Sessions list (composite cards with phase chips) polled every 3s
+//      while any session is non-terminal; clearInterval once all sessions
+//      are terminal (mirrors _stopPlanPoll's "auto-stop on terminal" rule).
+//   3. Runner dropdown auto-loaded from GET /api/qa/runners.
+//
+// All renderer HTML escapes user-supplied values with escHtml. The five
+// session actions (approve / edit / cancel / dismiss / kill) call their
+// matching /api/qa/sessions/<id>/<action> endpoint and refresh the card in
+// place via a follow-up loadQaSessions().
+
+const QA_SESSION_TERMINAL_STATES = new Set(['done', 'failed', 'killed']);
+
+let _qaSessionsPollInterval = null;
+let _qaSessionsCache = [];
+let _qaRunnersCache = [];
+
+function _stopQaSessionsPoll() {
+  if (_qaSessionsPollInterval) {
+    clearInterval(_qaSessionsPollInterval);
+    _qaSessionsPollInterval = null;
+  }
+}
+
+function _startQaSessionsPoll() {
+  _stopQaSessionsPoll();
+  // Initial fetch + 3s poll per acceptance criteria. The poll is auto-
+  // stopped once every session in _qaSessionsCache is terminal (see
+  // _qaAfterSessionsRender). The PAGE_LEAVE_HOOKS still call
+  // _stopQaSessionsPoll on every switchPage, so leaving the page is a
+  // separate stop trigger.
+  loadQaSessions();
+  _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 = '';
+  }
+}
+
+async function loadQaRunners() {
+  const sel = document.getElementById('qa-session-runner');
+  if (!sel) return;
+  try {
+    const res = await fetch('/api/qa/runners');
+    const json = res.ok ? await res.json() : { runners: [] };
+    _qaRunnersCache = Array.isArray(json.runners) ? json.runners : [];
+  } catch { _qaRunnersCache = []; }
+  // Rebuild via DOM API so we don't touch innerHTML at all.
+  while (sel.firstChild) sel.removeChild(sel.firstChild);
+  const auto = document.createElement('option');
+  auto.value = '';
+  auto.textContent = 'Auto-detect';
+  sel.appendChild(auto);
+  for (const r of _qaRunnersCache) {
+    if (!r || !r.name) continue;
+    const opt = document.createElement('option');
+    opt.value = r.name;
+    opt.textContent = (r.label || r.name) + ' (priority ' + (r.priority != null ? r.priority : '?') + ')';
+    sel.appendChild(opt);
+  }
+}
+
+async function loadQaSessions() {
+  const root = document.getElementById('qa-sessions-content');
+  if (!root) return;
+  let sessions = [];
+  let err = null;
+  try {
+    const res = await fetch('/api/qa/sessions?limit=50');
+    const json = res.ok ? await res.json() : { sessions: [] };
+    sessions = Array.isArray(json.sessions) ? json.sessions : [];
+  } catch (e) { err = e; }
+
+  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)
+    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);
+    return;
+  }
+
+  _qaSessionsCache = sessions;
+  if (!sessions.length) {
+    const frag = document.createRange().createContextualFragment(
+      '<p class="empty">No QA sessions yet. Use the form above to start one.</p>'
+    );
+    root.replaceChildren(frag);
+    _qaAfterSessionsRender();
+    return;
+  }
+
+  let html = '';
+  for (const s of sessions) {
+    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);
+  root.replaceChildren(frag);
+  _qaAfterSessionsRender();
+}
+
+// Auto-stop polling once every visible session has reached a terminal
+// state. The form-submit + action handlers each call _startQaSessionsPoll
+// to restart polling when the next non-terminal session appears.
+function _qaAfterSessionsRender() {
+  const allTerminal = _qaSessionsCache.length > 0
+    && _qaSessionsCache.every(s => s && QA_SESSION_TERMINAL_STATES.has(s.state));
+  if (allTerminal) _stopQaSessionsPoll();
+}
+
+function _qaRenderSessionCard(s) {
+  const id = s && s.id || '';
+  const state = (s && s.state) || 'unknown';
+  const spec = (s && s.spec) || {};
+  const target = spec.target || {};
+  const targetSummary = _qaSummarizeTarget(target);
+  const flowsRaw = spec.flowsRaw || '';
+  const flowsShort = flowsRaw.length > 200 ? flowsRaw.slice(0, 200) + '…' : flowsRaw;
+  const runner = spec.runner || '(auto-detect)';
+  const mode = spec.mode || 'confirm';
+  const failureClass = s && s.failureClass || '';
+  const error = s && s.error || '';
+  const summary = s && s.summary || '';
+  const createdAt = s && s.createdAt ? String(s.createdAt).slice(0, 19).replace('T', ' ') : '';
+  const isTerminal = QA_SESSION_TERMINAL_STATES.has(state);
+
+  const phases = _qaRenderPhaseChips(state);
+
+  // Action buttons depend on session state:
+  //   - awaiting-approval → [APPROVE & RUN] [EDIT] [CANCEL]
+  //   - non-terminal      → footer always shows [DISMISS] [KILL SPAWN]
+  //   - terminal          → no actions
+  let actions = '';
+  if (state === 'awaiting-approval') {
+    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>';
+  }
+  if (!isTerminal) {
+    actions += '<button class="qa-btn-ghost" onclick="qaSessionDismiss(\'' + escHtml(id) + '\')">Dismiss</button>';
+    actions += '<button class="qa-btn-ghost qa-btn-danger" onclick="qaSessionKill(\'' + escHtml(id) + '\')">Kill spawn</button>';
+  }
+
+  let meta = '';
+  meta += '<span class="qa-session-meta-item">target: <code>' + escHtml(targetSummary) + '</code></span>';
+  meta += '<span class="qa-session-meta-item">mode: <code>' + escHtml(mode) + '</code></span>';
+  meta += '<span class="qa-session-meta-item">runner: <code>' + escHtml(runner) + '</code></span>';
+  if (createdAt) meta += '<span class="qa-session-meta-item qa-session-meta-ts">' + escHtml(createdAt) + '</span>';
+
+  let body = '';
+  if (flowsShort) {
+    body += '<div class="qa-session-flows"><strong>Flows:</strong> ' + escHtml(flowsShort) + '</div>';
+  }
+  if (state === 'failed' && (failureClass || error)) {
+    body += '<div class="qa-session-error"><strong>' + escHtml(failureClass || 'failed') + ':</strong> ' + escHtml(error || summary || 'no details') + '</div>';
+  } else if (summary) {
+    body += '<div class="qa-session-summary">' + escHtml(summary) + '</div>';
+  }
+
+  const stateClass = 'qa-session-state-' + escHtml(state);
+  return (
+    '<div class="qa-session-card ' + stateClass + '" data-session-id="' + escHtml(id) + '">' +
+      '<div class="qa-session-head">' +
+        '<span class="qa-session-id"><code>' + escHtml(id) + '</code></span>' +
+        '<span class="qa-session-state">' + escHtml(state) + '</span>' +
+      '</div>' +
+      '<div class="qa-session-phases">' + phases + '</div>' +
+      '<div class="qa-session-meta">' + meta + '</div>' +
+      body +
+      (actions ? '<div class="qa-session-actions">' + actions + '</div>' : '') +
+    '</div>'
+  );
+}
+
+// Map session.state → the visual phase the user is currently in (1..4).
+// Phases earlier than `current` render as --done; later phases render as
+// muted; the current phase is --active. Terminal states render the final
+// phase as --done with a status badge on the state row.
+function _qaRenderPhaseChips(state) {
+  const PHASES = [
+    { key: 'setup',   icon: '🔧', label: 'setup' },
+    { key: 'draft',   icon: '📝', label: 'draft' },
+    { key: 'execute', icon: '▶',  label: 'execute' },
+    { key: 'done',    icon: '✅', label: 'done' },
+  ];
+  let activeIdx;
+  switch (state) {
+    case 'pending':
+    case 'spawning': activeIdx = 0; break;
+    case 'drafting':
+    case 'awaiting-approval': activeIdx = 1; break;
+    case 'executing': activeIdx = 2; break;
+    case 'done':
+    case 'failed':
+    case 'killed': activeIdx = 3; break;
+    default: activeIdx = 0;
+  }
+  let html = '';
+  for (let i = 0; i < PHASES.length; i++) {
+    let cls = 'qa-phase-chip';
+    if (i < activeIdx) cls += ' qa-phase-chip--done';
+    else if (i === activeIdx) cls += ' qa-phase-chip--active';
+    else cls += ' qa-phase-chip--pending';
+    if (i === 3 && state === 'failed') cls += ' qa-phase-chip--failed';
+    if (i === 3 && state === 'killed') cls += ' qa-phase-chip--killed';
+    html += '<span class="' + escHtml(cls) + '">' + escHtml(PHASES[i].icon) + ' ' + escHtml(PHASES[i].label) + '</span>';
+    if (i < PHASES.length - 1) html += '<span class="qa-phase-arrow">→</span>';
+  }
+  return html;
+}
+
+function _qaSummarizeTarget(target) {
+  if (!target || typeof target !== 'object') return '(unknown)';
+  switch (target.kind) {
+    case 'pr': return 'PR#' + (target.prId || '?');
+    case 'branch': return 'branch:' + (target.branch || '?');
+    case 'commit': return 'commit:' + String(target.sha || '').slice(0, 8);
+    case 'current': return 'current:' + (target.worktree || '(agent cwd)');
+    default: return target.kind || '(unknown)';
+  }
+}
+
+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 || '';
+  const project = (document.getElementById('qa-session-project') || {}).value || '';
+  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 (project) body.project = project;
+
+  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;
+  }
+}
+
+async function _qaSessionPost(url, label, body) {
+  try {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: body ? JSON.stringify(body) : '{}',
+    });
+    const json = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      alert(label + ' failed (' + res.status + '): ' + (json.error || 'unknown'));
+      return null;
+    }
+    _startQaSessionsPoll();
+    return json;
+  } catch (e) {
+    alert(label + ' failed: ' + (e && e.message || String(e)));
+    return null;
+  }
+}
+
+function qaSessionApprove(id) {
+  if (!id) return null;
+  return _qaSessionPost('/api/qa/sessions/' + encodeURIComponent(id) + '/approve', 'approve');
+}
+function qaSessionCancel(id) {
+  if (!id) return null;
+  if (!confirm('Cancel session ' + id + '? The managed-spawn keeps running — use Kill to also tear it down.')) return null;
+  return _qaSessionPost('/api/qa/sessions/' + encodeURIComponent(id) + '/cancel', 'cancel');
+}
+function qaSessionDismiss(id) {
+  if (!id) return null;
+  if (!confirm('Mark session ' + id + ' done without running EXECUTE?')) return null;
+  return _qaSessionPost('/api/qa/sessions/' + encodeURIComponent(id) + '/dismiss', 'dismiss');
+}
+function qaSessionKill(id) {
+  if (!id) return null;
+  if (!confirm('Kill session ' + id + ' AND its managed-spawn?')) return null;
+  return _qaSessionPost('/api/qa/sessions/' + encodeURIComponent(id) + '/kill', 'kill');
+}
+function qaSessionEdit(id, feedback) {
+  if (!id) return null;
+  if (!feedback || !feedback.trim()) return null;
+  return _qaSessionPost('/api/qa/sessions/' + encodeURIComponent(id) + '/edit', 'edit', { feedback });
+}
+// Convenience wrapper used by the card UI — prompt for feedback then POST.
+function qaSessionEditPrompt(id) {
+  const fb = prompt('Reviewer feedback for the next DRAFT pass:');
+  if (!fb || !fb.trim()) return null;
+  return qaSessionEdit(id, fb);
+}

package/dashboard/js/state.js

@@ -43,7 +43,7 @@ let currentPage = getPageFromUrl();
 // _stopMeetingPoll, _stopQaRunsPoll all clearInterval on a nullable handle;
 // closeDetail / closeManagedLog short-circuit when no panel/stream is open.
 const PAGE_LAZY_LOADERS = {
-  qa: ['loadQaTargets', 'loadQaRunbooks', '_startQaRunsPoll'],
+  qa: ['loadQaTargets', 'loadQaRunbooks', 'loadQaRunners', 'loadQaSessions', '_startQaSessionsPoll', '_startQaRunsPoll'],
   plans: ['refreshPlans'],
   inbox: ['refreshKnowledgeBase'],
 };
@@ -53,6 +53,7 @@ const PAGE_LEAVE_HOOKS = [
   '_stopMeetingPoll',
   'closeDetail',
   '_stopQaRunsPoll',
+  '_stopQaSessionsPoll',
   'closeManagedLog',
 ];
 

package/dashboard/pages/qa.html

@@ -2,6 +2,78 @@
         <h2>QA</h2>
         <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-sessions-section" class="qa-section">
+        <h2>QA Sessions <span class="qa-section-subtitle">natural-language smoke tests — engine sets up a live target, drafts a runner-native test, and (with your approval) executes it</span></h2>
+        <div class="qa-session-form-wrap">
+          <form id="qa-session-form" onsubmit="event.preventDefault();qaSubmitSessionForm();">
+            <div class="qa-form-row qa-form-row--grid">
+              <div>
+                <label class="qa-form-label" for="qa-session-target-kind">Target</label>
+                <select id="qa-session-target-kind" class="qa-form-input" onchange="qaSessionTargetKindChanged()">
+                  <option value="current">Current worktree</option>
+                  <option value="pr">Pull request</option>
+                  <option value="branch">Branch</option>
+                  <option value="commit">Commit SHA</option>
+                </select>
+              </div>
+              <div>
+                <label class="qa-form-label" for="qa-session-project">Project</label>
+                <input id="qa-session-project" type="text" class="qa-form-input" placeholder="(blank = central)">
+              </div>
+            </div>
+            <div class="qa-form-row qa-session-target-fields">
+              <div id="qa-session-target-pr-wrap" class="qa-session-target-sub" style="display:none">
+                <label class="qa-form-label" for="qa-session-target-pr-id">PR id</label>
+                <input id="qa-session-target-pr-id" type="text" class="qa-form-input" placeholder="2887">
+              </div>
+              <div id="qa-session-target-branch-wrap" class="qa-session-target-sub" style="display:none">
+                <label class="qa-form-label" for="qa-session-target-branch">Branch</label>
+                <input id="qa-session-target-branch" type="text" class="qa-form-input" placeholder="work/my-feature">
+              </div>
+              <div id="qa-session-target-sha-wrap" class="qa-session-target-sub" style="display:none">
+                <label class="qa-form-label" for="qa-session-target-sha">Commit SHA</label>
+                <input id="qa-session-target-sha" type="text" class="qa-form-input" placeholder="abc1234">
+              </div>
+              <div id="qa-session-target-worktree-wrap" class="qa-session-target-sub">
+                <label class="qa-form-label" for="qa-session-target-worktree">Worktree path</label>
+                <input id="qa-session-target-worktree" type="text" class="qa-form-input" placeholder="(blank = $MINIONS_AGENT_CWD)">
+              </div>
+            </div>
+            <div class="qa-form-row">
+              <label class="qa-form-label" for="qa-session-flows">Flows</label>
+              <textarea id="qa-session-flows" class="qa-form-input qa-form-textarea" placeholder="open the homepage, click login, verify the dashboard renders" required></textarea>
+            </div>
+            <div class="qa-form-row qa-form-row--inline">
+              <div>
+                <label class="qa-form-label" for="qa-session-mode">Mode</label>
+                <select id="qa-session-mode" class="qa-form-input">
+                  <option value="confirm">Confirm (review draft first)</option>
+                  <option value="auto">Auto (skip approval)</option>
+                </select>
+              </div>
+              <div>
+                <label class="qa-form-label" for="qa-session-runner">Runner</label>
+                <select id="qa-session-runner" class="qa-form-input">
+                  <option value="">Auto-detect</option>
+                </select>
+              </div>
+              <div class="qa-session-capture-group">
+                <label class="qa-form-label">Capture</label>
+                <label class="qa-session-capture-item"><input id="qa-session-capture-screenshots" type="checkbox" checked> screenshots</label>
+                <label class="qa-session-capture-item"><input id="qa-session-capture-video" type="checkbox"> video</label>
+                <label class="qa-session-capture-item"><input id="qa-session-capture-logs" type="checkbox" checked> logs</label>
+              </div>
+            </div>
+            <div class="qa-form-row qa-form-actions">
+              <button type="submit" id="qa-session-submit" class="qa-btn-primary">Start QA Session</button>
+              <span id="qa-session-form-msg" class="qa-form-msg"></span>
+            </div>
+          </form>
+        </div>
+        <div id="qa-sessions-content" class="qa-sessions-list">
+          <p class="empty">Loading sessions…</p>
+        </div>
+      </section>
       <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">

package/dashboard/styles.css

@@ -1005,6 +1005,108 @@
   }
   .qa-artifact-log { max-width: 480px; }
 
+  /* ── P-h7e4f9b2: QA Sessions section ───────────────────────────────── */
+  .qa-session-form-wrap {
+    background: var(--surface2); border: 1px solid var(--border);
+    border-radius: var(--radius-md); padding: var(--space-5);
+    margin-bottom: var(--space-6);
+  }
+  .qa-form-row--grid {
+    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
+  }
+  .qa-form-row--inline {
+    display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end;
+  }
+  .qa-form-row--inline > div { display: flex; flex-direction: column; gap: var(--space-2); }
+  .qa-session-target-fields { gap: var(--space-3); }
+  .qa-session-target-sub { display: flex; flex-direction: column; gap: var(--space-2); }
+  .qa-session-capture-group { display: flex; flex-direction: column; gap: var(--space-2); }
+  .qa-session-capture-item {
+    display: inline-flex; align-items: center; gap: var(--space-2);
+    font-size: var(--text-base); color: var(--text);
+  }
+
+  .qa-sessions-list { display: flex; flex-direction: column; gap: var(--space-4); }
+  .qa-session-card {
+    border: 1px solid var(--border); border-radius: var(--radius-md);
+    background: var(--surface2); padding: var(--space-4) var(--space-5);
+    display: flex; flex-direction: column; gap: var(--space-3);
+  }
+  .qa-session-state-failed { border-left: 3px solid var(--red); }
+  .qa-session-state-killed { border-left: 3px solid var(--muted); }
+  .qa-session-state-done   { border-left: 3px solid var(--green); }
+  .qa-session-state-awaiting-approval { border-left: 3px solid var(--yellow); }
+  .qa-session-state-executing,
+  .qa-session-state-drafting,
+  .qa-session-state-spawning { border-left: 3px solid var(--blue); }
+  .qa-session-head {
+    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
+    font-size: var(--text-md);
+  }
+  .qa-session-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
+  .qa-session-state {
+    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-session-state-done   .qa-session-state { color: var(--green); border-color: var(--green); }
+  .qa-session-state-failed .qa-session-state { color: var(--red); border-color: var(--red); }
+  .qa-session-state-killed .qa-session-state { color: var(--muted); }
+  .qa-session-state-awaiting-approval .qa-session-state { color: var(--yellow); border-color: var(--yellow); }
+  .qa-session-state-executing .qa-session-state,
+  .qa-session-state-drafting .qa-session-state,
+  .qa-session-state-spawning .qa-session-state { color: var(--blue); border-color: var(--blue); }
+
+  .qa-session-phases {
+    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
+    font-size: var(--text-base);
+  }
+  .qa-phase-chip {
+    display: inline-flex; align-items: center; gap: 4px;
+    padding: 2px var(--space-3); border-radius: var(--radius-sm);
+    background: var(--surface); color: var(--muted);
+    border: 1px solid var(--border);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: var(--text-xs);
+  }
+  .qa-phase-chip--pending { opacity: 0.5; }
+  .qa-phase-chip--active {
+    color: var(--blue); border-color: var(--blue); font-weight: 600;
+    background: rgba(56, 139, 253, 0.08);
+  }
+  .qa-phase-chip--done { color: var(--green); border-color: var(--green); }
+  .qa-phase-chip--failed { color: var(--red); border-color: var(--red); }
+  .qa-phase-chip--killed { color: var(--muted); border-color: var(--muted); }
+  .qa-phase-arrow { color: var(--muted); font-size: var(--text-xs); }
+
+  .qa-session-meta {
+    display: flex; flex-wrap: wrap; gap: var(--space-4);
+    font-size: var(--text-base); color: var(--muted);
+  }
+  .qa-session-meta-ts { margin-left: auto; }
+  .qa-session-flows {
+    font-size: var(--text-base); color: var(--text);
+    background: var(--surface); padding: var(--space-3);
+    border-radius: var(--radius-sm); border: 1px solid var(--border);
+  }
+  .qa-session-error {
+    font-size: var(--text-base); color: var(--red);
+    background: rgba(248, 81, 73, 0.08); padding: var(--space-3);
+    border-radius: var(--radius-sm); border-left: 3px solid var(--red);
+  }
+  .qa-session-summary {
+    font-size: var(--text-base); color: var(--text);
+    background: var(--surface); padding: var(--space-3);
+    border-radius: var(--radius-sm);
+  }
+  .qa-session-actions {
+    display: flex; gap: var(--space-3); flex-wrap: wrap;
+    padding-top: var(--space-3); border-top: 1px solid var(--border);
+  }
+  .qa-btn-danger { color: var(--red); }
+  .qa-btn-danger:hover { background: rgba(248, 81, 73, 0.08); }
+
   /* W-mpmwxni2000c25c7-d - Command Center / doc-chat typed error bubble. */
   /* Token-only styling so dark/light themes stay consistent; the inline */
   /* styles emitted by command-center.js use the same vars and are kept */