feat(workflow): stage stack — resources card over the editor, never instead of it

andresdjasso · claude · andresdjasso · commit b1d353622616 · 2026-06-11T18:37:25.000-05:00
When a docked chat touches or links a non-workflow resource, the workspace
resource panel (same tab strip as everywhere) slides in as a card IN FRONT of
the editor with toast-stack depth: the workflow's title strip peeks above and
stays live behind. Clicking the peek, the card's ×, or pressing Escape brings
the editor forward; closing the last tab does too. The staged resource rides
in ?resource= — deep links restore the stack, reconstructing page tabs from
their self-describing ids, with hydration-gated effects so the transiently
empty store can't strip a valid link. Replaces the v1 behavior of navigating
back to the chat view (which threw away the editor).

Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/docked-chat/docked-chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/docked-chat/docked-chat.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { useRouter } from 'next/navigation'
 import { MothershipChat } from '@/app/workspace/[workspaceId]/home/components'
 import { getMothershipUseChatOptions, useChat } from '@/app/workspace/[workspaceId]/home/hooks'
@@ -22,6 +22,11 @@ interface DockedChatProps {
   onSelectChat: (chatId: string) => void
   /** A new chat resolved its server id — host reflects it into the URL. */
   onChatResolved: (chatId: string) => void
+  /**
+   * A non-workflow resource needs the stage: the host stacks the resource
+   * card in front of the editor instead of navigating away.
+   */
+  onStageResource: (resource: MothershipResource) => void
 }
 
 /**
@@ -38,8 +43,11 @@ export function DockedChat({
   onClose,
   onSelectChat,
   onChatResolved,
+  onStageResource,
 }: DockedChatProps) {
   const router = useRouter()
+  /** Readable from stream callbacks before the hook's return is in scope. */
+  const activeChatIdRef = useRef<string | undefined>(chatId)
   const {
     messages,
     isSending,
@@ -54,13 +62,32 @@ export function DockedChat({
     cancelQueueEdit,
     editingQueuedId,
     dispatchingHeadId,
-  } = useChat(workspaceId, chatId, getMothershipUseChatOptions({}))
+  } = useChat(
+    workspaceId,
+    chatId,
+    getMothershipUseChatOptions({
+      // The stage follows the conversation: another workflow swaps the
+      // editor; anything else stacks the resource card in front of it.
+      onResourceTouched: (resource) => {
+        if (resource.type === 'workflow') {
+          if (resource.id === workflowId) return
+          const chatParam = activeChatIdRef.current
+          router.push(
+            `/workspace/${workspaceId}/w/${resource.id}${chatParam ? `?chat=${chatParam}` : ''}`
+          )
+          return
+        }
+        onStageResource(resource)
+      },
+    })
+  )
 
   useEffect(() => {
     if (resolvedChatId && resolvedChatId !== chatId) onChatResolved(resolvedChatId)
   }, [resolvedChatId, chatId, onChatResolved])
 
   const activeChatId = resolvedChatId ?? chatId
+  activeChatIdRef.current = activeChatId
   const { isPending: isHistoryPending } = useMothershipChatHistory(activeChatId)
   const showSkeleton = Boolean(activeChatId) && messages.length === 0 && isHistoryPending
 
@@ -81,8 +108,7 @@ export function DockedChat({
       router.push(`/workspace/${workspaceId}/w/${resource.id}${chatParam}`)
       return
     }
-    if (!activeChatId) return
-    router.push(`/workspace/${workspaceId}/chat/${activeChatId}?resource=${resource.id}`)
+    onStageResource(resource)
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/docked-chat/workflow-with-chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/docked-chat/workflow-with-chat.tsx
@@ -1,8 +1,20 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams, useSearchParams } from 'next/navigation'
+import { Tooltip } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
+import { isMothershipPageId, MOTHERSHIP_PAGES } from '@/lib/copilot/resources/types'
+import {
+  MothershipResourcesProvider,
+  MothershipView,
+} from '@/app/workspace/[workspaceId]/home/components'
+import type {
+  MothershipResource,
+  MothershipResourceType,
+} from '@/app/workspace/[workspaceId]/home/types'
 import Workflow from '@/app/workspace/[workspaceId]/w/[workflowId]/workflow'
+import { useMothershipTabsStore } from '@/stores/mothership-tabs/store'
 import { DockedChat } from './docked-chat'
 
 /** Sentinel `?chat=` value for a docked chat that hasn't been created yet. */
@@ -37,33 +49,160 @@ export function WorkflowWithChat() {
   )
 
   /** URL is a mirror, not a router concern — replaceState avoids remounts. */
-  const reflectChatParam = useCallback((value: string | null) => {
+  const reflectParam = useCallback((key: string, value: string | null) => {
     const url = new URL(window.location.href)
-    if (value) url.searchParams.set('chat', value)
-    else url.searchParams.delete('chat')
+    if (value) url.searchParams.set(key, value)
+    else url.searchParams.delete(key)
     window.history.replaceState(null, '', url.toString())
   }, [])
 
+  /** The chat actually in the pane (server id once a new chat resolves). */
+  const activeChatIdRef = useRef<string | undefined>(dock.chatId)
+
   const openChat = useCallback(
     (chatId?: string) => {
       setDock({ open: true, chatId })
-      reflectChatParam(chatId ?? NEW_CHAT_PARAM)
+      activeChatIdRef.current = chatId
+      reflectParam('chat', chatId ?? NEW_CHAT_PARAM)
     },
-    [reflectChatParam]
+    [reflectParam]
   )
 
   const closeChat = useCallback(() => {
     setDock({ open: false })
-    reflectChatParam(null)
-  }, [reflectChatParam])
+    reflectParam('chat', null)
+  }, [reflectParam])
 
   /**
    * A new docked chat got its server id mid-conversation. Only the URL
    * updates — re-keying the pane here would remount the hook mid-stream.
    */
   const handleChatResolved = useCallback(
-    (chatId: string) => reflectChatParam(chatId),
-    [reflectChatParam]
+    (chatId: string) => {
+      activeChatIdRef.current = chatId
+      reflectParam('chat', chatId)
+    },
+    [reflectParam]
+  )
+
+  // ── Stage stack ──────────────────────────────────────────────────────────
+  // Non-workflow resources never replace the editor: they slide in as a card
+  // IN FRONT of it (toast-stack depth), with the workflow's title strip
+  // peeking above. Clicking the peek, the ×, or pressing Escape brings the
+  // workflow forward. Tabs are the same workspace-owned strip as everywhere.
+  const [stackOpen, setStackOpen] = useState<boolean>(() => Boolean(searchParams.get('resource')))
+  const initialStageIdRef = useRef(searchParams.get('resource'))
+
+  const workspaceTabs = useMothershipTabsStore((s) =>
+    workspaceId ? s.byWorkspace[workspaceId] : undefined
+  )
+  const openTabs = useMothershipTabsStore((s) => s.openTabs)
+  const closeTab = useMothershipTabsStore((s) => s.closeTab)
+  const reorderTabs = useMothershipTabsStore((s) => s.reorderTabs)
+  const setActiveTab = useMothershipTabsStore((s) => s.setActiveTab)
+  const stageTabs = useMemo(
+    () => (workspaceTabs?.tabs ?? []).filter((tab) => tab.type !== 'workflow'),
+    [workspaceTabs]
+  )
+  const stageActiveId = workspaceTabs?.activeTabId ?? null
+
+  const stageResource = useCallback(
+    (resource: MothershipResource) => {
+      if (!workspaceId) return
+      openTabs(workspaceId, [resource], { focusId: resource.id })
+      setStackOpen(true)
+      reflectParam('resource', resource.id)
+    },
+    [openTabs, workspaceId, reflectParam]
+  )
+
+  const collapseStack = useCallback(() => {
+    setStackOpen(false)
+    reflectParam('resource', null)
+  }, [reflectParam])
+
+  /**
+   * Deep-link restore: focus the URL-pinned tab if the strip still has it.
+   * The tabs store rehydrates asynchronously, so wait for hydration before
+   * deciding the tab doesn't exist.
+   */
+  useEffect(() => {
+    const id = initialStageIdRef.current
+    if (!id || !workspaceId) return
+    const apply = () => {
+      initialStageIdRef.current = null
+      const tabs = useMothershipTabsStore.getState().byWorkspace[workspaceId]?.tabs ?? []
+      if (tabs.some((tab) => tab.id === id)) {
+        setActiveTab(workspaceId, id)
+        return
+      }
+      // The strip doesn't have it, but page ids are self-describing — a deep
+      // link to a workspace page reconstructs its tab instead of collapsing.
+      if (isMothershipPageId(id)) {
+        openTabs(workspaceId, [{ type: 'page', id, title: MOTHERSHIP_PAGES[id] }], {
+          focusId: id,
+        })
+      }
+    }
+    if (useMothershipTabsStore.persist.hasHydrated()) {
+      apply()
+      return
+    }
+    return useMothershipTabsStore.persist.onFinishHydration(apply)
+  }, [workspaceId, setActiveTab, openTabs])
+
+  useEffect(() => {
+    if (!stackOpen) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') collapseStack()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [stackOpen, collapseStack])
+
+  /**
+   * Closing the last tab leaves nothing to show — the editor comes forward.
+   * Reads the live store (the render closure lags one commit behind the
+   * deep-link restore) and stays out until hydration and restore both ran,
+   * since the strip is transiently empty before them.
+   */
+  useEffect(() => {
+    if (!stackOpen || stageTabs.length > 0) return
+    if (!workspaceId) return
+    if (!useMothershipTabsStore.persist.hasHydrated()) return
+    if (initialStageIdRef.current) return
+    const live = useMothershipTabsStore.getState().byWorkspace[workspaceId]?.tabs ?? []
+    if (live.some((tab) => tab.type !== 'workflow')) return
+    collapseStack()
+  }, [stackOpen, stageTabs, collapseStack, workspaceId])
+
+  const selectStageTab = useCallback(
+    (id: string) => {
+      if (workspaceId) setActiveTab(workspaceId, id)
+    },
+    [setActiveTab, workspaceId]
+  )
+
+  const addStageTab = useCallback(
+    (resource: MothershipResource) => {
+      if (resource.type === 'workflow') return
+      stageResource(resource)
+    },
+    [stageResource]
+  )
+
+  const removeStageTab = useCallback(
+    (resourceType: MothershipResourceType, resourceId: string) => {
+      if (workspaceId) closeTab(workspaceId, resourceType, resourceId)
+    },
+    [closeTab, workspaceId]
+  )
+
+  const reorderStageTabs = useCallback(
+    (tabs: MothershipResource[]) => {
+      if (workspaceId) reorderTabs(workspaceId, tabs)
+    },
+    [reorderTabs, workspaceId]
   )
 
   // Divider drag mirrors useMothershipResize (imperative width, pointer
@@ -146,6 +285,7 @@ export function WorkflowWithChat() {
               onClose={closeChat}
               onSelectChat={openChat}
               onChatResolved={handleChatResolved}
+              onStageResource={stageResource}
             />
           </div>
           {/* Zero-width flex child whose absolute child straddles the border. */}
@@ -160,12 +300,59 @@ export function WorkflowWithChat() {
           </div>
         </>
       )}
-      <div className='h-full min-w-0 flex-1'>
+      <div className='relative h-full min-w-0 flex-1'>
         <Workflow
           workspaceId={workspaceId}
           workflowId={workflowId}
           chatDock={{ isOpen: dock.open, onSelectChat: openChat }}
         />
+        {stackOpen && (
+          <>
+            {/* The peek: the editor's own title strip shows through this
+                transparent band — clicking it brings the workflow forward. */}
+            <button
+              type='button'
+              aria-label='Back to workflow'
+              onClick={collapseStack}
+              className='absolute inset-x-0 top-0 z-30 h-[44px] cursor-pointer'
+            />
+            {/* The front card: the workspace resource tabs + active content,
+                stacked over the editor with toast-stack depth. */}
+            <div className='absolute inset-x-2 top-[44px] bottom-0 z-30 flex animate-slide-in-bottom flex-col overflow-hidden rounded-t-xl border border-[var(--border-1)] border-b-0 bg-[var(--bg)] shadow-sm'>
+              <MothershipResourcesProvider
+                selectResource={selectStageTab}
+                addResource={addStageTab}
+                removeResource={removeStageTab}
+                reorderResources={reorderStageTabs}
+                collapseResource={collapseStack}
+              >
+                <MothershipView
+                  workspaceId={workspaceId}
+                  chatId={activeChatIdRef.current}
+                  resources={stageTabs}
+                  activeResourceId={stageActiveId}
+                  isCollapsed={false}
+                  className='h-full w-full border-l-0'
+                />
+              </MothershipResourcesProvider>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type='button'
+                    onClick={collapseStack}
+                    aria-label='Close resource view'
+                    className='absolute top-[7px] right-[9px] z-20 flex size-[30px] flex-shrink-0 items-center justify-center rounded-lg transition-colors hover-hover:bg-[var(--surface-active)]'
+                  >
+                    <X className='size-[14px] text-[var(--text-icon)]' />
+                  </button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='bottom'>
+                  <p>Back to workflow</p>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+          </>
+        )}
       </div>
     </div>
   )
