fix(secrets): restore unsaved-changes guard for settings tab navigation

- Add useSettingsDirtyStore (stores/settings/dirty) to track dirty state across the settings sidebar and section components
- Wire credentials-manager and integrations-manager to sync dirty state to the store and clean up on unmount; also reset store synchronously in handleDiscardAndNavigate
- Update settings-sidebar to check dirty state before tab switches and Back navigation, showing an Unsaved Changes dialog if needed
- Remove dead stores/settings/environment directory; move EnvironmentVariable type into lib/environment/api

Author: waleedlatif1

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

@@ -10,7 +10,7 @@ import { decryptSecret, encryptSecret } from '@/lib/core/security/encryption'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { generateId } from '@/lib/core/utils/uuid'
 import { syncPersonalEnvCredentialsForUser } from '@/lib/credentials/environment'
-import type { EnvironmentVariable } from '@/stores/settings/environment'
+import type { EnvironmentVariable } from '@/lib/environment/api'
 
 const logger = createLogger('EnvironmentAPI')
 

apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx

@@ -51,6 +51,7 @@ import {
   type WorkspaceEnvironmentData,
 } from '@/hooks/queries/environment'
 import { useWorkspacePermissionsQuery } from '@/hooks/queries/workspace'
+import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
 const logger = createLogger('SecretsManager')
 
@@ -482,6 +483,15 @@ export function CredentialsManager() {
   hasChangesRef.current = hasChanges
   shouldBlockNavRef.current = hasChanges || isDetailsDirty
 
+  const setNavGuardDirty = useSettingsDirtyStore((s) => s.setDirty)
+  const resetNavGuard = useSettingsDirtyStore((s) => s.reset)
+
+  useEffect(() => {
+    setNavGuardDirty(hasChanges || isDetailsDirty)
+  }, [hasChanges, isDetailsDirty, setNavGuardDirty])
+
+  useEffect(() => () => resetNavGuard(), [resetNavGuard])
+
   // --- Effects ---
   useEffect(() => {
     if (hasSavedRef.current) return
@@ -981,6 +991,7 @@ export function CredentialsManager() {
 
   const handleDiscardAndNavigate = useCallback(() => {
     shouldBlockNavRef.current = false
+    resetNavGuard()
     resetToSaved()
     setSelectedCredentialId(null)
 
@@ -989,7 +1000,7 @@ export function CredentialsManager() {
       pendingNavigationUrlRef.current = null
       router.push(url)
     }
-  }, [router, resetToSaved])
+  }, [router, resetToSaved, resetNavGuard])
 
   const renderEnvVarRow = useCallback(
     (envVar: UIEnvironmentVariable, originalIndex: number) => {

apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx

@@ -54,6 +54,7 @@ import {
 } from '@/hooks/queries/oauth/oauth-connections'
 import { useWorkspacePermissionsQuery } from '@/hooks/queries/workspace'
 import { useOAuthReturnRouter } from '@/hooks/use-oauth-return'
+import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
 const logger = createLogger('IntegrationsManager')
 
@@ -247,6 +248,15 @@ export function IntegrationsManager() {
 
   const isDetailsDirty = isDescriptionDirty || isDisplayNameDirty
 
+  const setNavGuardDirty = useSettingsDirtyStore((s) => s.setDirty)
+  const resetNavGuard = useSettingsDirtyStore((s) => s.reset)
+
+  useEffect(() => {
+    setNavGuardDirty(isDetailsDirty)
+  }, [isDetailsDirty, setNavGuardDirty])
+
+  useEffect(() => () => resetNavGuard(), [resetNavGuard])
+
   const handleSaveDetails = async () => {
     if (!selectedCredential || !isSelectedAdmin || !isDetailsDirty || updateCredential.isPending)
       return

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

@@ -1,9 +1,18 @@
 'use client'
 
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams, usePathname, useRouter } from 'next/navigation'
-import { ChevronDown, Skeleton } from '@/components/emcn'
+import {
+  Button,
+  ChevronDown,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Skeleton,
+} from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
 import { isHosted } from '@/lib/core/config/feature-flags'
@@ -23,6 +32,7 @@ import { useOrganizations } from '@/hooks/queries/organization'
 import { prefetchSubscriptionData, useSubscriptionData } from '@/hooks/queries/subscription'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
+import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
 const SKELETON_SECTIONS = [3, 2, 2] as const
 
@@ -41,6 +51,13 @@ export function SettingsSidebar({
   const router = useRouter()
 
   const queryClient = useQueryClient()
+
+  const requestNavigation = useSettingsDirtyStore((s) => s.requestNavigation)
+  const confirmNavigation = useSettingsDirtyStore((s) => s.confirmNavigation)
+  const cancelNavigation = useSettingsDirtyStore((s) => s.cancelNavigation)
+  const isDirty = useSettingsDirtyStore((s) => s.isDirty)
+  const [showDiscardDialog, setShowDiscardDialog] = useState(false)
+
   const { data: session, isPending: sessionLoading } = useSession()
   const { data: organizationsData, isLoading: orgsLoading } = useOrganizations()
   const { data: generalSettings } = useGeneralSettings()
@@ -180,8 +197,28 @@ export function SettingsSidebar({
   const { popSettingsReturnUrl, getSettingsHref } = useSettingsNavigation()
 
   const handleBack = useCallback(() => {
+    if (isDirty) {
+      setShowDiscardDialog(true)
+      return
+    }
     router.push(popSettingsReturnUrl(`/workspace/${workspaceId}/home`))
-  }, [router, popSettingsReturnUrl, workspaceId])
+  }, [router, popSettingsReturnUrl, workspaceId, isDirty])
+
+  const handleConfirmDiscard = useCallback(() => {
+    const section = confirmNavigation()
+    setShowDiscardDialog(false)
+    if (section) {
+      router.replace(getSettingsHref({ section }), { scroll: false })
+    } else {
+      // Triggered by the back button — no pending section was set
+      router.push(popSettingsReturnUrl(`/workspace/${workspaceId}/home`))
+    }
+  }, [confirmNavigation, router, getSettingsHref, popSettingsReturnUrl, workspaceId])
+
+  const handleCancelDiscard = useCallback(() => {
+    cancelNavigation()
+    setShowDiscardDialog(false)
+  }, [cancelNavigation])
 
   return (
     <>
@@ -286,11 +323,14 @@ export function SettingsSidebar({
                         className={itemClassName}
                         onMouseEnter={() => handlePrefetch(item.id)}
                         onFocus={() => handlePrefetch(item.id)}
-                        onClick={() =>
-                          router.replace(getSettingsHref({ section: item.id as SettingsSection }), {
-                            scroll: false,
-                          })
-                        }
+                        onClick={() => {
+                          const section = item.id as SettingsSection
+                          if (!requestNavigation(section)) {
+                            setShowDiscardDialog(true)
+                            return
+                          }
+                          router.replace(getSettingsHref({ section }), { scroll: false })
+                        }}
                       >
                         {content}
                       </button>
@@ -312,6 +352,25 @@ export function SettingsSidebar({
           })
         )}
       </div>
+
+      <Modal open={showDiscardDialog} onOpenChange={(open) => !open && handleCancelDiscard()}>
+        <ModalContent size='sm'>
+          <ModalHeader>Unsaved Changes</ModalHeader>
+          <ModalBody>
+            <p className='text-[var(--text-secondary)]'>
+              You have unsaved changes. Are you sure you want to discard them?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={handleCancelDiscard}>
+              Keep Editing
+            </Button>
+            <Button variant='destructive' onClick={handleConfirmDiscard}>
+              Discard Changes
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </>
   )
 }

apps/sim/hooks/queries/environment.ts

@@ -1,13 +1,11 @@
 import { createLogger } from '@sim/logger'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import type { WorkspaceEnvironmentData } from '@/lib/environment/api'
+import type { EnvironmentVariable, WorkspaceEnvironmentData } from '@/lib/environment/api'
 import { fetchPersonalEnvironment, fetchWorkspaceEnvironment } from '@/lib/environment/api'
 import { workspaceCredentialKeys } from '@/hooks/queries/credentials'
 import { API_ENDPOINTS } from '@/stores/constants'
-import type { EnvironmentVariable } from '@/stores/settings/environment'
 
-export type { WorkspaceEnvironmentData } from '@/lib/environment/api'
-export type { EnvironmentVariable } from '@/stores/settings/environment'
+export type { EnvironmentVariable, WorkspaceEnvironmentData } from '@/lib/environment/api'
 
 const logger = createLogger('EnvironmentQueries')
 

apps/sim/lib/environment/api.ts

@@ -1,5 +1,9 @@
 import { API_ENDPOINTS } from '@/stores/constants'
-import type { EnvironmentVariable } from '@/stores/settings/environment'
+
+export interface EnvironmentVariable {
+  key: string
+  value: string
+}
 
 export interface WorkspaceEnvironmentData {
   workspace: Record<string, string>

apps/sim/stores/settings/dirty/store.ts

@@ -0,0 +1,53 @@
+import { create } from 'zustand'
+import { devtools } from 'zustand/middleware'
+import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
+
+interface SettingsDirtyStore {
+  isDirty: boolean
+  pendingSection: SettingsSection | null
+  setDirty: (dirty: boolean) => void
+  /**
+   * Call before navigating to a new section. Returns `true` if navigation may
+   * proceed immediately; returns `false` if there are unsaved changes — in that
+   * case `pendingSection` is set so a confirmation dialog can be shown.
+   */
+  requestNavigation: (section: SettingsSection) => boolean
+  /** Clears dirty + pending state and returns the section to navigate to. */
+  confirmNavigation: () => SettingsSection | null
+  /** Cancels a pending navigation without clearing dirty state. */
+  cancelNavigation: () => void
+  /** Resets all state — call on component unmount. */
+  reset: () => void
+}
+
+const initialState = {
+  isDirty: false,
+  pendingSection: null as SettingsSection | null,
+}
+
+export const useSettingsDirtyStore = create<SettingsDirtyStore>()(
+  devtools(
+    (set, get) => ({
+      ...initialState,
+
+      setDirty: (dirty) => set({ isDirty: dirty }),
+
+      requestNavigation: (section) => {
+        if (!get().isDirty) return true
+        set({ pendingSection: section })
+        return false
+      },
+
+      confirmNavigation: () => {
+        const { pendingSection } = get()
+        set({ ...initialState })
+        return pendingSection
+      },
+
+      cancelNavigation: () => set({ pendingSection: null }),
+
+      reset: () => set({ ...initialState }),
+    }),
+    { name: 'settings-dirty-store' }
+  )
+)

apps/sim/stores/settings/environment/index.ts

@@ -1,9 +1,9 @@
 import { createLogger } from '@sim/logger'
 import { getMaxExecutionTimeout } from '@/lib/core/execution-limits'
+import type { EnvironmentVariable } from '@/lib/environment/api'
 import { getQueryClient } from '@/app/_shell/providers/get-query-client'
 import type { CustomToolDefinition } from '@/hooks/queries/custom-tools'
 import { environmentKeys } from '@/hooks/queries/environment'
-import type { EnvironmentVariable } from '@/stores/settings/environment'
 import { tools } from '@/tools/registry'
 import type { ToolConfig } from '@/tools/types'