fix: AI Copilot panel as in-flow flex sibling in session navigation pages

Changed CopilotPanel from fixed overlay to flex layout sibling so it
pushes main content instead of covering it during active sessions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/TreeNavigationPage.tsx

@@ -626,9 +626,9 @@ export function TreeNavigationPage() {
   }
 
   return (
-    <div className="h-full">
+    <div className="h-full flex overflow-hidden">
       {/* Main Content */}
-      <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'sm:pr-[440px]')}>
+      <div className={cn('h-full flex-1 min-w-0 overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'sm:pr-[440px]')}>
       <div className="mx-auto max-w-4xl">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
@@ -1264,6 +1264,17 @@ export function TreeNavigationPage() {
       </div>
       </div>
 
+      {/* AI Copilot - in-flow panel */}
+      {treeId && copilotOpen && (
+        <CopilotPanel
+          isOpen={copilotOpen}
+          onClose={() => setCopilotOpen(false)}
+          treeId={treeId}
+          sessionId={session?.id}
+          currentNodeId={currentNodeId}
+        />
+      )}
+
       {/* Scratchpad Sidebar */}
       {session && (
         <ScratchpadSidebar
@@ -1274,18 +1285,9 @@ export function TreeNavigationPage() {
         />
       )}
 
-      {/* AI Copilot */}
+      {/* AI Copilot toggle button */}
       {treeId && (
-        <>
-          <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
-          <CopilotPanel
-            isOpen={copilotOpen}
-            onClose={() => setCopilotOpen(false)}
-            treeId={treeId}
-            sessionId={session?.id}
-            currentNodeId={currentNodeId}
-          />
-        </>
+        <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
       )}
     </div>
   )