feat: integrate remark-gfm for enhanced Markdown rendering in MessageDetail component

Entire-Checkpoint: 749f162dddd9

Author: delexw

package-lock.json

@@ -29,7 +29,8 @@
     "react-dom": "^19.0.0",
     "react-icons": "^5.6.0",
     "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^16.1.1"
+    "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",

package.json

@@ -1,5 +1,6 @@
 import { useState, useCallback, useRef, useLayoutEffect, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import type { DisplayMessage, DisplayItem } from "../types";
 import { shortModel, formatTokens, formatDuration, formatExactTime } from "../lib/format";
 import { getModelColor, getTeamColor } from "../lib/theme";
@@ -346,7 +347,7 @@ export function MessageDetail({
           <div className="message-detail__content">
             {msg.content && (
               <div className="message-detail__text">
-                <ReactMarkdown>{msg.content}</ReactMarkdown>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
               </div>
             )}
             {hasItems && (
@@ -719,7 +720,7 @@ function AgentDetailColumn({
           <div className="message-detail__content">
             {msg.content && (
               <div className="message-detail__text">
-                <ReactMarkdown>{msg.content}</ReactMarkdown>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
               </div>
             )}
             {hasItems && (