improvement(home): keep the composer mode in the URL and drop the mode store

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.test.tsx

@@ -5,10 +5,23 @@ import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-const { mockCaptureEvent } = vi.hoisted(() => ({
+const { mockCaptureEvent, modeState } = vi.hoisted(() => ({
   mockCaptureEvent: vi.fn(),
+  /** The URL `mode` param as the nuqs mock serves it; `set` is the live setter once mounted. */
+  modeState: { initial: 'build', set: (_next: string) => {} },
 }))
 
+vi.mock('nuqs', async () => {
+  const { useState } = await import('react')
+  return {
+    useQueryState: () => {
+      const [mode, setMode] = useState(modeState.initial)
+      modeState.set = setMode
+      return [mode, setMode]
+    },
+  }
+})
+
 vi.mock('next/navigation', () => ({
   useParams: () => ({ workspaceId: 'workspace-1' }),
 }))
@@ -74,7 +87,6 @@ vi.mock('@/app/workspace/[workspaceId]/components/connect-oauth-modal', () => ({
 }))
 
 import { SuggestedActions } from '@/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions'
-import { useMothershipModeStore } from '@/stores/mothership-mode/store'
 
 let root: Root | null = null
 let container: HTMLDivElement | null = null
@@ -101,7 +113,7 @@ function rows(): HTMLButtonElement[] {
 beforeEach(() => {
   onSelectPrompt.mockClear()
   mockCaptureEvent.mockClear()
-  useMothershipModeStore.getState().reset()
+  modeState.initial = 'build'
 })
 
 afterEach(() => {
@@ -122,7 +134,7 @@ describe('SuggestedActions', () => {
   it('shows every source in Search mode instead of the sampled suggestions', () => {
     mount()
 
-    act(() => useMothershipModeStore.getState().setMode('search'))
+    act(() => modeState.set('search'))
 
     expect(heading()).toBe('Sources')
     expect(document.querySelector('[data-testid="search-sources"]')).not.toBeNull()
@@ -132,7 +144,7 @@ describe('SuggestedActions', () => {
   it('shows the sources in Assistant mode, which answers from them', () => {
     mount()
 
-    act(() => useMothershipModeStore.getState().setMode('assistant'))
+    act(() => modeState.set('assistant'))
 
     expect(heading()).toBe('Sources')
     expect(document.querySelector('[data-testid="search-sources"]')).not.toBeNull()

apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx

@@ -21,6 +21,8 @@ import type {
   OAuthConnectTarget,
 } from '@/app/workspace/[workspaceId]/home/components/suggested-actions/types'
 import { weightedSample } from '@/app/workspace/[workspaceId]/home/components/suggested-actions/weighted-sample'
+import { useMothershipMode } from '@/app/workspace/[workspaceId]/home/hooks/use-mothership-mode'
+import type { MothershipMode } from '@/app/workspace/[workspaceId]/home/search-params'
 import { BrandIcon } from '@/blocks/brand-icon'
 import { getAllBlockMeta } from '@/blocks/registry'
 import type { ModuleTag } from '@/blocks/types'
@@ -29,7 +31,6 @@ import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useOAuthConnections } from '@/hooks/queries/oauth/oauth-connections'
 import { useTablesList } from '@/hooks/queries/tables'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
-import { type MothershipMode, useMothershipModeStore } from '@/stores/mothership-mode/store'
 
 /** Lookup integration slug by OAuth service display name (case-insensitive). */
 const SLUG_BY_LOWER_NAME: ReadonlyMap<string, string> = new Map(
@@ -245,7 +246,7 @@ interface SuggestedActionsProps {
 export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const posthog = usePostHog()
-  const mode = useMothershipModeStore((state) => state.mode)
+  const [mode] = useMothershipMode()
   const { integrationAvailability } = usePermissionConfig()
 
   const { data: credentials = EMPTY_CREDENTIALS } = useWorkspaceCredentials({

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mode-switcher/mode-switcher.test.tsx

@@ -5,24 +5,35 @@ import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-const { mockCaptureEvent, mockSetSearchQuery, mockSetSearchFilters } = vi.hoisted(() => ({
-  mockCaptureEvent: vi.fn(),
-  mockSetSearchQuery: vi.fn(),
-  mockSetSearchFilters: vi.fn(),
-}))
+const { mockCaptureEvent, mockSetSearchQuery, mockSetSearchFilters, modeState } = vi.hoisted(
+  () => ({
+    mockCaptureEvent: vi.fn(),
+    mockSetSearchQuery: vi.fn(),
+    mockSetSearchFilters: vi.fn(),
+    /** The URL `mode` param as the nuqs mock serves it; `set` is the live setter once mounted. */
+    modeState: { initial: 'build', set: (_next: string) => {} },
+  })
+)
 
 vi.mock('next/navigation', () => ({
   useParams: () => ({ workspaceId: 'workspace-1' }),
 }))
-vi.mock('nuqs', () => ({
-  useQueryState: () => [null, mockSetSearchQuery],
-  useQueryStates: () => [{}, mockSetSearchFilters],
-}))
+vi.mock('nuqs', async () => {
+  const { useState } = await import('react')
+  return {
+    useQueryState: (key: string) => {
+      const [mode, setMode] = useState(modeState.initial)
+      if (key !== 'mode') return [null, mockSetSearchQuery]
+      modeState.set = setMode
+      return [mode, setMode]
+    },
+    useQueryStates: () => [{}, mockSetSearchFilters],
+  }
+})
 vi.mock('posthog-js/react', () => ({ usePostHog: () => null }))
 vi.mock('@/lib/posthog/client', () => ({ captureEvent: mockCaptureEvent }))
 
 import { ModeSwitcher } from '@/app/workspace/[workspaceId]/home/components/user-input/components/mode-switcher/mode-switcher'
-import { useMothershipModeStore } from '@/stores/mothership-mode/store'
 
 let root: Root | null = null
 let container: HTMLDivElement | null = null
@@ -52,9 +63,17 @@ function items(): HTMLElement[] {
   return Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]'))
 }
 
+function select(index: number) {
+  act(() => {
+    items()[index].dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
+  })
+}
+
 beforeEach(() => {
   mockCaptureEvent.mockClear()
-  useMothershipModeStore.getState().reset()
+  mockSetSearchQuery.mockClear()
+  mockSetSearchFilters.mockClear()
+  modeState.initial = 'build'
 })
 
 afterEach(() => {
@@ -89,15 +108,11 @@ describe('ModeSwitcher', () => {
     expect(rows[2].querySelector('svg')).toBeNull()
   })
 
-  it('switches the shared mode and reports the change', () => {
+  it('writes the chosen mode to the URL and reports the change', () => {
     mount()
     openMenu()
+    select(1)
 
-    act(() => {
-      items()[1].dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
-    })
-
-    expect(useMothershipModeStore.getState().mode).toBe('search')
     expect(trigger().textContent).toBe('Search')
     expect(mockCaptureEvent).toHaveBeenCalledWith(null, 'chat_mode_changed', {
       workspace_id: 'workspace-1',
@@ -106,16 +121,21 @@ describe('ModeSwitcher', () => {
     expect(mockSetSearchQuery).not.toHaveBeenCalled()
   })
 
+  it('reads the mode from the URL on mount', () => {
+    modeState.initial = 'assistant'
+    mount()
+
+    expect(trigger().textContent).toBe('Assistant')
+    expect(trigger().getAttribute('aria-label')).toBe('Mode: Assistant')
+  })
+
   it('drops the search query from the URL when leaving Search', () => {
-    useMothershipModeStore.getState().setMode('search')
+    modeState.initial = 'search'
     mount()
     openMenu()
+    select(0)
 
-    act(() => {
-      items()[0].dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
-    })
-
-    expect(useMothershipModeStore.getState().mode).toBe('build')
+    expect(trigger().textContent).toBe('Build')
     expect(mockSetSearchQuery).toHaveBeenCalledWith(null, { history: 'replace', scroll: false })
     expect(mockSetSearchFilters).toHaveBeenCalledWith(
       { source: null, updated: null },
@@ -126,12 +146,9 @@ describe('ModeSwitcher', () => {
   it('does not report re-selecting the active mode', () => {
     mount()
     openMenu()
+    select(0)
 
-    act(() => {
-      items()[0].dispatchEvent(new MouseEvent('click', { bubbles: true, button: 0 }))
-    })
-
-    expect(useMothershipModeStore.getState().mode).toBe('build')
+    expect(trigger().textContent).toBe('Build')
     expect(mockCaptureEvent).not.toHaveBeenCalled()
   })
 })

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/mode-switcher/mode-switcher.tsx

@@ -14,17 +14,15 @@ import { useParams } from 'next/navigation'
 import { useQueryState, useQueryStates } from 'nuqs'
 import { usePostHog } from 'posthog-js/react'
 import { captureEvent } from '@/lib/posthog/client'
+import { useMothershipMode } from '@/app/workspace/[workspaceId]/home/hooks/use-mothership-mode'
 import {
   CLEARED_SEARCH_FILTERS,
+  MOTHERSHIP_MODES,
+  type MothershipMode,
   resourceUrlKeys,
   searchFilterParsers,
   searchQueryParam,
 } from '@/app/workspace/[workspaceId]/home/search-params'
-import {
-  MOTHERSHIP_MODES,
-  type MothershipMode,
-  useMothershipModeStore,
-} from '@/stores/mothership-mode/store'
 
 const MODE_LABELS: Record<MothershipMode, string> = {
   build: 'Build',
@@ -42,16 +40,15 @@ const MODE_LABELS: Record<MothershipMode, string> = {
 export const ModeSwitcher = memo(function ModeSwitcher() {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const posthog = usePostHog()
-  const mode = useMothershipModeStore((state) => state.mode)
-  const setMode = useMothershipModeStore((state) => state.setMode)
+  const [mode, setMode] = useMothershipMode()
 
   const [, setSearchQueryParam] = useQueryState(searchQueryParam.key, searchQueryParam.parser)
   const [, setSearchFilters] = useQueryStates(searchFilterParsers, resourceUrlKeys)
 
   /** Leaving Search drops the query from the URL, so a clean URL always means no search is showing. */
   const handleSelect = (next: MothershipMode) => {
     if (next === mode) return
-    setMode(next)
+    void setMode(next)
     if (next !== 'search') {
       void setSearchQueryParam(null, { history: 'replace', scroll: false })
       void setSearchFilters(CLEARED_SEARCH_FILTERS, { history: 'replace', scroll: false })

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

@@ -49,13 +49,15 @@ import { persistImportedWorkflow } from '@/lib/workflows/operations/import-expor
 import { KnowledgeSearchResults } from '@/app/workspace/[workspaceId]/home/components/knowledge-search-results'
 import { RESOURCE_HEADER_CLASSES } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
 import { SuggestedActions } from '@/app/workspace/[workspaceId]/home/components/suggested-actions'
+import { useMothershipMode } from '@/app/workspace/[workspaceId]/home/hooks/use-mothership-mode'
 import { resolveWorkspaceResourceRef } from '@/app/workspace/[workspaceId]/home/resolve-resource-ref'
 import {
   resolveResourceEventPresentation,
   resolveResourceSelectionUpdate,
 } from '@/app/workspace/[workspaceId]/home/resource-view-policy'
 import {
   CLEARED_SEARCH_FILTERS,
+  type MothershipMode,
   resourceParam,
   resourceUrlKeys,
   searchFilterParsers,
@@ -67,7 +69,6 @@ import { useMarkMothershipChatRead } from '@/hooks/queries/mothership-chats'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { getWorkspaceFilesQueryOptions, useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useOAuthReturnRouter } from '@/hooks/use-oauth-return'
-import { useMothershipModeStore } from '@/stores/mothership-mode/store'
 import type { ChatContext } from '@/stores/panel'
 import {
   ChatSurfaceProvider,
@@ -185,16 +186,15 @@ export function Home({ chatId, userName, userId }: HomeProps) {
     },
     [setSearchQueryParam, setSearchFilters]
   )
+  const [composerMode, setComposerMode] = useMothershipMode()
   /**
-   * A URL that carries a query opens in Search mode with the query in the box,
-   * whether it arrived by link or by navigating back to it; the composer
-   * follows the live query the same way (below), so the box and the results
-   * never show two different queries.
+   * A link that carries a query but no mode opens in Search with the query in
+   * the box; the composer follows the live query the same way (below), so the
+   * box and the results never show two different queries.
    */
   useEffect(() => {
-    if (searchQuery) useMothershipModeStore.getState().setMode('search')
-  }, [searchQuery])
-  const composerMode = useMothershipModeStore((state) => state.mode)
+    if (searchQuery && composerMode === 'build') void setComposerMode('search')
+  }, [searchQuery, composerMode, setComposerMode])
   /** The bases an Ask turn is grounded in; read through a ref so a list refresh never rebuilds the submit handler. */
   const { data: knowledgeBases = EMPTY_KNOWLEDGE_BASES } = useKnowledgeBasesQuery(workspaceId)
   const knowledgeBasesRef = useRef(knowledgeBases)
@@ -475,7 +475,12 @@ export function Home({ chatId, userName, userId }: HomeProps) {
   }, [workspaceId, getCurrentRequestId, stopGeneration])
 
   const handleSubmit = useCallback(
-    (text: string, fileAttachments?: FileAttachmentForApi[], contexts?: ChatContext[]) => {
+    (
+      text: string,
+      fileAttachments?: FileAttachmentForApi[],
+      contexts?: ChatContext[],
+      modeOverride?: MothershipMode
+    ) => {
       const trimmed = text.trim()
       if (!trimmed && !(fileAttachments && fileAttachments.length > 0)) return
 
@@ -491,7 +496,7 @@ export function Home({ chatId, userName, userId }: HomeProps) {
        * be searched: attachments alone have nothing to search for. Assistant
        * makes the query a turn of the agent grounded in the sources.
        */
-      const mode = useMothershipModeStore.getState().mode
+      const mode = modeOverride ?? composerMode
       const answering = mode === 'assistant'
       if (mode === 'search') {
         if (trimmed) setSearchQuery(trimmed)
@@ -516,27 +521,37 @@ export function Home({ chatId, userName, userId }: HomeProps) {
         answering ? { requestMode: 'ask' } : undefined
       )
     },
-    [workspaceId, chatId, prepareResourceViewForAgentTurn, sendMessage, setSearchQuery]
+    [
+      workspaceId,
+      chatId,
+      composerMode,
+      prepareResourceViewForAgentTurn,
+      sendMessage,
+      setSearchQuery,
+    ]
   )
 
   /** An emptied search box returns to the sources; nothing else reads the cleared query. */
   const clearSearch = useCallback(() => setSearchQuery(''), [setSearchQuery])
 
-  /** Summarize or Answer on a result: switch to Assistant and hand the question to it. */
+  /**
+   * Summarize or Answer on a result: switch to Assistant and hand the question
+   * to it. The submit reads the mode from this render, so it is sent as an
+   * Assistant turn directly rather than waiting for the URL to update.
+   */
   const handleSummarize = (prompt: string) => {
-    useMothershipModeStore.getState().setMode('assistant')
+    void setComposerMode('assistant')
     setSearchQuery('')
-    handleSubmit(prompt)
+    handleSubmit(prompt, undefined, undefined, 'assistant')
   }
   /**
    * A chat that already exists never opens in Search: its transcript is a
    * conversation, and search results never join it. Build and Assistant both
    * carry over, so a follow-up stays grounded in the sources.
    */
   useEffect(() => {
-    const store = useMothershipModeStore.getState()
-    if (chatId && store.mode === 'search') store.setMode('build')
-  }, [chatId])
+    if (chatId && composerMode === 'search') void setComposerMode('build')
+  }, [chatId, composerMode, setComposerMode])
   const showSearchResults = composerMode === 'search' && searchQuery.trim().length > 0
   const searchResults = showSearchResults ? (
     <KnowledgeSearchResults

apps/sim/app/workspace/[workspaceId]/home/hooks/chat-url.ts

@@ -0,0 +1,9 @@
+/**
+ * The URL a new chat is handed off to once the server names it. The current
+ * query string rides along so the composer's URL-backed state, the mode above
+ * all, survives the path swap: the first Assistant message must not bounce the
+ * person back to Build.
+ */
+export function chatUrl(workspaceId: string, chatId: string): string {
+  return `/workspace/${workspaceId}/chat/${chatId}${window.location.search}`
+}

apps/sim/app/workspace/[workspaceId]/home/hooks/index.ts

@@ -5,4 +5,5 @@ export {
   shouldActivateResourceEvent,
   useChat,
 } from './use-chat'
+export { useMothershipMode } from './use-mothership-mode'
 export { useMothershipResize } from './use-mothership-resize'