Merge branch 'fix-new-terminal-tab-creation-d0j9'

Author: knowsuchagency

frontend/hooks/use-terminal-view-state.ts

@@ -19,6 +19,7 @@ interface TerminalViewState {
 }
 
 interface PendingUpdates {
+  activeTabId?: string | null
   focusedTerminals?: FocusedTerminalsMap
   currentView?: string | null
   currentTaskId?: string | null
@@ -93,7 +94,7 @@ export function useTerminalViewState() {
       queryClient.setQueryData(['terminal-view-state'], (current: TerminalViewState | undefined) => {
         const currentState = current ?? DEFAULT_VIEW_STATE
         return {
-          activeTabId: currentState.activeTabId, // Deprecated: tab state is now in URL
+          activeTabId: merged.activeTabId !== undefined ? merged.activeTabId : currentState.activeTabId,
           focusedTerminals: {
             ...currentState.focusedTerminals,
             ...merged.focusedTerminals,
@@ -173,10 +174,11 @@ export function useTerminalViewState() {
 
   // Update view tracking (for route changes)
   const updateViewTracking = useCallback(
-    (currentView: string, currentTaskId: string | null) => {
+    (currentView: string, currentTaskId: string | null, activeTabId?: string | null) => {
       updateViewState({
         currentView,
         currentTaskId,
+        activeTabId,
         viewUpdatedAt: new Date().toISOString(),
       })
     },

frontend/routes/__root.tsx

@@ -39,16 +39,20 @@ function ViewTracking() {
     const path = location.pathname
     let currentView = 'other'
     let currentTaskId: string | null = null
+    let activeTabId: string | null = null
 
     if (path.startsWith('/tasks/')) {
       currentView = 'task-detail'
       currentTaskId = path.split('/')[2] || null
     } else if (path === '/terminals') {
       currentView = 'terminals'
+      // Extract the active terminal tab from URL search params
+      const params = new URLSearchParams(location.search)
+      activeTabId = params.get('tab')
     }
 
-    updateViewTracking(currentView, currentTaskId)
-  }, [location.pathname, updateViewTracking])
+    updateViewTracking(currentView, currentTaskId, activeTabId)
+  }, [location.pathname, location.search, updateViewTracking])
 
   return null
 }

frontend/routes/terminals/index.tsx

@@ -91,6 +91,7 @@ const TerminalsView = observer(function TerminalsView() {
     setupImagePaste,
     writeToTerminal,
     sendInputToTerminal,
+    newTerminalIds,
   } = useTerminalStore()
 
   // State for tab edit dialog
@@ -114,8 +115,9 @@ const TerminalsView = observer(function TerminalsView() {
   )
 
   // Redirect to last tab (from localStorage) or first tab if URL has no/invalid tab
+  // Skip if we're in the middle of an intentional navigation (e.g., after creating a new tab)
   useEffect(() => {
-    if (tabs.length > 0 && !isValidTab) {
+    if (tabs.length > 0 && !isValidTab && !intentionalNavigationRef.current) {
       const lastTab = localStorage.getItem(LAST_TAB_STORAGE_KEY)
       const targetTab = lastTab && (tabs.some(t => t.id === lastTab) || lastTab === ALL_TASKS_TAB_ID)
         ? lastTab
@@ -220,6 +222,8 @@ const TerminalsView = observer(function TerminalsView() {
   const pendingTabCreateRef = useRef(false)
   // Track the number of tabs when we initiated a tab creation to detect new tabs
   const tabCountBeforeCreateRef = useRef<number | null>(null)
+  // Track when we're intentionally navigating to a new tab (prevents localStorage redirect race)
+  const intentionalNavigationRef = useRef(false)
 
   // Filter terminals for the active tab and convert to TerminalInfo for component compatibility
   const visibleTerminals = useMemo(() => {
@@ -325,6 +329,13 @@ const TerminalsView = observer(function TerminalsView() {
         curr.position > prev.position ? curr : prev
       )
 
+      // Don't navigate to temp IDs - they will be replaced with real IDs shortly.
+      // Wait for the store to replace the temp tab with the real one.
+      if (newestTab.id.startsWith('temp-')) {
+        log.terminal.debug('New tab has temp ID, waiting for real ID', { tabId: newestTab.id })
+        return // Keep waiting - effect will run again when real ID arrives
+      }
+
       log.terminal.debug('New tab detected, auto-opening', { tabId: newestTab.id, name: newestTab.name })
 
       // Clear the ref to prevent re-triggering
@@ -333,6 +344,11 @@ const TerminalsView = observer(function TerminalsView() {
       // Switch to the new tab
       setActiveTab(newestTab.id)
 
+      // Clear intentional navigation flag after a short delay to allow URL to update
+      setTimeout(() => {
+        intentionalNavigationRef.current = false
+      }, 100)
+
       // Create a terminal inside the new tab after a short delay
       // to ensure the tab switch is processed first
       setTimeout(() => {
@@ -369,8 +385,16 @@ const TerminalsView = observer(function TerminalsView() {
       // Attach xterm to terminal via WebSocket
       const cleanup = attachXterm(terminalId, xterm)
       cleanupFnsRef.current.set(terminalId, cleanup)
+
+      // Auto-focus newly created terminals
+      if (newTerminalIds.has(terminalId)) {
+        // Small delay to ensure terminal is fully initialized
+        setTimeout(() => {
+          xterm.focus()
+        }, 50)
+      }
     },
-    [attachXterm]
+    [attachXterm, newTerminalIds]
   )
 
   const handleTerminalResize = useCallback(
@@ -398,6 +422,8 @@ const TerminalsView = observer(function TerminalsView() {
 
     // Record current tab count to detect when new tab arrives
     tabCountBeforeCreateRef.current = tabs.length
+    // Prevent localStorage redirect from overriding our navigation to the new tab
+    intentionalNavigationRef.current = true
 
     const name = `Tab ${tabs.length + 1}`
     log.terminal.debug('Quick creating tab', { name })
@@ -428,6 +454,8 @@ const TerminalsView = observer(function TerminalsView() {
 
       // Record current tab count to detect when new tab arrives
       tabCountBeforeCreateRef.current = tabs.length
+      // Prevent localStorage redirect from overriding our navigation to the new tab
+      intentionalNavigationRef.current = true
 
       log.terminal.debug('Creating tab', { name, directory })
       createTab(name, undefined, directory)

server/routes/terminal-view-state.ts

@@ -68,7 +68,8 @@ app.patch('/', async (c) => {
 
   if (body.activeTabId !== undefined) {
     // Validate that the tab exists (if not null)
-    if (body.activeTabId !== null) {
+    // 'all-tasks' is a virtual tab, not stored in database
+    if (body.activeTabId !== null && body.activeTabId !== 'all-tasks') {
       const tab = db.select().from(terminalTabs).where(eq(terminalTabs.id, body.activeTabId)).get()
       if (!tab) {
         return c.json({ error: 'Tab not found' }, 404)