create-walle 0.7.1 → 0.9.0

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

@@ -2226,6 +2226,9 @@
                 <button class="svc-btn" onclick="svcAction('walle','restart')" id="svc-walle-restart" style="display:none">Restart</button>
               </div>
             </div>
+            <div style="margin-top:8px;padding-top:8px;border-top:1px solid var(--border);">
+              <button class="svc-btn" onclick="restartAll()" style="width:100%;">Restart All</button>
+            </div>
           </div>
         </div>
       </div>
@@ -2234,12 +2237,17 @@
     <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="insights" onclick="navTo('insights')" title="Session analysis">Insights</button>
-      <button class="nav-pill" data-nav="permissions" onclick="navTo('permissions')" title="Tool permissions">Permissions</button>
-      <button class="nav-pill" data-nav="codereview" onclick="navTo('codereview')" title="Code Review">Review</button>
       <button class="nav-pill" data-nav="walle" onclick="navTo('walle')" title="WALL-E Agent">WALL-E</button>
-      <button class="nav-pill" data-nav="rules" onclick="navTo('rules')" title="Edit CLAUDE.md rules">Rules</button>
-      <button class="nav-pill" data-nav="backups" onclick="navTo('backups')" title="Database backups">Backups</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);">
+          <button class="nav-pill" data-nav="insights" onclick="navTo('insights');closeNavMore()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Insights</button>
+          <button class="nav-pill" data-nav="permissions" onclick="navTo('permissions');closeNavMore()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Permissions</button>
+          <button class="nav-pill" data-nav="codereview" onclick="navTo('codereview');closeNavMore()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Review</button>
+          <button class="nav-pill" data-nav="rules" onclick="navTo('rules');closeNavMore()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Rules</button>
+          <button class="nav-pill" data-nav="backups" onclick="navTo('backups');closeNavMore()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Backups</button>
+        </div>
+      </div>
       <a href="/setup.html" class="nav-pill" title="Setup & Settings" style="text-decoration:none;margin-left:auto;font-size:16px;padding:4px 8px;">⚙</a>
     </nav>
     <div class="topbar-right">
@@ -2307,14 +2315,22 @@
       </div>
       <div id="terminal-area">
         <div id="welcome">
-          <h2>Welcome to Claude Task Manager</h2>
-          <p>Create a new terminal session to get started. You can run Claude Code, shell commands, or any terminal program.</p>
-          <div class="shortcut-grid">
-            <span>New session</span><kbd>Ctrl+Shift+N</kbd>
-            <span>Close tab</span><kbd>Ctrl+Shift+W</kbd>
-            <span>Next tab</span><kbd>Ctrl+Shift+]</kbd>
-            <span>Prev tab</span><kbd>Ctrl+Shift+[</kbd>
-            <span>Toggle sidebar</span><kbd>Ctrl+Shift+B</kbd>
+          <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>
+          <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>
+              <div style="font-size:12px;color:var(--fg-dim);">Run and manage Claude Code terminal sessions</div>
+            </div>
+            <div onclick="navTo('prompts')" 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);">Prompts</div>
+              <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-size:12px;color:var(--fg-dim);">Your personal AI assistant — chat, tasks, and insights</div>
+            </div>
           </div>
         </div>
         <div id="insights-panel">
@@ -2379,12 +2395,18 @@
             <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="brain" onclick="WE.showView('brain')">Brain</button>
-              <button class="walle-subnav-btn" data-view="actions" onclick="WE.showView('actions')">Actions</button>
               <button class="walle-subnav-btn" data-view="skills" onclick="WE.showView('skills')">Skills</button>
-              <button class="walle-subnav-btn" data-view="timeline" onclick="WE.showView('timeline')">Timeline</button>
-              <button class="walle-subnav-btn" data-view="questions" onclick="WE.showView('questions')">Questions</button>
-              <button class="walle-subnav-btn" data-view="status" onclick="WE.showView('status')">Status</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);">
+                  <button class="walle-subnav-btn" data-view="brain" onclick="WE.showView('brain');WE.closeMoreTabs()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Brain</button>
+                  <button class="walle-subnav-btn" data-view="actions" onclick="WE.showView('actions');WE.closeMoreTabs()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Actions</button>
+                  <button class="walle-subnav-btn" data-view="timeline" onclick="WE.showView('timeline');WE.closeMoreTabs()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Timeline</button>
+                  <button class="walle-subnav-btn" data-view="questions" onclick="WE.showView('questions');WE.closeMoreTabs()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Questions</button>
+                  <button class="walle-subnav-btn" data-view="status" onclick="WE.showView('status');WE.closeMoreTabs()" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;">Status</button>
+                </div>
+              </div>
             </div>
           </div>
           <div id="walle-body" class="walle-body"></div>
@@ -2420,6 +2442,11 @@
         <div id="permissions-panel">
           <div class="perm-toolbar">
             <h3>Permission Manager</h3>
+            <div id="perm-explainer" style="background:rgba(255,255,255,0.03);border-left:3px solid var(--accent);padding:8px 12px;font-size:12px;color:var(--fg-dim);margin:0 0 8px;border-radius:0 4px 4px 0;display:flex;align-items:center;gap:8px;">
+              <span style="flex:1;">Permissions control what Claude Code can do automatically. Rules you approve here apply across all sessions.</span>
+              <button onclick="this.parentElement.style.display='none';localStorage.setItem('perm_explainer_dismissed','1')" style="background:none;border:none;color:var(--fg-dim);cursor:pointer;font-size:14px;padding:2px 6px;">&times;</button>
+            </div>
+            <script>if(localStorage.getItem('perm_explainer_dismissed')==='1'){document.getElementById('perm-explainer').style.display='none';}</script>
             <select id="perm-scope-filter" onchange="renderPermissions()" style="background:var(--bg-lighter);color:var(--fg);border:1px solid var(--border);padding:5px 8px;border-radius:5px;font-size:12px;">
               <option value="__global__">All Projects (Global)</option>
             </select>
@@ -2493,11 +2520,16 @@
         <!-- Prompts Panel (merged from prompts.html) -->
         <div id="prompts-panel">
           <div class="prompts-topbar">
-            <button class="btn" onclick="PE.showView('chains')">Chains</button>
-            <button class="btn" onclick="PE.showView('templates')">Templates</button>
-            <button class="btn" onclick="PE.showView('patterns')">Patterns</button>
-            <button class="btn" onclick="PE.openHarvestModal()">Harvest</button>
-            <button class="btn" onclick="PE.toggleCopilotPanel()">Copilot</button>
+            <div style="position:relative;display:inline-block;" id="pe-power-wrap">
+              <button class="btn" onclick="(function(){ var dd=document.getElementById('pe-power-dd'); var open=dd.style.display==='none'; dd.style.display=open?'block':'none'; if(open){setTimeout(function(){document.addEventListener('click',function h(e){if(!document.getElementById('pe-power-wrap').contains(e.target)){dd.style.display='none';document.removeEventListener('click',h,true);}},true);},0);} })()">Power Tools <span style="font-size:10px;">&#9662;</span></button>
+              <div id="pe-power-dd" 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:130px;box-shadow:0 4px 12px rgba(0,0,0,0.3);">
+                <button class="btn" onclick="PE.showView('chains');document.getElementById('pe-power-dd').style.display='none'" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;border:none;">Chains</button>
+                <button class="btn" onclick="PE.showView('templates');document.getElementById('pe-power-dd').style.display='none'" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;border:none;">Templates</button>
+                <button class="btn" onclick="PE.showView('patterns');document.getElementById('pe-power-dd').style.display='none'" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;border:none;">Patterns</button>
+                <button class="btn" onclick="PE.openHarvestModal();document.getElementById('pe-power-dd').style.display='none'" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;border:none;">Harvest</button>
+                <button class="btn" onclick="PE.toggleCopilotPanel();document.getElementById('pe-power-dd').style.display='none'" style="display:block;width:100%;text-align:left;border-radius:0;padding:6px 14px;border:none;">Copilot</button>
+              </div>
+            </div>
           </div>
           <div id="prompts-panel-inner">
             <div id="prompt-sidebar">
@@ -2793,7 +2825,7 @@
     </div>
     <!-- Queue Builder Panel (right side) -->
     <div id="queue-panel-resize" style="width:4px;cursor:col-resize;flex-shrink:0;background:var(--border);display:none;transition:background 0.15s;z-index:2;" onmousedown="startQueuePanelResize(event)" onmouseenter="this.style.background='var(--accent)'" onmouseleave="this.style.background=''"></div>
-    <div id="queue-panel" style="display:flex;width:320px;background:var(--bg-light);border-left:none;flex-direction:column;flex-shrink:0;overflow:hidden;">
+    <div id="queue-panel" style="display:none;width:320px;background:var(--bg-light);border-left:none;flex-direction:column;flex-shrink:0;overflow:hidden;">
       <div style="padding:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;">
         <span style="flex:1;font-weight:600;font-size:13px;">Queue Builder</span>
         <button class="btn" style="padding:2px 8px;font-size:11px;" onclick="toggleQueuePanel()">Close</button>
@@ -3022,7 +3054,7 @@ const state = window._ctmState = {
   sidebarManuallyHidden: false,
   rulesFiles: [],
   currentRule: null,
-  queuePanelOpen: true,
+  queuePanelOpen: false,
 };
 
 // --- WebSocket ---
@@ -3168,6 +3200,22 @@ async function pollServiceStatus() {
   }
 }
 
+async function restartAll() {
+  if (!confirm('Restart CTM server and Wall-E?')) return;
+  hideAppMenu();
+  // Restart Wall-E first (while CTM is still up to handle the API call)
+  try {
+    await fetch(`/api/restart/walle?token=${state.token}`, { method: 'POST' });
+    toast('Wall-E restarting...', { type: 'info' });
+  } catch {}
+  // Brief pause to let Wall-E restart begin, then restart CTM
+  await new Promise(r => setTimeout(r, 500));
+  state._restarting = true;
+  try {
+    await fetch(`/api/restart/ctm?token=${state.token}`, { method: 'POST' });
+  } catch { /* expected — server dying */ }
+}
+
 async function svcAction(service, action) {
   const label = service === 'ctm' ? 'CTM server' : 'Wall-E';
   if (action === 'stop' && !confirm(`Stop ${label}?`)) return;
@@ -3262,39 +3310,26 @@ function createTerminal(id) {
   term.onData((data) => {
     send({ type: 'input', id, data });
     clearWaitingState(id);
-    // User typed something — they want to follow output again
+    // User typed something — scroll to bottom so they see the response
     const s = state.sessions.get(id);
-    if (s) s.userScrolling = false;
+    if (s) s.term.scrollToBottom();
   });
 
   term.onResize(({ cols, rows }) => {
     send({ type: 'resize', id, cols, rows });
   });
 
-  // Track user scroll: if user scrolls up, pause auto-scroll.
-  // If they scroll back to bottom, resume auto-scroll.
-  const viewport = container.querySelector('.xterm-viewport');
-  if (viewport) {
-    viewport.addEventListener('scroll', () => {
-      const s = state.sessions.get(id);
-      if (!s || s._programmaticScroll) return; // Ignore scroll events from our own scrollToBottom
-      const atBottom = viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 10;
-      s.userScrolling = !atBottom;
-    });
-    // Mouse wheel on the terminal should always work — reset stuck userScrolling
-    // if user scrolls to the bottom manually
-    viewport.addEventListener('wheel', () => {
-      const s = state.sessions.get(id);
-      if (!s || !s.userScrolling) return;
-      // Check after the wheel event is processed
-      requestAnimationFrame(() => {
-        const atBottom = viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 10;
-        if (atBottom) s.userScrolling = false;
-      });
-    });
-  }
+  // 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();
+  });
 
-  state.sessions.set(id, { term, fitAddon, container, userScrolling: false, needsFontRefresh: true });
+  state.sessions.set(id, { term, fitAddon, container, needsFontRefresh: true });
   return { term, fitAddon, container };
 }
 
@@ -3434,7 +3469,6 @@ function updateTopbarContext(activeId) {
   if (activeId === 'prompts') {
     ctxBtns.innerHTML = `
       <button class="topbar-util-btn" onclick="PE.showView('conversations')" title="Browse prompt conversations">Conversations</button>
-      <button class="topbar-util-btn" onclick="PE.showView('backups')" title="Prompt backups" style="color:var(--green)">Backups</button>
     `;
     divider.style.display = '';
     newSessionBtn.innerHTML = '+ New Prompt';
@@ -3449,6 +3483,21 @@ function updateTopbarContext(activeId) {
 
 let _prevNav = null; // track previous nav section for Alt+Tab swap
 
+function toggleNavMore() {
+  const dd = document.getElementById('nav-more-dropdown');
+  dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
+  if (dd.style.display === 'block') {
+    setTimeout(() => document.addEventListener('click', _closeNavMoreOutside, true), 0);
+  }
+}
+function closeNavMore() {
+  document.getElementById('nav-more-dropdown').style.display = 'none';
+  document.removeEventListener('click', _closeNavMoreOutside, true);
+}
+function _closeNavMoreOutside(e) {
+  if (!document.getElementById('nav-more-wrap').contains(e.target)) closeNavMore();
+}
+
 function navTo(target, opts) {
   // Track previous nav for Alt+Tab toggle
   const currentNav = document.querySelector('.nav-pill.active')?.dataset?.nav || 'sessions';
@@ -3617,11 +3666,30 @@ function _copyablePath(label, p) {
   return row;
 }
 
+var _backupSelected = { ctm: new Set(), brain: new Set() };
+
 function _appendBackupTable(container, title, backups, type, showRestore) {
+  var selected = _backupSelected[type];
+  // Header row with title and batch delete
+  var header = document.createElement('div');
+  header.style.cssText = 'display:flex;align-items:center;gap:8px;margin:20px 0 8px;';
   var h3 = document.createElement('h3');
-  h3.style.cssText = 'font-size:13px;color:var(--fg-dim);margin:20px 0 8px;';
+  h3.style.cssText = 'font-size:13px;color:var(--fg-dim);flex:1;margin:0;';
   h3.textContent = title + ' (' + backups.length + ')';
-  container.appendChild(h3);
+  header.appendChild(h3);
+  if (selected.size > 0) {
+    var countLabel = document.createElement('span');
+    countLabel.style.cssText = 'font-size:11px;color:var(--fg-dim);';
+    countLabel.textContent = selected.size + ' selected';
+    header.appendChild(countLabel);
+    var batchBtn = document.createElement('button');
+    batchBtn.className = 'btn small';
+    batchBtn.style.color = 'var(--red)';
+    batchBtn.textContent = 'Delete selected';
+    batchBtn.onclick = function() { _batchDeleteBackups(type); };
+    header.appendChild(batchBtn);
+  }
+  container.appendChild(header);
   if (backups.length === 0) {
     var p = document.createElement('p'); p.style.cssText = 'font-size:12px;color:var(--fg-dim)'; p.textContent = 'No backups yet.';
     container.appendChild(p); return;
@@ -3630,10 +3698,27 @@ function _appendBackupTable(container, title, backups, type, showRestore) {
   table.style.cssText = 'width:100%;font-size:12px;border-collapse:collapse;';
   var thead = document.createElement('tr');
   thead.style.cssText = 'color:var(--fg-dim);text-align:left;';
+  // Select-all checkbox
+  var thCb = document.createElement('th'); thCb.style.cssText = 'padding:4px 8px;width:28px;';
+  var selectAll = document.createElement('input'); selectAll.type = 'checkbox';
+  selectAll.checked = backups.length > 0 && backups.slice(0, 20).every(function(b) { return selected.has(b.name); });
+  selectAll.onchange = function() {
+    backups.slice(0, 20).forEach(function(b) { if (selectAll.checked) selected.add(b.name); else selected.delete(b.name); });
+    loadBackupsData();
+  };
+  thCb.appendChild(selectAll);
+  thead.appendChild(thCb);
   ['Name','Size','Date',''].forEach(function(t) { var th = document.createElement('th'); th.style.padding = '4px 8px'; th.textContent = t; thead.appendChild(th); });
   table.appendChild(thead);
   backups.slice(0, 20).forEach(function(b) {
-    var tr = document.createElement('tr'); tr.style.borderTop = '1px solid var(--border)';
+    var isChecked = selected.has(b.name);
+    var tr = document.createElement('tr');
+    tr.style.cssText = 'border-top:1px solid var(--border);' + (isChecked ? 'background:rgba(88,166,255,0.06);' : '');
+    // Checkbox
+    var tdCb = document.createElement('td'); tdCb.style.cssText = 'padding:6px 8px;width:28px;';
+    var cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = isChecked;
+    cb.onchange = (function(name) { return function() { if (cb.checked) selected.add(name); else selected.delete(name); loadBackupsData(); }; })(b.name);
+    tdCb.appendChild(cb);
     var td1 = document.createElement('td'); td1.style.cssText = 'padding:6px 8px;color:var(--fg)'; td1.textContent = b.name + (b.hasImages ? ' + images' : '');
     var td2 = document.createElement('td'); td2.style.cssText = 'padding:6px 8px;color:var(--fg-dim)'; td2.textContent = _fmtSize(b.size);
     var td3 = document.createElement('td'); td3.style.cssText = 'padding:6px 8px;color:var(--fg-dim)'; td3.textContent = _fmtDate(b.createdAt);
@@ -3647,12 +3732,29 @@ function _appendBackupTable(container, title, backups, type, showRestore) {
     var db = document.createElement('button'); db.className = 'btn small'; db.style.color = 'var(--red)'; db.textContent = 'Delete';
     db.onclick = (function(n) { return function() { _deleteBackup(type, n); }; })(b.name);
     td4.appendChild(db);
-    tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4);
+    tr.appendChild(tdCb); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4);
     table.appendChild(tr);
   });
   container.appendChild(table);
 }
 
+function _batchDeleteBackups(type) {
+  var selected = _backupSelected[type];
+  if (selected.size === 0) return;
+  if (!confirm('Delete ' + selected.size + ' ' + (type === 'ctm' ? 'CTM' : 'Brain') + ' backup(s)?')) return;
+  var token = window._ctmState ? window._ctmState.token : '';
+  var promises = [];
+  selected.forEach(function(name) {
+    var url = type === 'ctm' ? '/api/backups/' + encodeURIComponent(name) + '?token=' + token : '/api/wall-e/backups/' + encodeURIComponent(name) + '?token=' + token;
+    promises.push(fetch(url, { method: 'DELETE' }));
+  });
+  Promise.all(promises).then(function() {
+    selected.clear();
+    if (typeof showToast === 'function') showToast('Deleted ' + promises.length + ' backup(s)');
+    loadBackupsData();
+  });
+}
+
 function _fmtSize(bytes) {
   if (!bytes) return '0 B';
   if (bytes < 1024) return bytes + ' B';
@@ -3726,19 +3828,28 @@ function onOutput(msg) {
   // 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: use write callback to scrollToBottom AFTER content is rendered.
-  // term.write() in xterm.js 5.x is async — scrolling before render causes a race
-  // where the scroll listener falsely sets userScrolling=true (content added below viewport).
-  if (state.activeTab === msg.id && !s.userScrolling) {
-    s._programmaticScroll = true;
+  // 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();
-      // Keep _programmaticScroll true briefly after scroll settles
-      requestAnimationFrame(() => { s._programmaticScroll = false; });
     });
   } 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.
+  clearTimeout(s._outputIdleTimer);
+  s._outputIdleTimer = setTimeout(() => {
+    if (state.activeTab === msg.id) {
+      s.fitAddon.fit();
+    }
+  }, 500);
   // Remove compact banner on new activity
   const banner = s.container.querySelector('.compact-banner');
   if (banner) { banner.remove(); requestAnimationFrame(() => s.fitAddon.fit()); }
@@ -3760,7 +3871,7 @@ function onScrollback(msg) {
     // \e[3J = Erase Scrollback, \e[2J = Erase Display, \e[?1049h/l = Alt Screen Buffer
     // These are fine during live output but destroy content when replayed on refresh.
     msg.data = msg.data.replace(/\x1b\[3J/g, '').replace(/\x1b\[2J/g, '').replace(/\x1b\[\?1049[hl]/g, '');
-    s.userScrolling = false; // Reset scroll lock on fresh attach
+    // Fresh attach — scroll to bottom after scrollback is loaded (via write callback below)
     // Fit terminal to get correct local dimensions
     s.fitAddon.fit();
     const localCols = s.term.cols;
@@ -4442,6 +4553,7 @@ cwdInput.addEventListener('focus', () => {
 
 // --- Recent Sessions ---
 let allRecentSessions = [];
+let _convSearchPending = false;
 let currentFilter = 'all';
 let aiSearchMode = false;
 let aiSearchDebounce = null;
@@ -4670,13 +4782,36 @@ function renderFilteredSessions() {
   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();
+    sessions = sessions.filter(s => {
+      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);
+      if (match) metaMatches.add(s.sessionId);
+      return match;
+    });
+    // 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
@@ -7348,6 +7483,27 @@ function handleHashRoute() {
     return;
   }
 
+  // #walle/task/:id — open WALL-E tasks and scroll to specific task
+  if (firstPart.startsWith('walle/task/')) {
+    const taskId = firstPart.slice('walle/task/'.length);
+    navTo('walle', { skipHash: true });
+    setTimeout(() => {
+      if (typeof WE !== 'undefined') {
+        WE.showView('tasks');
+        // Wait for tasks to render, then scroll to the task and expand output
+        setTimeout(() => {
+          const el = document.getElementById('task-' + taskId);
+          if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            const output = el.querySelector('.we-task-output-panel');
+            if (output && !output.classList.contains('expanded')) output.classList.add('expanded');
+          }
+        }, 500);
+      }
+    }, 200);
+    return;
+  }
+
   // #walle — open WALL-E panel
   if (isNav && firstPart === 'walle') {
     navTo('walle', { skipHash: true });
@@ -7928,6 +8084,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();
@@ -8251,6 +8416,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>