fraim 2.0.154 → 2.0.160

package/public/ai-hub/script.js

@@ -21,10 +21,17 @@ const state = {
   selectedJob: null,   // chosen in modal step 1
   selectedEmployeeId: null,
   selectedPersonaKey: null,  // R4: null = "All employees"
-  modalPersonaFilter: null,  // R3+: filter inside new-job modal; null = "All jobs"
-  storedApiKey: null,        // R2: loaded from preferences, sent on bootstrap
-  panelState: {},            // { [convId]: { coach?: boolean } }
-};
+  modalPersonaFilter: null,  // R3+: filter inside new-job modal; null = "All jobs"
+  storedApiKey: null,        // R2: loaded from preferences, sent on bootstrap
+  panelState: {},            // { [convId]: { coach?: boolean } }
+  wordContext: null,         // WordContext pushed from taskpane.html via postMessage
+  // Pending coaching job selected via a quick-coach button or template picker.
+  // Sent as coachingJobId in the next continueRun call and then cleared.
+  // The invocation prefix ($fraim / /fraim) is added server-side based on
+  // the active employee; the user never sees the raw invocation syntax.
+  pendingCoachingJobId: null,
+  pendingCoachingLabel: null,
+};
 
 const els = {};
 
@@ -37,13 +44,14 @@ function gatherElements() {
     'project-button', 'project-name',
     'new-conv-btn', 'conv-list',
     // Issue #385: team roster
-    'team-roster',
-    'empty', 'active-conv', 'active-title', 'active-job', 'active-identity', 'run-state-pill',
-    'progress', 'stage', 'latest', 'artifact-slot', 'messages',
-    'coach-text', 'send', 'micro-manage', 'micro-log',
-    'status-line', 'coach-note',
-    'coach-panel', 'coach-summary',
-    'modal', 'step1', 'step2',
+    'team-roster',
+    'empty', 'active-conv', 'active-title', 'active-identity', 'run-state-pill',
+    'messages',
+    'coach-text', 'send', 'micro-manage', 'micro-log',
+    'status-line', 'coach-note',
+    'coach-panel', 'coach-summary',
+    'thread-panel', 'quick-coach-btns', 'other-manager-jobs-btn',
+    'modal', 'step1', 'step2',
     'cancel1', 'next1', 'back2', 'start',
     'job-search', 'job-catalog', 'job-pick-status',
     // Issue #385: hire-required notice, persona job filter
@@ -56,6 +64,12 @@ function gatherElements() {
     'tracker', 'tracker-rows', 'tracker-note',
     'template-picker-btn', 'template-popover',
     'totals',
+    // Issue #442: A/B mode elements.
+    'ab-toggle-wrap', 'ab-direct-panel',
+    'ab-direct-totals', 'ab-direct-progress', 'ab-direct-send',
+    // Issue #489: Word context elements.
+    'word-context-bar', 'word-ctx-text', 'word-ctx-refresh',
+    'word-context-card', 'word-ctx-card-label', 'word-ctx-card-body', 'word-ctx-card-toggle',
   ];
   for (const id of ids) {
     els[id] = document.getElementById(id);
@@ -63,6 +77,14 @@ function gatherElements() {
 }
 
 async function requestJson(url, options) {
+  // On localhost inject x-api-key: local-dev so the dev server auth bypass fires.
+  // The server's isLocalDev check already gates this to NODE_ENV !== 'production',
+  // so this header is harmless if accidentally sent to a non-dev server.
+  const isLocalHost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  if (isLocalHost) {
+    const headers = { 'x-api-key': 'local-dev', ...((options && options.headers) || {}) };
+    options = { ...(options || {}), headers };
+  }
   const response = await fetch(url, options);
   let payload = null;
   try { payload = await response.json(); } catch { /* may be empty */ }
@@ -74,10 +96,13 @@ async function requestJson(url, options) {
   return payload;
 }
 
-async function loadBootstrap(projectPath) {
-  const query = projectPath ? `?projectPath=${encodeURIComponent(projectPath)}` : '';
+async function loadBootstrap(projectPath, docUrl) {
+  const params = new URLSearchParams();
+  if (projectPath) params.set('projectPath', projectPath);
+  if (docUrl) params.set('docUrl', docUrl);
+  const query = params.toString() ? '?' + params.toString() : '';
   const fetchOptions = {};
-  if (state.storedApiKey) fetchOptions.headers = { 'x-fraim-api-key': state.storedApiKey };
+  if (state.storedApiKey) fetchOptions.headers = { 'x-api-key': state.storedApiKey };
   const bootstrap = await requestJson(`/api/ai-hub/bootstrap${query}`, fetchOptions);
   state.bootstrap = bootstrap;
   state.projectPath = bootstrap.project.path;
@@ -90,6 +115,20 @@ async function loadBootstrap(projectPath) {
   els['project-name'].textContent = friendlyProjectName(bootstrap.project.path);
   els['status-line'].textContent = bootstrap.project.message || '';
   els['status-line'].classList.toggle('error', !bootstrap.project.exists || !bootstrap.project.hasFraim);
+  // Update the compact project label shown in task-pane surface rail.
+  const tpLabel = document.getElementById('tp-project-label');
+  if (tpLabel) {
+    const projectName = friendlyProjectName(bootstrap.project.path);
+    const resolvedDocUrl = docUrl || new URLSearchParams(window.location.search).get('docUrl') || '';
+    let docName = '';
+    if (resolvedDocUrl) {
+      try {
+        const rawName = resolvedDocUrl.replace(/\\/g, '/').split('/').pop() || '';
+        docName = decodeURIComponent(rawName).replace(/\.[^.]+$/, '');
+      } catch {}
+    }
+    tpLabel.textContent = docName ? `${projectName}  ·  ${docName}` : projectName;
+  }
   // Populate the welcome-line popovers with REAL jobs from the bootstrap.
   populateConceptPopovers();
   // Render rail and active state for this project.
@@ -97,6 +136,121 @@ async function loadBootstrap(projectPath) {
   renderActive();
 }
 
+// ---------------------------------------------------------------------------
+// Word context bridge (postMessage from taskpane.html parent frame)
+// ---------------------------------------------------------------------------
+
+// Apply a full or partial Word context update and re-render dependent UI.
+// Called by the postMessage bridge and usable directly in tests.
+function applyWordContext(ctx, partial) {
+  if (partial) {
+    if (!state.wordContext) state.wordContext = {};
+    Object.assign(state.wordContext, ctx || {});
+  } else {
+    state.wordContext = ctx || null;
+  }
+  renderWordContextBar();
+  renderWordContextInModal();
+}
+
+function setupWordBridge() {
+  if (window.parent === window) return; // not inside an iframe — no bridge needed
+  window.addEventListener('message', function(event) {
+    if (event.source !== window.parent) return;
+    const msg = event.data || {};
+    if (msg.type === 'word-context') {
+      applyWordContext(msg.payload, false);
+    } else if (msg.type === 'word-context-update') {
+      applyWordContext(msg.payload, true);
+    }
+    // word-response messages are handled by per-request listeners in requestWordContext()
+  });
+  // Signal taskpane.html that Hub is ready to receive context.
+  window.parent.postMessage({ type: 'hub-ready' }, '*');
+}
+
+// Send a word-request to taskpane.html and await the word-response.
+// Resolves null if not in iframe, no response, or timeout (3 s).
+function requestWordContext(action, payload) {
+  return new Promise(function(resolve) {
+    if (window.parent === window) { resolve(null); return; }
+    const requestId = Math.random().toString(36).slice(2);
+    const timer = setTimeout(function() { cleanup(); resolve(null); }, 3000);
+    function onMsg(event) {
+      if (event.source !== window.parent) return;
+      const m = event.data || {};
+      if (m.type === 'word-response' && m.requestId === requestId) {
+        cleanup(); resolve(m.payload || null);
+      }
+    }
+    function cleanup() { clearTimeout(timer); window.removeEventListener('message', onMsg); }
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ type: 'word-request', requestId, action, payload: payload || {} }, '*');
+  });
+}
+
+function buildWordContextBlock(wc) {
+  if (!wc) return '';
+  const parts = [];
+  if (wc.docTitle) parts.push(`Document: ${wc.docTitle}`);
+  if (wc.selection) {
+    const wordCount = wc.selection.split(/\s+/).filter(Boolean).length;
+    parts.push(`Selected text (${wordCount} word${wordCount !== 1 ? 's' : ''}):\n"""\n${wc.selection.slice(0, 500)}\n"""`);
+  } else if (wc.bodyPreview) {
+    parts.push(`Document preview:\n"""\n${wc.bodyPreview.slice(0, 800)}\n"""`);
+  }
+  if (wc.wordCount) parts.push(`Document length: ~${wc.wordCount} words`);
+  if (wc.comments && wc.comments.length > 0) {
+    const lines = wc.comments.slice(0, 5).map(c => `- ${c.author || 'Author'}: ${c.text}`).join('\n');
+    parts.push(`Document comments (${wc.comments.length}):\n${lines}`);
+  }
+  if (parts.length === 0) return '';
+  return `[Word Document Context]\n${parts.join('\n\n')}`;
+}
+
+function renderWordContextBar() {
+  const bar = els['word-context-bar'];
+  const txt = els['word-ctx-text'];
+  if (!bar || !txt) return;
+  const wc = state.wordContext;
+  if (!wc || (!wc.docTitle && !wc.selection && !wc.bodyPreview)) {
+    bar.hidden = true;
+    return;
+  }
+  bar.hidden = false;
+  if (wc.selection) {
+    const words = wc.selection.split(/\s+/).filter(Boolean).length;
+    txt.textContent = `${words} word${words !== 1 ? 's' : ''} selected — "${wc.selection.slice(0, 60)}${wc.selection.length > 60 ? '…' : ''}"`;
+  } else if (wc.bodyPreview) {
+    const words = wc.wordCount || 0;
+    txt.textContent = `${wc.docTitle || 'Document'} · ${words} words — full doc context active`;
+  } else {
+    txt.textContent = wc.docTitle || 'Document context active';
+  }
+}
+
+function renderWordContextInModal() {
+  const card = els['word-context-card'];
+  const label = els['word-ctx-card-label'];
+  const body = els['word-ctx-card-body'];
+  if (!card || !label || !body) return;
+  const wc = state.wordContext;
+  if (!wc || (!wc.selection && !wc.bodyPreview && !wc.comments?.length)) {
+    card.hidden = true;
+    return;
+  }
+  card.hidden = false;
+  // Label line: "3 words selected · MyDoc" or "MyDoc · 1,234 words"
+  if (wc.selection) {
+    const words = wc.selection.split(/\s+/).filter(Boolean).length;
+    label.textContent = `${words} word${words !== 1 ? 's' : ''} selected${wc.docTitle ? ' · ' + wc.docTitle : ''}`;
+  } else {
+    label.textContent = (wc.docTitle || 'Document') + (wc.wordCount ? ` · ${wc.wordCount} words` : '');
+  }
+  // Body: shows block that will be sent to the agent
+  body.textContent = buildWordContextBlock(wc);
+}
+
 // ---------------------------------------------------------------------------
 // Concept popover population (drives the welcome-line "see ... jobs" lists)
 // ---------------------------------------------------------------------------
@@ -226,34 +380,129 @@ function findConversation(id) {
   return null;
 }
 
-function activeConversation() {
-  if (!state.activeId) return null;
-  return findConversation(state.activeId);
-}
-
-function panelStateFor(convId) {
-  if (!convId) return {};
-  if (!state.panelState[convId]) state.panelState[convId] = {};
-  return state.panelState[convId];
-}
-
-function defaultCoachOpen(conv) {
-  return true;
-}
-
-function syncConversationPanels(conv, switchedConv) {
-  const coach = els['coach-panel'];
-  if (!conv || !coach) return;
-  const panelState = panelStateFor(conv.id);
-  if (switchedConv) {
-    coach.open = panelState.coach ?? defaultCoachOpen(conv);
-  }
-  if (els['coach-summary']) {
-    els['coach-summary'].textContent = conv.status === 'running'
-      ? 'Open to coach or redirect the work.'
-      : 'Open when you want to steer the next step.';
-  }
-}
+function activeConversation() {
+  if (!state.activeId) return null;
+  return findConversation(state.activeId);
+}
+
+function panelStateFor(convId) {
+  if (!convId) return {};
+  if (!state.panelState[convId]) state.panelState[convId] = {};
+  return state.panelState[convId];
+}
+
+function defaultCoachOpen(conv) {
+  return true;
+}
+
+// R4: resolve employee display name for the coach label.
+function coachEmployeeLabel(conv) {
+  if (!conv) return 'Maestro';
+  if (conv.personaKey) {
+    const persona = (state.bootstrap && state.bootstrap.personas || []).find((p) => p.key === conv.personaKey);
+    if (persona) return persona.displayName;
+  }
+  if (conv.employeeId) {
+    const emp = getEmployeeStatus(conv.employeeId);
+    if (emp) return emp.label;
+  }
+  return 'Maestro';
+}
+
+// R4: update coach label with employee name + initial badge.
+function syncCoachEmployeeLabel(conv) {
+  const label = document.querySelector('.active-employee-label');
+  if (!label) return;
+  const name = coachEmployeeLabel(conv);
+  label.textContent = '';
+  // Use persona avatar image when available (matches renderConversationIdentity).
+  const persona = conv && conv.personaKey
+    ? (state.bootstrap && state.bootstrap.personas || []).find((p) => p.key === conv.personaKey)
+    : null;
+  let badge;
+  if (persona && persona.avatarUrl) {
+    badge = document.createElement('img');
+    badge.className = 'coach-employee-badge coach-employee-avatar';
+    badge.src = persona.avatarUrl;
+    badge.alt = name;
+  } else {
+    badge = document.createElement('span');
+    badge.className = 'coach-employee-badge';
+    badge.textContent = name.slice(0, 1).toUpperCase();
+  }
+  const nameSpan = document.createElement('span');
+  nameSpan.className = 'coach-label-name';
+  nameSpan.textContent = name;
+  label.appendChild(badge);
+  label.appendChild(nameSpan);
+}
+
+// R5: show/hide quick-access coaching buttons based on managerTemplates.
+function syncQuickCoachButtons(conv) {
+  const row = els['quick-coach-btns'];
+  if (!row) return;
+  const hasTemplates = state.bootstrap && state.bootstrap.managerTemplates && state.bootstrap.managerTemplates.length > 0;
+  const hasRun = conv && (conv.status === 'running' || conv.status === 'completed');
+  row.hidden = !(hasTemplates && hasRun);
+}
+
+// R8: render markdown subset safely. HTML is escaped first.
+function formatEmployeeText(text) {
+  if (!text) return '';
+  // 1. Escape HTML entities.
+  let s = text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+  // 2. Fenced code blocks (triple backtick).
+  s = s.replace(/```[\w]*\n?([\s\S]*?)```/g, (_, code) => `<pre><code>${code.trimEnd()}</code></pre>`);
+  // 3. Inline code (single backtick, non-greedy, no newlines).
+  s = s.replace(/`([^`\n]+)`/g, '<code>$1</code>');
+  // 4. Bold (**text**).
+  s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  // 5–7. Process line by line for lists and paragraphs.
+  const lines = s.split('\n');
+  const out = [];
+  let ulOpen = false;
+  let olOpen = false;
+  for (const line of lines) {
+    const ulMatch = line.match(/^[-*] (.+)/);
+    const olMatch = line.match(/^\d+\. (.+)/);
+    if (ulMatch) {
+      if (olOpen) { out.push('</ol>'); olOpen = false; }
+      if (!ulOpen) { out.push('<ul>'); ulOpen = true; }
+      out.push(`<li>${ulMatch[1]}</li>`);
+    } else if (olMatch) {
+      if (ulOpen) { out.push('</ul>'); ulOpen = false; }
+      if (!olOpen) { out.push('<ol>'); olOpen = true; }
+      out.push(`<li>${olMatch[1]}</li>`);
+    } else {
+      if (ulOpen) { out.push('</ul>'); ulOpen = false; }
+      if (olOpen) { out.push('</ol>'); olOpen = false; }
+      if (line.trim()) out.push(`<p>${line}</p>`);
+    }
+  }
+  if (ulOpen) out.push('</ul>');
+  if (olOpen) out.push('</ol>');
+  return out.join('\n');
+}
+
+function syncConversationPanels(conv, switchedConv) {
+  const coach = els['coach-panel'];
+  if (!conv || !coach) return;
+  const panelState = panelStateFor(conv.id);
+  if (switchedConv) {
+    coach.open = panelState.coach ?? defaultCoachOpen(conv);
+    if (els['thread-panel']) {
+      els['thread-panel'].open = panelState.thread ?? true;
+    }
+  }
+  // R3.3: hide the summary hint when the coach panel is open.
+  if (els['coach-summary']) {
+    els['coach-summary'].hidden = coach.open;
+  }
+}
 
 function upsertConversation(conv) {
   const list = projectConversations().slice();
@@ -327,54 +576,61 @@ function renderRail() {
     if (conv.status === 'running') statusSpan.classList.add('running');
     if (conv.status === 'failed') statusSpan.classList.add('failed');
     btn.appendChild(statusSpan);
+    // Issue #442: A/B badge on rail entry.
+    if (conv.compareMode === 'ab') {
+      const badge = document.createElement('span');
+      badge.className = 'ab-badge';
+      badge.textContent = 'A/B';
+      btn.appendChild(badge);
+    }
     btn.addEventListener('click', () => switchToConversation(conv.id));
     els['conv-list'].appendChild(btn);
   }
 }
 
-function statusLabel(s) {
-  if (s === 'running') return 'Running';
-  if (s === 'failed') return 'Needs you';
-  return 'Done';
-}
-
-function personaMap() {
-  const map = new Map();
-  for (const persona of state.bootstrap?.personas || []) {
-    map.set(persona.key, persona);
-  }
-  return map;
-}
-
-function getConversationPersona(conv) {
-  if (!conv || !conv.personaKey) return null;
-  return personaMap().get(conv.personaKey) || null;
-}
-
-function getEmployeeStatus(employeeId) {
-  return (state.bootstrap?.employees || []).find((employee) => employee.id === employeeId) || null;
-}
-
-function getEmployeeTitle(conv) {
-  const persona = getConversationPersona(conv);
-  if (persona) return persona.role;
-  const employee = getEmployeeStatus(conv?.employeeId);
-  return employee ? employee.label : 'AI Employee';
-}
-
-function roleLabel(role, conv) {
-  if (role === 'manager') return 'Manager';
-  if (role === 'employee') {
-    const persona = getConversationPersona(conv);
-    return persona ? persona.displayName : 'Employee';
-  }
-  return 'System';
-}
-
-function initialBadge(text) {
-  const cleaned = String(text || '').replace(/[^A-Za-z]/g, '').toUpperCase();
-  return (cleaned.slice(0, 2) || 'FH');
-}
+function statusLabel(s) {
+  if (s === 'running') return 'Running';
+  if (s === 'failed') return 'Needs you';
+  return 'Done';
+}
+
+function personaMap() {
+  const map = new Map();
+  for (const persona of state.bootstrap?.personas || []) {
+    map.set(persona.key, persona);
+  }
+  return map;
+}
+
+function getConversationPersona(conv) {
+  if (!conv || !conv.personaKey) return null;
+  return personaMap().get(conv.personaKey) || null;
+}
+
+function getEmployeeStatus(employeeId) {
+  return (state.bootstrap?.employees || []).find((employee) => employee.id === employeeId) || null;
+}
+
+function getEmployeeTitle(conv) {
+  const persona = getConversationPersona(conv);
+  if (persona) return persona.role;
+  const employee = getEmployeeStatus(conv?.employeeId);
+  return employee ? employee.label : 'AI Employee';
+}
+
+function roleLabel(role, conv) {
+  if (role === 'manager') return 'Manager';
+  if (role === 'employee') {
+    const persona = getConversationPersona(conv);
+    return persona ? persona.displayName : 'Employee';
+  }
+  return 'System';
+}
+
+function initialBadge(text) {
+  const cleaned = String(text || '').replace(/[^A-Za-z]/g, '').toUpperCase();
+  return (cleaned.slice(0, 2) || 'FH');
+}
 
 // ---------------------------------------------------------------------------
 // Issue #385 — Persona UI (R3 + R4)
@@ -393,62 +649,62 @@ function conversationTitle(conv) {
 
 // R4.2 — team roster: one avatar chip per hired persona above the conv list.
 // Only rendered when at least one persona is hired (subscription active).
-function renderTeamRoster() {
-  const roster = els['team-roster'];
-  if (!roster) return;
-  const personas = (state.bootstrap?.personas || []).filter((p) => p.status === 'hired');
-  if (personas.length === 0) {
+function renderTeamRoster() {
+  const roster = els['team-roster'];
+  if (!roster) return;
+  const personas = (state.bootstrap?.personas || []).filter((p) => p.status === 'hired');
+  if (personas.length === 0) {
     roster.hidden = true;
     // Reset persona selection when there's no active subscription.
     if (state.selectedPersonaKey) state.selectedPersonaKey = null;
     return;
-  }
-  roster.hidden = false;
-  roster.innerHTML = '';
-  const allChip = document.createElement('button');
-  allChip.type = 'button';
-  allChip.className = 'roster-chip roster-chip--all' + (!state.selectedPersonaKey ? ' active' : '');
-  allChip.title = 'All employees';
-  allChip.setAttribute('aria-label', 'All employees');
-  allChip.innerHTML = `
-    <span class="roster-avatar">All</span>
-    <span class="roster-copy">
-      <strong>All employees</strong>
-      <small>Show every hired employee</small>
-    </span>
-  `;
-  allChip.addEventListener('click', () => setSelectedPersona(null));
-  roster.appendChild(allChip);
-  for (const persona of personas) {
-    const chip = document.createElement('button');
-    chip.type = 'button';
-    chip.className = 'roster-chip' + (state.selectedPersonaKey === persona.key ? ' active' : '');
-    chip.title = persona.displayName;
-    chip.setAttribute('aria-label', persona.displayName);
-    const avatar = document.createElement('span');
-    avatar.className = 'roster-avatar';
-    if (persona.avatarUrl) {
-      const img = document.createElement('img');
-      img.src = persona.avatarUrl;
-      img.alt = persona.displayName;
-      avatar.appendChild(img);
-    } else {
-      avatar.textContent = persona.displayName.slice(0, 2).toUpperCase();
-    }
-    const copy = document.createElement('span');
-    copy.className = 'roster-copy';
-    const name = document.createElement('strong');
-    name.textContent = persona.displayName;
-    const role = document.createElement('small');
-    role.textContent = persona.role || 'AI Employee';
-    copy.appendChild(name);
-    copy.appendChild(role);
-    chip.appendChild(avatar);
-    chip.appendChild(copy);
-    chip.addEventListener('click', () => setSelectedPersona(persona.key));
-    roster.appendChild(chip);
-  }
-}
+  }
+  roster.hidden = false;
+  roster.innerHTML = '';
+  const allChip = document.createElement('button');
+  allChip.type = 'button';
+  allChip.className = 'roster-chip roster-chip--all' + (!state.selectedPersonaKey ? ' active' : '');
+  allChip.title = 'All employees';
+  allChip.setAttribute('aria-label', 'All employees');
+  allChip.innerHTML = `
+    <span class="roster-avatar">All</span>
+    <span class="roster-copy">
+      <strong>All employees</strong>
+      <small>Show every hired employee</small>
+    </span>
+  `;
+  allChip.addEventListener('click', () => setSelectedPersona(null));
+  roster.appendChild(allChip);
+  for (const persona of personas) {
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = 'roster-chip' + (state.selectedPersonaKey === persona.key ? ' active' : '');
+    chip.title = persona.displayName;
+    chip.setAttribute('aria-label', persona.displayName);
+    const avatar = document.createElement('span');
+    avatar.className = 'roster-avatar';
+    if (persona.avatarUrl) {
+      const img = document.createElement('img');
+      img.src = persona.avatarUrl;
+      img.alt = persona.displayName;
+      avatar.appendChild(img);
+    } else {
+      avatar.textContent = persona.displayName.slice(0, 2).toUpperCase();
+    }
+    const copy = document.createElement('span');
+    copy.className = 'roster-copy';
+    const name = document.createElement('strong');
+    name.textContent = persona.displayName;
+    const role = document.createElement('small');
+    role.textContent = persona.role || 'AI Employee';
+    copy.appendChild(name);
+    copy.appendChild(role);
+    chip.appendChild(avatar);
+    chip.appendChild(copy);
+    chip.addEventListener('click', () => setSelectedPersona(persona.key));
+    roster.appendChild(chip);
+  }
+}
 
 // R4.3 — employee selector: compact dropdown above conv list (shown when ≥1 hired persona).
 function buildAvatarChip(persona, size) {
@@ -566,101 +822,111 @@ function renderModalPersonaFilter() {
 // event rows are already in the DOM. Polling fires every second; without
 // this, every tick wiped the messages list and re-played the slidein
 // animation (= the screen flash the user reported as 'distracting').
-let renderedConvId = null;
-let renderedMessageCount = 0;
-let renderedEventCount = 0;
-let renderedArtifactKey = null;
-let renderedStatus = null;
-
-function renderActive() {
-  const conv = activeConversation();
-  if (!conv) {
-    els['empty'].hidden = false;
-    els['active-conv'].hidden = true;
-    renderedConvId = null;
-    renderedMessageCount = 0;
-    renderedEventCount = 0;
-    renderedArtifactKey = null;
-    renderedStatus = null;
-    return;
-  }
-  els['empty'].hidden = true;
-  els['active-conv'].hidden = false;
-  els['active-title'].textContent = conversationTitle(conv);
-  els['active-job'].textContent = `${conv.jobTitle} · ${friendlyProjectName(conv.projectPath || state.projectPath)} · ${getEmployeeStatus(conv.employeeId)?.label || conv.employeeId}`;
-  renderConversationIdentity(conv);
-  els['active-job'].textContent = `${conv.jobTitle} · ${friendlyProjectName(conv.projectPath || state.projectPath)}`;
-  renderRunStatePill(conv);
-  els['coach-note'].textContent = conv.status === 'running'
-    ? 'The employee is still working. Add coaching here to tighten the next step without losing context.'
-    : 'The employee is waiting on you. Send the next instruction to continue this run.';
-
-  // Progress section. Plain text updates are cheap and don't animate.
-  const stage = derivedStage(conv);
-  els['stage'].textContent = stage.text;
-  els['progress'].classList.remove('done', 'attention', 'failed');
-  if (stage.kind) els['progress'].classList.add(stage.kind);
-  els['latest'].textContent = derivedLatest(conv);
+let renderedConvId = null;
+let renderedMessageCount = 0;
+let renderedEventCount = 0;
+let renderedStatus = null;
+let renderedDirectEventCount = 0;
+
+function renderActive() {
+  const conv = activeConversation();
+  if (!conv) {
+    els['empty'].hidden = false;
+    els['active-conv'].hidden = true;
+    const _c = document.getElementById('conversation');
+    if (_c) _c.classList.remove('ab-mode');
+    if (els['ab-direct-panel']) els['ab-direct-panel'].hidden = true;
+    renderedConvId = null;
+    renderedMessageCount = 0;
+    renderedEventCount = 0;
+    renderedStatus = null;
+    renderedDirectEventCount = 0;
+    return;
+  }
+  els['empty'].hidden = true;
+  els['active-conv'].hidden = false;
+  els['active-title'].textContent = conversationTitle(conv);
+  renderConversationIdentity(conv);
+  renderRunStatePill(conv);
+  syncCoachEmployeeLabel(conv);
+  els['coach-note'].textContent = conv.status === 'running'
+    ? 'The employee is still working. Add coaching here to tighten the next step without losing context.'
+    : 'The employee is waiting on you. Send the next instruction to continue this run.';
 
   // If we switched conversations (or this is the first render), wipe and
   // start fresh. Otherwise we're going to do an incremental update below.
-  const switchedConv = renderedConvId !== conv.id;
-  if (switchedConv) {
-    els['artifact-slot'].innerHTML = '';
+  const switchedConv = renderedConvId !== conv.id;
+  if (switchedConv) {
     els['messages'].innerHTML = '';
+    els['messages'].className = 'messages';
     els['micro-log'].textContent = '';
     renderedConvId = conv.id;
     renderedMessageCount = 0;
-    renderedEventCount = 0;
-    renderedArtifactKey = null;
-  }
-  const statusChanged = renderedStatus !== conv.status;
-  syncConversationPanels(conv, switchedConv);
-
-  // Artifact callout — only re-render when the latest artifact actually
-  // changed. Avoids the 'pulse' animation re-firing on every poll tick.
-  const latestArtifact = conv.artifacts && conv.artifacts.length > 0
-    ? conv.artifacts[conv.artifacts.length - 1]
-    : null;
-  const artifactKey = latestArtifact ? `${latestArtifact.where}${latestArtifact.name}` : null;
-  if (artifactKey !== renderedArtifactKey) {
-    els['artifact-slot'].innerHTML = '';
-    if (latestArtifact) {
-      const span = document.createElement('span');
-      span.className = 'artifact';
-      span.title = `${latestArtifact.where}${latestArtifact.name}`;
-      span.innerHTML = `
-        <span class="artifact-dot" aria-hidden="true"></span>
-        <span class="artifact-label">file</span>
-        <span class="artifact-name"></span>`;
-      span.querySelector('.artifact-name').textContent = latestArtifact.name;
-      els['artifact-slot'].appendChild(span);
-    }
-    renderedArtifactKey = artifactKey;
+    renderedEventCount = 0;
+    renderedDirectEventCount = 0;
+    // A pending coaching job is scoped to the active conversation — discard it
+    // whenever the user switches to a different conversation.
+    clearPendingCoachingJob();
   }
+  const statusChanged = renderedStatus !== conv.status;
+  syncConversationPanels(conv, switchedConv);
+  syncQuickCoachButtons(conv);
 
   // Messages — append only the rows that aren't already in the DOM, so
   // existing rows don't re-animate. If for some reason the data shrunk
   // (server revoked a message), fall back to a full re-render.
   const messages = conv.messages || [];
-  if (messages.length < renderedMessageCount) {
-    els['messages'].innerHTML = '';
-    renderedMessageCount = 0;
-  }
-  for (let i = renderedMessageCount; i < messages.length; i += 1) {
-    appendMessageDom(messages[i].role, messages[i].text, conv);
-  }
-  const appendedMessages = messages.length - renderedMessageCount;
-  renderedMessageCount = messages.length;
-  // Running threads stay pinned near the newest work. Once the employee
-  // is done, snap to the review point instead of leaving the manager at
-  // a stale scroll offset.
-  const m = els['messages'];
-  if (conv.status === 'running' && m.scrollHeight - m.scrollTop - m.clientHeight < 80) {
-    m.scrollTop = m.scrollHeight;
-  } else if (switchedConv || statusChanged || appendedMessages > 0) {
-    scrollThreadForReview(conv);
-  }
+  const isABConv = conv.compareMode === 'ab';
+
+  // Issue #442: A/B split — full panel. #conversation becomes a flex row;
+  // FRAIM side is the unchanged #active-conv; Direct side is #ab-direct-panel.
+  const _container = document.getElementById('conversation');
+  if (isABConv) {
+    if (_container) _container.classList.add('ab-mode');
+    if (els['ab-direct-panel']) els['ab-direct-panel'].hidden = false;
+    if (switchedConv) {
+      const dl = document.getElementById('ab-direct-log');
+      if (dl) dl.textContent = '';
+      renderedDirectEventCount = 0;
+    }
+  } else {
+    if (_container) _container.classList.remove('ab-mode');
+    if (els['ab-direct-panel']) els['ab-direct-panel'].hidden = true;
+  }
+
+  // FRAIM messages — render into #messages via appendMessageDom (same for AB and non-AB).
+  if (messages.length < renderedMessageCount) {
+    els['messages'].innerHTML = '';
+    renderedMessageCount = 0;
+  }
+  for (let i = renderedMessageCount; i < messages.length; i += 1) {
+    appendMessageDom(messages[i].role, messages[i].text, conv);
+  }
+  const appendedMessages = messages.length - renderedMessageCount;
+  renderedMessageCount = messages.length;
+  const m = els['messages'];
+  if (conv.status === 'running' && m.scrollHeight - m.scrollTop - m.clientHeight < 80) {
+    m.scrollTop = m.scrollHeight;
+  } else if (switchedConv || statusChanged || appendedMessages > 0) {
+    scrollThreadForReview(conv);
+  }
+
+  // Direct raw event log — append-only like the FRAIM micro-log, shows all
+  // stdout/stderr/system events from the B run so the user sees everything.
+  if (isABConv) {
+    const directEvents = (conv.compareRun && conv.compareRun.events) || [];
+    const directLog = document.getElementById('ab-direct-log');
+    if (directLog) {
+      if (directEvents.length < renderedDirectEventCount) { directLog.textContent = ''; renderedDirectEventCount = 0; }
+      for (let i = renderedDirectEventCount; i < directEvents.length; i += 1) {
+        const line = `[${directEvents[i].channel || 'system'}] ${directEvents[i].text}\n`;
+        directLog.appendChild(document.createTextNode(line));
+      }
+      renderedDirectEventCount = directEvents.length;
+      const ds = (conv.compareRun && conv.compareRun.status) || 'running';
+      if (ds === 'running') directLog.scrollTop = directLog.scrollHeight;
+    }
+  }
 
   // Micro-manage — only append new events. textContent assignment on the
   // <pre> wipes the entire log every tick which is wasteful.
@@ -686,64 +952,104 @@ function renderActive() {
   // foldRunIntoConversation); for runs that have not yet polled we
   // simply hide the surfaces.
   renderTracker(conv);
-  renderTotals(conv);
-  syncTemplatePickerVisibility();
-  // Browser-tab title mirrors the active conversation (R3).
-  document.title = conv.title ? conv.title : 'AI Hub';
-  renderedStatus = conv.status;
-}
-
-function renderConversationIdentity(conv) {
-  const host = els['active-identity'];
-  if (!host) return;
-  const persona = getConversationPersona(conv);
-  const employee = getEmployeeStatus(conv.employeeId);
-  host.innerHTML = '';
-
-  const avatar = document.createElement(persona && persona.avatarUrl ? 'img' : 'span');
-  avatar.className = 'identity-avatar';
-  if (persona && persona.avatarUrl) {
-    avatar.src = persona.avatarUrl;
-    avatar.alt = persona.displayName;
-  } else {
-    avatar.textContent = initialBadge(employee?.label || 'Hub');
-  }
-
-  const text = document.createElement('span');
-  text.className = 'identity-copy';
-
-  const name = document.createElement('strong');
-  name.textContent = persona ? persona.displayName : (employee ? employee.label : 'AI Employee');
-
-  const title = document.createElement('small');
-  title.textContent = getEmployeeTitle(conv);
-
-  text.appendChild(name);
-  text.appendChild(title);
-  host.appendChild(avatar);
-  host.appendChild(text);
-}
-
-function renderRunStatePill(conv) {
-  const pill = els['run-state-pill'];
-  if (!pill) return;
-  pill.textContent = statusLabel(conv.status).toUpperCase();
-  pill.className = `run-state-pill ${conv.status}`;
-}
-
-function buildConversationSummary(conv) {
-  const employeeReply = latestEmployeeSurfaceText(conv);
-  if (employeeReply) return clampSummaryText(employeeReply);
-  if (conv.status === 'running') return 'The employee is working through your request.';
-  if (conv.status === 'failed') return 'This run needs your attention before it can continue.';
-  return 'The latest work is ready for review.';
-}
-
-function clampSummaryText(text, maxChars = 260) {
-  const raw = String(text || '').replace(/\s+/g, ' ').trim();
-  if (raw.length <= maxChars) return raw;
-  return raw.slice(0, maxChars - 1).trimEnd() + '…';
-}
+  renderTotals(conv);
+  syncTemplatePickerVisibility();
+  // Issue #442: Direct panel status pill, simple progress indicator, and totals.
+  if (isABConv) {
+    // Mirror the job title from A into the B topline.
+    const directTitleEl = document.querySelector('#ab-direct-panel .conv-job-title');
+    if (directTitleEl) directTitleEl.textContent = conv.title || '';
+
+    const ds = (conv.compareRun && conv.compareRun.status) || 'running';
+    const dpill = document.getElementById('ab-direct-pill');
+    if (dpill) {
+      dpill.textContent = statusLabel(ds).toUpperCase();
+      dpill.className = `run-state-pill ${ds}`;
+    }
+    // Simple Running→Done progress row (mirrors FRAIM pizza tracker position).
+    const dprogress = els['ab-direct-progress'];
+    if (dprogress) {
+      if (ds === 'running') { dprogress.textContent = '● Running'; dprogress.className = 'ab-direct-progress running'; }
+      else if (ds === 'completed') { dprogress.textContent = '✓ Done'; dprogress.className = 'ab-direct-progress done'; }
+      else if (ds === 'failed') { dprogress.textContent = '✗ Failed'; dprogress.className = 'ab-direct-progress failed'; }
+      else { dprogress.textContent = statusLabel(ds); dprogress.className = 'ab-direct-progress'; }
+    }
+    // Direct totals row — same format as FRAIM's totals row.
+    renderDirectTotals(conv);
+    // Direct send button — enabled only when idle and session is resumable.
+    const dsend = els['ab-direct-send'];
+    if (dsend) {
+      const dinput = document.getElementById('ab-direct-input');
+      const hasSession = !!(conv.compareRun && conv.compareRun.sessionId);
+      const notRunning = ds !== 'running';
+      dsend.disabled = !hasSession || !notRunning || !(dinput && dinput.value.trim());
+    }
+    // Align B's header rows to A's so the thread panels start at the same Y.
+    requestAnimationFrame(() => {
+      const aTopline = document.querySelector('#active-conv > .conv-topline');
+      const aStatus  = document.querySelector('#active-conv > .conversation-status');
+      const bTopline = document.querySelector('#ab-direct-panel > .conv-topline');
+      const bStatus  = document.querySelector('#ab-direct-panel > .conversation-status');
+      if (aTopline && bTopline) bTopline.style.minHeight = aTopline.offsetHeight + 'px';
+      if (aStatus  && bStatus)  bStatus.style.minHeight  = aStatus.offsetHeight  + 'px';
+    });
+  }
+  // Browser-tab title mirrors the active conversation (R3).
+  document.title = conv.title ? conv.title : 'AI Hub';
+  renderedStatus = conv.status;
+}
+
+function renderConversationIdentity(conv) {
+  const host = els['active-identity'];
+  if (!host) return;
+  const persona = getConversationPersona(conv);
+  const employee = getEmployeeStatus(conv.employeeId);
+  host.innerHTML = '';
+
+  const avatar = document.createElement(persona && persona.avatarUrl ? 'img' : 'span');
+  avatar.className = 'identity-avatar';
+  if (persona && persona.avatarUrl) {
+    avatar.src = persona.avatarUrl;
+    avatar.alt = persona.displayName;
+  } else {
+    avatar.textContent = initialBadge(employee?.label || 'Hub');
+  }
+
+  const text = document.createElement('span');
+  text.className = 'identity-copy';
+
+  const name = document.createElement('strong');
+  name.textContent = persona ? persona.displayName : (employee ? employee.label : 'AI Employee');
+
+  const title = document.createElement('small');
+  title.textContent = getEmployeeTitle(conv);
+
+  text.appendChild(name);
+  text.appendChild(title);
+  host.appendChild(avatar);
+  host.appendChild(text);
+}
+
+function renderRunStatePill(conv) {
+  const pill = els['run-state-pill'];
+  if (!pill) return;
+  pill.textContent = statusLabel(conv.status).toUpperCase();
+  pill.className = `run-state-pill ${conv.status}`;
+}
+
+function buildConversationSummary(conv) {
+  const employeeReply = latestEmployeeSurfaceText(conv);
+  if (employeeReply) return clampSummaryText(employeeReply);
+  if (conv.status === 'running') return 'The employee is working through your request.';
+  if (conv.status === 'failed') return 'This run needs your attention before it can continue.';
+  return 'The latest work is ready for review.';
+}
+
+function clampSummaryText(text, maxChars = 260) {
+  const raw = String(text || '').replace(/\s+/g, ' ').trim();
+  if (raw.length <= maxChars) return raw;
+  return raw.slice(0, maxChars - 1).trimEnd() + '…';
+}
 
 // Render the inline employee selector shown in the coach section of an
 // active conversation. Allows switching agents without reopening the modal.
@@ -905,7 +1211,7 @@ function syncTrackerNote(conv) {
   }
 }
 
-// Issue #347 R4 — render the totals line below the textarea.
+// Issue #347 R4 — render the totals line inside the tracker section.
 function renderTotals(conv) {
   const totals = els['totals'];
   if (!totals) return;
@@ -914,18 +1220,44 @@ function renderTotals(conv) {
     totals.hidden = true;
     return;
   }
+  // Totals now live inside the tracker section; only render when visible.
+  const tracker = els['tracker'];
+  if (tracker && tracker.hidden) {
+    totals.hidden = true;
+    return;
+  }
   totals.hidden = false;
   const tokens = data.tokenTotals || {};
   const tokenLabel = formatTokens(tokens);
   const costLabel = formatCost(tokens);
   totals.innerHTML = '';
-  pushTotalsSpan(totals, formatDuration(data.totalDurationMs), 'total', 'total: from start to now');
-  pushTotalsSpan(totals, formatDuration(data.workingDurationMs), 'working', 'working: while the employee was running');
-  pushTotalsSpan(totals, formatDuration(data.waitingDurationMs), 'waiting', 'waiting: while waiting for you');
+  const fmtDur = (ms) => ms >= 60000 ? formatDuration(ms) : ms > 0 ? `${Math.round(ms / 1000)}s` : '—';
+  pushTotalsSpan(totals, fmtDur(data.totalDurationMs), 'total', 'total: from start to now');
+  pushTotalsSpan(totals, fmtDur(data.workingDurationMs), 'working', 'working: while the employee was running');
+  pushTotalsSpan(totals, fmtDur(data.waitingDurationMs), 'waiting', 'waiting: while waiting for you');
   pushTotalsSpan(totals, tokenLabel, 'tokens', 'tokens: from each phase report; some agents do not yet emit usage data');
   pushTotalsSpan(totals, costLabel, '', "cost: derived from token totals and the agent's published per-million rate");
 }
 
+// Issue #442: render Direct totals row using the same pushTotalsSpan helper as FRAIM.
+function renderDirectTotals(conv) {
+  const dtotals = els['ab-direct-totals'];
+  if (!dtotals) return;
+  const data = conv.compareRun && conv.compareRun.totals;
+  if (!data) { dtotals.hidden = true; return; }
+  dtotals.hidden = false;
+  dtotals.innerHTML = '';
+  const tokens = data.tokenTotals || {};
+  const durMs = data.totalDurationMs || 0;
+  const durLabel = durMs >= 60000 ? formatDuration(durMs) : durMs > 0 ? `${Math.round(durMs / 1000)}s` : '—';
+  pushTotalsSpan(dtotals, durLabel, 'total', 'total: from start to now');
+  pushTotalsSpan(dtotals, formatTokens(tokens), 'tokens', 'tokens from Direct run');
+  pushTotalsSpan(dtotals, formatCost(tokens), '', 'cost of Direct run');
+}
+
+
+
+
 function pushTotalsSpan(host, value, suffix, title) {
   if (host.children.length > 0) {
     const sep = document.createElement('span');
@@ -1036,42 +1368,44 @@ function renderTemplatePopover() {
 
 function openTemplatePopover() {
   const popover = els['template-popover'];
-  const btn = els['template-picker-btn'];
-  if (!popover || !btn) return;
+  if (!popover) return;
   renderTemplatePopover();
+  // Anchor fixed popover above the trigger button, right-aligned to its right edge.
+  const trigger = els['other-manager-jobs-btn'];
+  if (trigger) {
+    const rect = trigger.getBoundingClientRect();
+    popover.style.right = Math.max(8, window.innerWidth - rect.right) + 'px';
+    popover.style.bottom = Math.max(8, window.innerHeight - rect.top + 8) + 'px';
+    popover.style.left = 'auto';
+    popover.style.top = 'auto';
+  }
   popover.hidden = false;
-  btn.setAttribute('aria-expanded', 'true');
+  els['template-picker-btn']?.setAttribute('aria-expanded', 'true');
 }
 
 function closeTemplatePopover() {
   const popover = els['template-popover'];
-  const btn = els['template-picker-btn'];
-  if (!popover || !btn) return;
+  if (!popover) return;
   popover.hidden = true;
-  btn.setAttribute('aria-expanded', 'false');
-}
-
-function applyTemplateInvocation(managerJobId) {
-  const conv = activeConversation();
-  // Use the conversation's own employee for the invocation symbol, NOT
-  // the manager's last selection in another conversation (R2.5).
-  const employeeId = (conv && conv.employeeId) || state.selectedEmployeeId || 'claude';
-  const symbol = FRAIM_INVOCATION_SYMBOL[employeeId] || '/fraim';
-  const invocation = `${symbol} ${managerJobId}`;
-  const textarea = els['coach-text'];
-  const prior = textarea.value;
-  let combined;
-  if (prior.trim().length === 0) {
-    combined = invocation;
-  } else {
-    const strippedPrior = prior.replace(/(?:^|\n|\s)[/$]fraim\s+[a-z0-9-]+(?:\s|$)/ig, ' ').replace(/\s+/g, ' ').trim();
-    combined = strippedPrior ? `${invocation}\n\n${strippedPrior}` : invocation;
-  }
-  textarea.value = combined;
-  // Caret at the end.
-  textarea.setSelectionRange(combined.length, combined.length);
+  els['template-picker-btn']?.setAttribute('aria-expanded', 'false');
+}
+
+function applyTemplateInvocation(managerJobId) {
+  // The invocation prefix ($fraim / /fraim) is an implementation detail that
+  // the server adds based on the active employee — the user should never see it.
+  // Store the job ID as a pending coaching job. The #coach-note shows a
+  // human-readable label; the textarea stays focused for optional extra context.
+  // When the user clicks Send, continueRun sends { coachingJobId, instructions }.
+  const label = managerJobId.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+  // Strip any prior /fraim invocation text already in the textarea (backward-compat
+  // for sessions that stored raw invocation text before this change).
+  const textarea = els['coach-text'];
+  textarea.value = textarea.value
+    .replace(/(?:^|\n|\s)[/$]fraim\s+[a-z0-9-]+(?:\s|$)/ig, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
   textarea.focus();
-  syncSendButton();
+  setPendingCoachingJob(managerJobId, label);
   closeTemplatePopover();
 }
 
@@ -1081,174 +1415,167 @@ function derivedStage(conv) {
   return { text: 'Done — please review', kind: 'done' };
 }
 
-function derivedLatest(conv) {
-  if (conv.status !== 'running') return '';
-  const employeeReply = latestEmployeeSurfaceText(conv);
-  if (employeeReply) return employeeReply;
-  if (conv.status === 'running') return 'Working on it…';
-  return '';
-}
-
-function humanizeSlug(slug) {
-  return String(slug || '')
-    .split('-')
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ');
-}
-
-function stripStubReference(text) {
-  return String(text || '')
-    .replace(/\n?\[Job stub:[^\]]+\]/gi, '')
-    .replace(/\s+/g, ' ')
-    .trim();
-}
-
-function surfaceText(role, text, conv) {
-  const raw = stripStubReference(text);
-  if (!raw) return '';
-
-  if (role === 'manager') {
-    const invocationOnly = raw.match(/^(?:[$/]fraim)\s+([a-z0-9-]+)\s*$/i);
-    if (invocationOnly) return `Run ${humanizeSlug(invocationOnly[1])}.`;
-    const slugPattern = '[a-z0-9]+(?:-[a-z0-9]+)+';
-    const invocationWithSlug = new RegExp(`^(?:[$/]fraim)\\s+(${slugPattern})\\s*`, 'i');
-    return raw
-      .replace(invocationWithSlug, '')
-      .replace(/^(?:[$/]fraim)\s*/i, '')
-      .trim();
-  }
-
-  if (role === 'employee') {
-    const startedMatch = raw.match(/^Started\s+\w+:\s*(.*)$/i);
-    if (startedMatch) {
-      const cleaned = surfaceText('manager', startedMatch[1], conv);
-      if (conv.status === 'completed') return 'Done — please review.';
-      return cleaned ? `Working on: ${cleaned}` : 'Working on it…';
-    }
-  }
-
-  if (role === 'employee') {
-    const resumedMatch = raw.match(/^Resumed\s+\w+\s+session\s+[a-f0-9-]+:\s*(.*)$/i);
-    if (resumedMatch) {
-      const cleaned = surfaceText('manager', resumedMatch[1], conv);
-      if (conv.status === 'completed') return 'Done - please review.';
-      return cleaned ? `Working on: ${cleaned}` : 'Working on it...';
-    }
-  }
-
-  return raw;
-}
-
-function extractExplicitFraimInvocation(text) {
-  const raw = String(text || '');
-  const match = raw.match(/(?:^|\n|\s)([$/]fraim)\s+([a-z0-9][a-z0-9-]*)(?=\s|$)/i);
-  if (!match || match.index == null) return null;
-  const before = raw.slice(0, match.index).trim();
-  const after = raw.slice(match.index + match[0].length).trim();
-  const remainder = [before, after].filter(Boolean).join('\n\n').trim();
-  return {
-    symbol: match[1],
-    jobId: match[2],
-    remainder,
-  };
-}
-
-function latestEmployeeSurfaceText(conv) {
-  const messages = conv.messages || [];
-  for (let i = messages.length - 1; i >= 0; i -= 1) {
-    if (messages[i].role !== 'employee') continue;
-    const cleaned = surfaceText('employee', messages[i].text, conv);
-    if (cleaned) return cleaned;
-  }
-  return '';
-}
-
-function appendMessageDom(role, text, conv) {
-  const article = document.createElement('article');
-  article.className = 'message ' + role;
-
-  const meta = document.createElement('div');
-  meta.className = 'message-meta';
-
-  const avatar = document.createElement('span');
-  avatar.className = `message-avatar ${role}`;
-
-  if (role === 'employee') {
-    const persona = getConversationPersona(conv);
-    if (persona && persona.avatarUrl) {
-      const img = document.createElement('img');
-      img.src = persona.avatarUrl;
-      img.alt = persona.displayName;
-      avatar.appendChild(img);
-    } else {
-      avatar.textContent = initialBadge(roleLabel(role, conv));
-    }
-  } else if (role === 'manager') {
-    avatar.textContent = 'M';
-  } else {
-    avatar.textContent = '•';
-  }
-
-  const who = document.createElement('span');
-  who.className = 'who';
-  who.textContent = roleLabel(role, conv);
-
-  const lane = document.createElement('span');
-  lane.className = 'lane-label';
-  lane.textContent = role === 'manager'
-    ? 'Manager direction'
-    : role === 'employee'
-      ? 'Employee response'
-      : 'System update';
-
-  meta.appendChild(avatar);
-  meta.appendChild(who);
-  meta.appendChild(lane);
-  article.appendChild(meta);
-
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble';
-  bubble.textContent = surfaceText(role, text, conv) || (
-    role === 'employee'
-      ? (conv.status === 'completed' ? 'Done — please review.' : 'Working on it…')
-      : text
-  );
-  if (role === 'manager') {
-    const raw = document.createElement('span');
-    raw.className = 'transport-raw';
-    raw.textContent = text;
-    article.appendChild(raw);
-  }
-  article.appendChild(bubble);
-  els['messages'].appendChild(article);
-}
-
-function scrollThreadForReview(conv) {
-  const host = els['messages'];
-  if (!host) return;
-  const nodes = [...host.querySelectorAll('.message')];
-  if (nodes.length === 0) return;
-
-  if (conv.status === 'running') {
-    host.scrollTop = host.scrollHeight;
-    return;
-  }
-
-  const target = [...nodes].reverse().find((node) =>
-    node.classList.contains('employee') || node.classList.contains('system')
-  ) || nodes[nodes.length - 1];
-
-  const hostRect = host.getBoundingClientRect();
-  const targetRect = target.getBoundingClientRect();
-  const currentTop = host.scrollTop;
-  const targetTopInsideHost = currentTop + (targetRect.top - hostRect.top);
-  const reviewOffset = Math.max(24, host.clientHeight * 0.16);
-  const desiredTop = Math.max(0, targetTopInsideHost - reviewOffset);
-  host.scrollTo({ top: desiredTop, behavior: 'smooth' });
-}
-
-function syncSendButton() {
+function derivedLatest(conv) {
+  if (conv.status !== 'running') return '';
+  const employeeReply = latestEmployeeSurfaceText(conv);
+  if (employeeReply) return employeeReply;
+  if (conv.status === 'running') return 'Working on it…';
+  return '';
+}
+
+function humanizeSlug(slug) {
+  return String(slug || '')
+    .split('-')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function stripStubReference(text) {
+  return String(text || '')
+    .replace(/\n?\[Job stub:[^\]]+\]/gi, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+function surfaceText(role, text, conv) {
+  const raw = stripStubReference(text);
+  if (!raw) return '';
+
+  if (role === 'manager') {
+    const invocationOnly = raw.match(/^(?:[$/]fraim)\s+([a-z0-9-]+)\s*$/i);
+    if (invocationOnly) return raw;
+    const slugPattern = '[a-z0-9]+(?:-[a-z0-9]+)+';
+    const invocationWithSlug = new RegExp(`^(?:[$/]fraim)\\s+(${slugPattern})\\s*`, 'i');
+    return raw
+      .replace(invocationWithSlug, '')
+      .replace(/^(?:[$/]fraim)\s*/i, '')
+      .trim();
+  }
+
+  if (role === 'employee') {
+    const startedMatch = raw.match(/^Started\s+\w+:\s*(.*)$/i);
+    if (startedMatch) {
+      const cleaned = surfaceText('manager', startedMatch[1], conv);
+      if (conv.status === 'completed') return 'Done — please review.';
+      return cleaned ? `Working on: ${cleaned}` : 'Working on it…';
+    }
+  }
+
+  if (role === 'employee') {
+    const resumedMatch = raw.match(/^Resumed\s+\w+\s+session\s+[a-f0-9-]+:\s*(.*)$/i);
+    if (resumedMatch) {
+      const cleaned = surfaceText('manager', resumedMatch[1], conv);
+      if (conv.status === 'completed') return 'Done - please review.';
+      return cleaned ? `Working on: ${cleaned}` : 'Working on it...';
+    }
+  }
+
+  return raw;
+}
+
+function latestEmployeeSurfaceText(conv) {
+  const messages = conv.messages || [];
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    if (messages[i].role !== 'employee') continue;
+    const cleaned = surfaceText('employee', messages[i].text, conv);
+    if (cleaned) return cleaned;
+  }
+  return '';
+}
+
+function appendMessageDom(role, text, conv) {
+  const article = document.createElement('article');
+  article.className = 'message ' + role;
+
+  const meta = document.createElement('div');
+  meta.className = 'message-meta';
+
+  const avatar = document.createElement('span');
+  avatar.className = `message-avatar ${role}`;
+
+  if (role === 'employee') {
+    const persona = getConversationPersona(conv);
+    if (persona && persona.avatarUrl) {
+      const img = document.createElement('img');
+      img.src = persona.avatarUrl;
+      img.alt = persona.displayName;
+      avatar.appendChild(img);
+    } else {
+      avatar.textContent = initialBadge(roleLabel(role, conv));
+    }
+  } else if (role === 'manager') {
+    avatar.textContent = 'M';
+  } else {
+    avatar.textContent = '•';
+  }
+
+  const who = document.createElement('span');
+  who.className = 'who';
+  who.textContent = roleLabel(role, conv);
+
+  const lane = document.createElement('span');
+  lane.className = 'lane-label';
+  lane.textContent = role === 'manager'
+    ? 'Manager direction'
+    : role === 'employee'
+      ? 'Employee response'
+      : 'System update';
+
+  meta.appendChild(avatar);
+  meta.appendChild(who);
+  meta.appendChild(lane);
+  article.appendChild(meta);
+
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble';
+  if (role === 'employee') {
+    const surfaced = surfaceText(role, text, conv);
+    const raw = String(text || '');
+    // surfaceText collapses whitespace which destroys markdown. Only use it
+    // when it returned a transformed value (Started/Resumed prefix overrides).
+    const useSurfaced = surfaced && surfaced !== raw.replace(/\s+/g, ' ').trim();
+    const content = useSurfaced ? surfaced : raw;
+    bubble.innerHTML = formatEmployeeText(content || (conv.status === 'completed' ? 'Done — please review.' : 'Working on it…'));
+  } else {
+    const surfaced = surfaceText(role, text, conv);
+    bubble.textContent = surfaced || text;
+  }
+  if (role === 'manager') {
+    const raw = document.createElement('span');
+    raw.className = 'transport-raw';
+    raw.textContent = text;
+    article.appendChild(raw);
+  }
+  article.appendChild(bubble);
+  els['messages'].appendChild(article);
+}
+
+function scrollThreadForReview(conv) {
+  const host = els['messages'];
+  if (!host) return;
+  const nodes = [...host.querySelectorAll('.message')];
+  if (nodes.length === 0) return;
+
+  if (conv.status === 'running') {
+    host.scrollTop = host.scrollHeight;
+    return;
+  }
+
+  const target = [...nodes].reverse().find((node) =>
+    node.classList.contains('employee') || node.classList.contains('system')
+  ) || nodes[nodes.length - 1];
+
+  const hostRect = host.getBoundingClientRect();
+  const targetRect = target.getBoundingClientRect();
+  const currentTop = host.scrollTop;
+  const targetTopInsideHost = currentTop + (targetRect.top - hostRect.top);
+  const reviewOffset = Math.max(24, host.clientHeight * 0.16);
+  const desiredTop = Math.max(0, targetTopInsideHost - reviewOffset);
+  host.scrollTo({ top: desiredTop, behavior: 'smooth' });
+}
+
+function syncSendButton() {
   const conv = activeConversation();
   const hasText = els['coach-text'].value.trim().length > 0;
   // Send is enabled as soon as the host session exists. We deliberately
@@ -1256,7 +1583,39 @@ function syncSendButton() {
   // coach mid-run (which is exactly what /api/ai-hub/runs/:id/messages
   // is for; the server only requires sessionId).
   const resumable = !!(conv && conv.sessionId);
-  els['send'].disabled = !(hasText && resumable);
+  // A pending coaching job (set by quick-coach buttons or template picker)
+  // is enough to enable Send even with an empty textarea — the user just
+  // wants to fire that coaching directive, optionally with added context.
+  const hasPendingJob = !!state.pendingCoachingJobId;
+  els['send'].disabled = !((hasText || hasPendingJob) && resumable);
+}
+
+// ---------------------------------------------------------------------------
+// Pending coaching job helpers
+// ---------------------------------------------------------------------------
+
+// Set a pending coaching job selected via a quick-coach button or template
+// picker. The invocation is NOT put into the textarea — the server adds it
+// based on the active employee. The coach-note shows a human-readable label
+// so the user knows what will fire when they hit Send.
+function setPendingCoachingJob(jobId, label) {
+  state.pendingCoachingJobId = jobId;
+  state.pendingCoachingLabel = label;
+  if (els['coach-note']) {
+    els['coach-note'].textContent = `▶ ${label} — add context below (optional) then send`;
+    els['coach-note'].classList.add('pending-job');
+  }
+  syncSendButton();
+}
+
+function clearPendingCoachingJob() {
+  state.pendingCoachingJobId = null;
+  state.pendingCoachingLabel = null;
+  if (els['coach-note']) {
+    els['coach-note'].classList.remove('pending-job');
+    // Note text is restored to normal status by the next renderActive call.
+  }
+  syncSendButton();
 }
 
 // ---------------------------------------------------------------------------
@@ -1502,6 +1861,16 @@ function renderEmployeeSelect() {
     els['employee-select'].appendChild(opt);
   }
   renderAgentInstallPanel();
+  updateAbToggleVisibility();
+}
+
+function updateAbToggleVisibility() {
+  const wrap = els['ab-toggle-wrap'];
+  if (!wrap) return;
+  const sel = document.getElementById('employee-select');
+  const empId = sel ? sel.value : (state.selectedEmployeeId || 'claude');
+  const emp = (state.bootstrap && state.bootstrap.employees || []).find(e => e.id === empId);
+  wrap.hidden = !(emp && emp.supportsRaw);
 }
 
 // ---------------------------------------------------------------------------
@@ -1694,50 +2063,26 @@ function deriveTitle(jobTitle, instructions) {
 //     (per developers.openai.com/codex/skills: "type $ to mention a skill")
 //   - Project-canonical mapping at src/cli/setup/ide-invocation-surfaces.ts.
 //
-// Every command typed by the manager is prefixed with the agent's FRAIM
-// symbol so the host always sees that this is a FRAIM job, not a freeform
-// prompt. Follow-up coaching keeps the jobId too; otherwise headless hosts
-// lose which FRAIM workflow the manager meant to run.
-const FRAIM_INVOCATION_SYMBOL = {
-  codex: '$fraim',
-  claude: '/fraim',
-  gemini: '/fraim',
-};
-
-function fraimInvocationFor(employeeId, jobId, kind) {
-  if (jobId === '__freeform__') return null;
-  const symbol = FRAIM_INVOCATION_SYMBOL[employeeId] || '/fraim';
-  return `${symbol} ${jobId}`;
-}
-
-// Wrap the manager's typed instructions with the host-appropriate FRAIM
-// invocation. The wrapped text is what we ACTUALLY send to the host CLI
-// AND what we show in the timeline so the manager sees what the agent
-// received. For freeform jobs (no FRAIM job assigned), the instructions
-// are sent verbatim with no invocation prefix.
-function buildAgentMessage(employeeId, jobId, kind, instructions, stubPath) {
-  const trimmed = (instructions || '').trim();
-  const explicit = extractExplicitFraimInvocation(trimmed);
-  const effectiveJobId = explicit?.jobId || jobId;
-  const invocation = fraimInvocationFor(employeeId, effectiveJobId, kind);
-  // Freeform: no FRAIM prefix, no stub reference — just the raw instructions.
-  if (!invocation) return explicit?.remainder || trimmed;
-  const remainder = explicit ? explicit.remainder : trimmed;
-  const stub = (kind === 'start' && stubPath) ? `\n[Job stub: ${stubPath}]` : '';
-  if (!remainder) return `${invocation}${stub}`;
-  return `${invocation}${stub}\n\n${remainder}`;
-}
-
+// The browser sends raw manager instructions. AI Hub normalizes assigned
+// FRAIM jobs into host-facing invocations so the Hub UI and channel callers
+// share one start/continue contract.
 async function startRun(job, instructions, employeeId) {
-  // Prefix the manager's typed instructions with the FRAIM invocation so
-  // the underlying host actually launches the right job. The prefixed
-  // text is what the host receives AND what we show in the timeline.
-  // Freeform jobs carry no job stub and no FRAIM invocation prefix.
   const isFreeform = job.id === '__freeform__';
-  const absoluteStubPath = (!isFreeform && job.stubPath && state.projectPath)
-    ? [state.projectPath, job.stubPath].join('/').replace(/\\/g, '/').replace(/\/+/g, '/')
-    : undefined;
-  const agentMessage = buildAgentMessage(employeeId, job.id, 'start', instructions, absoluteStubPath);
+  // In task-pane/extension mode: get a fresh selection snapshot and prepend
+  // document context to the instructions so the agent knows what the user is
+  // looking at. stubPath resolution and FRAIM invocation are now server-side.
+  let effectiveInstructions = instructions || '';
+  if (document.body.dataset.surface === 'task-pane' || document.body.dataset.surface === 'extension') {
+    const fresh = await requestWordContext('get-selection').catch(() => null);
+    const wc = (fresh && (fresh.selection || fresh.hasSelection)) ? { ...state.wordContext, ...fresh } : state.wordContext;
+    const ctxBlock = buildWordContextBlock(wc);
+    if (ctxBlock) effectiveInstructions = ctxBlock + '\n\n---\n\n' + effectiveInstructions;
+  }
+
+  // Issue #442: read the A/B toggle state from the modal before it closes.
+  const abToggle = document.getElementById('ab-toggle');
+  const isAB = !isFreeform && abToggle && abToggle.checked;
+
   const conv = {
     id: newConversationId(),
     projectPath: state.projectPath,
@@ -1750,10 +2095,16 @@ async function startRun(job, instructions, employeeId) {
     runId: null,
     sessionId: null,
     status: 'running',
-    messages: [{ role: 'manager', text: agentMessage, at: Date.now() }],
+    messages: [],
     events: [],
     artifacts: [],
     lastUpdatedAt: Date.now(),
+    // Issue #442: A/B mode fields (only set when toggle was on).
+    compareMode: isAB ? 'ab' : undefined,
+    compareRunId: null,
+    compareRun: null,
+    // Issue #489: capture selection state at job-start so write-back knows insert-after vs append.
+    wordStartedWithSelection: document.body.dataset.surface === 'task-pane' && !!(state.wordContext && state.wordContext.hasSelection),
   };
   upsertConversation(conv);
   state.activeId = conv.id;
@@ -1769,11 +2120,17 @@ async function startRun(job, instructions, employeeId) {
         projectPath: state.projectPath,
         hostId: employeeId,
         jobId: job.id,
-        message: agentMessage,
+        instructions: effectiveInstructions,
+        ...(isAB ? { compareMode: 'ab', directInstructions: effectiveInstructions } : {}),
       }),
     });
     conv.runId = run.id;
     foldRunIntoConversation(conv, run);
+    // Issue #442: when the server created a paired Direct run, capture it.
+    if (run.compareRunId) {
+      conv.compareRunId = run.compareRunId;
+      if (run.compareRun) foldCompareRunIntoConversation(conv, run.compareRun);
+    }
     upsertConversation(conv);
     renderRail();
     renderActive();
@@ -1791,10 +2148,14 @@ async function startRun(job, instructions, employeeId) {
 // Start a NEW run on an existing conversation with a different agent.
 // The conversation's message history stays intact; only the run restarts.
 async function restartConvWithAgent(conv, newAgentId, text) {
-  const agentMessage = buildAgentMessage(newAgentId, conv.jobId, 'start', text);
+  // Snapshot both the message history and the event log so they survive the
+  // restart. foldRunIntoConversation replaces these arrays on every call
+  // (including poll ticks), so we must store them on the conv object itself —
+  // not as local variables that only live until the first poll fires.
+  conv._priorMessages = Array.isArray(conv.messages) ? [...conv.messages] : [];
+  conv._priorEvents = Array.isArray(conv.events) ? [...conv.events] : [];
   conv.status = 'running';
   conv.sessionId = null;
-  conv.messages.push({ role: 'manager', text: agentMessage, at: Date.now() });
   upsertConversation(conv);
   renderRail();
   renderActive();
@@ -1806,11 +2167,13 @@ async function restartConvWithAgent(conv, newAgentId, text) {
         projectPath: state.projectPath,
         hostId: newAgentId,
         jobId: conv.jobId,
-        message: agentMessage,
+        instructions: text,
       }),
     });
     conv.runId = run.id;
     foldRunIntoConversation(conv, run);
+    // Note: foldRunIntoConversation now prepends _priorMessages/_priorEvents
+    // on every call, so the history is preserved through poll ticks too.
     upsertConversation(conv);
     renderRail();
     renderActive();
@@ -1828,11 +2191,12 @@ async function restartConvWithAgent(conv, newAgentId, text) {
 async function continueRun(text) {
   const conv = activeConversation();
   if (!conv || !conv.runId) return;
-  // Prefix follow-up coaching with @fraim so the host knows this is a
-  // continuation of the active FRAIM session rather than a fresh prompt.
-  const agentMessage = buildAgentMessage(conv.employeeId, conv.jobId, 'continue', text);
+  // Consume any pending coaching job selected via quick-coach or template picker.
+  // The server adds the correct invocation prefix ($fraim / /fraim) based on
+  // the active employee — the user never sees raw invocation syntax.
+  const coachingJobId = state.pendingCoachingJobId || undefined;
+  clearPendingCoachingJob();
   conv.status = 'running';
-  conv.messages.push({ role: 'manager', text: agentMessage, at: Date.now() });
   upsertConversation(conv);
   renderRail();
   renderActive();
@@ -1840,7 +2204,7 @@ async function continueRun(text) {
     const run = await requestJson(`/api/ai-hub/runs/${conv.runId}/messages`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ message: agentMessage }),
+      body: JSON.stringify({ instructions: text, ...(coachingJobId ? { coachingJobId } : {}) }),
     });
     foldRunIntoConversation(conv, run);
     upsertConversation(conv);
@@ -1869,15 +2233,19 @@ function foldRunIntoConversation(conv, run) {
     totals: run.totals || null,
   };
   // Replace the conversation's events with the run's events (single source of truth on the server).
-  conv.events = (run.events || []).map((e) => ({ channel: e.channel, text: e.text }));
-  // Append any employee messages we don't already have.
-  const existingEmployeeTexts = new Set(conv.messages.filter((m) => m.role === 'employee').map((m) => m.text));
-  for (const m of run.messages || []) {
-    if (m.role === 'employee' && !existingEmployeeTexts.has(m.text)) {
-      conv.messages.push({ role: 'employee', text: m.text, at: Date.now() });
-      existingEmployeeTexts.add(m.text);
-    }
-  }
+  // If this conversation was restarted on a different agent, prepend the prior run's events so
+  // the micro-log shows the full diagnostic history across all run attempts (Issue #495).
+  const newEvents = (run.events || []).map((e) => ({ channel: e.channel, text: e.text }));
+  const priorEvents = Array.isArray(conv._priorEvents) ? conv._priorEvents : [];
+  conv.events = priorEvents.length > 0 ? [...priorEvents, ...newEvents] : newEvents;
+  // Same treatment for messages: prepend any cross-run history captured at restart time.
+  const newMessages = (run.messages || []).map((m) => ({
+    role: m.role,
+    text: m.text,
+    at: Date.parse(m.createdAt) || Date.now(),
+  }));
+  const priorMessages = Array.isArray(conv._priorMessages) ? conv._priorMessages : [];
+  conv.messages = priorMessages.length > 0 ? [...priorMessages, ...newMessages] : newMessages;
   // Track session for resumption.
   if (run.sessionId) conv.sessionId = run.sessionId;
   // R4: persist the persona key from the server-side run record.
@@ -1898,6 +2266,21 @@ function foldRunIntoConversation(conv, run) {
   conv.lastUpdatedAt = Date.now();
 }
 
+// Issue #442: fold the Direct (B) side run into the conversation's compareRun slot.
+function foldCompareRunIntoConversation(conv, compareRun) {
+  if (!compareRun) return;
+  conv.compareRun = {
+    id: compareRun.id,
+    sessionId: compareRun.sessionId || null,
+    status: compareRun.status || 'running',
+    stages: compareRun.stages || [],
+    currentPhase: compareRun.currentPhase || null,
+    totals: compareRun.totals || null,
+    messages: compareRun.messages || [],
+    events: compareRun.events || [],
+  };
+}
+
 const ARTIFACT_PATH_RE = /([A-Za-z0-9_\-\.\/]*?(?:docs|public|src|tests)\/[A-Za-z0-9_\-\.\/]+\.[A-Za-z0-9]+)/;
 // Paths under these directories are FRAIM lifecycle bookkeeping (RCAs,
 // raw learnings, evidence dumps, mock files), not deliverables the
@@ -1921,20 +2304,33 @@ function startPolling() {
   state.pollHandle = window.setInterval(async () => {
     const conv = activeConversation();
     if (!conv || !conv.runId) return;
-    if (conv.status !== 'running') {
+    // Issue #442: for A/B conversations keep polling until BOTH sides are done.
+    const fraimDone = conv.status !== 'running';
+    const directDone = !conv.compareRunId || (conv.compareRun && conv.compareRun.status !== 'running');
+    if (fraimDone && directDone) {
       window.clearInterval(state.pollHandle);
       state.pollHandle = null;
       return;
     }
     try {
-      const run = await requestJson(`/api/ai-hub/runs/${conv.runId}`);
-      foldRunIntoConversation(conv, run);
+      if (!fraimDone) {
+        const run = await requestJson(`/api/ai-hub/runs/${conv.runId}`);
+        foldRunIntoConversation(conv, run);
+      }
+      // Issue #442: also poll the compare run when present and not yet terminal.
+      if (conv.compareRunId && !directDone) {
+        const compareRun = await requestJson(`/api/ai-hub/runs/${conv.compareRunId}`);
+        foldCompareRunIntoConversation(conv, compareRun);
+      }
       upsertConversation(conv);
       renderRail();
       renderActive();
-      if (conv.status !== 'running') {
+      const nowFraimDone = conv.status !== 'running';
+      const nowDirectDone = !conv.compareRunId || (conv.compareRun && conv.compareRun.status !== 'running');
+      if (nowFraimDone && nowDirectDone) {
         window.clearInterval(state.pollHandle);
         state.pollHandle = null;
+        tryWordWriteBack(conv);
       }
     } catch (error) {
       console.warn('Polling failed:', error);
@@ -1942,13 +2338,49 @@ function startPolling() {
   }, 1000);
 }
 
+// Issue #489: When a job completes in Word task-pane surface, write the final
+// agent output back into the document with tracked changes so the user can
+// accept/reject via Word's normal review flow.
+async function tryWordWriteBack(conv) {
+  if (conv.wordWrittenBack) return;
+  if (document.body.dataset.surface !== 'task-pane') return;
+  if (!state.wordContext || !state.wordContext.docTitle) return;
+  if (conv.status !== 'completed') return;
+
+  const employeeMessages = (conv.messages || []).filter(m => m.role === 'employee');
+  if (employeeMessages.length === 0) return;
+  const outputText = employeeMessages[employeeMessages.length - 1].text;
+  if (!outputText || !outputText.trim()) return;
+
+  // Mark before async calls to guard against concurrent poll ticks.
+  conv.wordWrittenBack = true;
+  upsertConversation(conv);
+
+  try {
+    await requestWordContext('track-changes-on');
+    const action = conv.wordStartedWithSelection ? 'insert-after' : 'append-to-doc';
+    await requestWordContext(action, { text: outputText });
+    await requestWordContext('track-changes-off');
+    showStatus('Result written to document — review tracked changes in Word.');
+  } catch (e) {
+    console.warn('Word write-back failed:', e);
+  }
+}
+
+function convNeedsPolling(conv) {
+  if (!conv || !conv.runId) return false;
+  const fraimRunning = conv.status === 'running';
+  const directRunning = !!conv.compareRunId && (!conv.compareRun || conv.compareRun.status === 'running');
+  return fraimRunning || directRunning;
+}
+
 function switchToConversation(id) {
   state.activeId = id;
   persistConversations();
   renderRail();
   renderActive();
   const conv = activeConversation();
-  if (conv && conv.status === 'running' && conv.runId) {
+  if (convNeedsPolling(conv)) {
     startPolling();
   } else if (state.pollHandle) {
     window.clearInterval(state.pollHandle);
@@ -1967,11 +2399,9 @@ function showStatus(text, isError) {
 
 async function pickProject() {
   try {
-    const response = await fetch('/api/ai-hub/project-path/pick', { method: 'POST' });
-    if (response.status === 204) return;
-    const payload = await response.json();
-    if (!response.ok) throw new Error(payload.error || 'Could not choose a folder.');
-    if (payload.path) {
+    // 204 = user cancelled the OS folder picker; requestJson returns null for empty bodies.
+    const payload = await requestJson('/api/ai-hub/project-path/pick', { method: 'POST' });
+    if (payload && payload.path) {
       await loadBootstrap(payload.path);
     }
   } catch (error) {
@@ -2001,6 +2431,7 @@ function showStep2(job) {
   els['start'].disabled = true;
   els['step1'].hidden = true;
   els['step2'].hidden = false;
+  renderWordContextInModal();
   setTimeout(() => els['instructions'].focus(), 50);
 }
 
@@ -2041,6 +2472,11 @@ function wireEvents() {
     const employeeId = els['employee-select'].value || state.selectedEmployeeId;
     state.selectedEmployeeId = employeeId;
     closeModal();
+    // R2: if no project path is set, show the inline project picker instead.
+    if (!state.projectPath) {
+      renderFirstRunLanding('hub');
+      return;
+    }
     await startRun(job, text, employeeId);
   });
   els['job-search'].addEventListener('input', () => renderJobCatalog(els['job-search'].value));
@@ -2051,7 +2487,9 @@ function wireEvents() {
   els['coach-text'].addEventListener('input', syncSendButton);
   els['send'].addEventListener('click', async () => {
     const text = els['coach-text'].value.trim();
-    if (!text) return;
+    // Allow send when textarea is empty IFF a coaching job is pending — the
+    // user clicked a quick-coach button and just wants to fire that job.
+    if (!text && !state.pendingCoachingJobId) return;
     els['coach-text'].value = '';
     syncSendButton();
     // If the user changed the agent via the inline selector, restart with the
@@ -2068,25 +2506,109 @@ function wireEvents() {
     }
   });
 
-  if (els['active-employee-select']) {
-    els['active-employee-select'].addEventListener('change', () => {
+  if (els['active-employee-select']) {
+    els['active-employee-select'].addEventListener('change', () => {
       // Only update the global preference here. Do NOT update conv.employeeId —
       // the send handler compares sel.value vs conv.employeeId to detect a
       // switch; updating conv here would make them equal and the restart would
       // never fire.
-      state.selectedEmployeeId = els['active-employee-select'].value;
-    });
-  }
-
-  if (els['coach-panel']) {
-    els['coach-panel'].addEventListener('toggle', () => {
-      const conv = activeConversation();
-      if (!conv) return;
-      panelStateFor(conv.id).coach = els['coach-panel'].open;
-    });
-  }
-
-  // Issue #347 R2 — template picker.
+      state.selectedEmployeeId = els['active-employee-select'].value;
+    });
+  }
+
+  // Issue #442: keep A/B toggle visible only when the selected employee supports
+  // direct-path invocation (supportsRaw). Also wire the explanation paragraph.
+  if (els['employee-select']) {
+    els['employee-select'].addEventListener('change', updateAbToggleVisibility);
+  }
+  const abToggleCheckbox = document.getElementById('ab-toggle');
+  if (abToggleCheckbox) {
+    abToggleCheckbox.addEventListener('change', () => {
+      const exp = document.getElementById('ab-toggle-explanation');
+      if (exp) exp.hidden = !abToggleCheckbox.checked;
+      // R1.3: Start button label changes to "Start A/B test" when toggle is on.
+      if (els['start']) els['start'].textContent = abToggleCheckbox.checked ? 'Start A/B test' : 'Start';
+    });
+  }
+
+  // Issue #442: Direct panel send button.
+  const abDirectInput = document.getElementById('ab-direct-input');
+  if (abDirectInput && els['ab-direct-send']) {
+    abDirectInput.addEventListener('input', () => {
+      const conv = activeConversation();
+      const hasSession = !!(conv && conv.compareRun && conv.compareRun.sessionId);
+      const notRunning = !conv || (conv.compareRun && conv.compareRun.status) !== 'running';
+      els['ab-direct-send'].disabled = !hasSession || !notRunning || !abDirectInput.value.trim();
+    });
+    abDirectInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (!els['ab-direct-send'].disabled) els['ab-direct-send'].click(); }
+    });
+    els['ab-direct-send'].addEventListener('click', async () => {
+      const conv = activeConversation();
+      if (!conv || !conv.compareRunId) return;
+      const text = abDirectInput.value.trim();
+      if (!text) return;
+      abDirectInput.value = '';
+      els['ab-direct-send'].disabled = true;
+      try {
+        const updated = await requestJson(`/api/ai-hub/runs/${conv.compareRunId}/direct-messages`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message: text }),
+        });
+        foldCompareRunIntoConversation(conv, updated);
+        renderActive();
+      } catch (err) {
+        console.error('Direct send failed', err);
+      }
+    });
+  }
+
+  if (els['coach-panel']) {
+    els['coach-panel'].addEventListener('toggle', () => {
+      const conv = activeConversation();
+      if (!conv) return;
+      panelStateFor(conv.id).coach = els['coach-panel'].open;
+      // R3.3: keep coach-summary visibility in sync when toggled directly.
+      if (els['coach-summary']) els['coach-summary'].hidden = els['coach-panel'].open;
+    });
+  }
+
+  // R6: thread panel toggle — persist open/close state per conversation.
+  if (els['thread-panel']) {
+    els['thread-panel'].addEventListener('toggle', () => {
+      const conv = activeConversation();
+      if (!conv) return;
+      panelStateFor(conv.id).thread = els['thread-panel'].open;
+    });
+  }
+
+  // R5: quick-access coaching buttons.
+  // The invocation syntax ($fraim / /fraim) stays out of the UI entirely —
+  // the server adds it based on the active employee. Clicking a button sets a
+  // pending coaching job (shown in #coach-note); the user can add optional
+  // context in the textarea and then click Send.
+  if (els['quick-coach-btns']) {
+    els['quick-coach-btns'].addEventListener('click', (e) => {
+      const btn = e.target.closest('.quick-coach-btn');
+      if (!btn) return;
+      const jobId = btn.dataset.job;
+      if (!jobId) return;
+      const label = btn.textContent.trim();
+      setPendingCoachingJob(jobId, label);
+      els['coach-text'].focus();
+    });
+  }
+  if (els['other-manager-jobs-btn']) {
+    els['other-manager-jobs-btn'].addEventListener('click', (e) => {
+      e.stopPropagation();
+      const popover = els['template-popover'];
+      if (popover && popover.hidden === false) closeTemplatePopover();
+      else openTemplatePopover();
+    });
+  }
+
+  // Issue #347 R2 — template picker.
   if (els['template-picker-btn']) {
     els['template-picker-btn'].addEventListener('click', (e) => {
       e.stopPropagation();
@@ -2097,7 +2619,7 @@ function wireEvents() {
     document.addEventListener('click', (e) => {
       const popover = els['template-popover'];
       if (!popover || popover.hidden) return;
-      if (!e.target.closest('#template-popover') && !e.target.closest('#template-picker-btn')) {
+      if (!e.target.closest('#template-popover') && !e.target.closest('#other-manager-jobs-btn')) {
         closeTemplatePopover();
       }
     });
@@ -2116,6 +2638,24 @@ function wireEvents() {
   }
   bindEnterToButton(els['coach-text'], els['send']);
   bindEnterToButton(els['instructions'], els['start']);
+
+  // Word context bar refresh button.
+  if (els['word-ctx-refresh']) {
+    els['word-ctx-refresh'].addEventListener('click', async () => {
+      const fresh = await requestWordContext('get-context');
+      if (fresh) { state.wordContext = fresh; renderWordContextBar(); renderWordContextInModal(); }
+    });
+  }
+  // Word context card expand/collapse toggle.
+  if (els['word-ctx-card-toggle']) {
+    els['word-ctx-card-toggle'].addEventListener('click', () => {
+      const body = els['word-ctx-card-body'];
+      if (!body) return;
+      const expanded = !body.hidden;
+      body.hidden = expanded;
+      els['word-ctx-card-toggle'].textContent = expanded ? '▸' : '▾';
+    });
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -2123,6 +2663,9 @@ function wireEvents() {
 // ---------------------------------------------------------------------------
 
 (async function init() {
+  // html.electron is already set by the inline script in <head> for zero-flash.
+  // This is a belt-and-suspenders fallback in case the inline script was skipped.
+
   gatherElements();
   loadConversationsFromStorage();
   wirePopovers();
@@ -2130,14 +2673,34 @@ function wireEvents() {
 
   const urlParams = new URLSearchParams(window.location.search);
   const isFirstRun = urlParams.get('firstRun') === 'true';
+  const surface = urlParams.get('surface') || 'hub';
+  const docUrl = urlParams.get('docUrl') || '';
+
+  // Apply surface class before bootstrap so CSS takes effect immediately.
+  if (surface !== 'hub') document.body.dataset.surface = surface;
+
+  // Register the Word context bridge (no-op outside iframe context).
+  setupWordBridge();
 
   try {
-    await loadBootstrap();
+    await loadBootstrap(null, docUrl);
   } catch (error) {
     showStatus(error.message, true);
     return;
   }
 
+  // Task-pane and extension surfaces: skip welcome/onboarding, show active job
+  // or open the new-job picker. Layout is compact (rail hidden via CSS).
+  if (surface === 'task-pane' || surface === 'extension') {
+    const conv = activeConversation();
+    if (conv && conv.projectPath === state.projectPath) {
+      if (convNeedsPolling(conv)) startPolling();
+    } else {
+      openModal();
+    }
+    return;
+  }
+
   if (isFirstRun) {
     renderFirstRunLanding();
     return;
@@ -2156,7 +2719,7 @@ function wireEvents() {
   // If an active conversation belongs to the loaded project and is still running, resume polling.
   const conv = activeConversation();
   if (conv && conv.projectPath === state.projectPath) {
-    if (conv.status === 'running' && conv.runId) startPolling();
+    if (convNeedsPolling(conv)) startPolling();
   } else {
     state.activeId = null;
     persistConversations();
@@ -2211,10 +2774,11 @@ async function autoOnboardProject() {
   }
 }
 
-function renderFirstRunLanding() {
-  // Show first-run onboarding screen over the normal Hub UI.
-  // The user picks a project folder here; clicking Start fires the
-  // Project Onboarding job automatically (R4.3/R4.4).
+function renderFirstRunLanding(mode) {
+  // mode === 'hub'      → R2: shown when a job is started without a project path.
+  //                       After picking, reload bootstrap and return to the hub.
+  // mode === 'firstrun' → legacy path: shown on ?firstRun=true; auto-starts onboarding.
+  // Default: 'firstrun' for backward compatibility.
   const existing = document.getElementById('fraim-first-run-landing');
   if (existing) existing.remove();
 
@@ -2234,14 +2798,14 @@ function renderFirstRunLanding() {
     'box-shadow:0 1px 2px rgba(20,40,30,.04);',
   ].join('');
 
-  const title = document.createElement('h1');
-  title.textContent = "Let's get started";
+  const title = document.createElement('h2');
+  title.textContent = 'Pick a project folder';
   title.style.cssText = 'font-size:22px;font-weight:600;margin:0;';
   card.appendChild(title);
 
   const desc = document.createElement('p');
-  desc.textContent = "Let's introduce your AI employees to their first project.";
-  desc.style.cssText = 'color:var(--muted,#6b7a72);margin:0;font-size:15px;';
+  desc.textContent = "Your AI employees need a project to work in. Pick the folder where your code lives. Think of it like onboarding a new hire — you're giving them a home and asking them to learn everything they can about it.";
+  desc.style.cssText = 'color:var(--muted,#6b7a72);margin:0;font-size:15px;line-height:1.55;';
   card.appendChild(desc);
 
   const folderLabel = document.createElement('label');
@@ -2277,11 +2841,8 @@ function renderFirstRunLanding() {
   ].join('');
   browseBtn.addEventListener('click', async () => {
     try {
-      const response = await fetch('/api/ai-hub/project-path/pick', { method: 'POST' });
-      if (response.status === 204) return;
-      const payload = await response.json();
-      if (!response.ok) throw new Error(payload.error || 'Could not pick folder.');
-      if (payload.path) {
+      const payload = await requestJson('/api/ai-hub/project-path/pick', { method: 'POST' });
+      if (payload && payload.path) {
         await loadBootstrap(payload.path);
         folderInput.value = state.projectPath;
         folderInput.style.color = 'var(--text,#1f2a24)';
@@ -2300,10 +2861,10 @@ function renderFirstRunLanding() {
 
   const startBtn = document.createElement('button');
   startBtn.type = 'button';
-  startBtn.textContent = 'Start onboarding →';
+  startBtn.textContent = 'Start in this project →';
   startBtn.disabled = !state.projectPath;
   startBtn.style.cssText = [
-    'background:var(--accent,#3d8a6e);color:#fff;border:none;border-radius:8px;',
+    'background:var(--accent,#1f437d);color:#fff;border:none;border-radius:8px;',
     'padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;',
     'opacity:' + (state.projectPath ? '1' : '0.5') + ';',
     'transition:opacity .15s;',
@@ -2311,16 +2872,24 @@ function renderFirstRunLanding() {
   startBtn.addEventListener('click', async () => {
     if (!state.projectPath) return;
     startBtn.disabled = true;
-    startBtn.textContent = 'Starting…';
     overlay.remove();
+    if (mode === 'hub') {
+      // R2: reload bootstrap for the chosen project and return to hub.
+      try {
+        await loadBootstrap(state.projectPath);
+      } catch (err) {
+        showStatus(err.message, true);
+      }
+      return;
+    }
+    // Legacy first-run path: auto-start project-onboarding.
+    startBtn.textContent = 'Starting…';
     renderActive();
-    // Find the project-onboarding job from bootstrap, fall back to direct POST.
     const job = (state.bootstrap && state.bootstrap.jobs || []).find((j) => j.id === 'project-onboarding');
     const employeeId = state.selectedEmployeeId || 'claude';
     if (job) {
       await startRun(job, 'Onboard this project', employeeId);
     } else {
-      // Job not in catalog yet (project not initialized) — POST directly.
       try {
         const run = await requestJson('/api/ai-hub/runs', {
           method: 'POST',