feat: simplify graph visualization to 3D only, implement 3D camera controls, and persist document states globally

frontend/src/app/(dashboard)/documents/page.tsx

@@ -13,7 +13,6 @@ import { cn } from '@/lib/utils';
 import { useGraphData } from '@/hooks/useGraphData';
 
 export default function DocumentsPage() {
-  useDocumentPolling();
   useGraphData(); // Keep graph data updated
   
   const documents = useDocumentsStore((s) => s.documents);

frontend/src/components/graph/GraphControls.tsx

@@ -2,21 +2,10 @@
 
 import { Plus, Minus, Maximize, Crosshair } from 'lucide-react';
 import { graphController } from './graphController';
-import { useGraphStore } from '@/store/graph';
 
 export function GraphControls() {
-  const dim = useGraphStore((s) => s.dim);
-  const setDim = useGraphStore((s) => s.setDim);
-
   return (
     <div className="absolute right-3 top-3 flex flex-col gap-1.5">
-      <button
-        onClick={() => setDim(dim === 2 ? 3 : 2)}
-        className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-bg-elevated/90 text-xs font-bold text-accent-cyan shadow-sm backdrop-blur hover:bg-bg-surface hover:text-text-primary transition-all duration-200"
-        aria-label="Toggle 2D/3D"
-      >
-        {dim === 2 ? '3D' : '2D'}
-      </button>
       <button
         onClick={() => graphController.zoomIn?.()}
         className="flex h-9 w-9 items-center justify-center rounded-md border border-border bg-bg-elevated/90 text-text-secondary shadow-sm backdrop-blur hover:text-text-primary"

frontend/src/components/graph/GraphVisualization.tsx

@@ -43,12 +43,32 @@ export function GraphVisualization({ height = '100%' }: { height?: string | numb
   const closeContextMenu = useCallback(() => setContextMenu(null), []);
 
   useEffect(() => {
-    graphController.zoomIn = () => fgRef.current?.zoom?.(fgRef.current.zoom() * 1.4, 300);
-    graphController.zoomOut = () => fgRef.current?.zoom?.(fgRef.current.zoom() / 1.4, 300);
+    graphController.zoomIn = () => {
+      if (dim === 3) {
+        const cam = fgRef.current?.camera?.();
+        if (cam && fgRef.current?.cameraPosition) {
+          const { x, y, z } = cam.position;
+          fgRef.current.cameraPosition({ x: x * 0.75, y: y * 0.75, z: z * 0.75 }, undefined, 300);
+        }
+      } else {
+        fgRef.current?.zoom?.(fgRef.current.zoom() * 1.4, 300);
+      }
+    };
+    graphController.zoomOut = () => {
+      if (dim === 3) {
+        const cam = fgRef.current?.camera?.();
+        if (cam && fgRef.current?.cameraPosition) {
+          const { x, y, z } = cam.position;
+          fgRef.current.cameraPosition({ x: x * 1.33, y: y * 1.33, z: z * 1.33 }, undefined, 300);
+        }
+      } else {
+        fgRef.current?.zoom?.(fgRef.current.zoom() / 1.4, 300);
+      }
+    };
     graphController.resetView = () => {
       fgRef.current?.zoomToFit?.(400, 40);
     };
-  }, []);
+  }, [dim]);
 
   const pathSet = useMemo(() => new Set(paths), [paths]);
   const highlightSet = useMemo(() => new Set(highlighted), [highlighted]);
@@ -100,14 +120,26 @@ export function GraphVisualization({ height = '100%' }: { height?: string | numb
     );
     setSearchHit(match ? (match as any).id : null);
     if (match && fgRef.current) {
-      if (fgRef.current.centerAt) {
-        fgRef.current.centerAt((match as any).x, (match as any).y, 600);
-      }
-      if (fgRef.current.zoom) {
-        fgRef.current.zoom(2.5, 600);
+      if (dim === 3) {
+        const distance = 40;
+        const distRatio = 1 + distance / Math.hypot((match as any).x || 1, (match as any).y || 1, (match as any).z || 1);
+        if (fgRef.current.cameraPosition) {
+          fgRef.current.cameraPosition(
+            { x: ((match as any).x || 0) * distRatio, y: ((match as any).y || 0) * distRatio, z: ((match as any).z || 0) * distRatio },
+            match, // lookAt
+            600    // transitionMs
+          );
+        }
+      } else {
+        if (fgRef.current.centerAt) {
+          fgRef.current.centerAt((match as any).x, (match as any).y, 600);
+        }
+        if (fgRef.current.zoom) {
+          fgRef.current.zoom(2.5, 600);
+        }
       }
     }
-  }, [searchTerm, graphData.nodes]);
+  }, [searchTerm, graphData.nodes, dim]);
 
   return (
     <div className="graph-canvas relative h-full w-full" style={{ height }}>
@@ -163,8 +195,20 @@ export function GraphVisualization({ height = '100%' }: { height?: string | numb
           const node = n as GraphNode;
           setHighlighted([node.id], []);
           if (fgRef.current) {
-            fgRef.current.centerAt((n as any).x, (n as any).y, 600);
-            fgRef.current.zoom(2.5, 600);
+            if (dim === 3) {
+              const distance = 40;
+              const distRatio = 1 + distance / Math.hypot(n.x || 1, n.y || 1, n.z || 1);
+              if (fgRef.current.cameraPosition) {
+                fgRef.current.cameraPosition(
+                  { x: (n.x || 0) * distRatio, y: (n.y || 0) * distRatio, z: (n.z || 0) * distRatio },
+                  n, // lookAt
+                  600 // transitionMs
+                );
+              }
+            } else {
+              fgRef.current.centerAt((n as any).x, (n as any).y, 600);
+              fgRef.current.zoom(2.5, 600);
+            }
           }
         }}
         onNodeHover={(n: any) => setHoverNode(n as FGNode)}

frontend/src/components/layout/DashboardLayout.tsx

@@ -1,7 +1,10 @@
 import { Sidebar } from './Sidebar';
 import { TopBar } from './TopBar';
+import { useDocumentPolling } from '@/hooks/useDocumentPolling';
 
 export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  useDocumentPolling(); // Poll documents globally to keep Query page select boxes in sync
+  
   return (
     <div className="flex h-screen overflow-hidden bg-bg-base">
       <Sidebar />

frontend/src/store/graph.ts

@@ -51,7 +51,7 @@ export const useGraphStore = create<GraphState>((set) => ({
   visibleTypes: {},
   visibleRelationships: {},
   selectedEntity: null,
-  dim: 2,
+  dim: 3,
   setData: (data) => set({ data }),
   setHighlighted: (entities, paths = []) =>
     set({ highlightedEntities: entities, highlightedPaths: paths }),