Bug Fixes part1

app/components/settings/connections/ConnectionsTab.tsx

@@ -311,6 +311,24 @@ export default function ConnectionsTab() {
                     'disabled:opacity-50',
                   )}
                 />
+                <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                  <a
+                    href={`https://github.com/settings/tokens${connection.tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-purple-500 hover:underline inline-flex items-center gap-1"
+                  >
+                    Get your token
+                    <div className="i-ph:arrow-square-out w-10 h-5" />
+                  </a>
+                  <span className="mx-2">•</span>
+                  <span>
+                    Required scopes:{' '}
+                    {connection.tokenType === 'classic'
+                      ? 'repo, read:org, read:user'
+                      : 'Repository access, Organization access'}
+                  </span>
+                </div>
               </div>
             </div>
 

app/components/settings/features/FeaturesTab.tsx

@@ -1,19 +1,11 @@
-import React, { memo, useEffect, useState } from 'react';
+// Remove unused imports
+import React, { memo, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { Switch } from '~/components/ui/Switch';
 import { useSettings } from '~/lib/hooks/useSettings';
 import { classNames } from '~/utils/classNames';
 import { toast } from 'react-toastify';
 import { PromptLibrary } from '~/lib/common/prompt-library';
-import {
-  latestBranchStore,
-  autoSelectStarterTemplate,
-  enableContextOptimizationStore,
-  isLocalModelsEnabled,
-  isEventLogsEnabled,
-  promptStore as promptAtom,
-} from '~/lib/stores/settings';
-import { logStore } from '~/lib/stores/logs';
 
 interface FeatureToggle {
   id: string;
@@ -114,133 +106,85 @@ const FeatureSection = memo(
 );
 
 export default function FeaturesTab() {
-  const { autoSelectTemplate, isLatestBranch, contextOptimizationEnabled, eventLogs, isLocalModel } = useSettings();
+  const {
+    autoSelectTemplate,
+    isLatestBranch,
+    contextOptimizationEnabled,
+    eventLogs,
+    isLocalModel,
+    setAutoSelectTemplate,
+    enableLatestBranch,
+    enableContextOptimization,
+    setEventLogs,
+    enableLocalModels,
+    setPromptId,
+    promptId,
+  } = useSettings();
 
-  const getLocalStorageBoolean = (key: string, defaultValue: boolean): boolean => {
-    const value = localStorage.getItem(key);
-
-    if (value === null) {
-      return defaultValue;
-    }
-
-    try {
-      return JSON.parse(value);
-    } catch {
-      return defaultValue;
-    }
-  };
-
-  const autoSelectTemplateState = getLocalStorageBoolean('autoSelectTemplate', autoSelectTemplate);
-  const enableLatestBranchState = getLocalStorageBoolean('enableLatestBranch', isLatestBranch);
-  const contextOptimizationState = getLocalStorageBoolean('contextOptimization', contextOptimizationEnabled);
-  const eventLogsState = getLocalStorageBoolean('eventLogs', eventLogs);
-  const experimentalProvidersState = getLocalStorageBoolean('experimentalProviders', isLocalModel);
-  const promptLibraryState = getLocalStorageBoolean('promptLibrary', false);
-  const promptIdState = localStorage.getItem('promptId') ?? '';
-
-  const [autoSelectTemplateLocal, setAutoSelectTemplateLocal] = useState(autoSelectTemplateState);
-  const [enableLatestBranchLocal, setEnableLatestBranchLocal] = useState(enableLatestBranchState);
-  const [contextOptimizationLocal, setContextOptimizationLocal] = useState(contextOptimizationState);
-  const [eventLogsLocal, setEventLogsLocal] = useState(eventLogsState);
-  const [experimentalProvidersLocal, setExperimentalProvidersLocal] = useState(experimentalProvidersState);
-  const [promptLibraryLocal, setPromptLibraryLocal] = useState(promptLibraryState);
-  const [promptIdLocal, setPromptIdLocal] = useState(promptIdState);
-
-  useEffect(() => {
-    localStorage.setItem('autoSelectTemplate', JSON.stringify(autoSelectTemplateLocal));
-    localStorage.setItem('enableLatestBranch', JSON.stringify(enableLatestBranchLocal));
-    localStorage.setItem('contextOptimization', JSON.stringify(contextOptimizationLocal));
-    localStorage.setItem('eventLogs', JSON.stringify(eventLogsLocal));
-    localStorage.setItem('experimentalProviders', JSON.stringify(experimentalProvidersLocal));
-    localStorage.setItem('promptLibrary', JSON.stringify(promptLibraryLocal));
-    localStorage.setItem('promptId', promptIdLocal);
-
-    autoSelectStarterTemplate.set(autoSelectTemplateLocal);
-    latestBranchStore.set(enableLatestBranchLocal);
-    enableContextOptimizationStore.set(contextOptimizationLocal);
-    isEventLogsEnabled.set(eventLogsLocal);
-    isLocalModelsEnabled.set(experimentalProvidersLocal);
-    promptAtom.set(promptIdLocal);
-  }, [
-    autoSelectTemplateLocal,
-    enableLatestBranchLocal,
-    contextOptimizationLocal,
-    eventLogsLocal,
-    experimentalProvidersLocal,
-    promptLibraryLocal,
-    promptIdLocal,
-  ]);
-
-  const handleToggleFeature = (featureId: string, enabled: boolean) => {
-    logStore.logFeatureToggle(featureId, enabled);
-
-    switch (featureId) {
-      case 'latestBranch':
-        setEnableLatestBranchLocal(enabled);
-        latestBranchStore.set(enabled);
-        toast.success(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
-        break;
-      case 'autoSelectTemplate':
-        setAutoSelectTemplateLocal(enabled);
-        autoSelectStarterTemplate.set(enabled);
-        toast.success(`Auto template selection ${enabled ? 'enabled' : 'disabled'}`);
-        break;
-      case 'contextOptimization':
-        setContextOptimizationLocal(enabled);
-        enableContextOptimizationStore.set(enabled);
-        toast.success(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
-        break;
-      case 'localModels':
-        setExperimentalProvidersLocal(enabled);
-        isLocalModelsEnabled.set(enabled);
-        toast.success(`Experimental providers ${enabled ? 'enabled' : 'disabled'}`);
-        break;
-      case 'eventLogs':
-        setEventLogsLocal(enabled);
-        isEventLogsEnabled.set(enabled);
-        toast.success(`Event logging ${enabled ? 'enabled' : 'disabled'}`);
-        break;
-      case 'promptLibrary':
-        setPromptLibraryLocal(enabled);
-        toast.success(`Prompt Library ${enabled ? 'enabled' : 'disabled'}`);
-        break;
-    }
-  };
+  const handleToggleFeature = useCallback(
+    (id: string, enabled: boolean) => {
+      switch (id) {
+        case 'latestBranch':
+          enableLatestBranch(enabled);
+          toast.success(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        case 'autoSelectTemplate':
+          setAutoSelectTemplate(enabled);
+          toast.success(`Auto select template ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        case 'contextOptimization':
+          enableContextOptimization(enabled);
+          toast.success(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        case 'eventLogs':
+          setEventLogs(enabled);
+          toast.success(`Event logging ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        case 'localModels':
+          enableLocalModels(enabled);
+          toast.success(`Experimental providers ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        default:
+          break;
+      }
+    },
+    [enableLatestBranch, setAutoSelectTemplate, enableContextOptimization, setEventLogs, enableLocalModels],
+  );
 
-  const features: Record<'stable' | 'beta' | 'experimental', FeatureToggle[]> = {
+  const features = {
     stable: [
+      {
+        id: 'latestBranch',
+        title: 'Main Branch Updates',
+        description: 'Get the latest updates from the main branch',
+        icon: 'i-ph:git-branch',
+        enabled: isLatestBranch,
+        tooltip: 'Enable to receive updates from the main development branch',
+      },
       {
         id: 'autoSelectTemplate',
-        title: 'Auto Select Code Template',
-        description: 'Let Bolt select the best starter template for your project',
-        icon: 'i-ph:magic-wand',
-        enabled: autoSelectTemplateLocal,
-        tooltip: 'Automatically choose the most suitable template based on your project type',
+        title: 'Auto Select Template',
+        description: 'Automatically select starter template',
+        icon: 'i-ph:selection',
+        enabled: autoSelectTemplate,
+        tooltip: 'Automatically select the most appropriate starter template',
       },
       {
         id: 'contextOptimization',
         title: 'Context Optimization',
-        description: 'Optimize chat context by redacting file contents and using system prompts',
-        icon: 'i-ph:arrows-in',
-        enabled: contextOptimizationLocal,
-        tooltip: 'Improve AI responses by optimizing the context window and system prompts',
+        description: 'Optimize context for better responses',
+        icon: 'i-ph:brain',
+        enabled: contextOptimizationEnabled,
+        tooltip: 'Enable context optimization for improved AI responses',
       },
       {
         id: 'eventLogs',
         title: 'Event Logging',
         description: 'Enable detailed event logging and history',
         icon: 'i-ph:list-bullets',
-        enabled: eventLogsLocal,
+        enabled: eventLogs,
         tooltip: 'Record detailed logs of system events and user actions',
       },
-      {
-        id: 'promptLibrary',
-        title: 'Prompt Library',
-        description: 'Manage your prompt library settings',
-        icon: 'i-ph:library',
-        enabled: promptLibraryLocal,
-        tooltip: 'Enable or disable the prompt library',
-      },
     ],
     beta: [],
     experimental: [
@@ -249,7 +193,7 @@ export default function FeaturesTab() {
         title: 'Experimental Providers',
         description: 'Enable experimental providers like Ollama, LMStudio, and OpenAILike',
         icon: 'i-ph:robot',
-        enabled: experimentalProvidersLocal,
+        enabled: isLocalModel,
         experimental: true,
         tooltip: 'Try out new AI providers and models in development',
       },
@@ -319,9 +263,9 @@ export default function FeaturesTab() {
             </p>
           </div>
           <select
-            value={promptIdLocal}
+            value={promptId}
             onChange={(e) => {
-              setPromptIdLocal(e.target.value);
+              setPromptId(e.target.value);
               toast.success('Prompt template updated');
             }}
             className={classNames(

app/components/settings/providers/CloudProvidersTab.tsx

@@ -62,74 +62,73 @@ const CloudProvidersTab = () => {
   const [filteredProviders, setFilteredProviders] = useState<IProviderConfig[]>([]);
   const [categoryEnabled, setCategoryEnabled] = useState<boolean>(false);
 
-  // Effect to filter and sort providers
+  // Load and filter providers
   useEffect(() => {
     const newFilteredProviders = Object.entries(settings.providers || {})
-      .filter(([key]) => !['Ollama', 'LMStudio', 'OpenAILike'].includes(key)) // Filter out local providers
-      .map(([key, value]) => {
-        const provider = value as IProviderConfig;
-        return {
-          name: key,
-          settings: provider.settings,
-          staticModels: provider.staticModels || [],
-          getDynamicModels: provider.getDynamicModels,
-          getApiKeyLink: provider.getApiKeyLink,
-          labelForGetApiKey: provider.labelForGetApiKey,
-          icon: provider.icon,
-        } as IProviderConfig;
-      });
+      .filter(([key]) => !['Ollama', 'LMStudio', 'OpenAILike'].includes(key))
+      .map(([key, value]) => ({
+        name: key,
+        settings: value.settings,
+        staticModels: value.staticModels || [],
+        getDynamicModels: value.getDynamicModels,
+        getApiKeyLink: value.getApiKeyLink,
+        labelForGetApiKey: value.labelForGetApiKey,
+        icon: value.icon,
+      }));
 
     const sorted = newFilteredProviders.sort((a, b) => a.name.localeCompare(b.name));
-    const regular = sorted.filter((p) => !URL_CONFIGURABLE_PROVIDERS.includes(p.name));
-    const urlConfigurable = sorted.filter((p) => URL_CONFIGURABLE_PROVIDERS.includes(p.name));
+    setFilteredProviders(sorted);
 
-    setFilteredProviders([...regular, ...urlConfigurable]);
+    // Update category enabled state
+    const allEnabled = newFilteredProviders.every((p) => p.settings.enabled);
+    setCategoryEnabled(allEnabled);
   }, [settings.providers]);
 
-  // Add effect to update category toggle state based on provider states
-  useEffect(() => {
-    const newCategoryState = filteredProviders.every((p) => p.settings.enabled);
-    setCategoryEnabled(newCategoryState);
-  }, [filteredProviders]);
-
   const handleToggleCategory = useCallback(
     (enabled: boolean) => {
-      setCategoryEnabled(enabled);
+      // Update all providers
       filteredProviders.forEach((provider) => {
         settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
       });
+
+      setCategoryEnabled(enabled);
       toast.success(enabled ? 'All cloud providers enabled' : 'All cloud providers disabled');
     },
     [filteredProviders, settings],
   );
 
-  const handleToggleProvider = (provider: IProviderConfig, enabled: boolean) => {
-    settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
+  const handleToggleProvider = useCallback(
+    (provider: IProviderConfig, enabled: boolean) => {
+      // Update the provider settings in the store
+      settings.updateProviderSettings(provider.name, { ...provider.settings, enabled });
 
-    if (enabled) {
-      logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
-      toast.success(`${provider.name} enabled`);
-    } else {
-      logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
-      toast.success(`${provider.name} disabled`);
-    }
-  };
+      if (enabled) {
+        logStore.logProvider(`Provider ${provider.name} enabled`, { provider: provider.name });
+        toast.success(`${provider.name} enabled`);
+      } else {
+        logStore.logProvider(`Provider ${provider.name} disabled`, { provider: provider.name });
+        toast.success(`${provider.name} disabled`);
+      }
+    },
+    [settings],
+  );
 
-  const handleUpdateBaseUrl = (provider: IProviderConfig, baseUrl: string) => {
-    let newBaseUrl: string | undefined = baseUrl;
+  const handleUpdateBaseUrl = useCallback(
+    (provider: IProviderConfig, baseUrl: string) => {
+      const newBaseUrl: string | undefined = baseUrl.trim() || undefined;
 
-    if (newBaseUrl && newBaseUrl.trim().length === 0) {
-      newBaseUrl = undefined;
-    }
+      // Update the provider settings in the store
+      settings.updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
 
-    settings.updateProviderSettings(provider.name, { ...provider.settings, baseUrl: newBaseUrl });
-    logStore.logProvider(`Base URL updated for ${provider.name}`, {
-      provider: provider.name,
-      baseUrl: newBaseUrl,
-    });
-    toast.success(`${provider.name} base URL updated`);
-    setEditingProvider(null);
-  };
+      logStore.logProvider(`Base URL updated for ${provider.name}`, {
+        provider: provider.name,
+        baseUrl: newBaseUrl,
+      });
+      toast.success(`${provider.name} base URL updated`);
+      setEditingProvider(null);
+    },
+    [settings],
+  );
 
   return (
     <div className="space-y-6">

app/lib/hooks/useSettings.ts

@@ -12,6 +12,13 @@ import {
   tabConfigurationStore,
   updateTabConfiguration as updateTabConfig,
   resetTabConfiguration as resetTabConfig,
+  updateProviderSettings as updateProviderSettingsStore,
+  updateLatestBranch,
+  updateAutoSelectTemplate,
+  updateContextOptimization,
+  updateEventLogs,
+  updateLocalModels,
+  updatePromptId,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
@@ -64,8 +71,13 @@ export interface UseSettingsReturn {
   resetTabConfiguration: () => void;
 }
 
+// Add interface to match ProviderSetting type
+interface ProviderSettingWithIndex extends IProviderSetting {
+  [key: string]: any;
+}
+
 export function useSettings(): UseSettingsReturn {
-  const providers = useStore(providersStore) as Record<string, IProviderConfig>;
+  const providers = useStore(providersStore);
   const debug = useStore(isDebugMode);
   const eventLogs = useStore(isEventLogsEnabled);
   const promptId = useStore(promptStore);
@@ -87,16 +99,6 @@ export function useSettings(): UseSettingsReturn {
     };
   });
 
-  // writing values to cookies on change
-  useEffect(() => {
-    const providers = providersStore.get();
-    const providerSetting: Record<string, IProviderSetting> = {};
-    Object.keys(providers).forEach((provider) => {
-      providerSetting[provider] = providers[provider].settings;
-    });
-    Cookies.set('providers', JSON.stringify(providerSetting));
-  }, [providers]);
-
   useEffect(() => {
     let active = Object.entries(providers)
       .filter(([_key, provider]) => provider.settings.enabled)
@@ -118,8 +120,8 @@ export function useSettings(): UseSettingsReturn {
     });
   }, []);
 
-  const updateProviderSettings = useCallback((provider: string, config: IProviderSetting) => {
-    providersStore.setKey(provider, { settings: config } as IProviderConfig);
+  const updateProviderSettings = useCallback((provider: string, config: ProviderSettingWithIndex) => {
+    updateProviderSettingsStore(provider, config);
   }, []);
 
   const enableDebugMode = useCallback((enabled: boolean) => {
@@ -129,38 +131,33 @@ export function useSettings(): UseSettingsReturn {
   }, []);
 
   const setEventLogs = useCallback((enabled: boolean) => {
-    isEventLogsEnabled.set(enabled);
+    updateEventLogs(enabled);
     logStore.logSystem(`Event logs ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('isEventLogsEnabled', String(enabled));
   }, []);
 
   const enableLocalModels = useCallback((enabled: boolean) => {
-    isLocalModelsEnabled.set(enabled);
+    updateLocalModels(enabled);
     logStore.logSystem(`Local models ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('isLocalModelsEnabled', String(enabled));
   }, []);
 
-  const setPromptId = useCallback((promptId: string) => {
-    promptStore.set(promptId);
-    Cookies.set('promptId', promptId);
+  const setPromptId = useCallback((id: string) => {
+    updatePromptId(id);
+    logStore.logSystem(`Prompt template updated to ${id}`);
   }, []);
 
   const enableLatestBranch = useCallback((enabled: boolean) => {
-    latestBranchStore.set(enabled);
+    updateLatestBranch(enabled);
     logStore.logSystem(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('isLatestBranch', String(enabled));
   }, []);
 
   const setAutoSelectTemplate = useCallback((enabled: boolean) => {
-    autoSelectStarterTemplate.set(enabled);
+    updateAutoSelectTemplate(enabled);
     logStore.logSystem(`Auto select template ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('autoSelectTemplate', String(enabled));
   }, []);
 
   const enableContextOptimization = useCallback((enabled: boolean) => {
-    enableContextOptimizationStore.set(enabled);
+    updateContextOptimization(enabled);
     logStore.logSystem(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
-    Cookies.set('contextOptimizationEnabled', String(enabled));
   }, []);
 
   const setTheme = useCallback(
@@ -191,6 +188,18 @@ export function useSettings(): UseSettingsReturn {
     [saveSettings],
   );
 
+  // Fix the providers cookie sync
+  useEffect(() => {
+    const providers = providersStore.get();
+    const providerSetting: Record<string, { enabled: boolean }> = {};
+    Object.keys(providers).forEach((provider) => {
+      providerSetting[provider] = {
+        enabled: providers[provider].settings.enabled || false, // Add fallback for undefined
+      };
+    });
+    Cookies.set('providers', JSON.stringify(providerSetting));
+  }, [providers]);
+
   return {
     ...settings,
     providers,

app/lib/stores/settings.ts

@@ -59,40 +59,142 @@ export const shortcutsStore = map<Shortcuts>({
   },
 });
 
-const initialProviderSettings: ProviderSetting = {};
-PROVIDER_LIST.forEach((provider) => {
-  initialProviderSettings[provider.name] = {
-    ...provider,
+// Create a single key for provider settings
+const PROVIDER_SETTINGS_KEY = 'provider_settings';
+
+// Initialize provider settings from both localStorage and defaults
+const getInitialProviderSettings = (): ProviderSetting => {
+  const savedSettings = localStorage.getItem(PROVIDER_SETTINGS_KEY);
+  const initialSettings: ProviderSetting = {};
+
+  // Start with default settings
+  PROVIDER_LIST.forEach((provider) => {
+    initialSettings[provider.name] = {
+      ...provider,
+      settings: {
+        enabled: true,
+      },
+    };
+  });
+
+  // Override with saved settings if they exist
+  if (savedSettings) {
+    try {
+      const parsed = JSON.parse(savedSettings);
+      Object.entries(parsed).forEach(([key, value]) => {
+        if (initialSettings[key]) {
+          initialSettings[key].settings = (value as IProviderConfig).settings;
+        }
+      });
+    } catch (error) {
+      console.error('Error parsing saved provider settings:', error);
+    }
+  }
+
+  return initialSettings;
+};
+
+export const providersStore = map<ProviderSetting>(getInitialProviderSettings());
+
+// Create a function to update provider settings that handles both store and persistence
+export const updateProviderSettings = (provider: string, settings: ProviderSetting) => {
+  const currentSettings = providersStore.get();
+
+  // Create new provider config with updated settings
+  const updatedProvider = {
+    ...currentSettings[provider],
     settings: {
-      enabled: true,
+      ...currentSettings[provider].settings,
+      ...settings,
     },
   };
-});
 
-//TODO: need to create one single map for all these flags
+  // Update the store with new settings
+  providersStore.setKey(provider, updatedProvider);
 
-export const providersStore = map<ProviderSetting>(initialProviderSettings);
+  // Save to localStorage
+  const allSettings = providersStore.get();
+  localStorage.setItem(PROVIDER_SETTINGS_KEY, JSON.stringify(allSettings));
+};
 
 export const isDebugMode = atom(false);
 
-// Initialize event logs from cookie or default to false
-const savedEventLogs = Cookies.get('isEventLogsEnabled');
-export const isEventLogsEnabled = atom(savedEventLogs === 'true');
+// Define keys for localStorage
+const SETTINGS_KEYS = {
+  LATEST_BRANCH: 'isLatestBranch',
+  AUTO_SELECT_TEMPLATE: 'autoSelectTemplate',
+  CONTEXT_OPTIMIZATION: 'contextOptimizationEnabled',
+  EVENT_LOGS: 'isEventLogsEnabled',
+  LOCAL_MODELS: 'isLocalModelsEnabled',
+  PROMPT_ID: 'promptId',
+} as const;
+
+// Initialize settings from localStorage or defaults
+const getInitialSettings = () => {
+  const getStoredBoolean = (key: string, defaultValue: boolean): boolean => {
+    const stored = localStorage.getItem(key);
+
+    if (stored === null) {
+      return defaultValue;
+    }
+
+    try {
+      return JSON.parse(stored);
+    } catch {
+      return defaultValue;
+    }
+  };
+
+  return {
+    latestBranch: getStoredBoolean(SETTINGS_KEYS.LATEST_BRANCH, false),
+    autoSelectTemplate: getStoredBoolean(SETTINGS_KEYS.AUTO_SELECT_TEMPLATE, false),
+    contextOptimization: getStoredBoolean(SETTINGS_KEYS.CONTEXT_OPTIMIZATION, false),
+    eventLogs: getStoredBoolean(SETTINGS_KEYS.EVENT_LOGS, true),
+    localModels: getStoredBoolean(SETTINGS_KEYS.LOCAL_MODELS, true),
+    promptId: localStorage.getItem(SETTINGS_KEYS.PROMPT_ID) || 'default',
+  };
+};
+
+// Initialize stores with persisted values
+const initialSettings = getInitialSettings();
+
+export const latestBranchStore = atom<boolean>(initialSettings.latestBranch);
+export const autoSelectStarterTemplate = atom<boolean>(initialSettings.autoSelectTemplate);
+export const enableContextOptimizationStore = atom<boolean>(initialSettings.contextOptimization);
+export const isEventLogsEnabled = atom<boolean>(initialSettings.eventLogs);
+export const isLocalModelsEnabled = atom<boolean>(initialSettings.localModels);
+export const promptStore = atom<string>(initialSettings.promptId);
 
-// Local models settings
-export const isLocalModelsEnabled = atom(true);
+// Helper functions to update settings with persistence
+export const updateLatestBranch = (enabled: boolean) => {
+  latestBranchStore.set(enabled);
+  localStorage.setItem(SETTINGS_KEYS.LATEST_BRANCH, JSON.stringify(enabled));
+};
 
-// Prompt settings
-export const promptStore = atom<string>('default');
+export const updateAutoSelectTemplate = (enabled: boolean) => {
+  autoSelectStarterTemplate.set(enabled);
+  localStorage.setItem(SETTINGS_KEYS.AUTO_SELECT_TEMPLATE, JSON.stringify(enabled));
+};
 
-// Branch settings
-export const latestBranchStore = atom(false);
+export const updateContextOptimization = (enabled: boolean) => {
+  enableContextOptimizationStore.set(enabled);
+  localStorage.setItem(SETTINGS_KEYS.CONTEXT_OPTIMIZATION, JSON.stringify(enabled));
+};
 
-// Template settings
-export const autoSelectStarterTemplate = atom(false);
+export const updateEventLogs = (enabled: boolean) => {
+  isEventLogsEnabled.set(enabled);
+  localStorage.setItem(SETTINGS_KEYS.EVENT_LOGS, JSON.stringify(enabled));
+};
 
-// Context optimization settings
-export const enableContextOptimizationStore = atom(false);
+export const updateLocalModels = (enabled: boolean) => {
+  isLocalModelsEnabled.set(enabled);
+  localStorage.setItem(SETTINGS_KEYS.LOCAL_MODELS, JSON.stringify(enabled));
+};
+
+export const updatePromptId = (id: string) => {
+  promptStore.set(id);
+  localStorage.setItem(SETTINGS_KEYS.PROMPT_ID, id);
+};
 
 // Initialize tab configuration from cookie or default
 const savedTabConfig = Cookies.get('tabConfiguration');