@pheem49/mint 1.8.0 → 1.8.2

package/src/renderer/src-web/components/Settings/PluginsTab.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { DEFAULT_CONFIG } from '../../components/SettingsWindow'
-import { listLearnedSkills, addLearnedSkill, deleteLearnedSkill, LearnedSkill } from '../../../src/tauri'
+import { listLearnedSkills, addLearnedSkill, deleteLearnedSkill, LearnedSkill, detectSystemTools, DetectedTools } from '../../../src/tauri'
 
 interface PluginsTabProps {
   config: typeof DEFAULT_CONFIG
@@ -40,14 +40,49 @@ export default function PluginsTab({
   const [skillsLoading, setSkillsLoading] = useState(false)
   const [skillsError, setSkillsError] = useState('')
 
-  // Load skills on mount
+  // Local state for auto-detected tools
+  const [detectedTools, setDetectedTools] = useState<DetectedTools>({
+    docker: false,
+    git: false,
+    gh: false,
+    node: false
+  })
+  const [detecting, setDetecting] = useState(false)
+
+  // Load skills and detect tools on mount
   useEffect(() => {
     fetchSkills()
+    detectTools()
   }, [])
 
+  const detectTools = async () => {
+    setDetecting(true)
+    try {
+      const tools = await detectSystemTools()
+      setDetectedTools(tools)
+    } catch (e) {
+      console.error("Failed to detect tools:", e)
+    } finally {
+      setDetecting(false)
+    }
+  }
+
+  const handleEnableTool = (name: string, command: string, args: string[]) => {
+    const updatedMcp = {
+      ...(config.mcpServers || {}),
+      [name]: {
+        command,
+        args,
+        env: {}
+      }
+    }
+    updateField('mcpServers', updatedMcp)
+  }
+
   const fetchSkills = async () => {
     try {
-      const list = await listLearnedSkills()
+      const activeWorkspace = window.localStorage.getItem('mint:last-workspace-path') || undefined
+      const list = await listLearnedSkills(activeWorkspace)
       setSkills(list)
     } catch (e) {
       console.error("Failed to load skills:", e)
@@ -121,6 +156,79 @@ export default function PluginsTab({
     }
   ]
 
+  const mcpListItems: Array<{
+    name: string
+    command: string
+    args: string[]
+    icon: string
+    isEnabled: boolean
+    isConfigured: boolean
+    description: string
+  }> = []
+
+  Object.entries(config.mcpServers || {}).forEach(([name, srv]: [string, any]) => {
+    let icon = '⚙';
+    if (name === 'docker') icon = '🐳';
+    else if (name === 'git' || name === 'gitkraken') icon = '🐙';
+    else if (name === 'github') icon = '🐱';
+    else if (name === 'node') icon = '🟢';
+
+    mcpListItems.push({
+      name,
+      command: srv.command,
+      args: srv.args || [],
+      icon,
+      isEnabled: true,
+      isConfigured: true,
+      description: `Command: ${srv.command} ${(srv.args || []).join(' ')}`
+    });
+  });
+
+  if (detectedTools.docker && !config.mcpServers?.docker) {
+    mcpListItems.push({
+      name: 'docker',
+      command: 'npx',
+      args: ['-y', '@proxeus/mcp-docker-server'],
+      icon: '🐳',
+      isEnabled: false,
+      isConfigured: false,
+      description: 'Docker MCP Server (Discovered)'
+    });
+  }
+  if (detectedTools.git && !config.mcpServers?.git) {
+    mcpListItems.push({
+      name: 'git',
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-git'],
+      icon: '🐙',
+      isEnabled: false,
+      isConfigured: false,
+      description: 'Git MCP Server (Discovered)'
+    });
+  }
+  if (detectedTools.gh && !config.mcpServers?.github) {
+    mcpListItems.push({
+      name: 'github',
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-github'],
+      icon: '🐱',
+      isEnabled: false,
+      isConfigured: false,
+      description: 'GitHub MCP Server (Discovered)'
+    });
+  }
+  if (detectedTools.node && !config.mcpServers?.node) {
+    mcpListItems.push({
+      name: 'node',
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-node'],
+      icon: '🟢',
+      isEnabled: false,
+      isConfigured: false,
+      description: 'NodeJS Runtime MCP Server (Discovered)'
+    });
+  }
+
   return (
     <div className="tab-pane active" style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
       {/* ── Learned AI Skills ── */}
@@ -153,7 +261,7 @@ export default function PluginsTab({
             {skills.map((s) => (
               <div className="skill-card" key={s.id} style={{
                 display: 'flex',
-                alignItems: 'flex-start',
+                alignItems: 'center',
                 justifyContent: 'space-between',
                 padding: '16px 20px',
                 border: '1px solid var(--border)',
@@ -162,7 +270,7 @@ export default function PluginsTab({
                 gap: '16px'
               }}>
                 <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                     <span className="badge" style={{
                       background: 'var(--accent)',
                       color: '#fff',
@@ -171,24 +279,31 @@ export default function PluginsTab({
                       padding: '2px 8px',
                       borderRadius: '4px'
                     }}>{s.name}</span>
+                    {s.location && (
+                      <span className="location-badge" style={{
+                        background: s.location === 'workspace' 
+                          ? 'rgba(16, 185, 129, 0.15)' 
+                          : s.location === 'global' 
+                            ? 'rgba(59, 130, 246, 0.15)' 
+                            : 'rgba(139, 92, 246, 0.15)',
+                        color: s.location === 'workspace' 
+                          ? '#10b981' 
+                          : s.location === 'global' 
+                            ? '#3b82f6' 
+                            : '#8b5cf6',
+                        fontSize: '0.7rem',
+                        fontWeight: '600',
+                        padding: '2px 6px',
+                        borderRadius: '4px',
+                        textTransform: 'capitalize'
+                      }}>
+                        {s.location === 'database' ? 'Taught' : s.location}
+                      </span>
+                    )}
                     <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>
                       Source: {s.sourcePath}
                     </span>
                   </div>
-                  <div style={{
-                    fontSize: '0.85rem',
-                    color: 'var(--text-main)',
-                    whiteSpace: 'pre-wrap',
-                    maxHeight: '120px',
-                    overflowY: 'auto',
-                    background: 'rgba(0,0,0,0.12)',
-                    padding: '10px 14px',
-                    borderRadius: '8px',
-                    fontFamily: 'monospace',
-                    lineHeight: '1.4'
-                  }}>
-                    {s.content}
-                  </div>
                 </div>
                 <button 
                   className="btn btn-danger" 
@@ -254,33 +369,98 @@ export default function PluginsTab({
         </div>
 
         <div className="mcp-list">
-          {Object.entries(config.mcpServers || {}).map(([name, srv]: [string, any]) => (
-            <div className="plugin-card" key={name} style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              padding: '16px 20px',
-              border: '1px solid var(--border)',
-              borderRadius: '12px',
-              background: 'var(--surface-bg)',
-              marginBottom: '10px'
-            }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-                <div className="plugin-icon" style={{ fontSize: '1.5rem', width: '40px', height: '40px', display: 'grid', placeItems: 'center', background: 'var(--surface-strong)', borderRadius: '10px' }}>⚙</div>
-                <div className="plugin-info">
-                  <div className="plugin-name" style={{ fontWeight: '600', color: 'var(--text-main)' }}>{name}</div>
-                  <div className="plugin-desc" style={{ fontFamily: 'monospace', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
-                    Command: {srv.command} {srv.args?.join(' ')}
+          {mcpListItems.length === 0 ? (
+            <div style={{ padding: '20px', textAlign: 'center', color: 'var(--text-muted)' }}>
+              No MCP servers configured or discovered.
+            </div>
+          ) : (
+            mcpListItems.map((item) => (
+              <div 
+                className="plugin-card" 
+                key={item.name} 
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '16px 20px',
+                  border: '1px solid var(--border)',
+                  borderRadius: '12px',
+                  background: item.isConfigured ? 'var(--surface-bg)' : 'rgba(16, 185, 129, 0.03)',
+                  opacity: item.isConfigured ? 1 : 0.65,
+                  marginBottom: '10px',
+                  transition: 'all 0.2s'
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                  <div className="plugin-icon" style={{ fontSize: '1.5rem', width: '40px', height: '40px', display: 'grid', placeItems: 'center', background: 'var(--surface-strong)', borderRadius: '10px' }}>
+                    {item.icon}
+                  </div>
+                  <div className="plugin-info">
+                    <div className="plugin-name" style={{ fontWeight: '600', color: 'var(--text-main)' }}>
+                      {item.name} {!item.isConfigured && <span style={{ fontSize: '0.75rem', padding: '2px 6px', background: 'rgba(16, 185, 129, 0.15)', color: '#10b981', borderRadius: '4px', marginLeft: '6px' }}>Discovered</span>}
+                    </div>
+                    <div className="plugin-desc" style={{ fontFamily: 'monospace', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
+                      {item.description}
+                    </div>
                   </div>
                 </div>
+                <div className="plugin-actions" style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                  {item.isConfigured && (
+                    <button 
+                      className="btn-icon-danger" 
+                      onClick={() => handleRemoveMcpServer(item.name)} 
+                      style={{ 
+                        background: 'transparent',
+                        border: 'none',
+                        color: '#ef4444',
+                        cursor: 'pointer',
+                        padding: '6px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: '6px',
+                        transition: 'background 0.2s'
+                      }}
+                      title="Delete MCP Server"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <polyline points="3 6 5 6 21 6"></polyline>
+                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                        <line x1="10" y1="11" x2="10" y2="17"></line>
+                        <line x1="14" y1="11" x2="14" y2="17"></line>
+                      </svg>
+                    </button>
+                  )}
+                  <label className="settings-toggle-switch">
+                    <input
+                      type="checkbox"
+                      checked={item.isEnabled}
+                      onChange={(e) => {
+                        if (e.target.checked) {
+                          handleEnableTool(item.name, item.command, item.args);
+                        } else {
+                          handleRemoveMcpServer(item.name);
+                        }
+                      }}
+                    />
+                    <span className="settings-toggle-slider" />
+                  </label>
+                </div>
               </div>
-              <div className="plugin-actions">
-                <button className="btn btn-danger" onClick={() => handleRemoveMcpServer(name)} style={{ padding: '6px 12px', fontSize: '0.8rem', height: '34px' }}>Remove</button>
-              </div>
-            </div>
-          ))}
+            ))
+          )}
         </div>
 
+        {/* Save settings alert */}
+        {((detectedTools.docker && !config.mcpServers?.docker) || 
+          (detectedTools.git && !config.mcpServers?.git) || 
+          (detectedTools.gh && !config.mcpServers?.github) || 
+          (detectedTools.node && !config.mcpServers?.node)) && (
+          <div style={{ marginTop: '12px', padding: '12px 16px', background: 'rgba(255,193,7,0.1)', border: '1px solid rgba(255,193,7,0.3)', borderRadius: '8px', fontSize: '0.8rem', color: '#ffb300', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span>⚠️ After toggling a plugin, please click the "Save Settings" button at the bottom of the window to persist changes.</span>
+          </div>
+        )}
+
         <div className="add-mcp-box" style={{
           marginTop: '20px',
           padding: '20px',

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

@@ -6,6 +6,7 @@ import AudioTab from './Settings/AudioTab'
 import AutomationTab from './Settings/AutomationTab'
 import ThemeTab from './Settings/ThemeTab'
 import PluginsTab from './Settings/PluginsTab'
+import AgentsTab from './Settings/AgentsTab'
 
 export const DEFAULT_CONFIG = {
   theme: 'dark',
@@ -30,7 +31,7 @@ export const DEFAULT_CONFIG = {
   proactiveCooldown: 120,
   enableVoiceReply: true,
   enableCustomWorkflows: true,
-  enableAgentCollaboration: true,
+  enableAgentCollaboration: false,
   ttsProvider: 'google',
   ttsVolume: 1.0,
   ttsSpeed: 1.0,
@@ -91,10 +92,40 @@ export const DEFAULT_CONFIG = {
   imageGenProvider: 'gemini' as 'gemini' | 'dalle' | 'stability' | 'ideogram' | 'replicate',
   stabilityApiKey: '',
   ideogramApiKey: '',
-  replicateApiKey: ''
+  replicateApiKey: '',
+  // Multi-Agent Configuration
+  agents: [
+    {
+      id: 'planner',
+      name: 'Planner',
+      provider: 'gemini',
+      model: 'gemini-2.5-flash',
+      apiKey: '',
+      systemInstruction: 'You are the Planner agent. Your task is to analyze the user request, inspect the workspace structure, and design a step-by-step implementation plan. Create or update the implementation_plan.md file to document your proposal.',
+      enabled: true
+    },
+    {
+      id: 'coder',
+      name: 'Coder',
+      provider: 'gemini',
+      model: 'gemini-2.5-flash',
+      apiKey: '',
+      systemInstruction: 'You are the Coder agent. Your task is to implement the changes specified in the approved implementation plan. Read relevant files, write clean and efficient code, and run terminal commands to build or verify. Stay focused on execution.',
+      enabled: true
+    },
+    {
+      id: 'reviewer',
+      name: 'Reviewer',
+      provider: 'gemini',
+      model: 'gemini-2.5-flash',
+      apiKey: '',
+      systemInstruction: 'You are the Reviewer agent. Your task is to verify the code modifications made by the Coder. Run the automated tests, check lint errors, and ensure the implementation is correct and complete.',
+      enabled: true
+    }
+  ]
 }
 
-type TabType = 'sect-general' | 'sect-audio' | 'sect-automation' | 'sect-theme' | 'sect-plugins' | 'sect-shortcuts' | 'sect-memory'
+type TabType = 'sect-general' | 'sect-audio' | 'sect-automation' | 'sect-theme' | 'sect-plugins' | 'sect-shortcuts' | 'sect-memory' | 'sect-agents'
 
 export const GEMINI_MODELS = [
   'gemini-2.5-flash',
@@ -157,15 +188,7 @@ export const LOCAL_MODELS = [
   'lmstudio-community/gemma-2-9b-it-GGUF'
 ]
 
-export const OLLAMA_MODELS = [
-  'llama3:latest',
-  'llama3.1:latest',
-  'llama3.2:latest',
-  'gemma2:latest',
-  'mistral:latest',
-  'phi3:latest',
-  'qwen2.5:latest'
-]
+export const OLLAMA_MODELS: string[] = []
 
 export default function SettingsWindow() {
   const [activeTab, setActiveTab] = useState<TabType>('sect-general')
@@ -624,6 +647,17 @@ export default function SettingsWindow() {
             </span>
             <strong>Plugins</strong>
           </button>
+          <button className={`tab-btn ${activeTab === 'sect-agents' ? 'active' : ''}`} onClick={() => setActiveTab('sect-agents')}>
+            <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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                <circle cx="9" cy="7" r="4"></circle>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+              </svg>
+            </span>
+            <strong>Multi-Agent (Beta)</strong>
+          </button>
         </nav>
 
         <div className="settings-content">
@@ -713,6 +747,14 @@ export default function SettingsWindow() {
               handleConnectPlugin={handleConnectPlugin}
             />
           )}
+
+          {activeTab === 'sect-agents' && (
+            <AgentsTab
+              config={config}
+              updateField={updateField}
+              dynamicOllamaModels={dynamicOllamaModels}
+            />
+          )}
         </div>
       </main>
 

package/src/renderer/src-web/css/image-studio.css

@@ -725,3 +725,9 @@
     overflow-y: auto;
   }
 }
+
+@media (max-width: 760px) {
+  .img-studio {
+    left: 0 !important;
+  }
+}