@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/Settings/AgentsTab.tsx

@@ -1,18 +1,13 @@
+import SelectField from '../SelectField'
 import React, { useEffect, useState } from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
-import {
-  GEMINI_MODELS,
-  OPENAI_MODELS,
-  OPENROUTER_MODELS,
-  DEEPSEEK_MODELS,
-  ANTHROPIC_MODELS,
-  HF_MODELS,
-  LOCAL_MODELS,
-} from '../../constants/models'
-import type { CustomProviderConfig } from '../../types'
-import { listSubagents, saveSubagent, deleteSubagent, SubagentDefinition, SubagentDraft } from '@/tauri'
+import { HF_MODELS } from '../../constants/models'
+import type { CustomProviderConfig, SubagentDefinition, SubagentDraft } from '../../types'
+import { catalogPlatform } from '../../platform'
 import ApiKeyInput from './ApiKeyInput'
 
+const { listSubagents, saveSubagent, deleteSubagent } = catalogPlatform
+
 export interface Agent {
   id: string
   name: string
@@ -29,9 +24,10 @@ interface AgentsTabProps {
   config: typeof DEFAULT_CONFIG & { agents?: Agent[], customProviders?: CustomProviderConfig[] }
   updateField: (field: any, value: any) => void
   dynamicOllamaModels?: string[]
+  providerModels: Record<string, string[]>
 }
 
-export default function AgentsTab({ config, updateField, dynamicOllamaModels = [] }: AgentsTabProps) {
+export default function AgentsTab({ config, updateField, dynamicOllamaModels = [], providerModels }: AgentsTabProps) {
   const agents = config.agents || []
   const [editingAgent, setEditingAgent] = useState<Agent | null>(null)
   const [name, setName] = useState('')
@@ -43,13 +39,13 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
 
   const handleProviderChange = (newProvider: string) => {
     setProvider(newProvider)
-    if (newProvider === 'gemini') setModel(config.geminiModel || GEMINI_MODELS[0])
-    else if (newProvider === 'openai') setModel(config.openaiModel || OPENAI_MODELS[0])
-    else if (newProvider === 'openrouter') setModel(config.openrouterModel || OPENROUTER_MODELS[0])
-    else if (newProvider === 'deepseek') setModel(config.deepseekModel || DEEPSEEK_MODELS[0])
-    else if (newProvider === 'anthropic') setModel(config.anthropicModel || ANTHROPIC_MODELS[0])
+    if (newProvider === 'gemini') setModel(config.geminiModel || providerModels.gemini[0] || '')
+    else if (newProvider === 'openai') setModel(config.openaiModel || providerModels.openai[0] || '')
+    else if (newProvider === 'openrouter') setModel(config.openrouterModel || providerModels.openrouter[0] || '')
+    else if (newProvider === 'deepseek') setModel(config.deepseekModel || providerModels.deepseek[0] || '')
+    else if (newProvider === 'anthropic') setModel(config.anthropicModel || providerModels.anthropic[0] || '')
     else if (newProvider === 'huggingface') setModel(config.hfModel || HF_MODELS[0])
-    else if (newProvider === 'local_openai') setModel(config.localModelName || LOCAL_MODELS[0])
+    else if (newProvider === 'local_openai') setModel(config.localModelName || providerModels.local_openai[0] || '')
     else if (newProvider === 'ollama') setModel(config.ollamaModel || dynamicOllamaModels[0] || '')
     else if (newProvider.startsWith('custom:')) {
       const cpId = newProvider.replace(/^custom:/, '')
@@ -173,25 +169,25 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
   let modelList: readonly string[] = []
   let defaultGeneralModel = ''
   if (provider === 'gemini') {
-    modelList = GEMINI_MODELS
+    modelList = providerModels.gemini
     defaultGeneralModel = config.geminiModel
   } else if (provider === 'openai') {
-    modelList = OPENAI_MODELS
+    modelList = providerModels.openai
     defaultGeneralModel = config.openaiModel
   } else if (provider === 'openrouter') {
-    modelList = OPENROUTER_MODELS
+    modelList = providerModels.openrouter
     defaultGeneralModel = config.openrouterModel
   } else if (provider === 'deepseek') {
-    modelList = DEEPSEEK_MODELS
+    modelList = providerModels.deepseek
     defaultGeneralModel = config.deepseekModel
   } else if (provider === 'anthropic') {
-    modelList = ANTHROPIC_MODELS
+    modelList = providerModels.anthropic
     defaultGeneralModel = config.anthropicModel
   } else if (provider === 'huggingface') {
     modelList = HF_MODELS
     defaultGeneralModel = config.hfModel
   } else if (provider === 'local_openai') {
-    modelList = LOCAL_MODELS
+    modelList = providerModels.local_openai
     defaultGeneralModel = config.localModelName
   } else if (provider === 'ollama') {
     modelList = dynamicOllamaModels
@@ -216,7 +212,7 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
         <div className="section-heading" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <div>
             <p className="section-kicker">Multi-Agent System</p>
-            <h2 className="section-title">Agent Collaboration Settings</h2>
+            <h2 className="section-title">Agent collaboration settings</h2>
           </div>
           {!isEditing && (
             <div style={{ display: 'flex', gap: '10px', height: 'fit-content', flexShrink: 0 }}>
@@ -233,7 +229,7 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
         <div className="toggle-card" style={{ margin: '4px 0 24px 0' }}>
           <div className="toggle-row">
             <div>
-              <label>Enable Multi-Agent Collaboration</label>
+              <label>Enable multi-agent collaboration</label>
               <p className="hint">Allow multiple specialized agents to collaborate sequentially (Planner → Coder → Reviewer).</p>
             </div>
             <label className="settings-toggle-switch">
@@ -249,12 +245,12 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
 
         {isEditing ? (
           <div className="form-grid single" style={{ background: 'var(--panel-soft)', padding: '20px', borderRadius: '8px', border: '1px solid var(--panel-raised)', marginTop: '10px' }}>
-            <h3 style={{ margin: '0 0 16px 0', fontSize: '18px', color: 'var(--accent)' }}>
+            <h3 style={{ margin: '0 0 16px 0', fontSize: '18px', color: 'var(--interactive-fg)' }}>
               {editingAgent ? `Edit Agent: ${editingAgent.name}` : 'Create New Agent'}
             </h3>
             
             <div className="setting-row">
-              <label>Agent Name</label>
+              <label>Agent name</label>
               <input 
                 type="text" 
                 value={name} 
@@ -264,20 +260,20 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
             </div>
 
             <div className="setting-row">
-              <label>AI Provider</label>
-              <select value={provider} onChange={(e) => handleProviderChange(e.target.value)}>
+              <label>AI provider</label>
+              <SelectField aria-label="AI provider" value={provider} onValueChange={(nextValue) => handleProviderChange(nextValue)}>
                 {availableProviders.map(p => (
                   <option key={p.value} value={p.value}>{p.label}</option>
                 ))}
-              </select>
+              </SelectField>
             </div>
 
             <div className="setting-row">
-              <label>Model Name</label>
-              <select 
+              <label>Model name</label>
+              <SelectField aria-label="Model name"
                 value={isCustomModel ? 'custom' : model} 
-                onChange={(e) => {
-                  const val = e.target.value
+                onValueChange={(nextValue) => {
+                  const val = nextValue
                   if (val === 'custom') {
                     setModel('')
                   } else {
@@ -289,12 +285,12 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
                   <option key={m} value={m}>{m}</option>
                 ))}
                 <option value="custom">Custom...</option>
-              </select>
+              </SelectField>
             </div>
 
             {isCustomModel && (
               <div className="setting-row">
-                <label>Custom Model Name</label>
+                <label>Custom model name</label>
                 <input 
                   type="text" 
                   value={model} 
@@ -314,7 +310,7 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
             </div>
 
             <div className="setting-row">
-              <label>System Instructions / Role</label>
+              <label>System instructions / role</label>
               <textarea 
                 value={systemInstruction} 
                 onChange={(e) => setSystemInstruction(e.target.value)} 
@@ -325,7 +321,7 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
 
             <div style={{ display: 'flex', gap: '10px', marginTop: '16px', justifyContent: 'flex-end' }}>
               <button className="btn btn-secondary" onClick={closeForm}>Cancel</button>
-              <button className="btn btn-primary" onClick={handleSaveAgent}>Save Agent</button>
+              <button className="btn btn-primary" onClick={handleSaveAgent}>Save agent</button>
             </div>
           </div>
         ) : (
@@ -498,7 +494,7 @@ function SubagentsSection() {
 
       {isEditing ? (
         <div className="form-grid single" style={{ background: 'var(--panel-soft)', padding: '20px', borderRadius: '8px', border: '1px solid var(--panel-raised)' }}>
-          <h3 style={{ margin: '0 0 16px 0', fontSize: '18px', color: 'var(--accent)' }}>
+          <h3 style={{ margin: '0 0 16px 0', fontSize: '18px', color: 'var(--interactive-fg)' }}>
             {editingSourcePath ? `Edit Subagent: ${form.name}` : 'Create New Subagent'}
           </h3>
 
@@ -523,7 +519,7 @@ function SubagentsSection() {
           </div>
 
           <div className="setting-row">
-            <label>System Prompt</label>
+            <label>System prompt</label>
             <textarea
               value={form.systemPrompt}
               onChange={(e) => setForm({ ...form, systemPrompt: e.target.value })}
@@ -533,7 +529,7 @@ function SubagentsSection() {
           </div>
 
           <div className="setting-row">
-            <label>Allowed Tools (optional)</label>
+            <label>Allowed tools (optional)</label>
             <input
               type="text"
               value={form.tools}
@@ -543,7 +539,7 @@ function SubagentsSection() {
           </div>
 
           <div className="setting-row">
-            <label>Model Override (optional)</label>
+            <label>Model override (optional)</label>
             <input
               type="text"
               value={form.model}
@@ -553,7 +549,7 @@ function SubagentsSection() {
           </div>
 
           <div className="setting-row">
-            <label>Provider Override (optional)</label>
+            <label>Provider override (optional)</label>
             <input
               type="text"
               value={form.provider}
@@ -590,7 +586,7 @@ function SubagentsSection() {
 
           <div style={{ display: 'flex', gap: '10px', marginTop: '16px', justifyContent: 'flex-end' }}>
             <button className="btn btn-secondary" onClick={closeForm}>Cancel</button>
-            <button className="btn btn-primary" onClick={handleSave}>Save Subagent</button>
+            <button className="btn btn-primary" onClick={handleSave}>Save subagent</button>
           </div>
         </div>
       ) : (

package/src/renderer/shared/components/Settings/AudioTab.tsx

@@ -1,3 +1,4 @@
+import SelectField from '../SelectField'
 import React, { useState } from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
 import { GEMINI_LIVE_VOICES } from '../../constants/models'
@@ -20,14 +21,14 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
         <div className="section-heading">
           <div>
             <p className="section-kicker">Speech</p>
-            <h2 className="section-title">Voice Reply</h2>
+            <h2 className="section-title">Voice reply</h2>
           </div>
         </div>
 
         <div className="toggle-card">
           <div className="toggle-row">
             <div>
-              <label>Enable Voice Reply</label>
+              <label>Enable voice reply</label>
               <p className="hint">Speaks responses out loud when enabled.</p>
             </div>
             <label className="settings-toggle-switch">
@@ -42,8 +43,8 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
         </div>
 
         <div className="setting-row">
-          <label>Voice Engine</label>
-          <div className="pill-segmented" role="radiogroup" aria-label="Voice Engine">
+          <label>Voice engine</label>
+          <div className="pill-segmented" role="radiogroup" aria-label="Voice engine">
             {[
               { id: 'google', label: 'Google Cloud', title: 'Google Cloud (Natural, Auto Lang)' },
               { id: 'native', label: 'OS Native', title: 'OS Native (Supports Pitch)' },
@@ -66,7 +67,7 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
         <div className="toggle-card">
           <div className="toggle-row">
             <div>
-              <label>Enable Gemini Live (Beta)</label>
+              <label>Enable Gemini Live (beta)</label>
               <p className="hint">Adds real-time voice conversation with Gemini, including running Mint's tools by voice. Requires a Gemini API key.</p>
             </div>
             <label className="settings-toggle-switch">
@@ -83,15 +84,15 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
         {config.voiceMode === 'geminiLive' && (
           <div className="form-grid single">
             <div className="setting-row">
-              <label>Realtime Live Model{liveLoading && <span style={{ marginLeft: 6, opacity: 0.5, fontSize: '0.8em' }}>loading…</span>}</label>
-              <select
+              <label>Real-time model{liveLoading && <span style={{ marginLeft: 6, opacity: 0.5, fontSize: '0.8em' }}>loading…</span>}</label>
+              <SelectField aria-label="Real-time model"
                 value={isCustomLiveModel ? 'custom' : config.geminiLiveModel}
-                onChange={(e) => {
-                  if (e.target.value === 'custom') {
+                onValueChange={(nextValue) => {
+                  if (nextValue === 'custom') {
                     setCustomLiveModel(true)
                   } else {
                     setCustomLiveModel(false)
-                    updateField('geminiLiveModel', e.target.value)
+                    updateField('geminiLiveModel', nextValue)
                   }
                 }}
               >
@@ -99,7 +100,7 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
                   <option key={model} value={model}>{model}</option>
                 ))}
                 <option value="custom">Custom...</option>
-              </select>
+              </SelectField>
               <p className="hint">
                 The model Gemini Live uses for realtime voice conversations.
                 "gemini-3.1-flash-live-preview" requires requesting allowlist access from Google first — if it
@@ -108,7 +109,7 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
             </div>
             {isCustomLiveModel && (
               <div className="setting-row">
-                <label>Custom Realtime Live Model</label>
+                <label>Custom real-time model</label>
                 <input
                   type="text"
                   value={config.geminiLiveModel}
@@ -118,12 +119,12 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
               </div>
             )}
             <div className="setting-row">
-              <label>Live Voice</label>
-              <select value={config.geminiLiveVoice} onChange={(e) => updateField('geminiLiveVoice', e.target.value)}>
+              <label>Live voice</label>
+              <SelectField aria-label="Live voice" value={config.geminiLiveVoice} onValueChange={(nextValue) => updateField('geminiLiveVoice', nextValue)}>
                 {GEMINI_LIVE_VOICES.map((voiceName) => (
                   <option key={voiceName} value={voiceName}>{voiceName}</option>
                 ))}
-              </select>
+              </SelectField>
               <p className="hint">
                 The voice Gemini Live speaks with. Can also be changed mid-call from the Live overlay itself.
               </p>

package/src/renderer/shared/components/Settings/AutomationTab.tsx

@@ -29,8 +29,8 @@ export default function AutomationTab({
         </div>
         <div className="form-grid single">
           <div className="setting-row">
-            <label>Browser Engine</label>
-            <div className="pill-segmented" role="radiogroup" aria-label="Browser Engine">
+            <label>Browser engine</label>
+            <div className="pill-segmented" role="radiogroup" aria-label="Browser engine">
               {[
                 { id: 'chromium', label: 'Chromium' },
                 { id: '/usr/bin/firefox', label: 'Firefox' },
@@ -50,12 +50,12 @@ export default function AutomationTab({
             <p className="hint">Chromium is bundled; Firefox uses your system install (Linux).</p>
           </div>
           <div className="setting-row">
-            <label>Chromium DevTools Endpoint</label>
+            <label>Chromium DevTools endpoint</label>
             <input type="text" value={config.browserDebugUrl} onChange={(e) => updateField('browserDebugUrl', e.target.value)} />
             <p className="hint">Required for native tab reading and selector clicks.</p>
           </div>
           <div className="setting-row">
-            <label>Browser Extension Context Endpoint</label>
+            <label>Browser extension context endpoint</label>
             <input type="text" value={config.browserExtensionContextUrl} onChange={(e) => updateField('browserExtensionContextUrl', e.target.value)} />
             <p className="hint">Fallback endpoint used when Chromium remote debugging is unavailable.</p>
           </div>
@@ -66,7 +66,7 @@ export default function AutomationTab({
         <div className="section-heading">
           <div>
             <p className="section-kicker">Behavior</p>
-            <h2 className="section-title">Agent Behavior</h2>
+            <h2 className="section-title">Agent behavior</h2>
           </div>
         </div>
         <div className="toggle-card">
@@ -86,8 +86,8 @@ export default function AutomationTab({
           </div>
           <div className="toggle-row">
             <div>
-              <label>Write a skill after finishing a hard task</label>
-              <p className="hint">Saves a reusable skill after a multi-step task, so it won't have to re-derive the solution next time.</p>
+              <label>Suggest a skill after finishing a hard task</label>
+              <p className="hint">Proposes reusable instructions after a multi-step task. Review and approve each change before it is saved.</p>
             </div>
             <label className="settings-toggle-switch">
               <input
@@ -101,61 +101,11 @@ export default function AutomationTab({
         </div>
       </section>
 
-      <section className="setting-section">
-        <div className="section-heading">
-          <div>
-            <p className="section-kicker">Awareness</p>
-            <h2 className="section-title" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="12" y1="8" x2="12" y2="12"></line>
-                <line x1="12" y1="16" x2="12.01" y2="16"></line>
-              </svg>
-              Proactive Assistant
-            </h2>
-          </div>
-        </div>
-        <div className="slider-stack">
-          <div className="setting-row">
-            <label>Screen Capture Frequency</label>
-            <div className="slider-group">
-              <input 
-                type="range" 
-                min="30" 
-                max="300" 
-                step="30" 
-                value={config.proactiveInterval} 
-                onChange={(e) => updateField('proactiveInterval', parseInt(e.target.value))} 
-                className="range-slider" 
-              />
-              <span className="range-value">{config.proactiveInterval} sec</span>
-            </div>
-            <p className="hint">Lower values respond faster but use more API calls.</p>
-          </div>
-          <div className="setting-row">
-            <label>Suggestion Cooldown</label>
-            <div className="slider-group">
-              <input 
-                type="range" 
-                min="60" 
-                max="600" 
-                step="60" 
-                value={config.proactiveCooldown} 
-                onChange={(e) => updateField('proactiveCooldown', parseInt(e.target.value))} 
-                className="range-slider" 
-              />
-              <span className="range-value">{Math.round(config.proactiveCooldown / 60)} min</span>
-            </div>
-            <p className="hint">Minimum time between repeat suggestions.</p>
-          </div>
-        </div>
-      </section>
-
       <section className="setting-section">
         <div className="section-heading">
           <div>
             <p className="section-kicker">Messaging</p>
-            <h2 className="section-title">Native Channel Bridges</h2>
+            <h2 className="section-title">Native channel bridges</h2>
           </div>
         </div>
 
@@ -217,7 +167,7 @@ export default function AutomationTab({
                       {config.enableTelegramBridge ? 'Active' : 'Disabled'}
                     </span>
                   </span>
-                  <span className="bridge-subtitle">Long Polling Engine (getUpdates)</span>
+                  <span className="bridge-subtitle">Long polling engine (getUpdates)</span>
                 </div>
               </div>
               <label className="settings-toggle-switch">
@@ -405,7 +355,7 @@ export default function AutomationTab({
                       {config.enableWhatsappBridge ? 'Active' : 'Disabled'}
                     </span>
                   </span>
-                  <span className="bridge-subtitle">Meta Cloud API Webhook Listener</span>
+                  <span className="bridge-subtitle">Meta Cloud API webhook listener</span>
                 </div>
               </div>
               <label className="settings-toggle-switch">