@geminilight/mindos 0.6.72 → 0.6.73

package/_standalone/components/renderers/csv/TableView.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import React, { useState, useMemo, useEffect } from 'react';
+import { ChevronUp, ChevronDown, Plus, Trash2 } from 'lucide-react';
+import type { TableConfig } from './types';
+import { serializeCSV } from './types';
+import { EditableCell, AddRowTr } from './EditableCell';
+
+export function TableView({ headers, rows, cfg, saveAction }: {
+  headers: string[];
+  rows: string[][];
+  cfg: TableConfig;
+  saveAction: (content: string) => Promise<void>;
+}) {
+  const [localRows, setLocalRows] = useState(rows);
+  const [showAdd, setShowAdd] = useState(false);
+  useEffect(() => { setLocalRows(rows); }, [rows]);
+
+  const visibleIndices = useMemo(
+    () => headers.map((_, i) => i).filter(i => !cfg.hiddenFields.includes(headers[i])),
+    [headers, cfg.hiddenFields],
+  );
+
+  const sortIdx = headers.indexOf(cfg.sortField);
+
+  const processedRows = useMemo(() => {
+    let result = [...localRows];
+    if (sortIdx >= 0) {
+      result.sort((a, b) => {
+        const va = a[sortIdx] ?? '', vb = b[sortIdx] ?? '';
+        const na = parseFloat(va), nb = parseFloat(vb);
+        const cmp = (!isNaN(na) && !isNaN(nb)) ? na - nb : va.localeCompare(vb);
+        return cfg.sortDir === 'asc' ? cmp : -cmp;
+      });
+    }
+    return result;
+  }, [localRows, sortIdx, cfg.sortDir]);
+
+  const groupIdx = headers.indexOf(cfg.groupField);
+
+  type Section = { key: string | null; rows: { row: string[]; orig: string[] }[] };
+  const sections = useMemo((): Section[] => {
+    if (groupIdx < 0) return [{ key: null, rows: processedRows.map(r => ({ row: r, orig: r })) }];
+    const map = new Map<string, string[][]>();
+    for (const row of processedRows) {
+      const k = row[groupIdx] || '(empty)';
+      if (!map.has(k)) map.set(k, []);
+      map.get(k)!.push(row);
+    }
+    return [...map.entries()].map(([key, rs]) => ({ key, rows: rs.map(r => ({ row: r, orig: r })) }));
+  }, [processedRows, groupIdx]);
+
+  async function commitCell(origRow: string[], colIdx: number, val: string) {
+    const updated = localRows.map(r => r === origRow ? r.map((c, ci) => ci === colIdx ? val : c) : r);
+    setLocalRows(updated);
+    await saveAction(serializeCSV(headers, updated));
+  }
+
+  async function deleteRow(origRow: string[]) {
+    const updated = localRows.filter(r => r !== origRow);
+    setLocalRows(updated);
+    await saveAction(serializeCSV(headers, updated));
+  }
+
+  async function addRow(newRow: string[]) {
+    const updated = [...localRows, newRow];
+    setLocalRows(updated);
+    setShowAdd(false);
+    await saveAction(serializeCSV(headers, updated));
+  }
+
+  const thStyle: React.CSSProperties = {
+    borderBottom: '1px solid var(--border)',
+    fontSize: '0.72rem',
+    letterSpacing: '0.05em',
+    textTransform: 'uppercase',
+    color: 'var(--muted-foreground)',
+    fontWeight: 600,
+  };
+
+  let rowCounter = 0;
+
+  return (
+    <div className="rounded-xl overflow-hidden border" style={{ borderColor: 'var(--border)' }}>
+      <div className="overflow-x-auto">
+        <table className="min-w-full text-sm border-collapse">
+          <thead>
+            <tr style={{ background: 'var(--muted)' }}>
+              {visibleIndices.map(ci => (
+                <th key={ci} className="px-4 py-2.5 text-left whitespace-nowrap" style={thStyle}>
+                  <div className="flex items-center gap-1">
+                    {headers[ci]}
+                    {cfg.sortField === headers[ci] && (
+                      cfg.sortDir === 'asc'
+                        ? <ChevronUp size={10} style={{ color: 'var(--amber)' }} />
+                        : <ChevronDown size={10} style={{ color: 'var(--amber)' }} />
+                    )}
+                  </div>
+                </th>
+              ))}
+              <th className="w-8" style={{ ...thStyle, background: 'var(--muted)' }} />
+            </tr>
+          </thead>
+          <tbody>
+            {sections.map((section, si) => (
+              <React.Fragment key={section.key ?? `section-${si}`}>
+                {section.key !== null && (
+                  <tr key={`grp-${section.key}`}>
+                    <td colSpan={visibleIndices.length + 1} className="px-4 py-1.5"
+                      style={{ background: 'var(--accent)', borderBottom: '1px solid var(--border)', borderTop: '1px solid var(--border)' }}
+                    >
+                      <span className="text-xs font-semibold font-display" style={{ color: 'var(--muted-foreground)' }}>
+                        {section.key} · {section.rows.length}
+                      </span>
+                    </td>
+                  </tr>
+                )}
+                {section.rows.map(({ row, orig }) => {
+                  const ri = rowCounter++;
+                  return (
+                    <tr key={ri} className="group transition-colors"
+                      style={{ background: ri % 2 === 0 ? 'var(--background)' : 'var(--card)' }}
+                      onMouseEnter={e => (e.currentTarget.style.background = 'var(--muted)')}
+                      onMouseLeave={e => (e.currentTarget.style.background = ri % 2 === 0 ? 'var(--background)' : 'var(--card)')}
+                    >
+                      {visibleIndices.map(ci => (
+                        <td key={ci} className="px-4 py-2 max-w-xs" style={{ borderBottom: '1px solid var(--border)' }}>
+                          <EditableCell value={row[ci] ?? ''} onCommit={v => commitCell(orig, ci, v)} />
+                        </td>
+                      ))}
+                      <td className="px-2 py-2" style={{ borderBottom: '1px solid var(--border)' }}>
+                        <button onClick={() => deleteRow(orig)}
+                          className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-destructive/10"
+                          style={{ color: 'var(--muted-foreground)' }}
+                        ><Trash2 size={12} /></button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </React.Fragment>
+            ))}
+            {showAdd && (
+              <AddRowTr headers={headers} visibleIndices={visibleIndices} onAdd={addRow} onCancel={() => setShowAdd(false)} />
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="px-4 py-2 flex items-center justify-between" style={{ background: 'var(--muted)', borderTop: '1px solid var(--border)' }}>
+        <span className="text-xs font-display" style={{ color: 'var(--muted-foreground)' }}>
+          {localRows.length} rows · {headers.length} cols
+        </span>
+        {!showAdd
+          ? <button onClick={() => setShowAdd(true)} className="flex items-center gap-1 text-xs px-2.5 py-1 rounded-md"
+              style={{ color: 'var(--amber)', background: 'var(--amber-dim)' }}
+            ><Plus size={12} /> Add row</button>
+          : <button onClick={() => setShowAdd(false)} className="text-xs px-2.5 py-1 rounded-md"
+              style={{ color: 'var(--muted-foreground)' }}
+            >Cancel</button>
+        }
+      </div>
+    </div>
+  );
+}

package/_standalone/components/renderers/csv/types.ts

@@ -0,0 +1,87 @@
+import Papa from 'papaparse';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ViewType = 'table' | 'gallery' | 'board';
+
+export interface TableConfig {
+  sortField: string;
+  sortDir: 'asc' | 'desc';
+  groupField: string;
+  hiddenFields: string[];
+}
+
+export interface GalleryConfig {
+  titleField: string;
+  descField: string;
+  tagField: string;
+}
+
+export interface BoardConfig {
+  groupField: string;
+  titleField: string;
+  descField: string;
+}
+
+export interface CsvConfig {
+  activeView: ViewType;
+  table: TableConfig;
+  gallery: GalleryConfig;
+  board: BoardConfig;
+}
+
+export function defaultConfig(headers: string[]): CsvConfig {
+  return {
+    activeView: 'table',
+    table: { sortField: '', sortDir: 'asc', groupField: '', hiddenFields: [] },
+    gallery: { titleField: headers[0] ?? '', descField: headers[1] ?? '', tagField: headers[2] ?? '' },
+    board: { groupField: headers[headers.length - 1] ?? '', titleField: headers[0] ?? '', descField: headers[1] ?? '' },
+  };
+}
+
+function configKey(filePath: string) { return `mindos-csv-config:${filePath}`; }
+
+export function loadConfig(filePath: string, headers: string[]): CsvConfig {
+  try {
+    const raw = localStorage.getItem(configKey(filePath));
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      const def = defaultConfig(headers);
+      return { ...def, ...parsed, table: { ...def.table, ...parsed.table }, gallery: { ...def.gallery, ...parsed.gallery }, board: { ...def.board, ...parsed.board } };
+    }
+  } catch { /* ignore */ }
+  return defaultConfig(headers);
+}
+
+export function saveConfig(filePath: string, cfg: CsvConfig) {
+  try { localStorage.setItem(configKey(filePath), JSON.stringify(cfg)); } catch { /* ignore */ }
+}
+
+// ─── Parse / serialize ────────────────────────────────────────────────────────
+
+export function parseCSV(content: string) {
+  const result = Papa.parse<string[]>(content, { skipEmptyLines: true });
+  const data = result.data as string[][];
+  return { headers: data[0] ?? [], rows: data.slice(1) };
+}
+
+export function serializeCSV(headers: string[], rows: string[][]) {
+  return Papa.unparse([headers, ...rows]);
+}
+
+// ─── Tag color ────────────────────────────────────────────────────────────────
+
+const TAG_COLORS = [
+  { bg: 'rgba(200,135,58,0.12)', text: 'var(--amber)' },
+  { bg: 'rgba(122,173,128,0.12)', text: 'var(--success)' },
+  { bg: 'rgba(138,180,216,0.12)', text: '#8ab4d8' },
+  { bg: 'rgba(200,160,216,0.12)', text: '#c8a0d8' },
+  { bg: 'rgba(200,96,96,0.12)', text: '#c86060' },
+  { bg: 'rgba(150,150,150,0.12)', text: 'var(--muted-foreground)' },
+];
+
+export function tagColor(val: string) {
+  let h = 0;
+  for (let i = 0; i < val.length; i++) h = (h * 31 + val.charCodeAt(i)) & 0xffff;
+  return TAG_COLORS[h % TAG_COLORS.length];
+}

package/_standalone/components/renderers/graph/GraphRenderer.tsx

@@ -0,0 +1,427 @@
+'use client';
+
+import { useState, useEffect, useMemo, memo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  Controls,
+  MiniMap,
+  Handle,
+  Position,
+  type NodeProps,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import type { RendererContext } from '@/lib/renderers/registry';
+import type { GraphData, GraphNode, GraphEdge } from '@/app/api/graph/route';
+import { apiFetch } from '@/lib/api';
+
+// ─── Force Layout ──────────────────────────────────────────────────────────────
+
+interface Pos { x: number; y: number }
+
+function forceLayout(
+  nodeIds: string[],
+  edges: { source: string; target: string }[],
+  iterations?: number,
+): Record<string, Pos> {
+  const n = nodeIds.length;
+  if (n === 0) return {};
+
+  const iters = iterations ?? (n > 100 ? 80 : 150);
+  const width = 1200;
+  const height = 900;
+  // k is the "ideal" distance between nodes
+  const k = Math.sqrt((width * height) / Math.max(n, 1)) * 0.6;
+  const pos: Record<string, Pos> = {};
+
+  // Initialize in a more spread-out circle or random
+  nodeIds.forEach((id, i) => {
+    const angle = (2 * Math.PI * i) / n;
+    const radius = Math.min(width, height) * 0.4 * Math.random();
+    pos[id] = {
+      x: width / 2 + Math.cos(angle) * radius,
+      y: height / 2 + Math.sin(angle) * radius,
+    };
+  });
+
+  const disp: Record<string, Pos> = {};
+  const initTemp = width * 0.1;
+
+  for (let iter = 0; iter < iters; iter++) {
+    const temp = initTemp * (1 - iter / iters);
+
+    for (const id of nodeIds) disp[id] = { x: 0, y: 0 };
+
+    // Repulsion (nodes push each other away)
+    for (let i = 0; i < n; i++) {
+      for (let j = i + 1; j < n; j++) {
+        const u = nodeIds[i], v = nodeIds[j];
+        const dx = pos[u].x - pos[v].x;
+        const dy = pos[u].y - pos[v].y;
+        const distSq = dx * dx + dy * dy || 0.01;
+        const dist = Math.sqrt(distSq);
+        const force = (k * k) / dist;
+        disp[u].x += (dx / dist) * force;
+        disp[u].y += (dy / dist) * force;
+        disp[v].x -= (dx / dist) * force;
+        disp[v].y -= (dy / dist) * force;
+      }
+    }
+
+    // Attraction (edges pull nodes together)
+    for (const e of edges) {
+      const u = e.source, v = e.target;
+      if (!pos[u] || !pos[v]) continue;
+      const dx = pos[u].x - pos[v].x;
+      const dy = pos[u].y - pos[v].y;
+      const distSq = dx * dx + dy * dy || 0.01;
+      const dist = Math.sqrt(distSq);
+      const force = (dist * dist) / k;
+      disp[u].x -= (dx / dist) * force;
+      disp[u].y -= (dy / dist) * force;
+      disp[v].x += (dx / dist) * force;
+      disp[v].y += (dy / dist) * force;
+    }
+
+    // Gravity (pull towards center to avoid drifting)
+    for (const id of nodeIds) {
+      const dx = pos[id].x - width / 2;
+      const dy = pos[id].y - height / 2;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 0.01;
+      const force = 0.05 * dist; // Gentle pull
+      disp[id].x -= (dx / dist) * force;
+      disp[id].y -= (dy / dist) * force;
+    }
+
+    // Apply displacements
+    for (const id of nodeIds) {
+      const d = disp[id];
+      const dlen = Math.sqrt(d.x * d.x + d.y * d.y) || 0.01;
+      pos[id].x += (d.x / dlen) * Math.min(dlen, temp);
+      pos[id].y += (d.y / dlen) * Math.min(dlen, temp);
+      
+      // Softer clamping
+      pos[id].x = Math.max(0, Math.min(width, pos[id].x));
+      pos[id].y = Math.max(0, Math.min(height, pos[id].y));
+    }
+  }
+
+  return pos;
+}
+
+// ─── WikiNode ──────────────────────────────────────────────────────────────────
+
+interface WikiNodeData {
+  label: string;
+  id: string;
+  isCurrent: boolean;
+  isOrphan: boolean;
+  [key: string]: unknown;
+}
+
+const WikiNode = memo(function WikiNode({ data }: NodeProps) {
+  const router = useRouter();
+  const { label, id, isCurrent, isOrphan, size = 1 } = data as WikiNodeData & { size?: number };
+
+  const handleClick = useCallback(() => {
+    const encoded = (id as string).split('/').map(encodeURIComponent).join('/');
+    router.push('/view/' + encoded);
+  }, [id, router]);
+
+  const scale = 0.8 + Math.min(size * 0.1, 1.2);
+
+  return (
+    <div
+      onClick={handleClick}
+      title={id as string}
+      className="group font-display"
+      style={{
+        fontSize: 10 * scale,
+        padding: `${4 * scale}px ${12 * scale}px`,
+        borderRadius: 999, // Pill shape
+        cursor: 'pointer',
+        userSelect: 'none',
+        whiteSpace: 'nowrap',
+        maxWidth: 240,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        opacity: isOrphan ? 0.4 : 1,
+        background: isCurrent ? 'var(--amber)' : 'var(--card)',
+        color: isCurrent ? 'var(--amber-foreground)' : 'var(--foreground)',
+        border: `1.5px solid ${isCurrent ? 'var(--amber)' : 'var(--border)'}`,
+        boxShadow: isCurrent 
+          ? '0 0 20px var(--amber-dim), 0 0 0 2px var(--amber-dim)' 
+          : '0 2px 4px rgba(0,0,0,0.1)',
+        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        zIndex: isCurrent ? 10 : 1,
+      }}
+      onMouseEnter={e => {
+        if (!isCurrent) {
+          e.currentTarget.style.borderColor = 'var(--amber)';
+          e.currentTarget.style.background = 'var(--accent)';
+        }
+      }}
+      onMouseLeave={e => {
+        if (!isCurrent) {
+          e.currentTarget.style.borderColor = 'var(--border)';
+          e.currentTarget.style.background = 'var(--card)';
+        }
+      }}
+    >
+      <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
+      {label as string}
+      <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
+    </div>
+  );
+});
+
+// ─── GraphRenderer ─────────────────────────────────────────────────────────────
+
+type Scope = 'global' | 'local';
+
+export function GraphRenderer({ filePath }: RendererContext) {
+  const [graphData, setGraphData] = useState<GraphData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [scope, setScope] = useState<Scope>('local');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true); }, []);
+
+  useEffect(() => {
+    apiFetch<GraphData>('/api/graph')
+      .then((data) => { setGraphData(data); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  // Degree calculation (for node sizing)
+  const degrees = useMemo(() => {
+    if (!graphData) return new Map<string, number>();
+    const d = new Map<string, number>();
+    for (const e of graphData.edges) {
+      d.set(e.source, (d.get(e.source) || 0) + 1);
+      d.set(e.target, (d.get(e.target) || 0) + 1);
+    }
+    return d;
+  }, [graphData]);
+
+  // Build adjacency for BFS (local scope)
+  const adjacency = useMemo(() => {
+    if (!graphData) return null;
+    const adj = new Map<string, Set<string>>();
+    for (const e of graphData.edges) {
+      if (!adj.has(e.source)) adj.set(e.source, new Set());
+      if (!adj.has(e.target)) adj.set(e.target, new Set());
+      adj.get(e.source)!.add(e.target);
+      adj.get(e.target)!.add(e.source);
+    }
+    return adj;
+  }, [graphData]);
+
+  // Scope filter
+  const { filteredNodes, filteredEdges } = useMemo(() => {
+    if (!graphData) return { filteredNodes: [], filteredEdges: [] };
+
+    let nodeSubset: GraphNode[];
+    let edgeSubset: GraphEdge[];
+
+    if (scope === 'global') {
+      nodeSubset = graphData.nodes;
+      edgeSubset = graphData.edges;
+    } else {
+      // local: BFS 2 hops
+      const visited = new Set<string>();
+      const queue: Array<{ id: string; depth: number }> = [{ id: filePath, depth: 0 }];
+      visited.add(filePath);
+      while (queue.length > 0) {
+        const { id, depth } = queue.shift()!;
+        if (depth >= 2) continue;
+        const neighbors = adjacency?.get(id) ?? new Set<string>();
+        for (const nb of neighbors) {
+          if (!visited.has(nb)) {
+            visited.add(nb);
+            queue.push({ id: nb, depth: depth + 1 });
+          }
+        }
+      }
+      nodeSubset = graphData.nodes.filter(n => visited.has(n.id));
+      const nodeIds = new Set(nodeSubset.map(n => n.id));
+      edgeSubset = graphData.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target));
+    }
+
+    return { filteredNodes: nodeSubset, filteredEdges: edgeSubset };
+  }, [graphData, scope, filePath, adjacency]);
+
+  // Orphan detection (nodes with no edges in the current subset)
+  const connectedIds = useMemo(() => {
+    const s = new Set<string>();
+    for (const e of filteredEdges) {
+      s.add(e.source);
+      s.add(e.target);
+    }
+    return s;
+  }, [filteredEdges]);
+
+  // Compute layout + build RF nodes/edges
+  const { rfNodes, rfEdges } = useMemo(() => {
+    if (filteredNodes.length === 0) return { rfNodes: [], rfEdges: [] };
+
+    const nodeIds = filteredNodes.map(n => n.id);
+    const layout = forceLayout(nodeIds, filteredEdges);
+
+    const rfNodes = filteredNodes.map(n => ({
+      id: n.id,
+      type: 'wiki' as const,
+      position: layout[n.id] ?? { x: 0, y: 0 },
+      data: {
+        label: n.label,
+        id: n.id,
+        isCurrent: n.id === filePath,
+        isOrphan: !connectedIds.has(n.id),
+        size: degrees.get(n.id) || 1,
+      },
+    }));
+
+    const rfEdges = filteredEdges.map((e, i) => {
+      const isRelatedToCurrent = e.source === filePath || e.target === filePath;
+      return {
+        id: `e-${i}`,
+        source: e.source,
+        target: e.target,
+        type: 'default' as const, // Curved default
+        markerEnd: { type: 'arrowclosed' as const, color: isRelatedToCurrent ? 'var(--amber)' : 'var(--border)' },
+        style: { 
+          stroke: isRelatedToCurrent ? 'var(--amber)' : 'var(--border)', 
+          strokeWidth: isRelatedToCurrent ? 1.5 : 1,
+          opacity: isRelatedToCurrent ? 0.8 : 0.4,
+        },
+        animated: isRelatedToCurrent,
+      };
+    });
+
+    return { rfNodes, rfEdges };
+  }, [filteredNodes, filteredEdges, filePath, connectedIds, degrees]);
+
+  const nodeTypes = useMemo(() => ({ wiki: WikiNode }), []);
+
+  const scopeButtons: { id: Scope; label: string }[] = [
+    { id: 'local', label: 'Local' },
+    { id: 'global', label: 'Global' },
+  ];
+
+  if (!mounted || loading) {
+    return (
+      <div
+        style={{
+          width: '100%',
+          height: 'calc(100vh - 160px)',
+          minHeight: 400,
+          borderRadius: 12,
+          background: 'var(--muted)',
+          border: '1px solid var(--border)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <span className="font-display" style={{ color: 'var(--muted-foreground)', fontSize: 12 }}>
+          {loading ? 'Building graph…' : 'Loading…'}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ width: '100%', position: 'relative', zIndex: 0 }}>
+      {/* Toolbar */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          marginBottom: 10,
+          flexWrap: 'wrap',
+        }}
+      >
+        <span
+          className="font-display"
+          style={{
+            fontSize: 11,
+            color: 'var(--muted-foreground)',
+          }}
+        >
+          {filteredNodes.length} nodes · {filteredEdges.length} edges
+        </span>
+
+        <div
+          style={{
+            display: 'flex',
+            gap: 2,
+            padding: 3,
+            borderRadius: 8,
+            background: 'var(--muted)',
+          }}
+        >
+          {scopeButtons.map(btn => (
+            <button
+              key={btn.id}
+              onClick={() => setScope(btn.id)}
+              className="font-display"
+              style={{
+                padding: '3px 12px',
+                borderRadius: 5,
+                fontSize: 11,
+                cursor: 'pointer',
+                border: 'none',
+                outline: 'none',
+                background: scope === btn.id ? 'var(--card)' : 'transparent',
+                color: scope === btn.id ? 'var(--foreground)' : 'var(--muted-foreground)',
+                boxShadow: scope === btn.id ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+                transition: 'all 0.1s',
+              }}
+            >
+              {btn.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* React Flow */}
+      <div
+        style={{
+          width: '100%',
+          height: 'calc(100vh - 160px)',
+          minHeight: 400,
+        }}
+      >
+        <ReactFlow
+          nodes={rfNodes}
+          edges={rfEdges}
+          nodeTypes={nodeTypes}
+          fitView
+          fitViewOptions={{ padding: 0.15 }}
+          proOptions={{ hideAttribution: true }}
+          style={{
+            background: 'var(--background)',
+            borderRadius: 12,
+            border: '1px solid var(--border)',
+          }}
+        >
+          <Background
+            color="var(--border)"
+            gap={24}
+            size={1}
+            variant={BackgroundVariant.Dots}
+          />
+          <Controls showInteractive={false} />
+          <MiniMap
+            nodeColor={(n) =>
+              (n.data as WikiNodeData)?.isCurrent ? 'var(--amber)' : 'var(--muted-foreground)'
+            }
+          />
+        </ReactFlow>
+      </div>
+    </div>
+  );
+}