feat(workflow): draggable divider between the docked chat and the editor

Mirrors useMothershipResize (imperative width, pointer capture, zero
re-renders during drag) measured from the pane's left edge since the chat
leads the row. Clamped to 360px–55% of the viewport, re-clamped on window
resize, cursor/selection restored on release or cancel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/docked-chat/workflow-with-chat.tsx

@@ -1,13 +1,16 @@
 'use client'
 
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useParams, useSearchParams } from 'next/navigation'
 import Workflow from '@/app/workspace/[workspaceId]/w/[workflowId]/workflow'
 import { DockedChat } from './docked-chat'
 
 /** Sentinel `?chat=` value for a docked chat that hasn't been created yet. */
 const NEW_CHAT_PARAM = 'new'
 
+/** Drag bounds for the docked chat pane. */
+const CHAT_PANE = { MIN: 360, MAX_PERCENTAGE: 0.55 } as const
+
 interface DockState {
   open: boolean
   chatId?: string
@@ -63,22 +66,99 @@ export function WorkflowWithChat() {
     [reflectChatParam]
   )
 
+  // Divider drag mirrors useMothershipResize (imperative width, pointer
+  // capture, zero re-renders) but measures from the pane's LEFT edge — this
+  // pane leads the row instead of trailing it.
+  const chatPaneRef = useRef<HTMLDivElement | null>(null)
+  const dragCleanupRef = useRef<(() => void) | null>(null)
+
+  const handleResizePointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault()
+    const el = chatPaneRef.current
+    if (!el) return
+
+    const handle = e.currentTarget as HTMLElement
+    handle.setPointerCapture(e.pointerId)
+    el.style.width = `${el.getBoundingClientRect().width}px`
+    document.body.style.cursor = 'ew-resize'
+    document.body.style.userSelect = 'none'
+
+    const ac = new AbortController()
+    const { signal } = ac
+    const cleanup = () => {
+      ac.abort()
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      dragCleanupRef.current = null
+    }
+    dragCleanupRef.current = cleanup
+
+    handle.addEventListener(
+      'pointermove',
+      (moveEvent: PointerEvent) => {
+        const newWidth = moveEvent.clientX - el.getBoundingClientRect().left
+        const maxWidth = window.innerWidth * CHAT_PANE.MAX_PERCENTAGE
+        el.style.width = `${Math.min(Math.max(newWidth, CHAT_PANE.MIN), maxWidth)}px`
+      },
+      { signal }
+    )
+    handle.addEventListener(
+      'pointerup',
+      (upEvent: PointerEvent) => {
+        handle.releasePointerCapture(upEvent.pointerId)
+        cleanup()
+      },
+      { signal }
+    )
+    handle.addEventListener('pointercancel', cleanup, { signal })
+  }, [])
+
+  useEffect(() => () => dragCleanupRef.current?.(), [])
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      const el = chatPaneRef.current
+      if (!el || !el.style.width) return
+      const maxWidth = window.innerWidth * CHAT_PANE.MAX_PERCENTAGE
+      if (el.getBoundingClientRect().width > maxWidth) {
+        el.style.width = `${maxWidth}px`
+      }
+    }
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [])
+
   if (!workspaceId || !workflowId) return null
 
   return (
     <div className='flex h-full w-full'>
       {dock.open && (
-        <div className='flex h-full w-[clamp(360px,34%,520px)] flex-shrink-0 flex-col border-[var(--border)] border-r'>
-          <DockedChat
-            key={dock.chatId ?? 'new'}
-            workspaceId={workspaceId}
-            workflowId={workflowId}
-            chatId={dock.chatId}
-            onClose={closeChat}
-            onSelectChat={openChat}
-            onChatResolved={handleChatResolved}
-          />
-        </div>
+        <>
+          <div
+            ref={chatPaneRef}
+            className='flex h-full w-[clamp(360px,34%,520px)] flex-shrink-0 flex-col border-[var(--border)] border-r'
+          >
+            <DockedChat
+              key={dock.chatId ?? 'new'}
+              workspaceId={workspaceId}
+              workflowId={workflowId}
+              chatId={dock.chatId}
+              onClose={closeChat}
+              onSelectChat={openChat}
+              onChatResolved={handleChatResolved}
+            />
+          </div>
+          {/* Zero-width flex child whose absolute child straddles the border. */}
+          <div className='relative z-20 w-0 flex-none'>
+            <div
+              className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize'
+              role='separator'
+              aria-orientation='vertical'
+              aria-label='Resize chat pane'
+              onPointerDown={handleResizePointerDown}
+            />
+          </div>
+        </>
       )}
       <div className='h-full min-w-0 flex-1'>
         <Workflow