@pheem49/mint 1.15.0 → 1.16.0

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

@@ -0,0 +1,165 @@
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { Library, RefreshCw, Search, Trash2, X } from 'lucide-react'
+import { libraryPlatform } from '../platform'
+import { createLibraryController } from '../library/controller'
+import { downloadLibraryFile } from '../library/useLibraryFile'
+import type { LibraryItem } from '../types'
+import LibraryItemCard from './LibraryItemCard'
+import LibraryPreview from './LibraryPreview'
+import '../css/library.css'
+
+const filters = [['', 'All'], ['image', 'Images'], ['video', 'Videos'], ['file', 'Files']] as const
+
+export default function LibraryPage({ chatId, onClose, onOpenConversation }: {
+  chatId?: string
+  onClose?: () => void
+  onOpenConversation?: (id: string) => void
+}) {
+  const controller = useMemo(() => createLibraryController({ list: libraryPlatform.listLibrary, setTrashed: libraryPlatform.setLibraryTrashed, remove: libraryPlatform.removeLibraryItem }), [])
+  const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot)
+  const [kind, setKind] = useState<'' | 'image' | 'video' | 'file'>('')
+  const [search, setSearch] = useState('')
+  const [debounced, setDebounced] = useState('')
+  const [scope, setScope] = useState('all')
+  const [trashed, setTrashed] = useState(() => new URLSearchParams(location.search).get('trash') === '1')
+  const [linkedItem, setLinkedItem] = useState<LibraryItem | null>(null)
+  const [preview, setPreview] = useState<LibraryItem | null>(null)
+  const [downloadError, setDownloadError] = useState('')
+  const [downloading, setDownloading] = useState('')
+  const [navigation, setNavigation] = useState(0)
+  const closePreview = useCallback(() => setPreview(null), [])
+
+  useEffect(() => {
+    const onNavigate = () => setNavigation(value => value + 1)
+    window.addEventListener('popstate', onNavigate)
+    return () => window.removeEventListener('popstate', onNavigate)
+  }, [])
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(search), 200)
+    return () => clearTimeout(timer)
+  }, [search])
+  useEffect(() => {
+    void controller.setQuery({ kind: kind || undefined, search: debounced, chatId: scope === 'session' ? chatId : undefined, trashed })
+  }, [kind, debounced, scope, chatId, trashed, controller])
+  useEffect(() => {
+    const onFocus = () => { void controller.refresh() }
+    window.addEventListener('focus', onFocus)
+    return () => window.removeEventListener('focus', onFocus)
+  }, [controller])
+  useEffect(() => {
+    if (!state.items.some(item => item.thumbnailStatus === 'pending' && !item.deletedAt)) return
+    const timer = setTimeout(() => { void controller.refresh() }, 2500)
+    return () => clearTimeout(timer)
+  }, [state.items, controller])
+  useEffect(() => {
+    const query = new URLSearchParams(location.search)
+    const id = query.get('item')
+    let active = true
+    setLinkedItem(null)
+    setPreview(null)
+    setDownloadError('')
+    setTrashed(query.get('trash') === '1')
+    if (id) {
+      setKind('')
+      setSearch('')
+      setScope('all')
+      libraryPlatform.getLibraryItem(id).then(item => {
+        if (!active) return
+        setLinkedItem(item)
+        if (item.deletedAt) {
+          setTrashed(true)
+        } else if (item.availability === 'ready') {
+          setPreview(item)
+        }
+      }).catch(error => { if (active) setDownloadError(String(error)) })
+    }
+    return () => { active = false }
+  }, [navigation])
+
+  async function download(item: LibraryItem) {
+    setDownloading(item.id)
+    setDownloadError('')
+    try { await downloadLibraryFile(item.id, item.name) }
+    catch (error) { setDownloadError(String(error)) }
+    finally { setDownloading('') }
+  }
+  async function move(item: LibraryItem) {
+    await controller.setTrashed(item.id, !trashed)
+    if (!controller.getSnapshot().actionError && linkedItem?.id === item.id) setLinkedItem(null)
+  }
+  async function remove(item: LibraryItem) {
+    await controller.remove(item.id)
+    if (!controller.getSnapshot().actionError && linkedItem?.id === item.id) setLinkedItem(null)
+  }
+  // A Sources link must find its target even when the entry is outside the first cursor page.
+  const includeLinked = linkedItem && !!linkedItem.deletedAt === trashed
+    && !state.items.some(item => item.id === linkedItem.id) && !search && !kind && scope === 'all'
+  const visibleItems = includeLinked ? [linkedItem, ...state.items] : state.items
+  const filtered = search || kind || scope === 'session'
+
+  return (
+    <section className="library-page" aria-label="Library">
+      <div className="library-content">
+        <header className="library-header">
+          <div>
+            <div className="library-eyebrow"><Library size={16} />Your files</div>
+            <h1>Library</h1>
+            <p>Images, videos, and files from your conversations.</p>
+          </div>
+          <div className="library-header-actions">
+            <button type="button" aria-label="Refresh library" disabled={state.loading} onClick={() => { void controller.refresh() }}>
+              <RefreshCw size={17} />
+            </button>
+            {onClose && <button type="button" aria-label="Close library" onClick={onClose}><X size={18} /></button>}
+          </div>
+        </header>
+        <div className="library-toolbar">
+          <div className="library-filters" role="group" aria-label="File type">
+            {filters.map(([value, label]) => (
+              <button key={value} type="button" data-filter={value || 'all'} aria-pressed={kind === value} onClick={() => setKind(value)}>{label}</button>
+            ))}
+          </div>
+          <button type="button" className="library-trash-toggle" data-view={trashed ? 'active' : 'trash'} aria-pressed={trashed} onClick={() => setTrashed(value => !value)}>
+            {trashed ? <Library size={15} /> : <Trash2 size={15} />} {trashed ? 'Back to library' : 'Trash'}
+          </button>
+        </div>
+        <div className="library-search-row">
+          <label className="library-search">
+            <Search size={16} />
+            <input type="search" placeholder="Search filenames" aria-label="Search filenames" value={search} onChange={event => setSearch(event.target.value)} />
+          </label>
+          {chatId && (
+            <select aria-label="Conversation scope" value={scope} onChange={event => setScope(event.target.value)}>
+              <option value="all">All conversations</option><option value="session">Current conversation</option>
+            </select>
+          )}
+        </div>
+        {trashed && <p className="library-trash-note">Restore files to Library, or remove them from Mint to move them to system Trash on the computer running Mint.</p>}
+        {state.error && (
+          <div className="library-error" role="alert"><span>{state.error}</span><button type="button" onClick={() => { void controller.refresh() }}>Retry</button></div>
+        )}
+        {(state.actionError || downloadError) && <p className="library-action-error" role="alert">{state.actionError || downloadError}</p>}
+        {state.loading && !state.items.length ? <p className="library-empty" role="status">Loading library…</p> : !visibleItems.length && !state.error ? (
+          <div className="library-empty">
+            <Library size={30} />
+            <h2>{filtered ? 'No files match these filters' : trashed ? 'Trash is empty' : 'Your library starts here'}</h2>
+            <p>{trashed ? 'Files you move to Trash can be restored here.' : 'Send an image, video, or file in a conversation to keep it here.'}</p>
+          </div>
+        ) : null}
+        <div className={`library-items ${kind === 'image' || kind === 'video' ? 'is-grid' : ''}`}>
+          {visibleItems.map(item => (
+            <LibraryItemCard key={item.id} item={item} linked={linkedItem?.id === item.id} trashed={trashed}
+              actionPending={!!state.actionId} downloadPending={!!downloading}
+              onPreview={setPreview} onDownload={download} onMove={move} onRemove={remove} />
+          ))}
+        </div>
+        {state.nextCursor && (
+          <button type="button" className="library-load-more" disabled={state.loading} onClick={() => { void controller.loadMore() }}>
+            {state.loading ? 'Loading…' : 'Load more'}
+          </button>
+        )}
+      </div>
+      {preview && <LibraryPreview item={preview} onClose={closePreview} onOpenConversation={onOpenConversation} />}
+    </section>
+  )
+}

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

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Download, X } from 'lucide-react';
+import type { LibraryItem } from '../types';
+import { useLibraryFile } from '../library/useLibraryFile';
+export default function LibraryPreview({ item, onClose, onOpenConversation }: {
+  item: LibraryItem;
+  onClose: () => void;
+  onOpenConversation?: (id: string) => void;
+}) {
+  const [retry, setRetry] = useState(0);
+  const file = useLibraryFile(item.id, false, retry);
+  const [text, setText] = useState('');
+  const dialog = useRef<HTMLDivElement>(null);
+  const sourceMessage = item.message
+    .replace(/^\/chat\s+/, '')
+    .replace(/\[(?:Image|Video) #\d+\]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  const isText = item.kind === 'file' && /\.(txt|md|json|toml|ya?ml|rs|tsx?|jsx?|py|html?|css)$/i.test(item.name);
+  useEffect(() => { let active = true; setText(''); if (isText && file.blob)
+    file.blob.slice(0, 1024 * 1024).text().then(value => { if (active)
+      setText(value); }); return () => { active = false; }; }, [file.blob, isText]);
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    dialog.current?.querySelector<HTMLElement>('button')?.focus();
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+      }
+      if (event.key === 'Tab') {
+        const nodes = Array.from(dialog.current?.querySelectorAll<HTMLElement>('button:not([disabled]),a[href],video[controls],iframe,[tabindex="0"]') ?? []);
+        const first = nodes[0], last = nodes.at(-1);
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last?.focus();
+        }
+        else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => { document.body.style.overflow = overflow; document.removeEventListener('keydown', onKey); previous?.focus(); };
+  }, [onClose]);
+  return createPortal(<div className="library-preview-backdrop" onClick={e => { if (e.target === e.currentTarget)
+    onClose(); }}><div className="library-preview" ref={dialog} role="dialog" aria-modal="true" aria-labelledby="library-preview-title">
+  <header><h2 id="library-preview-title">{item.name}</h2><button type="button" onClick={onClose} aria-label="Close preview"><X size={18}/></button></header>
+  {sourceMessage && <section className="library-preview-source" aria-label="Source message"><span>Source message</span><p>{sourceMessage}</p></section>}
+  <div className="library-preview-body">
+   {file.error ? <div role="alert"><p>{file.error}</p><button type="button" onClick={() => setRetry(n => n + 1)}>Retry</button></div> : !file.url ? <p role="status">Loading file…</p> : item.kind === 'image' ? <img src={file.url} alt={item.name}/> : item.kind === 'video' ? <video src={file.url} controls autoPlay={false}/> : isText ? <pre tabIndex={0}>{text}{file.blob!.size > 1024 * 1024 ? '\n[Preview limited to the first 1 MiB. Download to read the entire file.]' : ''}</pre> : /\.pdf$/i.test(item.name) ? <iframe title={item.name} src={file.url} sandbox=""/> : <p>This file is ready to download. A preview is not available for this format.</p>}
+  </div>
+  <footer><span>{item.origin === 'generated' ? 'AI generated' : item.origin === 'legacy' ? 'Imported from Pictures' : 'Uploaded'} · {item.mimeType}</span><div>{[...new Set(item.references.map(r => r.chatId))].map(id => <button type="button" key={id} data-open-chat onClick={() => onOpenConversation?.(id)}>Open source chat</button>)}{file.url && <a href={file.url} download={item.name}><Download size={15}/>Download</a>}</div></footer>
+ </div></div>, document.body);
+}

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

@@ -1,3 +1,4 @@
+import SelectField from './SelectField'
 import React, { useState, useEffect } from 'react'
 import '../css/management-views.css'
 import { renderMcpSvgIcon, renderMcpHubSvgIcon } from '../constants/plugins'
@@ -305,7 +306,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
           </p>
         </div>
 
-        <div style={{ display: 'flex', gap: 8 }}>
+        <div className="mcp-management-actions">
           <button
             type="button"
             className="management-action-btn"
@@ -333,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"
@@ -356,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) => (
@@ -493,6 +503,15 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                     <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">
@@ -688,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>
+                        </SelectField>
                       </div>
                     </div>
 

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>
+})