improvement(settings): accelerate navigation and data loading

Author: waleedlatif1

.claude/rules/sim-react-performance.md

@@ -99,6 +99,12 @@ server state with the consumer's shared React Query options. A short, cancelable
 avoids drive-by downloads. Do not treat `touchstart` as intent because it also begins scrolling;
 let the actual unmodified click start the data request.
 
+A speculative failure must not poison a later visit when the app default disables
+`retryOnMount`: remove only that exact failed query while it is inactive, keep failures visible
+to mounted consumers, and set the shared options to `retryOnMount: true` so a quick-click failure
+can recover after the user leaves and returns. Never carry placeholder data between protected
+resource keys (for example, workspace A to workspace B); an explicit loading state is truthful.
+
 If a continuity-focused surface intentionally omits `loading.tsx` so the current view remains
 mounted until its peer is ready, the intent path must warm both the full route and its critical
 data. Otherwise keep the loading boundary so dynamic navigation remains responsive.

apps/sim/app/account/settings/[section]/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from 'react'
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
 import type { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 import { AccountSettingsRenderer } from '@/components/settings/account-settings-renderer'
@@ -9,9 +10,11 @@ import {
   getSettingsSectionMeta,
   parseSettingsPathSection,
 } from '@/components/settings/navigation'
+import { prefetchStandaloneGeneral } from '@/components/settings/prefetch-standalone-general'
 import { getSession } from '@/lib/auth'
 import { isBillingEnabled } from '@/lib/core/config/env-flags'
 import { isPlatformAdmin } from '@/lib/permissions/super-user'
+import { getQueryClient } from '@/app/_shell/providers/get-query-client'
 
 interface AccountSettingsSectionPageProps {
   params: Promise<{ section: string }>
@@ -52,14 +55,21 @@ export default async function AccountSettingsSectionPage({
   }
 
   /**
-   * Sections read URL query params via nuqs (which uses `useSearchParams`
-   * internally), so the renderer must sit under a Suspense boundary. The
-   * `null` fallback matches the existing visual behavior — the sections are
-   * `next/dynamic` components that render nothing while their chunk loads.
+   * Sections read URL query params via nuqs, so the renderer must sit under a
+   * Suspense boundary. The null fallback preserves the existing chunk-loading UI.
    */
-  return (
+  const content = (
     <Suspense fallback={null}>
       <AccountSettingsRenderer section={parsed} />
     </Suspense>
   )
+
+  if (parsed === 'general') {
+    const queryClient = getQueryClient()
+    await prefetchStandaloneGeneral(queryClient)
+
+    return <HydrationBoundary state={dehydrate(queryClient)}>{content}</HydrationBoundary>
+  }
+
+  return content
 }

apps/sim/app/api/billing/route.test.ts

@@ -150,9 +150,8 @@ function mockOrganizationDbRows({
     .mockResolvedValueOnce([{ role }])
     .mockResolvedValueOnce([{ id: 'org-target', name: 'Target organization' }])
     .mockResolvedValueOnce(latestSubscription ? [latestSubscription] : [])
-    .mockResolvedValueOnce([{ userId: ownerId }])
+    .mockResolvedValueOnce([{ userId: ownerId, billingBlocked, billingBlockedReason }])
     .mockResolvedValueOnce(upgradeWorkspaceId ? [{ id: upgradeWorkspaceId }] : [])
-    .mockResolvedValueOnce([{ billingBlocked, billingBlockedReason }])
 }
 
 describe('GET /api/billing', () => {

apps/sim/app/api/billing/route.ts

@@ -3,95 +3,27 @@ import {
   member,
   organization as organizationTable,
   subscription as subscriptionTable,
-  userStats,
-  workspace as workspaceTable,
 } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { isOrgAdminRole } from '@sim/platform-authz/workspace'
-import { and, asc, desc, eq, isNull } from 'drizzle-orm'
+import { and, desc, eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { getBillingContract } from '@/lib/api/contracts/subscription'
 import { parseRequest } from '@/lib/api/server'
 import { getSession } from '@/lib/auth'
 import { getOrganizationSubscription, getPersonalBillingSummary } from '@/lib/billing/core/billing'
 import { getOrganizationBillingData } from '@/lib/billing/core/organization'
+import {
+  getOrganizationBillingBlockState,
+  getUpgradeWorkspaceId,
+} from '@/lib/billing/core/payer-context'
 import { resolveBillingInterval } from '@/lib/billing/core/subscription'
 import { getCreditBalanceForEntity } from '@/lib/billing/credits/balance'
 import { isPaid } from '@/lib/billing/plan-helpers'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 
 const logger = createLogger('UnifiedBillingAPI')
 
-interface BillingBlockState {
-  billingBlocked: boolean
-  billingBlockedReason: 'payment_failed' | 'dispute' | null
-  blockedByOrgOwner: boolean
-}
-
-/**
- * Finds an active workspace whose host billing identity is the requested payer.
- */
-async function getUpgradeWorkspaceId(
-  target: { type: 'user'; id: string } | { type: 'organization'; id: string }
-): Promise<string | null> {
-  const targetPredicate =
-    target.type === 'organization'
-      ? eq(workspaceTable.organizationId, target.id)
-      : and(
-          eq(workspaceTable.ownerId, target.id),
-          eq(workspaceTable.billedAccountUserId, target.id),
-          isNull(workspaceTable.organizationId)
-        )
-
-  const [workspace] = await dbReplica
-    .select({ id: workspaceTable.id })
-    .from(workspaceTable)
-    .where(and(targetPredicate, isNull(workspaceTable.archivedAt)))
-    .orderBy(asc(workspaceTable.createdAt), asc(workspaceTable.id))
-    .limit(1)
-
-  return workspace?.id ?? null
-}
-
-/**
- * Reads the exact organization's payer block from its owner, without allowing
- * the viewer's personal status or another organization membership to leak in.
- */
-async function getOrganizationBillingBlockState(
-  organizationId: string,
-  viewerUserId: string
-): Promise<BillingBlockState> {
-  const [owner] = await dbReplica
-    .select({ userId: member.userId })
-    .from(member)
-    .where(and(eq(member.organizationId, organizationId), eq(member.role, 'owner')))
-    .limit(1)
-
-  if (!owner) {
-    return {
-      billingBlocked: false,
-      billingBlockedReason: null,
-      blockedByOrgOwner: false,
-    }
-  }
-
-  const [stats] = await dbReplica
-    .select({
-      billingBlocked: userStats.billingBlocked,
-      billingBlockedReason: userStats.billingBlockedReason,
-    })
-    .from(userStats)
-    .where(eq(userStats.userId, owner.userId))
-    .limit(1)
-
-  const billingBlocked = Boolean(stats?.billingBlocked)
-  return {
-    billingBlocked,
-    billingBlockedReason: billingBlocked ? (stats?.billingBlockedReason ?? null) : null,
-    blockedByOrgOwner: billingBlocked && owner.userId !== viewerUserId,
-  }
-}
-
 /**
  * Unified Billing Endpoint
  */

apps/sim/app/api/organizations/[id]/billing-summary/route.ts

@@ -0,0 +1,24 @@
+import { getOrganizationBillingSummaryContract } from '@/lib/api/contracts/organization'
+import {
+  defineInternalJsonRoute,
+  internalOrchestrationErrorPolicy,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { getOrganizationBillingSummary } from '@/lib/billing/application/organization-billing-summary/get-organization-billing-summary'
+import { organizationBillingSummaryOperations } from '@/lib/billing/application/organization-billing-summary/operations'
+
+export const dynamic = 'force-dynamic'
+
+export const GET = defineInternalJsonRoute({
+  contract: getOrganizationBillingSummaryContract,
+  auth: internalSessionAuth,
+  operation: organizationBillingSummaryOperations.read,
+  rateLimit: internalRateLimits.none({
+    reason: 'Authenticated organization billing read, restricted to organization admins and owners',
+  }),
+  errorPolicy: internalOrchestrationErrorPolicy,
+  mapInput: ({ params }) => ({ organizationId: params.id }),
+  useCase: getOrganizationBillingSummary,
+  present: (data) => ({ success: true, data }),
+})

apps/sim/app/api/users/me/profile/route.test.ts

@@ -0,0 +1,67 @@
+/**
+ * @vitest-environment node
+ */
+import { authMockFns, createMockRequest } from '@sim/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockReadProfile } = vi.hoisted(() => ({
+  mockReadProfile: vi.fn(),
+}))
+
+vi.mock('@/lib/users/application/read-current-user', () => ({
+  getCurrentUserProfileUseCase: {
+    operation: { id: 'users.account.profile.read', principalKinds: ['session'] },
+    execute: mockReadProfile,
+  },
+}))
+
+import { GET } from '@/app/api/users/me/profile/route'
+
+describe('GET /api/users/me/profile', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    authMockFns.mockGetSession.mockResolvedValue({
+      user: { id: 'user-1' },
+      session: { id: 'session-1' },
+    })
+    mockReadProfile.mockResolvedValue({
+      id: 'user-1',
+      name: 'User',
+      email: 'user@example.com',
+      image: null,
+    })
+  })
+
+  it('reads the authenticated account through the semantic use case', async () => {
+    const response = await GET(createMockRequest('GET'))
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({
+      user: {
+        id: 'user-1',
+        name: 'User',
+        email: 'user@example.com',
+        image: null,
+      },
+    })
+    expect(mockReadProfile).toHaveBeenCalledWith(
+      expect.objectContaining({
+        principal: {
+          kind: 'session',
+          userId: 'user-1',
+          sessionId: 'session-1',
+        },
+        input: {},
+      })
+    )
+  })
+
+  it('rejects an unauthenticated request before the use case runs', async () => {
+    authMockFns.mockGetSession.mockResolvedValue(null)
+
+    const response = await GET(createMockRequest('GET'))
+
+    expect(response.status).toBe(401)
+    expect(mockReadProfile).not.toHaveBeenCalled()
+  })
+})

apps/sim/app/api/users/me/profile/route.ts

@@ -3,12 +3,19 @@ import { user } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
-import { updateUserProfileContract } from '@/lib/api/contracts'
+import { getUserProfileContract, updateUserProfileContract } from '@/lib/api/contracts'
 import { parseRequest } from '@/lib/api/server'
+import {
+  defineInternalJsonRoute,
+  internalOrchestrationErrorPolicy,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
 import { getSession } from '@/lib/auth'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
-import { getUserProfile } from '@/lib/users/queries'
+import { userAccountOperations } from '@/lib/users/application/operations'
+import { getCurrentUserProfileUseCase } from '@/lib/users/application/read-current-user'
 
 const logger = createLogger('UpdateUserProfileAPI')
 
@@ -71,31 +78,15 @@ export const PATCH = withRouteHandler(async (request: NextRequest) => {
   }
 })
 
-// GET endpoint to fetch current user profile
-export const GET = withRouteHandler(async () => {
-  const requestId = generateRequestId()
-
-  try {
-    const session = await getSession()
-
-    if (!session?.user?.id) {
-      logger.warn(`[${requestId}] Unauthorized profile fetch attempt`)
-      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-    }
-
-    const userId = session.user.id
-
-    const userRecord = await getUserProfile(userId)
-
-    if (!userRecord) {
-      return NextResponse.json({ error: 'User not found' }, { status: 404 })
-    }
-
-    return NextResponse.json({
-      user: userRecord,
-    })
-  } catch (error: any) {
-    logger.error(`[${requestId}] Profile fetch error`, error)
-    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
-  }
+export const GET = defineInternalJsonRoute({
+  contract: getUserProfileContract,
+  auth: internalSessionAuth,
+  operation: userAccountOperations.readProfile,
+  rateLimit: internalRateLimits.none({
+    reason: 'Authenticated current-user profile read',
+  }),
+  errorPolicy: internalOrchestrationErrorPolicy,
+  mapInput: () => ({}),
+  useCase: getCurrentUserProfileUseCase,
+  present: (userRecord) => ({ user: userRecord }),
 })

apps/sim/app/api/users/me/settings/route.test.ts

@@ -13,7 +13,7 @@ vi.mock('@/lib/auth', () => ({
   getSession: mockGetSession,
 }))
 
-import { PATCH } from '@/app/api/users/me/settings/route'
+import { GET, PATCH } from '@/app/api/users/me/settings/route'
 
 describe('PATCH /api/users/me/settings', () => {
   beforeEach(() => {
@@ -46,3 +46,19 @@ describe('PATCH /api/users/me/settings', () => {
     expect(await response.json()).not.toMatchObject({ success: true })
   })
 })
+
+describe('GET /api/users/me/settings', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetSession.mockResolvedValue(null)
+  })
+
+  it('preserves anonymous defaults without entering the protected current-user read', async () => {
+    const response = await GET()
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toMatchObject({
+      data: { theme: 'system', autoConnect: true },
+    })
+  })
+})

apps/sim/app/api/users/me/settings/route.ts

@@ -5,21 +5,26 @@ import { generateShortId } from '@sim/utils/id'
 import { type NextRequest, NextResponse } from 'next/server'
 import { updateUserSettingsContract } from '@/lib/api/contracts'
 import { parseRequest, validationErrorResponse } from '@/lib/api/server'
+import { InternalUnauthenticatedError, internalSessionAuth } from '@/lib/api/server/routes'
 import { getSession } from '@/lib/auth'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
-import { defaultUserSettings, getUserSettings } from '@/lib/users/queries'
+import { getCurrentUserSettingsUseCase } from '@/lib/users/application/read-current-user'
+import { defaultUserSettings } from '@/lib/users/queries'
 
 const logger = createLogger('UserSettingsAPI')
 
 export const GET = withRouteHandler(async () => {
   const requestId = generateRequestId()
 
   try {
-    const session = await getSession()
-    const data = await getUserSettings(session?.user?.id ?? null)
+    const principal = await internalSessionAuth.authenticate()
+    const data = await getCurrentUserSettingsUseCase.execute({ principal, input: {} })
     return NextResponse.json({ data }, { status: 200 })
   } catch (error: any) {
+    if (error instanceof InternalUnauthenticatedError) {
+      return NextResponse.json({ data: defaultUserSettings }, { status: 200 })
+    }
     logger.error(`[${requestId}] Settings fetch error`, error)
     return NextResponse.json({ data: defaultUserSettings }, { status: 200 })
   }