claudehq 1.0.1 → 1.0.2

package/lib/server.js

@@ -11,6 +11,7 @@ const TODOS_DIR = path.join(os.homedir(), '.claude', 'todos');
 const PLANS_DIR = path.join(os.homedir(), '.claude', 'plans');
 const PROJECTS_DIR = path.join(os.homedir(), '.claude', 'projects');
 const CUSTOM_NAMES_FILE = path.join(os.homedir(), '.claude', 'tasks', 'session-names.json');
+const HIDDEN_SESSIONS_FILE = path.join(os.homedir(), '.claude', 'tasks-board', 'hidden-sessions.json');
 const TMUX_SESSION = process.env.TMUX_SESSION || 'main';
 
 // ============================================================================
@@ -440,19 +441,32 @@ function saveManagedSessions() {
 }
 
 // Get all managed sessions with enriched data
-function getManagedSessions() {
-  return Array.from(managedSessions.values()).map(session => {
-    // Fetch conversation metadata if we have a Claude session ID
-    let firstPrompt = null;
-    if (session.claudeSessionId) {
-      const metadata = getSessionMetadata(session.claudeSessionId);
-      firstPrompt = metadata.firstPrompt;
-    }
-    return {
-      ...session,
-      firstPrompt,
-    };
-  });
+function getManagedSessions(includeHidden = false) {
+  const customNames = loadCustomNames();
+  const hiddenSessions = loadHiddenSessions();
+
+  return Array.from(managedSessions.values())
+    .filter(session => {
+      if (includeHidden) return true;
+      // Filter out hidden sessions
+      return !hiddenSessions.includes(session.id) &&
+             !hiddenSessions.includes(session.claudeSessionId);
+    })
+    .map(session => {
+      // Fetch conversation metadata if we have a Claude session ID
+      let firstPrompt = null;
+      if (session.claudeSessionId) {
+        const metadata = getSessionMetadata(session.claudeSessionId);
+        firstPrompt = metadata.firstPrompt;
+      }
+      // Check for custom name (by session ID or claudeSessionId)
+      const customName = customNames[session.id] || customNames[session.claudeSessionId] || null;
+      return {
+        ...session,
+        name: customName || session.name,
+        firstPrompt,
+      };
+    });
 }
 
 // Get a single managed session
@@ -526,6 +540,13 @@ function discoverSession(event) {
 function updateSessionFromEvent(event) {
   if (!event.sessionId) return;
 
+  // Auto-unhide: If this session is hidden but receiving activity, unhide it
+  const hiddenIds = loadHiddenSessions();
+  if (hiddenIds.includes(event.sessionId)) {
+    console.log(`  Auto-unhiding session ${event.sessionId.substring(0, 8)}... (received activity)`);
+    unhideSession(event.sessionId);
+  }
+
   // Try to find managed session by Claude session ID (exact match)
   let managedSession = findManagedSessionByClaudeId(event.sessionId);
 
@@ -649,6 +670,122 @@ function checkWorkingTimeout() {
   }
 }
 
+// ============================================================================
+// Permission Prompt Detection - Detects when Claude needs user input
+// ============================================================================
+
+const pendingPermissions = new Map(); // sessionId -> { tool, detectedAt }
+
+/**
+ * Parse tmux output to detect Claude Code permission prompts.
+ * Returns { tool, context } if a permission prompt is detected, null otherwise.
+ */
+function detectPermissionPrompt(output) {
+  const lines = output.split('\n');
+
+  // Look for "Do you want to proceed?" or "Would you like to proceed?" in recent output
+  let proceedLineIdx = -1;
+  for (let i = lines.length - 1; i >= Math.max(0, lines.length - 30); i--) {
+    if (/(Do you want|Would you like) to proceed\?/i.test(lines[i])) {
+      proceedLineIdx = i;
+      break;
+    }
+  }
+
+  if (proceedLineIdx === -1) return null;
+
+  // Verify this is a real Claude Code prompt by checking for the footer or selector
+  let hasFooter = false;
+  let hasSelector = false;
+  for (let i = proceedLineIdx + 1; i < Math.min(lines.length, proceedLineIdx + 15); i++) {
+    if (/Esc to cancel|ctrl-g to edit/i.test(lines[i])) {
+      hasFooter = true;
+      break;
+    }
+    if (/^\s*❯/.test(lines[i])) {
+      hasSelector = true;
+    }
+  }
+
+  if (!hasFooter && !hasSelector) return null;
+
+  // Find the tool name
+  let tool = 'Permission';
+  for (let i = proceedLineIdx; i >= Math.max(0, proceedLineIdx - 20); i--) {
+    const toolMatch = lines[i].match(/[●◐·]\s*(\w+)\s*\(/);
+    if (toolMatch) {
+      tool = toolMatch[1];
+      break;
+    }
+    const cmdMatch = lines[i].match(/^\s*(Bash|Read|Write|Edit|Grep|Glob|Task|WebFetch|WebSearch)\s+\w+/i);
+    if (cmdMatch) {
+      tool = cmdMatch[1];
+      break;
+    }
+  }
+
+  return { tool, context: lines.slice(Math.max(0, proceedLineIdx - 5), proceedLineIdx + 8).join('\n') };
+}
+
+/**
+ * Poll a session for permission prompts via tmux
+ */
+function pollPermissions(session) {
+  if (!session.tmuxSession) return;
+
+  execFile('tmux', ['capture-pane', '-t', session.tmuxSession, '-p', '-S', '-50'],
+    { timeout: 2000, maxBuffer: 1024 * 1024 },
+    (error, stdout) => {
+      if (error) return;
+
+      const prompt = detectPermissionPrompt(stdout);
+      const existing = pendingPermissions.get(session.id);
+
+      if (prompt && !existing) {
+        // New permission prompt detected
+        pendingPermissions.set(session.id, {
+          tool: prompt.tool,
+          detectedAt: Date.now(),
+        });
+
+        console.log(`  Permission prompt detected for "${session.name}": ${prompt.tool}`);
+
+        // Update session status to WAITING
+        if (session.status !== SESSION_STATUS.WAITING) {
+          session.status = SESSION_STATUS.WAITING;
+          session.currentTool = prompt.tool;
+          broadcastManagedSessions();
+          saveManagedSessions();
+        }
+      } else if (!prompt && existing) {
+        // Permission prompt was resolved
+        pendingPermissions.delete(session.id);
+        console.log(`  Permission prompt resolved for "${session.name}"`);
+
+        // Reset session status to WORKING (user responded, Claude continues)
+        if (session.status === SESSION_STATUS.WAITING) {
+          session.status = SESSION_STATUS.WORKING;
+          session.currentTool = undefined;
+          broadcastManagedSessions();
+          saveManagedSessions();
+        }
+      }
+    }
+  );
+}
+
+/**
+ * Poll all active sessions for permission prompts
+ */
+function checkPermissionPrompts() {
+  for (const session of managedSessions.values()) {
+    // Only poll sessions that have a tmux session and aren't offline
+    if (session.tmuxSession && session.status !== SESSION_STATUS.OFFLINE) {
+      pollPermissions(session);
+    }
+  }
+}
+
 // Broadcast managed sessions to all SSE clients
 function broadcastManagedSessions() {
   const data = JSON.stringify({ type: 'sessions', sessions: getManagedSessions() });
@@ -663,8 +800,11 @@ function startSessionHealthChecks() {
   setInterval(checkSessionHealth, 5000);
   // Working timeout check every 10 seconds
   setInterval(checkWorkingTimeout, 10000);
+  // Permission prompt polling every 1 second (time-sensitive)
+  setInterval(checkPermissionPrompts, 1000);
   // Run initial health check
   checkSessionHealth();
+  console.log('  Status monitoring started (health: 5s, timeout: 10s, permissions: 1s)');
 }
 
 // Create a new managed session (spawns tmux with claude)
@@ -879,12 +1019,118 @@ function loadCustomNames() {
 // Save custom session names
 function saveCustomNames(names) {
   try {
+    const dir = path.dirname(CUSTOM_NAMES_FILE);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
     fs.writeFileSync(CUSTOM_NAMES_FILE, JSON.stringify(names, null, 2));
   } catch (e) {
     console.error('Failed to save custom names:', e.message);
   }
 }
 
+// Load hidden session IDs
+function loadHiddenSessions() {
+  try {
+    if (fs.existsSync(HIDDEN_SESSIONS_FILE)) {
+      return JSON.parse(fs.readFileSync(HIDDEN_SESSIONS_FILE, 'utf-8'));
+    }
+  } catch (e) { /* ignore */ }
+  return [];
+}
+
+// Save hidden session IDs
+function saveHiddenSessions(hiddenIds) {
+  try {
+    const dir = path.dirname(HIDDEN_SESSIONS_FILE);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+    fs.writeFileSync(HIDDEN_SESSIONS_FILE, JSON.stringify(hiddenIds, null, 2));
+  } catch (e) {
+    console.error('Failed to save hidden sessions:', e.message);
+  }
+}
+
+// Hide a session
+function hideSession(sessionId) {
+  const hidden = loadHiddenSessions();
+  if (!hidden.includes(sessionId)) {
+    hidden.push(sessionId);
+    saveHiddenSessions(hidden);
+  }
+  return { success: true };
+}
+
+// Unhide a session
+function unhideSession(sessionId) {
+  let hidden = loadHiddenSessions();
+  hidden = hidden.filter(id => id !== sessionId);
+  saveHiddenSessions(hidden);
+  return { success: true };
+}
+
+// Permanently delete a session (removes all data)
+function permanentDeleteSession(sessionId) {
+  // Find session by ID or claudeSessionId
+  let session = managedSessions.get(sessionId);
+  let managedId = sessionId;
+
+  if (!session) {
+    // Try to find by claudeSessionId
+    for (const [id, s] of managedSessions) {
+      if (s.claudeSessionId === sessionId) {
+        session = s;
+        managedId = id;
+        break;
+      }
+    }
+  }
+
+  if (!session) {
+    return { success: false, error: 'Session not found' };
+  }
+
+  const claudeSessionId = session.claudeSessionId;
+
+  // 1. Remove from managedSessions
+  managedSessions.delete(managedId);
+
+  // 2. Remove from claudeToManagedMap
+  if (claudeSessionId) {
+    claudeToManagedMap.delete(claudeSessionId);
+  }
+
+  // 3. Remove from hidden sessions
+  let hidden = loadHiddenSessions();
+  hidden = hidden.filter(id => id !== managedId && id !== claudeSessionId);
+  saveHiddenSessions(hidden);
+
+  // 4. Remove any custom names
+  const names = loadCustomNames();
+  delete names[managedId];
+  if (claudeSessionId) {
+    delete names[claudeSessionId];
+  }
+  saveCustomNames(names);
+
+  // 5. Save sessions
+  saveManagedSessions();
+
+  // 6. Broadcast updated list
+  broadcastManagedSessions();
+
+  console.log(`  Permanently deleted session: ${session.name} (${managedId})`);
+
+  return { success: true };
+}
+
+// Check if session is hidden (by ID or claudeSessionId)
+function isSessionHidden(sessionId, claudeSessionId) {
+  const hidden = loadHiddenSessions();
+  return hidden.includes(sessionId) || (claudeSessionId && hidden.includes(claudeSessionId));
+}
+
 // Rename a session
 function renameSession(sessionId, newName) {
   const names = loadCustomNames();
@@ -897,6 +1143,23 @@ function renameSession(sessionId, newName) {
   }
   saveCustomNames(names);
 
+  // Also update managed session if it exists (check both by ID and by claudeSessionId)
+  let managedSession = managedSessions.get(sessionId);
+  if (!managedSession) {
+    // Try to find by claudeSessionId
+    for (const [id, session] of managedSessions) {
+      if (session.claudeSessionId === sessionId) {
+        managedSession = session;
+        break;
+      }
+    }
+  }
+  if (managedSession) {
+    managedSession.name = newName?.trim() || managedSession.name;
+    saveManagedSessions();
+    broadcastManagedSessions();
+  }
+
   // Emit event through EventBus
   eventBus.emit(EventTypes.SESSION_RENAMED, { sessionId, newName: newName?.trim(), previousName });
 
@@ -2006,6 +2269,120 @@ const HTML = `<!DOCTYPE html>
       flex-direction: column;
     }
 
+    /* Hidden Sessions Section */
+    .hidden-sessions-section {
+      margin-top: 8px;
+      border-top: 1px solid var(--border-primary);
+      padding-top: 8px;
+    }
+
+    .hidden-sessions-section.collapsed .hidden-sessions-list {
+      display: none;
+    }
+
+    .hidden-sessions-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 4px 12px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-tertiary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      cursor: pointer;
+    }
+
+    .hidden-sessions-header:hover {
+      color: var(--text-secondary);
+    }
+
+    .hidden-sessions-header .collapse-icon {
+      font-size: 8px;
+      transition: transform 0.15s;
+    }
+
+    .hidden-sessions-section.collapsed .collapse-icon {
+      transform: rotate(-90deg);
+    }
+
+    .hidden-sessions-list {
+      display: flex;
+      flex-direction: column;
+      padding: 4px;
+    }
+
+    .hidden-session-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      color: var(--text-tertiary);
+      font-size: 12px;
+    }
+
+    .hidden-session-item:hover {
+      background: var(--bg-hover);
+    }
+
+    .hidden-session-name {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .unhide-btn {
+      background: none;
+      border: none;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: 4px;
+      color: var(--text-tertiary);
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    .hidden-session-item:hover .unhide-btn {
+      opacity: 1;
+    }
+
+    .unhide-btn:hover {
+      background: var(--bg-tertiary);
+      color: var(--accent-color);
+    }
+
+    .hidden-session-item .delete-btn {
+      background: none;
+      border: none;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: 4px;
+      color: var(--text-tertiary);
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    .hidden-session-item:hover .delete-btn {
+      opacity: 1;
+    }
+
+    .hidden-session-item .delete-btn:hover {
+      background: var(--bg-tertiary);
+      color: #ef4444;
+    }
+
     /* Session Group - Expandable container */
     .session-group {
       margin-bottom: 2px;
@@ -2076,16 +2453,17 @@ const HTML = `<!DOCTYPE html>
       background: #666;
     }
 
-    .session-group-icon .status-dot.idle { background: #4ade80; }
+    /* Status colors: Green=working, Orange=waiting, Red=idle, Grey=offline */
     .session-group-icon .status-dot.working {
-      background: #fbbf24;
+      background: #4ade80;
       animation: status-pulse 1s infinite;
     }
     .session-group-icon .status-dot.waiting {
       background: #fb923c;
       animation: status-pulse 0.5s infinite;
     }
-    .session-group-icon .status-dot.offline { background: #ef4444; }
+    .session-group-icon .status-dot.idle { background: #ef4444; }
+    .session-group-icon .status-dot.offline { background: #6b7280; }
 
     @keyframes status-pulse {
       0%, 100% { opacity: 1; }
@@ -4252,6 +4630,15 @@ const HTML = `<!DOCTYPE html>
       <!-- Managed Sessions List -->
       <div class="managed-sessions-list" id="managed-sessions-list"></div>
 
+      <!-- Hidden Sessions Section -->
+      <div class="hidden-sessions-section" id="hidden-sessions-section" style="display: none;">
+        <div class="hidden-sessions-header" onclick="this.parentElement.classList.toggle('collapsed')">
+          <span>Hidden</span>
+          <span class="collapse-icon">▼</span>
+        </div>
+        <div class="hidden-sessions-list"></div>
+      </div>
+
       <!-- Create Session Button -->
       <div style="padding: 8px;">
         <button class="create-session-btn" onclick="openCreateSessionModal()" title="Launch a new Claude Code session in tmux">
@@ -4520,6 +4907,7 @@ const HTML = `<!DOCTYPE html>
 
     // Managed sessions state
     let managedSessions = [];
+    let hiddenSessions = [];
     let selectedManagedSession = null; // null = all sessions
 
     // Todos state
@@ -4560,6 +4948,20 @@ const HTML = `<!DOCTYPE html>
       }
     }
 
+    // Fetch hidden sessions from API
+    async function loadHiddenSessions() {
+      try {
+        const res = await fetch('/api/hidden-sessions');
+        const data = await res.json();
+        if (data.ok) {
+          hiddenSessions = data.sessions;
+          renderHiddenSessions();
+        }
+      } catch (e) {
+        console.error('Failed to load hidden sessions:', e);
+      }
+    }
+
     // Track expanded state for each session
     const expandedSessions = new Set();
 
@@ -4624,7 +5026,7 @@ const HTML = `<!DOCTYPE html>
             '<span class="session-group-name">' + escapeHtml(session.name) + '</span>' +
             '<div class="session-group-actions">' +
               '<button onclick="event.stopPropagation(); renameManagedSession(\\'' + session.id + '\\')" title="Rename">✎</button>' +
-              '<button class="delete-btn" onclick="event.stopPropagation(); deleteManagedSession(\\'' + session.id + '\\')" title="Remove">×</button>' +
+              '<button class="delete-btn" onclick="event.stopPropagation(); hideSession(\\'' + session.id + '\\')" title="Hide session"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg></button>' +
             '</div>' +
           '</div>' +
           '<div class="session-views">' +
@@ -4686,8 +5088,15 @@ const HTML = `<!DOCTYPE html>
       return days + 'd ago';
     }
 
+    // Track pending data load to prevent race conditions
+    let pendingSessionLoad = null;
+
     // Select a managed session (or null for all)
     function selectManagedSession(sessionId) {
+      // Cancel any pending load
+      const loadId = Date.now();
+      pendingSessionLoad = loadId;
+
       selectedManagedSession = sessionId;
 
       // Auto-expand the selected session
@@ -4706,35 +5115,62 @@ const HTML = `<!DOCTYPE html>
 
       const session = sessionId ? managedSessions.find(s => s.id === sessionId) : null;
 
-      // Filter activity feed and open conversation panel
+      // Update header title immediately
+      const titleEl = document.getElementById('header-title');
+      if (titleEl) {
+        if (session) {
+          const viewLabel = currentSessionView === 'todos' ? 'Todos' :
+                           currentSessionView === 'plans' ? 'Plans' : 'Tasks';
+          titleEl.textContent = session.name + ' - ' + viewLabel;
+        } else {
+          titleEl.textContent = 'All Sessions';
+        }
+      }
+
+      // Load all data for this session
+      loadSessionData(session, loadId);
+    }
+
+    // Load all data for a session (activity, tasks/todos/plans based on view)
+    async function loadSessionData(session, loadId) {
+      // Check if this load was cancelled by a newer selection
+      if (pendingSessionLoad !== loadId) return;
+
+      // 1. Always set activity feed filter and load activity FIRST (most visible)
       if (session && session.claudeSessionId) {
         ActivityFeedManager.setFilter(session.claudeSessionId);
-        // Open conversation panel and load activity
+        // Open conversation panel if not open (skipDataLoad=true because we load data ourselves below)
         if (!conversationOpen) {
-          toggleConversation();
+          toggleConversation(true);
         }
+        // Load activity feed from cached events (instant)
         ActivityFeedManager.loadForSession(session.claudeSessionId);
-      } else if (sessionId) {
+      } else if (session) {
         ActivityFeedManager.setFilter('__none__');
       } else {
         ActivityFeedManager.setFilter(null);
+        // Load activity for all sessions
+        ActivityFeedManager.loadForSession(null);
       }
 
-      // Load data based on current view
+      // Check again after filter setup
+      if (pendingSessionLoad !== loadId) return;
+
+      // 2. Load view-specific data
       if (session && session.claudeSessionId) {
         if (currentSessionView === 'todos') {
-          loadTodosForSession(session.claudeSessionId);
+          await loadTodosForSession(session.claudeSessionId);
         } else if (currentSessionView === 'plans') {
-          loadPlansForSession(session.claudeSessionId);
+          await loadPlansForSession(session.claudeSessionId);
         } else {
-          loadTasksForSession(session.claudeSessionId);
+          await loadTasksForSession(session.claudeSessionId);
         }
-      } else if (!sessionId) {
+      } else if (!session) {
         // Show all tasks/todos
-        currentSessionView = 'tasks'; // Reset to tasks for "All Sessions"
-        loadData(true);
+        currentSessionView = 'tasks';
+        await loadData(true);
       } else {
-        // No data for this session yet
+        // No claudeSessionId - show empty state
         if (currentSessionView === 'todos') {
           currentTodos = [];
           renderTodosView();
@@ -4746,18 +5182,6 @@ const HTML = `<!DOCTYPE html>
           renderTasks();
         }
       }
-
-      // Update header title
-      const titleEl = document.getElementById('header-title');
-      if (titleEl) {
-        if (session) {
-          const viewLabel = currentSessionView === 'todos' ? 'Todos' :
-                           currentSessionView === 'plans' ? 'Plans' : 'Tasks';
-          titleEl.textContent = session.name + ' - ' + viewLabel;
-        } else {
-          titleEl.textContent = 'All Sessions';
-        }
-      }
     }
 
     // Load tasks specifically for a Claude session ID
@@ -4832,13 +5256,59 @@ const HTML = `<!DOCTYPE html>
       }
     }
 
-    // Delete managed session
-    async function deleteManagedSession(sessionId) {
-      const session = managedSessions.find(s => s.id === sessionId);
-      if (!confirm('Delete session "' + (session?.name || sessionId) + '"?')) return;
+    // Hide managed session
+    async function hideSession(sessionId) {
+      try {
+        const res = await fetch('/api/managed-sessions/' + sessionId + '/hide', {
+          method: 'POST'
+        });
+        const data = await res.json();
+        if (data.ok) {
+          if (selectedManagedSession === sessionId) {
+            selectManagedSession(null);
+          }
+          loadManagedSessions();
+          loadHiddenSessions();
+          showToast('Session hidden');
+        }
+      } catch (e) {
+        console.error('Failed to hide session:', e);
+      }
+    }
 
+    // Unhide session
+    async function unhideSession(sessionId) {
       try {
-        const res = await fetch('/api/managed-sessions/' + sessionId, {
+        const res = await fetch('/api/managed-sessions/' + sessionId + '/unhide', {
+          method: 'POST'
+        });
+        const data = await res.json();
+        if (data.ok) {
+          loadManagedSessions();
+          loadHiddenSessions();
+          showToast('Session restored');
+        }
+      } catch (e) {
+        console.error('Failed to unhide session:', e);
+      }
+    }
+
+    // Permanently delete session (with confirmation)
+    async function permanentDeleteSession(sessionId, sessionName) {
+      const confirmed = confirm(
+        'PERMANENTLY DELETE SESSION\\n\\n' +
+        'Session: ' + (sessionName || sessionId) + '\\n\\n' +
+        'This will permanently remove:\\n' +
+        '- Session data and settings\\n' +
+        '- Custom name (if set)\\n\\n' +
+        'This action cannot be undone.\\n\\n' +
+        'Are you sure you want to delete this session?'
+      );
+
+      if (!confirmed) return;
+
+      try {
+        const res = await fetch('/api/managed-sessions/' + sessionId + '/permanent', {
           method: 'DELETE'
         });
         const data = await res.json();
@@ -4847,12 +5317,52 @@ const HTML = `<!DOCTYPE html>
             selectManagedSession(null);
           }
           loadManagedSessions();
+          loadHiddenSessions();
+          showToast('Session permanently deleted');
+        } else {
+          showToast('Error: ' + (data.error || 'Failed to delete'));
         }
       } catch (e) {
         console.error('Failed to delete session:', e);
+        showToast('Error deleting session');
       }
     }
 
+    // Render hidden sessions section
+    function renderHiddenSessions() {
+      const container = document.getElementById('hidden-sessions-section');
+      if (!container) return;
+
+      if (hiddenSessions.length === 0) {
+        container.style.display = 'none';
+        return;
+      }
+
+      container.style.display = 'block';
+      const list = container.querySelector('.hidden-sessions-list');
+      if (!list) return;
+
+      const eyeIcon = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+
+      const trashIcon = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
+
+      list.innerHTML = hiddenSessions.map(session => {
+        // Generate color for icon
+        const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6'];
+        const colorIndex = session.name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % colors.length;
+        const bgColor = colors[colorIndex];
+        const initials = session.name.substring(0, 2).toUpperCase();
+        const escapedName = escapeHtml(session.name).replace(/'/g, "\\\\'");
+
+        return '<div class="hidden-session-item">' +
+          '<div class="session-group-icon" style="background: ' + bgColor + '; color: white; width: 20px; height: 20px; font-size: 9px;">' + initials + '</div>' +
+          '<span class="hidden-session-name">' + escapeHtml(session.name) + '</span>' +
+          '<button class="unhide-btn" onclick="unhideSession(\\'' + session.id + '\\')" title="Unhide session">' + eyeIcon + '</button>' +
+          '<button class="delete-btn" onclick="permanentDeleteSession(\\'' + session.id + '\\', \\'' + escapedName + '\\')" title="Permanently delete">' + trashIcon + '</button>' +
+        '</div>';
+      }).join('');
+    }
+
     // Restart managed session
     async function restartManagedSession(sessionId) {
       try {
@@ -5350,17 +5860,29 @@ const HTML = `<!DOCTYPE html>
         this.clear();
       },
 
-      // Load existing events for a session
+      // Load existing events for a session (or all sessions if null)
       loadForSession(claudeSessionId) {
         this.clear();
-        // Load events from claudeEvents array for this session
-        const sessionEvents = claudeEvents.filter(e => e.sessionId === claudeSessionId);
+
+        // Load events from claudeEvents array
+        let sessionEvents;
+        if (claudeSessionId === null) {
+          // All sessions - show all events
+          sessionEvents = claudeEvents;
+        } else {
+          // Filter by specific session
+          sessionEvents = claudeEvents.filter(e => e.sessionId === claudeSessionId);
+        }
+
         // Show most recent 50 events
         const recent = sessionEvents.slice(-50);
         for (const event of recent) {
           this.add(event, true); // true = skip scroll
         }
         this.scrollToBottom();
+
+        // Log for debugging
+        console.log('[ActivityFeed] Loaded', recent.length, 'events for session:', claudeSessionId || 'all');
       },
 
       showThinking(sessionId) {
@@ -7940,12 +8462,16 @@ const HTML = `<!DOCTYPE html>
     }
 
     // Conversation toggle - uses ConversationManager
-    function toggleConversation() {
+    // Note: This only toggles visibility. Data loading is handled by loadSessionData()
+    // to avoid loading stale data when called during session selection.
+    function toggleConversation(skipDataLoad = false) {
       conversationOpen = !conversationOpen;
       document.getElementById('conversation-panel').classList.toggle('open', conversationOpen);
       document.getElementById('conv-toggle').classList.toggle('active', conversationOpen);
 
-      if (conversationOpen && currentSession) {
+      // Only load data if explicitly requested (e.g., user clicking the toggle button)
+      // When called from loadSessionData, skipDataLoad is true because loadSessionData handles the loading
+      if (!skipDataLoad && conversationOpen && currentSession) {
         // Load both conversation messages and activity feed
         ConversationManager.load(currentSession.sessionId);
         ActivityFeedManager.loadForSession(currentSession.sessionId);
@@ -8028,27 +8554,135 @@ const HTML = `<!DOCTYPE html>
     AttentionSystem.requestPermission();
     setupPromptForm();
     setupCreateTaskForm();
-    loadData();
-    connectSSE();
     setupDragDropListeners();
 
-    // Load existing Claude events from server
-    loadClaudeEvents();
+    // Initialize app with proper loading order
+    // 1. Load all data first (tasks, events, sessions)
+    // 2. Then restore session selection
+    // 3. Finally connect SSE for real-time updates
+    initializeApp();
 
-    // Load all todos for sidebar counts
-    loadAllTodos();
+    async function initializeApp() {
+      console.log('[Init] Starting app initialization...');
 
-    // Load all plans for sidebar counts
-    loadAllPlansData();
+      try {
+        // Step 1: Load all data in parallel
+        const [tasksResult, eventsResult, sessionsResult, todosResult, plansResult, hiddenResult] = await Promise.all([
+          loadData(true),           // Load tasks
+          loadClaudeEventsAsync(),  // Load claude events
+          loadManagedSessionsAsync(), // Load managed sessions
+          loadAllTodosAsync(),      // Load todos
+          loadAllPlansDataAsync(),  // Load plans
+          loadHiddenSessionsAsync() // Load hidden sessions
+        ]);
+
+        console.log('[Init] All data loaded');
+
+        // Step 2: Restore session selection (AFTER data is loaded)
+        const savedSessionId = localStorage.getItem('selectedManagedSession');
+        if (savedSessionId && managedSessions.find(s => s.id === savedSessionId)) {
+          console.log('[Init] Restoring session:', savedSessionId);
+          selectManagedSession(savedSessionId);
+        }
+
+        // Step 3: Connect SSE for real-time updates (AFTER session is restored)
+        connectSSE();
+        console.log('[Init] SSE connected');
 
-    // Initialize managed sessions
-    loadManagedSessions().then(() => {
-      // Restore selected managed session from localStorage
-      const savedSessionId = localStorage.getItem('selectedManagedSession');
-      if (savedSessionId && managedSessions.find(s => s.id === savedSessionId)) {
-        selectManagedSession(savedSessionId);
+      } catch (e) {
+        console.error('[Init] Initialization error:', e);
+        // Still try to connect SSE even if data loading failed
+        connectSSE();
       }
-    });
+    }
+
+    // Async versions of data loading functions that return promises
+    async function loadClaudeEventsAsync() {
+      try {
+        const res = await fetch('/api/claude-events');
+        const data = await res.json();
+        if (data.ok && data.events) {
+          claudeEvents.length = 0; // Clear existing
+          claudeEvents.push(...data.events);
+        }
+        return true;
+      } catch (e) {
+        console.error('Failed to load Claude events:', e);
+        return false;
+      }
+    }
+
+    async function loadManagedSessionsAsync() {
+      try {
+        const res = await fetch('/api/managed-sessions');
+        const data = await res.json();
+        if (data.ok) {
+          managedSessions = data.sessions;
+          renderManagedSessions();
+        }
+        return true;
+      } catch (e) {
+        console.error('Failed to load managed sessions:', e);
+        return false;
+      }
+    }
+
+    async function loadAllTodosAsync() {
+      try {
+        const res = await fetch('/api/todos');
+        const data = await res.json();
+        if (data.ok && data.todos) {
+          todosBySession = {};
+          for (const todo of data.todos) {
+            if (todo.sessionId) {
+              todosBySession[todo.sessionId] = todo;
+            }
+          }
+        }
+        return true;
+      } catch (e) {
+        console.error('Failed to load todos:', e);
+        return false;
+      }
+    }
+
+    async function loadAllPlansDataAsync() {
+      try {
+        const res = await fetch('/api/plans');
+        const data = await res.json();
+        if (data.ok && data.plans) {
+          allPlans = data.plans;
+          plansBySession = {};
+          for (const plan of allPlans) {
+            if (plan.sessionId) {
+              if (!plansBySession[plan.sessionId]) {
+                plansBySession[plan.sessionId] = [];
+              }
+              plansBySession[plan.sessionId].push(plan);
+            }
+          }
+        }
+        return true;
+      } catch (e) {
+        console.error('Failed to load plans:', e);
+        return false;
+      }
+    }
+
+    async function loadHiddenSessionsAsync() {
+      try {
+        const res = await fetch('/api/hidden-sessions');
+        const data = await res.json();
+        if (data.ok) {
+          hiddenSessions = data.sessions;
+          renderHiddenSessions();
+        }
+        return true;
+      } catch (e) {
+        console.error('Failed to load hidden sessions:', e);
+        return false;
+      }
+    }
 
     // Load Claude events from the server
     async function loadClaudeEvents() {
@@ -8453,21 +9087,86 @@ const server = http.createServer((req, res) => {
     return;
   }
 
-  // DELETE /api/managed-sessions/:id - Delete session
-  const deleteManagedMatch = url.pathname.match(/^\/api\/managed-sessions\/([^/]+)$/);
-  if (deleteManagedMatch && req.method === 'DELETE') {
-    deleteManagedSession(deleteManagedMatch[1]).then((success) => {
-      if (success) {
-        res.writeHead(200, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: true }));
-      } else {
-        res.writeHead(404, { 'Content-Type': 'application/json' });
-        res.end(JSON.stringify({ ok: false, error: 'Session not found' }));
+  // POST /api/managed-sessions/:id/hide - Hide a session
+  const hideManagedMatch = url.pathname.match(/^\/api\/managed-sessions\/([^/]+)\/hide$/);
+  if (hideManagedMatch && req.method === 'POST') {
+    const session = managedSessions.get(hideManagedMatch[1]);
+    if (session) {
+      // Hide by claudeSessionId if available, otherwise by managed session ID
+      const idToHide = session.claudeSessionId || hideManagedMatch[1];
+      hideSession(idToHide);
+      broadcastManagedSessions();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true }));
+    } else {
+      res.writeHead(404, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: false, error: 'Session not found' }));
+    }
+    return;
+  }
+
+  // POST /api/managed-sessions/:id/unhide - Unhide a session
+  const unhideManagedMatch = url.pathname.match(/^\/api\/managed-sessions\/([^/]+)\/unhide$/);
+  if (unhideManagedMatch && req.method === 'POST') {
+    unhideSession(unhideManagedMatch[1]);
+    broadcastManagedSessions();
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ ok: true }));
+    return;
+  }
+
+  // GET /api/hidden-sessions - Get list of hidden sessions with names
+  if (url.pathname === '/api/hidden-sessions' && req.method === 'GET') {
+    const hiddenIds = loadHiddenSessions();
+    const customNames = loadCustomNames();
+    const sessions = hiddenIds.map(id => {
+      // Try to get name from managedSessions or customNames
+      let name = customNames[id] || id.substring(0, 8);
+
+      // Check if there's a managed session with this claudeSessionId
+      for (const [managedId, session] of managedSessions) {
+        if (session.claudeSessionId === id || managedId === id) {
+          name = session.name || name;
+          break;
+        }
       }
-    }).catch((e) => {
-      res.writeHead(500, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ ok: false, error: e.message }));
+
+      return { id, name };
     });
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ ok: true, sessions }));
+    return;
+  }
+
+  // DELETE /api/managed-sessions/:id - Delete session (legacy, now just hides)
+  const deleteManagedMatch = url.pathname.match(/^\/api\/managed-sessions\/([^/]+)$/);
+  if (deleteManagedMatch && req.method === 'DELETE') {
+    const session = managedSessions.get(deleteManagedMatch[1]);
+    if (session) {
+      // Hide instead of delete
+      const idToHide = session.claudeSessionId || deleteManagedMatch[1];
+      hideSession(idToHide);
+      broadcastManagedSessions();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true }));
+    } else {
+      res.writeHead(404, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: false, error: 'Session not found' }));
+    }
+    return;
+  }
+
+  // DELETE /api/managed-sessions/:id/permanent - Permanently delete session
+  const permanentDeleteMatch = url.pathname.match(/^\/api\/managed-sessions\/([^/]+)\/permanent$/);
+  if (permanentDeleteMatch && req.method === 'DELETE') {
+    const result = permanentDeleteSession(permanentDeleteMatch[1]);
+    if (result.success) {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true }));
+    } else {
+      res.writeHead(404, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: false, error: result.error }));
+    }
     return;
   }