@pheem49/mint 1.8.0 → 1.8.1

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

@@ -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-web/css/image-studio.css

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

package/src/renderer/src-web/css/styles.css

@@ -916,7 +916,7 @@ h1 {
 
 .assistant-workspace.model-hidden .conversation-panel {
   flex: 1;
-  max-width: 900px;
+  max-width: 1100px;
   margin: 0 auto;
 }
 
@@ -1486,7 +1486,7 @@ h1 {
   gap: 8px;
   margin-bottom: 8px;
   margin-top: 0;
-  max-width: min(680px, 100%);
+  max-width: 100%;
 }
 
 .agent-activity-toggle {
@@ -1521,7 +1521,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;
@@ -3047,12 +3047,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: 32px 0 8px;
   grid-column: 1 / -1;
   z-index: 1;
 }
@@ -3075,13 +3075,13 @@ input:checked + .slider:before {
 }
 
 .assistant-workspace.model-hidden .conversation-panel.is-empty {
-  grid-template-rows: auto 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));
   margin: 0 auto;
-  padding-top: 56px;
-  padding-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 8px;
 }
 
 .conversation-panel.is-empty .chat-container {
@@ -3643,9 +3643,14 @@ input:checked + .slider:before {
 
   .assistant-workspace {
     display: flex;
+    flex-direction: column;
     margin-left: 0;
-    padding: 12px;
-    gap: 12px;
+    padding: 0;
+    gap: 0;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
   }
 
   .assistant-workspace.layout-chat {
@@ -3654,6 +3659,10 @@ input:checked + .slider:before {
 
   .app-body {
     grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
   }
 
   .sidebar-toggle {
@@ -3701,15 +3710,28 @@ input:checked + .slider:before {
   .conversation-panel {
     position: static;
     width: 100%;
+    height: 100%;
     max-height: none;
     transform: none;
     flex: 1;
     min-width: 0;
+    min-height: 0;
+    border-radius: 0;
+    overflow: hidden;
   }
 
   .chat-container {
     max-height: none;
   }
+  
+  .input-area {
+    padding: 10px;
+  }
+  
+  #chat-form {
+    min-height: auto;
+    padding: 6px;
+  }
 }
 
 /* Chat Bold Highlight styling */
@@ -3726,6 +3748,19 @@ input:checked + .slider:before {
   color: #38bdf8; /* Sky-400 for midnight theme */
 }
 
+/* Input Disclaimer Footer */
+.input-disclaimer {
+  text-align: center;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  opacity: 0.55;
+  padding: 6px 20px 10px;
+  margin: 0;
+  flex-shrink: 0;
+  line-height: 1.5;
+  user-select: none;
+}
+
 /* Web-Native Chat Header */
 .chat-header {
   display: flex;
@@ -3839,6 +3874,51 @@ input:checked + .slider:before {
   .mobile-menu-btn {
     display: flex;
   }
+
+  /* Override desktop grid layout so chat-header (hamburger) is visible on mobile */
+  .assistant-workspace.model-hidden .conversation-panel,
+  .assistant-workspace.model-hidden .conversation-panel.is-empty {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    grid-template-rows: none;
+    grid-column: auto;
+  }
+
+  /* Solid header fixed to top with background and blur */
+  .chat-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 200;
+    background: var(--chrome-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border-bottom: 1px solid var(--border);
+    height: 52px;
+    padding: 10px 16px;
+  }
+
+  .assistant-workspace.model-hidden .chat-header {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  /* Push chat content below fixed header */
+  .assistant-workspace.model-hidden .chat-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 64px 12px 8px;
+  }
+
+  .assistant-workspace.model-hidden .input-area {
+    width: 100%;
+    flex-shrink: 0;
+  }
 }
 
 /* System Event Divider with Pill */
@@ -4079,3 +4159,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-web/index.css

@@ -379,7 +379,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);
@@ -390,6 +389,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;

package/src/renderer/src-web/tauri.ts

@@ -134,6 +134,28 @@ export async function getRuntimeStatus(): Promise<RuntimeStatus> {
   return invoke<RuntimeStatus>('get_runtime_status')
 }
 
+export interface DetectedTools {
+  docker: boolean
+  git: boolean
+  gh: boolean
+  node: boolean
+}
+
+export async function detectSystemTools(): Promise<DetectedTools> {
+  if (typeof window === 'undefined' || !isTauriRuntime()) {
+    const API_BASE = getApiBase();
+    try {
+      const res = await fetch(`${API_BASE}/detect-tools`);
+      return await res.json();
+    } catch (e) {
+      console.error("Failed to detect tools from local server:", e);
+      return { docker: false, git: false, gh: false, node: false };
+    }
+  }
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<DetectedTools>('detect_system_tools')
+}
+
 export async function sendChatMessage(
   message: string,
   imageDataUri?: string | null,
@@ -577,12 +599,12 @@ export async function setDefaultImageProvider(provider: string): Promise<boolean
 
 
 
-export async function submitToolApproval(token: string, approved: boolean): Promise<void> {
+export async function submitToolApproval(token: string, approved: boolean, answer?: string): Promise<void> {
   if (typeof window === 'undefined' || !isTauriRuntime()) {
     return;
   }
   const { invoke } = await import('@tauri-apps/api/core')
-  return invoke('submit_tool_approval', { token, approved })
+  return invoke('submit_tool_approval', { token, approved, answer })
 }
 
 export async function proposeCodeEdits(root: string, edits: CodeEdit[]): Promise<CodeEditProposal> {