create-walle 0.8.0 → 0.9.1

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

@@ -251,10 +251,12 @@
   .session-item .dot {
     width: 7px; height: 7px;
     border-radius: 50%;
-    background: var(--green);
+    background: var(--fg-dim);
     flex-shrink: 0;
+    opacity: 0.4;
   }
-  .session-item.stale .dot { background: var(--yellow, #e0af68); }
+  .session-item.running .dot { background: var(--green); opacity: 1; }
+  .session-item.stale .dot { background: var(--yellow, #e0af68); opacity: 0.7; }
   .session-item .idle-hint {
     font-size: 9px;
     color: var(--yellow, #e0af68);
@@ -269,6 +271,52 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .session-item .status-tag {
+    font-size: 9px;
+    padding: 1px 5px;
+    border-radius: 3px;
+    flex-shrink: 0;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+  .status-tag.running {
+    background: rgba(115, 218, 202, 0.15);
+    color: var(--green);
+  }
+  .session-item.active .status-tag.running {
+    background: rgba(26, 27, 38, 0.15);
+    color: #1a1b26;
+  }
+  .status-tag.running::before {
+    content: '';
+    display: inline-block;
+    width: 5px; height: 5px;
+    border-radius: 50%;
+    background: currentColor;
+    margin-right: 3px;
+    vertical-align: middle;
+    animation: pulse-dot 1.5s ease-in-out infinite;
+  }
+  @keyframes pulse-dot {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+  .status-tag.idle {
+    background: rgba(192, 202, 245, 0.08);
+    color: var(--fg-dim);
+  }
+  .session-item.active .status-tag.idle {
+    background: rgba(26, 27, 38, 0.1);
+    color: rgba(26, 27, 38, 0.5);
+  }
+  .status-tag.waiting {
+    background: rgba(224, 175, 104, 0.15);
+    color: var(--yellow);
+  }
+  .session-item.active .status-tag.waiting {
+    background: rgba(26, 27, 38, 0.15);
+    color: #1a1b26;
+  }
   .session-item .close-btn {
     opacity: 0;
     background: none;
@@ -716,6 +764,37 @@
   .scroll-bottom-btn:hover { transform: scale(1.1); }
   .scroll-bottom-btn.visible { display: flex; }
 
+  /* Prompt navigation */
+  .prompt-nav {
+    display: inline-flex; align-items: center; gap: 2px; margin-left: auto;
+  }
+  .prompt-nav-btn {
+    background: none; border: 1px solid var(--border); color: var(--fg);
+    font-size: 10px; padding: 3px 6px; border-radius: 3px; cursor: pointer;
+    line-height: 1;
+  }
+  .prompt-nav-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
+  .prompt-nav-btn:disabled { opacity: 0.25; cursor: default; }
+  .prompt-nav-btn:disabled:hover { background: none; color: var(--fg); }
+  .prompt-nav-badge {
+    font-size: 11px; color: var(--fg); padding: 2px 6px; cursor: pointer;
+    border-radius: 3px; white-space: nowrap; user-select: none;
+  }
+  .prompt-nav-badge:hover { background: rgba(255,255,255,0.1); color: #fff; }
+  .prompt-nav-list {
+    position: absolute; top: 100%; right: 0; z-index: 50;
+    background: var(--bg-light); border: 1px solid var(--border); border-radius: 6px;
+    max-height: 300px; overflow-y: auto; min-width: 260px; max-width: 400px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.4); padding: 4px 0;
+  }
+  .prompt-nav-list-item {
+    padding: 5px 10px; font-size: 11px; color: var(--fg); cursor: pointer;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .prompt-nav-list-item:hover { background: rgba(255,255,255,0.06); }
+  .prompt-nav-list-item.current { color: var(--accent); font-weight: 600; }
+  .prompt-nav-list-item.not-in-buffer { color: var(--fg-dim); cursor: default; }
+
   .review-msg {
     margin-bottom: 12px;
     border-radius: 8px;
@@ -1285,6 +1364,9 @@
     0%, 100% { opacity: 1; }
     50% { opacity: 0.3; }
   }
+  .tab[draggable="true"] { cursor: grab; }
+  .tab[draggable="true"]:active { cursor: grabbing; }
+  .tab.tab-drag-over { border-left: 2px solid var(--accent); }
   .tab .tab-icon {
     color: var(--green, #9ece6a);
     font-size: 10px;
@@ -1327,7 +1409,7 @@
   .term-container.active { display: flex; flex-direction: column; }
   .term-container .xterm { flex: 1; height: 0; }
   .session-toolbar {
-    display: flex; gap: 6px; padding: 3px 8px;
+    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;
   }
@@ -2237,7 +2319,7 @@
     <nav class="topbar-nav" id="topbar-nav">
       <button class="nav-pill active" data-nav="sessions" onclick="navTo('sessions')" title="Terminal sessions">Sessions</button>
       <button class="nav-pill" data-nav="prompts" onclick="navTo('prompts')" title="Prompt Editor">Prompts</button>
-      <button class="nav-pill" data-nav="walle" onclick="navTo('walle')" title="WALL-E Agent">WALL-E</button>
+      <button class="nav-pill" data-nav="walle" onclick="navTo('walle')" title="WALL-E Agent"><img src="/walle-icon.svg" width="14" height="14" style="vertical-align:middle;margin-right:3px;position:relative;top:-1px;">WALL-E</button>
       <div style="position:relative;display:inline-block;" id="nav-more-wrap">
         <button class="nav-pill" onclick="toggleNavMore()" title="More pages">More <span style="font-size:10px;">&#9662;</span></button>
         <div id="nav-more-dropdown" style="display:none;position:absolute;top:100%;left:0;z-index:999;background:var(--bg-light);border:1px solid var(--border);border-radius:6px;padding:4px 0;min-width:140px;box-shadow:0 4px 12px rgba(0,0,0,0.3);">
@@ -2317,7 +2399,7 @@
         <div id="welcome">
           <h2 style="font-size:24px;margin-bottom:4px;">Welcome to CTM</h2>
           <p style="color:var(--fg-dim);margin-bottom:20px;">Manage Claude Code sessions, prompts, and your AI assistant Wall-E.</p>
-          <button class="btn primary" onclick="createSession()" style="font-size:15px;padding:8px 24px;margin-bottom:28px;">New Claude Session</button>
+          <button class="btn primary" onclick="showNewSessionModal()" style="font-size:15px;padding:8px 24px;margin-bottom:28px;">New Claude Session</button>
           <div style="display:flex;gap:16px;max-width:680px;">
             <div onclick="navTo('sessions')" style="flex:1;padding:14px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;cursor:pointer;">
               <div style="font-weight:600;margin-bottom:4px;color:var(--fg);">Sessions</div>
@@ -2328,7 +2410,7 @@
               <div style="font-size:12px;color:var(--fg-dim);">Save, organize, and send prompts to Claude</div>
             </div>
             <div onclick="navTo('walle')" style="flex:1;padding:14px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;cursor:pointer;">
-              <div style="font-weight:600;margin-bottom:4px;color:var(--fg);">WALL-E</div>
+              <div style="font-weight:600;margin-bottom:4px;color:var(--fg);display:flex;align-items:center;gap:6px;"><img src="/walle-icon.svg" width="18" height="18"> WALL-E</div>
               <div style="font-size:12px;color:var(--fg-dim);">Your personal AI assistant — chat, tasks, and insights</div>
             </div>
           </div>
@@ -2358,6 +2440,11 @@
                 <label style="font-size:11px;color:var(--fg-dim);display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;user-select:none;">
                   <input type="checkbox" id="hide-tool-msgs" checked onchange="savePref('hide_tool_msgs', this.checked); toggleToolMsgs()"> Hide tool calls
                 </label>
+                <div class="prompt-nav" id="review-prompt-nav" style="position:relative">
+                  <button class="prompt-nav-btn" onclick="reviewPromptNavGo(-1)" title="Previous prompt (Alt+&#x2191;)" disabled>&#x25B2;</button>
+                  <span class="prompt-nav-badge" onclick="reviewPromptNavToggleList()" title="Click to see all prompts">0 prompts</span>
+                  <button class="prompt-nav-btn" onclick="reviewPromptNavGo(1)" title="Next prompt (Alt+&#x2193;)" disabled>&#x25BC;</button>
+                </div>
                 <div class="review-actions" id="review-actions"></div>
               </div>
             </div>
@@ -2391,11 +2478,13 @@
         </div>
         <div id="walle-panel">
           <div class="walle-header">
+            <img src="/walle-icon.svg" alt="WALL-E" width="22" height="22" style="vertical-align:middle;">
             <span class="walle-header-title">WALL-E</span>
             <div class="walle-subnav">
               <button class="walle-subnav-btn active" data-view="chat" onclick="WE.showView('chat')">Chat</button>
               <button class="walle-subnav-btn" data-view="tasks" onclick="WE.showView('tasks')">Tasks</button>
               <button class="walle-subnav-btn" data-view="skills" onclick="WE.showView('skills')">Skills</button>
+              <button class="walle-subnav-btn" data-view="mcp" onclick="WE.showView('mcp')">MCP</button>
               <div style="position:relative;display:inline-block;" id="we-more-wrap">
                 <button class="walle-subnav-btn" onclick="WE.toggleMoreTabs()" id="we-more-btn">More <span style="font-size:10px;">&#9662;</span></button>
                 <div id="we-more-dropdown" style="display:none;position:absolute;top:100%;left:0;z-index:999;background:var(--bg-light);border:1px solid var(--border);border-radius:6px;padding:4px 0;min-width:120px;box-shadow:0 4px 12px rgba(0,0,0,0.3);">
@@ -3109,8 +3198,11 @@ function connect() {
       setTimeout(() => {
         if (state.ws?.readyState === 1) {
           overlay.classList.remove('active');
+          const wasRestarting = state._restarting;
           state._restarting = false;
-          if (attempts > showOverlayAfter) toast('Server reconnected', { type: 'success' });
+          if (attempts > showOverlayAfter || wasRestarting) toast('Server reconnected', { type: 'success' });
+          // Post-reconnect reinitialization — refresh all state that may have gone stale
+          onReconnected();
         } else {
           setTimeout(tryReconnect, state._restarting ? 1000 : 2000);
         }
@@ -3120,6 +3212,30 @@ function connect() {
   };
 }
 
+function onReconnected() {
+  // Refresh sidebar data (recent sessions, prompt links, etc.)
+  loadRecentSessions();
+  refreshSessionPrompts();
+  // Clear prompt scan cache so it re-fetches from API
+  for (const key of Object.keys(_promptScanCache)) delete _promptScanCache[key];
+  // Re-attach ALL sessions — after a restart, the server has a fresh WS client map
+  // so existing sessions need to re-register their WS connection for input to work.
+  for (const [id] of state.sessions) {
+    send({ type: 'attach', id });
+  }
+  // Resize active session's PTY to match current terminal dimensions
+  if (state.activeTab && state.sessions.has(state.activeTab)) {
+    const s = state.sessions.get(state.activeTab);
+    if (s && s.term && s.fitAddon) {
+      requestAnimationFrame(() => {
+        s.fitAddon.fit();
+        send({ type: 'resize', id: state.activeTab, cols: s.term.cols, rows: s.term.rows });
+        s.term.focus();
+      });
+    }
+  }
+}
+
 function send(msg) {
   if (state.ws?.readyState === 1) {
     state.ws.send(JSON.stringify(msg));
@@ -3211,7 +3327,7 @@ async function restartAll() {
   await new Promise(r => setTimeout(r, 500));
   state._restarting = true;
   try {
-    await fetch(`/api/restart/ctm?token=${state.token}`, { method: 'POST' });
+    await fetch(`/api/restart/ctm?token=${state.token}&force=true`, { method: 'POST' });
   } catch { /* expected — server dying */ }
 }
 
@@ -3238,7 +3354,7 @@ async function svcAction(service, action) {
     state._restarting = true;
     hideAppMenu();
     try {
-      await fetch(`/api/restart/ctm?token=${state.token}`, { method: 'POST' });
+      await fetch(`/api/restart/ctm?token=${state.token}&force=true`, { method: 'POST' });
     } catch { /* expected — server dying */ }
   }
 }
@@ -3264,6 +3380,19 @@ function createTerminal(id) {
   reviewBtn.textContent = '\u{1F50D} Review';
   reviewBtn.onclick = function() { openSessionReview(id); };
   toolbar.appendChild(reviewBtn);
+
+  // Prompt navigation — prev/next arrows + count badge (click for list)
+  const promptNav = document.createElement('div');
+  promptNav.className = 'prompt-nav';
+  promptNav.style.position = 'relative';
+  promptNav.innerHTML =
+    '<button class="prompt-nav-btn" data-dir="prev" title="Previous prompt (Alt+\u2191)" disabled>&#x25B2;</button>' +
+    '<span class="prompt-nav-badge" title="Click to see all prompts">0/0</span>' +
+    '<button class="prompt-nav-btn" data-dir="next" title="Next prompt (Alt+\u2193)" disabled>&#x25BC;</button>';
+  promptNav.querySelector('[data-dir="prev"]').onclick = function() { promptNavGo(id, -1); };
+  promptNav.querySelector('[data-dir="next"]').onclick = function() { promptNavGo(id, 1); };
+  promptNav.querySelector('.prompt-nav-badge').onclick = function() { promptNavToggleList(id); };
+  toolbar.appendChild(promptNav);
   container.appendChild(toolbar);
 
   document.getElementById('terminal-area').appendChild(container);
@@ -3309,29 +3438,309 @@ function createTerminal(id) {
   term.onData((data) => {
     send({ type: 'input', id, data });
     clearWaitingState(id);
-    // User typed something — scroll to bottom so they see the response
+    // User typed something — scroll to bottom and re-enable follow mode
     const s = state.sessions.get(id);
-    if (s) s.term.scrollToBottom();
+    if (s) { s.writer.followMode = true; s.term.scrollToBottom(); }
   });
 
   term.onResize(({ cols, rows }) => {
+    const s = state.sessions.get(id);
+    if (s && s._suppressResize) return; // Skip during font metric refresh
     send({ type: 'resize', id, cols, rows });
   });
 
-  // Auto-scroll is handled in onOutput using xterm.js buffer API (viewportY vs baseY).
-  // No manual tracking needed — xterm.js buffer is the source of truth.
-  //
-  // Safety: clicking the terminal forces a fit() recalculation, fixing any scroll desync
-  // that may occur after Claude Code's TUI exits or terminal state changes.
-  container.addEventListener('click', () => {
-    const s = state.sessions.get(id);
-    if (s) s.fitAddon.fit();
+  // Alt screen buffer switch listener — when Claude Code's TUI (Ink) exits,
+  // force fit + scroll immediately instead of waiting for the idle timer.
+  term.buffer.onBufferChange((activeBuffer) => {
+    if (activeBuffer.type === 'normal') {
+      requestAnimationFrame(() => {
+        const s = state.sessions.get(id);
+        if (s) {
+          s.fitAddon.fit();
+          // Returning from alt screen — scroll to bottom and re-enable follow
+          s.writer.followMode = true;
+          s.term.scrollToBottom();
+        }
+      });
+    }
   });
 
-  state.sessions.set(id, { term, fitAddon, container, needsFontRefresh: true });
+  // 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.
+  const viewportEl = container.querySelector('.xterm-viewport');
+  if (viewportEl) {
+    let lastWheelTime = 0;
+    let lastDeltaY = 0;
+    let momentumCount = 0;
+    viewportEl.addEventListener('wheel', (e) => {
+      const now = Date.now();
+      const elapsed = now - lastWheelTime;
+      lastWheelTime = now;
+      if (elapsed < 80 && Math.abs(e.deltaY) < Math.abs(lastDeltaY) * 0.9) {
+        momentumCount++;
+      } else if (elapsed > 120) {
+        momentumCount = 0;
+      }
+      lastDeltaY = e.deltaY;
+      if (momentumCount >= 4) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }, { capture: true, passive: false });
+  }
+
+  // RAF write batcher — coalesces rapid output into ~60fps frames to prevent
+  // viewport desync during burst output (Claude Code thinking/streaming).
+  const writer = {
+    queue: '',
+    scheduled: false,
+    followMode: true,  // tracks whether we should auto-scroll
+    _suppressScroll: 0, // timestamp until which onScroll is suppressed
+  };
+
+  // Track user scroll to toggle follow mode:
+  // - Scrolling up disables auto-scroll so the user can read history
+  // - Scrolling back to the bottom re-enables it
+  // - Suppressed briefly after fit() to prevent reflow from flipping followMode
+  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;
+    writer.followMode = atBottom;
+  });
+
+  state.sessions.set(id, { term, fitAddon, container, needsFontRefresh: true, writer, promptLines: [], promptNavIdx: -1 });
   return { term, fitAddon, container };
 }
 
+// --- Prompt Navigation (active terminal) ---
+
+// Scan for user prompts using the structured JSONL conversation data (same source as the Review page).
+// Falls back to terminal regex if the API is unavailable.
+// API results are cached and only re-fetched every 30s to avoid input lag.
+const _promptScanCache = {}; // { [sessionId]: { ts, previews } }
+
+function scanPromptLines(id) {
+  const s = state.sessions.get(id);
+  if (!s) return;
+  const recent = allRecentSessions.find(r => r.sessionId === id);
+  if (recent && recent.projectEntry) {
+    const cache = _promptScanCache[id];
+    if (cache && Date.now() - cache.ts < 30000) {
+      // Cache is fresh — just update badge from cached count (no buffer search)
+      if (!s.promptPreviews || s.promptPreviews.length !== cache.previews.length) {
+        s.promptLines = cache.previews.map(() => -1);
+        s.promptPreviews = cache.previews;
+        s.promptNavIdx = -1;
+      }
+      promptNavUpdateBadge(id);
+      return;
+    }
+    _scanPromptLinesFromAPI(id, recent.projectEntry);
+  } else {
+    _scanPromptLinesFromTerminal(id);
+  }
+}
+
+async function _scanPromptLinesFromAPI(id, projectEntry) {
+  const s = state.sessions.get(id);
+  if (!s) return;
+  try {
+    const res = await fetch(`/api/session/messages?id=${id}&project=${encodeURIComponent(projectEntry)}&token=${state.token}`);
+    const messages = await res.json();
+    if (messages.error || !Array.isArray(messages)) {
+      _scanPromptLinesFromTerminal(id);
+      return;
+    }
+    // Match the review page: count all role:'user' messages
+    const userMsgs = messages.filter(m => m.role === 'user');
+    const previews = [];
+    for (const msg of userMsgs) {
+      const firstLine = msg.text.split('\n')[0].trim();
+      if (!firstLine || firstLine.length < 3) continue;
+      previews.push(firstLine.slice(0, 80));
+    }
+    _promptScanCache[id] = { ts: Date.now(), previews };
+    if (s) s._promptLinesResolved = false;
+    // Set prompt data without buffer search — positions resolved lazily on navigate/dropdown
+    s.promptLines = previews.map(() => -1);
+    s.promptPreviews = previews;
+    s.promptNavIdx = -1;
+    promptNavUpdateBadge(id);
+  } catch {
+    _scanPromptLinesFromTerminal(id);
+  }
+}
+
+function _applyPromptCache(id) {
+  const s = state.sessions.get(id);
+  const cache = _promptScanCache[id];
+  if (!s || !cache) return;
+  // Build buffer text index once, then match prompts against it
+  const buf = s.term.buffer.active;
+  const totalLines = buf.baseY + buf.cursorY;
+  const bufTexts = new Array(totalLines + 1);
+  for (let i = 0; i <= totalLines; i++) {
+    const line = buf.getLine(i);
+    bufTexts[i] = line ? line.translateToString(true) : '';
+  }
+  const lines = [];
+  let searchFrom = 0;
+  for (const preview of cache.previews) {
+    let found = -1;
+    if (preview.length >= 10) {
+      const needle = preview.slice(0, 30);
+      for (let i = searchFrom; i <= totalLines; i++) {
+        if (bufTexts[i].includes(needle)) {
+          found = i;
+          searchFrom = i + 1;
+          break;
+        }
+      }
+    }
+    lines.push(found);
+  }
+  s.promptLines = lines;
+  s.promptPreviews = cache.previews;
+  s.promptNavIdx = -1;
+  promptNavUpdateBadge(id);
+}
+
+function _scanPromptLinesFromTerminal(id) {
+  const s = state.sessions.get(id);
+  if (!s) return;
+  const buf = s.term.buffer.active;
+  const lines = [];
+  let prevText = '';
+  for (let i = 0; i <= buf.baseY + buf.cursorY; i++) {
+    const line = buf.getLine(i);
+    if (!line) continue;
+    const text = line.translateToString(true);
+    // Match Claude Code prompt: ❯ at column 0, followed by space + non-space.
+    if (/^❯[ \u00a0]\S/.test(text)) {
+      if (text !== prevText) {
+        lines.push(i);
+        prevText = text;
+      }
+    }
+  }
+  s.promptLines = lines;
+  s.promptPreviews = null;
+  s.promptNavIdx = -1;
+  promptNavUpdateBadge(id);
+}
+
+function _ensurePromptBufferPositions(id) {
+  const s = state.sessions.get(id);
+  if (!s || !s.promptPreviews) return;
+  // Skip if already resolved (has at least one non-negative line)
+  if (s._promptLinesResolved) return;
+  s._promptLinesResolved = true;
+  _applyPromptCache(id);
+}
+
+function promptNavGo(id, dir) {
+  const s = state.sessions.get(id);
+  if (!s || s.promptLines.length === 0) return;
+  _ensurePromptBufferPositions(id);
+
+  // Find the next navigable prompt (one with a valid buffer line)
+  let newIdx = s.promptNavIdx;
+  while (true) {
+    newIdx += (s.promptNavIdx < 0 ? (dir < 0 ? 0 : 1) : dir);
+    if (s.promptNavIdx < 0 && dir < 0) { newIdx = s.promptLines.length - 1; }
+    if (newIdx < 0 || newIdx >= s.promptLines.length) return;
+    if (s.promptLines[newIdx] >= 0) break; // Found a navigable prompt
+    if (dir === 0) return;
+    // Skip prompts not in the terminal buffer
+  }
+
+  s.promptNavIdx = newIdx;
+  const targetLine = s.promptLines[newIdx];
+  s.writer.followMode = false;
+  s.term.scrollToLine(Math.max(0, targetLine - 1));
+  promptNavUpdateBadge(id);
+}
+
+function promptNavUpdateBadge(id) {
+  const s = state.sessions.get(id);
+  if (!s) return;
+  const nav = s.container.querySelector('.prompt-nav');
+  if (!nav) return;
+  const badge = nav.querySelector('.prompt-nav-badge');
+  const prevBtn = nav.querySelector('[data-dir="prev"]');
+  const nextBtn = nav.querySelector('[data-dir="next"]');
+  const total = s.promptLines.length;
+  const idx = s.promptNavIdx;
+  badge.textContent = total === 0 ? '0 prompts' : (idx >= 0 ? (idx + 1) + '/' + total : total + (total === 1 ? ' prompt' : ' prompts'));
+  prevBtn.disabled = total === 0 || idx <= 0;
+  nextBtn.disabled = total === 0 || idx >= total - 1;
+}
+
+function promptNavToggleList(id) {
+  const s = state.sessions.get(id);
+  if (!s) return;
+  _ensurePromptBufferPositions(id);
+  const nav = s.container.querySelector('.prompt-nav');
+  if (!nav) return;
+  // Close existing list
+  const existing = nav.querySelector('.prompt-nav-list');
+  if (existing) { existing.remove(); return; }
+  if (s.promptLines.length === 0) return;
+
+  // Build list showing preview text for each prompt
+  const list = document.createElement('div');
+  list.className = 'prompt-nav-list';
+  const buf = s.term.buffer.active;
+  // Show most recent prompts first
+  for (let i = s.promptLines.length - 1; i >= 0; i--) {
+    let text;
+    if (s.promptPreviews && s.promptPreviews[i]) {
+      text = s.promptPreviews[i];
+    } else if (s.promptLines[i] >= 0) {
+      const line = buf.getLine(s.promptLines[i]);
+      if (!line) continue;
+      text = line.translateToString(true).trim();
+    } else {
+      continue; // No preview and not in buffer — skip
+    }
+    if (text.length > 80) text = text.slice(0, 80) + '\u2026';
+    const inBuffer = s.promptLines[i] >= 0;
+    const item = document.createElement('div');
+    item.className = 'prompt-nav-list-item' + (i === s.promptNavIdx ? ' current' : '') + (inBuffer ? '' : ' not-in-buffer');
+    item.textContent = text;
+    if (inBuffer) {
+      item.onclick = (function(idx) { return function() {
+        s.promptNavIdx = idx;
+        s.writer.followMode = false;
+        s.term.scrollToLine(Math.max(0, s.promptLines[idx] - 1));
+        promptNavUpdateBadge(id);
+        list.remove();
+      }; })(i);
+    }
+    list.appendChild(item);
+  }
+  nav.appendChild(list);
+  // Close on outside click (mousedown catches terminal canvas clicks that don't bubble as click)
+  setTimeout(() => {
+    function close(e) {
+      if (!list.contains(e.target)) {
+        list.remove();
+        document.removeEventListener('click', close);
+        document.removeEventListener('mousedown', close);
+      }
+    }
+    document.addEventListener('click', close);
+    document.addEventListener('mousedown', close);
+  }, 0);
+}
+
 function activateTab(id) {
   const specialPanels = ['rules', 'insights', 'permissions', 'prompts', 'codereview', 'walle', 'backups'];
   const isPanel = specialPanels.includes(id);
@@ -3387,20 +3796,24 @@ function activateTab(id) {
   } else if (state.sessions.has(id)) {
     const s = state.sessions.get(id);
     s.container.classList.add('active');
-    // Force xterm.js to re-measure font metrics if terminal was opened while hidden
-    // (must happen synchronously after container becomes visible, before scrollback arrives)
-    if (s.needsFontRefresh) {
-      s.needsFontRefresh = false;
-      const size = s.term.options.fontSize;
-      s.term.options.fontSize = size + 1;
-      s.term.options.fontSize = size;
-    }
     // Update hash so refresh re-attaches to this session
     history.replaceState(null, '', location.pathname + location.search + '#session=' + id);
     savePref('active_session', id);
     requestAnimationFrame(() => {
+      // Force xterm.js to re-measure font metrics if terminal was opened while hidden.
+      // Must happen AFTER container is visible and in rAF so layout is computed.
+      // Suppress onResize during the font toggle to avoid sending wrong PTY dimensions.
+      if (s.needsFontRefresh) {
+        s.needsFontRefresh = false;
+        s._suppressResize = true;
+        const size = s.term.options.fontSize;
+        s.term.options.fontSize = size + 1;
+        s.term.options.fontSize = size;
+        s._suppressResize = false;
+      }
       s.fitAddon.fit();
       send({ type: 'resize', id, cols: s.term.cols, rows: s.term.rows });
+      s.writer.followMode = true;
       s.term.scrollToBottom();
       // If this session needs to attach (reconnect), do it after fit so PTY gets correct size
       if (s.needsAttach) {
@@ -3799,6 +4212,7 @@ function onCreated(msg) {
 
   if (!state.tabOrder.includes(id)) {
     state.tabOrder.push(id);
+    saveTabOrder();
   }
   activateTab(id);
 
@@ -3819,39 +4233,91 @@ function onCreated(msg) {
   if (typeof onSkillSessionCreated === 'function') {
     onSkillSessionCreated(msg);
   }
+
+  // Refresh recent sessions so the new session appears in the sidebar list
+  // (delay to let Claude Code write the .jsonl file)
+  setTimeout(loadRecentSessions, 2000);
 }
 
 function onOutput(msg) {
   const s = state.sessions.get(msg.id);
   if (!s) return;
+  s._lastOutputAt = Date.now();
+  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, '');
-  // Auto-scroll using xterm.js buffer API: if viewport is at the bottom of the
-  // scrollback, keep it there. If user has scrolled up, don't interrupt.
-  // buffer.active.viewportY === buffer.active.baseY means "at bottom".
-  const buf = s.term.buffer.active;
-  const wasAtBottom = buf.viewportY >= buf.baseY;
-  if (state.activeTab === msg.id && wasAtBottom) {
-    s.term.write(data, () => {
-      s.term.scrollToBottom();
+
+  // followMode is maintained by the term.onScroll listener — no manual check needed here.
+
+  // RAF write batcher — coalesces rapid output chunks into ~60fps frames.
+  // This prevents viewport desync caused by hundreds of tiny writes/sec
+  // during Claude Code streaming output.
+  const sid = msg.id;
+  s.writer.queue += data;
+  if (!s.writer.scheduled) {
+    s.writer.scheduled = true;
+    requestAnimationFrame(() => {
+      const batch = s.writer.queue;
+      const follow = s.writer.followMode;
+      s.writer.queue = '';
+      s.writer.scheduled = false;
+      // Re-check active tab at render time (may have changed since queued)
+      if (state.activeTab === sid && follow) {
+        s.term.write(batch, () => {
+          s.term.scrollToBottom();
+        });
+      } else {
+        const savedLine = s.term.buffer.active.viewportY;
+        // Suppress during write (large window covers slow writes), then
+        // tighten to a short window in the callback to cover scrollToLine's
+        // own scroll event before expiring naturally. No setTimeout needed.
+        s.writer._suppressScroll = Date.now() + 2000;
+        s.term.write(batch, () => {
+          s.writer._suppressScroll = Date.now() + 100;
+          s.term.scrollToLine(savedLine);
+        });
+      }
     });
-  } else {
-    s.term.write(data);
   }
-  // After output stops for 500ms, force xterm to recalculate viewport dimensions.
-  // This fixes a desync between xterm's internal buffer and the DOM viewport that
-  // can occur when Claude Code's TUI exits (Ink unmount, alt screen buffer exit).
-  // Without this, the viewport may become unscrollable after output finishes.
+
+  // 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) {
-      s.fitAddon.fit();
+      // 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) {
+            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();
+      }
     }
-  }, 500);
+  }, 300);
   // Remove compact banner on new activity
   const banner = s.container.querySelector('.compact-banner');
-  if (banner) { banner.remove(); requestAnimationFrame(() => s.fitAddon.fit()); }
+  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) {
@@ -3885,6 +4351,8 @@ function onScrollback(msg) {
     s.term.clear();
     s.term.write(msg.data, () => {
       s.term.scrollToBottom();
+      // Scan for prompt lines after scrollback is loaded
+      scanPromptLines(msg.id);
     });
 
     // Send resize to ensure PTY matches this client's dimensions
@@ -3901,7 +4369,10 @@ function onExit(msg) {
   }
 }
 
-function onSessionsList(msg) {
+async function onSessionsList(msg) {
+  // Wait for prefs to load before applying (avoids race with tab_order restore)
+  if (state._prefsLoaded) await state._prefsLoaded;
+
   // Update sidebar - merge with existing data
   const serverIds = new Set(msg.sessions.map(s => s.id));
 
@@ -3936,6 +4407,23 @@ function onSessionsList(msg) {
     if (existing) existing.meta = sess;
   }
 
+  // Restore saved tab order (from prefs) on first session list after reconnect
+  if (state._savedTabOrder) {
+    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));
+    const ordered = [];
+    for (const id of saved) {
+      if (sessionIds.includes(id)) ordered.push(id);
+    }
+    for (const id of sessionIds) {
+      if (!ordered.includes(id)) ordered.push(id);
+    }
+    state.tabOrder = [...nonSessionIds, ...ordered];
+  }
+
   renderSessionList();
   renderTabs();
 
@@ -3970,6 +4458,8 @@ function onSessionsList(msg) {
 // --- UI Rendering ---
 function renderSessionList() {
   const list = document.getElementById('session-list');
+  // Skip re-render if user is actively renaming a session (input would be destroyed)
+  if (list.querySelector('input')) return;
   const sessions = Array.from(state.sessions.entries()).filter(([id, s]) => s.meta);
 
   if (sessions.length === 0) {
@@ -3984,19 +4474,89 @@ function renderSessionList() {
     const idleMs = Date.now() - lastAct;
     const isStale = idleMs > 24 * 60 * 60 * 1000;
     const idleHint = isStale ? `<span class="idle-hint">${formatIdleTime(idleMs)}</span>` : '';
+    const sStatus = getSessionStatus(s);
+    const statusTag = isStale ? '' : `<span class="status-tag ${sStatus.cls}">${sStatus.text}</span>`;
     const promptBadges = (s.linkedPrompts || []).map(p =>
       `<span class="prompt-badge" onclick="event.stopPropagation();openPromptInEditor(${p.prompt_id})" title="${escHtml(p.title || 'Prompt')}">${escHtml((p.title || 'Prompt').slice(0, 20))}</span>`
     ).join('');
-    return `<div class="session-item ${isActive ? 'active' : ''} ${isStale ? 'stale' : ''}" onclick="activateTab('${id}')">
+    return `<div class="session-item ${isActive ? 'active' : ''} ${isStale ? 'stale' : ''} ${sStatus.cls === 'running' ? 'running' : ''}" data-session-id="${id}" onclick="sessionItemClick('${id}', event)" ondblclick="sessionItemDblClick('${id}', event)">
       <span class="dot"></span>
       <span class="label" title="${escHtml(label)}">${escHtml(label)}</span>
+      ${statusTag}
       ${idleHint}
       <span class="close-btn" onclick="event.stopPropagation();killSession('${id}')">&times;</span>
     </div>${promptBadges ? `<div class="session-prompts">${promptBadges}</div>` : ''}`;
   }).join('');
 }
 
+// Determine session status: running (actively producing output), waiting (at prompt), idle (quiet)
+function getSessionStatus(s) {
+  const now = Date.now();
+  const recentOutput = s._lastOutputAt && (now - s._lastOutputAt) < 8000;
+  const recentInput = s._lastInputAt && (now - s._lastInputAt) < 8000;
+  if (s._waitingForInput) return { cls: 'waiting', text: 'Waiting' };
+  if (recentOutput || recentInput) return { cls: 'running', text: 'Running' };
+  return { cls: 'idle', text: 'Idle' };
+}
+
+// Lightweight status tag updater — avoids full re-render to preserve rename inputs
+setInterval(function() {
+  const list = document.getElementById('session-list');
+  if (!list || list.querySelector('input')) return;
+  list.querySelectorAll('.session-item[data-session-id]').forEach(el => {
+    const id = el.dataset.sessionId;
+    const s = state.sessions.get(id);
+    if (!s) return;
+    const tag = el.querySelector('.status-tag');
+    if (!tag) return;
+    const st = getSessionStatus(s);
+    if (!tag.classList.contains(st.cls)) {
+      tag.className = 'status-tag ' + st.cls;
+      tag.textContent = st.text;
+      el.classList.toggle('running', st.cls === 'running');
+    }
+  });
+}, 3000);
+
+var _sessionClickTimer = null;
+function sessionItemClick(id, event) {
+  if (_sessionClickTimer) clearTimeout(_sessionClickTimer);
+  _sessionClickTimer = setTimeout(function() { _sessionClickTimer = null; activateTab(id); }, 250);
+}
+function sessionItemDblClick(id, event) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (_sessionClickTimer) { clearTimeout(_sessionClickTimer); _sessionClickTimer = null; }
+  setTimeout(function() {
+    var item = document.querySelector('#session-list .session-item[data-session-id="' + id + '"]');
+    if (item) {
+      var labelEl = item.querySelector('.label');
+      if (labelEl) startRenameSession(id, labelEl);
+    }
+  }, 10);
+}
+
+var _recentClickTimer = null;
+function recentItemClick(id, event) {
+  if (_recentClickTimer) clearTimeout(_recentClickTimer);
+  _recentClickTimer = setTimeout(function() { _recentClickTimer = null; openSessionReview(id); }, 250);
+}
+function recentItemDblClick(id, event) {
+  event.preventDefault();
+  event.stopPropagation();
+  if (_recentClickTimer) { clearTimeout(_recentClickTimer); _recentClickTimer = null; }
+  setTimeout(function() {
+    var item = document.querySelector('.recent-item[data-session-id="' + id + '"]');
+    if (item) {
+      var labelEl = item.querySelector('.recent-msg-text');
+      if (labelEl) startRenameRecentSession(id, labelEl);
+    }
+  }, 10);
+}
+
 function startRenameSession(sessionId, labelEl) {
+  // Guard: already editing
+  if (labelEl.querySelector('input')) return;
   const currentText = labelEl.textContent.trim();
   const input = document.createElement('input');
   input.type = 'text';
@@ -4007,18 +4567,35 @@ function startRenameSession(sessionId, labelEl) {
   input.focus();
   input.select();
 
+  let done = false;
   function finish() {
+    if (done) return;
+    done = true;
     const newName = input.value.trim();
     if (newName && newName !== currentText) {
-      // Send rename via WebSocket
-      if (state.ws && state.ws.readyState === 1) {
-        state.ws.send(JSON.stringify({ type: 'rename', id: sessionId, label: newName }));
+      // Persist to DB via REST API
+      fetch(`/api/sessions/rename?token=${state.token}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId, title: newName }),
+      });
+      // Update active session label
+      const active = state.sessions.get(sessionId);
+      if (active && active.meta) active.meta.label = newName;
+      // Update recent session list
+      const recent = allRecentSessions.find(x => x.sessionId === sessionId);
+      if (recent) { recent.aiTitle = newName; recent.userRenamed = true; }
+      // Update review title if this session is being reviewed
+      if (state.reviewingSessionId === sessionId) {
+        const reviewTitleEl = document.getElementById('review-title');
+        if (reviewTitleEl) reviewTitleEl.textContent = newName;
       }
-      // Update local state immediately
-      const s = state.sessions.get(sessionId);
-      if (s && s.meta) s.meta.label = newName;
     }
+    // Remove input before re-rendering so the input-guard doesn't block
+    input.remove();
     renderSessionList();
+    renderFilteredSessions();
+    renderTabs();
   }
 
   input.addEventListener('blur', finish);
@@ -4099,11 +4676,18 @@ function startRenameRecentSession(sessionId, spanEl) {
       });
       // Update local data immediately
       const s = allRecentSessions.find(x => x.sessionId === sessionId);
-      if (s) s.aiTitle = newName;
+      if (s) { s.aiTitle = newName; s.userRenamed = true; }
       // Also update active session if applicable
       const active = state.sessions.get(sessionId);
       if (active && active.meta) active.meta.label = newName;
+      // Update review title if this session is being reviewed
+      if (state.reviewingSessionId === sessionId) {
+        const reviewTitleEl = document.getElementById('review-title');
+        if (reviewTitleEl) reviewTitleEl.textContent = newName;
+      }
     }
+    // Remove input before re-rendering so the input-guard doesn't block
+    input.remove();
     renderFilteredSessions();
     renderSessionList();
     renderTabs();
@@ -4160,8 +4744,14 @@ function showCompactBannerIfStale(id, s) {
     <button class="compact-dismiss" onclick="dismissCompactBanner('${id}')">&times;</button>
   `;
   s.container.prepend(banner);
-  // Refit terminal since banner takes space
-  requestAnimationFrame(() => s.fitAddon.fit());
+  // Refit terminal since banner takes space — preserve scroll position
+  requestAnimationFrame(() => {
+    const ln = s.term.buffer.active.viewportY;
+    const atBot = s.writer.followMode;
+    s.writer._suppressScroll = Date.now() + 200;
+    s.fitAddon.fit();
+    if (!atBot) s.term.scrollToLine(ln);
+  });
 }
 
 function compactSession(id) {
@@ -4176,13 +4766,21 @@ function dismissCompactBanner(id) {
     const banner = s.container.querySelector('.compact-banner');
     if (banner) {
       banner.remove();
-      requestAnimationFrame(() => s.fitAddon.fit());
+      requestAnimationFrame(() => {
+        const ln = s.term.buffer.active.viewportY;
+        const atBot = s.writer.followMode;
+        s.writer._suppressScroll = Date.now() + 200;
+        s.fitAddon.fit();
+        if (!atBot) s.term.scrollToLine(ln);
+      });
     }
   }
 }
 
 function renderTabs() {
   const tabbar = document.getElementById('tabbar');
+  // Skip re-render if user is actively renaming a tab
+  if (tabbar.querySelector('input')) return;
   const addBtn = tabbar.querySelector('.tab-add');
 
   // Remove old tabs
@@ -4237,20 +4835,70 @@ function renderTabs() {
 
     const tab = document.createElement('div');
     tab.className = `tab ${state.activeTab === id ? 'active' : ''}`;
-    tab.innerHTML = `<span class="tab-icon">▸</span><span>${escHtml(label)}</span><span class="close-tab" onclick="event.stopPropagation();killSession('${id}')">&times;</span>`;
-    tab.onclick = () => activateTab(id);
+    tab.dataset.sessionId = id;
+    tab.draggable = true;
+    tab.innerHTML = `<span class="tab-icon">▸</span><span class="tab-label">${escHtml(label)}</span><span class="close-tab" onclick="event.stopPropagation();killSession('${escHtml(id)}')">&times;</span>`;
+    tab.onclick = function(e) { sessionItemClick(id, e); };
+    tab.ondblclick = function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (_sessionClickTimer) { clearTimeout(_sessionClickTimer); _sessionClickTimer = null; }
+      setTimeout(function() {
+        var t = document.querySelector('#tabbar .tab[data-session-id="' + id + '"] .tab-label');
+        if (t) startRenameSession(id, t);
+      }, 10);
+    };
+    tab.ondragstart = function(e) { _tabDragId = id; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', id); 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 === id) return;
+      const from = state.tabOrder.indexOf(_tabDragId);
+      const to = state.tabOrder.indexOf(id);
+      if (from === -1 || to === -1) return;
+      state.tabOrder.splice(from, 1);
+      state.tabOrder.splice(to, 0, _tabDragId);
+      _tabDragId = null;
+      saveTabOrder();
+      renderTabs();
+    };
     tabbar.insertBefore(tab, addBtn);
   }
 }
 
+// --- 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));
+  savePref('tab_order', sessionOrder);
+}
+
 // --- Actions ---
+function getLastSessionCwd() {
+  // Try most recently active session's cwd
+  let latest = null;
+  for (const [id, s] of state.sessions) {
+    if (s.meta?.cwd && (!latest || (s.meta.lastActivity || 0) > (latest.lastActivity || 0))) {
+      latest = s.meta;
+    }
+  }
+  if (latest?.cwd) return latest.cwd;
+  // Fall back to most recent session from filesystem
+  if (allRecentSessions.length > 0) return allRecentSessions[0].cwd || allRecentSessions[0].project || '';
+  return '';
+}
+
 function showNewSessionModal() {
   document.getElementById('new-session-modal').classList.remove('hidden');
-  document.getElementById('ns-cwd').value = '';
+  document.getElementById('ns-cwd').value = getLastSessionCwd();
   document.getElementById('ns-label').value = '';
   document.getElementById('ns-type').value = 'claude';
   onSessionTypeChange();
-  document.getElementById('ns-cwd').focus();
+  document.getElementById('ns-label').focus();
 }
 
 function closeModal(id) {
@@ -4296,6 +4944,7 @@ function killSession(id) {
     state.sessions.delete(id);
   }
   state.tabOrder = state.tabOrder.filter(t => t !== id);
+  saveTabOrder();
 
   if (state.activeTab === id) {
     const next = state.tabOrder[state.tabOrder.length - 1];
@@ -4314,9 +4963,27 @@ function toggleSidebar() {
   state.sidebarManuallyHidden = state.sidebarCollapsed;
   document.getElementById('sidebar').classList.toggle('collapsed', state.sidebarCollapsed);
   document.getElementById('sidebar-resize').style.display = state.sidebarCollapsed ? 'none' : '';
-  // Refit active terminal
+  // Refit active terminal — restore scroll position if user scrolled up
   if (state.activeTab && state.sessions.has(state.activeTab)) {
-    setTimeout(() => state.sessions.get(state.activeTab).fitAddon.fit(), 100);
+    setTimeout(() => {
+      const s = state.sessions.get(state.activeTab);
+      if (!s) return;
+      const wasAtBottom = s.writer.followMode;
+      const savedLine = s.term.buffer.active.viewportY;
+      const oldCols = s.term.cols;
+      const savedAnchor = wasAtBottom ? null : _getScrollAnchor(s.term);
+      s.writer._suppressScroll = Date.now() + 200;
+      s.fitAddon.fit();
+      if (!wasAtBottom) {
+        if (s.term.cols !== oldCols) {
+          _restoreScrollAnchor(s.term, savedAnchor);
+          // Invalidate prompt line positions — reflow shifts them
+          s._promptLinesResolved = false;
+        } else {
+          s.term.scrollToLine(savedLine);
+        }
+      }
+    }, 100);
   }
 }
 
@@ -4494,6 +5161,20 @@ document.addEventListener('keydown', (e) => {
       swapNav();
     }
   }
+  // Alt+Up/Down: navigate prompts in active terminal or review panel
+  if (e.altKey && !e.ctrlKey && !e.metaKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+    const dir = e.key === 'ArrowUp' ? -1 : 1;
+    if (state.activeTab === 'review') {
+      e.preventDefault();
+      reviewPromptNavGo(dir);
+    } else {
+      const id = state.activeTab;
+      if (id && state.sessions.has(id)) {
+        e.preventDefault();
+        promptNavGo(id, dir);
+      }
+    }
+  }
   // Escape: close modal
   if (e.key === 'Escape') {
     document.querySelectorAll('.modal-overlay:not(.hidden)').forEach(m => m.classList.add('hidden'));
@@ -4536,11 +5217,70 @@ function fitActiveTerminal() {
     _fitDebounce = null;
     if (state.activeTab && state.sessions.has(state.activeTab)) {
       const s = state.sessions.get(state.activeTab);
+      const buf = s.term.buffer.active;
+      const wasAtBottom = buf.viewportY >= buf.baseY;
+      const savedLine = buf.viewportY;
+      const oldCols = s.term.cols;
+      const savedAnchor = wasAtBottom ? null : _getScrollAnchor(s.term);
+      // Suppress onScroll so reflow doesn't flip followMode
+      s.writer._suppressScroll = Date.now() + 200;
       s.fitAddon.fit();
       send({ type: 'resize', id: state.activeTab, cols: s.term.cols, rows: s.term.rows });
+      if (wasAtBottom) {
+        s.term.scrollToBottom();
+      } else if (s.term.cols !== oldCols) {
+        // Cols changed — reflow shifted content, use anchor search
+        _restoreScrollAnchor(s.term, savedAnchor);
+        // Invalidate prompt line positions — reflow shifts them
+        s._promptLinesResolved = false;
+      } else {
+        // Same cols — just restore line position
+        s.term.scrollToLine(savedLine);
+      }
     }
   });
 }
+
+// Content-based scroll anchor: saves text at viewport position so we can find
+// the same content after reflow (column change causes line wrapping shifts).
+function _getScrollAnchor(term) {
+  const buf = term.buffer.active;
+  const viewportY = buf.viewportY;
+  // Grab a few non-empty lines near the viewport top as anchor text
+  const anchors = [];
+  for (let i = 0; i < 10 && anchors.length < 3; i++) {
+    const line = buf.getLine(viewportY + i);
+    if (line) {
+      const text = line.translateToString(true).trim();
+      if (text.length > 8) anchors.push({ offset: i, text });
+    }
+  }
+  return { viewportY, baseY: buf.baseY, anchors };
+}
+
+function _restoreScrollAnchor(term, anchor) {
+  const buf = term.buffer.active;
+  const newBaseY = buf.baseY;
+  if (!anchor.anchors.length) {
+    term.scrollToLine(Math.min(anchor.viewportY, newBaseY));
+    return;
+  }
+  const searchText = anchor.anchors[0].text.substring(0, 30);
+  // Full forward scan from line 0 — reflow can shift content anywhere when
+  // the scrollback buffer is at its cap and line wrapping changes.
+  for (let i = 0; i <= newBaseY; i++) {
+    const line = buf.getLine(i);
+    if (line) {
+      const text = line.translateToString(true).trim();
+      if (text.includes(searchText)) {
+        term.scrollToLine(Math.max(0, i - anchor.anchors[0].offset));
+        return;
+      }
+    }
+  }
+  // Fallback: keep same viewportY
+  term.scrollToLine(Math.min(anchor.viewportY, newBaseY));
+}
 new ResizeObserver(fitActiveTerminal).observe(document.getElementById('terminal-area'));
 window.addEventListener('resize', fitActiveTerminal);
 
@@ -4552,6 +5292,7 @@ cwdInput.addEventListener('focus', () => {
 
 // --- Recent Sessions ---
 let allRecentSessions = [];
+let _convSearchPending = false;
 let currentFilter = 'all';
 let aiSearchMode = false;
 let aiSearchDebounce = null;
@@ -4623,6 +5364,11 @@ async function loadPrefs() {
         state._savedActiveSession = prefs.active_session;
       }
 
+      // Restore tab order
+      if (prefs.tab_order && Array.isArray(prefs.tab_order)) {
+        state._savedTabOrder = prefs.tab_order;
+      }
+
       // Restore code review tree width
       if (prefs.cr_tree_width) {
         state._savedCrTreeWidth = prefs.cr_tree_width;
@@ -4734,6 +5480,11 @@ async function loadRecentSessions() {
       reviewSession(s.sessionId, s.projectEntry, sessionDisplayText(s), s);
     }
   }
+
+  // Re-scan prompts for active sessions now that we have projectEntry data
+  for (const [id, s] of state.sessions) {
+    if (s.term) scanPromptLines(id);
+  }
 }
 
 const CTM_SESSION_PATTERNS = [
@@ -4777,16 +5528,70 @@ function getFilteredSessions() {
 let titleGenInProgress = false;
 
 function renderFilteredSessions() {
+  // Skip re-render if user is actively renaming a session in the recent list
+  const recentList = document.getElementById('recent-list');
+  if (recentList && recentList.querySelector('input[type="text"]')) return;
   const q = document.getElementById('recent-search').value.toLowerCase();
   let sessions = getFilteredSessions();
   if (q && !aiSearchMode) {
-    sessions = sessions.filter(s =>
-      (s.firstMessage || '').toLowerCase().includes(q) ||
-      (s.aiTitle || '').toLowerCase().includes(q) ||
-      s.project.toLowerCase().includes(q) ||
-      s.sessionId.toLowerCase().includes(q) ||
-      (s.gitBranch || '').toLowerCase().includes(q)
-    );
+    // First filter local metadata
+    const metaMatches = new Set();
+    const recentIds = new Set(sessions.map(s => s.sessionId));
+    sessions = sessions.filter(s => {
+      // Also check active session label (tab name)
+      const activeLabel = state.sessions.get(s.sessionId)?.meta?.label || '';
+      const match = (s.firstMessage || '').toLowerCase().includes(q) ||
+        (s.aiTitle || '').toLowerCase().includes(q) ||
+        s.project.toLowerCase().includes(q) ||
+        s.sessionId.toLowerCase().includes(q) ||
+        (s.gitBranch || '').toLowerCase().includes(q) ||
+        activeLabel.toLowerCase().includes(q);
+      if (match) metaMatches.add(s.sessionId);
+      return match;
+    });
+    // Include active sessions matching by label that aren't yet in allRecentSessions
+    for (const [id, s] of state.sessions) {
+      if (recentIds.has(id) || metaMatches.has(id)) continue;
+      const label = s.meta?.label || '';
+      if (label.toLowerCase().includes(q)) {
+        sessions.push({
+          sessionId: id,
+          project: s.meta?.cwd || '',
+          projectEntry: '',
+          cwd: s.meta?.cwd || '',
+          firstMessage: '',
+          title: label,
+          aiTitle: label,
+          isEmpty: true,
+          userMsgCount: 0,
+          modifiedAt: new Date(s.meta?.createdAt || Date.now()).toISOString(),
+          timestamp: new Date(s.meta?.createdAt || Date.now()).toISOString(),
+          version: '',
+          gitBranch: '',
+          fileSize: 0,
+        });
+        metaMatches.add(id);
+      }
+    }
+    // Also search imported conversations in DB (async, will re-render when results arrive)
+    if (sessions.length === 0 && q.length >= 3 && !_convSearchPending) {
+      _convSearchPending = true;
+      fetch('/api/conversations?search=' + encodeURIComponent(q) + '&limit=20&all_devices=1&token=' + (state.token || ''))
+        .then(r => r.json())
+        .then(data => {
+          _convSearchPending = false;
+          const convResults = (data.backups ? [] : (Array.isArray(data) ? data : []));
+          if (convResults.length === 0) return;
+          // Merge conversation matches into session list
+          for (const c of convResults) {
+            if (metaMatches.has(c.session_id)) continue;
+            const existing = allRecentSessions.find(s => s.sessionId === c.session_id);
+            if (existing && !sessions.includes(existing)) sessions.push(existing);
+          }
+          if (sessions.length > 0) renderRecentSessions(sessions);
+        })
+        .catch(() => { _convSearchPending = false; });
+    }
   }
 
   // Sort: pinned first (in user-defined order), then by modifiedAt
@@ -4877,7 +5682,7 @@ function sessionItemHtml(s) {
   const isPinned = pinnedSessionIds.includes(s.sessionId);
   const pinCls = isPinned ? ' pinned' : '';
   const dragAttrs = isPinned ? ` draggable="true" ondragstart="pinDragStart(event)" ondragover="pinDragOver(event)" ondragleave="pinDragLeave(event)" ondrop="pinDrop(event)" ondragend="pinDragEnd(event)"` : '';
-  return `<div class="recent-item${reviewing}${pinCls}" data-session-id="${s.sessionId}"${dragAttrs} onclick="openSessionReview('${s.sessionId}')" oncontextmenu="event.preventDefault();togglePinSession('${s.sessionId}')">
+  return `<div class="recent-item${reviewing}${pinCls}" data-session-id="${s.sessionId}"${dragAttrs} onclick="recentItemClick('${s.sessionId}', event)" ondblclick="recentItemDblClick('${s.sessionId}', event)" oncontextmenu="event.preventDefault();togglePinSession('${s.sessionId}')">
     <div class="recent-msg"><span class="pin-icon" style="${isPinned ? 'cursor:grab;' : ''}">&#9733;</span><span class="recent-msg-text">${escHtml(displayText)}</span>${emptyTag}${deviceTag}</div>
     <div class="recent-meta">
       <span class="project">${escHtml(project)}</span>
@@ -5201,6 +6006,9 @@ async function reviewSession(sessionId, projectEntry, title, sessionData) {
     // Apply tool-only visibility
     toggleToolMsgs();
 
+    // Update review prompt navigation
+    reviewPromptNavReset();
+
     renderTabs();
   } catch (e) {
     document.getElementById('review-messages').innerHTML = `<div style="padding:20px;color:var(--red)">Failed to load: ${escHtml(e.message)}</div>`;
@@ -5634,6 +6442,99 @@ function scrollReviewToBottom() {
   if (el) el.scrollTop = el.scrollHeight;
 }
 
+// --- Review Prompt Navigation ---
+let _reviewPromptEls = [];
+let _reviewPromptIdx = -1;
+
+function reviewPromptNavReset() {
+  const container = document.getElementById('review-messages');
+  _reviewPromptEls = container ? Array.from(container.querySelectorAll('.review-msg.user')) : [];
+  _reviewPromptIdx = -1;
+  reviewPromptNavUpdateBadge();
+}
+
+function reviewPromptNavGo(dir) {
+  if (_reviewPromptEls.length === 0) return;
+  const container = document.getElementById('review-messages');
+  if (!container) return;
+
+  let newIdx;
+  if (_reviewPromptIdx < 0) {
+    // First navigation — find prompt in the direction the user wants
+    const scrollMid = container.scrollTop + container.clientHeight / 2;
+    if (dir < 0) {
+      newIdx = 0;
+      for (let i = _reviewPromptEls.length - 1; i >= 0; i--) {
+        if (_reviewPromptEls[i].offsetTop <= scrollMid) { newIdx = i; break; }
+      }
+    } else {
+      newIdx = _reviewPromptEls.length - 1;
+      for (let i = 0; i < _reviewPromptEls.length; i++) {
+        if (_reviewPromptEls[i].offsetTop >= scrollMid) { newIdx = i; break; }
+      }
+    }
+  } else {
+    newIdx = _reviewPromptIdx + dir;
+  }
+  if (newIdx < 0 || newIdx >= _reviewPromptEls.length) return;
+  _reviewPromptIdx = newIdx;
+
+  // Scroll the message into view
+  _reviewPromptEls[newIdx].scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  // Brief highlight
+  _reviewPromptEls[newIdx].style.outline = '2px solid var(--accent)';
+  setTimeout(() => { if (_reviewPromptEls[newIdx]) _reviewPromptEls[newIdx].style.outline = ''; }, 1200);
+
+  reviewPromptNavUpdateBadge();
+}
+
+function reviewPromptNavUpdateBadge() {
+  const nav = document.getElementById('review-prompt-nav');
+  if (!nav) return;
+  const badge = nav.querySelector('.prompt-nav-badge');
+  const btns = nav.querySelectorAll('.prompt-nav-btn');
+  const total = _reviewPromptEls.length;
+  const idx = _reviewPromptIdx;
+  badge.textContent = total === 0 ? '0 prompts' : (idx >= 0 ? (idx + 1) + '/' + total : total + (total === 1 ? ' prompt' : ' prompts'));
+  btns[0].disabled = total === 0 || idx <= 0;
+  btns[1].disabled = total === 0 || idx >= total - 1;
+}
+
+function reviewPromptNavToggleList() {
+  const nav = document.getElementById('review-prompt-nav');
+  if (!nav) return;
+  const existing = nav.querySelector('.prompt-nav-list');
+  if (existing) { existing.remove(); return; }
+  if (_reviewPromptEls.length === 0) return;
+
+  const list = document.createElement('div');
+  list.className = 'prompt-nav-list';
+  // Show most recent first
+  for (let i = _reviewPromptEls.length - 1; i >= 0; i--) {
+    const msgText = _reviewPromptEls[i].querySelector('.msg-text');
+    let text = msgText ? msgText.textContent.trim() : '(empty)';
+    if (text.length > 80) text = text.slice(0, 80) + '\u2026';
+    const item = document.createElement('div');
+    item.className = 'prompt-nav-list-item' + (i === _reviewPromptIdx ? ' current' : '');
+    item.textContent = text;
+    item.onclick = (function(idx) { return function() {
+      _reviewPromptIdx = idx;
+      _reviewPromptEls[idx].scrollIntoView({ behavior: 'smooth', block: 'start' });
+      _reviewPromptEls[idx].style.outline = '2px solid var(--accent)';
+      setTimeout(() => { if (_reviewPromptEls[idx]) _reviewPromptEls[idx].style.outline = ''; }, 1200);
+      reviewPromptNavUpdateBadge();
+      list.remove();
+    }; })(i);
+    list.appendChild(item);
+  }
+  nav.appendChild(list);
+  setTimeout(() => {
+    function close(e) { if (!list.contains(e.target)) { list.remove(); document.removeEventListener('click', close); } }
+    document.addEventListener('click', close);
+  }, 0);
+}
+
 (function() {
   const el = document.getElementById('review-messages');
   const btn = document.getElementById('review-scroll-bottom');
@@ -7194,6 +8095,8 @@ let _titleFlashStop = null;
 
 // Clear waiting state for a session (tab indicator + title flash)
 function clearWaitingState(sessionId) {
+  const s = state.sessions.get(sessionId);
+  if (s) { s._waitingForInput = false; s._lastInputAt = Date.now(); }
   // Remove pulsing tab indicator
   const tabs = document.querySelectorAll('#tabbar .tab');
   const tabOrder = state.tabOrder;
@@ -7244,9 +8147,13 @@ function playNotificationSound(type) {
   } catch (e) { /* Audio API may not be available */ }
 }
 
+// Dedup tracking: { sessionId -> { reason, timestamp } }
+const _lastNotif = {};
+
 function onWaitingForInput(msg) {
   const sessionId = msg.id;
   const session = state.sessions.get(sessionId);
+  if (session) session._waitingForInput = true;
   const label = msg.label || session?.meta?.label || sessionId.slice(0, 8);
   const reason = msg.reason || 'input';
   const reasonText = reason === 'approval' ? 'Needs approval'
@@ -7269,7 +8176,17 @@ function onWaitingForInput(msg) {
     }
   }
 
-  if (userIsViewing) return; // User can see the terminal — no notification needed
+  if (userIsViewing) {
+    // Clear dedup state when user views the session so next event fires fresh
+    delete _lastNotif[sessionId];
+    return;
+  }
+
+  // Dedup: skip if same session+reason notified within 30s
+  const now = Date.now();
+  const prev = _lastNotif[sessionId];
+  if (prev && prev.reason === reason && (now - prev.ts) < 30000) return;
+  _lastNotif[sessionId] = { reason, ts: now };
 
   // 2. Play notification sound
   playNotificationSound(reason === 'approval' ? 'alert' : 'chime');
@@ -7387,6 +8304,7 @@ window.addEventListener('message', (e) => {
     const activeSession = state.activeTab && state.sessions.get(state.activeTab);
     if (activeSession) {
       send({ type: 'input', id: state.activeTab, data: e.data.text + '\n' });
+      clearWaitingState(state.activeTab);
     }
   }
 });
@@ -7511,7 +8429,7 @@ window.addEventListener('hashchange', handleHashRoute);
 
 // --- Init ---
 connect();
-loadPrefs().then(() => {
+state._prefsLoaded = loadPrefs().then(() => {
   loadRecentSessions();
   // Restore hash from saved nav if no hash present
   handleHashRoute();
@@ -7526,10 +8444,10 @@ function onQueueState(msg) {
   // msg has: sessionId, mode, status, currentIndex, items, idleTimeoutMs
   queueState = msg;
   renderQueueBar();
-  // Scroll terminal to bottom when queue is active
+  // Scroll terminal to bottom when queue is active (only if user hasn't scrolled up)
   if (msg.sessionId) {
     const s = state.sessions.get(msg.sessionId);
-    if (s) s.term.scrollToBottom();
+    if (s && s.writer.followMode) s.term.scrollToBottom();
   }
 }
 
@@ -8059,6 +8977,15 @@ function removeQpItem(idx) {
   renderQpItems();
 }
 
+function resendQpItem(idx) {
+  if (idx >= 0 && idx < qpItems.length) {
+    qpItems[idx].status = 'pending';
+    saveQpDraft();
+    renderQpItems();
+    toast('Item reset to pending — will be sent next', { type: 'info' });
+  }
+}
+
 function toggleQpMode() {
   qpMode = qpMode === 'auto' ? 'manual' : 'auto';
   updateQpModeBtn();
@@ -8382,6 +9309,7 @@ function renderQpItems() {
       </div>
       <div style="display:flex;align-items:center;gap:2px;padding-top:2px;flex-shrink:0;">
         <span style="font-size:9px;color:var(--fg-dim);background:var(--bg-lighter);padding:1px 5px;border-radius:8px;">${item.type === 'prompt' ? '#' + item.promptId : 'inline'}</span>
+        ${isSent && !isEditing ? `<button onclick="resendQpItem(${idx})" style="background:none;border:none;color:var(--fg-dim);cursor:pointer;font-size:10px;padding:0 2px;line-height:1;" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--fg-dim)'" title="Re-send this item">&#8635;</button>` : ''}
         ${!isEditing && item.type === 'inline' ? `<button onclick="saveQpItemAsPrompt(${idx})" style="background:none;border:none;color:var(--fg-dim);cursor:pointer;font-size:10px;padding:0 2px;line-height:1;" onmouseover="this.style.color='var(--green)'" onmouseout="this.style.color='var(--fg-dim)'" title="Save as prompt">💾</button>` : ''}
         ${!isEditing ? `<button onclick="startQpEdit(${idx})" style="background:none;border:none;color:var(--fg-dim);cursor:pointer;font-size:11px;padding:0 2px;line-height:1;" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--fg-dim)'" title="Edit">&#9998;</button>` : ''}
         <button onclick="removeQpItem(${idx})" style="background:none;border:none;color:var(--fg-dim);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;" onmouseover="this.style.color='var(--red)'" onmouseout="this.style.color='var(--fg-dim)'">&times;</button>