@pheem49/mint 1.8.2 → 1.10.0

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

@@ -13,11 +13,126 @@ interface PluginsTabProps {
   setMcpArgs: (val: string) => void
   mcpEnv: string
   setMcpEnv: (val: string) => void
+  mcpIcon?: string
+  setMcpIcon?: (val: string) => void
   handleAddMcpServer: () => void
   handleRemoveMcpServer: (name: string) => void
   handleConnectPlugin: (plugin: string) => void
 }
 
+function renderMcpSvgIcon(name: string, customSvgOrUrl?: string) {
+  if (customSvgOrUrl && customSvgOrUrl.trim()) {
+    const trimmed = customSvgOrUrl.trim()
+    if (trimmed.startsWith('<svg') || trimmed.includes('<svg')) {
+      return (
+        <span 
+          style={{ width: '22px', height: '22px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+          dangerouslySetInnerHTML={{ __html: trimmed }} 
+        />
+      )
+    }
+    if (trimmed.startsWith('data:image') || trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+      return <img src={trimmed} alt={name} style={{ width: '22px', height: '22px', objectFit: 'contain' }} />
+    }
+    const cleanCustom = trimmed.toLowerCase()
+    if (cleanCustom === 'search') {
+      return (
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+      )
+    }
+    if (cleanCustom === 'database') {
+      return (
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#a855f7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <ellipse cx="12" cy="5" rx="9" ry="3"/>
+          <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
+          <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+        </svg>
+      )
+    }
+    if (cleanCustom === 'cloud') {
+      return (
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#38bdf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
+        </svg>
+      )
+    }
+    if (cleanCustom === 'code' || cleanCustom === 'terminal') {
+      return (
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="16 18 22 12 16 6" />
+          <polyline points="8 6 2 12 8 18" />
+        </svg>
+      )
+    }
+    if (cleanCustom === 'api' || cleanCustom === 'bolt') {
+      return (
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+        </svg>
+      )
+    }
+  }
+
+  const cleanName = name.toLowerCase().trim()
+  if (cleanName === 'docker') {
+    return (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="#0db7ed">
+        <path d="M13 8.5h2v2h-2zm-3 0h2v2h-2zm-3 0h2v2H7zm-3 3h2v2H4zm3 0h2v2H7zm3 0h2v2h-2zm3 0h2v2h-2zm3 0h2v2h-2zm-12 3h2v2H4zm3 0h2v2H7zm3 0h2v2h-2zm3 0h2v2h-2zm3 0h2v2h-2zm-6.2 3.8c-.8.5-2.1.8-3.4.6-2.5-.3-4.5-2.2-4.8-4.7h-1c.4 3.4 3.1 6 6.5 6 3 0 5.6-2 6.4-4.8.6-.2 1.4-.4 2.2-.2.3.1.6.3.8.5.6.6 1.4.9 2.2.9h.4c.5-.7.8-1.5.8-2.4 0-.3 0-.6-.1-.9-.7.1-1.4 0-2.1-.3-.6-.3-1.1-.8-1.5-1.4l-.2-.3h-2.1c-.2.7-.6 1.3-1.2 1.7-.6.4-1.3.6-2 .4z"/>
+      </svg>
+    )
+  }
+  if (cleanName === 'git' || cleanName === 'gitkraken') {
+    return (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f05032" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="18" cy="18" r="3" />
+        <circle cx="6" cy="6" r="3" />
+        <circle cx="6" cy="18" r="3" />
+        <path d="M6 9v6" />
+        <path d="M9 18h6" />
+      </svg>
+    )
+  }
+  if (cleanName === 'github') {
+    return (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="#f0f6fc">
+        <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
+      </svg>
+    )
+  }
+  if (cleanName === 'node' || cleanName === 'nodejs') {
+    return (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="#68a063">
+        <path d="M12 2L2 7.5v9L12 22l10-5.5v-9L12 2zm0 2.3l7.7 4.2v7L12 19.7 4.3 15.5v-7L12 4.3zm-1 4.2v3.5l-3-1.7V8.5l3 1.7zm2 0l3-1.7v1.8l-3 1.7V8.5z"/>
+      </svg>
+    )
+  }
+  if (cleanName === 'spotify') {
+    return (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="#1ed760">
+        <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424c-.18.295-.563.387-.857.207-2.35-1.434-5.308-1.758-8.793-.963-.335.077-.67-.133-.746-.467-.077-.334.132-.67.467-.746 3.812-.871 7.102-.494 9.722 1.112.294.18.386.563.207.857zm1.233-2.743c-.226.367-.706.482-1.073.257-2.687-1.652-6.785-2.131-9.965-1.166-.413.126-.847-.106-.973-.519-.125-.413.106-.847.519-.973 3.632-1.102 8.147-.568 11.235 1.328.367.226.482.706.257 1.073zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71c-.496.15-1.022-.132-1.173-.628-.15-.496.132-1.022.628-1.173 3.535-1.073 9.404-.871 12.984 1.254.446.265.592.844.327 1.29-.265.446-.844.592-1.29.327z"/>
+      </svg>
+    )
+  }
+  if (cleanName === 'discord') {
+    return (
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="#5865f2">
+        <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.893.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+      </svg>
+    )
+  }
+  return (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
+      <rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
+      <line x1="6" y1="6" x2="6.01" y2="6"/>
+      <line x1="6" y1="18" x2="6.01" y2="18"/>
+    </svg>
+  )
+}
+
 export default function PluginsTab({
   config,
   updateField,
@@ -29,6 +144,8 @@ export default function PluginsTab({
   setMcpArgs,
   mcpEnv,
   setMcpEnv,
+  mcpIcon = '',
+  setMcpIcon,
   handleAddMcpServer,
   handleRemoveMcpServer,
   handleConnectPlugin
@@ -123,6 +240,20 @@ export default function PluginsTab({
     }
   }
 
+  const [expandedMcp, setExpandedMcp] = useState<string | null>(null)
+
+  const handleUpdateMcpServerField = (serverName: string, field: string, value: any) => {
+    const currentMcp = config.mcpServers?.[serverName] || { command: 'npx', args: [], env: {} }
+    const updatedMcp = {
+      ...(config.mcpServers || {}),
+      [serverName]: {
+        ...currentMcp,
+        [field]: value
+      }
+    }
+    updateField('mcpServers', updatedMcp)
+  }
+
   const [expandedPlugin, setExpandedPlugin] = useState<string | null>(null)
 
   const toggleExpand = (pluginKey: string) => {
@@ -161,6 +292,7 @@ export default function PluginsTab({
     command: string
     args: string[]
     icon: string
+    customIcon?: string
     isEnabled: boolean
     isConfigured: boolean
     description: string
@@ -178,6 +310,7 @@ export default function PluginsTab({
       command: srv.command,
       args: srv.args || [],
       icon,
+      customIcon: srv.icon,
       isEnabled: true,
       isConfigured: true,
       description: `Command: ${srv.command} ${(srv.args || []).join(' ')}`
@@ -374,80 +507,171 @@ export default function PluginsTab({
               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>}
+            mcpListItems.map((item) => {
+              const isExpanded = expandedMcp === item.name;
+              const srvConfig = config.mcpServers?.[item.name] || { command: item.command, args: item.args, env: {}, icon: item.customIcon };
+
+              return (
+                <div 
+                  className={`plugin-card-wrapper ${isExpanded ? 'active-plugin-card' : ''}`}
+                  key={item.name} 
+                  style={{
+                    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 ease',
+                    overflow: 'hidden'
+                  }}
+                >
+                  <div className="plugin-card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px' }}>
+                    <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' }}>
+                        {renderMcpSvgIcon(item.name, item.customIcon)}
+                      </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-desc" style={{ fontFamily: 'monospace', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
-                      {item.description}
+                    <div className="plugin-actions" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      {item.isConfigured && (
+                        <>
+                          <button 
+                            className="btn-icon-edit" 
+                            onClick={() => setExpandedMcp(isExpanded ? null : item.name)}
+                            style={{ 
+                              background: isExpanded ? 'var(--accent)' : 'transparent',
+                              border: 'none',
+                              color: isExpanded ? '#fff' : 'var(--text-soft)',
+                              cursor: 'pointer',
+                              padding: '6px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              borderRadius: '6px',
+                              transition: 'all 0.2s'
+                            }}
+                            title="Edit MCP Server Settings"
+                          >
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                            </svg>
+                          </button>
+                          <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>
-                <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>
+
+                  {item.isConfigured && isExpanded && (
+                    <div className="plugin-config-panel" style={{
+                      padding: '16px 20px',
+                      borderTop: '1px solid var(--border)',
+                      background: 'rgba(0, 0, 0, 0.18)',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '12px'
+                    }}>
+                      <h4 style={{ fontSize: '0.85rem', fontWeight: '600', color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                        Edit Settings for {item.name}
+                      </h4>
+
+                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                          <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Command</label>
+                          <input
+                            type="text"
+                            value={srvConfig.command || ''}
+                            onChange={(e) => handleUpdateMcpServerField(item.name, 'command', e.target.value)}
+                            style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-main)', fontSize: '0.85rem' }}
+                          />
+                        </div>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                          <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Icon (Optional)</label>
+                          <input
+                            type="text"
+                            placeholder="SVG code, URL, or preset: search/database/cloud/code/api"
+                            value={srvConfig.icon || ''}
+                            onChange={(e) => handleUpdateMcpServerField(item.name, 'icon', e.target.value)}
+                            style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-main)', fontSize: '0.85rem' }}
+                          />
+                        </div>
+                      </div>
+
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                        <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Arguments (Space separated)</label>
+                        <input
+                          type="text"
+                          value={(srvConfig.args || []).join(' ')}
+                          onChange={(e) => handleUpdateMcpServerField(item.name, 'args', e.target.value.split(/\s+/).filter(Boolean))}
+                          style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-main)', fontSize: '0.85rem', width: '100%' }}
+                        />
+                      </div>
+
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                        <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Environment Variables (JSON format)</label>
+                        <textarea
+                          value={typeof srvConfig.env === 'object' ? JSON.stringify(srvConfig.env, null, 2) : (srvConfig.env || '')}
+                          onChange={(e) => {
+                            try {
+                              const parsed = JSON.parse(e.target.value)
+                              handleUpdateMcpServerField(item.name, 'env', parsed)
+                            } catch {
+                              // allow live typing
+                            }
+                          }}
+                          style={{ padding: '8px 12px', borderRadius: '8px', border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-main)', fontSize: '0.85rem', fontFamily: 'monospace', height: '65px', resize: 'vertical' }}
+                        />
+                      </div>
+                    </div>
                   )}
-                  <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>
 
@@ -501,6 +725,16 @@ export default function PluginsTab({
               style={{ padding: '10px 14px', borderRadius: '8px', border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-main)', fontSize: '0.9rem', width: '100%' }}
             />
           </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginBottom: '12px' }}>
+            <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Icon (Optional)</label>
+            <input
+              type="text"
+              placeholder="SVG code, URL, or preset: search/database/cloud/code/api"
+              value={mcpIcon}
+              onChange={(e) => setMcpIcon && setMcpIcon(e.target.value)}
+              style={{ padding: '10px 14px', borderRadius: '8px', border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-main)', fontSize: '0.9rem', width: '100%' }}
+            />
+          </div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginBottom: '14px' }}>
             <label style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Environment Variables (JSON)</label>
             <textarea
@@ -545,7 +779,7 @@ export default function PluginsTab({
                 }}>
                   <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' }}>
-                      {p.icon}
+                      {renderMcpSvgIcon(p.key)}
                     </div>
                     <div className="plugin-info">
                       <div className="plugin-name" style={{ fontWeight: '600', color: 'var(--text-main)' }}>{p.name}</div>

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

@@ -107,9 +107,14 @@ export default function ThemeTab({ config, updateField }: ThemeTabProps) {
             <label>Font Family</label>
             <select value={config.fontFamily} onChange={(e) => updateField('fontFamily', e.target.value)}>
               <option value="'Outfit', sans-serif">Outfit (Default)</option>
-              <option value="'Mali', cursive">Mali (Cute Thai Font)</option>
               <option value="'Prompt', sans-serif">Prompt (Modern Thai)</option>
               <option value="'Sarabun', sans-serif">Sarabun (Formal Thai)</option>
+              <option value="'Kanit', sans-serif">Kanit (Trendy Thai)</option>
+              <option value="'Mitr', sans-serif">Mitr (Friendly Thai)</option>
+              <option value="'Noto Sans Thai', sans-serif">Noto Sans Thai (Clean Thai)</option>
+              <option value="'Mali', cursive">Mali (Cute Thai Font)</option>
+              <option value="'Inter', sans-serif">Inter (Clean Sans-Serif)</option>
+              <option value="'Fira Code', monospace">Fira Code (Developer Code Font)</option>
             </select>
           </div>
           <div className="setting-row">

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { getLocalApiBase, isTauriRuntime, getProfileValue, setProfileValue } from '../tauri'
+import { getLocalApiBase, isTauriRuntime, getProfileValue, setProfileValue, setActiveModel } from '../tauri'
 import GeneralTab from './Settings/GeneralTab'
 import MemoryTab from './Settings/MemoryTab'
 import AudioTab from './Settings/AudioTab'
@@ -8,6 +8,27 @@ import ThemeTab from './Settings/ThemeTab'
 import PluginsTab from './Settings/PluginsTab'
 import AgentsTab from './Settings/AgentsTab'
 
+// ─── Custom Provider Types ────────────────────────────────────────────────────
+
+export interface CustomProviderModel {
+  modelId: string
+  displayName: string
+}
+
+export interface CustomProviderHeader {
+  name: string
+  value: string
+}
+
+export interface CustomProviderConfig {
+  id: string
+  displayName: string
+  baseUrl: string
+  apiKey: string
+  models: CustomProviderModel[]
+  headers: CustomProviderHeader[]
+}
+
 export const DEFAULT_CONFIG = {
   theme: 'dark',
   accentColor: '#10b981',
@@ -70,11 +91,17 @@ export const DEFAULT_CONFIG = {
   lineChannelAccessToken: '',
   lineChannelSecret: '',
   enableLineBridge: false,
+  lineWebhookHost: '127.0.0.1',
+  lineWebhookPort: 3000,
   whatsappCloudAccessToken: '',
   whatsappPhoneNumberId: '',
   whatsappVerifyToken: '',
   whatsappAppSecret: '',
   enableWhatsappBridge: false,
+  whatsappWebhookHost: '127.0.0.1',
+  whatsappWebhookPort: 3001,
+  enableBridgeAckNotification: true,
+  bridgeAckMessage: '[Mint Agent] Remote command received, processing...',
   notionApiKey: '',
   notionDatabaseId: '',
   gmailClientId: '',
@@ -93,6 +120,9 @@ export const DEFAULT_CONFIG = {
   stabilityApiKey: '',
   ideogramApiKey: '',
   replicateApiKey: '',
+  // Video Generation
+  videoGenProvider: 'veo' as 'veo',
+  veoModel: 'veo-2.0-generate-001',
   // Multi-Agent Configuration
   agents: [
     {
@@ -122,7 +152,11 @@ export const DEFAULT_CONFIG = {
       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
     }
-  ]
+  ],
+  // Custom Providers
+  customProviders: [] as CustomProviderConfig[],
+  // Per-provider model selection: { [providerId]: selectedModelId }
+  customModelSelections: {} as Record<string, string>,
 }
 
 type TabType = 'sect-general' | 'sect-audio' | 'sect-automation' | 'sect-theme' | 'sect-plugins' | 'sect-shortcuts' | 'sect-memory' | 'sect-agents'
@@ -214,6 +248,7 @@ export default function SettingsWindow() {
   const [mcpCmd, setMcpCmd] = useState('')
   const [mcpArgs, setMcpArgs] = useState('')
   const [mcpEnv, setMcpEnv] = useState('')
+  const [mcpIcon, setMcpIcon] = useState('')
   const [updateMessage, setUpdateMessage] = useState('')
   const [updateAvailable, setUpdateAvailable] = useState(false)
 
@@ -396,6 +431,25 @@ export default function SettingsWindow() {
       console.error("Failed to save user profile memory:", e)
     }
 
+    const getActiveModelName = (provider: string, cfg: typeof finalConfig) => {
+      switch (provider) {
+        case 'gemini': return cfg.geminiModel
+        case 'openai': return cfg.openaiModel
+        case 'openrouter': return cfg.openrouterModel
+        case 'deepseek': return cfg.deepseekModel
+        case 'anthropic': return cfg.anthropicModel
+        case 'huggingface': return cfg.hfModel
+        case 'local_openai': return cfg.localModelName
+        case 'ollama': return cfg.ollamaModel
+        default: return ''
+      }
+    }
+    const oldModel = getActiveModelName(config.aiProvider, config)
+    const newModel = getActiveModelName(finalConfig.aiProvider, finalConfig)
+    if (config.aiProvider !== finalConfig.aiProvider || oldModel !== newModel) {
+      setActiveModel(finalConfig.aiProvider, newModel).catch(() => {})
+    }
+
     if (window.settingsApi) {
       await window.settingsApi.saveSettings(finalConfig)
       applyThemeStyles(finalConfig)
@@ -410,6 +464,54 @@ export default function SettingsWindow() {
     }
   }
 
+  const handleSaveWithoutClosing = async () => {
+    const finalConfig = { ...config }
+    
+    if (config.geminiModel === 'custom') {
+      finalConfig.geminiModel = customGemini || 'gemini-2.5-flash'
+    }
+    if (config.openaiModel === 'custom') {
+      finalConfig.openaiModel = customOpenAI || 'gpt-4o'
+    }
+    if (config.openrouterModel === 'custom') {
+      finalConfig.openrouterModel = customOpenRouter || 'openai/gpt-4o-mini'
+    }
+    if (config.deepseekModel === 'custom') {
+      finalConfig.deepseekModel = customDeepSeek || 'deepseek-v4-flash'
+    }
+    if (config.anthropicModel === 'custom') {
+      finalConfig.anthropicModel = customAnthropic || 'claude-3-5-sonnet-latest'
+    }
+    if (config.hfModel === 'custom') {
+      finalConfig.hfModel = customHF || 'meta-llama/Meta-Llama-3-8B-Instruct'
+    }
+    if (config.localModelName === 'custom') {
+      finalConfig.localModelName = customLocal || 'local-model'
+    }
+    if (config.ollamaModel === 'custom') {
+      finalConfig.ollamaModel = customOllama || 'llama3:latest'
+    }
+
+    try {
+      await setProfileValue('name', userName)
+      await setProfileValue('preferences', userPreferences)
+    } catch (e) {
+      console.error("Failed to save user profile memory:", e)
+    }
+
+    if (window.settingsApi) {
+      await window.settingsApi.saveSettings(finalConfig)
+      applyThemeStyles(finalConfig)
+    } else {
+      try {
+        await setProfileValue('user-settings', JSON.stringify(finalConfig))
+        applyThemeStyles(finalConfig)
+      } catch (e) {
+        console.error("Failed to save user settings:", e)
+      }
+    }
+  }
+
   const handleReset = async () => {
     if (confirm('Reset all settings to default?')) {
       setConfig(DEFAULT_CONFIG)
@@ -484,7 +586,8 @@ export default function SettingsWindow() {
       [mcpName.trim()]: {
         command: mcpCmd.trim(),
         args: argList,
-        env: parsedEnv
+        env: parsedEnv,
+        icon: mcpIcon.trim() || undefined
       }
     }
 
@@ -497,6 +600,7 @@ export default function SettingsWindow() {
     setMcpCmd('')
     setMcpArgs('')
     setMcpEnv('')
+    setMcpIcon('')
   }
 
   const handleRemoveMcpServer = (name: string) => {
@@ -694,6 +798,7 @@ export default function SettingsWindow() {
               handleCheckUpdates={handleCheckUpdates}
               handleInstallUpdate={handleInstallUpdate}
               isDesktopApp={isDesktopApp}
+              onSaveWithoutClosing={handleSaveWithoutClosing}
             />
           )}
 
@@ -742,6 +847,8 @@ export default function SettingsWindow() {
               setMcpArgs={setMcpArgs}
               mcpEnv={mcpEnv}
               setMcpEnv={setMcpEnv}
+              mcpIcon={mcpIcon}
+              setMcpIcon={setMcpIcon}
               handleAddMcpServer={handleAddMcpServer}
               handleRemoveMcpServer={handleRemoveMcpServer}
               handleConnectPlugin={handleConnectPlugin}