fix(web): accept signed viewBox values in mermaid lightbox normalize

HAPI Bot Minor (PR tiann#741): the viewBox regex only matched digits, dots,
and spaces, so a valid viewBox with negative origin (e.g. '-8 -8 640 480')
returned null. normalizeMermaidSvgForStandaloneDisplay then became a
no-op and left width='100%', re-introducing the zero-sized lightbox
render this PR is meant to fix for the affected diagrams.

Switch to the bot's suggested regex (signed numbers, single or double
quotes, comma or space separators) and reject NaN parts. Adds Vitest
coverage for signed origins, single quotes, comma separators, the
malformed/no-viewBox null paths, and an end-to-end normalize test that
fails against the old regex.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: heavygee

web/src/components/assistant-ui/mermaid-diagram.tsx

@@ -95,10 +95,10 @@ export async function renderMermaidSvg(code: string, elementId: string, theme: '
 }
 
 export function getMermaidSvgLayoutSize(svg: string): { width: number; height: number } | null {
-    const viewBoxMatch = svg.match(/\bviewBox="([\d.\s]+)"/)
+    const viewBoxMatch = svg.match(/\bviewBox=(['"])([^'"]+)\1/i)
     if (!viewBoxMatch) return null
-    const parts = viewBoxMatch[1].trim().split(/\s+/).map(Number)
-    if (parts.length < 4 || parts[2] <= 0 || parts[3] <= 0) return null
+    const parts = viewBoxMatch[2].trim().split(/[\s,]+/).map(Number)
+    if (parts.length < 4 || parts.some(Number.isNaN) || parts[2] <= 0 || parts[3] <= 0) return null
     return { width: parts[2], height: parts[3] }
 }
 

web/src/components/assistant-ui/mermaid-svg-id.test.ts

@@ -1,5 +1,32 @@
 import { describe, expect, it } from 'vitest'
-import { normalizeMermaidSvgForStandaloneDisplay } from '@/components/assistant-ui/mermaid-diagram'
+import {
+    getMermaidSvgLayoutSize,
+    normalizeMermaidSvgForStandaloneDisplay,
+} from '@/components/assistant-ui/mermaid-diagram'
+
+describe('getMermaidSvgLayoutSize', () => {
+    it('reads simple unsigned viewBox', () => {
+        expect(getMermaidSvgLayoutSize('<svg viewBox="0 0 200 80"></svg>')).toEqual({ width: 200, height: 80 })
+    })
+
+    it('accepts signed origin values (negative offsets)', () => {
+        expect(getMermaidSvgLayoutSize('<svg viewBox="-8 -8 640 480"></svg>')).toEqual({ width: 640, height: 480 })
+    })
+
+    it('accepts single-quoted attribute and comma separators', () => {
+        expect(getMermaidSvgLayoutSize("<svg viewBox='0,0,300,150'></svg>")).toEqual({ width: 300, height: 150 })
+    })
+
+    it('rejects malformed viewBox (NaN, missing dim, zero size)', () => {
+        expect(getMermaidSvgLayoutSize('<svg viewBox="0 0 NaN 100"></svg>')).toBeNull()
+        expect(getMermaidSvgLayoutSize('<svg viewBox="0 0 200"></svg>')).toBeNull()
+        expect(getMermaidSvgLayoutSize('<svg viewBox="0 0 0 100"></svg>')).toBeNull()
+    })
+
+    it('returns null when no viewBox attribute exists', () => {
+        expect(getMermaidSvgLayoutSize('<svg width="100"></svg>')).toBeNull()
+    })
+})
 
 describe('normalizeMermaidSvgForStandaloneDisplay', () => {
     it('replaces width="100%" with explicit viewBox dimensions', () => {
@@ -10,4 +37,13 @@ describe('normalizeMermaidSvgForStandaloneDisplay', () => {
         expect(prepared).toContain('width:200px')
         expect(prepared).toContain('height:80px')
     })
+
+    it('normalizes width/height for SVGs with negative viewBox origins', () => {
+        const svg = '<svg viewBox="-50 -50 800 600" width="100%" height="100%"><g/></svg>'
+        const prepared = normalizeMermaidSvgForStandaloneDisplay(svg)
+
+        expect(prepared).not.toContain('width="100%"')
+        expect(prepared).toContain('width="800"')
+        expect(prepared).toContain('height="600"')
+    })
 })