synabun 2.1.0 → 2.2.1

package/neural-interface/public/shared/ui-claude-panel.js

@@ -1,3 +1,5 @@
+import { t } from './i18n.js';
+import { answerWorkerQuestion, syncWorkerQuestionQueue } from './worker-questions.js';
 import { providerAuthSnapshot } from './ui-provider-auth.js';
 import { mountProviderTerminalAuth, providerApiKeyRequest, startProviderTerminalLogin } from './ui-provider-terminal-auth.js';
 import { accountName, accountSwitchPlan, accountText, tabAccountId, serverAccountId } from './account-view.js';
@@ -52,7 +54,7 @@ import { sanitizeStoredHtml } from './assistant/asst-sanitize.js';
 import { escapeHtml, classToken } from './cp/cp-markdown.js';
 import { rehydrateStoredTranscript } from './cp/cp-rehydrate.js';
 import { compactHolds, compactQueue, isCompactCommand, newConversation, nextQueued, ownsQueued, queuedRefusal, restoredQueue, QUEUED_REFUSAL_LINES } from './cp/cp-compose.js';
-import { scrubSavedTab, historyProjectOf, shownUuids, shownTail, snapshotVerdict, withStartConfig, historyOutcome, transcriptOwner, historyNotFoundText } from './cp/cp-restore.js';
+import { scrubSavedTab, historyProjectOf, shownUuids, shownTail, snapshotVerdict, withStartConfig, historyOutcome, transcriptOwner, historyNotFoundText, splitHistoryTail, replayTodosFromMessages, markHistoryRows, earlierHistoryRows, HISTORY_ROW as HISTORY_ROW_KEY, liveRows, queueHistoryLoad, historyGate, renderHistoryRowsInto, holdPendingResult, takePendingResult } from './cp/cp-restore.js';
 import { hasCapability, slashCommandRoute, bypassesPromptBuffer, idleEndsTurn, describeResult, describeTurnFooter, localCommandOutput, splitAssistantBlocks, normalizeSlashCommands, matchSlashCommands, listSlashCommands, slashMenuMaxHeight, splitCommandsByCapability, readInit, statusRows } from './cp/cp-events.js';
 import {
   renderSdkEvent, noteUnhandledEvent, applyEngineHello, renderCompactBoundary, markDeniedFromResult, endTurnRows,
@@ -282,7 +284,7 @@ const _snapshotsReady = fetchBlobNamespace('claude-snapshots')
 const EFFORT_LEVELS = ['off', 'low', 'medium', 'high', 'xhigh', 'max'];
 const EFFORT_LABELS = { off: 'Think', low: 'lo', medium: 'med', high: 'hi', xhigh: 'xhi', max: 'max' };
 const EFFORT_TITLES = {
-  off: 'Effort: model default (thinking not shown; /session can turn thinking off)',
+  off: 'Thinking off',
   low: 'Thinking: low',
   medium: 'Thinking: medium',
   high: 'Thinking: high',
@@ -417,6 +419,7 @@ function buildPanel() {
       </div>
       <div class="cp-input-area">
         <div class="cp-input-wrap">
+          <span class="cp-spin-ring" aria-hidden="true"><i></i></span>
           <div class="cp-image-preview" id="cp-image-preview"></div>
           <div class="cp-input-inner">
             <textarea class="cp-input" id="cp-input" placeholder="Message SynaBun..." rows="1" autocomplete="off" spellcheck="false"></textarea>
@@ -483,6 +486,10 @@ function injectStyles() {
       opacity: 1;
       overflow: visible;
     }
+    /* Windows: the shell is 92% opaque, so the blur behind it barely shows, yet Chromium recomputes it on every repaint
+       inside the panel (a transcript rendering, a stream). There it goes; the colour stays. */
+    html.platform-win32 .claude-panel,
+    html.desktop-titlebar--win32 .claude-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
     /* Raise panel above floating terminal windows while a dropdown is open
        so project/branch/recall menus aren't clipped behind them. */
     .claude-panel:has(.cp-dropdown.open) { z-index: 99999; }
@@ -1055,26 +1062,17 @@ function injectStyles() {
       margin-top: 8px; transition: opacity 0.3s, border-color 0.2s, box-shadow 0.3s;
     }
     .perm-card { position: relative; }
-    .perm-card::before {
-      content: '';
-      position: absolute; inset: 0;
-      border-radius: 8px;
-      padding: 1px;
-      pointer-events: none;
+    /* A card that waits on you turns an amber ring inside its edge: the shared .cp-spin-ring (with the
+       composer's, below), turning only while the card is .active-perm. */
+    .perm-card > .cp-spin-ring { border-radius: 8px; }
+    .perm-card > .cp-spin-ring > i {
       background: conic-gradient(
-        from var(--cp-border-angle, 0deg),
         rgba(245,180,60,0.0) 0%,
         rgba(245,180,60,0.55) 25%,
         rgba(245,180,60,0.1) 50%,
         rgba(245,180,60,0.55) 75%,
         rgba(245,180,60,0.0) 100%
       );
-      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      mask-composite: exclude;
-      opacity: 0;
-      transition: opacity 0.4s;
     }
     .perm-card.active-perm {
       border-color: rgba(245,180,60,0.25);
@@ -1082,9 +1080,10 @@ function injectStyles() {
       box-shadow: 0 0 16px rgba(245,180,60,0.08), 0 0 40px rgba(245,180,60,0.04);
       animation: cp-perm-glow 2.5s ease-in-out infinite;
     }
-    .perm-card.active-perm::before {
-      opacity: 1;
-      animation: cp-border-spin 3s linear infinite;
+    .perm-card.active-perm > .cp-spin-ring { opacity: 1; }
+    .perm-card.active-perm > .cp-spin-ring > i {
+      animation: cp-spin-ring-turn 3s linear infinite;
+      will-change: rotate;
     }
     .perm-card:hover { border-color: var(--b-light); }
     .perm-card.active-perm:hover { border-color: rgba(245,180,60,0.4); }
@@ -1228,47 +1227,64 @@ function injectStyles() {
       transition: background 0.4s;
       min-width: 0;
     }
-    .cp-input-wrap::before {
-      content: '';
+    /* ── Spinning border ring (composer focus, a waiting permission card) ──
+       A conic gradient turning inside the 1px edge, the mask keeping only the ring. The gradient is a
+       square box that turns (rotate, run by the compositor) under the mask, and only while its owner's
+       state is on; an animated custom property (the old --cp-border-angle, @property + a conic gradient
+       from it) restyled and repainted the owner on the main thread 60 times a second. The ring is a size
+       container and the square 142cqmax + 4px, wider than the owner's diagonal at any shape, so what
+       the mask shows is the same conic gradient at every angle. Markup: <span class="cp-spin-ring"
+       aria-hidden="true"><i></i></span>, the owner's first child. */
+    .cp-spin-ring {
       position: absolute; inset: 0;
-      border-radius: 14px;
       padding: 1px;
+      overflow: hidden;
       pointer-events: none;
+      container-type: size;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+      opacity: 0;
+      transition: opacity 0.4s;
+    }
+    .cp-spin-ring > i {
+      position: absolute; left: 50%; top: 50%;
+      width: calc(142cqmax + 4px);
+      aspect-ratio: 1;
+      translate: -50% -50%;
+    }
+    @keyframes cp-spin-ring-turn {
+      to { rotate: 360deg; }
+    }
+    body.ui-interacting .cp-spin-ring > i { animation-play-state: paused !important; }
+    /* Reduced motion: the ring holds still where the turn starts (the focus / waiting look stays). */
+    @media (prefers-reduced-motion: reduce) {
+      .cp-spin-ring > i { animation: none !important; will-change: auto !important; }
+    }
+    .cp-input-wrap > .cp-spin-ring { border-radius: 14px; }
+    .cp-input-wrap > .cp-spin-ring > i {
       background: conic-gradient(
-        from var(--cp-border-angle, 0deg),
         rgba(212,162,127,0.0) 0%,
         rgba(212,162,127,0.35) 25%,
         rgba(212,162,127,0.10) 50%,
         rgba(212,162,127,0.35) 75%,
         rgba(212,162,127,0.0) 100%
       );
-      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      mask-composite: exclude;
-      opacity: 0;
-      transition: opacity 0.4s;
     }
-    .cp-input-wrap:focus-within::before {
-      opacity: 1;
-      animation: cp-border-spin 3s linear infinite;
+    .cp-input-wrap:focus-within > .cp-spin-ring { opacity: 1; }
+    .cp-input-wrap:focus-within > .cp-spin-ring > i {
+      animation: cp-spin-ring-turn 3s linear infinite;
+      will-change: rotate;
     }
     .cp-input-wrap:focus-within {
       background: rgba(212,162,127,0.03);
       box-shadow: 0 0 20px rgba(212,162,127,0.04), 0 0 60px rgba(212,162,127,0.015);
     }
-    @keyframes cp-border-spin {
-      to { --cp-border-angle: 360deg; }
-    }
     @keyframes cp-perm-glow {
       0%, 100% { box-shadow: 0 0 16px rgba(245,180,60,0.08), 0 0 40px rgba(245,180,60,0.04); }
       50% { box-shadow: 0 0 20px rgba(245,180,60,0.14), 0 0 50px rgba(245,180,60,0.07); }
     }
-    @property --cp-border-angle {
-      syntax: '<angle>';
-      initial-value: 0deg;
-      inherits: false;
-    }
 
     .cp-input-inner {
       display: flex; align-items: flex-end;
@@ -1768,8 +1784,8 @@ function injectStyles() {
       pointer-events: auto;
       width: 0; opacity: 0; overflow: hidden;
       background: rgba(18, 18, 20, 0.92);
-      backdrop-filter: blur(60px) saturate(1.5);
-      -webkit-backdrop-filter: blur(60px) saturate(1.5);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
       border: 0.5px solid rgba(255,255,255,0.06);
       border-radius: 14px;
       box-shadow:
@@ -1782,7 +1798,19 @@ function injectStyles() {
       transition: width 0.22s cubic-bezier(0.2,0,0.2,1), opacity 0.18s;
       max-height: 100%;
     }
-    .cp-todo-dock.is-open .cp-todo-drawer { width: 260px; opacity: 1; }
+    .cp-todo-dock.is-open .cp-todo-drawer {
+      width: 260px; opacity: 1;
+      backdrop-filter: blur(60px) saturate(1.5);
+      -webkit-backdrop-filter: blur(60px) saturate(1.5);
+    }
+    html.platform-win32 .cp-todo-tag,
+    html.desktop-titlebar--win32 .cp-todo-tag,
+    html.platform-win32 .cp-todo-dock.is-open .cp-todo-drawer,
+    html.desktop-titlebar--win32 .cp-todo-dock.is-open .cp-todo-drawer {
+      background: rgba(18, 18, 20, 0.96);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
     .cp-todo-dock.is-open .cp-todo-tag { display: none; }
 
     .cp-todo-drawer .cp-todo-head {
@@ -2283,52 +2311,53 @@ function injectStyles() {
     }
 
     /* ── Claude session pills in shared tray ── */
-    @property --cp-pill-angle {
-      syntax: '<angle>';
-      initial-value: 0deg;
-      inherits: false;
-    }
     .cp-session-pill {
       position: relative;
       overflow: hidden;
       border-color: rgba(212, 162, 127, 0.14);
       transition: border-color 0.2s;
     }
-    .cp-session-pill::before {
-      content: '';
+    /* A working pill's ring: a conic gradient turning inside the 1px border (the mask keeps only the
+       ring). The gradient is a square box that turns (rotate, run by the compositor) under the mask; an
+       animated custom property (the old --cp-pill-angle) repainted the pill on the main thread every
+       frame for as long as a session worked. The square is wider than the pill's diagonal, so the ring
+       is the same conic gradient at every angle. */
+    .cp-pill-ring {
       position: absolute; inset: 0;
+      display: none;
       border-radius: 8px;
       padding: 1px;
+      overflow: hidden;
       pointer-events: none;
-      background: transparent;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask-composite: exclude;
-      opacity: 0;
     }
-    .cp-session-pill.cp-pill-running {
-      border-color: transparent;
-    }
-    .cp-session-pill.cp-pill-running::before {
+    .cp-pill-ring > i {
+      position: absolute; left: 50%; top: 50%;
+      width: calc(100% + 32px);
+      aspect-ratio: 1;
+      translate: -50% -50%;
       background: conic-gradient(
-        from var(--cp-pill-angle, 0deg),
         rgba(212,162,127,0.0) 0%,
         rgba(212,162,127,0.6) 25%,
         rgba(212,162,127,0.12) 50%,
         rgba(212,162,127,0.6) 75%,
         rgba(212,162,127,0.0) 100%
       );
-      animation: cp-pill-border-spin 2.4s linear infinite;
-      opacity: 1;
+      animation: cp-pill-ring-turn 2.4s linear infinite;
+    }
+    .cp-session-pill.cp-pill-running {
+      border-color: transparent;
     }
-    @keyframes cp-pill-border-spin {
-      to { --cp-pill-angle: 360deg; }
+    .cp-session-pill.cp-pill-running .cp-pill-ring { display: block; }
+    @keyframes cp-pill-ring-turn {
+      to { rotate: 360deg; }
     }
     .cp-session-pill:hover { border-color: rgba(212, 162, 127, 0.28); }
-    .cp-session-pill:hover.cp-pill-running::before {
+    .cp-session-pill:hover .cp-pill-ring > i {
       background: conic-gradient(
-        from var(--cp-pill-angle, 0deg),
         rgba(212,162,127,0.0) 0%,
         rgba(212,162,127,0.8) 25%,
         rgba(212,162,127,0.20) 50%,
@@ -2336,6 +2365,19 @@ function injectStyles() {
         rgba(212,162,127,0.0) 100%
       );
     }
+    html.platform-win32 .cp-session-pill.cp-pill-running,
+    html.desktop-titlebar--win32 .cp-session-pill.cp-pill-running {
+      border-color: rgba(212, 162, 127, 0.42);
+    }
+    html.platform-win32 .cp-session-pill.cp-pill-running:hover,
+    html.desktop-titlebar--win32 .cp-session-pill.cp-pill-running:hover {
+      border-color: rgba(212, 162, 127, 0.62);
+    }
+    html.platform-win32 .cp-session-pill.cp-pill-running .cp-pill-ring,
+    html.desktop-titlebar--win32 .cp-session-pill.cp-pill-running .cp-pill-ring {
+      display: none;
+    }
+    body.ui-interacting .cp-pill-ring > i { animation-play-state: paused; }
     .cp-session-pill .term-minimized-pill-icon { color: rgba(212, 162, 127, 0.45); transition: color 0.2s; }
     .cp-session-pill.cp-pill-running .term-minimized-pill-icon { color: rgba(212, 162, 127, 1); }
     .cp-session-pill:hover .term-minimized-pill-icon { color: rgba(212, 162, 127, 0.85); }
@@ -2370,6 +2412,12 @@ function injectStyles() {
       pointer-events: none;
     }
     @keyframes cp-pill-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
+    /* Reduced motion: the ring, the dot and the edge hold still (the working look stays). */
+    @media (prefers-reduced-motion: reduce) {
+      .cp-pill-ring > i,
+      .cp-session-pill.cp-pill-running .term-minimized-pill-label::before,
+      .cp-session-pill.cp-pill-running::after { animation: none; }
+    }
 
     /* ── Think intensity toggle ── */
     /* ── Shared toggle base ── */
@@ -2802,6 +2850,13 @@ function _effortLevelsForModel() {
   return ['off', ...advertised.filter(id => id !== 'off')];
 }
 
+// Whether the tab's model (the selector's, for the active tab) has effort levels.
+function _modelSupportsEffort(tab) {
+  if (tab === activeTab()) return _effortLevelsForModel().length > 1;
+  const model = tab?.model ? _models.find(m => m.id === tab.model) : null;
+  return !Array.isArray(model?.effortLevels) || model.effortLevels.some(id => id !== 'off');
+}
+
 // Some models have no thinking at all (Haiku). Disable the toggle and force 'off'
 // rather than passing a --effort the CLI will ignore.
 function _syncThinkAvailability() {
@@ -2922,7 +2977,7 @@ function newTabState(sessionId = null, label = 'New chat', id = null) {
   };
 }
 
-function createTab(sessionId = null, label = 'New chat', { autoSwitch = true, id = null } = {}) {
+function createTab(sessionId = null, label = 'New chat', { autoSwitch = true, id = null, deferHistory = false } = {}) {
   if (_tabs.length >= MAX_TABS) return null;
   const tab = newTabState(sessionId, label, id);
   // Create messages div — kept DETACHED until the tab activates. Inactive
@@ -2937,14 +2992,17 @@ function createTab(sessionId = null, label = 'New chat', { autoSwitch = true, id
   msgDiv.innerHTML = `<div class="cp-empty"><div class="cp-empty-logo">${CLAUDE_ICON}</div><span class="cp-empty-name">Claude</span><span class="cp-empty-hint">Send a message to start</span></div>`;
   tab.messagesEl = msgDiv;
   tab.scrollController = createStickyScrollController(msgDiv, { active: false });
-  // Connect WebSocket
+  // Connect WebSocket (every tab, active or not: a restored tab reattaches to the background agents,
+  // shells and wakeups its session kept on the server).
   connectTab(tab);
   // Create pill (rendered in shared tray, not inside panel)
   tab.pillEl = _createTrayPill(tab);
   _paintTemporary(tab);
   _tabs.push(tab);
   if (autoSwitch) switchTab(_tabs.length - 1);
-  if (sessionId) loadSessionHistory(sessionId, tab.messagesEl);
+  // A restored background tab loads its transcript when it is first shown (switchTab), not all at once at panel open.
+  if (sessionId && deferHistory) tab._historyDeferred = sessionId;
+  if (sessionId && !deferHistory) loadSessionHistory(sessionId, tab.messagesEl);
   renderPills();
   if (autoSwitch) saveTabs();
   return tab;
@@ -3095,7 +3153,9 @@ function switchTab(idx) {
     const items = _models.map(m => ({ value: m.id, label: m.label }));
     const modelVal = _resolveModelValue(items, tab.model || _getDefaultModel());
     ddPopulateModels($model, items, modelVal);
-    if (modelVal && modelVal !== tab.model) { tab.model = modelVal; saveTabs(); }
+    // The unverified fallback list (the CLI not asked yet: /api/claude/config answers at once) never
+    // rewrites a tab's model; refreshModels() puts the real list in and settles it.
+    if (modelVal && modelVal !== tab.model && _modelsSource !== 'fallback') { tab.model = modelVal; saveTabs(); }
   }
   if ($think && tab.effort) _setEffort($think, tab.effort);
   _syncThinkAvailability();
@@ -3117,6 +3177,10 @@ function switchTab(idx) {
   populateModeDropdown(_panel?.querySelector('#cp-mode'), tab);
   _renderAccountMenu();
   _paintTemporary(tab);
+  if (tab._historyDeferred && tab._historyDeferred === tab.sessionId && !tab.automationRunId) {
+    tab._historyDeferred = false;
+    loadSessionHistory(tab.sessionId, tab.messagesEl);
+  }
   saveTabs();
 }
 
@@ -3191,6 +3255,7 @@ function _createTrayPill(tab) {
   pill.className = 'term-minimized-pill cp-session-pill';
   pill.dataset.tabId = tab.id;
   pill.innerHTML = `
+    <span class="cp-pill-ring" aria-hidden="true"><i></i></span>
     <span class="term-minimized-pill-icon">${_CP_ICON_SVG}</span>
     <span class="term-minimized-pill-label">${escH(tab.label)}</span>
     <button class="term-minimized-pill-close" data-tooltip="Close" data-tooltip-pos="top">&times;</button>
@@ -3414,8 +3479,23 @@ function _scrubStaleTabState(key) {
   }
 }
 
+// A restored tab that was working (a turn, a question, background agents or shells) can get live rows
+// as soon as its socket reattaches: its transcript loads at once, ahead of them. An idle one waits until
+// it is shown (switchTab), so opening the panel does not fetch and render every tab's transcript.
+function _loadHistoryIfWorking(tab, saved) {
+  if (!tab._historyDeferred || tab._historyDeferred !== tab.sessionId) return;
+  if (!(saved?.running || saved?.needsYou || Number(saved?.backgroundWork) > 0)) return;
+  tab._historyDeferred = false;
+  loadSessionHistory(tab.sessionId, tab.messagesEl);
+}
+
 function restoreTabs() {
   _cleanStaleWindows();
+  const pickRestoredTabIdx = (activeIdx) => {
+    const pendingId = globalThis.__synabunPendingTab?.provider === 'claude' ? globalThis.__synabunPendingTab.tabId : '';
+    const pendingIdx = pendingId ? _tabs.findIndex(t => t.id === pendingId || t.sessionId === pendingId) : -1;
+    return pendingIdx >= 0 ? pendingIdx : Math.min(activeIdx || 0, _tabs.length - 1);
+  };
   // Try window-scoped tabs first
   try {
     const raw = storage.getItem(STOR.tabs);
@@ -3424,7 +3504,7 @@ function restoreTabs() {
       if (data.tabs?.length) {
         for (const saved of data.tabs) {
           if (saved.automationActive && saved.automationOwnerId !== nativeLoopWindowId) continue;
-          const t = createTab(saved.automationRunId ? null : saved.sessionId, saved.label, { autoSwitch: false, id: saved.id });
+          const t = createTab(saved.automationRunId ? null : saved.sessionId, saved.label, { autoSwitch: false, id: saved.id, deferHistory: true });
           if (t && saved.automationRunId) t.sessionId = saved.sessionId || null;
           if (t && saved.sessionCost) t.sessionCost = saved.sessionCost;
           if (t && saved.running && !saved.automationRunId) t._wasRunning = true; // trigger reattach on WS open
@@ -3448,9 +3528,10 @@ function restoreTabs() {
           if (t && saved.automationRunId) t.automationActive = !!saved.automationActive;
           if (t && saved.automationRunId) t.automationOwnerId = saved.automationOwnerId || null;
           if (t && saved.releasedRunId && !saved.automationRunId) t.releasedRunId = saved.releasedRunId;
+          if (t) _loadHistoryIfWorking(t, saved);
         }
         if (_tabs.length) {
-          switchTab(Math.min(data.activeIdx || 0, _tabs.length - 1));
+          switchTab(pickRestoredTabIdx(data.activeIdx));
           return;
         }
       }
@@ -3464,7 +3545,7 @@ function restoreTabs() {
       if (data.tabs?.length) {
         for (const saved of data.tabs) {
           if (saved.automationActive && saved.automationOwnerId !== nativeLoopWindowId) continue;
-          const t = createTab(saved.automationRunId ? null : saved.sessionId, saved.label, { autoSwitch: false, id: saved.id });
+          const t = createTab(saved.automationRunId ? null : saved.sessionId, saved.label, { autoSwitch: false, id: saved.id, deferHistory: true });
           if (t && saved.automationRunId) t.sessionId = saved.sessionId || null;
           if (t && saved.sessionCost) t.sessionCost = saved.sessionCost;
           if (t && saved.running && !saved.automationRunId) t._wasRunning = true;
@@ -3475,9 +3556,10 @@ function restoreTabs() {
           if (t && saved.automationRunId) t.automationRunId = saved.automationRunId;
           if (t && saved.automationRunId) t.automationActive = !!saved.automationActive;
           if (t && saved.automationRunId) t.automationOwnerId = saved.automationOwnerId || null;
+          if (t) _loadHistoryIfWorking(t, saved);
         }
         if (_tabs.length) {
-          switchTab(Math.min(data.activeIdx || 0, _tabs.length - 1));
+          switchTab(pickRestoredTabIdx(data.activeIdx));
           // Don't remove legacy key — other windows may still need it during rollout
           return;
         }
@@ -4512,6 +4594,8 @@ function writeSessionSnapshot(tab) {
   const sid = tab?.sessionId || null;
   const $msgs = tab?.messagesEl || null;
   if (!sid || !$msgs) return;
+  // Not loaded yet (a restored tab not shown so far), or half rebuilt: what is on screen is not the transcript.
+  if (tab._historyDeferred || tab._historyRendering || tab._historyHold) return;
   const html = providerAuthSnapshot($msgs);
   if (!html.trim()) return;
   // Skip snapshot if the transcript only contains the empty-state placeholder
@@ -4686,9 +4770,14 @@ function _renderHistoryRow(tab, $msgs, m) {
       if (typeof t === 'object' && t.name) {
         // A question or a plan that was already answered: a record of it, not
         // the interactive card (and not a JSON dump).
-        if (t.name === 'AskUserQuestion') wrap.appendChild(buildHistoryAskCard(t));
-        else if (t.name === 'ExitPlanMode') wrap.appendChild(buildHistoryPlanCard(t));
-        else wrap.appendChild(buildTool(t, tab));
+        let card;
+        if (t.name === 'AskUserQuestion') card = buildHistoryAskCard(t);
+        else if (t.name === 'ExitPlanMode') card = buildHistoryPlanCard(t);
+        else card = buildTool(t, tab);
+        if (card) {
+          if (t.id && $msgs._replayCards instanceof Map) $msgs._replayCards.set(String(t.id), card);
+          wrap.appendChild(card);
+        }
       } else {
         // Legacy: tool name string only
         const tName = String(t);
@@ -4704,20 +4793,33 @@ function _renderHistoryRow(tab, $msgs, m) {
       }
     }
     el.appendChild(wrap); $msgs.appendChild(el);
+    // Live results that arrived for these cards while the replay had not built them.
+    if (live && tab._pendingResults instanceof Map && tab._pendingResults.size) {
+      for (const t of m.tools || []) {
+        const ev = t?.id ? takePendingResult(tab, t.id) : null;
+        if (ev) { try { updateToolResult(tab, ev); } catch {} }
+      }
+    }
     return;
   }
   if (m.role === 'tool_result' && m.toolUseId) {
     if (fillHistoryCard($msgs, m)) return;
+    const indexedCard = $msgs._replayCards instanceof Map ? $msgs._replayCards.get(String(m.toolUseId)) : null;
     if (live) {
-      updateToolResult(tab, { type: 'tool_result', tool_use_id: m.toolUseId, content: m.text || '', is_error: !!m.isError, tool_use_result: m.structured });
+      // Marked as a replayed result: it is not kept as pending, and its todos are already in the precomputed list.
+      tab._replayRow = true;
+      try { updateToolResult(tab, { type: 'tool_result', tool_use_id: m.toolUseId, content: m.text || '', is_error: !!m.isError, tool_use_result: m.structured }); }
+      finally { tab._replayRow = false; }
       // A subagent of a past session: its own transcript loads when the card is opened.
       const agentId = m.structured?.agentId;
-      const agentCard = agentId && sessionActionsAvailable(tab) ? $msgs.querySelector(`.cp-agent-card[data-tool-id="${CSS.escape(m.toolUseId)}"]`) : null;
+      const agentCard = agentId && sessionActionsAvailable(tab)
+        ? ((indexedCard?.classList?.contains('cp-agent-card') ? indexedCard : null) || $msgs.querySelector(`.cp-agent-card[data-tool-id="${CSS.escape(m.toolUseId)}"]`))
+        : null;
       if (agentCard) _wireSubagentTranscript(tab, agentCard, String(agentId));
       return;
     }
     // No tab behind this container: plain text into the card.
-    const card = $msgs.querySelector(`.tool-card[data-tool-id="${CSS.escape(m.toolUseId)}"]`);
+    const card = (indexedCard?.matches?.('.tool-card') ? indexedCard : null) || $msgs.querySelector(`.tool-card[data-tool-id="${CSS.escape(m.toolUseId)}"]`);
     const rLbl = card?.querySelector('.tool-result-label');
     const rSec = card?.querySelector('.tool-result-content');
     if (rSec && m.text) {
@@ -4822,12 +4924,19 @@ function _addHistoryPager(tab, $msgs, sid, project, data) {
       // Render at the end (the live renderers append), then move the block up.
       const tail = $msgs.lastElementChild;
       tab._replaying = (tab._replaying || 0) + 1;
+      const replayCards = new Map();
+      $msgs._replayCards = replayCards;
       try { for (const m of page.messages) _renderHistoryRow(tab, $msgs, m); }
-      finally { tab._replaying = Math.max(0, (tab._replaying || 1) - 1); }
+      finally {
+        if ($msgs._replayCards === replayCards) delete $msgs._replayCards;
+        tab._replaying = Math.max(0, (tab._replaying || 1) - 1);
+      }
       const added = [];
       for (let n = tail?.nextElementSibling; n; n = n.nextElementSibling) added.push(n);
+      markHistoryRows(added, 'earlier'); // history: a later rebuild replaces it
       const anchor = note.nextElementSibling;
       for (const n of added) $msgs.insertBefore(n, anchor);
+      try { collapseAdjacentMcpTools($msgs); } catch {}
       try { settleReplayedCards($msgs, tab); } catch {}
       // What the user asked to see must survive the next prune.
       $msgs._pruneCap = $msgs.childElementCount + MAX_MSG_CHILDREN;
@@ -4860,20 +4969,42 @@ function _dropSessionSnapshot(sid) {
   try { delete _sessionSnapshots[sid]; deleteBlob('claude-snapshots', sid); } catch {}
 }
 
-async function loadSessionHistory(sid, $msgs) {
+// Loads of one container run one at a time, the newest asked for wins (queueHistoryLoad, cp/cp-restore.js).
+// The tab that owns the container is taken once, here: per-tab state (todos, usage, the snapshot) never goes
+// to another tab, and a tab closed meanwhile stops the load. While any load of a tab runs, its live
+// transcript messages wait in its buffer (historyGate in handleTabMsg) and play after the history.
+function loadSessionHistory(sid, $msgs) {
   if (!$msgs) $msgs = activeTab()?.messagesEl;
-  if (!$msgs) return;
+  if (!$msgs) return Promise.resolve();
+  const ownerTab = _tabs.find(t => t.messagesEl === $msgs) || null;
+  if (ownerTab && ownerTab._historyDeferred === sid) ownerTab._historyDeferred = false;
+  if (ownerTab) ownerTab._historyHold = (ownerTab._historyHold || 0) + 1;
+  const job = queueHistoryLoad($msgs, (isStale, ticket) => {
+    const stale = () => isStale() || !!(ownerTab && (ownerTab.closed || ownerTab.messagesEl !== $msgs));
+    if (stale()) return;
+    return _loadSessionHistoryNow(sid, $msgs, ownerTab, stale, ticket);
+  });
+  return job.finally(() => {
+    if (!ownerTab) return;
+    ownerTab._historyHold = Math.max(0, (ownerTab._historyHold || 1) - 1);
+    if (!ownerTab._historyHold && ownerTab._msgBuffer?.length && !ownerTab.closed) _flushMsgBuffer(ownerTab);
+  });
+}
+
+async function _loadSessionHistoryNow(sid, $msgs, ownerTab, stale, ticket) {
   // Try local snapshot first — exact replay of the live render, lossless.
   // Snapshot hydration is async (blob store); wait for it so a fresh page
   // load doesn't miss its own snapshots and rebuild from JSONL needlessly.
   try { await _snapshotsReady; } catch {}
+  if (stale()) return;
   const snap = getSessionSnapshot(sid);
   let restored = null; // the rows the snapshot put back, when a rebuild follows it
   if (snap && snap.html) {
-    const tab = _tabs.find(t => t.messagesEl === $msgs) || activeTab();
+    const tab = ownerTab;
     $msgs._historySid = sid; // the session this transcript shows (a restored pager loads its earlier pages)
     if (renderStoredSession(snap, $msgs, tab)) {
       restored = [...$msgs.children];
+      markHistoryRows(restored, ticket); // the next rebuild replaces them
       scrollEnd();
       // Background refresh: pull latest JSONL in case the session continued in
       // another window, or was rewound there. The probe reads what the owning
@@ -4889,6 +5020,7 @@ async function loadSessionHistory(sid, $msgs) {
         if (tab?.accountId) params.set('account', tab.accountId);
         const probe = await fetch(`/api/claude-code/sessions/${encodeURIComponent(sid)}/messages?${params}`);
         const probeData = await probe.json();
+        if (stale()) return;
         // `visible` counts prompts and replies only (a server that predates it sends `total`).
         if ((probeData?.visible ?? probeData?.total ?? 0) > (snap.itemCount || 0) + 2) {
           // Upstream has materially more content — fall through to full rebuild
@@ -4904,8 +5036,8 @@ async function loadSessionHistory(sid, $msgs) {
       } catch { return; }
     }
   }
-  const accountTab = _tabs.find(t => t.messagesEl === $msgs);
-  let project = _historyProject(accountTab || activeTab()) || undefined;
+  const accountTab = ownerTab;
+  let project = _historyProject(ownerTab || activeTab()) || undefined;
   const readHistory = async (from) => {
     const params = new URLSearchParams({ limit: '500' });
     if (from) params.set('project', from);
@@ -4916,6 +5048,7 @@ async function loadSessionHistory(sid, $msgs) {
   };
   try {
     let data = await readHistory(project);
+    if (stale()) return;
     // The tab's Claude account was removed in Settings: say so. Its transcripts
     // are not looked for under the default account (another identity's folder).
     if (data.code === 'account_unavailable') {
@@ -4932,6 +5065,7 @@ async function loadSessionHistory(sid, $msgs) {
     if (historyOutcome(data) === 'not_in_project') {
       const owner = await _transcriptOwner(sid, project, accountTab?.accountId || '');
       const moved = owner ? await readHistory(owner) : null;
+      if (stale()) return;
       if (moved && historyOutcome(moved) !== 'not_in_project' && historyOutcome(moved) !== 'not_found' && historyOutcome(moved) !== 'refused') {
         data = moved;
         project = owner;
@@ -4963,29 +5097,66 @@ async function loadSessionHistory(sid, $msgs) {
       return;
     }
     // Chunked rebuild: rendering 500 messages in one task froze the UI during
-    // cold restore / orphan resync. The generation counter aborts a stale
-    // rebuild when a newer one starts (reattach resync, in-tab session switch,
-    // tab close) — the newer run owns the transcript.
-    const ownerTab = _tabs.find(t => t.messagesEl === $msgs) || activeTab();
-    const gen = ownerTab ? (ownerTab._historyGen = (ownerTab._historyGen || 0) + 1) : 0;
-    // The rebuild replaces the snapshot that was put back above (only those
-    // rows: what a live turn appended meanwhile stays).
+    // cold restore / orphan resync. A newer load of this container (reattach resync,
+    // in-tab session switch) or the tab closing stops this one at its next yield.
+    // What an earlier rebuild of this container left (finished, stopped half way, or
+    // the snapshot put back above) is taken out: never a second copy after it.
+    for (const node of earlierHistoryRows($msgs.children, ticket)) node.remove();
     if (restored) for (const node of restored) node.remove();
+    // Rows that came live before the load (the history goes before them: it is older).
+    const live = liveRows($msgs.children);
+    const liveAnchor = live[0] || null;
+    const liveSet = new Set(live);
+    const { head, tail } = !restored ? splitHistoryTail(data.messages, 40) : { head: [], tail: data.messages };
+    // Renders rows at the end, marks them as this load's, and moves them before `before`.
+    const renderRows = (rows, before) => renderHistoryRowsInto($msgs, rows, (m) => _renderHistoryRow(ownerTab, $msgs, m), { before, ticket, skip: liveSet });
     // Replay goes through the live renderers (tool cards, typed results), marked
     // so it leaves no activity behind: no hook-strip entries, no statusline verb.
     if (ownerTab) ownerTab._replaying = (ownerTab._replaying || 0) + 1;
+    if (ownerTab) ownerTab._historyRendering = (ownerTab._historyRendering || 0) + 1;
+    if (ownerTab && head.length) {
+      const precomputedTodos = replayTodosFromMessages(data.messages, ownerTab.todos);
+      if (precomputedTodos) ownerTab.todos = precomputedTodos;
+      ownerTab._skipReplayTodos = true;
+    }
+    const replayCards = new Map();
+    $msgs._replayCards = replayCards;
     try {
-      let processed = 0;
-      for (const m of data.messages) {
-        if (++processed % 40 === 0) {
+      if (head.length) {
+        const tailNodes = renderRows(tail, liveAnchor);
+        const firstTailNode = tailNodes[0] || liveAnchor;
+        scrollEnd();
+        const CHUNK = 50;
+        for (let offset = 0; offset < head.length; offset += CHUNK) {
           await new Promise(r => setTimeout(r, 0));
-          if (ownerTab && (ownerTab._historyGen !== gen || ownerTab.closed)) return;
+          if (stale()) return;
+          renderRows(head.slice(offset, offset + CHUNK), firstTailNode);
+          // Following the bottom: stay there. Scrolled up: the browser's scroll anchoring keeps the rows in view.
+          if (ownerTab === activeTab()) scrollEnd();
+        }
+      } else {
+        const CHUNK = 40;
+        for (let offset = 0; offset < data.messages.length; offset += CHUNK) {
+          if (offset) {
+            await new Promise(r => setTimeout(r, 0));
+            if (stale()) return;
+          }
+          renderRows(data.messages.slice(offset, offset + CHUNK), liveAnchor);
         }
-        _renderHistoryRow(ownerTab, $msgs, m);
       }
     } finally {
-      if (ownerTab) ownerTab._replaying = Math.max(0, (ownerTab._replaying || 1) - 1);
+      if ($msgs._replayCards === replayCards) delete $msgs._replayCards;
+      if (ownerTab) {
+        delete ownerTab._skipReplayTodos;
+        ownerTab._historyRendering = Math.max(0, (ownerTab._historyRendering || 1) - 1);
+        ownerTab._replaying = Math.max(0, (ownerTab._replaying || 1) - 1);
+        // Live results kept for cards this page never built (cut by the page) are dropped.
+        if (!ownerTab._historyRendering) ownerTab._pendingResults = null;
+      }
     }
+    try { collapseAdjacentMcpTools($msgs); } catch {}
+    // Always for the tab on screen: a list the page emptied must clear the dock too.
+    if (ownerTab && ownerTab === activeTab()) { try { renderTodoWidget(ownerTab); } catch {} }
     // Calls whose result is not in this page (interrupted, or cut by the page) stop looking busy.
     try { settleReplayedCards($msgs, ownerTab); } catch {}
     pruneMessages($msgs);
@@ -5001,6 +5172,8 @@ async function loadSessionHistory(sid, $msgs) {
       $msgs.appendChild(note);
     }
     if (ownerTab) ownerTab._historyResults = historyHasResultSupport(data);
+    // The pager and the notes are this load's too (a later rebuild replaces them).
+    markHistoryRows([...$msgs.children].filter(n => !liveSet.has(n) && n[HISTORY_ROW_KEY] == null), ticket);
     // Populate context gauge from session history usage
     const tab = ownerTab;
     if (tab && data.usage) {
@@ -5013,10 +5186,10 @@ async function loadSessionHistory(sid, $msgs) {
       renderGauge(tab);
     }
     scrollEnd();
-    // Cache the rebuilt transcript so the next resume on a fresh browser hits
-    // the snapshot path and avoids paying the JSONL → DOM cost again.
-    if (tab && tab.sessionId === sid) writeSessionSnapshot(tab);
+    // Cache the rebuilt transcript (debounced so DOM serialization never blocks session open).
+    if (tab && tab.sessionId === sid) scheduleSessionSnapshotSave(tab);
   } catch {
+    if (stale()) return;
     $msgs.innerHTML = '<div class="msg-status">Failed to load history</div>';
   }
 }
@@ -5270,6 +5443,14 @@ function handleTabMsg(tab, msg) {
   // An MCP server's elicitation_complete resolves the URL card that is waiting
   // (bypassesPromptBuffer in cp/cp-events.js lists what passes).
   const _bufferBypass = bypassesPromptBuffer(msg);
+  // A restored tab whose history is not loaded yet gets a live row (a wakeup, a background turn): its
+  // history loads first and the message waits for it; any running history load holds them the same way.
+  const gate = historyGate(tab, msg, _bufferBypass);
+  if (gate === 'load') { tab._historyDeferred = false; loadSessionHistory(tab.sessionId, tab.messagesEl); }
+  if (gate !== 'pass') {
+    if (tab._msgBuffer.length < 500) tab._msgBuffer.push(msg);
+    return;
+  }
   // Also buffer while a chunked drain is in progress (or older messages still
   // queue) — without this, live events overtake buffered ones between slices.
   if ((tab._activePerm || tab.pendingAskRequestId || tab._draining || tab._msgBuffer.length) && !_bufferBypass) {
@@ -5295,10 +5476,11 @@ function _flushMsgBuffer(tab) {
     while (tab._msgBuffer.length && n++ < budget) {
       // A drained message can re-arm a permission/ask prompt — stop and let
       // that flow's resolution resume the drain (its handlers call us again).
-      if (tab._activePerm || tab.pendingAskRequestId) break;
+      if (tab._activePerm || tab.pendingAskRequestId || tab._historyHold) break;
       _processTabMsg(tab, tab._msgBuffer.shift());
     }
-    if (tab._msgBuffer.length && !tab._activePerm && !tab.pendingAskRequestId) {
+    // A history load holds the rest: it drains them when it is done.
+    if (tab._msgBuffer.length && !tab._activePerm && !tab.pendingAskRequestId && !tab._historyHold) {
       setTimeout(step, 0);
     } else {
       tab._draining = false;
@@ -5413,6 +5595,11 @@ function _processTabMsg(tab, msg) {
         _sessionSaysMode(tab, msg.mode, 'reattach', msg);
         // Orphan buffer overflowed while detached — rebuild transcript from JSONL
         if (msg.resynced && tab.sessionId) {
+          tab._historyDeferred = false;
+          try { loadSessionHistory(tab.sessionId, tab.messagesEl); } catch {}
+        } else if (tab._historyDeferred && tab._historyDeferred === tab.sessionId) {
+          // A restored tab not shown yet whose session is still live on the server: its history first.
+          tab._historyDeferred = false;
           try { loadSessionHistory(tab.sessionId, tab.messagesEl); } catch {}
         }
         if (msg.running) {
@@ -6688,6 +6875,8 @@ function renderAssistant(tab, msg) {
 
 /** Build an interactive AskUserQuestion card from a tool_use block */
 function buildAskFromToolUse(tab, block) {
+  // A task worker’s broker owns the interactive card, even if this tool event arrives first.
+  if (tab.automationRunId) { const placeholder = document.createElement('div'); placeholder.hidden = true; return placeholder; }
   const input = block.input || {};
   const toolUseId = block.id || '';
   tab.pendingAskToolUseId = toolUseId;
@@ -6879,7 +7068,7 @@ function buildAskFromToolUse(tab, block) {
   // Submit button — sends all answers as a batch
   submitBtn.addEventListener('click', () => {
     // An answer is shown as given only once it can be sent: until then the card stays as it is.
-    if (tab.ws?.readyState !== WebSocket.OPEN) { appendStatus(tab, ASK_ANSWER_UNSENT); return; }
+    if (!tab.automationRunId && tab.ws?.readyState !== WebSocket.OPEN) { appendStatus(tab, ASK_ANSWER_UNSENT); return; }
     container.querySelectorAll('.ask-option').forEach(b => { b.disabled = true; });
     container.querySelectorAll('.ask-text-input, .ask-notes').forEach(i => { i.disabled = true; });
     submitBtn.disabled = true;
@@ -6897,6 +7086,21 @@ function buildAskFromToolUse(tab, block) {
 
 // Returns whether the answer left: false while the tab's socket is closed.
 function sendAskAnswer(tab, questions, answers, annotations = null) {
+  if (tab.automationRunId) {
+    const requestId = tab.pendingAskRequestId;
+    if (!tab._workerQuestions?.has(requestId)) return false;
+    answerWorkerQuestion(tab.automationRunId, requestId, { decision: 'answer', answers }).catch((error) => {
+      appendStatus(tab, error.message);
+      // Keep the native card retryable after a delivery failure.
+      if (tab._workerQuestions?.has(requestId)) {
+        const card = tab.messagesEl?.querySelector(`[data-worker-question-id="${CSS.escape(requestId)}"]`);
+        card?.querySelectorAll('button, input, textarea').forEach((el) => { el.disabled = false; });
+        const submit = card?.querySelector('.ask-submit');
+        if (submit) submit.textContent = t('common.retry');
+      }
+    });
+    return true;
+  }
   if (!tab.ws || tab.ws.readyState !== WebSocket.OPEN) return false;
 
   const requestId = tab.pendingAskRequestId;
@@ -7348,9 +7552,15 @@ function updateToolResult(tab, ev) {
   if (!$msgs) return;
   // Background task output (BashOutput results) routes back to the origin card
   try { handleBgToolResult(ev, tab); } catch {}
-  const escapedId = CSS.escape(ev.tool_use_id);
-  const card = $msgs.querySelector(`.tool-card[data-tool-id="${escapedId}"]`) || $msgs.querySelector(`.plan-card[data-tool-id="${escapedId}"]`);
-  if (!card) return;
+  // During a replay the cards it built are indexed by id (no selector scan of the transcript per result).
+  const indexed = $msgs._replayCards instanceof Map ? $msgs._replayCards.get(String(ev.tool_use_id)) : null;
+  let card = indexed?.matches?.('.tool-card, .plan-card') ? indexed : null;
+  if (!card) {
+    const escapedId = CSS.escape(ev.tool_use_id);
+    card = $msgs.querySelector(`.tool-card[data-tool-id="${escapedId}"]`) || $msgs.querySelector(`.plan-card[data-tool-id="${escapedId}"]`);
+  }
+  // A live result for a card the tail-first replay has not built yet: applied when it is built.
+  if (!card) { holdPendingResult(tab, ev); return; }
   // Synthetic PostToolUse hook event + SubagentStop
   const toolNm = card.dataset.toolName || '';
   recordHookEvent(tab, ev.is_error ? 'PostToolUseFailure' : 'PostToolUse', toolNm);
@@ -7375,8 +7585,10 @@ function updateToolResult(tab, ev) {
     finalizeDiffCard(card, ev, typed?.view);
     if (!ev.is_error) return; // success: stats in the header say it all — skip noisy RESULT text
   }
-  // Collapse adjacent repeated MCP tool calls (post-insert) — cheap, DOM-local
-  try { collapseAdjacentMcpTools($msgs); } catch {}
+  // Collapse adjacent repeated MCP tool calls inside this turn (replays batch once at the end)
+  if (!tab._replaying && toolNm.startsWith('mcp__')) {
+    try { collapseAdjacentMcpTools(card.parentElement || $msgs); } catch {}
+  }
   // Plan cards don't have result sections — just mark success/error via border
   if (card.classList.contains('plan-card')) {
     card.style.borderColor = ev.is_error ? 'rgba(255,82,82,0.3)' : 'rgba(100,200,120,0.3)';
@@ -7558,6 +7770,9 @@ function _applySessionOptions(tab, msg) {
   if (hasCapability(tab, 'tool_policy')) msg.toolPolicy = tab.toolPolicy || 'full';
   // The tab's session settings (/session): the bridge validates them again.
   if (hasCapability(tab, 'session_settings')) msg.session = normalizeSession(tab.session);
+  // Think off on a model with effort levels is a pick of its own: sent as 'off'
+  // so the bridge disables thinking, or the user's settings' effortLevel applies.
+  if (!msg.effort && hasCapability(tab, 'effort_off') && _modelSupportsEffort(tab)) msg.effort = 'off';
   // The Claude account this tab runs under (the default account sends nothing).
   if (hasCapability(tab, 'accounts')) msg.accountId = tab.accountId || 'default';
   // A name typed before the first message becomes the new session's title.
@@ -8057,6 +8272,7 @@ function renderAskUserQuestion(tab, requestId, input) {
   const allQuestions = input.questions || questions;
   const el = document.createElement('div');
   el.className = 'msg msg-assistant';
+  el.dataset.workerQuestionId = requestId;
 
   const avatar = document.createElement('div');
   avatar.className = 'msg-avatar';
@@ -8238,7 +8454,7 @@ function renderAskUserQuestion(tab, requestId, input) {
   // Submit button — sends all answers as a batch
   submitBtn.addEventListener('click', () => {
     // An answer is shown as given only once it can be sent: until then the card stays as it is.
-    if (tab.ws?.readyState !== WebSocket.OPEN) { appendStatus(tab, ASK_ANSWER_UNSENT); return; }
+    if (!tab.automationRunId && tab.ws?.readyState !== WebSocket.OPEN) { appendStatus(tab, ASK_ANSWER_UNSENT); return; }
     wrap.querySelectorAll('.ask-option').forEach(b => { b.disabled = true; });
     wrap.querySelectorAll('.ask-text-input, .ask-notes').forEach(i => { i.disabled = true; });
     submitBtn.disabled = true;
@@ -8308,8 +8524,12 @@ function appendUser(tab, text, images, files) {
 function _stampUserMessageUuid(tab, uuid) {
   const $msgs = tab.messagesEl;
   if (!$msgs || !uuid) return;
-  const rows = [...$msgs.querySelectorAll('.msg-user')].reverse();
-  const row = rows.find(r => !r.dataset.uuid);
+  const last = $msgs.lastElementChild;
+  let row = (last?.classList?.contains('msg-user') && !last.dataset.uuid) ? last : null;
+  if (!row) {
+    const rows = [...$msgs.querySelectorAll('.msg-user')].reverse();
+    row = rows.find(r => !r.dataset.uuid);
+  }
   if (!row) return;
   row.dataset.uuid = uuid;
   if (!tab.sdkMode) return;
@@ -10349,29 +10569,36 @@ const _fileLinkOptions = {
 };
 
 // ── Public API ──
+let _readyPromise = null;
 async function _ensureClaudePanelReady() {
+  if (_readyPromise) return _readyPromise;
   if (!_panel) {
-    injectStyles();
-    _panel = buildPanel();
-    document.body.appendChild(_panel);
-    registerSidepanel({
-      owner: PANEL_OWNER, provider: 'claude', element: _panel,
-      header: _panel.querySelector('.cp-header'), actions: _panel.querySelector('.cp-header-actions'),
-      buttonClass: 'cp-header-btn', dockHandle: _panel.querySelector('.cp-resize-handle'),
-      applyVisibility: applyClaudeVisibility,
-    });
-    wireEvents();
-    _panel.querySelector('#cp-messages-container')?.addEventListener('click', _onMessagesClick);
-    wireFileLinks(_panel.querySelector('#cp-messages-container'), _fileLinkOptions);
-    await loadConfig();   // must complete before restoreTabs — checks server boot ID
-    loadSkills();
-    restoreTabs();
-    loadMonthlyCost();
-    syncSessionCosts();
-    _wireBrowserSync();
-    _startHeartbeat();
-    window.dispatchEvent(new CustomEvent('sidepanel-tray:provider-loaded', { detail: { provider: 'claude' } }));
-    _ensureCliSubscription();
+    _readyPromise = (async () => {
+      injectStyles();
+      _panel = buildPanel();
+      document.body.appendChild(_panel);
+      registerSidepanel({
+        owner: PANEL_OWNER, provider: 'claude', element: _panel,
+        header: _panel.querySelector('.cp-header'), actions: _panel.querySelector('.cp-header-actions'),
+        buttonClass: 'cp-header-btn', dockHandle: _panel.querySelector('.cp-resize-handle'),
+        applyVisibility: applyClaudeVisibility,
+      });
+      wireEvents();
+      _panel.querySelector('#cp-messages-container')?.addEventListener('click', _onMessagesClick);
+      wireFileLinks(_panel.querySelector('#cp-messages-container'), _fileLinkOptions);
+      await loadConfig();   // must complete before restoreTabs — checks server boot ID
+      loadSkills();
+      restoreTabs();
+      setTimeout(() => {
+        loadMonthlyCost();
+        syncSessionCosts();
+      }, 400);
+      _wireBrowserSync();
+      _startHeartbeat();
+      window.dispatchEvent(new CustomEvent('sidepanel-tray:provider-loaded', { detail: { provider: 'claude' } }));
+      _ensureCliSubscription();
+    })();
+    return _readyPromise;
   }
 }
 
@@ -10495,6 +10722,19 @@ export async function attachClaudeAutomation(run, { focus = !!run?.focus, isCanc
     tab._automationLifecycleError = run.error;
     appendError(tab, run.error);
   }
+  syncWorkerQuestionQueue(tab, run, {
+    open: (id, pending) => handleControlRequest(tab, { request_id: id, request: { tool_name: 'AskUserQuestion', input: pending.input || { questions: pending.questions } } }),
+    close: (id) => {
+      const card = tab.messagesEl?.querySelector(`[data-worker-question-id="${CSS.escape(id)}"]`);
+      card?.querySelectorAll('button, input, textarea').forEach((el) => { el.disabled = true; });
+      const submit = card?.querySelector('.ask-submit');
+      if (submit) submit.textContent = t('workerQuestion.resolved');
+      tab.pendingAskRequestId = null; tab.pendingAskToolUseId = null;
+      tab.pendingAskBufferedAnswer = null; tab.askRenderedViaControl = false;
+      // The same provider turn resumes; release messages buffered while its question was open.
+      _flushMsgBuffer(tab);
+    },
+  });
   trackWorkerEnd(run, { apply: (view) => showWorkerEnd(tab, view), busy: hasLiveBackgroundWork(tab) });
   // The mode control is hidden while the run is active and back when it ended.
   if (tab === activeTab()) populateModeDropdown(_panel?.querySelector('#cp-mode'), tab);
@@ -11997,11 +12237,11 @@ function wireEvents() {
 // Side panel browser launch removed — all automations use floating browsers only.
 
 // Show panel without toggling it closed (used by notification click-through)
-on('claude-panel:show', (data) => {
-  if (!_visible) toggleClaudePanel();
+on('claude-panel:show', async (data) => {
+  if (!_visible) await toggleClaudePanel();
   if (data?.tabId) {
-    const idx = _tabs.findIndex(t => t.id === data.tabId);
-    if (idx >= 0) switchTab(idx);
+    const idx = _tabs.findIndex(t => t.id === data.tabId || t.sessionId === data.tabId);
+    if (idx >= 0 && idx !== _activeTabIdx) switchTab(idx);
   }
 });