feat(frontend): schema-linking viewer (mermaid+table) + markdown view

TDD: SchemaLinkingViewer with mocked renderMermaid, toggle flowchart↔table,
≤45 element cap with Italian notice. MarkdownView renders mermaid fences.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/viewers/MarkdownView.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { Components } from "react-markdown";
+import { renderMermaid } from "./mermaid";
+
+function MermaidBlock({ code }: { code: string }) {
+  const [svg, setSvg] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  useEffect(() => {
+    renderMermaid(code)
+      .then(setSvg)
+      .catch((e: unknown) =>
+        setError(e instanceof Error ? e.message : String(e))
+      );
+  }, [code]);
+
+  if (error) return <pre className="text-red-500 text-xs">{error}</pre>;
+  if (!svg) return <pre className="text-xs opacity-50">{code}</pre>;
+  // eslint-disable-next-line react/no-danger
+  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
+}
+
+const components: Components = {
+  code({ className, children }) {
+    const lang = /language-(\w+)/.exec(className ?? "")?.[1];
+    const code = String(children).replace(/\n$/, "");
+    if (lang === "mermaid") {
+      return <MermaidBlock code={code} />;
+    }
+    return (
+      <code className={className}>
+        {children}
+      </code>
+    );
+  },
+  pre({ children }) {
+    return <pre className="overflow-auto rounded bg-muted p-3 text-sm">{children}</pre>;
+  },
+};
+
+export function MarkdownView({ source }: { source: string }) {
+  return (
+    <div className="markdown-view overflow-auto max-h-[60vh] prose prose-sm dark:prose-invert p-3">
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {source}
+      </ReactMarkdown>
+    </div>
+  );
+}