From 789f4373de2ee7f59746acb3f4bbf29d3a37c80e Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sat, 7 Mar 2026 15:42:10 -0500
Subject: [PATCH] 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>
---
 .../src/components/copilot/CopilotPanel.tsx   |  4 +--
 .../src/pages/ProceduralNavigationPage.tsx    | 26 +++++++++--------
 frontend/src/pages/TreeNavigationPage.tsx     | 28 ++++++++++---------
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/copilot/CopilotPanel.tsx b/frontend/src/components/copilot/CopilotPanel.tsx
index c5848516..0e90a32b 100644
--- a/frontend/src/components/copilot/CopilotPanel.tsx
+++ b/frontend/src/components/copilot/CopilotPanel.tsx
@@ -88,9 +88,9 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
 
   return (
     <div
-      className="fixed right-0 top-0 bottom-0 z-50 flex flex-col border-l"
+      className="flex flex-col border-l shrink-0"
       style={{
-        width: '400px',
+        width: '380px',
         background: 'rgba(16, 17, 20, 0.95)',
         backdropFilter: 'var(--glass-blur)',
         WebkitBackdropFilter: 'var(--glass-blur)',
diff --git a/frontend/src/pages/ProceduralNavigationPage.tsx b/frontend/src/pages/ProceduralNavigationPage.tsx
index cdcbe457..f89cc4ab 100644
--- a/frontend/src/pages/ProceduralNavigationPage.tsx
+++ b/frontend/src/pages/ProceduralNavigationPage.tsx
@@ -599,7 +599,7 @@ export function ProceduralNavigationPage() {
           )}
         </div>
 
-        {/* Right panel - step detail */}
+        {/* Right panel - step detail + copilot */}
         <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain p-4 sm:p-6">
           {currentStep && (
             <StepDetail
@@ -636,6 +636,17 @@ export function ProceduralNavigationPage() {
             </div>
           )}
         </div>
+
+        {/* AI Copilot - in-flow panel */}
+        {treeId && copilotOpen && (
+          <CopilotPanel
+            isOpen={copilotOpen}
+            onClose={() => setCopilotOpen(false)}
+            treeId={treeId}
+            sessionId={session?.id}
+            currentNodeId={runtimeSteps[currentStepIndex]?.id}
+          />
+        )}
       </div>
 
       {/* CSAT Modal */}
@@ -708,18 +719,9 @@ export function ProceduralNavigationPage() {
         />
       )}
 
-      {/* 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={runtimeSteps[currentStepIndex]?.id}
-          />
-        </>
+        <CopilotToggle isOpen={copilotOpen} onToggle={() => setCopilotOpen(true)} />
       )}
     </div>
   )
diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index d71908cc..3b3b1704 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/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>
   )