Add settings navigation acceptance contracts

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 2 people

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx

@@ -57,6 +57,11 @@ export function SettingsSidebar({
   const showDiscardDialog = pendingLeave !== null
 
   const [hasOverflowTop, setHasOverflowTop] = useState(false)
+  const [isHydrated, setIsHydrated] = useState(false)
+
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
 
   const { data: session } = useSession()
   const hostContext = useWorkspaceHostContext()
@@ -265,7 +270,12 @@ export function SettingsSidebar({
         )}
       >
         <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
-          <button type='button' onClick={handleBack} className={chipVariants({ fullWidth: true })}>
+          <button
+            type='button'
+            disabled={!isHydrated}
+            onClick={handleBack}
+            className={chipVariants({ fullWidth: true })}
+          >
             <div className='flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
               <ChevronDown className='size-[10px] rotate-90' />
             </div>
@@ -276,6 +286,8 @@ export function SettingsSidebar({
 
       {/* Settings sections */}
       <div
+        role='navigation'
+        aria-label='Workspace settings sections'
         ref={isCollapsed ? undefined : scrollContainerRef}
         className={cn(
           'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-1.5 transition-colors duration-150',
@@ -337,6 +349,9 @@ export function SettingsSidebar({
                     ) : (
                       <button
                         type='button'
+                        disabled={!isHydrated}
+                        aria-label={item.label}
+                        aria-current={active ? 'page' : undefined}
                         className={itemClassName}
                         onMouseEnter={() => handlePrefetch(item.id)}
                         onFocus={() => handlePrefetch(item.id)}

apps/sim/components/settings/settings-sidebar.tsx

@@ -63,6 +63,11 @@ export function SettingsSidebar<Section extends SettingsSection>({
   const cancelLeave = useSettingsDirtyStore((state) => state.cancelLeave)
   const pendingLeave = useSettingsDirtyStore((state) => state.pendingLeave)
   const [hasOverflowTop, setHasOverflowTop] = useState(false)
+  const [isHydrated, setIsHydrated] = useState(false)
+
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
 
   useEffect(() => {
     const container = scrollContainerRef.current
@@ -85,6 +90,7 @@ export function SettingsSidebar<Section extends SettingsSection>({
         <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
           <button
             type='button'
+            disabled={!isHydrated}
             onClick={() => requestLeave(() => router.push(backHref))}
             className={chipVariants({ fullWidth: true })}
           >
@@ -130,6 +136,9 @@ export function SettingsSidebar<Section extends SettingsSection>({
                       >
                         <button
                           type='button'
+                          disabled={!isHydrated}
+                          aria-label={item.label}
+                          aria-current={active ? 'page' : undefined}
                           className={chipVariants({ active, fullWidth: true })}
                           onClick={() => {
                             if (active) return

apps/sim/e2e/README.md

@@ -99,6 +99,38 @@ new database, Stripe fake, app, realtime process, and browser run:
 bun run test:e2e -- --reuse-build --project=hosted-billing-chromium-navigation
 ```
 
+## Settings navigation contracts
+
+Step 3 owns three literal acceptance datasets in
+`e2e/settings/navigation/contracts.ts`: canonical sidebar sections, special
+route outcomes, and representative persona visibility. They are intentionally
+independent of production navigation metadata. When product copy, routes, or
+visibility change, update the product and these expectations together rather
+than generating expectations from the implementation.
+
+Run only the navigation contracts during local iteration:
+
+```bash
+bun run test:e2e -- --reuse-build \
+  --project=hosted-billing-chromium-navigation --no-deps \
+  e2e/settings/navigation
+```
+
+The complete navigation project includes foundation safety and unauthenticated
+smoke coverage. On the Step 3 reference run, one worker completed its 123 tests
+in 1.7 minutes and the cache-hit orchestrator in 5 minutes 10 seconds. Two
+workers completed the same retry-free project in 55.3 seconds and the
+cache-hit orchestrator in 4 minutes 25 seconds, so the project retains two
+workers. Foundation coverage passed in both measurements. The final
+post-review dependency chain passed all 139 navigation, workflow, persona, and
+isolation tests in 1.3 minutes of Playwright time.
+
+The full chain's isolated browser contexts share a loopback address, so the E2E
+app raises Better Auth's generic request ceiling without disabling its limiter.
+That override fails closed unless the exact hosted E2E profile, E2E auth origin,
+and loopback `sim_e2e_*` database are all present; normal deployments retain
+Better Auth's defaults.
+
 The cache lives under ignored `e2e/.cache/builds/`. A hit requires matching
 source contents (including uncommitted/untracked files), build/public profile,
 Node/Bun/Next versions, platform, `BUILD_ID`, and the cached artifact checksum.

apps/sim/e2e/settings/navigation/canonical-navigation.spec.ts

@@ -0,0 +1,99 @@
+import type { Page } from '@playwright/test'
+import { expect, test } from '../../fixtures/persona-test'
+import { absoluteE2eUrl, readinessLocator, resolveContractPath } from './contract-resolver'
+import { type SectionContract, sectionContracts } from './contracts'
+
+for (const literalContract of sectionContracts) {
+  const contract: SectionContract = literalContract
+  test(`${contract.contractId} is reachable through its sidebar contract`, async ({
+    contextForPersona,
+    personaManifest,
+  }) => {
+    const context = await contextForPersona(contract.driver.personaKey)
+    const page = await context.newPage()
+    const targetPath = resolveContractPath(personaManifest, contract.pathTemplate, contract.driver)
+    const startingPath = resolveStartingPath(contract, personaManifest)
+
+    await page.goto(absoluteE2eUrl(startingPath))
+
+    const targetButton = page.getByRole('button', { name: contract.label, exact: true })
+    await expect(targetButton).toBeVisible()
+
+    const successfulResponse = contract.successfulResponse
+      ? page.waitForResponse((response) => {
+          const url = new URL(response.url())
+          return url.pathname === contract.successfulResponse?.path && response.status() === 200
+        })
+      : null
+    await targetButton.click()
+    await expect(page).toHaveURL(absoluteE2eUrl(targetPath))
+    if (successfulResponse) {
+      const response = await successfulResponse
+      if (contract.successfulResponse?.expectedJson !== undefined) {
+        await expect(response.json()).resolves.toEqual(contract.successfulResponse.expectedJson)
+      }
+    }
+
+    await assertCanonicalSettingsPage(page, contract, targetPath)
+  })
+}
+
+async function assertCanonicalSettingsPage(
+  page: Page,
+  contract: SectionContract,
+  targetPath: string
+): Promise<void> {
+  await expect(page).toHaveURL(absoluteE2eUrl(targetPath))
+  await expect(
+    page.getByRole('heading', { name: contract.heading, level: 1, exact: true }),
+    `${contract.contractId} heading changed; update the literal navigation contract intentionally`
+  ).toBeVisible()
+  await expect(
+    page.getByText(contract.description, { exact: true }),
+    `${contract.contractId} description changed; update the literal navigation contract intentionally`
+  ).toBeVisible()
+  await expect(readinessLocator(page, contract.readiness)).toBeVisible()
+  await expect(page.getByRole('button', { name: contract.label, exact: true })).toHaveAttribute(
+    'aria-current',
+    'page'
+  )
+  await expect(
+    page.getByRole('heading', { name: 'Failed to load settings', exact: true })
+  ).toHaveCount(0)
+  await expect(
+    page.getByRole('heading', { name: 'Something went wrong', exact: true })
+  ).toHaveCount(0)
+  await expect(
+    page.getByRole('heading', { name: 'Settings unavailable', exact: true })
+  ).toHaveCount(0)
+  await expect(page.getByRole('heading', { name: 'Setting unavailable', exact: true })).toHaveCount(
+    0
+  )
+}
+
+function resolveStartingPath(
+  contract: SectionContract,
+  manifest: Parameters<typeof resolveContractPath>[0]
+): string {
+  if (contract.plane === 'account') {
+    return contract.sectionId === 'general'
+      ? '/account/settings/api-keys'
+      : '/account/settings/general'
+  }
+
+  if (contract.plane === 'organization') {
+    const section = contract.sectionId === 'members' ? 'access-control' : 'members'
+    return resolveContractPath(
+      manifest,
+      `/organization/{organizationId}/settings/${section}`,
+      contract.driver
+    )
+  }
+
+  const section = contract.sectionId === 'general' ? 'secrets' : 'general'
+  return resolveContractPath(
+    manifest,
+    `/workspace/{workspaceId}/settings/${section}`,
+    contract.driver
+  )
+}