Fix mermaid xychart rendering and ignore playwright artifacts

Author: owenisas

.gitignore

@@ -63,6 +63,9 @@ backend/math_to_manim_temp/
 backend/test_gen_only.py
 backend/test_manim_tool.py
 
+# Playwright artifacts
+output/playwright/
+
 # Deployment Info (Generated)
 # API_ENDPOINT.md (Choosing to commit this for team visibility, uncomment if local only)
 fpai-cbcb2-firebase-adminsdk-fbsvc-5feb40f951.json

frontend/src/components/ui/RichText.tsx

@@ -25,7 +25,7 @@ import {
   YouTubeEmbedBlock,
   getVariantStyles,
 } from "@/components/block-types"
-import { parseGraphFromTable, type GraphType } from "@/lib/graphFromTable"
+import { parseGraphFromTable, type GraphType, type ParsedGraph } from "@/lib/graphFromTable"
 import { AsyncVideo } from "@/components/block-types/Video"
 import type { QuizQuestion } from "@/types/block"
 import type { BlockVariant, VariantStyle } from "@/types/block-types"
@@ -41,6 +41,58 @@ function parseGraphTag(line: string): GraphType | null {
   return match[1].toLowerCase() as GraphType
 }
 
+function parseMermaidList(raw: string): string[] {
+  const inner = raw.trim().replace(/^\[/, "").replace(/\]$/, "")
+  if (!inner) return []
+  const tokens: string[] = []
+  const re = /"([^"]+)"|'([^']+)'|([^,\]]+)/g
+  let match: RegExpExecArray | null
+  while ((match = re.exec(inner)) !== null) {
+    const value = (match[1] ?? match[2] ?? match[3] ?? "").trim()
+    if (value) tokens.push(value)
+  }
+  return tokens
+}
+
+function parseMermaidNumbers(raw: string): number[] {
+  const inner = raw.trim().replace(/^\[/, "").replace(/\]$/, "")
+  if (!inner) return []
+  return inner
+    .split(",")
+    .map((part) => Number(part.trim()))
+    .filter((value) => Number.isFinite(value))
+}
+
+function parseMermaidXyChart(code: string): ParsedGraph | null {
+  if (!/\bxychart-beta\b/i.test(code)) return null
+
+  const xAxisMatch = code.match(/^\s*x-axis\s+(.+)$/im)
+  const yAxisMatch = code.match(/^\s*y-axis\s+"([^"]+)"/im)
+  const barMatch = code.match(/^\s*bar\s+\[([^\]]+)\]/im)
+  const lineMatch = code.match(/^\s*line\s+\[([^\]]+)\]/im)
+
+  const values = barMatch
+    ? parseMermaidNumbers(barMatch[1])
+    : lineMatch
+      ? parseMermaidNumbers(lineMatch[1])
+      : []
+  if (values.length === 0) return null
+
+  const parsedLabels = xAxisMatch ? parseMermaidList(xAxisMatch[1]) : []
+  const labels = Array.from({ length: values.length }, (_, idx) => parsedLabels[idx] || `Item ${idx + 1}`)
+  const count = Math.min(labels.length, values.length)
+  if (count === 0) return null
+
+  return {
+    type: barMatch ? "bar" : "line",
+    labels: labels.slice(0, count),
+    series: [{
+      name: yAxisMatch?.[1]?.trim() || "Value",
+      values: values.slice(0, count),
+    }],
+  }
+}
+
 function findNextIndex(haystack: string, from: number, needle: string): number {
   const idx = haystack.indexOf(needle, from)
   return idx >= 0 ? idx : Number.POSITIVE_INFINITY
@@ -1045,10 +1097,54 @@ export function Markdownish({
       }
       if (endIndex >= 0) {
         i = endIndex
+        const code = collected.join("\n")
+        const lowerLang = lang.toLowerCase()
+        if (lowerLang === "mermaid") {
+          const mermaidGraph = parseMermaidXyChart(code)
+          if (mermaidGraph) {
+            const graphSnippet = `\`\`\`mermaid\n${code}\n\`\`\``
+            const graphActions = effectiveSourceBlockId
+              ? resolveBlockActions("graph", { sourceBlockId: effectiveSourceBlockId }, {
+                  chart: mermaidGraph,
+                  markdownSnippet: graphSnippet,
+                })
+              : []
+            const graphAnalyze = graphActions.find((action) => action.request.actionType === "analyze")
+            const graphConvertActions = graphActions.filter((action) => action.request.actionType === "convert")
+            elements.push(
+              <GraphBlock
+                key={`code-graph-${i}`}
+                chart={mermaidGraph}
+                variant={variant}
+                COLORS={COLORS}
+                onAnalyze={
+                  graphAnalyze && onBlockAction
+                    ? () => onBlockAction({ ...graphAnalyze.request, sourceBlockId: effectiveSourceBlockId })
+                    : undefined
+                }
+                onConvertType={
+                  graphConvertActions.length > 0 && onBlockAction
+                    ? (targetType) =>
+                        (() => {
+                          const matched =
+                            graphConvertActions.find((action) => action.request.targetGraphType === targetType) ||
+                            graphConvertActions[0]
+                          onBlockAction({
+                            ...matched.request,
+                            sourceBlockId: effectiveSourceBlockId,
+                          })
+                        })()
+                    : undefined
+                }
+              />,
+            )
+            continue
+          }
+        }
         elements.push(
           <CodeBlock
             key={`code-${i}`}
-            code={collected.join("\n")}
+            code={code}
             language={lang}
             variant={variant}
             COLORS={COLORS}