Improve frontend image and Mermaid rendering

frontend/local_server.py

@@ -217,7 +217,7 @@ def _resolve_workspace_file_path(workspace_root: Path, raw_path: str) -> Path:
         raise HTTPException(status_code=403, detail="workspace file path is outside the workspace") from exc
     if not resolved.is_file():
         raise HTTPException(status_code=404, detail="workspace file does not exist")
-    if resolved.suffix.lower() not in {".png", ".jpg", ".jpeg", ".gif", ".webp", ".bmp"}:
+    if resolved.suffix.lower() not in {".png", ".jpg", ".jpeg", ".gif", ".webp", ".bmp", ".svg"}:
         raise HTTPException(status_code=415, detail="only workspace image files can be displayed inline")
     return resolved
 

frontend/static/app.css

@@ -467,6 +467,8 @@ button {
 }
 
 .message-body {
+  min-width: 0;
+  max-width: 100%;
   padding: 14px 16px;
 }
 
@@ -477,6 +479,8 @@ button {
 }
 
 .event-body-inner {
+  min-width: 0;
+  max-width: 100%;
   padding: 14px 16px;
 }
 
@@ -523,6 +527,9 @@ button {
 }
 
 .markdown-body {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   line-height: 1.6;
   word-break: break-word;
 }
@@ -604,13 +611,16 @@ button {
 
 .markdown-body img {
   display: block;
+  width: auto;
   max-width: 100%;
   height: auto;
   margin: 0.65rem 0;
   border-radius: 14px;
+  object-fit: contain;
 }
 
 .mermaid-chart {
+  max-width: 100%;
   margin: 0.85rem 0;
   overflow-x: auto;
 }

frontend/static/app.js

@@ -198,6 +198,15 @@
     return template.innerHTML;
   }
 
+  function normalizeMarkdownImageDestinations(text) {
+    return String(text || "").replace(/!\[([^\]\n]*)\]\(([^)\n]+)\)/g, function (match, alt, target) {
+      var src = String(target || "").trim();
+      if (!src || src[0] === "<" || !/\s/.test(src) || isRemoteOrInlineImageSrc(src)) return match;
+      if (/[<>]/.test(src)) return match;
+      return "![" + alt + "](<" + src + ">)";
+    });
+  }
+
   function unwrapFullMarkdownFence(text) {
     var source = String(text || "").trim();
     var match = /^(```|~~~)[ \t]*(markdown|md|gfm)[^\n]*\n([\s\S]*?)\n\1[ \t]*$/i.exec(source);
@@ -231,7 +240,11 @@
       console.warn("Mermaid initialization failed.", e);
       return;
     }
-    container.querySelectorAll(".markdown-body pre code.language-mermaid").forEach(function (code) {
+    container.querySelectorAll(".markdown-body pre code").forEach(function (code) {
+      var className = String(code.className || "").toLowerCase();
+      if (!className.split(/\s+/).some(function (name) {
+        return name === "language-mermaid" || name === "lang-mermaid" || name === "language-mmd" || name === "lang-mmd";
+      })) return;
       var pre = code.closest("pre");
       if (!pre) return;
       var source = code.textContent || "";
@@ -253,7 +266,8 @@
       return "<pre>" + escapeHtml(text) + "</pre>";
     }
     try {
-      var protectedMath = protectMathSegments(unwrapFullMarkdownFence(text));
+      var normalizedText = normalizeMarkdownImageDestinations(unwrapFullMarkdownFence(text));
+      var protectedMath = protectMathSegments(normalizedText);
       var rawHtml = window.marked.parse(protectedMath.text, { gfm: true, breaks: false, async: false });
       rawHtml = rewriteWorkspaceImageSources(rawHtml);
       var safeHtml = window.DOMPurify.sanitize(rawHtml, { USE_PROFILES: { html: true } });