added Table support

frontend/src/components/MessageBubble.tsx

@@ -1,6 +1,7 @@
 import { memo, useMemo } from "react";
 import type { Components } from "react-markdown";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { ChatMessage, getAuthToken } from "../api/client";
 
 const API_BASE = import.meta.env.VITE_API_URL ?? "";
@@ -30,6 +31,11 @@ function resolveMediaUrl(src: string | undefined): string | undefined {
 
 function createMarkdownComponents(onContentResize?: () => void): Components {
   return {
+    table: ({ children }) => (
+      <div className="message-table-wrap">
+        <table className="message-table">{children}</table>
+      </div>
+    ),
     img: ({ src, alt }) => {
       const resolved = resolveMediaUrl(src);
       if (!resolved) return null;
@@ -101,7 +107,9 @@ function MessageBubbleInner({ msg, onContentResize }: MessageBubbleProps) {
   const markdown = useMemo(
     () =>
       usesMarkdown(msg.role, msg.content) ? (
-        <ReactMarkdown components={markdownComponents}>{msg.content}</ReactMarkdown>
+        <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+          {msg.content}
+        </ReactMarkdown>
       ) : (
         <span className="message-plain-text">{msg.content}</span>
       ),

frontend/src/pages/Chat.css

@@ -202,6 +202,36 @@
   margin-bottom: 0;
 }
 
+.message-table-wrap {
+  overflow-x: auto;
+  margin: 0.5rem 0;
+  max-width: 100%;
+}
+
+.message-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.message-table th,
+.message-table td {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid #2a3142;
+  text-align: left;
+  vertical-align: top;
+}
+
+.message-table th {
+  background: #1a2030;
+  color: #c5d0e0;
+  font-weight: 600;
+}
+
+.message-table tr:nth-child(even) td {
+  background: rgba(255, 255, 255, 0.02);
+}
+
 .chat-input {
   display: flex;
   flex-direction: column;