Improve frontend markdown rendering

VERSION

@@ -1 +1 @@
-v0.0.43
+v0.0.44

frontend/static/app.css

@@ -610,6 +610,16 @@ button {
   border-radius: 14px;
 }
 
+.mermaid-chart {
+  margin: 0.85rem 0;
+  overflow-x: auto;
+}
+
+.mermaid-chart svg {
+  max-width: 100%;
+  height: auto;
+}
+
 .markdown-body table {
   width: 100%;
   border-collapse: collapse;

frontend/static/app.js

@@ -152,6 +152,7 @@
   var workspaceMeta = document.getElementById("workspaceMeta");
   var downloadWorkspaceBtn = document.getElementById("downloadWorkspaceBtn");
   var defaultPromptPlaceholder = promptInput.getAttribute("placeholder") || "Message ResearchHarness";
+  var mermaidCounter = 0;
 
   function escapeHtml(value) {
     return String(value || "")
@@ -197,6 +198,12 @@
     return template.innerHTML;
   }
 
+  function unwrapFullMarkdownFence(text) {
+    var source = String(text || "").trim();
+    var match = /^(```|~~~)[ \t]*(markdown|md|gfm)[^\n]*\n([\s\S]*?)\n\1[ \t]*$/i.exec(source);
+    return match ? match[3] : text;
+  }
+
   function renderMathInMarkdown(container) {
     if (!window.renderMathInElement) return;
     container.querySelectorAll(".markdown-body").forEach(function (body) {
@@ -216,13 +223,37 @@
     });
   }
 
+  function renderMermaidInMarkdown(container) {
+    if (!window.mermaid) return;
+    try {
+      window.mermaid.initialize({ startOnLoad: false, securityLevel: "strict" });
+    } catch (e) {
+      console.warn("Mermaid initialization failed.", e);
+      return;
+    }
+    container.querySelectorAll(".markdown-body pre code.language-mermaid").forEach(function (code) {
+      var pre = code.closest("pre");
+      if (!pre) return;
+      var source = code.textContent || "";
+      var target = document.createElement("div");
+      var id = "rh-mermaid-" + (++mermaidCounter);
+      target.className = "mermaid-chart";
+      window.mermaid.render(id, source).then(function (result) {
+        target.innerHTML = result.svg || "";
+        pre.replaceWith(target);
+      }).catch(function (e) {
+        console.warn("Mermaid rendering failed.", e);
+      });
+    });
+  }
+
   function renderMarkdown(text) {
     if (!window.marked || !window.DOMPurify) {
       console.warn("Markdown renderer unavailable; falling back to plain text.");
       return "<pre>" + escapeHtml(text) + "</pre>";
     }
     try {
-      var protectedMath = protectMathSegments(text);
+      var protectedMath = protectMathSegments(unwrapFullMarkdownFence(text));
       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 } });
@@ -538,6 +569,7 @@
     });
     timeline.appendChild(node);
     renderMathInMarkdown(node);
+    renderMermaidInMarkdown(node);
     setEventExpanded(node, true, false);
     scrollTimeline(shouldFollow);
   }

frontend/static/index.html

@@ -74,6 +74,7 @@
     <script src="https://cdn.jsdelivr.net/npm/marked@15.0.12/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@11.12.0/dist/mermaid.min.js"></script>
     <script src="/static/app.js"></script>
   </body>
 </html>