From 46325494fb41b79e197b8a7f281b54a3cd392aa3 Mon Sep 17 00:00:00 2001
From: jreakin <johnreakin@gmail.com>
Date: Mon, 23 Mar 2026 10:16:33 -0500
Subject: [PATCH] fix(web): allow foreignObject in DOMPurify SVG sanitization

Mermaid uses foreignObject for HTML text labels inside flowchart
nodes. The SVG profile strips them by default, causing empty boxes.
ADD_TAGS: ['foreignObject'] preserves text while still sanitizing
against XSS.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 gitnexus-web/src/components/MermaidDiagram.tsx   | 2 +-
 gitnexus-web/src/components/ProcessFlowModal.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/gitnexus-web/src/components/MermaidDiagram.tsx b/gitnexus-web/src/components/MermaidDiagram.tsx
index 0c6ebc239a..5a0598b25e 100644
--- a/gitnexus-web/src/components/MermaidDiagram.tsx
+++ b/gitnexus-web/src/components/MermaidDiagram.tsx
@@ -141,7 +141,7 @@ export const MermaidDiagram = ({ code }: MermaidDiagramProps) => {
           <div
             ref={containerRef}
             className="flex items-center justify-center p-4 overflow-auto max-h-[400px]"
-            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } }) }}
+            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_TAGS: ['foreignObject'] }) }}
           />
         </div>
       </div>
diff --git a/gitnexus-web/src/components/ProcessFlowModal.tsx b/gitnexus-web/src/components/ProcessFlowModal.tsx
index fabad1eed3..93017f3768 100644
--- a/gitnexus-web/src/components/ProcessFlowModal.tsx
+++ b/gitnexus-web/src/components/ProcessFlowModal.tsx
@@ -148,7 +148,7 @@ export const ProcessFlowModal = ({ process, onClose, onFocusInGraph, isFullScree
 
                 const { svg } = await mermaid.render(id, mermaidCode);
                 if (!diagramRef.current) return;
-                diagramRef.current!.innerHTML = DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } });
+                diagramRef.current!.innerHTML = DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_TAGS: ['foreignObject'] });
             } catch (error) {
                 console.error('Mermaid render error:', error);
                 const errorMessage = error instanceof Error ? error.message : String(error);