fraim-hub 2.0.335 → 2.0.337

package/public/ai-hub/script.js

@@ -144,7 +144,7 @@ function gatherElements() {
     'coach-text', 'send', 'micro-manage', 'micro-log', 'resume-command', 'resume-command-code', 'resume-command-copy',
     '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',
@@ -332,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.
@@ -2164,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) ||
@@ -2688,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');
@@ -2753,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 || {};
@@ -2845,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
@@ -2868,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) => {
@@ -2897,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 || []) {
@@ -2908,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.
@@ -2975,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,
@@ -2993,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;
@@ -3004,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;
@@ -3028,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,
@@ -3076,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;
@@ -3138,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.
@@ -3165,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) {
@@ -3726,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() {
@@ -3864,20 +3929,8 @@ function syncMicroArchive(conv) {
 // 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) {
@@ -6181,6 +6234,7 @@ function resizeComposerTextarea() {
 }
 
 function syncSendButton() {
+  syncVoiceInput();
   syncReviewHint();
   resizeComposerTextarea();
   const conv = activeConversation();
@@ -6293,6 +6347,7 @@ function syncManagedDelegationAccess(conv = activeConversation()) {
     }
   }
   if (managed) closeAllCoachDropdowns();
+  syncVoiceInput();
   syncComposerPlaceholder(conv);
   syncComposerStopButton(conv);
 }
@@ -7981,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();
@@ -8942,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.
@@ -9455,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) =>
@@ -10156,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
@@ -10292,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
@@ -11012,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 = {
@@ -11053,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() {
@@ -11134,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() {
@@ -12255,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);
+      });
+    }
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -12880,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';
@@ -12986,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) {
@@ -13020,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)
@@ -14341,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) {
@@ -14395,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.
@@ -14543,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() {
@@ -14571,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) {
@@ -14657,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
@@ -14739,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');
@@ -14856,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
@@ -16131,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;
@@ -16414,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();