AI Assistant: frontend - chat app, sidebar, settings with 4 tabs

frontend/src/components/layout/AppShell.tsx

@@ -1,26 +1,37 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { Sidebar } from './Sidebar';
 import { TopBar } from './TopBar';
 import { PluginToolbar } from './PluginToolbar';
+import { AISidebar } from './AISidebar';
 import { ToastContainer } from '@/components/ui/Toast';
+import { useUIStore } from '@/store/uiStore';
 
 export function AppShell() {
+  const { aiSidebarOpen } = useUIStore();
+  const location = useLocation();
+
+  // Hide AI sidebar on the AI Assistant page itself
+  const showAISidebar = aiSidebarOpen && !location.pathname.startsWith('/ai-assistant');
+
   return (
     <div className="flex h-screen overflow-hidden bg-secondary-50" data-testid="app-shell">
       <Sidebar />
       <div className="flex-1 flex flex-col overflow-hidden">
         <TopBar />
         <PluginToolbar />
-        <main
-          className="flex-1 overflow-y-auto focus:outline-none"
-          tabIndex={-1}
-          role="main"
-          id="main-content"
-          data-testid="content-area"
-        >
-          <Outlet />
-        </main>
+        <div className="flex-1 flex overflow-hidden">
+          <main
+            className="flex-1 overflow-y-auto focus:outline-none"
+            tabIndex={-1}
+            role="main"
+            id="main-content"
+            data-testid="content-area"
+          >
+            <Outlet />
+          </main>
+          {showAISidebar && <AISidebar />}
+        </div>
       </div>
       <ToastContainer />
     </div>