@pheem49/mint 1.14.0 → 1.15.0

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

@@ -4,9 +4,11 @@ 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 +196,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 +207,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 +239,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,7 +298,7 @@ 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.
@@ -375,7 +377,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,7 +490,7 @@ 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>
                     {srvConfig.url ? (
@@ -506,7 +508,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 +566,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 +638,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 +657,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 +668,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 +676,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"
@@ -697,8 +699,8 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                           style={{ cursor: 'pointer' }}
                         >
                           <option value="none">None (Public)</option>
-                          <option value="bearer">Bearer Token</option>
-                          <option value="custom">Custom Headers (JSON)</option>
+                          <option value="bearer">Bearer token</option>
+                          <option value="custom">Custom headers (JSON)</option>
                         </select>
                       </div>
                     </div>
@@ -721,7 +723,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 +766,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 +780,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
                           </>
                         ) : (
                           <>
-                            <Zap size={13} /> Test Connection
+                            <Zap size={13} /> Test connection
                           </>
                         )}
                       </button>
@@ -819,7 +821,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 +867,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 +912,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/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',
             }}