@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/utils/markdown.tsx

@@ -3,27 +3,31 @@
  * Markdown parsing and rendering for message bubbles, built on react-markdown + remark-gfm.
  * Shared by both Desktop and Web ChatPanel — do NOT duplicate this.
  */
-import { Children, cloneElement, Fragment, isValidElement, type CSSProperties, type ReactElement, type ReactNode } from 'react'
+import { Children, cloneElement, Fragment, isValidElement, lazy, memo, Suspense, useEffect, useState, type CSSProperties, type ReactElement, type ReactNode } from 'react'
 import ReactMarkdown, { type Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { ChatCodeBlock } from '../components/ChatCodeBlock'
-import WeatherCard from '../components/WeatherCard'
-import StockCard from '../components/StockCard'
-import CalculationCard from '../components/CalculationCard'
-import ImageSearchCard from '../components/ImageSearchCard'
-import ImageGenCard from '../components/ImageGenCard'
-import MermaidCard from '../components/MermaidCard'
-import UiGridCard from '../components/UiGridCard'
+import { ChatCodeBlock } from '../components/chat/ChatCodeBlock'
 import { parseCardJsonSafely } from './cardJson'
-import UiFeatureCard from '../components/UiFeatureCard'
-import UiMockupWidget from '../components/UiMockupWidget'
 import type { WebSearchSource } from './agentActivity'
+
+const WeatherCard = lazy(() => import('../components/cards/WeatherCard'))
+const StockCard = lazy(() => import('../components/cards/StockCard'))
+const CalculationCard = lazy(() => import('../components/cards/CalculationCard'))
+const ImageSearchCard = lazy(() => import('../components/cards/ImageSearchCard'))
+const ImageGenCard = lazy(() => import('../components/cards/ImageGenCard'))
+const MermaidCard = lazy(() => import('../components/cards/MermaidCard'))
+const UiGridCard = lazy(() => import('../components/cards/UiGridCard'))
+const UiFeatureCard = lazy(() => import('../components/cards/UiFeatureCard'))
+const UiMockupWidget = lazy(() => import('../components/cards/UiMockupWidget'))
+import { ReleaseNotesCard } from '../components/cards/ReleaseNotesCard'
+import { materialFileIcon, getExtension } from './fileIcons'
 import {
   Info,
   Lightbulb,
   AlertCircle,
   AlertTriangle,
   ShieldAlert,
+  ImageOff,
   type LucideIcon,
 } from 'lucide-react'
 
@@ -50,9 +54,31 @@ export function unwrapBraveImageUrl(url: string): string {
   return url
 }
 
+/**
+ * Normalizes Twitter profile banner URLs missing dimensions (e.g. /1366430884698546176/1684330404)
+ * by appending /1500x500 so Twitter CDN returns the full image instead of 404 Not Found.
+ */
+export function normalizeTwitterImageUrl(url: string): string {
+  if (!url || !url.includes('pbs.twimg.com/profile_banners/')) return url
+  return url.replace(/^(https?:\/\/pbs\.twimg\.com\/profile_banners\/\d+\/\d+)\/?$/, '$1/1500x500')
+}
+
+/**
+ * Resolves an external image URL to the local backend proxy endpoint (/api/proxy-image?url=...).
+ * When running in the web browser (e.g. localhost:9000), routes to http://localhost:3000/api/proxy-image.
+ */
+export function resolveApiProxyUrl(targetUrl: string): string {
+  if (!targetUrl) return ''
+  const origin = typeof window !== 'undefined' && window.location.port === '9000'
+    ? 'http://localhost:3000'
+    : (typeof window !== 'undefined' ? window.location.origin : '')
+  return `${origin}/api/proxy-image?url=${encodeURIComponent(targetUrl)}`
+}
+
 export const resolveMediaUrl = (url: string): string => {
   if (!url) return ''
-  const unwrapped = unwrapBraveImageUrl(url)
+  let unwrapped = unwrapBraveImageUrl(url)
+  unwrapped = normalizeTwitterImageUrl(unwrapped)
   if (unwrapped.startsWith('data:') || unwrapped.startsWith('http://') || unwrapped.startsWith('https://')) {
     return unwrapped
   }
@@ -70,26 +96,38 @@ export const isTableLine = (line: string): boolean => {
   return trimmed.startsWith('|') && trimmed.endsWith('|') && trimmed.length > 1
 }
 
+/**
+ * Auto-heals markdown image tags where the model omitted the closing parenthesis ')' at the end of a line.
+ * Matches `![alt](url` at line end and appends `)`.
+ */
+export function autoHealMarkdownImages(text: string): string {
+  if (!text || typeof text !== 'string') return ''
+  return text.replace(/(^|[^\\])(!\[[^\]\r\n]*\]\((?:https?:\/\/|\/api\/|data:)[^\s\)]+)[ \t]*$/gm, '$1$2)')
+}
+
 export function readableAssistantText(text: string): string {
   if (typeof text !== 'string') return ''
   const trimmed = text.trim()
-  if (!trimmed.startsWith('{')) return sanitizeLatex(text)
+  if (!trimmed.startsWith('{')) return autoHealMarkdownImages(sanitizeLatex(text))
   try {
     const value = JSON.parse(trimmed)
     if (value?.action === 'finish' && typeof value?.input?.summary === 'string' && value.input.summary.trim()) {
-      return sanitizeLatex(value.input.summary)
+      return autoHealMarkdownImages(sanitizeLatex(value.input.summary))
     }
     if (typeof value?.finish?.summary === 'string' && value.finish.summary.trim()) {
-      return sanitizeLatex(value.finish.summary)
+      return autoHealMarkdownImages(sanitizeLatex(value.finish.summary))
     }
   } catch {
-    return sanitizeLatex(text)
+    return autoHealMarkdownImages(sanitizeLatex(text))
   }
-  return sanitizeLatex(text)
+  return autoHealMarkdownImages(sanitizeLatex(text))
 }
 
 /** Replace common LaTeX math symbols with their Unicode equivalents */
-function sanitizeLatex(text: string): string {
+export function sanitizeLatex(text: string): string {
+  if (!text.includes('\\') && !text.includes('$') && !text.includes('arrow')) {
+    return text
+  }
   return text
     // arrows
     .replace(/\$\\rightarrow\$|\\\(\\rightarrow\\\)|\\rightarrow|\bightarrow\b/g, '→')
@@ -179,6 +217,47 @@ function highlightMentions(node: ReactNode, keyPrefix = 'm'): ReactNode {
     return parts.map((part, i) => {
       if (i % 2 === 1) {
         if (part.startsWith('@')) {
+          const rawName = part.slice(1)
+          const ext = getExtension(rawName)
+          if (ext) {
+            const iconUrl = materialFileIcon(rawName, ext)
+            return (
+              <span
+                key={`${keyPrefix}-${i}`}
+                className="chat-mention chat-file-mention"
+                title={rawName}
+              >
+                {iconUrl ? (
+                  <img
+                    src={iconUrl}
+                    alt=""
+                    width="13"
+                    height="13"
+                    style={{ width: 13, height: 13, flexShrink: 0, objectFit: 'contain' }}
+                    aria-hidden="true"
+                    draggable={false}
+                  />
+                ) : (
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{ flexShrink: 0 }}
+                    aria-hidden="true"
+                  >
+                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                    <polyline points="14 2 14 8 20 8" />
+                  </svg>
+                )}
+                <span>{rawName}</span>
+              </span>
+            )
+          }
           return (
             <span key={`${keyPrefix}-${i}`} className="chat-mention">
               {part}
@@ -223,18 +302,20 @@ function findCodeHastNode(preNode: unknown): { properties?: { className?: unknow
 /** Clones each `<li>` child with `ordered`/`index` props so `li` can render a bullet or a number without shared state. */
 function tagListItems(children: ReactNode, opts: { ordered: boolean; start?: number }): ReactNode {
   // `Children.toArray` can include stray whitespace text nodes between <li> siblings (from
-  // loose-list formatting) — those must not consume a number, so index only real elements.
+  // loose-list formatting) — filter those out so they don't produce extra blank lines in pre-wrap.
   let n = 0
-  return Children.toArray(children).map((child) => {
-    if (!isValidElement(child)) return child
-    const index = (opts.start ?? 1) + n
-    n += 1
-    return cloneElement(child as ReactElement<{ ordered?: boolean; index?: number }>, {
-      key: child.key ?? index,
-      ordered: opts.ordered,
-      index,
+  return Children.toArray(children)
+    .filter((child) => isValidElement(child) || (typeof child === 'string' && child.trim() !== ''))
+    .map((child) => {
+      if (!isValidElement(child)) return child
+      const index = (opts.start ?? 1) + n
+      n += 1
+      return cloneElement(child as ReactElement<{ ordered?: boolean; index?: number }>, {
+        key: child.key ?? index,
+        ordered: opts.ordered,
+        index,
+      })
     })
-  })
 }
 
 /** Strips leading/trailing whitespace-only text-node children (the same stray "\n" nodes
@@ -265,7 +346,7 @@ function renderJsonCard(
 ): ReactNode {
   const parsed = parseJsonSafely(codeText)
   return parsed
-    ? render(parsed)
+    ? <Suspense fallback={null}>{render(parsed)}</Suspense>
     : <ChatCodeBlock code={codeText} language={lang} />
 }
 
@@ -287,7 +368,7 @@ function renderCodeCard(lang: string, codeText: string): ReactNode {
     case 'image-gen-json':
       return renderJsonCard(codeText, lang, (data) => <ImageGenCard data={data} />)
     case 'mermaid':
-      return <MermaidCard code={codeText} />
+      return <Suspense fallback={null}><MermaidCard code={codeText} /></Suspense>
     case 'ui_grid':
     case 'ui-grid':
     case 'ui_grid_json':
@@ -297,7 +378,7 @@ function renderCodeCard(lang: string, codeText: string): ReactNode {
         clean = clean.replace(/^ui[-_]grid(?:[-_]json)?\s*/i, '')
       }
       const parsed = parseJsonSafely(clean)
-      if (parsed) return <UiGridCard data={parsed} />
+      if (parsed) return <Suspense fallback={null}><UiGridCard data={parsed} /></Suspense>
       return <ChatCodeBlock code={codeText} language={lang} />
     }
     case 'ui_card':
@@ -311,7 +392,7 @@ function renderCodeCard(lang: string, codeText: string): ReactNode {
         clean = clean.replace(/^ui[-_](?:card|feature)(?:[-_]json)?\s*/i, '')
       }
       const parsed = parseJsonSafely(clean)
-      if (parsed) return <UiFeatureCard data={parsed} />
+      if (parsed) return <Suspense fallback={null}><UiFeatureCard data={parsed} /></Suspense>
       return <ChatCodeBlock code={codeText} language={lang} />
     }
     case 'ui_mockup':
@@ -323,7 +404,7 @@ function renderCodeCard(lang: string, codeText: string): ReactNode {
         clean = clean.replace(/^ui[-_]mockup(?:[-_]json)?\s*/i, '')
       }
       const parsed = parseJsonSafely(clean)
-      if (parsed) return <UiMockupWidget data={parsed} />
+      if (parsed) return <Suspense fallback={null}><UiMockupWidget data={parsed} /></Suspense>
       return <ChatCodeBlock code={codeText} language={lang} />
     }
     default:
@@ -373,7 +454,7 @@ function renderAlertBox(type: string, children: ReactNode): ReactNode {
       style={{
         margin: '14px 0',
         padding: '12px 16px',
-        borderRadius: '10px',
+        borderRadius: 'var(--radius-lg, 14px)',
         borderLeft: `4px solid ${config.border}`,
         borderTop: `1px solid ${config.borderSubtle}`,
         borderRight: `1px solid ${config.borderSubtle}`,
@@ -406,32 +487,110 @@ function renderAlertBox(type: string, children: ReactNode): ReactNode {
   )
 }
 
-function renderMessageImage(src: string | undefined, alt: string | undefined, sourceUrl?: string): ReactNode {
-  const url = resolveMediaUrl(String(src || ''))
+export function ChatMediaImage({
+  src,
+  alt,
+  sourceUrl,
+  initialError,
+  initialStage,
+}: {
+  src: string | undefined
+  alt: string | undefined
+  sourceUrl?: string
+  initialError?: boolean
+  initialStage?: 'direct' | 'proxy' | 'failed'
+}): ReactNode {
+  const [stage, setStage] = useState<'direct' | 'proxy' | 'failed'>(
+    initialStage || (initialError ? 'failed' : 'direct')
+  )
+  const directUrl = resolveMediaUrl(String(src || ''))
   const label = alt || 'Generated Image'
-  const isExternal = /^https?:\/\//.test(url)
+  const isExternal = /^https?:\/\//.test(directUrl)
+  const pageUrl = sourceUrl && /^https?:\/\//.test(sourceUrl) ? sourceUrl : directUrl
+
+  useEffect(() => {
+    setStage(initialStage || (initialError ? 'failed' : 'direct'))
+  }, [src, initialError, initialStage])
+
+  if (stage === 'failed') {
+    return (
+      <div
+        className="chat-media-card chat-media-card--failed"
+        style={{
+          margin: '6px 0 10px',
+          borderRadius: 'var(--radius-lg, 14px)',
+          padding: '10px 14px',
+          border: '1px solid var(--border, rgba(255,255,255,0.12))',
+          background: 'var(--panel-bg, #141416)',
+          maxWidth: '420px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-muted, #94a3b8)', fontSize: '0.82rem' }}>
+          <ImageOff size={16} style={{ flexShrink: 0, color: 'var(--text-muted, #94a3b8)' }} />
+          <div style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <span style={{ fontWeight: 500 }}>{label !== 'Generated Image' ? `${label}: ` : ''}</span>
+            <span>Image failed to load</span>
+          </div>
+          <a
+            href={pageUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="chat-link"
+            style={{
+              flexShrink: 0,
+              fontSize: '0.78rem',
+              padding: '3px 8px',
+              borderRadius: 'var(--radius-xs, 6px)',
+              background: 'var(--bg-surface-soft, rgba(255,255,255,0.06))',
+              border: '1px solid var(--border, rgba(255,255,255,0.12))',
+              color: 'var(--interactive-fg-hover, #38bdf8)',
+              textDecoration: 'none',
+            }}
+          >
+            Open link
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  const handleImageError = () => {
+    if (isExternal && stage === 'direct') {
+      // First attempt failed (likely ad-blocker or CORS issue): retry via local backend proxy
+      setStage('proxy')
+    } else {
+      // Proxy or local resource also failed: display fallback card
+      setStage('failed')
+    }
+  }
+
+  const activeSrc = isExternal && stage === 'proxy'
+    ? resolveApiProxyUrl(directUrl)
+    : directUrl
+
   if (isExternal) {
-    const pageUrl = sourceUrl && /^https?:\/\//.test(sourceUrl) ? sourceUrl : url
     return (
       <div
         className="chat-media-card chat-media-card--thumbnail"
-        style={{ margin: '6px 0 10px', borderRadius: '10px', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)', maxWidth: '420px' }}
+        data-load-stage={stage}
+        style={{ margin: '6px 0 10px', borderRadius: 'var(--radius-lg, 14px)', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)', maxWidth: '420px' }}
       >
         <a href={pageUrl} target="_blank" rel="noopener noreferrer" title={sourceUrl ? `Open source page: ${label}` : label} style={{ display: 'flex', justifyContent: 'center', textDecoration: 'none' }}>
           <img
-            src={url}
+            key={activeSrc}
+            src={activeSrc}
             alt={label}
             loading="lazy"
             referrerPolicy="no-referrer"
             style={{ width: 'auto', height: 'auto', maxWidth: '100%', maxHeight: '420px', objectFit: 'contain', display: 'block' }}
-            onError={(e) => { const card = e.currentTarget.closest('.chat-media-card') as HTMLElement | null; if (card) card.style.display = 'none' }}
+            onError={handleImageError}
           />
         </a>
         {(label !== 'Generated Image' || sourceUrl) && (
           <div style={{ padding: '5px 10px', fontSize: '0.72rem', color: 'var(--text-muted, #64748b)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
             <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
             {sourceUrl && (
-              <a href={url} target="_blank" rel="noopener noreferrer" style={{ flexShrink: 0, color: 'var(--interactive-fg-hover)' }}>
+              <a href={directUrl} target="_blank" rel="noopener noreferrer" style={{ flexShrink: 0, color: 'var(--interactive-fg-hover)' }}>
                 View full image
               </a>
             )}
@@ -441,12 +600,22 @@ function renderMessageImage(src: string | undefined, alt: string | undefined, so
     )
   }
   return (
-    <div className="chat-media-card" style={{ margin: '10px 0', borderRadius: '12px', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)' }}>
-      <img src={url} alt={label} referrerPolicy="no-referrer" style={{ width: '100%', maxHeight: '420px', objectFit: 'contain', display: 'block', borderRadius: '8px' }} />
+    <div className="chat-media-card" style={{ margin: '10px 0', borderRadius: 'var(--radius-xl, 18px)', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: 'var(--panel-bg, #141416)' }}>
+      <img
+        src={directUrl}
+        alt={label}
+        referrerPolicy="no-referrer"
+        style={{ width: '100%', maxHeight: '420px', objectFit: 'contain', display: 'block', borderRadius: 'var(--radius-md, 10px)' }}
+        onError={handleImageError}
+      />
     </div>
   )
 }
 
+function renderMessageImage(src: string | undefined, alt: string | undefined, sourceUrl?: string): ReactNode {
+  return <ChatMediaImage src={src} alt={alt} sourceUrl={sourceUrl} />
+}
+
 function renderMessageLink(href: string | undefined, children: ReactNode, node: any, sourceByImage?: Map<string, string>): ReactNode {
   const imageNode = node?.children?.length === 1 && node.children[0]?.tagName === 'img'
     ? node.children[0]
@@ -526,9 +695,9 @@ const mdComponents = {
         const lang = match[1].replace(/_/g, '-').toLowerCase()
         const parsed = parseJsonSafely(match[2].trim())
         if (parsed) {
-          if (lang.startsWith('ui-grid')) return <UiGridCard data={parsed} />
-          if (lang.startsWith('ui-card') || lang.startsWith('ui-feature')) return <UiFeatureCard data={parsed} />
-          if (lang.startsWith('ui-mockup')) return <UiMockupWidget data={parsed} />
+          if (lang.startsWith('ui-grid')) return <Suspense fallback={null}><UiGridCard data={parsed} /></Suspense>
+          if (lang.startsWith('ui-card') || lang.startsWith('ui-feature')) return <Suspense fallback={null}><UiFeatureCard data={parsed} /></Suspense>
+          if (lang.startsWith('ui-mockup')) return <Suspense fallback={null}><UiMockupWidget data={parsed} /></Suspense>
         }
       }
     }
@@ -581,7 +750,7 @@ const mdComponents = {
     return renderCodeCard(lang, codeText)
   },
   table: ({ children }) => (
-    <div className="chat-table-container" style={{ overflowX: 'auto', margin: '14px 0', width: '100%', borderRadius: '8px', border: '1px solid var(--border-light, rgba(255, 255, 255, 0.12))', background: 'var(--panel-bg)', boxShadow: 'var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.15))' }}>
+    <div className="chat-table-container" style={{ overflowX: 'auto', margin: '14px 0', width: '100%', borderRadius: 'var(--radius-md, 10px)', border: '1px solid var(--border-light, rgba(255, 255, 255, 0.12))', background: 'var(--panel-bg)', boxShadow: 'var(--shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.15))' }}>
       <table className="chat-table" style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.86rem', textAlign: 'left', lineHeight: '1.5' }}>
         {children}
       </table>
@@ -648,7 +817,7 @@ const mdComponents = {
           margin: '12px 0',
           padding: '8px 16px',
           borderLeft: '3px solid var(--accent, #38bdf8)',
-          background: 'rgba(255, 255, 255, 0.02)',
+          background: 'var(--bg-surface-soft)',
           borderRadius: '0 8px 8px 0',
           color: 'var(--text-muted, #94a3b8)',
           fontStyle: 'italic',
@@ -703,6 +872,14 @@ export function renderFormattedMessage(text: string, webSources: WebSearchSource
   const displayText = readableAssistantText(text.replace(/\r\n?/g, '\n'))
   if (!displayText) return null
 
+  if (displayText.trimStart().startsWith('# Release Notes')) {
+    return (
+      <div className="chat-formatted-body">
+        <ReleaseNotesCard markdown={displayText} />
+      </div>
+    )
+  }
+
   const segments = splitVideoSegments(displayText)
   const sourceByImage = new Map(
     webSources.filter((source) => source.imageUrl).map((source) => [resolveMediaUrl(source.imageUrl!), source.url]),
@@ -720,8 +897,8 @@ export function renderFormattedMessage(text: string, webSources: WebSearchSource
       {segments.map((segment, i) => {
         if (segment.type === 'video') {
           return (
-            <div key={`video-${i}`} className="chat-media-card" style={{ margin: '10px 0', borderRadius: '12px', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: '#000' }}>
-              <video controls src={resolveMediaUrl(segment.src)} style={{ width: '100%', maxHeight: '400px', borderRadius: '8px', display: 'block' }} />
+            <div key={`video-${i}`} className="chat-media-card" style={{ margin: '10px 0', borderRadius: 'var(--radius-xl, 18px)', overflow: 'hidden', border: '1px solid var(--border, rgba(255,255,255,0.12))', background: '#000' }}>
+              <video controls src={resolveMediaUrl(segment.src)} style={{ width: '100%', maxHeight: '400px', borderRadius: 'var(--radius-md, 10px)', display: 'block' }} />
             </div>
           )
         }
@@ -734,3 +911,13 @@ export function renderFormattedMessage(text: string, webSources: WebSearchSource
     </div>
   )
 }
+
+export const FormattedMessage = memo(function FormattedMessage({
+  text,
+  sources,
+}: {
+  text: string
+  sources?: WebSearchSource[]
+}) {
+  return renderFormattedMessage(text, sources)
+})

package/src/renderer/shared/utils/markdown.webImages.test.tsx

@@ -1,6 +1,8 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { renderFormattedMessage } from './markdown'
+import { renderFormattedMessage, sanitizeLatex, autoHealMarkdownImages, ChatMediaImage, resolveMediaUrl, resolveApiProxyUrl } from './markdown'
+import { extractToolCardPayloads } from '../components/cards/ToolResultCards'
+import { subscribeThemeChanges } from '../components/cards/MermaidCard'
 import type { WebSearchSource } from './agentActivity'
 
 const source: WebSearchSource = {
@@ -37,4 +39,140 @@ describe('web search image links', () => {
     expect(html).toContain(`href="${source.imageUrl}"`)
     expect(html).not.toMatch(/<a[^>]*>\s*<a/)
   })
+
+  it('fast-paths sanitizeLatex on plain prose and converts LaTeX symbols when present', () => {
+    const replaceSpy = vi.spyOn(String.prototype, 'replace')
+    const plain = 'Hello world! This is a normal paragraph without math.'
+    expect(sanitizeLatex(plain)).toBe(plain)
+    expect(replaceSpy).not.toHaveBeenCalled()
+    replaceSpy.mockRestore()
+
+    expect(sanitizeLatex('A $\\rightarrow$ B and $\\leq$ C')).toBe('A → B and ≤ C')
+  })
+
+  it('extracts tool result card payloads in a single pass and respects inline fence suppression', () => {
+    const progress: any[] = [
+      { type: 'ToolEnd', data: { action: 'weather', result: '```weather_json\n{"city":"Bangkok"}\n```' } },
+      { type: 'ToolEnd', data: { action: 'calculation', result: '```calculation_json\n{"result":42}\n```' } },
+    ]
+    expect(extractToolCardPayloads(progress, 'Here is the result')).toEqual({
+      weatherData: { city: 'Bangkok' },
+      stockData: null,
+      calcData: { result: 42 },
+      imageSearchData: null,
+      imageGenData: null,
+      planData: null,
+    })
+    expect(extractToolCardPayloads(progress, '```weather_json\n{"city":"Bangkok"}\n```').weatherData).toBeNull()
+  })
+
+  it('multiplexes Mermaid theme change listeners through a single MutationObserver', () => {
+    let observeCount = 0
+    let disconnectCount = 0
+    class FakeMutationObserver {
+      observe() { observeCount++ }
+      disconnect() { disconnectCount++ }
+    }
+    vi.stubGlobal('MutationObserver', FakeMutationObserver)
+    vi.stubGlobal('document', { documentElement: {} })
+
+    const unsub1 = subscribeThemeChanges(() => {})
+    const unsub2 = subscribeThemeChanges(() => {})
+    expect(observeCount).toBe(1)
+    unsub1()
+    expect(disconnectCount).toBe(0)
+    unsub2()
+    expect(disconnectCount).toBe(1)
+    vi.unstubAllGlobals()
+  })
+
+  it('auto-heals unclosed markdown image tags at the end of a line', () => {
+    const unclosed = '![Machi 馬吉 Portaly](https://img.portaly.cc/12345'
+    expect(autoHealMarkdownImages(unclosed)).toBe('![Machi 馬吉 Portaly](https://img.portaly.cc/12345)')
+
+    const multiline = 'Some text\n![Unclosed](https://example.com/pic.png\n\nMore text'
+    expect(autoHealMarkdownImages(multiline)).toBe('Some text\n![Unclosed](https://example.com/pic.png)\n\nMore text')
+
+    const alreadyClosed = '![Closed](https://example.com/pic.png)'
+    expect(autoHealMarkdownImages(alreadyClosed)).toBe(alreadyClosed)
+  })
+
+  it('renders unclosed image tags properly as images through renderFormattedMessage', () => {
+    const raw = '![Machi](https://img.portaly.cc/12345'
+    const html = renderToStaticMarkup(renderFormattedMessage(raw))
+    expect(html).toContain('<img')
+    expect(html).toContain('src="https://img.portaly.cc/12345"')
+    expect(html).not.toContain('![Machi](')
+  })
+
+  it('renders a fallback UI with link when image fails to load', () => {
+    const html = renderToStaticMarkup(
+      <ChatMediaImage
+        src="https://pbs.twimg.com/profile_banners/123/456"
+        alt="Machi on X"
+        initialError
+      />
+    )
+    expect(html).toContain('chat-media-card--failed')
+    expect(html).toContain('Image failed to load')
+    expect(html).toContain('Machi on X')
+    expect(html).toContain('href="https://pbs.twimg.com/profile_banners/123/456/1500x500"')
+    expect(html).toContain('Open link')
+  })
+
+  it('normalizes Twitter profile banner URLs missing dimensions in resolveMediaUrl', () => {
+    const rawBanner = 'https://pbs.twimg.com/profile_banners/1366430884698546176/1684330404'
+    expect(resolveMediaUrl(rawBanner)).toBe('https://pbs.twimg.com/profile_banners/1366430884698546176/1684330404/1500x500')
+
+    const trailingSlash = 'https://pbs.twimg.com/profile_banners/1366430884698546176/1684330404/'
+    expect(resolveMediaUrl(trailingSlash)).toBe('https://pbs.twimg.com/profile_banners/1366430884698546176/1684330404/1500x500')
+
+    const alreadySized = 'https://pbs.twimg.com/profile_banners/1366430884698546176/1684330404/1500x500'
+    expect(resolveMediaUrl(alreadySized)).toBe(alreadySized)
+  })
+
+  it('generates local image proxy URL with resolveApiProxyUrl', () => {
+    expect(resolveApiProxyUrl('')).toBe('')
+
+    // Default test environment (origin is empty or localhost)
+    const target = 'https://pbs.twimg.com/profile_banners/123/456/1500x500'
+    const proxyUrl = resolveApiProxyUrl(target)
+    expect(proxyUrl).toContain('/api/proxy-image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_banners%2F123%2F456%2F1500x500')
+
+    // Web UI dev environment on port 9000
+    vi.stubGlobal('window', { location: { port: '9000', origin: 'http://localhost:9000' } })
+    expect(resolveApiProxyUrl(target)).toBe(
+      `http://localhost:3000/api/proxy-image?url=${encodeURIComponent(target)}`
+    )
+    vi.unstubAllGlobals()
+  })
+
+  it('renders image with proxy endpoint when stage is proxy', () => {
+    const rawBanner = 'https://pbs.twimg.com/profile_banners/1366430884698546176/1684330404'
+    const html = renderToStaticMarkup(
+      <ChatMediaImage
+        src={rawBanner}
+        alt="Banner Image"
+        initialStage="proxy"
+      />
+    )
+    expect(html).toContain('data-load-stage="proxy"')
+    expect(html).toContain('/api/proxy-image?url=https%3A%2F%2Fpbs.twimg.com%2Fprofile_banners%2F1366430884698546176%2F1684330404%2F1500x500')
+    expect(html).toContain('alt="Banner Image"')
+  })
+
+  it('renders file mention with material icon and strips @ symbol', () => {
+    const html = renderToStaticMarkup(renderFormattedMessage('ดูไฟล์ @generate_harness_pdf.py ให้หน่อย'))
+    expect(html).toContain('class="chat-mention chat-file-mention"')
+    expect(html).toContain('generate_harness_pdf.py')
+    expect(html).not.toContain('@generate_harness_pdf.py')
+  })
+
+  it('preserves @ for non-file mentions like @web or @agent', () => {
+    const html = renderToStaticMarkup(renderFormattedMessage('ถาม @agent หรือค้น @web'))
+    expect(html).toContain('class="chat-mention"')
+    expect(html).toContain('@agent')
+    expect(html).toContain('@web')
+    expect(html).not.toContain('chat-file-mention')
+  })
 })