From 5e38284bfd754557d462f1988aa73f2d9b70d9ce 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:16:16 +0800
Subject: [PATCH] feat: add Markdown rendering with code highlighting

---
 internal/web/html.go | 176 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 166 insertions(+), 10 deletions(-)
diff --git a/internal/web/html.go b/internal/web/html.go
index b42e302..afa6f23 100644
--- a/internal/web/html.go
+++ b/internal/web/html.go
@@ -6,6 +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>
+    <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>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -49,37 +52,163 @@ const indexHTML = `<!DOCTYPE html>
             border-right: 1px solid #414868;
         }
         .message {
-            margin-bottom: 16px;
+            margin-bottom: 20px;
             animation: fadeIn 0.3s ease;
         }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(4px); }
             to { opacity: 1; transform: translateY(0); }
         }
+        .message-user {
+            background: #24283b;
+            border: 1px solid #414868;
+            border-radius: 12px;
+            padding: 12px 16px;
+        }
         .message-user .label {
             color: #7dcfff;
             font-weight: 600;
             font-size: 13px;
-            margin-bottom: 4px;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .message-user .label::before {
+            content: '';
+            width: 8px;
+            height: 8px;
+            background: #7dcfff;
+            border-radius: 50%;
+        }
+        .message-assistant {
+            background: #1f2335;
+            border: 1px solid #2f3349;
+            border-radius: 12px;
+            padding: 12px 16px;
         }
         .message-assistant .label {
             color: #9ece6a;
             font-weight: 600;
             font-size: 13px;
-            margin-bottom: 4px;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .message-assistant .label::before {
+            content: '';
+            width: 8px;
+            height: 8px;
+            background: #9ece6a;
+            border-radius: 50%;
+        }
+        .message-system {
+            background: #2a1f1f;
+            border: 1px solid #5a3a3a;
+            border-radius: 12px;
+            padding: 12px 16px;
         }
         .message-system .label {
             color: #e0af68;
             font-weight: 600;
             font-size: 13px;
-            margin-bottom: 4px;
+            margin-bottom: 8px;
         }
         .message-content {
             color: #c0caf5;
-            line-height: 1.6;
+            line-height: 1.7;
             font-size: 14px;
-            white-space: pre-wrap;
-            word-break: break-word;
+        }
+        .message-content p {
+            margin-bottom: 12px;
+        }
+        .message-content p:last-child {
+            margin-bottom: 0;
+        }
+        .message-content h1,
+        .message-content h2,
+        .message-content h3,
+        .message-content h4 {
+            color: #7aa2f7;
+            margin: 16px 0 12px 0;
+            font-weight: 600;
+        }
+        .message-content h1 { font-size: 20px; }
+        .message-content h2 { font-size: 18px; }
+        .message-content h3 { font-size: 16px; }
+        .message-content h4 { font-size: 14px; }
+        .message-content ul,
+        .message-content ol {
+            margin: 8px 0 8px 20px;
+            padding-left: 0;
+        }
+        .message-content li {
+            margin-bottom: 6px;
+        }
+        .message-content code {
+            background: #24283b;
+            color: #bb9af7;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Fira Code', 'Consolas', monospace;
+            font-size: 13px;
+        }
+        .message-content pre {
+            background: #16161e;
+            border: 1px solid #414868;
+            border-radius: 8px;
+            padding: 16px;
+            margin: 12px 0;
+            overflow-x: auto;
+        }
+        .message-content pre code {
+            background: transparent;
+            color: #c0caf5;
+            padding: 0;
+            border-radius: 0;
+            font-size: 13px;
+            line-height: 1.5;
+        }
+        .message-content blockquote {
+            border-left: 3px solid #7aa2f7;
+            background: #24283b;
+            padding: 12px 16px;
+            margin: 12px 0;
+            border-radius: 0 8px 8px 0;
+            color: #a9b1d6;
+        }
+        .message-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 12px 0;
+            font-size: 13px;
+        }
+        .message-content th,
+        .message-content td {
+            border: 1px solid #414868;
+            padding: 8px 12px;
+            text-align: left;
+        }
+        .message-content th {
+            background: #24283b;
+            color: #7aa2f7;
+            font-weight: 600;
+        }
+        .message-content tr:nth-child(even) {
+            background: #1f2335;
+        }
+        .message-content a {
+            color: #7aa2f7;
+            text-decoration: none;
+        }
+        .message-content a:hover {
+            text-decoration: underline;
+        }
+        .message-content hr {
+            border: none;
+            border-top: 1px solid #414868;
+            margin: 16px 0;
         }
         .input-box {
             padding: 12px 16px;
@@ -172,7 +301,7 @@ const indexHTML = `<!DOCTYPE html>
         .status-running { background: #2b3a2b; color: #9ece6a; }
         .typing-indicator {
             display: none;
-            padding: 8px 0;
+            padding: 8px 16px;
             color: #e0af68;
             font-size: 13px;
             font-style: italic;
@@ -233,6 +362,20 @@ const indexHTML = `<!DOCTYPE html>
 
         let currentAssistantDiv = null;
         let eventSource = null;
+        let currentContent = '';
+
+        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 connectSSE() {
             eventSource = new EventSource('/api/stream');
@@ -243,8 +386,10 @@ const indexHTML = `<!DOCTYPE html>
             
             eventSource.onmessage = function(e) {
                 if (currentAssistantDiv) {
+                    currentContent += e.data;
                     const content = currentAssistantDiv.querySelector('.message-content');
-                    content.textContent += e.data;
+                    content.innerHTML = marked.parse(currentContent);
+                    hljs.highlightAll();
                     chatBox.scrollTop = chatBox.scrollHeight;
                 }
             };
@@ -275,13 +420,22 @@ const indexHTML = `<!DOCTYPE html>
             
             const text = document.createElement('div');
             text.className = 'message-content';
-            text.textContent = content;
+            
+            if (role === 'user') {
+                text.textContent = content;
+            } else {
+                text.innerHTML = marked.parse(content);
+            }
             
             div.appendChild(label);
             div.appendChild(text);
             chatBox.appendChild(div);
             chatBox.scrollTop = chatBox.scrollHeight;
             
+            if (role !== 'user') {
+                hljs.highlightAll();
+            }
+            
             return div;
         }
 
@@ -296,6 +450,7 @@ const indexHTML = `<!DOCTYPE html>
 
             addMessage('user', message);
             currentAssistantDiv = addMessage('assistant', '', '');
+            currentContent = '';
 
             try {
                 const response = await fetch('/api/chat', {
@@ -316,6 +471,7 @@ const indexHTML = `<!DOCTYPE html>
                 typingIndicator.classList.remove('active');
                 messageInput.focus();
                 currentAssistantDiv = null;
+                currentContent = '';
                 updateStats();
                 updateAgents();
             }
