[codex] Render architecture Mermaid diagrams

package.json

@@ -17,7 +17,7 @@
     "clsx": "2.1.1",
     "docx": "^8.5.0",
     "jszip": "3.10.1",
-    "next": "14.2.18",
+    "next": "14.2.35",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-markdown": "9.0.1",
@@ -29,7 +29,7 @@
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.20",
-    "postcss": "8.4.49",
+    "postcss": "8.5.10",
     "tailwindcss": "3.4.14",
     "typescript": "5.6.3"
   }

src/app/projects/[id]/artifacts/page.tsx

@@ -3,10 +3,12 @@
 import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { useEffect, useMemo, useState } from "react";
+import { Children, isValidElement, useEffect, useMemo, useState, type ReactNode } from "react";
+import type { Components } from "react-markdown";
 import { useParams } from "next/navigation";
 import { useStore } from "@/lib/store";
 import { Badge, Button, Card } from "@/components/ui";
+import MermaidDiagram from "@/components/MermaidDiagram";
 import { generateBundle } from "@/lib/generators";
 import { downloadFile, downloadProjectBundle, downloadProjectJSON } from "@/lib/export";
 import { downloadDocx } from "@/lib/docx";
@@ -20,6 +22,26 @@ const ARTIFACT_GROUPS = [
   { title: "Implementation", keys: ["coding-agent-prompts"] },
 ];
 
+type CodeElementProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+function mermaidCodeFromPre(children: ReactNode) {
+  const child = Children.toArray(children)[0];
+  if (!isValidElement<CodeElementProps>(child)) return null;
+  if (!child.props.className?.split(/\s+/).includes("language-mermaid")) return null;
+  return String(child.props.children || "").replace(/\n$/, "");
+}
+
+const markdownComponents: Components = {
+  pre({ node: _node, children, ...props }) {
+    const chart = mermaidCodeFromPre(children);
+    if (chart) return <MermaidDiagram chart={chart} />;
+    return <pre {...props}>{children}</pre>;
+  },
+};
+
 export default function ArtifactsPage() {
   const params = useParams<{ id: string }>();
   const id = params.id;
@@ -153,7 +175,9 @@ export default function ArtifactsPage() {
             </div>
           </div>
           <div className="prose-doc">
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>{active.body}</ReactMarkdown>
+            <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>
+              {active.body}
+            </ReactMarkdown>
           </div>
         </Card>
       </div>