feat(mothership): add dev-gated Plan mode across chat surfaces

Author: Sg312

.github/workflows/ci.yml

@@ -221,7 +221,9 @@ jobs:
           file: ${{ matrix.dockerfile }}
           platforms: linux/amd64
           tags: ${{ steps.login-ecr.outputs.registry }}/${{ steps.ecr-repo.outputs.name }}:${{ github.sha }}-dev
-          build-args: SIM_SEARCH_LIVE_DEFAULT=true
+          build-args: |
+            SIM_SEARCH_LIVE_DEFAULT=true
+            MSHIP_PLAN_MODE_DEFAULT=true
           max-cache-size-mb: ${{ matrix.cache_mb }}
 
   # Build and upload tasks alongside tests and images. The unpromoted version

apps/sim/app/o/[organizationId]/home/components/composer/composer.test.tsx

@@ -9,6 +9,7 @@ import { useMothershipEffortStore } from '@/stores/mothership-effort/store'
 
 const mocks = vi.hoisted(() => ({
   live: false,
+  plan: false,
   speech: vi.fn<typeof useSpeechToText>(),
   toggleListening: vi.fn(),
   resetTranscript: vi.fn(),
@@ -35,6 +36,9 @@ const mocks = vi.hoisted(() => ({
 }))
 
 vi.mock('@/lib/core/config/deployment-shape', () => ({
+  useDeploymentShape: () => ({
+    features: { liveEnterpriseSearch: mocks.live, planMode: mocks.plan },
+  }),
   getDeploymentShape: () => ({ features: { liveEnterpriseSearch: mocks.live } }),
 }))
 vi.mock('@/hooks/queries/workspace', () => ({
@@ -87,6 +91,7 @@ let container: HTMLDivElement
 let queryClient: QueryClient
 
 beforeEach(() => {
+  mocks.plan = false
   mocks.live = false
   vi.clearAllMocks()
   mocks.workspaces = [
@@ -852,3 +857,25 @@ it('offers only Auto and Max for live Search, with Auto sending the Fast preset'
   await act(async () => options[0].click())
   expect(onChange).toHaveBeenCalledWith('fast')
 })
+
+it.each([false, true])('exposes Plan only when enabled (%s)', async (enabled) => {
+  mocks.plan = enabled
+  const onModeChange = vi.fn()
+  await render(true, 'Understand triage', 'agent', {
+    isSending: false,
+    showModeSelector: true,
+    onModeChange,
+  })
+  const mode = container.querySelector<HTMLButtonElement>('[aria-label="Conversation mode"]')!
+  await act(async () =>
+    mode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+  )
+  const plan = [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')].find(
+    (item) => item.textContent === 'Plan'
+  )
+  expect(Boolean(plan)).toBe(enabled)
+  if (plan) {
+    await act(async () => plan.click())
+    expect(onModeChange).toHaveBeenCalledExactlyOnceWith('plan')
+  }
+})

apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx

@@ -5,6 +5,7 @@ import { Chip, ChipDropdown, ComposerActionButton, cn, Tooltip, toast } from '@s
 import { ArrowUp, Paperclip, Plus, Search, Slash, StopFilled } from '@sim/emcn/icons'
 import { escapeRegExp } from '@sim/utils/string'
 import { useQueries } from '@tanstack/react-query'
+import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import {
   ASSISTANT_IMAGE_ACCEPT_ATTRIBUTE,
   isAssistantImageType,
@@ -40,6 +41,7 @@ const CONVERSATION_MODES = [
 ] as const
 
 interface ComposerProps {
+  searchEnabled?: boolean
   requestMode?: ChatRequestMode
   assistantSearchLevel?: SearchLevel
   onAssistantSearchLevelChange?: (level: SearchLevel) => void
@@ -62,6 +64,7 @@ interface ComposerProps {
  * carries only the controls that are wired for the organization.
  */
 export function Composer({
+  searchEnabled = true,
   requestMode = 'assistant',
   onModeChange,
   assistantSearchLevel = 'adaptive',
@@ -76,6 +79,8 @@ export function Composer({
   restoredContexts,
   onStop,
 }: ComposerProps) {
+  const planEnabled = useDeploymentShape().features.planMode === true
+  const modes = CONVERSATION_MODES.filter((mode) => searchEnabled || mode.value !== 'assistant')
   const imagesOnly = requestMode === 'assistant'
   const [modeSelectorOpen, setModeSelectorOpen] = useState(false)
   const { organization } = useOrganizationContext()
@@ -200,15 +205,21 @@ export function Composer({
                 iconOnly={imagesOnly}
                 leftIcon={imagesOnly ? Search : undefined}
                 aria-label='Conversation mode'
-                options={CONVERSATION_MODES}
+                options={planEnabled ? [...modes, { value: 'plan', label: 'Plan' }] : modes}
                 value={requestMode}
                 disabled={!onModeChange}
                 align='start'
                 matchTriggerWidth={false}
                 showSelectedCheck={false}
                 onOpenChange={setModeSelectorOpen}
                 onChange={(mode) => {
-                  if ((mode !== 'assistant' && mode !== 'agent') || mode === requestMode) return
+                  if (
+                    (mode !== 'assistant' &&
+                      mode !== 'agent' &&
+                      !(planEnabled && mode === 'plan')) ||
+                    mode === requestMode
+                  )
+                    return
                   if (
                     mode === 'assistant' &&
                     (editor.getActiveContexts().length > 0 ||

apps/sim/app/o/[organizationId]/home/organization-home.test.tsx

@@ -10,6 +10,7 @@ import { useOrganizationChatModeStore } from '@/stores/organization-chat-mode/st
 
 const mocks = vi.hoisted(() => ({
   live: false,
+  plan: false,
   context: vi.fn(),
   session: vi.fn(),
   push: vi.fn(),
@@ -30,6 +31,9 @@ const mocks = vi.hoisted(() => ({
   activeResource: null as string | null,
 }))
 vi.mock('@/lib/core/config/deployment-shape', () => ({
+  useDeploymentShape: () => ({
+    features: { liveEnterpriseSearch: mocks.live, planMode: mocks.plan },
+  }),
   getDeploymentShape: () => ({ features: { liveEnterpriseSearch: mocks.live } }),
 }))
 vi.mock('@/blocks/integration-matcher', () => ({ mentionifyIntegrations: (text: string) => text }))
@@ -86,6 +90,7 @@ import { OrganizationHome } from '@/app/o/[organizationId]/home/organization-hom
 let root: Root
 let container: HTMLDivElement
 beforeEach(() => {
+  mocks.plan = false
   mocks.live = false
   vi.clearAllMocks()
   mocks.activeResource = null

apps/sim/app/o/[organizationId]/home/organization-home.tsx

@@ -9,7 +9,7 @@ import { requestJson } from '@/lib/api/client/request'
 import type { WorkspaceSearchFilters } from '@/lib/api/contracts/knowledge'
 import { getWorkspaceHostContextContract } from '@/lib/api/contracts/workspaces'
 import { useSession } from '@/lib/auth/auth-client'
-import { getDeploymentShape } from '@/lib/core/config/deployment-shape'
+import { getDeploymentShape, useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import { MothershipHandoffStorage } from '@/lib/core/utils/browser-storage'
 import { getMothershipAttachmentPreviewUrl } from '@/lib/mothership/chat/attachment-preview'
 import { createSearchResource } from '@/lib/mothership/resources/search'
@@ -90,27 +90,31 @@ function OrganizationHomeContent({
   )
   const rememberMode = useOrganizationChatModeStore((state) => state.setMode)
   const [selectedMode, setSelectedMode] = useState<ChatRequestMode | null>(null)
+  const planEnabled = useDeploymentShape().features.planMode === true
   const requestMode =
     selectedMode ??
     (urlSearchLevel && searchAccess.memberScoped && !chatId ? 'assistant' : undefined) ??
     savedMode ??
     (!canBuild || !mothershipAvailable
       ? 'assistant'
-      : rememberedMode === 'assistant' && searchAccess.memberScoped
-        ? 'assistant'
-        : 'agent')
+      : rememberedMode === 'plan' && planEnabled
+        ? 'plan'
+        : rememberedMode === 'assistant' && searchAccess.memberScoped
+          ? 'assistant'
+          : 'agent')
   const [draft, setDraft] = useState('')
   const [restoredContexts, setRestoredContexts] = useState<ChatContext[]>([])
   const controller = useResourcePanelController()
   const queryClient = useQueryClient()
   const chat = useChat({ organizationId: organization.id }, chatId, {
     requestMode,
-    projectsDesktopTabs: requestMode === 'agent',
+    projectsDesktopTabs: requestMode !== 'assistant',
     onResourceEvent: controller.onResourceEvent,
     activeResourceState: controller.activeResourceState,
   })
   const hasChat = Boolean(chatId || chat.messages.length)
-  const canSelectMode = !hasChat && mothershipAvailable && canBuild && searchAccess.memberScoped
+  const canSelectMode =
+    !hasChat && mothershipAvailable && canBuild && (searchAccess.memberScoped || planEnabled)
   const liveSearch = getDeploymentShape().features.liveEnterpriseSearch === true
   const assistantSearchLevel = resolveSearchLevel(
     urlSearchLevel ?? rememberedSearchLevel,
@@ -229,9 +233,9 @@ function OrganizationHomeContent({
     contexts?: ChatContext[],
     assistantSearch?: WorkspaceSearchFilters
   ) => {
-    if (requestMode === 'agent' && !canBuild) return
+    if (requestMode !== 'assistant' && !canBuild) return
     setSelectedMode(requestMode)
-    if (requestMode === 'agent') panel.prepareResourceViewForAgentTurn()
+    if (requestMode !== 'assistant') panel.prepareResourceViewForAgentTurn()
     void sendMessage(message, fileAttachments, contexts, {
       requestMode,
       ...(requestMode === 'assistant' ? { assistantSearchLevel } : {}),
@@ -266,7 +270,7 @@ function OrganizationHomeContent({
   }
 
   const composer =
-    requestMode === 'agent' && !canBuild ? (
+    requestMode !== 'assistant' && !canBuild ? (
       <div className='px-4 py-3 text-[var(--text-muted)] text-sm'>
         Build requires permission to create workspaces.{' '}
         {searchAccess.memberScoped && (
@@ -278,6 +282,7 @@ function OrganizationHomeContent({
     ) : (
       <Composer
         requestMode={requestMode}
+        searchEnabled={searchAccess.memberScoped}
         assistantSearchLevel={assistantSearchLevel}
         onAssistantSearchLevelChange={changeAssistantSearchLevel}
         showModeSelector={canSelectMode}
@@ -341,9 +346,9 @@ function OrganizationHomeContent({
           userId={session?.user?.id}
           chatId={chat.resolvedChatId}
           composer={composer}
-          onWorkspaceResourceSelect={requestMode === 'agent' ? selectResource : undefined}
+          onWorkspaceResourceSelect={requestMode !== 'assistant' ? selectResource : undefined}
           initialScrollBlocked={
-            (requestMode === 'agent' || liveSearch) &&
+            (requestMode !== 'assistant' || liveSearch) &&
             chat.resources.length > 0 &&
             panel.isResourceCollapsed
           }
@@ -355,7 +360,9 @@ function OrganizationHomeContent({
             <h1 className='mb-7 max-w-chat text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
               {requestMode === 'assistant'
                 ? `Search ${organization.name}`
-                : `What should we get done${firstName ? `, ${firstName}` : ''}?`}
+                : requestMode === 'plan'
+                  ? `What should we understand and plan${firstName ? `, ${firstName}` : ''}?`
+                  : `What should we get done${firstName ? `, ${firstName}` : ''}?`}
             </h1>
             <div className='relative w-full max-w-chat'>
               {composer}
@@ -378,7 +385,7 @@ function OrganizationHomeContent({
   )
   return (
     <ChatResourcePanel
-      allowBuildControls={requestMode === 'agent' && canBuild}
+      allowBuildControls={requestMode !== 'assistant' && canBuild}
       organizationId={organization.id}
       chat={chat}
       panel={panel}

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

@@ -431,7 +431,7 @@ interface ChatContentProps {
   content: string
   messageId?: string
   imageRequestId?: string
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
   isStreaming?: boolean
   /** Transcript-derived answers for this message's question card (renders the recap). */
   questionAnswers?: string[]

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -1758,7 +1758,7 @@ function recoverTrailingBareOptions(segments: ContentSegment[]): void {
 
 interface SpecialTagsProps {
   segment: Exclude<ContentSegment, { type: 'text' }>
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
   /** Stable identity for interaction state owned by this message/tag. */
   interactionId?: string
   /** Transcript-derived answers for this message's question card (renders the recap). */
@@ -2060,7 +2060,7 @@ function getCredentialProviderDisplayName(provider: string): string {
  */
 interface CredentialControlProps {
   data: CredentialItemData
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
   controlId?: string
   embedded?: boolean
   divided?: boolean
@@ -2723,7 +2723,7 @@ const CREDENTIAL_CARD_TYPES: ReadonlySet<CredentialTagType> = new Set([
 function isCredentialCardItemVisible(
   item: CredentialItemData,
   canEdit: boolean,
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
 ): boolean {
   if (requestMode === 'assistant')
     return (
@@ -2743,7 +2743,7 @@ function isCredentialCardItemVisible(
 export function credentialTagHasVisibleCard(
   data: CredentialTagData,
   canEdit: boolean,
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
 ): boolean {
   return (
     data.length > 0 &&
@@ -2873,7 +2873,7 @@ function CredentialInputCard({
   onContinue,
 }: {
   data: CredentialTagData
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
   interactionId?: string
   submitted?: CredentialSubmissionPayload
   abandoned?: boolean
@@ -3194,7 +3194,7 @@ function CredentialDisplayContent({
   onContinue,
 }: {
   data: CredentialTagData
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
   interactionId?: string
   submitted?: CredentialSubmissionPayload
   abandoned?: boolean

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -957,7 +957,7 @@ interface MessageContentProps {
   fallbackContent: string
   messageId?: string
   imageRequestId?: string
-  requestMode?: 'agent' | 'assistant'
+  requestMode?: 'agent' | 'assistant' | 'plan'
   isStreaming: boolean
   /**
    * True for the last message in the transcript. The last turn keeps a

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

@@ -10,10 +10,11 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Chip, cn, Tooltip, toast } from '@sim/emcn'
+import { Chip, ChipDropdown, cn, Tooltip, toast } from '@sim/emcn'
 import { Paperclip, Plus, Slash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
+import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import { getMothershipAttachmentPreviewUrl } from '@/lib/mothership/chat/attachment-preview'
 import { MOTHERSHIP_ADD_CONTEXT_EVENT } from '@/lib/mothership/events'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/mothership/resource-types'
@@ -50,6 +51,8 @@ export type { FileAttachmentForApi } from '@/app/workspace/[workspaceId]/home/ty
 const logger = createLogger('UserInput')
 
 interface UserInputProps {
+  requestMode?: 'agent' | 'plan'
+  onModeChange?: (mode: 'agent' | 'plan') => void
   defaultValue?: string
   draftScopeKey?: string
   onSubmit: (
@@ -81,6 +84,8 @@ export interface UserInputHandle {
  */
 const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserInput(
   {
+    requestMode = 'agent',
+    onModeChange,
     defaultValue = '',
     draftScopeKey,
     onSubmit,
@@ -92,6 +97,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   },
   ref
 ) {
+  const planEnabled = useDeploymentShape().features.planMode === true
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const { navigateToSettings } = useSettingsNavigation()
   const { userId, onContextAdd, onContextRemove } = useChatSurface()
@@ -579,6 +585,19 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
       <InputToolbar
         leadingControls={
           <>
+            {planEnabled && onModeChange && (
+              <ChipDropdown
+                aria-label='Conversation mode'
+                value={requestMode}
+                options={[
+                  { value: 'agent', label: 'Build' },
+                  { value: 'plan', label: 'Plan' },
+                ]}
+                onChange={(mode) => {
+                  if (mode === 'agent' || mode === 'plan') onModeChange(mode)
+                }}
+              />
+            )}
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Chip