@pheem49/mint 1.8.0 → 1.8.2

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { DEFAULT_CONFIG } from '../SettingsWindow'
-import { listLearnedSkills, addLearnedSkill, deleteLearnedSkill, LearnedSkill } from '../../tauri'
+import { listLearnedSkills, addLearnedSkill, deleteLearnedSkill, LearnedSkill, detectSystemTools, DetectedTools } from '../../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)
@@ -122,6 +157,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 ── */}
@@ -154,7 +262,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)',
@@ -163,7 +271,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',
@@ -172,24 +280,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" 
@@ -255,33 +370,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/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')
@@ -594,6 +617,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">
@@ -674,6 +708,14 @@ export default function SettingsWindow() {
               handleConnectPlugin={handleConnectPlugin}
             />
           )}
+
+          {activeTab === 'sect-agents' && (
+            <AgentsTab
+              config={config}
+              updateField={updateField}
+              dynamicOllamaModels={dynamicOllamaModels}
+            />
+          )}
         </div>
       </main>
 

package/src/renderer/src/components/WorkspacePanel.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
-import { getWorkspaceTree, type WorkspaceTreeEntry } from '../tauri'
+import React, { useEffect, useState } from 'react'
+import { getWorkspaceTree, type WorkspaceTreeEntry, createWorkspaceFile, createWorkspaceFolder, deleteWorkspaceItem } from '../tauri'
 import folderIcon from 'material-icon-theme/icons/folder.svg?url'
 import folderOpenIcon from 'material-icon-theme/icons/folder-open.svg?url'
 import folderComponentsIcon from 'material-icon-theme/icons/folder-components.svg?url'
@@ -147,7 +147,7 @@ function materialFileIcon(name: string, fileExtension: string) {
   return FILE_ICONS_BY_NAME[name.toLowerCase()] || FILE_ICONS_BY_EXTENSION[fileExtension] || documentIcon
 }
 
-function TreeNode({ entry, level }: { entry: WorkspaceTreeEntry; level: number; key?: string }) {
+function TreeNode({ entry, level, onRefresh, workspacePath }: { entry: WorkspaceTreeEntry; level: number; onRefresh: () => void; workspacePath: string; key?: string }) {
   const [open, setOpen] = useState(level < 1)
   const isDirectory = entry.kind === 'directory'
   const hasChildren = entry.children.length > 0
@@ -156,6 +156,20 @@ function TreeNode({ entry, level }: { entry: WorkspaceTreeEntry; level: number;
   const materialIcon = isDirectory ? materialFolderIcon(entry.name, open) : materialFileIcon(entry.name, fileExtension)
   const dragText = `@${entry.path}`
 
+  const handleContextMenu = async (event: React.MouseEvent) => {
+    event.preventDefault()
+    const confirmed = confirm(`Are you sure you want to delete "${entry.name}"?`)
+    if (!confirmed) return
+
+    try {
+      const absolutePath = `${workspacePath}/${entry.path}`
+      await deleteWorkspaceItem(absolutePath)
+      onRefresh()
+    } catch (err) {
+      alert(`Failed to delete item: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  }
+
   return (
     <div className="workspace-tree-node">
       <button
@@ -163,6 +177,7 @@ function TreeNode({ entry, level }: { entry: WorkspaceTreeEntry; level: number;
         className={`workspace-tree-row ${isDirectory ? 'is-directory' : 'is-file'}`}
         style={{ paddingLeft: `${level * 16 + 8}px` }}
         onClick={() => isDirectory && hasChildren && setOpen((current) => !current)}
+        onContextMenu={handleContextMenu}
         title={entry.path}
         draggable
         onDragStart={(event) => {
@@ -186,7 +201,7 @@ function TreeNode({ entry, level }: { entry: WorkspaceTreeEntry; level: number;
       {isDirectory && open && hasChildren && (
         <div className="workspace-tree-children">
           {entry.children.map((child) => (
-            <TreeNode key={child.path} entry={child} level={level + 1} />
+            <TreeNode key={child.path} entry={child} level={level + 1} onRefresh={onRefresh} workspacePath={workspacePath} />
           ))}
         </div>
       )}
@@ -217,11 +232,52 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
 
   useEffect(() => {
     refresh()
+
+    // Refresh when the window gains focus (e.g., switching back from VS Code)
+    const handleFocus = () => {
+      refresh()
+    }
+    window.addEventListener('focus', handleFocus)
+
+    // Poll every 15 seconds to catch edits/updates in real-time
+    const interval = setInterval(() => {
+      refresh()
+    }, 15000)
+
+    return () => {
+      window.removeEventListener('focus', handleFocus)
+      clearInterval(interval)
+    }
   }, [workspacePath])
 
-  const startWorkspacePrompt = () => {
-    onEnableAgentMode()
-    onSetMessage('Review this workspace and help plan next steps')
+  const handleCreateFile = async () => {
+    if (!workspacePath.trim()) return
+    const name = prompt('Enter name of new file:')
+    if (!name || !name.trim()) return
+
+    try {
+      setError('')
+      const fullPath = `${workspacePath}/${name.trim()}`
+      await createWorkspaceFile(fullPath)
+      await refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    }
+  }
+
+  const handleCreateFolder = async () => {
+    if (!workspacePath.trim()) return
+    const name = prompt('Enter name of new folder:')
+    if (!name || !name.trim()) return
+
+    try {
+      setError('')
+      const fullPath = `${workspacePath}/${name.trim()}`
+      await createWorkspaceFolder(fullPath)
+      await refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    }
   }
 
   return (
@@ -237,7 +293,8 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
       </header>
 
       <div className="workspace-panel-actions">
-        <button type="button" onClick={startWorkspacePrompt}>Use Agent</button>
+        <button type="button" onClick={handleCreateFile} disabled={!workspacePath.trim()}>New File</button>
+        <button type="button" onClick={handleCreateFolder} disabled={!workspacePath.trim()}>New Folder</button>
         <button type="button" onClick={refresh} disabled={!workspacePath.trim()}>Refresh</button>
       </div>
 
@@ -255,7 +312,7 @@ export default function WorkspacePanel({ agentMode, sending, workspacePath, onEn
             </div>
             <div className="workspace-tree">
               {tree.children.map((entry) => (
-                <TreeNode key={entry.path} entry={entry} level={0} />
+                <TreeNode key={entry.path} entry={entry} level={0} onRefresh={refresh} workspacePath={workspacePath} />
               ))}
             </div>
           </>

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

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