improvement(settings): paint settings section clicks immediately and warm every section (#8440)

* improvement(settings): paint settings section clicks immediately and cut a round trip

- Share the in-flight section navigation between the sidebar and the content area: the clicked section's heading paints over an empty body while its route resolves, with the outgoing section kept laid out but invisible and inert. It is optimistic state inside the navigation's own transition, not a Suspense fallback, so nothing is held back and a redirect back restores the section untouched.
- A press warms data and code but no longer prefetches the route: a prefetch started at mousedown made the navigation wait on a second, two-step request instead of its own.
- Warm every section's chunk on intent from the persistent settings layout instead of the sidebar, so the chunk loads alongside the route payload instead of after it, without growing the workspace chrome's module graph.
- Seed fork availability for admins and read the server-seeded viewer permission, so Workspace Forks renders with the rest of the sidebar instead of after a session fetch and an availability fetch.

* fix(settings): keep press prefetch, guard fork direction switch, tighten docs

- Restore the sidebar link's press-time route prefetch. Measured with a realistic ~90ms press, the prefetch mousedown starts completes before the click commits, so removing it slowed every navigation (commit ~105ms -> ~190ms after mousedown).
- Route the fork sync direction switch through the unsaved-changes guard: switching Push/Pull drops the in-session mapping choices, so unsaved edits confirm first.
- Give SettingsNavigationProvider a props interface, and scope the section layout's 404/307 note to section authorization, which is what an unknown or legacy segment skips.

* fix(settings): confirm every discarded fork choice, keep settings UI out of the workspace chrome

- A fork sync direction switch drops every in-session choice, not just unsaved mapping edits. Expose hasSessionChoices (mapping edits, a copy selection that differs from the default, accepted dropped references, trigger URL choices) and confirm the switch whenever any is set.
- Move SettingsPendingSection into its own module so the provider in the workspace chrome no longer imports the settings header UI.

* fix(fork-sync): clear committed session choices after a sync

A successful sync applies the accepted drops and trigger URL choices, so clear exactly the snapshots it submitted, as it already does for mapping edits; choices made while the request was in flight stay. Compare the copy selection over the visible candidates only, the ones a sync sends, so keys left behind by a completed copy never count as a change.

* chore(settings): rebase module-graph baselines onto staging

Record the settings layout's section import() edges and the workspace chrome's smaller graph against the current staging baseline.

Author: waleedlatif1

apps/sim/app/o/[organizationId]/layout.tsx

@@ -1,6 +1,7 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
+import { SettingsNavigationProvider } from '@/components/settings/settings-navigation-provider'
 import { getSession } from '@/lib/auth'
 import { getActiveOrganizationId } from '@/lib/auth/session-response'
 import { isMothershipModelSelectorEnabled, isPlanModeEnabled } from '@/lib/mothership/feature-flags'
@@ -81,12 +82,14 @@ export default async function OrganizationLayout({
             <div className='workspace-root flex h-screen w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
               <ImpersonationBanner />
               <SessionExpired />
-              <WorkspaceChrome
-                sidebar={<OrganizationSidebar />}
-                initialSidebarCollapsed={initialSidebarCollapsed}
-              >
-                {children}
-              </WorkspaceChrome>
+              <SettingsNavigationProvider>
+                <WorkspaceChrome
+                  sidebar={<OrganizationSidebar />}
+                  initialSidebarCollapsed={initialSidebarCollapsed}
+                >
+                  {children}
+                </WorkspaceChrome>
+              </SettingsNavigationProvider>
             </div>
           </GlobalCommandsProvider>
         </OrganizationProvider>

apps/sim/app/o/[organizationId]/settings/[section]/layout.tsx

@@ -1,13 +1,8 @@
 import type { ReactNode } from 'react'
 import { notFound, redirect } from 'next/navigation'
-import {
-  getSettingsSectionMeta,
-  ORGANIZATION_SETTINGS_ITEMS,
-  toSettingsHeaderMeta,
-} from '@/components/settings/navigation'
 import { SettingsHeaderProvider, SettingsHeaderShell } from '@/components/settings/settings-header'
 import { organizationRoutes } from '@/lib/navigation/paths'
-import { resolveOrganizationSurfaceSection } from '@/app/o/[organizationId]/settings/navigation'
+import { resolveOrganizationSurfaceHeaderMeta } from '@/app/o/[organizationId]/settings/navigation'
 
 interface OrganizationSettingsSectionLayoutProps {
   children: ReactNode
@@ -24,18 +19,12 @@ export default async function OrganizationSettingsSectionLayout({
       `${organizationRoutes(organizationId).settingsSection('general')}?view=authorized-apps`
     )
   }
-  const resolved = resolveOrganizationSurfaceSection(section)
-  const meta =
-    resolved?.plane === 'organization'
-      ? ORGANIZATION_SETTINGS_ITEMS.find(({ id }) => id === resolved.section)
-      : resolved
-        ? getSettingsSectionMeta('account', resolved.section)
-        : null
+  const meta = resolveOrganizationSurfaceHeaderMeta(section)
   if (!meta) notFound()
 
   return (
     <SettingsHeaderProvider>
-      <SettingsHeaderShell meta={toSettingsHeaderMeta(meta)}>{children}</SettingsHeaderShell>
+      <SettingsHeaderShell meta={meta}>{children}</SettingsHeaderShell>
     </SettingsHeaderProvider>
   )
 }

apps/sim/app/o/[organizationId]/settings/layout.tsx

@@ -1,13 +1,21 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { SettingsPendingSection } from '@/components/settings/settings-pending-section'
 import { useSettingsBeforeUnload } from '@/components/settings/use-settings-before-unload'
+import { resolveOrganizationSurfaceHeaderMeta } from '@/app/o/[organizationId]/settings/navigation'
 
 interface OrganizationSettingsLayoutProps {
   children: ReactNode
 }
 
 export default function OrganizationSettingsLayout({ children }: OrganizationSettingsLayoutProps) {
   useSettingsBeforeUnload()
-  return <div className='flex h-full flex-col bg-[var(--bg)]'>{children}</div>
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <SettingsPendingSection resolveMeta={resolveOrganizationSurfaceHeaderMeta}>
+        {children}
+      </SettingsPendingSection>
+    </div>
+  )
 }

apps/sim/app/o/[organizationId]/settings/navigation.ts

@@ -1,6 +1,7 @@
 import {
   ACCOUNT_SETTINGS_ITEMS,
   type AccountSettingsSection,
+  getSettingsSectionMeta,
   isOrganizationSettingsSectionAvailable,
   ORGANIZATION_SETTINGS_GROUPS,
   ORGANIZATION_SETTINGS_ITEMS,
@@ -9,7 +10,9 @@ import {
   parseSettingsPathSection,
   resolveOrganizationSectionAccess,
   type SettingsNavigationItem,
+  toSettingsHeaderMeta,
 } from '@/components/settings/navigation'
+import type { SettingsHeaderMeta } from '@/components/settings/settings-header'
 
 /**
  * A section on the organization surface's settings, tagged with the plane that
@@ -64,6 +67,18 @@ export function resolveOrganizationSurfaceSection(
   return account ? { plane: 'account', section: account } : null
 }
 
+/** The heading an organization-surface section path renders with, or null for an unknown path. */
+export function resolveOrganizationSurfaceHeaderMeta(path: string): SettingsHeaderMeta | null {
+  const resolved = resolveOrganizationSurfaceSection(path)
+  const item =
+    resolved?.plane === 'organization'
+      ? ORGANIZATION_SETTINGS_ITEMS.find(({ id }) => id === resolved.section)
+      : resolved
+        ? getSettingsSectionMeta('account', resolved.section)
+        : null
+  return item ? toSettingsHeaderMeta(item) : null
+}
+
 export function organizationSettingsNavigation(
   isAdmin: boolean,
   features: OrganizationSettingsFeatures,

apps/sim/app/workspace/[workspaceId]/layout.test.tsx

@@ -13,12 +13,14 @@ const {
   mockPrefetchWorkspaceHostContext,
   mockPrefetchWorkspaceSidebar,
   mockPrefetchWorkspaceAccess,
+  mockPrefetchWorkspaceForkAvailability,
 } = vi.hoisted(() => ({
   mockBrandingProvider: vi.fn(({ children }: { children: ReactNode }) => children),
   mockGetOrgWhitelabelSettings: vi.fn(),
   mockPrefetchWorkspaceHostContext: vi.fn(),
   mockPrefetchWorkspaceSidebar: vi.fn(),
   mockPrefetchWorkspaceAccess: vi.fn(),
+  mockPrefetchWorkspaceForkAvailability: vi.fn(),
 }))
 
 vi.mock('@sim/emcn', () => emcnMock)
@@ -38,6 +40,7 @@ vi.mock('@/app/_shell/providers/get-query-client', () => ({
 vi.mock('@/app/workspace/[workspaceId]/prefetch', () => ({
   prefetchWorkspaceHostContext: mockPrefetchWorkspaceHostContext,
   prefetchWorkspaceSidebar: mockPrefetchWorkspaceSidebar,
+  prefetchWorkspaceForkAvailability: mockPrefetchWorkspaceForkAvailability,
 }))
 
 vi.mock('@/app/workspace/[workspaceId]/prefetch-access', () => ({
@@ -149,6 +152,7 @@ describe('WorkspaceLayout host context', () => {
     mockPrefetchWorkspaceHostContext.mockResolvedValue(HOST_CONTEXT)
     mockPrefetchWorkspaceSidebar.mockResolvedValue(undefined)
     mockPrefetchWorkspaceAccess.mockResolvedValue(undefined)
+    mockPrefetchWorkspaceForkAvailability.mockResolvedValue(undefined)
     mockGetOrgWhitelabelSettings.mockResolvedValue({ brandName: 'Host B' })
   })
 

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

@@ -1,6 +1,7 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
+import { SettingsNavigationProvider } from '@/components/settings/settings-navigation-provider'
 import { getSession } from '@/lib/auth'
 import { getActiveOrganizationId } from '@/lib/auth/session-response'
 import { isMothershipModelSelectorEnabled, isPlanModeEnabled } from '@/lib/mothership/feature-flags'
@@ -12,6 +13,7 @@ import { SessionExpired } from '@/app/workspace/[workspaceId]/components/session
 import { WorkspaceAccessDenied } from '@/app/workspace/[workspaceId]/components/workspace-access-denied'
 import { WorkspaceChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
 import {
+  prefetchWorkspaceForkAvailability,
   prefetchWorkspaceHostContext,
   prefetchWorkspaceSidebar,
 } from '@/app/workspace/[workspaceId]/prefetch'
@@ -50,6 +52,11 @@ export default async function WorkspaceLayout({
   }
 
   const activeOrganizationId = getActiveOrganizationId(session)
+  const principal = {
+    kind: 'session',
+    userId: session.user.id,
+    sessionId: session.session.id,
+  } as const
   const [
     cookieStore,
     initialOrgSettings,
@@ -74,11 +81,8 @@ export default async function WorkspaceLayout({
     isMothershipModelSelectorEnabled(),
     isPlanModeEnabled(),
     resolveOrganizationEntryPath(session),
-    prefetchWorkspaceAccess(queryClient, workspaceId, {
-      kind: 'session',
-      userId: session.user.id,
-      sessionId: session.session.id,
-    }),
+    prefetchWorkspaceAccess(queryClient, workspaceId, principal),
+    prefetchWorkspaceForkAvailability(queryClient, workspaceId, principal, hostContext),
   ])
   const initialSidebarCollapsed = cookieStore.get('sidebar_collapsed')?.value === '1'
 
@@ -108,12 +112,14 @@ export default async function WorkspaceLayout({
                 <SessionExpired />
                 <WorkspacePermissionsProvider>
                   <WorkspaceScopeSync />
-                  <WorkspaceChrome
-                    sidebar={<Sidebar organizationHref={organizationHref} />}
-                    initialSidebarCollapsed={initialSidebarCollapsed}
-                  >
-                    {children}
-                  </WorkspaceChrome>
+                  <SettingsNavigationProvider>
+                    <WorkspaceChrome
+                      sidebar={<Sidebar organizationHref={organizationHref} />}
+                      initialSidebarCollapsed={initialSidebarCollapsed}
+                    >
+                      {children}
+                    </WorkspaceChrome>
+                  </SettingsNavigationProvider>
                 </WorkspacePermissionsProvider>
               </div>
             </GlobalCommandsProvider>

apps/sim/app/workspace/[workspaceId]/prefetch.ts

@@ -1,3 +1,4 @@
+import type { SessionPrincipal } from '@sim/auth/principal'
 import type { QueryClient } from '@tanstack/react-query'
 import type { WorkspaceHostContext } from '@/lib/api/contracts/workspaces'
 import { isChatEnabled } from '@/lib/core/config/env-flags'
@@ -8,6 +9,10 @@ import { getWorkspaceHostContextForViewer } from '@/lib/workspaces/host-context'
 import { getWorkspacePermissionsForAuthorizedViewer } from '@/lib/workspaces/permissions/utils'
 import { seedWorkspaceList } from '@/lib/workspaces/seed-workspace-list'
 import { prefetchResourceFolders } from '@/app/workspace/[workspaceId]/lib/prefetch-resource-folders'
+import {
+  FORK_AVAILABILITY_STALE_TIME,
+  forkAvailabilityKeys,
+} from '@/ee/workspace-forking/hooks/use-forking-available'
 import {
   MOTHERSHIP_CHAT_LIST_STALE_TIME,
   mapChat,
@@ -114,3 +119,28 @@ export async function prefetchWorkspaceSidebar(
     seedWorkspaceList(queryClient, userId, activeOrganizationId),
   ])
 }
+
+/**
+ * Seeds fork availability, which decides whether the settings sidebar lists Workspace Forks, so
+ * the row renders with the rest of the sidebar. Only admins can read it
+ * (`forkOperations.discover`), so it is skipped for everyone else. It runs the availability
+ * route's own use case; a failed read stays out of hydration and the client refetches it.
+ */
+export async function prefetchWorkspaceForkAvailability(
+  queryClient: QueryClient,
+  workspaceId: string,
+  principal: SessionPrincipal,
+  hostContext: WorkspaceHostContext
+): Promise<void> {
+  if (hostContext.viewer.permission !== 'admin') return
+  await queryClient.prefetchQuery({
+    queryKey: forkAvailabilityKeys.detail(workspaceId),
+    queryFn: async () => {
+      const { getWorkspaceForkAvailability } = await import(
+        '@/ee/workspace-forking/application/discovery'
+      )
+      return getWorkspaceForkAvailability.execute({ principal, input: { workspaceId } })
+    },
+    staleTime: FORK_AVAILABILITY_STALE_TIME,
+  })
+}

apps/sim/app/workspace/[workspaceId]/settings/[section]/layout.tsx

@@ -26,19 +26,19 @@ const TOP_LEVEL_REDIRECTS: Readonly<Record<string, (workspaceId: string) => stri
  * the shell instead of waiting on the body's lazily-loaded chunk.
  *
  * Whether a segment names a section at all is decided here too, before the shell renders, so a
- * bad or legacy URL loaded directly answers 404 or 307 without touching the database. Whether
- * the *viewer* may open a section is a different question and stays in the page, where it
+ * bad or legacy URL loaded directly answers 404 or 307 without running section authorization.
+ * Whether the *viewer* may open a section is a different question and stays in the page, where it
  * belongs; those checks need the database and are reached almost entirely by client navigation.
  *
  * There is deliberately no sibling `loading.tsx`, and the page renders its body under no Suspense
  * boundary of its own. React holds content that resolves inside a freshly committed fallback for
  * at least 300ms, so any boundary mounted with the section — a route fallback, or a page-level
  * `<Suspense>` around the code-split body — put that floor under every section switch. Without
- * one, a switch is a transition that keeps the outgoing section on screen until the incoming one
- * and its chunk are ready (immediately, when the sidebar's intent prefetch has landed), and the
- * sidebar moves its selection on click so the click still reads as acknowledged. A boundary above
- * this layout (a `settings/loading.tsx`, or a `<Suspense>` in the settings layout) would also
- * swallow the 404 and 307 above.
+ * one, a switch is a transition: the sidebar moves its selection and the settings layout paints
+ * the incoming heading over the outgoing section, which stays mounted but invisible until the
+ * incoming section and its chunk are ready. A boundary above this layout (a
+ * `settings/loading.tsx`, or a `<Suspense>` in the settings layout) would also swallow the 404
+ * and 307 above.
  *
  * Authentication is already enforced by the ancestor workspace layout, so this runs only for a
  * signed-in viewer.