support markdown visualization

frontend/package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.20",

frontend/src/App.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import {
   createPipeline,
   deleteGraphConfig,
@@ -1328,7 +1330,18 @@ export default function App() {
                               : ""}
                           </small>
                         </div>
-                        <pre>{message.content}</pre>
+                        <div className="discussion-message-markdown">
+                          <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                              a: ({ node: _node, ...props }) => (
+                                <a {...props} target="_blank" rel="noreferrer" />
+                              ),
+                            }}
+                          >
+                            {message.content}
+                          </ReactMarkdown>
+                        </div>
                       </article>
                     ))
                   )}

frontend/src/styles.css

@@ -370,10 +370,49 @@ button:disabled {
 }
 
 .discussion-message pre {
-  font-family: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   margin: 8px 0 0;
-  white-space: pre-wrap;
+  overflow-x: auto;
-  word-break: break-word;
+  white-space: pre;
+}
+
+.discussion-message-markdown > :first-child {
+  margin-top: 0;
+}
+
+.discussion-message-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.discussion-message-markdown code {
+  background: #f3f5f8;
+  border-radius: 4px;
+  padding: 1px 4px;
+}
+
+.discussion-message-markdown pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.discussion-message-markdown a {
+  color: #1a4fc5;
+  text-decoration: underline;
+}
+
+.discussion-message-markdown p,
+.discussion-message-markdown ul,
+.discussion-message-markdown ol,
+.discussion-message-markdown blockquote,
+.discussion-message-markdown table {
+  margin: 8px 0;
+}
+
+.discussion-message-markdown blockquote {
+  border-left: 3px solid #d0d8e2;
+  color: #4f5f73;
+  margin-left: 0;
+  padding-left: 10px;
 }
 
 .mcp-config-section {