From 29f1e172b4fd18b4a2cfbd54a443dce0f2945d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E6=A3=AE?= <wangzhangsen@lanxiongwangluo.com>
Date: Sun, 10 May 2026 15:45:58 +0800
Subject: [PATCH] fix: add markdown rendering error handling and debug logs

---
 internal/web/html.go | 70 ++++++++++++++++++++++++++++++++------------
 1 file changed, 52 insertions(+), 18 deletions(-)
diff --git a/internal/web/html.go b/internal/web/html.go
index d16d6b5..e901b66 100644
--- a/internal/web/html.go
+++ b/internal/web/html.go
@@ -6,9 +6,9 @@ const indexHTML = `<!DOCTYPE html>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>orca.agent</title>
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" onload="console.log('marked loaded')" onerror="console.error('marked failed to load')"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" onload="console.log('hljs loaded')" onerror="console.error('hljs failed to load')"></script>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -368,19 +368,50 @@ const indexHTML = `<!DOCTYPE html>
         let currentAssistantDiv = null;
         let eventSource = null;
         let currentContent = '';
+        let mdAvailable = false;
 
-        marked.setOptions({
-            highlight: function(code, lang) {
-                if (lang && hljs.getLanguage(lang)) {
-                    try {
-                        return hljs.highlight(code, { language: lang }).value;
-                    } catch (e) {}
-                }
-                return hljs.highlightAuto(code).value;
-            },
-            breaks: true,
-            gfm: true
-        });
+        function initMarked() {
+            if (typeof marked === 'undefined') {
+                console.error('marked.js not loaded, using plain text fallback');
+                mdAvailable = false;
+                return;
+            }
+            mdAvailable = true;
+            try {
+                marked.setOptions({
+                    highlight: function(code, lang) {
+                        if (typeof hljs !== 'undefined' && lang && hljs.getLanguage(lang)) {
+                            try { return hljs.highlight(code, { language: lang }).value; } catch (e) {}
+                        }
+                        if (typeof hljs !== 'undefined') {
+                            try { return hljs.highlightAuto(code).value; } catch (e) {}
+                        }
+                        return code;
+                    },
+                    breaks: true,
+                    gfm: true
+                });
+                console.log('marked.js initialized successfully');
+                
+                const test = marked.parse('# Hello\n\nThis is **bold** text.');
+                console.log('Markdown test result:', test.substring(0, 100));
+            } catch (e) {
+                console.error('Failed to initialize marked:', e);
+                mdAvailable = false;
+            }
+        }
+
+        initMarked();
+
+        function renderMarkdown(text) {
+            if (!mdAvailable || !text) return text;
+            try {
+                return marked.parse(text);
+            } catch (e) {
+                console.error('Markdown parse error:', e);
+                return text;
+            }
+        }
 
         function connectSSE() {
             eventSource = new EventSource('/api/stream');
@@ -390,11 +421,14 @@ const indexHTML = `<!DOCTYPE html>
             });
             
             eventSource.onmessage = function(e) {
+                console.log('SSE data received:', e.data.substring(0, 50) + '...');
                 if (currentAssistantDiv) {
                     currentContent += e.data;
                     const content = currentAssistantDiv.querySelector('.message-content');
-                    content.innerHTML = marked.parse(currentContent);
-                    hljs.highlightAll();
+                    content.innerHTML = renderMarkdown(currentContent);
+                    if (typeof hljs !== 'undefined') {
+                        hljs.highlightAll();
+                    }
                     chatBox.scrollTop = chatBox.scrollHeight;
                 }
             };
@@ -429,7 +463,7 @@ const indexHTML = `<!DOCTYPE html>
             if (role === 'user') {
                 text.textContent = content;
             } else {
-                text.innerHTML = marked.parse(content);
+                text.innerHTML = renderMarkdown(content);
             }
             
             div.appendChild(label);
@@ -437,7 +471,7 @@ const indexHTML = `<!DOCTYPE html>
             chatBox.appendChild(div);
             chatBox.scrollTop = chatBox.scrollHeight;
             
-            if (role !== 'user') {
+            if (role !== 'user' && typeof hljs !== 'undefined') {
                 hljs.highlightAll();
             }
             
