fraim-hub 2.0.333 → 2.0.337

package/public/ai-hub/script.js

@@ -140,12 +140,11 @@ function gatherElements() {
     // Issue #385: team roster
     'team-roster',
     'empty', 'active-conv', 'active-title', 'active-identity', 'run-state-pill', 'run-stop-btn',
-    'conversation-focus-btn', 'conversation-focus-overlay', 'conversation-focus-close', 'conversation-focus-title', 'conversation-focus-subtitle', 'conversation-focus-panels',
     'messages',
     'coach-text', 'send', 'micro-manage', 'micro-log', 'resume-command', 'resume-command-code', 'resume-command-copy',
-    'status-line', 'coach-note',
+    'coach-note',
     // Issue #1651: composer attachments.
-    'coach', 'composer-dropzone', 'staged-attachments', 'attach-btn', 'attach-file-input',
+    'coach', 'composer-dropzone', 'staged-attachments', 'attach-btn', 'attach-file-input', 'voice-input-btn', 'voice-input-status',
     'thread-panel', 'thread-panel-kicker', 'micro-manage-toggle', 'micro-return', 'micro-activity-state',
     'quick-coach-btns',
     'positive-reinforcement-btn', 'positive-reinforcement-dropdown',
@@ -171,8 +170,6 @@ function gatherElements() {
     'word-context-bar', 'word-ctx-text', 'word-ctx-refresh',
     // Issue #512 S6: review experience (R7) + learnings (R9) + reverse mentoring (R10).
     'review-actions', 'review-approve', 'review-request-changes', 'review-handoff',
-    // Issue #770: Deliverables panel (single-run artifact home).
-    'deliverables-panel', 'deliverables-summary', 'deliverables-body',
     // Issue #540: persona grid, manager team pool, hire strip, hire checkout modal.
     'persona-grid', 'manager-team-pool',
     'hire-strip', 'hs-avatar', 'hs-title', 'hs-sub', 'hs-add-btn', 'hs-get-btn', 'hs-skip-btn',
@@ -335,6 +332,7 @@ function mergePersonaProjection(incoming, previous) {
 function applyBootstrap(bootstrap, docUrl) {
   bootstrap = mergePersonaProjection(bootstrap, state.bootstrap);
   state.bootstrap = bootstrap;
+  syncVoiceInput();
   state.projectPath = bootstrap.project.path;
   // Issue #1044: seed client-side tombstone set from server preferences so
   // tfEnsureCurrentProject does not re-inject a path the user just deleted.
@@ -366,8 +364,7 @@ function applyBootstrap(bootstrap, docUrl) {
   }
   // Render header project name + status line.
   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);
+  if (!bootstrap.project.exists || !bootstrap.project.hasFraim) showStatus(bootstrap.project.message, true);
   // Update the compact project label shown in task-pane surface rail.
   const tpLabel = document.getElementById('tp-project-label');
   if (tpLabel) {
@@ -2168,6 +2165,64 @@ function syncQuickCoachButtons(conv) {
   }
 }
 
+let voiceInputBusy = false;
+
+function syncVoiceInput() {
+  const button = els['voice-input-btn'];
+  if (!button) return;
+  const capability = state.bootstrap && state.bootstrap.voiceInput;
+  const unsupported = !capability || capability.mode === 'unsupported';
+  button.disabled = voiceInputBusy || unsupported || !!els['coach-text'].disabled;
+  button.setAttribute('aria-busy', String(voiceInputBusy));
+  const label = unsupported
+    ? (capability && capability.guidance) || 'Voice input is unavailable. Reload the Hub to check again.'
+    : capability.mode === 'manual' ? capability.guidance : 'Start voice input using system dictation';
+  button.title = label;
+  button.setAttribute('aria-label', label);
+}
+
+function showVoiceInputStatus(message, failed = false) {
+  const status = els['voice-input-status'];
+  status.textContent = message;
+  status.hidden = false;
+  status.classList.toggle('voice-input-status--error', failed);
+  // Narrow layouts scroll the whole pane. Keep both recovery text and actions
+  // visible when a new notice increases the composer's height, without refocusing.
+  status.closest('.coach-input').scrollIntoView({ block: 'nearest', inline: 'nearest' });
+}
+
+async function startVoiceInput() {
+  const capability = state.bootstrap && state.bootstrap.voiceInput;
+  const textarea = els['coach-text'];
+  if (voiceInputBusy || !capability || capability.mode === 'unsupported' || textarea.disabled) return;
+  const { selectionStart, selectionEnd, selectionDirection } = textarea;
+  textarea.focus({ preventScroll: true });
+  textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+  if (capability.mode === 'manual') {
+    showVoiceInputStatus(capability.guidance);
+    return;
+  }
+  voiceInputBusy = true;
+  syncVoiceInput();
+  showVoiceInputStatus('Requesting system dictation...');
+  try {
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    // Do not launch an OS input action if the manager moved to another control.
+    if (document.activeElement !== textarea) {
+      showVoiceInputStatus('Voice input canceled because the composer lost focus. Try again.');
+      return;
+    }
+    const result = await requestJson('/api/ai-hub/voice-input/start', { method: 'POST' }, 7000);
+    showVoiceInputStatus(result.message);
+  } catch (error) {
+    const message = error.message || 'Could not request system dictation.';
+    showVoiceInputStatus(message.includes(capability.guidance) ? message : `${message} ${capability.guidance}`, true);
+  } finally {
+    voiceInputBusy = false;
+    syncVoiceInput();
+  }
+}
+
 function composerIsArmed() {
   return !!(
     (els['coach-text'] && els['coach-text'].value.trim().length > 0) ||
@@ -2181,6 +2236,8 @@ function syncComposerPlaceholder(conv = activeConversation()) {
   if (!textarea || textarea.disabled) return;
   if (state.cpSelectedJob) {
     textarea.placeholder = textarea.dataset.placeholderArmed || 'Now type what you want done...';
+  } else if (convAwaitingReview(conv)) {
+    textarea.placeholder = textarea.dataset.placeholderReview;
   } else if (conv) {
     textarea.placeholder = textarea.dataset.placeholderActive || 'Coach this run, or type new instructions...';
   } else {
@@ -2323,7 +2380,7 @@ function manageViewFor(conv) {
 }
 function captureManagePosition() {
   const view = manageViews.get(displayedManageKey);
-  if (!view || !els['thread-panel'].open) return;
+  if (!view) return;
   const node = view.micro ? els['micro-log'] : els['messages'];
   if (!node || !node.clientHeight) return;
   view[view.micro ? 'activity' : 'messages'] = {
@@ -2351,7 +2408,6 @@ function setManageMicroMode(enabled) {
   if (!conv || conv.compareMode === 'ab') return;
   captureManagePosition();
   manageViewFor(conv).micro = enabled;
-  els['thread-panel'].open = true;
   applyManageView(conv);
   syncMicroArchive(conv);
   restoreManagePosition(conv);
@@ -2372,15 +2428,6 @@ function syncManageActivityState(conv, events) {
   els['micro-return'].hidden = !(error || conversationUiState(conv) === 'waiting' || convAwaitingReview(conv));
 }
 
-function syncConversationPanels(conv, switchedConv) {
-  if (!conv) return;
-  const panelState = panelStateFor(conv.id);
-  if (switchedConv) {
-    if (els['thread-panel']) {
-      els['thread-panel'].open = panelState.thread ?? true;
-    }
-  }
-}
 
 function upsertConversation(conv, options) {
   // Issue #708: route to the conversation's scope bucket (manager/company → sentinel
@@ -2402,6 +2449,24 @@ function newConversationId() {
 // #533 R6: remove a run from the Hub. This is a Hub-local projection delete — it
 // drops the conversation from state + localStorage and clears any pointer to it.
 // It never touches artifacts the employee wrote to disk (the confirm copy says so).
+function clearDeletedConversationReferences(id) {
+  if (!id) return;
+  if (activeConversationId === id || state.activeId === id || deletedConversationIds.has(activeConversationId)) {
+    activeConversationId = null;
+    state.activeId = null;
+  }
+  if (state.areaActiveId) {
+    for (const area of Object.keys(state.areaActiveId)) {
+      if (state.areaActiveId[area] === id) state.areaActiveId[area] = null;
+    }
+  }
+  if (typeof tf === 'object' && tf && tf.areaSelection) {
+    for (const area of Object.keys(tf.areaSelection)) {
+      if (tf.areaSelection[area] === id) tf.areaSelection[area] = null;
+    }
+  }
+}
+
 async function deleteConversation(id) {
   if (!id) return false;
   const target = findConversation(id);
@@ -2410,9 +2475,8 @@ async function deleteConversation(id) {
   // Tombstone before the async delete so any in-flight header/body hydrate that
   // resolves during the server round trip cannot reselect or reinsert this run.
   deletedConversationIds.add(id);
-  if (activeConversationId === id || state.activeId === id) {
-    activeConversationId = null;
-    state.activeId = null;
+  clearDeletedConversationReferences(id);
+  if (!state.activeId) {
     if (state.pollHandle) { window.clearInterval(state.pollHandle); state.pollHandle = null; }
   }
   try {
@@ -2431,12 +2495,10 @@ async function deleteConversation(id) {
     if (next.length !== list.length) { state.conversations[key] = next; removed = true; }
   }
   const clearDeletedActive = () => {
-    if (!(activeConversationId === id || state.activeId === id || deletedConversationIds.has(activeConversationId) || deletedConversationIds.has(state.activeId))) return;
-    activeConversationId = null;
-    state.activeId = null;
+    clearDeletedConversationReferences(id);
     // Deleting the active run: stop its poll so no zombie interval keeps ticking
     // against a conversation that no longer exists.
-    if (state.pollHandle) { window.clearInterval(state.pollHandle); state.pollHandle = null; }
+    if (!state.activeId && state.pollHandle) { window.clearInterval(state.pollHandle); state.pollHandle = null; }
   };
   clearDeletedActive();
   if (!removed) return false;
@@ -2685,8 +2747,7 @@ function showCustomEmployeeDeleteConfirm(group, detailsEl) {
 // ---------------------------------------------------------------------------
 
 // Build a run-item button for any area rail.
-// Shared by renderRail() (Projects), tfRenderAreaEmployeeRail() (Manager/Company),
-// and tfRenderAreaPersonaGroup(). Extracted from renderRail's inner buildRunButton.
+// Used by the shared employee builder for Projects, Manager, and Company.
 function buildAreaRunButton(conv, options) {
   options = options || {};
   const btn = document.createElement('button');
@@ -2750,7 +2811,7 @@ function buildAreaRunButton(conv, options) {
 }
 
 // Build a <div class="conv-employee-list"> with run buttons and optional delegation children.
-// childrenByManager: Map<id, conv[]> — pass new Map() for Manager/Company (no delegation yet).
+// childrenByManager: Map<id, conv[]> — scoped by the caller before nesting.
 function buildAreaGroupList(conversations, opts, childrenByManager) {
   childrenByManager = childrenByManager || new Map();
   opts = opts || {};
@@ -2842,19 +2903,21 @@ function appendEmployeeGroupWithActions(container, details) {
 
 function renderRail() {
   renderTeamRoster();
-  const activeRailProjectKey = (typeof tf !== 'undefined' && tf && tf.activeProjectId)
-    || state.projectPath
-    || 'current';
+  renderScopeEmployees(els['conv-list'], 'projects');
+}
+
+// All scopes share grouping, employee actions, nested workstreams and poll state.
+function renderScopeEmployees(host, area) {
+  if (!host) return;
+  const isProject = area === 'projects';
+  const activeRailProjectKey = isProject ? (tf.activeProjectId || state.projectPath || 'current') : area;
   const employeeGroupOpenState = new Map();
-  els['conv-list'].querySelectorAll('details.conv-employee-group[data-employee-key]').forEach((details) => {
+  host.querySelectorAll('details.conv-employee-group[data-employee-key]').forEach((details) => {
     const key = details.dataset ? details.dataset.employeeKey : '';
     const projectKey = details.dataset ? (details.dataset.projectKey || activeRailProjectKey) : activeRailProjectKey;
-    // Only preserve the toggle state of groups that actually have runs. A hired persona
-    // renders as a zero-run group BEFORE conversations hydrate; capturing that transient
-    // collapsed state would wrongly keep the group collapsed after it gains runs. No-run
-    // groups always follow the default (collapsed); with-run groups default open (#726 UX).
-    const hasRuns = !!details.querySelector('.conv-item');
-    if (key && hasRuns) employeeGroupOpenState.set(projectKey + ':' + key, details.open);
+    // History groups default closed whether hydrated or empty. Preserve every
+    // existing group, including an explicitly collapsed empty In Progress group.
+    if (key) employeeGroupOpenState.set(projectKey + ':' + key, details.open);
   });
   const employeeGroupStateKey = (key) => activeRailProjectKey + ':' + key;
   // Preserve the user's open/closed toggle across re-renders; otherwise fall back to
@@ -2865,13 +2928,15 @@ function renderRail() {
       ? employeeGroupOpenState.get(employeeGroupStateKey(key))
       : defaultOpen
   );
-  els['conv-list'].innerHTML = '';
+  host.innerHTML = '';
   // R4: filter by selected persona when one is active.
   // #693 R1: the "Project Updates" section was retired; project-lifecycle runs
   // (project-onboarding + sleep-on-learnings) now surface in the Runs list under
   // their employee like any other run, so their history stays reachable.
-  const allProjectConversations = projectConversations();
-  const managedChildren = allProjectConversations.filter(isManagedDelegationChild);
+  const scopedConversations = isProject
+    ? projectConversations().filter((conv) => convScope(conv) === 'project')
+    : tfAreaScopedConversations(area);
+  const managedChildren = scopedConversations.filter(isManagedDelegationChild);
   const childrenByManager = new Map();
   const childIdentity = (child) => child && (child.id || child.runId);
   const addChildForManager = (managerId, child) => {
@@ -2894,7 +2959,7 @@ function renderRail() {
     if (task.jobId && child.jobId && task.jobId !== child.jobId) return false;
     return true;
   };
-  for (const manager of allProjectConversations) {
+  for (const manager of scopedConversations) {
     const ledger = normalizeDelegationLedger(manager.delegation);
     if (!ledger) continue;
     for (const task of ledger.tasks || []) {
@@ -2905,12 +2970,12 @@ function renderRail() {
       }
     }
   }
-  const list = allProjectConversations.filter((conv) =>
-    (!state.selectedPersonaKey || conv.personaKey === state.selectedPersonaKey) &&
+  const list = scopedConversations.filter((conv) =>
+    (!isProject || !state.selectedPersonaKey || conv.personaKey === state.selectedPersonaKey) &&
     !isManagedDelegationChild(conv) &&
     // #702/#708/#1408: manager/company-scoped runs surface on those tabs, not in a
     // project, decided by scope alone — no job id is ever excluded from Projects.
-    convScope(conv) === 'project'
+    convScope(conv) === (isProject ? 'project' : area)
   );
 
   // Issue #851 Option A: In Progress section (top) + per-employee accordion tree.
@@ -2972,13 +3037,15 @@ function renderRail() {
     ...managerTeamKeys,
   ]);
   // Apply persona filter.
-  const filteredEmployeeKeys = state.selectedPersonaKey
-    ? new Set([state.selectedPersonaKey].filter((k) => projectEmployeeKeys.has(k)))
-    : projectEmployeeKeys;
+  const areaPersonas = isProject ? [] : tfAreaRailPersonas(area);
+  const areaPersonaOrder = new Map(areaPersonas.map((persona, index) => [persona.key, index]));
+  const filteredEmployeeKeys = isProject
+    ? (state.selectedPersonaKey ? new Set([state.selectedPersonaKey].filter((k) => projectEmployeeKeys.has(k))) : projectEmployeeKeys)
+    : new Set(areaPersonaOrder.keys());
 
   for (const key of filteredEmployeeKeys) {
     if (doneGroups.has(key)) continue;
-    const p = typeof tfPersonaByKey === 'function' ? tfPersonaByKey(key) : null;
+    const p = getConversationPersona({ personaKey: key });
     doneGroups.set(key, {
       key,
       label: p ? p.displayName : key,
@@ -2990,7 +3057,7 @@ function renderRail() {
 
   // Compute latest kickoff timestamp per employee for employee tree sorting.
   const employeeLatest = new Map();
-  for (const conv of allProjectConversations) {
+  for (const conv of scopedConversations) {
     if (!conv) continue;
     const key = conv.personaKey || conversationAgentName(conv);
     if (!key) continue;
@@ -3001,6 +3068,7 @@ function renderRail() {
   // Sort employee groups: employees with completed runs first (latest kickoff),
   // then no-run employees last (stable by key).
   const sortedDoneGroups = [...doneGroups.values()].sort((a, b) => {
+    if (!isProject) return (areaPersonaOrder.get(a.key) ?? Infinity) - (areaPersonaOrder.get(b.key) ?? Infinity);
     const aLatest = employeeLatest.get(a.key) || 0;
     const bLatest = employeeLatest.get(b.key) || 0;
     const aHas = aLatest > 0 ? 1 : 0;
@@ -3025,7 +3093,7 @@ function renderRail() {
     emptyWrap.appendChild(em);
     inProgressSec.appendChild(emptyWrap);
   }
-  els['conv-list'].appendChild(inProgressSec);
+  host.appendChild(inProgressSec);
 
   // ----- SECTION 2: Per-employee accordion tree -----
   // Each employee gets their own accordion showing their COMPLETED runs underneath,
@@ -3073,11 +3141,11 @@ function renderRail() {
         // personaKey is passed separately so renderCpRows can look up the jobIds correctly.
         if (group.key.startsWith('custom:')) {
           const displaySlug = group.label ? group.label.toLowerCase().replace(/\s+/g, '-') : group.key.replace('custom:', '');
-          focusComposerForDelegate({ prefixSearch: '/' + displaySlug, personaKey: group.key });
+          focusComposerForDelegate({ prefixSearch: '/' + displaySlug, personaKey: group.key, actionContext: managementActionContext(area) });
           return;
         }
         const personaKey = group.sample && group.sample.personaKey ? group.key : null;
-        focusComposerForDelegate(personaKey ? { employeeId: state.bootstrap && state.bootstrap.preferences ? state.bootstrap.preferences.employeeId : 'claude', prefixSearch: '/' + personaKey } : {});
+        focusComposerForDelegate(personaKey ? { employeeId: state.bootstrap && state.bootstrap.preferences ? state.bootstrap.preferences.employeeId : 'claude', prefixSearch: '/' + personaKey, actionContext: managementActionContext(area) } : { actionContext: managementActionContext(area) });
       });
     }
     let manageBtn = null;
@@ -3135,7 +3203,7 @@ function renderRail() {
       emptyWrap.appendChild(em);
       details.appendChild(emptyWrap);
     }
-    appendEmployeeGroupWithActions(els['conv-list'], details);
+    appendEmployeeGroupWithActions(host, details);
   }
 
   // No FRAIM employee group: completed runs with no owning persona.
@@ -3162,29 +3230,29 @@ function renderRail() {
     wcSummary.appendChild(wcCount);
     wcDetails.appendChild(wcSummary);
     wcDetails.appendChild(buildAreaGroupList(noFraimEmployeeConvs, {}, childrenByManager));
-    els['conv-list'].appendChild(wcDetails);
+    host.appendChild(wcDetails);
   }
 
   // #769: hire-pending polling indicator
-  if (typeof tf !== 'undefined' && tf && tf.hirePendingState === 'polling') {
+  if (isProject && typeof tf !== 'undefined' && tf && tf.hirePendingState === 'polling') {
     const pendingRow = document.createElement('div');
     pendingRow.className = 'hire-pending-row';
     pendingRow.id = 'hire-pending-row';
     pendingRow.innerHTML = '<div class="hire-pending-spinner"></div><span class="hire-pending-text">Checking your new hire…</span>';
-    els['conv-list'].appendChild(pendingRow);
-  } else if (typeof tf !== 'undefined' && tf && tf.hirePendingState === 'timeout') {
+    host.appendChild(pendingRow);
+  } else if (isProject && typeof tf !== 'undefined' && tf && tf.hirePendingState === 'timeout') {
     const timeoutRow = document.createElement('div');
     timeoutRow.className = 'hire-timeout-row';
     timeoutRow.id = 'hire-timeout-row';
     timeoutRow.innerHTML = '<span class="hire-timeout-icon">⚠</span><span class="hire-timeout-text">Taking longer than expected. </span><a href="javascript:window.location.reload()">Reload to check</a>';
-    els['conv-list'].appendChild(timeoutRow);
+    host.appendChild(timeoutRow);
   }
 
   // #851 Option A: tree always has content (at minimum In Progress + employee tree).
-  const runsSection = els['conv-list'].closest('.rail-section--runs');
+  const runsSection = host.closest('.rail-section--runs');
   if (runsSection) runsSection.hidden = false;
   // #824: re-attach an open run-delete confirm that this rebuild would otherwise drop.
-  tfReopenPendingRunDelete(els['conv-list']);
+  tfReopenPendingRunDelete(host);
 }
 
 function statusLabel(s) {
@@ -3723,9 +3791,9 @@ function showHireStrip(job, conversationId, instructions, employeeId) {
   state._hireStripPending = { job, conversationId, instructions, employeeId };
   els['hire-strip'].hidden = false;
   // Switch workspace to conv mode so the hire strip (inside .page) is visible
-  // even when there is no active conversation (which normally keeps it in mode-brief).
+  // even when the manager was reading Project Info.
   const wc = document.querySelector('#proj-workspace .workspace-conv');
-  if (wc) { wc.classList.add('mode-conv'); wc.classList.remove('mode-brief'); }
+  if (wc) tfToggleAreaView('projects', 'delegate');
 }
 
 function hideHireStrip() {
@@ -3856,37 +3924,13 @@ function syncMicroArchive(conv) {
   els['micro-log'].onscroll = captureManagePosition;
   microArchiveTimer = setInterval(() => { if (microArchiveIsVisible(conv)) void loadMicroArchive(conv); }, 2000);
 }
-const conversationFocusState = {
-  open: false,
-  previousFocus: null,
-  threadParent: null,
-  threadNext: null,
-  // Issue #1657 Treatment 3: the composer is permanently docked; "expand
-  // conversation" moves it into the overlay alongside the thread so the
-  // manager can still type while expanded.
-  composerParent: null,
-  composerNext: null,
-  messageScrollTop: 0,
-};
 // #521 UI rework: the project workspace shows EITHER a job conversation (full
 // height) OR the Brief & Learnings page — never both stacked, so the thread,
 // coach, and micro-manage all have room. Toggle the mode class the CSS keys off,
 // and reflect the state in the sidebar's Brief nav entry.
 function tfApplyWorkspaceMode() {
-  const wc = document.querySelector('#proj-workspace .workspace-conv');
-  if (!wc) return;
-  const hasConv = typeof activeConversation === 'function' && !!activeConversation();
-  // Issue #1657 Treatment 3: "no active conversation" no longer implies "show
-  // the Brief page" by itself - the persistent composer's idle state (#empty)
-  // must stay visible then too (R1: present at all times). state.showProjectInfo
-  // is the explicit signal only the "Project Info" nav entry sets; any real
-  // active conversation still wins over it, so the many state.activeId call
-  // sites elsewhere don't each need to clear this flag themselves.
-  const showBrief = !!state.showProjectInfo && !hasConv;
-  wc.classList.toggle('mode-conv', !showBrief);
-  wc.classList.toggle('mode-brief', showBrief);
-  const briefNav = document.getElementById('tree-brief-nav');
-  if (briefNav) briefNav.classList.toggle('active', showBrief);
+  if (typeof tf === 'undefined') return;
+  tfApplyAreaView('projects', tfResolveAreaView('projects', activeConversation()));
 }
 
 function formatMicroAuditKind(event) {
@@ -3908,110 +3952,12 @@ function formatMicroLogLine(event, mode = 'events') {
   return `[${channel}] ${event && event.text != null ? String(event.text) : ''}\n`;
 }
 
-function syncConversationFocusTitle(conv) {
-  if (!els['conversation-focus-title']) return;
-  els['conversation-focus-title'].textContent = conv ? conversationTitle(conv) : 'Focused conversation';
-  if (els['conversation-focus-subtitle']) {
-    els['conversation-focus-subtitle'].textContent = 'Conversation thread and coaching';
-  }
-}
-
-function restoreFocusedConversationNodes() {
-  const thread = els['thread-panel'].closest('.manage-panel-shell') || els['thread-panel'];
-  const composer = document.getElementById('persistent-composer');
-  if (thread && conversationFocusState.threadParent) {
-    const next = conversationFocusState.threadNext;
-    if (next && next.parentNode === conversationFocusState.threadParent) {
-      conversationFocusState.threadParent.insertBefore(thread, next);
-    } else {
-      conversationFocusState.threadParent.appendChild(thread);
-    }
-  }
-  if (composer && conversationFocusState.composerParent) {
-    const next = conversationFocusState.composerNext;
-    if (next && next.parentNode === conversationFocusState.composerParent) {
-      conversationFocusState.composerParent.insertBefore(composer, next);
-    } else {
-      conversationFocusState.composerParent.appendChild(composer);
-    }
-  }
-}
-
-function closeConversationFocus() {
-  if (!conversationFocusState.open) return;
-  captureManagePosition();
-  if (els['messages']) conversationFocusState.messageScrollTop = els['messages'].scrollTop;
-  restoreFocusedConversationNodes();
-  conversationFocusState.open = false;
-  document.body.classList.remove('conversation-focus-open');
-  if (els['conversation-focus-overlay']) {
-    els['conversation-focus-overlay'].hidden = true;
-    els['conversation-focus-overlay'].classList.remove('open');
-  }
-  requestAnimationFrame(() => {
-    if (els['messages']) els['messages'].scrollTop = conversationFocusState.messageScrollTop || 0;
-    if (typeof syncThreadMessageViewport === 'function') syncThreadMessageViewport();
-    const conv = activeConversation();
-    if (conv) restoreManagePosition(conv);
-    const target = conversationFocusState.previousFocus && document.contains(conversationFocusState.previousFocus)
-      ? conversationFocusState.previousFocus
-      : els['conversation-focus-btn'];
-    if (target && typeof target.focus === 'function') target.focus();
-  });
-}
-
-function openConversationFocus() {
-  const conv = activeConversation();
-  captureManagePosition();
-  const overlay = els['conversation-focus-overlay'];
-  const panels = els['conversation-focus-panels'];
-  const thread = els['thread-panel'].closest('.manage-panel-shell') || els['thread-panel'];
-  const composer = document.getElementById('persistent-composer');
-  if (!conv || !overlay || !panels || !thread) return;
-  if (conversationFocusState.open) return;
-
-  conversationFocusState.open = true;
-  conversationFocusState.previousFocus = document.activeElement;
-  conversationFocusState.threadParent = thread.parentNode;
-  conversationFocusState.threadNext = thread.nextSibling;
-  if (composer) {
-    conversationFocusState.composerParent = composer.parentNode;
-    conversationFocusState.composerNext = composer.nextSibling;
-  }
-  conversationFocusState.messageScrollTop = els['messages'] ? els['messages'].scrollTop : 0;
-
-  syncConversationFocusTitle(conv);
-  panels.appendChild(thread);
-  if (composer) panels.appendChild(composer);
-  overlay.hidden = false;
-  overlay.classList.add('open');
-  document.body.classList.add('conversation-focus-open');
-
-  requestAnimationFrame(() => {
-    if (els['messages']) els['messages'].scrollTop = conversationFocusState.messageScrollTop || 0;
-    if (typeof syncThreadMessageViewport === 'function') syncThreadMessageViewport();
-    restoreManagePosition(conv);
-    if (els['conversation-focus-close']) els['conversation-focus-close'].focus();
-  });
-}
-
-function handleConversationFocusEscape(e) {
-  if (e.key !== 'Escape' || !conversationFocusState.open || e.defaultPrevented) return;
-  const openCoachMenu = COACH_DROPDOWN_PAIRS
-    .some(([id]) => { const menu = els[id] || document.getElementById(id); return menu && !menu.hidden; });
-  const reviewMenu = document.getElementById('review-approve-menu');
-  if (openCoachMenu || (reviewMenu && !reviewMenu.hidden)) return;
-  e.preventDefault();
-  closeConversationFocus();
-}
-
 function renderActive() {
   const conv = activeConversation();
   if (typeof syncTaskPaneSurfaceMode === 'function') syncTaskPaneSurfaceMode();
   if (typeof tfApplyWorkspaceMode === 'function') tfApplyWorkspaceMode();
   if (!conv) {
     syncMicroArchive(null);
-    closeConversationFocus();
     els['empty'].hidden = false;
     els['active-conv'].hidden = true;
     renderHubAgentSetupPanel();
@@ -4024,7 +3970,6 @@ function renderActive() {
     syncComposerPlaceholder(null);
     syncComposerStopButton(null);
     // #770: hide the Deliverables panel when there is no active conversation.
-    if (els['deliverables-panel']) { els['deliverables-panel'].hidden = true; els['deliverables-body'].innerHTML = ''; }
     syncThreadUiState(null);
     renderedConvId = null;
     renderedMessageCount = 0;
@@ -4050,7 +3995,6 @@ function renderActive() {
   syncConvictionDropdownLabel();
   syncCoachNote(conv);
   syncComposerPlaceholder(conv);
-  if (conversationFocusState.open) syncConversationFocusTitle(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.
@@ -4094,7 +4038,6 @@ function renderActive() {
   }
   const statusChanged = renderedStatus !== conv.status;
   syncThreadUiState(conv);
-  syncConversationPanels(conv, switchedConv);
   syncQuickCoachButtons(conv);
   // Issue #1723: renderActive() runs on every poll cycle for the active
   // conversation but previously never re-synced the Stop button here, so a
@@ -4245,13 +4188,14 @@ function renderActive() {
   renderReviewExperience(conv);
   // Issue #848 — "What's next?" chips below a completed conversation (post-retro).
   renderNextJobRecommendations(conv);
+  renderDeliverablesBar(conv);
   syncManagedDelegationAccess(conv);
   syncThreadMessageViewport();
   // Issue #1065: the thread is rebuilt from state on a poll cadence, which would wipe the find
   // marks a manager is stepping through. Re-emit them from find state instead of injecting once.
   if (typeof convFindRefresh === 'function') convFindRefresh();
   const shouldScrollForUpdate = switchedConv || statusChanged || appendedMessages > 0 || messagesMutated;
-  const reviewFollow = (switchedConv || statusChanged || threadWasNearBottom) && (!switchedConv || manageViewFor(conv).messages.follow);
+  const reviewFollow = (switchedConv || threadWasNearBottom) && (!switchedConv || manageViewFor(conv).messages.follow);
   scrollThreadAfterViewportSync(conv, shouldScrollForUpdate, hasNewPendingDeliveryMessage, reviewFollow, clearedPendingDeliveryMessages);
   requestAnimationFrame(() => {
     syncThreadMessageViewport();
@@ -4273,7 +4217,7 @@ function renderActive() {
   renderTracker(conv);
   renderTotals(conv);
   renderManagerOversightBoard(conv);
-  renderDeliverablesPanel(conv);   // #770
+
   renderDelegationLedger(conv);
   syncConversationRefreshPolling();
   syncTemplatePickerVisibility();
@@ -4422,6 +4366,25 @@ function renderRunStatePill(conv) {
   // conversationStateLabel returns 'Stopped' for that state; toUpperCase() => 'STOPPED'.
   pill.textContent = conversationStateLabel(conv).toUpperCase();
   pill.className = `run-state-pill ${conversationUiState(conv)}`;
+  const pending = convAwaitingReview(conv);
+  pill.tabIndex = pending ? 0 : -1;
+  if (pending) {
+    pill.setAttribute('role', 'button');
+    pill.setAttribute('aria-label', 'Waiting on you. Go to the pending decision.');
+  } else {
+    pill.removeAttribute('role');
+    pill.removeAttribute('aria-label');
+  }
+  const jump = () => {
+    const current = activeConversation();
+    if (!convAwaitingReview(current)) return;
+    setManageMicroMode(false);
+    els['thread-panel'].scrollIntoView({ block: 'nearest' });
+    scrollThreadForReview(current);
+    els['review-approve'].focus({ preventScroll: true });
+  };
+  pill.onclick = pending ? jump : null;
+  pill.onkeydown = pending ? (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); jump(); } } : null;
   syncComposerStopButton(conv);
 }
 
@@ -5811,7 +5774,7 @@ function ensureThreadMessageViewportObserver() {
 function syncThreadMessageViewport() {
   const messages = els['messages'];
   if (!messages) return;
-  // Flex layout now owns the thread height: #thread-panel[open] grows to fill the
+  // Flex layout now owns the thread height: #thread-panel 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 = '';
@@ -5899,8 +5862,8 @@ function scrollThreadAfterViewportSync(conv, shouldScrollForUpdate, forceBottom,
   if (!latest || latest.id !== conv.id) return;
   const host = els['messages'];
   if (!host || host.hidden) return;
+  ensurePendingAnchorScrollListener(host);
   if (latest.status === 'running') {
-    ensurePendingAnchorScrollListener(host);
     if (!forceBottom && pendingAnchorUserScrolled(host)) {
       return;
     }
@@ -5970,7 +5933,7 @@ function scrollThreadAfterViewportSync(conv, shouldScrollForUpdate, forceBottom,
       }
     }
     return;
-  } else if (shouldScrollForUpdate && reviewFollow) {
+  } else if (shouldScrollForUpdate && reviewFollow && !pendingAnchorUserScrolled(host)) {
     // Issue #1665: jump to the review target only on a real transition (switch or
     // status change) or when the manager was already following the latest message.
     // A live update landing while they read history must not yank the view.
@@ -5997,13 +5960,16 @@ 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 bar = host.querySelector('#deliverables-bar:not([hidden])');
+  const reservedHeight = bar ? bar.getBoundingClientRect().height : 0;
+  const availableLead = Math.max(0, host.clientHeight - reservedHeight - targetRect.height - 24);
+  const reviewOffset = Math.min(Math.max(24, host.clientHeight * 0.16), availableLead);
   const desiredTop = Math.max(0, targetTopInsideHost - reviewOffset);
   // #936: use instant scroll so the animation completes synchronously. A smooth
   // scroll takes ~300-500ms; if the user sets scrollTop before the animation
   // finishes the CSS scroll-behavior causes the browser to re-animate, making
   // the user's intent hard to honor. Instant + one-time gate = clean hand-off.
-  host.scrollTop = desiredTop;
+  host.scrollTo({ top: desiredTop, behavior: 'instant' });
 }
 
 // ---------------------------------------------------------------------------
@@ -6268,6 +6234,8 @@ function resizeComposerTextarea() {
 }
 
 function syncSendButton() {
+  syncVoiceInput();
+  syncReviewHint();
   resizeComposerTextarea();
   const conv = activeConversation();
   const hasText = els['coach-text'].value.trim().length > 0;
@@ -6379,6 +6347,7 @@ function syncManagedDelegationAccess(conv = activeConversation()) {
     }
   }
   if (managed) closeAllCoachDropdowns();
+  syncVoiceInput();
   syncComposerPlaceholder(conv);
   syncComposerStopButton(conv);
 }
@@ -6981,37 +6950,95 @@ function deriveDeliverableFormat(conv) {
   };
 }
 
+// Review history belongs to the conversation record. It never grants approval:
+// the live run state remains the only source of action eligibility.
+function syncReviewTurns(conv) {
+  if (!conv) return [];
+  const turns = Array.isArray(conv.reviewTurns) ? conv.reviewTurns : [];
+  if (!conversationHasBody(conv)) return turns;
+  const awaiting = convAwaitingReview(conv);
+  const signature = JSON.stringify(reviewHandoffForConversation(conv));
+  let pending = turns.find((turn) => !turn.resolution);
+  let changed = false;
+  if (pending && (!awaiting || pending.signature !== signature)) {
+    pending.resolution = conv.pauseReason === 'done' ? 'You marked this complete.'
+      : conv.reviewApproved ? 'You approved this.'
+      : awaiting ? 'A newer review replaced this decision.' : 'The run continued without a decision.';
+    pending.resolvedAt = Date.now();
+    pending = null;
+    changed = true;
+  }
+  if (awaiting && !pending) {
+    const last = (conv.messages || []).at(-1);
+    turns.push({ id: String(Date.now()) + '-' + turns.length, signature,
+      messageCount: (conv.messages || []).length, at: last ? messageTimestamp(last) : Date.now() });
+    changed = true;
+  }
+  if (changed) {
+    conv.reviewTurns = turns;
+    persistConversation(conv);
+  }
+  return turns;
+}
+
+function resolveReviewTurn(conv, resolution) {
+  const turn = (conv.reviewTurns || syncReviewTurns(conv)).find((entry) => !entry.resolution);
+  if (!turn) return;
+  turn.resolution = resolution;
+  turn.resolvedAt = Date.now();
+}
+
+function syncReviewHint(conv = activeConversation()) {
+  const hint = els['review-handoff'];
+  if (!hint || !convAwaitingReview(conv)) return;
+  hint.textContent = els['coach-text'].value.trim()
+    ? 'Request changes will send what you typed. Send replies without deciding.'
+    : 'Review the update and deliverables, then approve or type changes below. Send replies without deciding.';
+}
+
 function renderReviewExperience(conv) {
   const actions = els['review-actions'];
-  if (!actions) return;
-
+  const host = els['messages'];
+  if (!actions || !host) return;
+  const turns = syncReviewTurns(conv);
   const awaiting = convAwaitingReview(conv);
+  const rows = Array.from(host.children).filter((node) => node.classList.contains('message') && !node.classList.contains('review-turn'));
+  for (const turn of turns) {
+    let row = Array.from(host.querySelectorAll('.review-turn')).find((node) => node.dataset.reviewTurn === turn.id);
+    if (!row) {
+      row = document.createElement('div');
+      row.className = 'message employee review-turn';
+      row.dataset.reviewTurn = turn.id;
+      const bubble = document.createElement('div');
+      bubble.className = 'bubble';
+      const label = document.createElement('div');
+      label.className = 'review-turn-label';
+      label.textContent = 'Ready for your review';
+      bubble.appendChild(label);
+      row.appendChild(bubble);
+      host.insertBefore(row, rows[turn.messageCount] || host.querySelector('#deliverables-bar, #next-job-section'));
+    }
+    const bubble = row.querySelector('.bubble');
+    if (!turn.resolution && awaiting) {
+      if (actions.parentNode !== bubble) bubble.appendChild(actions);
+      actions.hidden = false;
+      renderDynamicReviewActions(conv, reviewHandoffForConversation(conv));
+      syncReviewHint(conv);
+    } else {
+      let settled = bubble.querySelector('.review-resolution');
+      if (!settled) {
+        settled = document.createElement('div');
+        settled.className = 'review-resolution';
+        bubble.appendChild(settled);
+      }
+      const at = new Date(turn.resolvedAt);
+      settled.textContent = turn.resolution + (Number.isFinite(at.getTime()) ? ' ' + at.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '');
+    }
+  }
   if (!awaiting) {
     clearDynamicReviewActionButtons(actions);
     actions.hidden = true;
-    return;
-  }
-
-  const fmt = deriveDeliverableFormat(conv);
-
-  // --- Format-derived artifact strip (R7.2) ---
-  // #770 A1: real deliverables (artifact_set / pull_request / deck / report /
-  // markdown) render in the Deliverables panel (renderDeliverablesPanel), not
-  // pinned in the thread.
-
-  // --- Unified action bar: review actions appear beside the always-on chips ---
-  actions.hidden = false;
-  renderDynamicReviewActions(conv, reviewHandoffForConversation(conv));
-  const handoff = els['review-handoff'];
-  if (handoff) {
-    const hasArtifact = !!(fmt.actions && fmt.actions.length);
-    handoff.textContent = fmt.key === 'pull_request'
-        ? 'Comment on the PR to leave inline notes, or approve / type changes below.'
-        : isManagerTemplateJob(conv && conv.jobId)
-          ? 'Open the updated files, then approve or type changes below.'
-          : hasArtifact
-            ? 'Open the deliverable above, then approve or type changes below.'
-            : 'Review the update above, then approve or type changes below.';
+    document.getElementById('review-action-storage').appendChild(actions);
   }
 }
 
@@ -7232,34 +7259,46 @@ function approvalCommandFromLabel(action) {
   return label ? `Approved and ${label}.` : APPROVAL_MESSAGE;
 }
 
-// #770 A1: single-run deliverables live in a stable collapsible panel in the
-// support stack, decoupled from the transient approve/reject decision UI. Fed by
-// the same format derivation as the old in-thread strip, so a genuine structured
-// handoff / recorded run artifact yields open/view chips; prose-only replies
-// yield nothing (panel hidden). For manager-oversight runs the format includes
-// a union of Mandy's own artifacts and every reviewed child's artifacts (#1566).
-function renderDeliverablesPanel(conv) {
-  const panel = els['deliverables-panel'];
-  const body = els['deliverables-body'];
-  if (!panel || !body) return;
-  const fmt = conv ? deriveDeliverableFormat(conv) : null;
+// Run outputs stay reachable independently of the current review decision.
+function renderDeliverablesBar(conv) {
+  const messages = els['messages'];
+  if (!messages) return;
+  let panel = messages.querySelector('#deliverables-bar');
+  if (!panel) {
+    panel = document.createElement('div');
+    panel.id = 'deliverables-bar';
+    panel.setAttribute('aria-label', 'Deliverables');
+  }
+  const body = panel;
+  let fmt = conv ? deriveDeliverableFormat(conv) : null;
+  // A later run snapshot may clear its handoff; produced outputs remain available.
+  // Historical data supplies artifact links only, never decision eligibility.
+  if (conv && (!reviewHandoffForConversation(conv) || reviewHandoffForConversation(conv).reviewRequired === false) && (!fmt || !fmt.actions.length)) {
+    const previous = (conv.reviewTurns || []).at(-1);
+    if (previous) {
+      try { fmt = deriveFormatFromReviewHandoff(normalizeReviewHandoff(JSON.parse(previous.signature))); }
+      catch { /* Ignore malformed history from older/imported records. */ }
+    }
+  }
   const isDeliverableFmt = !!fmt && (fmt.key === 'artifact_set' || fmt.key === 'pull_request'
     || fmt.key === 'deck' || fmt.key === 'report'
     || (fmt.key === 'markdown' && fmt.actions && fmt.actions.length));
   const actions = isDeliverableFmt ? fmt.actions.filter((a) => a.kind !== 'feedback') : [];
-  // #770 / #512 R7.2: a handoff that EXPLICITLY declines review (reviewRequired:false,
-  // e.g. org-onboarding wrote in-place context files reviewed via the Company/Manager
-  // Brief tab) is not a deliverable to surface here. This preserves the prior "no
-  // artifact strip for a no-review handoff" behavior now that the strip is decoupled
-  // from the (hidden) review card.
   const currentHandoff = conv ? reviewHandoffForConversation(conv) : null;
-  const declinedReview = !!currentHandoff && currentHandoff.reviewRequired === false;
+  const declinedReview = !!currentHandoff && currentHandoff.reviewRequired === false && !(conv.reviewTurns || []).length;
   if (!conv || declinedReview || actions.length === 0) {
     panel.hidden = true;
+    delete panel.dataset.signature;
     body.innerHTML = '';
     return;
   }
   panel.hidden = false;
+  const signature = JSON.stringify(actions);
+  if (panel.dataset.signature === signature) {
+    if (messages.lastElementChild !== panel) messages.appendChild(panel);
+    return;
+  }
+  panel.dataset.signature = signature;
   body.innerHTML = '';
   const strip = document.createElement('div');
   strip.className = 'rc-artifact-strip';
@@ -7292,13 +7331,7 @@ function renderDeliverablesPanel(conv) {
     strip.appendChild(btn);
   }
   body.appendChild(strip);
-  const summary = els['deliverables-summary'];
-  if (summary) {
-    summary.textContent = actions.length === 1 ? '1 file from this run' : `${actions.length} files from this run`;
-  }
-  const panelState = panelStateFor(conv.id);
-  const shouldOpen = panelState.deliverables !== undefined ? panelState.deliverables : convAwaitingReview(conv);
-  if (panel.open !== shouldOpen) panel.open = shouldOpen;
+  messages.appendChild(panel);
 }
 
 function jobCatalogEntry(jobId) {
@@ -7829,6 +7862,7 @@ async function approveReview(options) {
     const selectedReviewAction = opts.reviewAction && typeof opts.reviewAction === 'object'
       ? opts.reviewAction
       : { id: 'approve', label: 'Approve', kind: 'approve', style: 'primary' };
+    resolveReviewTurn(conv, 'You approved this.');
     conv.reviewApproved = true;
     conv.selectedReviewAction = selectedReviewAction;
     conv.pendingDeliveryActionId = selectedReviewAction.deliveryActionId || null;
@@ -7845,6 +7879,7 @@ async function approveReview(options) {
     await continueRun(approvalMessage, { preserveReviewApproved: true, selectedReviewAction });
     return;
   }
+  resolveReviewTurn(conv, 'You marked this complete.');
   conv.status = 'completed';
   conv.reviewApproved = false;
   conv.pendingDeliveryActionId = null;
@@ -7864,6 +7899,8 @@ async function approveReview(options) {
 async function requestChangesReview() {
   const conv = activeConversation();
   if (!conv) return;
+  if (!convAwaitingReview(conv)) return;
+  resolveReviewTurn(conv, 'You asked for changes.');
   const typedText = (els['coach-text'] && els['coach-text'].value.trim()) || '';
   const text = typedText || DEFAULT_REQUEST_CHANGES_MESSAGE;
   // Re-open the review gate: a change request means the run is no longer "done".
@@ -7999,8 +8036,8 @@ function parseCpSearch(text) {
 function focusComposerForDelegate(opts) {
   state.cpActionContext = (opts && opts.actionContext) || managementActionContext(state.pendingNextJobArea || undefined);
   state.activeId = null;
-  persistActiveConversationSelection(null, { projectPath: state.projectPath || '' });
-  state.showProjectInfo = false;
+  persistActiveConversationSelection(null, tf.area === 'projects' ? { projectPath: state.projectPath || '' } : { scope: tf.area });
+  tf.areaSelection[tfAreaSelectionKey(tf.area)] = 'delegate';
   if (tf.area === 'company' || tf.area === 'manager') {
     tf.areaSelection[tf.area] = 'delegate';
     if (tf.area === 'company') tfRenderCompany();
@@ -8553,7 +8590,7 @@ function showRerunToast(msg) {
   const t = document.createElement('div');
   t.className = 'cp-rerun-toast';
   // Issue #1627: matches this app's own convention for transient status text (#be-status,
-  // #status-line, etc.) so a screen reader announces the message instead of it being silently
+  // status notifications, etc.) so a screen reader announces the message instead of it being silently
   // visual-only - relevant beyond the original re-run case now that this toast also carries the
   // real reason a restart-to-latest attempt failed.
   t.setAttribute('role', 'status');
@@ -8960,7 +8997,7 @@ async function startRun(job, instructions, employeeId, preassignedConvId, invoke
   };
   upsertConversation(conv);
   state.activeId = conv.id;
-  if (context.area === 'company' || context.area === 'manager') tf.areaSelection[context.area] = conv.id;
+  tf.areaSelection[tfAreaSelectionKey(context.area)] = conv.id;
   persistActiveConversationSelection(conv.id);
   // Issue #539: make Cmd/Ctrl+Shift+R available as soon as the run is queued,
   // not only after the server responds with the run id.
@@ -9087,6 +9124,7 @@ function conversationDispatchAgentId(conv) {
 async function continueRun(text, options) {
   const conv = activeConversation();
   if (!conv || !conv.runId) return;
+  if (convAwaitingReview(conv)) resolveReviewTurn(conv, 'You replied instead. The run continued without a decision.');
   const opts = options || {};
   // Consume any pending coaching job selected via quick-coach or template picker.
   // The server adds the correct invocation prefix ($fraim / /fraim) based on
@@ -9205,6 +9243,7 @@ async function continueRun(text, options) {
 }
 
 function foldRunIntoConversation(conv, run) {
+  syncReviewTurns(conv);
   const createdAt = stableConversationCreatedAt(conv, run);
   if (createdAt !== undefined) conv.createdAt = createdAt;
   // Issue #710: server run identity is canonical. The browser may have
@@ -9471,23 +9510,13 @@ function switchToConversation(id) {
     tfShowArea(targetArea);
   }
   state.activeId = id;
+  tf.areaSelection[tfAreaSelectionKey(targetArea)] = id;
   persistActiveConversationSelection(id);
   // Issue #1065: a find session belongs to one thread. srchOpenResult re-opens it with the search
   // query immediately after this call, which is what lands the manager on the passage (R45).
   if (typeof convFindClose === 'function') convFindClose();
-  // For Company/Manager: move the shared .page into this area's conv-host and
-  // switch from the info view to the full conversation surface.
-  if (targetArea === 'company' || targetArea === 'manager') {
-    tfEnsurePageInArea(targetArea);
-    const host = document.getElementById(targetArea + '-conv-host');
-    const info = document.getElementById(targetArea + '-info-view');
-    if (host) host.hidden = false;
-    if (info) info.hidden = true;
-    // #1397: an area selection represents every explicit destination, not only
-    // the Info view. Poll-driven renders must preserve this conversation until
-    // the user chooses another destination or the conversation disappears.
-    if (tf.areaSelection) tf.areaSelection[targetArea] = id;
-  }
+  tfEnsurePageInArea(targetArea);
+  tfApplyAreaView(targetArea, tfResolveAreaView(targetArea, conv));
   renderRail();
   renderActive();
   hydrateConversationBody(conv ? convBucketKey(conv) : state.projectPath, id).catch((error) =>
@@ -9505,9 +9534,47 @@ function switchToConversation(id) {
 // Status line + project picker
 // ---------------------------------------------------------------------------
 
+let statusNotificationTimer;
+function positionStatusNotification() {
+  const notice = document.getElementById('hub-status-notification');
+  const composer = document.getElementById('persistent-composer');
+  if (!notice || notice.hidden) return;
+  const box = composer && composer.getBoundingClientRect();
+  const visible = box && box.width > 0 && box.top > 0 && box.top < innerHeight;
+  notice.style.bottom = (visible ? innerHeight - box.top + 8 : 16) + 'px';
+  notice.style.left = (visible ? box.left + box.width / 2 : innerWidth / 2) + 'px';
+}
 function showStatus(text, isError) {
-  els['status-line'].textContent = text || '';
-  els['status-line'].classList.toggle('error', !!isError);
+  clearTimeout(statusNotificationTimer);
+  let notice = document.getElementById('hub-status-notification');
+  if (!notice) {
+    notice = document.createElement('div');
+    notice.id = 'hub-status-notification';
+    document.body.appendChild(notice);
+    window.addEventListener('resize', positionStatusNotification);
+    document.addEventListener('scroll', positionStatusNotification, true);
+    const composer = document.getElementById('persistent-composer');
+    if (composer && typeof ResizeObserver !== 'undefined') new ResizeObserver(positionStatusNotification).observe(composer);
+  }
+  notice.className = 'cp-rerun-toast hub-status-notification' + (isError ? ' error' : '');
+  notice.replaceChildren();
+  notice.hidden = !text;
+  notice.setAttribute('role', isError ? 'alert' : 'status');
+  notice.setAttribute('aria-live', isError ? 'assertive' : 'polite');
+  const message = document.createElement('span');
+  message.textContent = text || '';
+  notice.appendChild(message);
+  if (isError) {
+    const dismiss = document.createElement('button');
+    dismiss.type = 'button';
+    dismiss.setAttribute('aria-label', 'Dismiss notification');
+    dismiss.textContent = '\u00d7';
+    dismiss.onclick = () => { notice.hidden = true; };
+    notice.appendChild(dismiss);
+  } else {
+    statusNotificationTimer = setTimeout(() => { notice.hidden = true; }, 5000);
+  }
+  positionStatusNotification();
 }
 
 async function pickProject() {
@@ -10134,7 +10201,7 @@ function wireEvents() {
   // just defocuses the current conversation and focuses the always-present
   // composer, the same way clicking an employee starts/focuses a conversation.
   els['new-conv-btn'].addEventListener('click', () => {
-    state.showProjectInfo = false; // Issue #1657: return to the composer, not the Brief page.
+    tf.areaSelection[tfAreaSelectionKey(tf.area)] = 'delegate';
     // renderActive() re-applies the workspace mode unconditionally (needed
     // when coming from the Project Info page, since activeId is already
     // null there too and focusComposerForDelegate only re-renders when
@@ -10270,6 +10337,7 @@ function wireEvents() {
       }
     });
   }
+  els['voice-input-btn'].addEventListener('click', startVoiceInput);
   els['coach-text'].addEventListener('input', () => {
     syncSendButton();
     // Issue #1657 R2: drive the inline suggestion list while idle (no
@@ -10418,25 +10486,7 @@ function wireEvents() {
     els['micro-manage-toggle'].focus();
     scrollThreadForReview(activeConversation());
   });
-  if (els['thread-panel']) {
-    els['thread-panel'].addEventListener('toggle', () => {
-      const conv = activeConversation();
-      if (!conv) return;
-      panelStateFor(conv.id).thread = els['thread-panel'].open;
-      if (els['thread-panel'].open) requestAnimationFrame(() => restoreManagePosition(conv));
-    });
-  }
-
-  // #770: Deliverables panel toggle: persist open/close state per conversation.
-  if (els['deliverables-panel']) {
-    els['deliverables-panel'].addEventListener('toggle', () => {
-      const conv = activeConversation();
-      if (conv) panelStateFor(conv.id).deliverables = els['deliverables-panel'].open;
-    });
-  }
-
-  // Issue #512 R7.7: unified action-bar review buttons. They live in the same
-  // bar as the coaching chips; the chips/input never disappear.
+  // The live review controls retain their handlers when moved into a review turn.
   if (els['review-approve']) {
     els['review-approve'].addEventListener('click', () => approveReview({ resumeAfterApproval: true }));
   }
@@ -10551,18 +10601,6 @@ function wireEvents() {
       return;
     }
   });
-  if (els['conversation-focus-btn']) {
-    els['conversation-focus-btn'].addEventListener('click', openConversationFocus);
-  }
-  if (els['conversation-focus-close']) {
-    els['conversation-focus-close'].addEventListener('click', closeConversationFocus);
-  }
-  if (els['conversation-focus-overlay']) {
-    els['conversation-focus-overlay'].addEventListener('click', (e) => {
-      if (e.target === els['conversation-focus-overlay']) closeConversationFocus();
-    });
-  }
-  document.addEventListener('keydown', handleConversationFocusEscape);
 
   // Issue #1657: #coach-text's own keydown handler (wired above, alongside
   // arrow-key suggestion navigation) now owns Enter-to-send directly via
@@ -11020,10 +11058,7 @@ const SRCH_MIN_QUERY_LENGTH = 2;
 const SRCH_DEBOUNCE_MS = 150;
 // Every element search hides to show results. Their pre-search hidden flags are captured verbatim
 // so clearing restores the exact surface state, whatever it was (R6).
-const SRCH_HIDEABLE_IDS = [
-  'hub-conv-page', 'proj-overview-page', 'proj-kanban',
-  'manager-info-view', 'manager-conv-host', 'company-info-view', 'company-conv-host',
-];
+const SRCH_HIDEABLE_IDS = ['project', 'all', 'manager', 'company'].flatMap(srchHiddenForScope);
 const SRCH_PANEL_IDS = ['project-results', 'overview-results', 'manager-results', 'company-results'];
 
 const srch = {
@@ -11061,7 +11096,7 @@ function srchHiddenForScope(scope) {
   if (scope === 'company') return ['company-info-view', 'company-conv-host'];
   if (scope === 'manager') return ['manager-info-view', 'manager-conv-host'];
   if (scope === 'all') return ['proj-overview-page', 'proj-kanban'];
-  return ['hub-conv-page'];
+  return ['proj-context-top', 'hub-conv-page'];
 }
 
 function srchSyncChip() {
@@ -11142,6 +11177,10 @@ function srchHidePanel() {
     srch.surface = null;
   }
   srch.active = false;
+  // Scope switches may happen while searching. Resolve the current destination
+  // instead of letting an old snapshot override the current scope's selection.
+  if (tf.area === 'projects') tfApplyWorkspaceMode();
+  else if (tf.area === 'manager' || tf.area === 'company') tfRenderScopeView(tf.area);
 }
 
 function srchClear() {
@@ -12263,75 +12302,83 @@ async function tfSelectProjectView(view, projectId) {
 }
 
 function tfStoredTreeWidth() {
-  const raw = window.localStorage.getItem(STORAGE_KEY_TREE_WIDTH);
+  let raw;
+  try { raw = window.localStorage.getItem(STORAGE_KEY_TREE_WIDTH); }
+  catch { return state.treeNavWidth || TREE_WIDTH_DEFAULT; }
   const parsed = Number(raw);
-  if (!Number.isFinite(parsed)) return TREE_WIDTH_DEFAULT;
+  if (raw === null || raw.trim() === '' || !Number.isFinite(parsed)) return TREE_WIDTH_DEFAULT;
   return Math.min(TREE_WIDTH_MAX, Math.max(TREE_WIDTH_MIN, Math.round(parsed)));
 }
 
 function tfApplyTreeNavState() {
-  const workspace = document.getElementById('proj-workspace');
-  const collapseBtn = document.getElementById('tree-collapse-btn');
-  if (!workspace) return;
-  const collapsed = window.localStorage.getItem(STORAGE_KEY_TREE_COLLAPSED) === '1';
-  workspace.style.setProperty('--tree-sidebar-width', tfStoredTreeWidth() + 'px');
-  workspace.classList.toggle('tree-collapsed', collapsed);
-  if (collapseBtn) {
-    const label = collapsed ? 'Expand project navigation' : 'Collapse project navigation';
-    collapseBtn.setAttribute('aria-label', label);
-    collapseBtn.title = label;
-  }
+  let collapsed = !!state.treeNavCollapsed;
+  try { collapsed = window.localStorage.getItem(STORAGE_KEY_TREE_COLLAPSED) === '1'; } catch { /* Session state remains usable without storage. */ }
+  document.querySelectorAll('.scope-shell').forEach((workspace) => {
+    workspace.style.setProperty('--tree-sidebar-width', tfStoredTreeWidth() + 'px');
+    workspace.classList.toggle('tree-collapsed', collapsed);
+    const button = workspace.querySelector('.tree-collapse-btn');
+    if (button) {
+      const label = collapsed ? 'Expand navigation' : 'Collapse navigation';
+      button.setAttribute('aria-label', label);
+      button.setAttribute('aria-expanded', String(!collapsed));
+      button.title = label;
+    }
+  });
 }
 
 function tfSetTreeCollapsed(collapsed) {
-  if (collapsed) window.localStorage.setItem(STORAGE_KEY_TREE_COLLAPSED, '1');
-  else window.localStorage.removeItem(STORAGE_KEY_TREE_COLLAPSED);
+  state.treeNavCollapsed = collapsed;
+  try {
+    if (collapsed) window.localStorage.setItem(STORAGE_KEY_TREE_COLLAPSED, '1');
+    else window.localStorage.removeItem(STORAGE_KEY_TREE_COLLAPSED);
+  } catch { /* Keep the preference for this session when storage is blocked. */ }
   tfApplyTreeNavState();
 }
 
 function tfWireTreeNavControls() {
-  const workspace = document.getElementById('proj-workspace');
-  const collapseBtn = document.getElementById('tree-collapse-btn');
-  const resizer = document.getElementById('tree-resizer');
-  if (!workspace) return;
   tfApplyTreeNavState();
-  if (collapseBtn && !collapseBtn.dataset.wired) {
-    collapseBtn.dataset.wired = '1';
-    collapseBtn.addEventListener('click', () => {
-      tfSetTreeCollapsed(!workspace.classList.contains('tree-collapsed'));
-    });
-  }
-  if (resizer && !resizer.dataset.wired) {
-    resizer.dataset.wired = '1';
-    let startX = 0;
-    let startWidth = TREE_WIDTH_DEFAULT;
-    let dragging = false;
-    const stopDrag = () => {
-      if (!dragging) return;
-      dragging = false;
-      workspace.classList.remove('tree-resizing');
-      document.removeEventListener('pointermove', onMove);
-      document.removeEventListener('pointerup', stopDrag);
-      document.removeEventListener('pointercancel', stopDrag);
-    };
-    const onMove = (event) => {
-      if (!dragging) return;
-      const nextWidth = Math.min(TREE_WIDTH_MAX, Math.max(TREE_WIDTH_MIN, startWidth + event.clientX - startX));
-      window.localStorage.setItem(STORAGE_KEY_TREE_WIDTH, String(Math.round(nextWidth)));
-      workspace.style.setProperty('--tree-sidebar-width', Math.round(nextWidth) + 'px');
-    };
-    resizer.addEventListener('pointerdown', (event) => {
-      event.preventDefault();
-      tfSetTreeCollapsed(false);
-      dragging = true;
-      startX = event.clientX;
-      startWidth = tfStoredTreeWidth();
-      workspace.classList.add('tree-resizing');
-      document.addEventListener('pointermove', onMove);
-      document.addEventListener('pointerup', stopDrag);
-      document.addEventListener('pointercancel', stopDrag);
-    });
-  }
+  document.querySelectorAll('.scope-shell').forEach((workspace) => {
+    const collapseBtn = workspace.querySelector('.tree-collapse-btn');
+    const resizer = workspace.querySelector('.tree-resizer');
+    if (collapseBtn && !collapseBtn.dataset.wired) {
+      collapseBtn.dataset.wired = '1';
+      collapseBtn.addEventListener('click', () => {
+        tfSetTreeCollapsed(!workspace.classList.contains('tree-collapsed'));
+      });
+    }
+    if (resizer && !resizer.dataset.wired) {
+      resizer.dataset.wired = '1';
+      let startX = 0;
+      let startWidth = TREE_WIDTH_DEFAULT;
+      let dragging = false;
+      const stopDrag = () => {
+        if (!dragging) return;
+        dragging = false;
+        workspace.classList.remove('tree-resizing');
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', stopDrag);
+        document.removeEventListener('pointercancel', stopDrag);
+      };
+      const onMove = (event) => {
+        if (!dragging) return;
+        const nextWidth = Math.min(TREE_WIDTH_MAX, Math.max(TREE_WIDTH_MIN, startWidth + event.clientX - startX));
+        state.treeNavWidth = Math.round(nextWidth);
+        try { window.localStorage.setItem(STORAGE_KEY_TREE_WIDTH, String(state.treeNavWidth)); } catch { /* Session fallback. */ }
+        tfApplyTreeNavState();
+      };
+      resizer.addEventListener('pointerdown', (event) => {
+        event.preventDefault();
+        tfSetTreeCollapsed(false);
+        dragging = true;
+        startX = event.clientX;
+        startWidth = tfStoredTreeWidth();
+        workspace.classList.add('tree-resizing');
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', stopDrag);
+        document.addEventListener('pointercancel', stopDrag);
+      });
+    }
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -12888,88 +12935,46 @@ function tfTreeSep() {
   return sep;
 }
 function tfRenderTree() {
-  const host = document.getElementById('tree-sidebar');
+  renderScopeNavigation(document.getElementById('tree-sidebar'), 'projects');
+}
+
+function renderScopeNavigation(host, area) {
   if (!host) return;
-  // #533 R5: remember which accordions are open so a status-driven re-render (e.g.
-  // marking a job done) only recolors dots — it must not collapse the manager's tree.
-  const openState = {};
-  host.querySelectorAll('details[data-acc-key]').forEach((d) => { openState[d.dataset.accKey] = d.open; });
-  host.innerHTML = '';
-  // #521: Project Info is the project's own page (brief + learnings, not stacked
-  // over every conversation). This entry deselects any active run, shows that page.
+  const isProject = area === 'projects';
+  const oldSection = isProject
+    ? els['conv-list'].closest('.rail-section--runs')
+    : host.querySelector('.rail-section--runs');
+  host.replaceChildren();
   const briefNav = document.createElement('button');
-  briefNav.id = 'tree-brief-nav';
+  if (isProject) briefNav.id = 'tree-brief-nav';
   briefNav.type = 'button';
   briefNav.className = 'tree-brief-nav';
-  briefNav.innerHTML = '<span class="tbn-ico">📋</span> <span>Project Info</span>';
-  briefNav.addEventListener('click', () => {
-    state.activeId = null;
-    state.showProjectInfo = true; // Issue #1657: the one explicit trigger for the Brief page.
-    // #1565: was persistConversations() (debounced full-project PUT - reads/rewrites every
-    // conversation, freezing Electron's main process on large histories). Clearing the active
-    // selection is a body-safe activeId-only PATCH, same narrow path every other activeId
-    // change already uses.
-    if (typeof persistActiveConversationSelection === 'function') {
-      persistActiveConversationSelection(null, { projectPath: state.projectPath || '' });
-    }
-    if (typeof renderRail === 'function') renderRail();
-    renderActive();
-    tfRenderProjectContextTop();
-    tfApplyWorkspaceMode();
-  });
+  briefNav.textContent = '📋 ' + (isProject ? 'Project' : area === 'company' ? 'Company' : 'Manager') + ' Info';
+  briefNav.addEventListener('click', () => tfToggleAreaView(area, 'info'));
   host.appendChild(briefNav);
   host.appendChild(tfTreeSep());
-  // #693 R1: the standalone "Project Updates" accordion is retired. Its two
-  // lifecycle actions now live where their output lands — Run Project Onboarding
-  // in the Brief section and Sleep on learnings in the Learnings section
-  // (see tfRenderProjectContextTop). No separate tree section.
-  // The legacy standalone "+ New job" entry (#new-conv-btn → openModal → the
-  // #job-catalog/#next1/#instructions/#start chain) lives in the old `.rail`,
-  // which the shell suppresses (display:none). Relocate the live node to the
-  // top of the visible tree so the standalone conversation flow that the
-  // shipped #339/#347/#429 Hub tests depend on stays clickable. Moving the
-  // node preserves its cached `els` reference and wired click listener.
-  appendManagementActions(host, 'projects');
-  host.appendChild(tfTreeSep());
-  // #693 R1 (PR round 2): the per-employee "Runs" accordions (renderRail's
-  // conv-employee-group) ARE the single employees section — they list every
-  // project employee with that employee's runs nested under their accordion.
-  // Relocate that section into the tree; the redundant emp-hero list is retired.
-  const convList = (typeof els !== 'undefined' && els['conv-list']) || document.getElementById('conv-list');
-  const runsSection = convList && convList.closest('.rail-section--runs');
-  if (runsSection) {
-    runsSection.classList.add('tree-runs');
-    host.appendChild(runsSection);
-  }
-  // #693 R1 (PR round 2): the redundant emp-hero employee list was removed. The
-  // relocated Runs section above (renderRail's conv-employee-group) is now the
-  // single employees section — every project employee, with their runs nested
-  // under their own accordion, plus per-employee assign/hire-manager.
-
-  // #521 R5/R6.4: the project brief and learnings moved OUT of the tree into the
-  // collapsible top sections (#proj-brief-acc / #proj-learnings-acc), rendered by
-  // tfRenderProjectContextTop(). The tree is now employees + jobs only.
+  appendManagementActions(host, area);
   host.appendChild(tfTreeSep());
-
-  // Issue #945: + New employee node (Design B in-place creation).
-  const newEmpNode = document.createElement('div');
-  newEmpNode.className = 'ipe-new';
-  newEmpNode.setAttribute('role', 'button');
-  newEmpNode.setAttribute('tabindex', '0');
-  newEmpNode.title = 'Create a custom employee for this project';
-  const newEmpIcon = document.createElement('span');
-  newEmpIcon.className = 'ipe-new-icon';
-  newEmpIcon.setAttribute('aria-hidden', 'true');
-  newEmpIcon.textContent = '+';
-  const newEmpLabel = document.createElement('span');
-  newEmpLabel.textContent = 'New employee';
-  newEmpNode.appendChild(newEmpIcon);
-  newEmpNode.appendChild(newEmpLabel);
-  newEmpNode.addEventListener('click', () => openInlineCreateEmployee());
-  newEmpNode.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openInlineCreateEmployee(); } });
-  host.appendChild(newEmpNode);
+  const section = oldSection || document.createElement('section');
+  section.className = 'rail-section rail-section--runs tree-runs';
+  if (!oldSection) {
+    const title = document.createElement('div');
+    title.className = 'rail-section-label';
+    title.textContent = 'Employees';
+    section.appendChild(title);
+    const list = document.createElement('div');
+    list.className = 'conv-list';
+    section.appendChild(list);
+  }
+  host.appendChild(section);
+  if (!isProject) renderScopeEmployees(section.querySelector('.conv-list'), area);
+  if (!isProject) {
+    const note = document.createElement('div');
+    note.className = 'area-rail-note';
+    note.textContent = "These employees work across every project you manage. Launch a job here (＋) for cross-project work. Its run stays on this tab; the same employee's job launched inside a project stays there. Coach and verify like any employee.";
+    host.appendChild(note);
+  }
   host.appendChild(tfTreeSep());
-
   // Dot legend.
   const legend = document.createElement('div');
   legend.className = 'tree-legend';
@@ -12994,10 +12999,9 @@ function tfRenderTree() {
     legend.appendChild(row);
   }
   host.appendChild(legend);
-  // #533 R5: restore the open/closed state captured before the rebuild.
-  host.querySelectorAll('details[data-acc-key]').forEach((d) => {
-    if (Object.prototype.hasOwnProperty.call(openState, d.dataset.accKey)) d.open = openState[d.dataset.accKey];
-  });
+  const fallback = isProject ? activeConversation() : tfActiveScopedConv(area);
+  briefNav.classList.toggle('active', tfResolveAreaView(area, fallback).info);
+  tfReopenPendingRunDelete(host);
 }
 
 function tfSelectAssignmentConversation(assignment) {
@@ -13028,6 +13032,9 @@ function tfProjectOnboardingRun() {
 }
 
 function tfRenderProjectContextTop() {
+  const heading = document.getElementById('project-info-heading');
+  const project = tf.projects.find((entry) => entry.id === tf.activeProjectId);
+  if (heading) heading.textContent = project ? project.name : ((state.projectPath || '').split(/[\\/]/).filter(Boolean).pop() || 'Project');
   // Issue #1198: which folder this project points at, always on screen.
   tfRenderProjectFolderRow();
   // Onboarding loop framing renders ABOVE the accordions (#proj-onboarding-banner)
@@ -14349,16 +14356,51 @@ function tfActiveMgrConv() {
 // conversations behind that destination, but it may not choose a different one.
 // A deleted or re-scoped conversation invalidates the selection and restores the
 // area's normal auto-home behavior.
+function tfAreaSelectionKey(area) {
+  return area === 'projects' ? 'project:' + (tf.activeProjectId || state.projectPath || 'current') : area;
+}
+
 function tfResolveAreaView(area, fallbackConv) {
-  const selected = tf.areaSelection && tf.areaSelection[area];
+  const key = tfAreaSelectionKey(area);
+  const selected = tf.areaSelection[key];
   if (selected === 'info') return { info: true, conversation: null };
   if (selected === 'delegate') return { info: false, conversation: null, delegate: true };
   if (selected) {
     const conv = findConversation(selected);
-    if (conv && convScope(conv) === area) return { info: false, conversation: conv };
-    tf.areaSelection[area] = null;
+    const scope = area === 'projects' ? 'project' : area;
+    const belongs = conv && convScope(conv) === scope && (area !== 'projects' || projectConversations().includes(conv));
+    if (belongs) return { info: false, conversation: conv };
+    tf.areaSelection[key] = null;
+  }
+  const conv = fallbackConv && convScope(fallbackConv) === (area === 'projects' ? 'project' : area) ? fallbackConv : null;
+  return { info: area !== 'projects' && !conv, conversation: conv, delegate: area === 'projects' && !conv };
+}
+
+// Info and runs use hidden on every scope; search is an overlay on that selection.
+function tfApplyAreaView(area, view) {
+  const isProject = area === 'projects';
+  const info = document.getElementById(isProject ? 'proj-context-top' : area + '-info-view');
+  const host = document.getElementById(isProject ? 'hub-conv-page' : area + '-conv-host');
+  const searching = typeof srch !== 'undefined' && srch.active;
+  if (info) info.hidden = searching || !view.info;
+  if (host && (!isProject || host.closest('#proj-workspace'))) host.hidden = searching || view.info;
+  const page = document.getElementById('hub-conv-page');
+  if (!isProject && host && page && host.contains(page)) page.hidden = searching || view.info;
+  const rail = document.getElementById(isProject ? 'tree-sidebar' : area + '-rail');
+  const button = rail && rail.querySelector('.tree-brief-nav');
+  if (button) button.classList.toggle('active', view.info);
+}
+
+function tfRenderScopeView(area) {
+  const view = tfResolveAreaView(area, tfActiveScopedConv(area));
+  if (tf.area === area && !view.info) {
+    state.activeId = view.conversation ? view.conversation.id : null;
+    tfEnsurePageInArea(area);
+    renderActive();
+  } else if (tf.area === area) {
+    tfEnsurePageInArea('projects');
   }
-  return { info: !fallbackConv, conversation: fallbackConv || null };
+  tfApplyAreaView(area, view);
 }
 
 function tfAreaScopedConversations(area) {
@@ -14403,138 +14445,6 @@ function tfStartManagerPersonaJob(jobId) {
 }
 
 
-// #1416: capture each employee group's open/closed state from the area rail (Manager or
-// Company) before it is rebuilt, mirroring renderRail()'s preservedEmployeeGroupOpen() for
-// the Projects rail. Without this, tfRenderManager()/tfRenderCompany()'s ~1-1.5s poll-driven
-// rebuild wiped the DOM and re-created every group, so a manually collapsed group snapped
-// back open on the next tick and there was no way to tell a no-run group from one the user
-// deliberately expanded.
-function captureAreaEmployeeGroupOpenState(rail) {
-  const openState = new Map();
-  if (!rail) return openState;
-  rail.querySelectorAll('details.conv-employee-group[data-employee-key]').forEach((details) => {
-    const key = details.dataset ? details.dataset.employeeKey : '';
-    if (key) openState.set(key, details.open);
-  });
-  return openState;
-}
-
-// #702: render a hired persona as an employee group on the Manager rail — the SAME
-// visual as the Projects rail employee groups (avatar + name + role + count + "+" that
-// opens the job palette), with the persona's MANAGER-invoked runs listed under it.
-// Keeps a persona looking like an employee, consistent across tabs.
-function tfRenderAreaPersonaGroup(rail, persona, area, employeeGroupOpenState) {
-  const sample = { personaKey: persona.key };
-  const runs = tfAreaScopedConversations(area).filter(
-    (c) => c.personaKey === persona.key && conversationUiState(c) === 'complete'
-  );
-  const details = document.createElement('details');
-  details.className = 'conv-employee-group';
-  details.dataset.employeeKey = persona.key;
-  // Active runs now live in the "In Progress" section above; this accordion shows only
-  // completed runs so it defaults closed (user expands when they want history).
-  const defaultOpen = false;
-  details.open = employeeGroupOpenState && employeeGroupOpenState.has(persona.key)
-    ? employeeGroupOpenState.get(persona.key)
-    : defaultOpen;
-  const summary = document.createElement('summary');
-  summary.className = 'conv-employee-tab';
-  const avatar = buildConversationEmployeeAvatar(sample, 'conv-employee-avatar');
-  const copy = document.createElement('span'); copy.className = 'conv-employee-tab-copy';
-  const label = document.createElement('strong'); label.className = 'conv-employee-tab-label';
-  label.textContent = persona.displayName || persona.key;
-  const detail = document.createElement('small'); detail.className = 'conv-employee-tab-detail';
-  detail.textContent = persona.role || 'AI Employee';
-  copy.appendChild(label); copy.appendChild(detail);
-  const addBtn = document.createElement('button'); addBtn.type = 'button'; addBtn.className = 'conv-employee-add';
-  addBtn.textContent = '+';
-  addBtn.title = 'Launch a job for ' + (persona.displayName || persona.key);
-  addBtn.setAttribute('aria-label', 'Launch a job for ' + (persona.displayName || persona.key));
-  addBtn.addEventListener('click', (e) => {
-    e.preventDefault(); e.stopPropagation();
-    // Launch from this area: palette prefiltered to the employee. startRun stamps
-    // the active area on the conversation so it returns to the same rail.
-    focusComposerForDelegate({ employeeId: (state.bootstrap && state.bootstrap.preferences && state.bootstrap.preferences.employeeId) || 'claude', prefixSearch: '/' + persona.key, personaKey: persona.key.startsWith('custom:') ? persona.key : undefined, actionContext: managementActionContext(area) });
-  });
-  const count = document.createElement('span'); count.className = 'conv-employee-tab-count';
-  count.textContent = String(runs.length);
-  summary.appendChild(avatar); summary.appendChild(copy); summary.appendChild(addBtn); summary.appendChild(count);
-  details.appendChild(summary);
-  if (!runs.length) {
-    const listDiv = document.createElement('div'); listDiv.className = 'conv-employee-list';
-    const hint = document.createElement('div'); hint.className = 'eh-empty';
-    hint.textContent = 'No runs yet, + to launch a job.';
-    listDiv.appendChild(hint);
-    details.appendChild(listDiv);
-  } else {
-    details.appendChild(buildAreaGroupList(runs));
-  }
-  appendEmployeeGroupWithActions(rail, details);
-}
-
-// #1397/#1398/#1606: shared employee rail for the Manager and Company tabs. Mirrors the
-// Projects-tab layout: In Progress (active runs) → per-employee accordions (completed
-// runs) → No FRAIM Employee group (completed null-persona runs). FRAIMworker is always
-// present via tfAreaRailPersonas; named employees join when the area is their home or
-// they have an actual run there.
-function tfRenderAreaEmployeeRail(rail, area, employeeGroupOpenState) {
-  const allScopedConvs = tfAreaScopedConversations(area);
-  const activeConvs = allScopedConvs.filter((c) => conversationUiState(c) !== 'complete');
-  const doneNullPersonaConvs = allScopedConvs.filter(
-    (c) => conversationUiState(c) === 'complete' && !c.personaKey
-  );
-  // Section 1: In Progress (active runs from all personas)
-  const areaOpenFn = (key, defaultOpen) =>
-    employeeGroupOpenState && employeeGroupOpenState.has(key)
-      ? employeeGroupOpenState.get(key)
-      : defaultOpen;
-  const ipDetails = buildInProgressSection(activeConvs.length, areaOpenFn);
-  if (activeConvs.length > 0) {
-    ipDetails.appendChild(buildAreaGroupList(activeConvs, { showEmployeeName: true }));
-  } else {
-    const emptyWrap = document.createElement('div'); emptyWrap.className = 'conv-employee-list';
-    const ipEmpty = document.createElement('div'); ipEmpty.className = 'eh-empty';
-    ipEmpty.textContent = 'Nothing running. Use + to assign a job below.';
-    emptyWrap.appendChild(ipEmpty);
-    ipDetails.appendChild(emptyWrap);
-  }
-  rail.appendChild(ipDetails);
-  // Section 2: Per-employee accordions (completed runs, named personas)
-  const areaPersonas = tfAreaRailPersonas(area);
-  if (areaPersonas.length > 0) {
-    const head = document.createElement('div'); head.className = 'area-rail-head'; head.textContent = 'Your employees';
-    rail.appendChild(head);
-    for (const persona of areaPersonas) {
-      tfRenderAreaPersonaGroup(rail, persona, area, employeeGroupOpenState);
-    }
-    const pNote = document.createElement('div'); pNote.className = 'area-rail-note';
-    pNote.textContent = "These employees work across every project you manage. Launch a job here (＋) for cross-project work. Its run stays on this tab; the same employee's job launched inside a project stays there. Coach and verify like any employee.";
-    rail.appendChild(pNote);
-  }
-  // Section 3: No FRAIM Employee group (completed null-persona runs)
-  if (doneNullPersonaConvs.length > 0) {
-    const wcDetails = document.createElement('details');
-    wcDetails.className = 'conv-employee-group conv-employee-group--adhoc';
-    wcDetails.dataset.employeeKey = NO_FRAIM_EMPLOYEE_GROUP_KEY;
-    wcDetails.open = employeeGroupOpenState && employeeGroupOpenState.has(NO_FRAIM_EMPLOYEE_GROUP_KEY)
-      ? employeeGroupOpenState.get(NO_FRAIM_EMPLOYEE_GROUP_KEY)
-      : true;
-    const wcSummary = document.createElement('summary');
-    wcSummary.className = 'conv-employee-tab';
-    const wcAvatar = buildNoFraimEmployeeAvatar('conv-employee-avatar');
-    const wcCopy = document.createElement('span'); wcCopy.className = 'conv-employee-tab-copy';
-    const wcLabel = document.createElement('strong'); wcLabel.className = 'conv-employee-tab-label';
-    wcLabel.textContent = NO_FRAIM_EMPLOYEE_LABEL;
-    wcCopy.appendChild(wcLabel);
-    const wcCount = document.createElement('span'); wcCount.className = 'conv-employee-tab-count';
-    wcCount.textContent = String(doneNullPersonaConvs.length);
-    wcSummary.appendChild(wcAvatar); wcSummary.appendChild(wcCopy); wcSummary.appendChild(wcCount);
-    wcDetails.appendChild(wcSummary);
-    wcDetails.appendChild(buildAreaGroupList(doneNullPersonaConvs));
-    rail.appendChild(wcDetails);
-  }
-}
-
 // Move the shared .page conversation panel into the specified area's workspace-conv host.
 // All .workspace-conv CSS rules (header/rail hidden, conv fills space) apply automatically
 // because the area-conv-host elements carry the workspace-conv class.
@@ -14551,22 +14461,19 @@ function tfEnsurePageInArea(area) {
 
 // Toggle a Company/Manager area between its info view (accordions) and conversation panel.
 function tfToggleAreaView(area, view) {
-  const host = document.getElementById(area + '-conv-host');
-  const info = document.getElementById(area + '-info-view');
-  if (view === 'info') {
-    if (host) host.hidden = true;
-    if (info) info.hidden = false;
-    tfEnsurePageInArea('projects');
-    state.activeId = null;
+  tf.areaSelection[tfAreaSelectionKey(area)] = view;
+  if (typeof srchClear === 'function') srchClear();
+  state.activeId = null;
+  persistActiveConversationSelection(null, area === 'projects' ? { projectPath: state.projectPath || '' } : { scope: area });
+  if (area === 'projects') {
+    tfEnsurePageInArea(area);
+    renderRail();
     renderActive();
-    // #1397: a manual switch to the info view is a deliberate navigation choice, exactly
-    // like picking a specific conversation — record it as this area's explicit selection so
-    // the next poll-driven tfRenderManager()/tfRenderCompany() doesn't silently flip back to
-    // the run view just because a conversation is still running. Overwritten by
-    // tfStartOnboardingJob() when a genuinely new run starts in this area, or by the user
-    // opening a run directly (switchToConversation).
-    if (tf.areaSelection && (area === 'manager' || area === 'company')) tf.areaSelection[area] = 'info';
+    tfRenderProjectContextTop();
+  } else {
+    tfRenderScopeView(area);
   }
+  tfApplyAreaView(area, tfResolveAreaView(area, null));
 }
 
 function tfRenderCompany() {
@@ -14579,32 +14486,7 @@ function tfRenderCompany() {
   // closure-owned unsaved values. Save/Reset clears the guard below; the status
   // state keeps their feedback stable if the next poll then performs a render.
   if (!state.brandEditorDraftActive && typeof tfRenderBrandEditor === 'function') tfRenderBrandEditor();
-  const rail = document.getElementById('company-rail');
-  if (rail) {
-    // #1416: capture the current open/closed state before wiping the rail so the
-    // ~1.5s poll-driven rebuild below doesn't snap a manually collapsed group back open.
-    const employeeGroupOpenState = captureAreaEmployeeGroupOpenState(rail);
-    rail.innerHTML = '';
-    const orgConv = tfActiveOrgConv();
-    const infoBtn = document.createElement('button');
-    infoBtn.type = 'button';
-    infoBtn.className = 'area-rail-info-btn' + (tfResolveAreaView('company', orgConv).info ? ' info-active' : '');
-    infoBtn.textContent = '📋 Company Info';
-    infoBtn.addEventListener('click', () => tfToggleAreaView('company', 'info'));
-    rail.appendChild(infoBtn);
-    appendManagementActions(rail, 'company');
-    // Issue #1124: when a company-scoped org conv exists, add a visible rail entry so
-    // the user can see and navigate to it. Previously the rail had only the static info
-    // button and the conversation was unreachable from the left nav.
-    // #693 R1 (PR round 2): the "Company jobs" launcher list is retired. Its jobs
-    // now run from the section they populate — Run Organization Onboarding in
-    // "Context & rules", Synthesize company learnings in "Company learnings".
-    // #1398: FRAIMworker (and any hired employee with a company-scoped run, e.g. Aida)
-    // get the same employee-group presentation as the Manager rail — not just an orphan
-    // entry for the single "most active" org conv.
-    tfRenderAreaEmployeeRail(rail, 'company', employeeGroupOpenState);
-    tfReopenPendingRunDelete(rail);
-  }
+  renderScopeNavigation(document.getElementById('company-rail'), 'company');
   const profile = document.getElementById('company-profile');
   const learn = document.getElementById('company-learnings');
   if (profile) {
@@ -14665,27 +14547,7 @@ function tfRenderCompany() {
   // #693 R1 (PR round 2): Company's learnings job is organizational-learning-synthesis, not sleep-on-learnings.
   tfEnsureAccAction('company-learn-acc', '🧠', 'Synthesize company learnings', () => tfStartOrgLearningSynthesis());
   tfMaybeRenderOrgPushBanner();
-  // Show the full coaching conversation panel when there is an active org conv;
-  // otherwise show the info view (accordions). This uses the shared .page element
-  // moved via tfEnsurePageInArea() so renderActive() renders the full panel.
-  const orgConv = tfActiveOrgConv();
-  const host = document.getElementById('company-conv-host');
-  const info = document.getElementById('company-info-view');
-  // #1397: resolve the area's one stable destination — an explicit conversation choice,
-  // an explicit "Company Info" choice, or (absent either) the org conv auto-home. Replaces
-  // the former Info-only tf.viewPinned special case with one navigation-state contract.
-  const companyView = tfResolveAreaView('company', orgConv);
-  if (tf.area === 'company' && !companyView.info && (companyView.conversation || companyView.delegate)) {
-    state.activeId = companyView.conversation ? companyView.conversation.id : null;
-    tfEnsurePageInArea('company');
-    if (host) host.hidden = false;
-    if (info) info.hidden = true;
-    renderActive();
-  } else {
-    if (host) host.hidden = true;
-    if (info) info.hidden = false;
-    if (tf.area === 'company') tfEnsurePageInArea('projects');
-  }
+  tfRenderScopeView('company');
 }
 
 // #594 R3: show push banner in Company area after an org onboarding run completes
@@ -14747,32 +14609,7 @@ function tfMaybeRenderOrgPushBanner() {
 
 function tfRenderManager() {
   // #521 R6: manager-level job (manager-agreements) lives ONLY in this left rail.
-  const rail = document.getElementById('manager-rail');
-  if (rail) {
-    // #1416: capture the current open/closed state before wiping the rail so the
-    // ~1s poll-driven rebuild below doesn't snap a manually collapsed group back open.
-    const employeeGroupOpenState = captureAreaEmployeeGroupOpenState(rail);
-    rail.innerHTML = '';
-    const mgrConv = tfActiveMgrConv();
-    const infoBtn = document.createElement('button');
-    infoBtn.type = 'button';
-    infoBtn.className = 'area-rail-info-btn' + (tfResolveAreaView('manager', mgrConv).info ? ' info-active' : '');
-    infoBtn.textContent = '📋 Manager Info';
-    infoBtn.addEventListener('click', () => tfToggleAreaView('manager', 'info'));
-    rail.appendChild(infoBtn);
-    appendManagementActions(rail, 'manager');
-    // #693 R1 (PR round 2): the "Manager jobs" launcher list is retired.
-    // Manager agreements now runs from the "Context & rules" section it populates.
-    // Issue #702/#1398: render an EMPLOYEE GROUP for FRAIMworker plus every hired persona
-    // that is either home to this area (Ashley on Manager) or has an actual run here (e.g.
-    // Aida's manager-scoped runs) — the same avatar + name + runs + "+" presentation as the
-    // Projects rail. `mgrConv` (the area's own top-level run, e.g. manager-agreements) gets
-    // its own rail entry unless a group above already lists it.
-    tfRenderAreaEmployeeRail(rail, 'manager', employeeGroupOpenState);
-    // #824: the manager rail also attaches run-delete controls; re-attach an open
-    // confirm this innerHTML='' rebuild would otherwise drop.
-    tfReopenPendingRunDelete(rail);
-  }
+  renderScopeNavigation(document.getElementById('manager-rail'), 'manager');
   const profile = document.getElementById('manager-profile');
   const learn = document.getElementById('manager-learnings');
   const reverse = document.getElementById('reverse-mentoring');
@@ -14864,25 +14701,7 @@ function tfRenderManager() {
   // Cancel/Save/Check button handlers) call renderConfiguredAgentsPanel() itself,
   // not this function, so they are unaffected and still render immediately.
   if (!state.configuredAgentEditingId) renderConfiguredAgentsPanel();
-  // Show the full coaching conversation panel when there is an active manager conv;
-  // otherwise show the info view (accordions). Uses the shared .page element.
-  const mgrConv = tfActiveMgrConv();
-  const mgrHost = document.getElementById('manager-conv-host');
-  const mgrInfo = document.getElementById('manager-info-view');
-  // #1397: resolve the area's one stable destination — see tfRenderCompany's companyView
-  // for the full rationale. Replaces the former Info-only tf.viewPinned special case.
-  const managerView = tfResolveAreaView('manager', mgrConv);
-  if (tf.area === 'manager' && !managerView.info && (managerView.conversation || managerView.delegate)) {
-    state.activeId = managerView.conversation ? managerView.conversation.id : null;
-    tfEnsurePageInArea('manager');
-    if (mgrHost) mgrHost.hidden = false;
-    if (mgrInfo) mgrInfo.hidden = true;
-    renderActive();
-  } else {
-    if (mgrHost) mgrHost.hidden = true;
-    if (mgrInfo) mgrInfo.hidden = false;
-    if (tf.area === 'manager') tfEnsurePageInArea('projects');
-  }
+  tfRenderScopeView('manager');
 }
 // #533: Reverse mentoring now renders the real manager-coaching learnings via
 // tfRenderLearningsList(scope='reverse') — consistent with the other learning
@@ -16139,10 +15958,10 @@ function tfApplyOrgBrand(brand) {
     coEl.hidden = !show;
   }
   document.title = (state.orgBrand && state.orgBrand.name) ? state.orgBrand.name + ' Hub' : 'FRAIM AI Hub';
-  // R4.1: Company/Manager area eyebrows reflect the company name (the FRAIM
+  // Scope Info eyebrows reflect the company name (the FRAIM
   // co-mark stays in the nav — co-branding, not white-label).
   var eyebrow = (state.orgBrand && state.orgBrand.name) ? state.orgBrand.name : 'FRAIM Hub';
-  ['company-info-view', 'manager-info-view'].forEach(function (id) {
+  ['company-info-view', 'manager-info-view', 'proj-context-top'].forEach(function (id) {
     var hostEl = document.getElementById(id);
     var el = hostEl && hostEl.querySelector('.eyebrow');
     if (el) el.textContent = eyebrow;
@@ -16422,8 +16241,8 @@ async function tfStartOnboardingJob(jobId, message, targetArea, userContext) {
     // win over an earlier selection (Info view or a different conversation), otherwise the
     // just-started run (e.g. create-hub-configured-agent) would stay invisible behind a
     // stale manual choice. startRun() already set state.activeId to the new conversation.
-    if (tf.areaSelection && (targetArea === 'manager' || targetArea === 'company') && state.activeId) {
-      tf.areaSelection[targetArea] = state.activeId;
+    if (tf.areaSelection && state.activeId) {
+      tf.areaSelection[tfAreaSelectionKey(targetArea)] = state.activeId;
     }
     // After run creation refresh the area panel so the conversation becomes visible.
     if (targetArea === 'company') tfRenderCompany();