feat: add mindmap components from jarvis frontend

- Copied mindmap visualization components (ReactFlow-based interactive graph)
- Added MindmapViewer, ReactFlowEditor, MermaidViewer
- Included all node types: Concept, Task, Idea, Project
- Added controls: NodeCreateModal, ExportButton
- Created mindmap route at /mindmap
- Added useGraphData hook for knowledge graph API
- Copied auth-client and api utilities (dependencies)

Note: Requires better-auth packages to be installed for full compilation

apps/web/src/components/mindmap/MermaidViewer.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+
+interface MermaidViewerProps {
+  diagram: string;
+  className?: string;
+  onNodeClick?: (nodeId: string) => void;
+}
+
+export function MermaidViewer({ diagram, className = '', onNodeClick }: MermaidViewerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const renderDiagram = useCallback(async () => {
+    if (!containerRef.current || !diagram) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Initialize mermaid with theme based on document
+      const isDark = document.documentElement.classList.contains('dark');
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: isDark ? 'dark' : 'default',
+        flowchart: {
+          useMaxWidth: true,
+          htmlLabels: true,
+          curve: 'basis',
+        },
+        securityLevel: 'loose',
+      });
+
+      // Generate unique ID for this render
+      const id = `mermaid-${Date.now()}`;
+
+      // Render the diagram
+      const { svg } = await mermaid.render(id, diagram);
+
+      if (containerRef.current) {
+        containerRef.current.innerHTML = svg;
+
+        // Add click handlers to nodes if callback provided
+        if (onNodeClick) {
+          const nodes = containerRef.current.querySelectorAll('.node');
+          nodes.forEach((node) => {
+            node.addEventListener('click', () => {
+              const nodeId = node.id?.replace(/^flowchart-/, '').replace(/-\d+$/, '');
+              if (nodeId) {
+                onNodeClick(nodeId);
+              }
+            });
+            (node as HTMLElement).style.cursor = 'pointer';
+          });
+        }
+      }
+    } catch (err) {
+      console.error('Mermaid rendering error:', err);
+      setError(err instanceof Error ? err.message : 'Failed to render diagram');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [diagram, onNodeClick]);
+
+  useEffect(() => {
+    renderDiagram();
+  }, [renderDiagram]);
+
+  // Re-render on theme change
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'class') {
+          renderDiagram();
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+
+    return () => observer.disconnect();
+  }, [renderDiagram]);
+
+  if (!diagram) {
+    return (
+      <div className={`flex items-center justify-center p-8 text-gray-500 ${className}`}>
+        No diagram data available
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`flex flex-col items-center justify-center p-8 ${className}`}>
+        <div className="text-red-500 mb-2">Failed to render diagram</div>
+        <div className="text-sm text-gray-500">{error}</div>
+        <pre className="mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto max-w-full">
+          {diagram}
+        </pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-gray-900/50">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
+        </div>
+      )}
+      <div
+        ref={containerRef}
+        className="mermaid-container overflow-auto"
+        style={{ minHeight: '200px' }}
+      />
+    </div>
+  );
+}