Mind map ↔ knowledge graph bidirectional sync

package.json

@@ -62,7 +62,8 @@
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.15.1",
     "sigma": "^3.0.0-beta.27",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@eslint/js": "9.39.4",

src/components/SyncToggle.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { RefreshCw } from 'lucide-react';
+import { useGraphSyncStore } from '../store/graph-sync-store';
+
+interface SyncToggleProps {
+  tooltip?: string;
+}
+
+const SyncToggle: React.FC<SyncToggleProps> = ({
+  tooltip = "Sync mind map with knowledge graph"
+}) => {
+  const { syncEnabled, setSyncEnabled } = useGraphSyncStore();
+
+  return (
+    <button
+      onClick={() => setSyncEnabled(!syncEnabled)}
+      className={`filter-chip ${syncEnabled ? 'active' : ''}`}
+      aria-pressed={syncEnabled}
+      title={tooltip}
+      aria-label={tooltip}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        position: 'relative'
+      }}
+    >
+      <RefreshCw size={14} className={syncEnabled ? 'animate-spin-slow' : ''} />
+      {syncEnabled ? 'Sync On' : 'Sync Off'}
+      {syncEnabled && (
+        <span style={{
+          position: 'absolute',
+          top: '2px',
+          right: '2px',
+          width: '6px',
+          height: '6px',
+          background: 'var(--status-success)',
+          borderRadius: '50%',
+          boxShadow: '0 0 4px var(--status-success)'
+        }} />
+      )}
+    </button>
+  );
+};
+
+export default SyncToggle;

src/features/__tests__/sync-integration.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, act } from '@testing-library/react';
+import React from 'react';
+import { useGraphSyncStore } from '../../store/graph-sync-store';
+import { setupMindMapSyncListeners } from '../mindmap/sync-adapter';
+import { setupGraphSyncListeners } from '../graph/sync-adapter';
+import Graph from 'graphology';
+
+// Mock MindElixir as it's hard to render in Vitest/Happy-dom without a real canvas
+const mockMindMap = {
+  bus: {
+    addListener: vi.fn(),
+  },
+  findEle: vi.fn(),
+  addChild: vi.fn(),
+  updateNodeStyle: vi.fn(),
+  refresh: vi.fn(),
+  removeNodes: vi.fn(),
+};
+
+describe('Sync Integration', () => {
+  beforeEach(() => {
+    useGraphSyncStore.getState().clearEvents();
+    useGraphSyncStore.getState().setSyncEnabled(true);
+    vi.clearAllMocks();
+  });
+
+  it('should sync node addition from mind map to graph', () => {
+    const graph = new Graph();
+    setupGraphSyncListeners(graph);
+
+    // Simulate setupMindMapSyncListeners
+    let mindMapListener: (op: any) => void = () => {};
+    mockMindMap.bus.addListener.mockImplementation((name, cb) => {
+      if (name === 'operation') mindMapListener = cb;
+    });
+    setupMindMapSyncListeners(mockMindMap as any);
+
+    // 1. Add node in mind map
+    act(() => {
+      mindMapListener({
+        name: 'addChild',
+        obj: { id: 'test-node', topic: 'Test Node' }
+      });
+    });
+
+    // Verify event emitted
+    expect(useGraphSyncStore.getState().pendingEvents).toHaveLength(1);
+    expect(useGraphSyncStore.getState().pendingEvents[0].type).toBe('node:add');
+
+    // 2. Consume in graph (simulating the effect in GraphView)
+    const events = useGraphSyncStore.getState().consumeEvents('graph');
+    expect(events).toHaveLength(1);
+
+    act(() => {
+      const payload: any = events[0].payload;
+      graph.addNode(payload.id, { label: payload.label });
+    });
+
+    expect(graph.hasNode('test-node')).toBe(true);
+    expect(graph.getNodeAttribute('test-node', 'label')).toBe('Test Node');
+  });
+
+  it('should sync node update from graph to mind map', () => {
+    const graph = new Graph();
+    setupGraphSyncListeners(graph);
+
+    // 1. Add node in graph
+    act(() => {
+      graph.addNode('node-1', { label: 'Initial' });
+    });
+
+    // Should have emitted node:add
+    expect(useGraphSyncStore.getState().pendingEvents).toHaveLength(1);
+    useGraphSyncStore.getState().consumeEvents('mindmap'); // Clear
+
+    // 2. Update node in graph
+    act(() => {
+      graph.setNodeAttribute('node-1', 'label', 'Updated');
+    });
+
+    const events = useGraphSyncStore.getState().pendingEvents;
+    expect(events.some(e => e.type === 'node:update')).toBe(true);
+    const updateEvent = events.find(e => e.type === 'node:update');
+    expect((updateEvent?.payload as any).label).toBe('Updated');
+  });
+});

src/features/graph/GraphControls.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Focus, Camera, Clock, X, FolderOpen, GitCompare, RotateCcw, Loader2, Layout, LayoutDashboard, Download, CircleDot } from 'lucide-react';
+import SyncToggle from '../../components/SyncToggle';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { useEscapeKey } from '../../hooks/useEscapeKey';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
@@ -215,6 +216,7 @@ const GraphControls: React.FC<GraphControlsProps> = ({
           <RotateCcw size={16} /> Exit Snapshot
         </button>
       )}
+      {!snapshotMode && <SyncToggle />}
       {hasSelection && !isMobile && (
         <div className="selection-info">
           Selected: <strong>{selectedName}</strong>

src/features/graph/GraphView.tsx

@@ -10,6 +10,9 @@
 import { logger } from '../../lib/logger';
 import { perf } from '../../lib/perf';
 import { applyCircularLayout, applyForceLayout, applyHierarchicalLayout } from '../../lib/graph-layout';
+import { useGraphSyncStore } from '../../store/graph-sync-store';
+import { setupGraphSyncListeners } from './sync-adapter';
+import type { SharedNode, SharedEdge } from '../../store/graph-sync-types';
 import { useGraphKeyboardNavigation } from './GraphKeyboardNav';
 import { useGraphTouchGestures } from './GraphTouchHandler';
 import { useGraphSnapshotManager } from './GraphSnapshotManager';
@@ -298,6 +301,12 @@
     };
   }, [effectiveData, selectedNode, focusMode, snapshotMode, setFocusMode, setSelectedNode, layout, layoutSettings, links, graphSize]);
 
+  useEffect(() => {
+    if (!graphRef.current) return;
+    const cleanup = setupGraphSyncListeners(graphRef.current);
+    return cleanup;
+  }, []);
+
   useEffect(() => {
     if (!selectedNode) {
       setSelectedEntityClaims([]);
@@ -330,6 +339,62 @@
     void sigma.getCamera().animatedReset({ duration: 400 });
   }, [layout, effectiveData.entities, links]);
 
+  // Sync effect to consume events
+  useEffect(() => {
+    const unsubscribe = useGraphSyncStore.subscribe((state) => {
+      if (!state.syncEnabled || !graphRef.current || state.pendingEvents.length === 0) return;
+
+      const events = useGraphSyncStore.getState().consumeEvents('graph');
+      if (events.length === 0) return;
+
+      const graph = graphRef.current;
+      events.forEach(event => {
+        if (event.type === 'node:add') {
+          const payload = event.payload as SharedNode;
+          if (!graph.hasNode(payload.id)) {
+            graph.addNode(payload.id, {
+              label: payload.label,
+              size: 10,
+              color: '#2563eb',
+              x: Math.random(),
+              y: Math.random()
+            });
+          }
+        } else if (event.type === 'node:update') {
+          const payload = event.payload as SharedNode;
+          if (graph.hasNode(payload.id)) {
+            const currentLabel = graph.getNodeAttribute(payload.id, 'label');
+            if (currentLabel !== payload.label) {
+              console.warn(`[Sync Conflict] Graph node ${payload.id} has different label. Local: ${currentLabel}, Incoming: ${payload.label}. Applying last-writer wins.`);
+              graph.mergeNodeAttributes(payload.id, { label: payload.label });
+            }
+          }
+        } else if (event.type === 'node:remove') {
+          const payload = event.payload as SharedNode;
+          if (graph.hasNode(payload.id)) {
+            graph.dropNode(payload.id);
+          }
+        } else if (event.type === 'edge:add') {
+          const payload = event.payload as SharedEdge;
+          if (graph.hasNode(payload.from) && graph.hasNode(payload.to) && !graph.hasEdge(payload.id)) {
+            graph.addEdgeWithKey(payload.id, payload.from, payload.to, {
+              label: payload.label,
+              size: 2,
+              color: '#94a3b8'
+            });
+          }
+        } else if (event.type === 'edge:remove') {
+          const payload = event.payload as SharedEdge;
+          if (graph.hasEdge(payload.id)) {
+            graph.dropEdge(payload.id);
+          }
+        }
+      });
+      if (sigmaInstance.current) sigmaInstance.current.refresh();
+    });
+    return () => unsubscribe();
+  }, []);
+
   useEffect(() => {
     return () => {
       sigmaInstance.current?.kill();

src/features/graph/sync-adapter.ts

@@ -0,0 +1,69 @@
+import type Graph from 'graphology';
+import { useGraphSyncStore } from '../../store/graph-sync-store';
+import { SharedNode, SharedEdge } from '../../store/graph-sync-types';
+
+export function setupGraphSyncListeners(
+  graph: Graph
+) {
+  const store = useGraphSyncStore.getState();
+
+  const onNodeAdded = ({ key, attributes }: any) => {
+    if (!useGraphSyncStore.getState().syncEnabled) return;
+    store.emitEvent({
+      type: 'node:add',
+      source: 'graph',
+      payload: { id: key, label: attributes.label } as SharedNode,
+    });
+  };
+
+  const onNodeAttributesUpdated = ({ key, attributes }: any) => {
+    if (!useGraphSyncStore.getState().syncEnabled) return;
+    store.emitEvent({
+      type: 'node:update',
+      source: 'graph',
+      payload: { id: key, label: attributes.label } as SharedNode,
+    });
+  };
+
+  const onNodeDropped = ({ key }: any) => {
+    if (!useGraphSyncStore.getState().syncEnabled) return;
+    store.emitEvent({
+      type: 'node:remove',
+      source: 'graph',
+      payload: { id: key, label: '' } as SharedNode,
+    });
+  };
+
+  const onEdgeAdded = ({ key, source, target, attributes }: any) => {
+    if (!useGraphSyncStore.getState().syncEnabled) return;
+    store.emitEvent({
+      type: 'edge:add',
+      source: 'graph',
+      payload: { id: key, from: source, to: target, label: attributes.label } as SharedEdge,
+    });
+  };
+
+  const onEdgeDropped = ({ key }: any) => {
+    if (!useGraphSyncStore.getState().syncEnabled) return;
+    // We don't have from/to here, but id should be enough for removal if shared
+    store.emitEvent({
+      type: 'edge:remove',
+      source: 'graph',
+      payload: { id: key, from: '', to: '' } as SharedEdge,
+    });
+  };
+
+  graph.on('nodeAdded', onNodeAdded);
+  graph.on('nodeAttributesUpdated', onNodeAttributesUpdated);
+  graph.on('nodeDropped', onNodeDropped);
+  graph.on('edgeAdded', onEdgeAdded);
+  graph.on('edgeDropped', onEdgeDropped);
+
+  return () => {
+    graph.off('nodeAdded', onNodeAdded);
+    graph.off('nodeAttributesUpdated', onNodeAttributesUpdated);
+    graph.off('nodeDropped', onNodeDropped);
+    graph.off('edgeAdded', onEdgeAdded);
+    graph.off('edgeDropped', onEdgeDropped);
+  };
+}