@hed-hog/core 0.0.329 → 0.0.330

package/hedhog/frontend/app/mcp_chat/page.tsx.ejs

@@ -1,574 +1,574 @@
-'use client';
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Textarea } from '@/components/ui/textarea';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import {
-  Bot,
-  ChevronDown,
-  ChevronRight,
-  MessageSquare,
-  Plus,
-  Send,
-  Trash2,
-  Wrench,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { toast } from 'sonner';
-
-type Conversation = {
-  id: number;
-  title: string | null;
-  created_at: string;
-  updated_at: string;
-};
-
-type Message = {
-  id: number;
-  conversation_id: number;
-  role: 'user' | 'assistant' | 'tool_call' | 'tool_result';
-  content: string;
-  tool_name: string | null;
-  tool_call_id: string | null;
-  created_at: string;
-};
-
-type MarkdownComponentProps = {
-  children?: React.ReactNode;
-  className?: string;
-  href?: string;
-};
-
-const markdownComponents: Record<
-  string,
-  (props: MarkdownComponentProps) => React.ReactNode
-> = {
-  p({ children }) {
-    return <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>;
-  },
-  ul({ children }) {
-    return <ul className="mb-2 list-disc pl-4 space-y-1">{children}</ul>;
-  },
-  ol({ children }) {
-    return <ol className="mb-2 list-decimal pl-4 space-y-1">{children}</ol>;
-  },
-  li({ children }) {
-    return <li className="leading-relaxed">{children}</li>;
-  },
-  strong({ children }) {
-    return <strong className="font-semibold">{children}</strong>;
-  },
-  em({ children }) {
-    return <em className="italic">{children}</em>;
-  },
-  code({ children, className }) {
-    const isBlock = className?.includes('language-');
-    return isBlock ? (
-      <code className="block rounded-md bg-black/10 dark:bg-white/10 px-3 py-2 text-xs font-mono whitespace-pre-wrap my-2">
-        {children}
-      </code>
-    ) : (
-      <code className="rounded bg-black/10 dark:bg-white/10 px-1 py-0.5 text-xs font-mono">
-        {children}
-      </code>
-    );
-  },
-  pre({ children }) {
-    return <pre className="my-2 overflow-x-auto rounded-md">{children}</pre>;
-  },
-  blockquote({ children }) {
-    return (
-      <blockquote className="border-l-2 border-current/30 pl-3 italic my-2 text-current/70">
-        {children}
-      </blockquote>
-    );
-  },
-  h1({ children }) {
-    return (
-      <h1 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h1>
-    );
-  },
-  h2({ children }) {
-    return (
-      <h2 className="text-sm font-bold mb-2 mt-3 first:mt-0">{children}</h2>
-    );
-  },
-  h3({ children }) {
-    return (
-      <h3 className="text-sm font-semibold mb-1 mt-2 first:mt-0">{children}</h3>
-    );
-  },
-  a({ href, children }) {
-    return (
-      <a
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="underline underline-offset-2 hover:opacity-80"
-      >
-        {children}
-      </a>
-    );
-  },
-  hr() {
-    return <hr className="my-3 border-current/20" />;
-  },
-  table({ children }) {
-    return (
-      <div className="my-2 overflow-x-auto">
-        <table className="text-xs border-collapse w-full">{children}</table>
-      </div>
-    );
-  },
-  th({ children }) {
-    return (
-      <th className="border border-current/20 px-2 py-1 font-semibold text-left bg-current/5">
-        {children}
-      </th>
-    );
-  },
-  td({ children }) {
-    return <td className="border border-current/20 px-2 py-1">{children}</td>;
-  },
-};
-
-function ToolBadge({
-  message,
-  variant,
-}: {
-  message: Message;
-  variant: 'call' | 'result';
-}) {
-  const [expanded, setExpanded] = useState(false);
-  let parsed: unknown;
-  try {
-    parsed = JSON.parse(message.content);
-  } catch {
-    parsed = message.content;
-  }
-
-  const colorClass =
-    variant === 'call'
-      ? 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-800 dark:bg-violet-950 dark:text-violet-300'
-      : 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300';
-
-  const preClass =
-    variant === 'call'
-      ? 'border-violet-100 bg-violet-50/50 text-violet-800 dark:border-violet-900 dark:bg-violet-950/50 dark:text-violet-200'
-      : 'border-emerald-100 bg-emerald-50/50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-200';
-
-  return (
-    <div className="my-1 flex flex-col items-start">
-      <button
-        type="button"
-        className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors hover:opacity-80 ${colorClass}`}
-        onClick={() => setExpanded((v) => !v)}
-      >
-        <Wrench className="h-3 w-3 shrink-0" />
-        <span className="font-mono">{message.tool_name}</span>
-        {expanded ? (
-          <ChevronDown className="h-3 w-3 shrink-0" />
-        ) : (
-          <ChevronRight className="h-3 w-3 shrink-0" />
-        )}
-      </button>
-      {expanded && (
-        <pre
-          className={`mt-1.5 w-full max-w-lg rounded-lg border px-3 py-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap ${preClass}`}
-        >
-          {typeof parsed === 'string'
-            ? parsed
-            : JSON.stringify(parsed, null, 2)}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-function TypingIndicator() {
-  return (
-    <div className="flex items-start gap-3">
-      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background">
-        <Bot className="h-4 w-4 text-muted-foreground" />
-      </div>
-      <div className="flex items-center gap-1 rounded-2xl rounded-tl-sm bg-muted px-4 py-3 shadow-sm">
-        <span
-          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-          style={{ animationDelay: '0ms' }}
-        />
-        <span
-          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-          style={{ animationDelay: '150ms' }}
-        />
-        <span
-          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
-          style={{ animationDelay: '300ms' }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default function McpChatPage() {
-  const { request, currentLocaleCode, refetchUser } = useApp();
-  const t = useTranslations('core.McpChatPage');
-
-  const [selectedConvId, setSelectedConvId] = useState<number | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [input, setInput] = useState('');
-  const [isSending, setIsSending] = useState(false);
-  const [convToDelete, setConvToDelete] = useState<Conversation | null>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const { data: conversations, refetch: refetchConvs } = useQuery<
-    Conversation[]
-  >({
-    queryKey: ['mcp-chat-conversations', currentLocaleCode],
-    queryFn: async () => {
-      const res = await request<Conversation[]>({
-        url: '/mcp-chat',
-        method: 'GET',
-      });
-      return res.data;
-    },
-  });
-
-  const convList = conversations ?? [];
-  const selectedConv = convList.find((c) => c.id === selectedConvId) ?? null;
-
-  useEffect(() => {
-    if (!selectedConvId) return;
-    request<Message[]>({
-      url: `/mcp-chat/${selectedConvId}/messages`,
-      method: 'GET',
-    })
-      .then((res) => setMessages(res.data))
-      .catch(() => setMessages([]));
-  }, [selectedConvId]);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, isSending]);
-
-  // Auto-resize textarea
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
-    }
-  }, [input]);
-
-  async function handleNewConversation() {
-    try {
-      const res = await request<Conversation>({
-        url: '/mcp-chat',
-        method: 'POST',
-        data: {},
-      });
-      await refetchConvs();
-      setSelectedConvId(res.data.id);
-      setMessages([]);
-      return res.data.id;
-    } catch {
-      toast.error('Failed to create conversation');
-      return null;
-    }
-  }
-
-  async function handleSend() {
-    if (!input.trim() || isSending) return;
-    let activeConvId = selectedConvId;
-    if (!activeConvId) {
-      activeConvId = await handleNewConversation();
-      if (!activeConvId) return;
-    }
-    setIsSending(true);
-    const currentInput = input;
-    setInput('');
-
-    setMessages((prev) => [
-      ...prev,
-      {
-        id: -Date.now(),
-        conversation_id: activeConvId!,
-        role: 'user',
-        content: currentInput,
-        tool_name: null,
-        tool_call_id: null,
-        created_at: new Date().toISOString(),
-      },
-    ]);
-
-    try {
-      const res = await request<Message[]>({
-        url: `/mcp-chat/${activeConvId}/messages`,
-        method: 'POST',
-        data: { message: currentInput },
-      });
-      setMessages(res.data);
-      await refetchConvs();
-      const hadToolUse = res.data.some(
-        (m) => m.role === 'tool_call' || m.role === 'tool_result'
-      );
-      if (hadToolUse) await refetchUser();
-    } catch {
-      toast.error('Failed to send message');
-      setMessages((prev) => prev.filter((m) => m.id !== -Date.now()));
-    } finally {
-      setIsSending(false);
-    }
-  }
-
-  async function handleDeleteConversation() {
-    if (!convToDelete) return;
-    try {
-      await request({
-        url: '/mcp-chat',
-        method: 'DELETE',
-        data: { ids: [convToDelete.id] },
-      });
-      toast.success('Conversation deleted');
-      if (selectedConvId === convToDelete.id) {
-        setSelectedConvId(null);
-        setMessages([]);
-      }
-      setConvToDelete(null);
-      await refetchConvs();
-    } catch {
-      toast.error('Failed to delete conversation');
-    }
-  }
-
-  const inputArea = (
-    <div className="relative flex items-end gap-2 rounded-2xl bg-background px-5 py-4">
-      <Textarea
-        ref={textareaRef}
-        className="resize-none flex-1 border-0 shadow-none focus-visible:ring-0 p-3 min-h-6 max-h-75 overflow-y-auto text-sm leading-relaxed bg-transparent"
-        placeholder={t('placeholder')}
-        value={input}
-        disabled={isSending}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            void handleSend();
-          }
-        }}
-        rows={1}
-      />
-      <Button
-        size="icon"
-        className="shrink-0 h-8 w-8 rounded-xl cursor-pointer"
-        disabled={isSending || !input.trim()}
-        onClick={() => void handleSend()}
-      >
-        <Send className="h-3.5 w-3.5" />
-      </Button>
-    </div>
-  );
-
-  return (
-    <div className="flex h-screen overflow-hidden bg-background">
-      {/* Sidebar */}
-      <aside className="w-64 shrink-0 flex flex-col border-r bg-muted/30">
-        <div className="p-3 border-b bg-background/50">
-          <Button
-            variant="outline"
-            className="w-full justify-start gap-2 cursor-pointer rounded-xl h-9 text-sm font-medium"
-            onClick={handleNewConversation}
-          >
-            <Plus className="h-4 w-4" />
-            {t('newConversation')}
-          </Button>
-        </div>
-        <div className="px-4 pt-4 pb-1.5">
-          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
-            {t('conversations')}
-          </p>
-        </div>
-        <ScrollArea className="flex-1 px-2 pb-2">
-          {convList.length === 0 ? (
-            <div className="flex flex-col items-center gap-2 py-8 px-4 text-center">
-              <MessageSquare className="h-8 w-8 text-muted-foreground/40" />
-              <p className="text-xs text-muted-foreground">
-                {t('emptyConversations')}
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-0.5 pt-1">
-              {convList.map((conv) => (
-                <div
-                  key={conv.id}
-                  className={`group flex items-center justify-between rounded-xl px-3 py-2 cursor-pointer transition-colors text-sm ${
-                    selectedConvId === conv.id
-                      ? 'bg-primary text-primary-foreground'
-                      : 'hover:bg-accent text-foreground'
-                  }`}
-                  onClick={() => {
-                    setSelectedConvId(conv.id);
-                    setMessages([]);
-                  }}
-                >
-                  <div className="flex items-center gap-2 min-w-0 flex-1">
-                    <MessageSquare className="h-3.5 w-3.5 shrink-0 opacity-60" />
-                    <span className="truncate text-xs font-medium">
-                      {conv.title || `#${conv.id}`}
-                    </span>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className={`h-6 w-6 opacity-0 group-hover:opacity-100 shrink-0 cursor-pointer transition-opacity ${
-                      selectedConvId === conv.id
-                        ? 'hover:bg-primary-foreground/20 text-primary-foreground'
-                        : 'hover:bg-destructive/10 hover:text-destructive'
-                    }`}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setConvToDelete(conv);
-                    }}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
-              ))}
-            </div>
-          )}
-        </ScrollArea>
-      </aside>
-
-      {/* Main area */}
-      <main className="flex-1 flex flex-col overflow-hidden min-w-0">
-        {!selectedConvId ? (
-          /* Empty state */
-          <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6">
-            <div className="flex flex-col items-center gap-3 text-center">
-              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 ring-1 ring-primary/20">
-                <Bot className="h-8 w-8 text-primary" />
-              </div>
-              <h1 className="text-2xl font-bold tracking-tight">
-                {t('title')}
-              </h1>
-              <p className="text-sm text-muted-foreground max-w-sm">
-                {t('description')}
-              </p>
-            </div>
-            <div className="w-full max-w-2xl">{inputArea}</div>
-          </div>
-        ) : (
-          /* Chat state */
-          <>
-            {/* Header */}
-            <header className="h-14 shrink-0 border-b flex items-center px-6 gap-3 bg-background/80 backdrop-blur-sm">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
-                <Bot className="h-4 w-4 text-primary" />
-              </div>
-              <div className="flex flex-col leading-tight">
-                <span className="text-sm font-semibold">
-                  {selectedConv?.title || `Chat #${selectedConvId}`}
-                </span>
-                <span className="text-xs text-muted-foreground">
-                  {t('title')}
-                </span>
-              </div>
-            </header>
-
-            {/* Messages */}
-            <ScrollArea className="flex-1 min-h-0 px-4 py-6">
-              <div className="flex flex-col gap-4 max-w-3xl mx-auto">
-                {messages.map((msg, idx) => {
-                  if (msg.role === 'tool_call') {
-                    return (
-                      <ToolBadge
-                        key={msg.id ?? idx}
-                        message={msg}
-                        variant="call"
-                      />
-                    );
-                  }
-                  if (msg.role === 'tool_result') {
-                    return (
-                      <ToolBadge
-                        key={msg.id ?? idx}
-                        message={msg}
-                        variant="result"
-                      />
-                    );
-                  }
-                  if (msg.role === 'user') {
-                    return (
-                      <div key={msg.id ?? idx} className="flex justify-end">
-                        <div className="max-w-[75%] rounded-2xl rounded-tr-md bg-primary px-4 py-2.5 text-sm text-primary-foreground shadow-sm">
-                          {msg.content}
-                        </div>
-                      </div>
-                    );
-                  }
-                  return (
-                    <div key={msg.id ?? idx} className="flex items-start gap-3">
-                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background shadow-sm">
-                        <Bot className="h-4 w-4 text-muted-foreground" />
-                      </div>
-                      <div className="max-w-[75%] rounded-2xl rounded-tl-md bg-muted px-4 py-2.5 text-sm shadow-sm prose-sm">
-                        <ReactMarkdown
-                          remarkPlugins={[remarkGfm]}
-                          components={markdownComponents as never}
-                        >
-                          {msg.content}
-                        </ReactMarkdown>
-                      </div>
-                    </div>
-                  );
-                })}
-                {isSending && <TypingIndicator />}
-                <div ref={messagesEndRef} />
-              </div>
-            </ScrollArea>
-
-            {/* Input */}
-            <div className="shrink-0 border-t bg-background/80 backdrop-blur-sm px-6 py-4">
-              <div className="max-w-3xl mx-auto">{inputArea}</div>
-            </div>
-          </>
-        )}
-      </main>
-
-      <AlertDialog
-        open={Boolean(convToDelete)}
-        onOpenChange={(open) => {
-          if (!open) setConvToDelete(null);
-        }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t('deleteConversation')}?</AlertDialogTitle>
-            <AlertDialogDescription>
-              {convToDelete?.title || `#${convToDelete?.id}`}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDeleteConversation}>
-              {t('deleteConversation')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-}
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Bot,
+  ChevronDown,
+  ChevronRight,
+  MessageSquare,
+  Plus,
+  Send,
+  Trash2,
+  Wrench,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { toast } from 'sonner';
+
+type Conversation = {
+  id: number;
+  title: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+type Message = {
+  id: number;
+  conversation_id: number;
+  role: 'user' | 'assistant' | 'tool_call' | 'tool_result';
+  content: string;
+  tool_name: string | null;
+  tool_call_id: string | null;
+  created_at: string;
+};
+
+type MarkdownComponentProps = {
+  children?: React.ReactNode;
+  className?: string;
+  href?: string;
+};
+
+const markdownComponents: Record<
+  string,
+  (props: MarkdownComponentProps) => React.ReactNode
+> = {
+  p({ children }) {
+    return <p className="mb-2 last:mb-0 leading-relaxed">{children}</p>;
+  },
+  ul({ children }) {
+    return <ul className="mb-2 list-disc pl-4 space-y-1">{children}</ul>;
+  },
+  ol({ children }) {
+    return <ol className="mb-2 list-decimal pl-4 space-y-1">{children}</ol>;
+  },
+  li({ children }) {
+    return <li className="leading-relaxed">{children}</li>;
+  },
+  strong({ children }) {
+    return <strong className="font-semibold">{children}</strong>;
+  },
+  em({ children }) {
+    return <em className="italic">{children}</em>;
+  },
+  code({ children, className }) {
+    const isBlock = className?.includes('language-');
+    return isBlock ? (
+      <code className="block rounded-md bg-black/10 dark:bg-white/10 px-3 py-2 text-xs font-mono whitespace-pre-wrap my-2">
+        {children}
+      </code>
+    ) : (
+      <code className="rounded bg-black/10 dark:bg-white/10 px-1 py-0.5 text-xs font-mono">
+        {children}
+      </code>
+    );
+  },
+  pre({ children }) {
+    return <pre className="my-2 overflow-x-auto rounded-md">{children}</pre>;
+  },
+  blockquote({ children }) {
+    return (
+      <blockquote className="border-l-2 border-current/30 pl-3 italic my-2 text-current/70">
+        {children}
+      </blockquote>
+    );
+  },
+  h1({ children }) {
+    return (
+      <h1 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h1>
+    );
+  },
+  h2({ children }) {
+    return (
+      <h2 className="text-sm font-bold mb-2 mt-3 first:mt-0">{children}</h2>
+    );
+  },
+  h3({ children }) {
+    return (
+      <h3 className="text-sm font-semibold mb-1 mt-2 first:mt-0">{children}</h3>
+    );
+  },
+  a({ href, children }) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="underline underline-offset-2 hover:opacity-80"
+      >
+        {children}
+      </a>
+    );
+  },
+  hr() {
+    return <hr className="my-3 border-current/20" />;
+  },
+  table({ children }) {
+    return (
+      <div className="my-2 overflow-x-auto">
+        <table className="text-xs border-collapse w-full">{children}</table>
+      </div>
+    );
+  },
+  th({ children }) {
+    return (
+      <th className="border border-current/20 px-2 py-1 font-semibold text-left bg-current/5">
+        {children}
+      </th>
+    );
+  },
+  td({ children }) {
+    return <td className="border border-current/20 px-2 py-1">{children}</td>;
+  },
+};
+
+function ToolBadge({
+  message,
+  variant,
+}: {
+  message: Message;
+  variant: 'call' | 'result';
+}) {
+  const [expanded, setExpanded] = useState(false);
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(message.content);
+  } catch {
+    parsed = message.content;
+  }
+
+  const colorClass =
+    variant === 'call'
+      ? 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-800 dark:bg-violet-950 dark:text-violet-300'
+      : 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300';
+
+  const preClass =
+    variant === 'call'
+      ? 'border-violet-100 bg-violet-50/50 text-violet-800 dark:border-violet-900 dark:bg-violet-950/50 dark:text-violet-200'
+      : 'border-emerald-100 bg-emerald-50/50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-200';
+
+  return (
+    <div className="my-1 flex flex-col items-start">
+      <button
+        type="button"
+        className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors hover:opacity-80 ${colorClass}`}
+        onClick={() => setExpanded((v) => !v)}
+      >
+        <Wrench className="h-3 w-3 shrink-0" />
+        <span className="font-mono">{message.tool_name}</span>
+        {expanded ? (
+          <ChevronDown className="h-3 w-3 shrink-0" />
+        ) : (
+          <ChevronRight className="h-3 w-3 shrink-0" />
+        )}
+      </button>
+      {expanded && (
+        <pre
+          className={`mt-1.5 w-full max-w-lg rounded-lg border px-3 py-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap ${preClass}`}
+        >
+          {typeof parsed === 'string'
+            ? parsed
+            : JSON.stringify(parsed, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+function TypingIndicator() {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background">
+        <Bot className="h-4 w-4 text-muted-foreground" />
+      </div>
+      <div className="flex items-center gap-1 rounded-2xl rounded-tl-sm bg-muted px-4 py-3 shadow-sm">
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
+          style={{ animationDelay: '0ms' }}
+        />
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
+          style={{ animationDelay: '150ms' }}
+        />
+        <span
+          className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-bounce"
+          style={{ animationDelay: '300ms' }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function McpChatPage() {
+  const { request, currentLocaleCode, refetchUser } = useApp();
+  const t = useTranslations('core.McpChatPage');
+
+  const [selectedConvId, setSelectedConvId] = useState<number | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isSending, setIsSending] = useState(false);
+  const [convToDelete, setConvToDelete] = useState<Conversation | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const { data: conversations, refetch: refetchConvs } = useQuery<
+    Conversation[]
+  >({
+    queryKey: ['mcp-chat-conversations', currentLocaleCode],
+    queryFn: async () => {
+      const res = await request<Conversation[]>({
+        url: '/mcp-chat',
+        method: 'GET',
+      });
+      return res.data;
+    },
+  });
+
+  const convList = conversations ?? [];
+  const selectedConv = convList.find((c) => c.id === selectedConvId) ?? null;
+
+  useEffect(() => {
+    if (!selectedConvId) return;
+    request<Message[]>({
+      url: `/mcp-chat/${selectedConvId}/messages`,
+      method: 'GET',
+    })
+      .then((res) => setMessages(res.data))
+      .catch(() => setMessages([]));
+  }, [selectedConvId]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages, isSending]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
+    }
+  }, [input]);
+
+  async function handleNewConversation() {
+    try {
+      const res = await request<Conversation>({
+        url: '/mcp-chat',
+        method: 'POST',
+        data: {},
+      });
+      await refetchConvs();
+      setSelectedConvId(res.data.id);
+      setMessages([]);
+      return res.data.id;
+    } catch {
+      toast.error('Failed to create conversation');
+      return null;
+    }
+  }
+
+  async function handleSend() {
+    if (!input.trim() || isSending) return;
+    let activeConvId = selectedConvId;
+    if (!activeConvId) {
+      activeConvId = await handleNewConversation();
+      if (!activeConvId) return;
+    }
+    setIsSending(true);
+    const currentInput = input;
+    setInput('');
+
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: -Date.now(),
+        conversation_id: activeConvId!,
+        role: 'user',
+        content: currentInput,
+        tool_name: null,
+        tool_call_id: null,
+        created_at: new Date().toISOString(),
+      },
+    ]);
+
+    try {
+      const res = await request<Message[]>({
+        url: `/mcp-chat/${activeConvId}/messages`,
+        method: 'POST',
+        data: { message: currentInput },
+      });
+      setMessages(res.data);
+      await refetchConvs();
+      const hadToolUse = res.data.some(
+        (m) => m.role === 'tool_call' || m.role === 'tool_result'
+      );
+      if (hadToolUse) await refetchUser();
+    } catch {
+      toast.error('Failed to send message');
+      setMessages((prev) => prev.filter((m) => m.id !== -Date.now()));
+    } finally {
+      setIsSending(false);
+    }
+  }
+
+  async function handleDeleteConversation() {
+    if (!convToDelete) return;
+    try {
+      await request({
+        url: '/mcp-chat',
+        method: 'DELETE',
+        data: { ids: [convToDelete.id] },
+      });
+      toast.success('Conversation deleted');
+      if (selectedConvId === convToDelete.id) {
+        setSelectedConvId(null);
+        setMessages([]);
+      }
+      setConvToDelete(null);
+      await refetchConvs();
+    } catch {
+      toast.error('Failed to delete conversation');
+    }
+  }
+
+  const inputArea = (
+    <div className="relative flex items-end gap-2 rounded-2xl bg-background px-5 py-4">
+      <Textarea
+        ref={textareaRef}
+        className="resize-none flex-1 border-0 shadow-none focus-visible:ring-0 p-3 min-h-6 max-h-75 overflow-y-auto text-sm leading-relaxed bg-transparent"
+        placeholder={t('placeholder')}
+        value={input}
+        disabled={isSending}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            void handleSend();
+          }
+        }}
+        rows={1}
+      />
+      <Button
+        size="icon"
+        className="shrink-0 h-8 w-8 rounded-xl cursor-pointer"
+        disabled={isSending || !input.trim()}
+        onClick={() => void handleSend()}
+      >
+        <Send className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      {/* Sidebar */}
+      <aside className="w-64 shrink-0 flex flex-col border-r bg-muted/30">
+        <div className="p-3 border-b bg-background/50">
+          <Button
+            variant="outline"
+            className="w-full justify-start gap-2 cursor-pointer rounded-xl h-9 text-sm font-medium"
+            onClick={handleNewConversation}
+          >
+            <Plus className="h-4 w-4" />
+            {t('newConversation')}
+          </Button>
+        </div>
+        <div className="px-4 pt-4 pb-1.5">
+          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            {t('conversations')}
+          </p>
+        </div>
+        <ScrollArea className="flex-1 px-2 pb-2">
+          {convList.length === 0 ? (
+            <div className="flex flex-col items-center gap-2 py-8 px-4 text-center">
+              <MessageSquare className="h-8 w-8 text-muted-foreground/40" />
+              <p className="text-xs text-muted-foreground">
+                {t('emptyConversations')}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-0.5 pt-1">
+              {convList.map((conv) => (
+                <div
+                  key={conv.id}
+                  className={`group flex items-center justify-between rounded-xl px-3 py-2 cursor-pointer transition-colors text-sm ${
+                    selectedConvId === conv.id
+                      ? 'bg-primary text-primary-foreground'
+                      : 'hover:bg-accent text-foreground'
+                  }`}
+                  onClick={() => {
+                    setSelectedConvId(conv.id);
+                    setMessages([]);
+                  }}
+                >
+                  <div className="flex items-center gap-2 min-w-0 flex-1">
+                    <MessageSquare className="h-3.5 w-3.5 shrink-0 opacity-60" />
+                    <span className="truncate text-xs font-medium">
+                      {conv.title || `#${conv.id}`}
+                    </span>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className={`h-6 w-6 opacity-0 group-hover:opacity-100 shrink-0 cursor-pointer transition-opacity ${
+                      selectedConvId === conv.id
+                        ? 'hover:bg-primary-foreground/20 text-primary-foreground'
+                        : 'hover:bg-destructive/10 hover:text-destructive'
+                    }`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setConvToDelete(conv);
+                    }}
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </aside>
+
+      {/* Main area */}
+      <main className="flex-1 flex flex-col overflow-hidden min-w-0">
+        {!selectedConvId ? (
+          /* Empty state */
+          <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6">
+            <div className="flex flex-col items-center gap-3 text-center">
+              <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 ring-1 ring-primary/20">
+                <Bot className="h-8 w-8 text-primary" />
+              </div>
+              <h1 className="text-2xl font-bold tracking-tight">
+                {t('title')}
+              </h1>
+              <p className="text-sm text-muted-foreground max-w-sm">
+                {t('description')}
+              </p>
+            </div>
+            <div className="w-full max-w-2xl">{inputArea}</div>
+          </div>
+        ) : (
+          /* Chat state */
+          <>
+            {/* Header */}
+            <header className="h-14 shrink-0 border-b flex items-center px-6 gap-3 bg-background/80 backdrop-blur-sm">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+                <Bot className="h-4 w-4 text-primary" />
+              </div>
+              <div className="flex flex-col leading-tight">
+                <span className="text-sm font-semibold">
+                  {selectedConv?.title || `Chat #${selectedConvId}`}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {t('title')}
+                </span>
+              </div>
+            </header>
+
+            {/* Messages */}
+            <ScrollArea className="flex-1 min-h-0 px-4 py-6">
+              <div className="flex flex-col gap-4 max-w-3xl mx-auto">
+                {messages.map((msg, idx) => {
+                  if (msg.role === 'tool_call') {
+                    return (
+                      <ToolBadge
+                        key={msg.id ?? idx}
+                        message={msg}
+                        variant="call"
+                      />
+                    );
+                  }
+                  if (msg.role === 'tool_result') {
+                    return (
+                      <ToolBadge
+                        key={msg.id ?? idx}
+                        message={msg}
+                        variant="result"
+                      />
+                    );
+                  }
+                  if (msg.role === 'user') {
+                    return (
+                      <div key={msg.id ?? idx} className="flex justify-end">
+                        <div className="max-w-[75%] rounded-2xl rounded-tr-md bg-primary px-4 py-2.5 text-sm text-primary-foreground shadow-sm">
+                          {msg.content}
+                        </div>
+                      </div>
+                    );
+                  }
+                  return (
+                    <div key={msg.id ?? idx} className="flex items-start gap-3">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background shadow-sm">
+                        <Bot className="h-4 w-4 text-muted-foreground" />
+                      </div>
+                      <div className="max-w-[75%] rounded-2xl rounded-tl-md bg-muted px-4 py-2.5 text-sm shadow-sm prose-sm">
+                        <ReactMarkdown
+                          remarkPlugins={[remarkGfm]}
+                          components={markdownComponents as never}
+                        >
+                          {msg.content}
+                        </ReactMarkdown>
+                      </div>
+                    </div>
+                  );
+                })}
+                {isSending && <TypingIndicator />}
+                <div ref={messagesEndRef} />
+              </div>
+            </ScrollArea>
+
+            {/* Input */}
+            <div className="shrink-0 border-t bg-background/80 backdrop-blur-sm px-6 py-4">
+              <div className="max-w-3xl mx-auto">{inputArea}</div>
+            </div>
+          </>
+        )}
+      </main>
+
+      <AlertDialog
+        open={Boolean(convToDelete)}
+        onOpenChange={(open) => {
+          if (!open) setConvToDelete(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteConversation')}?</AlertDialogTitle>
+            <AlertDialogDescription>
+              {convToDelete?.title || `#${convToDelete?.id}`}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConversation}>
+              {t('deleteConversation')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}