fraim-hub 2.0.333 → 2.0.335

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fraim-hub",
-  "version": "2.0.333",
+  "version": "2.0.335",
   "description": "FRAIM Hub local companion package.",
   "author": "Sid Mathur <sid.mathur@gmail.com>",
   "homepage": "https://github.com/mathursrus/FRAIM#readme",
@@ -221,7 +221,7 @@
     "electron-updater": "^6.8.9",
     "express": "^5.2.1",
     "extract-zip": "^2.0.1",
-    "fraim": "2.0.333",
+    "fraim": "2.0.335",
     "mongodb": "^7.0.0",
     "node-cron": "4.2.1",
     "node-edge-tts": "^1.2.10",

package/public/ai-hub/index.html

@@ -437,12 +437,12 @@
           </div>
 
           <div class="manage-panel-shell">
-          <details class="panel-details panel-details--thread" id="thread-panel" open>
-            <summary>
+          <section class="panel-details panel-details--thread" id="thread-panel">
+            <div class="thread-header">
               <span class="panel-summary-copy">
                 <span class="panel-kicker" id="thread-panel-kicker">Manage</span>
               </span>
-            </summary>
+            </div>
             <!-- Issue #1065: find a passage inside the open conversation (R44-R46). A result that
                  promises "+6 more matches" is an unkept promise without this: the manager lands in
                  a thread that can run to hundreds of messages with no way to reach the match. -->
@@ -473,26 +473,13 @@
                 </div>
               </div>
             </div>
-          </details>
+          </section>
             <div class="manage-header-actions">
-              <button class="conversation-focus-btn" id="conversation-focus-btn" type="button" aria-label="Expand conversation" title="Expand conversation">&#8599;</button>
               <button class="micro-manage-toggle" id="micro-manage-toggle" type="button" role="switch" aria-checked="false" aria-controls="manage-body"><span>Micro-Manage</span><span class="micro-switch-track" aria-hidden="true"></span></button>
             </div>
           </div>
 
           <div class="support-stack">
-            <!-- Issue #770: single-run deliverables live here (a stable collapsible
-                 panel), not pinned to the bottom of the thread. Static-and-hidden,
-                 populated + toggled by renderDeliverablesPanel. -->
-            <details class="panel-details panel-details--deliverables" id="deliverables-panel" hidden>
-              <summary>
-                <span class="panel-summary-copy">
-                  <span class="panel-kicker">Deliverables</span>
-                  <span class="panel-summary-text" id="deliverables-summary"></span>
-                </span>
-              </summary>
-              <div class="panel-body" id="deliverables-body"></div>
-            </details>
             <!-- Issue #1292: when this conversation's own agent stops being available,
                  say so. The selector keeps holding that agent; it is never quietly
                  swapped for another one. Lives outside the composer controls so
@@ -519,23 +506,23 @@
             </div>
           </div>
 
-          <details class="panel-details panel-details--thread" id="ab-direct-thread-panel" open>
-            <summary>
+          <section class="panel-details panel-details--thread" id="ab-direct-thread-panel">
+            <div class="thread-header">
               <span class="panel-summary-copy">
                 <span class="panel-kicker">Direct output (raw)</span>
               </span>
-            </summary>
+            </div>
             <pre class="ab-direct-log" id="ab-direct-log"></pre>
-          </details>
+          </section>
 
           <div class="support-stack">
-            <details class="panel-details panel-details--coach" id="ab-direct-reply-panel" open>
-              <summary>
+            <section class="panel-details panel-details--coach" id="ab-direct-reply-panel">
+              <div class="thread-header">
                 <span class="panel-summary-copy">
                   <span class="panel-kicker">Reply to Direct agent</span>
-                  <span class="panel-summary-text" id="ab-direct-reply-summary">Open to send a follow-up</span>
+                  <span class="panel-summary-text" id="ab-direct-reply-summary">Send a follow-up</span>
                 </span>
-              </summary>
+              </div>
               <div class="panel-body">
                 <div class="coach">
                   <div class="coach-input">
@@ -544,7 +531,7 @@
                   </div>
                 </div>
               </div>
-            </details>
+            </section>
           </div>
         </div>
 
@@ -555,9 +542,7 @@
              visible even when no conversation is active"). Only the content
              ABOVE this div changes (idle placeholder, hire strip, thread, or
              the A/B compare panel); the composer itself never opens, closes,
-             or relocates - except into #conversation-focus-panels during
-             "expand conversation", handled by openConversationFocus/
-             closeConversationFocus alongside #thread-panel. -->
+             or relocates. -->
         <div id="persistent-composer">
           <div class="composer-suggestions" id="composer-suggestions" hidden>
             <div id="cp-results" class="cp-results-scroll">
@@ -589,14 +574,10 @@
               <button type="button" id="cp-armed-job-clear" aria-label="Change job">&times;</button>
             </div>
             <div class="staged-attachments" id="staged-attachments"></div>
-            <div class="review-actions" id="review-actions" hidden>
-              <button class="rb-approve" type="button" id="review-approve">&#10003; Approve</button>
-              <button class="rb-secondary" type="button" id="review-request-changes">&#8617; Request changes</button>
-              <span class="rb-handoff" id="review-handoff">Comment on the doc to leave inline notes, or type below to coach.</span>
-            </div>
+
             <div class="coach-input">
               <input type="file" id="attach-file-input" multiple accept="image/png,image/jpeg,image/gif,.pdf,.txt,.log" hidden>
-              <textarea id="coach-text" aria-label="Type an instruction" placeholder="Type a job name, /handle, or describe what you need..." data-placeholder-idle="Type a job name, /handle, or describe what you need..." data-placeholder-active="Coach this run, or type new instructions..." data-placeholder-armed="Now type what you want done..."></textarea>
+              <textarea id="coach-text" aria-label="Type an instruction" placeholder="Type a job name, /handle, or describe what you need..." data-placeholder-idle="Type a job name, /handle, or describe what you need..." data-placeholder-review="Reply to continue the run, or use Approve / Request changes above..." data-placeholder-active="Coach this run, or type new instructions..." data-placeholder-armed="Now type what you want done..."></textarea>
               <div class="composer-footer">
                 <button class="attach-btn" type="button" id="attach-btn" aria-label="Attach a file or screenshot" title="Attach a file or screenshot">&#128206;</button>
                 <div class="quick-coach-row composer-coach-actions" id="quick-coach-btns" hidden>
@@ -683,7 +664,7 @@
       </main>
     </div>
 
-    <p class="status-line" id="status-line" role="status" aria-live="polite"></p>
+
   </div>
 
         <!-- Issue #1065: search results replace the conversation panel while a query is active,
@@ -1130,19 +1111,6 @@
     </div>
   </div>
 
-  <!-- Issue #539: Command palette overlay — replaces 2-step modal as job-launch surface -->
-  <section class="conversation-focus-overlay" id="conversation-focus-overlay" role="dialog" aria-modal="true" aria-labelledby="conversation-focus-title" hidden>
-    <div class="conversation-focus-dialog">
-      <div class="conversation-focus-header">
-        <div class="conversation-focus-copy">
-          <strong id="conversation-focus-title">Focused conversation</strong>
-          <span id="conversation-focus-subtitle">Conversation thread and coaching</span>
-        </div>
-        <button class="conversation-focus-close" id="conversation-focus-close" type="button" aria-label="Close focused conversation">Close</button>
-      </div>
-      <div class="conversation-focus-panels" id="conversation-focus-panels"></div>
-    </div>
-  </section>
 
   <!-- Issue #1657 Treatment 3: #cp-modal is retired as a separate dialog.
        The ids below (cp-recent-list, cp-catalog-list, cp-agent-picker, etc.)
@@ -1265,7 +1233,15 @@
     </div>
   </div>
 
+  <div id="review-action-storage" hidden>
+            <div class="review-actions" id="review-actions" hidden>
+              <button class="rb-approve" type="button" id="review-approve">&#10003; Approve</button>
+              <button class="rb-secondary" type="button" id="review-request-changes">&#8617; Request changes</button>
+              <span class="rb-handoff" id="review-handoff">Comment on the doc to leave inline notes, or type below to coach.</span>
+            </div>
+  </div>
   <script src="./script.js?v=dark-status-20260721"></script>
   <script src="./remote-ui-loader.js?v=server-driven-ui-20260724"></script>
+
 </body>
 </html>

package/public/ai-hub/review.css

@@ -422,8 +422,6 @@
 .rev-item .rev-dismiss:hover { background: var(--soft); }
 
 /* ── #770: Deliverables panel body spacing for the relocated artifact strip. ── */
-#deliverables-panel .panel-body { padding-top: 8px; }
-#deliverables-panel .rc-artifact-strip { margin: 0; }
 
 /* ── R9: project-scoped learnings panel (over the workspace conversation) ── */
 .proj-learnings-panel {
@@ -633,3 +631,6 @@
   flex-direction: column;
   gap: 6px;
 }
+
+.review-turn .review-actions { border: 0; margin: 0; padding: 0; }
+.review-turn .rb-handoff { flex-basis: 100%; }

package/public/ai-hub/script.js

@@ -140,10 +140,9 @@ 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',
     'thread-panel', 'thread-panel-kicker', 'micro-manage-toggle', 'micro-return', 'micro-activity-state',
@@ -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',
@@ -366,8 +363,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) {
@@ -2181,6 +2177,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 +2321,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 +2349,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 +2369,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 +2390,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 +2416,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 +2436,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;
@@ -3856,18 +3859,6 @@ 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,
@@ -3908,110 +3899,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 +3917,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 +3942,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 +3985,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 +4135,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 +4164,7 @@ function renderActive() {
   renderTracker(conv);
   renderTotals(conv);
   renderManagerOversightBoard(conv);
-  renderDeliverablesPanel(conv);   // #770
+
   renderDelegationLedger(conv);
   syncConversationRefreshPolling();
   syncTemplatePickerVisibility();
@@ -4422,6 +4313,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 +5721,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 +5809,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 +5880,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 +5907,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 +6181,7 @@ function resizeComposerTextarea() {
 }
 
 function syncSendButton() {
+  syncReviewHint();
   resizeComposerTextarea();
   const conv = activeConversation();
   const hasText = els['coach-text'].value.trim().length > 0;
@@ -6981,37 +6895,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 +7204,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 +7276,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 +7807,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 +7824,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 +7844,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".
@@ -8553,7 +8535,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');
@@ -9087,6 +9069,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 +9188,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
@@ -9505,9 +9489,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() {
@@ -10418,25 +10440,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 +10555,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

package/public/ai-hub/styles.css

@@ -47,7 +47,7 @@
   /* z-index layers (ascending, avoid magic numbers in property declarations). */
   --z-cmd-palette: 9000;
   --z-dropdown-menu: 9100;
-  /* Job-viz modal must clear #composer-suggestions/.conversation-focus-overlay
+  /* Job-viz modal must clear #composer-suggestions
      (--z-cmd-palette). The #jv-tt tooltip portal (--z-jv-tt) must clear the
      modal so phase/skill popovers float above it when the modal is open. */
   --z-job-viz: 9200;
@@ -910,35 +910,6 @@ img.conv-employee-avatar {
 }
 .run-stop-btn:hover { background: #fee4e2; }
 .run-stop-btn:disabled { opacity: .55; cursor: default; }
-.conversation-focus-btn {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  font-size: 17px;
-  font-weight: 700;
-  line-height: 1;
-  color: var(--accent-strong);
-  background: var(--accent-soft);
-  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
-  border-radius: 8px;
-  padding: 0;
-  cursor: pointer;
-}
-.panel-details--thread .conversation-focus-btn {
-  margin-left: auto;
-}
-.conversation-focus-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-.conversation-focus-btn:focus-visible,
-.conversation-focus-close:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
 /* Job title inline with employee avatar — replaces the old separate h2 row */
 .conv-job-title {
   flex: 1;
@@ -2401,14 +2372,7 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 }
 .resume-command-copy:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
 
-.status-line {
-  margin: 0;
-  color: var(--muted);
-  font-size: 13px;
-  text-align: center;
-  min-height: 1.2em;
-}
-.status-line.error { color: var(--danger); }
+
 
 /* Modal */
 .modal-backdrop {
@@ -4216,37 +4180,22 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .workspace-conv #active-conv > .conv-topline,
 .workspace-conv #active-conv > .conversation-status { flex: 0 0 auto; }
 
-/* Manager/employee thread — the primary conversation. The "Ready for review"
-   card lives inside #messages, so it scrolls with the thread. Open thread grows
-   to fill spare height; collapsed it is just its summary bar. */
-.workspace-conv #thread-panel { flex: 0 0 auto; min-height: 0; }
-/* Open thread is the sole space-filler: it grows to take all height the support
-   stack does not need, and scrolls #messages internally. Collapsed it is just
-   its summary bar. */
-.workspace-conv #thread-panel[open] {
+/* The static Manage section fills spare height and scrolls messages internally. */
+.workspace-conv #thread-panel {
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   min-height: 120px;
 }
-.workspace-conv #thread-panel > summary { flex: 0 0 auto; }
-/* Chromium wraps <details> content in a ::details-content slot, so #messages is
-   not a direct flex child of the panel. Make the slot a column flex container
-   that fills the panel; then #messages can flex-grow and scroll inside it. */
-.workspace-conv #thread-panel[open]::details-content {
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.workspace-conv #thread-panel[open] #messages {
+.workspace-conv #thread-panel > .thread-header { flex: 0 0 auto; }
+/* The conversation body shrinks inside the static Manage section. */
+
+.workspace-conv #thread-panel #messages {
   flex: 1 1 0;
   min-height: 0;
   max-height: none;
   overflow-y: auto;
 }
-.workspace-conv #thread-panel:not([open]) #messages { display: none; }
 
 /* Both Manage views use the same flex slot; switching does not resize the pane. */
 #thread-panel .manage-body {
@@ -4257,7 +4206,6 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
   min-width: 0;
   overflow: hidden;
 }
-#thread-panel:not([open]) .manage-body { display: none; }
 #thread-panel .manage-activity {
   display: flex;
   flex-direction: column;
@@ -4280,10 +4228,9 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 
 /* Keep independent header controls outside the native disclosure button. */
 .manage-panel-shell { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
-.manage-panel-shell:has(#thread-panel:not([open])) { flex: 0 0 auto; }
 .manage-header-actions { position: absolute; top: 12px; right: 24px; display: flex; align-items: center; gap: 10px; }
-#thread-panel > summary { gap: 10px; min-height: 60px; padding-right: 190px; box-sizing: border-box; }
-#thread-panel > summary .panel-summary-copy { margin-right: auto; }
+#thread-panel > .thread-header { gap: 10px; min-height: 60px; padding-right: 190px; box-sizing: border-box; }
+#thread-panel > .thread-header .panel-summary-copy { margin-right: auto; }
 .micro-manage-toggle {
   display: inline-flex;
   align-items: center;
@@ -4308,8 +4255,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .micro-activity-state, .micro-return { margin: 0 16px 12px; color: var(--text); }
 .micro-return { align-self: flex-start; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; }
 @media (max-width: 480px) {
-  #thread-panel > summary { flex-wrap: wrap; }
-  .manage-header-actions .conversation-focus-btn { order: 1; }
+  #thread-panel > .thread-header { flex-wrap: wrap; }
   .manage-header-actions { right: 24px; }
 }
 
@@ -4359,14 +4305,6 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
   overflow-y: auto;
 }
 
-/* #770: Deliverables panel sizes to its content and scrolls internally when open,
-   mirroring the coach/micro support-stack panels. */
-.workspace-conv .support-stack > .panel-details--deliverables { flex: 0 0 auto; }
-.workspace-conv .support-stack > .panel-details--deliverables[open] > .panel-body {
-  max-height: clamp(120px, 22vh, 240px);
-  overflow-y: auto;
-}
-
 .workspace-conv #active-conv.has-delegation-board .delegation-ledger[open] .delegation-ledger-body {
   max-height: clamp(140px, 24vh, 260px);
 }
@@ -4391,125 +4329,6 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 .workspace-conv .support-stack > .panel-details,
 .workspace-conv .support-stack > .micro { margin-bottom: 0; }
 
-.conversation-focus-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-cmd-palette);
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  padding: 18px;
-  background: rgba(14, 21, 32, 0.42);
-  overflow: hidden;
-}
-.conversation-focus-overlay[hidden] {
-  display: none;
-}
-.conversation-focus-dialog {
-  width: min(1180px, 100%);
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface);
-  box-shadow: var(--shadow-lg);
-  padding: 12px;
-  overflow: hidden;
-}
-.conversation-focus-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex: 0 0 auto;
-  min-width: 0;
-}
-.conversation-focus-copy {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-.conversation-focus-copy strong {
-  color: var(--text);
-  font-size: 15px;
-}
-.conversation-focus-copy span {
-  color: var(--muted);
-  font-size: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.conversation-focus-close {
-  flex-shrink: 0;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-  color: var(--text);
-  font-size: 12px;
-  font-weight: 700;
-  padding: 7px 11px;
-  cursor: pointer;
-}
-.conversation-focus-close:hover {
-  border-color: var(--accent);
-  color: var(--accent-strong);
-}
-.conversation-focus-panels {
-  flex: 1 1 0;
-  min-height: 0;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-}
-.conversation-focus-panels #thread-panel {
-  margin: 0;
-  min-height: 0;
-}
-.conversation-focus-panels #thread-panel[open] {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-}
-.conversation-focus-panels #thread-panel[open]::details-content {
-  flex: 1 1 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.conversation-focus-panels #thread-panel[open] #messages {
-  flex: 1 1 0;
-  min-height: 0;
-  max-height: none;
-  overflow-y: auto;
-}
-.conversation-focus-panels #persistent-composer .coach {
-  min-height: 0;
-}
-.conversation-focus-panels #persistent-composer .coach-input textarea {
-  min-height: 68px;
-}
-.conversation-focus-panels:has(#thread-panel:not([open])) #persistent-composer,
-.conversation-focus-panels:has(#thread-panel:not([open])) #persistent-composer .coach,
-.conversation-focus-panels:has(#thread-panel:not([open])) #persistent-composer .coach-input {
-  flex: 1 1 0;
-}
-.conversation-focus-panels:has(#thread-panel:not([open])) #persistent-composer .coach {
-  display: flex;
-  flex-direction: column;
-}
-.conversation-focus-panels:has(#thread-panel:not([open])) #persistent-composer .coach-input textarea {
-  flex: 1 1 0;
-  min-height: 160px;
-}
-
 @media (max-width: 820px) {
   /* On narrow screens drop the fill model: panels flow naturally and the page
      scrolls, with each open body keeping a viewport-relative scroll cap. */
@@ -4518,7 +4337,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
     flex-direction: column;
     overflow: visible;
   }
-  .workspace-conv #thread-panel[open],
+  .workspace-conv #thread-panel,
   .workspace-conv .support-stack,
   .workspace-conv .support-stack:has(.micro[open]),
   .workspace-conv .support-stack > .micro[open] {
@@ -4526,7 +4345,7 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
     display: block;
     min-height: 0;
   }
-  .workspace-conv #thread-panel[open] #messages,
+  .workspace-conv #thread-panel #messages,
   .workspace-conv .support-stack > .micro[open] > .micro-log {
     flex: initial;
     height: auto;
@@ -4541,22 +4360,6 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 
 @media (max-width: 640px) {
   body.hub-shell { overflow-x: hidden; }
-  .conversation-focus-overlay {
-    padding: 8px;
-  }
-  .conversation-focus-dialog {
-    border-radius: 8px;
-    padding: 8px;
-  }
-  .conversation-focus-header {
-    align-items: flex-start;
-  }
-  .conversation-focus-copy span {
-    white-space: normal;
-  }
-  .conversation-focus-close {
-    padding: 7px 9px;
-  }
   .gs-rail { overflow-x: auto; padding-inline: 10px; }
   .hub-tabs { min-width: 0; }
   .htab { padding-inline: 14px; }
@@ -4605,9 +4408,9 @@ body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow:
 }
 
 @media (max-width: 820px) {
-  .workspace-conv #thread-panel[open] { max-height: none; }
-  .workspace-conv #thread-panel[open] .manage-body { height: clamp(180px, 36vh, 320px); flex: none; }
-  .workspace-conv #thread-panel[open] .manage-body #messages { flex: 1 1 0; height: auto; max-height: none; }
+  .workspace-conv #thread-panel { max-height: none; }
+  .workspace-conv #thread-panel .manage-body { height: clamp(320px, 44vh, 420px); flex: none; }
+  .workspace-conv #thread-panel .manage-body #messages { flex: 1 1 0; height: auto; max-height: none; }
 }
 
 /* Review surfaces */
@@ -6855,7 +6658,7 @@ img.eh-av { object-fit: cover; background: var(--surface); }
 /* ─── End Issue #1178 ────────────────────────────────────────────────────── */
 
 /* ─── Issue #1278: Job Visualization Modal ──────────────────────────────── */
-/* Must sit above #composer-suggestions/.conversation-focus-overlay
+/* Must sit above #composer-suggestions
    (var(--z-cmd-palette) = 9000) so the modal is reachable when opened from
    the persistent composer's catalog suggestions. Token: --z-job-viz. */
 #job-viz-modal { z-index: var(--z-job-viz); }
@@ -6950,7 +6753,7 @@ img.eh-av { object-fit: cover; background: var(--surface); }
    siblings get flex:1 so whichever is visible fills the remaining height and
    pushes the composer to the true bottom edge. */
 #empty { flex: 1; min-height: 0; overflow-y: auto; }
-#conversation:has(> #persistent-composer) { padding-bottom: 8px; }
+#conversation:has(> #persistent-composer) { padding-bottom: 0; }
 #persistent-composer {
   flex-shrink: 0;
   display: flex;
@@ -7096,3 +6899,31 @@ img.eh-av { object-fit: cover; background: var(--surface); }
 }
 #cp-armed-job-clear:hover { color: var(--text); }
 /* ─── End Issue #1657 Treatment 3 ────────────────────────────────────────── */
+
+/* Conversation panes remain open; only the transcript owns the scrolling area. */
+.thread-header { display: flex; align-items: center; padding: 12px 16px; flex: 0 0 auto; }
+#thread-panel > .thread-header { min-height: 48px; padding-right: 176px; }
+.manage-header-actions { top: 6px; right: 16px; }
+#conversation:has(> #persistent-composer) { padding-bottom: 0; }
+#run-state-pill[role="button"] { cursor: pointer; }
+#run-state-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+#deliverables-bar { position: sticky; bottom: 0; z-index: 2; flex: 0 0 auto; margin-top: auto; padding: 10px; background: var(--surface); border-top: 1px solid var(--line); }
+#deliverables-bar[hidden], .hub-status-notification[hidden] { display: none; }
+#deliverables-bar .rc-art-btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
+#deliverables-bar .rc-art-btn { overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
+.review-turn { flex: 0 0 auto; }
+.review-turn .bubble { min-width: 0; max-width: 100%; }
+.review-turn-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
+.review-resolution { font-size: 13px; color: var(--muted); }
+.hub-status-notification { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(480px, calc(100vw - 32px)); box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
+.hub-status-notification.error { border: 1px solid var(--danger); }
+.hub-status-notification button { flex: 0 0 auto; background: transparent; color: inherit; border: 0; cursor: pointer; font-size: 20px; }
+.hub-status-notification button:focus-visible { outline: 2px solid currentColor; }
+#ab-direct-thread-panel { display: flex; flex-direction: column; min-height: 0; }
+@media (max-width: 480px) {
+  #deliverables-bar .rc-artifact-strip { flex-direction: column; }
+  #deliverables-bar { max-height: 160px; overflow-y: auto; }
+  .review-turn .review-actions { flex-direction: column; align-items: stretch; }
+}
+
+:root[data-theme="dark"] #deliverables-bar .rc-art-btn:not(.ghost) { color: var(--bg); }