@pheem49/mint 1.8.1 → 1.9.0

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

@@ -7,7 +7,10 @@ import {
   DEEPSEEK_MODELS,
   ANTHROPIC_MODELS,
   HF_MODELS,
-  LOCAL_MODELS
+  LOCAL_MODELS,
+  CustomProviderConfig,
+  CustomProviderModel,
+  CustomProviderHeader,
 } from '../SettingsWindow'
 
 interface GeneralTabProps {
@@ -35,6 +38,7 @@ interface GeneralTabProps {
   handleCheckUpdates: () => void
   handleInstallUpdate: () => void
   isDesktopApp?: boolean
+  onSaveWithoutClosing?: () => Promise<void>
 }
 
 export default function GeneralTab({
@@ -61,8 +65,18 @@ export default function GeneralTab({
   updateMessage,
   handleCheckUpdates,
   handleInstallUpdate,
-  isDesktopApp = false
+  isDesktopApp = false,
+  onSaveWithoutClosing
 }: GeneralTabProps) {
+  const [savedProviderId, setSavedProviderId] = React.useState<string | null>(null)
+
+  const handleSaveProvider = async (providerId: string) => {
+    if (onSaveWithoutClosing) {
+      await onSaveWithoutClosing()
+      setSavedProviderId(providerId)
+      setTimeout(() => setSavedProviderId(null), 2000)
+    }
+  }
   return (
     <div className="tab-pane active">
       <section className="setting-section">
@@ -86,8 +100,38 @@ export default function GeneralTab({
               <option value="ollama">Ollama (Local / Private)</option>
               <option value="huggingface">Hugging Face (Inference API)</option>
               <option value="local_openai">Local (LM Studio / OpenAI Compatible)</option>
+              {(config.customProviders ?? []).map(cp => (
+                <option key={`custom:${cp.id}`} value={`custom:${cp.id}`}>
+                  {cp.displayName || cp.id} (Custom)
+                </option>
+              ))}
             </select>
           </div>
+          {/* Model selector for custom providers */}
+          {config.aiProvider.startsWith('custom:') && (() => {
+            const activeId = config.aiProvider.replace(/^custom:/, '')
+            const cp = (config.customProviders ?? []).find(p => p.id === activeId)
+            if (!cp || cp.models.length === 0) return null
+            const currentModel = (config.customModelSelections ?? {})[activeId] ?? cp.models[0]?.modelId ?? ''
+            return (
+              <div className="setting-row wide">
+                <label>Active Model</label>
+                <select
+                  value={currentModel}
+                  onChange={(e) => updateField('customModelSelections', {
+                    ...(config.customModelSelections ?? {}),
+                    [activeId]: e.target.value
+                  })}
+                >
+                  {cp.models.map(m => (
+                    <option key={m.modelId} value={m.modelId}>
+                      {m.displayName || m.modelId}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )
+          })()}
         </div>
 
         <div className="provider-cards-container">
@@ -877,12 +921,219 @@ export default function GeneralTab({
         </div>
       </section>
 
+      {/* ─── Custom Providers ─────────────────────────────────────────────────── */}
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Custom AI Routing</p>
+            <h2 className="section-title">Custom Providers</h2>
+          </div>
+          <p className="section-description">
+            Add any OpenAI-compatible endpoint as a custom provider. Configure its models and optional headers.
+          </p>
+        </div>
+
+        <div className="provider-cards-container">
+          {(config.customProviders ?? []).map((cp, cpIdx) => {
+            const isActive = config.aiProvider === `custom:${cp.id}`
+
+            const updateCp = (patch: Partial<CustomProviderConfig>) => {
+              const updated = (config.customProviders ?? []).map((p, i) =>
+                i === cpIdx ? { ...p, ...patch } : p
+              )
+              updateField('customProviders', updated)
+            }
+
+            const deleteCp = () => {
+              const updated = (config.customProviders ?? []).filter((_, i) => i !== cpIdx)
+              updateField('customProviders', updated)
+              if (config.aiProvider === `custom:${cp.id}`) {
+                updateField('aiProvider', 'gemini')
+              }
+            }
+
+            const updateModel = (mIdx: number, patch: Partial<CustomProviderModel>) => {
+              const updatedModels = cp.models.map((m, i) => i === mIdx ? { ...m, ...patch } : m)
+              updateCp({ models: updatedModels })
+            }
+            const deleteModel = (mIdx: number) => {
+              updateCp({ models: cp.models.filter((_, i) => i !== mIdx) })
+            }
+            const addModel = () => {
+              updateCp({ models: [...cp.models, { modelId: '', displayName: '' }] })
+            }
+
+            const updateHeader = (hIdx: number, patch: Partial<CustomProviderHeader>) => {
+              const updatedHeaders = cp.headers.map((h, i) => i === hIdx ? { ...h, ...patch } : h)
+              updateCp({ headers: updatedHeaders })
+            }
+            const deleteHeader = (hIdx: number) => {
+              updateCp({ headers: cp.headers.filter((_, i) => i !== hIdx) })
+            }
+            const addHeader = () => {
+              updateCp({ headers: [...cp.headers, { name: '', value: '' }] })
+            }
+
+            return (
+              <div key={cpIdx} className={`provider-card ${isActive ? 'active-provider' : ''}`}>
+                <div className="provider-card-header">
+                  <div className="provider-card-title">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <circle cx="12" cy="12" r="3" /><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14" />
+                    </svg>
+                    {cp.displayName || cp.id || 'Unnamed Provider'}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    {isActive && <span className="provider-active-badge">Active</span>}
+                    <button
+                      className="btn btn-primary"
+                      style={{ padding: '3px 8px', fontSize: '12px', background: savedProviderId === cp.id ? '#10b981' : '' }}
+                      onClick={() => handleSaveProvider(cp.id)}
+                      title="Save this provider settings"
+                    >
+                      {savedProviderId === cp.id ? 'Saved! ✓' : 'Save'}
+                    </button>
+                    <button
+                      className="btn btn-danger"
+                      style={{ padding: '3px 8px', fontSize: '12px' }}
+                      onClick={deleteCp}
+                      title="Delete this provider"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+
+                <div className="provider-card-body">
+                  <div className="setting-row">
+                    <label>Name</label>
+                    <input
+                      type="text"
+                      value={cp.displayName}
+                      onChange={(e) => {
+                        const name = e.target.value
+                        const computedId = name
+                          .toLowerCase()
+                          .replace(/[^a-z0-9_-]/g, '-')
+                          .replace(/-+/g, '-')
+                          .replace(/^-|-$/g, '') || `provider-${cpIdx + 1}`
+                        updateCp({ displayName: name, id: computedId })
+                      }}
+                      placeholder="e.g. DeepSeek"
+                    />
+                  </div>
+
+                  <div className="setting-row">
+                    <label>Base URL</label>
+                    <input
+                      type="text"
+                      value={cp.baseUrl}
+                      onChange={(e) => updateCp({ baseUrl: e.target.value })}
+                      placeholder="https://api.myprovider.com/v1"
+                    />
+                  </div>
+
+                  <div className="setting-row">
+                    <label>API Key</label>
+                    <input
+                      type="password"
+                      value={cp.apiKey}
+                      onChange={(e) => updateCp({ apiKey: e.target.value })}
+                      placeholder="Optional. Leave empty if you manage auth via headers."
+                    />
+                  </div>
+
+                  {/* Models */}
+                  <div style={{ marginTop: '12px' }}>
+                    <label style={{ fontWeight: 600, fontSize: '13px', display: 'block', marginBottom: '8px' }}>Model list</label>
+                    {cp.models.map((m, mIdx) => (
+                      <div key={mIdx} style={{ display: 'flex', gap: '8px', marginBottom: '6px', alignItems: 'center' }}>
+                        <input
+                          type="text"
+                          value={m.modelId}
+                          onChange={(e) => updateModel(mIdx, { modelId: e.target.value, displayName: e.target.value })}
+                          placeholder="e.g. llama-3.1-8b"
+                          style={{ flex: 1 }}
+                        />
+                        <button
+                          className="btn btn-danger"
+                          style={{ padding: '4px 8px', fontSize: '12px', flexShrink: 0 }}
+                          onClick={() => deleteModel(mIdx)}
+                          title="Remove model"
+                        >🗑</button>
+                      </div>
+                    ))}
+                    <button
+                      className="btn btn-secondary"
+                      style={{ fontSize: '12px', marginTop: '4px' }}
+                      onClick={addModel}
+                    >
+                      + Add model
+                    </button>
+                  </div>
+
+                  {/* Headers */}
+                  <div style={{ marginTop: '12px' }}>
+                    <label style={{ fontWeight: 600, fontSize: '13px', display: 'block', marginBottom: '8px' }}>Headers (optional)</label>
+                    {cp.headers.map((h, hIdx) => (
+                      <div key={hIdx} style={{ display: 'flex', gap: '8px', marginBottom: '6px', alignItems: 'center' }}>
+                        <input
+                          type="text"
+                          value={h.name}
+                          onChange={(e) => updateHeader(hIdx, { name: e.target.value })}
+                          placeholder="Header-Name"
+                          style={{ flex: 1 }}
+                        />
+                        <input
+                          type="text"
+                          value={h.value}
+                          onChange={(e) => updateHeader(hIdx, { value: e.target.value })}
+                          placeholder="value"
+                          style={{ flex: 1 }}
+                        />
+                        <button
+                          className="btn btn-danger"
+                          style={{ padding: '4px 8px', fontSize: '12px', flexShrink: 0 }}
+                          onClick={() => deleteHeader(hIdx)}
+                          title="Remove header"
+                        >🗑</button>
+                      </div>
+                    ))}
+                    <button
+                      className="btn btn-secondary"
+                      style={{ fontSize: '12px', marginTop: '4px' }}
+                      onClick={addHeader}
+                    >
+                      + Add header
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="setting-actions" style={{ marginTop: '16px' }}>
+          <button
+            className="btn btn-secondary"
+            onClick={() => {
+              const newId = `provider-${(config.customProviders ?? []).length + 1}`
+              updateField('customProviders', [
+                ...(config.customProviders ?? []),
+                { id: newId, displayName: '', baseUrl: '', apiKey: '', models: [], headers: [] }
+              ])
+            }}
+          >
+            + Add custom provider
+          </button>
+        </div>
+      </section>
+
       {isDesktopApp && (
         <section className="setting-section">
           <div className="section-heading">
             <div>
               <p className="section-kicker">Desktop updates</p>
-
               <h2 className="section-title">Signed Tauri Channel</h2>
             </div>
             <p className="section-description">Check and explicitly install signed Tauri releases from your configured update channel.</p>

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

@@ -6,6 +6,28 @@ 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'
+
+// ─── 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',
@@ -30,7 +52,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 +113,44 @@ 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
+    }
+  ],
+  // 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'
+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',
@@ -379,6 +435,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)
@@ -616,6 +720,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">
@@ -652,6 +767,7 @@ export default function SettingsWindow() {
               handleCheckUpdates={handleCheckUpdates}
               handleInstallUpdate={handleInstallUpdate}
               isDesktopApp={isDesktopApp}
+              onSaveWithoutClosing={handleSaveWithoutClosing}
             />
           )}
 
@@ -705,6 +821,14 @@ export default function SettingsWindow() {
               handleConnectPlugin={handleConnectPlugin}
             />
           )}
+
+          {activeTab === 'sect-agents' && (
+            <AgentsTab
+              config={config}
+              updateField={updateField}
+              dynamicOllamaModels={dynamicOllamaModels}
+            />
+          )}
         </div>
       </main>
 

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

@@ -1683,12 +1683,28 @@ h1 {
   width: 15px;
 }
 
+.agent-activity-icon[data-has-img="true"]::before,
+.agent-activity-icon[data-has-img="true"]::after {
+  display: none !important;
+}
+
+.agent-activity-icon img {
+  width: 14px;
+  height: 14px;
+  display: block;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
+  pointer-events: none;
+  user-select: none;
+}
+
 .agent-activity-icon::before,
 .agent-activity-icon::after {
   content: "";
   position: absolute;
 }
 
+
 .agent-activity-item[data-kind="folder"] .agent-activity-icon::before {
   background: var(--text-muted);
   border-radius: 2px 2px 1px 1px;
@@ -4167,3 +4183,87 @@ input:checked + .slider:before {
   -ms-user-select: text !important;
 }
 
+/* Stop button styling overrides for ChatPanel */
+#send-btn.stop-btn {
+  background: #ef4444 !important;
+  color: #ffffff !important;
+  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28) !important;
+}
+
+#send-btn.stop-btn:hover {
+  background: #dc2626 !important;
+}
+
+/* Breathing voice-active aura glow */
+@keyframes aura-breathe-form {
+  0% {
+    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
+  }
+  50% {
+    box-shadow: 0 4px 25px color-mix(in srgb, var(--accent) 42%, transparent);
+  }
+  100% {
+    box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
+  }
+}
+
+@keyframes aura-breathe-bar {
+  0% {
+    box-shadow: 0 -4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
+  }
+  50% {
+    box-shadow: 0 -4px 25px color-mix(in srgb, var(--accent) 42%, transparent);
+  }
+  100% {
+    box-shadow: 0 -4px 15px color-mix(in srgb, var(--accent) 22%, transparent);
+  }
+}
+
+.input-area.voice-active #chat-form {
+  border-color: var(--accent) !important;
+  animation: aura-breathe-form 2s infinite ease-in-out;
+  transition: border-color 0.3s ease;
+}
+
+.input-area.voice-active .voice-mode-bar {
+  border-color: var(--accent) !important;
+  animation: aura-breathe-bar 2s infinite ease-in-out;
+  transition: border-color 0.3s ease;
+}
+
+/* Saved Pictures Gallery Load More styles */
+.pictures-load-more-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 36px;
+  margin-bottom: 24px;
+}
+
+.pictures-load-more-btn {
+  height: 40px;
+  padding: 0 24px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--card-bg, rgba(255, 255, 255, 0.04));
+  color: var(--text-main);
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pictures-load-more-btn:hover {
+  background: var(--border);
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+.pictures-load-more-btn:active {
+  transform: scale(0.98);
+}
+
+