fix(workflow): robust drag finalize — last-applied value, sidebar unmount, clamp skip

Addresses three review findings on the scoped-resize change:
- useDragResize: track the last applied value and commit that on release;
  only recompute from the pointer event while the target is still connected.
  On an unmount the target's rect can be detached, so a layout-reading compute
  (e.g. the output panel's) would return a degenerate MIN — committing the last
  shown value avoids persisting the wrong width, and keeps flick-safety on a
  normal release.
- use-sidebar-resize: finalize on unmount (run endDrag, not bare cleanup) so a
  drag interrupted by unmount persists the width and drops the scoped override.
  This matters more than for the panel/terminal because .sidebar-shell-outer
  lives in the workspace chrome and outlives the sidebar, so a stranded override
  would win over :root.
- terminal output-panel clamp: skip while an output-panel drag is active (its
  scoped inline override is present). That drag's own compute clamps every frame
  against the live terminal rect, and a store-driven :root write here would be
  masked by the inline override anyway.

Author: waleedlatif1

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

@@ -1267,6 +1267,12 @@ export const Terminal = memo(function Terminal() {
     const handleResize = () => {
       if (!selectedEntry) return
 
+      // An active output-panel drag owns clamping: its own compute clamps every
+      // frame against the live terminal rect, and its scoped inline override on
+      // `.terminal-container` would mask a store-driven `:root` write here
+      // anyway. The inline override is present only while that drag is active.
+      if (el.style.getPropertyValue('--output-panel-width')) return
+
       const maxWidth = el.getBoundingClientRect().width - TERMINAL_CONFIG.BLOCK_COLUMN_WIDTH_PX
 
       if (maxWidth < MIN_OUTPUT_PANEL_WIDTH_PX) {
@@ -1275,12 +1281,7 @@ export const Terminal = memo(function Terminal() {
         return
       }
 
-      const liveWidth = Number.parseFloat(
-        el.style.getPropertyValue('--output-panel-width') ||
-          document.documentElement.style.getPropertyValue('--output-panel-width')
-      )
-      const currentWidth = Number.isNaN(liveWidth) ? outputPanelWidth : liveWidth
-      if (currentWidth > maxWidth) {
+      if (outputPanelWidth > maxWidth) {
         setOutputPanelWidth(Math.max(maxWidth, MIN_OUTPUT_PANEL_WIDTH_PX))
       }
     }

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

@@ -26,16 +26,19 @@ import { useSidebarStore } from '@/stores/sidebar/store'
  * stealing focus) can never leave the `is-resizing` / `sidebar-resizing` classes
  * stuck — which would otherwise freeze the sidebar at a tiny width with the
  * collapse transition permanently disabled. A single-flight guard prevents
- * stacking listeners across rapid presses, and an unmount cleanup tears down a
- * drag still in flight when the sidebar unmounts (e.g. route change).
+ * stacking listeners across rapid presses, and unmounting mid-drag finalizes it
+ * the same way a release does — persisting the last width and dropping the
+ * scoped override — which matters because `.sidebar-shell-outer` lives in the
+ * workspace chrome and outlives the sidebar, so a stranded override would
+ * otherwise win over the committed `:root` value.
  */
 export function useSidebarResize() {
   const setSidebarWidth = useSidebarStore((s) => s.setSidebarWidth)
-  const cleanupRef = useRef<(() => void) | null>(null)
+  const teardownRef = useRef<(() => void) | null>(null)
 
   const handlePointerDown = useCallback(
     (e: React.PointerEvent<HTMLElement>) => {
-      if (cleanupRef.current) return
+      if (teardownRef.current) return
 
       const handle = e.currentTarget
       const pointerId = e.pointerId
@@ -76,7 +79,7 @@ export function useSidebarResize() {
         document.removeEventListener('pointerup', endDrag)
         document.removeEventListener('pointercancel', endDrag)
         window.removeEventListener('blur', endDrag)
-        cleanupRef.current = null
+        teardownRef.current = null
       }
 
       function endDrag() {
@@ -87,7 +90,7 @@ export function useSidebarResize() {
         }
       }
 
-      cleanupRef.current = cleanup
+      teardownRef.current = endDrag
       document.addEventListener('pointermove', onPointerMove)
       document.addEventListener('pointerup', endDrag)
       document.addEventListener('pointercancel', endDrag)
@@ -96,7 +99,7 @@ export function useSidebarResize() {
     [setSidebarWidth]
   )
 
-  useEffect(() => () => cleanupRef.current?.(), [])
+  useEffect(() => () => teardownRef.current?.(), [])
 
   return { handlePointerDown }
 }

apps/sim/hooks/use-drag-resize.ts

@@ -97,9 +97,11 @@ export function useDragResize(options: UseDragResizeOptions) {
 
     let rafId: number | null = null
     let lastEvent: PointerEvent | null = null
+    let lastApplied: number | null = null
 
     const applyValue = (value: number) => {
       target.style.setProperty(cssVar, `${value}px`)
+      lastApplied = value
       optionsRef.current.onApply?.(value)
     }
 
@@ -131,13 +133,18 @@ export function useDragResize(options: UseDragResizeOptions) {
 
     function endDrag() {
       cleanup()
-      if (lastEvent !== null) {
+      // Recompute the final value from the last pointer position for an exact
+      // finish (and flick-safety when no frame ran) — but only while the target
+      // is still attached. On an unmount its rect can be detached, so a
+      // layout-reading compute would return a degenerate value; there, commit
+      // the last value actually shown to the user instead.
+      if (lastEvent !== null && target.isConnected) {
         const value = optionsRef.current.compute(lastEvent)
-        if (value !== null) {
-          applyValue(value)
-          optionsRef.current.commit(value)
-          if (target !== document.documentElement) target.style.removeProperty(cssVar)
-        }
+        if (value !== null) applyValue(value)
+      }
+      if (lastApplied !== null) {
+        optionsRef.current.commit(lastApplied)
+        if (target !== document.documentElement) target.style.removeProperty(cssVar)
       }
       optionsRef.current.onEnd?.()
     }