@andespindola/brainlink 0.1.0-beta.14 → 0.1.0-beta.140

package/dist/application/frontend/client-js.js

@@ -1,13 +1,64 @@
 export const createClientJs = () => `const canvas = document.getElementById('graph')
+const glCanvas = document.getElementById('graphGl')
 const ctx = canvas.getContext('2d')
 const largeGraphNodeThreshold = 4000
-const largeGraphEdgeRenderLimit = 16000
+const massiveGraphNodeThreshold = 20000
+const largeGraphEdgeRenderLimit = 120000
+const renderNodeBudget = 1000
+const zoomedMassiveRenderNodeBudget = 2200
+const massiveOverviewRenderNodeBudget = 1800
+const massiveOverviewScaleThreshold = 0.065
+const massiveSegmentedScaleThreshold = 0.45
+const massiveSegmentRepresentativeBudget = 760
+const massiveAutoFitMacroScale = 0.018
+const hierarchyExpansionStartScale = 0.18
+const hierarchyMicroEnterCoverage = 0.58
+const hierarchyMicroExitCoverage = 0.38
+const hierarchyMicroEnterScale = 0.18
+const hierarchyMicroExitScale = 0.12
+const hierarchyFocusAcquireCoverage = 0.52
+const hierarchyFocusAcquireScale = 0.16
+const hierarchyChildRevealStartProgress = 0.28
+const hierarchyChildRevealExponent = 1.8
+const hierarchyFocusedOnlyProgress = 0.86
+const hierarchyChildGraphFitMargin = 1.28
+const hierarchyChildRevealGrowthRatio = 0.3
+const hierarchyChildRevealGrowthFloor = 2
+const minNodePixelRadius = 2.3
+const viewportPaddingPx = 280
+const worldCoordinateLimit = 5_000_000
+const transformCoordinateLimit = 20_000_000
+const hoverHitTestIntervalMs = 64
+const zoomRecoveryGuardMs = 4200
+const hierarchyAbsoluteEdgeSafetyCap = 24_000
+const dragNeighborhoodMaxAffected = 180
+const dragSettleRounds = 3
+const wheelZoomExponent = 0.0009
+const wheelZoomExponentCap = 0.035
+const wheelZoomModifierBoost = 1.08
+const wheelZoomInputFloorCap = 0.976
+const wheelZoomInputCeilCap = 1.024
+const zoomAnimationSlowLerp = 0.18
+const zoomAnimationFastLerp = 0.36
+const zoomAnimationScaleSnap = 0.00008
+const zoomAnimationPositionSnap = 0.14
+const physicsDragFrameIntervalMs = 16
+const physicsIdleFrameIntervalMs = 78
+const physicsLargeGraphIdleFrameIntervalMs = 108
+const physicsStepDeltaCapMs = 96
 const state = {
   graph: { nodes: [], edges: [] },
   nodes: [],
+  groups: [],
+  groupById: new Map(),
+  leafGroups: [],
+  nodeLeafGroupById: new Map(),
+  nodeById: new Map(),
   edges: [],
   visibleNodes: [],
   visibleEdges: [],
+  renderNodes: [],
+  renderEdges: [],
   nodeDegrees: new Map(),
   selected: null,
   hovered: null,
@@ -18,9 +69,40 @@ const state = {
   nodeDetails: new Map(),
   transform: { x: 0, y: 0, scale: 1 },
   pointer: { x: 0, y: 0, down: false, dragNode: null, moved: false },
+  cursor: { x: 0, y: 0, inCanvas: false },
   graphSignature: '',
   graphStatus: '',
-  last: performance.now()
+  graphTotals: { nodes: 0, edges: 0 },
+  viewport: { width: 320, height: 320 },
+  last: performance.now(),
+  lastPhysicsAt: performance.now(),
+  physicsRestFrames: 0,
+  offscreenFrameCount: 0,
+  recoveringViewport: false,
+  renderVisibilityDirty: true,
+  lastViewportKey: '',
+  visibleNodeSpatial: { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() },
+  visibleEdgeByNode: new Map(),
+  primaryHub: null,
+  filterWorker: null,
+  filterReady: false,
+  lastHoverHitAt: 0,
+  lastManualZoomAt: 0,
+  lastZoomFocus: { x: 0, y: 0, at: 0 },
+  leafFocusRootNodeId: null,
+  hierarchyFocusGroupId: null,
+  hierarchyFocusStack: [],
+  hierarchyRevealFocusGroupId: null,
+  hierarchyRevealBudget: 1,
+  zoomTransition: {
+    active: false,
+    source: 'generic',
+    screenX: 0,
+    screenY: 0,
+    worldX: 0,
+    worldY: 0,
+    targetScale: 1
+  }
 }
 
 const byId = id => document.getElementById(id)
@@ -51,11 +133,54 @@ const elements = {
 }
 
 const zoomRange = {
-  min: 0.05,
+  min: 0.0002,
   max: 4.5
 }
 
-const agentQuery = () => state.agentId ? '?agent=' + encodeURIComponent(state.agentId) : ''
+const initialAgentFromUrl = (() => {
+  try {
+    const raw = new URL(window.location.href).searchParams.get('agent')
+    const value = raw?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
+})()
+
+const selectedAgentStorageKey = 'brainlink:selected-agent'
+
+const readStoredAgent = () => {
+  try {
+    const value = window.localStorage.getItem(selectedAgentStorageKey)?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
+}
+
+const writeStoredAgent = (agentId) => {
+  try {
+    if (!agentId) {
+      window.localStorage.removeItem(selectedAgentStorageKey)
+      return
+    }
+    window.localStorage.setItem(selectedAgentStorageKey, agentId)
+  } catch {}
+}
+
+const syncAgentInUrl = (agentId) => {
+  try {
+    const url = new URL(window.location.href)
+    if (agentId && agentId.trim().length > 0) {
+      url.searchParams.set('agent', agentId)
+    } else {
+      url.searchParams.delete('agent')
+    }
+    window.history.replaceState({}, '', url.toString())
+  } catch {}
+}
+
+const agentQuery = (separator = '?') => state.agentId ? separator + 'agent=' + encodeURIComponent(state.agentId) : ''
 
 const setGraphStatus = text => {
   state.graphStatus = text
@@ -78,6 +203,238 @@ const graphTheme = {
   label: '#edf2f7'
 }
 
+const parseRgb = color => {
+  const normalized = color.trim()
+  if (normalized.startsWith('#')) {
+    const value = normalized.slice(1)
+    const expanded = value.length === 3
+      ? value.split('').map(char => char + char).join('')
+      : value
+    const parsed = Number.parseInt(expanded, 16)
+    return [
+      ((parsed >> 16) & 255) / 255,
+      ((parsed >> 8) & 255) / 255,
+      (parsed & 255) / 255
+    ]
+  }
+
+  const match = normalized.match(/rgba?\\(([^)]+)\\)/)
+  if (!match) return [1, 1, 1]
+  const parts = match[1].split(',').map(part => Number.parseFloat(part.trim()))
+  return [
+    Math.max(0, Math.min(1, (parts[0] ?? 255) / 255)),
+    Math.max(0, Math.min(1, (parts[1] ?? 255) / 255)),
+    Math.max(0, Math.min(1, (parts[2] ?? 255) / 255))
+  ]
+}
+
+const rgba = (color, alpha = 1) => {
+  const [red, green, blue] = parseRgb(color)
+  return [red, green, blue, Math.max(0, Math.min(1, alpha))]
+}
+
+const createShader = (gl, type, source) => {
+  const shader = gl.createShader(type)
+  if (!shader) return null
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader)
+    return null
+  }
+  return shader
+}
+
+const createProgram = (gl, vertexSource, fragmentSource) => {
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource)
+  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)
+  if (!vertexShader || !fragmentShader) return null
+  const program = gl.createProgram()
+  if (!program) return null
+  gl.attachShader(program, vertexShader)
+  gl.attachShader(program, fragmentShader)
+  gl.linkProgram(program)
+  gl.deleteShader(vertexShader)
+  gl.deleteShader(fragmentShader)
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program)
+    return null
+  }
+  return program
+}
+
+const createWebGlRenderer = targetCanvas => {
+  if (!targetCanvas) return null
+
+  const gl = targetCanvas.getContext('webgl2', { alpha: true, antialias: true }) ||
+    targetCanvas.getContext('webgl', { alpha: true, antialias: true })
+  if (!gl) return null
+
+  const lineProgram = createProgram(
+    gl,
+    'attribute vec2 a_position; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); }',
+    'precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; }'
+  )
+  const pointProgram = createProgram(
+    gl,
+    'attribute vec2 a_position; attribute float a_size; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); gl_PointSize = a_size; }',
+    'precision mediump float; uniform vec4 u_color; void main() { vec2 center = gl_PointCoord - vec2(0.5); float distanceFromCenter = length(center); if (distanceFromCenter > 0.5) discard; float edge = smoothstep(0.5, 0.42, distanceFromCenter); gl_FragColor = vec4(u_color.rgb, u_color.a * edge); }'
+  )
+
+  if (!lineProgram || !pointProgram) return null
+
+  const lineBuffer = gl.createBuffer()
+  const pointPositionBuffer = gl.createBuffer()
+  const pointSizeBuffer = gl.createBuffer()
+  if (!lineBuffer || !pointPositionBuffer || !pointSizeBuffer) return null
+
+  const linePositionLocation = gl.getAttribLocation(lineProgram, 'a_position')
+  const lineResolutionLocation = gl.getUniformLocation(lineProgram, 'u_resolution')
+  const lineColorLocation = gl.getUniformLocation(lineProgram, 'u_color')
+  const pointPositionLocation = gl.getAttribLocation(pointProgram, 'a_position')
+  const pointSizeLocation = gl.getAttribLocation(pointProgram, 'a_size')
+  const pointResolutionLocation = gl.getUniformLocation(pointProgram, 'u_resolution')
+  const pointColorLocation = gl.getUniformLocation(pointProgram, 'u_color')
+
+  gl.enable(gl.BLEND)
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+
+  const setViewport = (width, height) => {
+    gl.viewport(0, 0, targetCanvas.width, targetCanvas.height)
+    return [targetCanvas.width / Math.max(width, 1), targetCanvas.height / Math.max(height, 1)]
+  }
+
+  const screenPoint = (node, ratioX, ratioY) => [
+    (node.x * state.transform.scale + state.transform.x) * ratioX,
+    (node.y * state.transform.scale + state.transform.y) * ratioY
+  ]
+
+  const clear = (width, height) => {
+    setViewport(width, height)
+    gl.clearColor(0, 0, 0, 0)
+    gl.clear(gl.COLOR_BUFFER_BIT)
+  }
+
+  const drawLines = (edges, color, width, height) => {
+    if (edges.length === 0) return
+    const [ratioX, ratioY] = setViewport(width, height)
+    const positions = new Float32Array(edges.length * 4)
+    for (let index = 0; index < edges.length; index += 1) {
+      const edge = edges[index]
+      const source = screenPoint(edge.sourceNode, ratioX, ratioY)
+      const target = screenPoint(edge.targetNode, ratioX, ratioY)
+      const offset = index * 4
+      positions[offset] = source[0]
+      positions[offset + 1] = source[1]
+      positions[offset + 2] = target[0]
+      positions[offset + 3] = target[1]
+    }
+
+    gl.useProgram(lineProgram)
+    gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STREAM_DRAW)
+    gl.enableVertexAttribArray(linePositionLocation)
+    gl.vertexAttribPointer(linePositionLocation, 2, gl.FLOAT, false, 0, 0)
+    gl.uniform2f(lineResolutionLocation, targetCanvas.width, targetCanvas.height)
+    gl.uniform4fv(lineColorLocation, color)
+    gl.lineWidth(1)
+    gl.drawArrays(gl.LINES, 0, edges.length * 2)
+  }
+
+  const drawPoints = (nodes, color, sizeForNode, width, height) => {
+    if (nodes.length === 0) return
+    const [ratioX, ratioY] = setViewport(width, height)
+    const positions = new Float32Array(nodes.length * 2)
+    const sizes = new Float32Array(nodes.length)
+    for (let index = 0; index < nodes.length; index += 1) {
+      const node = nodes[index]
+      const point = screenPoint(node, ratioX, ratioY)
+      const offset = index * 2
+      positions[offset] = point[0]
+      positions[offset + 1] = point[1]
+      sizes[index] = sizeForNode(node) * ((ratioX + ratioY) / 2)
+    }
+
+    gl.useProgram(pointProgram)
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointPositionBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STREAM_DRAW)
+    gl.enableVertexAttribArray(pointPositionLocation)
+    gl.vertexAttribPointer(pointPositionLocation, 2, gl.FLOAT, false, 0, 0)
+    gl.bindBuffer(gl.ARRAY_BUFFER, pointSizeBuffer)
+    gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STREAM_DRAW)
+    gl.enableVertexAttribArray(pointSizeLocation)
+    gl.vertexAttribPointer(pointSizeLocation, 1, gl.FLOAT, false, 0, 0)
+    gl.uniform2f(pointResolutionLocation, targetCanvas.width, targetCanvas.height)
+    gl.uniform4fv(pointColorLocation, color)
+    gl.drawArrays(gl.POINTS, 0, nodes.length)
+  }
+
+  return { clear, drawLines, drawPoints }
+}
+
+const webGlRenderer = createWebGlRenderer(glCanvas)
+
+const initFilterWorker = () => {
+  if (typeof Worker === 'undefined') {
+    return
+  }
+  try {
+    const worker = new Worker('/app-worker.js')
+    worker.onmessage = event => {
+      const payload = event.data
+      if (!payload || typeof payload !== 'object') return
+
+      if (payload.type === 'ready') {
+        state.filterReady = true
+        if (state.nodes.length > 0) {
+          worker.postMessage({
+            type: 'load-nodes',
+            nodes: state.nodes.map(node => ({
+              id: node.id,
+              title: node.title,
+              path: node.path || '',
+              tags: Array.isArray(node.tags) ? node.tags : []
+            }))
+          })
+        }
+        return
+      }
+
+      if (payload.type === 'filter-result') {
+        const token = payload.token
+        if (token !== state.contentFilter.token) {
+          return
+        }
+
+        const ids = Array.isArray(payload.ids) ? payload.ids.filter(id => typeof id === 'string') : []
+        state.contentFilter.query = normalizeQuery(state.query)
+        state.contentFilter.ids = new Set(ids)
+        recomputeVisibility()
+      }
+    }
+    state.filterWorker = worker
+  } catch {
+    state.filterWorker = null
+    state.filterReady = false
+  }
+}
+
+const pushNodesToFilterWorker = () => {
+  if (!state.filterWorker || !state.filterReady) {
+    return
+  }
+
+  state.filterWorker.postMessage({
+    type: 'load-nodes',
+    nodes: state.nodes.map(node => ({
+      id: node.id,
+      title: node.title,
+      path: node.path || '',
+      tags: Array.isArray(node.tags) ? node.tags : []
+    }))
+  })
+}
+
 const resize = () => {
   const rect = canvas.getBoundingClientRect()
   const width = Math.max(rect.width, 320)
@@ -85,45 +442,1691 @@ const resize = () => {
   const ratio = window.devicePixelRatio || 1
   canvas.width = Math.floor(width * ratio)
   canvas.height = Math.floor(height * ratio)
+  if (glCanvas) {
+    glCanvas.width = Math.floor(width * ratio)
+    glCanvas.height = Math.floor(height * ratio)
+  }
+  state.viewport = { width, height }
   ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+  markRenderDirty()
+}
+
+const normalizeQuery = value => value.trim().toLowerCase()
+const hubNodeRetentionLimit = 2
+const hubNodePattern = /\b(memory\s*hub|knowledge\s*hub|hub|moc|map|memory\s*map|mapa)\b/i
+const memoryHubPathPattern = /\bmemory[-_\s]*hub\b/i
+
+const hubNodeScore = node => {
+  const title = node.title.trim().toLowerCase()
+  if (title === 'memory hub') return 6
+  if (title === 'knowledge hub') return 5
+  if (memoryHubPathPattern.test(node.path || '')) return 4
+  if (node.tags.some(tag => tag.trim().toLowerCase() === 'memory-hub')) return 3
+  if (/\bmoc\b/i.test(node.title)) return 2
+  return hubNodePattern.test(node.title) || hubNodePattern.test(node.path || '') || node.tags.some(tag => hubNodePattern.test(tag))
+    ? 1
+    : 0
+}
+
+const localFilteredNodes = query =>
+  state.nodes.filter(node =>
+    node.title.toLowerCase().includes(query) ||
+    (node.path || '').toLowerCase().includes(query) ||
+    node.tags.some(tag => tag.toLowerCase().includes(query))
+  )
+
+const rankedHubNodes = () => {
+  if (state.nodes.length === 0) {
+    return []
+  }
+
+  const byTitleAndDegree = [...state.nodes]
+    .filter(node => hubNodeScore(node) > 0)
+    .sort((left, right) => {
+      const byHubScore = hubNodeScore(right) - hubNodeScore(left)
+      if (byHubScore !== 0) return byHubScore
+      const byDegree = (state.nodeDegrees.get(right.id) ?? 0) - (state.nodeDegrees.get(left.id) ?? 0)
+      if (byDegree !== 0) return byDegree
+      return left.title.localeCompare(right.title)
+    })
+
+  if (byTitleAndDegree.length > 0) {
+    return byTitleAndDegree.slice(0, hubNodeRetentionLimit)
+  }
+
+  return [...state.nodes]
+    .sort((left, right) => {
+      const byDegree = (state.nodeDegrees.get(right.id) ?? 0) - (state.nodeDegrees.get(left.id) ?? 0)
+      if (byDegree !== 0) return byDegree
+      return left.title.localeCompare(right.title)
+    })
+    .slice(0, 1)
+}
+
+const withPersistentHubNodes = nodes => {
+  if (nodes.length === 0) {
+    return rankedHubNodes()
+  }
+
+  const ids = new Set(nodes.map(node => node.id))
+  const hubsToKeep = rankedHubNodes().filter(node => !ids.has(node.id))
+  return nodes.concat(hubsToKeep)
+}
+
+const filteredNodes = () => {
+  const query = normalizeQuery(state.query)
+  if (!query) return state.nodes
+  if (state.contentFilter.query === query && state.contentFilter.ids instanceof Set) {
+    const matched = state.nodes.filter(node => state.contentFilter.ids.has(node.id))
+    return withPersistentHubNodes(matched)
+  }
+
+  return withPersistentHubNodes(localFilteredNodes(query))
+}
+
+const isDominantHub = (hub, nodeCount = state.visibleNodes.length) => {
+  if (!hub || nodeCount <= 0) {
+    return false
+  }
+
+  const degree = state.nodeDegrees.get(hub.id) ?? 0
+  const minimumDegree = Math.max(18, Math.sqrt(nodeCount) * 1.8)
+  const degreeRatio = degree / Math.max(nodeCount, 1)
+  return degree >= minimumDegree || degreeRatio >= 0.035
+}
+
+const recomputeVisibility = () => {
+  const nodes = filteredNodes()
+  const ids = new Set(nodes.map(node => node.id))
+  const edges = state.edges.filter(edge => ids.has(edge.source) && edge.target && ids.has(edge.target))
+  const limitedEdges = state.nodes.length > largeGraphNodeThreshold
+    ? [...edges]
+      .sort((left, right) => edgeWeight(right) - edgeWeight(left))
+      .slice(0, largeGraphEdgeRenderLimit)
+    : edges
+
+  state.visibleNodes = nodes
+  state.visibleEdges = limitedEdges
+  state.visibleNodeSpatial = createSpatialIndex(nodes)
+  state.visibleEdgeByNode = createVisibleEdgeLookup(limitedEdges)
+  const primaryHub = rankedHubNodes()[0] ?? null
+  state.primaryHub = primaryHub
+  markRenderDirty()
+}
+
+const edgeWeight = edge => Number.isFinite(edge.weight) ? Math.max(1, edge.weight) : 1
+const markRenderDirty = () => {
+  state.renderVisibilityDirty = true
+}
+
+const createSpatialIndex = nodes => {
+  if (nodes.length === 0) {
+    return { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() }
+  }
+
+  const bounds = graphBounds(nodes)
+  if (!bounds) {
+    return { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() }
+  }
+
+  const targetNodesPerCell = 18
+  const approximateCellArea = Math.max((bounds.width * bounds.height) / Math.max(nodes.length / targetNodesPerCell, 1), 1)
+  const cellSize = Math.max(90, Math.min(2200, Math.sqrt(approximateCellArea)))
+  const buckets = new Map()
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const cellX = Math.floor((node.x - bounds.minX) / cellSize)
+    const cellY = Math.floor((node.y - bounds.minY) / cellSize)
+    const key = cellX + ':' + cellY
+    const bucket = buckets.get(key)
+    if (bucket) {
+      bucket.push(node)
+      continue
+    }
+    buckets.set(key, [node])
+  }
+
+  return {
+    cellSize,
+    minX: bounds.minX,
+    minY: bounds.minY,
+    maxX: bounds.maxX,
+    maxY: bounds.maxY,
+    buckets
+  }
+}
+
+const viewportNodesFromSpatialIndex = viewport => {
+  if (state.visibleNodes.length <= 2500) {
+    return state.visibleNodes.filter(node => isNodeInViewport(node, viewport))
+  }
+
+  const spatial = state.visibleNodeSpatial
+  if (!spatial || spatial.buckets.size === 0) {
+    return state.visibleNodes.filter(node => isNodeInViewport(node, viewport))
+  }
+
+  const minCellX = Math.floor((viewport.minX - spatial.minX) / spatial.cellSize)
+  const maxCellX = Math.floor((viewport.maxX - spatial.minX) / spatial.cellSize)
+  const minCellY = Math.floor((viewport.minY - spatial.minY) / spatial.cellSize)
+  const maxCellY = Math.floor((viewport.maxY - spatial.minY) / spatial.cellSize)
+  const nodes = []
+
+  for (let cellX = minCellX; cellX <= maxCellX; cellX += 1) {
+    for (let cellY = minCellY; cellY <= maxCellY; cellY += 1) {
+      const bucket = spatial.buckets.get(cellX + ':' + cellY)
+      if (!bucket) continue
+
+      for (let index = 0; index < bucket.length; index += 1) {
+        const node = bucket[index]
+        if (isNodeInViewport(node, viewport)) {
+          nodes.push(node)
+        }
+      }
+    }
+  }
+
+  return nodes
+}
+
+const createVisibleEdgeLookup = edges => {
+  const lookup = new Map()
+
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    if (!edge.target) continue
+
+    const sourceList = lookup.get(edge.source)
+    if (sourceList) {
+      sourceList.push(edge)
+    } else {
+      lookup.set(edge.source, [edge])
+    }
+
+    const targetList = lookup.get(edge.target)
+    if (targetList) {
+      targetList.push(edge)
+    } else {
+      lookup.set(edge.target, [edge])
+    }
+  }
+
+  return lookup
+}
+
+const edgeBudgetForCurrentFrame = () => {
+  const zoom = state.transform.scale
+  if (zoom < 0.12) return state.groups.length > 0 ? 1200 : 380
+  if (zoom < 0.18) return 900
+  if (zoom < 0.28) return 1700
+  if (zoom < 0.45) return 2800
+  if (zoom < 0.7) return 4200
+  if (zoom < 1.05) return 5600
+  return 7600
+}
+
+const nodeBudgetForScale = (scale) => {
+  if (state.visibleNodes.length > massiveGraphNodeThreshold) {
+    if (scale < massiveOverviewScaleThreshold) return massiveOverviewRenderNodeBudget
+    if (scale < 0.09) return 1600
+    if (scale < 0.14) return 1800
+    if (scale < 0.28) return renderNodeBudget
+    if (scale < 0.45) return 1100
+    if (scale < 0.7) return 1400
+    if (scale < 1.05) return 1800
+    return zoomedMassiveRenderNodeBudget
+  }
+  if (scale < 0.035) return 220
+  if (scale < 0.06) return 360
+  if (scale < 0.09) return 520
+  if (scale < 0.14) return 720
+  return renderNodeBudget
+}
+
+const viewportCenterWorldPoint = () => {
+  const viewport = worldViewportBounds()
+  return {
+    x: (viewport.minX + viewport.maxX) / 2,
+    y: (viewport.minY + viewport.maxY) / 2
+  }
+}
+
+const screenToWorldPoint = (screenX, screenY) => ({
+  x: (screenX - state.transform.x) / state.transform.scale,
+  y: (screenY - state.transform.y) / state.transform.scale
+})
+
+const cursorWorldPoint = () => {
+  if (!state.cursor.inCanvas) {
+    return null
+  }
+  const rect = canvas.getBoundingClientRect()
+  const screenX = state.cursor.x - rect.left
+  const screenY = state.cursor.y - rect.top
+  const width = Math.max(rect.width, 320)
+  const height = Math.max(rect.height, 320)
+  if (!Number.isFinite(screenX) || !Number.isFinite(screenY)) {
+    return null
+  }
+  if (screenX < 0 || screenX > width || screenY < 0 || screenY > height) {
+    return null
+  }
+  return screenToWorldPoint(screenX, screenY)
+}
+
+const resolveZoomAnchorWorldPoint = (screenX, screenY) => screenToWorldPoint(screenX, screenY)
+
+const visibilityScaleBucket = (scale) => {
+  const safeScale = Math.max(zoomRange.min, scale)
+  return Math.round(safeScale * 180_000)
+}
+
+const mergeUniqueNodes = (leftNodes, rightNodes, limit) => {
+  const merged = []
+  const ids = new Set()
+
+  const push = (node) => {
+    if (!node || ids.has(node.id) || merged.length >= limit) {
+      return
+    }
+    ids.add(node.id)
+    merged.push(node)
+  }
+
+  for (let index = 0; index < leftNodes.length && merged.length < limit; index += 1) {
+    push(leftNodes[index])
+  }
+  for (let index = 0; index < rightNodes.length && merged.length < limit; index += 1) {
+    push(rightNodes[index])
+  }
+
+  return merged
+}
+
+const selectStableSampleNodes = (sourceNodes, limit) => {
+  if (sourceNodes.length <= limit) {
+    return sourceNodes
+  }
+
+  const anchor = viewportCenterWorldPoint()
+  const previousIds = new Set(state.renderNodes.map((node) => node.id))
+  const preferAnchorDistance = state.visibleNodes.length > massiveGraphNodeThreshold && state.transform.scale >= 0.28
+
+  return [...sourceNodes]
+    .sort((left, right) => {
+      const leftWasVisible = previousIds.has(left.id) ? 1 : 0
+      const rightWasVisible = previousIds.has(right.id) ? 1 : 0
+      const leftDistance = Math.hypot(left.x - anchor.x, left.y - anchor.y)
+      const rightDistance = Math.hypot(right.x - anchor.x, right.y - anchor.y)
+
+      if (preferAnchorDistance) {
+        if (leftDistance !== rightDistance) return leftDistance - rightDistance
+        if (leftWasVisible !== rightWasVisible) return rightWasVisible - leftWasVisible
+      } else {
+        if (leftWasVisible !== rightWasVisible) return rightWasVisible - leftWasVisible
+        if (leftDistance !== rightDistance) return leftDistance - rightDistance
+      }
+
+      const leftDegree = state.nodeDegrees.get(left.id) ?? 0
+      const rightDegree = state.nodeDegrees.get(right.id) ?? 0
+      if (leftDegree !== rightDegree) return rightDegree - leftDegree
+
+      return left.id.localeCompare(right.id)
+    })
+    .slice(0, limit)
+}
+
+const edgeIdentityKey = edge => {
+  if (!edge.target) return ''
+  const pair = edge.source < edge.target
+    ? edge.source + '|' + edge.target
+    : edge.target + '|' + edge.source
+  return pair + '|' + (edge.inferred ? 'mesh' : 'real')
+}
+
+const edgeRelevanceScore = edge => {
+  let score = edgeWeight(edge) * 10
+  if (!edge.inferred) {
+    score += 8
+  }
+
+  const selectedId = state.selected?.id
+  if (selectedId && (edge.source === selectedId || edge.target === selectedId)) {
+    score += 120
+  }
+
+  const hoveredId = state.hovered?.id
+  if (hoveredId && (edge.source === hoveredId || edge.target === hoveredId)) {
+    score += 70
+  }
+
+  const hubId = state.primaryHub?.id
+  if (hubId && (edge.source === hubId || edge.target === hubId)) {
+    score += 42
+  }
+
+  return score
+}
+
+const collectVisibleEdgesForNodes = (nodeIds, options = { preferComplete: false }) => {
+  if (nodeIds.size === 0) {
+    return []
+  }
+
+  const seen = new Set()
+  const candidates = []
+  const bestEdgeByNode = new Map()
+  const limit = options.preferComplete
+    ? hierarchyAbsoluteEdgeSafetyCap
+    : edgeBudgetForCurrentFrame()
+
+  nodeIds.forEach(nodeId => {
+    const candidateEdges = state.visibleEdgeByNode.get(nodeId) ?? []
+    for (let index = 0; index < candidateEdges.length; index += 1) {
+      const edge = candidateEdges[index]
+      if (!edge.target || !nodeIds.has(edge.source) || !nodeIds.has(edge.target)) {
+        continue
+      }
+      const key = edgeIdentityKey(edge)
+      if (seen.has(key)) continue
+
+      seen.add(key)
+      candidates.push(edge)
+      const score = edgeRelevanceScore(edge)
+      const currentSource = bestEdgeByNode.get(edge.source)
+      if (!currentSource || score > currentSource.score) {
+        bestEdgeByNode.set(edge.source, { edge, score })
+      }
+      const currentTarget = bestEdgeByNode.get(edge.target)
+      if (!currentTarget || score > currentTarget.score) {
+        bestEdgeByNode.set(edge.target, { edge, score })
+      }
+    }
+  })
+
+  if (candidates.length <= limit) {
+    return candidates
+  }
+
+  const ranked = candidates
+    .sort((left, right) => {
+      const scoreDelta = edgeRelevanceScore(right) - edgeRelevanceScore(left)
+      if (scoreDelta !== 0) {
+        return scoreDelta
+      }
+      const leftKey = edgeIdentityKey(left)
+      const rightKey = edgeIdentityKey(right)
+      return leftKey.localeCompare(rightKey)
+    })
+
+  if (options.preferComplete) {
+    return ranked.slice(0, limit)
+  }
+
+  const coverageFloor = Math.min(4_200, Math.max(limit, Math.floor(nodeIds.size * 1.6)))
+  const resolvedLimit = Math.min(coverageFloor, ranked.length)
+  const selected = []
+  const selectedKeys = new Set()
+
+  nodeIds.forEach(nodeId => {
+    const edge = bestEdgeByNode.get(nodeId)?.edge
+    if (!edge) return
+    const key = edgeIdentityKey(edge)
+    if (selectedKeys.has(key)) return
+    selectedKeys.add(key)
+    selected.push(edge)
+  })
+
+  if (selected.length >= resolvedLimit) {
+    return selected.slice(0, resolvedLimit)
+  }
+
+  for (let index = 0; index < ranked.length && selected.length < resolvedLimit; index += 1) {
+    const edge = ranked[index]
+    const key = edgeIdentityKey(edge)
+    if (selectedKeys.has(key)) continue
+    selectedKeys.add(key)
+    selected.push(edge)
+  }
+
+  return selected
+}
+
+const edgeOpacityForScale = (edge, scale) => {
+  if (edge.inferred) {
+    if (scale < 0.2) return 0.06
+    if (scale < 0.4) return 0.08
+    if (scale < 0.7) return 0.1
+    return 0.14
+  }
+
+  if (scale < 0.2) return 0.14
+  if (scale < 0.4) return 0.2
+  if (scale < 0.7) return 0.28
+  if (scale < 1.05) return 0.36
+  return 0.46
+}
+
+const edgeDepthOpacity = edge => {
+  return 1
+}
+
+const edgeDepthScale = edge => {
+  return 1
+}
+
+const edgeStrokeFor = (edge, selectedEdge) => {
+  if (selectedEdge) {
+    return graphTheme.edgeActive
+  }
+
+  const opacity = edgeOpacityForScale(edge, state.transform.scale) * edgeDepthOpacity(edge)
+  return edge.inferred
+    ? 'rgba(203, 213, 225, ' + opacity + ')'
+    : 'rgba(153, 165, 181, ' + opacity + ')'
+}
+
+const edgeWidthFor = (edge, selectedEdge) => {
+  if (edge.inferred) {
+    const width = selectedEdge ? 1.22 : 0.84
+    return width * edgeDepthScale(edge)
+  }
+
+  const width = (selectedEdge ? 1.9 : 1.05) + Math.min(edgeWeight(edge) - 1, 8) * 0.24
+  return width * edgeDepthScale(edge)
+}
+
+const drawGraphEdge = (edge) => {
+  const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
+  ctx.beginPath()
+  ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
+  ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
+  ctx.strokeStyle = edgeStrokeFor(edge, selectedEdge)
+  ctx.lineWidth = edgeWidthFor(edge, selectedEdge)
+  ctx.stroke()
+}
+
+const drawEdgeBatch = (edges, options) => {
+  if (edges.length === 0) {
+    return
+  }
+
+  ctx.beginPath()
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
+    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
+  }
+  ctx.strokeStyle = options.strokeStyle
+  ctx.lineWidth = options.lineWidth
+  ctx.stroke()
+}
+
+const regularEdgeBatchOptions = (edge) => ({
+  strokeStyle: edgeStrokeFor(edge, false),
+  lineWidth: edgeWidthFor(edge, false)
+})
+
+const regularEdgeBatchKey = (edge) => {
+  const options = regularEdgeBatchOptions(edge)
+  return options.strokeStyle + '|' + options.lineWidth.toFixed(2)
+}
+
+const drawGraphEdges = () => {
+  const edgeBatches = new Map()
+  const selectedEdges = []
+
+  for (let index = 0; index < state.renderEdges.length; index += 1) {
+    const edge = state.renderEdges[index]
+    const isSelected = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
+    if (isSelected) {
+      selectedEdges.push(edge)
+      continue
+    }
+
+    const key = regularEdgeBatchKey(edge)
+    const batch = edgeBatches.get(key)
+    if (batch) {
+      batch.edges.push(edge)
+    } else {
+      edgeBatches.set(key, {
+        edges: [edge],
+        options: regularEdgeBatchOptions(edge)
+      })
+    }
+  }
+
+  edgeBatches.forEach((batch) => drawEdgeBatch(batch.edges, batch.options))
+
+  for (let index = 0; index < selectedEdges.length; index += 1) {
+    drawGraphEdge(selectedEdges[index])
+  }
+}
+
+const shouldDrawNodeLabels = (node, isSelected, isHovered) =>
+  isSelected ||
+  isHovered ||
+  (state.nodes.length > largeGraphNodeThreshold && !state.renderNodes.some(item => !item.isGroupNode) && state.transform.scale >= 1.25 && state.renderNodes.length <= 420) ||
+  (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
+
+const drawSingleNode = (node, options = { drawLabel: true }) => {
+  const radius = nodeRadius(node)
+  const x = node.x
+  const y = node.y
+  const isSelected = state.selected?.id === node.id
+  const isHovered = state.hovered?.id === node.id
+  ctx.beginPath()
+  ctx.arc(x, y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
+  ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
+  ctx.fill()
+  ctx.beginPath()
+  ctx.arc(x, y, radius, 0, Math.PI * 2)
+  ctx.fillStyle = isSelected ? graphTheme.nodeSelected : isHovered ? graphTheme.nodeHover : graphTheme.node
+  ctx.fill()
+  ctx.lineWidth = isSelected ? 2.6 : 1.5
+  ctx.strokeStyle = isSelected ? graphTheme.nodeStrokeActive : graphTheme.nodeStroke
+  ctx.stroke()
+
+  if (options.drawLabel && shouldDrawNodeLabels(node, isSelected, isHovered)) {
+    ctx.globalAlpha = 1
+    ctx.fillStyle = graphTheme.label
+    ctx.font = '12px Inter, system-ui, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'top'
+    ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
+  }
+  ctx.globalAlpha = 1
+}
+
+const drawNodeBatch = (nodes) => {
+  if (nodes.length === 0) {
+    return
+  }
+
+  const drawHalos = state.renderNodes.length <= 1200 || state.transform.scale >= 0.45
+  if (drawHalos) {
+    for (let index = 0; index < nodes.length; index += 1) {
+      const node = nodes[index]
+      const radius = nodeRadius(node)
+      const x = node.x
+      const y = node.y
+      ctx.globalAlpha = 0.5
+      ctx.beginPath()
+      ctx.arc(x, y, radius + 3, 0, Math.PI * 2)
+      ctx.fillStyle = graphTheme.nodeHalo
+      ctx.fill()
+    }
+    ctx.globalAlpha = 1
+  }
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const radius = nodeRadius(node)
+    const x = node.x
+    const y = node.y
+    ctx.globalAlpha = 1
+    ctx.beginPath()
+    ctx.arc(x, y, radius, 0, Math.PI * 2)
+    ctx.fillStyle = graphTheme.node
+    ctx.fill()
+    ctx.lineWidth = 1.25
+    ctx.strokeStyle = graphTheme.nodeStroke
+    ctx.stroke()
+  }
+  ctx.globalAlpha = 1
+}
+
+const drawGraphNodes = () => {
+  const regularNodes = []
+  const priorityNodes = []
+
+  for (let index = 0; index < state.renderNodes.length; index += 1) {
+    const node = state.renderNodes[index]
+    const isPriority =
+      state.selected?.id === node.id ||
+      state.hovered?.id === node.id
+    if (isPriority) {
+      priorityNodes.push(node)
+    } else {
+      regularNodes.push(node)
+    }
+  }
+
+  drawNodeBatch(regularNodes)
+
+  const isRenderingHierarchyChildGraph = state.groups.length > 0 && state.renderNodes.some(node => !node.isGroupNode)
+  const shouldDrawBatchLabels = isRenderingHierarchyChildGraph
+    ? false
+    : state.nodes.length > largeGraphNodeThreshold
+    ? state.transform.scale >= 1.25 && state.renderNodes.length <= 420
+    : state.transform.scale >= 0.62 && state.renderNodes.length <= 1200
+
+  if (shouldDrawBatchLabels) {
+    ctx.fillStyle = graphTheme.label
+    ctx.font = '12px Inter, system-ui, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'top'
+    for (let index = 0; index < regularNodes.length; index += 1) {
+      const node = regularNodes[index]
+      const x = node.x
+      const y = node.y
+      const radius = nodeRadius(node)
+      ctx.globalAlpha = 1
+      ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
+    }
+    ctx.globalAlpha = 1
+  }
+
+  priorityNodes.forEach(node => drawSingleNode(node))
+}
+
+const partitionGraphForAcceleratedRenderer = () => {
+  const regularNodes = []
+  const priorityNodes = []
+  const regularEdges = []
+  const inferredEdges = []
+  const selectedEdges = []
+
+  for (let index = 0; index < state.renderNodes.length; index += 1) {
+    const node = state.renderNodes[index]
+    const isPriority =
+      state.selected?.id === node.id ||
+      state.hovered?.id === node.id
+    if (isPriority) {
+      priorityNodes.push(node)
+    } else {
+      regularNodes.push(node)
+    }
+  }
+
+  for (let index = 0; index < state.renderEdges.length; index += 1) {
+    const edge = state.renderEdges[index]
+    const isSelected = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
+    if (isSelected) {
+      selectedEdges.push(edge)
+    } else if (edge.inferred) {
+      inferredEdges.push(edge)
+    } else {
+      regularEdges.push(edge)
+    }
+  }
+
+  return { regularNodes, priorityNodes, regularEdges, inferredEdges, selectedEdges }
+}
+
+const drawGraphLabels = nodes => {
+  const shouldDrawLabels = state.nodes.length > largeGraphNodeThreshold
+    ? state.transform.scale >= 1.25 && state.renderNodes.length <= 420
+    : state.transform.scale >= 0.62 && state.renderNodes.length <= 1200
+
+  if (!shouldDrawLabels) {
+    return
+  }
+
+  ctx.fillStyle = graphTheme.label
+  ctx.font = '12px Inter, system-ui, sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'top'
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const x = node.x
+    const y = node.y
+    const radius = nodeRadius(node)
+    ctx.globalAlpha = 1
+    ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
+  }
+  ctx.globalAlpha = 1
+}
+
+const drawAcceleratedGraph = (width, height, drawEdges) => {
+  if (!webGlRenderer) {
+    return false
+  }
+
+  const graphParts = partitionGraphForAcceleratedRenderer()
+  const scale = state.transform.scale
+  webGlRenderer.clear(width, height)
+  if (drawEdges) {
+    webGlRenderer.drawLines(
+      graphParts.regularEdges,
+      rgba('rgb(153, 165, 181)', edgeOpacityForScale({ inferred: false }, scale)),
+      width,
+      height
+    )
+    webGlRenderer.drawLines(
+      graphParts.inferredEdges,
+      rgba('rgb(203, 213, 225)', edgeOpacityForScale({ inferred: true }, scale)),
+      width,
+      height
+    )
+  }
+  webGlRenderer.drawPoints(
+    graphParts.regularNodes,
+    rgba(graphTheme.nodeHalo, 0.28),
+    node => Math.max((nodeRadius(node) + 3) * state.transform.scale * 2, 1.5),
+    width,
+    height
+  )
+  webGlRenderer.drawPoints(
+    graphParts.regularNodes,
+    rgba(graphTheme.node, 1),
+    node => Math.max(nodeRadius(node) * state.transform.scale * 2, 1.2),
+    width,
+    height
+  )
+
+  ctx.save()
+  ctx.translate(state.transform.x, state.transform.y)
+  ctx.scale(state.transform.scale, state.transform.scale)
+  if (drawEdges) {
+    graphParts.selectedEdges.forEach(edge => drawGraphEdge(edge))
+  }
+  drawGraphLabels(graphParts.regularNodes)
+  graphParts.priorityNodes.forEach(node => drawSingleNode(node))
+  ctx.restore()
+
+  return true
+}
+
+const focusedGroup = () => {
+  if (state.groups.length === 0) {
+    return null
+  }
+
+  const selectedGroupId = state.selected?.groupId ?? state.hovered?.groupId
+  if (selectedGroupId) {
+    return state.groupById.get(selectedGroupId) ?? null
+  }
+
+  const selectedId = state.selected?.id ?? state.hovered?.id
+  if (selectedId) {
+    const selectedGroup = state.nodeLeafGroupById.get(selectedId)
+    if (selectedGroup) {
+      return selectedGroup
+    }
+  }
+
+  const focusPoint = performance.now() - state.lastZoomFocus.at <= 1800
+    ? state.lastZoomFocus
+    : viewportCenterWorldPoint()
+  return state.leafGroups
+    .map(group => ({
+      group,
+      distance: Math.hypot(group.x - focusPoint.x, group.y - focusPoint.y)
+    }))
+    .sort((left, right) => left.distance - right.distance)[0]?.group ?? null
+}
+
+const groupRenderNodeId = group => 'group:' + group.id
+
+const smoothProgress = value => {
+  const bounded = Math.max(0, Math.min(1, value))
+  return bounded * bounded * (3 - 2 * bounded)
+}
+
+const childRevealProgressForFocus = progress => {
+  const bounded = Math.max(0, Math.min(1, progress))
+  if (bounded <= hierarchyChildRevealStartProgress) {
+    return 0
+  }
+  const shifted = (bounded - hierarchyChildRevealStartProgress) / Math.max(1 - hierarchyChildRevealStartProgress, 0.0001)
+  return Math.pow(smoothProgress(shifted), hierarchyChildRevealExponent)
+}
+
+const groupRenderRadius = group => {
+  const childCount = Math.max(group.nodeIds.length, group.childGroupIds.length, 1)
+  return 10 + Math.min(Math.log2(childCount + 1) * 4.2, 22)
+}
+
+const childGraphRenderRadius = group => {
+  const childCount = Math.max(group.nodeIds.length, group.childGroupIds.length, 1)
+  return Math.max(420, Math.min(1800, Math.sqrt(childCount) * 24))
+}
+
+const createGroupRenderNode = group => ({
+  id: groupRenderNodeId(group),
+  groupId: group.id,
+  isGroupNode: true,
+  title: group.title,
+  path: '',
+  tags: [],
+  group: group.group,
+  segment: group.segment,
+  x: group.x,
+  y: group.y,
+  vx: 0,
+  vy: 0,
+  radius: groupRenderRadius(group)
+})
+
+const arrangeGraphLevelNodes = (nodes, radiusForNode = () => 1) => {
+  if (nodes.length <= 1) {
+    return nodes
+  }
+
+  const centerNode = nodes
+    .map(node => ({
+      node,
+      score: Math.max(node.nodeIds?.length ?? 0, node.childGroupIds?.length ?? 0, 1) + (node.externalEdges?.length ?? 0)
+    }))
+    .sort((left, right) => right.score - left.score || left.node.title.localeCompare(right.node.title))[0]?.node
+  const outerNodes = nodes
+    .filter(node => node.id !== centerNode?.id)
+    .sort((left, right) => left.segment.localeCompare(right.segment) || left.title.localeCompare(right.title))
+  const baseRadius = Math.max(520, Math.min(2200, Math.sqrt(nodes.length) * 135))
+  const goldenAngle = Math.PI * (3 - Math.sqrt(5))
+  const arranged = centerNode
+    ? [{ ...centerNode, x: 0, y: 0, radius: radiusForNode(centerNode) }]
+    : []
+
+  outerNodes.forEach((node, index) => {
+    const ringRadius = baseRadius * Math.sqrt((index + 1) / Math.max(outerNodes.length, 1))
+    const angle = index * goldenAngle
+    arranged.push({
+      ...node,
+      x: Math.cos(angle) * ringRadius,
+      y: Math.sin(angle) * ringRadius,
+      radius: radiusForNode(node)
+    })
+  })
+
+  return arranged
+}
+
+const arrangeChildGraphNodes = (nodes, group, origin = group) => {
+  if (nodes.length <= 1) {
+    return nodes.map(node => ({ ...node, x: origin.x, y: origin.y }))
+  }
+
+  const targetRadius = childGraphRenderRadius(group)
+  const centerNode = nodes
+    .map(node => ({
+      node,
+      score: (state.nodeDegrees.get(node.id) ?? 0) + (node.tags?.length ?? 0)
+    }))
+    .sort((left, right) => right.score - left.score || left.node.title.localeCompare(right.node.title))[0]?.node
+  const outerNodes = nodes
+    .filter(node => node.id !== centerNode?.id)
+    .sort((left, right) => {
+      const leftDegree = state.nodeDegrees.get(left.id) ?? 0
+      const rightDegree = state.nodeDegrees.get(right.id) ?? 0
+      if (leftDegree !== rightDegree) return rightDegree - leftDegree
+      return left.title.localeCompare(right.title)
+    })
+  const goldenAngle = Math.PI * (3 - Math.sqrt(5))
+  const arranged = centerNode
+    ? [{ ...centerNode, x: origin.x, y: origin.y }]
+    : []
+
+  outerNodes.forEach((node, index) => {
+    const ringRadius = targetRadius * Math.sqrt((index + 1) / Math.max(outerNodes.length, 1))
+    const angle = index * goldenAngle
+    arranged.push({
+      ...node,
+      x: origin.x + Math.cos(angle) * ringRadius,
+      y: origin.y + Math.sin(angle) * ringRadius
+    })
+  })
+
+  return arranged
+}
+
+const projectNodesIntoChildGraph = (nodes, focusRenderNode, group) => {
+  if (nodes.length <= 1) {
+    return nodes.map(node => ({ ...node, x: focusRenderNode.x, y: focusRenderNode.y }))
+  }
+
+  let minX = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    minX = Math.min(minX, node.x)
+    maxX = Math.max(maxX, node.x)
+    minY = Math.min(minY, node.y)
+    maxY = Math.max(maxY, node.y)
+  }
+
+  const centerX = (minX + maxX) / 2
+  const centerY = (minY + maxY) / 2
+  const maxDistanceFromCenter = nodes.reduce((maxDistance, node) => {
+    const distance = Math.hypot(node.x - centerX, node.y - centerY)
+    return Math.max(maxDistance, distance)
+  }, 1)
+  const subgraphFillByNodeCount = (nodeCount) => {
+    if (nodeCount <= 24) return 0.62
+    if (nodeCount <= 80) return 0.7
+    if (nodeCount <= 200) return 0.78
+    return 0.84
+  }
+  const targetRadius = Math.max(1, childGraphRenderRadius(group) * subgraphFillByNodeCount(nodes.length))
+  const scale = targetRadius / Math.max(maxDistanceFromCenter, 1)
+
+  return nodes.map(node => ({
+    ...node,
+    x: focusRenderNode.x + (node.x - centerX) * scale,
+    y: focusRenderNode.y + (node.y - centerY) * scale
+  }))
+}
+
+const recursiveLeafSubgraphNodes = (rootNodeId, maxNodes = renderNodeBudget) => {
+  const root = state.nodeById.get(rootNodeId)
+  if (!root) {
+    return []
+  }
+
+  const visited = new Set([rootNodeId])
+  const queue = [rootNodeId]
+
+  while (queue.length > 0 && visited.size < maxNodes) {
+    const currentId = queue.shift()
+    const edges = [...(state.visibleEdgeByNode.get(currentId) ?? [])]
+      .filter(edge => edge.target)
+      .sort((left, right) => edgeWeight(right) - edgeWeight(left))
+    for (let edgeIndex = 0; edgeIndex < edges.length && visited.size < maxNodes; edgeIndex += 1) {
+      const edge = edges[edgeIndex]
+      const nextId = edge.source === currentId ? edge.target : edge.source
+      if (!nextId || visited.has(nextId) || !state.nodeById.has(nextId)) {
+        continue
+      }
+      visited.add(nextId)
+      queue.push(nextId)
+    }
+  }
+
+  return [...visited]
+    .map(id => state.nodeById.get(id))
+    .filter(Boolean)
+}
+
+const arrangeChildGroupNodes = (groups, parentGroup, origin) => {
+  if (groups.length <= 1) {
+    return groups.map(group => ({
+      ...createGroupRenderNode(group),
+      x: origin.x,
+      y: origin.y
+    }))
+  }
+
+  const targetRadius = childGraphRenderRadius(parentGroup)
+  const centerGroup = groups
+    .map(group => ({
+      group,
+      score: Math.max(group.nodeIds.length, group.childGroupIds.length, 1)
+    }))
+    .sort((left, right) => right.score - left.score || left.group.title.localeCompare(right.group.title))[0]?.group
+  const outerGroups = groups
+    .filter(group => group.id !== centerGroup?.id)
+    .sort((left, right) => left.segment.localeCompare(right.segment) || left.title.localeCompare(right.title))
+  const goldenAngle = Math.PI * (3 - Math.sqrt(5))
+  const arranged = centerGroup
+    ? [{ ...createGroupRenderNode(centerGroup), x: origin.x, y: origin.y }]
+    : []
+
+  outerGroups.forEach((group, index) => {
+    const ringRadius = targetRadius * Math.sqrt((index + 1) / Math.max(outerGroups.length, 1))
+    const angle = index * goldenAngle
+    arranged.push({
+      ...createGroupRenderNode(group),
+      x: origin.x + Math.cos(angle) * ringRadius,
+      y: origin.y + Math.sin(angle) * ringRadius
+    })
+  })
+
+  return arranged
+}
+
+const interpolateNodeFromGroup = (node, origin, progress) => {
+  return {
+    ...node,
+    x: origin.x + (node.x - origin.x) * progress,
+    y: origin.y + (node.y - origin.y) * progress,
+    vx: 0,
+    vy: 0
+  }
+}
+
+const parentHierarchyGroups = () =>
+  state.groups.filter(group => group.parentId === null)
+
+const activeHierarchyParentGroup = () => {
+  for (let index = state.hierarchyFocusStack.length - 1; index >= 0; index -= 1) {
+    const group = state.groupById.get(state.hierarchyFocusStack[index])
+    if (group && group.childGroupIds.length > 0) {
+      return group
+    }
+  }
+  return null
+}
+
+const groupsBelongToParent = (groups, parentGroup) =>
+  Boolean(parentGroup) && groups.some(group =>
+    group.parentId === parentGroup.id || parentGroup.childGroupIds.includes(group.id)
+  )
+
+const hierarchyGroupsForScale = () => {
+  if (state.groups.length === 0) {
+    return []
+  }
+  const parentGroup = activeHierarchyParentGroup()
+  if (parentGroup) {
+    const childGroups = parentGroup.childGroupIds
+      .map(groupId => state.groupById.get(groupId))
+      .filter(Boolean)
+    return arrangeGraphLevelNodes(childGroups, groupRenderRadius)
+  }
+  return arrangeGraphLevelNodes(parentHierarchyGroups(), groupRenderRadius)
+}
+
+const groupViewportCoverage = (group, viewport) => {
+  const viewportWidth = Math.max(viewport.maxX - viewport.minX, 1)
+  const viewportHeight = Math.max(viewport.maxY - viewport.minY, 1)
+  const viewportRadius = Math.min(viewportWidth, viewportHeight) / 2
+  const centerX = (viewport.minX + viewport.maxX) / 2
+  const centerY = (viewport.minY + viewport.maxY) / 2
+  const centerDistance = Math.hypot(group.x - centerX, group.y - centerY)
+  const fitCoverage = Math.min(1, childGraphRenderRadius(group) / Math.max(viewportRadius, 1))
+  const centerCoverage = 1 - Math.min(1, centerDistance / Math.max(viewportRadius, 1))
+
+  return fitCoverage * 0.72 + centerCoverage * 0.28
+}
+
+const groupWithCoverage = (group, viewport) => ({
+  group,
+  coverage: groupViewportCoverage(group, viewport)
+})
+
+const distanceToViewportCenter = (item, viewport) => {
+  const centerX = (viewport.minX + viewport.maxX) / 2
+  const centerY = (viewport.minY + viewport.maxY) / 2
+  return Math.hypot(item.x - centerX, item.y - centerY)
+}
+
+const selectViewportItemsWithFill = (items, viewport, limit = renderNodeBudget) => {
+  const visible = items.filter(item =>
+    item.x + item.radius >= viewport.minX &&
+    item.x - item.radius <= viewport.maxX &&
+    item.y + item.radius >= viewport.minY &&
+    item.y - item.radius <= viewport.maxY
+  )
+
+  if (visible.length >= limit) {
+    return visible.slice(0, limit)
+  }
+
+  const selectedIds = new Set(visible.map(item => item.id))
+  const fill = items
+    .filter(item => !selectedIds.has(item.id))
+    .sort((left, right) => distanceToViewportCenter(left, viewport) - distanceToViewportCenter(right, viewport) || left.id.localeCompare(right.id))
+    .slice(0, Math.max(0, limit - visible.length))
+
+  return visible.concat(fill)
+}
+
+const updateHierarchyFocusGroup = (groups, _viewport) => {
+  const activeGroupIds = new Set(groups.map(group => group.id))
+  state.hierarchyFocusStack = state.hierarchyFocusStack.filter(groupId => state.groupById.has(groupId))
+  const parentGroup = activeHierarchyParentGroup()
+  if (!groupsBelongToParent(groups, parentGroup)) {
+    while (
+      state.hierarchyFocusStack.length > 0 &&
+      !activeGroupIds.has(state.hierarchyFocusStack[state.hierarchyFocusStack.length - 1])
+    ) {
+      state.hierarchyFocusStack.pop()
+    }
+  }
+  const current = state.hierarchyFocusGroupId
+    ? groups.find(group => group.id === state.hierarchyFocusGroupId) ?? null
+    : null
+  const hasActiveFocusedTransition =
+    Boolean(current) &&
+    state.zoomTransition.active &&
+    state.zoomTransition.source === 'group' &&
+    state.selected?.isGroupNode &&
+    state.selected.groupId === current.id
+
+  if (hasActiveFocusedTransition) {
+    return current
+  }
+  const selectedGroupId = state.selected?.isGroupNode ? state.selected.groupId : null
+  const selectedGroup = selectedGroupId
+    ? groups.find(group => group.id === selectedGroupId) ?? null
+    : null
+
+  if (selectedGroup && state.transform.scale >= hierarchyMicroExitScale) {
+    state.hierarchyFocusGroupId = selectedGroup.id
+    return selectedGroup
+  }
+
+  if (state.hierarchyFocusStack.length > 0 && state.transform.scale < hierarchyMicroExitScale) {
+    state.hierarchyFocusStack = state.hierarchyFocusStack.slice(0, -1)
+    if (state.selected?.isGroupNode) {
+      state.selected = null
+    }
+  }
+  state.leafFocusRootNodeId = null
+  state.hierarchyFocusGroupId = null
+  return null
+}
+
+const updateHierarchyChildRevealBudget = (focusGroupId, targetLimit) => {
+  if (state.hierarchyRevealFocusGroupId !== focusGroupId) {
+    state.hierarchyRevealFocusGroupId = focusGroupId
+    state.hierarchyRevealBudget = 1
+  }
+
+  if (state.hierarchyRevealBudget > targetLimit) {
+    state.hierarchyRevealBudget = targetLimit
+    return targetLimit
+  }
+
+  const remaining = Math.max(0, targetLimit - state.hierarchyRevealBudget)
+  const growth = Math.max(
+    hierarchyChildRevealGrowthFloor,
+    Math.floor(remaining * hierarchyChildRevealGrowthRatio)
+  )
+  state.hierarchyRevealBudget = Math.min(targetLimit, state.hierarchyRevealBudget + growth)
+  return state.hierarchyRevealBudget
+}
+
+const hierarchyViewportProgress = (group, _viewport) => {
+  const hasActiveFocusedTransition =
+    state.zoomTransition.active &&
+    state.zoomTransition.source === 'group' &&
+    state.selected?.isGroupNode &&
+    state.selected.groupId === group.id
+
+  if (!hasActiveFocusedTransition) {
+    return 1
+  }
+
+  const targetSpan = Math.max(state.zoomTransition.targetScale - hierarchyFocusAcquireScale, 0.0001)
+  const transitionScaleProgress = (state.transform.scale - hierarchyFocusAcquireScale) / targetSpan
+  return Math.pow(Math.max(0, Math.min(1, transitionScaleProgress)), 2.8)
+}
+
+const groupEdgesForRenderedGroups = (groupNodes, options = { preferComplete: false }) => {
+  if (groupNodes.length <= 1) {
+    return []
+  }
+
+  const groupByNodeId = new Map()
+  const groupNodeIds = (group) => {
+    if (!group) return []
+    if (group.nodeIds.length > 0) return group.nodeIds
+    return group.childGroupIds.flatMap(childGroupId => groupNodeIds(state.groupById.get(childGroupId)))
+  }
+
+  groupNodes.forEach((groupNode) => {
+    const group = state.groupById.get(groupNode.groupId)
+    groupNodeIds(group).forEach((nodeId) => {
+      groupByNodeId.set(nodeId, groupNode)
+    })
+  })
+
+  const selected = new Map()
+  for (let index = 0; index < state.visibleEdges.length; index += 1) {
+    const edge = state.visibleEdges[index]
+    if (!edge.target) continue
+    const sourceGroup = groupByNodeId.get(edge.source)
+    const targetGroup = groupByNodeId.get(edge.target)
+    if (!sourceGroup || !targetGroup || sourceGroup.id === targetGroup.id) continue
+
+    const key = sourceGroup.id < targetGroup.id
+      ? sourceGroup.id + '|' + targetGroup.id
+      : targetGroup.id + '|' + sourceGroup.id
+    const current = selected.get(key)
+    if (current && edgeWeight(current) >= edgeWeight(edge)) continue
+
+    selected.set(key, {
+      source: sourceGroup.id,
+      target: targetGroup.id,
+      targetTitle: targetGroup.title,
+      weight: edgeWeight(edge),
+      priority: edge.priority || 'normal',
+      sourceNode: sourceGroup,
+      targetNode: targetGroup
+    })
+  }
+
+  const sorted = Array.from(selected.values())
+    .sort((left, right) => edgeWeight(right) - edgeWeight(left) || left.source.localeCompare(right.source) || left.target.localeCompare(right.target))
+  if (options.preferComplete) {
+    return sorted.slice(0, Math.min(sorted.length, hierarchyAbsoluteEdgeSafetyCap))
+  }
+  return sorted.slice(0, Math.min(edgeBudgetForCurrentFrame(), hierarchyAbsoluteEdgeSafetyCap))
+}
+
+const computeHierarchyRenderVisibility = (viewport) => {
+  if (state.groups.length === 0 || state.visibleNodes.length <= 1000) {
+    state.hierarchyFocusGroupId = null
+    state.hierarchyFocusStack = []
+    state.hierarchyRevealFocusGroupId = null
+    state.hierarchyRevealBudget = 1
+    return false
+  }
+
+  const groups = selectViewportItemsWithFill(hierarchyGroupsForScale(), viewport, renderNodeBudget)
+  const focus = updateHierarchyFocusGroup(groups, viewport)
+  const progress = focus ? hierarchyViewportProgress(focus, viewport) : 0
+  const revealProgress = childRevealProgressForFocus(progress)
+  const groupNodes = groups.map(createGroupRenderNode)
+
+  if (!focus || revealProgress <= 0) {
+    state.hierarchyRevealFocusGroupId = null
+    state.hierarchyRevealBudget = 1
+    state.renderNodes = groupNodes
+    state.renderEdges = groupEdgesForRenderedGroups(groupNodes, { preferComplete: true })
+    return true
+  }
+
+  const focusIds = new Set(focus.nodeIds)
+  const rawChildNodes = state.visibleNodes.filter(node => focusIds.has(node.id))
+  const focusChildGroups = focus.childGroupIds
+    .map(groupId => state.groupById.get(groupId))
+    .filter(Boolean)
+  if (focusChildGroups.length > 0) {
+    state.leafFocusRootNodeId = null
+  } else if (state.leafFocusRootNodeId && !focusIds.has(state.leafFocusRootNodeId)) {
+    state.leafFocusRootNodeId = null
+  }
+  const childTargetLimit = Math.min(renderNodeBudget, Math.max(1, Math.floor(renderNodeBudget * revealProgress)))
+  const childLimit = updateHierarchyChildRevealBudget(focus.id, childTargetLimit)
+  const focusRenderNode = groupNodes.find(node => node.groupId === focus.id) ?? createGroupRenderNode(focus)
+  const arrangedChildren = (() => {
+    if (focusChildGroups.length > 0) {
+      return arrangeChildGroupNodes(focusChildGroups, focus, focusRenderNode)
+    }
+    const recursiveNodes = state.leafFocusRootNodeId
+      ? recursiveLeafSubgraphNodes(state.leafFocusRootNodeId, renderNodeBudget)
+      : rawChildNodes
+    return projectNodesIntoChildGraph(recursiveNodes, focusRenderNode, focus)
+  })()
+  const childNodes = selectStableSampleNodes(arrangedChildren, childLimit)
+    .map(node => interpolateNodeFromGroup(node, focusRenderNode, revealProgress))
+  const childIds = new Set(childNodes.map(node => node.id))
+  const childById = new Map(childNodes.map(node => [node.id, node]))
+  const isMicroView = revealProgress >= hierarchyFocusedOnlyProgress
+  const visibleGroupNodes = isMicroView
+    ? []
+    : groupNodes.filter(node => node.groupId !== focus.id || revealProgress < 0.96)
+  const groupEdges = isMicroView ? [] : groupEdgesForRenderedGroups(visibleGroupNodes)
+  const childEdges = (isMicroView || revealProgress > 0)
+    ? focusChildGroups.length > 0
+      ? groupEdgesForRenderedGroups(childNodes)
+      : collectVisibleEdgesForNodes(childIds, { preferComplete: true }).map(edge => ({
+        ...edge,
+        sourceNode: childById.get(edge.source) ?? edge.sourceNode,
+        targetNode: childById.get(edge.target) ?? edge.targetNode
+      }))
+    : []
+
+  state.renderNodes = mergeUniqueNodes(childNodes, visibleGroupNodes, Math.max(renderNodeBudget, childLimit + visibleGroupNodes.length))
+  state.renderEdges = childEdges.concat(groupEdges).slice(0, edgeBudgetForCurrentFrame())
+  return true
+}
+
+const limitRenderEdges = (nodes, edges) => {
+  return edges
+}
+
+const fallbackViewportNodes = () => {
+  const nodes = []
+  const maxNodes = Math.min(renderNodeBudget, 220)
+  const step = Math.max(1, Math.ceil(state.visibleNodes.length / maxNodes))
+
+  for (let index = 0; index < state.visibleNodes.length && nodes.length < maxNodes; index += step) {
+    nodes.push(state.visibleNodes[index])
+  }
+
+  if (state.selected && !nodes.find(node => node.id === state.selected.id)) {
+    nodes.push(state.selected)
+  }
+
+  return nodes
+}
+
+const sampleVisibleNodes = (limit = renderNodeBudget, sourceNodes = state.visibleNodes) => {
+  if (sourceNodes.length === 0 || limit <= 0) {
+    return []
+  }
+
+  const nodes = []
+  const maxNodes = Math.min(Math.max(limit, 1), sourceNodes.length)
+  const step = Math.max(1, Math.ceil(sourceNodes.length / maxNodes))
+
+  for (let index = 0; index < sourceNodes.length && nodes.length < maxNodes; index += step) {
+    nodes.push(sourceNodes[index])
+  }
+
+  if (state.selected && !nodes.find(node => node.id === state.selected.id)) {
+    nodes.push(state.selected)
+  }
+
+  return nodes
+}
+
+const sampleMassiveOverviewNodes = (limit) => {
+  const sampled = sampleVisibleNodes(limit, state.visibleNodes)
+  return ensureHubNodesInRenderedSet(sampled)
+}
+
+const representativeNodeFromBucket = bucket => {
+  if (!bucket || bucket.length === 0) {
+    return null
+  }
+
+  let representative = bucket[0]
+  let representativeDegree = state.nodeDegrees.get(representative.id) ?? 0
+
+  for (let index = 1; index < bucket.length; index += 1) {
+    const candidate = bucket[index]
+    const candidateDegree = state.nodeDegrees.get(candidate.id) ?? 0
+    if (candidateDegree <= representativeDegree) {
+      continue
+    }
+    representative = candidate
+    representativeDegree = candidateDegree
+  }
+
+  return representative
+}
+
+const sampleMassiveSegmentRepresentatives = (limit) => {
+  const spatial = state.visibleNodeSpatial
+  if (!spatial || spatial.buckets.size === 0 || limit <= 0) {
+    return []
+  }
+
+  const keys = [...spatial.buckets.keys()].sort()
+  const maxNodes = Math.min(limit, keys.length)
+  const step = Math.max(1, Math.ceil(keys.length / maxNodes))
+  const representatives = []
+
+  for (let index = 0; index < keys.length && representatives.length < maxNodes; index += step) {
+    const representative = representativeNodeFromBucket(spatial.buckets.get(keys[index]))
+    if (representative) {
+      representatives.push(representative)
+    }
+  }
+
+  return representatives
+}
+
+const massiveSegmentRepresentativeLimit = (scale, limit) => {
+  if (scale >= massiveSegmentedScaleThreshold) {
+    return 0
+  }
+  if (scale < 0.09) {
+    return Math.min(massiveSegmentRepresentativeBudget, Math.floor(limit * 0.5))
+  }
+  if (scale < 0.18) {
+    return Math.min(620, Math.floor(limit * 0.42))
+  }
+  if (scale < 0.28) {
+    return Math.min(460, Math.floor(limit * 0.34))
+  }
+  return Math.min(260, Math.floor(limit * 0.22))
+}
+
+const sampleMassiveSegmentedNodes = (limit, viewport) => {
+  const representativeLimit = massiveSegmentRepresentativeLimit(state.transform.scale, limit)
+  const representatives = sampleMassiveSegmentRepresentatives(representativeLimit)
+  const localLimit = Math.max(1, limit - representatives.length)
+  const localMargin = Math.max(520, Math.min(5200, 780 / Math.max(state.transform.scale, 0.0001)))
+  const localViewport = expandViewportBounds(viewport, localMargin)
+  const localViewportNodes = viewportNodesFromSpatialIndex(localViewport)
+  const localSource = localViewportNodes.length > 0 ? localViewportNodes : state.visibleNodes
+  const localNodes = selectStableSampleNodes(localSource, localLimit)
+
+  return mergeUniqueNodes(representatives, localNodes, limit)
+}
+
+const enrichSampleWithNeighbors = (nodes) => {
+  if (nodes.length === 0) {
+    return {
+      nodes,
+      edges: []
+    }
+  }
+
+  const maxNodes = Math.min(renderNodeBudget, nodes.length + 200)
+  const expanded = [...nodes]
+  const ids = new Set(expanded.map((node) => node.id))
+
+  for (let index = 0; index < nodes.length && expanded.length < maxNodes; index += 1) {
+    const node = nodes[index]
+    const candidates = [...(state.visibleEdgeByNode.get(node.id) ?? [])]
+      .filter((edge) => edge.target)
+      .sort((left, right) => edgeWeight(right) - edgeWeight(left))
+      .slice(0, 3)
+
+    for (let candidateIndex = 0; candidateIndex < candidates.length && expanded.length < maxNodes; candidateIndex += 1) {
+      const edge = candidates[candidateIndex]
+      const otherId = edge.source === node.id ? edge.target : edge.source
+
+      if (!otherId || ids.has(otherId)) {
+        continue
+      }
+
+      const otherNode = state.nodeById.get(otherId)
+      if (!otherNode) {
+        continue
+      }
+
+      ids.add(otherId)
+      expanded.push(otherNode)
+    }
+  }
+
+  const edges = collectVisibleEdgesForNodes(ids)
+
+  return {
+    nodes: expanded,
+    edges
+  }
+}
+
+const includeHubPreviewNeighborhood = (nodes, limit) => {
+  const hub = state.primaryHub
+  if (!hub) {
+    return nodes
+  }
+
+  const maxNodes = Math.max(1, Math.min(renderNodeBudget, limit))
+  const merged = [...nodes]
+  const ids = new Set(merged.map((node) => node.id))
+  const protectedIds = new Set()
+
+  if (!ids.has(hub.id)) {
+    if (merged.length < maxNodes) {
+      merged.push(hub)
+      ids.add(hub.id)
+    } else {
+      const replaceIndex = merged.findIndex((node) => node.id !== hub.id)
+      if (replaceIndex >= 0) {
+        ids.delete(merged[replaceIndex].id)
+        merged[replaceIndex] = hub
+        ids.add(hub.id)
+      }
+    }
+  }
+  protectedIds.add(hub.id)
+
+  const hubEdges = [...(state.visibleEdgeByNode.get(hub.id) ?? [])]
+    .filter((edge) => edge.target && (edge.source === hub.id || edge.target === hub.id))
+    .sort((left, right) => {
+      const byWeight = edgeWeight(right) - edgeWeight(left)
+      if (byWeight !== 0) return byWeight
+
+      const leftOtherId = left.source === hub.id ? left.target : left.source
+      const rightOtherId = right.source === hub.id ? right.target : right.source
+      const leftDegree = state.nodeDegrees.get(leftOtherId ?? '') ?? 0
+      const rightDegree = state.nodeDegrees.get(rightOtherId ?? '') ?? 0
+      if (leftDegree !== rightDegree) return rightDegree - leftDegree
+
+      return edgeIdentityKey(left).localeCompare(edgeIdentityKey(right))
+    })
+
+  for (let index = 0; index < hubEdges.length && merged.length < maxNodes; index += 1) {
+    const edge = hubEdges[index]
+    const otherId = edge.source === hub.id ? edge.target : edge.source
+    if (!otherId || ids.has(otherId)) {
+      continue
+    }
+
+    const otherNode = state.nodeById.get(otherId)
+    if (!otherNode) {
+      continue
+    }
+
+    if (merged.length < maxNodes) {
+      ids.add(otherId)
+      merged.push(otherNode)
+      protectedIds.add(otherId)
+      continue
+    }
+
+    const replaceIndex = (() => {
+      for (let cursor = merged.length - 1; cursor >= 0; cursor -= 1) {
+        const candidateId = merged[cursor]?.id
+        if (candidateId && !protectedIds.has(candidateId)) {
+          return cursor
+        }
+      }
+      return -1
+    })()
+    if (replaceIndex >= 0) {
+      const replacedId = merged[replaceIndex]?.id
+      if (replacedId) {
+        ids.delete(replacedId)
+      }
+      merged[replaceIndex] = otherNode
+      ids.add(otherId)
+      protectedIds.add(otherId)
+    }
+  }
+
+  return merged
+}
+
+const ensureHubNodesInRenderedSet = (nodes) => {
+  if (nodes.length === 0) {
+    return nodes
+  }
+
+  const maxNodes = Math.max(Math.min(renderNodeBudget, nodes.length), 1)
+  const ids = new Set(nodes.map((node) => node.id))
+  const hubs = rankedHubNodes()
+  const merged = [...nodes]
+
+  for (let index = 0; index < hubs.length; index += 1) {
+    const hub = hubs[index]
+    if (ids.has(hub.id)) {
+      continue
+    }
+
+    if (merged.length < maxNodes) {
+      merged.push(hub)
+      ids.add(hub.id)
+      continue
+    }
+
+    const replacementIndex = merged.findIndex((node) => !hubs.some((candidate) => candidate.id === node.id))
+    if (replacementIndex >= 0) {
+      ids.delete(merged[replacementIndex].id)
+      merged[replacementIndex] = hub
+      ids.add(hub.id)
+    }
+  }
+
+  return merged
 }
 
-const normalizeQuery = value => value.trim().toLowerCase()
+const zoomCapByNodeCount = (nodeCount) => {
+  if (state.groups.length > 0) return 512
+  if (nodeCount > 50000) return 5.4
+  if (nodeCount > 20000) return 4.8
+  if (nodeCount > 6000) return 4.2
+  if (nodeCount > 2000) return 4
+  return zoomRange.max
+}
 
-const localFilteredNodes = query =>
-  state.nodes.filter(node =>
-    node.title.toLowerCase().includes(query) ||
-    node.path.toLowerCase().includes(query) ||
-    node.tags.some(tag => tag.toLowerCase().includes(query))
-  )
+const currentZoomMax = () => {
+  const nodeCount = state.visibleNodes.length > 0 ? state.visibleNodes.length : state.nodes.length
+  return Math.max(zoomRange.min * 2, zoomCapByNodeCount(nodeCount))
+}
 
-const filteredNodes = () => {
-  const query = normalizeQuery(state.query)
-  if (!query) return state.nodes
-  if (state.contentFilter.query === query && state.contentFilter.ids instanceof Set) {
-    return state.nodes.filter(node => state.contentFilter.ids.has(node.id))
-  }
+const zoomFloorByNodeCount = (nodeCount) => {
+  if (nodeCount > massiveGraphNodeThreshold) return 0.018
+  if (nodeCount > largeGraphNodeThreshold) return 0.0032
+  if (nodeCount > 1000) return 0.001
+  return zoomRange.min
+}
 
-  return localFilteredNodes(query)
+const currentZoomMin = () => {
+  const nodeCount = state.visibleNodes.length > 0 ? state.visibleNodes.length : state.nodes.length
+  return Math.max(zoomRange.min, zoomFloorByNodeCount(nodeCount))
 }
 
-const recomputeVisibility = () => {
-  const nodes = filteredNodes()
-  const ids = new Set(nodes.map(node => node.id))
-  const edges = state.edges.filter(edge => ids.has(edge.source) && edge.target && ids.has(edge.target))
-  const limitedEdges = state.nodes.length > largeGraphNodeThreshold
-    ? [...edges]
-      .sort((left, right) => edgeWeight(right) - edgeWeight(left))
-      .slice(0, largeGraphEdgeRenderLimit)
-    : edges
+const clampScale = value => Math.max(currentZoomMin(), Math.min(currentZoomMax(), value))
+const isFiniteNumber = value => Number.isFinite(value)
+const isReasonableCoordinate = value => isFiniteNumber(value) && Math.abs(value) <= worldCoordinateLimit
+const clampTransformCoordinate = value => {
+  if (!isFiniteNumber(value)) return 0
+  if (value > transformCoordinateLimit) return transformCoordinateLimit
+  if (value < -transformCoordinateLimit) return -transformCoordinateLimit
+  return value
+}
 
-  state.visibleNodes = nodes
-  state.visibleEdges = limitedEdges
+const clearZoomTransition = () => {
+  state.zoomTransition.active = false
+  state.zoomTransition.targetScale = state.transform.scale
 }
 
-const edgeWeight = edge => Number.isFinite(edge.weight) ? Math.max(1, edge.weight) : 1
+const zoomTransitionLerp = (delta, source) => {
+  const normalizedDelta = Math.max(0, Math.min(1, delta / 32))
+  const base = zoomAnimationSlowLerp + (zoomAnimationFastLerp - zoomAnimationSlowLerp) * normalizedDelta
+  const sourceBoost = source === 'wheel' ? 1 : 1.25
+  return Math.max(0.08, Math.min(0.45, base * sourceBoost))
+}
 
-const clampScale = value => Math.max(zoomRange.min, Math.min(zoomRange.max, value))
+const applyZoomTransition = (delta) => {
+  if (!state.zoomTransition.active) {
+    return
+  }
+
+  const targetScale = clampScale(state.zoomTransition.targetScale)
+  const scaleDelta = targetScale - state.transform.scale
+  const targetX = clampTransformCoordinate(state.zoomTransition.screenX - state.zoomTransition.worldX * targetScale)
+  const targetY = clampTransformCoordinate(state.zoomTransition.screenY - state.zoomTransition.worldY * targetScale)
+  const scaleSettled = Math.abs(scaleDelta) <= zoomAnimationScaleSnap
+
+  if (scaleSettled) {
+    state.transform.scale = targetScale
+    state.transform.x = targetX
+    state.transform.y = targetY
+    clearZoomTransition()
+    return
+  }
+
+  const lerp = zoomTransitionLerp(delta, state.zoomTransition.source)
+  const nextScale = clampScale(state.transform.scale + scaleDelta * lerp)
+  state.transform.scale = nextScale
+  state.transform.x = clampTransformCoordinate(state.zoomTransition.screenX - state.zoomTransition.worldX * nextScale)
+  state.transform.y = clampTransformCoordinate(state.zoomTransition.screenY - state.zoomTransition.worldY * nextScale)
+  const settledX = Math.abs(targetX - state.transform.x) <= zoomAnimationPositionSnap
+  const settledY = Math.abs(targetY - state.transform.y) <= zoomAnimationPositionSnap
+  if (Math.abs(targetScale - nextScale) <= zoomAnimationScaleSnap && settledX && settledY) {
+    state.transform.scale = targetScale
+    state.transform.x = targetX
+    state.transform.y = targetY
+    clearZoomTransition()
+  }
+}
 
 const graphBounds = nodes => {
   if (nodes.length === 0) return null
@@ -133,7 +2136,7 @@ const graphBounds = nodes => {
   let maxY = Number.NEGATIVE_INFINITY
 
   nodes.forEach(node => {
-    const radius = nodeRadius(node)
+    const radius = baseNodeRadius(node)
     minX = Math.min(minX, node.x - radius)
     maxX = Math.max(maxX, node.x + radius)
     minY = Math.min(minY, node.y - radius)
@@ -150,45 +2153,237 @@ const graphBounds = nodes => {
   }
 }
 
-const fitView = (options = { useFiltered: true }) => {
+const fitScaleBiasByNodeCount = nodeCount => {
+  if (nodeCount <= 6) return 1.22
+  if (nodeCount <= 20) return 1.12
+  if (nodeCount <= 60) return 1.04
+  if (nodeCount <= 180) return 1
+  if (nodeCount <= 600) return 0.94
+  if (nodeCount <= 2000) return 0.82
+  if (nodeCount <= 6000) return 0.74
+  return 0.72
+}
+
+const autoFitScaleRangeByNodeCount = nodeCount => {
+  if (nodeCount <= 6) return { min: 0.4, max: 2.2 }
+  if (nodeCount <= 20) return { min: 0.34, max: 1.65 }
+  if (nodeCount <= 60) return { min: 0.25, max: 1.22 }
+  if (nodeCount <= 180) return { min: 0.18, max: 0.92 }
+  if (nodeCount <= 600) return { min: 0.12, max: 0.72 }
+  if (nodeCount <= 2000) return { min: 0.08, max: 0.52 }
+  if (nodeCount <= 6000) return { min: 0.08, max: 0.38 }
+  return { min: 0.0085, max: 0.36 }
+}
+
+const fitView = (options = { useFiltered: true, preferHubCenter: true }) => {
   const rect = canvas.getBoundingClientRect()
   const width = Math.max(rect.width, 320)
   const height = Math.max(rect.height, 320)
   const nodes = options.useFiltered ? filteredNodes() : state.nodes
-  const bounds = graphBounds(nodes)
+  const fitNodes = nodes
+  const bounds = graphBounds(fitNodes)
 
   if (!bounds) {
     state.transform = { x: width / 2, y: height / 2, scale: 1 }
+    clearZoomTransition()
+    state.offscreenFrameCount = 0
+    state.recoveringViewport = false
+    markRenderDirty()
     return
   }
 
-  const padding = 100
+  const paddingByNodeCount = nodeCount => {
+    if (nodeCount <= 6) return 28
+    if (nodeCount <= 20) return 44
+    if (nodeCount <= 60) return 68
+    if (nodeCount <= 180) return 86
+    if (nodeCount <= 600) return 110
+    if (nodeCount <= 2000) return 140
+    return 180
+  }
+  const padding = paddingByNodeCount(fitNodes.length)
   const scaleX = width / (bounds.width + padding * 2)
   const scaleY = height / (bounds.height + padding * 2)
-  const scale = clampScale(Math.min(scaleX, scaleY))
-  const centerX = (bounds.minX + bounds.maxX) / 2
-  const centerY = (bounds.minY + bounds.maxY) / 2
+  const fitScale = Math.min(scaleX, scaleY)
+  const biasedScale = clampScale(fitScale * fitScaleBiasByNodeCount(fitNodes.length))
+  const scaleRange = autoFitScaleRangeByNodeCount(fitNodes.length)
+  const baselineScale = clampScale(Math.min(scaleRange.max, Math.max(scaleRange.min, biasedScale)))
+  const resolvedScale = nodes.length > massiveGraphNodeThreshold
+    ? clampScale(Math.min(baselineScale, massiveAutoFitMacroScale))
+    : baselineScale
+  const hubCenter = options.preferHubCenter && isDominantHub(state.primaryHub, nodes.length) && nodes.some((node) => node.id === state.primaryHub.id)
+      ? state.primaryHub
+      : null
+  const centerX = hubCenter ? hubCenter.x : (bounds.minX + bounds.maxX) / 2
+  const centerY = hubCenter ? hubCenter.y : (bounds.minY + bounds.maxY) / 2
 
   state.transform = {
-    x: width / 2 - centerX * scale,
-    y: height / 2 - centerY * scale,
-    scale
+    x: clampTransformCoordinate(width / 2 - centerX * resolvedScale),
+    y: clampTransformCoordinate(height / 2 - centerY * resolvedScale),
+    scale: clampScale(resolvedScale)
+  }
+  clearZoomTransition()
+  state.offscreenFrameCount = 0
+  state.recoveringViewport = false
+  markRenderDirty()
+}
+
+const resetView = () => fitView({ useFiltered: false, preferHubCenter: false })
+
+const resetHierarchyFocus = () => {
+  state.leafFocusRootNodeId = null
+  state.hierarchyFocusGroupId = null
+  state.hierarchyFocusStack = []
+  state.hierarchyRevealFocusGroupId = null
+  state.hierarchyRevealBudget = 1
+}
+
+const focusPrimaryHub = () => {
+  const hub = state.primaryHub
+  if (!hub) {
+    fitView({ useFiltered: true, preferHubCenter: true })
+    return
+  }
+
+  const rect = canvas.getBoundingClientRect()
+  const width = Math.max(rect.width, 320)
+  const height = Math.max(rect.height, 320)
+  const targetScale = clampScale(Math.max(0.78, state.transform.scale))
+
+  state.transform = {
+    x: clampTransformCoordinate(width / 2 - hub.x * targetScale),
+    y: clampTransformCoordinate(height / 2 - hub.y * targetScale),
+    scale: targetScale
+  }
+  clearZoomTransition()
+  state.offscreenFrameCount = 0
+  markRenderDirty()
+}
+
+const childGraphFitScaleForGroup = (group, viewportWidth, viewportHeight) => {
+  const graphDiameter = Math.max(childGraphRenderRadius(group) * 2 * hierarchyChildGraphFitMargin, 1)
+  const available = Math.max(Math.min(viewportWidth, viewportHeight) - 96, 240)
+  return clampScale(available / graphDiameter)
+}
+
+const childGraphFitTransition = (node, group) => {
+  const rect = canvas.getBoundingClientRect()
+  const width = Math.max(rect.width, 320)
+  const height = Math.max(rect.height, 320)
+  const fitScale = childGraphFitScaleForGroup(group, width, height)
+  const nextScale = clampScale(Math.max(fitScale, state.transform.scale * 1.08, hierarchyMicroExitScale * 1.02))
+
+  return {
+    active: true,
+    source: 'group',
+    screenX: width / 2,
+    screenY: height / 2,
+    worldX: node.x,
+    worldY: node.y,
+    targetScale: nextScale
   }
 }
 
-const resetView = () => fitView({ useFiltered: false })
+const layoutDensityScaleForNodeCount = (nodeCount) => {
+  if (nodeCount > 50000) return 0.26
+  if (nodeCount > 20000) return 0.3
+  if (nodeCount > 6000) return 0.36
+  if (nodeCount > 2000) return 0.42
+  if (nodeCount > 600) return 0.5
+  if (nodeCount > 180) return 0.58
+  if (nodeCount > 60) return 0.68
+  if (nodeCount > 20) return 0.78
+  return 0.88
+}
+
+const createHierarchyGroups = (graph, densityScale) => {
+  const groupRows = Array.isArray(graph.groups) ? graph.groups : []
+
+  return groupRows.map(group => {
+    if (Array.isArray(group)) {
+      const [id, level, parentId, title, x, y, radius, segment, folderGroup, nodeIds, childGroupIds] = group
+      return {
+        id: typeof id === 'string' ? id : '',
+        level: Number.isFinite(level) ? level : 0,
+        parentId: typeof parentId === 'string' ? parentId : null,
+        title: typeof title === 'string' ? title : 'Group',
+        x: Number.isFinite(x) ? x * densityScale : 0,
+        y: Number.isFinite(y) ? y * densityScale : 0,
+        radius: Number.isFinite(radius) ? radius * densityScale : 120,
+        segment: typeof segment === 'string' ? segment : 'root',
+        group: typeof folderGroup === 'string' ? folderGroup : 'root',
+        nodeIds: Array.isArray(nodeIds) ? nodeIds.filter(nodeId => typeof nodeId === 'string') : [],
+        childGroupIds: Array.isArray(childGroupIds) ? childGroupIds.filter(groupId => typeof groupId === 'string') : []
+      }
+    }
+
+    return {
+      ...group,
+      id: typeof group.id === 'string' ? group.id : '',
+      level: Number.isFinite(group.level) ? group.level : 0,
+      parentId: typeof group.parentId === 'string' ? group.parentId : null,
+      title: typeof group.title === 'string' ? group.title : 'Group',
+      x: Number.isFinite(group.x) ? group.x * densityScale : 0,
+      y: Number.isFinite(group.y) ? group.y * densityScale : 0,
+      radius: Number.isFinite(group.radius) ? group.radius * densityScale : 120,
+      segment: typeof group.segment === 'string' ? group.segment : 'root',
+      group: typeof group.group === 'string' ? group.group : 'root',
+      nodeIds: Array.isArray(group.nodeIds) ? group.nodeIds.filter(nodeId => typeof nodeId === 'string') : [],
+      childGroupIds: Array.isArray(group.childGroupIds) ? group.childGroupIds.filter(groupId => typeof groupId === 'string') : []
+    }
+  }).filter(group => group.id)
+}
 
 const createLayout = graph => {
-  const nodes = graph.nodes.map(node => ({
-    ...node,
-    x: Number.isFinite(node.x) ? node.x : 0,
-    y: Number.isFinite(node.y) ? node.y : 0
-  }))
+  const nodeRows = Array.isArray(graph.nodes) ? graph.nodes : []
+  const edgeRows = Array.isArray(graph.edges) ? graph.edges : []
+  const densityScale = layoutDensityScaleForNodeCount(nodeRows.length)
+  const nodes = nodeRows.map(node => {
+    if (Array.isArray(node)) {
+      const [id, title, x, y, group, segment] = node
+      return {
+        id: typeof id === 'string' ? id : '',
+        title: typeof title === 'string' ? title : 'Untitled',
+        path: '',
+        tags: [],
+        group: typeof group === 'string' ? group : 'root',
+        segment: typeof segment === 'string' ? segment : 'root',
+        x: Number.isFinite(x) ? x * densityScale : 0,
+        y: Number.isFinite(y) ? y * densityScale : 0,
+        vx: 0,
+        vy: 0
+      }
+    }
+
+    return {
+      ...node,
+      path: typeof node.path === 'string' ? node.path : '',
+      tags: Array.isArray(node.tags) ? node.tags : [],
+      x: Number.isFinite(node.x) ? node.x * densityScale : 0,
+      y: Number.isFinite(node.y) ? node.y * densityScale : 0,
+      vx: Number.isFinite(node.vx) ? node.vx : 0,
+      vy: Number.isFinite(node.vy) ? node.vy : 0
+    }
+  })
   const nodeMap = new Map(nodes.map(node => [node.id, node]))
-  const edges = graph.edges
+  const groups = createHierarchyGroups(graph, densityScale)
+  const edges = edgeRows
+    .map(edge => {
+      if (Array.isArray(edge)) {
+        const [source, target, weight, priority] = edge
+        return {
+          source: typeof source === 'string' ? source : '',
+          target: typeof target === 'string' ? target : null,
+          targetTitle: '',
+          weight: Number.isFinite(weight) ? weight : 1,
+          priority: typeof priority === 'string' ? priority : 'normal'
+        }
+      }
+      return edge
+    })
     .filter(edge => edge.target && nodeMap.has(edge.source) && nodeMap.has(edge.target))
     .map(edge => ({ ...edge, sourceNode: nodeMap.get(edge.source), targetNode: nodeMap.get(edge.target) }))
-  return { nodes, edges }
+  return { nodes, edges, groups }
 }
 
 const encodeEntityTag = (value) => {
@@ -222,11 +2417,11 @@ const resetContentFilter = () => {
 
 const syncContentFilter = async (query, token) => {
   const response = await fetch(
-    '/api/graph-filter?q=' +
+      '/api/graph-filter?q=' +
       encodeURIComponent(query) +
       '&limit=' +
       encodeURIComponent(String(Math.max(state.nodes.length, 1))) +
-      agentQuery()
+      agentQuery('&')
   )
 
   if (!response.ok || token !== state.contentFilter.token) {
@@ -240,7 +2435,8 @@ const syncContentFilter = async (query, token) => {
   }
 
   state.contentFilter.query = query
-  state.contentFilter.ids = new Set(nodeIds)
+  const merged = new Set([...(state.contentFilter.ids instanceof Set ? state.contentFilter.ids : []), ...nodeIds])
+  state.contentFilter.ids = merged
   recomputeVisibility()
 }
 
@@ -261,28 +2457,59 @@ const scheduleContentFilterSync = () => {
     ids: state.contentFilter.ids,
     token,
     timer: setTimeout(() => {
+      if (state.filterWorker && state.filterReady) {
+        state.filterWorker.postMessage({
+          type: 'filter',
+          query,
+          token,
+          limit: Math.max(state.nodes.length, 1)
+        })
+      }
       syncContentFilter(query, token).catch(() => {})
     }, 180)
   }
 }
 
-const tick = delta => {
-  const nodes = state.visibleNodes
-  const edges = state.visibleEdges
-  if (nodes.length > 1200) {
+const tick = (delta, now) => {
+  const nodes = state.renderNodes.length > 0 ? state.renderNodes : state.visibleNodes
+  const edges = state.renderEdges.length > 0 ? state.renderEdges : state.visibleEdges
+  const shouldRunPhysics =
+    state.nodes.length <= 8000 &&
+    nodes.length <= 320 &&
+    state.transform.scale >= 0.08
+  if (!shouldRunPhysics) {
+    state.physicsRestFrames = 0
+    return
+  }
+  const isDragging = Boolean(state.pointer.dragNode)
+  const intervalMs = isDragging
+    ? physicsDragFrameIntervalMs
+    : state.nodes.length > largeGraphNodeThreshold
+      ? physicsLargeGraphIdleFrameIntervalMs
+      : physicsIdleFrameIntervalMs
+  if (!isDragging && state.physicsRestFrames >= 18) {
     return
   }
-  const strength = Math.min(delta / 16, 2)
+  const elapsedSincePhysics = now - state.lastPhysicsAt
+  if (elapsedSincePhysics < intervalMs) {
+    return
+  }
+  state.lastPhysicsAt = now
+  const strength = Math.min(Math.max(elapsedSincePhysics, delta, 16) / 16, physicsStepDeltaCapMs / 16)
 
   edges.forEach(edge => {
     const source = edge.sourceNode
     const target = edge.targetNode
+    source.vx = Number.isFinite(source.vx) ? source.vx : 0
+    source.vy = Number.isFinite(source.vy) ? source.vy : 0
+    target.vx = Number.isFinite(target.vx) ? target.vx : 0
+    target.vy = Number.isFinite(target.vy) ? target.vy : 0
     const dx = target.x - source.x
     const dy = target.y - source.y
     const distance = Math.max(Math.hypot(dx, dy), 1)
     const force = (distance - 150) * 0.002 * strength
-    const fx = dx * force
-    const fy = dy * force
+    const fx = (dx / distance) * force
+    const fy = (dy / distance) * force
     source.vx += fx
     source.vy += fy
     target.vx -= fx
@@ -293,6 +2520,10 @@ const tick = delta => {
     for (let j = i + 1; j < nodes.length; j += 1) {
       const a = nodes[i]
       const b = nodes[j]
+      a.vx = Number.isFinite(a.vx) ? a.vx : 0
+      a.vy = Number.isFinite(a.vy) ? a.vy : 0
+      b.vx = Number.isFinite(b.vx) ? b.vx : 0
+      b.vy = Number.isFinite(b.vy) ? b.vy : 0
       const dx = b.x - a.x
       const dy = b.y - a.y
       const distance = Math.max(Math.hypot(dx, dy), 1)
@@ -306,7 +2537,12 @@ const tick = delta => {
     }
   }
 
+  let kinetic = 0
   nodes.forEach(node => {
+    node.vx = Number.isFinite(node.vx) ? node.vx : 0
+    node.vy = Number.isFinite(node.vy) ? node.vy : 0
+    node.x = Number.isFinite(node.x) ? node.x : 0
+    node.y = Number.isFinite(node.y) ? node.y : 0
     if (state.pointer.dragNode === node) {
       node.vx = 0
       node.vy = 0
@@ -318,40 +2554,283 @@ const tick = delta => {
     node.vy *= 0.88
     node.x += node.vx * strength
     node.y += node.vy * strength
+    kinetic += Math.abs(node.vx) + Math.abs(node.vy)
   })
+  if (isDragging) {
+    state.physicsRestFrames = 0
+    return
+  }
+  const kineticFloor = Math.max(0.16, nodes.length * 0.01)
+  state.physicsRestFrames = kinetic <= kineticFloor
+    ? state.physicsRestFrames + 1
+    : 0
 }
 
 const worldPoint = event => {
   const rect = canvas.getBoundingClientRect()
-  return {
-    x: (event.clientX - rect.left - state.transform.x) / state.transform.scale,
-    y: (event.clientY - rect.top - state.transform.y) / state.transform.scale
+  return screenToWorldPoint(event.clientX - rect.left, event.clientY - rect.top)
+}
+
+const connectedNodeIdsFor = (nodeId) => {
+  const edges = state.visibleEdgeByNode.get(nodeId) ?? []
+  const ids = new Set()
+
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    if (!edge.target) continue
+    if (edge.source === nodeId) {
+      ids.add(edge.target)
+    } else if (edge.target === nodeId) {
+      ids.add(edge.source)
+    }
+  }
+
+  return ids
+}
+
+const applyDragNeighborhoodAdjustment = (dragNode, deltaX, deltaY) => {
+  if (!dragNode) return
+  if (!Number.isFinite(deltaX) || !Number.isFinite(deltaY)) return
+  if (Math.abs(deltaX) + Math.abs(deltaY) <= 0.001) return
+
+  const scale = Math.max(state.transform.scale, 0.0001)
+  const influenceRadius = Math.max(220, Math.min(920, 440 / scale))
+  const influenceRadiusSquared = influenceRadius * influenceRadius
+  const connectedIds = connectedNodeIdsFor(dragNode.id)
+  const candidates = state.renderNodes.length > 0 ? state.renderNodes : state.visibleNodes
+  let adjusted = 0
+
+  for (let index = 0; index < candidates.length && adjusted < dragNeighborhoodMaxAffected; index += 1) {
+    const node = candidates[index]
+    if (node.id === dragNode.id) continue
+
+    const isConnected = connectedIds.has(node.id)
+    const dx = node.x - dragNode.x
+    const dy = node.y - dragNode.y
+    const distanceSquared = dx * dx + dy * dy
+    const withinRadius = distanceSquared <= influenceRadiusSquared
+    if (!isConnected && !withinRadius) continue
+
+    const distance = Math.max(Math.sqrt(distanceSquared), 0.0001)
+    const proximity = withinRadius ? 1 - (distance / influenceRadius) : 0
+    const coupledStrength = isConnected ? 0.28 : 0.12
+    const influence = Math.min(0.46, coupledStrength + proximity * 0.34)
+    node.x += deltaX * influence
+    node.y += deltaY * influence
+    node.vx = (Number.isFinite(node.vx) ? node.vx : 0) + deltaX * influence * 0.06
+    node.vy = (Number.isFinite(node.vy) ? node.vy : 0) + deltaY * influence * 0.06
+    adjusted += 1
+  }
+}
+
+const settleNeighborhoodAroundNode = (dragNode) => {
+  if (!dragNode) return
+
+  const scale = Math.max(state.transform.scale, 0.0001)
+  const settleRadius = Math.max(240, Math.min(980, 520 / scale))
+  const settleRadiusSquared = settleRadius * settleRadius
+  const connectedIds = connectedNodeIdsFor(dragNode.id)
+  const candidates = (state.renderNodes.length > 0 ? state.renderNodes : state.visibleNodes)
+    .filter((node) => {
+      if (node.id === dragNode.id) return true
+      const dx = node.x - dragNode.x
+      const dy = node.y - dragNode.y
+      const distanceSquared = dx * dx + dy * dy
+      return connectedIds.has(node.id) || distanceSquared <= settleRadiusSquared
+    })
+    .slice(0, dragNeighborhoodMaxAffected)
+
+  if (candidates.length <= 1) return
+
+  for (let round = 0; round < dragSettleRounds; round += 1) {
+    for (let leftIndex = 0; leftIndex < candidates.length; leftIndex += 1) {
+      const left = candidates[leftIndex]
+      for (let rightIndex = leftIndex + 1; rightIndex < candidates.length; rightIndex += 1) {
+        const right = candidates[rightIndex]
+        const dx = right.x - left.x
+        const dy = right.y - left.y
+        const distance = Math.max(Math.hypot(dx, dy), 0.001)
+        const minDistance = baseNodeRadius(left) + baseNodeRadius(right) + 10
+        if (distance >= minDistance) continue
+
+        const push = (minDistance - distance) * 0.36
+        const ux = dx / distance
+        const uy = dy / distance
+        if (left.id !== dragNode.id) {
+          left.x -= ux * push
+          left.y -= uy * push
+        }
+        if (right.id !== dragNode.id) {
+          right.x += ux * push
+          right.y += uy * push
+        }
+      }
+    }
   }
 }
 
 const hitNode = point => {
-  if (state.nodes.length > largeGraphNodeThreshold && state.transform.scale < 0.55) {
+  computeRenderVisibility()
+  const hitScaleFloor = state.nodes.length > massiveGraphNodeThreshold
+    ? (state.renderNodes.some(node => node.isGroupNode) ? 0 : 0.2)
+    : state.nodes.length > largeGraphNodeThreshold
+      ? 0.34
+      : 0
+  if (state.transform.scale < hitScaleFloor) {
     return null
   }
 
-  const nodes = state.visibleNodes
+  const nodes = state.renderNodes
   for (let index = nodes.length - 1; index >= 0; index -= 1) {
     const node = nodes[index]
     const radius = nodeRadius(node)
-    if (Math.hypot(point.x - node.x, point.y - node.y) <= radius + 5) return node
+    const x = node.x
+    const y = node.y
+    if (Math.hypot(point.x - x, point.y - y) <= radius + 5) return node
   }
   return null
 }
 
-const nodeRadius = node => {
+const baseNodeRadius = node => {
+  if (node.isGroupNode && Number.isFinite(node.radius)) {
+    return node.radius
+  }
+  if (state.groups.length > 0 && !node.isGroupNode) {
+    return 4.8
+  }
   const degree = state.nodeDegrees.get(node.id) ?? 0
   return 9 + Math.min(degree, 8) * 1.6
 }
 
+const nodeRadius = node => Math.max(baseNodeRadius(node), minNodePixelRadius / Math.max(state.transform.scale, 0.0001))
+
+const worldViewportBounds = () => {
+  const width = Math.max(state.viewport.width, 320)
+  const height = Math.max(state.viewport.height, 320)
+  const paddingMultiplier =
+    state.nodes.length > massiveGraphNodeThreshold
+      ? (state.transform.scale >= 0.6 ? 2.8 : state.transform.scale >= 0.25 ? 2.35 : 1.9)
+      : state.nodes.length > largeGraphNodeThreshold
+        ? 1.45
+        : 1
+  const padding = viewportPaddingPx * paddingMultiplier
+
+  return {
+    minX: (-state.transform.x - padding) / state.transform.scale,
+    maxX: (width - state.transform.x + padding) / state.transform.scale,
+    minY: (-state.transform.y - padding) / state.transform.scale,
+    maxY: (height - state.transform.y + padding) / state.transform.scale
+  }
+}
+
+const isNodeInViewport = (node, viewport) =>
+  node.x >= viewport.minX &&
+  node.x <= viewport.maxX &&
+  node.y >= viewport.minY &&
+  node.y <= viewport.maxY
+
+const expandViewportBounds = (viewport, worldMargin) => ({
+  minX: viewport.minX - worldMargin,
+  maxX: viewport.maxX + worldMargin,
+  minY: viewport.minY - worldMargin,
+  maxY: viewport.maxY + worldMargin
+})
+
+const viewportNodeStride = () => {
+  if (state.nodes.length <= largeGraphNodeThreshold) {
+    return 1
+  }
+
+  if (state.transform.scale >= 0.95) {
+    return 1
+  }
+  if (state.transform.scale >= 0.7) {
+    return 2
+  }
+  if (state.transform.scale >= 0.48) {
+    return 3
+  }
+  if (state.transform.scale >= 0.28) {
+    return 5
+  }
+
+  return 8
+}
+
+const computeRenderVisibility = () => {
+  if (!hasValidTransform()) {
+    fitView({ useFiltered: true })
+  }
+  const viewport = worldViewportBounds()
+  const viewportKey =
+    Math.round(viewport.minX * 10) + ':' +
+    Math.round(viewport.maxX * 10) + ':' +
+    Math.round(viewport.minY * 10) + ':' +
+    Math.round(viewport.maxY * 10) + ':' +
+    visibilityScaleBucket(state.transform.scale)
+
+  if (!state.renderVisibilityDirty && viewportKey === state.lastViewportKey) {
+    return
+  }
+  state.lastViewportKey = viewportKey
+  state.renderVisibilityDirty = false
+
+  state.renderNodes = state.visibleNodes
+  state.renderEdges = state.visibleEdges.filter((edge) => edge.targetNode)
+}
+
+const isNodeVisibleOnScreen = (node, width, height) => {
+  const radius = nodeRadius(node) * state.transform.scale
+  const screenX = node.x * state.transform.scale + state.transform.x
+  const screenY = node.y * state.transform.scale + state.transform.y
+
+  return (
+    screenX + radius >= 0 &&
+    screenX - radius <= width &&
+    screenY + radius >= 0 &&
+    screenY - radius <= height
+  )
+}
+
+const hasValidTransform = () =>
+  isFiniteNumber(state.transform.x) &&
+  isFiniteNumber(state.transform.y) &&
+  isFiniteNumber(state.transform.scale) &&
+  Math.abs(state.transform.x) <= transformCoordinateLimit &&
+  Math.abs(state.transform.y) <= transformCoordinateLimit &&
+  state.transform.scale > 0
+
+const sanitizeNodePosition = node => {
+  if (!isReasonableCoordinate(node.x)) node.x = 0
+  if (!isReasonableCoordinate(node.y)) node.y = 0
+  if (!isFiniteNumber(node.vx) || Math.abs(node.vx) > worldCoordinateLimit) node.vx = 0
+  if (!isFiniteNumber(node.vy) || Math.abs(node.vy) > worldCoordinateLimit) node.vy = 0
+}
+
+const sanitizeAllNodePositions = () => {
+  state.nodes.forEach(sanitizeNodePosition)
+  state.visibleNodes.forEach(sanitizeNodePosition)
+}
+
+const sanitizeGraphState = () => {
+  state.renderNodes.forEach(sanitizeNodePosition)
+}
+
 const render = now => {
   const delta = now - state.last
   state.last = now
-  const minFrameIntervalMs = state.nodes.length > largeGraphNodeThreshold ? 180 : 16
+  const backgroundFrameIntervalMs =
+    state.nodes.length > massiveGraphNodeThreshold
+      ? (state.transform.scale < 0.035 ? 156 : state.transform.scale < 0.08 ? 128 : 98)
+      : state.nodes.length > largeGraphNodeThreshold
+        ? 72
+        : 18
+  const isInteracting =
+    state.pointer.down ||
+    state.renderVisibilityDirty ||
+    state.recoveringViewport ||
+    state.zoomTransition.active
+  const minFrameIntervalMs = isInteracting ? 16 : backgroundFrameIntervalMs
   if (delta < minFrameIntervalMs) {
     requestAnimationFrame(render)
     return
@@ -359,7 +2838,14 @@ const render = now => {
   const rect = canvas.getBoundingClientRect()
   const width = Math.max(rect.width, 320)
   const height = Math.max(rect.height, 320)
+  state.viewport = { width, height }
+  sanitizeGraphState()
+  if (!hasValidTransform()) {
+    resetView()
+  }
+  applyZoomTransition(delta)
   ctx.clearRect(0, 0, width, height)
+  webGlRenderer?.clear(width, height)
   if (state.nodes.length === 0) {
     ctx.fillStyle = '#99a5b5'
     ctx.font = '14px Inter, system-ui, sans-serif'
@@ -368,54 +2854,56 @@ const render = now => {
     requestAnimationFrame(render)
     return
   }
-  ctx.save()
-  ctx.translate(state.transform.x, state.transform.y)
-  ctx.scale(state.transform.scale, state.transform.scale)
 
-  tick(delta)
-  const drawEdges = !(state.nodes.length > largeGraphNodeThreshold && state.transform.scale < 0.22)
-  if (drawEdges) {
-    state.visibleEdges.forEach(edge => {
-    const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
-    ctx.beginPath()
-    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
-    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
-    ctx.strokeStyle = selectedEdge ? graphTheme.edgeActive : graphTheme.edge
-    ctx.lineWidth = (selectedEdge ? 1.8 : 1) + Math.min(edgeWeight(edge) - 1, 8) * 0.22
-    ctx.stroke()
-    })
+  computeRenderVisibility()
+  tick(delta, now)
+  const hasVisibleNodeOnScreen = state.renderNodes.some((node) => isNodeVisibleOnScreen(node, width, height))
+  const manualZoomGuardActive = now - state.lastManualZoomAt < zoomRecoveryGuardMs
+  const allowViewportAutoRecovery =
+    state.nodes.length <= massiveGraphNodeThreshold ||
+    state.transform.scale >= massiveOverviewScaleThreshold
+  if (allowViewportAutoRecovery && !hasVisibleNodeOnScreen && state.renderNodes.length > 0 && !manualZoomGuardActive) {
+    state.offscreenFrameCount += 1
+    if (state.offscreenFrameCount >= 22 && !state.recoveringViewport) {
+      state.recoveringViewport = true
+      fitView({ useFiltered: true })
+      state.offscreenFrameCount = 0
+      requestAnimationFrame(() => {
+        state.recoveringViewport = false
+      })
+    }
+  } else {
+    state.offscreenFrameCount = 0
   }
-
-  state.visibleNodes.forEach(node => {
-    const radius = nodeRadius(node)
-    const isSelected = state.selected?.id === node.id
-    const isHovered = state.hovered?.id === node.id
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
-    ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
-    ctx.fill()
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
-    ctx.fillStyle = isSelected ? graphTheme.nodeSelected : isHovered ? graphTheme.nodeHover : graphTheme.node
-    ctx.fill()
-    ctx.lineWidth = isSelected ? 2.6 : 1.5
-    ctx.strokeStyle = isSelected ? graphTheme.nodeStrokeActive : graphTheme.nodeStroke
-    ctx.stroke()
-
-    const shouldDrawLabels =
-      isSelected ||
-      isHovered ||
-      (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
-    if (shouldDrawLabels) {
-      ctx.fillStyle = graphTheme.label
-      ctx.font = '12px Inter, system-ui, sans-serif'
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'top'
-      ctx.fillText(node.title.slice(0, 34), node.x, node.y + radius + 8)
+  const minimumEdgeScale =
+    state.nodes.length > massiveGraphNodeThreshold
+      ? 0
+      : state.renderNodes.length > 1300
+        ? 0.12
+        : state.renderNodes.length > 900
+          ? 0.085
+          : state.renderNodes.length > 500
+            ? 0.05
+            : 0
+  const drawEdges = state.transform.scale >= minimumEdgeScale
+  if (drawAcceleratedGraph(width, height, drawEdges)) {
+    // WebGL handles the dense node/edge layer; the 2D canvas remains the interaction overlay.
+  } else {
+    ctx.save()
+    ctx.translate(state.transform.x, state.transform.y)
+    ctx.scale(state.transform.scale, state.transform.scale)
+    if (drawEdges) {
+      drawGraphEdges()
     }
-  })
-
-  ctx.restore()
+    drawGraphNodes()
+    ctx.restore()
+  }
+  if (state.renderNodes.length === 0) {
+    ctx.fillStyle = '#99a5b5'
+    ctx.font = '12px Inter, system-ui, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText('Move or zoom to reveal nearby notes', width / 2, height / 2)
+  }
   requestAnimationFrame(render)
 }
 
@@ -430,11 +2918,11 @@ const linkedNodes = node => {
     weight: edge.weight,
     priority: edge.priority
   } : null
-  const outgoing = state.graph.edges
+  const outgoing = state.edges
     .filter(edge => edge.source === node.id)
-    .map(edge => withEdgeMeta(edge.target ? nodeById.get(edge.target) : { title: edge.targetTitle + ' (unresolved)', path: 'Missing note' }, edge))
+    .map(edge => withEdgeMeta(edge.target ? nodeById.get(edge.target) : { title: (edge.targetTitle || 'Unknown') + ' (unresolved)', path: 'Missing note' }, edge))
     .filter(Boolean)
-  const incoming = state.graph.edges
+  const incoming = state.edges
     .filter(edge => edge.target === node.id)
     .map(edge => withEdgeMeta(nodeById.get(edge.source), edge))
     .filter(Boolean)
@@ -442,13 +2930,73 @@ const linkedNodes = node => {
   return { outgoing, incoming }
 }
 
+const linkedGroupsForGroupNode = groupNode => {
+  const group = state.groupById.get(groupNode.groupId)
+  if (!group) {
+    return { outgoing: [], incoming: [], internalEdgeCount: 0, externalEdgeCount: 0 }
+  }
+
+  const nodeIds = new Set(group.nodeIds)
+  const externalByGroup = new Map()
+  let internalEdgeCount = 0
+  let externalEdgeCount = 0
+
+  for (let index = 0; index < state.visibleEdges.length; index += 1) {
+    const edge = state.visibleEdges[index]
+    if (!edge.target) continue
+    const sourceInside = nodeIds.has(edge.source)
+    const targetInside = nodeIds.has(edge.target)
+    if (sourceInside && targetInside) {
+      internalEdgeCount += 1
+      continue
+    }
+    if (!sourceInside && !targetInside) continue
+
+    externalEdgeCount += 1
+    const externalNodeId = sourceInside ? edge.target : edge.source
+    const externalGroup = state.nodeLeafGroupById.get(externalNodeId)
+    const externalKey = externalGroup?.id ?? 'unknown'
+    const externalTitle = externalGroup?.title ?? (edge.targetTitle || 'Unknown group')
+    const direction = sourceInside ? 'outgoing' : 'incoming'
+    const current = externalByGroup.get(externalKey)
+
+    if (current) {
+      current.weight += edgeWeight(edge)
+      if (direction === 'outgoing') current.outgoing += 1
+      if (direction === 'incoming') current.incoming += 1
+      continue
+    }
+
+    externalByGroup.set(externalKey, {
+      id: '',
+      title: externalTitle,
+      path: 'Group relation - ' + direction,
+      weight: edgeWeight(edge),
+      priority: edge.priority || 'normal',
+      outgoing: direction === 'outgoing' ? 1 : 0,
+      incoming: direction === 'incoming' ? 1 : 0
+    })
+  }
+
+  const external = Array.from(externalByGroup.values())
+    .sort((left, right) => right.weight - left.weight || left.title.localeCompare(right.title))
+  const outgoing = external
+    .filter(item => item.outgoing > 0)
+    .slice(0, 18)
+  const incoming = external
+    .filter(item => item.incoming > 0)
+    .slice(0, 18)
+
+  return { outgoing, incoming, internalEdgeCount, externalEdgeCount }
+}
+
 const fetchNodeDetails = async node => {
   const cached = state.nodeDetails.get(node.id)
   if (cached) {
     return cached
   }
 
-  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(node.id) + agentQuery())
+  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(node.id) + agentQuery('&'))
   if (!response.ok) {
     throw new Error('Failed to load graph node details')
   }
@@ -462,19 +3010,65 @@ const fetchNodeDetails = async node => {
   return detail
 }
 
+const wait = async (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds))
+
+const openGroupDialog = groupNode => {
+  const group = state.groupById.get(groupNode.groupId)
+  if (!group) return
+
+  const groupLinks = linkedGroupsForGroupNode(groupNode)
+  const title = group.title || 'Group'
+  const groupType = group.childGroupIds.length > 0 ? 'Hierarchical group' : 'Leaf group'
+  const nodeCount = group.nodeIds.length
+  const childGroupCount = group.childGroupIds.length
+  const radius = Math.round(childGraphRenderRadius(group))
+
+  elements.contentTitle.textContent = title
+  elements.contentPath.textContent = groupType + ' - level ' + group.level
+  elements.contentTags.innerHTML = [
+    '<span>segment: ' + escapeHtml(group.segment || 'root') + '</span>',
+    '<span>cluster: ' + escapeHtml(group.group || 'root') + '</span>'
+  ].join('')
+  elements.contentOutgoing.innerHTML = list(groupLinks.outgoing)
+  elements.contentIncoming.innerHTML = list(groupLinks.incoming)
+  elements.contentBody.textContent = [
+    'Nodes: ' + nodeCount,
+    'Child groups: ' + childGroupCount,
+    'Internal links: ' + groupLinks.internalEdgeCount,
+    'External links: ' + groupLinks.externalEdgeCount,
+    'Render radius: ' + radius
+  ].join('\\n')
+  if (!elements.contentDialog.open) {
+    elements.contentDialog.show()
+  }
+}
+
 const openContentDialog = async node => {
   if (!node) return
-  const { outgoing, incoming } = linkedNodes(node)
-  elements.contentTitle.textContent = node.title
-  elements.contentPath.textContent = node.path
-  elements.contentTags.innerHTML = node.tags.length
+  if (node.isGroupNode) {
+    openGroupDialog(node)
+    return
+  }
+  elements.contentTitle.textContent = node.title || 'Loading...'
+  elements.contentPath.textContent = node.path || 'Loading...'
+  elements.contentTags.innerHTML = Array.isArray(node.tags) && node.tags.length
     ? node.tags.map(tag => '<span>#' + escapeHtml(tag) + '</span>').join('')
     : '<span>No tags</span>'
-  elements.contentOutgoing.innerHTML = list(outgoing)
-  elements.contentIncoming.innerHTML = list(incoming)
+  const initialLinks = linkedNodes(node)
+  elements.contentOutgoing.innerHTML = list(initialLinks.outgoing)
+  elements.contentIncoming.innerHTML = list(initialLinks.incoming)
   elements.contentBody.textContent = 'Loading note content...'
   if (!elements.contentDialog.open) {
-    elements.contentDialog.showModal()
+    elements.contentDialog.show()
+  }
+
+  const applyDetailToDialog = detail => {
+    elements.contentTitle.textContent = detail.title
+    elements.contentPath.textContent = detail.path
+    elements.contentTags.innerHTML = detail.tags.length
+      ? detail.tags.map(tag => '<span>#' + escapeHtml(tag) + '</span>').join('')
+      : '<span>No tags</span>'
+    elements.contentBody.textContent = detail.content
   }
 
   try {
@@ -482,13 +3076,102 @@ const openContentDialog = async node => {
     if (state.selected?.id !== node.id) {
       return
     }
-    elements.contentBody.textContent = detailedNode.content
+    applyDetailToDialog(detailedNode)
   } catch {
-    elements.contentBody.textContent = 'Unable to load note content.'
+    try {
+      await wait(120)
+      const retriedNode = await fetchNodeDetails(node)
+      if (state.selected?.id !== node.id) {
+        return
+      }
+      applyDetailToDialog(retriedNode)
+    } catch {
+      elements.contentBody.textContent = 'Unable to load note content.'
+    }
+  }
+}
+
+const expandGroupNode = node => {
+  if (!node?.isGroupNode) return
+  if (node?.isGroupNode) {
+    state.selected = node
+    const group = state.groupById.get(node.groupId)
+    state.zoomTransition = group ? childGraphFitTransition(node, group) : {
+      active: true,
+      source: 'group',
+      screenX: state.viewport.width / 2,
+      screenY: state.viewport.height / 2,
+      worldX: node.x,
+      worldY: node.y,
+      targetScale: clampScale(Math.max(state.transform.scale * 1.08, hierarchyMicroExitScale * 1.02))
+    }
+    state.lastZoomFocus = { x: node.x, y: node.y, at: performance.now() }
+    state.hierarchyFocusGroupId = node.groupId
+    if (group?.childGroupIds.length && state.hierarchyFocusStack.at(-1) !== group.id) {
+      state.hierarchyFocusStack = [...state.hierarchyFocusStack, group.id]
+    }
+    markRenderDirty()
+    return
+  }
+}
+
+const expandLeafNodeGraph = node => {
+  if (!node || node.isGroupNode) return
+  state.selected = node
+  state.leafFocusRootNodeId = node.id
+  state.zoomTransition = {
+    active: true,
+    source: 'group',
+    screenX: state.viewport.width / 2,
+    screenY: state.viewport.height / 2,
+    worldX: node.x,
+    worldY: node.y,
+    targetScale: clampScale(Math.max(state.transform.scale * 1.08, hierarchyMicroExitScale * 1.02))
+  }
+  state.lastZoomFocus = { x: node.x, y: node.y, at: performance.now() }
+  markRenderDirty()
+}
+const handleGroupNodePrimaryClick = node => {
+  if (!node?.isGroupNode) return
+  const alreadyFocused = state.selected?.isGroupNode && state.selected.groupId === node.groupId
+  if (alreadyFocused && !state.zoomTransition.active) {
+    selectNode(node, { openContent: true })
+    return
+  }
+  expandGroupNode(node)
+}
+
+const handleLeafNodePrimaryClick = node => {
+  if (!node || node.isGroupNode) return
+  const sameFocusedNode = state.leafFocusRootNodeId === node.id
+  if (!sameFocusedNode) {
+    expandLeafNodeGraph(node)
+    return
   }
+  selectNode(node, { openContent: true })
 }
 
 const selectNode = (node, options = { openContent: false }) => {
+  if (!node) {
+    state.leafFocusRootNodeId = null
+    state.selected = null
+    if (elements.contentDialog.open) {
+      elements.contentDialog.close()
+    }
+    markRenderDirty()
+    return
+  }
+
+  if (node?.isGroupNode) {
+    state.selected = node
+    if (options.openContent) {
+      openContentDialog(node).catch(() => {
+        elements.contentBody.textContent = 'Unable to load group details.'
+      })
+    }
+    markRenderDirty()
+    return
+  }
   state.selected = node
   if (node && options.openContent) {
     openContentDialog(node).catch(() => {
@@ -502,14 +3185,74 @@ const selectNodeById = id => {
   if (node) selectNode(node, { openContent: true })
 }
 
-const zoomAtPoint = (screenX, screenY, factor) => {
-  const nextScale = clampScale(state.transform.scale * factor)
-  if (nextScale === state.transform.scale) return
-  const worldX = (screenX - state.transform.x) / state.transform.scale
-  const worldY = (screenY - state.transform.y) / state.transform.scale
+const zoomAtPoint = (screenX, screenY, factor, source = 'generic') => {
+  state.lastManualZoomAt = performance.now()
+  const baseScale = state.transform.scale
+  const boundedFactor = source === 'wheel'
+    ? Math.max(wheelZoomInputFloorCap, Math.min(wheelZoomInputCeilCap, factor))
+    : factor
+  const nextScale = clampScale(baseScale * boundedFactor)
+  if (nextScale === baseScale) {
+    return
+  }
+  const worldPointAtCursor = resolveZoomAnchorWorldPoint(screenX, screenY)
+  const worldX = worldPointAtCursor.x
+  const worldY = worldPointAtCursor.y
+  state.lastZoomFocus = {
+    x: worldX,
+    y: worldY,
+    at: performance.now()
+  }
   state.transform.scale = nextScale
-  state.transform.x = screenX - worldX * nextScale
-  state.transform.y = screenY - worldY * nextScale
+  state.transform.x = clampTransformCoordinate(screenX - worldX * nextScale)
+  state.transform.y = clampTransformCoordinate(screenY - worldY * nextScale)
+  clearZoomTransition()
+  state.offscreenFrameCount = 0
+  markRenderDirty()
+}
+
+const wheelZoomFactor = event => {
+  const isModifierZoom = event.metaKey || event.ctrlKey
+  const deltaModeFactor = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 120 : 1
+  const normalizedDelta = event.deltaY * deltaModeFactor
+
+  if (!Number.isFinite(normalizedDelta) || Math.abs(normalizedDelta) <= 0.0001) {
+    return 1
+  }
+
+  const isZoomOut = normalizedDelta > 0
+  const currentScale = state.transform.scale
+  const zoomOutDamping = isZoomOut
+    ? (currentScale <= 0.03 ? 0.38 : currentScale <= 0.08 ? 0.52 : 0.68)
+    : 1
+  const sensitivity = wheelZoomExponent * (isModifierZoom ? wheelZoomModifierBoost : 1) * zoomOutDamping
+  const exponentCap = wheelZoomExponentCap * (isZoomOut ? 0.74 : 1)
+  const exponent = Math.max(
+    -exponentCap,
+    Math.min(exponentCap, -normalizedDelta * sensitivity)
+  )
+  const factor = Math.exp(exponent)
+  if (factor > 1) {
+    return Math.min(factor, wheelZoomInputCeilCap)
+  }
+  return Math.max(factor, wheelZoomInputFloorCap)
+}
+
+const handleWheelZoom = event => {
+  event.preventDefault()
+  const rect = canvas.getBoundingClientRect()
+  const rawCursorX = Number.isFinite(event.offsetX) ? event.offsetX : event.clientX - rect.left
+  const rawCursorY = Number.isFinite(event.offsetY) ? event.offsetY : event.clientY - rect.top
+  const cursorX = Math.max(0, Math.min(Math.max(rect.width, 320), rawCursorX))
+  const cursorY = Math.max(0, Math.min(Math.max(rect.height, 320), rawCursorY))
+  state.cursor = { x: event.clientX, y: event.clientY, inCanvas: true }
+  const factor = wheelZoomFactor(event)
+
+  if (!Number.isFinite(factor) || factor <= 0 || factor === 1) {
+    return
+  }
+
+  zoomAtPoint(cursorX, cursorY, factor, 'wheel')
 }
 
 const bindEvents = () => {
@@ -521,6 +3264,8 @@ const bindEvents = () => {
   })
   elements.agent.addEventListener('change', event => {
     state.agentId = event.target.value
+    writeStoredAgent(state.agentId)
+    syncAgentInUrl(state.agentId)
     state.selected = null
     state.nodeDetails = new Map()
     resetContentFilter()
@@ -532,18 +3277,20 @@ const bindEvents = () => {
   })
   elements.zoomIn.addEventListener('click', () => {
     const rect = canvas.getBoundingClientRect()
-    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.18)
+    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.055, 'button')
   })
   elements.zoomOut.addEventListener('click', () => {
     const rect = canvas.getBoundingClientRect()
-    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.84)
+    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.948, 'button')
   })
   if (elements.fit) {
     elements.fit.addEventListener('click', () => {
-      fitView({ useFiltered: true })
+      resetHierarchyFocus()
+      fitView({ useFiltered: true, preferHubCenter: false })
     })
   }
   elements.reset.addEventListener('click', () => {
+    resetHierarchyFocus()
     resetView()
   })
   elements.contentClose.addEventListener('click', () => elements.contentDialog.close())
@@ -555,27 +3302,48 @@ const bindEvents = () => {
     }
     if (event.target === elements.contentDialog) elements.contentDialog.close()
   })
-  canvas.addEventListener('wheel', event => {
-    event.preventDefault()
+  canvas.addEventListener('wheel', handleWheelZoom, { passive: false })
+  canvas.addEventListener('dblclick', event => {
+    const point = worldPoint(event)
+    const node = hitNode(point)
+    if (node) {
+      if (!node.isGroupNode) {
+        selectNode(node, { openContent: true })
+      }
+      return
+    }
+
     const rect = canvas.getBoundingClientRect()
     const cursorX = event.clientX - rect.left
     const cursorY = event.clientY - rect.top
-    const factor = event.deltaY < 0 ? 1.08 : 0.92
-    zoomAtPoint(cursorX, cursorY, factor)
-  }, { passive: false })
+    zoomAtPoint(cursorX, cursorY, 1.055)
+  })
   canvas.addEventListener('pointerdown', event => {
+    clearZoomTransition()
     const point = worldPoint(event)
     const node = hitNode(point)
     state.pointer = { x: event.clientX, y: event.clientY, down: true, dragNode: node, moved: false }
     if (node) {
       node.x = point.x
       node.y = point.y
+      markRenderDirty()
     }
     canvas.setPointerCapture(event.pointerId)
   })
   canvas.addEventListener('pointermove', event => {
     const point = worldPoint(event)
-    state.hovered = hitNode(point)
+    const now = performance.now()
+    const canHoverHitTest =
+      !(state.nodes.length > massiveGraphNodeThreshold && state.transform.scale < 0.06)
+    const shouldHitTest = canHoverHitTest &&
+      (state.pointer.down || now - state.lastHoverHitAt >= hoverHitTestIntervalMs)
+    if (shouldHitTest) {
+      state.hovered = hitNode(point)
+      state.lastHoverHitAt = now
+    } else if (!canHoverHitTest) {
+      state.hovered = null
+    }
+    state.cursor = { x: event.clientX, y: event.clientY, inCanvas: true }
     if (!state.pointer.down) return
     const dx = event.clientX - state.pointer.x
     const dy = event.clientY - state.pointer.y
@@ -583,36 +3351,85 @@ const bindEvents = () => {
     state.pointer.y = event.clientY
     state.pointer.moved = state.pointer.moved || Math.abs(dx) + Math.abs(dy) > 3
     if (state.pointer.dragNode) {
-      state.pointer.dragNode.x = point.x
-      state.pointer.dragNode.y = point.y
+      const dragNode = state.pointer.dragNode
+      const previousX = dragNode.x
+      const previousY = dragNode.y
+      dragNode.x = point.x
+      dragNode.y = point.y
+      applyDragNeighborhoodAdjustment(dragNode, dragNode.x - previousX, dragNode.y - previousY)
+      markRenderDirty()
       return
     }
     state.transform.x += dx
     state.transform.y += dy
+    state.transform.x = clampTransformCoordinate(state.transform.x)
+    state.transform.y = clampTransformCoordinate(state.transform.y)
+    state.offscreenFrameCount = 0
+    markRenderDirty()
   })
   canvas.addEventListener('pointerup', event => {
-    if (state.pointer.dragNode && !state.pointer.moved) selectNode(state.pointer.dragNode, { openContent: true })
-    if (!state.pointer.dragNode && !state.pointer.moved) selectNode(state.hovered, { openContent: true })
+    const draggedNode = state.pointer.dragNode
+    if (draggedNode && state.pointer.moved) {
+      settleNeighborhoodAroundNode(draggedNode)
+      markRenderDirty()
+    }
+    if (!state.pointer.moved) {
+      const clickedNode = draggedNode ?? state.hovered
+      selectNode(clickedNode, { openContent: true })
+    }
     state.pointer = { x: 0, y: 0, down: false, dragNode: null, moved: false }
     canvas.releasePointerCapture(event.pointerId)
   })
+  canvas.addEventListener('pointercancel', () => {
+    state.pointer = { x: 0, y: 0, down: false, dragNode: null, moved: false }
+  })
+  canvas.addEventListener('pointerenter', event => {
+    state.cursor = { x: event.clientX, y: event.clientY, inCanvas: true }
+  })
+  canvas.addEventListener('pointerleave', event => {
+    state.cursor = { x: event.clientX, y: event.clientY, inCanvas: false }
+  })
+  window.addEventListener('keydown', event => {
+    if (event.key === '+' || event.key === '=') {
+      event.preventDefault()
+      const rect = canvas.getBoundingClientRect()
+      zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.05)
+      return
+    }
+
+    if (event.key === '-' || event.key === '_') {
+      event.preventDefault()
+      const rect = canvas.getBoundingClientRect()
+      zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.952)
+      return
+    }
+
+    if (event.key === '0') {
+      event.preventDefault()
+      resetView()
+    }
+  })
 }
 
 const loadAgents = async () => {
   const response = await fetch('/api/agents')
   const payload = await response.json()
   const agents = Array.isArray(payload.agents) ? payload.agents : []
-  const currentExists = agents.some(agent => agent.id === state.agentId)
+  const preferredAgent = state.agentId || initialAgentFromUrl || readStoredAgent()
+  const currentExists = agents.some(agent => agent.id === preferredAgent)
   const selected = currentExists
-    ? state.agentId
+    ? preferredAgent
     : (agents.find(agent => agent.id === 'shared')?.id ?? agents[0]?.id ?? 'shared')
   const signature = JSON.stringify(agents.map(agent => [agent.id, agent.documentCount]))
 
   state.agentId = selected
+  writeStoredAgent(selected)
+  syncAgentInUrl(selected)
   if (signature !== state.agentsSignature) {
+    const formatAgentLabel = (agent) => agent.id
     elements.agent.innerHTML = agents.length
-      ? agents.map(agent => '<option value="' + escapeHtml(agent.id) + '">' + escapeHtml(agent.id) + ' · ' + agent.documentCount + '</option>').join('')
-      : '<option value="shared">shared · 0</option>'
+      ? agents.map(agent => '<option value="' + escapeHtml(agent.id) + '">' + escapeHtml(formatAgentLabel(agent)) + '</option>').join('')
+      : '<option value="shared">shared</option>'
     state.agentsSignature = signature
   }
   elements.agent.value = selected
@@ -633,6 +3450,10 @@ const loadGraph = async (options = { reset: false }) => {
 
   const payload = await response.json()
   const graph = payload?.layout ?? payload
+  state.graphTotals = {
+    nodes: Number.isFinite(payload?.totals?.nodes) ? payload.totals.nodes : (Array.isArray(graph.nodes) ? graph.nodes.length : 0),
+    edges: Number.isFinite(payload?.totals?.edges) ? payload.totals.edges : (Array.isArray(graph.edges) ? graph.edges.length : 0)
+  }
   const signature = payload?.signature ?? graphSignature(graph)
   if (!options.reset && signature === state.graphSignature) return
   const selectedId = state.selected?.id
@@ -640,6 +3461,16 @@ const loadGraph = async (options = { reset: false }) => {
   state.graphSignature = signature
   state.graph = graph
   state.nodes = layout.nodes
+  state.groups = layout.groups
+  state.leafFocusRootNodeId = null
+  state.hierarchyFocusGroupId = null
+  state.hierarchyFocusStack = []
+  state.hierarchyRevealFocusGroupId = null
+  state.hierarchyRevealBudget = 1
+  state.groupById = new Map(state.groups.map(group => [group.id, group]))
+  state.leafGroups = state.groups.filter(group => group.nodeIds.length > 0)
+  state.nodeLeafGroupById = new Map(state.leafGroups.flatMap(group => group.nodeIds.map(nodeId => [nodeId, group])))
+  state.nodeById = new Map(state.nodes.map((node) => [node.id, node]))
   state.edges = layout.edges
   state.nodeDegrees = state.edges.reduce((degrees, edge) => {
     degrees.set(edge.source, (degrees.get(edge.source) ?? 0) + edgeWeight(edge))
@@ -649,13 +3480,15 @@ const loadGraph = async (options = { reset: false }) => {
     return degrees
   }, new Map())
   state.nodeDetails = new Map()
+  pushNodesToFilterWorker()
   resetContentFilter()
+  sanitizeAllNodePositions()
   recomputeVisibility()
   scheduleContentFilterSync()
-  const tags = new Set(graph.nodes.flatMap(node => node.tags))
-  setGraphStatus(state.agentId + ' · ' + graph.nodes.length + ' notes · ' + graph.edges.length + ' links · live')
-  elements.nodeCount.textContent = graph.nodes.length
-  elements.edgeCount.textContent = graph.edges.length
+  const tags = new Set(state.nodes.flatMap(node => node.tags))
+  setGraphStatus(state.agentId + ' · ' + state.graphTotals.nodes + ' notes · ' + state.graphTotals.edges + ' links · live')
+  elements.nodeCount.textContent = state.graphTotals.nodes
+  elements.edgeCount.textContent = state.graphTotals.edges
   elements.tagCount.textContent = tags.size
   resize()
   if (options.reset) resetView()
@@ -667,6 +3500,7 @@ const loadGraph = async (options = { reset: false }) => {
 }
 
 bindEvents()
+initFilterWorker()
 requestAnimationFrame(() => {
   resize()
   resetView()