Merge branch 'main' into diff-view-v2

app/components/@settings/core/ControlPanel.tsx

@@ -263,6 +263,27 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
     },
   };
 
+  // Reset to default view when modal opens/closes
+  useEffect(() => {
+    if (!open) {
+      // Reset when closing
+      setActiveTab(null);
+      setLoadingTab(null);
+      setShowTabManagement(false);
+    } else {
+      // When opening, set to null to show the main view
+      setActiveTab(null);
+    }
+  }, [open]);
+
+  // Handle closing
+  const handleClose = () => {
+    setActiveTab(null);
+    setLoadingTab(null);
+    setShowTabManagement(false);
+    onClose();
+  };
+
   // Handlers
   const handleBack = () => {
     if (showTabManagement) {
@@ -405,8 +426,8 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
           <RadixDialog.Content
             aria-describedby={undefined}
-            onEscapeKeyDown={onClose}
-            onPointerDownOutside={onClose}
+            onEscapeKeyDown={handleClose}
+            onPointerDownOutside={handleClose}
             className="relative z-[101]"
           >
             <motion.div
@@ -461,7 +482,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
 
                     {/* Close Button */}
                     <button
-                      onClick={onClose}
+                      onClick={handleClose}
                       className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
                     >
                       <div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />

app/components/@settings/shared/components/TabManagement.tsx

@@ -1,13 +1,14 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useStore } from '@nanostores/react';
-import { Switch } from '@radix-ui/react-switch';
+import { Switch } from '~/components/ui/Switch';
 import { classNames } from '~/utils/classNames';
 import { tabConfigurationStore } from '~/lib/stores/settings';
 import { TAB_LABELS } from '~/components/@settings/core/constants';
 import type { TabType } from '~/components/@settings/core/types';
 import { toast } from 'react-toastify';
 import { TbLayoutGrid } from 'react-icons/tb';
+import { useSettingsStore } from '~/lib/stores/settings';
 
 // Define tab icons mapping
 const TAB_ICONS: Record<TabType, string> = {
@@ -55,6 +56,7 @@ const BetaLabel = () => (
 export const TabManagement = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const tabConfiguration = useStore(tabConfigurationStore);
+  const { setSelectedTab } = useSettingsStore();
 
   const handleTabVisibilityChange = (tabId: TabType, checked: boolean) => {
     // Get current tab configuration
@@ -126,6 +128,13 @@ export const TabManagement = () => {
   // Filter tabs based on search query
   const filteredTabs = allTabs.filter((tab) => TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()));
 
+  useEffect(() => {
+    // Reset to first tab when component unmounts
+    return () => {
+      setSelectedTab('user'); // Reset to user tab when unmounting
+    };
+  }, [setSelectedTab]);
+
   return (
     <div className="space-y-6">
       <motion.div
@@ -177,92 +186,193 @@ export const TabManagement = () => {
 
         {/* Tab Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {filteredTabs.map((tab, index) => (
-            <motion.div
-              key={tab.id}
-              className={classNames(
-                'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
-                'bg-bolt-elements-background-depth-2',
-                'hover:bg-bolt-elements-background-depth-3',
-                'transition-all duration-200',
-                'relative overflow-hidden group',
-              )}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: index * 0.1 }}
-              whileHover={{ scale: 1.02 }}
-            >
-              {/* Status Badges */}
-              <div className="absolute top-2 right-2 flex gap-1">
-                {DEFAULT_USER_TABS.includes(tab.id) && (
-                  <span className="px-2 py-0.5 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium">
+          {/* Default Section Header */}
+          {filteredTabs.some((tab) => DEFAULT_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-4 mb-2">
+              <div className="i-ph:star-fill w-4 h-4 text-purple-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Default Tabs</span>
+            </div>
+          )}
+
+          {/* Default Tabs */}
+          {filteredTabs
+            .filter((tab) => DEFAULT_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
+                )}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-purple-500/10 text-purple-500 font-medium mr-2">
                     Default
                   </span>
+                </div>
+
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
+                    </div>
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          const isDisabled =
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
+
+                          if (!isDisabled) {
+                            handleTabVisibilityChange(tab.id, checked);
+                          }
+                        }}
+                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
+                          'opacity-50 pointer-events-none':
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
+                        })}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
+
+          {/* Optional Section Header */}
+          {filteredTabs.some((tab) => OPTIONAL_USER_TABS.includes(tab.id)) && (
+            <div className="col-span-full flex items-center gap-2 mt-8 mb-2">
+              <div className="i-ph:plus-circle-fill w-4 h-4 text-blue-500" />
+              <span className="text-sm font-medium text-bolt-elements-textPrimary">Optional Tabs</span>
+            </div>
+          )}
+
+          {/* Optional Tabs */}
+          {filteredTabs
+            .filter((tab) => OPTIONAL_USER_TABS.includes(tab.id))
+            .map((tab, index) => (
+              <motion.div
+                key={tab.id}
+                className={classNames(
+                  'rounded-lg border bg-bolt-elements-background text-bolt-elements-textPrimary',
+                  'bg-bolt-elements-background-depth-2',
+                  'hover:bg-bolt-elements-background-depth-3',
+                  'transition-all duration-200',
+                  'relative overflow-hidden group',
                 )}
-                {OPTIONAL_USER_TABS.includes(tab.id) && (
-                  <span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium">
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                whileHover={{ scale: 1.02 }}
+              >
+                {/* Status Badges */}
+                <div className="absolute top-1 right-1.5 flex gap-1">
+                  <span className="px-1.5 py-0.25 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium mr-2">
                     Optional
                   </span>
-                )}
-              </div>
+                </div>
 
-              <div className="flex items-start gap-4 p-4">
-                <motion.div
-                  className={classNames(
-                    'w-10 h-10 flex items-center justify-center rounded-xl',
-                    'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
-                    'transition-all duration-200',
-                    tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
-                  )}
-                  whileHover={{ scale: 1.1 }}
-                  whileTap={{ scale: 0.9 }}
-                >
-                  <div className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}>
-                    <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
-                  </div>
-                </motion.div>
-
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center justify-between gap-4">
-                    <div>
-                      <div className="flex items-center gap-2">
-                        <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
-                          {TAB_LABELS[tab.id]}
-                        </h4>
-                        {BETA_TABS.has(tab.id) && <BetaLabel />}
-                      </div>
-                      <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
-                        {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
-                      </p>
+                <div className="flex items-start gap-4 p-4">
+                  <motion.div
+                    className={classNames(
+                      'w-10 h-10 flex items-center justify-center rounded-xl',
+                      'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+                      'transition-all duration-200',
+                      tab.visible ? 'text-purple-500' : 'text-bolt-elements-textSecondary',
+                    )}
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div
+                      className={classNames('w-6 h-6', 'transition-transform duration-200', 'group-hover:rotate-12')}
+                    >
+                      <div className={classNames(TAB_ICONS[tab.id], 'w-full h-full')} />
                     </div>
-                    <Switch
-                      checked={tab.visible}
-                      onCheckedChange={(checked) => handleTabVisibilityChange(tab.id, checked)}
-                      disabled={!DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id)}
-                      className={classNames(
-                        'relative inline-flex h-5 w-9 items-center rounded-full',
-                        'transition-colors duration-200',
-                        tab.visible ? 'bg-purple-500' : 'bg-bolt-elements-background-depth-4',
-                        {
-                          'opacity-50 cursor-not-allowed':
+                  </motion.div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+                            {TAB_LABELS[tab.id]}
+                          </h4>
+                          {BETA_TABS.has(tab.id) && <BetaLabel />}
+                        </div>
+                        <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                          {tab.visible ? 'Visible in user mode' : 'Hidden in user mode'}
+                        </p>
+                      </div>
+                      <Switch
+                        checked={tab.visible}
+                        onCheckedChange={(checked) => {
+                          const isDisabled =
+                            !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id);
+
+                          if (!isDisabled) {
+                            handleTabVisibilityChange(tab.id, checked);
+                          }
+                        }}
+                        className={classNames('data-[state=checked]:bg-purple-500 ml-4', {
+                          'opacity-50 pointer-events-none':
                             !DEFAULT_USER_TABS.includes(tab.id) && !OPTIONAL_USER_TABS.includes(tab.id),
-                        },
-                      )}
-                    />
+                        })}
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <motion.div
-                className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
-                animate={{
-                  borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
-                  scale: tab.visible ? 1 : 0.98,
-                }}
-                transition={{ duration: 0.2 }}
-              />
-            </motion.div>
-          ))}
+                <motion.div
+                  className="absolute inset-0 border-2 border-purple-500/0 rounded-lg pointer-events-none"
+                  animate={{
+                    borderColor: tab.visible ? 'rgba(168, 85, 247, 0.2)' : 'rgba(168, 85, 247, 0)',
+                    scale: tab.visible ? 1 : 0.98,
+                  }}
+                  transition={{ duration: 0.2 }}
+                />
+              </motion.div>
+            ))}
         </div>
       </motion.div>
     </div>

app/components/@settings/tabs/debug/DebugTab.tsx

@@ -238,7 +238,7 @@ export default function DebugTab() {
     performance: false,
   });
 
-  const { isLocalModel, providers } = useSettings();
+  const { providers } = useSettings();
 
   // Subscribe to logStore updates
   const logs = useStore(logStore.logs);
@@ -1103,15 +1103,18 @@ export default function DebugTab() {
   // Add Ollama health check function
   const checkOllamaStatus = useCallback(async () => {
     try {
+      const ollamaProvider = providers?.Ollama;
+      const baseUrl = ollamaProvider?.settings?.baseUrl || 'http://127.0.0.1:11434';
+
       // First check if service is running
-      const versionResponse = await fetch('http://127.0.0.1:11434/api/version');
+      const versionResponse = await fetch(`${baseUrl}/api/version`);
 
       if (!versionResponse.ok) {
         throw new Error('Service not running');
       }
 
       // Then fetch installed models
-      const modelsResponse = await fetch('http://127.0.0.1:11434/api/tags');
+      const modelsResponse = await fetch(`${baseUrl}/api/tags`);
 
       const modelsData = (await modelsResponse.json()) as {
         models: Array<{ name: string; size: string; quantization: string }>;
@@ -1130,18 +1133,24 @@ export default function DebugTab() {
         models: undefined,
       });
     }
-  }, []);
+  }, [providers]);
 
-  // Monitor isLocalModel changes and check status periodically
+  // Monitor Ollama provider status and check periodically
   useEffect(() => {
-    // Check immediately when isLocalModel changes
-    checkOllamaStatus();
+    const ollamaProvider = providers?.Ollama;
 
-    // Set up periodic checks every 10 seconds
-    const intervalId = setInterval(checkOllamaStatus, 10000);
+    if (ollamaProvider?.settings?.enabled) {
+      // Check immediately when provider is enabled
+      checkOllamaStatus();
 
-    return () => clearInterval(intervalId);
-  }, [isLocalModel, checkOllamaStatus]);
+      // Set up periodic checks every 10 seconds
+      const intervalId = setInterval(checkOllamaStatus, 10000);
+
+      return () => clearInterval(intervalId);
+    }
+
+    return undefined;
+  }, [providers, checkOllamaStatus]);
 
   // Replace the existing export button with this new component
   const ExportButton = () => {
@@ -1219,15 +1228,6 @@ export default function DebugTab() {
     const ollamaProvider = providers?.Ollama;
     const isOllamaEnabled = ollamaProvider?.settings?.enabled;
 
-    if (!isLocalModel) {
-      return {
-        status: 'Disabled',
-        color: 'text-red-500',
-        bgColor: 'bg-red-500',
-        message: 'Local models are disabled in settings',
-      };
-    }
-
     if (!isOllamaEnabled) {
       return {
         status: 'Disabled',
@@ -1270,60 +1270,32 @@ export default function DebugTab() {
     <div className="flex flex-col gap-6 max-w-7xl mx-auto p-4">
       {/* Quick Stats Banner */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        {/* Ollama Service Status Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        {/* Errors Card */}
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
-            <div className="i-ph:robot text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Ollama Service</div>
+            <div className="i-ph:warning-octagon text-purple-500 w-4 h-4" />
+            <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
           </div>
           <div className="flex items-center gap-2 mt-2">
-            <div
-              className={classNames('w-2 h-2 rounded-full animate-pulse', status.bgColor, {
-                'shadow-lg shadow-green-500/20': status.status === 'Running',
-                'shadow-lg shadow-red-500/20': status.status === 'Not Running',
-              })}
-            />
-            <span className={classNames('text-sm font-medium flex items-center gap-1.5', status.color)}>
-              {status.status === 'Running' && <div className="i-ph:check-circle-fill w-3.5 h-3.5" />}
-              {status.status === 'Not Running' && <div className="i-ph:x-circle-fill w-3.5 h-3.5" />}
-              {status.status === 'Disabled' && <div className="i-ph:prohibit-fill w-3.5 h-3.5" />}
-              {status.status}
+            <span
+              className={classNames('text-2xl font-semibold', errorLogs.length > 0 ? 'text-red-500' : 'text-green-500')}
+            >
+              {errorLogs.length}
             </span>
           </div>
           <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
             <div
-              className={classNames('w-3.5 h-3.5', {
-                'i-ph:info text-green-500': status.status === 'Running',
-                'i-ph:warning text-red-500': status.status === 'Not Running' || status.status === 'Disabled',
-              })}
+              className={classNames(
+                'w-3.5 h-3.5',
+                errorLogs.length > 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
+              )}
             />
-            {status.message}
-          </div>
-          {ollamaStatus.models && ollamaStatus.models.length > 0 && (
-            <div className="mt-3 space-y-1 border-t border-[#E5E5E5] dark:border-[#1A1A1A] pt-2">
-              <div className="text-xs font-medium text-bolt-elements-textSecondary flex items-center gap-1.5">
-                <div className="i-ph:cube-duotone w-3.5 h-3.5 text-purple-500" />
-                Installed Models
-              </div>
-              {ollamaStatus.models.map((model) => (
-                <div key={model.name} className="text-xs text-bolt-elements-textSecondary flex items-center gap-2 pl-5">
-                  <div className="i-ph:cube w-3 h-3 text-purple-500/70" />
-                  <span className="font-mono">{model.name}</span>
-                  <span className="text-bolt-elements-textTertiary">
-                    ({Math.round(parseInt(model.size) / 1024 / 1024)}MB, {model.quantization})
-                  </span>
-                </div>
-              ))}
-            </div>
-          )}
-          <div className="text-xs text-bolt-elements-textTertiary mt-3 flex items-center gap-1.5">
-            <div className="i-ph:clock w-3 h-3" />
-            Last checked: {ollamaStatus.lastChecked.toLocaleTimeString()}
+            {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
           </div>
         </div>
 
         {/* Memory Usage Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
             <div className="i-ph:cpu text-purple-500 w-4 h-4" />
             <div className="text-sm text-bolt-elements-textSecondary">Memory Usage</div>
@@ -1360,7 +1332,7 @@ export default function DebugTab() {
         </div>
 
         {/* Page Load Time Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
             <div className="i-ph:timer text-purple-500 w-4 h-4" />
             <div className="text-sm text-bolt-elements-textSecondary">Page Load Time</div>
@@ -1386,7 +1358,7 @@ export default function DebugTab() {
         </div>
 
         {/* Network Speed Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
+        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[180px] flex flex-col">
           <div className="flex items-center gap-2">
             <div className="i-ph:wifi-high text-purple-500 w-4 h-4" />
             <div className="text-sm text-bolt-elements-textSecondary">Network Speed</div>
@@ -1411,27 +1383,80 @@ export default function DebugTab() {
           </div>
         </div>
 
-        {/* Errors Card */}
-        <div className="p-4 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200">
-          <div className="flex items-center gap-2">
-            <div className="i-ph:warning-octagon text-purple-500 w-4 h-4" />
-            <div className="text-sm text-bolt-elements-textSecondary">Errors</div>
-          </div>
-          <div className="flex items-center gap-2 mt-2">
-            <span
-              className={classNames('text-2xl font-semibold', errorLogs.length > 0 ? 'text-red-500' : 'text-green-500')}
-            >
-              {errorLogs.length}
-            </span>
+        {/* Ollama Service Card - Now spans all 4 columns */}
+        <div className="md:col-span-4 p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-purple-500/30 transition-all duration-200 h-[260px] flex flex-col">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="i-ph:robot text-purple-500 w-5 h-5" />
+              <div>
+                <div className="text-base font-medium text-bolt-elements-textPrimary">Ollama Service</div>
+                <div className="text-xs text-bolt-elements-textSecondary mt-0.5">{status.message}</div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-bolt-elements-background-depth-3">
+                <div
+                  className={classNames('w-2 h-2 rounded-full animate-pulse', status.bgColor, {
+                    'shadow-lg shadow-green-500/20': status.status === 'Running',
+                    'shadow-lg shadow-red-500/20': status.status === 'Not Running',
+                  })}
+                />
+                <span className={classNames('text-xs font-medium flex items-center gap-1', status.color)}>
+                  {status.status}
+                </span>
+              </div>
+              <div className="text-[10px] text-bolt-elements-textTertiary flex items-center gap-1.5">
+                <div className="i-ph:clock w-3 h-3" />
+                {ollamaStatus.lastChecked.toLocaleTimeString()}
+              </div>
+            </div>
           </div>
-          <div className="text-xs text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
-            <div
-              className={classNames(
-                'w-3.5 h-3.5',
-                errorLogs.length > 0 ? 'i-ph:warning text-red-500' : 'i-ph:check-circle text-green-500',
-              )}
-            />
-            {errorLogs.length > 0 ? 'Errors detected' : 'No errors detected'}
+
+          <div className="mt-6 flex-1 min-h-0 flex flex-col">
+            {status.status === 'Running' && ollamaStatus.models && ollamaStatus.models.length > 0 ? (
+              <>
+                <div className="text-xs font-medium text-bolt-elements-textSecondary flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <div className="i-ph:cube-duotone w-4 h-4 text-purple-500" />
+                    <span>Installed Models</span>
+                    <Badge variant="secondary" className="ml-1">
+                      {ollamaStatus.models.length}
+                    </Badge>
+                  </div>
+                </div>
+                <div className="overflow-y-auto flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-600">
+                  <div className="grid grid-cols-2 gap-3 pr-2">
+                    {ollamaStatus.models.map((model) => (
+                      <div
+                        key={model.name}
+                        className="text-sm bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4 rounded-lg px-4 py-3 flex items-center justify-between transition-colors group"
+                      >
+                        <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                          <div className="i-ph:cube w-4 h-4 text-purple-500/70 group-hover:text-purple-500 transition-colors" />
+                          <span className="font-mono truncate">{model.name}</span>
+                        </div>
+                        <Badge variant="outline" className="ml-2 text-xs font-mono">
+                          {Math.round(parseInt(model.size) / 1024 / 1024)}MB
+                        </Badge>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="flex-1 flex items-center justify-center">
+                <div className="flex flex-col items-center gap-3 max-w-[280px] text-center">
+                  <div
+                    className={classNames('w-12 h-12', {
+                      'i-ph:warning-circle text-red-500/80':
+                        status.status === 'Not Running' || status.status === 'Disabled',
+                      'i-ph:cube-duotone text-purple-500/80': status.status === 'Running',
+                    })}
+                  />
+                  <span className="text-sm text-bolt-elements-textSecondary">{status.message}</span>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>

app/components/@settings/tabs/features/FeaturesTab.tsx

@@ -123,23 +123,23 @@ export default function FeaturesTab() {
   React.useEffect(() => {
     // Only set defaults if values are undefined
     if (isLatestBranch === undefined) {
-      enableLatestBranch(true);
+      enableLatestBranch(false); // Default: OFF - Don't auto-update from main branch
     }
 
     if (contextOptimizationEnabled === undefined) {
-      enableContextOptimization(true);
+      enableContextOptimization(true); // Default: ON - Enable context optimization
     }
 
     if (autoSelectTemplate === undefined) {
-      setAutoSelectTemplate(true);
+      setAutoSelectTemplate(true); // Default: ON - Enable auto-select templates
     }
 
     if (promptId === undefined) {
-      setPromptId('optimized');
+      setPromptId('default'); // Default: 'default'
     }
 
     if (eventLogs === undefined) {
-      setEventLogs(true);
+      setEventLogs(true); // Default: ON - Enable event logging
     }
   }, []); // Only run once on component mount
 

app/components/@settings/tabs/profile/ProfileTab.tsx

@@ -1,13 +1,23 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { useStore } from '@nanostores/react';
 import { classNames } from '~/utils/classNames';
 import { profileStore, updateProfile } from '~/lib/stores/profile';
 import { toast } from 'react-toastify';
+import { debounce } from '~/utils/debounce';
 
 export default function ProfileTab() {
   const profile = useStore(profileStore);
   const [isUploading, setIsUploading] = useState(false);
 
+  // Create debounced update functions
+  const debouncedUpdate = useCallback(
+    debounce((field: 'username' | 'bio', value: string) => {
+      updateProfile({ [field]: value });
+      toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
+    }, 1000),
+    [],
+  );
+
   const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
 
@@ -42,14 +52,11 @@ export default function ProfileTab() {
   };
 
   const handleProfileUpdate = (field: 'username' | 'bio', value: string) => {
+    // Update the store immediately for UI responsiveness
     updateProfile({ [field]: value });
 
-    // Only show toast for completed typing (after 1 second of no typing)
-    const debounceToast = setTimeout(() => {
-      toast.success(`${field.charAt(0).toUpperCase() + field.slice(1)} updated`);
-    }, 1000);
-
-    return () => clearTimeout(debounceToast);
+    // Debounce the toast notification
+    debouncedUpdate(field, value);
   };
 
   return (

app/components/@settings/tabs/providers/local/LocalProvidersTab.tsx

@@ -471,6 +471,60 @@ export default function LocalProvidersTab() {
                 />
               </div>
 
+              {/* URL Configuration Section */}
+              <AnimatePresence>
+                {provider.settings.enabled && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    exit={{ opacity: 0, height: 0 }}
+                    className="mt-4"
+                  >
+                    <div className="flex flex-col gap-2">
+                      <label className="text-sm text-bolt-elements-textSecondary">API Endpoint</label>
+                      {editingProvider === provider.name ? (
+                        <input
+                          type="text"
+                          defaultValue={provider.settings.baseUrl || OLLAMA_API_URL}
+                          placeholder="Enter Ollama base URL"
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm',
+                            'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                            'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                            'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+                            'transition-all duration-200',
+                          )}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              handleUpdateBaseUrl(provider, e.currentTarget.value);
+                            } else if (e.key === 'Escape') {
+                              setEditingProvider(null);
+                            }
+                          }}
+                          onBlur={(e) => handleUpdateBaseUrl(provider, e.target.value)}
+                          autoFocus
+                        />
+                      ) : (
+                        <div
+                          onClick={() => setEditingProvider(provider.name)}
+                          className={classNames(
+                            'w-full px-3 py-2 rounded-lg text-sm cursor-pointer',
+                            'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+                            'hover:border-purple-500/30 hover:bg-bolt-elements-background-depth-4',
+                            'transition-all duration-200',
+                          )}
+                        >
+                          <div className="flex items-center gap-2 text-bolt-elements-textSecondary">
+                            <div className="i-ph:link text-sm" />
+                            <span>{provider.settings.baseUrl || OLLAMA_API_URL}</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
               {/* Ollama Models Section */}
               {provider.settings.enabled && (
                 <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="mt-6 space-y-4">
@@ -505,7 +559,19 @@ export default function LocalProvidersTab() {
                       <div className="text-center py-8 text-bolt-elements-textSecondary">
                         <div className="i-ph:cube-transparent text-4xl mx-auto mb-2" />
                         <p>No models installed yet</p>
-                        <p className="text-sm">Install your first model below</p>
+                        <p className="text-sm text-bolt-elements-textTertiary px-1">
+                          Browse models at{' '}
+                          <a
+                            href="https://ollama.com/library"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-purple-500 hover:underline inline-flex items-center gap-0.5 text-base font-medium"
+                          >
+                            ollama.com/library
+                            <div className="i-ph:arrow-square-out text-xs" />
+                          </a>{' '}
+                          and copy model names to install
+                        </p>
                       </div>
                     ) : (
                       ollamaModels.map((model) => (

app/components/@settings/tabs/providers/local/OllamaModelInstaller.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { classNames } from '~/utils/classNames';
 import { Progress } from '~/components/ui/Progress';
 import { useToast } from '~/components/ui/use-toast';
+import { useSettings } from '~/lib/hooks/useSettings';
 
 interface OllamaModelInstallerProps {
   onModelInstalled: () => void;
@@ -141,11 +142,15 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [models, setModels] = useState<ModelInfo[]>(POPULAR_MODELS);
   const { toast } = useToast();
+  const { providers } = useSettings();
+
+  // Get base URL from provider settings
+  const baseUrl = providers?.Ollama?.settings?.baseUrl || 'http://127.0.0.1:11434';
 
   // Function to check installed models and their versions
   const checkInstalledModels = async () => {
     try {
-      const response = await fetch('http://127.0.0.1:11434/api/tags', {
+      const response = await fetch(`${baseUrl}/api/tags`, {
         method: 'GET',
       });
 
@@ -181,7 +186,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
   // Check installed models on mount and after installation
   useEffect(() => {
     checkInstalledModels();
-  }, []);
+  }, [baseUrl]);
 
   const handleCheckUpdates = async () => {
     setIsChecking(true);
@@ -224,7 +229,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
       setModelString('');
       setSearchQuery('');
 
-      const response = await fetch('http://127.0.0.1:11434/api/pull', {
+      const response = await fetch(`${baseUrl}/api/pull`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -302,7 +307,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
     try {
       setModels((prev) => prev.map((m) => (m.name === modelToUpdate ? { ...m, status: 'updating' } : m)));
 
-      const response = await fetch('http://127.0.0.1:11434/api/pull', {
+      const response = await fetch(`${baseUrl}/api/pull`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -429,16 +434,16 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
               }}
               disabled={isInstalling}
             />
-            <p className="text-xs text-bolt-elements-textTertiary px-1">
+            <p className="text-sm text-bolt-elements-textSecondary px-1">
               Browse models at{' '}
               <a
                 href="https://ollama.com/library"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-purple-500 hover:underline inline-flex items-center gap-0.5"
+                className="text-purple-500 hover:underline inline-flex items-center gap-1 text-base font-medium"
               >
                 ollama.com/library
-                <div className="i-ph:arrow-square-out text-[10px]" />
+                <div className="i-ph:arrow-square-out text-sm" />
               </a>{' '}
               and copy model names to install
             </p>
@@ -448,10 +453,11 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
           onClick={() => handleInstallModel(modelString)}
           disabled={!modelString || isInstalling}
           className={classNames(
-            'rounded-xl px-6 py-3',
-            'bg-purple-500 text-white',
+            'rounded-lg px-4 py-2',
+            'bg-purple-500 text-white text-sm',
             'hover:bg-purple-600',
             'transition-all duration-200',
+            'flex items-center gap-2',
             { 'opacity-50 cursor-not-allowed': !modelString || isInstalling },
           )}
           whileHover={{ scale: 1.02 }}
@@ -459,7 +465,7 @@ export default function OllamaModelInstaller({ onModelInstalled }: OllamaModelIn
         >
           {isInstalling ? (
             <div className="flex items-center gap-2">
-              <div className="i-ph:spinner-gap-bold animate-spin" />
+              <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
               <span>Installing...</span>
             </div>
           ) : (

app/components/@settings/tabs/settings/SettingsTab.tsx

@@ -3,21 +3,9 @@ import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
 import { classNames } from '~/utils/classNames';
 import { Switch } from '~/components/ui/Switch';
-import { themeStore, kTheme } from '~/lib/stores/theme';
 import type { UserProfile } from '~/components/@settings/core/types';
-import { useStore } from '@nanostores/react';
-import { shortcutsStore } from '~/lib/stores/settings';
 import { isMac } from '~/utils/os';
 
-// Helper to format shortcut key display
-const formatShortcutKey = (key: string) => {
-  if (key === '`') {
-    return '`';
-  }
-
-  return key.toUpperCase();
-};
-
 // Helper to get modifier key symbols/text
 const getModifierSymbol = (modifier: string): string => {
   switch (modifier) {
@@ -25,8 +13,6 @@ const getModifierSymbol = (modifier: string): string => {
       return isMac ? '⌘' : 'Win';
     case 'alt':
       return isMac ? '⌥' : 'Alt';
-    case 'ctrl':
-      return isMac ? '⌃' : 'Ctrl';
     case 'shift':
       return '⇧';
     default:
@@ -41,7 +27,6 @@ export default function SettingsTab() {
     return saved
       ? JSON.parse(saved)
       : {
-          theme: 'system',
           notifications: true,
           language: 'en',
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -52,22 +37,6 @@ export default function SettingsTab() {
     setCurrentTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
   }, []);
 
-  // Apply theme when settings changes
-  useEffect(() => {
-    if (settings.theme === 'system') {
-      // Remove theme override
-      localStorage.removeItem(kTheme);
-
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      document.querySelector('html')?.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-      themeStore.set(prefersDark ? 'dark' : 'light');
-    } else {
-      themeStore.set(settings.theme);
-      localStorage.setItem(kTheme, settings.theme);
-      document.querySelector('html')?.setAttribute('data-theme', settings.theme);
-    }
-  }, [settings.theme]);
-
   // Save settings automatically when they change
   useEffect(() => {
     try {
@@ -77,7 +46,6 @@ export default function SettingsTab() {
       // Merge with new settings
       const updatedProfile = {
         ...existingProfile,
-        theme: settings.theme,
         notifications: settings.notifications,
         language: settings.language,
         timezone: settings.timezone,
@@ -93,7 +61,7 @@ export default function SettingsTab() {
 
   return (
     <div className="space-y-4">
-      {/* Theme & Language */}
+      {/* Language & Notifications */}
       <motion.div
         className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4 space-y-4"
         initial={{ opacity: 0, y: 20 }}
@@ -102,45 +70,7 @@ export default function SettingsTab() {
       >
         <div className="flex items-center gap-2 mb-4">
           <div className="i-ph:palette-fill w-4 h-4 text-purple-500" />
-          <span className="text-sm font-medium text-bolt-elements-textPrimary">Appearance</span>
-        </div>
-
-        <div>
-          <div className="flex items-center gap-2 mb-2">
-            <div className="i-ph:paint-brush-fill w-4 h-4 text-bolt-elements-textSecondary" />
-            <label className="block text-sm text-bolt-elements-textSecondary">Theme</label>
-          </div>
-          <div className="flex gap-2">
-            {(['light', 'dark', 'system'] as const).map((theme) => (
-              <button
-                key={theme}
-                onClick={() => {
-                  setSettings((prev) => ({ ...prev, theme }));
-
-                  if (theme !== 'system') {
-                    themeStore.set(theme);
-                  }
-                }}
-                className={classNames(
-                  'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm disabled:opacity-50 disabled:cursor-not-allowed',
-                  settings.theme === theme
-                    ? 'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:text-white dark:hover:bg-purple-600'
-                    : 'bg-bolt-elements-hover dark:bg-[#1A1A1A] text-bolt-elements-textSecondary hover:bg-purple-500/10 hover:text-purple-500 dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
-                )}
-              >
-                <div
-                  className={`w-4 h-4 ${
-                    theme === 'light'
-                      ? 'i-ph:sun-fill'
-                      : theme === 'dark'
-                        ? 'i-ph:moon-stars-fill'
-                        : 'i-ph:monitor-fill'
-                  }`}
-                />
-                <span className="capitalize">{theme}</span>
-              </button>
-            ))}
-          </div>
+          <span className="text-sm font-medium text-bolt-elements-textPrimary">Preferences</span>
         </div>
 
         <div>
@@ -245,7 +175,7 @@ export default function SettingsTab() {
         </div>
       </motion.div>
 
-      {/* Keyboard Shortcuts */}
+      {/* Simplified Keyboard Shortcuts */}
       <motion.div
         className="bg-white dark:bg-[#0A0A0A] rounded-lg shadow-sm dark:shadow-none p-4"
         initial={{ opacity: 0, y: 20 }}
@@ -258,51 +188,26 @@ export default function SettingsTab() {
         </div>
 
         <div className="space-y-2">
-          {Object.entries(useStore(shortcutsStore)).map(([name, shortcut]) => (
-            <div
-              key={name}
-              className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A] hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors"
-            >
-              <div className="flex flex-col">
-                <span className="text-sm text-bolt-elements-textPrimary capitalize">
-                  {name.replace(/([A-Z])/g, ' $1').toLowerCase()}
-                </span>
-                {shortcut.description && (
-                  <span className="text-xs text-bolt-elements-textSecondary">{shortcut.description}</span>
-                )}
-              </div>
-              <div className="flex items-center gap-1">
-                {shortcut.ctrlOrMetaKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol(isMac ? 'meta' : 'ctrl')}
-                  </kbd>
-                )}
-                {shortcut.ctrlKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('ctrl')}
-                  </kbd>
-                )}
-                {shortcut.metaKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('meta')}
-                  </kbd>
-                )}
-                {shortcut.altKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('alt')}
-                  </kbd>
-                )}
-                {shortcut.shiftKey && (
-                  <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                    {getModifierSymbol('shift')}
-                  </kbd>
-                )}
-                <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
-                  {formatShortcutKey(shortcut.key)}
-                </kbd>
-              </div>
+          <div className="flex items-center justify-between p-2 rounded-lg bg-[#FAFAFA] dark:bg-[#1A1A1A]">
+            <div className="flex flex-col">
+              <span className="text-sm text-bolt-elements-textPrimary">Toggle Theme</span>
+              <span className="text-xs text-bolt-elements-textSecondary">Switch between light and dark mode</span>
             </div>
-          ))}
+            <div className="flex items-center gap-1">
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('meta')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('alt')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                {getModifierSymbol('shift')}
+              </kbd>
+              <kbd className="px-2 py-1 text-xs font-semibold text-bolt-elements-textSecondary bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A] rounded shadow-sm">
+                D
+              </kbd>
+            </div>
+          </div>
         </div>
       </motion.div>
     </div>

app/components/chat/BaseChat.tsx

@@ -35,6 +35,7 @@ import type { ModelInfo } from '~/lib/modules/llm/types';
 import ProgressCompilation from './ProgressCompilation';
 import type { ProgressAnnotation } from '~/types/context';
 import type { ActionRunner } from '~/lib/runtime/action-runner';
+import { LOCAL_PROVIDERS } from '~/lib/stores/settings';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -406,7 +407,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             apiKeys={apiKeys}
                             modelLoading={isModelLoading}
                           />
-                          {(providerList || []).length > 0 && provider && (
+                          {(providerList || []).length > 0 && provider && !LOCAL_PROVIDERS.includes(provider.name) && (
                             <APIKeyManager
                               provider={provider}
                               apiKey={apiKeys[provider.name] || ''}

app/components/chat/ModelSelector.tsx

@@ -1,6 +1,9 @@
 import type { ProviderInfo } from '~/types/model';
-import { useEffect } from 'react';
+import { useEffect, useState, useRef } from 'react';
+import type { KeyboardEvent } from 'react';
 import type { ModelInfo } from '~/lib/modules/llm/types';
+import { classNames } from '~/utils/classNames';
+import * as React from 'react';
 
 interface ModelSelectorProps {
   model?: string;
@@ -22,12 +25,118 @@ export const ModelSelector = ({
   providerList,
   modelLoading,
 }: ModelSelectorProps) => {
-  // Load enabled providers from cookies
+  const [modelSearchQuery, setModelSearchQuery] = useState('');
+  const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const optionsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsModelDropdownOpen(false);
+        setModelSearchQuery('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Filter models based on search query
+  const filteredModels = [...modelList]
+    .filter((e) => e.provider === provider?.name && e.name)
+    .filter(
+      (model) =>
+        model.label.toLowerCase().includes(modelSearchQuery.toLowerCase()) ||
+        model.name.toLowerCase().includes(modelSearchQuery.toLowerCase()),
+    );
+
+  // Reset focused index when search query changes or dropdown opens/closes
+  useEffect(() => {
+    setFocusedIndex(-1);
+  }, [modelSearchQuery, isModelDropdownOpen]);
+
+  // Focus search input when dropdown opens
+  useEffect(() => {
+    if (isModelDropdownOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isModelDropdownOpen]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (!isModelDropdownOpen) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev + 1;
+
+          if (next >= filteredModels.length) {
+            return 0;
+          }
+
+          return next;
+        });
+        break;
+
+      case 'ArrowUp':
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const next = prev - 1;
+
+          if (next < 0) {
+            return filteredModels.length - 1;
+          }
+
+          return next;
+        });
+        break;
+
+      case 'Enter':
+        e.preventDefault();
+
+        if (focusedIndex >= 0 && focusedIndex < filteredModels.length) {
+          const selectedModel = filteredModels[focusedIndex];
+          setModel?.(selectedModel.name);
+          setIsModelDropdownOpen(false);
+          setModelSearchQuery('');
+        }
+
+        break;
+
+      case 'Escape':
+        e.preventDefault();
+        setIsModelDropdownOpen(false);
+        setModelSearchQuery('');
+        break;
+
+      case 'Tab':
+        if (!e.shiftKey && focusedIndex === filteredModels.length - 1) {
+          setIsModelDropdownOpen(false);
+        }
+
+        break;
+    }
+  };
+
+  // Focus the selected option
+  useEffect(() => {
+    if (focusedIndex >= 0 && optionsRef.current[focusedIndex]) {
+      optionsRef.current[focusedIndex]?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [focusedIndex]);
 
   // Update enabled providers when cookies change
   useEffect(() => {
     // If current provider is disabled, switch to first enabled provider
-    if (providerList.length == 0) {
+    if (providerList.length === 0) {
       return;
     }
 
@@ -80,27 +189,124 @@ export const ModelSelector = ({
           </option>
         ))}
       </select>
-      <select
-        key={provider?.name}
-        value={model}
-        onChange={(e) => setModel?.(e.target.value)}
-        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all lg:max-w-[70%]"
-        disabled={modelLoading === 'all' || modelLoading === provider?.name}
-      >
-        {modelLoading == 'all' || modelLoading == provider?.name ? (
-          <option key={0} value="">
-            Loading...
-          </option>
-        ) : (
-          [...modelList]
-            .filter((e) => e.provider == provider?.name && e.name)
-            .map((modelOption, index) => (
-              <option key={index} value={modelOption.name}>
-                {modelOption.label}
-              </option>
-            ))
+
+      <div className="relative flex-1 lg:max-w-[70%]" onKeyDown={handleKeyDown} ref={dropdownRef}>
+        <div
+          className={classNames(
+            'w-full p-2 rounded-lg border border-bolt-elements-borderColor',
+            'bg-bolt-elements-prompt-background text-bolt-elements-textPrimary',
+            'focus-within:outline-none focus-within:ring-2 focus-within:ring-bolt-elements-focus',
+            'transition-all cursor-pointer',
+            isModelDropdownOpen ? 'ring-2 ring-bolt-elements-focus' : undefined,
+          )}
+          onClick={() => setIsModelDropdownOpen(!isModelDropdownOpen)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setIsModelDropdownOpen(!isModelDropdownOpen);
+            }
+          }}
+          role="combobox"
+          aria-expanded={isModelDropdownOpen}
+          aria-controls="model-listbox"
+          aria-haspopup="listbox"
+          tabIndex={0}
+        >
+          <div className="flex items-center justify-between">
+            <div className="truncate">{modelList.find((m) => m.name === model)?.label || 'Select model'}</div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary opacity-75',
+                isModelDropdownOpen ? 'rotate-180' : undefined,
+              )}
+            />
+          </div>
+        </div>
+
+        {isModelDropdownOpen && (
+          <div
+            className="absolute z-10 w-full mt-1 py-1 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2  shadow-lg"
+            role="listbox"
+            id="model-listbox"
+          >
+            <div className="px-2 pb-2">
+              <div className="relative">
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  value={modelSearchQuery}
+                  onChange={(e) => setModelSearchQuery(e.target.value)}
+                  placeholder="Search models..."
+                  className={classNames(
+                    'w-full pl-8 pr-3 py-1.5 rounded-md text-sm',
+                    'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
+                    'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus',
+                    'transition-all',
+                  )}
+                  onClick={(e) => e.stopPropagation()}
+                  role="searchbox"
+                  aria-label="Search models"
+                />
+                <div className="absolute left-2.5 top-1/2 -translate-y-1/2">
+                  <span className="i-ph:magnifying-glass text-bolt-elements-textTertiary" />
+                </div>
+              </div>
+            </div>
+
+            <div
+              className={classNames(
+                'max-h-60 overflow-y-auto',
+                'sm:scrollbar-none',
+                '[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2',
+                '[&::-webkit-scrollbar-thumb]:bg-bolt-elements-borderColor',
+                '[&::-webkit-scrollbar-thumb]:hover:bg-bolt-elements-borderColorHover',
+                '[&::-webkit-scrollbar-thumb]:rounded-full',
+                '[&::-webkit-scrollbar-track]:bg-bolt-elements-background-depth-2',
+                '[&::-webkit-scrollbar-track]:rounded-full',
+                'sm:[&::-webkit-scrollbar]:w-1.5 sm:[&::-webkit-scrollbar]:h-1.5',
+                'sm:hover:[&::-webkit-scrollbar-thumb]:bg-bolt-elements-borderColor/50',
+                'sm:hover:[&::-webkit-scrollbar-thumb:hover]:bg-bolt-elements-borderColor',
+                'sm:[&::-webkit-scrollbar-track]:bg-transparent',
+              )}
+            >
+              {modelLoading === 'all' || modelLoading === provider?.name ? (
+                <div className="px-3 py-2 text-sm text-bolt-elements-textTertiary">Loading...</div>
+              ) : filteredModels.length === 0 ? (
+                <div className="px-3 py-2 text-sm text-bolt-elements-textTertiary">No models found</div>
+              ) : (
+                filteredModels.map((modelOption, index) => (
+                  <div
+                    ref={(el) => (optionsRef.current[index] = el)}
+                    key={index}
+                    role="option"
+                    aria-selected={model === modelOption.name}
+                    className={classNames(
+                      'px-3 py-2 text-sm cursor-pointer',
+                      'hover:bg-bolt-elements-background-depth-3',
+                      'text-bolt-elements-textPrimary',
+                      'outline-none',
+                      model === modelOption.name || focusedIndex === index
+                        ? 'bg-bolt-elements-background-depth-2'
+                        : undefined,
+                      focusedIndex === index ? 'ring-1 ring-inset ring-bolt-elements-focus' : undefined,
+                    )}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setModel?.(modelOption.name);
+                      setIsModelDropdownOpen(false);
+                      setModelSearchQuery('');
+                    }}
+                    tabIndex={focusedIndex === index ? 0 : -1}
+                  >
+                    {modelOption.label}
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
         )}
-      </select>
+      </div>
     </div>
   );
 };

app/lib/hooks/useSettings.ts

@@ -2,8 +2,6 @@ import { useStore } from '@nanostores/react';
 import {
   isDebugMode,
   isEventLogsEnabled,
-  isLocalModelsEnabled,
-  LOCAL_PROVIDERS,
   promptStore,
   providersStore,
   latestBranchStore,
@@ -17,7 +15,6 @@ import {
   updateAutoSelectTemplate,
   updateContextOptimization,
   updateEventLogs,
-  updateLocalModels,
   updatePromptId,
 } from '~/lib/stores/settings';
 import { useCallback, useEffect, useState } from 'react';
@@ -49,8 +46,6 @@ export interface UseSettingsReturn {
   providers: Record<string, IProviderConfig>;
   activeProviders: ProviderInfo[];
   updateProviderSettings: (provider: string, config: IProviderSetting) => void;
-  isLocalModel: boolean;
-  enableLocalModels: (enabled: boolean) => void;
 
   // Debug and development settings
   debug: boolean;
@@ -81,7 +76,6 @@ export function useSettings(): UseSettingsReturn {
   const debug = useStore(isDebugMode);
   const eventLogs = useStore(isEventLogsEnabled);
   const promptId = useStore(promptStore);
-  const isLocalModel = useStore(isLocalModelsEnabled);
   const isLatestBranch = useStore(latestBranchStore);
   const autoSelectTemplate = useStore(autoSelectStarterTemplate);
   const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
@@ -100,16 +94,12 @@ export function useSettings(): UseSettingsReturn {
   });
 
   useEffect(() => {
-    let active = Object.entries(providers)
+    const active = Object.entries(providers)
       .filter(([_key, provider]) => provider.settings.enabled)
       .map(([_k, p]) => p);
 
-    if (!isLocalModel) {
-      active = active.filter((p) => !LOCAL_PROVIDERS.includes(p.name));
-    }
-
     setActiveProviders(active);
-  }, [providers, isLocalModel]);
+  }, [providers]);
 
   const saveSettings = useCallback((newSettings: Partial<Settings>) => {
     setSettings((prev) => {
@@ -135,11 +125,6 @@ export function useSettings(): UseSettingsReturn {
     logStore.logSystem(`Event logs ${enabled ? 'enabled' : 'disabled'}`);
   }, []);
 
-  const enableLocalModels = useCallback((enabled: boolean) => {
-    updateLocalModels(enabled);
-    logStore.logSystem(`Local models ${enabled ? 'enabled' : 'disabled'}`);
-  }, []);
-
   const setPromptId = useCallback((id: string) => {
     updatePromptId(id);
     logStore.logSystem(`Prompt template updated to ${id}`);
@@ -188,14 +173,11 @@ export function useSettings(): UseSettingsReturn {
     [saveSettings],
   );
 
-  // Fix the providers cookie sync
   useEffect(() => {
     const providers = providersStore.get();
-    const providerSetting: Record<string, { enabled: boolean }> = {};
+    const providerSetting: Record<string, IProviderSetting> = {}; // preserve the entire settings object for each provider
     Object.keys(providers).forEach((provider) => {
-      providerSetting[provider] = {
-        enabled: providers[provider].settings.enabled || false, // Add fallback for undefined
-      };
+      providerSetting[provider] = providers[provider].settings;
     });
     Cookies.set('providers', JSON.stringify(providerSetting));
   }, [providers]);
@@ -205,8 +187,6 @@ export function useSettings(): UseSettingsReturn {
     providers,
     activeProviders,
     updateProviderSettings,
-    isLocalModel,
-    enableLocalModels,
     debug,
     enableDebugMode,
     eventLogs,

app/lib/modules/llm/providers/amazon-bedrock.ts

@@ -20,6 +20,12 @@ export default class AmazonBedrockProvider extends BaseProvider {
   };
 
   staticModels: ModelInfo[] = [
+    {
+      name: 'anthropic.claude-3-5-sonnet-20241022-v2:0',
+      label: 'Claude 3.5 Sonnet v2 (Bedrock)',
+      provider: 'AmazonBedrock',
+      maxTokenAllowed: 200000,
+    },
     {
       name: 'anthropic.claude-3-5-sonnet-20240620-v1:0',
       label: 'Claude 3.5 Sonnet (Bedrock)',

app/lib/stores/settings.ts

@@ -1,5 +1,4 @@
 import { atom, map } from 'nanostores';
-import { workbenchStore } from './workbench';
 import { PROVIDER_LIST } from '~/utils/constants';
 import type { IProviderConfig } from '~/types/model';
 import type {
@@ -11,7 +10,7 @@ import type {
 import { DEFAULT_TAB_CONFIG } from '~/components/@settings/core/constants';
 import Cookies from 'js-cookie';
 import { toggleTheme } from './theme';
-import { chatStore } from './chat';
+import { create } from 'zustand';
 
 export interface Shortcut {
   key: string;
@@ -26,10 +25,8 @@ export interface Shortcut {
 }
 
 export interface Shortcuts {
-  toggleTerminal: Shortcut;
   toggleTheme: Shortcut;
-  toggleChat: Shortcut;
-  toggleSettings: Shortcut;
+  toggleTerminal: Shortcut;
 }
 
 export const URL_CONFIGURABLE_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
@@ -37,15 +34,8 @@ export const LOCAL_PROVIDERS = ['OpenAILike', 'LMStudio', 'Ollama'];
 
 export type ProviderSetting = Record<string, IProviderConfig>;
 
-// Define safer shortcuts that don't conflict with browser defaults
+// Simplified shortcuts store with only theme toggle
 export const shortcutsStore = map<Shortcuts>({
-  toggleTerminal: {
-    key: '`',
-    ctrlOrMetaKey: true,
-    action: () => workbenchStore.toggleTerminal(),
-    description: 'Toggle terminal',
-    isPreventDefault: true,
-  },
   toggleTheme: {
     key: 'd',
     metaKey: true,
@@ -55,22 +45,13 @@ export const shortcutsStore = map<Shortcuts>({
     description: 'Toggle theme',
     isPreventDefault: true,
   },
-  toggleChat: {
-    key: 'j', // Changed from 'k' to 'j' to avoid conflicts
-    ctrlOrMetaKey: true,
-    altKey: true, // Added alt key to make it more unique
-    action: () => chatStore.setKey('showChat', !chatStore.get().showChat),
-    description: 'Toggle chat',
-    isPreventDefault: true,
-  },
-  toggleSettings: {
-    key: 's',
+  toggleTerminal: {
+    key: '`',
     ctrlOrMetaKey: true,
-    altKey: true,
     action: () => {
-      document.dispatchEvent(new CustomEvent('toggle-settings'));
+      // This will be handled by the terminal component
     },
-    description: 'Toggle settings',
+    description: 'Toggle terminal',
     isPreventDefault: true,
   },
 });
@@ -148,7 +129,6 @@ const SETTINGS_KEYS = {
   AUTO_SELECT_TEMPLATE: 'autoSelectTemplate',
   CONTEXT_OPTIMIZATION: 'contextOptimizationEnabled',
   EVENT_LOGS: 'isEventLogsEnabled',
-  LOCAL_MODELS: 'isLocalModelsEnabled',
   PROMPT_ID: 'promptId',
   DEVELOPER_MODE: 'isDeveloperMode',
 } as const;
@@ -175,10 +155,9 @@ const getInitialSettings = () => {
 
   return {
     latestBranch: getStoredBoolean(SETTINGS_KEYS.LATEST_BRANCH, false),
-    autoSelectTemplate: getStoredBoolean(SETTINGS_KEYS.AUTO_SELECT_TEMPLATE, false),
-    contextOptimization: getStoredBoolean(SETTINGS_KEYS.CONTEXT_OPTIMIZATION, false),
+    autoSelectTemplate: getStoredBoolean(SETTINGS_KEYS.AUTO_SELECT_TEMPLATE, true),
+    contextOptimization: getStoredBoolean(SETTINGS_KEYS.CONTEXT_OPTIMIZATION, true),
     eventLogs: getStoredBoolean(SETTINGS_KEYS.EVENT_LOGS, true),
-    localModels: getStoredBoolean(SETTINGS_KEYS.LOCAL_MODELS, true),
     promptId: isBrowser ? localStorage.getItem(SETTINGS_KEYS.PROMPT_ID) || 'default' : 'default',
     developerMode: getStoredBoolean(SETTINGS_KEYS.DEVELOPER_MODE, false),
   };
@@ -191,7 +170,6 @@ 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);
 
 // Helper functions to update settings with persistence
@@ -215,11 +193,6 @@ export const updateEventLogs = (enabled: boolean) => {
   localStorage.setItem(SETTINGS_KEYS.EVENT_LOGS, JSON.stringify(enabled));
 };
 
-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);
@@ -319,3 +292,35 @@ export const setDeveloperMode = (value: boolean) => {
     localStorage.setItem(SETTINGS_KEYS.DEVELOPER_MODE, JSON.stringify(value));
   }
 };
+
+// First, let's define the SettingsStore interface
+interface SettingsStore {
+  isOpen: boolean;
+  selectedTab: string;
+  openSettings: () => void;
+  closeSettings: () => void;
+  setSelectedTab: (tab: string) => void;
+}
+
+export const useSettingsStore = create<SettingsStore>((set) => ({
+  isOpen: false,
+  selectedTab: 'user', // Default tab
+
+  openSettings: () => {
+    set({
+      isOpen: true,
+      selectedTab: 'user', // Always open to user tab
+    });
+  },
+
+  closeSettings: () => {
+    set({
+      isOpen: false,
+      selectedTab: 'user', // Reset to user tab when closing
+    });
+  },
+
+  setSelectedTab: (tab: string) => {
+    set({ selectedTab: tab });
+  },
+}));

app/utils/debounce.ts

@@ -1,17 +1,13 @@
-export function debounce<Args extends any[]>(fn: (...args: Args) => void, delay = 100) {
-  if (delay === 0) {
-    return fn;
-  }
+export function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
 
-  let timer: number | undefined;
+  return function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
 
-  return function <U>(this: U, ...args: Args) {
-    const context = this;
-
-    clearTimeout(timer);
-
-    timer = window.setTimeout(() => {
-      fn.apply(context, args);
-    }, delay);
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
   };
 }