feat: enhance Markdown component with syntax highlighting and improve code snippet display

apps/web/app/components/McpConfigSnippet.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { useState } from "react";
+import Markdown from "@/components/Markdown";
 
 const CONFIGS = [
   {
     id: "claude",
     label: "Claude Desktop",
+    lang: "json",
     filename: "~/Library/Application Support/Claude/claude_desktop_config.json",
     content: `{
   "mcpServers": {
@@ -23,6 +25,7 @@ const CONFIGS = [
   {
     id: "http",
     label: "Remote HTTP (SSE)",
+    lang: "json",
     filename: "Streamable HTTP Endpoint",
     content: `{
   "mcpServers": {
@@ -38,6 +41,7 @@ const CONFIGS = [
   {
     id: "cli",
     label: "CLI Client",
+    lang: "bash",
     filename: "Terminal One-Shot / REPL",
     content: `# One-shot question
 bun run apps/mcp-client/src/ask.ts "How does ret2win stack alignment work?"
@@ -49,18 +53,15 @@ bun run apps/mcp-client/src/index.ts`,
 
 export default function McpConfigSnippet() {
   const [activeTab, setActiveTab] = useState("claude");
-  const [copied, setCopied] = useState(false);
 
   const current = CONFIGS.find((c) => c.id === activeTab) || CONFIGS[0];
 
-  function handleCopy() {
-    navigator.clipboard.writeText(current.content);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }
+  const markdownSnippet = `\`\`\`${current.lang}
+${current.content}
+\`\`\``;
 
   return (
-    <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-md">
+    <div className="bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl overflow-hidden shadow-sm">
       {/* Header bar with tabs */}
       <div className="flex items-center justify-between px-4 py-2.5 bg-[var(--bg-elevated)] border-b border-[var(--border-color)] flex-wrap gap-2">
         <div className="flex items-center gap-1.5">
@@ -68,9 +69,9 @@ export default function McpConfigSnippet() {
             <button
               key={c.id}
               onClick={() => setActiveTab(c.id)}
-              className={`px-3 py-1 text-xs rounded-md font-medium transition-all ${
+              className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-all cursor-pointer ${
                 activeTab === c.id
-                  ? "bg-[var(--brand)] text-white shadow-sm"
+                  ? "bg-[var(--brand)] text-white shadow-xs"
                   : "text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-surface)]"
               }`}
             >
@@ -79,37 +80,25 @@ export default function McpConfigSnippet() {
           ))}
         </div>
 
-        <button
-          onClick={handleCopy}
-          type="button"
-          className="flex items-center gap-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)] bg-[var(--bg-surface)] hover:bg-[var(--bg-elevated-hover)] px-2.5 py-1 rounded border border-[var(--border-color)] transition-all shadow-sm"
-        >
-          {copied ? (
-            <>
-              <svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              </svg>
-              <span className="text-emerald-500 font-medium">Copied!</span>
-            </>
-          ) : (
-            <>
-              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-              <span>Copy Config</span>
-            </>
-          )}
-        </button>
+        <div className="text-[11px] text-[var(--text-dim)] font-mono hidden sm:block">
+          {current.filename}
+        </div>
       </div>
 
-      {/* Code preview */}
-      <pre className="p-4 text-xs font-mono text-[var(--pre-text)] bg-[var(--code-block-bg)] overflow-x-auto leading-relaxed">
-        <code>{current.content}</code>
-      </pre>
+      {/* Code preview via Markdown syntax highlighter */}
+      <div className="p-4 [&>.prose>.group]:my-0 [&>.prose]:max-w-none">
+        <Markdown source={markdownSnippet} />
+      </div>
 
-      <div className="px-4 py-2 bg-[var(--bg-elevated)] border-t border-[var(--border-color)] text-[11px] text-[var(--text-dim)]">
-        Config location: <span className="font-mono text-[var(--text-muted)]">{current.filename}</span>
+      <div className="px-4 py-2 bg-[var(--bg-elevated)] border-t border-[var(--border-color)] text-[11px] text-[var(--text-dim)] flex items-center justify-between flex-wrap gap-2">
+        <span>
+          Config target: <span className="font-mono text-[var(--text-secondary)]">{current.filename}</span>
+        </span>
+        <span className="text-[10px] text-[var(--text-muted)]">
+          Format: <span className="uppercase font-mono font-semibold">{current.lang}</span>
+        </span>
       </div>
     </div>
   );
 }
+