feat(home): resizable chat/resource panel divider (#3648)

* feat(home): resizable chat/resource panel divider * fix(home): address PR review comments - Remove aria-hidden from resize handle outer div so separator role is visible to AT - Add viewport-resize re-clamping in useMothershipResize to prevent panel exceeding max % after browser window narrows - Change default MothershipView width from 60% to 50% * refactor(home): eradicate useEffect anti-patterns per you-might-not-need-an-effect - use-chat: remove messageQueue→ref sync Effect; inline assignment like other refs - use-chat: replace activeResourceId selection Effect with useMemo (derived value, avoids extra re-render cycle; activeResourceIdRef now tracks effective value for API payloads) - use-chat: replace 3x useLayoutEffect ref-sync (processSSEStream, finalize, sendMessage) with direct render-phase assignment — consistent with existing resourcesRef pattern - user-input: fold onEditValueConsumed callback into existing render-phase guard; remove Effect - home: move isResourceAnimatingIn 400ms timer into expandResource/handleResourceEvent event handlers where setIsResourceAnimatingIn(true) is called; remove reactive Effect watcher * fix(home): revert default width to 60%, reduce max resize to 63% * improvement(react): replace useEffect anti-patterns with better React primitives * improvement(react): replace useEffect anti-patterns with better React primitives * improvement(home): use pointer events for resize handle (touch + mouse support) * fix(autosave): store idle-reset timer ref to prevent status corruption on rapid saves * fix(home): move onEditValueConsumed call out of render phase into useEffect * fix(home): add pointercancel handler; fix(settings): sync name on profile refetch * fix(home): restore cleanupRef assignment dropped during AbortController refactor
simstudioai · waleedlatif1 · Mar 18, 2026 · Mar 17, 2026 · Mar 17, 2026 · Mar 18, 2026
commit 8a4c161ec435afa6956cab155016f8cfa7feb035
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
@@ -215,16 +215,13 @@ function TextEditor({
     onSaveStatusChange?.(saveStatus)
   }, [saveStatus, onSaveStatusChange])
 
-  useEffect(() => {
-    if (saveRef) {
-      saveRef.current = saveImmediately
-    }
-    return () => {
-      if (saveRef) {
-        saveRef.current = null
-      }
-    }
-  }, [saveRef, saveImmediately])
+  if (saveRef) saveRef.current = saveImmediately
+  useEffect(
+    () => () => {
+      if (saveRef) saveRef.current = null
+    },
+    [saveRef]
+  )
 
   useEffect(() => {
     if (!isResizing) return

diff --git a/...spaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/...spaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -160,8 +160,8 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
   ])
 
   const handleOpenWorkflow = useCallback(() => {
-    router.push(`/workspace/${workspaceId}/w/${workflowId}`)
-  }, [router, workspaceId, workflowId])
+    window.open(`/workspace/${workspaceId}/w/${workflowId}`, '_blank')
+  }, [workspaceId, workflowId])
 
   return (
     <>

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useCallback, useEffect, useState } from 'react'
+import { forwardRef, memo, useCallback, useState } from 'react'
 import { cn } from '@/lib/core/utils/cn'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
 import type { PreviewMode } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
@@ -31,68 +31,79 @@ interface MothershipViewProps {
   className?: string
 }
 
-export const MothershipView = memo(function MothershipView({
-  workspaceId,
-  chatId,
-  resources,
-  activeResourceId,
-  onSelectResource,
-  onAddResource,
-  onRemoveResource,
-  onReorderResources,
-  onCollapse,
-  isCollapsed,
-  className,
-}: MothershipViewProps) {
-  const active = resources.find((r) => r.id === activeResourceId) ?? resources[0] ?? null
+export const MothershipView = memo(
+  forwardRef<HTMLDivElement, MothershipViewProps>(function MothershipView(
+    {
+      workspaceId,
+      chatId,
+      resources,
+      activeResourceId,
+      onSelectResource,
+      onAddResource,
+      onRemoveResource,
+      onReorderResources,
+      onCollapse,
+      isCollapsed,
+      className,
+    }: MothershipViewProps,
+    ref
+  ) {
+    const active = resources.find((r) => r.id === activeResourceId) ?? resources[0] ?? null
 
-  const [previewMode, setPreviewMode] = useState<PreviewMode>('preview')
-  const handleCyclePreview = useCallback(() => setPreviewMode((m) => PREVIEW_CYCLE[m]), [])
+    const [previewMode, setPreviewMode] = useState<PreviewMode>('preview')
+    const [prevActiveId, setPrevActiveId] = useState<string | null | undefined>(active?.id)
+    const handleCyclePreview = useCallback(() => setPreviewMode((m) => PREVIEW_CYCLE[m]), [])
 
-  useEffect(() => {
-    setPreviewMode('preview')
-  }, [active?.id])
+    // Reset preview mode to default when the active resource changes (guarded render-phase update)
+    if (active?.id !== prevActiveId) {
+      setPrevActiveId(active?.id)
+      setPreviewMode('preview')
+    }
 
-  const isActivePreviewable =
-    active?.type === 'file' && RICH_PREVIEWABLE_EXTENSIONS.has(getFileExtension(active.title))
+    const isActivePreviewable =
+      active?.type === 'file' && RICH_PREVIEWABLE_EXTENSIONS.has(getFileExtension(active.title))
 
-  return (
-    <div
-      className={cn(
-        'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-300 ease-out',
-        isCollapsed ? 'w-0 min-w-0 border-l-0' : 'w-[60%] border-l',
-        className
-      )}
-    >
-      <div className='flex min-h-0 flex-1 flex-col'>
-        <ResourceTabs
-          workspaceId={workspaceId}
-          chatId={chatId}
-          resources={resources}
-          activeId={active?.id ?? null}
-          onSelect={onSelectResource}
-          onAddResource={onAddResource}
-          onRemoveResource={onRemoveResource}
-          onReorderResources={onReorderResources}
-          onCollapse={onCollapse}
-          actions={active ? <ResourceActions workspaceId={workspaceId} resource={active} /> : null}
-          previewMode={isActivePreviewable ? previewMode : undefined}
-          onCyclePreviewMode={isActivePreviewable ? handleCyclePreview : undefined}
-        />
-        <div className='min-h-0 flex-1 overflow-hidden'>
-          {active ? (
-            <ResourceContent
-              workspaceId={workspaceId}
-              resource={active}
-              previewMode={isActivePreviewable ? previewMode : undefined}
-            />
-          ) : (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
-              Click "+" above to add a resource
-            </div>
-          )}
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-300 ease-out',
+          isCollapsed ? 'w-0 min-w-0 border-l-0' : 'w-[60%] border-l',
+          className
+        )}
+      >
+        <div className='flex min-h-0 flex-1 flex-col'>
+          <ResourceTabs
+            workspaceId={workspaceId}
+            chatId={chatId}
+            resources={resources}
+            activeId={active?.id ?? null}
+            onSelect={onSelectResource}
+            onAddResource={onAddResource}
+            onRemoveResource={onRemoveResource}
+            onReorderResources={onReorderResources}
+            onCollapse={onCollapse}
+            actions={
+              active ? <ResourceActions workspaceId={workspaceId} resource={active} /> : null
+            }
+            previewMode={isActivePreviewable ? previewMode : undefined}
+            onCyclePreviewMode={isActivePreviewable ? handleCyclePreview : undefined}
+          />
+          <div className='min-h-0 flex-1 overflow-hidden'>
+            {active ? (
+              <ResourceContent
+                workspaceId={workspaceId}
+                resource={active}
+                previewMode={isActivePreviewable ? previewMode : undefined}
+              />
+            ) : (
+              <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+                Click "+" above to add a resource
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  )
-})
+    )
+  })
+)
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -202,9 +202,7 @@ export function UserInput({
   }
 
   useEffect(() => {
-    if (editValue) {
-      onEditValueConsumed?.()
-    }
+    if (editValue) onEditValueConsumed?.()
   }, [editValue, onEditValueConsumed])
 
   const animatedPlaceholder = useAnimatedPlaceholder(isInitialView)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -26,7 +26,7 @@ import {
   UserMessageContent,
 } from './components'
 import { PendingTagIndicator } from './components/message-content/components/special-tags'
-import { useAutoScroll, useChat } from './hooks'
+import { useAutoScroll, useChat, useMothershipResize } from './hooks'
 import type { FileAttachmentForApi, MothershipResource, MothershipResourceType } from './types'
 
 const logger = createLogger('Home')
@@ -138,26 +138,41 @@ export function Home({ chatId }: HomeProps = {}) {
   useChatHistory(chatId)
   const { mutate: markRead } = useMarkTaskRead(workspaceId)
 
+  const { mothershipRef, handleResizePointerDown, clearWidth } = useMothershipResize()
+
   const [isResourceCollapsed, setIsResourceCollapsed] = useState(true)
   const [isResourceAnimatingIn, setIsResourceAnimatingIn] = useState(false)
   const [skipResourceTransition, setSkipResourceTransition] = useState(false)
   const isResourceCollapsedRef = useRef(isResourceCollapsed)
   isResourceCollapsedRef.current = isResourceCollapsed
 
-  const collapseResource = useCallback(() => setIsResourceCollapsed(true), [])
-  const expandResource = useCallback(() => {
-    setIsResourceCollapsed(false)
+  const collapseResource = useCallback(() => {
+    clearWidth()
+    setIsResourceCollapsed(true)
+  }, [clearWidth])
+  const animatingInTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const startAnimatingIn = useCallback(() => {
+    if (animatingInTimerRef.current) clearTimeout(animatingInTimerRef.current)
     setIsResourceAnimatingIn(true)
+    animatingInTimerRef.current = setTimeout(() => {
+      setIsResourceAnimatingIn(false)
+      animatingInTimerRef.current = null
+    }, 400)
   }, [])
 
+  const expandResource = useCallback(() => {
+    setIsResourceCollapsed(false)
+    startAnimatingIn()
+  }, [startAnimatingIn])
+
   const handleResourceEvent = useCallback(() => {
     if (isResourceCollapsedRef.current) {
       const { isCollapsed, toggleCollapsed } = useSidebarStore.getState()
       if (!isCollapsed) toggleCollapsed()
       setIsResourceCollapsed(false)
-      setIsResourceAnimatingIn(true)
+      startAnimatingIn()
     }
-  }, [])
+  }, [startAnimatingIn])
 
   const {
     messages,
@@ -178,8 +193,15 @@ export function Home({ chatId }: HomeProps = {}) {
   } = useChat(workspaceId, chatId, { onResourceEvent: handleResourceEvent })
 
   const [editingInputValue, setEditingInputValue] = useState('')
+  const [prevChatId, setPrevChatId] = useState(chatId)
   const clearEditingValue = useCallback(() => setEditingInputValue(''), [])
 
+  // Clear editing value when navigating to a different chat (guarded render-phase update)
+  if (chatId !== prevChatId) {
+    setPrevChatId(chatId)
+    setEditingInputValue('')
+  }
+
   const handleEditQueuedMessage = useCallback(
     (id: string) => {
       const msg = editQueuedMessage(id)
@@ -190,10 +212,6 @@ export function Home({ chatId }: HomeProps = {}) {
     [editQueuedMessage]
   )
 
-  useEffect(() => {
-    setEditingInputValue('')
-  }, [chatId])
-
   useEffect(() => {
     wasSendingRef.current = false
     if (resolvedChatId) markRead(resolvedChatId)
@@ -207,23 +225,12 @@ export function Home({ chatId }: HomeProps = {}) {
   }, [isSending, resolvedChatId, markRead])
 
   useEffect(() => {
-    if (!isResourceAnimatingIn) return
-    const timer = setTimeout(() => setIsResourceAnimatingIn(false), 400)
-    return () => clearTimeout(timer)
-  }, [isResourceAnimatingIn])
-
-  useEffect(() => {
-    if (resources.length > 0 && isResourceCollapsedRef.current) {
-      setSkipResourceTransition(true)
-      setIsResourceCollapsed(false)
-    }
-  }, [resources])
-
-  useEffect(() => {
-    if (!skipResourceTransition) return
+    if (!(resources.length > 0 && isResourceCollapsedRef.current)) return
+    setIsResourceCollapsed(false)
+    setSkipResourceTransition(true)
     const id = requestAnimationFrame(() => setSkipResourceTransition(false))
     return () => cancelAnimationFrame(id)
-  }, [skipResourceTransition])
+  }, [resources])
 
   const handleSubmit = useCallback(
     (text: string, fileAttachments?: FileAttachmentForApi[], contexts?: ChatContext[]) => {
@@ -359,7 +366,7 @@ export function Home({ chatId }: HomeProps = {}) {
 
   return (
     <div className='relative flex h-full bg-[var(--bg)]'>
-      <div className='flex h-full min-w-0 flex-1 flex-col'>
+      <div className='flex h-full min-w-[320px] flex-1 flex-col'>
         <div
           ref={scrollContainerRef}
           className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-4 pb-8 [scrollbar-gutter:stable]'
@@ -458,7 +465,21 @@ export function Home({ chatId }: HomeProps = {}) {
         </div>
       </div>
 
+      {/* Resize handle — zero-width flex child whose absolute child straddles the border */}
+      {!isResourceCollapsed && (
+        <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 resource panel'
+            onPointerDown={handleResizePointerDown}
+          />
+        </div>
+      )}
+
       <MothershipView
+        ref={mothershipRef}
         workspaceId={workspaceId}
         chatId={resolvedChatId}
         resources={resources}

diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/index.ts
@@ -2,4 +2,5 @@ export { useAnimatedPlaceholder } from './use-animated-placeholder'
 export { useAutoScroll } from './use-auto-scroll'
 export type { UseChatReturn } from './use-chat'
 export { useChat } from './use-chat'
+export { useMothershipResize } from './use-mothership-resize'
 export { useStreamingReveal } from './use-streaming-reveal'