create-walle 0.9.3 → 0.9.4

package/template/claude-task-manager/public/index.html

@@ -1315,16 +1315,25 @@
     height: var(--tab-height);
     background: var(--bg);
     border-bottom: 1px solid var(--border);
-    overflow-x: auto;
+    overflow: hidden;
     flex-shrink: 0;
     align-items: flex-end;
   }
-  #tabbar::-webkit-scrollbar { height: 0; }
+  #tabbar-scroll {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+    align-items: flex-end;
+    height: 100%;
+    scroll-behavior: smooth;
+  }
+  #tabbar-scroll::-webkit-scrollbar { height: 0; }
   .tab {
     display: flex;
     align-items: center;
     gap: 6px;
-    padding: 0 14px;
+    padding: 0 10px;
     height: 32px;
     font-size: 12px;
     color: var(--fg-dim);
@@ -1333,15 +1342,23 @@
     border-bottom: none;
     cursor: pointer;
     white-space: nowrap;
-    flex-shrink: 0;
+    min-width: 60px;
+    max-width: 240px;
+    flex-shrink: 1;
     border-radius: 6px 6px 0 0;
     transition: all 0.1s;
   }
+  .tab .tab-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
   .tab:hover { color: var(--fg); background: var(--bg-light); }
   .tab.active {
     color: var(--fg);
     background: var(--bg-light);
     border-color: var(--border);
+    flex-shrink: 0;
   }
   .tab.waiting {
     animation: tab-pulse 2s ease-in-out infinite;
@@ -1373,24 +1390,87 @@
     flex-shrink: 0;
   }
   .tab .close-tab {
-    font-size: 14px;
+    font-size: 13px;
+    line-height: 1;
     opacity: 0;
     cursor: pointer;
-    padding: 0 2px;
+    padding: 3px 5px;
+    border-radius: 4px;
+    flex-shrink: 0;
+    transition: background 0.1s, opacity 0.1s;
   }
-  .tab:hover .close-tab { opacity: 0.6; }
-  .tab .close-tab:hover { opacity: 1; }
+  .tab:hover .close-tab { opacity: 0.5; }
+  .tab .close-tab:hover { opacity: 1; background: rgba(255,255,255,0.1); }
   .tab-add {
-    padding: 0 10px;
-    height: 32px;
+    width: 28px;
+    height: 24px;
+    margin-left: 10px;
     display: flex;
     align-items: center;
+    justify-content: center;
     color: var(--fg-dim);
     cursor: pointer;
     font-size: 16px;
     flex-shrink: 0;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    transition: all 0.15s;
+  }
+  .tab-add:hover { color: var(--fg); background: rgba(255,255,255,0.08); }
+  .tab-overflow-btn {
+    padding: 0 8px;
+    height: 32px;
+    display: none;
+    align-items: center;
+    color: var(--fg-dim);
+    cursor: pointer;
+    font-size: 11px;
+    flex-shrink: 0;
+    border-left: 1px solid var(--border);
+    position: relative;
+  }
+  .tab-overflow-btn:hover { color: var(--fg); background: var(--bg-light); }
+  .tab-overflow-btn.visible { display: flex; }
+  .tab-overflow-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 100;
+    background: var(--bg-light);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+    min-width: 220px;
+    max-width: 340px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 4px 0;
+  }
+  .tab-overflow-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    font-size: 12px;
+    color: var(--fg-dim);
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tab-overflow-item:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
+  .tab-overflow-item.active { color: var(--accent); font-weight: 600; }
+  .tab-overflow-item .overflow-dot {
+    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+  }
+  .tab-overflow-item .overflow-label {
+    overflow: hidden; text-overflow: ellipsis; flex: 1;
   }
-  .tab-add:hover { color: var(--fg); }
+  .tab-overflow-item .overflow-close {
+    opacity: 0; font-size: 14px; padding: 0 2px; flex-shrink: 0;
+  }
+  .tab-overflow-item:hover .overflow-close { opacity: 0.6; }
+  .tab-overflow-item .overflow-close:hover { opacity: 1; }
 
   /* Terminal container */
   #terminal-area {
@@ -1405,13 +1485,14 @@
     flex: 1;
     display: none;
     overflow: hidden;
+    min-height: 0;
   }
   .term-container.active { display: flex; flex-direction: column; }
-  .term-container .xterm { flex: 1; height: 0; }
+  .term-container .xterm { flex: 1; height: 0; min-height: 0; overflow: hidden; }
   .session-toolbar {
     display: flex; align-items: center; gap: 6px; padding: 3px 8px;
     background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
+    flex-shrink: 0; position: relative; z-index: 1;
   }
   .session-toolbar-btn {
     background: none; border: 1px solid transparent; color: var(--fg-dim);
@@ -2375,7 +2456,10 @@
     <div id="sidebar-resize"></div>
     <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
       <div id="tabbar">
-        <span class="tab-add" onclick="showNewSessionModal()" title="New Tab">+</span>
+        <div id="tabbar-scroll">
+          <span class="tab-add" onclick="showNewSessionModal()" title="New Tab">+</span>
+        </div>
+        <span class="tab-overflow-btn" id="tab-overflow-btn" onclick="toggleTabOverflow(event)" title="All tabs">&#9662; <span id="tab-overflow-count"></span></span>
       </div>
       <!-- Queue Status Bar -->
       <div id="queue-bar" style="display:none;">
@@ -3438,7 +3522,11 @@ function createTerminal(id) {
   term.onData((data) => {
     send({ type: 'input', id, data });
     clearWaitingState(id);
-    // User typed something — scroll to bottom and re-enable follow mode
+    // User typed something — scroll to bottom and re-enable follow mode.
+    // Skip mouse escape sequences (\x1b[M..., \x1b[<...) — these are wheel/click
+    // events forwarded by xterm when mouse tracking is enabled, not real user input.
+    const isMouse = data.length >= 3 && data[0] === '\x1b' && data[1] === '[' && (data[2] === 'M' || data[2] === '<');
+    if (isMouse) return;
     const s = state.sessions.get(id);
     if (s) { s.writer.followMode = true; s.term.scrollToBottom(); }
   });
@@ -3468,6 +3556,7 @@ function createTerminal(id) {
   // Momentum scroll clamping — macOS trackpad momentum can cause "rocket scroll"
   // where the viewport flies past the content. Detect momentum events (rapid,
   // decaying deltas) and clamp them after a threshold.
+  // Also tracks _lastWheelAt for scroll-during-output detection.
   const viewportEl = container.querySelector('.xterm-viewport');
   if (viewportEl) {
     let lastWheelTime = 0;
@@ -3477,6 +3566,11 @@ function createTerminal(id) {
       const now = Date.now();
       const elapsed = now - lastWheelTime;
       lastWheelTime = now;
+      writer._lastWheelAt = now;
+      // Immediately disable auto-scroll when user scrolls up — don't rely on
+      // the onScroll handler which can be suppressed or arrive too late after
+      // xterm's internal auto-scroll resets the viewport to bottom.
+      if (e.deltaY < 0) writer.followMode = false;
       if (elapsed < 80 && Math.abs(e.deltaY) < Math.abs(lastDeltaY) * 0.9) {
         momentumCount++;
       } else if (elapsed > 120) {
@@ -3506,12 +3600,16 @@ function createTerminal(id) {
   term.onScroll(() => {
     const buf = term.buffer.active;
     const atBottom = buf.viewportY >= buf.baseY;
-    // During suppression (after fit/write), ignore ALL scroll events.
-    // The RAF batcher and fitActiveTerminal handle followMode explicitly;
-    // allowing onScroll to re-enable followMode here causes a race where
-    // term.write()'s internal scroll-to-bottom flips followMode back to true
-    // even when the user has scrolled up.
-    if (Date.now() < writer._suppressScroll) return;
+    // During suppression (after fit/write), ignore programmatic scroll events
+    // to prevent write()'s internal auto-scroll from flipping followMode.
+    // BUT: if the user actively scrolled (wheel event within last 150ms),
+    // let their scroll intent through — the wheel check in the write callback
+    // will prevent scrollToBottom/scrollToLine from overriding them.
+    const now = Date.now();
+    if (now < writer._suppressScroll) {
+      const recentWheel = writer._lastWheelAt && (now - writer._lastWheelAt < 150);
+      if (!recentWheel) return;
+    }
     writer.followMode = atBottom;
   });
 
@@ -3558,13 +3656,27 @@ async function _scanPromptLinesFromAPI(id, projectEntry) {
       _scanPromptLinesFromTerminal(id);
       return;
     }
-    // Match the review page: count all role:'user' messages
+    // Match the review page: count all role:'user' messages, filtering out
+    // injected system/skill context that isn't a real user prompt
     const userMsgs = messages.filter(m => m.role === 'user');
     const previews = [];
     for (const msg of userMsgs) {
-      const firstLine = msg.text.split('\n')[0].trim();
+      const text = msg.text;
+      // Skip injected context: skill metadata, built-in commands, continuation summaries
+      const firstLine = text.split('\n')[0].trim();
       if (!firstLine || firstLine.length < 3) continue;
-      previews.push(firstLine.slice(0, 80));
+      if (/^Base directory for this skill:/i.test(firstLine)) continue;
+      if (/^<command-name>\/(model|exit|compact|clear|help|fast|config|memory|doctor|bug|init|review|cost|vim|resume|login|logout|permissions|status|mcp|diff|terminal-setup)<\/command-name>/.test(firstLine)) continue;
+      if (/^This session is being continued from a previous conversation/i.test(firstLine)) continue;
+      if (/^ARGUMENTS:\s/.test(firstLine)) continue;
+      // Clean up command-message wrappers into readable format
+      let cleaned = firstLine;
+      if (/^<command-message>/.test(cleaned)) {
+        cleaned = cleaned.replace(/<command-message>(.*?)<\/command-message>.*/, '/$1');
+      }
+      cleaned = cleaned.replace(/<[^>]+>/g, '').trim();
+      if (!cleaned || cleaned.length < 2) continue;
+      previews.push(cleaned.slice(0, 80));
     }
     _promptScanCache[id] = { ts: Date.now(), previews };
     if (s) s._promptLinesResolved = false;
@@ -3745,6 +3857,11 @@ function activateTab(id) {
   const specialPanels = ['rules', 'insights', 'permissions', 'prompts', 'codereview', 'walle', 'backups'];
   const isPanel = specialPanels.includes(id);
 
+  // Clean up WALL-E background pollers when leaving WALL-E tab
+  if (state.activeTab === 'walle' && id !== 'walle' && typeof WE !== 'undefined' && WE.pausePollers) {
+    WE.pausePollers();
+  }
+
   // Hide all
   for (const [sid, s] of state.sessions) {
     s.container.classList.remove('active');
@@ -4246,7 +4363,9 @@ function onOutput(msg) {
   s._waitingForInput = false;
   // Only strip \e[3J (Erase Scrollback) — preserves scroll history.
   // Do NOT strip \e[2J or \e[?1049h/l — needed for Claude Code's TUI.
-  const data = msg.data.replace(/\x1b\[3J/g, '');
+  // Skip regex if the escape sequence isn't present (common fast path).
+  const raw = msg.data;
+  const data = raw.indexOf('\x1b[3J') >= 0 ? raw.replace(/\x1b\[3J/g, '') : raw;
 
   // followMode is maintained by the term.onScroll listener — no manual check needed here.
 
@@ -4262,10 +4381,20 @@ function onOutput(msg) {
       const follow = s.writer.followMode;
       s.writer.queue = '';
       s.writer.scheduled = false;
+      // Snapshot wheel timestamp before write — xterm processes writes async
+      // (its own RAF), so the callback fires in a later frame. Between our
+      // write() call and the callback, the user may scroll via wheel. If so,
+      // we must NOT override their scroll with scrollToBottom/scrollToLine.
+      const wheelBefore = s.writer._lastWheelAt || 0;
       // Re-check active tab at render time (may have changed since queued)
       if (state.activeTab === sid && follow) {
+        s.writer._suppressScroll = Date.now() + 2000;
         s.term.write(batch, () => {
-          s.term.scrollToBottom();
+          s.writer._suppressScroll = Date.now() + 100;
+          // Only auto-scroll if user didn't wheel-scroll since write was queued
+          if ((s.writer._lastWheelAt || 0) === wheelBefore) {
+            s.term.scrollToBottom();
+          }
         });
       } else {
         const savedLine = s.term.buffer.active.viewportY;
@@ -4275,57 +4404,72 @@ function onOutput(msg) {
         s.writer._suppressScroll = Date.now() + 2000;
         s.term.write(batch, () => {
           s.writer._suppressScroll = Date.now() + 100;
-          s.term.scrollToLine(savedLine);
+          // Only restore position if user didn't wheel-scroll since write
+          if ((s.writer._lastWheelAt || 0) === wheelBefore) {
+            s.term.scrollToLine(savedLine);
+          }
         });
       }
-    });
-  }
 
-  // After output stops for 300ms, ensure scroll position is correct
-  // and auto-fix dimension drift (PTY size ≠ container size).
-  clearTimeout(s._outputIdleTimer);
-  s._outputIdleTimer = setTimeout(() => {
-    if (state.activeTab === msg.id) {
-      // Auto-heal dimension mismatch — if PTY was running at different
-      // cols/rows than the container requires, fit + resize now.
-      try {
-        const dims = s.fitAddon.proposeDimensions();
-        if (dims && (dims.cols !== s.term.cols || dims.rows !== s.term.rows)) {
-          const buf = s.term.buffer.active;
-          const wasAtBottom = buf.viewportY >= buf.baseY;
-          const oldCols = s.term.cols;
-          const savedLine = buf.viewportY;
-          const savedAnchor = wasAtBottom ? null : _getScrollAnchor(s.term);
-          s.writer._suppressScroll = Date.now() + 200;
-          s.fitAddon.fit();
-          send({ type: 'resize', id: msg.id, cols: s.term.cols, rows: s.term.rows });
-          if (wasAtBottom) {
+      // --- Deferred housekeeping (once per frame, not per WS message) ---
+
+      // Idle timer: reset after output stops for 300ms (dimension drift auto-heal)
+      clearTimeout(s._outputIdleTimer);
+      s._outputIdleTimer = setTimeout(() => {
+        if (state.activeTab === sid) {
+          try {
+            const dims = s.fitAddon.proposeDimensions();
+            if (dims && (dims.cols !== s.term.cols || dims.rows !== s.term.rows)) {
+              const buf = s.term.buffer.active;
+              const wasAtBottom = buf.viewportY >= buf.baseY;
+              const oldCols = s.term.cols;
+              const savedLine2 = buf.viewportY;
+              const savedAnchor = wasAtBottom ? null : _getScrollAnchor(s.term);
+              s.writer._suppressScroll = Date.now() + 200;
+              s.fitAddon.fit();
+              send({ type: 'resize', id: sid, cols: s.term.cols, rows: s.term.rows });
+              if (wasAtBottom) {
+                s.term.scrollToBottom();
+              } else if (s.term.cols !== oldCols) {
+                _restoreScrollAnchor(s.term, savedAnchor);
+                s._promptLinesResolved = false;
+              } else {
+                s.term.scrollToLine(savedLine2);
+              }
+              return;
+            }
+          } catch (_) { /* proposeDimensions may fail if container hidden */ }
+          if (s.writer.followMode) {
             s.term.scrollToBottom();
-          } else if (s.term.cols !== oldCols) {
-            _restoreScrollAnchor(s.term, savedAnchor);
-            s._promptLinesResolved = false;
-          } else {
-            s.term.scrollToLine(savedLine);
           }
-          return; // fit handles scroll position
         }
-      } catch (_) { /* proposeDimensions may fail if container hidden */ }
-      if (s.writer.followMode) {
-        s.term.scrollToBottom();
+      }, 300);
+
+      // Remove compact banner on new activity (once per frame, not per chunk)
+      if (!s._bannerCleared) {
+        const banner = s.container.querySelector('.compact-banner');
+        if (banner) {
+          banner.remove();
+          s._bannerCleared = true;
+          const ln = s.term.buffer.active.viewportY;
+          const ab = s.writer.followMode;
+          s.writer._suppressScroll = Date.now() + 200;
+          s.fitAddon.fit();
+          if (!ab) s.term.scrollToLine(ln);
+        } else {
+          s._bannerCleared = true; // no banner exists, skip future checks
+        }
       }
-    }
-  }, 300);
-  // Remove compact banner on new activity
-  const banner = s.container.querySelector('.compact-banner');
-  if (banner) { banner.remove(); requestAnimationFrame(() => { const ln = s.term.buffer.active.viewportY; const ab = s.writer.followMode; s.writer._suppressScroll = Date.now() + 200; s.fitAddon.fit(); if (!ab) s.term.scrollToLine(ln); }); }
-  // Keep focus on the active session's terminal, but don't steal focus from
-  // input elements (e.g. queue panel textarea, search boxes)
-  if (state.activeTab === msg.id && document.activeElement !== s.term.textarea) {
-    const ae = document.activeElement;
-    const isUserInput = ae && (ae.tagName === 'TEXTAREA' || ae.tagName === 'INPUT' || ae.tagName === 'SELECT' || ae.isContentEditable);
-    if (!isUserInput) {
-      s.term.focus();
-    }
+
+      // Keep focus on the active session's terminal
+      if (state.activeTab === sid && document.activeElement !== s.term.textarea) {
+        const ae = document.activeElement;
+        const isUserInput = ae && (ae.tagName === 'TEXTAREA' || ae.tagName === 'INPUT' || ae.tagName === 'SELECT' || ae.isContentEditable);
+        if (!isUserInput) {
+          s.term.focus();
+        }
+      }
+    });
   }
 }
 
@@ -4412,16 +4556,17 @@ async function onSessionsList(msg) {
     const saved = state._savedTabOrder;
     delete state._savedTabOrder;
     // Reorder: put saved IDs first (if they still exist), then any new ones
-    const sessionIds = state.tabOrder.filter(id => state.sessions.has(id));
-    const nonSessionIds = state.tabOrder.filter(id => !state.sessions.has(id));
+    // Include 'review' as a restorable tab position
+    const restorableIds = state.tabOrder.filter(id => state.sessions.has(id) || id === 'review');
+    const nonRestorableIds = state.tabOrder.filter(id => !state.sessions.has(id) && id !== 'review');
     const ordered = [];
     for (const id of saved) {
-      if (sessionIds.includes(id)) ordered.push(id);
+      if (restorableIds.includes(id)) ordered.push(id);
     }
-    for (const id of sessionIds) {
+    for (const id of restorableIds) {
       if (!ordered.includes(id)) ordered.push(id);
     }
-    state.tabOrder = [...nonSessionIds, ...ordered];
+    state.tabOrder = [...nonRestorableIds, ...ordered];
   }
 
   renderSessionList();
@@ -4554,6 +4699,19 @@ function recentItemDblClick(id, event) {
   }, 10);
 }
 
+// Shared helper: attach event listeners for inline rename inputs
+function setupRenameInput(input, currentText, finish) {
+  // Stop events from bubbling to parent (e.g., activateTab → steal focus)
+  for (const evt of ['click', 'mousedown', 'dblclick']) {
+    input.addEventListener(evt, (e) => e.stopPropagation());
+  }
+  input.addEventListener('blur', finish);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
+    if (e.key === 'Escape') { input.value = currentText; input.blur(); }
+  });
+}
+
 function startRenameSession(sessionId, labelEl) {
   // Guard: already editing
   if (labelEl.querySelector('input')) return;
@@ -4590,6 +4748,8 @@ function startRenameSession(sessionId, labelEl) {
         const reviewTitleEl = document.getElementById('review-title');
         if (reviewTitleEl) reviewTitleEl.textContent = newName;
       }
+      // Send rename via WebSocket too so the server updates in-memory session label
+      send({ type: 'rename', id: sessionId, label: newName });
     }
     // Remove input before re-rendering so the input-guard doesn't block
     input.remove();
@@ -4598,11 +4758,7 @@ function startRenameSession(sessionId, labelEl) {
     renderTabs();
   }
 
-  input.addEventListener('blur', finish);
-  input.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
-    if (e.key === 'Escape') { input.value = currentText; input.blur(); }
-  });
+  setupRenameInput(input, currentText, finish);
 }
 
 function startRenameReviewTitle(titleEl) {
@@ -4644,11 +4800,7 @@ function startRenameReviewTitle(titleEl) {
     }
   }
 
-  input.addEventListener('blur', finish);
-  input.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
-    if (e.key === 'Escape') { input.value = currentText; input.blur(); }
-  });
+  setupRenameInput(input, currentText, finish);
 }
 
 function startRenameRecentSession(sessionId, spanEl) {
@@ -4693,11 +4845,7 @@ function startRenameRecentSession(sessionId, spanEl) {
     renderTabs();
   }
 
-  input.addEventListener('blur', finish);
-  input.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
-    if (e.key === 'Escape') { input.value = currentText; input.blur(); }
-  });
+  setupRenameInput(input, currentText, finish);
 }
 
 async function loadSessionPrompts(sessionId) {
@@ -4728,6 +4876,7 @@ function showCompactBannerIfStale(id, s) {
   // Remove any existing banner first
   const existing = s.container.querySelector('.compact-banner');
   if (existing) existing.remove();
+  s._bannerCleared = false; // reset so onOutput can detect new banners
 
   if (_compactDismissed.has(id)) return;
   const lastAct = s.meta?.lastActivity || s.meta?.createdAt || 0;
@@ -4778,13 +4927,13 @@ function dismissCompactBanner(id) {
 }
 
 function renderTabs() {
-  const tabbar = document.getElementById('tabbar');
+  const scrollContainer = document.getElementById('tabbar-scroll');
   // Skip re-render if user is actively renaming a tab
-  if (tabbar.querySelector('input')) return;
-  const addBtn = tabbar.querySelector('.tab-add');
+  if (scrollContainer.querySelector('input')) return;
+  const addBtn = scrollContainer.querySelector('.tab-add');
 
   // Remove old tabs
-  tabbar.querySelectorAll('.tab').forEach(t => t.remove());
+  scrollContainer.querySelectorAll('.tab').forEach(t => t.remove());
 
   for (const id of state.tabOrder) {
     if (id === 'rules') {
@@ -4792,16 +4941,35 @@ function renderTabs() {
       tab.className = `tab panel-tab ${state.activeTab === 'rules' ? 'active' : ''}`;
       tab.innerHTML = `<span>📝 Rules</span><span class="close-tab" onclick="event.stopPropagation();closeSpecialTab('rules')">&times;</span>`;
       tab.onclick = () => activateTab('rules');
-      tabbar.insertBefore(tab, addBtn);
+      scrollContainer.insertBefore(tab, addBtn);
       continue;
     }
     if (id === 'review') {
       const tab = document.createElement('div');
       tab.className = `tab panel-tab ${state.activeTab === 'review' ? 'active' : ''}`;
+      tab.dataset.sessionId = 'review';
+      tab.draggable = true;
       const title = document.getElementById('review-title').textContent;
       tab.innerHTML = `<span>📋 ${escHtml(title)}</span><span class="close-tab" onclick="event.stopPropagation();closeSpecialTab('review')">&times;</span>`;
       tab.onclick = () => activateTab('review');
-      tabbar.insertBefore(tab, addBtn);
+      tab.ondragstart = function(e) { _tabDragId = 'review'; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', 'review'); tab.style.opacity = '0.4'; };
+      tab.ondragend = function() { tab.style.opacity = ''; };
+      tab.ondragover = function(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; tab.classList.add('tab-drag-over'); };
+      tab.ondragleave = function() { tab.classList.remove('tab-drag-over'); };
+      tab.ondrop = function(e) {
+        e.preventDefault();
+        tab.classList.remove('tab-drag-over');
+        if (!_tabDragId || _tabDragId === 'review') return;
+        const from = state.tabOrder.indexOf(_tabDragId);
+        const to = state.tabOrder.indexOf('review');
+        if (from === -1 || to === -1) return;
+        state.tabOrder.splice(from, 1);
+        state.tabOrder.splice(to, 0, _tabDragId);
+        _tabDragId = null;
+        saveTabOrder();
+        renderTabs();
+      };
+      scrollContainer.insertBefore(tab, addBtn);
       continue;
     }
     if (id === 'insights') {
@@ -4809,7 +4977,7 @@ function renderTabs() {
       tab.className = `tab panel-tab ${state.activeTab === 'insights' ? 'active' : ''}`;
       tab.innerHTML = `<span>📊 Insights</span><span class="close-tab" onclick="event.stopPropagation();closeSpecialTab('insights')">&times;</span>`;
       tab.onclick = () => activateTab('insights');
-      tabbar.insertBefore(tab, addBtn);
+      scrollContainer.insertBefore(tab, addBtn);
       continue;
     }
     if (id === 'permissions') {
@@ -4817,7 +4985,7 @@ function renderTabs() {
       tab.className = `tab panel-tab ${state.activeTab === 'permissions' ? 'active' : ''}`;
       tab.innerHTML = `<span>🔒 Permissions</span><span class="close-tab" onclick="event.stopPropagation();closeSpecialTab('permissions')">&times;</span>`;
       tab.onclick = () => activateTab('permissions');
-      tabbar.insertBefore(tab, addBtn);
+      scrollContainer.insertBefore(tab, addBtn);
       continue;
     }
     if (id === 'codereview') {
@@ -4865,15 +5033,109 @@ function renderTabs() {
       saveTabOrder();
       renderTabs();
     };
-    tabbar.insertBefore(tab, addBtn);
+    scrollContainer.insertBefore(tab, addBtn);
+  }
+
+  // Auto-scroll active tab into view + update overflow indicator
+  requestAnimationFrame(() => {
+    scrollActiveTabIntoView();
+    updateTabOverflowBtn();
+  });
+}
+
+// Scroll the active tab into view within the tab bar
+function scrollActiveTabIntoView() {
+  const scrollContainer = document.getElementById('tabbar-scroll');
+  const activeTab = scrollContainer.querySelector('.tab.active');
+  if (!activeTab) return;
+  const cRect = scrollContainer.getBoundingClientRect();
+  const tRect = activeTab.getBoundingClientRect();
+  if (tRect.left < cRect.left) {
+    scrollContainer.scrollLeft += tRect.left - cRect.left - 8;
+  } else if (tRect.right > cRect.right) {
+    scrollContainer.scrollLeft += tRect.right - cRect.right + 8;
   }
 }
 
+// Show/hide the overflow dropdown button + count badge
+function updateTabOverflowBtn() {
+  const scrollContainer = document.getElementById('tabbar-scroll');
+  const btn = document.getElementById('tab-overflow-btn');
+  const countEl = document.getElementById('tab-overflow-count');
+  const tabs = scrollContainer.querySelectorAll('.tab');
+  const isOverflowing = scrollContainer.scrollWidth > scrollContainer.clientWidth + 2;
+  btn.classList.toggle('visible', isOverflowing);
+  if (isOverflowing && countEl) {
+    countEl.textContent = tabs.length;
+  }
+}
+
+// Toggle the tab overflow dropdown menu
+function toggleTabOverflow(e) {
+  e.stopPropagation();
+  const btn = document.getElementById('tab-overflow-btn');
+  let menu = btn.querySelector('.tab-overflow-menu');
+  if (menu) { menu.remove(); return; }
+
+  menu = document.createElement('div');
+  menu.className = 'tab-overflow-menu';
+
+  for (const id of state.tabOrder) {
+    // Skip tabs that aren't rendered
+    if (id === 'codereview' || id === 'walle') continue;
+    let label, dotColor, isActive, closeAction;
+    const specialLabels = { rules: '📝 Rules', insights: '📊 Insights', permissions: '🔒 Permissions' };
+
+    if (specialLabels[id]) {
+      label = specialLabels[id];
+      dotColor = 'var(--accent)';
+      isActive = state.activeTab === id;
+      closeAction = `closeSpecialTab('${id}')`;
+    } else if (id === 'review') {
+      const title = document.getElementById('review-title').textContent;
+      label = '📋 ' + title;
+      dotColor = 'var(--accent)';
+      isActive = state.activeTab === 'review';
+      closeAction = "closeSpecialTab('review')";
+    } else {
+      const s = state.sessions.get(id);
+      if (!s) continue;
+      label = s.meta?.label || id.slice(0, 8);
+      const st = getSessionStatus(s);
+      dotColor = st.cls === 'running' ? 'var(--green)' : st.cls === 'waiting' ? 'var(--yellow)' : 'var(--fg-dim)';
+      isActive = state.activeTab === id;
+      closeAction = `killSession('${escHtml(id)}')`;
+    }
+
+    const item = document.createElement('div');
+    item.className = 'tab-overflow-item' + (isActive ? ' active' : '');
+    item.innerHTML = `<span class="overflow-dot" style="background:${dotColor}"></span><span class="overflow-label">${escHtml(label)}</span><span class="overflow-close" onclick="event.stopPropagation();${closeAction}">&times;</span>`;
+    item.onclick = function() { menu.remove(); activateTab(id); };
+    menu.appendChild(item);
+  }
+
+  btn.appendChild(menu);
+
+  // Close on outside click
+  function closeMenu(ev) {
+    if (!btn.contains(ev.target)) { menu.remove(); document.removeEventListener('click', closeMenu); }
+  }
+  setTimeout(() => document.addEventListener('click', closeMenu), 0);
+}
+
+// Wheel-to-scroll on tab bar (vertical wheel → horizontal scroll)
+document.getElementById('tabbar-scroll').addEventListener('wheel', function(e) {
+  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+    e.preventDefault();
+    this.scrollLeft += e.deltaY;
+  }
+}, { passive: false });
+
 // --- Tab drag-and-drop reorder ---
 let _tabDragId = null;
 function saveTabOrder() {
-  // Save only session IDs (not panel IDs like 'rules', 'review', etc.)
-  const sessionOrder = state.tabOrder.filter(id => state.sessions.has(id));
+  // Save session IDs and review tab (for position restore after restart)
+  const sessionOrder = state.tabOrder.filter(id => state.sessions.has(id) || id === 'review');
   savePref('tab_order', sessionOrder);
 }
 
@@ -4995,6 +5257,11 @@ function showRulesPanel() {
 
 function closeSpecialTab(tabId) {
   state.tabOrder = state.tabOrder.filter(t => t !== tabId);
+  if (tabId === 'review') {
+    state.reviewingSessionId = null;
+    savePref('reviewing_session', null);
+    document.querySelectorAll('.recent-item.reviewing').forEach(el => el.classList.remove('reviewing'));
+  }
   if (state.activeTab === tabId) {
     // Prefer switching to an active session, then fall back to sessions nav
     const nextSession = state.tabOrder.filter(t => state.sessions.has(t)).pop();
@@ -5283,6 +5550,7 @@ function _restoreScrollAnchor(term, anchor) {
 }
 new ResizeObserver(fitActiveTerminal).observe(document.getElementById('terminal-area'));
 window.addEventListener('resize', fitActiveTerminal);
+window.addEventListener('resize', updateTabOverflowBtn);
 
 // Default cwd hint
 const cwdInput = document.getElementById('ns-cwd');
@@ -5369,6 +5637,11 @@ async function loadPrefs() {
         state._savedTabOrder = prefs.tab_order;
       }
 
+      // Restore reviewing session (reopen review tab after CTM restart)
+      if (prefs.reviewing_session) {
+        state._savedReviewingSession = prefs.reviewing_session;
+      }
+
       // Restore code review tree width
       if (prefs.cr_tree_width) {
         state._savedCrTreeWidth = prefs.cr_tree_width;
@@ -5481,6 +5754,27 @@ async function loadRecentSessions() {
     }
   }
 
+  // Restore reviewing session from prefs (reopen after CTM restart)
+  // Only if no hash override and no review already open
+  if (state._savedReviewingSession && !state.reviewingSessionId && !location.hash.includes('review=')) {
+    const savedId = state._savedReviewingSession;
+    delete state._savedReviewingSession;
+    const s = allRecentSessions.find(x => x.sessionId === savedId);
+    if (s) {
+      state.reviewingSessionId = savedId;
+      // Add review to tab order (matching saved position) but don't activate it
+      if (!state.tabOrder.includes('review')) state.tabOrder.push('review');
+      // Load the review content in the background
+      reviewSession(s.sessionId, s.projectEntry, sessionDisplayText(s), s);
+      // If the saved active session was 'review', activate it; otherwise stay on current tab
+      if (state._savedActiveSession !== 'review') {
+        // reviewSession calls activateTab('review'), so switch back to the saved session
+        const target = state._savedActiveSession || state.tabOrder.find(t => state.sessions.has(t));
+        if (target) setTimeout(() => activateTab(target), 50);
+      }
+    }
+  }
+
   // Re-scan prompts for active sessions now that we have projectEntry data
   for (const [id, s] of state.sessions) {
     if (s.term) scanPromptLines(id);
@@ -5827,6 +6121,12 @@ async function deleteSession(sessionId, projectEntry) {
 }
 
 function openSessionReview(sessionId) {
+  // If already reviewing this session, just switch to the tab without reloading
+  if (state.reviewingSessionId === sessionId && state.tabOrder.includes('review')) {
+    activateTab('review');
+    return;
+  }
+
   const s = allRecentSessions.find(x => x.sessionId === sessionId)
     || { sessionId, cwd: state.sessions.get(sessionId)?.cwd || '', projectEntry: '' };
   state.reviewingSessionId = sessionId;
@@ -5970,6 +6270,9 @@ async function reviewSession(sessionId, projectEntry, title, sessionData) {
     state.tabOrder.push('review');
   }
 
+  // Persist for restore after CTM restart
+  savePref('reviewing_session', sessionId);
+
   // Update URL hash for deep linking (review= for session review)
   history.replaceState(null, '', location.pathname + location.search + '#review=' + sessionId);