@pheem49/mint 1.8.1 → 1.8.2

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

@@ -11,9 +11,9 @@ import {
   listSavedPictures,
   saveInteractionAgentActivity,
   streamChatMessage,
+  cancelChatMessage,
   submitToolApproval,
   listen,
-  readClipboardImage as readTauriClipboardImage,
   type AgentProgress,
   type ChatResponse,
   type ChatSession,
@@ -25,6 +25,13 @@ import ChatPanel from './ChatPanel'
 import DashboardSidebar, { type DashboardView } from './DashboardSidebar'
 import PicturesLibrary from './PicturesLibrary'
 import ImageStudioPanel from './ImageStudioPanel'
+import {
+  errorMessage,
+  readImage,
+  readDocument,
+  createTrimmedImagePreview,
+  applyThemeStyles,
+} from '../../shared/utils/ui'
 
 const DEFAULT_CONFIG = {
   theme: 'dark',
@@ -66,142 +73,6 @@ const MOCK_WELCOME_INTERACTION = {
   createdAt: new Date().toISOString(),
 }
 
-function errorMessage(reason: unknown) {
-  return reason instanceof Error ? reason.message : String(reason)
-}
-
-function readImage(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(String(reader.result))
-    reader.onerror = () => reject(reader.error ?? new Error('Unable to read image'))
-    reader.readAsDataURL(file)
-  })
-}
-
-function readDocument(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(String(reader.result))
-    reader.onerror = () => reject(reader.error ?? new Error('Unable to read document'))
-    reader.readAsDataURL(file)
-  })
-}
-
-async function createTrimmedImagePreview(dataUri: string): Promise<string> {
-  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
-    const nextImage = new Image()
-    nextImage.onload = () => resolve(nextImage)
-    nextImage.onerror = () => reject(new Error('Unable to prepare image preview'))
-    nextImage.src = dataUri
-  })
-
-  const canvas = document.createElement('canvas')
-  canvas.width = image.naturalWidth || image.width
-  canvas.height = image.naturalHeight || image.height
-  const context = canvas.getContext('2d', { willReadFrequently: true })
-  if (!context || canvas.width === 0 || canvas.height === 0) return dataUri
-
-  context.drawImage(image, 0, 0)
-  const pixels = context.getImageData(0, 0, canvas.width, canvas.height)
-  let minX = canvas.width
-  let minY = canvas.height
-  let maxX = -1
-  let maxY = -1
-
-  for (let y = 0; y < canvas.height; y += 1) {
-    for (let x = 0; x < canvas.width; x += 1) {
-      const alpha = pixels.data[(y * canvas.width + x) * 4 + 3]
-      if (alpha > 12) {
-        minX = Math.min(minX, x)
-        minY = Math.min(minY, y)
-        maxX = Math.max(maxX, x)
-        maxY = Math.max(maxY, y)
-      }
-    }
-  }
-
-  if (maxX < minX || maxY < minY) return dataUri
-
-  const padding = 8
-  const sx = Math.max(0, minX - padding)
-  const sy = Math.max(0, minY - padding)
-  const sw = Math.min(canvas.width - sx, maxX - minX + 1 + padding * 2)
-  const sh = Math.min(canvas.height - sy, maxY - minY + 1 + padding * 2)
-
-  if (sw >= canvas.width * 0.92 && sh >= canvas.height * 0.92) return dataUri
-
-  const previewCanvas = document.createElement('canvas')
-  previewCanvas.width = sw
-  previewCanvas.height = sh
-  const previewContext = previewCanvas.getContext('2d')
-  if (!previewContext) return dataUri
-  previewContext.drawImage(canvas, sx, sy, sw, sh, 0, 0, sw, sh)
-  return previewCanvas.toDataURL('image/png')
-}
-
-const lightenColor = (hex: string, amount: number) => {
-  const clean = hex.replace('#', '')
-  if (clean.length !== 6) return hex
-  const num = parseInt(clean, 16)
-  const r = Math.min(255, (num >> 16) + amount)
-  const g = Math.min(255, ((num >> 8) & 0x00FF) + amount)
-  const b = Math.min(255, (num & 0x0000FF) + amount)
-  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`
-}
-
-const hexToRgb = (hex: string) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16),
-  } : { r: 15, g: 23, b: 42 }
-}
-
-const applyThemeStyles = (cfg: any) => {
-  const theme = cfg.theme || 'dark'
-  const accentColor = cfg.accentColor || '#4f83e6'
-  const systemTextColor = cfg.systemTextColor || '#f8fafc'
-
-  document.documentElement.setAttribute('data-theme', theme)
-  document.documentElement.style.setProperty('--accent', accentColor)
-  document.documentElement.style.setProperty('--accent-hover', lightenColor(accentColor, 20))
-  document.documentElement.style.setProperty('--text-main', systemTextColor)
-  document.documentElement.style.setProperty('--glass-blur', cfg.glassBlur || 'blur(16px)')
-  document.body.style.fontFamily = cfg.fontFamily || "'Outfit', sans-serif"
-  document.documentElement.style.fontSize = cfg.fontSize || '18px'
-
-  if (theme === 'custom') {
-    if (cfg.customBgStart && cfg.customBgEnd) {
-      document.documentElement.style.setProperty('--bg-color', cfg.customBgStart)
-      document.documentElement.style.setProperty('--bg-gradient', `linear-gradient(135deg, ${cfg.customBgStart} 0%, ${cfg.customBgEnd} 100%)`)
-    }
-    if (cfg.customPanelBg) {
-      const rgb = hexToRgb(cfg.customPanelBg)
-      document.documentElement.style.setProperty('--panel-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.75)`)
-      document.documentElement.style.setProperty('--panel-raised', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.82)`)
-      document.documentElement.style.setProperty('--panel-soft', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.46)`)
-      document.documentElement.style.setProperty('--chrome-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.88)`)
-      document.documentElement.style.setProperty('--surface-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.62)`)
-      document.documentElement.style.setProperty('--surface-strong', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.86)`)
-      document.documentElement.style.setProperty('--input-bg', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.72)`)
-    }
-    return
-  }
-
-  ;[
-    '--bg-color',
-    '--bg-gradient',
-    '--panel-bg',
-    '--panel-raised',
-    '--panel-soft',
-    '--chrome-bg',
-    '--surface-bg',
-    '--surface-strong',
-    '--input-bg',
-  ].forEach((name) => document.documentElement.style.removeProperty(name))
-}
 
 export default function MintDashboard() {
   const [view, setView] = useState<DashboardView>('chat')
@@ -415,6 +286,20 @@ export default function MintDashboard() {
     }
   }
 
+  async function handleCancelMessage() {
+    if (!sending || !streamingConversationId) return
+    try {
+      await cancelChatMessage(streamingConversationId)
+    } catch (e) {
+      console.error("Failed to cancel message stream:", e)
+    } finally {
+      setSending(false)
+      setStreamingConversationId(null)
+      setSendingMessage('')
+      setSendingImageCount(0)
+    }
+  }
+
   async function sendPrompt(
     promptText: string,
     options: {
@@ -587,37 +472,6 @@ export default function MintDashboard() {
     return true
   }
 
-  async function readClipboardImage() {
-    try {
-      const dataUri = await readTauriClipboardImage()
-      if (dataUri) {
-        const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
-        setImageAttachments((current) => [...current, { dataUri, previewDataUri, name: 'Pasted image' }])
-        return true
-      }
-    } catch (err) {
-      console.warn('Tauri clipboard fallback error:', err)
-    }
-
-    try {
-      if (!navigator.clipboard?.read) return false
-      const items = await navigator.clipboard.read()
-      for (const item of items) {
-        const imageType = item.types.find((type) => type.startsWith('image/'))
-        if (!imageType) continue
-        const blob = await item.getType(imageType)
-        const file = new File([blob], 'Pasted image', { type: imageType })
-        const dataUri = await readImage(file)
-        const previewDataUri = await createTrimmedImagePreview(dataUri).catch(() => dataUri)
-        setImageAttachments((current) => [...current, { dataUri, previewDataUri, name: 'Pasted image' }])
-        return true
-      }
-      return false
-    } catch {
-      // Some environments expose pasted images only through ClipboardEvent.
-      return false
-    }
-  }
 
   async function selectDocument(event: ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0]
@@ -886,7 +740,6 @@ export default function MintDashboard() {
             onSelectImage={selectImage}
             onSelectDocument={selectDocument}
             onPasteImage={pasteImage}
-            onReadClipboardImage={readClipboardImage}
             onSetMessage={setMessage}
             onSendVoiceMessage={sendVoiceMessage}
             onRemoveImage={(idx: number) => {
@@ -901,6 +754,7 @@ export default function MintDashboard() {
             settingsConfig={settingsConfig}
             onSetModel={changeModel}
             onApproval={handleApproval}
+            onCancelMessage={handleCancelMessage}
             onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
           />
         </main>

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

@@ -2,10 +2,6 @@ import { useEffect, useMemo, useState } from 'react'
 import { type PictureEntry, convertFileSrc } from '../tauri'
 import type { DashboardView } from './DashboardSidebar'
 
-const INITIAL_VISIBLE_PICTURES = 18
-const PICTURE_RENDER_BATCH_SIZE = 18
-const PICTURE_RENDER_BATCH_DELAY_MS = 80
-
 interface PicturesLibraryProps {
   view: DashboardView
   pictures: PictureEntry[]
@@ -14,31 +10,16 @@ interface PicturesLibraryProps {
 }
 
 export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPictures }: PicturesLibraryProps) {
-  const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_PICTURES)
+  const [visibleCount, setVisibleCount] = useState(24)
   const visiblePictures = useMemo(
     () => pictures.slice(0, visibleCount),
     [pictures, visibleCount],
   )
 
   useEffect(() => {
-    if (view !== 'pictures') {
-      setVisibleCount(INITIAL_VISIBLE_PICTURES)
-      return
-    }
-
-    setVisibleCount(INITIAL_VISIBLE_PICTURES)
+    setVisibleCount(24)
   }, [view, pictures])
 
-  useEffect(() => {
-    if (view !== 'pictures' || visibleCount >= pictures.length) return
-
-    const timer = window.setTimeout(() => {
-      setVisibleCount((current) => Math.min(current + PICTURE_RENDER_BATCH_SIZE, pictures.length))
-    }, PICTURE_RENDER_BATCH_DELAY_MS)
-
-    return () => window.clearTimeout(timer)
-  }, [view, pictures.length, visibleCount])
-
   return (
     <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
       <header className="pictures-header">
@@ -61,14 +42,27 @@ export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPi
           <span>Images appear here after a message with an attachment is sent successfully.</span>
         </div>
       ) : (
-        <div className="pictures-grid">
-          {visiblePictures.map((picture, index) => (
-            <article className="picture-card" key={picture.id}>
-              <img src={convertFileSrc(picture.thumbnailPath || picture.thumbnailUrl || picture.path)} alt={picture.message || picture.filename} loading={index < 6 ? 'eager' : 'lazy'} decoding="async" />
-              <div className="picture-card-meta"><span>{picture.message || picture.filename}</span></div>
-            </article>
-          ))}
-        </div>
+        <>
+          <div className="pictures-grid">
+            {visiblePictures.map((picture, index) => (
+              <article className="picture-card" key={picture.id}>
+                <img src={convertFileSrc(picture.thumbnailPath || picture.thumbnailUrl || picture.path)} alt={picture.message || picture.filename} loading={index < 6 ? 'eager' : 'lazy'} decoding="async" />
+                <div className="picture-card-meta"><span>{picture.message || picture.filename}</span></div>
+              </article>
+            ))}
+          </div>
+          {visibleCount < pictures.length && (
+            <div className="pictures-load-more-container">
+              <button
+                type="button"
+                className="pictures-load-more-btn"
+                onClick={() => setVisibleCount((prev) => prev + 24)}
+              >
+                Load More ({pictures.length - visibleCount} remaining)
+              </button>
+            </div>
+          )}
+        </>
       )}
     </section>
   )

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

@@ -0,0 +1,362 @@
+import React, { useState } from 'react'
+import { 
+  DEFAULT_CONFIG,
+  GEMINI_MODELS,
+  OPENAI_MODELS,
+  OPENROUTER_MODELS,
+  DEEPSEEK_MODELS,
+  ANTHROPIC_MODELS,
+  HF_MODELS,
+  LOCAL_MODELS
+} from '../SettingsWindow'
+
+interface Agent {
+  id: string
+  name: string
+  provider: string
+  model: string
+  apiKey?: string
+  systemInstruction: string
+  enabled: boolean
+}
+
+interface AgentsTabProps {
+  config: typeof DEFAULT_CONFIG & { agents?: Agent[] }
+  updateField: (field: any, value: any) => void
+  dynamicOllamaModels?: string[]
+}
+
+export default function AgentsTab({ config, updateField, dynamicOllamaModels = [] }: AgentsTabProps) {
+  const agents = config.agents || []
+  const [editingAgent, setEditingAgent] = useState<Agent | null>(null)
+  const [name, setName] = useState('')
+  const [provider, setProvider] = useState('gemini')
+  const [model, setModel] = useState('gemini-2.5-flash')
+  const [apiKey, setApiKey] = useState('')
+  const [systemInstruction, setSystemInstruction] = useState('')
+  const [isEditing, setIsEditing] = useState(false)
+
+  const handleProviderChange = (newProvider: string) => {
+    setProvider(newProvider)
+    let defaultModel = ''
+    if (newProvider === 'gemini') defaultModel = config.geminiModel || GEMINI_MODELS[0]
+    else if (newProvider === 'openai') defaultModel = config.openaiModel || OPENAI_MODELS[0]
+    else if (newProvider === 'anthropic') defaultModel = config.anthropicModel || ANTHROPIC_MODELS[0]
+    else if (newProvider === 'openrouter') defaultModel = config.openrouterModel || OPENROUTER_MODELS[0]
+    else if (newProvider === 'deepseek') defaultModel = config.deepseekModel || DEEPSEEK_MODELS[0]
+    else if (newProvider === 'huggingface') defaultModel = config.hfModel || HF_MODELS[0]
+    else if (newProvider === 'local_openai') defaultModel = config.localModelName || LOCAL_MODELS[0]
+    else if (newProvider === 'ollama') defaultModel = config.ollamaModel || dynamicOllamaModels[0] || 'llama3:latest'
+    setModel(defaultModel)
+  }
+
+  const handleEdit = (agent: Agent) => {
+    setEditingAgent(agent)
+    setName(agent.name)
+    setProvider(agent.provider)
+    setModel(agent.model)
+    setApiKey(agent.apiKey || '')
+    setSystemInstruction(agent.systemInstruction)
+    setIsEditing(true)
+  }
+
+  const handleSaveAgent = () => {
+    if (!name.trim()) {
+      alert('Please enter an agent name.')
+      return
+    }
+
+    let updatedAgents: Agent[] = []
+    if (editingAgent) {
+      // Update existing agent
+      updatedAgents = agents.map(a =>
+        a.id === editingAgent.id
+          ? { ...a, name, provider, model, apiKey: apiKey || undefined, systemInstruction }
+          : a
+      )
+    } else {
+      // Add new agent
+      const newAgent: Agent = {
+        id: `agent-${Date.now()}`,
+        name,
+        provider,
+        model,
+        apiKey: apiKey || undefined,
+        systemInstruction,
+        enabled: true
+      }
+      updatedAgents = [...agents, newAgent]
+    }
+
+    updateField('agents', updatedAgents)
+    closeForm()
+  }
+
+  const handleDeleteAgent = (id: string) => {
+    if (confirm('Are you sure you want to delete this agent?')) {
+      const updatedAgents = agents.filter(a => a.id !== id)
+      updateField('agents', updatedAgents)
+    }
+  }
+
+  const handleToggleAgent = (id: string, enabled: boolean) => {
+    const updatedAgents = agents.map(a =>
+      a.id === id ? { ...a, enabled } : a
+    )
+    updateField('agents', updatedAgents)
+  }
+
+  const handleDisableAll = () => {
+    const updatedAgents = agents.map(a => ({ ...a, enabled: false }))
+    updateField('agents', updatedAgents)
+  }
+
+  const closeForm = () => {
+    setEditingAgent(null)
+    setName('')
+    setProvider('gemini')
+    setModel('gemini-2.5-flash')
+    setApiKey('')
+    setSystemInstruction('')
+    setIsEditing(false)
+  }
+
+  const handleAddClick = () => {
+    setEditingAgent(null)
+    setName('')
+    setProvider('gemini')
+    setModel('gemini-2.5-flash')
+    setApiKey('')
+    setSystemInstruction('')
+    setIsEditing(true)
+  }
+
+  // Filter providers that have configured API keys, plus local ones
+  const availableProviders = [
+    { value: 'gemini', label: 'Google Gemini', hasKey: !!config.apiKey },
+    { value: 'openai', label: 'OpenAI', hasKey: !!config.openaiApiKey },
+    { value: 'anthropic', label: 'Anthropic Claude', hasKey: !!config.anthropicApiKey },
+    { value: 'openrouter', label: 'OpenRouter', hasKey: !!config.openrouterApiKey },
+    { value: 'deepseek', label: 'DeepSeek', hasKey: !!config.deepseekApiKey },
+    { value: 'ollama', label: 'Ollama (Local)', hasKey: true },
+    { value: 'huggingface', label: 'Hugging Face', hasKey: !!config.hfApiKey },
+    { value: 'local_openai', label: 'Local (LM Studio / OpenAI Compatible)', hasKey: true },
+  ].filter(p => p.hasKey);
+
+  // Find out what models list corresponds to the selected provider
+  let modelList: string[] = []
+  let defaultGeneralModel = ''
+  if (provider === 'gemini') {
+    modelList = GEMINI_MODELS
+    defaultGeneralModel = config.geminiModel
+  } else if (provider === 'openai') {
+    modelList = OPENAI_MODELS
+    defaultGeneralModel = config.openaiModel
+  } else if (provider === 'openrouter') {
+    modelList = OPENROUTER_MODELS
+    defaultGeneralModel = config.openrouterModel
+  } else if (provider === 'deepseek') {
+    modelList = DEEPSEEK_MODELS
+    defaultGeneralModel = config.deepseekModel
+  } else if (provider === 'anthropic') {
+    modelList = ANTHROPIC_MODELS
+    defaultGeneralModel = config.anthropicModel
+  } else if (provider === 'huggingface') {
+    modelList = HF_MODELS
+    defaultGeneralModel = config.hfModel
+  } else if (provider === 'local_openai') {
+    modelList = LOCAL_MODELS
+    defaultGeneralModel = config.localModelName
+  } else if (provider === 'ollama') {
+    modelList = dynamicOllamaModels
+    defaultGeneralModel = config.ollamaModel
+  }
+
+  // Sort modelList so defaultGeneralModel is first (at the top)
+  const sortedModelList = defaultGeneralModel 
+    ? [defaultGeneralModel, ...modelList.filter(m => m !== defaultGeneralModel)]
+    : modelList;
+
+  const isCustomModel = !sortedModelList.includes(model)
+
+  return (
+    <div className="tab-pane active animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <section className="setting-section">
+        <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>
+            <p className="section-description">
+              Configure multiple distinct AI agents with specific roles. You can adjust the models, system instructions, and credentials for each agent.
+            </p>
+          </div>
+          {!isEditing && (
+            <div style={{ display: 'flex', gap: '10px', height: 'fit-content', flexShrink: 0 }}>
+              <button className="btn btn-secondary" onClick={handleDisableAll} style={{ whiteSpace: 'nowrap' }}>
+                Disable All
+              </button>
+              <button className="btn btn-primary" onClick={handleAddClick} style={{ whiteSpace: 'nowrap' }}>
+                + Add Custom Agent
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="toggle-row" style={{ margin: '16px 0 24px 0' }}>
+          <div>
+            <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">
+            <input 
+              type="checkbox" 
+              checked={config.enableAgentCollaboration} 
+              onChange={(e) => updateField('enableAgentCollaboration', e.target.checked)} 
+            />
+            <span className="settings-toggle-slider"></span>
+          </label>
+        </div>
+
+        {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)' }}>
+              {editingAgent ? `Edit Agent: ${editingAgent.name}` : 'Create New Agent'}
+            </h3>
+            
+            <div className="setting-row">
+              <label>Agent Name</label>
+              <input 
+                type="text" 
+                value={name} 
+                onChange={(e) => setName(e.target.value)} 
+                placeholder="e.g. Code Reviewer" 
+              />
+            </div>
+
+            <div className="setting-row">
+              <label>AI Provider</label>
+              <select value={provider} onChange={(e) => handleProviderChange(e.target.value)}>
+                {availableProviders.map(p => (
+                  <option key={p.value} value={p.value}>{p.label}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="setting-row">
+              <label>Model Name</label>
+              <select 
+                value={isCustomModel ? 'custom' : model} 
+                onChange={(e) => {
+                  const val = e.target.value
+                  if (val === 'custom') {
+                    setModel('')
+                  } else {
+                    setModel(val)
+                  }
+                }}
+              >
+                {sortedModelList.map(m => (
+                  <option key={m} value={m}>{m}</option>
+                ))}
+                <option value="custom">Custom...</option>
+              </select>
+            </div>
+
+            {isCustomModel && (
+              <div className="setting-row">
+                <label>Custom Model Name</label>
+                <input 
+                  type="text" 
+                  value={model} 
+                  onChange={(e) => setModel(e.target.value)} 
+                  placeholder="Enter custom model name..." 
+                />
+              </div>
+            )}
+
+            <div className="setting-row">
+              <label>Custom API Key (Optional)</label>
+              <input 
+                type="password" 
+                value={apiKey} 
+                onChange={(e) => setApiKey(e.target.value)} 
+                placeholder="Leave blank to use global provider API key" 
+              />
+            </div>
+
+            <div className="setting-row">
+              <label>System Instructions / Role</label>
+              <textarea 
+                value={systemInstruction} 
+                onChange={(e) => setSystemInstruction(e.target.value)} 
+                placeholder="Describe this agent's goal, instructions, and personality..." 
+                style={{ minHeight: '120px', resize: 'vertical' }}
+              />
+            </div>
+
+            <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>
+            </div>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: '16px' }}>
+            {agents.map((agent) => (
+              <div 
+                key={agent.id} 
+                style={{ 
+                  display: 'flex', 
+                  flexDirection: 'column', 
+                  padding: '16px', 
+                  background: 'var(--panel-bg)', 
+                  border: '1px solid var(--panel-raised)', 
+                  borderRadius: '8px',
+                  gap: '8px'
+                }}
+              >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                    <strong style={{ fontSize: '18px' }}>{agent.name}</strong>
+                    <span 
+                      style={{ 
+                        fontSize: '11px', 
+                        padding: '2px 6px', 
+                        borderRadius: '4px', 
+                        background: 'var(--panel-raised)',
+                        color: 'var(--accent)'
+                      }}
+                    >
+                      {agent.provider} ({agent.model})
+                    </span>
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
+                    <label className="settings-toggle-switch">
+                      <input 
+                        type="checkbox" 
+                        checked={agent.enabled} 
+                        onChange={(e) => handleToggleAgent(agent.id, e.target.checked)} 
+                      />
+                      <span className="settings-toggle-slider"></span>
+                    </label>
+                    <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '12px' }} onClick={() => handleEdit(agent)}>Edit</button>
+                    {!['planner', 'coder', 'reviewer'].includes(agent.id) && (
+                      <button className="btn btn-danger" style={{ padding: '4px 8px', fontSize: '12px' }} onClick={() => handleDeleteAgent(agent.id)}>Delete</button>
+                    )}
+                  </div>
+                </div>
+                <p style={{ margin: '4px 0 0 0', fontSize: '14px', color: 'var(--text-soft)', fontStyle: 'italic' }}>
+                  "{agent.systemInstruction}"
+                </p>
+              </div>
+            ))}
+            {agents.length === 0 && (
+              <div style={{ textAlign: 'center', padding: '32px', color: 'var(--text-soft)', fontStyle: 'italic' }}>
+                No agents configured. Click "+ Add Custom Agent" to get started.
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}