@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/McpServersView.tsx

@@ -1,12 +1,15 @@
+import SelectField from './SelectField'
 import React, { useState, useEffect } from 'react'
 import '../css/management-views.css'
 import { renderMcpSvgIcon, renderMcpHubSvgIcon } from '../constants/plugins'
 import McpToolAllowlist from './McpToolAllowlist'
 import McpRegistryPicker from './McpRegistryPicker'
 import type { McpRegistryEntry } from '../constants/mcpRegistry'
-import { testMcpConnection } from '@/tauri'
+import { catalogPlatform } from '../platform'
 import { Globe, Terminal, Zap, Loader2, Check, AlertCircle, ShieldAlert } from 'lucide-react'
 
+const { testMcpConnection } = catalogPlatform
+
 export interface McpServersViewProps {
   config: any
   updateField: (field: string, value: any) => void
@@ -194,7 +197,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
           headers = JSON.parse(customHeaders.trim())
         } catch {
           setTestStatus('error')
-          setTestMessage('Invalid JSON in Custom Headers field.')
+          setTestMessage('Invalid JSON in Custom headers field.')
           return
         }
       }
@@ -205,7 +208,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
       const res = await testMcpConnection(mcpUrl.trim(), headers)
       if (res.ok) {
         setTestStatus('success')
-        const name = res.server_info?.name || 'Remote Server'
+        const name = res.server_info?.name || 'Remote server'
         const count = res.tools_count ?? 0
         setTestMessage(`Connected: ${name} (${count} tools discovered)`)
       } else {
@@ -237,7 +240,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
         try {
           headers = JSON.parse(customHeaders.trim())
         } catch {
-          alert('Invalid JSON in Custom Headers field.')
+          alert('Invalid JSON in Custom headers field.')
           return
         }
       }
@@ -296,14 +299,14 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
             <span className="management-title-icon" style={{ display: 'inline-flex', alignItems: 'center' }}>
               {renderMcpHubSvgIcon(22, 'var(--accent)')}
             </span>
-            MCP Servers
+            MCP servers
           </h1>
           <p className="management-subtitle">
             Connect external tool servers.
           </p>
         </div>
 
-        <div style={{ display: 'flex', gap: 8 }}>
+        <div className="mcp-management-actions">
           <button
             type="button"
             className="management-action-btn"
@@ -331,7 +334,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
 
       {/* Search Input */}
       <div className="management-control-bar">
-        <div className="management-search-wrapper" style={{ maxWidth: '400px' }}>
+        <div className="management-search-wrapper mcp-search-wrapper">
           <input
             type="text"
             className="management-search-input"
@@ -354,9 +357,18 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
         </div>
       </div>
 
+      <label className="mcp-image-input-setting">
+        <input
+          type="checkbox"
+          checked={config.mcpImageInput !== false}
+          onChange={(e) => updateField('mcpImageInput', e.target.checked)}
+        />
+        <span>Let the model inspect MCP images <span className="mcp-image-input-hint">(disable for models without image input)</span></span>
+      </label>
+
       {/* Installed */}
       {installedMcpItems.length > 0 && (
-        <div className="management-installed-section">
+        <div className="management-installed-section mcp-installed-section">
           <h2 className="management-section-title">Installed</h2>
           <div className="management-installed-row">
             {installedMcpItems.map((item) => (
@@ -375,7 +387,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
       )}
 
       {/* MCP Server List */}
-      <h2 className="management-section-title">All Servers</h2>
+      <h2 className="management-section-title">All servers</h2>
       {filteredMcpItems.length === 0 ? (
         <div className="mgmt-empty">
           <p>{searchQuery ? 'No MCP servers match your search.' : 'No MCP servers yet.'}</p>
@@ -488,9 +500,18 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
 
                 {item.isConfigured && (
                   <div style={{ marginTop: '20px', paddingTop: '16px', borderTop: '1px solid var(--border, rgba(255, 255, 255, 0.08))' }}>
-                    <h4 style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--accent, #3b82f6)', textTransform: 'uppercase', letterSpacing: '0.5px', margin: '0 0 12px' }}>
+                    <h4 style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--interactive-fg)', textTransform: 'none', letterSpacing: '0.5px', margin: '0 0 12px' }}>
                       Server Config
                     </h4>
+                    <label className="management-form-group" style={{ marginBottom: 12 }}>
+                      Tool timeout (seconds)
+                      <input className="management-input-field mcp-timeout-input" type="number" min={1} max={3600} defaultValue={srvConfig.timeoutSecs ?? 300}
+                        key={item.name} onBlur={(e) => {
+                          const value = Number(e.currentTarget.value)
+                          if (Number.isInteger(value) && value >= 1 && value <= 3600) handleUpdateMcpServerField(item.name, 'timeoutSecs', value)
+                          else e.currentTarget.value = String(srvConfig.timeoutSecs ?? 300)
+                        }} />
+                    </label>
                     {srvConfig.url ? (
                       <div style={{ display: 'grid', gap: '12px' }}>
                         <div className="management-form-group">
@@ -506,7 +527,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                           />
                         </div>
                         <div className="management-form-group">
-                          <label className="management-label">Custom Headers (JSON)</label>
+                          <label className="management-label">Custom headers (JSON)</label>
                           <textarea
                             className="management-textarea-field"
                             value={typeof srvConfig.headers === 'object' ? JSON.stringify(srvConfig.headers, null, 2) : srvConfig.headers || ''}
@@ -564,7 +585,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                           />
                         </div>
                         <div className="management-form-group">
-                          <label className="management-label">Environment Variables (JSON)</label>
+                          <label className="management-label">Environment variables (JSON)</label>
                           <textarea
                             className="management-textarea-field"
                             value={typeof srvConfig.env === 'object' ? JSON.stringify(srvConfig.env, null, 2) : srvConfig.env || ''}
@@ -636,7 +657,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
         <div className="management-modal-overlay" onClick={() => setShowAddModal(false)}>
           <div className="management-modal" onClick={(e) => e.stopPropagation()}>
             <div className="management-modal-header">
-              <h2 className="management-modal-title">Add New MCP Server</h2>
+              <h2 className="management-modal-title">Add new MCP server</h2>
               <button type="button" className="management-modal-close" onClick={() => setShowAddModal(false)}>
                 ✕
               </button>
@@ -655,7 +676,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                       setTestMessage('')
                     }}
                   >
-                    <Globe size={15} /> Remote Server (URL / SSE)
+                    <Globe size={15} /> Remote server (URL / SSE)
                   </button>
                   <button
                     type="button"
@@ -666,7 +687,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                       setTestMessage('')
                     }}
                   >
-                    <Terminal size={15} /> Local Command (stdio)
+                    <Terminal size={15} /> Local command (stdio)
                   </button>
                 </div>
 
@@ -674,7 +695,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                   <>
                     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
                       <div className="management-form-group">
-                        <label className="management-label">Server Name</label>
+                        <label className="management-label">Server name</label>
                         <input
                           type="text"
                           className="management-input-field"
@@ -686,20 +707,20 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                       </div>
                       <div className="management-form-group">
                         <label className="management-label">Authentication</label>
-                        <select
+                        <SelectField aria-label="Authentication"
                           className="management-input-field"
                           value={authType}
-                          onChange={(e) => {
-                            setAuthType(e.target.value as any)
+                          onValueChange={(nextValue) => {
+                            setAuthType(nextValue as any)
                             setTestStatus('idle')
                             setTestMessage('')
                           }}
-                          style={{ cursor: 'pointer' }}
+
                         >
                           <option value="none">None (Public)</option>
-                          <option value="bearer">Bearer Token</option>
-                          <option value="custom">Custom Headers (JSON)</option>
-                        </select>
+                          <option value="bearer">Bearer token</option>
+                          <option value="custom">Custom headers (JSON)</option>
+                        </SelectField>
                       </div>
                     </div>
 
@@ -721,7 +742,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
 
                     {authType === 'bearer' && (
                       <div className="management-form-group">
-                        <label className="management-label">Bearer Token</label>
+                        <label className="management-label">Bearer token</label>
                         <input
                           type="password"
                           className="management-input-field"
@@ -764,7 +785,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                       />
                     </div>
 
-                    {/* Test Connection Bar */}
+                    {/* Test connection Bar */}
                     <div className="mcp-test-row">
                       <button
                         type="button"
@@ -778,7 +799,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                           </>
                         ) : (
                           <>
-                            <Zap size={13} /> Test Connection
+                            <Zap size={13} /> Test connection
                           </>
                         )}
                       </button>
@@ -819,7 +840,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                   <>
                     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
                       <div className="management-form-group">
-                        <label className="management-label">Server Name</label>
+                        <label className="management-label">Server name</label>
                         <input
                           type="text"
                           className="management-input-field"
@@ -865,7 +886,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                     </div>
 
                     <div className="management-form-group">
-                      <label className="management-label">Environment Variables (JSON)</label>
+                      <label className="management-label">Environment variables (JSON)</label>
                       <textarea
                         className="management-textarea-field"
                         placeholder='e.g. {"BRAVE_API_KEY": "your_key_here"}'
@@ -910,12 +931,12 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
         </div>
       )}
 
-      {/* MCP Catalog Modal */}
+      {/* MCP catalog Modal */}
       {showCatalogModal && (
         <div className="management-modal-overlay" onClick={() => setShowCatalogModal(false)}>
           <div className="management-modal mcp-catalog-modal" onClick={(e) => e.stopPropagation()}>
             <div className="management-modal-header">
-              <h2 className="management-modal-title">MCP Catalog</h2>
+              <h2 className="management-modal-title">MCP catalog</h2>
               <button type="button" className="management-modal-close" onClick={() => setShowCatalogModal(false)}>
                 ✕
               </button>

package/src/renderer/shared/components/McpToolAllowlist.tsx

@@ -67,13 +67,11 @@ export const McpToolAllowlist: React.FC<McpToolAllowlistProps> = ({
 
   return (
     <div style={{ marginTop: 16 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+      <div className="mcp-allowlist-heading">
         <span className="management-label" style={{ margin: 0 }}>
           Allowed tools
         </span>
-        <label
-          style={{ display: 'flex', alignItems: 'center', gap: 6, marginLeft: 'auto', fontSize: '0.85rem', cursor: 'pointer', userSelect: 'none' }}
-        >
+        <label className="mcp-allowlist-toggle">
           <input
             type="checkbox"
             className="mint-custom-checkbox"

package/src/renderer/shared/components/McpToolResults.tsx

@@ -0,0 +1,99 @@
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import type { AgentProgress, McpArtifact } from '../types'
+import { mediaPlatform } from '../platform'
+import '../css/mcp-results.css'
+
+function Artifact({ artifact }: { artifact: McpArtifact }) {
+  const [src, setSrc] = useState('')
+  const [error, setError] = useState('')
+  const dialog = useRef<HTMLDialogElement>(null)
+  useEffect(() => {
+    if (artifact.kind === 'link') return
+    let active = true
+    let loaded = ''
+    mediaPlatform.readMcpArtifact(artifact.id).then(url => {
+      if (!active) { if (url.startsWith('blob:')) URL.revokeObjectURL(url); return }
+      loaded = url; setSrc(url)
+    }).catch(() => { if (active) setError('Attachment unavailable') })
+    return () => { active = false; if (loaded.startsWith('blob:')) URL.revokeObjectURL(loaded) }
+  }, [artifact.id, artifact.kind])
+  if (artifact.kind === 'link') {
+    // Custom resource URIs are copied as text; only web URLs are navigable.
+    return /^https?:\/\//i.test(artifact.uri || '')
+      ? <a href={artifact.uri} target="_blank" rel="noreferrer">{artifact.name}</a>
+      : <span>{artifact.name}: {artifact.uri}</span>
+  }
+  return <div className="mcp-artifact">
+    {artifact.kind === 'image' && src && <>
+      <button type="button" className="mcp-image-button" onClick={() => dialog.current?.showModal()} aria-label={`View ${artifact.name}`}>
+        <img src={src} alt={artifact.name} onError={() => setError('Image unavailable')} />
+      </button>
+      <dialog ref={dialog} className="mcp-image-dialog" aria-label={artifact.name}>
+        <button type="button" onClick={() => dialog.current?.close()}>Close</button>
+        <img src={src} alt={artifact.name} />
+      </dialog>
+    </>}
+    {src ? <a href={src} download={artifact.name}>{artifact.name} · {(artifact.size / 1024).toFixed(1)} KB</a> : <span>{artifact.name} · {error || 'Loading attachment…'}</span>}
+    {error && src && <span role="status">{error}</span>}
+  </div>
+}
+
+export default memo(function McpToolResults({ progress, running = false, interrupted = false }: { progress: AgentProgress[]; running?: boolean; interrupted?: boolean }) {
+  const [, tick] = useState(0)
+  const started = useRef(new Map<string, number>())
+  const { calls, discovery, artifacts, warnings } = useMemo(() => {
+    const calls = new Map<string, { label: string; update?: Extract<AgentProgress, { type: 'ToolProgress' }>['data']['update']; status?: string; device?: Extract<AgentProgress,{type:'DeviceState'}>['data']['update'] }>()
+    const discovery=new Map<string,string>()
+    const artifacts = new Map<string, McpArtifact>()
+    const warnings = new Set<string>()
+    for (const event of progress) {
+      if (event.type === 'ToolStart' && event.data.action === 'mcp_tool' && event.data.callId) {
+        const id = event.data.callId
+        if (!started.current.has(id)) started.current.set(id, Date.now())
+        calls.set(id, { label: `${event.data.input.server}/${event.data.input.tool}` })
+      } else if (event.type === 'ToolDiscovery') {
+        discovery.set(`${event.data.server}/${event.data.tool}`,event.data.message)
+      } else if (event.type === 'DeviceState') {
+        const {callId,server,tool,update}=event.data
+        calls.set(callId,{...calls.get(callId),label:`${server}/${tool}`,device:update})
+      } else if (event.type === 'ToolProgress') {
+        const { callId, server, tool, update } = event.data
+        calls.set(callId, { ...calls.get(callId), label: `${server}/${tool}`, update })
+      } else if (event.type === 'ToolEnd' && event.data.callId && event.data.action === 'mcp_tool') {
+        const previous = calls.get(event.data.callId)
+        calls.set(event.data.callId, { label: previous?.label || `${event.data.input.server}/${event.data.input.tool}`, ...previous, status: event.data.status || (/^(Error:|Blocked|User denied)/.test(event.data.result) ? 'failed' : 'success') })
+      } else if (event.type === 'ToolArtifacts') {
+        for (const artifact of event.data.artifacts) artifacts.set(artifact.id, artifact)
+        for (const warning of event.data.warnings) warnings.add(warning)
+      }
+    }
+    return { calls, discovery, artifacts, warnings }
+  }, [progress])
+  const hasActiveCalls = running && [...calls.values()].some(call => !call.status)
+  useEffect(() => {
+    if (!hasActiveCalls) return
+    const timer = setInterval(() => tick(n => n + 1), 1000)
+    return () => clearInterval(timer)
+  }, [hasActiveCalls])
+  if (!calls.size && !artifacts.size && !warnings.size && !discovery.size) return null
+  return <section className="mcp-results" aria-label="MCP results">
+    {[...discovery].map(([label,message])=><div key={label} className="mcp-call-status" role="status"><strong>{label}</strong><span>{message}</span></div>)}
+    {[...calls].map(([id, call]) => {
+      const active = running && !call.status
+      const elapsed = Math.max(call.update?.elapsedSecs || 0, Math.floor((Date.now() - (started.current.get(id) || Date.now())) / 1000))
+      const percent = call.update?.total ? Math.min(100, Math.round(call.update.progress / call.update.total * 100)) : undefined
+      const deviceLabel=call.device && (active && !interrupted || ['verified','failed','unconfirmed'].includes(call.device.state)) ? ({accepted:'Command accepted; awaiting device confirmation',running:'Awaiting device completion',verified:'Device completion verified',failed:'Device reported failure',unconfirmed:'Device completion unconfirmed'}[call.device.state]) : undefined
+      const status = call.status === 'cancelled' || (!call.status && interrupted) ? 'Stopped waiting; remote work may still be running.'
+        : call.status === 'timed_out' ? 'Timed out; remote completion is unconfirmed.'
+        : call.status === 'failed' ? 'Failed' : call.status === 'success' ? 'Completed' : active ? `Working · ${elapsed}s` : 'Interrupted; result unconfirmed'
+      return <div key={id} className="mcp-call-status" role="status">
+        <strong>{call.label}</strong><span>{deviceLabel || status}</span>
+        {call.device && <><span>{call.device.message}</span><span>Target: {JSON.stringify(call.device.target)} · Actual: {JSON.stringify(call.device.actual)}</span></>}
+        {active && call.update?.message && <span>{call.update.message}</span>}
+        {active && percent !== undefined && <progress max={100} value={percent} aria-label={`${call.label} progress`}>{percent}%</progress>}
+      </div>
+    })}
+    <div className="mcp-artifacts">{[...artifacts.values()].map(artifact => <Artifact key={artifact.id} artifact={artifact} />)}</div>
+    {[...warnings].map(warning => <p key={warning} role="status">{warning}</p>)}
+  </section>
+})

package/src/renderer/shared/components/MermaidCard.tsx

@@ -67,6 +67,9 @@ export default function MermaidCard({ code }: { code: string }) {
   const [status, setStatus] = useState<Status>('loading')
   const [svg, setSvg] = useState<string>('')
   const [copied, setCopied] = useState(false)
+  const [isDark, setIsDark] = useState(
+    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
+  )
 
   useEffect(() => {
     let cancelled = false
@@ -142,7 +145,10 @@ export default function MermaidCard({ code }: { code: string }) {
       debounceTimer = setTimeout(render, 400)
     }
 
-    observer = new MutationObserver(() => render())
+    observer = new MutationObserver(() => {
+      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
+      render()
+    })
     observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
 
     return () => {
@@ -184,28 +190,28 @@ export default function MermaidCard({ code }: { code: string }) {
   return (
     <div
       style={{
-        background: 'rgba(255, 255, 255, 0.03)',
+        background: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
         backdropFilter: 'blur(16px)',
         WebkitBackdropFilter: 'blur(16px)',
-        color: '#f8fafc',
+        color: isDark ? '#f8fafc' : '#0f172a',
         borderRadius: '12px',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.2)',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
+        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
+        border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
         minWidth: 0,
         maxWidth: '100%',
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-        <Workflow size={16} strokeWidth={2} style={{ opacity: 0.9 }} />
+        <Workflow size={16} strokeWidth={2} style={{ opacity: 0.9, color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b' }} />
         <span
           style={{
             fontSize: '11px',
             fontWeight: 700,
             letterSpacing: '0.8px',
-            color: 'rgba(255, 255, 255, 0.6)',
+            color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
           }}
         >
           DIAGRAM
@@ -242,7 +248,7 @@ export default function MermaidCard({ code }: { code: string }) {
               width: '20px',
               height: '20px',
               borderRadius: '50%',
-              border: '2px solid rgba(255, 255, 255, 0.15)',
+              border: `2px solid ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(15,23,42,0.12)'}`,
               borderTopColor: 'var(--accent, #10b981)',
               animation: 'mermaid-card-spin 0.8s linear infinite',
             }}