fraim 2.0.162 → 2.0.164

package/public/ai-hub/script.js

@@ -9,8 +9,6 @@
 // conversation maps to one job and (when active) one backend run id. The
 // existing single-active-run backend stays untouched per spec R15.
 
-const STORAGE_KEY_CONVERSATIONS = 'fraim.aiHub.conversations.v1';
-const STORAGE_KEY_ACTIVE = 'fraim.aiHub.activeConversation.v1';
 const STORAGE_KEY_TREE_WIDTH = 'fraim.aiHub.treeSidebarWidth.v1';
 const STORAGE_KEY_TREE_COLLAPSED = 'fraim.aiHub.treeSidebarCollapsed.v1';
 const TREE_WIDTH_MIN = 176;
@@ -386,35 +384,6 @@ function normalizeGeminiConversationMessages(conv) {
   return changed;
 }
 
-function loadConversationsFromStorage() {
-  try {
-    const raw = window.localStorage.getItem(STORAGE_KEY_CONVERSATIONS);
-    state.conversations = raw ? JSON.parse(raw) : {};
-  } catch {
-    state.conversations = {};
-  }
-  try {
-    state.activeId = window.localStorage.getItem(STORAGE_KEY_ACTIVE) || null;
-  } catch {
-    state.activeId = null;
-  }
-  // Retroactively fix titles that were saved as the generic "New job" fallback
-  // by re-deriving from the first manager message.
-  let normalizedLegacyConversations = false;
-  for (const convList of Object.values(state.conversations)) {
-    for (const conv of convList) {
-      normalizedLegacyConversations = normalizeGeminiConversationMessages(conv) || normalizedLegacyConversations;
-      if (conv.title === 'New job') {
-        const firstMsg = (conv.messages || []).find((m) => m.role === 'manager');
-        if (!firstMsg) continue;
-        const rederived = deriveTitle(conv.jobTitle || '', firstMsg.text || '');
-        if (rederived !== 'New job') conv.title = rederived;
-      }
-    }
-  }
-  if (normalizedLegacyConversations) persistConversations();
-}
-
 function projectConversationPayload() {
   return {
     projectPath: state.projectPath || '',
@@ -423,19 +392,6 @@ function projectConversationPayload() {
   };
 }
 
-function persistConversationsToCache() {
-  try {
-    window.localStorage.setItem(STORAGE_KEY_CONVERSATIONS, JSON.stringify(state.conversations));
-    if (state.activeId) {
-      window.localStorage.setItem(STORAGE_KEY_ACTIVE, state.activeId);
-    } else {
-      window.localStorage.removeItem(STORAGE_KEY_ACTIVE);
-    }
-  } catch (error) {
-    console.warn('Could not persist conversations:', error);
-  }
-}
-
 function scheduleConversationDiskPersist() {
   if (!state.projectPath) return;
   if (state.conversationPersistTimer) window.clearTimeout(state.conversationPersistTimer);
@@ -457,7 +413,6 @@ function scheduleConversationDiskPersist() {
 
 function persistConversations(options) {
   const opts = options || {};
-  persistConversationsToCache();
   if (opts.disk !== false) scheduleConversationDiskPersist();
 }
 
@@ -465,33 +420,17 @@ async function hydrateConversationsFromServer() {
   if (!state.projectPath) return;
   try {
     const payload = await requestJson(`/api/ai-hub/conversations?projectPath=${encodeURIComponent(state.projectPath)}`);
-    const serverConversations = Array.isArray(payload.conversations) ? payload.conversations : [];
-    const localConversations = projectConversations();
-    const mergedById = new Map();
-    for (const conv of serverConversations) mergedById.set(conv.id, conv);
-    for (const conv of localConversations) {
-      const existing = mergedById.get(conv.id);
-      if (!existing || conversationTimestamp(conv) > conversationTimestamp(existing)) {
-        mergedById.set(conv.id, conv);
-      }
-    }
-    const conversations = Array.from(mergedById.values())
-      .sort((a, b) => conversationTimestamp(b) - conversationTimestamp(a));
-    // #534: apply the same Gemini stdout/stderr normalization as the localStorage
-    // path so server-hydrated conversations render identically (the localStorage
-    // path normalizes in loadConversationsFromStorage; without this, a hydrate-vs-
-    // load race can surface uncoalesced/stale rows).
+    const conversations = Array.isArray(payload.conversations) ? payload.conversations : [];
     for (const conv of conversations) normalizeGeminiConversationMessages(conv);
     state.conversations[state.projectPath] = conversations;
     const activeCandidates = [state.activeId, payload.activeId].filter(Boolean);
     state.activeId = activeCandidates.find((id) => conversations.some((conv) => conv.id === id)) || (conversations[0] ? conversations[0].id : null);
     state.conversationDiskAvailable = true;
-    persistConversations({ disk: false });
     renderRail();
     renderActive();
   } catch (error) {
     state.conversationDiskAvailable = false;
-    console.warn('Could not hydrate conversations from local disk:', error);
+    console.warn('Could not hydrate conversations from server:', error);
   }
 }
 
@@ -600,10 +539,18 @@ function stripReviewHandoffBlocks(text) {
     .trim();
 }
 
+function stripHubInjectedPromptBlocks(text) {
+  return String(text || '')
+    .replace(/(?:^|\n)\s*\[How to talk to me\][\s\S]*?(?=\n\s*\[[^\]\n]+\]|\n\s*#{1,6}\s|\n\s*[-*]\s|\n{2,}|$)/gi, '\n')
+    .replace(/(?:^|\n)\s*(?:[$/]fraim)\s+[a-z0-9-]+(?:\s*\[[^\]\n]*\])?[^\n]*(?=\n|$)/gi, '\n')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
 // R8: render markdown subset safely. HTML is escaped first.
 function formatEmployeeText(text) {
   if (!text) return '';
-  const visibleText = stripReviewHandoffBlocks(text);
+  const visibleText = stripHubInjectedPromptBlocks(stripReviewHandoffBlocks(text));
   if (!visibleText) return '';
   // 1. Escape HTML entities.
   let s = visibleText
@@ -767,14 +714,72 @@ function renderRail() {
     !(inWorkspace && projectUpdateJobs.has(conv.jobId))
   );
 
+  // Issue #550: Two-path routing for ad-hoc (freeform) conversations.
+  // Path A: jobId === '__freeform__' AND conv.personaKey resolves to a FRAIM
+  //         employee the user has access to -> groups with that employee's
+  //         accordion, identical to a structured catalog run.
+  // Path B: jobId === '__freeform__' AND no personaKey (no FRAIM employee
+  //         identity was resolved) -> deferred to a single "Watercooler
+  //         Conversations" group rendered after all employee groups (R3).
+  //         The agentName (host CLI) is NOT a FRAIM employee and does not
+  //         qualify an ad-hoc run for Path A — only personaKey does.
+  const watercoolerConvs = [];
   const groups = new Map();
   for (const conv of list) {
+    const isFreeform = conv.jobId === '__freeform__';
+    if (isFreeform && !conv.personaKey) {
+      // Path B: unmatched ad-hoc — collect for the Watercooler group.
+      watercoolerConvs.push(conv);
+      continue;
+    }
+    // Path A (matched ad-hoc with personaKey) or structured run:
+    // group by employee key as before.
     const key = conv.personaKey || conversationAgentName(conv) || 'free';
     const label = getConversationEmployeeLabel(conv);
     if (!groups.has(key)) groups.set(key, { key, label, detail: getConversationEmployeeDetail(conv), sample: conv, conversations: [] });
     groups.get(key).conversations.push(conv);
   }
 
+  // Helper: build the run-item buttons shared by employee groups and Watercooler.
+  function buildGroupList(conversations) {
+    const groupList = document.createElement('div');
+    groupList.className = 'conv-employee-list';
+    for (const conv of conversations) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'conv-item' + (state.activeId === conv.id ? ' active' : '');
+      btn.dataset.conv = conv.id;
+      const bodyDiv = document.createElement('span');
+      bodyDiv.className = 'conv-body';
+      const titleSpan = document.createElement('span');
+      titleSpan.className = 'conv-title';
+      titleSpan.textContent = conv.title || '';
+      bodyDiv.appendChild(titleSpan);
+      btn.appendChild(bodyDiv);
+      const dotClass = conversationStateDotClass(conv);
+      const statusDot = document.createElement('span');
+      statusDot.className = 'state-dot conv-state-dot dot-' + dotClass;
+      statusDot.title = tfDotTitle(dotClass);
+      btn.appendChild(statusDot);
+      const statusSpan = document.createElement('span');
+      statusSpan.className = 'conv-status';
+      statusSpan.textContent = conversationStateLabel(conv);
+      statusSpan.classList.add(conversationUiState(conv));
+      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);
+      }
+      tfAttachRunDelete(btn, conv, { tree: false }); // #533 R6: delete a run
+      btn.addEventListener('click', () => switchToConversation(conv.id));
+      groupList.appendChild(btn);
+    }
+    return groupList;
+  }
+
   for (const group of groups.values()) {
     const details = document.createElement('details');
     details.className = 'conv-employee-group';
@@ -812,48 +817,46 @@ function renderRail() {
     summary.appendChild(addBtn);
     summary.appendChild(count);
     details.appendChild(summary);
-
-    const groupList = document.createElement('div');
-    groupList.className = 'conv-employee-list';
-
-    for (const conv of group.conversations) {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.className = 'conv-item' + (state.activeId === conv.id ? ' active' : '');
-      btn.dataset.conv = conv.id;
-      const bodyDiv = document.createElement('span');
-      bodyDiv.className = 'conv-body';
-      const titleSpan = document.createElement('span');
-      titleSpan.className = 'conv-title';
-      titleSpan.textContent = conv.title || '';
-      bodyDiv.appendChild(titleSpan);
-      btn.appendChild(bodyDiv);
-      const dotClass = conversationStateDotClass(conv);
-      const statusDot = document.createElement('span');
-      statusDot.className = 'state-dot conv-state-dot dot-' + dotClass;
-      statusDot.title = tfDotTitle(dotClass);
-      btn.appendChild(statusDot);
-      const statusSpan = document.createElement('span');
-      statusSpan.className = 'conv-status';
-      statusSpan.textContent = conversationStateLabel(conv);
-      statusSpan.classList.add(conversationUiState(conv));
-      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);
-      }
-      tfAttachRunDelete(btn, conv, { tree: false }); // #533 R6: delete a run
-      btn.addEventListener('click', () => switchToConversation(conv.id));
-      groupList.appendChild(btn);
-    }
-
-    details.appendChild(groupList);
+    details.appendChild(buildGroupList(group.conversations));
     els['conv-list'].appendChild(details);
   }
 
+  // Issue #550 R2/R3: Render the Watercooler Conversations group after all
+  // employee groups, only when at least one unmatched ad-hoc conv exists.
+  // R9: the persona filter excludes unmatched ad-hoc convs entirely (they carry
+  // no personaKey so they never satisfy the filter), meaning watercoolerConvs is
+  // already empty when a persona filter is active.
+  if (watercoolerConvs.length > 0) {
+    const wcDetails = document.createElement('details');
+    wcDetails.className = 'conv-employee-group conv-employee-group--adhoc';
+    wcDetails.open = true;
+    const wcSummary = document.createElement('summary');
+    wcSummary.className = 'conv-employee-tab';
+    // R4: dashed-border avatar placeholder — no image or initials.
+    const wcAvatar = document.createElement('span');
+    wcAvatar.className = 'conv-employee-avatar conv-employee-avatar--adhoc';
+    const wcCopy = document.createElement('span');
+    wcCopy.className = 'conv-employee-tab-copy';
+    const wcLabel = document.createElement('strong');
+    wcLabel.className = 'conv-employee-tab-label';
+    wcLabel.textContent = 'Watercooler Conversations'; // R5
+    const wcDetail = document.createElement('small');
+    wcDetail.className = 'conv-employee-tab-detail';
+    wcDetail.textContent = 'Unmatched ad-hoc tasks'; // R5
+    wcCopy.appendChild(wcLabel);
+    wcCopy.appendChild(wcDetail);
+    const wcCount = document.createElement('span');
+    wcCount.className = 'conv-employee-tab-count';
+    wcCount.textContent = String(watercoolerConvs.length);
+    // R6: NO "+ assign" button in Watercooler summary.
+    wcSummary.appendChild(wcAvatar);
+    wcSummary.appendChild(wcCopy);
+    wcSummary.appendChild(wcCount);
+    wcDetails.appendChild(wcSummary);
+    wcDetails.appendChild(buildGroupList(watercoolerConvs));
+    els['conv-list'].appendChild(wcDetails);
+  }
+
   // #521: hide the "Runs" section header when there's nothing in it — in the
   // workspace, project-update jobs are deduped out, so a project that has only
   // run onboarding would otherwise show a dangling empty "Runs" label.
@@ -870,6 +873,11 @@ function statusLabel(s) {
 function conversationUiState(conv) {
   if (!conv) return 'idle';
   if (conv.status === 'running') return 'working';
+  // #549: conv.stopped is set by tfStopRun after a manager-initiated stop.
+  // A stopped run is an intentional pause — visually distinct from an error-failed run.
+  // Guard on status==='failed' only: a completed run should resolve to complete/waiting,
+  // not stay stuck as stopped even if the stopped flag was not cleared.
+  if (conv.stopped && conv.status === 'failed') return 'stopped';
   if (conv.status === 'failed') return 'waiting';
   if (conv.status === 'completed' && conv.reviewApproved) return 'complete';
   if (conv.status === 'completed') return 'waiting';
@@ -881,6 +889,8 @@ function conversationStateDotClass(conv) {
   if (uiState === 'working') return 'amber';
   if (uiState === 'waiting') return 'red';
   if (uiState === 'complete') return 'green';
+  // #549: stopped runs use a non-pulsing amber dot (intentional pause, not error).
+  if (uiState === 'stopped') return 'amber-static';
   return 'grey';
 }
 
@@ -889,6 +899,8 @@ function conversationStateLabel(conv) {
   if (uiState === 'working') return 'Working';
   if (uiState === 'waiting') return 'Waiting on you';
   if (uiState === 'complete') return 'Done';
+  // #549: manager-stopped run gets a distinct "Stopped" label in the rail.
+  if (uiState === 'stopped') return 'Stopped';
   return 'Idle';
 }
 
@@ -1301,6 +1313,7 @@ function renderActive() {
   }
   els['empty'].hidden = true;
   els['active-conv'].hidden = false;
+  els['active-conv'].dataset.runId = conv.runId || '';
   els['active-title'].textContent = conversationTitle(conv);
   renderConversationIdentity(conv);
   renderRunStatePill(conv);
@@ -1516,6 +1529,8 @@ function renderRunStatePill(conv) {
     pill.textContent = 'DONE';
     pill.className = 'run-state-pill complete';
   } else {
+    // #549 R3: conversationUiState now returns 'stopped' for manager-stopped runs.
+    // conversationStateLabel returns 'Stopped' for that state; toUpperCase() => 'STOPPED'.
     pill.textContent = conversationStateLabel(conv).toUpperCase();
     pill.className = `run-state-pill ${conversationUiState(conv)}`;
   }
@@ -1523,16 +1538,33 @@ function renderRunStatePill(conv) {
   const stopBtn = els['run-stop-btn'];
   if (stopBtn) {
     const canStop = conv.status === 'running' && !!conv.runId && !conv._stopping;
-    stopBtn.hidden = !canStop;
+    // #549 R1/AC1.3: While in-flight (_stopping===true), keep the button VISIBLE but disabled
+    // so the manager retains the affordance showing "Stopping…". Hide only when the run is
+    // not active at all (canStop===false AND not in-flight).
+    stopBtn.hidden = !canStop && !conv._stopping;
     stopBtn.disabled = !!conv._stopping;
+    if (conv._stopping) {
+      stopBtn.textContent = '⏹ Stopping…';
+      stopBtn.setAttribute('aria-label', 'Stopping the employee, please wait');
+    } else {
+      stopBtn.textContent = '⏹ Stop';
+      stopBtn.setAttribute('aria-label', 'Ask the employee to stop and wait for you');
+    }
   }
 }
 
 // #521: ask the agent to stop and park the run in "waiting on you" mode.
 async function tfStopRun(conv) {
-  if (!conv || !conv.runId || conv.status !== 'running') return;
+  // #549 B2: Guard against _stopping so a rapid double-click (or force-click
+  // that bypasses the disabled button) cannot fire a second stop request while
+  // the first is still in-flight. The button is set disabled in renderRunStatePill
+  // but DOM state is not a reliable guard for programmatic re-entry.
+  if (!conv || !conv.runId || conv.status !== 'running' || conv._stopping) return;
   conv._stopping = true;
   if (typeof renderRunStatePill === 'function') renderRunStatePill(conv);
+  // #549 R1: Update the thread indicator immediately to show the in-flight dash
+  // so the manager sees "stopping in progress" rather than "still working".
+  if (typeof syncWorkingIndicator === 'function') syncWorkingIndicator(conv);
   try {
     const run = await requestJson('/api/ai-hub/runs/' + encodeURIComponent(conv.runId) + '/stop', {
       method: 'POST',
@@ -1553,6 +1585,11 @@ async function tfStopRun(conv) {
   } catch (e) {
     conv._stopping = false;
     if (typeof renderRunStatePill === 'function') renderRunStatePill(conv);
+    // #549 B1: Restore the three typing-dots when the stop POST fails.
+    // Without this call, syncWorkingIndicator was never called after the catch
+    // cleared _stopping, leaving the stopping-dash in #employee-working-indicator
+    // permanently even though the employee is still running.
+    if (typeof syncWorkingIndicator === 'function') syncWorkingIndicator(conv);
     if (typeof showStatus === 'function') showStatus((e && e.message) || 'Could not stop the run.', true);
   }
 }
@@ -1571,23 +1608,58 @@ function syncThreadUiState(conv) {
 function syncWorkingIndicator(conv) {
   const host = els['messages'];
   if (!host) return;
-  const shouldShow = conversationUiState(conv) === 'working';
+  const uiState = conversationUiState(conv);
+  const isStopping = conv && conv._stopping;
+  const shouldShowWorking = uiState === 'working';
+  const shouldShowStopped = uiState === 'stopped';
+
+  // ── #549 R2: Remove stopped indicator when state is no longer stopped. ──
+  let stoppedIndicator = host.querySelector('#employee-stopped-indicator');
+  if (!shouldShowStopped && stoppedIndicator) {
+    stoppedIndicator.remove();
+    stoppedIndicator = null;
+  }
+
+  // ── Working indicator (three-dot bounce or in-flight dash). ──
   let indicator = host.querySelector('#employee-working-indicator');
-  if (!shouldShow) {
+  if (!shouldShowWorking && !isStopping) {
     if (indicator) indicator.remove();
-    return;
+  } else {
+    // Create the bubble if it doesn't exist yet.
+    if (!indicator) {
+      indicator = document.createElement('article');
+      indicator.id = 'employee-working-indicator';
+      indicator.className = 'message typing-indicator';
+      indicator.setAttribute('aria-label', 'Employee is working');
+      const bubble = document.createElement('div');
+      bubble.className = 'bubble';
+      bubble.innerHTML = '<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
+      indicator.appendChild(bubble);
+    }
+    // #549 R1: While stop is in-flight, replace the three-dot animation with
+    // a single static dash so the manager sees "stopping" rather than "still working".
+    const bubble = indicator.querySelector('.bubble');
+    if (isStopping) {
+      bubble.innerHTML = '<span class="stopping-dash">–</span>';
+    } else if (!bubble.querySelector('.typing-dot')) {
+      // Restore three dots if _stopping cleared (e.g. stop failed).
+      bubble.innerHTML = '<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
+    }
+    host.appendChild(indicator);
   }
-  if (!indicator) {
-    indicator = document.createElement('article');
-    indicator.id = 'employee-working-indicator';
-    indicator.className = 'message typing-indicator';
-    indicator.setAttribute('aria-label', 'Employee is working');
+
+  // ── #549 R2: Show stopped-state system message after stop completes. ──
+  if (shouldShowStopped && !stoppedIndicator) {
+    const article = document.createElement('article');
+    article.id = 'employee-stopped-indicator';
+    article.className = 'message system';
+    article.setAttribute('aria-label', 'Employee stopped');
     const bubble = document.createElement('div');
     bubble.className = 'bubble';
-    bubble.innerHTML = '<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
-    indicator.appendChild(bubble);
+    bubble.textContent = '⏸ Employee stopped. Send your next instruction to continue.';
+    article.appendChild(bubble);
+    host.appendChild(article);
   }
-  host.appendChild(indicator);
 }
 
 function buildConversationSummary(conv) {
@@ -2020,7 +2092,7 @@ function stripStubReference(text) {
 }
 
 function surfaceText(role, text, conv) {
-  const raw = stripStubReference(text);
+  const raw = stripHubInjectedPromptBlocks(stripStubReference(text));
   if (!raw) return '';
 
   if (role === 'manager') {
@@ -2143,20 +2215,13 @@ function ensureThreadMessageViewportObserver() {
 }
 
 function syncThreadMessageViewport() {
-  const panel = els['thread-panel'];
   const messages = els['messages'];
-  if (!panel || !messages || !panel.open) return;
-  const summary = panel.querySelector('summary');
-  const panelHeight = panel.clientHeight || panel.getBoundingClientRect().height || 0;
-  const summaryHeight = summary ? (summary.offsetHeight || summary.getBoundingClientRect().height || 0) : 0;
-  const available = Math.floor(panelHeight - summaryHeight - 2);
-  if (available > 0) {
-    messages.style.height = `${Math.max(120, available)}px`;
-    messages.style.maxHeight = `${Math.max(120, available)}px`;
-  } else {
-    messages.style.height = '';
-    messages.style.maxHeight = '';
-  }
+  if (!messages) return;
+  // Flex layout now owns the thread height: #thread-panel[open] grows to fill the
+  // available real estate and #messages (flex child, overflow-y:auto) scrolls
+  // internally. Clear any legacy inline sizing so CSS stays authoritative.
+  messages.style.height = '';
+  messages.style.maxHeight = '';
 }
 
 function scrollThreadAfterViewportSync(conv, runningShouldStickToBottom, shouldScrollForUpdate) {
@@ -2185,7 +2250,8 @@ function scrollThreadForReview(conv) {
     return;
   }
 
-  const target = [...nodes].reverse().find((node) =>
+  const completion = host.querySelector('#review-completion');
+  const target = completion || [...nodes].reverse().find((node) =>
     node.classList.contains('employee') || node.classList.contains('system')
   ) || nodes[nodes.length - 1];
 
@@ -2193,7 +2259,7 @@ function scrollThreadForReview(conv) {
   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 reviewOffset = completion ? 8 : Math.max(24, host.clientHeight * 0.16);
   const desiredTop = Math.max(0, targetTopInsideHost - reviewOffset);
   host.scrollTo({ top: desiredTop, behavior: 'smooth' });
 }
@@ -2449,6 +2515,25 @@ function artifactLabel(artifact) {
   return artifact.label || artifact.name || artifact.path || artifact.url || 'artifact';
 }
 
+function artifactBasename(artifact) {
+  const raw = artifact && (artifact.path || artifact.url || artifact.name || '');
+  const cleaned = String(raw || '').split(/[?#]/)[0];
+  return cleaned.split(/[\\/]/).filter(Boolean).pop() || '';
+}
+
+function artifactDisplayLabel(artifact) {
+  const label = artifactLabel(artifact);
+  const base = artifactBasename(artifact);
+  if (!base || label === base || String(label).includes(base)) return label;
+  return `${label} (${base})`;
+}
+
+function reviewArtifactSummary(handoff) {
+  const artifacts = handoff && Array.isArray(handoff.artifacts) ? handoff.artifacts : [];
+  if (!artifacts.length) return '';
+  return artifacts.map(artifactDisplayLabel).join('; ');
+}
+
 function artifactLocalPath(artifact) {
   if (!artifact) return '';
   const raw = artifact.path
@@ -2500,7 +2585,7 @@ function deriveFormatFromReviewHandoff(handoff) {
   const actions = artifacts.length > 0
     ? artifacts.map((artifact, index) => ({
         id: `review-artifact-${index}`,
-        label: artifacts.length === 1 ? `Review ${artifact.label}` : artifact.label,
+        label: artifactDisplayLabel(artifact),
         primary: index === 0,
         kind: artifactActionKind(artifact),
         artifact,
@@ -2564,7 +2649,7 @@ function deriveDeliverableFormat(conv) {
       key: 'markdown',
       label: artifactName || artifactLabel(artifact),
       actions: [
-        { id: 'download-docx', label: 'Download as .docx', primary: true, kind: 'export', artifact },
+        { id: 'open-artifact', label: artifactDisplayLabel(artifact), primary: true, kind: 'doc', artifact },
         { id: 'inline-feedback', label: 'Type feedback inline', primary: false, kind: 'feedback', artifact },
       ],
     };
@@ -2585,7 +2670,7 @@ function deriveDeliverableFormat(conv) {
 // read-side already gives us and degrade gracefully when a field is unknown.
 function stripMarkdownForDisplay(text) {
   if (!text) return text;
-  return stripReviewHandoffBlocks(text)
+  return stripHubInjectedPromptBlocks(stripReviewHandoffBlocks(text))
     .replace(/\*\*(.+?)\*\*/g, '$1')
     .replace(/\*(.+?)\*/g, '$1')
     .replace(/^---+$/gm, '')
@@ -2614,8 +2699,10 @@ function buildReviewCardRows(conv, fmt) {
         : `Completed "${conv.title || conv.jobTitle || 'the assigned work'}".`;
     return [
       { k: 'What changed', v: whatChanged },
-      reliableLabel
-        ? { k: 'Files updated', v: `${fmt.label}` }
+      handoff && handoff.reviewTarget && handoff.reviewTarget.type === 'artifact_set'
+        ? { k: 'Files updated', v: reviewArtifactSummary(handoff) || `${fmt.label}` }
+        : reliableLabel
+          ? { k: 'Files updated', v: `${fmt.label}` }
         : { k: 'Where to look', v: 'Open the updated files in your project (the Brief section shows the project context & rules) to review.' },
       { k: 'What to do next', v: 'Approve, or type what to change in the Coach box below.' },
     ];
@@ -2623,15 +2710,27 @@ function buildReviewCardRows(conv, fmt) {
   const whatIDid = lastEmployee
     ? clampSummaryText(stripMarkdownForDisplay(lastEmployee), 220)
     : `Completed “${conv.title || conv.jobTitle || 'the assigned work'}”.`;
+  if (handoff && handoff.reviewTarget && handoff.reviewTarget.type === 'artifact_set') {
+    return [
+      { k: 'Files to review', v: reviewArtifactSummary(handoff) || `${fmt.label}` },
+      { k: 'What I need', v: 'Your review — approve, or tell me what to sharpen.' },
+    ];
+  }
   const rows = [{ k: 'What I did', v: whatIDid }];
-  if (reliableLabel) rows.push({ k: 'Deliverable', v: `${fmt.label}` });
+  if (reliableLabel) {
+    rows.push({ k: 'Deliverable', v: `${fmt.label}` });
+  }
   rows.push({ k: 'What I need', v: 'Your review — approve, or tell me what to sharpen.' });
   return rows;
 }
 
-// The completion card lives as the LAST child of #messages so the thread
-// panel's flex/scroll geometry is unchanged (it scrolls with the thread, like
-// any employee turn). Find-or-create keeps it idempotent across poll ticks.
+// The completion card is a decision surface, not chat history. Keep it outside
+// the collapsible thread so the exact deliverables remain visible even when the
+// manager minimizes the conversation transcript.
+// The "Ready for your review" card is the employee's review turn, so it lives as
+// the LAST child of #messages — inside the manager/employee thread. Keeping it in
+// the thread (rather than as a separate panel below it) means it scrolls with the
+// conversation and the thread does not need to collapse to surface it.
 function reviewCompletionHost() {
   const messages = els['messages'];
   if (!messages) return null;
@@ -2649,6 +2748,12 @@ function clearReviewCompletion() {
   const messages = els['messages'];
   const existing = messages && messages.querySelector('#review-completion');
   if (existing) existing.remove();
+  if (messages) {
+    messages.classList.remove('review-focused');
+    messages.querySelectorAll('.review-source-message').forEach((node) => {
+      node.classList.remove('review-source-message');
+    });
+  }
 }
 
 function renderReviewExperience(conv) {
@@ -2728,9 +2833,9 @@ function renderReviewExperience(conv) {
   }
 }
 
-// Comments follow the artifact (R7.7): a PR opens GitHub; markdown previews /
-// exports; report views inline. Nothing new is invented — these surface what the
-// read-side already knows and otherwise leave a status hint.
+// Comments follow the artifact (R7.7): a PR opens GitHub; local artifacts open
+// from disk; reports view inline. Nothing new is invented - these surface what
+// the read-side already knows and otherwise leave a status hint.
 async function handleArtifactAction(conv, action) {
   const artifact = action.artifact || ((conv && conv.artifacts && conv.artifacts[0]) || null);
   if (action.kind === 'github') {
@@ -2774,55 +2879,6 @@ async function handleArtifactAction(conv, action) {
     }
     return;
   }
-  if (action.kind === 'export') {
-    // Download the deliverable as .docx for Word annotation. Try the on-disk file
-    // first; if it doesn't actually exist (404 — e.g. the employee named a file it
-    // never created) or there is no path, fall back to exporting the employee's
-    // written deliverable text. Either way we download a real .docx, never a JSON
-    // error. Feedback comes back through the Coach box (no "Done reviewing").
-    const artifactPath = artifact && (artifact.path || artifact.where || artifact.url);
-    const hasLocalFile = artifactPath && !String(artifactPath).startsWith('http');
-    const baseName = ((artifact && artifact.name) || conversationTitle(conv) || 'deliverable');
-    const triggerDownload = (blob) => {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = String(baseName).replace(/\.[^.]+$/, '') + '.docx';
-      a.style.display = 'none';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    };
-    const isDocx = (resp) => (resp.headers.get('content-type') || '').includes('word');
-    try {
-      let blob = null;
-      if (hasLocalFile) {
-        const resp = await fetch('/api/ai-hub/artifact/export-docx?path=' + encodeURIComponent(artifactPath));
-        if (resp.ok && isDocx(resp)) blob = await resp.blob();
-        // else: file missing on disk → fall through to the inline export below.
-      }
-      if (!blob) {
-        const inline = (typeof latestEmployeeSurfaceText === 'function' && latestEmployeeSurfaceText(conv)) || '';
-        if (!inline.trim()) {
-          showStatus('Nothing to download yet — the employee has not produced a file or a written deliverable.', true);
-          return;
-        }
-        const resp = await fetch('/api/ai-hub/artifact/export-docx', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ content: inline, filename: baseName }),
-        });
-        if (!resp.ok) { const e = await resp.json().catch(() => ({})); throw new Error(e.error || 'Export failed.'); }
-        blob = await resp.blob();
-      }
-      triggerDownload(blob);
-      showStatus('Downloaded as .docx — mark it up in Word, then type your feedback in the Coach box below to send changes back.', false);
-    } catch (err) {
-      showStatus(err instanceof Error ? err.message : 'Could not export the deliverable.', true);
-    }
-    return;
-  }
   // Any other action: feedback goes through the Coach box.
   showStatus('Type your feedback in the Coach box below — it becomes a coaching message for the employee.', false);
 }
@@ -3837,6 +3893,9 @@ async function continueRun(text) {
   const coachingJobId = state.pendingCoachingJobId || undefined;
   clearPendingCoachingJob();
   conv.reviewApproved = false;
+  // #549 R6/AC6.1: Clear the stopped flag before starting the new run so
+  // stopped-state indicators are removed on the next render tick.
+  conv.stopped = false;
   conv.status = 'running';
   upsertConversation(conv);
   refreshStatusSurfaces(); // #533 R5: also recolor the tree/area dots back to working
@@ -4651,7 +4710,8 @@ function wireEvents() {
   // This is a belt-and-suspenders fallback in case the inline script was skipped.
 
   gatherElements();
-  loadConversationsFromStorage();
+  state.conversations = {};
+  state.activeId = null;
   wirePopovers();
   wireEvents();
 
@@ -4707,7 +4767,6 @@ function wireEvents() {
     if (convNeedsPolling(conv)) startPolling();
   } else {
     state.activeId = null;
-    persistConversations();
     renderActive();
   }
 })();