feat: implement 3D visualization toggle and Retrieval Context Preview

frontend/package-lock.json

@@ -16,9 +16,11 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-force-graph-2d": "^1.25.5",
+        "react-force-graph-3d": "^1.29.1",
         "react-markdown": "^9.0.1",
         "recharts": "^2.12.7",
         "tailwind-merge": "^2.4.0",
+        "three": "^0.185.1",
         "zustand": "^4.5.4"
       },
       "devDependencies": {
@@ -26,6 +28,7 @@
         "@types/node": "^20.14.13",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
+        "@types/three": "^0.185.1",
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-config-next": "14.2.5",
@@ -57,6 +60,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -661,12 +671,48 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.185.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.185.1.tgz",
+      "integrity": "sha512-db1xTb+EgYF2didW+eudSvVPtn75zo+fGsY8ShQrJY/B5ZBmC2Fiaykv3aImHAlCNEGuMPkPGXBJGLwzu5mC7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
+    "node_modules/@types/three/node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -821,6 +867,22 @@
         "linux"
       ]
     },
+    "node_modules/3d-force-graph": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/3d-force-graph/-/3d-force-graph-1.80.0.tgz",
+      "integrity": "sha512-tzI353gW1nXPpnC7VTa3JjMg+3cp77qOLUFO0vucPTfF+q5R6sQsNsIqVTbRIb7RSypn14nBa4yfkOe9ThxASw==",
+      "license": "MIT",
+      "dependencies": {
+        "accessor-fn": "1",
+        "kapsule": "^1.16",
+        "three": ">=0.179 <1",
+        "three-forcegraph": "1",
+        "three-render-objects": "^1.41"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/accessor-fn": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/accessor-fn/-/accessor-fn-1.5.3.tgz",
@@ -1923,6 +1985,18 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-bind-mapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/data-bind-mapper/-/data-bind-mapper-1.0.3.tgz",
+      "integrity": "sha512-QmU3lyEnbENQPo0M1F9BMu4s6cqNNp8iJA+b/HP2sSb7pf3dxwF3+EP1eO69rwBfH9kFJ1apmzrtogAmVt2/Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "accessor-fn": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -2911,6 +2985,13 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -4610,6 +4691,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -5258,6 +5346,44 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ngraph.forcelayout": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ngraph.forcelayout/-/ngraph.forcelayout-3.3.1.tgz",
+      "integrity": "sha512-MKBuEh1wujyQHFTW57y5vd/uuEOK0XfXYxm3lC7kktjJLRdt/KEKEknyOlc6tjXflqBKEuYBBcu7Ax5VY+S6aw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ngraph.events": "^1.0.0",
+        "ngraph.merge": "^1.0.0",
+        "ngraph.random": "^1.0.0"
+      }
+    },
+    "node_modules/ngraph.graph": {
+      "version": "20.1.2",
+      "resolved": "https://registry.npmjs.org/ngraph.graph/-/ngraph.graph-20.1.2.tgz",
+      "integrity": "sha512-W/G3GBR3Y5UxMLHTUCPP9v+pbtpzwuAEIqP5oZV+9IwgxAIEZwh+Foc60iPc1idlnK7Zxu0p3puxAyNmDvBd0Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ngraph.events": "^1.4.0"
+      }
+    },
+    "node_modules/ngraph.merge": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ngraph.merge/-/ngraph.merge-1.0.0.tgz",
+      "integrity": "sha512-5J8YjGITUJeapsomtTALYsw7rFveYkM+lBj3QiYZ79EymQcuri65Nw3knQtFxQBU1r5iOaVRXrSwMENUPK62Vg==",
+      "license": "MIT"
+    },
+    "node_modules/ngraph.random": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ngraph.random/-/ngraph.random-1.2.0.tgz",
+      "integrity": "sha512-4EUeAGbB2HWX9njd6bP6tciN6ByJfoaAvmVL9QTaZSeXrW46eNGA9GajiXiPBbvFqxUWFkEbyo6x5qsACUuVfA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/node-exports-info": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.2.tgz",
@@ -5690,6 +5816,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -6016,6 +6154,23 @@
         "react": "*"
       }
     },
+    "node_modules/react-force-graph-3d": {
+      "version": "1.29.1",
+      "resolved": "https://registry.npmjs.org/react-force-graph-3d/-/react-force-graph-3d-1.29.1.tgz",
+      "integrity": "sha512-5Vp+PGpYnO+zLwgK2NvNqdXHvsWLrFzpDfJW1vUA1twjo9SPvXqfUYQrnRmAbD+K2tOxkZw1BkbH31l5b4TWHg==",
+      "license": "MIT",
+      "dependencies": {
+        "3d-force-graph": "^1.79",
+        "prop-types": "15",
+        "react-kapsule": "^2.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7096,6 +7251,55 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.185.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.185.1.tgz",
+      "integrity": "sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==",
+      "license": "MIT"
+    },
+    "node_modules/three-forcegraph": {
+      "version": "1.43.4",
+      "resolved": "https://registry.npmjs.org/three-forcegraph/-/three-forcegraph-1.43.4.tgz",
+      "integrity": "sha512-FtmiZP/T16ZQaHza3JDaDn0YTXFtg9e7pGnTeU8nzu0NNkx7MpWbF/GvmpbQsWHx3rukHtkRv1fTorLPB3FDEA==",
+      "license": "MIT",
+      "dependencies": {
+        "accessor-fn": "1",
+        "d3-array": "1 - 3",
+        "d3-force-3d": "2 - 3",
+        "d3-scale": "1 - 4",
+        "d3-scale-chromatic": "1 - 3",
+        "data-bind-mapper": "1",
+        "kapsule": "^1.16",
+        "ngraph.forcelayout": "3",
+        "ngraph.graph": "20",
+        "tinycolor2": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.118.3"
+      }
+    },
+    "node_modules/three-render-objects": {
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/three-render-objects/-/three-render-objects-1.42.0.tgz",
+      "integrity": "sha512-KYfkPrYGEbIK8ChFocWqOF1aAN80FBUBWVYB8mB2oBpVuVN+52FvvngVYB5ieFANQu7Rt21rPYZ/xKaAgVWWRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "float-tooltip": "^1.7",
+        "kapsule": "^1.16",
+        "polished": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.179"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",

frontend/package.json

@@ -11,30 +11,33 @@
     "test:e2e:install": "playwright install --with-deps chromium"
   },
   "dependencies": {
+    "axios": "^1.7.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.417.0",
     "next": "14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "zustand": "^4.5.4",
-    "axios": "^1.7.3",
     "react-force-graph-2d": "^1.25.5",
-    "recharts": "^2.12.7",
+    "react-force-graph-3d": "^1.29.1",
     "react-markdown": "^9.0.1",
-    "lucide-react": "^0.417.0",
-    "clsx": "^2.1.1",
+    "recharts": "^2.12.7",
     "tailwind-merge": "^2.4.0",
-    "class-variance-authority": "^0.7.0"
+    "three": "^0.185.1",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.0",
     "@types/node": "^20.14.13",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/three": "^0.185.1",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.5",
     "postcss": "^8.4.40",
     "tailwindcss": "^3.4.7",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.5.4",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.5"
+    "typescript": "^5.5.4"
   }
 }

frontend/src/components/dashboard/MainQueryView.tsx

@@ -23,6 +23,7 @@ interface QueryResult {
   entities?: string[];
   paths?: string[];
   hops?: Hop[];
+  context?: string;
 }
 
 export function MainQueryView() {
@@ -68,6 +69,7 @@ export function MainQueryView() {
         entities: res.highlighted_entities,
         paths: res.paths,
         hops: res.hops,
+        context: res.context,
       };
       setResult(mapped);
       setHighlighted(mapped.entities || [], mapped.paths || []);
@@ -142,6 +144,7 @@ export function MainQueryView() {
             method={result.method || mode}
             entityCount={result.entities?.length || 0}
             chunkCount={result.citations?.length || 0}
+            context={result.context}
           />
         )}
       </div>

frontend/src/components/graph/ForceGraphWrapper.tsx

@@ -2,9 +2,19 @@
 
 import React, { forwardRef } from 'react';
 import ForceGraph2D from 'react-force-graph-2d';
+import ForceGraph3D from 'react-force-graph-3d';
 
-const ForceGraphWrapper = forwardRef((props: any, ref: any) => {
-  return <ForceGraph2D {...props} ref={ref} />;
+interface ForceGraphWrapperProps {
+  dim?: 2 | 3;
+  [key: string]: any;
+}
+
+const ForceGraphWrapper = forwardRef<any, ForceGraphWrapperProps>((props, ref) => {
+  const { dim = 2, ...rest } = props;
+  if (dim === 3) {
+    return <ForceGraph3D {...rest} ref={ref as any} />;
+  }
+  return <ForceGraph2D {...rest} ref={ref as any} />;
 });
 
 ForceGraphWrapper.displayName = 'ForceGraphWrapper';

frontend/src/components/graph/GraphControls.tsx

@@ -2,10 +2,21 @@
 
 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

@@ -34,6 +34,7 @@ export function GraphVisualization({ height = '100%' }: { height?: string | numb
   const visibleRelationships = useGraphStore((s) => s.visibleRelationships);
   const selectEntity = useGraphStore((s) => s.selectEntity);
   const setHighlighted = useGraphStore((s) => s.setHighlighted);
+  const dim = useGraphStore((s) => s.dim);
 
   const fgRef = useRef<any>(null);
   const [hoverNode, setHoverNode] = useState<FGNode | null>(null);
@@ -42,10 +43,10 @@ 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 = () => fgRef.current?.zoom?.(fgRef.current.zoom() * 1.4, 300);
+    graphController.zoomOut = () => fgRef.current?.zoom?.(fgRef.current.zoom() / 1.4, 300);
     graphController.resetView = () => {
-      fgRef.current?.zoomToFit(400, 40);
+      fgRef.current?.zoomToFit?.(400, 40);
     };
   }, []);
 
@@ -99,8 +100,12 @@ export function GraphVisualization({ height = '100%' }: { height?: string | numb
     );
     setSearchHit(match ? (match as any).id : null);
     if (match && fgRef.current) {
-      fgRef.current.centerAt((match as any).x, (match as any).y, 600);
-      fgRef.current.zoom(2.5, 600);
+      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]);
 
@@ -108,6 +113,7 @@ export function GraphVisualization({ height = '100%' }: { height?: string | numb
     <div className="graph-canvas relative h-full w-full" style={{ height }}>
       <ForceGraph2D
         ref={fgRef}
+        dim={dim}
         graphData={graphData}
         width={undefined}
         backgroundColor="transparent"

frontend/src/components/query/SourceToggle.tsx

@@ -3,14 +3,16 @@
 import { useState } from 'react';
 import { Network, Type, Layers, ChevronDown } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import ReactMarkdown from 'react-markdown';
 
 interface SourceToggleProps {
   method: string;
   entityCount: number;
   chunkCount: number;
+  context?: string;
 }
 
-export function SourceToggle({ method, entityCount, chunkCount }: SourceToggleProps) {
+export function SourceToggle({ method, entityCount, chunkCount, context }: SourceToggleProps) {
   const [open, setOpen] = useState(false);
   return (
     <div className="border-t border-border bg-bg-surface px-4 py-2">
@@ -19,9 +21,9 @@ export function SourceToggle({ method, entityCount, chunkCount }: SourceTogglePr
           <span
             className={cn(
               'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
-              method === 'Graph'
+              method === 'Graph' || method === 'GRAPH_ONLY'
                 ? 'bg-accent-violet/15 text-accent-violet'
-                : method === 'Vector'
+                : method === 'Vector' || method === 'VECTOR_ONLY'
                 ? 'bg-accent-indigo/15 text-accent-indigo'
                 : 'bg-accent-cyan/15 text-accent-cyan'
             )}
@@ -39,19 +41,27 @@ export function SourceToggle({ method, entityCount, chunkCount }: SourceTogglePr
           onClick={() => setOpen((o) => !o)}
           className="inline-flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary"
         >
-          <Layers className="h-3.5 w-3.5" /> Context
+          <Layers className="h-3.5 w-3.5" /> Context Preview
           <ChevronDown className={cn('h-3.5 w-3.5 transition-transform', open && 'rotate-180')} />
         </button>
       </div>
       {open && (
-        <div className="mt-2 rounded-md border border-border bg-bg-base p-3 text-xs text-text-secondary">
-          <p className="mb-1 font-medium text-text-primary">Retrieval context</p>
-          <p>
-            GRAPH CONTEXT: {entityCount} entities and their relationships were traversed in Neo4j.
-          </p>
-          <p>
-            TEXT CONTEXT: {chunkCount} semantically similar text chunks were retrieved from the vector store.
-          </p>
+        <div className="mt-2 max-h-[300px] overflow-y-auto rounded-md border border-border bg-bg-base p-3 text-xs text-text-secondary scrollbar-thin">
+          {context ? (
+            <div className="prose prose-invert max-w-none text-xs leading-relaxed text-text-secondary space-y-2">
+              <ReactMarkdown>{context}</ReactMarkdown>
+            </div>
+          ) : (
+            <div>
+              <p className="mb-1 font-medium text-text-primary">Retrieval context</p>
+              <p>
+                GRAPH CONTEXT: {entityCount} entities and their relationships were traversed in Neo4j.
+              </p>
+              <p>
+                TEXT CONTEXT: {chunkCount} semantically similar text chunks were retrieved from the vector store.
+              </p>
+            </div>
+          )}
         </div>
       )}
     </div>

frontend/src/store/graph.ts

@@ -32,6 +32,7 @@ interface GraphState {
   visibleTypes: Record<string, boolean>;
   visibleRelationships: Record<string, boolean>;
   selectedEntity: GraphNode | null;
+  dim: 2 | 3;
   setData: (data: GraphData) => void;
   setHighlighted: (entities: string[], paths?: string[]) => void;
   clearHighlighted: () => void;
@@ -39,6 +40,7 @@ interface GraphState {
   toggleType: (type: string) => void;
   toggleRelationship: (rel: string) => void;
   selectEntity: (entity: GraphNode | null) => void;
+  setDim: (dim: 2 | 3) => void;
 }
 
 export const useGraphStore = create<GraphState>((set) => ({
@@ -49,6 +51,7 @@ export const useGraphStore = create<GraphState>((set) => ({
   visibleTypes: {},
   visibleRelationships: {},
   selectedEntity: null,
+  dim: 2,
   setData: (data) => set({ data }),
   setHighlighted: (entities, paths = []) =>
     set({ highlightedEntities: entities, highlightedPaths: paths }),
@@ -66,4 +69,5 @@ export const useGraphStore = create<GraphState>((set) => ({
       },
     })),
   selectEntity: (entity) => set({ selectedEntity: entity }),
+  setDim: (dim) => set({ dim }),
 }));