🔒 fix(security): sanitize AI-generated HTML to prevent XSS in playground

Mitigate XSS vulnerabilities in the playground where AI-generated content
is rendered without sanitization, allowing potential script injection via
prompt injection attacks.

MarkdownRenderer.jsx:
- Replace dangerouslySetInnerHTML with a sandboxed iframe for HTML preview
- Use sandbox="allow-same-origin" to block script execution while allowing
  CSS rendering and iframe height auto-sizing
- Add SandboxedHtmlPreview component with automatic height adjustment

CodeViewer.jsx:
- Add escapeHtml() utility to encode HTML entities before rendering
- Rewrite highlightJson() to process tokens iteratively, escaping each
  token and structural text before wrapping in syntax highlighting spans
- Escape non-JSON and very-large content paths that previously bypassed
  sanitization
- Update linkRegex to correctly match URLs containing & entities

These changes only affect the playground (AI output rendering). Admin-
configured content (home page, about page, footer, notices) remains
unaffected as they use separate code paths and are within the trusted
admin boundary.

web/src/components/playground/CodeViewer.jsx

@@ -91,22 +91,45 @@ const codeThemeStyles = {
   },
 };
 
-const highlightJson = (str) => {
-  return str.replace(
-    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
-    (match) => {
-      let color = '#b5cea8';
-      if (/^"/.test(match)) {
-        color = /:$/.test(match) ? '#9cdcfe' : '#ce9178';
-      } else if (/true|false|null/.test(match)) {
-        color = '#569cd6';
-      }
-      return `<span style="color: ${color}">${match}</span>`;
-    },
-  );
+const escapeHtml = (str) => {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
 };
 
-const linkRegex = /(https?:\/\/[^\s<"'\]),;}]+)/g;
+const highlightJson = (str) => {
+  const tokenRegex =
+    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g;
+
+  let result = '';
+  let lastIndex = 0;
+  let match;
+
+  while ((match = tokenRegex.exec(str)) !== null) {
+    // Escape non-token text (structural chars like {, }, [, ], :, comma, whitespace)
+    result += escapeHtml(str.slice(lastIndex, match.index));
+
+    const token = match[0];
+    let color = '#b5cea8';
+    if (/^"/.test(token)) {
+      color = /:$/.test(token) ? '#9cdcfe' : '#ce9178';
+    } else if (/true|false|null/.test(token)) {
+      color = '#569cd6';
+    }
+    // Escape token content before wrapping in span
+    result += `<span style="color: ${color}">${escapeHtml(token)}</span>`;
+    lastIndex = tokenRegex.lastIndex;
+  }
+
+  // Escape remaining text
+  result += escapeHtml(str.slice(lastIndex));
+  return result;
+};
+
+const linkRegex = /(https?:\/\/(?:[^\s<"'\]),;&}]|&amp;)+)/g;
 
 const linkifyHtml = (html) => {
   const parts = html.split(/(<[^>]+>)/g);
@@ -184,14 +207,14 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
 
   const highlightedContent = useMemo(() => {
     if (contentMetrics.isVeryLarge && !isExpanded) {
-      return displayContent;
+      return escapeHtml(displayContent);
     }
 
     if (isJsonLike(displayContent, language)) {
       return highlightJson(displayContent);
     }
 
-    return displayContent;
+    return escapeHtml(displayContent);
   }, [displayContent, language, contentMetrics.isVeryLarge, isExpanded]);
 
   const renderedContent = useMemo(() => {