Add the Platform's live runtime behind a resolved mode

fixture, live or none, resolved once per server entry. Live reads the surface with
forwarded cookies, applies the legacy layout's gates in its order, prefetches the
shell under the hooks' keys, and mounts query, nuqs, session, organization and
deployment-shape providers, with session-expired and impersonation states. Adds
access-denied, unavailable, error, not-found and loading states. Fixture and
fixture-off servers load none of the seam.

Author: waleedlatif1

apps/sim/platform/app/(shell)/_components/live-shell/live-shell.tsx

@@ -0,0 +1,42 @@
+import { type ReactNode, Suspense } from 'react'
+import { redirect } from 'next/navigation'
+import { AccessDenied, SurfaceUnavailable } from '@/platform/app/_components/shell-gate/shell-gate'
+import { resolveLiveDestinations } from '@/platform/app/(shell)/_components/destinations'
+import { ProductSession } from '@/platform/app/(shell)/_components/product-session'
+import { SessionState } from '@/platform/app/(shell)/_components/session-state/session-state'
+import { resolveSettingsNavigation } from '@/platform/app/(shell)/_components/settings-navigation/destinations'
+import { hasOrganizationSurface, legacyRoutes } from '@/platform/lib/data/organization-model'
+import { prefetchShell } from '@/platform/lib/data/prefetch'
+import { LiveProviders } from '@/platform/lib/data/providers'
+import { legacyUrl, loginUrl, readOrganizationSurface } from '@/platform/lib/data/surface'
+
+/**
+ * The shell for a live session: the legacy organization layout's gates, in its order, against data
+ * read over the API. Each gate decides before anything product-shaped renders.
+ */
+export async function LiveShell({ children }: { children: ReactNode }) {
+  const surface = await readOrganizationSurface()
+  if (surface.status === 'unauthenticated') redirect(loginUrl())
+  if (surface.status === 'denied') return <AccessDenied workspacesHref={legacyUrl('/workspace')} />
+  if (surface.status === 'unavailable') return <SurfaceUnavailable />
+
+  const { organization } = surface
+  if (!hasOrganizationSurface(organization)) redirect(legacyRoutes(organization).workspaceSettings)
+
+  return (
+    <LiveProviders
+      organization={organization}
+      navigation={{
+        destinations: resolveLiveDestinations(organization),
+        settingsNavigation: resolveSettingsNavigation(organization),
+      }}
+      dehydratedState={await prefetchShell(organization)}
+    >
+      <Suspense fallback={null}>
+        <ProductSession fixtures={null} banner={<SessionState />}>
+          {children}
+        </ProductSession>
+      </Suspense>
+    </LiveProviders>
+  )
+}

apps/sim/platform/app/(shell)/_components/platform-shell/platform-shell.module.css

@@ -6,6 +6,16 @@
   block-size: 100dvh;
   isolation: isolate;
 }
+.frame {
+  display: flex;
+  flex-direction: column;
+  block-size: 100dvh;
+}
+.frame > .shell {
+  flex: 1;
+  block-size: auto;
+  min-block-size: 0;
+}
 .shell[data-sidebar-collapsed] {
   grid-template-columns: minmax(0, 1fr);
 }

apps/sim/platform/app/(shell)/_components/platform-shell/platform-shell.tsx

@@ -18,11 +18,29 @@ import { useCompactViewport } from '@/platform/design-system/components/layout/u
 import { useScrollEdges } from '@/platform/design-system/components/scroll-area/use-scroll-edges'
 import { platformHref } from '@/platform/design-system/navigation'
 
+/** Live navigation names a route on the legacy surface by its absolute URL. */
+const LEGACY_DESTINATION = /^https?:\/\//
+
 interface PlatformShellProps {
   data: ShellData | null
   children: ReactNode
 }
 
+interface PlatformShellFrameProps {
+  banner: ReactNode
+  children: ReactNode
+}
+
+/** Gives a banner its own row above the shell, which otherwise fills the window. */
+export function PlatformShellFrame({ banner, children }: PlatformShellFrameProps) {
+  return (
+    <div className={styles.frame}>
+      {banner}
+      {children}
+    </div>
+  )
+}
+
 export function PlatformShell({ data, children }: PlatformShellProps) {
   const scrollEdges = useScrollEdges<HTMLDivElement>()
   const pathname = usePathname()
@@ -36,8 +54,10 @@ export function PlatformShell({ data, children }: PlatformShellProps) {
   const drawerRef = useRef<HTMLDialogElement>(null)
   const chat = useChatChanges()
   const settings = pathname.startsWith('/settings')
+  const settingsDestinations: readonly { key: string; title: string }[] =
+    data?.settingsNavigation?.flatMap((group) => group.items) ?? SETTINGS_DESTINATIONS
   const section = settings
-    ? SETTINGS_DESTINATIONS.find((item) => item.key === (pathname.split('/')[2] || 'preferences'))
+    ? settingsDestinations.find((item) => item.key === (pathname.split('/')[2] || 'preferences'))
     : undefined
   const conversation = pathname.startsWith('/chat')
   const activeChat = conversation ? pathname.split('/')[2] : undefined
@@ -90,7 +110,8 @@ export function PlatformShell({ data, children }: PlatformShellProps) {
   function navigate(path: string) {
     setCommand(false)
     setDrawer(false)
-    router.push(platformHref(path, search))
+    if (LEGACY_DESTINATION.test(path)) window.location.assign(path)
+    else router.push(platformHref(path, search))
   }
   function toggle() {
     if (compact) setDrawer((previous) => !previous)
@@ -99,6 +120,7 @@ export function PlatformShell({ data, children }: PlatformShellProps) {
   const actions = (
     <SidebarToolbar
       items={data?.inbox ?? []}
+      showInbox={!data?.unbacked?.includes('inbox')}
       navigate={navigate}
       onSearch={() => setCommand(true)}
       onCollapse={toggle}
@@ -183,6 +205,7 @@ export function PlatformShell({ data, children }: PlatformShellProps) {
           navigate={navigate}
           chats={chats}
           workspaces={data?.workspaces ?? []}
+          destinations={data?.destinations}
         />
       </div>
       <NotificationTray history={data?.notifications ?? []} navigate={navigate} />

apps/sim/platform/app/(shell)/_components/product-session.tsx

@@ -5,7 +5,10 @@ import { useSearchParams } from 'next/navigation'
 import { DesktopHost } from '@/platform/app/(shell)/_components/desktop/desktop-host'
 import type { ShellData } from '@/platform/app/(shell)/_components/model'
 import { NotificationSession } from '@/platform/app/(shell)/_components/notification-tray/notification-tray'
-import { PlatformShell } from '@/platform/app/(shell)/_components/platform-shell/platform-shell'
+import {
+  PlatformShell,
+  PlatformShellFrame,
+} from '@/platform/app/(shell)/_components/platform-shell/platform-shell'
 import { ChatChangesProvider } from '@/platform/app/(shell)/_components/session/chat-changes'
 import { ComposerDrafts } from '@/platform/app/(shell)/_components/session/composer-drafts'
 import { IntegrationChanges } from '@/platform/app/(shell)/_components/session/integration-changes'
@@ -14,15 +17,22 @@ import { ProductSurface } from '@/platform/app/(shell)/_components/session/produ
 import { SidebarLayout } from '@/platform/app/(shell)/_components/sidebar/sidebar-layout'
 import { readAppearance, readScenario } from '@/platform/design-system/navigation'
 import type { Scenario } from '@/platform/fixtures'
+import { useLiveShellData } from '@/platform/lib/data/shell-context'
 
 interface ProductSessionProps {
   fixtures: Record<Scenario, ShellData> | null
+  /** Above the shell, inside the theme: session states only a live session has. */
+  banner?: ReactNode
   children: ReactNode
 }
 
-export function ProductSession({ children, fixtures }: ProductSessionProps) {
+export function ProductSession({ children, fixtures, banner }: ProductSessionProps) {
   const search = useSearchParams()
   const scenario = readScenario(search.get('state'))
+  const live = useLiveShellData()
+  const shell = (
+    <PlatformShell data={live ?? fixtures?.[scenario] ?? null}>{children}</PlatformShell>
+  )
   return (
     <InterfacePreferences key={scenario}>
       <DesktopHost />
@@ -32,7 +42,11 @@ export function ProductSession({ children, fixtures }: ProductSessionProps) {
             <ComposerDrafts>
               <ProductSurface preference={readAppearance(search.get('theme'))}>
                 <IntegrationChanges key={search.get('role') === 'member' ? 'member' : 'admin'}>
-                  <PlatformShell data={fixtures?.[scenario] ?? null}>{children}</PlatformShell>
+                  {banner ? (
+                    <PlatformShellFrame banner={banner}>{shell}</PlatformShellFrame>
+                  ) : (
+                    shell
+                  )}
                 </IntegrationChanges>
               </ProductSurface>
             </ComposerDrafts>

apps/sim/platform/app/(shell)/_components/session-state/session-state.module.css

@@ -0,0 +1,23 @@
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-12);
+  flex-wrap: wrap;
+  padding: var(--spacing-8) var(--spacing-16);
+  background: var(--control-danger-soft);
+}
+
+.takeover {
+  position: fixed;
+  z-index: 3;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-12);
+  padding: var(--spacing-24);
+  text-align: center;
+  background: var(--ui-canvas);
+}

apps/sim/platform/app/(shell)/_components/session-state/session-state.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import styles from '@/platform/app/(shell)/_components/session-state/session-state.module.css'
+import { Button } from '@/platform/design-system/components'
+import { useImpersonation, useSessionExpiry } from '@/platform/lib/data/session'
+
+function ImpersonationBanner() {
+  const { active, name, email, stopping, stop } = useImpersonation()
+  if (!active) return null
+  return (
+    <div className={styles.banner} role='status'>
+      <span data-type='T060'>
+        Impersonating {name}
+        {email ? ` (${email})` : ''}. Changes will apply to this account until you switch back.
+      </span>
+      <Button size='compact' variant='destructive' disabled={stopping} onClick={stop}>
+        {stopping ? 'Returning…' : 'Stop impersonating'}
+      </Button>
+    </div>
+  )
+}
+
+function SessionExpired() {
+  const { expired, failed, wasImpersonation, retry } = useSessionExpiry()
+  if (!expired) return null
+  const subject = wasImpersonation ? 'The impersonation session expired' : 'Your session expired'
+  return (
+    <main className={styles.takeover}>
+      <p data-type='T067' role='status'>
+        {failed ? `${subject}, but signing out failed.` : `${subject}. Signing you out…`}
+      </p>
+      {failed && (
+        <Button variant='primary' onClick={retry}>
+          Try again
+        </Button>
+      )}
+    </main>
+  )
+}
+
+/** What the session itself has to say, above whatever route is showing. */
+export function SessionState() {
+  return (
+    <>
+      <ImpersonationBanner />
+      <SessionExpired />
+    </>
+  )
+}

apps/sim/platform/app/(shell)/error.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { PageError } from '@/platform/app/_components/shell-gate/shell-gate'
+
+export default function ErrorPage({ reset }: { reset: () => void }) {
+  return <PageError reset={reset} />
+}

apps/sim/platform/app/(shell)/layout.tsx

@@ -1,8 +1,14 @@
 import { type ReactNode, Suspense } from 'react'
 import { ProductSession } from '@/platform/app/(shell)/_components/product-session'
 import { loadShellScenarios } from '@/platform/fixtures'
+import { resolvePlatformMode } from '@/platform/lib/data/mode'
 
 export default async function Layout({ children }: { children: ReactNode }) {
+  if (resolvePlatformMode() === 'live') {
+    /** Loaded only here, so a fixture server never evaluates the data seam. */
+    const { LiveShell } = await import('@/platform/app/(shell)/_components/live-shell/live-shell')
+    return <LiveShell>{children}</LiveShell>
+  }
   const fixtures = await loadShellScenarios()
   return (
     <Suspense fallback={null}>

apps/sim/platform/app/(shell)/loading.tsx

@@ -0,0 +1,7 @@
+/**
+ * Lets the shell paint while a page reads its data. Blank, so nothing moves when the page arrives;
+ * a route whose final geometry is known supplies its own skeleton in its own `loading.tsx`.
+ */
+export default function Loading() {
+  return null
+}

apps/sim/platform/app/(shell)/not-found.tsx

@@ -0,0 +1,5 @@
+import { PageNotFound } from '@/platform/app/_components/shell-gate/shell-gate'
+
+export default function NotFound() {
+  return <PageNotFound />
+}