fraim-framework 2.0.151 → 2.0.153

package/public/ai-hub/script.js

@@ -21,9 +21,10 @@ 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
-};
+  modalPersonaFilter: null,  // R3+: filter inside new-job modal; null = "All jobs"
+  storedApiKey: null,        // R2: loaded from preferences, sent on bootstrap
+  panelState: {},            // { [convId]: { coach?: boolean } }
+};
 
 const els = {};
 
@@ -36,12 +37,13 @@ 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', 'summary-strip',
-    'progress', 'stage', 'latest', 'artifact-slot', 'messages',
-    'coach-text', 'send', 'micro-manage', 'micro-log',
-    'status-line', 'coach-note',
-    'modal', 'step1', 'step2',
+    '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',
     'cancel1', 'next1', 'back2', 'start',
     'job-search', 'job-catalog', 'job-pick-status',
     // Issue #385: hire-required notice, persona job filter
@@ -224,10 +226,34 @@ function findConversation(id) {
   return null;
 }
 
-function activeConversation() {
-  if (!state.activeId) return null;
-  return findConversation(state.activeId);
-}
+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 upsertConversation(conv) {
   const list = projectConversations().slice();
@@ -306,49 +332,49 @@ function renderRail() {
   }
 }
 
-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)
@@ -367,62 +393,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) {
@@ -540,56 +566,56 @@ 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['summary-strip'].textContent = buildConversationSummary(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;
+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);
 
   // 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) {
+  const switchedConv = renderedConvId !== conv.id;
+  if (switchedConv) {
     els['artifact-slot'].innerHTML = '';
     els['messages'].innerHTML = '';
     els['micro-log'].textContent = '';
     renderedConvId = conv.id;
     renderedMessageCount = 0;
-    renderedEventCount = 0;
-    renderedArtifactKey = null;
-  }
-  const statusChanged = renderedStatus !== conv.status;
+    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.
@@ -617,24 +643,24 @@ function renderActive() {
   // 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);
-  }
+  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);
+  }
 
   // Micro-manage — only append new events. textContent assignment on the
   // <pre> wipes the entire log every tick which is wasteful.
@@ -660,58 +686,64 @@ 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 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.';
-}
+  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() + '…';
+}
 
 // Render the inline employee selector shown in the coach section of an
 // active conversation. Allows switching agents without reopening the modal.
@@ -1019,21 +1051,23 @@ function closeTemplatePopover() {
   btn.setAttribute('aria-expanded', 'false');
 }
 
-function applyTemplateInvocation(managerJobId) {
-  const conv = activeConversation();
+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;
-  // Append (with a single space separator if needed) — never replace.
-  let combined;
-  if (prior.length === 0) combined = invocation;
-  else if (/\s$/.test(prior)) combined = prior + invocation;
-  else combined = prior + ' ' + invocation;
-  textarea.value = combined;
+  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);
   textarea.focus();
@@ -1047,145 +1081,174 @@ 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…';
-    }
-  }
-
-  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';
-  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];
-
-  target.scrollIntoView({ block: 'center', 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 `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() {
   const conv = activeConversation();
   const hasText = els['coach-text'].value.trim().length > 0;
   // Send is enabled as soon as the host session exists. We deliberately
@@ -1631,46 +1694,39 @@ 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. The first turn includes the jobId; follow-up coaching sends just
-// the bare symbol (the host is already inside the FRAIM session).
-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';
-  if (kind === 'start') {
-    return `${symbol} ${jobId}`;
-  }
-  return symbol;
-}
+// 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 invocation = fraimInvocationFor(employeeId, jobId, kind);
-  // Freeform: no FRAIM prefix, no stub reference — just the raw instructions.
-  if (!invocation) return trimmed;
-  const stub = (kind === 'start' && stubPath) ? `\n[Job stub: ${stubPath}]` : '';
-  if (!trimmed) return `${invocation}${stub}`;
-  // For continue turns, applyTemplateInvocation already writes the full
-  // FRAIM invocation (e.g. "/fraim follow-your-mentor") into the textarea.
-  // If the text already starts with a known FRAIM symbol, don't prepend again.
-  if (kind === 'continue') {
-    const knownSymbols = Object.values(FRAIM_INVOCATION_SYMBOL);
-    if (knownSymbols.some((s) => trimmed.startsWith(s))) return trimmed;
-  }
-  return `${invocation}${stub}\n\n${trimmed}`;
-}
+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}`;
+}
 
 async function startRun(job, instructions, employeeId) {
   // Prefix the manager's typed instructions with the FRAIM invocation so
@@ -2012,17 +2068,25 @@ 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;
-    });
-  }
-
-  // Issue #347 R2 — template picker.
+      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.
   if (els['template-picker-btn']) {
     els['template-picker-btn'].addEventListener('click', (e) => {
       e.stopPropagation();