@pheem49/mint 1.8.0 → 1.8.1

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

@@ -157,15 +157,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')

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;
+  }
+}

package/src/renderer/src/css/styles.css

@@ -873,7 +873,7 @@ h1 {
 
 .assistant-workspace.model-hidden .conversation-panel {
   flex: 1;
-  max-width: 900px;
+  max-width: 1100px;
   margin: 0 auto;
 }
 
@@ -1167,6 +1167,51 @@ h1 {
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
 }
 
+.input-disclaimer {
+  text-align: center;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  opacity: 0.55;
+  padding: 4px 20px 10px;
+  margin: 0;
+  flex-shrink: 0;
+  line-height: 1.5;
+  user-select: none;
+}
+
+
+/* Chat Header (Mint Agent title bar inside panel) */
+.chat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 18px;
+  background: var(--chrome-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  height: 52px;
+  flex-shrink: 0;
+}
+
+.chat-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  color: var(--text-main);
+  font-size: 0.92rem;
+}
+
+.chat-header-logo {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+
 #chat-form {
   display: flex;
   gap: 12px;
@@ -1428,7 +1473,7 @@ h1 {
   gap: 8px;
   margin-bottom: 8px;
   margin-top: 0;
-  max-width: min(680px, 100%);
+  max-width: 100%;
 }
 
 .agent-activity-toggle {
@@ -1463,7 +1508,7 @@ h1 {
   border: 0;
   border-radius: 0;
   color: var(--text-main);
-  width: min(680px, 100%);
+  width: 100%;
   max-width: 100%;
   padding: 4px 0;
   box-shadow: none;
@@ -2705,7 +2750,7 @@ input:checked + .slider:before {
 
 .workspace-panel-actions {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   padding: 0 10px 12px 0;
 }
@@ -3321,12 +3366,12 @@ input:checked + .slider:before {
 .assistant-workspace.model-hidden .conversation-panel {
   position: relative;
   display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  width: min(840px, calc(100% - 64px));
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  width: min(1100px, calc(100% - 64px));
   height: 100%;
   max-width: none;
   margin: 0 auto;
-  padding: 56px 0 28px;
+  padding: 0 0 8px;
   grid-column: 1 / -1;
   z-index: 1;
 }
@@ -3349,13 +3394,13 @@ input:checked + .slider:before {
 }
 
 .assistant-workspace.model-hidden .conversation-panel.is-empty {
-  grid-template-rows: minmax(0, 1fr);
-  align-content: center;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  align-content: stretch;
   justify-content: stretch;
-  width: min(840px, calc(100% - 64px));
+  width: min(1100px, calc(100% - 64px));
   margin: 0 auto;
   padding-top: 0;
-  padding-bottom: 0;
+  padding-bottom: 8px;
 }
 
 .conversation-panel.is-empty .chat-container {
@@ -4239,3 +4284,11 @@ input:checked + .slider:before {
   font-size: 0.9rem;
 }
 
+/* Allow global text selection everywhere */
+* {
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  -moz-user-select: text !important;
+  -ms-user-select: text !important;
+}
+

package/src/renderer/src/index.css

@@ -380,7 +380,6 @@ button {
   }
 }
 
-/* Premium Markdown Styles for Chat Messages */
 .chat-inline-code {
   background: rgba(16, 185, 129, 0.15);
   border: 1px solid rgba(16, 185, 129, 0.25);
@@ -391,6 +390,18 @@ button {
   font-size: 0.88em;
 }
 
+.chat-mention {
+  background: color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
+  color: var(--accent, #34d399);
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-weight: 500;
+  font-size: 0.9em;
+  display: inline-block;
+  margin: 0 2px;
+}
+
 .chat-code-block-container {
   display: flex;
   flex-direction: column;