@pheem49/mint 1.3.0 → 1.4.1

package/src/Plugins/spotify.js

@@ -1,45 +1,173 @@
-const { exec } = require('child_process');
+/**
+ * Mint Spotify Plugin — Complete Edition
+ * ----------------------------------------
+ * Controls Spotify playback via playerctl (no OAuth required).
+ * Supports: play, pause, next, previous, stop, shuffle, volume,
+ *           now_playing, search (opens Spotify search URL).
+ *
+ * Requirements: playerctl installed (sudo apt install playerctl)
+ * Spotify must be running (Desktop app or Snap).
+ */
+
+const { exec, execSync } = require('child_process');
+const { promisify } = require('util');
+const execAsync = promisify(exec);
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+async function runPlayerctl(args) {
+    try {
+        const { stdout } = await execAsync(`playerctl -p spotify ${args}`);
+        return { ok: true, output: stdout.trim() };
+    } catch (err) {
+        const msg = (err.stderr || err.message || '').toLowerCase();
+        if (msg.includes('no players found') || msg.includes('could not find player')) {
+            return { ok: false, error: 'spotify_not_running' };
+        }
+        if (err.code === 127) {
+            return { ok: false, error: 'playerctl_missing' };
+        }
+        return { ok: false, error: err.message };
+    }
+}
+
+function formatError(errorCode) {
+    if (errorCode === 'spotify_not_running') {
+        return '🎵 Spotify ยังไม่ได้เปิดอยู่นะคะ กรุณาเปิด Spotify ก่อนนะคะ';
+    }
+    if (errorCode === 'playerctl_missing') {
+        return '⚠️ ไม่พบ playerctl กรุณาติดตั้งด้วยคำสั่ง: sudo apt install playerctl';
+    }
+    return `❌ เกิดข้อผิดพลาด: ${errorCode}`;
+}
+
+// ── Action Handlers ────────────────────────────────────────────────────────
+
+const ACTION_MAP = {
+    'play':     () => runPlayerctl('play'),
+    'pause':    () => runPlayerctl('pause'),
+    'stop':     () => runPlayerctl('stop'),
+    'next':     () => runPlayerctl('next'),
+    'previous': () => runPlayerctl('previous'),
+    'prev':     () => runPlayerctl('previous'),
+};
+
+const ACTION_MESSAGES = {
+    'play':     '▶️ เล่น Spotify แล้วค่ะ 🎵',
+    'pause':    '⏸️ หยุดเพลงชั่วคราวแล้วค่ะ',
+    'stop':     '⏹️ หยุด Spotify แล้วค่ะ',
+    'next':     '⏭️ ข้ามไปเพลงถัดไปแล้วค่ะ 🎵',
+    'previous': '⏮️ กลับไปเพลงก่อนหน้าแล้วค่ะ',
+    'prev':     '⏮️ กลับไปเพลงก่อนหน้าแล้วค่ะ',
+};
+
+async function getNowPlaying() {
+    const [title, artist, album, status] = await Promise.all([
+        runPlayerctl('metadata title'),
+        runPlayerctl('metadata artist'),
+        runPlayerctl('metadata album'),
+        runPlayerctl('status'),
+    ]);
+
+    if (!title.ok) return formatError(title.error);
+
+    const statusIcon = (status.output || '').toLowerCase() === 'playing' ? '▶️' : '⏸️';
+    const titleText  = title.output  || 'ไม่ทราบชื่อเพลง';
+    const artistText = artist.output || 'ไม่ทราบศิลปิน';
+    const albumText  = album.output  || '';
+
+    let reply = `${statusIcon} กำลังเล่น: **${titleText}**\n`;
+    reply += `🎤 ศิลปิน: ${artistText}`;
+    if (albumText) reply += `\n💿 อัลบั้ม: ${albumText}`;
+    return reply;
+}
+
+async function setVolume(levelStr) {
+    const level = parseInt(levelStr, 10);
+    if (isNaN(level) || level < 0 || level > 100) {
+        return '⚠️ กรุณาระบุระดับเสียง 0-100 ค่ะ เช่น "volume 70"';
+    }
+    // playerctl volume uses 0.0–1.0
+    const result = await runPlayerctl(`volume ${(level / 100).toFixed(2)}`);
+    if (!result.ok) return formatError(result.error);
+    return `🔊 ปรับเสียงเป็น ${level}% แล้วค่ะ`;
+}
+
+async function setShuffle(state) {
+    // state: 'on' | 'off' | 'toggle'
+    const shuffleState = state === 'on' ? 'On' : state === 'off' ? 'Off' : 'Toggle';
+    const result = await runPlayerctl(`shuffle ${shuffleState}`);
+    if (!result.ok) return formatError(result.error);
+    if (state === 'toggle') return '🔀 สลับโหมด Shuffle แล้วค่ะ';
+    return `🔀 Shuffle ${state === 'on' ? 'เปิด' : 'ปิด'}แล้วค่ะ`;
+}
+
+function searchSpotify(query) {
+    if (!query || !query.trim()) {
+        return '⚠️ กรุณาระบุคำที่ต้องการค้นหาด้วยนะคะ เช่น "search BTS"';
+    }
+    const encoded = encodeURIComponent(query.trim());
+    const url = `https://open.spotify.com/search/${encoded}`;
+    try {
+        const { exec: execSync2 } = require('child_process');
+        execSync2(`xdg-open "${url}"`, { detached: true, stdio: 'ignore' });
+        return `🔍 เปิดค้นหา "${query}" ใน Spotify แล้วค่ะ 🎵`;
+    } catch (_) {
+        return `🔍 ค้นหา "${query}" ที่: ${url}`;
+    }
+}
+
+// ── Main Plugin Export ─────────────────────────────────────────────────────
 
 module.exports = {
     name: 'spotify',
-    description: 'Controls Spotify playback (play, pause, next, previous). Only works if Spotify is running. Valid targets are: "play", "pause", "next", "previous".',
-    
+    description: [
+        'Controls Spotify playback and gets now-playing info.',
+        'Valid targets:',
+        '  "play" | "pause" | "stop" | "next" | "previous" — playback control',
+        '  "now_playing" or "status" — get current song info',
+        '  "volume <0-100>" — set volume level (e.g. "volume 70")',
+        '  "shuffle on" | "shuffle off" | "shuffle toggle" — toggle shuffle',
+        '  "search <query>" — search Spotify (e.g. "search BTS Dynamite")',
+    ].join(' '),
+
     async execute(target) {
-        return new Promise((resolve) => {
-            const commandMap = {
-                'play': 'playerctl -p spotify play',
-                'pause': 'playerctl -p spotify pause',
-                'next': 'playerctl -p spotify next',
-                'previous': 'playerctl -p spotify previous'
-            };
-
-            const cmd = commandMap[target.toLowerCase()];
-
-            if (!cmd) {
-                return resolve(`Invalid spotify command: ${target}`);
-            }
-
-            exec(cmd, (error) => {
-                if (error) {
-                    // Check if playerctl is missing or Spotify isn't running
-                    if (error.message.includes('No players found')) {
-                        return resolve('Spotify is not currently running or playing anything.');
-                    }
-                    if (error.code === 127) {
-                        return resolve('Error: "playerctl" is not installed on this system. Please install it (e.g., sudo apt install playerctl).');
-                    }
-                    return resolve(`Failed to execute Spotify command: ${error.message}`);
-                }
-
-                const actionText = {
-                    'play': 'Playing Spotify.',
-                    'pause': 'Paused Spotify.',
-                    'next': 'Skipped to the next song.',
-                    'previous': 'Went back to the previous song.'
-                };
-
-                resolve(actionText[target.toLowerCase()]);
-            });
-        });
-    }
+        const raw = (target || '').trim().toLowerCase();
+
+        // ── Basic playback commands ───────────────────────────────────────
+        if (ACTION_MAP[raw]) {
+            const result = await ACTION_MAP[raw]();
+            if (!result.ok) return formatError(result.error);
+            return ACTION_MESSAGES[raw];
+        }
+
+        // ── Now Playing ───────────────────────────────────────────────────
+        if (raw === 'now_playing' || raw === 'status' || raw === 'what\'s playing' || raw === 'current') {
+            return await getNowPlaying();
+        }
+
+        // ── Volume ────────────────────────────────────────────────────────
+        if (raw.startsWith('volume')) {
+            const levelStr = raw.replace('volume', '').trim();
+            return await setVolume(levelStr);
+        }
+
+        // ── Shuffle ───────────────────────────────────────────────────────
+        if (raw.startsWith('shuffle')) {
+            const state = raw.replace('shuffle', '').trim() || 'toggle';
+            return await setShuffle(state);
+        }
+
+        // ── Search ────────────────────────────────────────────────────────
+        if (raw.startsWith('search')) {
+            const query = target.replace(/^search\s*/i, '').trim();
+            return searchSpotify(query);
+        }
+
+        // ── Fallback: try as playerctl arg directly ───────────────────────
+        return `⚠️ ไม่รู้จักคำสั่ง Spotify: "${target}"\nคำสั่งที่รองรับ: play, pause, stop, next, previous, now_playing, volume <0-100>, shuffle on/off, search <query>`;
+    },
+
+    // Expose helpers for testing
+    _helpers: { runPlayerctl, getNowPlaying, setVolume, setShuffle, searchSpotify }
 };

package/src/Plugins/system_monitor.js

@@ -0,0 +1,72 @@
+/**
+ * Mint System Monitor Plugin
+ * --------------------------
+ * Provides real-time system statistics for the host machine.
+ * Uses standard Linux commands (uptime, free, df) for lightweight monitoring.
+ */
+
+const { exec } = require('child_process');
+const { promisify } = require('util');
+const execAsync = promisify(exec);
+const os = require('os');
+
+async function getStats() {
+    try {
+        const [uptime, free, df] = await Promise.all([
+            execAsync('uptime -p'),
+            execAsync('free -h'),
+            execAsync('df -h / --output=pcent,avail')
+        ]);
+
+        // Parse Memory
+        const memLines = free.stdout.split('\n');
+        const memLine = memLines.find(l => l.startsWith('Mem:')) || '';
+        const memParts = memLine.split(/\s+/).filter(Boolean);
+        const memUsed = memParts[2] || 'Unknown';
+        const memTotal = memParts[1] || 'Unknown';
+
+        // Parse Disk
+        const diskLines = df.stdout.trim().split('\n');
+        const diskLine = diskLines[1] || '';
+        const [diskPercent, diskAvail] = diskLine.trim().split(/\s+/);
+
+        const cpuLoad = os.loadavg()[0].toFixed(2);
+        const cpuCores = os.cpus().length;
+
+        let report = `📊 **System Health Report**\n`;
+        report += `⏱️ **Uptime:** ${uptime.stdout.trim()}\n`;
+        report += `💻 **CPU Load:** ${cpuLoad} (on ${cpuCores} cores)\n`;
+        report += `🧠 **Memory:** ${memUsed} / ${memTotal} used\n`;
+        report += `💽 **Disk (/):** ${diskAvail} available (${diskPercent} full)`;
+
+        return report;
+    } catch (err) {
+        return `❌ Error fetching system stats: ${err.message}`;
+    }
+}
+
+module.exports = {
+    name: 'system_monitor',
+    description: 'Provides system statistics like CPU load, memory usage, disk space, and uptime. Target can be "stats", "cpu", "memory", or "disk".',
+
+    async execute(target) {
+        const cmd = (target || 'stats').toLowerCase().trim();
+        
+        switch (cmd) {
+            case 'stats':
+            case 'health':
+                return await getStats();
+            case 'cpu':
+                return `💻 **CPU Load (1m):** ${os.loadavg()[0].toFixed(2)}\nCores: ${os.cpus().length}\nModel: ${os.cpus()[0].model}`;
+            case 'memory':
+            case 'ram':
+                const { stdout: mem } = await execAsync('free -h');
+                return `🧠 **Memory Status:**\n\`\`\`\n${mem}\`\`\``;
+            case 'disk':
+                const { stdout: disk } = await execAsync('df -h /');
+                return `💽 **Disk Status:**\n\`\`\`\n${disk}\`\`\``;
+            default:
+                return await getStats();
+        }
+    }
+};

package/src/System/config_manager.js

@@ -60,8 +60,14 @@ const DEFAULT_CONFIG = {
     mcpServers: {},
     anthropicApiKey: '',
     openaiApiKey: '',
+    hfApiKey: '',
     anthropicModel: 'claude-3-5-sonnet-latest',
-    openaiModel: 'gpt-4o'
+    openaiModel: 'gpt-4o',
+    hfModel: 'meta-llama/Meta-Llama-3-8B-Instruct',
+    localApiBaseUrl: 'http://localhost:1234/v1',
+    localModelName: 'local-model',
+    ollamaHost: 'http://localhost:11434',
+    enableAgentCollaboration: true
 };
 
 
@@ -90,4 +96,31 @@ function writeConfig(config) {
     }
 }
 
-module.exports = { readConfig, writeConfig, CONFIG_PATH };
+function getAvailableProviders(config) {
+    const providers = [];
+    const cfg = config || readConfig();
+    
+    const isPlaceholder = (val) => !val || val.startsWith('your_') || val.includes('key_here') || val.trim() === '';
+
+    // Check which providers have API keys or URLs configured
+    const anthropicKey = cfg.anthropicApiKey || process.env.ANTHROPIC_API_KEY;
+    if (!isPlaceholder(anthropicKey)) providers.push('anthropic');
+
+    const openaiKey = cfg.openaiApiKey || process.env.OPENAI_API_KEY;
+    if (!isPlaceholder(openaiKey)) providers.push('openai');
+
+    const geminiKey = cfg.apiKey || process.env.GEMINI_API_KEY;
+    if (!isPlaceholder(geminiKey)) providers.push('gemini');
+
+    const hfKey = cfg.hfApiKey || process.env.HF_API_KEY;
+    if (!isPlaceholder(hfKey)) providers.push('huggingface');
+
+    if (cfg.localApiBaseUrl && cfg.localApiBaseUrl.trim() !== '') providers.push('local_openai');
+    
+    // Always push ollama at the end since it's local
+    providers.push('ollama');
+
+    return providers;
+}
+
+module.exports = { readConfig, writeConfig, getAvailableProviders, CONFIG_PATH };

package/src/System/custom_workflows.js

@@ -3,6 +3,10 @@ const path = require('path');
 const { app, shell } = require('electron');
 const { exec } = require('child_process');
 
+function escapeRegExp(text) {
+    return String(text).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 class CustomWorkflows {
     constructor() {
         this.configPath = path.join(app.getPath('userData'), 'workflows.json');
@@ -86,7 +90,7 @@ class CustomWorkflows {
                     if (wf.trigger && wf.trigger.type === 'process_running' && wf.trigger.processName) {
                         const targetName = wf.trigger.processName.toLowerCase();
                         // simplistic exact-word match to avoid partial matches
-                        const regex = new RegExp(`^${targetName}$`, 'm');
+                        const regex = new RegExp(`^${escapeRegExp(targetName)}$`, 'm');
                         const isRunning = regex.test(runningProcesses);
                         
                         if (isRunning) {
@@ -124,4 +128,7 @@ class CustomWorkflows {
     }
 }
 
-module.exports = new CustomWorkflows();
+const instance = new CustomWorkflows();
+instance._helpers = { escapeRegExp };
+
+module.exports = instance;

package/src/System/notifications.js

@@ -0,0 +1,23 @@
+/**
+ * Mint Notification System
+ * ------------------------
+ * Sends system-level notifications to the user.
+ * Supports Linux (notify-send) as a primary target for CLI.
+ */
+
+const { exec } = require('child_process');
+
+function sendNotification(title, message, urgency = 'normal') {
+    // Attempt to use notify-send (Linux)
+    const cmd = `notify-send -u ${urgency} "${title}" "${message}"`;
+    exec(cmd, (err) => {
+        if (err) {
+            // Fallback: Silent console log if no notifier found
+            console.log(`[Notification] ${title}: ${message}`);
+        }
+    });
+}
+
+module.exports = {
+    sendNotification
+};

package/src/UI/settings.html

@@ -38,74 +38,138 @@
             <div class="settings-content" id="settings-content">
 
                 <div class="tab-pane active" id="sect-general">
-                    <!-- API Key -->
-            <section class="setting-section">
-                <h2 class="section-title">🔑 Gemini API Key</h2>
-                <div class="setting-row">
-                    <label for="api-key-input">API Key</label>
-                    <div class="input-group">
-                        <input type="password" id="api-key-input" placeholder="Enter your Gemini API Key..."
-                            autocomplete="off">
-                        <button class="toggle-visibility" id="toggle-key" title="Show/Hide">👁</button>
-                    </div>
-                    <div class="api-actions">
-                        <button class="api-save-btn" id="save-api-key">Save API Key</button>
-                        <span class="api-save-status" id="api-save-status" aria-live="polite"></span>
-                    </div>
-                    <p class="hint">Get your API Key at <a href="#" id="ai-studio-link">Google AI Studio</a></p>
-                </div>
-                <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 12px; background: rgba(139, 92, 246, 0.1); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.2);">
-                    <div style="display: flex; flex-direction: column; gap: 4px;">
-                        <label for="show-desktop-widget" style="margin-bottom: 0; font-weight: 500;">Show Desktop AI Candidate</label>
-                        <span class="hint" style="font-size: 0.75rem;">Show the mini AI character on your desktop</span>
-                    </div>
-                    <label class="toggle-switch">
-                        <input type="checkbox" id="show-desktop-widget">
-                        <span class="toggle-slider"></span>
-                    </label>
-                </div>
-            </section>
-                    <!-- AI Provider & Model -->
-            <section class="setting-section">
-                <h2 class="section-title">🧠 AI Engine</h2>
-                <div class="setting-row">
-                    <label for="ai-provider-select">Provider</label>
-                    <div class="input-group">
-                        <select id="ai-provider-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
-                            <option value="gemini" style="background: var(--bg-color)">Google Gemini (Cloud)</option>
-                            <option value="ollama" style="background: var(--bg-color)">Ollama (Local / Private)</option>
-                        </select>
-                    </div>
-                </div>
+                    <!-- API Keys & Hosts -->
+                    <section class="setting-section">
+                        <h2 class="section-title">🔑 API Keys & Hosts</h2>
+                        <div class="setting-row">
+                            <label for="api-key-input">Gemini API Key</label>
+                            <div class="input-group">
+                                <input type="password" id="api-key-input" placeholder="Enter Gemini API Key..." autocomplete="off">
+                                <button class="toggle-visibility" onclick="const i = document.getElementById('api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
+                            </div>
+                        </div>
+                        <div class="setting-row" style="margin-top: 10px;">
+                            <label for="openai-api-key-input">OpenAI API Key</label>
+                            <div class="input-group">
+                                <input type="password" id="openai-api-key-input" placeholder="Enter OpenAI API Key..." autocomplete="off">
+                                <button class="toggle-visibility" onclick="const i = document.getElementById('openai-api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
+                            </div>
+                        </div>
+                        <div class="setting-row" style="margin-top: 10px;">
+                            <label for="anthropic-api-key-input">Anthropic API Key</label>
+                            <div class="input-group">
+                                <input type="password" id="anthropic-api-key-input" placeholder="Enter Anthropic API Key..." autocomplete="off">
+                                <button class="toggle-visibility" onclick="const i = document.getElementById('anthropic-api-key-input'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
+                            </div>
+                        </div>
+                        <div class="setting-row" style="margin-top: 10px;">
+                            <label for="hf-api-key">Hugging Face API Key</label>
+                            <div class="input-group">
+                                <input type="password" id="hf-api-key" placeholder="Enter Hugging Face API Key..." autocomplete="off">
+                                <button class="toggle-visibility" onclick="const i = document.getElementById('hf-api-key'); i.type = i.type === 'password' ? 'text' : 'password';" title="Show/Hide">👁</button>
+                            </div>
+                        </div>
+                        <div class="setting-row" style="margin-top: 10px;">
+                            <label for="local-api-base-url">LM Studio Base URL</label>
+                            <input type="text" id="local-api-base-url" placeholder="e.g. http://localhost:1234/v1">
+                        </div>
+                        <div class="setting-row" style="margin-top: 10px;">
+                            <label for="ollama-host-input">Ollama Host</label>
+                            <input type="text" id="ollama-host-input" placeholder="e.g. http://localhost:11434">
+                        </div>
+                        <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 12px; background: rgba(139, 92, 246, 0.1); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.2);">
+                            <div style="display: flex; flex-direction: column; gap: 4px;">
+                                <label for="show-desktop-widget" style="margin-bottom: 0; font-weight: 500;">Show Desktop AI Candidate</label>
+                                <span class="hint" style="font-size: 0.75rem;">Show the mini AI character on your desktop</span>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="show-desktop-widget">
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </section>
 
-                <!-- Gemini Options -->
-                <div id="gemini-options" style="margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,0.1);">
-                    <div class="setting-row">
-                        <label for="gemini-model-select">Gemini Model</label>
-                        <div class="input-group">
-                            <select id="gemini-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
-                                <option value="gemini-2.5-flash" style="background: var(--bg-color)">gemini-2.5-flash</option>
-                                <option value="gemini-3.1-flash-lite" style="background: var(--bg-color)">gemini-3.1-flash-lite</option>
-                                <option value="gemini-3.1-flash-lite-preview" style="background: var(--bg-color)">gemini-3.1-flash-lite-preview</option>
-                                <option value="custom" style="background: var(--bg-color)">Custom...</option>
-                            </select>
+                    <!-- Models Configuration -->
+                    <section class="setting-section">
+                        <h2 class="section-title">🧠 AI Engine & Default Models</h2>
+                        <div class="setting-row">
+                            <label for="ai-provider-select">Active Provider</label>
+                            <div class="input-group">
+                                <select id="ai-provider-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
+                                    <option value="gemini" style="background: var(--bg-color)">Google Gemini (Cloud)</option>
+                                    <option value="anthropic" style="background: var(--bg-color)">Anthropic Claude</option>
+                                    <option value="openai" style="background: var(--bg-color)">OpenAI</option>
+                                    <option value="ollama" style="background: var(--bg-color)">Ollama (Local / Private)</option>
+                                    <option value="huggingface" style="background: var(--bg-color)">Hugging Face (Inference API)</option>
+                                    <option value="local_openai" style="background: var(--bg-color)">Local (LM Studio / OpenAI Compatible)</option>
+                                </select>
+                            </div>
                         </div>
-                    </div>
-                    <div class="setting-row" id="gemini-model-custom-row" style="display: none; margin-top: 10px;">
-                        <label for="gemini-model-custom">Custom Model</label>
-                        <input type="text" id="gemini-model-custom" placeholder="e.g. gemini-3.1-flash-lite-preview">
-                    </div>
-                </div>
 
-                <!-- Ollama Options -->
-                <div id="ollama-options" style="display: none; margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,0.1);">
-                    <div class="setting-row">
-                        <label for="ollama-model-input">Ollama Model</label>
-                        <input type="text" id="ollama-model-input" placeholder="e.g. llama3:latest">
-                        <p class="hint" style="margin-top: 8px; color: #fbbf24;">Make sure Ollama is running at http://localhost:11434</p>
-                    </div>
-                </div>
-            </section>
+                        <div class="setting-row" style="margin-top: 14px;">
+                            <label for="gemini-model-select">Gemini Model</label>
+                            <div class="input-group">
+                                <select id="gemini-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
+                                    <option value="gemini-2.5-flash" style="background: var(--bg-color)">gemini-2.5-flash</option>
+                                    <option value="gemini-3.1-flash-lite" style="background: var(--bg-color)">gemini-3.1-flash-lite</option>
+                                    <option value="gemini-3.1-flash-lite-preview" style="background: var(--bg-color)">gemini-3.1-flash-lite-preview</option>
+                                    <option value="custom" style="background: var(--bg-color)">Custom...</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="setting-row" id="gemini-model-custom-row" style="display: none; margin-top: 10px;">
+                            <label for="gemini-model-custom">Custom Gemini Model</label>
+                            <input type="text" id="gemini-model-custom" placeholder="e.g. gemini-3.1-flash-lite-preview">
+                        </div>
+
+                        <div class="setting-row" style="margin-top: 14px;">
+                            <label for="openai-model-select">OpenAI Model</label>
+                            <div class="input-group">
+                                <select id="openai-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
+                                    <option value="gpt-4o" style="background: var(--bg-color)">gpt-4o</option>
+                                    <option value="gpt-4o-mini" style="background: var(--bg-color)">gpt-4o-mini</option>
+                                    <option value="o1-preview" style="background: var(--bg-color)">o1-preview</option>
+                                    <option value="o1-mini" style="background: var(--bg-color)">o1-mini</option>
+                                    <option value="custom" style="background: var(--bg-color)">Custom...</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="setting-row" id="openai-model-custom-row" style="display: none; margin-top: 10px;">
+                            <label for="openai-model-custom">Custom OpenAI Model</label>
+                            <input type="text" id="openai-model-custom" placeholder="e.g. gpt-4o">
+                        </div>
+
+                        <div class="setting-row" style="margin-top: 14px;">
+                            <label for="anthropic-model-select">Anthropic Model</label>
+                            <div class="input-group">
+                                <select id="anthropic-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
+                                    <option value="claude-3-5-sonnet-latest" style="background: var(--bg-color)">claude-3-5-sonnet-latest</option>
+                                    <option value="claude-3-opus-latest" style="background: var(--bg-color)">claude-3-opus-latest</option>
+                                    <option value="claude-3-5-haiku-latest" style="background: var(--bg-color)">claude-3-5-haiku-latest</option>
+                                    <option value="custom" style="background: var(--bg-color)">Custom...</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="setting-row" id="anthropic-model-custom-row" style="display: none; margin-top: 10px;">
+                            <label for="anthropic-model-custom">Custom Anthropic Model</label>
+                            <input type="text" id="anthropic-model-custom" placeholder="e.g. claude-3-5-sonnet-latest">
+                        </div>
+
+                        <div class="setting-row" style="margin-top: 14px;">
+                            <label for="hf-model-name">Hugging Face Model</label>
+                            <input type="text" id="hf-model-name" placeholder="e.g. meta-llama/Meta-Llama-3-8B-Instruct">
+                        </div>
+
+                        <div class="setting-row" style="margin-top: 14px;">
+                            <label for="local-model-name">Local (LM Studio) Model</label>
+                            <input type="text" id="local-model-name" placeholder="e.g. local-model">
+                        </div>
+
+                        <div class="setting-row" style="margin-top: 14px;">
+                            <label for="ollama-model-input">Ollama Model</label>
+                            <input type="text" id="ollama-model-input" placeholder="e.g. llama3:latest">
+                        </div>
+                    </section>
                 </div>
                 <div class="tab-pane" id="sect-audio">
                     <!-- Audio & Voice -->
@@ -212,6 +276,20 @@
                     <button class="btn-secondary" id="open-workflows-btn">Open workflows.json</button>
                     <button class="btn-primary" id="reload-workflows-btn">Reload Rules</button>
                 </div>
+            </section>
+                    <!-- Agent Collaboration -->
+            <section class="setting-section">
+                <h2 class="section-title">🤝 Agent Collaboration</h2>
+                <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between;">
+                    <label for="enable-agent-collaboration" style="margin-bottom: 0;">Enable Multi-Agent Review</label>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="enable-agent-collaboration">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="setting-row" style="margin-top: 10px;">
+                    <p class="hint">When in Code Mode, allow a secondary AI model to automatically review the code written by the primary model. (Requires multiple API keys. Costs API credits for both models.)</p>
+                </div>
             </section>
                 </div>
                 <div class="tab-pane" id="sect-theme">