feat(playground): New chat is the product's org Home plus a project picker; Search matches the org surface

New chat now renders the organization Home from the product, with its Build, Plan and
Search switch, suggestions and org chats. The only addition is the project picker: with
a project picked, a Build message opens that project's chat. The org Home gains three
optional props for this (a per-mode heading and accessory, a before-send hook, and the
existing flag that keeps chat URLs in place); its default behavior is unchanged.

Search renders the organization Search page, as the org surface does. The separate
Assistant page and nav item are removed: the product has no such destination, search is
a mode of Home.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: mzxchandra

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState, useSyncExternalStore } from 'react'
+import { type ReactNode, useCallback, useEffect, useState, useSyncExternalStore } from 'react'
 import { toast } from '@sim/emcn'
 import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
@@ -52,10 +52,26 @@ import { useMothershipDraftsStore } from '@/stores/mothership-drafts/store'
 import { useOrganizationChatModeStore } from '@/stores/organization-chat-mode/store'
 import type { ChatContext } from '@/stores/panel'
 
+/** What a host surface adds to the empty Home for one mode. */
+interface OrganizationHomeLanding {
+  heading?: string
+  /** Rendered above the composer, such as a picker that scopes the next message. */
+  accessory?: ReactNode
+}
+
 interface OrganizationHomeProps {
   userName?: string
   chatId?: string
   requestMode?: ChatRequestMode
+  /** Lets a host surface change the empty Home's heading and add a control, per mode. */
+  landing?: (requestMode: ChatRequestMode) => OrganizationHomeLanding | undefined
+  /**
+   * Called with the first message of a new chat before it is sent here; returning true means
+   * the host sent it elsewhere, so this Home clears the draft and sends nothing.
+   */
+  onBeforeSend?: (message: string, requestMode: ChatRequestMode) => boolean
+  /** False keeps the address bar where it is when the chat gets its id. */
+  syncChatUrl?: boolean
 }
 
 const subscribeToClient = () => () => {}
@@ -82,6 +98,9 @@ function OrganizationHomeContent({
   userName,
   chatId,
   requestMode: savedMode,
+  landing,
+  onBeforeSend,
+  syncChatUrl,
 }: OrganizationHomeProps) {
   const { organization, searchAccess, canBuild, mothershipAvailable } = useOrganizationContext()
   const { data: session } = useSession()
@@ -114,6 +133,7 @@ function OrganizationHomeContent({
       requestMode,
       onResourceEvent: controller.onResourceEvent,
       activeResourceState: controller.activeResourceState,
+      ...(syncChatUrl === false ? { syncChatUrl } : {}),
     })
   )
   const initialDraftKey = `${userId}:organization:${organization.id}:${chatId ?? 'new'}`
@@ -296,6 +316,11 @@ function OrganizationHomeContent({
         path: file.path,
       }))
     if (!message && !attachments.length) return
+    if (!hasChat && message && onBeforeSend?.(message, requestMode)) {
+      useMothershipDraftsStore.getState().clearDraft(draftKey)
+      files.clearAttachedFiles()
+      return
+    }
     useMothershipDraftsStore.getState().clearDraft(draftKey)
     send(message, attachments.length ? attachments : undefined, contexts)
     setRestoredContexts([])
@@ -334,6 +359,7 @@ function OrganizationHomeContent({
       />
     )
 
+  const hostLanding = hasChat ? undefined : landing?.(requestMode)
   const content = (
     <div className='flex h-full min-h-0 min-w-[min(480px,100%)] flex-1 flex-col bg-[var(--bg)]'>
       {hasChat ? (
@@ -399,13 +425,15 @@ function OrganizationHomeContent({
       ) : (
         <OrganizationLanding
           heading={
-            requestMode === 'assistant'
+            hostLanding?.heading ??
+            (requestMode === 'assistant'
               ? `Search ${organization.name}`
               : requestMode === 'plan'
                 ? `What should we understand and plan${firstName ? `, ${firstName}` : ''}?`
-                : `What should we get done${firstName ? `, ${firstName}` : ''}?`
+                : `What should we get done${firstName ? `, ${firstName}` : ''}?`)
           }
         >
+          {hostLanding?.accessory}
           {composer}
           <div className='absolute inset-x-0 top-full'>
             {requestMode === 'agent' ? (

apps/sim/app/playground/org/[[...slug]]/page.tsx

@@ -1,17 +1,36 @@
 import { Suspense } from 'react'
+import { getSession } from '@/lib/auth'
+import { getActiveOrganizationId } from '@/lib/auth/session-response'
+import {
+  getOrganizationSurfaceContext,
+  type OrganizationSurfaceContext,
+  resolveOrganizationLanding,
+} from '@/lib/organizations/surface'
 import { ProtoPage } from '@/app/playground/org/components/proto-page'
 
+/** The organization the home page chats in, resolved the way the app entry picks one. */
+async function resolveHomeOrganization(): Promise<OrganizationSurfaceContext | null> {
+  const session = await getSession()
+  if (!session?.user) return null
+  const organizationId = await resolveOrganizationLanding(
+    session.user.id,
+    getActiveOrganizationId(session)
+  )
+  return organizationId ? getOrganizationSurfaceContext(organizationId, session.user.id) : null
+}
+
 export default async function OrgPrototypePage({
   params,
 }: {
   params: Promise<{ slug?: string[] }>
 }) {
   const { slug } = await params
+  const organization = slug?.length ? null : await resolveHomeOrganization()
   return (
     <Suspense
       fallback={<p className='p-6 text-[var(--text-muted)] text-caption'>Loading prototype…</p>}
     >
-      <ProtoPage slug={slug} />
+      <ProtoPage slug={slug} organization={organization} />
     </Suspense>
   )
 }

apps/sim/app/playground/org/components/new-chat-home.tsx

@@ -16,15 +16,27 @@ import { Check, ChevronDown, Folder, Plus, X } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
 import { useQueryStates } from 'nuqs'
 import { useSession } from '@/lib/auth/auth-client'
+import type { OrganizationSurfaceContext } from '@/lib/organizations/surface'
+import { OrganizationHome } from '@/app/o/[organizationId]/home/organization-home'
+import { OrganizationProvider } from '@/app/o/[organizationId]/providers/organization-provider'
 import { type Project, useProjects } from '@/app/playground/org/lib/project'
 import { protoRoutes } from '@/app/playground/org/lib/routes'
 import { protoParsers } from '@/app/playground/org/lib/search-params'
 import { ChatSurfaceProvider, UserInput } from '@/app/workspace/[workspaceId]/home/components'
 
 const NO_PROJECT = 'none'
 
-/** New chat, Codex-style: pick the project in the heading or on the composer, then ask. */
-export function NewChatHome() {
+interface NewChatHomeProps {
+  /** The organization to chat in; without one, only project chats can start here. */
+  organization: OrganizationSurfaceContext | null
+}
+
+/**
+ * New chat: the organization Home from the product (Build, Plan and Search), plus a project
+ * picker. Build with a project picked opens that project's chat; everything else is the
+ * organization chat exactly as the product runs it.
+ */
+export function NewChatHome({ organization }: NewChatHomeProps) {
   const router = useRouter()
   const { data: session } = useSession()
   const { roots: projects } = useProjects()
@@ -35,6 +47,49 @@ export function NewChatHome() {
   const select = (id: string) => void setParams({ project: id })
   const firstName = session?.user?.name?.split(' ')[0]
 
+  /** Hands a build message to the picked project's chat; false leaves it to the org Home. */
+  const openProjectChat = (message: string): boolean => {
+    if (!selected) return false
+    router.push(
+      selected.isMock
+        ? `${protoRoutes.workspace(selected.id)}?chat=new`
+        : `${protoRoutes.workspace(selected.id)}?chat=new&q=${encodeURIComponent(message)}`
+    )
+    return true
+  }
+
+  if (organization?.mothershipAvailable) {
+    return (
+      <OrganizationProvider context={organization}>
+        <OrganizationHome
+          userName={session?.user?.name ?? undefined}
+          syncChatUrl={false}
+          landing={(mode) =>
+            mode === 'agent'
+              ? {
+                  heading: selected ? `What should we build in ${selected.name}?` : undefined,
+                  accessory: (
+                    <div className='mb-2 flex items-center gap-1'>
+                      <ProjectMenu
+                        projects={projects}
+                        value={selected?.id ?? NO_PROJECT}
+                        onSelect={select}
+                      >
+                        <Chip leftIcon={selected ? Folder : X} rightIcon={ChevronDown}>
+                          {selected ? selected.name : 'No project'}
+                        </Chip>
+                      </ProjectMenu>
+                    </div>
+                  ),
+                }
+              : undefined
+          }
+          onBeforeSend={(message, mode) => mode === 'agent' && openProjectChat(message)}
+        />
+      </OrganizationProvider>
+    )
+  }
+
   return (
     <div className='flex h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[18vh]'>
       <h1 className='mb-8 max-w-chat text-balance text-center font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
@@ -72,15 +127,8 @@ export function NewChatHome() {
             onSubmit={(text) => {
               const message = text.trim()
               if (!message) return
-              if (selected?.isMock) {
-                router.push(`${protoRoutes.workspace(selected.id)}?chat=new`)
-              } else if (selected) {
-                router.push(
-                  `${protoRoutes.workspace(selected.id)}?chat=new&q=${encodeURIComponent(message)}`
-                )
-              } else {
-                toast.success('Org-wide chats open from the sidebar for now')
-              }
+              if (!openProjectChat(message))
+                toast.success('Org-wide chats need an organization with Sim Chat')
             }}
           />
         </ChatSurfaceProvider>

apps/sim/app/playground/org/components/proto-page.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from 'react'
 import { notFound } from 'next/navigation'
+import type { OrganizationSurfaceContext } from '@/lib/organizations/surface'
 import { IssuePage } from '@/app/playground/org/components/issue-page'
 import { LiveChat } from '@/app/playground/org/components/live-chat'
 import { NewChatHome } from '@/app/playground/org/components/new-chat-home'
@@ -13,13 +14,19 @@ import { parseProtoRoute } from '@/app/playground/org/lib/routes'
 import { useOrganizationMothershipChats } from '@/hooks/queries/mothership-chats'
 
 /** Client-side router for the prototype's catch-all and project routes. */
-export function ProtoPage({ slug }: { slug?: string[] }) {
+interface ProtoPageProps {
+  slug?: string[]
+  /** The organization the home page chats in; resolved on the server for the home route only. */
+  organization?: OrganizationSurfaceContext | null
+}
+
+export function ProtoPage({ slug, organization = null }: ProtoPageProps) {
   const route = parseProtoRoute(slug)
   if (!route) notFound()
 
   switch (route.kind) {
     case 'home':
-      return <NewChatHome />
+      return <NewChatHome organization={organization} />
     case 'search':
       return <Placeholder title='Search' body='Org-wide search stays as it is today.' />
     case 'connectors':

apps/sim/app/playground/org/search/page.tsx

@@ -0,0 +1,47 @@
+import { Suspense } from 'react'
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { getActiveOrganizationId } from '@/lib/auth/session-response'
+import {
+  getOrganizationSurfaceContext,
+  resolveOrganizationLanding,
+} from '@/lib/organizations/surface'
+import { buildAuthCrossLink } from '@/app/(auth)/auth-redirect'
+import { OrganizationProvider } from '@/app/o/[organizationId]/providers/organization-provider'
+import { OrganizationSearch } from '@/app/o/[organizationId]/search/search'
+import { protoRoutes } from '@/app/playground/org/lib/routes'
+
+/** Renders the authorized organization search surface inside the playground rail. */
+export default async function SearchPage() {
+  const session = await getSession()
+  if (!session?.user)
+    redirect(buildAuthCrossLink('/login', { callbackUrl: protoRoutes.search, isInviteFlow: false }))
+  /** The session's active organization, else the first the viewer belongs to, as the app entry does. */
+  const organizationId = await resolveOrganizationLanding(
+    session.user.id,
+    getActiveOrganizationId(session)
+  )
+  const context = organizationId
+    ? await getOrganizationSurfaceContext(organizationId, session.user.id)
+    : null
+  if (!context?.searchAccess.memberScoped)
+    return (
+      <div className='flex h-full flex-col items-center justify-center gap-2'>
+        <h1 className='text-[20px] text-[var(--text-primary)]'>Search</h1>
+        <p className='text-[var(--text-muted)] text-small'>
+          {organizationId
+            ? 'Sim Search is not enabled for this organization.'
+            : 'You are not a member of an organization.'}
+        </p>
+      </div>
+    )
+  return (
+    <OrganizationProvider context={context}>
+      <Suspense
+        fallback={<p className='p-6 text-[var(--text-muted)] text-caption'>Loading search…</p>}
+      >
+        <OrganizationSearch userId={session.user.id} />
+      </Suspense>
+    </OrganizationProvider>
+  )
+}