feat(panel): new panel layout

Author: emir-karabeg

apps/sim/app/globals.css

@@ -19,12 +19,17 @@
   --sidebar-width: 232px;
   --triggers-height: 200px;
   --blocks-height: 200px;
+  --panel-width: 232px;
 }
 
 .sidebar-container {
   width: var(--sidebar-width);
 }
 
+.panel-container {
+  width: var(--panel-width);
+}
+
 .triggers-container {
   height: var(--triggers-height);
 }

apps/sim/app/layout.tsx

@@ -90,6 +90,21 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 } catch (e) {
                   // Fallback handled by CSS defaults
                 }
+                
+                // Set panel width
+                try {
+                  var panelStored = localStorage.getItem('panel-state');
+                  if (panelStored) {
+                    var panelParsed = JSON.parse(panelStored);
+                    var panelState = panelParsed?.state;
+                    var panelWidth = panelState?.panelWidth;
+                    if (panelWidth >= 232 && panelWidth <= 400) {
+                      document.documentElement.style.setProperty('--panel-width', panelWidth + 'px');
+                    }
+                  }
+                } catch (e) {
+                  // Fallback handled by CSS defaults
+                }
               })();
             `,
           }}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/control-bar.tsx

@@ -788,8 +788,8 @@ export function ControlBar({ hasValidationErrors = false }: ControlBarProps) {
 
       setIsAutoLayouting(true)
       try {
-        // Use the shared auto layout utility for immediate frontend updates
-        const { applyAutoLayoutAndUpdateStore } = await import('../../utils/auto-layout')
+        // Use the standalone auto layout utility for immediate frontend updates
+        const { applyAutoLayoutAndUpdateStore } = await import('../../utils')
 
         const result = await applyAutoLayoutAndUpdateStore(activeWorkflowId!)
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useState } from 'react'
+import { usePanelStore } from '@/stores/panel-new/store'
+
+/**
+ * Constants for panel sizing
+ */
+const MIN_WIDTH = 232
+const MAX_WIDTH = 400
+
+/**
+ * Custom hook to handle panel resize functionality.
+ * Manages mouse events for resizing and enforces min/max width constraints.
+ *
+ * @returns Resize state and handlers
+ */
+export function usePanelResize() {
+  const { setPanelWidth } = usePanelStore()
+  const [isResizing, setIsResizing] = useState(false)
+
+  /**
+   * Handles mouse down on resize handle
+   */
+  const handleMouseDown = useCallback(() => {
+    setIsResizing(true)
+  }, [])
+
+  /**
+   * Setup resize event listeners and body styles when resizing
+   * Cleanup is handled automatically by the effect's return function
+   */
+  useEffect(() => {
+    if (!isResizing) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      // Calculate width from the right edge of the viewport
+      const newWidth = window.innerWidth - e.clientX
+      if (newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH) {
+        setPanelWidth(newWidth)
+      }
+    }
+
+    const handleMouseUp = () => {
+      setIsResizing(false)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    document.body.style.cursor = 'ew-resize'
+    document.body.style.userSelect = 'none'
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+  }, [isResizing, setPanelWidth])
+
+  return {
+    isResizing,
+    handleMouseDown,
+  }
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/design/design.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useRef } from 'react'
+import { usePanelResize } from './hooks/use-panel-resize'
+
+/**
+ * Panel component with resizable width that persists across page refreshes.
+ *
+ * Uses a CSS-based approach to prevent hydration mismatches:
+ * 1. Width is controlled by CSS variable (--panel-width)
+ * 2. Blocking script in layout.tsx can set CSS variable before React hydrates
+ * 3. Store updates CSS variable when width changes
+ *
+ * This ensures server and client render identical HTML, preventing hydration errors.
+ *
+ * @returns Panel on the right side of the workflow
+ */
+export function Panel() {
+  const panelRef = useRef<HTMLElement>(null)
+
+  // Panel resize hook
+  const { handleMouseDown } = usePanelResize()
+
+  return (
+    <>
+      <aside
+        ref={panelRef}
+        className='panel-container fixed inset-y-0 right-0 z-10 overflow-hidden dark:bg-[#1E1E1E]'
+        aria-label='Workflow panel'
+      >
+        <div className='flex h-full flex-col border-l pt-[14px] dark:border-[#2C2C2C]'>
+          <></>
+        </div>
+      </aside>
+
+      {/* Resize Handle */}
+      <div
+        className='fixed top-0 right-[calc(var(--panel-width)-4px)] bottom-0 z-20 w-[8px] cursor-ew-resize'
+        onMouseDown={handleMouseDown}
+        role='separator'
+        aria-orientation='vertical'
+        aria-label='Resize panel'
+      />
+    </>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/index.ts

@@ -1,5 +1,4 @@
-// Export the current workflow abstraction
-
+export { useAutoLayout } from './use-auto-layout'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
-// Export other workflow-related hooks
+export { useNodeUtilities } from './use-node-utilities'
 export { useWorkflowExecution } from './use-workflow-execution'