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

* 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.

* improvement(workflow): shared useDragResize hook + review fixes

Extract the drag mechanism into a shared useDragResize hook (pointer
capture, rAF-aligned apply, commit-on-release) consumed by the panel,
terminal, and output-panel resize hooks. Fixes from adversarial review:
commit the last computed value instead of reading the CSS var back (a
fast single-frame flick could be lost to a cancelled rAF, and a
pre-rehydration read returned '' -> NaN), floor the panel/terminal max
clamp at the minimum so narrow viewports can't invert the clamp, guard
pointerup/pointercancel by pointerId so a second touch pointer can't
kill the drag, and capture the terminal rect once on drag start instead
of per-frame getBoundingClientRect. Remove the now-dead isResizing store
state and centralize CONTENT_WINDOW_GAP in stores/constants.

* fix(workflow): compute drag value rAF-aligned from the latest pointer event

Run compute inside the rAF (before the CSS-var write, so any layout read
hits clean layout at most once per frame) and derive the final value from
the latest pointer event on release. The output-panel hook now captures
the terminal element on drag start and re-reads its rect per frame, so
the clamp stays correct when the terminal resizes mid-drag and the live
width can never exceed the current max.

* fix(terminal): clamp output panel against the live CSS-var width

The ResizeObserver clamp compared the persisted store width, which is
intentionally stale during a drag; a terminal shrink mid-drag could
overwrite the live width with a stale store value. Compare against the
live --output-panel-width variable (store as pre-write fallback) so the
clamp converges with the drag instead of fighting it.

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,40 @@
-import { useCallback, useEffect } from 'react'
-import { useShallow } from 'zustand/react/shallow'
-import { PANEL_WIDTH } from '@/stores/constants'
+import { useDragResize } from '@/hooks/use-drag-resize'
+import { CONTENT_WINDOW_GAP, 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
+/**
+ * Computes the clamped panel width for a pointer position. The maximum is
+ * floored at the minimum so a narrow viewport can never invert the clamp
+ * and force the panel below {@link PANEL_WIDTH.MIN}.
+ */
+function computePanelWidth(ev: PointerEvent): number {
+  const maxWidth = Math.max(PANEL_WIDTH.MIN, window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE)
+  const newWidth = window.innerWidth - CONTENT_WINDOW_GAP - ev.clientX
+  return Math.min(Math.max(newWidth, PANEL_WIDTH.MIN), maxWidth)
+}
+
+/**
+ * Applies the panel width per frame. The `--panel-width` CSS variable alone
+ * sizes `.panel-container`, so no React work happens during the drag.
+ */
+function applyPanelWidth(width: number): void {
+  document.documentElement.style.setProperty('--panel-width', `${width}px`)
+}
 
 /**
- * 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.
+ * The final width is committed to the store (one re-render + one
+ * localStorage write) when the drag ends.
  *
- * @returns Resize state and handlers
+ * @returns Pointer-down handler for the resize handle
  */
 export function usePanelResize() {
-  const { setPanelWidth, isResizing, setIsResizing } = usePanelStore(
-    useShallow((s) => ({
-      setPanelWidth: s.setPanelWidth,
-      isResizing: s.isResizing,
-      setIsResizing: s.setIsResizing,
-    }))
-  )
-
-  /**
-   * Handles mouse down on resize handle
-   */
-  const handleMouseDown = useCallback(() => {
-    setIsResizing(true)
-  }, [setIsResizing])
-
-  /**
-   * 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) => {
-      const newWidth = window.innerWidth - CONTENT_WINDOW_GAP - e.clientX
-      const maxWidth = window.innerWidth * PANEL_WIDTH.MAX_PERCENTAGE
-
-      if (newWidth >= PANEL_WIDTH.MIN && newWidth <= maxWidth) {
-        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, setIsResizing])
-
-  return {
-    isResizing,
-    handleMouseDown,
-  }
+  const setPanelWidth = usePanelStore((s) => s.setPanelWidth)
+
+  return useDragResize({
+    cursor: 'ew-resize',
+    compute: computePanelWidth,
+    apply: applyPanelWidth,
+    commit: setPanelWidth,
+  })
 }

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,50 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useRef } from 'react'
+import { useDragResize } from '@/hooks/use-drag-resize'
 import { OUTPUT_PANEL_WIDTH, TERMINAL_BLOCK_COLUMN_WIDTH } from '@/stores/constants'
 import { useTerminalStore } from '@/stores/terminal'
 
+/**
+ * Applies the output panel width per frame. The `--output-panel-width` CSS
+ * variable alone sizes the output panel and its sibling logs column, so no
+ * React work happens during the drag.
+ */
+function applyOutputPanelWidth(width: number): void {
+  document.documentElement.style.setProperty('--output-panel-width', `${width}px`)
+}
+
+/**
+ * Handles the terminal output panel drag-resize with zero React renders
+ * during the drag. The terminal element is captured once on drag start and
+ * its rect is re-read per frame (rAF-aligned, before the CSS-var write), so
+ * the clamp stays correct even if the terminal resizes mid-drag. The final
+ * width is committed to the store (one re-render + one localStorage write)
+ * when the drag ends.
+ *
+ * @returns Pointer-down handler for the resize handle
+ */
 export function useOutputPanelResize() {
-  const setOutputPanelWidth = useTerminalStore((state) => state.setOutputPanelWidth)
-  const [isResizing, setIsResizing] = useState(false)
+  const setOutputPanelWidth = useTerminalStore((s) => s.setOutputPanelWidth)
+  const terminalElRef = useRef<Element | null>(null)
 
-  const handleMouseDown = useCallback(() => {
-    setIsResizing(true)
+  const captureTerminalElement = useCallback(() => {
+    terminalElRef.current = document.querySelector('[aria-label="Terminal"]')
+    return terminalElRef.current !== null
   }, [])
 
-  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])
+  const computeOutputPanelWidth = useCallback((ev: PointerEvent) => {
+    const terminalEl = terminalElRef.current
+    if (!terminalEl) return null
+    const terminalRect = terminalEl.getBoundingClientRect()
+    const newWidth = terminalRect.right - ev.clientX
+    const maxWidth = terminalRect.width - TERMINAL_BLOCK_COLUMN_WIDTH
+    return Math.max(OUTPUT_PANEL_WIDTH.MIN, Math.min(newWidth, maxWidth))
+  }, [])
 
-  return {
-    isResizing,
-    handleMouseDown,
-  }
+  return useDragResize({
+    cursor: 'ew-resize',
+    compute: computeOutputPanelWidth,
+    apply: applyOutputPanelWidth,
+    commit: setOutputPanelWidth,
+    onStart: captureTerminalElement,
+  })
 }

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

@@ -1,52 +1,48 @@
-import { useCallback, useEffect } from 'react'
+import { TERMINAL_CONFIG } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils'
+import { useDragResize } from '@/hooks/use-drag-resize'
+import { CONTENT_WINDOW_GAP, TERMINAL_HEIGHT } from '@/stores/constants'
 import { useTerminalStore } from '@/stores/terminal'
 
-const MIN_HEIGHT = 30
-const MAX_HEIGHT_PERCENTAGE = 0.7
+/** Computes the clamped terminal height for a pointer position */
+function computeTerminalHeight(ev: PointerEvent): number {
+  const maxHeight = Math.max(
+    TERMINAL_HEIGHT.MIN,
+    window.innerHeight * TERMINAL_HEIGHT.MAX_PERCENTAGE
+  )
+  const newHeight = window.innerHeight - CONTENT_WINDOW_GAP - ev.clientY
+  return Math.min(Math.max(newHeight, TERMINAL_HEIGHT.MIN), maxHeight)
+}
 
-/** Inset gap between the viewport edge and the content window */
-const CONTENT_WINDOW_GAP = 8
+/**
+ * Applies the terminal height per frame. The `--terminal-height` CSS
+ * variable alone sizes `.terminal-container`, so no React work happens on
+ * ordinary frames. The store is committed mid-drag only when the height
+ * crosses the expanded threshold, so `isExpanded` subscribers (header
+ * chevron, auto-open logic) still flip live during the drag.
+ */
+function applyTerminalHeight(height: number): void {
+  document.documentElement.style.setProperty('--terminal-height', `${height}px`)
+
+  const store = useTerminalStore.getState()
+  const wasExpanded = store.terminalHeight > TERMINAL_CONFIG.NEAR_MIN_THRESHOLD
+  const nowExpanded = height > TERMINAL_CONFIG.NEAR_MIN_THRESHOLD
+  if (wasExpanded !== nowExpanded) store.setTerminalHeight(height)
+}
 
+/**
+ * Handles terminal drag-resize with zero React renders during the drag
+ * (except at expanded-threshold crossings). The final height is committed
+ * to the store (one re-render + one localStorage write) when the drag ends.
+ *
+ * @returns Pointer-down handler for the resize handle
+ */
 export function useTerminalResize() {
-  const setTerminalHeight = useTerminalStore((state) => state.setTerminalHeight)
-  const isResizing = useTerminalStore((state) => state.isResizing)
-  const setIsResizing = useTerminalStore((state) => state.setIsResizing)
-
-  const handleMouseDown = useCallback(() => {
-    setIsResizing(true)
-  }, [setIsResizing])
-
-  useEffect(() => {
-    if (!isResizing) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const newHeight = window.innerHeight - CONTENT_WINDOW_GAP - e.clientY
-      const maxHeight = window.innerHeight * MAX_HEIGHT_PERCENTAGE
-
-      if (newHeight >= MIN_HEIGHT && newHeight <= maxHeight) {
-        setTerminalHeight(newHeight)
-      }
-    }
-
-    const handleMouseUp = () => {
-      setIsResizing(false)
-    }
-
-    document.addEventListener('mousemove', handleMouseMove)
-    document.addEventListener('mouseup', handleMouseUp)
-    document.body.style.cursor = 'ns-resize'
-    document.body.style.userSelect = 'none'
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove)
-      document.removeEventListener('mouseup', handleMouseUp)
-      document.body.style.cursor = ''
-      document.body.style.userSelect = ''
-    }
-  }, [isResizing, setTerminalHeight, setIsResizing])
-
-  return {
-    isResizing,
-    handleMouseDown,
-  }
+  const setTerminalHeight = useTerminalStore((s) => s.setTerminalHeight)
+
+  return useDragResize({
+    cursor: 'ns-resize',
+    compute: computeTerminalHeight,
+    apply: applyTerminalHeight,
+    commit: setTerminalHeight,
+  })
 }