From 8f0bbf0817d50ab7413c9bd0fb8ac90ab4e3353c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Thu, 9 Apr 2026 00:33:21 +0800
Subject: [PATCH] feat: integrate TabBar into AppShell layout and route by
 activeTabId

- Add TabBar, useTabStore, useChatStore imports to AppShell
- Restore tabs from localStorage during bootstrap and connect active session
- Render <TabBar /> before <ContentRouter /> in the main content area
- Replace useSessionStore/activeSessionId with useTabStore/activeTabId in ContentRouter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 desktop/src/components/layout/AppShell.tsx      | 10 ++++++++++
 desktop/src/components/layout/ContentRouter.tsx |  6 +++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/desktop/src/components/layout/AppShell.tsx b/desktop/src/components/layout/AppShell.tsx
index 5a071e2c..beebfccc 100644
--- a/desktop/src/components/layout/AppShell.tsx
+++ b/desktop/src/components/layout/AppShell.tsx
@@ -5,6 +5,9 @@ import { ToastContainer } from '../shared/Toast'
 import { useSettingsStore } from '../../stores/settingsStore'
 import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { initializeDesktopServerUrl } from '../../lib/desktopRuntime'
+import { TabBar } from './TabBar'
+import { useTabStore } from '../../stores/tabStore'
+import { useChatStore } from '../../stores/chatStore'
 
 const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
 
@@ -21,6 +24,12 @@ export function AppShell() {
       try {
         await initializeDesktopServerUrl()
         await fetchSettings()
+        // Restore tabs from localStorage
+        await useTabStore.getState().restoreTabs()
+        const activeId = useTabStore.getState().activeTabId
+        if (activeId) {
+          useChatStore.getState().connectToSession(activeId)
+        }
         if (!cancelled) {
           setReady(true)
         }
@@ -92,6 +101,7 @@ export function AppShell() {
       )}
       <Sidebar />
       <main id="content-area" className={`flex-1 flex flex-col overflow-hidden relative ${isTauri ? 'pt-[38px]' : ''}`}>
+        <TabBar />
         <ContentRouter />
       </main>
       <ToastContainer />
diff --git a/desktop/src/components/layout/ContentRouter.tsx b/desktop/src/components/layout/ContentRouter.tsx
index 3282d476..b72be1ef 100644
--- a/desktop/src/components/layout/ContentRouter.tsx
+++ b/desktop/src/components/layout/ContentRouter.tsx
@@ -1,5 +1,5 @@
 import { useUIStore } from '../../stores/uiStore'
-import { useSessionStore } from '../../stores/sessionStore'
+import { useTabStore } from '../../stores/tabStore'
 import { useTeamStore } from '../../stores/teamStore'
 import { EmptySession } from '../../pages/EmptySession'
 import { ActiveSession } from '../../pages/ActiveSession'
@@ -9,7 +9,7 @@ import { AgentTranscript } from '../../pages/AgentTranscript'
 
 export function ContentRouter() {
   const activeView = useUIStore((s) => s.activeView)
-  const activeSessionId = useSessionStore((s) => s.activeSessionId)
+  const activeTabId = useTabStore((s) => s.activeTabId)
   const viewingAgentId = useTeamStore((s) => s.viewingAgentId)
 
   if (activeView === 'settings') {
@@ -33,7 +33,7 @@ export function ContentRouter() {
   }
 
   // Code view
-  if (!activeSessionId) {
+  if (!activeTabId) {
     return <EmptySession />
   }