feat: multi-session parallel tabs with instant switching and split pane

package.json

@@ -90,7 +90,7 @@
     "@xterm/xterm": "^5.5.0",
     "adm-zip": "^0.5.16",
     "bcryptjs": "^3.0.2",
-    "better-sqlite3": "^12.2.0",
+    "better-sqlite3": "^12.9.0",
     "chokidar": "^4.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -124,7 +124,8 @@
     "sqlite": "^5.1.1",
     "sqlite3": "^5.1.7",
     "tailwind-merge": "^3.3.1",
-    "ws": "^8.14.2"
+    "ws": "^8.14.2",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",

src/components/app/AppContent.tsx

@@ -13,6 +13,7 @@ import { useSessionProtection } from '../../hooks/useSessionProtection';
 import { useProjectsState } from '../../hooks/useProjectsState';
 import { useInteractionTelemetry } from '../../hooks/useInteractionTelemetry';
 import { useUiPreferences } from '../../hooks/useUiPreferences';
+import { useSessionTabsStore } from '../../stores/useSessionTabsStore';
 import {
   ensureTelemetryDefaultEnabled,
   isTelemetryEnabled,
@@ -151,6 +152,17 @@ export default function AppContent() {
     };
   }, [isConnected, sendMessage]);
 
+  // Sync session tab store -> selectedSession when user clicks a tab in the tab bar
+  const tabStoreActiveId = useSessionTabsStore((s) => s.activeTabId);
+  const tabStoreTabs = useSessionTabsStore((s) => s.tabs);
+  useEffect(() => {
+    if (!tabStoreActiveId) return;
+    if (selectedSession?.id === tabStoreActiveId) return;
+    const tab = tabStoreTabs.find((t) => t.id === tabStoreActiveId);
+    if (!tab) return;
+    handleNavigateToSession(tab.id, tab.provider, tab.projectName);
+  }, [tabStoreActiveId, tabStoreTabs, selectedSession?.id, handleNavigateToSession]);
+
   useEffect(() => {
     if (!isDesktop || !onDesktopEvent) {
       return;

src/components/chat/hooks/useChatRealtimeHandlers.ts

@@ -18,6 +18,7 @@ import { RESUMING_STATUS_TEXT } from '../types/types';
 import i18n from '../../../i18n/config';
 import type { ChatMessage, PendingPermissionRequest } from '../types/types';
 import type { Project, ProjectSession, SessionNavigationSource, SessionProvider } from '../../../types/app';
+import { useSessionTabsStore } from '../../../stores/useSessionTabsStore';
 
 type PendingViewSession = {
   sessionId: string | null;
@@ -539,11 +540,43 @@ export function useChatRealtimeHandlers({
       });
     };
 
+    // Route messages for background (non-active) sessions to the tab store
+    const updateBackgroundSessionStatus = (bgSessionId: string, msgType: string) => {
+      const store = useSessionTabsStore.getState();
+      const isTabOpen = store.tabs.some((t) => t.id === bgSessionId);
+      if (!isTabOpen) return;
+
+      const prevSeq = store.backgroundStatus[bgSessionId]?.messageSeq ?? 0;
+      const isComplete = lifecycleMessageTypes.has(msgType);
+      if (isComplete) {
+        const wasLoading = store.backgroundStatus[bgSessionId]?.isLoading ?? false;
+        store.setBackgroundStatus(bgSessionId, {
+          isLoading: false,
+          statusText: null,
+          hasUnread: wasLoading,
+          messageSeq: prevSeq + 1,
+        });
+      } else if (msgType.endsWith('-status') || msgType.endsWith('-response') || msgType.endsWith('-output')) {
+        const statusText = latestMessage.data?.status || latestMessage.data?.text || null;
+        const tokens = typeof latestMessage.data?.tokens === 'number' ? latestMessage.data.tokens : undefined;
+        store.setBackgroundStatus(bgSessionId, {
+          isLoading: true,
+          hasUnread: false,
+          ...(statusText != null && { statusText: String(statusText) }),
+          ...(tokens != null && { tokenCount: tokens }),
+          messageSeq: prevSeq + 1,
+        });
+      }
+    };
+
     if (!shouldBypassSessionFilter) {
       if (!activeViewSessionId) {
         if (latestMessage.sessionId && lifecycleMessageTypes.has(String(latestMessage.type))) {
           handleBackgroundLifecycle(latestMessage.sessionId);
         }
+        if (latestMessage.sessionId) {
+          updateBackgroundSessionStatus(latestMessage.sessionId, String(latestMessage.type));
+        }
         if (!isUnscopedError) {
           return;
         }
@@ -554,6 +587,9 @@ export function useChatRealtimeHandlers({
       }
 
       if (latestMessage.sessionId !== activeViewSessionId) {
+        if (latestMessage.sessionId) {
+          updateBackgroundSessionStatus(latestMessage.sessionId, String(latestMessage.type));
+        }
         if (latestMessage.sessionId && lifecycleMessageTypes.has(String(latestMessage.type))) {
           handleBackgroundLifecycle(latestMessage.sessionId);
         }
@@ -588,6 +624,13 @@ export function useChatRealtimeHandlers({
             pendingViewSessionRef.current.sessionId = latestMessage.sessionId;
           }
           setIsSystemSessionChange(true);
+          if (temporarySessionId) {
+            useSessionTabsStore.getState().replaceTabSessionId(
+              temporarySessionId,
+              { id: latestMessage.sessionId, __provider: createdSessionProvider, __projectName: selectedProject?.name } as ProjectSession,
+              selectedProject?.name || '',
+            );
+          }
           onReplaceTemporarySession?.(latestMessage.sessionId);
           onNavigateToSession?.(latestMessage.sessionId, createdSessionProvider, selectedProject?.name, { source: 'system' });
           setPendingPermissionRequests((previous) =>
@@ -827,6 +870,10 @@ export function useChatRealtimeHandlers({
           sessionStorage.removeItem('pendingSessionId');
         }
         if (selectedProject && latestMessage.exitCode === 0) {
+          // Clear both the session-scoped and legacy project-scoped recovery keys.
+          if (completedSessionId) {
+            safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}_${completedSessionId}`);
+          }
           safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
         }
         setPendingPermissionRequests([]);
@@ -1324,7 +1371,12 @@ export function useChatRealtimeHandlers({
           }
           sessionStorage.removeItem('pendingSessionId');
         }
-        if (selectedProject) safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
+        if (selectedProject) {
+          if (codexActualSessionId) {
+            safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}_${codexActualSessionId}`);
+          }
+          safeLocalStorage.removeItem(`chat_messages_${selectedProject.name}`);
+        }
         break;
       }
 
@@ -1340,6 +1392,13 @@ export function useChatRealtimeHandlers({
       case 'session-aborted': {
         const pendingSessionId = typeof window !== 'undefined' ? sessionStorage.getItem('pendingSessionId') : null;
         const abortedSessionId = latestMessage.sessionId || currentSessionId;
+        // Guard: with multiple ChatInterface instances mounted (one per tab),
+        // session-aborted is a global message that reaches all of them. Only the
+        // instance that owns the aborted session should update chat state.
+        const thisInstanceId = selectedSession?.id || currentSessionId;
+        if (abortedSessionId && thisInstanceId && abortedSessionId !== thisInstanceId) {
+          break;
+        }
         if (latestMessage.success !== false) {
           clearLoadingIndicators();
           markSessionsAsCompleted(abortedSessionId, currentSessionId, selectedSession?.id, pendingSessionId);