From b5fca870d171448d1516cc6d80ac1452ac465dcb Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sat, 7 Mar 2026 02:18:33 -0500
Subject: [PATCH] fix: AI Assist panel as fixed right drawer (matching
 Copilot/Scratchpad)

Convert EditorAIPanel from in-flow flex child to fixed right-side drawer
overlay, same pattern as CopilotPanel and ScratchpadSidebar. The panel
is fixed at right:0 spanning full viewport height, and editor pages add
pr-[380px] padding when open so content shifts left without overlap.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/editor-ai/EditorAIPanel.tsx    | 15 ++++++++++++---
 frontend/src/pages/ProceduralEditorPage.tsx       |  5 +----
 frontend/src/pages/TreeEditorPage.tsx             |  5 +----
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/editor-ai/EditorAIPanel.tsx b/frontend/src/components/editor-ai/EditorAIPanel.tsx
index 465b682a..5378ccdd 100644
--- a/frontend/src/components/editor-ai/EditorAIPanel.tsx
+++ b/frontend/src/components/editor-ai/EditorAIPanel.tsx
@@ -44,8 +44,17 @@ export function EditorAIPanel({
   const pendingCount = suggestions.filter((s) => s.status === 'pending').length
 
   return (
-    <div className="flex h-full w-[320px] shrink-0 flex-col border-l border-border bg-[rgba(24,26,31,0.55)] backdrop-blur-[var(--glass-blur)]">
-      <div className="flex items-center justify-between border-b border-border px-3 py-2.5 shrink-0">
+    <div
+      className="fixed right-0 top-0 bottom-0 z-50 flex flex-col border-l"
+      style={{
+        width: '380px',
+        background: 'rgba(16, 17, 20, 0.95)',
+        backdropFilter: 'var(--glass-blur)',
+        WebkitBackdropFilter: 'var(--glass-blur)',
+        borderColor: 'var(--glass-border)',
+      }}
+    >
+      <div className="flex items-center justify-between border-b px-3 py-2.5 shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <div className="flex items-center gap-2">
           <Sparkles className="h-4 w-4 text-primary" />
           <span className="text-sm font-medium text-foreground">AI Assist</span>
@@ -58,7 +67,7 @@ export function EditorAIPanel({
         </button>
       </div>
       <NodeSummary node={focalNode} flowName={flowName} flowType={flowType} nodeCount={nodeCount} />
-      <div className="flex border-b border-border shrink-0">
+      <div className="flex border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
           onClick={() => setActiveTab('chat')}
           className={cn(
diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index 3f5ac544..e4fbb327 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -180,9 +180,7 @@ export function ProceduralEditorPage() {
   }
 
   return (
-    <div className="flex h-full overflow-hidden">
-      {/* Main content column */}
-      <div className="flex flex-1 flex-col overflow-hidden">
+    <div className={cn('flex h-full flex-col overflow-hidden transition-[padding] duration-200', editorAI.isOpen && 'pr-[380px]')}>
       {/* Toolbar — sticky */}
       <div className="flex shrink-0 items-center justify-between border-b border-border bg-card px-4 py-2">
         <div className="flex items-center gap-3">
@@ -321,7 +319,6 @@ export function ProceduralEditorPage() {
       <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
         <StepList onStepContextMenu={editorAI.openContextMenu} />
       </div>
-      </div>{/* end main content column */}
 
       <EditorAIPanel
         isOpen={editorAI.isOpen}
diff --git a/frontend/src/pages/TreeEditorPage.tsx b/frontend/src/pages/TreeEditorPage.tsx
index f9c7450e..edfaebfc 100644
--- a/frontend/src/pages/TreeEditorPage.tsx
+++ b/frontend/src/pages/TreeEditorPage.tsx
@@ -522,9 +522,7 @@ export function TreeEditorPage() {
   }
 
   return (
-    <div className="flex h-full overflow-hidden">
-      {/* Main content column */}
-      <div className="flex flex-1 flex-col overflow-hidden">
+    <div className={cn('flex h-full flex-col overflow-hidden transition-[padding] duration-200', editorAI.isOpen && 'pr-[380px]')}>
 
       {/* Draft Restore Prompt */}
       {showDraftPrompt && (
@@ -877,7 +875,6 @@ export function TreeEditorPage() {
           onClose={() => setShowExportModal(false)}
         />
       )}
-      </div>{/* end main content column */}
 
       <EditorAIPanel
         isOpen={editorAI.isOpen}