create-walle 0.7.1 → 0.8.0

package/bin/create-walle.js

@@ -288,7 +288,7 @@ function stopQuiet(dir, port) {
     try { execFileSync('launchctl', ['unload', plist], { stdio: 'ignore' }); } catch {}
   }
   // Kill CTM and Wall-E processes
-  const wallePort = String(parseInt(port) + 1);
+  const wallePort = dir ? readWallePort(dir) : String(parseInt(port) + 1);
   for (const p of [port, wallePort]) {
     try {
       const pids = execFileSync('lsof', ['-ti', ':' + p], { encoding: 'utf8', timeout: 3000 }).trim().split('\n').filter(Boolean);
@@ -454,6 +454,15 @@ function readPort(dir) {
   return '3456';
 }
 
+function readWallePort(dir) {
+  try {
+    const env = fs.readFileSync(path.join(dir, '.env'), 'utf8');
+    const m = env.match(/^WALL_E_PORT=(\d+)/m);
+    if (m) return m[1];
+  } catch {}
+  return String(parseInt(readPort(dir)) + 1);
+}
+
 function detectName() {
   try { return execFileSync('git', ['config', 'user.name'], { encoding: 'utf8' }).trim(); } catch {}
   try { return execFileSync('id', ['-F'], { encoding: 'utf8' }).trim(); } catch {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-walle",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Wall-E — your personal digital twin. AI agent that learns from Slack, email & calendar. Includes dashboard, chat, and 7 bundled skills.",
   "bin": {
     "create-walle": "bin/create-walle.js"

package/template/bin/dev.sh

@@ -0,0 +1,72 @@
+#!/bin/bash
+# Start a dev instance of CTM + Wall-E on separate ports with a DB snapshot.
+# Primary instance stays untouched. Ctrl+C to stop.
+#
+# Usage:
+#   bash bin/dev.sh              # Start dev instance (snapshot DBs on first run)
+#   bash bin/dev.sh --refresh    # Re-copy production DBs before starting
+#   bash bin/dev.sh --fresh      # Start with empty DBs
+
+set -e
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+DEV_DIR="${WALLE_DEV_DIR:-/tmp/walle-dev}"
+DEV_CTM_PORT="${DEV_CTM_PORT:-4000}"
+DEV_WALLE_PORT="${DEV_WALLE_PORT:-4001}"
+
+# Source production .env to find DB paths
+PROD_CTM_DIR="$HOME/.walle/data"
+PROD_WALLE_DIR="$HOME/.walle/data"
+if [[ -f "$ROOT/.env" ]]; then
+  eval "$(grep -E '^(CTM_DATA_DIR|WALL_E_DATA_DIR)=' "$ROOT/.env" 2>/dev/null)" || true
+  [[ -n "$CTM_DATA_DIR" ]] && PROD_CTM_DIR="$CTM_DATA_DIR"
+  [[ -n "$WALL_E_DATA_DIR" ]] && PROD_WALLE_DIR="$WALL_E_DATA_DIR"
+fi
+
+mkdir -p "$DEV_DIR"
+
+# Handle flags
+if [[ "$1" == "--fresh" ]]; then
+  echo "[dev] Starting with fresh (empty) databases"
+  rm -f "$DEV_DIR"/*.db "$DEV_DIR"/*.db-wal "$DEV_DIR"/*.db-shm
+elif [[ "$1" == "--refresh" || ! -f "$DEV_DIR/task-manager.db" ]]; then
+  echo "[dev] Copying production databases to $DEV_DIR ..."
+  # Copy CTM DB
+  if [[ -f "$PROD_CTM_DIR/task-manager.db" ]]; then
+    cp "$PROD_CTM_DIR/task-manager.db" "$DEV_DIR/task-manager.db"
+    echo "  CTM: $PROD_CTM_DIR/task-manager.db → $DEV_DIR/"
+  fi
+  # Copy Wall-E brain
+  if [[ -f "$PROD_WALLE_DIR/wall-e-brain.db" ]]; then
+    cp "$PROD_WALLE_DIR/wall-e-brain.db" "$DEV_DIR/wall-e-brain.db"
+    echo "  Brain: $PROD_WALLE_DIR/wall-e-brain.db → $DEV_DIR/"
+  fi
+  # Clean WAL files (they're specific to the source process)
+  rm -f "$DEV_DIR"/*.db-wal "$DEV_DIR"/*.db-shm
+fi
+
+echo ""
+echo "  Dev CTM:    http://localhost:$DEV_CTM_PORT"
+echo "  Dev Wall-E: port $DEV_WALLE_PORT"
+echo "  Dev data:   $DEV_DIR"
+echo "  Source:     $ROOT"
+echo ""
+echo "  Ctrl+C to stop. Primary instance on :3456 is unaffected."
+echo ""
+
+# Load production .env vars (API keys, etc.) but override ports and data dirs
+export CTM_PORT="$DEV_CTM_PORT"
+export WALL_E_PORT="$DEV_WALLE_PORT"
+export CTM_DATA_DIR="$DEV_DIR"
+export WALL_E_DATA_DIR="$DEV_DIR"
+export CTM_HOST="127.0.0.1"
+
+# Source the rest of .env (API keys, owner name, etc.)
+if [[ -f "$ROOT/.env" ]]; then
+  set -a
+  source <(grep -v '^#' "$ROOT/.env" | grep -vE '^(CTM_PORT|WALL_E_PORT|CTM_DATA_DIR|WALL_E_DATA_DIR|CTM_HOST)=' | grep '=')
+  set +a
+fi
+
+# Run in foreground so Ctrl+C stops it cleanly
+cd "$ROOT"
+exec node claude-task-manager/server.js

package/template/claude-task-manager/public/css/walle.css

@@ -137,7 +137,7 @@
   font-size: 10px; font-weight: 800; text-transform: uppercase;
   letter-spacing: 1px; margin-bottom: 3px;
 }
-.walle-chat-msg-role.user { color: #5c7cfa; }
+.walle-chat-msg-role.user { color: #94a3b8; text-transform: none; font-weight: 700; letter-spacing: 0.3px; }
 .walle-chat-msg-role.assistant { color: #51cf66; }
 
 /* User text — plain, tight */
@@ -555,10 +555,31 @@
   margin-bottom: 4px;
 }
 .we-task-card-title { font-size: 13px; font-weight: 600; color: var(--accent, #60a5fa); }
-.we-task-card-status { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
+.we-task-card-status { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 5px; }
 .we-task-card-desc { font-size: 12px; color: #999; line-height: 1.4; margin-bottom: 4px; }
 .we-task-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
 
+/* Status dots */
+.we-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.we-status-dot--running { background: #228be6; animation: we-pulse 1.5s ease-in-out infinite; }
+.we-status-dot--pending { background: #fab005; }
+.we-status-dot--paused { background: #888; }
+.we-status-dot--failed { background: #e03131; }
+.we-status-dot--completed { background: #5c940d; }
+.we-status-dot--cancelled { background: #666; }
+@keyframes we-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* Task metadata details toggle */
+.we-task-meta-toggle { color: #555; cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 2px; user-select: none; }
+.we-task-meta-toggle:hover { color: #888; }
+.we-task-meta-extra { display: none; }
+.we-task-meta.we-meta-expanded .we-task-meta-extra { display: contents; }
+
+/* Chat date separator */
+.we-chat-date-sep { text-align: center; color: var(--fg-dim, #666); font-size: 11px; padding: 12px 0 4px; position: relative; }
+.we-chat-date-sep::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(255,255,255,0.06); }
+.we-chat-date-sep span { position: relative; background: var(--bg, #1a1b26); padding: 0 12px; }
+
 /* Task live logs */
 .we-task-log-panel {
   margin-top: 8px;

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,17 @@
             <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>
+              <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 +2441,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 +2519,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 +2824,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 +3053,7 @@ const state = window._ctmState = {
   sidebarManuallyHidden: false,
   rulesFiles: [],
   currentRule: null,
-  queuePanelOpen: true,
+  queuePanelOpen: false,
 };
 
 // --- WebSocket ---
@@ -3168,6 +3199,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 +3309,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 +3468,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 +3482,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 +3665,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 +3697,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 +3731,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 +3827,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 +3870,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;
@@ -7348,6 +7458,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 });