feat(org): organization surface UI, unified settings, and Sim Search setup

Home returns to the workspace chat's empty state, wired to the Assistant:
the greeting, the framed composer with the shared animated placeholder,
and a Get started list whose steps read completion from real state.
Search is its own tab, a home-style greeting over a pill field that docks
to the page head on submit with results scrolling beneath; a failed
search shows one quiet line and Try again rather than the server's text.

The Workspaces page is gone; the list lives in the sidebar above Chats
as rail chips with the sidebar's See more paging and the collapsed rail
flyout. The header dropdown is the organization card — mark, name,
member count — over a Settings row; the workspace header loses its
organizations list.

Organization settings become one surface: Account (General, the
organization's Subscription), Organization, Governance, and Sim Search,
with account sections rendered by the account plane's own renderer. The
settings Integrations section, admin-only, hosts every Sim Search source
with Set up, Manage, and a confirm-gated approval toggle; the Integrations
page shows every member the same list with only their own actions. The
setup's OAuth detours return to the settings section through one helper.
Sim Search in Slack is an outbound row in the shared settings sidebar.

The org layout seeds the viewer's profile through a shared prefetch, so
the footer paints hydrated and a page hydrating the same key no longer
mismatches. Loading pages are removed; content lands as it arrives.

Author: emir-karabeg

apps/sim/app/o/[organizationId]/chat/[chatId]/loading.tsx

@@ -1,9 +1,7 @@
-import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { getSession } from '@/lib/auth'
 import { getAccessibleCopilotChatAuth } from '@/lib/copilot/chat/lifecycle'
-import OrganizationChatLoading from '@/app/o/[organizationId]/chat/[chatId]/loading'
 import { OrganizationHome } from '@/app/o/[organizationId]/home/organization-home'
 
 export const metadata: Metadata = { title: 'Chat' }
@@ -20,9 +18,5 @@ export default async function OrganizationChatPage({
     principal: { kind: 'session', userId: session.user.id, sessionId: session.session.id },
   })
   if (!chat || chat.type !== 'mothership' || chat.organizationId !== organizationId) notFound()
-  return (
-    <Suspense fallback={<OrganizationChatLoading />}>
-      <OrganizationHome userName={session.user.name ?? undefined} chatId={chatId} />
-    </Suspense>
-  )
+  return <OrganizationHome userName={session.user.name ?? undefined} chatId={chatId} />
 }

apps/sim/app/o/[organizationId]/chat/[chatId]/page.tsx

@@ -1,6 +1,6 @@
 export {
   OrganizationPage,
-  OrganizationPageLoading,
   type OrganizationPageTab,
+  PAGE_COLUMN_CLASS,
 } from '@/app/o/[organizationId]/components/organization-page/organization-page'
 export { useOrganizationPageFilters } from '@/app/o/[organizationId]/components/organization-page/use-organization-page-filters'

apps/sim/app/o/[organizationId]/components/organization-page/index.ts

@@ -12,7 +12,6 @@ import {
   useScrollEdges,
 } from '@sim/emcn'
 import { Search, X } from '@sim/emcn/icons'
-import { noop } from '@sim/utils/helpers'
 import { HEADER_ACTION_CLUSTER, PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import { useOrganizationPageFilters } from '@/app/o/[organizationId]/components/organization-page/use-organization-page-filters'
 import {
@@ -21,7 +20,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 
 /** The home surface's reading column, so every organization page shares its width. */
-const COLUMN_CLASS = 'mx-auto w-full max-w-chat px-6'
+export const PAGE_COLUMN_CLASS = 'mx-auto w-full max-w-chat px-6'
 
 export interface OrganizationPageTab {
   id: string
@@ -33,6 +32,7 @@ interface OrganizationPageProps {
   description?: string
   /** Header tabs; the first is the default. Omit for a page with one view. */
   tabs?: readonly OrganizationPageTab[]
+  /** The page's primary action, a chip. Omit for a page without one. */
   action?: ReactNode
   children?: ReactNode
 }
@@ -48,52 +48,20 @@ interface OrganizationPageProps {
  * skeleton standing in for it. Pass `tabs` only once they are known; the row
  * simply gains them.
  */
-export function OrganizationPage(props: OrganizationPageProps) {
-  const filters = useOrganizationPageFilters()
-  return <OrganizationPageView {...props} filters={filters} />
-}
-
-/** Uses the same page chrome during both navigation and a suspended URL read. */
-export function OrganizationPageLoading({
-  title,
-  description,
-}: Pick<OrganizationPageProps, 'title' | 'description'>) {
-  return (
-    <OrganizationPageView
-      title={title}
-      description={description}
-      filters={{ tab: null, search: '', setTab: noop, setSearch: noop }}
-      loading
-    />
-  )
-}
-
-interface OrganizationPageViewProps extends OrganizationPageProps {
-  filters: {
-    tab: string | null
-    search: string
-    setTab: (value: string | null) => void
-    setSearch: (value: string) => void
-  }
-  loading?: boolean
-}
-
-function OrganizationPageView({
+export function OrganizationPage({
   title,
   description,
   tabs,
   action,
   children,
-  filters,
-  loading = false,
-}: OrganizationPageViewProps) {
+}: OrganizationPageProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const scrollContentRef = useRef<HTMLDivElement>(null)
   const scrollEdges = useScrollEdges(scrollContainerRef, { contentRef: scrollContentRef })
   const tabsRef = useRef<HTMLDivElement>(null)
   const tabEdges = useScrollEdges(tabsRef, { axis: 'x' })
 
-  const { tab, search, setTab, setSearch } = filters
+  const { tab, search, setTab, setSearch } = useOrganizationPageFilters()
   const defaultTab = tabs?.[0]?.id
   const activeTab = tab ?? defaultTab
 
@@ -117,7 +85,9 @@ function OrganizationPageView({
         <div className={HEADER_ACTION_CLUSTER} />
       </div>
 
-      <div className={cn(COLUMN_CLASS, SIDEBAR_DIVIDER_PAD_ABOVE_CLASS, 'flex shrink-0 flex-col')}>
+      <div
+        className={cn(PAGE_COLUMN_CLASS, SIDEBAR_DIVIDER_PAD_ABOVE_CLASS, 'flex shrink-0 flex-col')}
+      >
         <div className='flex flex-col gap-1 pt-8'>
           <h1 className='text-[var(--text-primary)] text-lg'>{title}</h1>
           {description && <p className='text-[var(--text-muted)] text-small'>{description}</p>}
@@ -178,12 +148,7 @@ function OrganizationPageView({
                 }
               />
             ) : (
-              <Chip
-                disabled={loading}
-                leftIcon={Search}
-                aria-label='Search'
-                onClick={() => setSearchOpened(true)}
-              />
+              <Chip leftIcon={Search} aria-label='Search' onClick={() => setSearchOpened(true)} />
             )}
             {action}
           </div>
@@ -200,7 +165,7 @@ function OrganizationPageView({
         )}
         {...scrollFadeAttributes(scrollEdges)}
       >
-        <div ref={scrollContentRef} className={COLUMN_CLASS}>
+        <div ref={scrollContentRef} className={PAGE_COLUMN_CLASS}>
           {children}
         </div>
       </div>

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

@@ -9,7 +9,10 @@ import {
   CollapsedSidebarMenu,
   SidebarSection,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
-import { SIDEBAR_ITEM_GAP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import {
+  SIDEBAR_ITEM_GAP_CLASS,
+  SIDEBAR_SECTION_GAP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 
 /** Stands in for a chip row while the list loads, so it carries no margin either. */
@@ -96,11 +99,10 @@ interface ChatsSectionProps {
 }
 
 /**
- * The organization's chats: the first section of the scroll region, so it carries no
- * section gap — the divider padding above it is the whole distance, exactly as the
- * workspace sidebar spaces its own Chats. Expanded, a collapsible list of every chat —
- * no paging, the scroll region carries the length; collapsed, a hover flyout off the
- * rail glyph.
+ * The organization's chats, the section beneath Workspaces, spaced from it by the
+ * section gap exactly as the workspace sidebar spaces its own sections. Expanded, a
+ * collapsible list of every chat — no paging, the scroll region carries the length;
+ * collapsed, a hover flyout off the rail glyph.
  */
 export function ChatsSection({
   chats,
@@ -114,7 +116,11 @@ export function ChatsSection({
   const hover = useHoverMenu()
 
   return (
-    <SidebarSection title='Chats' railCollapsed={isCollapsed} className='chats-section shrink-0'>
+    <SidebarSection
+      title='Chats'
+      railCollapsed={isCollapsed}
+      className={cn(SIDEBAR_SECTION_GAP_CLASS, 'chats-section shrink-0')}
+    >
       {isCollapsed ? (
         <div className='px-2'>
           <CollapsedSidebarMenu

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx

@@ -2,3 +2,4 @@ export { ChatsSection } from './chats-section'
 export { OrganizationFooter } from './organization-footer'
 export { OrganizationHeader } from './organization-header'
 export { WorkspacesRailFlyout } from './workspaces-rail-flyout'
+export { WorkspacesSection } from './workspaces-section'

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/index.ts

@@ -19,9 +19,10 @@ import {
 import { BookOpen, Download, HelpCircle, Settings } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { SlackIcon } from '@/components/icons'
-import { getAccountSettingsHref } from '@/components/settings/navigation'
 import { getDesktopUpdates } from '@/lib/desktop'
+import { organizationRoutes } from '@/lib/navigation/paths'
 import { getUserColor } from '@/lib/workspaces/colors'
+import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
 import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
 import {
   SIDEBAR_ITEM_GAP_CLASS,
@@ -89,6 +90,7 @@ export function OrganizationFooter({
   onOpenDocs,
   onJoinSlack,
 }: OrganizationFooterProps) {
+  const { organization } = useOrganizationContext()
   const { data: profile } = useUserProfile()
   const updateState = useDesktopUpdateState()
 
@@ -164,7 +166,7 @@ export function OrganizationFooter({
       </SidebarTooltip>
       <DropdownMenuContent align='start' side='top' sideOffset={4}>
         <DropdownMenuItem asChild>
-          <Link href={getAccountSettingsHref('general')}>
+          <Link href={organizationRoutes(organization.id).settingsSection('general')}>
             <Settings className='size-[14px]' />
             <DropdownMenuItemLabel label='Settings' />
           </Link>

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/organization-footer.tsx

@@ -8,12 +8,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@sim/emcn'
-import { Building, PanelLeft, Settings } from '@sim/emcn/icons'
+import { PanelLeft, Settings } from '@sim/emcn/icons'
 import { IdentityTile } from '@/components/identity-tile/identity-tile'
-import { OrganizationMenuItems } from '@/components/organization-menu-items/organization-menu-items'
 import { getOrganizationSettingsHref } from '@/components/settings/navigation'
 import { SettingsGuardedLink } from '@/components/settings/settings-guarded-link'
-import { WORKSPACES_PATH } from '@/lib/navigation/paths'
 import type { OrganizationSurfaceOrganization } from '@/lib/organizations/surface'
 import { SIDEBAR_RAIL_CHIP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 
@@ -30,7 +28,8 @@ interface OrganizationHeaderProps {
 
 /**
  * The top-left organization chip. Expanded, it names the organization and opens
- * the organization menu; collapsed, it becomes the rail's expand control, swapping
+ * its card — the mark at tile size, the name, how many people belong, and the way
+ * into its settings; collapsed, it becomes the rail's expand control, swapping
  * the mark for a panel glyph on hover exactly as the workspace header does. The
  * mark is the organization's uploaded logo or its initial on the neutral tile.
  */
@@ -39,6 +38,8 @@ export function OrganizationHeader({
   isCollapsed,
   onExpandSidebar,
 }: OrganizationHeaderProps) {
+  const initial = getOrganizationInitial(organization.name)
+
   if (isCollapsed) {
     return (
       <div className='min-w-0 flex-1'>
@@ -50,7 +51,7 @@ export function OrganizationHeader({
           leftAdornment={
             <div className='relative flex size-[16px] shrink-0 items-center justify-center'>
               <IdentityTile
-                initial={getOrganizationInitial(organization.name)}
+                initial={initial}
                 logoUrl={organization.logo}
                 className='group-hover:invisible'
               />
@@ -65,19 +66,16 @@ export function OrganizationHeader({
     )
   }
 
+  const { memberCount } = organization
+
   return (
     <div className='min-w-0 flex-1'>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Chip
             aria-label='Organization menu'
             className='min-w-0 max-w-full'
-            leftAdornment={
-              <IdentityTile
-                initial={getOrganizationInitial(organization.name)}
-                logoUrl={organization.logo}
-              />
-            }
+            leftAdornment={<IdentityTile initial={initial} logoUrl={organization.logo} />}
             rightAdornment={<ChipChevronDown />}
           >
             {organization.name}
@@ -89,17 +87,27 @@ export function OrganizationHeader({
           sideOffset={8}
           className='w-64 max-w-[calc(100vw-24px)]'
         >
-          <OrganizationMenuItems currentOrganizationId={organization.id} />
+          {/* The item rows' `px-2` and the rail chips' icon-to-label gap, so the card sits on the menu's own grid. */}
+          <div className='flex items-center gap-2 px-2 py-1.5'>
+            <IdentityTile
+              size='lg'
+              initial={initial}
+              logoUrl={organization.logo}
+              alt={organization.name}
+            />
+            <div className='flex min-w-0 flex-col'>
+              <span className='truncate text-[var(--text-primary)] text-sm'>
+                {organization.name}
+              </span>
+              <span className='text-[var(--text-muted)] text-caption'>
+                {memberCount} {memberCount === 1 ? 'member' : 'members'}
+              </span>
+            </div>
+          </div>
           <DropdownMenuItem asChild>
             <SettingsGuardedLink href={getOrganizationSettingsHref(organization.id, 'members')}>
               <Settings className='size-[14px]' />
-              Organization settings
-            </SettingsGuardedLink>
-          </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <SettingsGuardedLink href={WORKSPACES_PATH}>
-              <Building className='size-[14px]' />
-              Switch workspace
+              Settings
             </SettingsGuardedLink>
           </DropdownMenuItem>
         </DropdownMenuContent>

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/organization-header.tsx

@@ -0,0 +1 @@
+export { WorkspacesSection } from './workspaces-section'