improvement(workflow): zero-render drag-resize for panel, terminal, and output panel

Port the sidebar's pointer-capture + rAF + CSS-variable drag pattern to
use-panel-resize, use-terminal-resize, and use-output-panel-resize so a
drag writes only --panel-width/--terminal-height/--output-panel-width
per frame and commits to Zustand (one re-render + one localStorage
write) on pointerup. Previously every mousemove dispatched a store set,
re-rendering the whole always-mounted Panel tree (Chat/Editor/Toolbar)
and the terminal, plus a persist localStorage write per move. Also drop
the Panel's unused panelWidth subscription and drive the output panel
width via a CSS variable instead of React state.

Author: waleedlatif1

apps/sim/app/_styles/globals.css

@@ -14,6 +14,7 @@
   --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
+  --output-panel-width: 560px; /* OUTPUT_PANEL_WIDTH.DEFAULT */
   --auth-primary-btn-bg: #ffffff;
   --auth-primary-btn-border: #ffffff;
   --auth-primary-btn-text: #000000;

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts

@@ -1,69 +1,90 @@
-import { useCallback, useEffect } from 'react'
-import { useShallow } from 'zustand/react/shallow'
+import { useCallback, useEffect, useRef } from 'react'
 import { PANEL_WIDTH } from '@/stores/constants'
 import { usePanelStore } from '@/stores/panel'
 
 /** Inset gap between the viewport edge and the content window */
 const CONTENT_WINDOW_GAP = 8
 
 /**
- * Custom hook to handle panel resize functionality.
- * Manages mouse events for resizing and enforces min/max width constraints.
- * Maximum width is capped at 40% of the viewport width for optimal layout.
+ * Handles panel drag-resize with zero React renders during the drag.
  *
- * @returns Resize state and handlers
+ * Mirrors the sidebar resize architecture (`use-sidebar-resize.ts`):
+ *
+ * pointerdown  → capture the pointer on the handle (so move/up keep arriving
+ *                even when the cursor leaves the window)
+ * pointermove  → write to --panel-width inside a requestAnimationFrame
+ *                callback (the CSS variable alone sizes `.panel-container`,
+ *                so no React work happens per frame)
+ * pointerup    → cancel any pending RAF, tear down, persist the final width
+ *                to Zustand once (one re-render + one localStorage write)
+ *
+ * The drag is torn down by `pointerup`, `pointercancel`, or window `blur`, so
+ * an interrupted gesture can never leave the drag listeners or body cursor
+ * stuck. A single-flight guard prevents stacking listeners across rapid
+ * presses, and an unmount cleanup tears down a drag still in flight.
  */
 export function usePanelResize() {
-  const { setPanelWidth, isResizing, setIsResizing } = usePanelStore(
-    useShallow((s) => ({
-      setPanelWidth: s.setPanelWidth,
-      isResizing: s.isResizing,
-      setIsResizing: s.setIsResizing,
-    }))
-  )
+  const setPanelWidth = usePanelStore((s) => s.setPanelWidth)
+  const setIsResizing = usePanelStore((s) => s.setIsResizing)
+  const cleanupRef = useRef<(() => void) | null>(null)
 
-  /**
-   * Handles mouse down on resize handle
-   */
-  const handleMouseDown = useCallback(() => {
-    setIsResizing(true)
-  }, [setIsResizing])
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLElement>) => {
+      if (cleanupRef.current) return
 
-  /**
-   * Setup resize event listeners and body styles when resizing
-   * Cleanup is handled automatically by the effect's return function
-   */
-  useEffect(() => {
-    if (!isResizing) return
+      const handle = e.currentTarget
+      const pointerId = e.pointerId
+      setIsResizing(true)
+      document.body.style.cursor = 'ew-resize'
+      document.body.style.userSelect = 'none'
+      handle.setPointerCapture?.(pointerId)
 
-    const handleMouseMove = (e: MouseEvent) => {
-      const newWidth = window.innerWidth - CONTENT_WINDOW_GAP - e.clientX
-      const maxWidth = window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE
+      let rafId: number | null = null
 
-      if (newWidth >= PANEL_WIDTH.MIN && newWidth <= maxWidth) {
-        setPanelWidth(newWidth)
+      const onPointerMove = (ev: PointerEvent) => {
+        if (rafId !== null) cancelAnimationFrame(rafId)
+        rafId = requestAnimationFrame(() => {
+          const maxWidth = window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE
+          const newWidth = window.innerWidth - CONTENT_WINDOW_GAP - ev.clientX
+          const clamped = Math.min(Math.max(newWidth, PANEL_WIDTH.MIN), maxWidth)
+          document.documentElement.style.setProperty('--panel-width', `${clamped}px`)
+          rafId = null
+        })
       }
-    }
 
-    const handleMouseUp = () => {
-      setIsResizing(false)
-    }
+      const cleanup = () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId)
+          rafId = null
+        }
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture(pointerId)
+        document.removeEventListener('pointermove', onPointerMove)
+        document.removeEventListener('pointerup', endDrag)
+        document.removeEventListener('pointercancel', endDrag)
+        window.removeEventListener('blur', endDrag)
+        cleanupRef.current = null
+      }
 
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
-    document.body.style.cursor = 'ew-resize'
-    document.body.style.userSelect = 'none'
+      function endDrag() {
+        cleanup()
+        const raw = document.documentElement.style.getPropertyValue('--panel-width')
+        const finalWidth = Number.parseFloat(raw)
+        if (!Number.isNaN(finalWidth)) setPanelWidth(finalWidth)
+        setIsResizing(false)
+      }
+
+      cleanupRef.current = cleanup
+      document.addEventListener('pointermove', onPointerMove)
+      document.addEventListener('pointerup', endDrag)
+      document.addEventListener('pointercancel', endDrag)
+      window.addEventListener('blur', endDrag)
+    },
+    [setPanelWidth, setIsResizing]
+  )
 
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove)
-      document.removeEventListener('mouseup', handleMouseUp)
-      document.body.style.cursor = ''
-      document.body.style.userSelect = ''
-    }
-  }, [isResizing, setPanelWidth, setIsResizing])
+  useEffect(() => () => cleanupRef.current?.(), [])
 
-  return {
-    isResizing,
-    handleMouseDown,
-  }
+  return { handlePointerDown }
 }

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

@@ -122,11 +122,10 @@ export const Panel = memo(function Panel() {
 
   const panelRef = useRef<HTMLElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
-  const { activeTab, setActiveTab, panelWidth, _hasHydrated, setHasHydrated } = usePanelStore(
+  const { activeTab, setActiveTab, _hasHydrated, setHasHydrated } = usePanelStore(
     useShallow((state) => ({
       activeTab: state.activeTab,
       setActiveTab: state.setActiveTab,
-      panelWidth: state.panelWidth,
       _hasHydrated: state._hasHydrated,
       setHasHydrated: state.setHasHydrated,
     }))
@@ -189,7 +188,7 @@ export const Panel = memo(function Panel() {
   const { handleRunWorkflow, handleCancelExecution, isExecuting } = useWorkflowExecution()
 
   // Panel resize hook
-  const { handleMouseDown } = usePanelResize()
+  const { handlePointerDown } = usePanelResize()
 
   /**
    * Opens subscription settings modal
@@ -932,7 +931,7 @@ export const Panel = memo(function Panel() {
         {/* Resize Handle */}
         <div
           className='absolute top-0 bottom-0 left-[-4px] z-20 w-[8px] cursor-ew-resize'
-          onMouseDown={handleMouseDown}
+          onPointerDown={handlePointerDown}
           role='separator'
           aria-orientation='vertical'
           aria-label='Resize panel'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx

@@ -77,12 +77,12 @@ const OutputCodeContent = React.memo(function OutputCodeContent({
 
 /**
  * Props for the OutputPanel component
- * Store-backed settings (wrapText, openOnRun, structuredView, outputPanelWidth)
+ * Store-backed settings (wrapText, openOnRun, structuredView)
  * are accessed directly from useTerminalStore to reduce prop drilling.
  */
 export interface OutputPanelProps {
   selectedEntry: ConsoleEntry
-  handleOutputPanelResizeMouseDown: (e: React.MouseEvent) => void
+  handleOutputPanelResizePointerDown: (e: React.PointerEvent<HTMLElement>) => void
   handleHeaderClick: () => void
   isExpanded: boolean
   expandToLastHeight: () => void
@@ -109,7 +109,7 @@ export interface OutputPanelProps {
  */
 export const OutputPanel = React.memo(function OutputPanel({
   selectedEntry,
-  handleOutputPanelResizeMouseDown,
+  handleOutputPanelResizePointerDown,
   handleHeaderClick,
   isExpanded,
   expandToLastHeight,
@@ -130,7 +130,6 @@ export const OutputPanel = React.memo(function OutputPanel({
   handleClearConsoleFromMenu,
 }: OutputPanelProps) {
   // Access store-backed settings directly to reduce prop drilling
-  const outputPanelWidth = useTerminalStore((state) => state.outputPanelWidth)
   const wrapText = useTerminalStore((state) => state.wrapText)
   const setWrapText = useTerminalStore((state) => state.setWrapText)
   const openOnRun = useTerminalStore((state) => state.openOnRun)
@@ -293,12 +292,12 @@ export const OutputPanel = React.memo(function OutputPanel({
     <>
       <div
         className='absolute top-0 right-0 bottom-0 flex flex-col border-[var(--border)] border-l bg-[var(--bg)]'
-        style={{ width: `${outputPanelWidth}px` }}
+        style={{ width: 'var(--output-panel-width)' }}
       >
         {/* Horizontal Resize Handle */}
         <div
           className='-ml-1 absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
-          onMouseDown={handleOutputPanelResizeMouseDown}
+          onPointerDown={handleOutputPanelResizePointerDown}
           role='separator'
           aria-label='Resize output panel'
           aria-orientation='vertical'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-output-panel-resize.ts

@@ -1,49 +1,89 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { OUTPUT_PANEL_WIDTH, TERMINAL_BLOCK_COLUMN_WIDTH } from '@/stores/constants'
 import { useTerminalStore } from '@/stores/terminal'
 
+/**
+ * Handles the terminal output panel drag-resize with zero React renders
+ * during the drag.
+ *
+ * Mirrors the sidebar resize architecture (`use-sidebar-resize.ts`):
+ *
+ * pointerdown  → capture the pointer on the handle (so move/up keep arriving
+ *                even when the cursor leaves the window)
+ * pointermove  → write to --output-panel-width inside a requestAnimationFrame
+ *                callback (the CSS variable alone sizes the logs column via
+ *                `calc(100% - var(--output-panel-width))`)
+ * pointerup    → cancel any pending RAF, tear down, persist the final width
+ *                to Zustand once (one re-render + one localStorage write)
+ *
+ * The drag is torn down by `pointerup`, `pointercancel`, or window `blur`, so
+ * an interrupted gesture can never leave the drag listeners or body cursor
+ * stuck. A single-flight guard prevents stacking listeners across rapid
+ * presses, and an unmount cleanup tears down a drag still in flight.
+ */
 export function useOutputPanelResize() {
-  const setOutputPanelWidth = useTerminalStore((state) => state.setOutputPanelWidth)
-  const [isResizing, setIsResizing] = useState(false)
+  const setOutputPanelWidth = useTerminalStore((s) => s.setOutputPanelWidth)
+  const cleanupRef = useRef<(() => void) | null>(null)
 
-  const handleMouseDown = useCallback(() => {
-    setIsResizing(true)
-  }, [])
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLElement>) => {
+      if (cleanupRef.current) return
 
-  useEffect(() => {
-    if (!isResizing) return
-
-    const handleMouseMove = (e: MouseEvent) => {
       const terminalEl = document.querySelector('[aria-label="Terminal"]')
       if (!terminalEl) return
 
-      const terminalRect = terminalEl.getBoundingClientRect()
-      const newWidth = terminalRect.right - e.clientX
-      const maxWidth = terminalRect.width - TERMINAL_BLOCK_COLUMN_WIDTH
-      const clampedWidth = Math.max(OUTPUT_PANEL_WIDTH.MIN, Math.min(newWidth, maxWidth))
-
-      setOutputPanelWidth(clampedWidth)
-    }
-
-    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, setOutputPanelWidth])
-
-  return {
-    isResizing,
-    handleMouseDown,
-  }
+      const handle = e.currentTarget
+      const pointerId = e.pointerId
+      document.body.style.cursor = 'ew-resize'
+      document.body.style.userSelect = 'none'
+      handle.setPointerCapture?.(pointerId)
+
+      let rafId: number | null = null
+
+      const onPointerMove = (ev: PointerEvent) => {
+        if (rafId !== null) cancelAnimationFrame(rafId)
+        rafId = requestAnimationFrame(() => {
+          const terminalRect = terminalEl.getBoundingClientRect()
+          const newWidth = terminalRect.right - ev.clientX
+          const maxWidth = terminalRect.width - TERMINAL_BLOCK_COLUMN_WIDTH
+          const clamped = Math.max(OUTPUT_PANEL_WIDTH.MIN, Math.min(newWidth, maxWidth))
+          document.documentElement.style.setProperty('--output-panel-width', `${clamped}px`)
+          rafId = null
+        })
+      }
+
+      const cleanup = () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId)
+          rafId = null
+        }
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+        if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture(pointerId)
+        document.removeEventListener('pointermove', onPointerMove)
+        document.removeEventListener('pointerup', endDrag)
+        document.removeEventListener('pointercancel', endDrag)
+        window.removeEventListener('blur', endDrag)
+        cleanupRef.current = null
+      }
+
+      function endDrag() {
+        cleanup()
+        const raw = document.documentElement.style.getPropertyValue('--output-panel-width')
+        const finalWidth = Number.parseFloat(raw)
+        if (!Number.isNaN(finalWidth)) setOutputPanelWidth(finalWidth)
+      }
+
+      cleanupRef.current = cleanup
+      document.addEventListener('pointermove', onPointerMove)
+      document.addEventListener('pointerup', endDrag)
+      document.addEventListener('pointercancel', endDrag)
+      window.addEventListener('blur', endDrag)
+    },
+    [setOutputPanelWidth]
+  )
+
+  useEffect(() => () => cleanupRef.current?.(), [])
+
+  return { handlePointerDown }
 }