feat(workflow): docked chat — chat is the constant, the editor owns the stage

Workflows are environments, not documents: they never render as resource
tabs. The workflow route gains a WorkflowWithChat shell — picking a chat from
the canvas switcher docks the full Mothership chat beside the editor (?chat=
in the URL for refresh/deep links), the chat title bar swaps chats in place
(new switcher navigateOnSelect=false plumbing through MothershipChat), and ×
returns the editor to full width.

On chat surfaces, every workflow open — agent-touched, +-menu, or chip —
swaps the stage to /w/{id}?chat={chatId} instead of opening a tab; the
workspace tab strip persists untouched behind it, and non-workflow chips in
the docked pane swap back to the tabbed chat view with that tab focused.
Legacy persisted workflow tabs are filtered on read and the tabs store
refuses new ones.

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

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx

@@ -33,7 +33,6 @@ function derivePageResource(pathname: string, workspaceId: string): MothershipRe
   const prefix = `/workspace/${workspaceId}/`
   if (!pathname.startsWith(prefix)) return null
   const [segment, detail] = pathname.slice(prefix.length).split('/')
-  if (segment === 'w' && detail) return { type: 'workflow', id: detail, title: 'Workflow' }
   if (segment === 'tables' && detail) return { type: 'table', id: detail, title: 'Table' }
   if (segment === 'knowledge' && detail) {
     return { type: 'knowledgebase', id: detail, title: 'Knowledge Base' }
@@ -65,6 +64,12 @@ interface ChatSwitcherProps {
    * to reopen a hidden chat pane (including re-picking the current chat).
    */
   onSelectChat?: (chatId: string) => void
+  /**
+   * When false, selecting a chat only fires {@link onSelectChat} — the host
+   * owns what happens next. The workflow editor uses this to dock the chat
+   * beside the canvas instead of leaving the page.
+   */
+  navigateOnSelect?: boolean
   /**
    * The chat is generating a response — the recents icon becomes a spinner so
    * the title bar signals work in progress even when the messages are off
@@ -83,6 +88,7 @@ export function ChatSwitcher({
   isNewChat = false,
   iconOnly = false,
   onSelectChat,
+  navigateOnSelect = true,
   isWorking = false,
 }: ChatSwitcherProps) {
   const isHidden = useSidebarToggleHidden()
@@ -113,6 +119,7 @@ export function ChatSwitcher({
   const handleSelect = (selectedChatId: string) => {
     setOpen(false)
     onSelectChat?.(selectedChatId)
+    if (!navigateOnSelect) return
     if (selectedChatId === chatId) return
     // Opening a chat never takes away what you're looking at: the current
     // page becomes the focused panel tab, and the chat slides in beside it.

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx

@@ -13,6 +13,12 @@ interface ChatTitleBarProps {
    * to reopen a hidden chat pane (including re-picking the current chat).
    */
   onSelectChat?: (chatId: string) => void
+  /**
+   * Forwarded to the switcher: when false, selecting a chat only fires
+   * {@link onSelectChat} — used by the workflow editor's docked chat, where
+   * switching swaps the pane in place instead of navigating.
+   */
+  navigateOnSelect?: boolean
   /** Renders a close (×) control at the bar's right edge that hides the chat pane. */
   onClose?: () => void
   /** The chat is generating a response — the switcher's recents icon becomes a spinner. */
@@ -25,7 +31,13 @@ interface ChatTitleBarProps {
  * straight between chats without returning to the new-chat view. Selecting a
  * chat navigates to it.
  */
-export function ChatTitleBar({ chatId, onSelectChat, onClose, isWorking }: ChatTitleBarProps) {
+export function ChatTitleBar({
+  chatId,
+  onSelectChat,
+  navigateOnSelect,
+  onClose,
+  isWorking,
+}: ChatTitleBarProps) {
   return (
     <div className='flex h-[44px] flex-shrink-0 items-center gap-1 border-[var(--border)] border-b px-4'>
       {/* Edge controls pull out by 9px so their 30px hover pills sit 7px from
@@ -37,6 +49,7 @@ export function ChatTitleBar({ chatId, onSelectChat, onClose, isWorking }: ChatT
         chatId={chatId}
         isNewChat={!chatId}
         onSelectChat={onSelectChat}
+        navigateOnSelect={navigateOnSelect}
         isWorking={isWorking}
       />
       {onClose && (

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -62,6 +62,13 @@ interface MothershipChatProps {
   onInputAnimationEnd?: () => void
   /** Shows the title bar's close (×) control that hides the chat pane. */
   onCloseChat?: () => void
+  /** Forwarded to the title bar's chat switcher. */
+  onSelectChat?: (chatId: string) => void
+  /**
+   * Forwarded to the title bar's chat switcher: when false, selecting a chat
+   * only fires {@link onSelectChat} (docked-chat hosts swap in place).
+   */
+  switcherNavigates?: boolean
   className?: string
 }
 
@@ -213,6 +220,8 @@ export function MothershipChat({
   animateInput = false,
   onInputAnimationEnd,
   onCloseChat,
+  onSelectChat,
+  switcherNavigates,
   className,
 }: MothershipChatProps) {
   const styles = LAYOUT_STYLES[layout]
@@ -309,7 +318,13 @@ export function MothershipChat({
     >
       <div className={cn('flex h-full min-h-0 flex-col', className)}>
         {layout === 'mothership-view' && (
-          <ChatTitleBar chatId={chatId} onClose={onCloseChat} isWorking={isStreamActive} />
+          <ChatTitleBar
+            chatId={chatId}
+            onClose={onCloseChat}
+            onSelectChat={onSelectChat}
+            navigateOnSelect={switcherNavigates}
+            isWorking={isStreamActive}
+          />
         )}
         <div className='relative flex min-h-0 flex-1 flex-col'>
           <div ref={setScrollContainer} className={cn(styles.scrollContainer, SCROLLBAR_AUTOHIDE)}>

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -162,12 +162,17 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
 
   // The tab strip is user-owned per workspace (browser-tab semantics): chats
   // merge their artifacts in additively; only the user closes/reorders tabs.
+  // Workflows never tab — they own the stage as the full editor, so any
+  // legacy persisted workflow tabs are filtered out on read.
   const workspaceTabs = useMothershipTabsStore((s) => s.byWorkspace[workspaceId])
   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 storeTabs = workspaceTabs?.tabs
+  const storeTabs = useMemo(
+    () => workspaceTabs?.tabs.filter((tab) => tab.type !== 'workflow'),
+    [workspaceTabs]
+  )
   const storeActiveTabId = workspaceTabs?.activeTabId ?? null
 
   function handleResourceEvent() {
@@ -176,6 +181,22 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     }
   }
 
+  /**
+   * The chat the panel is following, readable from stream callbacks without
+   * re-creating the options object (resolvedChatId lands a render later).
+   */
+  const activeChatIdRef = useRef<string | undefined>(chatId)
+
+  /** Swaps the stage to a workflow's full editor, carrying the chat along. */
+  const openWorkflowStage = useCallback(
+    (workflowId: string) => {
+      const chatKey = activeChatIdRef.current
+      const chatParam = chatKey ? `?chat=${chatKey}` : ''
+      router.push(`/workspace/${workspaceId}/w/${workflowId}${chatParam}`)
+    },
+    [router, workspaceId]
+  )
+
   const {
     messages,
     isSending,
@@ -204,8 +225,13 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
       onResourceEvent: handleResourceEvent,
       // The panel follows the conversation: any resource the agent touches —
       // even one that's already an open tab — surfaces and takes focus, so
-      // "switch to X" in chat actually switches the strip.
+      // "switch to X" in chat actually switches the strip. Workflows are the
+      // exception: they never tab, the stage swaps to their full editor.
       onResourceTouched: (resource) => {
+        if (resource.type === 'workflow') {
+          openWorkflowStage(resource.id)
+          return
+        }
         openTabs(workspaceId, [resource], { focusId: resource.id })
       },
       initialActiveResourceId: initialResourceId,
@@ -247,7 +273,10 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
       mergedKeysRef.current = new Set()
     }
     const fresh = resources.filter(
-      (r) => !isEphemeralResource(r) && !mergedKeysRef.current.has(`${r.type}:${r.id}`)
+      (r) =>
+        !isEphemeralResource(r) &&
+        r.type !== 'workflow' &&
+        !mergedKeysRef.current.has(`${r.type}:${r.id}`)
     )
     if (fresh.length === 0) return
     for (const r of fresh) mergedKeysRef.current.add(`${r.type}:${r.id}`)
@@ -411,9 +440,15 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
   /**
    * Manually attaching a resource opens its tab (session) AND records it on
    * the chat (provenance + agent context) via {@link addResource}, which keeps
-   * the existing persistence machinery.
+   * the existing persistence machinery. Workflows never tab — they swap the
+   * stage to their full editor (still recorded on the chat first).
    */
   function openResourceTab(resource: MothershipResource) {
+    if (resource.type === 'workflow') {
+      addResource(resource)
+      openWorkflowStage(resource.id)
+      return
+    }
     openTabs(workspaceId, [resource], { focusId: resource.id })
     addResource(resource)
     handleResourceEvent()
@@ -494,6 +529,7 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
   // it (not just the prop) lets an inline-opened chat render its skeleton + view
   // before its history finishes loading.
   const activeChatId = resolvedChatId ?? chatId
+  activeChatIdRef.current = activeChatId
   const { isPending: isActiveChatHistoryPending } = useMothershipChatHistory(activeChatId)
   const hasMessages = messages.length > 0
   const showChatSkeleton = Boolean(activeChatId) && !hasMessages && isActiveChatHistoryPending

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

@@ -0,0 +1,111 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { MothershipChat } from '@/app/workspace/[workspaceId]/home/components'
+import { getMothershipUseChatOptions, useChat } from '@/app/workspace/[workspaceId]/home/hooks'
+import type {
+  FileAttachmentForApi,
+  MothershipResource,
+} from '@/app/workspace/[workspaceId]/home/types'
+import { useMothershipChatHistory } from '@/hooks/queries/mothership-chats'
+import type { ChatContext } from '@/stores/panel'
+
+interface DockedChatProps {
+  workspaceId: string
+  /** The workflow occupying the stage — its own chips never navigate. */
+  workflowId: string
+  /** Undefined renders the new-chat empty state; first send creates the chat. */
+  chatId?: string
+  onClose: () => void
+  /** Swap the docked pane to another chat (host remounts with the new id). */
+  onSelectChat: (chatId: string) => void
+  /** A new chat resolved its server id — host reflects it into the URL. */
+  onChatResolved: (chatId: string) => void
+}
+
+/**
+ * The Mothership chat docked beside the workflow editor. The editor owns the
+ * stage: workflow chips for other workflows swap the stage to their editor,
+ * and any other resource chip swaps back to the tabbed chat view with that
+ * tab focused. The conversation itself is the same chat that the chat view
+ * hosts — same history, same drafts.
+ */
+export function DockedChat({
+  workspaceId,
+  workflowId,
+  chatId,
+  onClose,
+  onSelectChat,
+  onChatResolved,
+}: DockedChatProps) {
+  const router = useRouter()
+  const {
+    messages,
+    isSending,
+    isReconnecting,
+    sendMessage,
+    stopGeneration,
+    resolvedChatId,
+    messageQueue,
+    removeFromQueue,
+    sendNow,
+    editQueuedMessage,
+    cancelQueueEdit,
+    editingQueuedId,
+    dispatchingHeadId,
+  } = useChat(workspaceId, chatId, getMothershipUseChatOptions({}))
+
+  useEffect(() => {
+    if (resolvedChatId && resolvedChatId !== chatId) onChatResolved(resolvedChatId)
+  }, [resolvedChatId, chatId, onChatResolved])
+
+  const activeChatId = resolvedChatId ?? chatId
+  const { isPending: isHistoryPending } = useMothershipChatHistory(activeChatId)
+  const showSkeleton = Boolean(activeChatId) && messages.length === 0 && isHistoryPending
+
+  const handleSubmit = (
+    text: string,
+    fileAttachments?: FileAttachmentForApi[],
+    contexts?: ChatContext[]
+  ) => {
+    const trimmed = text.trim()
+    if (!trimmed && !(fileAttachments && fileAttachments.length > 0)) return
+    sendMessage(trimmed || 'Analyze the attached file(s).', fileAttachments, contexts)
+  }
+
+  const handleWorkspaceResourceSelect = (resource: MothershipResource) => {
+    if (resource.type === 'workflow') {
+      if (resource.id === workflowId) return
+      const chatParam = activeChatId ? `?chat=${activeChatId}` : ''
+      router.push(`/workspace/${workspaceId}/w/${resource.id}${chatParam}`)
+      return
+    }
+    if (!activeChatId) return
+    router.push(`/workspace/${workspaceId}/chat/${activeChatId}?resource=${resource.id}`)
+  }
+
+  return (
+    <MothershipChat
+      messages={messages}
+      isSending={isSending}
+      isReconnecting={isReconnecting}
+      isLoading={showSkeleton}
+      onSubmit={handleSubmit}
+      onStopGeneration={() => void stopGeneration().catch(() => {})}
+      messageQueue={messageQueue}
+      editingQueuedId={editingQueuedId}
+      dispatchingHeadId={dispatchingHeadId}
+      onRemoveQueuedMessage={removeFromQueue}
+      onSendQueuedMessage={sendNow}
+      onEditQueuedMessage={editQueuedMessage}
+      onCancelQueueEdit={cancelQueueEdit}
+      chatId={activeChatId}
+      onWorkspaceResourceSelect={handleWorkspaceResourceSelect}
+      draftScopeKey={`${workspaceId}:${activeChatId ?? 'new'}`}
+      onCloseChat={onClose}
+      onSelectChat={onSelectChat}
+      switcherNavigates={false}
+    />
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/docked-chat/index.ts

@@ -0,0 +1,2 @@
+export { DockedChat } from './docked-chat'
+export { WorkflowWithChat } from './workflow-with-chat'