From 097c4c61bb94ab8f71c9603411cc14e58fbf563d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CBeeRad=E2=80=9D?= <bradwmorriswork@gmail.com>
Date: Wed, 15 Apr 2026 20:17:35 +1000
Subject: [PATCH] feat: sync map pane exploration overhaul

- port the read-only map exploration behavior and focus wiring from the private repo
- align the OS map pane with the shipped focused-node and overview interactions

Generated with Claude Code
---
 src/components/focus/FocusPanel.tsx        |  31 +
 src/components/layout/ThreePanelLayout.tsx |  71 +-
 src/components/panes/MapPane.tsx           | 943 ++++++++++-----------
 src/components/panes/NodePane.tsx          |   1 +
 src/components/panes/map/RahEdge.tsx       |  12 +-
 src/components/panes/map/RahNode.tsx       |  38 +-
 src/components/panes/map/map-styles.css    | 114 +--
 src/components/panes/map/utils.ts          | 488 ++++++-----
 src/components/panes/types.ts              |   3 +-
 9 files changed, 902 insertions(+), 799 deletions(-)

diff --git a/src/components/focus/FocusPanel.tsx b/src/components/focus/FocusPanel.tsx
index 6d16f16..b46a07d 100644
--- a/src/components/focus/FocusPanel.tsx
+++ b/src/components/focus/FocusPanel.tsx
@@ -19,6 +19,7 @@ interface FocusPanelProps {
   activeTab: number | null;
   onTabSelect: (nodeId: number) => void;
   onNodeClick?: (nodeId: number) => void;
+  onOpenInMap?: () => void;
   onTabClose: (nodeId: number) => void;
   refreshTrigger?: number;
   onTextSelect?: (nodeId: number, nodeTitle: string, text: string) => void;
@@ -32,6 +33,7 @@ export default function FocusPanel({
   activeTab,
   onTabSelect,
   onNodeClick,
+  onOpenInMap,
   onTabClose,
   refreshTrigger,
   onTextSelect,
@@ -1107,6 +1109,16 @@ export default function FocusPanel({
                       <Check size={11} strokeWidth={3} />
                     </span>
                   ) : null}
+                  {onOpenInMap ? (
+                    <button
+                      type="button"
+                      className="node-map-button"
+                      onClick={onOpenInMap}
+                      title="Open this node in the map"
+                    >
+                      Map
+                    </button>
+                  ) : null}
                   <button
                     type="button"
                     className="delete-node-button node-delete-button"
@@ -1519,6 +1531,25 @@ export default function FocusPanel({
           flex-shrink: 0;
         }
 
+        .node-map-button {
+          border: 1px solid var(--rah-border-strong);
+          background: var(--rah-bg-panel);
+          color: var(--rah-text-muted);
+          border-radius: 999px;
+          font-size: 10px;
+          font-weight: 700;
+          letter-spacing: 0.03em;
+          padding: 3px 8px;
+          cursor: pointer;
+          flex-shrink: 0;
+        }
+
+        .node-map-button:hover {
+          border-color: var(--rah-accent-green-soft-strong);
+          color: var(--rah-accent-green);
+          background: var(--rah-accent-green-soft);
+        }
+
         .node-delete-button {
           width: 20px;
           height: 20px;
diff --git a/src/components/layout/ThreePanelLayout.tsx b/src/components/layout/ThreePanelLayout.tsx
index fdb4275..2e5067e 100644
--- a/src/components/layout/ThreePanelLayout.tsx
+++ b/src/components/layout/ThreePanelLayout.tsx
@@ -239,6 +239,8 @@ export default function ThreePanelLayout() {
     () => SLOT_ORDER.slice(0, Math.max(1, Math.min(3, visiblePaneCount))),
     [visiblePaneCount]
   );
+  const [focusedNodeId, setFocusedNodeId] = useState<number | null>(null);
+  const [isMapFocusSuppressed, setIsMapFocusSuppressed] = useState(false);
 
   const isPanelExpanded = useCallback((slot: SlotId) => {
     return visibleSlots.includes(slot);
@@ -307,23 +309,47 @@ export default function ThreePanelLayout() {
     }
   }, [activePane, visibleSlots]);
 
-  const activeNodeId = useMemo(() => {
-    const activeSlotState = slotStates[activePane];
-    const activeTab = activeSlotState ? getActiveTab(activeSlotState) : undefined;
-    if (activeTab?.type === 'node' && activeTab.nodeId != null) {
-      return activeTab.nodeId;
-    }
+  const deriveFallbackFocusedNode = useCallback((): number | null => {
+    const orderedSlots: SlotId[] = [activePane, ...(['A', 'B', 'C'] as SlotId[]).filter((slot) => slot !== activePane)];
 
-    for (const slot of ['A', 'B', 'C'] as SlotId[]) {
+    for (const slot of orderedSlots) {
       const state = slotStates[slot];
-      const tab = state ? getActiveTab(state) : undefined;
-      if (tab?.type === 'node' && tab.nodeId != null) {
-        return tab.nodeId;
+      const activeTab = state ? getActiveTab(state) : undefined;
+      if (activeTab?.type === 'node' && activeTab.nodeId != null) {
+        return activeTab.nodeId;
       }
     }
 
-    return allOpenNodeIds[0] ?? null;
-  }, [activePane, allOpenNodeIds, slotStates]);
+    for (const slot of orderedSlots) {
+      const fallbackTab = slotStates[slot]?.tabs.find((tab) => tab.type === 'node' && tab.nodeId != null);
+      if (fallbackTab?.nodeId != null) {
+        return fallbackTab.nodeId;
+      }
+    }
+
+    return null;
+  }, [activePane, slotStates]);
+
+  useEffect(() => {
+    if (focusedNodeId == null) {
+      return;
+    }
+
+    if (!allOpenNodeIds.includes(focusedNodeId)) {
+      setFocusedNodeId(deriveFallbackFocusedNode());
+    }
+  }, [allOpenNodeIds, deriveFallbackFocusedNode, focusedNodeId]);
+
+  useEffect(() => {
+    if (focusedNodeId != null || isMapFocusSuppressed) {
+      return;
+    }
+
+    const initialFocusedNode = deriveFallbackFocusedNode();
+    if (initialFocusedNode != null) {
+      setFocusedNodeId(initialFocusedNode);
+    }
+  }, [deriveFallbackFocusedNode, focusedNodeId, isMapFocusSuppressed]);
 
   const handleRefreshAll = useCallback(() => {
     setNodesPanelRefresh((prev) => prev + 1);
@@ -458,6 +484,8 @@ export default function ThreePanelLayout() {
 
     setPanelExpanded(slot, true);
     setActivePane(slot);
+    setIsMapFocusSuppressed(false);
+    setFocusedNodeId(nodeId);
   }, [getSlotSetter, setPanelExpanded]);
 
   const closeTabInSlot = useCallback((slot: SlotId, tabId: string) => {
@@ -487,6 +515,8 @@ export default function ThreePanelLayout() {
       const state = getSlotState(slot);
       if (state?.tabs.some((tab) => tab.id === existingTabId)) {
         getSlotSetter(slot)({ tabs: state.tabs, activeTabId: existingTabId });
+        setIsMapFocusSuppressed(false);
+        setFocusedNodeId(nodeId);
         setActivePane(slot);
         return;
       }
@@ -505,6 +535,8 @@ export default function ThreePanelLayout() {
 
     if (preferredNodeTarget) {
       addNodeTabToSlot(preferredNodeTarget, nodeId);
+      setIsMapFocusSuppressed(false);
+      setFocusedNodeId(nodeId);
       setActivePane(preferredNodeTarget);
       return;
     }
@@ -519,6 +551,8 @@ export default function ThreePanelLayout() {
       ?? 'A';
 
     addNodeTabToSlot(target, nodeId);
+    setIsMapFocusSuppressed(false);
+    setFocusedNodeId(nodeId);
   }, [activePane, addNodeTabToSlot, getSlotSetter, getSlotState, visibleSlots]);
 
   const openPaneSingleton = useCallback((paneType: Exclude<PaneType, 'node'>, preferredSlot?: SlotId) => {
@@ -552,9 +586,19 @@ export default function ThreePanelLayout() {
     const state = getSlotState(slot);
     if (!state) return;
     getSlotSetter(slot)({ tabs: state.tabs, activeTabId: tabId });
+    const tab = state.tabs.find((current) => current.id === tabId);
+    if (tab?.type === 'node' && tab.nodeId != null) {
+      setIsMapFocusSuppressed(false);
+      setFocusedNodeId(tab.nodeId);
+    }
     setActivePane(slot);
   }, [getSlotSetter, getSlotState]);
 
+  const clearMapFocus = useCallback(() => {
+    setIsMapFocusSuppressed(true);
+    setFocusedNodeId(null);
+  }, []);
+
   const handleNodeDeleted = useCallback((nodeId: number) => {
     const tabId = createTabId('node', nodeId);
     (['A', 'B', 'C'] as SlotId[]).forEach((slot) => closeTabInSlot(slot, tabId));
@@ -785,7 +829,8 @@ export default function ThreePanelLayout() {
           <MapPane
             {...commonProps}
             onNodeClick={(nodeId) => openNodeFromSlot(nodeId, slot)}
-            activeTabId={activeNodeId}
+            focusedNodeId={focusedNodeId}
+            onClearFocus={clearMapFocus}
           />
         );
       case 'views':
diff --git a/src/components/panes/MapPane.tsx b/src/components/panes/MapPane.tsx
index 0b18495..0d6fa51 100644
--- a/src/components/panes/MapPane.tsx
+++ b/src/components/panes/MapPane.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState, useCallback, type CSSProperties } from 'react';
+import { useEffect, useMemo, useState, useCallback, type CSSProperties } from 'react';
 import {
   ReactFlow,
   Background,
   useNodesState,
   useEdgesState,
-  type Connection,
   type NodeMouseHandler,
   type Node as RFNode,
   type Edge as RFEdge,
@@ -21,23 +20,24 @@ import PaneHeader from './PaneHeader';
 import type { MapPaneProps } from './types';
 import { RahNode } from './map/RahNode';
 import { RahEdge } from './map/RahEdge';
-import EdgeExplanationModal from './map/EdgeExplanationModal';
-import { toRFNodes, toRFEdges, NODE_LIMIT, type MapViewMode, type RahNodeData } from './map/utils';
+import {
+  buildAdjacency,
+  buildDegreeMap,
+  buildFocusedGraph,
+  toRFNodes,
+  toRFEdges,
+  NODE_LIMIT,
+  type MapViewMode,
+  type RahNodeData,
+} from './map/utils';
 import { useTheme } from '@/hooks/useTheme';
 import './map/map-styles.css';
 
 const nodeTypes = { rahNode: RahNode };
 const edgeTypes = { rahEdge: RahEdge };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function debounce<T extends (...args: any[]) => void>(fn: T, ms: number): T {
-  let timer: ReturnType<typeof setTimeout>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return ((...args: any[]) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => fn(...args), ms);
-  }) as T;
-}
+const SEARCH_MIN_CHARS = 2;
+const SEARCH_RESULT_LIMIT = 8;
 
 function MapPaneInner({
   slot,
@@ -45,7 +45,8 @@ function MapPaneInner({
   onSwapPanes,
   tabBar,
   onNodeClick,
-  activeTabId,
+  focusedNodeId,
+  onClearFocus,
 }: MapPaneProps) {
   const reactFlowInstance = useReactFlow();
   const [theme] = useTheme();
@@ -57,66 +58,82 @@ function MapPaneInner({
   const [error, setError] = useState<string | null>(null);
 
   const [selectedNodeId, setSelectedNodeId] = useState<number | null>(null);
-  const [viewMode, setViewMode] = useState<MapViewMode>('context');
+  const [hoveredNodeId, setHoveredNodeId] = useState<number | null>(null);
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<Array<{ id: number; title: string }>>([]);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
 
   const [rfNodes, setRfNodes, onNodesChange] = useNodesState<RFNode<RahNodeData>>([]);
   const [rfEdges, setRfEdges, onEdgesChange] = useEdgesState<RFEdge>([]);
-  const [pendingConnection, setPendingConnection] = useState<Connection | null>(null);
-
-  const rfPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map());
-  const hasInitialFitRef = useRef(false);
 
   const allDbNodes = useMemo(() => {
     const baseIds = new Set(baseNodes.map((node) => node.id));
     return [...baseNodes, ...expandedNodes.filter((node) => !baseIds.has(node.id))];
   }, [baseNodes, expandedNodes]);
 
-  const selectedDbNode = useMemo(
-    () => allDbNodes.find((node) => node.id === selectedNodeId) ?? null,
-    [allDbNodes, selectedNodeId],
+  const nodesById = useMemo(() => {
+    const map = new Map<number, DbNode>();
+    allDbNodes.forEach((node) => map.set(node.id, node));
+    return map;
+  }, [allDbNodes]);
+
+  const adjacency = useMemo(() => buildAdjacency(dbEdges), [dbEdges]);
+  const degreeMap = useMemo(() => buildDegreeMap(dbEdges), [dbEdges]);
+
+  const focusedGraph = useMemo(
+    () => (selectedNodeId ? buildFocusedGraph(selectedNodeId, adjacency, degreeMap) : null),
+    [selectedNodeId, adjacency, degreeMap],
   );
 
-  const connectedNodeIds = useMemo(() => {
-    if (!selectedNodeId) return new Set<number>();
-    const connected = new Set<number>();
-    dbEdges.forEach((edge) => {
-      if (edge.from_node_id === selectedNodeId) connected.add(edge.to_node_id);
-      if (edge.to_node_id === selectedNodeId) connected.add(edge.from_node_id);
-    });
-    return connected;
-  }, [selectedNodeId, dbEdges]);
+  const viewMode: MapViewMode = focusedGraph ? 'focused' : 'overview';
 
-  const clusterLabels = useMemo(() => {
-    if (viewMode !== 'context') return [];
-
-    const grouped = new Map<string, { x: number; y: number; count: number }>();
-    for (const node of rfNodes) {
-      const clusterLabel = (node.data as RahNodeData).clusterLabel;
-      const current = grouped.get(clusterLabel) || { x: 0, y: 0, count: 0 };
-      current.x += node.position.x;
-      current.y += node.position.y;
-      current.count += 1;
-      grouped.set(clusterLabel, current);
+  const visibleNodes = useMemo(() => {
+    if (!focusedGraph) {
+      return [...baseNodes]
+        .sort((a, b) => (degreeMap.get(b.id) ?? b.edge_count ?? 0) - (degreeMap.get(a.id) ?? a.edge_count ?? 0))
+        .slice(0, NODE_LIMIT);
     }
 
-    return [...grouped.entries()].map(([clusterLabel, totals]) => ({
-      clusterLabel,
-      x: totals.x / totals.count,
-      y: totals.y / totals.count - 84,
-    }));
-  }, [rfNodes, viewMode]);
+    return [...focusedGraph.nodeIds]
+      .map((nodeId) => nodesById.get(nodeId))
+      .filter((node): node is DbNode => Boolean(node))
+      .sort((a, b) => {
+        const roleWeight = a.id === focusedGraph.selectedNodeId
+          ? 0
+          : focusedGraph.firstHopIds.includes(a.id)
+            ? 1
+            : 2;
+        const otherRoleWeight = b.id === focusedGraph.selectedNodeId
+          ? 0
+          : focusedGraph.firstHopIds.includes(b.id)
+            ? 1
+            : 2;
+
+        if (roleWeight !== otherRoleWeight) return roleWeight - otherRoleWeight;
+
+        const degreeDiff = (degreeMap.get(b.id) ?? 0) - (degreeMap.get(a.id) ?? 0);
+        return degreeDiff !== 0 ? degreeDiff : a.id - b.id;
+      });
+  }, [baseNodes, degreeMap, focusedGraph, nodesById]);
+
+  const hoveredDbNode = hoveredNodeId ? nodesById.get(hoveredNodeId) ?? null : null;
 
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
       setError(null);
+
       try {
         const [nodesRes, edgesRes] = await Promise.all([
           fetch(`/api/nodes?limit=${NODE_LIMIT}&sortBy=edges`),
           fetch('/api/edges'),
         ]);
 
-        if (!nodesRes.ok || !edgesRes.ok) throw new Error('Failed to load map data');
+        if (!nodesRes.ok || !edgesRes.ok) {
+          throw new Error('Failed to load map data');
+        }
 
         const nodesPayload = await nodesRes.json();
         const edgesPayload = await edgesRes.json();
@@ -124,8 +141,6 @@ function MapPaneInner({
         setBaseNodes(nodesPayload.data || []);
         setDbEdges(edgesPayload.data || []);
         setExpandedNodes([]);
-        setSelectedNodeId(null);
-        rfPositionsRef.current.clear();
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Unknown error');
       } finally {
@@ -137,176 +152,146 @@ function MapPaneInner({
   }, []);
 
   useEffect(() => {
-    if (allDbNodes.length === 0) {
-      setRfNodes([]);
-      setRfEdges([]);
+    const centerX = 640;
+    const centerY = 420;
+    const nodeIdSet = new Set(visibleNodes.map((node) => String(node.id)));
+
+    setRfNodes(
+      toRFNodes({
+        nodes: visibleNodes,
+        viewMode,
+        degreeMap,
+        adjacency,
+        focusedGraph,
+        centerX,
+        centerY,
+      }),
+    );
+    setRfEdges(
+      toRFEdges({
+        dbEdges,
+        nodeIds: nodeIdSet,
+        focusedGraph,
+      }),
+    );
+  }, [adjacency, dbEdges, degreeMap, focusedGraph, setRfEdges, setRfNodes, viewMode, visibleNodes]);
+
+  useEffect(() => {
+    if (!focusedGraph) {
       return;
     }
 
-    rfNodes.forEach((node) => {
-      rfPositionsRef.current.set(node.id, node.position);
-    });
-
-    const centerX = 600;
-    const centerY = 400;
-
-    const newRfNodes = toRFNodes(
-      baseNodes,
-      expandedNodes,
-      centerX,
-      centerY,
-      selectedNodeId,
-      connectedNodeIds,
-      rfPositionsRef.current,
-      viewMode,
-      dbEdges,
-    );
-
-    const nodeIdSet = new Set(newRfNodes.map((node) => node.id));
-    const newRfEdges = toRFEdges(dbEdges, nodeIdSet, selectedNodeId);
-
-    setRfNodes(newRfNodes);
-    setRfEdges(newRfEdges);
-  }, [allDbNodes, baseNodes, expandedNodes, dbEdges, selectedNodeId, connectedNodeIds, viewMode, rfNodes, setRfEdges, setRfNodes]);
-
-  useEffect(() => {
-    if (hasInitialFitRef.current || rfNodes.length === 0 || loading) return;
-    hasInitialFitRef.current = true;
-
-    const hubNodeIds = [...baseNodes]
-      .sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0))
-      .slice(0, 25)
-      .map((node) => String(node.id));
-
-    setTimeout(() => {
-      if (hubNodeIds.length > 0) {
-        reactFlowInstance.fitView({
-          nodes: hubNodeIds.map((id) => ({ id })),
-          padding: 0.3,
-          duration: 300,
-        });
-      }
-    }, 100);
-  }, [rfNodes, loading, baseNodes, reactFlowInstance]);
-
-  useEffect(() => {
-    hasInitialFitRef.current = false;
-  }, [viewMode]);
-
-  const fitAllNodes = useCallback(() => {
-    reactFlowInstance.fitView({ padding: 0.2, duration: 300 });
-  }, [reactFlowInstance]);
-
-  const fitHubNodes = useCallback(() => {
-    const hubNodeIds = [...baseNodes]
-      .sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0))
-      .slice(0, 25)
-      .map((node) => String(node.id));
-    if (hubNodeIds.length > 0) {
-      reactFlowInstance.fitView({
-        nodes: hubNodeIds.map((id) => ({ id })),
-        padding: 0.3,
-        duration: 300,
-      });
-    }
-  }, [baseNodes, reactFlowInstance]);
-
-  const fetchConnectedNodes = useCallback(async (nodeId: number) => {
-    try {
-      const edgesRes = await fetch(`/api/nodes/${nodeId}/edges`);
-      let nodeEdges: DbEdge[] = [];
-
-      if (edgesRes.ok) {
-        const edgesData = await edgesRes.json();
-        nodeEdges = edgesData.data || [];
-
-        if (nodeEdges.length > 0) {
-          setDbEdges((prev) => {
-            const existing = new Set(prev.map((edge) => edge.id));
-            const fresh = nodeEdges.filter((edge) => !existing.has(edge.id));
-            return fresh.length > 0 ? [...prev, ...fresh] : prev;
-          });
-        }
-      }
-
-      const connectedIds = new Set<number>();
-      dbEdges.forEach((edge) => {
-        if (edge.from_node_id === nodeId) connectedIds.add(edge.to_node_id);
-        if (edge.to_node_id === nodeId) connectedIds.add(edge.from_node_id);
-      });
-      nodeEdges.forEach((edge) => {
-        if (edge.from_node_id === nodeId) connectedIds.add(edge.to_node_id);
-        if (edge.to_node_id === nodeId) connectedIds.add(edge.from_node_id);
-      });
-
-      const existingIds = new Set(allDbNodes.map((node) => node.id));
-      const missingIds = Array.from(connectedIds).filter((id) => !existingIds.has(id));
-      if (missingIds.length === 0) return;
+    const missingIds = [...focusedGraph.nodeIds].filter((nodeId) => !nodesById.has(nodeId));
+    if (missingIds.length === 0) return;
 
+    void (async () => {
       const fetched = (
         await Promise.all(
-          missingIds.slice(0, 50).map(async (id) => {
+          missingIds.map(async (nodeId) => {
             try {
-              const res = await fetch(`/api/nodes/${id}`);
-              if (res.ok) {
-                const data = await res.json();
-                return data.node as DbNode;
-              }
+              const response = await fetch(`/api/nodes/${nodeId}`);
+              if (!response.ok) return null;
+              const payload = await response.json();
+              return payload.node as DbNode;
             } catch {
               return null;
             }
-            return null;
           }),
         )
       ).filter((node): node is DbNode => node !== null);
 
-      if (fetched.length > 0) {
-        setExpandedNodes((prev) => {
-          const ids = new Set(prev.map((node) => node.id));
-          const fresh = fetched.filter((node) => !ids.has(node.id));
-          return fresh.length > 0 ? [...prev, ...fresh] : prev;
-        });
-      }
-    } catch (err) {
-      console.error('Failed to fetch connected nodes:', err);
-    }
-  }, [dbEdges, allDbNodes]);
+      if (fetched.length === 0) return;
+
+      setExpandedNodes((prev) => {
+        const existingIds = new Set(prev.map((node) => node.id));
+        const fresh = fetched.filter((node) => !existingIds.has(node.id));
+        return fresh.length > 0 ? [...prev, ...fresh] : prev;
+      });
+    })();
+  }, [focusedGraph, nodesById]);
 
   useEffect(() => {
-    if (selectedNodeId) {
-      void fetchConnectedNodes(selectedNodeId);
+    if (focusedNodeId == null) {
+      setSelectedNodeId(null);
+      return;
     }
-  }, [selectedNodeId, fetchConnectedNodes]);
 
-  useEffect(() => {
-    if (!activeTabId) return;
-    const existing = allDbNodes.find((node) => node.id === activeTabId);
+    if (selectedNodeId === focusedNodeId) return;
+
+    const existing = nodesById.get(focusedNodeId);
     if (existing) {
-      setSelectedNodeId(activeTabId);
-      const rfNode = rfNodes.find((node) => node.id === String(activeTabId));
-      if (rfNode) {
-        reactFlowInstance.setCenter(rfNode.position.x, rfNode.position.y, { duration: 400, zoom: 1.5 });
-      }
+      setSelectedNodeId(focusedNodeId);
       return;
     }
 
     void (async () => {
       try {
-        const res = await fetch(`/api/nodes/${activeTabId}`);
-        if (!res.ok) return;
-        const data = await res.json();
-        const node = data.node as DbNode;
+        const response = await fetch(`/api/nodes/${focusedNodeId}`);
+        if (!response.ok) return;
+
+        const payload = await response.json();
+        const node = payload.node as DbNode | undefined;
         if (!node) return;
+
         setExpandedNodes((prev) => (prev.some((existingNode) => existingNode.id === node.id) ? prev : [...prev, node]));
         setSelectedNodeId(node.id);
-        setTimeout(() => {
-          reactFlowInstance.setCenter(600, 400, { duration: 400, zoom: 1.5 });
-        }, 100);
       } catch (err) {
-        console.error('Failed to fetch focused node:', err);
+        console.error('Failed to fetch focused node for map:', err);
       }
     })();
-  }, [activeTabId, allDbNodes, rfNodes, reactFlowInstance]);
+  }, [focusedNodeId, nodesById]);
+
+  useEffect(() => {
+    const trimmed = searchQuery.trim();
+    if (trimmed.length < SEARCH_MIN_CHARS) {
+      setSearchResults([]);
+      setSearchLoading(false);
+      return;
+    }
+
+    const timeout = window.setTimeout(() => {
+      void (async () => {
+        setSearchLoading(true);
+        try {
+          const response = await fetch(`/api/nodes/search?q=${encodeURIComponent(trimmed)}&limit=${SEARCH_RESULT_LIMIT}`);
+          if (!response.ok) {
+            setSearchResults([]);
+            return;
+          }
+
+          const payload = await response.json();
+          setSearchResults(payload.data || []);
+        } catch {
+          setSearchResults([]);
+        } finally {
+          setSearchLoading(false);
+        }
+      })();
+    }, 180);
+
+    return () => window.clearTimeout(timeout);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    if (loading || rfNodes.length === 0) return;
+
+    const timeout = window.setTimeout(() => {
+      if (focusedGraph && selectedNodeId) {
+        const selectedNode = rfNodes.find((node) => node.id === String(selectedNodeId));
+        if (selectedNode) {
+          reactFlowInstance.setCenter(selectedNode.position.x, selectedNode.position.y, {
+            duration: 280,
+            zoom: 1.02,
+          });
+        }
+        return;
+      }
+
+      reactFlowInstance.fitView({ padding: 0.22, duration: 280 });
+    }, 80);
+
+    return () => window.clearTimeout(timeout);
+  }, [focusedGraph, loading, reactFlowInstance, rfNodes, selectedNodeId]);
 
   useEffect(() => {
     let eventSource: EventSource | null = null;
@@ -321,36 +306,38 @@ function MapPaneInner({
           switch (payload.type) {
             case 'NODE_UPDATED': {
               const node = payload.data?.node as DbNode | undefined;
-              if (node?.id) {
-                const updater = (prev: DbNode[]) =>
-                  prev.map((existingNode) => (existingNode.id === node.id ? { ...existingNode, ...node } : existingNode));
-                setBaseNodes(updater);
-                setExpandedNodes(updater);
-              }
+              if (!node?.id) break;
+
+              const updateNodes = (prev: DbNode[]) =>
+                prev.map((existingNode) => (existingNode.id === node.id ? { ...existingNode, ...node } : existingNode));
+
+              setBaseNodes(updateNodes);
+              setExpandedNodes(updateNodes);
               break;
             }
             case 'NODE_DELETED': {
-              const deletedId = payload.data?.nodeId;
-              if (deletedId) {
-                setBaseNodes((prev) => prev.filter((node) => node.id !== deletedId));
-                setExpandedNodes((prev) => prev.filter((node) => node.id !== deletedId));
-                setDbEdges((prev) => prev.filter((edge) => edge.from_node_id !== deletedId && edge.to_node_id !== deletedId));
-                setSelectedNodeId((prev) => (prev === deletedId ? null : prev));
+              const deletedId = payload.data?.nodeId as number | undefined;
+              if (!deletedId) break;
+
+              setBaseNodes((prev) => prev.filter((node) => node.id !== deletedId));
+              setExpandedNodes((prev) => prev.filter((node) => node.id !== deletedId));
+              setDbEdges((prev) => prev.filter((edge) => edge.from_node_id !== deletedId && edge.to_node_id !== deletedId));
+              setSelectedNodeId((prev) => (prev === deletedId ? null : prev));
+              if (deletedId === focusedNodeId) {
+                onClearFocus?.();
               }
               break;
             }
             case 'EDGE_CREATED': {
               const edge = payload.data?.edge as DbEdge | undefined;
-              if (edge?.id) {
-                setDbEdges((prev) => (prev.some((existingEdge) => existingEdge.id === edge.id) ? prev : [...prev, edge]));
-              }
+              if (!edge?.id) break;
+              setDbEdges((prev) => (prev.some((existingEdge) => existingEdge.id === edge.id) ? prev : [...prev, edge]));
               break;
             }
             case 'EDGE_DELETED': {
-              const edgeId = payload.data?.edgeId;
-              if (edgeId) {
-                setDbEdges((prev) => prev.filter((edge) => edge.id !== edgeId));
-              }
+              const edgeId = payload.data?.edgeId as number | undefined;
+              if (!edgeId) break;
+              setDbEdges((prev) => prev.filter((edge) => edge.id !== edgeId));
               break;
             }
             default:
@@ -371,180 +358,114 @@ function MapPaneInner({
     return () => {
       eventSource?.close();
     };
-  }, []);
+  }, [focusedNodeId, onClearFocus]);
 
-  const savePositionRef = useRef(
-    debounce(async (nodeId: number, x: number, y: number, mode: MapViewMode) => {
+  const resetToOverview = useCallback(() => {
+    setSelectedNodeId(null);
+    setHoveredNodeId(null);
+    onClearFocus?.();
+  }, [onClearFocus]);
+
+  const handleSearchSelect = useCallback(async (nodeId: number) => {
+    const existing = nodesById.get(nodeId);
+    if (!existing) {
       try {
-        const res = await fetch(`/api/nodes/${nodeId}`);
-        if (!res.ok) return;
-        const { node: existing } = await res.json();
-        const existingMetadata = existing?.metadata ?? {};
-        const mergedMeta = typeof existingMetadata === 'string'
-          ? (() => {
-              try {
-                return JSON.parse(existingMetadata);
-              } catch {
-                return {};
-              }
-            })()
-          : existingMetadata;
-
-        await fetch(`/api/nodes/${nodeId}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            metadata: {
-              ...mergedMeta,
-              map_positions: {
-                ...(mergedMeta.map_positions || {}),
-                [mode]: { x, y },
-              },
-              [`map_position_${mode}`]: { x, y },
-            },
-          }),
-        });
+        const response = await fetch(`/api/nodes/${nodeId}`);
+        if (response.ok) {
+          const payload = await response.json();
+          const node = payload.node as DbNode | undefined;
+          if (node) {
+            setExpandedNodes((prev) => (prev.some((existingNode) => existingNode.id === node.id) ? prev : [...prev, node]));
+          }
+        }
       } catch (err) {
-        console.error('Failed to save node position:', err);
+        console.error('Failed to fetch search-selected node:', err);
       }
-    }, 400),
-  );
-
-  const onNodeDragStop: NodeMouseHandler<RFNode<RahNodeData>> = useCallback((_event, node) => {
-    const nodeId = parseInt(node.id, 10);
-    if (!Number.isNaN(nodeId)) {
-      rfPositionsRef.current.set(node.id, node.position);
-      savePositionRef.current(nodeId, node.position.x, node.position.y, viewMode);
     }
-  }, [viewMode]);
 
-  useEffect(() => {
-    rfPositionsRef.current.clear();
-  }, [viewMode]);
+    setSelectedNodeId(nodeId);
+    setSearchOpen(false);
+    setSearchQuery('');
+    onNodeClick?.(nodeId);
+  }, [nodesById, onNodeClick]);
 
-  useEffect(() => {
-    if (loading || rfNodes.length === 0) return;
-
-    const timeout = setTimeout(() => {
-      reactFlowInstance.fitView({ padding: 0.22, duration: 300 });
-    }, 80);
-
-    return () => clearTimeout(timeout);
-  }, [viewMode, loading, rfNodes, reactFlowInstance]);
-
-  const onNodeClickHandler: NodeMouseHandler<RFNode<RahNodeData>> = useCallback((_event, node) => {
-    const nodeId = parseInt(node.id, 10);
-    if (!Number.isNaN(nodeId)) {
-      setSelectedNodeId((prev) => (prev === nodeId ? null : nodeId));
-    }
-  }, []);
-
-  const onNodeDoubleClick: NodeMouseHandler<RFNode<RahNodeData>> = useCallback((_event, node) => {
+  const handleNodeClickHandler: NodeMouseHandler<RFNode<RahNodeData>> = useCallback((_event, node) => {
     const nodeId = parseInt(node.id, 10);
     if (!Number.isNaN(nodeId)) {
+      setSelectedNodeId(nodeId);
       onNodeClick?.(nodeId);
     }
   }, [onNodeClick]);
 
-  const onConnect = useCallback((connection: Connection) => {
-    if (connection.source === connection.target) return;
-    setPendingConnection(connection);
-  }, []);
-
-  const handleEdgeCreate = useCallback(async (explanation: string) => {
-    if (!pendingConnection?.source || !pendingConnection?.target) return;
-
-    const fromId = parseInt(pendingConnection.source, 10);
-    const toId = parseInt(pendingConnection.target, 10);
-
-    try {
-      const res = await fetch('/api/edges', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          from_node_id: fromId,
-          to_node_id: toId,
-          source: 'user',
-          explanation,
-          created_via: 'ui',
-        }),
-      });
-
-      if (res.ok) {
-        const payload = await res.json();
-        const edge = payload.data;
-        if (edge?.id) {
-          setDbEdges((prev) => (prev.some((existingEdge) => existingEdge.id === edge.id) ? prev : [...prev, edge]));
-        }
-      }
-    } catch (err) {
-      console.error('Failed to create edge:', err);
+  const handleNodeMouseEnter: NodeMouseHandler<RFNode<RahNodeData>> = useCallback((_event, node) => {
+    const nodeId = parseInt(node.id, 10);
+    if (!Number.isNaN(nodeId)) {
+      setHoveredNodeId(nodeId);
     }
-
-    setPendingConnection(null);
-  }, [pendingConnection]);
-
-  const handleEdgeCancel = useCallback(() => {
-    setPendingConnection(null);
   }, []);
 
-  const pendingSourceTitle = pendingConnection?.source
-    ? allDbNodes.find((node) => node.id === parseInt(pendingConnection.source, 10))?.title || 'Unknown'
-    : '';
-  const pendingTargetTitle = pendingConnection?.target
-    ? allDbNodes.find((node) => node.id === parseInt(pendingConnection.target, 10))?.title || 'Unknown'
-    : '';
+  const handleNodeMouseLeave: NodeMouseHandler<RFNode<RahNodeData>> = useCallback(() => {
+    setHoveredNodeId(null);
+  }, []);
+
+  const fitVisibleNodes = useCallback(() => {
+    reactFlowInstance.fitView({ padding: 0.2, duration: 260 });
+  }, [reactFlowInstance]);
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'transparent', overflow: 'hidden' }}>
       <PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} tabBar={tabBar}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-          <button
-            onClick={() => setViewMode('context')}
-            style={{
-              padding: '6px 10px',
-              background: viewMode === 'context' ? 'var(--rah-accent-green-soft)' : 'transparent',
-              border: '1px solid',
-              borderColor: viewMode === 'context' ? 'var(--rah-accent-green-soft-strong)' : 'var(--rah-border-strong)',
-              borderRadius: '6px',
-              color: viewMode === 'context' ? 'var(--rah-accent-green)' : 'var(--rah-text-muted)',
-              fontSize: '12px',
-              cursor: 'pointer',
-            }}
-          >
-            Context View
-          </button>
-          <button
-            onClick={() => setViewMode('hub')}
-            style={{
-              padding: '6px 10px',
-              background: viewMode === 'hub' ? 'var(--rah-accent-green-soft)' : 'transparent',
-              border: '1px solid',
-              borderColor: viewMode === 'hub' ? 'var(--rah-accent-green-soft-strong)' : 'var(--rah-border-strong)',
-              borderRadius: '6px',
-              color: viewMode === 'hub' ? 'var(--rah-accent-green)' : 'var(--rah-text-muted)',
-              fontSize: '12px',
-              cursor: 'pointer',
-            }}
-          >
-            Hub View
-          </button>
+        <div style={headerTools}>
+          <span style={viewMode === 'focused' ? focusedBadge : overviewBadge}>
+            {viewMode === 'focused' ? 'Focused' : 'Overview'}
+          </span>
+
+          <div style={searchShell}>
+            <input
+              type="search"
+              value={searchQuery}
+              onChange={(event) => {
+                setSearchQuery(event.target.value);
+                setSearchOpen(true);
+              }}
+              onFocus={() => setSearchOpen(true)}
+              placeholder="Search nodes..."
+              style={searchInput}
+            />
+
+            {searchOpen && (searchQuery.trim().length >= SEARCH_MIN_CHARS || searchResults.length > 0) && (
+              <div style={searchResultsPanel}>
+                {searchLoading ? (
+                  <div style={searchHint}>Searching…</div>
+                ) : searchResults.length === 0 ? (
+                  <div style={searchHint}>No matching nodes</div>
+                ) : (
+                  searchResults.map((result) => (
+                    <button
+                      key={result.id}
+                      type="button"
+                      onMouseDown={(event) => event.preventDefault()}
+                      onClick={() => void handleSearchSelect(result.id)}
+                      style={searchResultButton}
+                    >
+                      <span style={searchResultTitle}>{result.title || 'Untitled'}</span>
+                      <span style={searchResultMeta}>#{result.id}</span>
+                    </button>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </PaneHeader>
 
       <div style={{ position: 'relative', flex: 1, background: 'var(--rah-bg-base)' }}>
         {loading ? (
-          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rah-text-muted)' }}>
-            Loading map...
-          </div>
+          <div style={emptyState}>Loading map…</div>
         ) : error ? (
-          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ef4444' }}>
-            {error}
-          </div>
+          <div style={{ ...emptyState, color: '#ef4444' }}>{error}</div>
         ) : rfNodes.length === 0 ? (
-          <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rah-text-muted)' }}>
-            No nodes to display
-          </div>
+          <div style={emptyState}>No nodes to display</div>
         ) : (
           <div className="rah-map-wrapper" style={{ width: '100%', height: '100%' }}>
             <ReactFlow
@@ -552,14 +473,17 @@ function MapPaneInner({
               edges={rfEdges}
               onNodesChange={onNodesChange}
               onEdgesChange={onEdgesChange}
-              onNodeClick={onNodeClickHandler}
-              onNodeDoubleClick={onNodeDoubleClick}
-              onNodeDragStop={onNodeDragStop}
-              onConnect={onConnect}
+              onNodeClick={handleNodeClickHandler}
+              onNodeMouseEnter={handleNodeMouseEnter}
+              onNodeMouseLeave={handleNodeMouseLeave}
               nodeTypes={nodeTypes}
               edgeTypes={edgeTypes}
-              minZoom={0.1}
-              maxZoom={3}
+              minZoom={0.12}
+              maxZoom={2.5}
+              nodesDraggable={false}
+              nodesConnectable={false}
+              elementsSelectable
+              selectNodesOnDrag={false}
               defaultEdgeOptions={{ type: 'rahEdge' }}
               proOptions={{ hideAttribution: true }}
               colorMode={theme}
@@ -570,138 +494,47 @@ function MapPaneInner({
                 maskColor={theme === 'light' ? 'rgba(255, 255, 255, 0.72)' : 'rgba(0, 0, 0, 0.7)'}
                 nodeColor={(node) => {
                   const data = node.data as RahNodeData | undefined;
-                  return data?.clusterColor || '#2a2a2a';
+                  switch (data?.role) {
+                    case 'selected':
+                      return '#16a34a';
+                    case 'first-hop':
+                      return '#22c55e';
+                    case 'second-hop':
+                      return '#94a3b8';
+                    default:
+                      return '#64748b';
+                  }
                 }}
                 pannable
                 zoomable
               />
             </ReactFlow>
 
-            {viewMode === 'context' && clusterLabels.map((label) => (
-              <div
-                key={label.clusterLabel}
-                style={{
-                  position: 'absolute',
-                  transform: `translate(${label.x}px, ${label.y}px)`,
-                  pointerEvents: 'none',
-                  color: 'var(--rah-text-muted)',
-                  fontSize: '11px',
-                  letterSpacing: '0.05em',
-                  textTransform: 'uppercase',
-                  textShadow: theme === 'light' ? '0 1px 3px rgba(255,255,255,0.95)' : '0 1px 6px rgba(0,0,0,0.45)',
-                }}
-              >
-                {label.clusterLabel}
-              </div>
-            ))}
-
-            <div
-              style={{
-                position: 'absolute',
-                top: 8,
-                right: 8,
-                display: 'flex',
-                gap: 4,
-                zIndex: 10,
-              }}
-            >
-              <button
-                onClick={fitAllNodes}
-                style={{
-                  padding: '4px 8px',
-                  fontSize: 10,
-                  background: 'var(--rah-bg-panel)',
-                  border: '1px solid var(--rah-border-strong)',
-                  borderRadius: 4,
-                  color: 'var(--rah-text-muted)',
-                  cursor: 'pointer',
-                }}
-                title="Fit all nodes"
-              >
+            <div style={floatingActions}>
+              <button type="button" onClick={fitVisibleNodes} style={floatingButton} title="Fit visible nodes">
                 Fit
               </button>
-              {viewMode === 'hub' && (
-                <button
-                  onClick={fitHubNodes}
-                  style={{
-                    padding: '4px 8px',
-                    fontSize: 10,
-                    background: 'var(--rah-bg-panel)',
-                    border: '1px solid var(--rah-border-strong)',
-                    borderRadius: 4,
-                    color: 'var(--rah-text-muted)',
-                    cursor: 'pointer',
-                  }}
-                  title="Fit to hub nodes"
-                >
-                  Hubs
+              {selectedNodeId ? (
+                <button type="button" onClick={resetToOverview} style={floatingButton} title="Return to overview">
+                  Overview
                 </button>
-              )}
+              ) : null}
             </div>
 
-            {selectedDbNode && (
-              <div style={infoPanel}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
-                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--rah-text-base)' }}>
-                    {selectedDbNode.title || 'Untitled'}
-                  </div>
-                  <button
-                    onClick={() => setSelectedNodeId(null)}
-                    style={{ background: 'none', border: 'none', color: 'var(--rah-text-muted)', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}
-                  >
-                    &times;
-                  </button>
-                </div>
-                <div style={{ fontSize: 12, color: 'var(--rah-text-muted)', marginBottom: 8 }}>
-                  {connectedNodeIds.size} connected nodes
-                </div>
-                <div style={{ fontSize: 11, color: 'var(--rah-accent-green)', marginBottom: 8 }}>
-                  Click a connected node to traverse &middot; Double-click to open
-                </div>
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 8 }}>
-                  <span
-                    style={{
-                      padding: '2px 8px',
-                      borderRadius: 999,
-                      fontSize: 11,
-                      background: selectedDbNode.context?.name ? 'var(--rah-accent-green-soft)' : 'var(--rah-bg-active)',
-                      color: selectedDbNode.context?.name ? 'var(--rah-accent-green)' : 'var(--rah-text-muted)',
-                    }}
-                  >
-                    {selectedDbNode.context?.name || 'Unscoped'}
-                  </span>
-                </div>
-                <button
-                  onClick={() => onNodeClick?.(selectedDbNode.id)}
-                  style={{
-                    marginTop: 4,
-                    padding: '8px 12px',
-                    background: 'var(--rah-accent-green)',
-                    color: 'var(--rah-text-inverse)',
-                    border: 'none',
-                    borderRadius: '6px',
-                    fontSize: 12,
-                    fontWeight: 500,
-                    cursor: 'pointer',
-                    width: '100%',
-                  }}
-                >
-                  Open Node
-                </button>
+            {hoveredDbNode && hoveredNodeId !== selectedNodeId ? (
+              <div style={hoverPreviewCard}>
+                <div style={hoverPreviewTitle}>{hoveredDbNode.title || 'Untitled'}</div>
+                {hoveredDbNode.description ? (
+                  <div style={hoverPreviewBody}>{hoveredDbNode.description}</div>
+                ) : (
+                  <div style={hoverPreviewMeta}>No description</div>
+                )}
               </div>
-            )}
+            ) : null}
+
           </div>
         )}
       </div>
-
-      {pendingConnection && (
-        <EdgeExplanationModal
-          sourceTitle={pendingSourceTitle}
-          targetTitle={pendingTargetTitle}
-          onSubmit={handleEdgeCreate}
-          onCancel={handleEdgeCancel}
-        />
-      )}
     </div>
   );
 }
@@ -714,15 +547,151 @@ export default function MapPane(props: MapPaneProps) {
   );
 }
 
-const infoPanel: CSSProperties = {
+const emptyState: CSSProperties = {
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'var(--rah-text-muted)',
+};
+
+const headerTools: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+};
+
+const overviewBadge: CSSProperties = {
+  padding: '5px 9px',
+  borderRadius: 999,
+  border: '1px solid var(--rah-border-strong)',
+  background: 'var(--rah-bg-panel)',
+  color: 'var(--rah-text-muted)',
+  fontSize: 11,
+  fontWeight: 600,
+};
+
+const focusedBadge: CSSProperties = {
+  ...overviewBadge,
+  borderColor: 'var(--rah-accent-green-soft-strong)',
+  background: 'var(--rah-accent-green-soft)',
+  color: 'var(--rah-accent-green)',
+};
+
+const searchShell: CSSProperties = {
+  position: 'relative',
+  width: 220,
+};
+
+const searchInput: CSSProperties = {
+  width: '100%',
+  padding: '7px 10px',
+  borderRadius: 8,
+  border: '1px solid var(--rah-border-strong)',
+  background: 'var(--rah-bg-panel)',
+  color: 'var(--rah-text-base)',
+  fontSize: 12,
+  outline: 'none',
+};
+
+const searchResultsPanel: CSSProperties = {
   position: 'absolute',
-  bottom: 16,
-  left: 16,
-  width: 260,
+  top: 'calc(100% + 6px)',
+  left: 0,
+  right: 0,
   background: 'var(--rah-bg-modal)',
   border: '1px solid var(--rah-border)',
-  borderRadius: 8,
-  padding: 14,
-  zIndex: 10,
+  borderRadius: 10,
   boxShadow: 'var(--rah-shadow-floating)',
+  overflow: 'hidden',
+  zIndex: 30,
+};
+
+const searchHint: CSSProperties = {
+  padding: '10px 12px',
+  fontSize: 12,
+  color: 'var(--rah-text-muted)',
+};
+
+const searchResultButton: CSSProperties = {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 8,
+  padding: '10px 12px',
+  border: 'none',
+  background: 'transparent',
+  cursor: 'pointer',
+  color: 'var(--rah-text-base)',
+  textAlign: 'left',
+};
+
+const searchResultTitle: CSSProperties = {
+  flex: 1,
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: 12,
+};
+
+const searchResultMeta: CSSProperties = {
+  fontSize: 11,
+  color: 'var(--rah-text-muted)',
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, monospace',
+};
+
+const floatingActions: CSSProperties = {
+  position: 'absolute',
+  top: 10,
+  right: 10,
+  display: 'flex',
+  gap: 6,
+  zIndex: 10,
+};
+
+const floatingButton: CSSProperties = {
+  padding: '5px 9px',
+  fontSize: 11,
+  background: 'var(--rah-bg-panel)',
+  border: '1px solid var(--rah-border-strong)',
+  borderRadius: 6,
+  color: 'var(--rah-text-muted)',
+  cursor: 'pointer',
+};
+
+const hoverPreviewCard: CSSProperties = {
+  position: 'absolute',
+  top: 14,
+  left: 14,
+  width: 260,
+  padding: 12,
+  borderRadius: 10,
+  background: 'var(--rah-bg-modal)',
+  border: '1px solid var(--rah-border)',
+  boxShadow: 'var(--rah-shadow-floating)',
+  zIndex: 12,
+};
+
+const hoverPreviewTitle: CSSProperties = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: 'var(--rah-text-base)',
+  marginBottom: 6,
+};
+
+const hoverPreviewBody: CSSProperties = {
+  fontSize: 12,
+  color: 'var(--rah-text-muted)',
+  lineHeight: 1.45,
+  display: '-webkit-box',
+  WebkitLineClamp: 3,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+};
+
+const hoverPreviewMeta: CSSProperties = {
+  fontSize: 12,
+  color: 'var(--rah-text-muted)',
 };
diff --git a/src/components/panes/NodePane.tsx b/src/components/panes/NodePane.tsx
index 9cd754f..cc530e5 100644
--- a/src/components/panes/NodePane.tsx
+++ b/src/components/panes/NodePane.tsx
@@ -170,6 +170,7 @@ export default function NodePane({
           activeTab={activeTab}
           onTabSelect={onTabSelect}
           onNodeClick={onNodeClick}
+          onOpenInMap={onPaneAction ? () => onPaneAction({ type: 'switch-pane-type', paneType: 'map' }) : undefined}
           onTabClose={onTabClose}
           refreshTrigger={refreshTrigger}
           onTextSelect={onTextSelect}
diff --git a/src/components/panes/map/RahEdge.tsx b/src/components/panes/map/RahEdge.tsx
index 5495fec..199fec4 100644
--- a/src/components/panes/map/RahEdge.tsx
+++ b/src/components/panes/map/RahEdge.tsx
@@ -3,7 +3,7 @@
 import { memo, useState } from 'react';
 import {
   BaseEdge,
-  getStraightPath,
+  getBezierPath,
   type EdgeProps,
 } from '@xyflow/react';
 
@@ -25,11 +25,12 @@ function RahEdgeComponent({
   const [hovered, setHovered] = useState(false);
   const explanation = (data as RahEdgeData | undefined)?.explanation;
 
-  const [edgePath, labelX, labelY] = getStraightPath({
+  const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
     targetX,
     targetY,
+    curvature: 0.18,
   });
 
   return (
@@ -45,7 +46,7 @@ function RahEdgeComponent({
         strokeWidth={12}
         style={{ cursor: 'default' }}
       />
-      <BaseEdge id={id} path={edgePath} style={style} />
+      <BaseEdge id={id} path={edgePath} style={{ strokeLinecap: 'round', ...style }} />
       {hovered && explanation && (
         <foreignObject
           x={labelX - 80}
@@ -56,8 +57,8 @@ function RahEdgeComponent({
         >
           <div
             style={{
-              background: 'var(--rah-bg-active)',
-              border: '1px solid var(--rah-border-stronger)',
+              background: 'var(--rah-bg-modal)',
+              border: '1px solid var(--rah-border-strong)',
               borderRadius: 4,
               padding: '2px 8px',
               fontSize: 10,
@@ -67,6 +68,7 @@ function RahEdgeComponent({
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               maxWidth: 160,
+              boxShadow: 'var(--rah-shadow-floating)',
             }}
           >
             {explanation}
diff --git a/src/components/panes/map/RahNode.tsx b/src/components/panes/map/RahNode.tsx
index e43d744..8ed2b4b 100644
--- a/src/components/panes/map/RahNode.tsx
+++ b/src/components/panes/map/RahNode.tsx
@@ -8,40 +8,36 @@ import { getNodeIcon } from '@/utils/nodeIcons';
 type RahNodeType = Node<RahNodeData, 'rahNode'>;
 
 function RahNodeComponent({ data, selected }: NodeProps<RahNodeType>) {
-  const { label, clusterLabel, edgeCount, isExpanded, dbNode, clusterColor } = data;
-  const isTop = !isExpanded && edgeCount > 3;
+  const { label, dbNode, role, prominence } = data;
+  const isSelected = selected || role === 'selected';
+  const sizeScale = role === 'selected'
+    ? 1.08
+    : role === 'first-hop'
+      ? 1.02 + prominence * 0.06
+      : 0.92 + prominence * 0.12;
+  const strongNode = prominence > 0.72 && role === 'overview';
 
   return (
     <div
       className={[
         'rah-map-node',
-        isExpanded && 'rah-map-node--expanded',
-        isTop && 'rah-map-node--top',
-        selected && 'rah-map-node--selected',
+        role === 'selected' && 'rah-map-node--selected',
+        role === 'first-hop' && 'rah-map-node--first-hop',
+        role === 'second-hop' && 'rah-map-node--second-hop',
+        role === 'overview' && 'rah-map-node--overview',
+        isSelected && 'rah-map-node--active',
+        strongNode && 'rah-map-node--strong',
       ].filter(Boolean).join(' ')}
-      style={clusterColor ? { borderLeftColor: clusterColor, borderLeftWidth: 3 } : undefined}
+      style={{ transform: `scale(${sizeScale})` }}
     >
-      <Handle
-        type="target"
-        position={Position.Top}
-        className="rah-map-handle"
-      />
+      <Handle type="target" position={Position.Top} className="rah-map-handle rah-map-handle--hidden" isConnectable={false} />
       <div className="rah-map-node__title">
         <span className="rah-map-node__icon">
           {getNodeIcon(dbNode, 14)}
         </span>
         {label.length > 26 ? label.slice(0, 24) + '\u2026' : label}
       </div>
-      {(isTop || isExpanded) && clusterLabel && (
-        <div className="rah-map-node__dims">
-          {clusterLabel.length > 24 ? `${clusterLabel.slice(0, 23)}\u2026` : clusterLabel}
-        </div>
-      )}
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        className="rah-map-handle"
-      />
+      <Handle type="source" position={Position.Bottom} className="rah-map-handle rah-map-handle--hidden" isConnectable={false} />
     </div>
   );
 }
diff --git a/src/components/panes/map/map-styles.css b/src/components/panes/map/map-styles.css
index dbea17f..eb2f902 100644
--- a/src/components/panes/map/map-styles.css
+++ b/src/components/panes/map/map-styles.css
@@ -14,22 +14,15 @@
 
 /* Edges */
 .rah-map-wrapper .react-flow__edge-path {
-  stroke: var(--rah-border-strong);
+  stroke: rgba(148, 163, 184, 0.38);
   stroke-width: 1.5;
 }
 
 .rah-map-wrapper .react-flow__edge.selected .react-flow__edge-path {
-  stroke: #22c55e;
+  stroke: var(--rah-accent-green);
   stroke-width: 2;
 }
 
-/* Connection line while dragging */
-.rah-map-wrapper .react-flow__connection-path {
-  stroke: #22c55e;
-  stroke-width: 2;
-  stroke-dasharray: 5 3;
-}
-
 /* Attribution */
 .rah-map-wrapper .react-flow__attribution {
   display: none;
@@ -42,49 +35,62 @@
 
 /* Selection box */
 .rah-map-wrapper .react-flow__selection {
-  border: 1px solid rgba(34, 197, 94, 0.4);
-  background: rgba(34, 197, 94, 0.05);
+  border: 1px solid var(--rah-accent-green-soft-strong);
+  background: var(--rah-accent-green-soft);
 }
 
 /* Custom node styles */
 .rah-map-node {
-  background: var(--rah-bg-surface);
+  background: var(--rah-bg-modal);
   border: 1px solid var(--rah-border-strong);
-  border-radius: 8px;
-  padding: 8px 12px;
+  border-radius: 10px;
+  padding: 6px 8px;
   color: var(--rah-text-base);
-  font-size: 12px;
-  min-width: 60px;
-  max-width: 180px;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  font-size: 11px;
+  min-width: 56px;
+  max-width: 168px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
   cursor: pointer;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
 }
 
 .rah-map-node:hover {
   border-color: var(--rah-border-stronger);
+  background: var(--rah-bg-hover);
 }
 
-.rah-map-node--selected {
-  border-color: #22c55e !important;
+.rah-map-node--active {
+  border-color: var(--rah-accent-green) !important;
   box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
 }
 
-.rah-map-node--top {
-  border-color: #166534;
-  background: var(--rah-bg-panel);
+.rah-map-node--selected {
+  border-color: color-mix(in srgb, var(--rah-accent-green) 80%, white) !important;
+  background: color-mix(in srgb, var(--rah-accent-green-soft) 70%, var(--rah-bg-modal));
 }
 
-.rah-map-node--expanded {
-  border-color: #b45309;
-  background: var(--rah-bg-panel);
+.rah-map-node--first-hop {
+  border-color: color-mix(in srgb, var(--rah-accent-green) 45%, var(--rah-border-strong));
+  background: color-mix(in srgb, var(--rah-accent-green-soft) 42%, var(--rah-bg-modal));
 }
 
-.rah-map-node--expanded .rah-map-node__title {
-  color: #fbbf24;
+.rah-map-node--second-hop {
+  border-color: color-mix(in srgb, #94a3b8 55%, var(--rah-border-strong));
+  background: color-mix(in srgb, #94a3b8 12%, var(--rah-bg-modal));
+  opacity: 0.88;
+}
+
+.rah-map-node--overview {
+  background: color-mix(in srgb, var(--rah-bg-panel) 60%, var(--rah-bg-modal));
+}
+
+.rah-map-node--strong {
+  border-color: color-mix(in srgb, var(--rah-accent-green) 28%, var(--rah-border-strong));
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
 }
 
 .rah-map-node__title {
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
@@ -100,49 +106,19 @@
   align-items: center;
 }
 
-.rah-map-node__dims {
-  margin-top: 4px;
-  font-size: 10px;
-  color: var(--rah-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.rah-map-handle--hidden {
+  opacity: 0 !important;
+  pointer-events: none !important;
+  width: 2px !important;
+  height: 2px !important;
+  min-width: 2px !important;
+  min-height: 2px !important;
+  border: none !important;
 }
 
-/* Handles */
-.rah-map-handle {
-  width: 8px !important;
-  height: 8px !important;
-  background: #22c55e !important;
-  border: 2px solid var(--rah-bg-surface) !important;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.rah-map-node:hover .rah-map-handle,
-.react-flow__node.selected .rah-map-handle {
-  opacity: 1;
-}
-
-/* Connecting state: show all handles */
-.rah-map-wrapper .react-flow__node.connecting .rah-map-handle,
-.rah-map-wrapper.connecting .rah-map-handle {
-  opacity: 1;
-}
-
-/* Dimmed nodes (not selected or connected to selection) */
-.rah-map-wrapper .react-flow__node.dimmed {
-  opacity: 0.2;
-  transition: opacity 0.2s ease;
-}
-
-.rah-map-wrapper .react-flow__node.dimmed:hover {
-  opacity: 0.6;
-}
-
-/* MiniMap */
+/* MiniMap dark theme */
 .rah-map-wrapper .react-flow__minimap {
-  background: var(--rah-bg-base);
+  background: var(--rah-bg-panel);
   border: 1px solid var(--rah-border);
   border-radius: 6px;
 }
diff --git a/src/components/panes/map/utils.ts b/src/components/panes/map/utils.ts
index 2a5a768..a5f8519 100644
--- a/src/components/panes/map/utils.ts
+++ b/src/components/panes/map/utils.ts
@@ -1,285 +1,367 @@
 import type { Node as DbNode, Edge as DbEdge } from '@/types/database';
 import type { Node as RFNode, Edge as RFEdge } from '@xyflow/react';
 
-const CLUSTER_COLORS = [
-  '#22c55e',
-  '#3b82f6',
-  '#f59e0b',
-  '#ef4444',
-  '#8b5cf6',
-  '#ec4899',
-  '#06b6d4',
-  '#f97316',
-  '#14b8a6',
-  '#a855f7',
-];
+export type MapViewMode = 'overview' | 'focused';
+export type MapNodeRole = 'overview' | 'selected' | 'first-hop' | 'second-hop';
 
-export type MapViewMode = 'context' | 'hub';
-
-function hashClusterColor(label: string): string {
-  let hash = 0;
-  for (let i = 0; i < label.length; i++) {
-    hash = ((hash << 5) - hash + label.charCodeAt(i)) | 0;
-  }
-  return CLUSTER_COLORS[Math.abs(hash) % CLUSTER_COLORS.length];
-}
-
-export function getNodeClusterLabel(node: DbNode): string {
-  return node.context?.name?.trim() || 'Unscoped';
-}
-
-export function getClusterColor(label: string): string {
-  return label === 'Unscoped' ? '#4b5563' : hashClusterColor(label);
+export interface FocusedGraph {
+  selectedNodeId: number;
+  firstHopIds: number[];
+  secondHopIds: number[];
+  nodeIds: Set<number>;
 }
 
 export interface RahNodeData {
   label: string;
-  clusterLabel: string;
   edgeCount: number;
-  isExpanded: boolean;
   dbNode: DbNode;
-  clusterColor?: string;
-  clusterKey?: string;
+  role: MapNodeRole;
+  connectionCount: number;
+  prominence: number;
   [key: string]: unknown;
 }
 
 export const NODE_LIMIT = 200;
-export const LABEL_THRESHOLD = 15;
+export const FIRST_HOP_LIMIT = 10;
+export const SECOND_HOP_LIMIT = 18;
 
-export function getSavedMapPosition(
-  node: DbNode,
-  viewMode: MapViewMode,
-): { x: number; y: number } | null {
-  const metadata = typeof node.metadata === 'string'
-    ? safeParseJSON(node.metadata)
-    : node.metadata;
+type Point = { x: number; y: number };
 
-  const nested = metadata?.map_positions as Record<string, { x?: number; y?: number }> | undefined;
-  const scoped = metadata?.[`map_position_${viewMode}`] as { x?: number; y?: number } | undefined;
-  const saved = nested?.[viewMode] || scoped;
+export function buildAdjacency(dbEdges: DbEdge[]): Map<number, Set<number>> {
+  const adjacency = new Map<number, Set<number>>();
 
-  if (saved?.x !== undefined && saved?.y !== undefined) {
-    return { x: saved.x, y: saved.y };
+  for (const edge of dbEdges) {
+    if (!adjacency.has(edge.from_node_id)) adjacency.set(edge.from_node_id, new Set());
+    if (!adjacency.has(edge.to_node_id)) adjacency.set(edge.to_node_id, new Set());
+    adjacency.get(edge.from_node_id)?.add(edge.to_node_id);
+    adjacency.get(edge.to_node_id)?.add(edge.from_node_id);
   }
 
-  return null;
+  return adjacency;
 }
 
-function getAllNodes(baseNodes: DbNode[], expandedNodes: DbNode[]): DbNode[] {
-  const baseIds = new Set(baseNodes.map((node) => node.id));
-  return [...baseNodes, ...expandedNodes.filter((node) => !baseIds.has(node.id))];
+export function buildDegreeMap(dbEdges: DbEdge[]): Map<number, number> {
+  const adjacency = buildAdjacency(dbEdges);
+  const degreeMap = new Map<number, number>();
+
+  adjacency.forEach((neighbours, nodeId) => {
+    degreeMap.set(nodeId, neighbours.size);
+  });
+
+  return degreeMap;
 }
 
-function buildContextLayout(nodes: DbNode[], centerX: number, centerY: number): Map<string, { x: number; y: number }> {
-  const positions = new Map<string, { x: number; y: number }>();
-  const groups = new Map<string, DbNode[]>();
+export function buildFocusedGraph(
+  selectedNodeId: number,
+  adjacency: Map<number, Set<number>>,
+  degreeMap: Map<number, number>,
+): FocusedGraph {
+  const directNeighbours = [...(adjacency.get(selectedNodeId) ?? [])]
+    .sort((a, b) => {
+      const degreeDiff = (degreeMap.get(b) ?? 0) - (degreeMap.get(a) ?? 0);
+      return degreeDiff !== 0 ? degreeDiff : a - b;
+    })
+    .slice(0, FIRST_HOP_LIMIT);
 
-  for (const node of nodes) {
-    const key = getNodeClusterLabel(node);
-    const existing = groups.get(key) || [];
-    existing.push(node);
-    groups.set(key, existing);
+  const firstHopSet = new Set(directNeighbours);
+  const secondHopScores = new Map<number, { sharedCount: number; degree: number }>();
+
+  for (const firstHopId of directNeighbours) {
+    for (const candidateId of adjacency.get(firstHopId) ?? []) {
+      if (candidateId === selectedNodeId || firstHopSet.has(candidateId)) continue;
+
+      const existing = secondHopScores.get(candidateId) ?? {
+        sharedCount: 0,
+        degree: degreeMap.get(candidateId) ?? 0,
+      };
+
+      existing.sharedCount += 1;
+      secondHopScores.set(candidateId, existing);
+    }
   }
 
-  const clusterKeys = [...groups.keys()].sort((a, b) => a.localeCompare(b));
-  const columns = Math.max(1, Math.ceil(Math.sqrt(clusterKeys.length || 1)));
-  const clusterGapX = 360;
-  const clusterGapY = 280;
-  const originX = centerX - ((columns - 1) * clusterGapX) / 2;
-  const rows = Math.max(1, Math.ceil(clusterKeys.length / columns));
-  const originY = centerY - ((rows - 1) * clusterGapY) / 2;
+  const secondHopIds = [...secondHopScores.entries()]
+    .sort((a, b) => {
+      const sharedDiff = b[1].sharedCount - a[1].sharedCount;
+      if (sharedDiff !== 0) return sharedDiff;
 
-  clusterKeys.forEach((clusterKey, clusterIndex) => {
-    const clusterNodes = (groups.get(clusterKey) || []).sort((a, b) => {
-      return (b.edge_count ?? 0) - (a.edge_count ?? 0);
+      const degreeDiff = b[1].degree - a[1].degree;
+      return degreeDiff !== 0 ? degreeDiff : a[0] - b[0];
+    })
+    .slice(0, SECOND_HOP_LIMIT)
+    .map(([nodeId]) => nodeId);
+
+  return {
+    selectedNodeId,
+    firstHopIds: directNeighbours,
+    secondHopIds,
+    nodeIds: new Set([selectedNodeId, ...directNeighbours, ...secondHopIds]),
+  };
+}
+
+function buildOverviewLayout(
+  nodes: DbNode[],
+  adjacency: Map<number, Set<number>>,
+  degreeMap: Map<number, number>,
+  centerX: number,
+  centerY: number,
+): Map<string, Point> {
+  const positions = new Map<string, Point>();
+  const sortNodesByWeight = (left: DbNode, right: DbNode) => {
+    const degreeDiff = (degreeMap.get(right.id) ?? right.edge_count ?? 0) - (degreeMap.get(left.id) ?? left.edge_count ?? 0);
+    return degreeDiff !== 0 ? degreeDiff : left.id - right.id;
+  };
+
+  const sortedNodes = [...nodes].sort(sortNodesByWeight);
+  if (sortedNodes.length === 0) {
+    return positions;
+  }
+
+  const maxDegree = Math.max(...sortedNodes.map((node) => degreeMap.get(node.id) ?? node.edge_count ?? 0), 1);
+  const minRadius = 24;
+  const maxRadius = Math.max(280, Math.min(520, 140 + sortedNodes.length * 2.2));
+  const nodeIds = sortedNodes.map((node) => node.id);
+  const state = new Map<number, { x: number; y: number; vx: number; vy: number; targetRadius: number; mass: number }>();
+
+  sortedNodes.forEach((node, index) => {
+    const degree = degreeMap.get(node.id) ?? node.edge_count ?? 0;
+    const centrality = degree / maxDegree;
+    const targetRadius = minRadius + (1 - centrality) * (maxRadius - minRadius);
+    const angle = (index / Math.max(sortedNodes.length, 1)) * Math.PI * 2 - Math.PI / 2;
+
+    state.set(node.id, {
+      x: centerX + Math.cos(angle) * targetRadius,
+      y: centerY + Math.sin(angle) * targetRadius,
+      vx: 0,
+      vy: 0,
+      targetRadius,
+      mass: 1 + centrality * 1.8,
+    });
+  });
+
+  const iterations = 140;
+  for (let step = 0; step < iterations; step += 1) {
+    const alpha = 1 - step / iterations;
+
+    for (let i = 0; i < nodeIds.length; i += 1) {
+      const leftId = nodeIds[i];
+      const left = state.get(leftId);
+      if (!left) continue;
+
+      for (let j = i + 1; j < nodeIds.length; j += 1) {
+        const rightId = nodeIds[j];
+        const right = state.get(rightId);
+        if (!right) continue;
+
+        const dx = right.x - left.x;
+        const dy = right.y - left.y;
+        const distanceSquared = dx * dx + dy * dy + 0.01;
+        const distance = Math.sqrt(distanceSquared);
+        const repulsion = (2200 * alpha) / distanceSquared;
+        const fx = (dx / distance) * repulsion;
+        const fy = (dy / distance) * repulsion;
+
+        left.vx -= fx / left.mass;
+        left.vy -= fy / left.mass;
+        right.vx += fx / right.mass;
+        right.vy += fy / right.mass;
+      }
+    }
+
+    sortedNodes.forEach((node) => {
+      const current = state.get(node.id);
+      if (!current) return;
+
+      for (const neighbourId of adjacency.get(node.id) ?? []) {
+        if (!state.has(neighbourId) || neighbourId <= node.id) continue;
+
+        const neighbour = state.get(neighbourId);
+        if (!neighbour) continue;
+
+        const dx = neighbour.x - current.x;
+        const dy = neighbour.y - current.y;
+        const distance = Math.sqrt(dx * dx + dy * dy) || 1;
+        const desired = 70 + Math.min(
+          Math.abs(current.targetRadius - neighbour.targetRadius) * 0.35 + 24,
+          150,
+        );
+        const pull = (distance - desired) * 0.0048 * alpha;
+        const fx = (dx / distance) * pull;
+        const fy = (dy / distance) * pull;
+
+        current.vx += fx;
+        current.vy += fy;
+        neighbour.vx -= fx;
+        neighbour.vy -= fy;
+      }
     });
 
-    const clusterColumn = clusterIndex % columns;
-    const clusterRow = Math.floor(clusterIndex / columns);
-    const clusterCenterX = originX + clusterColumn * clusterGapX;
-    const clusterCenterY = originY + clusterRow * clusterGapY;
-    const clusterCols = Math.max(1, Math.ceil(Math.sqrt(clusterNodes.length)));
+    sortedNodes.forEach((node) => {
+      const current = state.get(node.id);
+      if (!current) return;
 
-    clusterNodes.forEach((node, index) => {
-      const col = index % clusterCols;
-      const row = Math.floor(index / clusterCols);
-      const x = clusterCenterX + (col - (clusterCols - 1) / 2) * 120 + (row % 2 === 0 ? 0 : 18);
-      const y = clusterCenterY + row * 96;
-      positions.set(String(node.id), { x, y });
+      const dx = current.x - centerX;
+      const dy = current.y - centerY;
+      const distance = Math.sqrt(dx * dx + dy * dy) || 1;
+      const radialError = distance - current.targetRadius;
+      const radialPull = radialError * 0.0075;
+
+      current.vx -= (dx / distance) * radialPull;
+      current.vy -= (dy / distance) * radialPull;
+
+      if (current.targetRadius <= minRadius + 8) {
+        current.vx += (centerX - current.x) * 0.0035;
+        current.vy += (centerY - current.y) * 0.0035;
+      }
+
+      current.vx *= 0.86;
+      current.vy *= 0.86;
+      current.x += current.vx;
+      current.y += current.vy;
     });
+  }
+
+  sortedNodes.forEach((node) => {
+    const current = state.get(node.id);
+    if (!current) return;
+    positions.set(String(node.id), { x: current.x, y: current.y });
   });
 
   return positions;
 }
 
-function buildHubLayout(
+function buildFocusedLayout(
   nodes: DbNode[],
-  dbEdges: DbEdge[],
+  focusedGraph: FocusedGraph,
+  adjacency: Map<number, Set<number>>,
   centerX: number,
   centerY: number,
-): Map<string, { x: number; y: number }> {
-  const positions = new Map<string, { x: number; y: number }>();
-  const sortedNodes = [...nodes].sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0));
-  const hubCount = Math.max(1, Math.min(10, Math.ceil(Math.sqrt(sortedNodes.length || 1))));
-  const hubs = sortedNodes.slice(0, hubCount);
-  const hubIds = new Set(hubs.map((node) => node.id));
+): Map<string, Point> {
+  const positions = new Map<string, Point>();
+  const firstHopCount = Math.max(1, focusedGraph.firstHopIds.length);
+  const firstHopRadius = Math.max(220, Math.min(320, 180 + firstHopCount * 12));
 
-  const adjacency = new Map<number, number[]>();
-  for (const edge of dbEdges) {
-    const from = adjacency.get(edge.from_node_id) || [];
-    from.push(edge.to_node_id);
-    adjacency.set(edge.from_node_id, from);
+  positions.set(String(focusedGraph.selectedNodeId), { x: centerX, y: centerY });
 
-    const to = adjacency.get(edge.to_node_id) || [];
-    to.push(edge.from_node_id);
-    adjacency.set(edge.to_node_id, to);
-  }
+  const firstHopAngles = new Map<number, number>();
+  focusedGraph.firstHopIds.forEach((nodeId, index) => {
+    const angle = (index / firstHopCount) * Math.PI * 2 - Math.PI / 2;
+    firstHopAngles.set(nodeId, angle);
+    positions.set(String(nodeId), {
+      x: centerX + Math.cos(angle) * firstHopRadius,
+      y: centerY + Math.sin(angle) * firstHopRadius,
+    });
+  });
 
-  const clusterMembers = new Map<number, DbNode[]>();
-  for (const hub of hubs) {
-    clusterMembers.set(hub.id, [hub]);
-  }
+  const secondHopByParent = new Map<number, number[]>();
+  focusedGraph.firstHopIds.forEach((nodeId) => secondHopByParent.set(nodeId, []));
 
-  const orphanNodes: DbNode[] = [];
-  for (const node of sortedNodes) {
-    if (hubIds.has(node.id)) continue;
+  focusedGraph.secondHopIds.forEach((nodeId) => {
+    const parentId = focusedGraph.firstHopIds
+      .filter((firstHopId) => adjacency.get(nodeId)?.has(firstHopId))
+      .sort((a, b) => (adjacency.get(b)?.size ?? 0) - (adjacency.get(a)?.size ?? 0))[0];
 
-    const neighbours = adjacency.get(node.id) || [];
-    const connectedHub = hubs
-      .filter((hub) => neighbours.includes(hub.id))
-      .sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0))[0];
+    const targetParent = parentId ?? focusedGraph.firstHopIds[0];
+    const group = secondHopByParent.get(targetParent) ?? [];
+    group.push(nodeId);
+    secondHopByParent.set(targetParent, group);
+  });
 
-    if (connectedHub) {
-      const members = clusterMembers.get(connectedHub.id) || [connectedHub];
-      members.push(node);
-      clusterMembers.set(connectedHub.id, members);
-    } else {
-      orphanNodes.push(node);
-    }
-  }
-
-  const hubRadius = Math.max(160, hubCount * 42);
-  hubs.forEach((hub, index) => {
-    const angle = (index / hubCount) * Math.PI * 2 - Math.PI / 2;
-    const hubX = centerX + Math.cos(angle) * hubRadius;
-    const hubY = centerY + Math.sin(angle) * hubRadius;
-    positions.set(String(hub.id), { x: hubX, y: hubY });
-
-    const members = (clusterMembers.get(hub.id) || []).filter((member) => member.id !== hub.id);
-    members.forEach((member, memberIndex) => {
-      const memberAngle = (memberIndex / Math.max(members.length, 1)) * Math.PI * 2;
-      const ringRadius = 115 + Math.floor(memberIndex / 10) * 46;
-      positions.set(String(member.id), {
-        x: hubX + Math.cos(memberAngle) * ringRadius,
-        y: hubY + Math.sin(memberAngle) * ringRadius,
+  secondHopByParent.forEach((group, parentId) => {
+    const parentAngle = firstHopAngles.get(parentId) ?? -Math.PI / 2;
+    group.forEach((nodeId, index) => {
+      const localOffset = (index - (group.length - 1) / 2) * 0.24;
+      const angle = parentAngle + localOffset;
+      const radius = firstHopRadius + 150 + Math.floor(index / 4) * 30;
+      positions.set(String(nodeId), {
+        x: centerX + Math.cos(angle) * radius,
+        y: centerY + Math.sin(angle) * radius,
       });
     });
   });
 
-  orphanNodes.forEach((node, index) => {
-    const columns = Math.max(1, Math.ceil(Math.sqrt(orphanNodes.length)));
-    const col = index % columns;
-    const row = Math.floor(index / columns);
-    positions.set(String(node.id), {
-      x: centerX - 220 + col * 110,
-      y: centerY + hubRadius + 140 + row * 90,
-    });
+  nodes.forEach((node) => {
+    if (!positions.has(String(node.id))) {
+      positions.set(String(node.id), { x: centerX, y: centerY });
+    }
   });
 
   return positions;
 }
 
-export function getClusterKey(node: DbNode, viewMode: MapViewMode, dbEdges: DbEdge[]): string {
-  if (viewMode === 'context') {
-    return getNodeClusterLabel(node);
-  }
+export function toRFNodes(params: {
+  nodes: DbNode[];
+  viewMode: MapViewMode;
+  degreeMap: Map<number, number>;
+  adjacency: Map<number, Set<number>>;
+  focusedGraph: FocusedGraph | null;
+  centerX: number;
+  centerY: number;
+}): RFNode<RahNodeData>[] {
+  const { nodes, viewMode, degreeMap, adjacency, focusedGraph, centerX, centerY } = params;
 
-  return `hub:${node.id}`;
-}
+  const positions = viewMode === 'focused' && focusedGraph
+    ? buildFocusedLayout(nodes, focusedGraph, adjacency, centerX, centerY)
+    : buildOverviewLayout(nodes, adjacency, degreeMap, centerX, centerY);
 
-export function toRFNodes(
-  baseNodes: DbNode[],
-  expandedNodes: DbNode[],
-  centerX: number,
-  centerY: number,
-  selectedNodeId: number | null,
-  connectedNodeIds: Set<number>,
-  existingPositions: Map<string, { x: number; y: number }>,
-  viewMode: MapViewMode,
-  dbEdges: DbEdge[],
-): RFNode<RahNodeData>[] {
-  const allNodes = getAllNodes(baseNodes, expandedNodes);
-  const hasSelection = selectedNodeId !== null;
-  const clusterLayout = viewMode === 'context'
-    ? buildContextLayout(allNodes, centerX, centerY)
-    : buildHubLayout(allNodes, dbEdges, centerX, centerY);
-  const baseNodeIds = new Set(baseNodes.map((node) => node.id));
-
-  return allNodes.map((node) => {
-    const id = String(node.id);
-    const existingPos = existingPositions.get(id);
-    const savedPos = getSavedMapPosition(node, viewMode);
-    const fallbackPos = clusterLayout.get(id) || { x: centerX, y: centerY };
-    const pos = existingPos || savedPos || fallbackPos;
-    const isDimmed = hasSelection && node.id !== selectedNodeId && !connectedNodeIds.has(node.id);
-    const clusterLabel = getNodeClusterLabel(node);
+  return nodes.map((node) => {
+    const role: MapNodeRole = focusedGraph
+      ? node.id === focusedGraph.selectedNodeId
+        ? 'selected'
+        : focusedGraph.firstHopIds.includes(node.id)
+          ? 'first-hop'
+          : 'second-hop'
+      : 'overview';
 
     return {
-      id,
+      id: String(node.id),
       type: 'rahNode',
-      position: pos,
-      className: isDimmed ? 'dimmed' : undefined,
+      position: positions.get(String(node.id)) ?? { x: centerX, y: centerY },
       data: {
         label: node.title || 'Untitled',
-        clusterLabel,
-        edgeCount: node.edge_count ?? 0,
-        isExpanded: !baseNodeIds.has(node.id),
+        edgeCount: degreeMap.get(node.id) ?? node.edge_count ?? 0,
         dbNode: node,
-        clusterColor: getClusterColor(clusterLabel),
-        clusterKey: viewMode === 'context' ? clusterLabel : undefined,
+        role,
+        connectionCount: adjacency.get(node.id)?.size ?? 0,
+        prominence: Math.min(1, (degreeMap.get(node.id) ?? node.edge_count ?? 0) / Math.max(...nodes.map((n) => degreeMap.get(n.id) ?? n.edge_count ?? 0), 1)),
       },
     };
   });
 }
 
-export function toRFEdges(
-  dbEdges: DbEdge[],
-  nodeIds: Set<string>,
-  selectedNodeId: number | null,
-): RFEdge[] {
-  const hasSelection = selectedNodeId !== null;
+export function toRFEdges(params: {
+  dbEdges: DbEdge[];
+  nodeIds: Set<string>;
+  focusedGraph: FocusedGraph | null;
+}): RFEdge[] {
+  const { dbEdges, nodeIds, focusedGraph } = params;
 
   return dbEdges
     .filter((edge) => nodeIds.has(String(edge.from_node_id)) && nodeIds.has(String(edge.to_node_id)))
     .map((edge) => {
-      const isConnected = hasSelection && (
-        edge.from_node_id === selectedNodeId || edge.to_node_id === selectedNodeId
-      );
-      const isDimmed = hasSelection && !isConnected;
       const explanation = typeof edge.context?.explanation === 'string' ? edge.context.explanation : '';
+      const touchesSelected = focusedGraph
+        ? edge.from_node_id === focusedGraph.selectedNodeId || edge.to_node_id === focusedGraph.selectedNodeId
+        : false;
+      const touchesSecondHop = focusedGraph
+        ? focusedGraph.secondHopIds.includes(edge.from_node_id) || focusedGraph.secondHopIds.includes(edge.to_node_id)
+        : false;
 
       return {
         id: String(edge.id),
         source: String(edge.from_node_id),
         target: String(edge.to_node_id),
         type: 'rahEdge',
-        animated: isConnected,
+        animated: false,
         data: { explanation },
-        style: isConnected
-          ? { stroke: '#22c55e', strokeWidth: 2.5, opacity: 1 }
-          : isDimmed
-            ? { stroke: '#374151', strokeWidth: 1, opacity: 0.15 }
-            : undefined,
-        zIndex: isConnected ? 10 : 0,
+        style: focusedGraph
+          ? touchesSelected
+            ? { stroke: 'color-mix(in srgb, var(--rah-accent-green) 55%, #94a3b8)', strokeWidth: 1.9, opacity: 0.72 }
+            : touchesSecondHop
+              ? { stroke: '#64748b', strokeWidth: 1.15, opacity: 0.3 }
+              : { stroke: '#475569', strokeWidth: 1.05, opacity: 0.22 }
+          : { stroke: '#475569', strokeWidth: 1.05, opacity: 0.2 },
+        zIndex: touchesSelected ? 10 : 1,
       };
     });
 }
-
-function safeParseJSON(str: string | null | undefined): Record<string, any> | null {
-  if (!str || str === 'null') return null;
-  try {
-    return JSON.parse(str);
-  } catch {
-    return null;
-  }
-}
diff --git a/src/components/panes/types.ts b/src/components/panes/types.ts
index 6e22838..7904004 100644
--- a/src/components/panes/types.ts
+++ b/src/components/panes/types.ts
@@ -90,7 +90,8 @@ export interface ChatPanelProps {
 // MapPane specific props
 export interface MapPaneProps extends BasePaneProps {
   onNodeClick?: (nodeId: number) => void;
-  activeTabId?: number | null;
+  focusedNodeId?: number | null;
+  onClearFocus?: () => void;
 }
 
 // ViewsPane specific props