@pheem49/mint 1.7.1 → 1.8.0

package/src/renderer/src-web/components/SettingsWindow.tsx

@@ -1,7 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import { getLocalApiBase, isTauriRuntime, getProfileValue, setProfileValue } from '../tauri'
-
-const DEFAULT_CONFIG = {
+import GeneralTab from './Settings/GeneralTab'
+import MemoryTab from './Settings/MemoryTab'
+import AudioTab from './Settings/AudioTab'
+import AutomationTab from './Settings/AutomationTab'
+import ThemeTab from './Settings/ThemeTab'
+import PluginsTab from './Settings/PluginsTab'
+
+export const DEFAULT_CONFIG = {
   theme: 'dark',
   accentColor: '#10b981',
   systemTextColor: '#f8fafc',
@@ -67,12 +73,30 @@ const DEFAULT_CONFIG = {
   whatsappPhoneNumberId: '',
   whatsappVerifyToken: '',
   whatsappAppSecret: '',
-  enableWhatsappBridge: false
+  enableWhatsappBridge: false,
+  notionApiKey: '',
+  notionDatabaseId: '',
+  gmailClientId: '',
+  gmailClientSecret: '',
+  gmailRefreshToken: '',
+  googleCalendarClientId: '',
+  googleCalendarClientSecret: '',
+  googleCalendarRefreshToken: '',
+  // Search
+  searchProvider: 'brave' as 'brave' | 'google',
+  googleSearchApiKey: '',
+  googleSearchCx: '',
+  braveSearchApiKey: '',
+  // Image Generation
+  imageGenProvider: 'gemini' as 'gemini' | 'dalle' | 'stability' | 'ideogram' | 'replicate',
+  stabilityApiKey: '',
+  ideogramApiKey: '',
+  replicateApiKey: ''
 }
 
 type TabType = 'sect-general' | 'sect-audio' | 'sect-automation' | 'sect-theme' | 'sect-plugins' | 'sect-shortcuts' | 'sect-memory'
 
-const GEMINI_MODELS = [
+export const GEMINI_MODELS = [
   'gemini-2.5-flash',
   'gemini-2.5-pro',
   'gemini-2.0-flash',
@@ -82,7 +106,7 @@ const GEMINI_MODELS = [
   'gemini-3.1-flash-lite-preview'
 ]
 
-const OPENAI_MODELS = [
+export const OPENAI_MODELS = [
   'gpt-4o',
   'gpt-4o-mini',
   'o1',
@@ -92,7 +116,7 @@ const OPENAI_MODELS = [
   'gpt-4-turbo'
 ]
 
-const OPENROUTER_MODELS = [
+export const OPENROUTER_MODELS = [
   'openai/gpt-4o-mini',
   'openai/gpt-4o',
   'anthropic/claude-3.5-sonnet',
@@ -102,21 +126,21 @@ const OPENROUTER_MODELS = [
   'mistralai/mistral-large'
 ]
 
-const DEEPSEEK_MODELS = [
+export const DEEPSEEK_MODELS = [
   'deepseek-v4-flash',
   'deepseek-v4-pro',
   'deepseek-chat',
   'deepseek-reasoner'
 ]
 
-const ANTHROPIC_MODELS = [
+export const ANTHROPIC_MODELS = [
   'claude-3-7-sonnet-latest',
   'claude-3-5-sonnet-latest',
   'claude-3-5-haiku-latest',
   'claude-3-opus-latest'
 ]
 
-const HF_MODELS = [
+export const HF_MODELS = [
   'meta-llama/Llama-3.3-70B-Instruct',
   'meta-llama/Meta-Llama-3-8B-Instruct',
   'meta-llama/Llama-3.2-3B-Instruct',
@@ -126,14 +150,14 @@ const HF_MODELS = [
   'google/gemma-2-9b-it'
 ]
 
-const LOCAL_MODELS = [
+export const LOCAL_MODELS = [
   'local-model',
   'Qwen/Qwen2.5-7B-Instruct-GGUF',
   'meta-llama/Llama-3.2-3B-Instruct-GGUF',
   'lmstudio-community/gemma-2-9b-it-GGUF'
 ]
 
-const OLLAMA_MODELS = [
+export const OLLAMA_MODELS = [
   'llama3:latest',
   'llama3.1:latest',
   'llama3.2:latest',
@@ -143,10 +167,7 @@ const OLLAMA_MODELS = [
   'qwen2.5:latest'
 ]
 
-
-
 export default function SettingsWindow() {
-  const isDesktopApp = isTauriRuntime()
   const [activeTab, setActiveTab] = useState<TabType>('sect-general')
   const [config, setConfig] = useState(DEFAULT_CONFIG)
   
@@ -163,6 +184,7 @@ export default function SettingsWindow() {
   const [customHF, setCustomHF] = useState('')
   const [customLocal, setCustomLocal] = useState('')
   const [customOllama, setCustomOllama] = useState('')
+  const [dynamicOllamaModels, setDynamicOllamaModels] = useState<string[]>(OLLAMA_MODELS)
 
   // New MCP Server Form state
   const [mcpName, setMcpName] = useState('')
@@ -172,57 +194,90 @@ export default function SettingsWindow() {
   const [updateMessage, setUpdateMessage] = useState('')
   const [updateAvailable, setUpdateAvailable] = useState(false)
 
-
+  const isDesktopApp = isTauriRuntime()
 
   // Load settings on mount
   useEffect(() => {
     async function loadSettings() {
       try {
+        let loadedConfig: any = null
+        if (window.settingsApi) {
+          loadedConfig = await window.settingsApi.getSettings()
+        } else {
+          const saved = await getProfileValue('user-settings')
+          if (saved) {
+            loadedConfig = JSON.parse(saved)
+          }
+        }
+        
+        if (loadedConfig) {
+          const merged = { ...DEFAULT_CONFIG, ...loadedConfig }
+          setConfig(merged)
+          
+          // sync helper custom models
+          if (merged.geminiModel && !GEMINI_MODELS.includes(merged.geminiModel)) {
+            setCustomGemini(merged.geminiModel)
+          }
+          if (merged.openaiModel && !OPENAI_MODELS.includes(merged.openaiModel)) {
+            setCustomOpenAI(merged.openaiModel)
+          }
+          if (merged.openrouterModel && !OPENROUTER_MODELS.includes(merged.openrouterModel)) {
+            setCustomOpenRouter(merged.openrouterModel)
+          }
+          if (merged.deepseekModel && !DEEPSEEK_MODELS.includes(merged.deepseekModel)) {
+            setCustomDeepSeek(merged.deepseekModel)
+          }
+          if (merged.anthropicModel && !ANTHROPIC_MODELS.includes(merged.anthropicModel)) {
+            setCustomAnthropic(merged.anthropicModel)
+          }
+          if (merged.hfModel && !HF_MODELS.includes(merged.hfModel)) {
+            setCustomHF(merged.hfModel)
+          }
+          if (merged.localModelName && !LOCAL_MODELS.includes(merged.localModelName)) {
+            setCustomLocal(merged.localModelName)
+          }
+          if (merged.ollamaModel && !OLLAMA_MODELS.includes(merged.ollamaModel)) {
+            setCustomOllama(merged.ollamaModel)
+          }
+          
+          applyThemeStyles(merged)
+        }
+        
+        // load name & pref
         const nameVal = await getProfileValue('name')
+        if (nameVal) setUserName(nameVal)
         const prefVal = await getProfileValue('preferences')
-        setUserName(nameVal || '')
-        setUserPreferences(prefVal || '')
+        if (prefVal) setUserPreferences(prefVal)
       } catch (e) {
-        console.error("Failed to load user profile memory:", e)
-      }
-
-      if (window.settingsApi) {
-        const loaded = await window.settingsApi.getSettings()
-        const merged = { ...DEFAULT_CONFIG, ...loaded }
-        setConfig(merged)
-
-        // Set custom text helpers
-        if (!GEMINI_MODELS.includes(merged.geminiModel)) {
-          setCustomGemini(merged.geminiModel)
-        }
-        if (!OPENAI_MODELS.includes(merged.openaiModel)) {
-          setCustomOpenAI(merged.openaiModel)
-        }
-        if (!OPENROUTER_MODELS.includes(merged.openrouterModel)) {
-          setCustomOpenRouter(merged.openrouterModel)
-        }
-        if (!DEEPSEEK_MODELS.includes(merged.deepseekModel)) {
-          setCustomDeepSeek(merged.deepseekModel)
-        }
-        if (!ANTHROPIC_MODELS.includes(merged.anthropicModel)) {
-          setCustomAnthropic(merged.anthropicModel)
-        }
-        if (!HF_MODELS.includes(merged.hfModel)) {
-          setCustomHF(merged.hfModel)
-        }
-        if (!LOCAL_MODELS.includes(merged.localModelName)) {
-          setCustomLocal(merged.localModelName)
-        }
-        if (!OLLAMA_MODELS.includes(merged.ollamaModel)) {
-          setCustomOllama(merged.ollamaModel)
-        }
-
-        applyThemeStyles(merged)
+        console.error("Failed to load settings:", e)
       }
     }
     loadSettings()
   }, [])
 
+  useEffect(() => {
+    const fetchOllamaModels = async () => {
+      const host = config.ollamaHost || 'http://127.0.0.1:11434';
+      const cleanHost = host.replace(/\/$/, '');
+      try {
+        const res = await fetch(`${cleanHost}/api/tags`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data && Array.isArray(data.models)) {
+            const names = data.models.map((m: any) => m.name);
+            setDynamicOllamaModels(names);
+            return;
+          }
+        }
+      } catch (err) {
+        console.warn("Failed to fetch local Ollama models:", err);
+      }
+      setDynamicOllamaModels(OLLAMA_MODELS);
+    };
+
+    fetchOllamaModels();
+  }, [config.ollamaHost]);
+
   const applyThemeStyles = (cfg: typeof DEFAULT_CONFIG) => {
     document.documentElement.setAttribute('data-theme', cfg.theme)
     document.documentElement.style.setProperty('--accent', cfg.accentColor)
@@ -322,6 +377,13 @@ export default function SettingsWindow() {
       await window.settingsApi.saveSettings(finalConfig)
       applyThemeStyles(finalConfig)
       window.settingsApi.closeSettings()
+    } else {
+      try {
+        await setProfileValue('user-settings', JSON.stringify(finalConfig))
+        applyThemeStyles(finalConfig)
+      } catch (e) {
+        console.error("Failed to save user settings:", e)
+      }
     }
   }
 
@@ -392,7 +454,6 @@ export default function SettingsWindow() {
       }
     }
 
-    // Split args nicely or pass as string array
     const argList = mcpArgs.split(/\s+/).filter(Boolean)
 
     const updatedMcp = {
@@ -409,7 +470,6 @@ export default function SettingsWindow() {
       mcpServers: updatedMcp
     })
 
-    // Reset fields
     setMcpName('')
     setMcpCmd('')
     setMcpArgs('')
@@ -480,7 +540,7 @@ export default function SettingsWindow() {
     <div className="settings-container">
       <header className="settings-header drag-region">
         <div className="header-left">
-          <span className="settings-icon" style={{ display: 'inline-flex', alignItems: 'center' }}>
+          <span className="settings-icon">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <circle cx="12" cy="12" r="3"></circle>
               <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
@@ -493,7 +553,7 @@ export default function SettingsWindow() {
         </div>
         <button className="close-btn" onClick={handleClose} aria-label="Close">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <line x1="18" y1="6" x2="6" y2="18"></line>
             <line x1="6" y1="6" x2="18" y2="18"></line>
           </svg>
@@ -514,9 +574,7 @@ export default function SettingsWindow() {
           <button className={`tab-btn ${activeTab === 'sect-memory' ? 'active' : ''}`} onClick={() => setActiveTab('sect-memory')}>
             <span style={{ display: 'inline-flex', alignItems: 'center' }}>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
-                <path d="M12 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"></path>
-                <path d="M6 18a6 6 0 0 1 12 0"></path>
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
               </svg>
             </span>
             <strong>Memory & Profile</strong>
@@ -533,7 +591,9 @@ export default function SettingsWindow() {
           <button className={`tab-btn ${activeTab === 'sect-automation' ? 'active' : ''}`} onClick={() => setActiveTab('sect-automation')}>
             <span style={{ display: 'inline-flex', alignItems: 'center' }}>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                <line x1="8" y1="21" x2="16" y2="21"></line>
+                <line x1="12" y1="17" x2="12" y2="21"></line>
               </svg>
             </span>
             <strong>Automation</strong>
@@ -557,28 +617,13 @@ export default function SettingsWindow() {
           <button className={`tab-btn ${activeTab === 'sect-plugins' ? 'active' : ''}`} onClick={() => setActiveTab('sect-plugins')}>
             <span style={{ display: 'inline-flex', alignItems: 'center' }}>
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+                <polyline points="2 17 12 22 22 17"></polyline>
+                <polyline points="2 12 12 17 22 12"></polyline>
               </svg>
             </span>
             <strong>Plugins</strong>
           </button>
-          <button className={`tab-btn ${activeTab === 'sect-shortcuts' ? 'active' : ''}`} onClick={() => setActiveTab('sect-shortcuts')}>
-            <span style={{ display: 'inline-flex', alignItems: 'center' }}>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
-                <line x1="6" y1="8" x2="6" y2="8"></line>
-                <line x1="10" y1="8" x2="10" y2="8"></line>
-                <line x1="14" y1="8" x2="14" y2="8"></line>
-                <line x1="18" y1="8" x2="18" y2="8"></line>
-                <line x1="6" y1="12" x2="6" y2="12"></line>
-                <line x1="10" y1="12" x2="10" y2="12"></line>
-                <line x1="14" y1="12" x2="14" y2="12"></line>
-                <line x1="18" y1="12" x2="18" y2="12"></line>
-                <line x1="7" y1="16" x2="17" y2="16"></line>
-              </svg>
-            </span>
-            <strong>Shortcuts</strong>
-          </button>
         </nav>
 
         <div className="settings-content">
@@ -588,917 +633,91 @@ export default function SettingsWindow() {
               <span>Desktop-only controls are hidden or disabled here. Settings are saved through the Local API server.</span>
             </div>
           )}
-          {/* GENERAL SECTION */}
-          {activeTab === 'sect-general' && (
-            <div className="tab-pane active">
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">AI routing</p>
-                    <h2 class="section-title">Provider & Model</h2>
-                  </div>
-                  <p className="section-description">Choose which AI backend Mint uses, then set the default model.</p>
-                </div>
-
-                <div className="form-grid compact">
-                  <div className="setting-row wide">
-                    <label>Active Provider</label>
-                    <select value={config.aiProvider} onChange={(e) => updateField('aiProvider', e.target.value)}>
-                      <option value="gemini">Google Gemini (Cloud)</option>
-                      <option value="anthropic">Anthropic Claude</option>
-                      <option value="openai">OpenAI</option>
-                      <option value="openrouter">OpenRouter</option>
-                      <option value="deepseek">DeepSeek</option>
-                      <option value="ollama">Ollama (Local / Private)</option>
-                      <option value="huggingface">Hugging Face (Inference API)</option>
-                      <option value="local_openai">Local (LM Studio / OpenAI Compatible)</option>
-                    </select>
-                  </div>
 
-                      <div className="setting-row">
-                        <label>Gemini Model</label>
-                        <select 
-                          value={GEMINI_MODELS.includes(config.geminiModel) ? config.geminiModel : 'custom'} 
-                          onChange={(e) => updateField('geminiModel', e.target.value)}
-                        >
-                          {GEMINI_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!GEMINI_MODELS.includes(config.geminiModel) || config.geminiModel === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom Gemini Model</label>
-                          <input 
-                            type="text" 
-                            value={customGemini} 
-                            onChange={(e) => { setCustomGemini(e.target.value); updateField('geminiModel', 'custom') }} 
-                            placeholder="e.g. gemini-3.1-flash-lite-preview" 
-                          />
-                        </div>
-                      )}
-
-                      <div className="setting-row">
-                        <label>OpenAI Model</label>
-                        <select 
-                          value={OPENAI_MODELS.includes(config.openaiModel) ? config.openaiModel : 'custom'} 
-                          onChange={(e) => updateField('openaiModel', e.target.value)}
-                        >
-                          {OPENAI_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!OPENAI_MODELS.includes(config.openaiModel) || config.openaiModel === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom OpenAI Model</label>
-                          <input 
-                            type="text" 
-                            value={customOpenAI} 
-                            onChange={(e) => { setCustomOpenAI(e.target.value); updateField('openaiModel', 'custom') }} 
-                            placeholder="e.g. gpt-4o" 
-                          />
-                        </div>
-                      )}
-
-                      <div className="setting-row">
-                        <label>OpenRouter Model</label>
-                        <select
-                          value={OPENROUTER_MODELS.includes(config.openrouterModel) ? config.openrouterModel : 'custom'}
-                          onChange={(e) => updateField('openrouterModel', e.target.value)}
-                        >
-                          {OPENROUTER_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!OPENROUTER_MODELS.includes(config.openrouterModel) || config.openrouterModel === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom OpenRouter Model</label>
-                          <input
-                            type="text"
-                            value={customOpenRouter}
-                            onChange={(e) => { setCustomOpenRouter(e.target.value); updateField('openrouterModel', 'custom') }}
-                            placeholder="e.g. anthropic/claude-3.5-sonnet"
-                          />
-                        </div>
-                      )}
-
-                      <div className="setting-row">
-                        <label>DeepSeek Model</label>
-                        <select
-                          value={DEEPSEEK_MODELS.includes(config.deepseekModel) ? config.deepseekModel : 'custom'}
-                          onChange={(e) => updateField('deepseekModel', e.target.value)}
-                        >
-                          {DEEPSEEK_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!DEEPSEEK_MODELS.includes(config.deepseekModel) || config.deepseekModel === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom DeepSeek Model</label>
-                          <input
-                            type="text"
-                            value={customDeepSeek}
-                            onChange={(e) => { setCustomDeepSeek(e.target.value); updateField('deepseekModel', 'custom') }}
-                            placeholder="e.g. deepseek-v4-pro"
-                          />
-                        </div>
-                      )}
-
-                      <div className="setting-row">
-                        <label>Anthropic Model</label>
-                        <select 
-                          value={ANTHROPIC_MODELS.includes(config.anthropicModel) ? config.anthropicModel : 'custom'} 
-                          onChange={(e) => updateField('anthropicModel', e.target.value)}
-                        >
-                          {ANTHROPIC_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!ANTHROPIC_MODELS.includes(config.anthropicModel) || config.anthropicModel === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom Anthropic Model</label>
-                          <input 
-                            type="text" 
-                            value={customAnthropic} 
-                            onChange={(e) => { setCustomAnthropic(e.target.value); updateField('anthropicModel', 'custom') }} 
-                            placeholder="e.g. claude-3-5-sonnet-latest" 
-                          />
-                        </div>
-                      )}
-
-                      <div className="setting-row">
-                        <label>Hugging Face Model</label>
-                        <select 
-                          value={HF_MODELS.includes(config.hfModel) ? config.hfModel : 'custom'} 
-                          onChange={(e) => updateField('hfModel', e.target.value)}
-                        >
-                          {HF_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!HF_MODELS.includes(config.hfModel) || config.hfModel === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom Hugging Face Model</label>
-                          <input 
-                            type="text" 
-                            value={customHF} 
-                            onChange={(e) => { setCustomHF(e.target.value); updateField('hfModel', 'custom') }} 
-                            placeholder="e.g. meta-llama/Meta-Llama-3-8B-Instruct" 
-                          />
-                        </div>
-                      )}
-
-                      <div className="setting-row">
-                        <label>LM Studio Model</label>
-                        <select 
-                          value={LOCAL_MODELS.includes(config.localModelName) ? config.localModelName : 'custom'} 
-                          onChange={(e) => updateField('localModelName', e.target.value)}
-                        >
-                          {LOCAL_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!LOCAL_MODELS.includes(config.localModelName) || config.localModelName === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom LM Studio Model</label>
-                          <input 
-                            type="text" 
-                            value={customLocal} 
-                            onChange={(e) => { setCustomLocal(e.target.value); updateField('localModelName', 'custom') }} 
-                            placeholder="e.g. local-model" 
-                          />
-                        </div>
-                      )}
-
-                      <div className="setting-row">
-                        <label>Ollama Model</label>
-                        <select 
-                          value={OLLAMA_MODELS.includes(config.ollamaModel) ? config.ollamaModel : 'custom'} 
-                          onChange={(e) => updateField('ollamaModel', e.target.value)}
-                        >
-                          {OLLAMA_MODELS.map(model => (
-                            <option key={model} value={model}>{model}</option>
-                          ))}
-                          <option value="custom">Custom...</option>
-                        </select>
-                      </div>
-                      {(!OLLAMA_MODELS.includes(config.ollamaModel) || config.ollamaModel === 'custom') && (
-                        <div className="setting-row">
-                          <label>Custom Ollama Model</label>
-                          <input 
-                            type="text" 
-                            value={customOllama} 
-                            onChange={(e) => { setCustomOllama(e.target.value); updateField('ollamaModel', 'custom') }} 
-                            placeholder="e.g. llama3:latest" 
-                          />
-                        </div>
-                      )}
-                </div>
-              </section>
-
-              {isDesktopApp && <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Desktop updates</p>
-                    <h2 className="section-title">Signed Tauri Channel</h2>
-                  </div>
-                  <p className="section-description">Check and explicitly install signed Tauri releases from your configured update channel.</p>
-                </div>
-                <div className="toggle-row">
-                  <div>
-                    <label>Check signed update channel</label>
-                    <p className="hint">This flag does not install updates automatically.</p>
-                  </div>
-                  <label className="toggle-switch">
-                    <input
-                      type="checkbox"
-                      checked={config.enableAutoUpdate}
-                      onChange={(e) => updateField('enableAutoUpdate', e.target.checked)}
-                    />
-                    <span className="toggle-slider"></span>
-                  </label>
-                </div>
-                <div className="form-grid single">
-                  <div className="setting-row">
-                    <label>Updater Endpoint</label>
-                    <input type="text" value={config.updaterEndpoint} onChange={(e) => updateField('updaterEndpoint', e.target.value)} placeholder="https://updates.example.com/latest.json" />
-                  </div>
-                  <div className="setting-row">
-                    <label>Updater Public Key</label>
-                    <textarea value={config.updaterPublicKey} onChange={(e) => updateField('updaterPublicKey', e.target.value)} placeholder="Minisign public key" />
-                  </div>
-                </div>
-                <div className="setting-actions">
-                  <button type="button" className="btn-connect" onClick={handleCheckUpdates}>Check for updates</button>
-                  {updateAvailable && <button type="button" className="btn-primary" onClick={handleInstallUpdate}>Install signed update</button>}
-                </div>
-                {updateMessage && <p className="hint">{updateMessage}</p>}
-              </section>}
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Credentials</p>
-                    <h2 class="section-title">API Keys & Hosts</h2>
-                  </div>
-                </div>
-
-                <div className="form-grid">
-                  <div className="setting-row">
-                    <label>Gemini API Key</label>
-                    <input 
-                      type="password" 
-                      value={config.apiKey} 
-                      onChange={(e) => updateField('apiKey', e.target.value)} 
-                      placeholder="Enter Gemini API Key..." 
-                    />
-                  </div>
-                  <div className="setting-row">
-                    <label>OpenAI API Key</label>
-                    <input 
-                      type="password" 
-                      value={config.openaiApiKey} 
-                      onChange={(e) => updateField('openaiApiKey', e.target.value)} 
-                      placeholder="Enter OpenAI API Key..." 
-                    />
-                  </div>
-                  <div className="setting-row">
-                    <label>OpenRouter API Key</label>
-                    <input
-                      type="password"
-                      value={config.openrouterApiKey}
-                      onChange={(e) => updateField('openrouterApiKey', e.target.value)}
-                      placeholder="Enter OpenRouter API Key..."
-                    />
-                  </div>
-                  <div className="setting-row">
-                    <label>DeepSeek API Key</label>
-                    <input
-                      type="password"
-                      value={config.deepseekApiKey}
-                      onChange={(e) => updateField('deepseekApiKey', e.target.value)}
-                      placeholder="Enter DeepSeek API Key..."
-                    />
-                  </div>
-                  <div className="setting-row">
-                    <label>Anthropic API Key</label>
-                    <input 
-                      type="password" 
-                      value={config.anthropicApiKey} 
-                      onChange={(e) => updateField('anthropicApiKey', e.target.value)} 
-                      placeholder="Enter Anthropic API Key..." 
-                    />
-                  </div>
-                  <div className="setting-row">
-                    <label>Hugging Face API Key</label>
-                    <input 
-                      type="password" 
-                      value={config.hfApiKey} 
-                      onChange={(e) => updateField('hfApiKey', e.target.value)} 
-                      placeholder="Enter Hugging Face API Key..." 
-                    />
-                  </div>
-                  <div className="setting-row">
-                    <label>LM Studio Base URL</label>
-                    <input 
-                      type="text" 
-                      value={config.localApiBaseUrl} 
-                      onChange={(e) => updateField('localApiBaseUrl', e.target.value)} 
-                      placeholder="e.g. http://localhost:1234/v1" 
-                    />
-                  </div>
-                  <div className="setting-row">
-                    <label>Ollama Host</label>
-                    <input 
-                      type="text" 
-                      value={config.ollamaHost} 
-                      onChange={(e) => updateField('ollamaHost', e.target.value)} 
-                      placeholder="e.g. http://localhost:11434" 
-                    />
-                  </div>
-                </div>
-              </section>
-
-              {isDesktopApp && <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Desktop</p>
-                    <h2 class="section-title">Assistant Presence</h2>
-                  </div>
-                </div>
-                <div className="toggle-row">
-                  <div>
-                    <label>Show Desktop AI Candidate</label>
-                    <p className="hint">Show the mini AI character on your desktop.</p>
-                  </div>
-                  <label className="toggle-switch">
-                    <input 
-                      type="checkbox" 
-                      checked={config.showDesktopWidget} 
-                      onChange={(e) => updateField('showDesktopWidget', e.target.checked)} 
-                    />
-                    <span className="toggle-slider"></span>
-                  </label>
-                </div>
-              </section>}
-            </div>
+          {activeTab === 'sect-general' && (
+            <GeneralTab
+              config={config}
+              updateField={updateField}
+              customGemini={customGemini}
+              setCustomGemini={setCustomGemini}
+              customOpenAI={customOpenAI}
+              setCustomOpenAI={setCustomOpenAI}
+              customOpenRouter={customOpenRouter}
+              setCustomOpenRouter={setCustomOpenRouter}
+              customDeepSeek={customDeepSeek}
+              setCustomDeepSeek={setCustomDeepSeek}
+              customAnthropic={customAnthropic}
+              setCustomAnthropic={setCustomAnthropic}
+              customHF={customHF}
+              setCustomHF={setCustomHF}
+              customLocal={customLocal}
+              setCustomLocal={setCustomLocal}
+              customOllama={customOllama}
+              setCustomOllama={setCustomOllama}
+              dynamicOllamaModels={dynamicOllamaModels}
+              updateAvailable={updateAvailable}
+              updateMessage={updateMessage}
+              handleCheckUpdates={handleCheckUpdates}
+              handleInstallUpdate={handleInstallUpdate}
+              isDesktopApp={isDesktopApp}
+            />
           )}
 
-          {/* MEMORY SECTION */}
           {activeTab === 'sect-memory' && (
-            <div className="tab-pane active animate-fade-in">
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Cross-session Memory</p>
-                    <h2 className="section-title">User Profile & Preferences</h2>
-                  </div>
-                  <p className="section-description">
-                    Information and preferences stored here will be remembered across all conversations. Mint automatically learns and updates your profile details from your chats in the background, but you can also edit them manually.
-                  </p>
-                </div>
-
-                <div className="form-grid single">
-                  <div className="setting-row">
-                    <label>Your Name / Nickname</label>
-                    <div className="memory-field-container">
-                      <input 
-                        type="text" 
-                        value={userName} 
-                        onChange={(e) => setUserName(e.target.value)} 
-                        placeholder="e.g. Pheem, Jane" 
-                      />
-                      <p className="hint">Used by the assistant to address you in conversation.</p>
-                    </div>
-                  </div>
-
-                  <div className="setting-row">
-                    <label>Custom Instructions & Preferences</label>
-                    <div className="memory-field-container">
-                      <textarea 
-                        value={userPreferences} 
-                        onChange={(e) => setUserPreferences(e.target.value)} 
-                        placeholder="e.g. Explain coding concepts step-by-step. Prefer TypeScript. Talk in Thai. Keep explanations concise." 
-                        style={{ minHeight: '150px', resize: 'vertical' }}
-                      />
-                      <p className="hint">Preferences, guidelines, or persona instructions for the assistant.</p>
-                    </div>
-                  </div>
-                </div>
-              </section>
-            </div>
+            <MemoryTab
+              userName={userName}
+              setUserName={setUserName}
+              userPreferences={userPreferences}
+              setUserPreferences={setUserPreferences}
+            />
           )}
 
-          {/* AUDIO SECTION */}
           {activeTab === 'sect-audio' && (
-            <div className="tab-pane active">
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Speech</p>
-                    <h2 class="section-title">Voice Reply</h2>
-                  </div>
-                  <p className="section-description">Control spoken responses and TTS behavior.</p>
-                </div>
-
-                <div className="toggle-row">
-                  <div>
-                    <label>Enable Voice Reply</label>
-                    <p className="hint">Mint will speak responses out loud when this is enabled.</p>
-                  </div>
-                  <label className="toggle-switch">
-                    <input 
-                      type="checkbox" 
-                      checked={config.enableVoiceReply} 
-                      onChange={(e) => updateField('enableVoiceReply', e.target.checked)} 
-                    />
-                    <span className="toggle-slider"></span>
-                  </label>
-                </div>
-
-                <div className="form-grid single">
-                  <div className="setting-row">
-                    <label>Voice Engine</label>
-                    <select value={config.ttsProvider} onChange={(e) => updateField('ttsProvider', e.target.value)}>
-                      <option value="google">Google Cloud (Natural, Auto Lang)</option>
-                      <option value="native">OS Native (Supports Pitch)</option>
-                    </select>
-                  </div>
-                </div>
-
-                <div className="slider-stack">
-                  <div className="setting-row">
-                    <label>Volume</label>
-                    <div className="slider-group">
-                      <input 
-                        type="range" 
-                        min="0" 
-                        max="1" 
-                        step="0.1" 
-                        value={config.ttsVolume} 
-                        onChange={(e) => updateField('ttsVolume', parseFloat(e.target.value))} 
-                        className="range-slider" 
-                      />
-                      <span className="range-value">{Math.round(config.ttsVolume * 100)}%</span>
-                    </div>
-                  </div>
-                  <div className="setting-row">
-                    <label>Speed</label>
-                    <div className="slider-group">
-                      <input 
-                        type="range" 
-                        min="0.5" 
-                        max="2" 
-                        step="0.1" 
-                        value={config.ttsSpeed} 
-                        onChange={(e) => updateField('ttsSpeed', parseFloat(e.target.value))} 
-                        className="range-slider" 
-                      />
-                      <span className="range-value">{parseFloat(String(config.ttsSpeed)).toFixed(1)}x</span>
-                    </div>
-                  </div>
-                  <div className="setting-row">
-                    <label>Pitch</label>
-                    <div className="slider-group">
-                      <input 
-                        type="range" 
-                        min="0" 
-                        max="2" 
-                        step="0.1" 
-                        value={config.ttsPitch} 
-                        onChange={(e) => updateField('ttsPitch', parseFloat(e.target.value))} 
-                        className="range-slider" 
-                      />
-                      <span className="range-value">{parseFloat(String(config.ttsPitch)).toFixed(1)}</span>
-                    </div>
-                    <p className="hint">Pitch applies to OS native voice only.</p>
-                  </div>
-                </div>
-              </section>
-            </div>
+            <AudioTab
+              config={config}
+              updateField={updateField}
+            />
           )}
 
-          {/* AUTOMATION SECTION */}
           {activeTab === 'sect-automation' && (
-            <div className="tab-pane active">
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Browser</p>
-                    <h2 class="section-title">Automation Engine</h2>
-                  </div>
-                </div>
-                <div className="form-grid single">
-                  <div className="setting-row">
-                    <label>Browser Engine</label>
-                    <select value={config.automationBrowser} onChange={(e) => updateField('automationBrowser', e.target.value)}>
-                      <option value="chromium">Chromium (Bundled)</option>
-                      <option value="/usr/bin/firefox">Firefox (System - Linux)</option>
-                    </select>
-                  </div>
-                  <div className="setting-row">
-                    <label>Chromium DevTools Endpoint</label>
-                    <input type="text" value={config.browserDebugUrl} onChange={(e) => updateField('browserDebugUrl', e.target.value)} />
-                    <p className="hint">Required for native tab reading and selector clicks.</p>
-                  </div>
-                  <div className="setting-row">
-                    <label>Browser Extension Context Endpoint</label>
-                    <input type="text" value={config.browserExtensionContextUrl} onChange={(e) => updateField('browserExtensionContextUrl', e.target.value)} />
-                    <p className="hint">Fallback endpoint used when Chromium remote debugging is unavailable.</p>
-                  </div>
-                </div>
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Background tasks</p>
-                    <h2 className="section-title">Native Headless Queue</h2>
-                  </div>
-                </div>
-                <div className="toggle-row">
-                  <div>
-                    <label>Process queued tasks automatically</label>
-                    <p className="hint">Allow the bounded Rust worker to process pending tasks every 15 seconds.</p>
-                  </div>
-                  <label className="toggle-switch">
-                    <input
-                      type="checkbox"
-                      checked={config.enableHeadlessTaskQueue}
-                      onChange={(e) => updateField('enableHeadlessTaskQueue', e.target.checked)}
-                    />
-                    <span className="toggle-slider"></span>
-                  </label>
-                </div>
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Awareness</p>
-                    <h2 class="section-title">Proactive Assistant</h2>
-                  </div>
-                  <p className="section-description">Tune screen analysis frequency and suggestion timing.</p>
-                </div>
-                <div className="slider-stack">
-                  <div className="setting-row">
-                    <label>Screen Capture Frequency</label>
-                    <div className="slider-group">
-                      <input 
-                        type="range" 
-                        min="30" 
-                        max="300" 
-                        step="30" 
-                        value={config.proactiveInterval} 
-                        onChange={(e) => updateField('proactiveInterval', parseInt(e.target.value))} 
-                        className="range-slider" 
-                      />
-                      <span className="range-value">{config.proactiveInterval} sec</span>
-                    </div>
-                    <p className="hint">Lower values respond faster but use more API calls.</p>
-                  </div>
-                  <div className="setting-row">
-                    <label>Suggestion Cooldown</label>
-                    <div className="slider-group">
-                      <input 
-                        type="range" 
-                        min="60" 
-                        max="600" 
-                        step="60" 
-                        value={config.proactiveCooldown} 
-                        onChange={(e) => updateField('proactiveCooldown', parseInt(e.target.value))} 
-                        className="range-slider" 
-                      />
-                      <span className="range-value">{Math.round(config.proactiveCooldown / 60)} min</span>
-                    </div>
-                    <p className="hint">Minimum time between repeat suggestions.</p>
-                  </div>
-                </div>
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Messaging</p>
-                    <h2 className="section-title">Native Channel Bridges</h2>
-                  </div>
-                  <p className="section-description">Configure credentials used directly by the Rust channel workers.</p>
-                </div>
-                <div className="form-grid">
-                  <label className="toggle-row"><span>Telegram Bot API</span><input type="checkbox" checked={config.enableTelegramBridge} onChange={(e) => updateField('enableTelegramBridge', e.target.checked)} /></label>
-                  <input type="password" placeholder="Telegram bot token" value={config.telegramBotToken} onChange={(e) => updateField('telegramBotToken', e.target.value)} />
-                  <label className="toggle-row"><span>Discord Gateway</span><input type="checkbox" checked={config.enableDiscordBridge} onChange={(e) => updateField('enableDiscordBridge', e.target.checked)} /></label>
-                  <input type="password" placeholder="Discord bot token" value={config.discordBotToken} onChange={(e) => updateField('discordBotToken', e.target.value)} />
-                  <input type="text" placeholder="Discord application ID for Rich Presence" value={config.discordApplicationId} onChange={(e) => updateField('discordApplicationId', e.target.value)} />
-                  <label className="toggle-row"><span>Slack Socket Mode</span><input type="checkbox" checked={config.enableSlackBridge} onChange={(e) => updateField('enableSlackBridge', e.target.checked)} /></label>
-                  <input type="password" placeholder="Slack bot token (xoxb-...)" value={config.slackBotToken} onChange={(e) => updateField('slackBotToken', e.target.value)} />
-                  <input type="password" placeholder="Slack app token (xapp-...)" value={config.slackAppToken} onChange={(e) => updateField('slackAppToken', e.target.value)} />
-                  <label className="toggle-row"><span>LINE Webhook</span><input type="checkbox" checked={config.enableLineBridge} onChange={(e) => updateField('enableLineBridge', e.target.checked)} /></label>
-                  <input type="password" placeholder="LINE channel access token" value={config.lineChannelAccessToken} onChange={(e) => updateField('lineChannelAccessToken', e.target.value)} />
-                  <input type="password" placeholder="LINE channel secret" value={config.lineChannelSecret} onChange={(e) => updateField('lineChannelSecret', e.target.value)} />
-                  <label className="toggle-row"><span>WhatsApp Cloud API</span><input type="checkbox" checked={config.enableWhatsappBridge} onChange={(e) => updateField('enableWhatsappBridge', e.target.checked)} /></label>
-                  <input type="password" placeholder="WhatsApp Cloud access token" value={config.whatsappCloudAccessToken} onChange={(e) => updateField('whatsappCloudAccessToken', e.target.value)} />
-                  <input type="text" placeholder="WhatsApp phone number ID" value={config.whatsappPhoneNumberId} onChange={(e) => updateField('whatsappPhoneNumberId', e.target.value)} />
-                  <input type="password" placeholder="WhatsApp verify token" value={config.whatsappVerifyToken} onChange={(e) => updateField('whatsappVerifyToken', e.target.value)} />
-                  <input type="password" placeholder="WhatsApp app secret (optional HMAC validation)" value={config.whatsappAppSecret} onChange={(e) => updateField('whatsappAppSecret', e.target.value)} />
-                </div>
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Rules</p>
-                    <h2 class="section-title">Custom Workflows</h2>
-                  </div>
-                </div>
-                <div className="toggle-row">
-                  <div>
-                    <label>Enable Custom Workflows</label>
-                    <p className="hint">Run "If This Then Mint" rules from the workflow JSON file.</p>
-                  </div>
-                  <label className="toggle-switch">
-                    <input 
-                      type="checkbox" 
-                      checked={config.enableCustomWorkflows} 
-                      onChange={(e) => updateField('enableCustomWorkflows', e.target.checked)} 
-                    />
-                    <span className="toggle-slider"></span>
-                  </label>
-                </div>
-                <div className="button-row" style={{ display: 'flex', gap: '10px', marginTop: '10px' }}>
-                  <button className="btn btn-secondary" onClick={handleOpenWorkflows} disabled={!isDesktopApp}>Open workflows.json</button>
-                  <button className="btn btn-primary" onClick={handleReloadWorkflows} disabled={!isDesktopApp}>Reload Rules</button>
-                </div>
-                {!isDesktopApp && <p className="hint">Opening and reloading local workflow files requires the desktop app.</p>}
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Code mode</p>
-                    <h2 class="section-title">Agent Collaboration</h2>
-                  </div>
-                </div>
-                <div className="toggle-row">
-                  <div>
-                    <label>Enable Multi-Agent Review</label>
-                    <p className="hint">Allow a secondary model to review code written by the primary model.</p>
-                  </div>
-                  <label className="toggle-switch">
-                    <input 
-                      type="checkbox" 
-                      checked={config.enableAgentCollaboration} 
-                      onChange={(e) => updateField('enableAgentCollaboration', e.target.checked)} 
-                    />
-                    <span className="toggle-slider"></span>
-                  </label>
-                </div>
-              </section>
-            </div>
+            <AutomationTab
+              config={config}
+              updateField={updateField}
+              handleOpenWorkflows={handleOpenWorkflows}
+              handleReloadWorkflows={handleReloadWorkflows}
+              isDesktopApp={isDesktopApp}
+            />
           )}
 
-          {/* THEME & UI SECTION */}
           {activeTab === 'sect-theme' && (
-            <div className="tab-pane active">
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Appearance</p>
-                    <h2 class="section-title">Theme</h2>
-                  </div>
-                </div>
-                <div className="theme-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px' }}>
-                  {(['dark', 'light', 'midnight', 'custom'] as const).map(t => (
-                    <button 
-                      key={t}
-                      className={`theme-card ${config.theme === t ? 'active' : ''}`} 
-                      onClick={() => updateField('theme', t)}
-                    >
-                      <div className={`theme-preview ${t}-preview`}></div>
-                      <span style={{ textTransform: 'capitalize' }}>{t}</span>
-                    </button>
-                  ))}
-                </div>
-
-                {config.theme === 'custom' && (
-                  <div className="custom-theme-panel" style={{ marginTop: '15px' }}>
-                    <div className="setting-row">
-                      <label>Background Gradient</label>
-                      <div className="color-range" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-                        <input type="color" value={config.customBgStart} onChange={(e) => updateField('customBgStart', e.target.value)} />
-                        <span style={{ display: 'inline-flex', alignItems: 'center', color: 'var(--text-soft)' }}>
-                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                            <line x1="5" y1="12" x2="19" y2="12"></line>
-                            <polyline points="12 5 19 12 12 19"></polyline>
-                          </svg>
-                        </span>
-                        <input type="color" value={config.customBgEnd} onChange={(e) => updateField('customBgEnd', e.target.value)} />
-                      </div>
-                    </div>
-                    <div className="setting-row">
-                      <label>Panel Background</label>
-                      <input type="color" value={config.customPanelBg} onChange={(e) => updateField('customPanelBg', e.target.value)} />
-                    </div>
-                  </div>
-                )}
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Color</p>
-                    <h2 class="section-title">Accent & Text</h2>
-                  </div>
-                </div>
-                <div className="color-section">
-                  <div>
-                    <label>Accent Color</label>
-                    <div className="color-presets">
-                      {['#8b5cf6', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#ec4899'].map(c => (
-                        <button 
-                          key={c}
-                          className="color-dot" 
-                          style={{ backgroundColor: c, border: config.accentColor === c ? '2px solid white' : 'none' }} 
-                          onClick={() => updateField('accentColor', c)}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                  <div className="color-inputs" style={{ display: 'flex', gap: '15px', marginTop: '12px' }}>
-                    <div>
-                      <label>Custom Accent</label>
-                      <input type="color" value={config.accentColor} onChange={(e) => updateField('accentColor', e.target.value)} style={{ display: 'block', marginTop: '4px' }} />
-                    </div>
-                    <div>
-                      <label>System Text</label>
-                      <input type="color" value={config.systemTextColor} onChange={(e) => updateField('systemTextColor', e.target.value)} style={{ display: 'block', marginTop: '4px' }} />
-                    </div>
-                  </div>
-                </div>
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Surface</p>
-                    <h2 class="section-title">Interface Style</h2>
-                  </div>
-                </div>
-                <div className="form-grid">
-                  <div className="setting-row">
-                    <label>Glass Blur</label>
-                    <select value={config.glassBlur} onChange={(e) => updateField('glassBlur', e.target.value)}>
-                      <option value="blur(4px)">Low (4px)</option>
-                      <option value="blur(16px)">Medium (16px) - Default</option>
-                      <option value="blur(32px)">High (32px)</option>
-                      <option value="none">Off (Solid)</option>
-                    </select>
-                  </div>
-                  <div className="setting-row">
-                    <label>Font Family</label>
-                    <select value={config.fontFamily} onChange={(e) => updateField('fontFamily', e.target.value)}>
-                      <option value="'Outfit', sans-serif">Outfit (Default)</option>
-                      <option value="'Mali', cursive">Mali (Cute Thai Font)</option>
-                      <option value="'Prompt', sans-serif">Prompt (Modern Thai)</option>
-                      <option value="'Sarabun', sans-serif">Sarabun (Formal Thai)</option>
-                    </select>
-                  </div>
-                  <div className="setting-row">
-                    <label>Font Size</label>
-                    <select value={config.fontSize} onChange={(e) => updateField('fontSize', e.target.value)}>
-                      <option value="16px">Small</option>
-                      <option value="18px">Medium (Default)</option>
-                      <option value="22px">Large</option>
-                      <option value="26px">Extra Large</option>
-                      <option value="30px">Extra Extra Large</option>
-                    </select>
-                  </div>
-                </div>
-              </section>
-            </div>
+            <ThemeTab
+              config={config}
+              updateField={updateField}
+            />
           )}
 
-          {/* PLUGINS SECTION */}
           {activeTab === 'sect-plugins' && (
-            <div className="tab-pane active">
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Integrations</p>
-                    <h2 class="section-title">Built-in Plugins</h2>
-                  </div>
-                </div>
-                <div className="plugin-list">
-                  {[
-                    { key: 'spotify', name: 'Spotify', desc: 'Control playback with AI. Requires playerctl.', icon: '🎵' },
-                    { key: 'calendar', name: 'Google Calendar', desc: 'Read and schedule events.', icon: '📅' },
-                    { key: 'gmail', name: 'Gmail', desc: 'Read email and create drafts safely.', icon: '✉' },
-                    { key: 'notion', name: 'Notion', desc: 'Create notes, pages, and read databases.', icon: '📝' },
-                    { key: 'discord', name: 'Discord RPC', desc: 'Show "Using Mint Assistant" on Discord status.', icon: '💬' },
-                  ].map(p => (
-                    <div className="plugin-card" key={p.key}>
-                      <div className="plugin-icon">{p.icon}</div>
-                      <div className="plugin-info">
-                        <div className="plugin-name">{p.name}</div>
-                        <div className="plugin-desc">{p.desc}</div>
-                      </div>
-                      <div className="plugin-actions">
-                        <button className="btn-connect" onClick={() => handleConnectPlugin(p.key)} disabled={!isDesktopApp && p.key === 'discord'}>Connect</button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </section>
-
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">External tools</p>
-                    <h2 class="section-title">MCP Servers</h2>
-                  </div>
-                  <p className="section-description">Connect Mint to tools like search, GitHub, or filesystem servers.</p>
-                </div>
-
-                <div className="mcp-list">
-                  {Object.entries(config.mcpServers || {}).map(([name, srv]: [string, any]) => (
-                    <div className="plugin-card" key={name} style={{ marginBottom: '10px' }}>
-                      <div className="plugin-icon">⚙</div>
-                      <div className="plugin-info">
-                        <div className="plugin-name">{name}</div>
-                        <div className="plugin-desc" style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>
-                          Command: {srv.command} {srv.args?.join(' ')}
-                        </div>
-                      </div>
-                      <div className="plugin-actions">
-                        <button className="btn btn-danger" onClick={() => handleRemoveMcpServer(name)}>Remove</button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                <div className="add-mcp-box">
-                  <h3>Add MCP Server</h3>
-                  <div className="form-grid">
-                    <input type="text" placeholder="Server Name (e.g. google-search)" value={mcpName} onChange={(e) => setMcpName(e.target.value)} />
-                    <input type="text" placeholder="Command (e.g. npx)" value={mcpCmd} onChange={(e) => setMcpCmd(e.target.value)} />
-                  </div>
-                  <input type="text" placeholder="Arguments (e.g. -y @modelcontextprotocol/server-brave-search)" value={mcpArgs} onChange={(e) => setMcpArgs(e.target.value)} style={{ width: '100%', marginTop: '8px' }} />
-                  <textarea placeholder='Env JSON, e.g. {"BRAVE_API_KEY": "..."}' value={mcpEnv} onChange={(e) => setMcpEnv(e.target.value)} style={{ width: '100%', marginTop: '8px', height: '60px' }}></textarea>
-                  <button className="btn-primary full-width" onClick={handleAddMcpServer} style={{ marginTop: '10px', width: '100%' }}>Add MCP Server</button>
-                </div>
-              </section>
-            </div>
-          )}
-
-          {/* KEYBOARD SHORTCUTS SECTION */}
-          {activeTab === 'sect-shortcuts' && (
-            <div className="tab-pane active">
-              <section className="setting-section">
-                <div className="section-heading">
-                  <div>
-                    <p className="section-kicker">Keyboard</p>
-                    <h2 class="section-title">Shortcuts</h2>
-                  </div>
-                </div>
-                <div className="shortcut-list">
-                  <div className="shortcut-item">
-                    <span>Show / Hide Mint Window</span>
-                    <div className="keys"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Space</kbd></div>
-                  </div>
-                  <div className="shortcut-item">
-                    <span>Open Spotlight</span>
-                    <div className="keys"><kbd>Alt</kbd><kbd>Space</kbd></div>
-                  </div>
-                  <div className="shortcut-item">
-                    <span>Close / Dismiss</span>
-                    <div className="keys"><kbd>Esc</kbd></div>
-                  </div>
-                </div>
-              </section>
-            </div>
+            <PluginsTab
+              config={config}
+              updateField={updateField}
+              mcpName={mcpName}
+              setMcpName={setMcpName}
+              mcpCmd={mcpCmd}
+              setMcpCmd={setMcpCmd}
+              mcpArgs={mcpArgs}
+              setMcpArgs={setMcpArgs}
+              mcpEnv={mcpEnv}
+              setMcpEnv={setMcpEnv}
+              handleAddMcpServer={handleAddMcpServer}
+              handleRemoveMcpServer={handleRemoveMcpServer}
+              handleConnectPlugin={handleConnectPlugin}
+            />
           )}
         </div>
       </main>
 
       <footer className="settings-footer">
-        {isDesktopApp ? (
-          <button className="btn-danger" onClick={handleQuit}>Quit Application</button>
-        ) : (
-          <span className="web-safe-footer-note">Browser tab controls are handled by your browser.</span>
-        )}
+        <button className="btn-danger" onClick={handleQuit} disabled={!isDesktopApp}>Quit Application</button>
         <div className="footer-actions">
           <button className="btn-secondary" onClick={handleReset}>Reset to Default</button>
           <button className="btn-primary" onClick={handleSave}>Save Settings</button>