@pheem49/mint 1.15.0 → 1.17.0

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

@@ -1,184 +0,0 @@
-import React, { useState } from 'react'
-import '../css/management-views.css'
-
-/**
- * Per-server view of `config.allowedMcpTools[serverName]` — the list the agent's
- * `mcp_tool` gate checks. Mirrors `mint_core::mcp::allow_tool_in` semantics: a
- * `"*"` entry means "any tool", adding a specific tool when `*` is present is a
- * no-op, and an empty list means the agent cannot call the server at all.
- *
- * Styled with the shared `management-*` classes so it matches the MCP view.
- */
-export interface McpToolAllowlistProps {
-  serverName: string
-  config: any
-  updateField: (field: string, value: any) => void
-  /** Optional — enables the "Discover tools" button. */
-  listServerTools?: (name: string) => Promise<string[]>
-}
-
-function currentTools(config: any, server: string): string[] {
-  const value = config?.allowedMcpTools?.[server]
-  return Array.isArray(value) ? value.filter((t: unknown): t is string => typeof t === 'string') : []
-}
-
-export const McpToolAllowlist: React.FC<McpToolAllowlistProps> = ({
-  serverName,
-  config,
-  updateField,
-  listServerTools,
-}) => {
-  const tools = currentTools(config, serverName)
-  const wildcard = tools.includes('*')
-  const [draft, setDraft] = useState('')
-  const [discovered, setDiscovered] = useState<string[] | null>(null)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const write = (next: string[]) => {
-    const all = { ...(config?.allowedMcpTools || {}) }
-    if (next.length === 0) delete all[serverName]
-    else all[serverName] = next
-    updateField('allowedMcpTools', all)
-  }
-
-  const allow = (raw: string) => {
-    const tool = raw.trim()
-    if (!tool) return
-    if (tool === '*') return write(['*'])
-    if (wildcard || tools.includes(tool)) return
-    write([...tools, tool])
-  }
-  const disallow = (tool: string) => write(tools.filter((t) => t !== tool))
-  const toggleWildcard = () => (wildcard ? write([]) : write(['*']))
-
-  const discover = async () => {
-    if (!listServerTools) return
-    setBusy(true)
-    setError(null)
-    try {
-      setDiscovered(await listServerTools(serverName))
-    } catch (e: any) {
-      setError(e?.message || 'Could not reach the server')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  return (
-    <div style={{ marginTop: 16 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
-        <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' }}
-        >
-          <input
-            type="checkbox"
-            className="mint-custom-checkbox"
-            checked={wildcard}
-            onChange={toggleWildcard}
-          />
-          Allow all (*)
-        </label>
-      </div>
-
-      {wildcard ? (
-        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', margin: '4px 0' }}>
-          The agent may call every tool on <code>{serverName}</code>.
-        </p>
-      ) : tools.length === 0 ? (
-        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', margin: '4px 0' }}>
-          No tools allowed yet — the agent can’t call this server.
-        </p>
-      ) : (
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
-          {tools.map((t) => (
-            <span
-              key={t}
-              className="management-tag"
-              style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
-            >
-              {t}
-              <button
-                type="button"
-                onClick={() => disallow(t)}
-                aria-label={`Disallow ${t}`}
-                style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', opacity: 0.7, padding: 0, lineHeight: 1 }}
-              >
-                ✕
-              </button>
-            </span>
-          ))}
-        </div>
-      )}
-
-      {!wildcard && (
-        <div style={{ display: 'flex', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
-          <input
-            type="text"
-            className="management-input-field"
-            placeholder="tool name"
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault()
-                allow(draft)
-                setDraft('')
-              }
-            }}
-            style={{ flex: '1 1 160px', minWidth: 140 }}
-          />
-          <button
-            type="button"
-            className="management-action-btn"
-            onClick={() => {
-              allow(draft)
-              setDraft('')
-            }}
-          >
-            Add
-          </button>
-          {listServerTools && (
-            <button type="button" className="management-action-btn" onClick={discover} disabled={busy}>
-              {busy ? 'Discovering…' : 'Discover tools'}
-            </button>
-          )}
-        </div>
-      )}
-
-      {error && (
-        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', color: '#f87171', margin: '4px 0' }}>
-          {error}
-        </p>
-      )}
-
-      {!wildcard && discovered && (
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
-          {discovered.length === 0 && (
-            <span className="management-plugin-desc">Server reported no tools.</span>
-          )}
-          {discovered.map((t) => {
-            const on = tools.includes(t)
-            return (
-              <button
-                key={t}
-                type="button"
-                className="management-action-btn"
-                onClick={() => (on ? disallow(t) : allow(t))}
-                style={{ opacity: on ? 1 : 0.65 }}
-              >
-                {on ? '✓ ' : '+ '}
-                {t}
-              </button>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default McpToolAllowlist

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

@@ -1,267 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Workflow } from 'lucide-react'
-import { ChatCodeBlock } from './ChatCodeBlock'
-
-let diagramCounter = 0
-
-// `mermaid.initialize()` + `mermaid.render()` mutate shared state on the single
-// imported `mermaid` module. When several MermaidCards mount at once (e.g. opening
-// a chat whose history has multiple diagrams), their render() calls interleave and
-// clobber each other — one card's initialize() can land mid-flight through
-// another's render(), so the loser silently resolves with an empty/corrupted SVG
-// instead of throwing. Serialize every card's render through one queue so only one
-// mermaid.initialize()+render() pair is ever in flight at a time.
-let renderQueue: Promise<unknown> = Promise.resolve()
-function enqueueMermaidRender<T>(task: () => Promise<T>): Promise<T> {
-  const run = renderQueue.then(task, task)
-  renderQueue = run.then(
-    () => undefined,
-    () => undefined,
-  )
-  return run
-}
-
-// Rendered SVGs are cached by (theme, source) so revisiting a chat — switching
-// away and back, reopening old history — reuses the previous result instead of
-// re-running mermaid's layout pass from scratch every time the card remounts.
-// Keyed by theme too, since the same source renders different colors per theme.
-const svgCache = new Map<string, string>()
-function cacheKey(code: string): string {
-  const theme = document.documentElement.getAttribute('data-theme') || 'dark'
-  return `${theme}::${code}`
-}
-
-function buildMermaidTheme(): Record<string, string> {
-  const cs = getComputedStyle(document.documentElement)
-  const v = (name: string, fallback: string) => cs.getPropertyValue(name).trim() || fallback
-  return {
-    background: v('--panel-bg', '#1e1e20'),
-    primaryColor: v('--accent', '#10b981'),
-    primaryTextColor: v('--text-main', '#e8e8ea'),
-    primaryBorderColor: v('--border', 'rgba(255,255,255,0.15)'),
-    lineColor: v('--text-muted', '#8f8f94'),
-    textColor: v('--text-main', '#e8e8ea'),
-    secondaryColor: v('--panel-raised', '#2a2a2d'),
-    tertiaryColor: v('--panel-soft', '#242426'),
-  }
-}
-
-// When a parse fails, mermaid still leaves its throwaway render/measurement
-// containers attached to <body> — the `d`-prefixed sizing div and, on older
-// minors that ignore `suppressErrorRendering`, the "Syntax error" bomb graphic.
-// They carry no styling of ours, so they escape the card and show up as a stray
-// white strip pinned to the page edge. Sweep any such node that mermaid parked
-// directly on <body>; a successfully rendered diagram lives inside a card div,
-// so the parent check leaves it alone.
-function cleanupOrphanMermaidNodes(): void {
-  document
-    .querySelectorAll('[id^="dmermaid-diagram-"], [id^="mermaid-diagram-"]')
-    .forEach((el) => {
-      if (el.parentElement === document.body) el.remove()
-    })
-}
-
-type Status = 'loading' | 'ready' | 'error'
-
-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
-    let observer: MutationObserver | null = null
-    let debounceTimer: ReturnType<typeof setTimeout> | null = null
-
-    async function render() {
-      const cached = svgCache.get(cacheKey(code))
-      if (cached !== undefined) {
-        // Already rendered this exact source under the current theme — reuse it
-        // instead of re-running mermaid, which also sidesteps a real bug: calling
-        // mermaid.render() again with a DOM id that's already in use elsewhere on
-        // the page (the SVG we rendered last time) makes mermaid tear that live
-        // element down as part of preparing its own render target.
-        setSvg(cached)
-        setStatus('ready')
-        return
-      }
-      // Let the browser paint the loading spinner before the heavy, synchronous
-      // mermaid layout computation (cose-bilkent for mindmaps especially) blocks
-      // the main thread — otherwise the frozen tab can flash unpainted regions
-      // before the spinner state ever reaches the screen.
-      await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
-      if (cancelled) return
-      try {
-        const result = await enqueueMermaidRender(async () => {
-          const mermaid = (await import('mermaid')).default
-          mermaid.initialize({
-            startOnLoad: false,
-            securityLevel: 'strict',
-            theme: 'base',
-            themeVariables: buildMermaidTheme(),
-            // Don't let mermaid inject its own "Syntax error" bomb graphic into
-            // the DOM on a parse failure — we render our own fallback (the raw
-            // fenced source) from the `error` status below.
-            suppressErrorRendering: true,
-          })
-          // Validate before rendering. `parse` with `suppressErrors` resolves
-          // falsy instead of throwing/DOM-injecting on bad syntax — models
-          // (especially smaller local ones) routinely emit invalid mermaid, and
-          // this keeps that off the main render path entirely.
-          const parsed = await mermaid.parse(code, { suppressErrors: true })
-          if (!parsed) throw new Error('Invalid mermaid syntax')
-          // A fresh id every call, not one fixed per component instance — mermaid
-          // treats the id as a DOM element id it may look up and reuse, so reusing
-          // the same id across repeat renders risks it colliding with (and tearing
-          // down) the SVG from a previous successful render still on screen.
-          return mermaid.render(`mermaid-diagram-${++diagramCounter}`, code)
-        })
-        if (cancelled) return
-        svgCache.set(cacheKey(code), result.svg)
-        setSvg(result.svg)
-        setStatus('ready')
-      } catch (err) {
-        console.error('Mermaid render failed:', err)
-        cleanupOrphanMermaidNodes()
-        if (!cancelled) setStatus('error')
-      }
-    }
-
-    const cached = svgCache.get(cacheKey(code))
-    if (cached !== undefined) {
-      setSvg(cached)
-      setStatus('ready')
-    } else {
-      // While the AI's response is still streaming in, `code` (the fenced block's
-      // text) changes on nearly every token — each change re-runs this effect, and
-      // mermaid's layout pass (cose-bilkent for mindmaps) is CPU-heavy, so firing it
-      // on every partial, usually syntactically-invalid chunk keeps the main thread
-      // busy for the entire streaming duration instead of once. Debounce so we only
-      // attempt a real render after the fence has stopped changing for a moment.
-      setStatus('loading')
-      debounceTimer = setTimeout(render, 400)
-    }
-
-    observer = new MutationObserver(() => {
-      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
-      render()
-    })
-    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
-
-    return () => {
-      cancelled = true
-      if (debounceTimer) clearTimeout(debounceTimer)
-      observer?.disconnect()
-      cleanupOrphanMermaidNodes()
-    }
-  }, [code])
-
-  if (status === 'error') {
-    return <ChatCodeBlock code={code} language="mermaid" />
-  }
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(code)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy diagram source:', err)
-    }
-  }
-
-  const handleDownload = () => {
-    try {
-      const blob = new Blob([svg], { type: 'image/svg+xml' })
-      const url = URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = url
-      link.download = 'diagram.svg'
-      link.click()
-      URL.revokeObjectURL(url)
-    } catch (err) {
-      console.error('Failed to download diagram:', err)
-    }
-  }
-
-  return (
-    <div
-      style={{
-        background: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)',
-        backdropFilter: 'blur(16px)',
-        WebkitBackdropFilter: 'blur(16px)',
-        color: isDark ? '#f8fafc' : '#0f172a',
-        borderRadius: '12px',
-        padding: '16px 20px',
-        margin: '12px 0',
-        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, color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b' }} />
-        <span
-          style={{
-            fontSize: '11px',
-            fontWeight: 700,
-            letterSpacing: '0.8px',
-            color: isDark ? 'rgba(255,255,255,0.6)' : '#64748b',
-          }}
-        >
-          DIAGRAM
-        </span>
-        {status === 'ready' && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginLeft: 'auto' }}>
-            <button type="button" onClick={handleDownload} title="Download SVG" className="chat-code-action-btn">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                <polyline points="7 10 12 15 17 10" />
-                <line x1="12" y1="15" x2="12" y2="3" />
-              </svg>
-            </button>
-            <button type="button" onClick={handleCopy} title="Copy diagram source" className="chat-code-action-btn">
-              {copied ? (
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
-              ) : (
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                </svg>
-              )}
-            </button>
-          </div>
-        )}
-      </div>
-
-      {status === 'loading' ? (
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 0' }}>
-          <div
-            style={{
-              width: '20px',
-              height: '20px',
-              borderRadius: '50%',
-              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',
-            }}
-          />
-          <style>{'@keyframes mermaid-card-spin { to { transform: rotate(360deg) } }'}</style>
-        </div>
-      ) : (
-        <div
-          style={{ overflowX: 'auto', display: 'flex', justifyContent: 'center', minWidth: 0 }}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: svg }}
-        />
-      )}
-    </div>
-  )
-}