@pheem49/mint 1.15.0 → 1.17.0

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

@@ -0,0 +1,283 @@
+import { useEffect, useState } from 'react'
+import { Workflow } from 'lucide-react'
+import { ChatCodeBlock } from '../chat/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'
+  const accent = document.documentElement.getAttribute('data-accent') || 'mint'
+  const mode = document.documentElement.getAttribute('data-accent-mode') || ''
+  return `${theme}::${accent}::${mode}::${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'
+
+let sharedThemeObserver: MutationObserver | null = null
+const themeSubscribers = new Set<() => void>()
+
+export function subscribeThemeChanges(listener: () => void): () => void {
+  themeSubscribers.add(listener)
+  if (!sharedThemeObserver && typeof MutationObserver !== 'undefined' && typeof document !== 'undefined' && document.documentElement) {
+    sharedThemeObserver = new MutationObserver(() => {
+      themeSubscribers.forEach((fn) => fn())
+    })
+    sharedThemeObserver.observe(document.documentElement, {
+      attributeFilter: ['data-theme', 'data-accent', 'data-accent-mode'],
+    })
+  }
+  return () => {
+    themeSubscribers.delete(listener)
+    if (themeSubscribers.size === 0 && sharedThemeObserver) {
+      sharedThemeObserver.disconnect()
+      sharedThemeObserver = null
+    }
+  }
+}
+
+export default function MermaidCard({ code }: { code: string }) {
+  const [status, setStatus] = useState<Status>('loading')
+  const [svg, setSvg] = useState<string>('')
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    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)
+    }
+
+    const unsubscribeTheme = subscribeThemeChanges(() => {
+      render()
+    })
+
+    return () => {
+      cancelled = true
+      if (debounceTimer) clearTimeout(debounceTimer)
+      unsubscribeTheme()
+      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: 'var(--bg-surface-soft)',
+        color: 'var(--text-primary)',
+        borderRadius: '12px',
+        padding: '16px 20px',
+        margin: '12px 0',
+        boxShadow: 'var(--shadow-md)',
+        border: '1px solid var(--border-subtle)',
+        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: 'var(--text-muted)' }} />
+        <span
+          style={{
+            fontSize: '11px',
+            fontWeight: 700,
+            letterSpacing: '0.8px',
+            color: 'var(--text-muted)',
+          }}
+        >
+          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(--interactive-fg)" 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 var(--border-default)',
+              borderTopColor: 'var(--accent)',
+              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>
+  )
+}

package/src/renderer/shared/components/cards/StockCard.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import { TrendingUp, TrendingDown } from 'lucide-react'
+
+export interface StockData {
+  symbol: string
+  name: string
+  price: number
+  change: number
+  changePercent: number
+  currency?: string
+  dayHigh?: number
+  dayLow?: number
+  marketCap?: number
+  volume?: number
+}
+
+export default function StockCard({ data }: { data: StockData }) {
+  const isPositive = data.change >= 0
+  const accentColor = isPositive ? 'var(--status-success, #10b981)' : 'var(--status-error, #ef4444)'
+
+  // Theme-aware color tokens
+  const t = {
+    cardBg: 'var(--bg-surface-soft)',
+    cardText: 'var(--text-primary)',
+    cardBorder: isPositive
+      ? 'color-mix(in srgb, var(--status-success, #10b981) 35%, var(--border-subtle))'
+      : 'color-mix(in srgb, var(--status-error, #ef4444) 35%, var(--border-subtle))',
+    cardShadow: 'var(--shadow-md)',
+    tagBg: 'var(--bg-surface-raised)',
+    tagColor: 'var(--text-secondary)',
+    subText: 'var(--text-muted)',
+    divider: 'var(--border-subtle)',
+    statBg: 'var(--bg-surface-raised)',
+    statBorder: 'var(--border-subtle)',
+    statLabel: 'var(--text-muted)',
+    statValue: 'var(--text-primary)',
+  }
+
+  const formattedPrice = data.price.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
+
+  const formattedChange = (data.change >= 0 ? '+' : '') + data.change.toFixed(2)
+  const formattedPercent = (data.changePercent >= 0 ? '+' : '') + data.changePercent.toFixed(2) + '%'
+  const currency = data.currency || 'USD'
+  const currencySymbol = currency === 'USD' ? '$' : currency === 'THB' ? '฿' : `${currency} `
+
+  const formatLargeNum = (num?: number) => {
+    if (!num || num === 0) return 'N/A'
+    if (num >= 1e12) return (num / 1e12).toFixed(2) + 'T'
+    if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B'
+    if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M'
+    if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K'
+    return num.toLocaleString()
+  }
+
+  return (
+    <div
+      style={{
+        background: t.cardBg,
+        color: t.cardText,
+        borderRadius: '12px',
+        padding: '16px 20px',
+        margin: '12px 0',
+        boxShadow: t.cardShadow,
+        border: `1px solid ${t.cardBorder}`,
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+      }}
+    >
+      {/* Header */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <h3 style={{ margin: 0, fontSize: '20px', fontWeight: 800, letterSpacing: '-0.3px', color: t.cardText }}>
+              {data.symbol}
+            </h3>
+            <span
+              style={{
+                fontSize: '11px',
+                fontWeight: 700,
+                padding: '2px 6px',
+                borderRadius: '4px',
+                background: t.tagBg,
+                color: t.tagColor,
+                textTransform: 'none',
+              }}
+            >
+              {currency}
+            </span>
+          </div>
+          <p style={{ margin: '2px 0 0', fontSize: '13px', color: t.subText, fontWeight: 500 }}>{data.name}</p>
+        </div>
+
+        {/* Change Badge */}
+        <div
+          style={{
+            background: isPositive ? 'rgba(16, 185, 129, 0.12)' : 'rgba(239, 68, 68, 0.12)',
+            border: `1px solid ${isPositive ? 'rgba(16, 185, 129, 0.3)' : 'rgba(239, 68, 68, 0.3)'}`,
+            padding: '4px 10px',
+            borderRadius: '20px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            color: accentColor,
+            fontWeight: 700,
+            fontSize: '13px',
+          }}
+        >
+          {isPositive ? <TrendingUp size={14} strokeWidth={2.5} /> : <TrendingDown size={14} strokeWidth={2.5} />}
+          <span>{formattedChange} ({formattedPercent})</span>
+        </div>
+      </div>
+
+      {/* Main Price */}
+      <div style={{ marginBottom: '14px', borderBottom: `1px solid ${t.divider}`, paddingBottom: '12px' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
+          <span style={{ fontSize: '36px', fontWeight: 800, letterSpacing: '-1px', color: t.cardText }}>
+            {currencySymbol}{formattedPrice}
+          </span>
+        </div>
+      </div>
+
+      {/* Stats Grid */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '8px' }}>
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Day high</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>
+            {data.dayHigh ? `${currencySymbol}${data.dayHigh.toFixed(2)}` : 'N/A'}
+          </p>
+        </div>
+
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Day low</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>
+            {data.dayLow ? `${currencySymbol}${data.dayLow.toFixed(2)}` : 'N/A'}
+          </p>
+        </div>
+
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Market cap</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>{formatLargeNum(data.marketCap)}</p>
+        </div>
+
+        <div style={{ background: t.statBg, borderRadius: '8px', padding: '8px 10px', border: `1px solid ${t.statBorder}` }}>
+          <p style={{ margin: 0, fontSize: '10px', color: t.statLabel, textTransform: 'none' }}>Volume</p>
+          <p style={{ margin: '2px 0 0', fontSize: '12px', fontWeight: 700, color: t.statValue }}>{formatLargeNum(data.volume)}</p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/renderer/shared/components/cards/ToolResultCards.tsx

@@ -0,0 +1,86 @@
+import React, { lazy, memo, Suspense, useMemo } from 'react'
+import type { AgentProgress } from '../../types'
+
+const WeatherCard = lazy(() => import('./WeatherCard'))
+const StockCard = lazy(() => import('./StockCard'))
+const CalculationCard = lazy(() => import('./CalculationCard'))
+const ImageSearchCard = lazy(() => import('./ImageSearchCard'))
+const ImageGenCard = lazy(() => import('./ImageGenCard'))
+
+export interface ToolResultCardsProps {
+  progress?: AgentProgress[]
+  aiText?: string
+}
+
+const WEATHER_RE = /```weather_json\s*([\s\S]*?)\s*```/
+const STOCK_RE = /```stock_json\s*([\s\S]*?)\s*```/
+const CALC_RE = /```calculation_json\s*([\s\S]*?)\s*```/
+const IMAGE_SEARCH_RE = /```image_search_json\s*([\s\S]*?)\s*```/
+const IMAGE_GEN_RE = /```image_gen_json\s*([\s\S]*?)\s*```/
+const IMAGE_GEN_ACTIONS = new Set(['generate_image', 'image_studio.generate', 'image_generate'])
+
+function parseMatchedJson(result: unknown, regex: RegExp): any | null {
+  const match = typeof result === 'string' && result.match(regex)
+  if (match && match[1]) {
+    try {
+      return JSON.parse(match[1])
+    } catch {}
+  }
+  return null
+}
+
+export function extractToolCardPayloads(progress?: AgentProgress[], aiText?: string) {
+  const skipWeather = Boolean(aiText && (aiText.includes('```weather_json') || aiText.includes('```weather-json')))
+  const skipStock = Boolean(aiText && (aiText.includes('```stock_json') || aiText.includes('```stock-json')))
+  const skipCalc = Boolean(aiText && (aiText.includes('```calculation_json') || aiText.includes('```calculation-json')))
+  const skipImageSearch = Boolean(aiText && (aiText.includes('```image_search_json') || aiText.includes('```image-search-json')))
+  const skipImageGen = Boolean(aiText && (aiText.includes('```image_gen_json') || aiText.includes('```image-gen-json')))
+
+  let weatherData: any = null
+  let stockData: any = null
+  let calcData: any = null
+  let imageSearchData: any = null
+  let imageGenData: any = null
+
+  for (const event of progress || []) {
+    if (event.type !== 'ToolEnd') continue
+    const actionName = event.data?.action || (event.data as any)?.name || ''
+    const res = event.data?.result || (event.data as any)?.output || ''
+    if (!skipWeather && !weatherData && actionName === 'weather') {
+      weatherData = parseMatchedJson(res, WEATHER_RE)
+    } else if (!skipStock && !stockData && actionName === 'stock') {
+      stockData = parseMatchedJson(res, STOCK_RE)
+    } else if (!skipCalc && !calcData && actionName === 'calculation') {
+      calcData = parseMatchedJson(res, CALC_RE)
+    } else if (!skipImageSearch && !imageSearchData && actionName === 'image_search') {
+      imageSearchData = parseMatchedJson(res, IMAGE_SEARCH_RE)
+    } else if (!skipImageGen && !imageGenData && IMAGE_GEN_ACTIONS.has(actionName)) {
+      imageGenData = parseMatchedJson(res, IMAGE_GEN_RE)
+    }
+  }
+
+  return { weatherData, stockData, calcData, imageSearchData, imageGenData }
+}
+
+export const ToolResultCards = memo(function ToolResultCards({ progress, aiText }: ToolResultCardsProps) {
+  const { weatherData, stockData, calcData, imageSearchData, imageGenData } = useMemo(
+    () => extractToolCardPayloads(progress, aiText),
+    [progress, aiText],
+  )
+
+  if (!weatherData && !stockData && !calcData && !imageSearchData && !imageGenData) {
+    return null
+  }
+
+  return (
+    <Suspense fallback={null}>
+      {weatherData && <WeatherCard data={weatherData} />}
+      {stockData && <StockCard data={stockData} />}
+      {calcData && <CalculationCard data={calcData} />}
+      {imageSearchData && <ImageSearchCard data={imageSearchData} />}
+      {imageGenData && <ImageGenCard data={imageGenData} />}
+    </Suspense>
+  )
+})
+
+export default ToolResultCards