@geminilight/mindos 0.6.73 → 0.6.74

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

@@ -1,163 +0,0 @@
-'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

@@ -1,87 +0,0 @@
-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

@@ -1,427 +0,0 @@
-'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>
-  );
-}