@andespindola/brainlink 0.1.0-beta.98 → 1.0.0

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

@@ -1,118 +1,26 @@
 export const createClientJs = () => `const canvas = document.getElementById('graph')
-const glCanvas = document.getElementById('graphGl')
-const ctx = canvas.getContext('2d')
-const largeGraphNodeThreshold = 4000
-const massiveGraphNodeThreshold = 20000
-const largeGraphEdgeRenderLimit = 120000
-const renderNodeBudget = 900
-const zoomedMassiveRenderNodeBudget = 2200
-const renderEdgeBudget = 2400
-const clusterActivationNodeThreshold = 600
-const clusterZoomThreshold = 0.18
-const macroGalaxyZoomThreshold = 0.012
-const macroGalaxyEnterHysteresis = 0.86
-const macroGalaxyExitHysteresis = 1.24
-const galaxyDiscoveryEnabled = false
-const massiveAutoFitMacroScale = 0.006
-const defaultMacroScale = 0.006
-const clusterCellPixelSize = 64
-const minNodePixelRadius = 2.3
-const viewportPaddingPx = 280
-const worldCoordinateLimit = 5_000_000
-const transformCoordinateLimit = 20_000_000
-const hoverHitTestIntervalMs = 64
-const ecosystemLevelNodeCap = 999
-const ecosystemActivationNodeThreshold = 1000
-const ecosystemClusterEdgeLimit = 520
-const ecosystemHubEdgeLimit = 120
-const ecosystemSiblingEdgeLimit = 180
-const ecosystemClusterScaleThreshold = 0.78
-const massiveEcosystemClusterScaleThreshold = 4.2
-const ecosystemSubgraphScaleThreshold = 0.18
-const ecosystemMicroScaleThreshold = 0.08
-const ecosystemFocusedParentLimit = 2
-const zoomRecoveryGuardMs = 4200
-const zoomCapTargetViewportShare = 0.72
-const meshEdgeScaleThreshold = 0.09
-const meshEdgeMinBudget = 140
-const meshEdgeMaxBudget = 1400
-const layeredCoreScaleThreshold = 0.55
-const dragNeighborhoodMaxAffected = 180
-const dragSettleRounds = 3
-const wheelZoomExponent = 0.0009
-const wheelZoomExponentCap = 0.035
-const wheelZoomModifierBoost = 1.08
-const state = {
-  graph: { nodes: [], edges: [] },
-  nodes: [],
-  nodeById: new Map(),
-  edges: [],
-  visibleNodes: [],
-  visibleEdges: [],
-  renderNodes: [],
-  renderEdges: [],
-  renderClusters: [],
-  renderClusterEdges: [],
-  nodeDegrees: new Map(),
-  selected: null,
-  hovered: null,
-  query: '',
-  contentFilter: { query: '', ids: null, token: 0, timer: null },
-  agentId: '',
-  agentsSignature: '',
-  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: '',
-  graphTotals: { nodes: 0, edges: 0 },
-  last: performance.now(),
-  offscreenFrameCount: 0,
-  recoveringViewport: false,
-  renderVisibilityDirty: true,
-  lastViewportKey: '',
-  visibleNodeSpatial: { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() },
-  visibleEdgeByNode: new Map(),
-  ecosystemClusters: [],
-  ecosystemClustersBySize: new Map(),
-  ecosystemNodeClusterBySize: new Map(),
-  ecosystemLevelSizes: [],
-  ecosystemExpansionLevels: [],
-  ecosystemBaseSize: ecosystemLevelNodeCap,
-  ecosystemHubCluster: null,
-  macroCenter: { x: 0, y: 0 },
-  macroRepresentative: null,
-  primaryHub: null,
-  hubNeighborDistance: Number.POSITIVE_INFINITY,
-  filterWorker: null,
-  filterReady: false,
-  lastHoverHitAt: 0,
-  lastManualZoomAt: 0,
-  lastZoomFocus: { x: 0, y: 0, at: 0 },
-  macroViewActive: false
-}
-
-const byId = id => document.getElementById(id)
-const escapeHtml = value => String(value)
-  .replaceAll('&', '&')
-  .replaceAll('<', '&lt;')
-  .replaceAll('>', '&gt;')
-  .replaceAll('"', '&quot;')
-  .replaceAll("'", '&#039;')
+let ctx2dFallback = null
+const byId = (id) => document.getElementById(id)
 const elements = {
   search: byId('search'),
   agent: byId('agent'),
+  context: byId('context'),
   nodeCount: byId('nodeCount'),
   edgeCount: byId('edgeCount'),
   tagCount: byId('tagCount'),
   zoomIn: byId('zoomIn'),
   zoomOut: byId('zoomOut'),
   fit: byId('fit'),
+  releaseNode: byId('releaseNode'),
   reset: byId('reset'),
+  labels: byId('graphLabels'),
+  tooltip: byId('graphTooltip'),
+  miniMap: byId('miniMap'),
   contentDialog: byId('contentDialog'),
   contentTitle: byId('contentTitle'),
   contentPath: byId('contentPath'),
+  contentFacts: byId('contentFacts'),
+  contentContextLinks: byId('contentContextLinks'),
   contentTags: byId('contentTags'),
   contentOutgoing: byId('contentOutgoing'),
   contentIncoming: byId('contentIncoming'),
@@ -120,22 +28,91 @@ const elements = {
   contentClose: byId('contentClose')
 }
 
+const state = {
+  camera: {
+    x: 0,
+    y: 0,
+    scale: 0.22
+  },
+  pointer: {
+    down: false,
+    moved: false,
+    dragging: false,
+    dragNodeId: '',
+    x: 0,
+    y: 0,
+    startX: 0,
+    startY: 0,
+    startWorldX: 0,
+    startWorldY: 0,
+    nodeStartX: 0,
+    nodeStartY: 0,
+    worldAnchorX: 0,
+    worldAnchorY: 0
+  },
+  viewport: {
+    width: 320,
+    height: 320,
+    ratio: window.devicePixelRatio || 1
+  },
+  workerReady: false,
+  rendererMode: 'worker',
+  renderWorker: null,
+  agentId: '',
+  contextId: '',
+  graphSignature: '',
+  graphMode: 'near',
+  nodePositionsSignature: '',
+  nodePositionsScope: '',
+  serverNodePositionsScope: '',
+  nodePositions: new Map(),
+  hoveredNodeId: '',
+  focusedNodeIds: new Set(),
+  spatialIndex: {
+    key: '',
+    cells: new Map()
+  },
+  miniMapView: null,
+  miniMapDirty: true,
+  overlayScheduled: false,
+  overlayIdleTimer: null,
+  chunk: {
+    nodes: [],
+    edges: []
+  },
+  selectedNodeId: null,
+  searchToken: 0,
+  searchTimer: null,
+  searchResultIds: new Set(),
+  fetchToken: 0,
+  fetchTimer: null,
+  fetchAbortController: null,
+  lastChunkRequestKey: '',
+  cameraSyncScheduled: false,
+  lastWheelAt: 0,
+  lastVisibleNodes: 0,
+  lastVisibleEdges: 0,
+  totals: {
+    nodes: 0,
+    edges: 0
+  }
+}
+
 const zoomRange = {
   min: 0.0002,
   max: 4.5
 }
 
-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 selectedContextStorageKey = 'brainlink:selected-context'
+const nodePositionsStoragePrefix = 'brainlink:graph-node-positions:'
+
+const escapeHtml = (value) => String(value)
+  .replaceAll('&', '&amp;')
+  .replaceAll('<', '&lt;')
+  .replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;')
+  .replaceAll("'", '&#039;')
 
 const readStoredAgent = () => {
   try {
@@ -156,3425 +133,1525 @@ const writeStoredAgent = (agentId) => {
   } catch {}
 }
 
-const syncAgentInUrl = (agentId) => {
+const readStoredContext = () => {
   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
+    const value = window.localStorage.getItem(selectedContextStorageKey)?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
 }
 
-const handleGraphRefreshError = error => {
-  console.error(error)
+const writeStoredContext = (contextId) => {
+  try {
+    if (!contextId) {
+      window.localStorage.removeItem(selectedContextStorageKey)
+      return
+    }
+    window.localStorage.setItem(selectedContextStorageKey, contextId)
+  } catch {}
 }
 
-const graphTheme = {
-  node: '#aeb8c5',
-  nodeSelected: '#f3f7fb',
-  nodeHover: '#cbd5e1',
-  nodeHalo: 'rgba(203, 213, 225, 0.14)',
-  nodeHaloActive: 'rgba(243, 247, 251, 0.2)',
-  nodeStroke: '#0d0f12',
-  nodeStrokeActive: '#ffffff',
-  edge: 'rgba(153, 165, 181, 0.16)',
-  edgeActive: 'rgba(226, 232, 240, 0.52)',
-  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 nodePositionsStorageKey = () => [
+  nodePositionsStoragePrefix,
+  state.graphSignature || 'unknown',
+  state.agentId || 'all-agents',
+  state.contextId || 'all-contexts'
+].join(':')
 
-const rgba = (color, alpha = 1) => {
-  const [red, green, blue] = parseRgb(color)
-  return [red, green, blue, Math.max(0, Math.min(1, alpha))]
-}
+const readStoredNodePositions = () => {
+  try {
+    const raw = window.localStorage.getItem(nodePositionsStorageKey())
+    const parsed = raw ? JSON.parse(raw) : []
+    if (!Array.isArray(parsed)) {
+      return new Map()
+    }
 
-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 new Map(parsed.flatMap((entry) => {
+      const id = typeof entry?.[0] === 'string' ? entry[0] : ''
+      const x = Number(entry?.[1])
+      const y = Number(entry?.[2])
+      return id && Number.isFinite(x) && Number.isFinite(y) ? [[id, { x, y }]] : []
+    }))
+  } catch {
+    return new Map()
   }
-  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 ensureNodePositionsLoaded = () => {
+  const storageKey = nodePositionsStorageKey()
+  if (!state.graphSignature || (state.nodePositionsSignature === state.graphSignature && state.nodePositionsScope === storageKey)) {
+    return
   }
 
-  const screenPoint = (node, ratioX, ratioY) => [
-    (node.x * state.transform.scale + state.transform.x) * ratioX,
-    (node.y * state.transform.scale + state.transform.y) * ratioY
-  ]
+  state.nodePositions = readStoredNodePositions()
+  state.nodePositionsSignature = state.graphSignature
+  state.nodePositionsScope = storageKey
+}
 
-  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]
+const writeStoredNodePositions = () => {
+  try {
+    if (!state.graphSignature) {
+      return
     }
 
-    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)
-    }
+    const entries = Array.from(state.nodePositions.entries())
+      .filter((entry) => Number.isFinite(entry[1]?.x) && Number.isFinite(entry[1]?.y))
+      .map((entry) => [entry[0], entry[1].x, entry[1].y])
 
-    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)
-  }
+    if (entries.length === 0) {
+      window.localStorage.removeItem(nodePositionsStorageKey())
+      return
+    }
 
-  return { clear, drawLines, drawPoints }
+    window.localStorage.setItem(nodePositionsStorageKey(), JSON.stringify(entries))
+  } catch {}
 }
 
-const webGlRenderer = createWebGlRenderer(glCanvas)
-
-const initFilterWorker = () => {
-  if (typeof Worker === 'undefined') {
-    return
-  }
+const clearStoredNodePositions = () => {
   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()
-      }
+    if (state.graphSignature) {
+      window.localStorage.removeItem(nodePositionsStorageKey())
     }
-    state.filterWorker = worker
-  } catch {
-    state.filterWorker = null
-    state.filterReady = false
+  } catch {}
+  state.nodePositions = new Map()
+  state.nodePositionsSignature = state.graphSignature
+  state.nodePositionsScope = nodePositionsStorageKey()
+}
+
+const graphViewStateQuery = () => {
+  const params = new URLSearchParams({ signature: state.graphSignature })
+  if (state.agentId) {
+    params.set('agent', state.agentId)
+  }
+  if (state.contextId) {
+    params.set('context', state.contextId)
   }
+  return params.toString()
 }
 
-const pushNodesToFilterWorker = () => {
-  if (!state.filterWorker || !state.filterReady) {
+const syncNodePositionsFromServer = async () => {
+  if (!state.graphSignature) {
+    return
+  }
+  const scope = nodePositionsStorageKey()
+  if (state.serverNodePositionsScope === scope) {
     return
   }
+  state.serverNodePositionsScope = scope
 
-  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 : []
+  try {
+    const response = await fetch('/api/graph-view-state?' + graphViewStateQuery())
+    if (!response.ok) {
+      return
+    }
+    const payload = await response.json()
+    const positions = Array.isArray(payload?.positions) ? payload.positions : []
+    if (positions.length === 0) {
+      return
+    }
+    state.nodePositions = new Map(positions.flatMap((position) => {
+      const id = typeof position?.id === 'string' ? position.id : ''
+      const x = Number(position?.x)
+      const y = Number(position?.y)
+      return id && Number.isFinite(x) && Number.isFinite(y) ? [[id, { x, y }]] : []
     }))
-  })
+    writeStoredNodePositions()
+  } catch {}
 }
 
-const resize = () => {
-  const rect = canvas.getBoundingClientRect()
-  const width = Math.max(rect.width, 320)
-  const height = Math.max(rect.height, 320)
-  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)
+const persistNodePositionsToServer = () => {
+  if (!state.graphSignature) {
+    return
   }
-  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 positions = Array.from(state.nodePositions.entries()).map(([id, position]) => ({
+    id,
+    x: position.x,
+    y: position.y
+  }))
 
-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
+  fetch('/api/graph-view-state?' + graphViewStateQuery(), {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ positions })
+  }).catch(() => {})
 }
 
-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)
+const clearNodePositionsOnServer = () => {
+  if (!state.graphSignature) {
+    return
   }
 
-  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)
+  fetch('/api/graph-view-state?' + graphViewStateQuery(), { method: 'DELETE' }).catch(() => {})
 }
 
-const withPersistentHubNodes = nodes => {
-  if (nodes.length === 0) {
-    return rankedHubNodes()
+const releaseSelectedNodePosition = () => {
+  if (!state.selectedNodeId || !state.nodePositions.has(state.selectedNodeId)) {
+    return
   }
 
-  const ids = new Set(nodes.map(node => node.id))
-  const hubsToKeep = rankedHubNodes().filter(node => !ids.has(node.id))
-  return nodes.concat(hubsToKeep)
+  state.nodePositions.delete(state.selectedNodeId)
+  writeStoredNodePositions()
+  persistNodePositionsToServer()
+  scheduleChunkFetch({ fit: false })
 }
 
-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 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 resolveMacroRepresentative = (nodes) => {
-  if (nodes.length === 0) {
-    return null
-  }
-
-  const hubCandidate = state.primaryHub && nodes.some(node => node.id === state.primaryHub.id)
-    ? state.primaryHub
-    : null
-  let best = hubCandidate ?? nodes[0]
-  let bestDegree = state.nodeDegrees.get(best.id) ?? 0
-
-  for (let index = 1; index < nodes.length; index += 1) {
-    const node = nodes[index]
-    const degree = state.nodeDegrees.get(node.id) ?? 0
-    if (degree > bestDegree) {
-      best = node
-      bestDegree = degree
+const syncContextInUrl = (contextId) => {
+  try {
+    const url = new URL(window.location.href)
+    if (contextId && contextId.trim().length > 0) {
+      url.searchParams.set('context', contextId)
+    } else {
+      url.searchParams.delete('context')
     }
-  }
-
-  return best
+    window.history.replaceState({}, '', url.toString())
+  } catch {}
 }
 
-const nearestHubNeighborDistance = (hub, nodes) => {
-  if (!hub || nodes.length <= 1) {
-    return Number.POSITIVE_INFINITY
+const initialAgentFromUrl = (() => {
+  try {
+    const raw = new URL(window.location.href).searchParams.get('agent')
+    const value = raw?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
   }
+})()
 
-  let minimum = Number.POSITIVE_INFINITY
-  for (let index = 0; index < nodes.length; index += 1) {
-    const node = nodes[index]
-    if (node.id === hub.id) continue
-    const distance = Math.hypot(node.x - hub.x, node.y - hub.y)
-    if (distance < minimum) {
-      minimum = distance
-    }
+const initialContextFromUrl = (() => {
+  try {
+    const raw = new URL(window.location.href).searchParams.get('context')
+    const value = raw?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
   }
+})()
 
-  return minimum
-}
-
-const isDominantHub = (hub, nodeCount = state.visibleNodes.length) => {
-  if (!hub || nodeCount <= 0) {
-    return false
+const scopeQuery = (separator = '?') => {
+  const params = new URLSearchParams()
+  if (state.agentId) {
+    params.set('agent', state.agentId)
+  }
+  if (state.contextId) {
+    params.set('context', state.contextId)
   }
+  const query = params.toString()
 
-  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
-  state.hubNeighborDistance = nearestHubNeighborDistance(primaryHub, nodes)
-  const bounds = graphBounds(nodes)
-  const macroHub = isDominantHub(primaryHub, nodes.length) ? primaryHub : null
-  state.macroCenter = bounds
-    ? {
-      x: macroHub ? macroHub.x : (bounds.minX + bounds.maxX) / 2,
-      y: macroHub ? macroHub.y : (bounds.minY + bounds.maxY) / 2
-    }
-    : { x: 0, y: 0 }
-  const ecosystemGraph = nodes.length > ecosystemActivationNodeThreshold
-    ? buildEcosystemGraph(nodes, state.macroCenter, primaryHub)
-    : {
-        clusters: [],
-        clustersBySize: new Map(),
-        nodeClusterBySize: new Map(),
-        levelSizes: [],
-        expansionLevels: [],
-        baseSize: ecosystemLevelNodeCap,
-        hubCluster: null
-      }
-  state.ecosystemClusters = ecosystemGraph.clusters
-  state.ecosystemClustersBySize = ecosystemGraph.clustersBySize
-  state.ecosystemNodeClusterBySize = ecosystemGraph.nodeClusterBySize
-  state.ecosystemLevelSizes = ecosystemGraph.levelSizes
-  state.ecosystemExpansionLevels = ecosystemGraph.expansionLevels
-  state.ecosystemBaseSize = ecosystemGraph.baseSize
-  state.ecosystemHubCluster = ecosystemGraph.hubCluster
-  state.macroRepresentative = resolveMacroRepresentative(nodes)
-  markRenderDirty()
+  return query ? separator + query : ''
 }
 
-const edgeWeight = edge => Number.isFinite(edge.weight) ? Math.max(1, edge.weight) : 1
-const markRenderDirty = () => {
-  state.renderVisibilityDirty = true
+const parseColor = (hex) => {
+  const normalized = String(hex || '#ffffff').replace('#', '')
+  const expanded = normalized.length === 3
+    ? normalized.split('').map((char) => char + char).join('')
+    : normalized.padEnd(6, 'f')
+  const value = Number.parseInt(expanded, 16)
+  return [
+    ((value >> 16) & 255) / 255,
+    ((value >> 8) & 255) / 255,
+    (value & 255) / 255,
+    1
+  ]
 }
 
-const createSpatialIndex = nodes => {
-  if (nodes.length === 0) {
-    return { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() }
-  }
+const graphTheme = {
+  node: parseColor('#5aa8ff'),
+  nodeCluster: parseColor('#3f7fbd'),
+  nodeHighlight: parseColor('#ffcb67'),
+  nodeSelected: parseColor('#edf4ff'),
+  nodePalette: [
+    parseColor('#5aa8ff'),
+    parseColor('#5ecf92'),
+    parseColor('#ffb65c'),
+    parseColor('#ff7dac'),
+    parseColor('#a88fff'),
+    parseColor('#59d0dd'),
+    parseColor('#ff8f6a'),
+    parseColor('#a4b3c3'),
+    parseColor('#c9945f'),
+    parseColor('#7cb6ff')
+  ],
+  edge: [0.59, 0.71, 0.83, 0.14],
+  edgeHeavy: [0.59, 0.71, 0.83, 0.3],
+  clear: parseColor('#08131d')
+}
+
+const segmentPalette = ['#5aa8ff', '#5ecf92', '#ffb65c', '#ff7dac', '#a88fff', '#59d0dd', '#ff8f6a', '#a4b3c3', '#c9945f', '#7cb6ff']
+
+const segmentColorIndex = (segment) => {
+  const value = String(segment || '')
+  let hash = 0
+  for (let index = 0; index < value.length; index += 1) {
+    hash = ((hash << 5) - hash + value.charCodeAt(index)) | 0
+  }
+  return Math.abs(hash) % segmentPalette.length
+}
+
+const segmentColor = (segment) => segmentPalette[segmentColorIndex(segment)] || segmentPalette[0]
+const nodeKind = (node) => node?.[6] === 'cluster' ? 'cluster' : 'node'
+const isRealGraphNode = (node) => nodeKind(node) === 'node'
+
+const clampScale = (scale) => Math.max(zoomRange.min, Math.min(zoomRange.max, scale))
+
+const getZoomNodeBudget = () => {
+  const scale = state.camera.scale
+  if (scale < 0.06) return 900
+  if (scale < 0.12) return 1600
+  if (scale < 0.24) return 2600
+  if (scale < 0.7) return 4000
+  return 6000
+}
+
+const getZoomEdgeBudget = () => {
+  const scale = state.camera.scale
+  if (scale < 0.06) return 2000
+  if (scale < 0.12) return 4800
+  if (scale < 0.24) return 9000
+  if (scale < 0.7) return 15000
+  return 26000
+}
+
+const zoomDetailBand = () => {
+  const scale = state.camera.scale
+  if (scale < 0.06) return 'far'
+  if (scale < 0.12) return 'wide'
+  if (scale < 0.24) return 'mid'
+  if (scale < 0.7) return 'near'
+  return 'detail'
+}
+
+const graphStreamRequestKey = ({ x, y, w, h }) => {
+  const grid = Math.max(80, Math.min(720, Math.max(w, h) / 6))
+  return [
+    state.agentId || '*',
+    state.contextId || '*',
+    zoomDetailBand(),
+    getZoomNodeBudget(),
+    getZoomEdgeBudget(),
+    Math.round(x / grid),
+    Math.round(y / grid),
+    Math.round(w / grid),
+    Math.round(h / grid)
+  ].join(':')
+}
+
+const screenToWorld = (screenX, screenY) => ({
+  x: (screenX - state.camera.x) / state.camera.scale,
+  y: (screenY - state.camera.y) / state.camera.scale
+})
 
-  const bounds = graphBounds(nodes)
-  if (!bounds) {
-    return { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() }
-  }
+const worldToScreen = (x, y) => ({
+  x: x * state.camera.scale + state.camera.x,
+  y: y * state.camera.scale + state.camera.y
+})
 
-  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()
+const spatialIndexKey = () => [
+  state.graphSignature,
+  state.camera.x.toFixed(1),
+  state.camera.y.toFixed(1),
+  state.camera.scale.toFixed(4),
+  normalizeList(state.chunk.nodes).length
+].join(':')
+
+const rebuildSpatialIndex = () => {
+  const key = spatialIndexKey()
+  if (state.spatialIndex.key === key) {
+    return
+  }
 
-  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)
+  const cellSize = 44
+  const cells = new Map()
+  normalizeList(state.chunk.nodes).forEach((node) => {
+    const id = typeof node?.[0] === 'string' ? node[0] : ''
+    if (!id) return
+    const x = Number(node?.[2])
+    const y = Number(node?.[3])
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return
+    const point = worldToScreen(x, y)
+    const cellX = Math.floor(point.x / cellSize)
+    const cellY = Math.floor(point.y / cellSize)
+    const key = cellX + ',' + cellY
+    const bucket = cells.get(key)
     if (bucket) {
       bucket.push(node)
-      continue
+      return
     }
-    buckets.set(key, [node])
-  }
+    cells.set(key, [node])
+  })
 
-  return {
-    cellSize,
-    minX: bounds.minX,
-    minY: bounds.minY,
-    maxX: bounds.maxX,
-    maxY: bounds.maxY,
-    buckets
-  }
+  state.spatialIndex = { key, cells }
 }
 
-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 spatialCandidates = (screenX, screenY) => {
+  rebuildSpatialIndex()
+  const cellSize = 44
+  const cellX = Math.floor(screenX / cellSize)
+  const cellY = Math.floor(screenY / 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)
-        }
-      }
+  for (let y = cellY - 1; y <= cellY + 1; y += 1) {
+    for (let x = cellX - 1; x <= cellX + 1; x += 1) {
+      nodes.push(...(state.spatialIndex.cells.get(x + ',' + y) ?? []))
     }
   }
 
   return nodes
 }
 
-const createVisibleEdgeLookup = edges => {
-  const lookup = new Map()
+const nodeByIdFromChunk = () => new Map(normalizeList(state.chunk.nodes).map((node) => [node[0], node]))
 
-  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 linkedNodeIds = (nodeId) => {
+  const ids = new Set(nodeId ? [nodeId] : [])
+  normalizeList(state.chunk.edges).forEach((edge) => {
+    if (edge?.[0] === nodeId && typeof edge?.[1] === 'string') ids.add(edge[1])
+    if (edge?.[1] === nodeId && typeof edge?.[0] === 'string') ids.add(edge[0])
+  })
+  return ids
+}
 
-    const targetList = lookup.get(edge.target)
-    if (targetList) {
-      targetList.push(edge)
-    } else {
-      lookup.set(edge.target, [edge])
-    }
+const setFocusedNodeIds = (ids) => {
+  state.focusedNodeIds = ids
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'focus', ids: Array.from(ids) })
   }
-
-  return lookup
+  updateGraphOverlays()
 }
 
-const ecosystemKeyForNode = node => {
-  if (typeof node.segment === 'string' && node.segment.trim()) {
-    return node.segment.trim()
+const drawFallback = () => {
+  if (state.rendererMode !== 'fallback') {
+    return
   }
-  if (typeof node.group === 'string' && node.group.trim()) {
-    return node.group.trim()
+  ctx2dFallback = ctx2dFallback ?? canvas.getContext('2d')
+  if (!ctx2dFallback) {
+    return
   }
-  const pathParts = String(node.path || '')
-    .split('/')
-    .filter(part => part.trim())
-    .slice(0, 2)
-  return pathParts.length > 0 ? pathParts.join('/') : 'root'
-}
+  const width = state.viewport.width
+  const height = state.viewport.height
+  const ratio = state.viewport.ratio
+  canvas.width = Math.floor(width * ratio)
+  canvas.height = Math.floor(height * ratio)
+  ctx2dFallback.setTransform(ratio, 0, 0, ratio, 0, 0)
+  ctx2dFallback.fillStyle = '#08131d'
+  ctx2dFallback.fillRect(0, 0, width, height)
 
-const compareNodesForEcosystem = (left, right) => {
-  const keyComparison = ecosystemKeyForNode(left).localeCompare(ecosystemKeyForNode(right))
-  if (keyComparison !== 0) return keyComparison
-  const leftDegree = state.nodeDegrees.get(left.id) ?? 0
-  const rightDegree = state.nodeDegrees.get(right.id) ?? 0
-  if (leftDegree !== rightDegree) return rightDegree - leftDegree
-  return String(left.title || left.id).localeCompare(String(right.title || right.id))
-}
+  const nodes = Array.isArray(state.chunk.nodes) ? state.chunk.nodes : []
+  const edges = Array.isArray(state.chunk.edges) ? state.chunk.edges : []
+  const nodeById = new Map()
+  for (let i = 0; i < nodes.length; i += 1) {
+    nodeById.set(nodes[i][0], nodes[i])
+  }
 
-const selectEcosystemRepresentative = nodes => {
-  let representative = nodes[0] ?? null
-  let representativeScore = Number.NEGATIVE_INFINITY
+  ctx2dFallback.strokeStyle = 'rgba(151,181,212,0.18)'
+  ctx2dFallback.lineWidth = 1
+  for (let i = 0; i < edges.length; i += 1) {
+    const edge = edges[i]
+    const source = nodeById.get(edge[0])
+    const target = nodeById.get(edge[1])
+    if (!source || !target) continue
+    const from = worldToScreen(source[2], source[3])
+    const to = worldToScreen(target[2], target[3])
+    ctx2dFallback.beginPath()
+    ctx2dFallback.moveTo(from.x, from.y)
+    ctx2dFallback.lineTo(to.x, to.y)
+    ctx2dFallback.stroke()
+  }
 
-  for (let index = 0; index < nodes.length; index += 1) {
-    const node = nodes[index]
-    const score = (state.nodeDegrees.get(node.id) ?? 0) + hubNodeScore(node) * 1000
-    if (score > representativeScore) {
-      representative = node
-      representativeScore = score
-    }
+  for (let i = 0; i < nodes.length; i += 1) {
+    const node = nodes[i]
+    const p = worldToScreen(node[2], node[3])
+    const selected = state.selectedNodeId === node[0]
+    const color = segmentColor(node[5] || node[4] || node[1])
+    const radius = Math.max(3.2, Math.min(16.5, 5 + node[7] * 0.65))
+
+    ctx2dFallback.beginPath()
+    ctx2dFallback.fillStyle = selected ? '#edf4ff' : color
+    ctx2dFallback.arc(p.x, p.y, radius, 0, Math.PI * 2)
+    ctx2dFallback.fill()
   }
 
-  return representative
+  ctx2dFallback.fillStyle = '#97a9bd'
+  ctx2dFallback.font = '12px Inter, system-ui, sans-serif'
+  ctx2dFallback.textAlign = 'center'
+  ctx2dFallback.fillText('Fallback canvas mode', Math.max(width, 320) / 2, 24)
 }
 
-const ecosystemLayoutSpacingForSize = size => {
-  if (size >= ecosystemLevelNodeCap) return 260
-  if (size >= 320) return 110
-  if (size >= 120) return 64
-  if (size >= 48) return 34
-  if (size >= 18) return 18
-  if (size >= 8) return 11
-  return 7
+const updateTotals = () => {
+  elements.nodeCount.textContent = String(state.totals.nodes)
+  elements.edgeCount.textContent = String(state.totals.edges)
 }
 
-const buildEcosystemLevelSizes = nodeCount => {
-  if (nodeCount <= 0) return []
-  const sizes = []
-  let currentSize = Math.max(1, Math.ceil(nodeCount / ecosystemLevelNodeCap))
-  while (currentSize >= 1) {
-    sizes.push(currentSize)
-    if (currentSize === 1) {
-      break
-    }
-    const nextSize = Math.max(1, Math.ceil(currentSize / ecosystemLevelNodeCap))
-    if (nextSize === currentSize) {
-      break
+const updateTagCount = () => {
+  elements.tagCount.textContent = state.graphMode === 'far' ? 'clusters' : state.graphMode
+}
+
+const updateWorkerCamera = () => {
+  updateGraphOverlays()
+  if (!state.renderWorker || !state.workerReady) {
+    return
+  }
+  if (state.cameraSyncScheduled) {
+    return
+  }
+  state.cameraSyncScheduled = true
+  requestAnimationFrame(() => {
+    state.cameraSyncScheduled = false
+    if (!state.renderWorker || !state.workerReady) {
+      return
     }
-    currentSize = nextSize
-  }
-  return sizes
-}
-
-const buildEcosystemExpansionLevels = (levelSizes, nodeCount) => {
-  if (levelSizes.length <= 1) {
-    return []
-  }
-  const maxScale = nodeCount > massiveGraphNodeThreshold
-    ? massiveEcosystemClusterScaleThreshold
-    : ecosystemClusterScaleThreshold
-  const startScale = 0.04
-  const transitionCount = levelSizes.length - 1
-  const usableScale = Math.max(0.08, maxScale - startScale)
-  const step = usableScale / transitionCount
-  const levels = []
-  for (let index = 0; index < transitionCount; index += 1) {
-    const start = startScale + step * index * 0.72
-    const end = Math.min(maxScale, start + step * 1.85)
-    levels.push({
-      parentSize: levelSizes[index],
-      childSize: levelSizes[index + 1],
-      start,
-      end
+    state.renderWorker.postMessage({
+      type: 'camera',
+      camera: state.camera
     })
-  }
-  return levels
+  })
 }
 
-const ecosystemCompactPoint = (index, total, center, spacing) => {
-  if (total <= 1) {
-    return { x: center.x, y: center.y }
-  }
-  const angle = index * 2.399963229728653
-  const radius = spacing * Math.sqrt(index + 1)
-  return {
-    x: center.x + Math.cos(angle) * radius,
-    y: center.y + Math.sin(angle) * radius
+const updateWorkerSize = () => {
+  updateGraphOverlays()
+  if (!state.renderWorker || !state.workerReady) {
+    return
   }
+  state.renderWorker.postMessage({
+    type: 'resize',
+    width: state.viewport.width,
+    height: state.viewport.height,
+    devicePixelRatio: state.viewport.ratio
+  })
 }
 
-const buildEcosystemCluster = (nodes, index, point) => {
-  const count = Math.max(nodes.length, 1)
-  const representative = selectEcosystemRepresentative(nodes)
+const normalizeList = (items) => Array.isArray(items) ? items : []
 
-  return {
-    id: 'ecosystem-' + index,
-    x: point.x,
-    y: point.y,
-    count,
-    nodeIds: nodes.map(node => node.id),
-    representative,
-    label: ecosystemKeyForNode(nodes[0] ?? representative ?? { path: '' })
-  }
-}
-
-const buildEcosystemHubCluster = (hub, center) => hub
-  ? {
-      id: 'ecosystem-hub',
-      x: center.x,
-      y: center.y,
-      count: 1,
-      size: 1,
-      nodeIds: [hub.id],
-      representative: hub,
-      label: hub.title || 'Memory Hub',
-      parentId: null,
-      parentX: null,
-      parentY: null,
-      isHub: true
-    }
-  : null
-
-const buildEcosystemLevel = (sortedNodes, size, parentLookup, center) => {
-  const clusters = []
-  const clusterByNodeId = new Map()
-  const parentChildIndex = new Map()
-
-  for (let offset = 0; offset < sortedNodes.length; offset += size) {
-    const clusterNodes = sortedNodes.slice(offset, offset + size)
-    const parentCluster = parentLookup?.get(clusterNodes[0]?.id)
-    const siblingIndex = parentCluster
-      ? (parentChildIndex.get(parentCluster.id) ?? 0)
-      : clusters.length
-    if (parentCluster) {
-      parentChildIndex.set(parentCluster.id, siblingIndex + 1)
-    }
-    const point = parentCluster
-      ? ecosystemCompactPoint(siblingIndex, Math.ceil((parentCluster.count || size) / size), parentCluster, ecosystemLayoutSpacingForSize(size))
-      : ecosystemCompactPoint(clusters.length, Math.ceil(sortedNodes.length / size), center, ecosystemLayoutSpacingForSize(size))
-    const cluster = {
-      ...buildEcosystemCluster(clusterNodes, clusters.length, point),
-      id: 'ecosystem-' + size + '-' + clusters.length,
-      size,
-      parentId: parentCluster?.id ?? null,
-      parentX: parentCluster?.x ?? null,
-      parentY: parentCluster?.y ?? null
-    }
-    clusters.push(cluster)
-    for (let index = 0; index < clusterNodes.length; index += 1) {
-      clusterByNodeId.set(clusterNodes[index].id, cluster)
-    }
+const applyManualNodePositions = (nodes) => normalizeList(nodes).map((node) => {
+  const id = typeof node?.[0] === 'string' ? node[0] : ''
+  const position = id ? state.nodePositions.get(id) : null
+  if (!position || !Number.isFinite(position.x) || !Number.isFinite(position.y)) {
+    return node
   }
 
-  return { clusters, clusterByNodeId }
-}
+  const next = [...node]
+  next[2] = position.x
+  next[3] = position.y
+  return next
+})
 
-const buildEcosystemGraph = (nodes, center, hub) => {
-  if (nodes.length === 0) {
-    return {
-      clusters: [],
-      clustersBySize: new Map(),
-      nodeClusterBySize: new Map(),
-      levelSizes: [],
-      expansionLevels: [],
-      baseSize: ecosystemLevelNodeCap,
-      hubCluster: null
-    }
+const updateNodePositionInChunk = (nodeId, x, y) => {
+  if (!nodeId || !Number.isFinite(x) || !Number.isFinite(y)) {
+    return
   }
 
-  const hubCluster = buildEcosystemHubCluster(hub, center)
-  const sortedNodes = nodes
-    .filter(node => node.id !== hub?.id)
-    .sort(compareNodesForEcosystem)
-  const levelSizes = buildEcosystemLevelSizes(sortedNodes.length)
-  const expansionLevels = buildEcosystemExpansionLevels(levelSizes, nodes.length)
-  const baseSize = levelSizes[0] ?? ecosystemLevelNodeCap
-  const clustersBySize = new Map()
-  const nodeClusterBySize = new Map()
-  let parentLookup = null
-
-  for (let index = 0; index < levelSizes.length; index += 1) {
-    const size = levelSizes[index]
-    const level = buildEcosystemLevel(sortedNodes, size, parentLookup, center)
-    clustersBySize.set(size, level.clusters)
-    nodeClusterBySize.set(size, level.clusterByNodeId)
-    parentLookup = level.clusterByNodeId
+  state.chunk = {
+    ...state.chunk,
+    nodes: normalizeList(state.chunk.nodes).map((node) => {
+      if (node?.[0] !== nodeId) {
+        return node
+      }
+      const next = [...node]
+      next[2] = x
+      next[3] = y
+      return next
+    })
   }
+  state.spatialIndex.key = ''
 
-  return {
-    clusters: clustersBySize.get(baseSize) ?? [],
-    clustersBySize,
-    nodeClusterBySize,
-    levelSizes,
-    expansionLevels,
-    baseSize,
-    hubCluster
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'move-node', id: nodeId, x, y })
   }
+  updateGraphOverlays()
 }
 
-const isClusterInViewport = (cluster, viewport) =>
-  cluster.x >= viewport.minX &&
-  cluster.x <= viewport.maxX &&
-  cluster.y >= viewport.minY &&
-  cluster.y <= viewport.maxY
+const focusNodeInViewport = (nodeId, nextScale = null) => {
+  const node = nodeByIdFromChunk().get(nodeId)
+  if (!node) {
+    return false
+  }
 
-const filterEcosystemClustersByViewport = (clusters, viewport) => {
-  const visible = clusters.filter(cluster => isClusterInViewport(cluster, viewport))
-  return visible.length > 0 ? visible : [...clusters]
-}
-
-const ecosystemFocusPoint = () => {
-  const cursorPoint = cursorWorldPoint()
-  if (cursorPoint) {
-    return cursorPoint
-  }
-  const now = performance.now()
-  if (now - state.lastZoomFocus.at <= 1800) {
-    return { x: state.lastZoomFocus.x, y: state.lastZoomFocus.y }
+  const x = Number(node[2])
+  const y = Number(node[3])
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return false
   }
-  return viewportCenterWorldPoint()
-}
-
-const nearestEcosystemParentIds = (clusters, focusPoint, limit) =>
-  clusters
-    .map(cluster => ({
-      cluster,
-      distance: Math.max(
-        0,
-        Math.hypot(cluster.x - focusPoint.x, cluster.y - focusPoint.y) -
-          clusterRadiusPx(cluster) / Math.max(state.transform.scale, 0.0001)
-      )
-    }))
-    .sort((left, right) => left.distance - right.distance)
-    .slice(0, limit)
-    .map(item => item.cluster.id)
-
-const smoothStep = value => {
-  const clamped = Math.max(0, Math.min(1, value))
-  return clamped * clamped * (3 - clamped * 2)
-}
-
-const zoomProgress = (scale, start, end) =>
-  smoothStep((scale - start) / Math.max(end - start, 0.0001))
 
-const semanticZoomSpread = (progress, childSize) => {
-  const curve = Math.pow(progress, 4.2)
-  if (childSize >= Math.ceil(ecosystemLevelNodeCap / 2)) {
-    return 0.12 + curve * 0.88
+  if (Number.isFinite(nextScale)) {
+    state.camera.scale = clampScale(Number(nextScale))
   }
-  return curve
+  state.camera.x = state.viewport.width / 2 - x * state.camera.scale
+  state.camera.y = state.viewport.height / 2 - y * state.camera.scale
+  updateWorkerCamera()
+  scheduleChunkFetch()
+  return true
 }
 
-const opacityForProgress = (progress, childSize) => {
-  const eased = Math.pow(progress, 2.1)
-  if (childSize >= Math.ceil(ecosystemLevelNodeCap / 2)) {
-    return 0.22 + eased * 0.78
+const showTooltip = (node, pointer) => {
+  if (!elements.tooltip || !node) {
+    return
   }
-  return eased
-}
 
-const expandFocusedClusters = (parentClusters, childSize, progress, spread, viewport) => {
-  const focusPoint = ecosystemFocusPoint()
-  const expandedParentIds = new Set(nearestEcosystemParentIds(
-    parentClusters,
-    focusPoint,
-    ecosystemFocusedParentLimit
-  ))
-  const childClusters = state.ecosystemClustersBySize.get(childSize) ?? []
-  const visibleChildClusters = childClusters
-    .filter(cluster => expandedParentIds.has(cluster.parentId))
-    .map(cluster => spreadChildClusterFromParent(cluster, childSize, progress, spread))
-    .filter(cluster => isClusterInViewport(cluster, viewport))
+  elements.tooltip.hidden = false
+  elements.tooltip.innerHTML =
+    '<strong>' + escapeHtml(node[1] || node[0]) + '</strong>' +
+    '<small>' + escapeHtml(node[4] || node[5] || '') + '</small>'
+  elements.tooltip.style.left = Math.min(state.viewport.width - 24, pointer.x + 14) + 'px'
+  elements.tooltip.style.top = Math.min(state.viewport.height - 24, pointer.y + 14) + 'px'
+}
 
-  return {
-    expandedParentIds,
-    childClusters: visibleChildClusters
+const hideTooltip = () => {
+  if (elements.tooltip) {
+    elements.tooltip.hidden = true
   }
 }
 
-const spreadChildClusterFromParent = (cluster, childSize, progress, spread) => {
-  if (!Number.isFinite(cluster.parentX) || !Number.isFinite(cluster.parentY)) {
-    return {
-      ...cluster,
-      lodOpacity: opacityForProgress(progress, childSize)
-    }
-  }
+const labelCandidates = () => {
+  const nodes = normalizeList(state.chunk.nodes)
+  const visible = nodes.filter((node) => {
+    const x = Number(node?.[2])
+    const y = Number(node?.[3])
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return false
+    const point = worldToScreen(x, y)
+    return point.x >= -80 && point.x <= state.viewport.width + 80 && point.y >= -80 && point.y <= state.viewport.height + 80
+  })
+  const shouldShowMany = state.camera.scale >= 0.72 || visible.length <= 120
+  const focused = state.focusedNodeIds
 
-  return {
-    ...cluster,
-    x: cluster.parentX + (cluster.x - cluster.parentX) * spread,
-    y: cluster.parentY + (cluster.y - cluster.parentY) * spread,
-    lodOpacity: opacityForProgress(progress, childSize)
-  }
+  return visible
+    .filter((node) => shouldShowMany || focused.has(node[0]) || node[0] === state.hoveredNodeId || node[0] === state.selectedNodeId || Number(node?.[7]) > 5.5)
+    .sort((left, right) => {
+      const leftFocused = focused.has(left[0]) || left[0] === state.hoveredNodeId || left[0] === state.selectedNodeId ? 1 : 0
+      const rightFocused = focused.has(right[0]) || right[0] === state.hoveredNodeId || right[0] === state.selectedNodeId ? 1 : 0
+      if (rightFocused !== leftFocused) return rightFocused - leftFocused
+      return Number(right?.[7] ?? 0) - Number(left?.[7] ?? 0)
+    })
+    .slice(0, state.camera.scale >= 0.72 ? 160 : 48)
 }
 
-const selectHierarchicalEcosystemClusters = viewport => {
-  const baseClusters = state.ecosystemClustersBySize.get(state.ecosystemBaseSize) ?? state.ecosystemClusters
-  const visibleBaseClusters = filterEcosystemClustersByViewport(baseClusters, viewport)
-  const hubClusters = state.ecosystemHubCluster ? [state.ecosystemHubCluster] : []
-  const visibleClusters = [...visibleBaseClusters]
-
-  for (let index = 0; index < state.ecosystemExpansionLevels.length; index += 1) {
-    const level = state.ecosystemExpansionLevels[index]
-    const parentClusters = visibleClusters.filter(cluster => cluster.size === level.parentSize)
-    if (parentClusters.length === 0) {
-      continue
-    }
-    const progress = zoomProgress(state.transform.scale, level.start, level.end)
-    const spread = semanticZoomSpread(progress, level.childSize)
-    const expansion = expandFocusedClusters(parentClusters, level.childSize, progress, spread, viewport)
-    visibleClusters.push(...expansion.childClusters)
+const drawLabels = () => {
+  if (!elements.labels) {
+    return
   }
 
-  return [...hubClusters, ...visibleClusters]
+  elements.labels.innerHTML = labelCandidates().map((node) => {
+    const point = worldToScreen(Number(node[2]), Number(node[3]))
+    const focused = state.focusedNodeIds.has(node[0]) || node[0] === state.hoveredNodeId || node[0] === state.selectedNodeId
+    return '<span class="graph-label' + (focused ? ' is-focused' : '') + '" style="left:' +
+      point.x.toFixed(1) + 'px;top:' + point.y.toFixed(1) + 'px">' + escapeHtml(node[1] || node[0]) + '</span>'
+  }).join('')
 }
 
-const ecosystemSiblingEdgesForClusters = (clusters, existingEdges) => {
-  const byParent = new Map()
-  for (let index = 0; index < clusters.length; index += 1) {
-    const cluster = clusters[index]
-    if (cluster.isHub || !cluster.parentId) {
-      continue
-    }
-    const siblings = byParent.get(cluster.parentId)
-    if (siblings) {
-      siblings.push(cluster)
-    } else {
-      byParent.set(cluster.parentId, [cluster])
-    }
+const drawMiniMap = () => {
+  const miniMap = elements.miniMap
+  if (!(miniMap instanceof HTMLCanvasElement)) {
+    return
   }
-
-  const edges = []
-  for (const siblings of byParent.values()) {
-    const ordered = [...siblings]
-      .sort((left, right) => Math.atan2(left.y - (left.parentY ?? 0), left.x - (left.parentX ?? 0)) - Math.atan2(right.y - (right.parentY ?? 0), right.x - (right.parentX ?? 0)))
-    for (let index = 0; index < ordered.length && edges.length < ecosystemSiblingEdgeLimit; index += 1) {
-      const sourceCluster = ordered[index]
-      const targetCluster = ordered[(index + 1) % ordered.length]
-      if (!targetCluster || sourceCluster.id === targetCluster.id) {
-        continue
-      }
-      const orderedIds = sourceCluster.id < targetCluster.id
-        ? [sourceCluster.id, targetCluster.id]
-        : [targetCluster.id, sourceCluster.id]
-      const key = orderedIds.join(':')
-      if (existingEdges.has(key)) {
-        continue
-      }
-      const edge = {
-        id: key,
-        sourceCluster,
-        targetCluster,
-        weight: 0.7,
-        inferred: true
-      }
-      existingEdges.set(key, edge)
-      edges.push(edge)
-    }
+  const nodes = normalizeList(state.chunk.nodes)
+  const ctx = miniMap.getContext('2d')
+  if (!ctx || nodes.length === 0) {
+    return
   }
 
-  return edges
+  const ratio = window.devicePixelRatio || 1
+  const width = miniMap.clientWidth || 180
+  const height = miniMap.clientHeight || 120
+  miniMap.width = Math.floor(width * ratio)
+  miniMap.height = Math.floor(height * ratio)
+  ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+  ctx.clearRect(0, 0, width, height)
+  ctx.fillStyle = 'rgba(8, 19, 29, 0.88)'
+  ctx.fillRect(0, 0, width, height)
+
+  const xs = nodes.map((node) => Number(node[2])).filter(Number.isFinite)
+  const ys = nodes.map((node) => Number(node[3])).filter(Number.isFinite)
+  const minX = Math.min(...xs)
+  const maxX = Math.max(...xs)
+  const minY = Math.min(...ys)
+  const maxY = Math.max(...ys)
+  const graphWidth = Math.max(1, maxX - minX)
+  const graphHeight = Math.max(1, maxY - minY)
+  const scale = Math.min((width - 18) / graphWidth, (height - 18) / graphHeight)
+  const offsetX = (width - graphWidth * scale) / 2
+  const offsetY = (height - graphHeight * scale) / 2
+  const toMini = (x, y) => ({
+    x: offsetX + (x - minX) * scale,
+    y: offsetY + (y - minY) * scale
+  })
+  state.miniMapView = { minX, minY, scale, offsetX, offsetY, width, height }
+
+  ctx.fillStyle = 'rgba(90, 168, 255, 0.62)'
+  nodes.forEach((node) => {
+    const point = toMini(Number(node[2]), Number(node[3]))
+    ctx.fillRect(point.x - 1, point.y - 1, 2, 2)
+  })
+
+  const worldTopLeft = screenToWorld(0, 0)
+  const worldBottomRight = screenToWorld(state.viewport.width, state.viewport.height)
+  const topLeft = toMini(Math.min(worldTopLeft.x, worldBottomRight.x), Math.min(worldTopLeft.y, worldBottomRight.y))
+  const bottomRight = toMini(Math.max(worldTopLeft.x, worldBottomRight.x), Math.max(worldTopLeft.y, worldBottomRight.y))
+  ctx.strokeStyle = 'rgba(90, 168, 255, 0.86)'
+  ctx.lineWidth = 1
+  ctx.strokeRect(topLeft.x, topLeft.y, Math.max(3, bottomRight.x - topLeft.x), Math.max(3, bottomRight.y - topLeft.y))
 }
 
-const ecosystemEdgesForClusters = clusters => {
-  const edgeClusters = clusters.filter(cluster => cluster.isHub || clusterOpacity(cluster) > 0.018)
-  const clusterById = new Map(edgeClusters.map(cluster => [cluster.id, cluster]))
-  const clusterIds = new Set(clusterById.keys())
-  const levelsBySize = []
-  for (let index = 0; index < edgeClusters.length; index += 1) {
-    const cluster = edgeClusters[index]
-    if (!cluster.size || cluster.isHub) continue
-    if (!levelsBySize.some(level => level.size === cluster.size)) {
-      levelsBySize.push({
-        size: cluster.size,
-        lookup: state.ecosystemNodeClusterBySize.get(cluster.size) ?? new Map()
-      })
-    }
+const shouldDeferGraphOverlays = () => state.pointer.down || performance.now() - state.lastWheelAt < 150
+
+const updateGraphOverlays = () => {
+  if (state.overlayScheduled) {
+    return
   }
-  levelsBySize.sort((left, right) => left.size - right.size)
-  const resolveClusterForNode = nodeId => {
-    if (state.ecosystemHubCluster?.nodeIds.includes(nodeId) && clusterIds.has(state.ecosystemHubCluster.id)) {
-      return state.ecosystemHubCluster
-    }
-    for (let index = 0; index < levelsBySize.length; index += 1) {
-      const lookup = levelsBySize[index].lookup
-      const cluster = lookup.get(nodeId)
-      if (cluster && clusterIds.has(cluster.id)) {
-        return clusterById.get(cluster.id) ?? cluster
+  state.overlayScheduled = true
+  requestAnimationFrame(() => {
+    state.overlayScheduled = false
+    if (shouldDeferGraphOverlays()) {
+      elements.labels?.classList.add('is-stale')
+      if (!state.overlayIdleTimer) {
+        state.overlayIdleTimer = setTimeout(() => {
+          state.overlayIdleTimer = null
+          updateGraphOverlays()
+        }, 170)
       }
+      return
     }
-    return null
-  }
-
-  const edgeByClusterPair = new Map()
-  for (let index = 0; index < state.visibleEdges.length; index += 1) {
-    const edge = state.visibleEdges[index]
-    const sourceCluster = resolveClusterForNode(edge.source)
-    const targetCluster = resolveClusterForNode(edge.target)
-    if (!sourceCluster || !targetCluster || sourceCluster.id === targetCluster.id) {
-      continue
-    }
-
-    const orderedIds = sourceCluster.id < targetCluster.id
-      ? [sourceCluster.id, targetCluster.id]
-      : [targetCluster.id, sourceCluster.id]
-    const key = orderedIds.join(':')
-    const current = edgeByClusterPair.get(key)
-    if (current) {
-      current.weight += edgeWeight(edge)
-      continue
+    elements.labels?.classList.remove('is-stale')
+    drawLabels()
+    if (state.miniMapDirty) {
+      drawMiniMap()
+      state.miniMapDirty = false
     }
+  })
+}
 
-    edgeByClusterPair.set(key, {
-      id: key,
-      sourceCluster,
-      targetCluster,
-      weight: edgeWeight(edge)
+const list = (items) => {
+  const rows = normalizeList(items)
+  if (rows.length === 0) {
+    return '<li><small>No links found.</small></li>'
+  }
+  return rows
+    .map((item) => {
+      const title = typeof item?.title === 'string' ? item.title : 'Untitled'
+      const id = typeof item?.id === 'string' ? item.id : ''
+      const path = typeof item?.path === 'string' ? item.path : ''
+      const meta = item?.weight ? ' · weight ' + escapeHtml(item.weight) + ' · ' + escapeHtml(item.priority || 'normal') : ''
+      return '<li>' +
+        (id ? '<button type="button" data-node-id="' + escapeHtml(id) + '">' + escapeHtml(title) + '</button>' : escapeHtml(title)) +
+        '<small>' + escapeHtml(path) + meta + '</small>' +
+        '</li>'
     })
-  }
-
-  ecosystemSiblingEdgesForClusters(edgeClusters, edgeByClusterPair)
-  const edges = Array.from(edgeByClusterPair.values())
-    .sort((left, right) => right.weight - left.weight)
-    .slice(0, ecosystemClusterEdgeLimit)
-  const hubCluster = state.ecosystemHubCluster && clusterIds.has(state.ecosystemHubCluster.id)
-    ? state.ecosystemHubCluster
-    : null
-  if (!hubCluster) {
-    return edges
-  }
-
-  const existingHubTargets = new Set(edges.flatMap(edge =>
-    edge.sourceCluster.id === hubCluster.id
-      ? [edge.targetCluster.id]
-      : edge.targetCluster.id === hubCluster.id
-        ? [edge.sourceCluster.id]
-        : []
-  ))
-  const syntheticHubEdges = edgeClusters
-    .filter(cluster => cluster.id !== hubCluster.id && !existingHubTargets.has(cluster.id))
-    .slice(0, ecosystemHubEdgeLimit)
-    .map(cluster => ({
-      id: hubCluster.id + ':' + cluster.id,
-      sourceCluster: hubCluster,
-      targetCluster: cluster,
-      weight: 1,
-      inferred: true
-    }))
-  return edges.concat(syntheticHubEdges)
+    .join('')
 }
 
-const edgeBudgetForCurrentFrame = () => {
-  const zoom = state.transform.scale
-  if (zoom < 0.12) return 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 buildFacts = (node, outgoingCount, incomingCount) => {
+  const content = typeof node?.content === 'string' ? node.content : ''
+  const words = content.trim().length > 0 ? content.trim().split(/\\s+/).length : 0
+  return [
+    { label: 'Agent', value: typeof node?.agentId === 'string' && node.agentId ? node.agentId : 'shared' },
+    { label: 'Words', value: String(words) },
+    { label: 'Chars', value: String(content.length) },
+    { label: 'Outgoing', value: String(outgoingCount) },
+    { label: 'Backlinks', value: String(incomingCount) }
+  ]
 }
 
-const clusterBudgetForScale = (scale) => {
-  if (scale < 0.008) return 90
-  if (scale < 0.014) return 150
-  if (scale < 0.022) return 240
-  if (scale < 0.035) return 360
-  return 520
-}
+const listFacts = (facts) => facts
+  .map((fact) => '<li><strong>' + escapeHtml(fact.label) + ':</strong> <small>' + escapeHtml(fact.value) + '</small></li>')
+  .join('')
 
-const nodeBudgetForScale = (scale) => {
-  if (scale < 0.035) return 220
-  if (scale < 0.06) return 360
-  if (scale < 0.09) return 520
-  if (scale < 0.14) return 720
-  if (state.visibleNodes.length > massiveGraphNodeThreshold) {
-    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
+const listContextLinks = (links) => {
+  if (!Array.isArray(links) || links.length === 0) {
+    return '<li><small>No context links found.</small></li>'
   }
-  return renderNodeBudget
+  return links
+    .map((link) => '<li><span>' + escapeHtml(link.title) + '</span><small>' + escapeHtml(link.priority || 'normal') + '</small></li>')
+    .join('')
 }
 
-const layerFocusForScale = (scale) => {
-  const normalized = Math.max(0, Math.min(1, (scale - 0.06) / 0.94))
-  const shellCenter = Math.max(0.08, 0.96 - normalized * 0.86)
-  const shellWidth = Math.max(0.24, 0.46 - normalized * 0.16)
-  const coreRadius = Math.max(0.06, 0.1 + normalized * 0.22)
-  const coreRatio = Math.max(0.2, Math.min(0.72, 0.24 + normalized * 0.48))
+const nodeContextLinks = (node, outgoing) => {
+  const titles = Array.isArray(node?.contextLinks) ? node.contextLinks : []
+  const outgoingByTitle = new Map(normalizeList(outgoing).map((link) => [String(link.title || '').toLowerCase(), link]))
 
-  return { shellCenter, shellWidth, coreRadius, coreRatio }
+  return titles
+    .map((title) => {
+      const match = outgoingByTitle.get(String(title).toLowerCase())
+      return {
+        title,
+        priority: match?.priority || 'normal'
+      }
+    })
+    .filter((link) => typeof link.title === 'string' && link.title.trim().length > 0)
 }
 
-const selectLayeredNodesForScale = (sourceNodes, targetCount) => {
-  const hub = state.primaryHub
-  if (!hub || sourceNodes.length <= 1200 || state.visibleNodes.length <= massiveGraphNodeThreshold) {
-    return sourceNodes
-  }
+const linkedNodes = (node) => {
+  const nodeById = new Map((state.chunk.nodes || []).map((item) => [item[0], item]))
+  const edges = normalizeList(state.chunk.edges)
 
-  let maxDistance = 0
-  const distances = sourceNodes.map((node) => {
-    const distance = Math.hypot(node.x - hub.x, node.y - hub.y)
-    if (distance > maxDistance) {
-      maxDistance = distance
+  const outgoing = []
+  const incoming = []
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    if (edge[0] === node.id) {
+      const target = nodeById.get(edge[1])
+      if (target) {
+        outgoing.push({ id: target[0], title: target[1], path: target[4] || '', weight: edge[2], priority: edge[3] })
+      }
+    }
+    if (edge[1] === node.id) {
+      const source = nodeById.get(edge[0])
+      if (source) {
+        incoming.push({ id: source[0], title: source[1], path: source[4] || '', weight: edge[2], priority: edge[3] })
+      }
     }
-    return { node, distance }
-  })
-
-  if (maxDistance <= 0.001) {
-    return sourceNodes
   }
 
-  const focus = layerFocusForScale(state.transform.scale)
-  const normalizedRows = distances.map((item) => ({
-    ...item,
-    normalized: item.distance / maxDistance
-  }))
-  const desired = Math.max(260, Math.min(sourceNodes.length, targetCount * 2))
-  const coreTarget = Math.max(36, Math.min(desired - 8, Math.floor(desired * focus.coreRatio)))
-  const shellTarget = Math.max(12, desired - coreTarget)
-  const shellHalf = focus.shellWidth / 2
+  return { outgoing, incoming }
+}
 
-  const coreNodes = normalizedRows
-    .filter((item) => item.normalized <= focus.coreRadius)
-    .sort((left, right) => {
-      const leftScore = state.nodeDegrees.get(left.node.id) ?? 0
-      const rightScore = state.nodeDegrees.get(right.node.id) ?? 0
-      if (leftScore !== rightScore) return rightScore - leftScore
-      return left.node.id.localeCompare(right.node.id)
-    })
-    .slice(0, coreTarget)
-    .map((item) => item.node)
+const openContentDialog = () => {
+  elements.contentDialog.hidden = false
+}
 
-  const shellNodes = normalizedRows
-    .sort((left, right) => {
-      const leftDelta = Math.abs(left.normalized - focus.shellCenter)
-      const rightDelta = Math.abs(right.normalized - focus.shellCenter)
-      const leftInside = leftDelta <= shellHalf ? 0 : 1
-      const rightInside = rightDelta <= shellHalf ? 0 : 1
-      if (leftInside !== rightInside) return leftInside - rightInside
-      if (leftDelta !== rightDelta) return leftDelta - rightDelta
-      const leftScore = state.nodeDegrees.get(left.node.id) ?? 0
-      const rightScore = state.nodeDegrees.get(right.node.id) ?? 0
-      if (leftScore !== rightScore) return rightScore - leftScore
-      return left.node.id.localeCompare(right.node.id)
-    })
-    .slice(0, shellTarget)
-    .map((item) => item.node)
+const closeContentDialog = () => {
+  elements.contentDialog.hidden = true
+}
 
-  const merged = []
-  const ids = new Set()
-  const pushUnique = (node) => {
-    if (!node || ids.has(node.id)) return
-    ids.add(node.id)
-    merged.push(node)
+const loadNodeDetails = async (nodeId) => {
+  if (!nodeId) {
+    return
   }
 
-  if (state.transform.scale >= layeredCoreScaleThreshold) {
-    pushUnique(hub)
+  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(nodeId) + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load graph node details')
   }
-  for (let index = 0; index < coreNodes.length; index += 1) pushUnique(coreNodes[index])
-  for (let index = 0; index < shellNodes.length; index += 1) pushUnique(shellNodes[index])
-
-  return merged.length > 0 ? merged : sourceNodes
-}
 
-const viewportCenterWorldPoint = () => {
-  const viewport = worldViewportBounds()
-  return {
-    x: (viewport.minX + viewport.maxX) / 2,
-    y: (viewport.minY + viewport.maxY) / 2
+  const payload = await response.json()
+  if (!payload || typeof payload !== 'object' || !payload.node) {
+    throw new Error('Invalid graph node payload')
   }
-}
 
-const screenToWorldPoint = (screenX, screenY) => ({
-  x: (screenX - state.transform.x) / state.transform.scale,
-  y: (screenY - state.transform.y) / state.transform.scale
-})
+  const node = payload.node
+  state.selectedNodeId = node.id
+  setFocusedNodeIds(linkedNodeIds(node.id))
 
-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
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'select', id: node.id })
   }
-  return screenToWorldPoint(screenX, screenY)
-}
 
-const visibilityScaleBucket = (scale) => {
-  const safeScale = Math.max(zoomRange.min, scale)
-  if (safeScale < 0.01) return Math.round(safeScale * 300_000)
-  if (safeScale < 0.05) return Math.round(safeScale * 120_000)
-  if (safeScale < 0.2) return Math.round(safeScale * 40_000)
-  return Math.round(safeScale * 8_000)
-}
+  elements.contentTitle.textContent = node.title || 'Untitled'
+  elements.contentPath.textContent = node.path || ''
 
-const shouldRenderMacroGalaxyView = () => {
-  if (!galaxyDiscoveryEnabled) {
-    state.macroViewActive = false
-    return false
-  }
-  if (state.visibleNodes.length <= 1) {
-    state.macroViewActive = false
-    return false
-  }
+  const tags = Array.isArray(node.tags) ? node.tags : []
+  elements.contentTags.innerHTML = tags.length > 0
+    ? tags.map((tag) => '<span>' + escapeHtml(tag) + '</span>').join('')
+    : '<span>No tags</span>'
+
+  const related = linkedNodes(node)
+  const contextLinks = nodeContextLinks(node, related.outgoing)
+  const facts = buildFacts(node, related.outgoing.length, related.incoming.length)
+  elements.contentFacts.innerHTML = listFacts(facts)
+  elements.contentContextLinks.innerHTML = listContextLinks(contextLinks)
+  elements.contentOutgoing.innerHTML = list(related.outgoing)
+  elements.contentIncoming.innerHTML = list(related.incoming)
+  elements.contentBody.textContent = typeof node.content === 'string' ? node.content : ''
 
-  const enterThreshold = macroGalaxyZoomThreshold * macroGalaxyEnterHysteresis
-  const exitThreshold = macroGalaxyZoomThreshold * macroGalaxyExitHysteresis
-  const shouldRender = state.macroViewActive
-    ? state.transform.scale <= exitThreshold
-    : state.transform.scale <= enterThreshold
-  state.macroViewActive = shouldRender
-  return shouldRender
+  openContentDialog()
 }
 
-const mergeUniqueNodes = (leftNodes, rightNodes, limit) => {
-  const merged = []
-  const ids = new Set()
+const fitFromChunk = () => {
+  const nodes = normalizeList(state.chunk.nodes)
+  if (nodes.length === 0) {
+    return
+  }
 
-  const push = (node) => {
-    if (!node || ids.has(node.id) || merged.length >= limit) {
-      return
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const x = Number(node[2])
+    const y = Number(node[3])
+    if (!Number.isFinite(x) || !Number.isFinite(y)) {
+      continue
     }
-    ids.add(node.id)
-    merged.push(node)
+    if (x < minX) minX = x
+    if (y < minY) minY = y
+    if (x > maxX) maxX = x
+    if (y > maxY) maxY = y
   }
 
-  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])
+  if (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
+    return
   }
 
-  return merged
-}
+  const width = Math.max(1, maxX - minX)
+  const height = Math.max(1, maxY - minY)
+  const scaleX = state.viewport.width / width
+  const scaleY = state.viewport.height / height
+  const scale = clampScale(Math.min(scaleX, scaleY) * 0.72)
+
+  state.camera.scale = scale
+  state.camera.x = state.viewport.width / 2 - (minX + width / 2) * scale
+  state.camera.y = state.viewport.height / 2 - (minY + height / 2) * scale
+  updateWorkerCamera()
+}
+
+const fetchChunk = async ({ fit } = { fit: false }) => {
+  const token = ++state.fetchToken
+  if (state.fetchAbortController) {
+    state.fetchAbortController.abort()
+  }
+  const controller = new AbortController()
+  state.fetchAbortController = controller
+  const worldTopLeft = screenToWorld(0, 0)
+  const worldBottomRight = screenToWorld(state.viewport.width, state.viewport.height)
+  const x = Math.min(worldTopLeft.x, worldBottomRight.x)
+  const y = Math.min(worldTopLeft.y, worldBottomRight.y)
+  const w = Math.abs(worldBottomRight.x - worldTopLeft.x)
+  const h = Math.abs(worldBottomRight.y - worldTopLeft.y)
+
+  const params = new URLSearchParams({
+    x: String(x),
+    y: String(y),
+    w: String(Math.max(1, w)),
+    h: String(Math.max(1, h)),
+    scale: String(state.camera.scale),
+    nodeBudget: String(getZoomNodeBudget()),
+    edgeBudget: String(getZoomEdgeBudget())
+  })
 
-const selectStableSampleNodes = (sourceNodes, limit) => {
-  if (sourceNodes.length <= limit) {
-    return sourceNodes
+  if (state.agentId) {
+    params.set('agent', state.agentId)
   }
-
-  const now = performance.now()
-  const cursorPoint = cursorWorldPoint()
-  const recentZoomFocus =
-    now - state.lastZoomFocus.at <= 1500
-      ? { x: state.lastZoomFocus.x, y: state.lastZoomFocus.y }
-      : null
-  const anchor = cursorPoint ?? recentZoomFocus ?? 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 selectAccessBridgeNodes = (sourceNodes, limit) => {
-  if (limit <= 0 || sourceNodes.length === 0) {
-    return []
+  if (state.contextId) {
+    params.set('context', state.contextId)
   }
 
-  const now = performance.now()
-  const cursorPoint = cursorWorldPoint()
-  const recentZoomFocus =
-    now - state.lastZoomFocus.at <= 1200
-      ? { x: state.lastZoomFocus.x, y: state.lastZoomFocus.y }
-      : null
-  const anchor = cursorPoint ?? recentZoomFocus ?? viewportCenterWorldPoint()
-  return [...sourceNodes]
-    .sort((left, right) => {
-      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 (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 requestKey = graphStreamRequestKey({ x, y, w, h })
+  if (!fit && state.lastChunkRequestKey === requestKey && state.chunk.nodes.length > 0) {
+    return
   }
 
-  const selectedId = state.selected?.id
-  if (selectedId && (edge.source === selectedId || edge.target === selectedId)) {
-    score += 120
+  const response = await fetch('/api/graph-stream?' + params.toString(), { signal: controller.signal })
+  if (!response.ok) {
+    throw new Error('Failed to fetch graph stream chunk')
   }
 
-  const hoveredId = state.hovered?.id
-  if (hoveredId && (edge.source === hoveredId || edge.target === hoveredId)) {
-    score += 70
+  const chunk = await response.json()
+  if (controller.signal.aborted) {
+    return
+  }
+  if (token !== state.fetchToken) {
+    return
   }
 
-  const hubId = state.primaryHub?.id
-  if (hubId && (edge.source === hubId || edge.target === hubId)) {
-    score += 42
+  state.graphSignature = typeof chunk.signature === 'string' ? chunk.signature : ''
+  state.lastChunkRequestKey = requestKey
+  ensureNodePositionsLoaded()
+  await syncNodePositionsFromServer()
+  state.graphMode = typeof chunk.mode === 'string' ? chunk.mode : 'near'
+  const chunkNodes = applyManualNodePositions(chunk.nodes)
+  state.chunk = {
+    nodes: chunkNodes,
+    edges: normalizeList(chunk.edges)
+  }
+  state.miniMapDirty = true
+  state.spatialIndex.key = ''
+  const renderChunk = { ...chunk, nodes: chunkNodes }
+  state.totals = {
+    nodes: Number.isFinite(chunk?.totals?.nodes) ? Number(chunk.totals.nodes) : state.chunk.nodes.length,
+    edges: Number.isFinite(chunk?.totals?.edges) ? Number(chunk.totals.edges) : state.chunk.edges.length
   }
 
-  return score
-}
+  updateTotals()
+  updateTagCount()
 
-const collectVisibleEdgesForNodes = nodeIds => {
-  if (nodeIds.size === 0) {
-    return []
+  if (fit) {
+    fitFromChunk()
   }
 
-  const seen = new Set()
-  const candidates = []
-  const limit = 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
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'chunk', chunk: renderChunk })
+    state.renderWorker.postMessage({ type: 'select', id: state.selectedNodeId })
+    state.renderWorker.postMessage({ type: 'highlight', ids: Array.from(state.searchResultIds) })
+  }
 
-      seen.add(key)
-      candidates.push(edge)
-    }
-  })
+  updateGraphOverlays()
+  drawFallback()
+}
 
-  if (candidates.length <= limit) {
-    return candidates
+const scheduleChunkFetch = ({ fit } = { fit: false }) => {
+  if (state.fetchTimer) {
+    clearTimeout(state.fetchTimer)
   }
 
-  return candidates
-    .sort((left, right) => {
-      const scoreDelta = edgeRelevanceScore(right) - edgeRelevanceScore(left)
-      if (scoreDelta !== 0) {
-        return scoreDelta
+  const now = performance.now()
+  const recentlyWheeling = now - state.lastWheelAt < 320
+  const heavyScene = state.lastVisibleNodes > 1200 || state.lastVisibleEdges > 3500
+  const delay = fit ? 0 : (state.pointer.down ? 320 : (recentlyWheeling ? (heavyScene ? 420 : 300) : (heavyScene ? 120 : 72)))
+  state.fetchTimer = setTimeout(() => {
+    state.fetchTimer = null
+    fetchChunk({ fit }).catch((error) => {
+      if (error && error.name === 'AbortError') {
+        return
       }
-      const leftKey = edgeIdentityKey(left)
-      const rightKey = edgeIdentityKey(right)
-      return leftKey.localeCompare(rightKey)
+      console.error(error)
     })
-    .slice(0, limit)
+  }, delay)
 }
 
-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 setViewportFromCanvas = () => {
+  const rect = canvas.getBoundingClientRect()
+  state.viewport.width = Math.max(320, rect.width)
+  state.viewport.height = Math.max(320, rect.height)
+  state.viewport.ratio = window.devicePixelRatio || 1
+  state.miniMapDirty = true
+  updateWorkerSize()
+  drawFallback()
 }
 
-const edgeStrokeFor = (edge, selectedEdge) => {
-  if (selectedEdge) {
-    return graphTheme.edgeActive
+const pickFallbackNode = (screenX, screenY) => {
+  const nodes = spatialCandidates(screenX, screenY)
+  if (nodes.length === 0) {
+    return null
   }
 
-  const opacity = edgeOpacityForScale(edge, state.transform.scale)
-  return edge.inferred
-    ? 'rgba(203, 213, 225, ' + opacity + ')'
-    : 'rgba(153, 165, 181, ' + opacity + ')'
-}
-
-const edgeWidthFor = (edge, selectedEdge) => {
-  if (edge.inferred) {
-    return selectedEdge ? 1.22 : 0.84
+  let bestNode = null
+  let bestDistance = Infinity
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const id = typeof node[0] === 'string' ? node[0] : ''
+    if (!id) continue
+    const x = Number(node[2])
+    const y = Number(node[3])
+    const weight = Number(node[7])
+    if (!Number.isFinite(x) || !Number.isFinite(y)) continue
+    const point = worldToScreen(x, y)
+    const radius = Math.max(3.2, Math.min(16.5, 5 + (Number.isFinite(weight) ? weight : 0) * 0.65))
+    const distance = Math.hypot(screenX - point.x, screenY - point.y)
+    if (distance <= radius && distance < bestDistance) {
+      bestDistance = distance
+      bestNode = node
+    }
   }
 
-  return (selectedEdge ? 1.9 : 1.05) + Math.min(edgeWeight(edge) - 1, 8) * 0.24
+  return bestNode
 }
 
-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 pickFallbackNodeId = (screenX, screenY) => {
+  const node = pickFallbackNode(screenX, screenY)
+  return typeof node?.[0] === 'string' ? node[0] : ''
 }
 
-const drawEdgeBatch = (edges, options) => {
-  if (edges.length === 0) {
+const handlePickedNode = (node) => {
+  const nodeId = typeof node?.id === 'string' ? node.id : typeof node?.[0] === 'string' ? node[0] : ''
+  if (!nodeId) {
     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)
+  const kind = typeof node?.kind === 'string' ? node.kind : nodeKind(node)
+  if (kind === 'cluster') {
+    const currentScale = state.camera.scale
+    const targetScale = currentScale < 0.22 ? 0.28 : Math.min(1.1, currentScale * 1.6)
+    focusNodeInViewport(nodeId, targetScale)
+    return
   }
-  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)
+  loadNodeDetails(nodeId).catch((error) => console.error(error))
 }
 
-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)
-      })
+const pickAt = (screenX, screenY) => {
+  if (state.rendererMode === 'fallback') {
+    const node = pickFallbackNode(screenX, screenY)
+    if (node) {
+      handlePickedNode(node)
     }
+    return
   }
 
-  edgeBatches.forEach((batch) => drawEdgeBatch(batch.edges, batch.options))
-
-  for (let index = 0; index < selectedEdges.length; index += 1) {
-    drawGraphEdge(selectedEdges[index])
+  if (!state.renderWorker || !state.workerReady) {
+    return
   }
-}
-
-const shouldDrawNodeLabels = (node, isSelected, isHovered) =>
-  isSelected ||
-  isHovered ||
-  (state.nodes.length > largeGraphNodeThreshold && state.transform.scale >= 0.62 && state.renderNodes.length <= 1200) ||
-  (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
 
-const drawSingleNode = (node, options = { drawLabel: true }) => {
-  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 requestId = Math.random().toString(36).slice(2)
+  state.renderWorker.postMessage({
+    type: 'pick',
+    requestId,
+    x: screenX,
+    y: screenY
+  })
+}
 
-  if (options.drawLabel && shouldDrawNodeLabels(node, isSelected, isHovered)) {
-    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 zoomAtPoint = (screenX, screenY, factor) => {
+  const clamped = Math.max(0.92, Math.min(1.09, factor))
+  const before = screenToWorld(screenX, screenY)
+  state.camera.scale = clampScale(state.camera.scale * clamped)
+  state.camera.x = screenX - before.x * state.camera.scale
+  state.camera.y = screenY - before.y * state.camera.scale
+  updateWorkerCamera()
+  scheduleChunkFetch()
 }
 
-const drawNodeBatch = (nodes) => {
-  if (nodes.length === 0) {
-    return
-  }
+const resolvePointer = (event) => {
+  const rect = canvas.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  }
+}
+
+const setupInput = () => {
+  const dragActivationDistance = 6
+  const resetPointerState = (pointerId = null) => {
+    state.pointer.down = false
+    state.pointer.dragging = false
+    state.pointer.dragNodeId = ''
+    canvas.classList.remove('is-node-dragging')
+    if (pointerId !== null) {
+      try {
+        if (canvas.hasPointerCapture(pointerId)) {
+          canvas.releasePointerCapture(pointerId)
+        }
+      } catch {}
+    }
+  }
+
+  canvas.addEventListener('wheel', (event) => {
+    event.preventDefault()
+    state.lastWheelAt = performance.now()
+    const pointer = resolvePointer(event)
+    const exponent = Math.max(-0.05, Math.min(0.05, -event.deltaY * 0.001))
+    zoomAtPoint(pointer.x, pointer.y, Math.exp(exponent))
+  }, { passive: false })
+
+  canvas.addEventListener('pointerdown', (event) => {
+    event.preventDefault()
+    const pointer = resolvePointer(event)
+    const candidateNode = pickFallbackNode(pointer.x, pointer.y)
+    const candidateNodeId = isRealGraphNode(candidateNode) && typeof candidateNode?.[0] === 'string' ? candidateNode[0] : ''
+    const candidateX = Number(candidateNode?.[2])
+    const candidateY = Number(candidateNode?.[3])
+    const world = screenToWorld(pointer.x, pointer.y)
+    state.pointer.down = true
+    state.pointer.moved = false
+    state.pointer.dragging = false
+    state.pointer.dragNodeId = candidateNodeId
+    state.pointer.x = pointer.x
+    state.pointer.y = pointer.y
+    state.pointer.startX = pointer.x
+    state.pointer.startY = pointer.y
+    state.pointer.startWorldX = world.x
+    state.pointer.startWorldY = world.y
+    state.pointer.nodeStartX = candidateNodeId && Number.isFinite(candidateX) ? candidateX : 0
+    state.pointer.nodeStartY = candidateNodeId && Number.isFinite(candidateY) ? candidateY : 0
+    state.pointer.worldAnchorX = world.x
+    state.pointer.worldAnchorY = world.y
+    try {
+      canvas.setPointerCapture(event.pointerId)
+    } catch {}
+  })
+
+  canvas.addEventListener('pointermove', (event) => {
+    if (state.pointer.down) {
+      event.preventDefault()
+    }
+    const pointer = resolvePointer(event)
 
-  const drawHalos = state.renderNodes.length <= 1200 || state.transform.scale >= 0.45
-  if (drawHalos) {
-    ctx.beginPath()
-    for (let index = 0; index < nodes.length; index += 1) {
-      const node = nodes[index]
-      ctx.moveTo(node.x + nodeRadius(node) + 3, node.y)
-      ctx.arc(node.x, node.y, nodeRadius(node) + 3, 0, Math.PI * 2)
+    if (state.pointer.down) {
+      const dx = pointer.x - state.pointer.x
+      const dy = pointer.y - state.pointer.y
+      const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
+      if (distanceFromStart >= dragActivationDistance) {
+        state.pointer.moved = true
+        state.pointer.dragging = true
+        canvas.classList.toggle('is-node-dragging', Boolean(state.pointer.dragNodeId))
+      }
+      if (!state.pointer.dragging) {
+        state.pointer.x = pointer.x
+        state.pointer.y = pointer.y
+        return
+      }
+      if (state.pointer.dragNodeId) {
+        const world = screenToWorld(pointer.x, pointer.y)
+        const x = state.pointer.nodeStartX + world.x - state.pointer.startWorldX
+        const y = state.pointer.nodeStartY + world.y - state.pointer.startWorldY
+        state.nodePositions.set(state.pointer.dragNodeId, { x, y })
+        updateNodePositionInChunk(state.pointer.dragNodeId, x, y)
+        state.pointer.x = pointer.x
+        state.pointer.y = pointer.y
+        drawFallback()
+        return
+      }
+      state.camera.x += dx
+      state.camera.y += dy
+      state.pointer.x = pointer.x
+      state.pointer.y = pointer.y
+      updateWorkerCamera()
+      drawFallback()
+      return
     }
-    ctx.fillStyle = graphTheme.nodeHalo
-    ctx.fill()
-  }
 
-  ctx.beginPath()
-  for (let index = 0; index < nodes.length; index += 1) {
-    const node = nodes[index]
-    const radius = nodeRadius(node)
-    ctx.moveTo(node.x + radius, node.y)
-    ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
-  }
-  ctx.fillStyle = graphTheme.node
-  ctx.fill()
-  ctx.lineWidth = 1.25
-  ctx.strokeStyle = graphTheme.nodeStroke
-  ctx.stroke()
-}
-
-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)
+    const hovered = pickFallbackNode(pointer.x, pointer.y)
+    const hoveredId = isRealGraphNode(hovered) && typeof hovered?.[0] === 'string' ? hovered[0] : ''
+    if (state.hoveredNodeId !== hoveredId) {
+      state.hoveredNodeId = hoveredId
+      canvas.classList.toggle('is-node-hover', Boolean(hoveredId))
+      updateGraphOverlays()
+    }
+    if (hoveredId) {
+      showTooltip(hovered, pointer)
     } else {
-      regularNodes.push(node)
+      hideTooltip()
     }
-  }
+  })
 
-  drawNodeBatch(regularNodes)
+  canvas.addEventListener('pointerup', (event) => {
+    const pointer = resolvePointer(event)
+    const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
+    const shouldPick = !state.pointer.dragging && distanceFromStart < dragActivationDistance
+    const shouldRefreshAfterDrag = state.pointer.dragging
+    const shouldPersistNodePosition = state.pointer.dragging && Boolean(state.pointer.dragNodeId)
+    resetPointerState(event.pointerId)
 
-  if (state.transform.scale >= 0.62 && state.renderNodes.length <= 1200) {
-    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]
-      ctx.fillText(node.title.slice(0, 34), node.x, node.y + nodeRadius(node) + 8)
+    if (shouldPick) {
+      pickAt(pointer.x, pointer.y)
+      return
     }
-  }
+    if (shouldPersistNodePosition) {
+      writeStoredNodePositions()
+      persistNodePositionsToServer()
+      return
+    }
+    if (shouldRefreshAfterDrag) {
+      scheduleChunkFetch()
+    }
+  })
 
-  priorityNodes.forEach(node => drawSingleNode(node))
-}
+  canvas.addEventListener('pointerleave', () => {
+    state.hoveredNodeId = ''
+    canvas.classList.remove('is-node-hover')
+    hideTooltip()
+    updateGraphOverlays()
+  })
 
-const partitionGraphForAcceleratedRenderer = () => {
-  const regularNodes = []
-  const priorityNodes = []
-  const regularEdges = []
-  const inferredEdges = []
-  const selectedEdges = []
+  canvas.addEventListener('pointercancel', (event) => {
+    resetPointerState(event.pointerId)
+    hideTooltip()
+    updateGraphOverlays()
+  })
 
-  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)
-    }
-  }
+  canvas.addEventListener('lostpointercapture', () => {
+    resetPointerState()
+  })
 
-  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)
+  elements.miniMap.addEventListener('click', (event) => {
+    if (!state.miniMapView) {
+      return
     }
-  }
+    const rect = elements.miniMap.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+    const worldX = state.miniMapView.minX + (x - state.miniMapView.offsetX) / state.miniMapView.scale
+    const worldY = state.miniMapView.minY + (y - state.miniMapView.offsetY) / state.miniMapView.scale
+    state.camera.x = state.viewport.width / 2 - worldX * state.camera.scale
+    state.camera.y = state.viewport.height / 2 - worldY * state.camera.scale
+    updateWorkerCamera()
+    scheduleChunkFetch()
+  })
+
+  canvas.addEventListener('dblclick', (event) => {
+    const pointer = resolvePointer(event)
+    zoomAtPoint(pointer.x, pointer.y, 1.065)
+  })
 
-  return { regularNodes, priorityNodes, regularEdges, inferredEdges, selectedEdges }
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !elements.contentDialog.hidden) {
+      closeContentDialog()
+      return
+    }
+    if (event.key === '+') {
+      zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
+      return
+    }
+    if (event.key === '-') {
+      zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
+      return
+    }
+    if (event.key === '0') {
+      scheduleChunkFetch({ fit: true })
+    }
+  })
 }
 
-const drawGraphLabels = nodes => {
-  if (!(state.transform.scale >= 0.62 && state.renderNodes.length <= 1200)) {
-    return
-  }
+const setupControls = () => {
+  elements.zoomIn.addEventListener('click', () => {
+    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
+  })
 
-  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]
-    ctx.fillText(node.title.slice(0, 34), node.x, node.y + nodeRadius(node) + 8)
-  }
-}
+  elements.zoomOut.addEventListener('click', () => {
+    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
+  })
 
-const drawAcceleratedGraph = (width, height, drawEdges) => {
-  if (!webGlRenderer || state.renderClusters.length > 0) {
-    return false
-  }
+  elements.fit.addEventListener('click', () => {
+    fitFromChunk()
+    scheduleChunkFetch()
+  })
 
-  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()
+  elements.releaseNode.addEventListener('click', () => {
+    releaseSelectedNodePosition()
+  })
 
-  return true
-}
+  elements.reset.addEventListener('click', () => {
+    clearStoredNodePositions()
+    clearNodePositionsOnServer()
+    state.camera = { x: 0, y: 0, scale: 0.22 }
+    updateWorkerCamera()
+    scheduleChunkFetch({ fit: true })
+  })
 
-const edgePairKey = (source, target) =>
-  source < target ? source + '|' + target : target + '|' + source
+  elements.contentClose.addEventListener('click', () => {
+    closeContentDialog()
+  })
 
-const meshNeighborBuckets = (nodes, cellSize) => {
-  const buckets = new Map()
+  elements.contentDialog.addEventListener('click', (event) => {
+    if (event.target === elements.contentDialog) {
+      closeContentDialog()
+    }
+  })
 
-  for (let index = 0; index < nodes.length; index += 1) {
-    const node = nodes[index]
-    const cellX = Math.floor(node.x / cellSize)
-    const cellY = Math.floor(node.y / cellSize)
-    const key = cellX + ':' + cellY
-    const bucket = buckets.get(key)
-    if (bucket) {
-      bucket.push(node)
-    } else {
-      buckets.set(key, [node])
+  elements.search.addEventListener('input', () => {
+    if (state.searchTimer) {
+      clearTimeout(state.searchTimer)
     }
-  }
-
-  return buckets
-}
-
-const meshCandidatesForNode = (node, buckets, cellSize) => {
-  const cellX = Math.floor(node.x / cellSize)
-  const cellY = Math.floor(node.y / cellSize)
-  const candidates = []
-
-  for (let offsetX = -1; offsetX <= 1; offsetX += 1) {
-    for (let offsetY = -1; offsetY <= 1; offsetY += 1) {
-      const bucket = buckets.get((cellX + offsetX) + ':' + (cellY + offsetY))
-      if (!bucket) continue
-      for (let index = 0; index < bucket.length; index += 1) {
-        const candidate = bucket[index]
-        if (candidate.id !== node.id) {
-          candidates.push(candidate)
-        }
-      }
-    }
-  }
-
-  return candidates
+    state.searchTimer = setTimeout(() => {
+      state.searchTimer = null
+      runGraphSearch().catch((error) => console.error(error))
+    }, 160)
+  })
 }
 
-const buildMeshEdgesForNodes = (nodes, existingEdges) => {
-  if (nodes.length < 2 || state.transform.scale < meshEdgeScaleThreshold) {
-    return []
-  }
-
-  const existingKeys = new Set()
-  for (let index = 0; index < existingEdges.length; index += 1) {
-    const edge = existingEdges[index]
-    if (edge.target) {
-      existingKeys.add(edgePairKey(edge.source, edge.target))
-    }
-  }
-
-  const desiredBudget = Math.min(
-    meshEdgeMaxBudget,
-    Math.max(meshEdgeMinBudget, Math.floor(edgeBudgetForCurrentFrame() * 0.62))
-  )
-  const perNodeNeighborCount =
-    state.transform.scale >= 1.05 ? 4
-      : state.transform.scale >= 0.62 ? 3
-        : 2
-  const cellSize = Math.max(120, 280 / Math.max(state.transform.scale, 0.0001))
-  const maxDistance = 980
-  const maxDistanceSquared = maxDistance * maxDistance
-  const buckets = meshNeighborBuckets(nodes, cellSize)
-  const meshEdges = []
-  const meshKeys = new Set()
-
-  for (let index = 0; index < nodes.length && meshEdges.length < desiredBudget; index += 1) {
-    const node = nodes[index]
-    const candidates = meshCandidatesForNode(node, buckets, cellSize)
-      .map((candidate) => ({
-        node: candidate,
-        distanceSquared: (candidate.x - node.x) ** 2 + (candidate.y - node.y) ** 2
-      }))
-      .filter((candidate) => candidate.distanceSquared <= maxDistanceSquared)
-      .sort((left, right) => left.distanceSquared - right.distanceSquared)
-
-    let linked = 0
-    for (let candidateIndex = 0; candidateIndex < candidates.length && linked < perNodeNeighborCount && meshEdges.length < desiredBudget; candidateIndex += 1) {
-      const candidate = candidates[candidateIndex].node
-      const key = edgePairKey(node.id, candidate.id)
-      if (existingKeys.has(key) || meshKeys.has(key)) {
-        continue
-      }
-
-      meshKeys.add(key)
-      meshEdges.push({
-        source: node.id,
-        target: candidate.id,
-        targetTitle: candidate.title,
-        weight: 1,
-        priority: 'normal',
-        sourceNode: node,
-        targetNode: candidate,
-        inferred: true
-      })
-      linked += 1
+const runGraphSearch = async () => {
+  const token = ++state.searchToken
+  const query = (elements.search.value || '').trim()
+  if (!query) {
+    state.searchResultIds = new Set()
+    setFocusedNodeIds(new Set())
+    if (state.renderWorker && state.workerReady) {
+      state.renderWorker.postMessage({ type: 'highlight', ids: [] })
     }
+    return
   }
 
-  return meshEdges
-}
-
-const withMeshEdges = (nodes, edges) => {
-  if (nodes.length === 0 || state.visibleNodes.length <= largeGraphNodeThreshold || state.transform.scale < meshEdgeScaleThreshold) {
-    return edges
-  }
-
-  const meshEdges = buildMeshEdgesForNodes(nodes, edges)
-  return meshEdges.length > 0 ? edges.concat(meshEdges) : 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)
+  const response = await fetch('/api/graph-filter?q=' + encodeURIComponent(query) + '&limit=1800' + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to search graph')
   }
-
-  return nodes
-}
-
-const enrichSampleWithNeighbors = (nodes) => {
-  if (nodes.length === 0) {
-    return {
-      nodes,
-      edges: []
-    }
+  const payload = await response.json()
+  if (token !== state.searchToken) {
+    return
   }
 
-  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 ids = Array.isArray(payload?.nodeIds) ? payload.nodeIds.filter((id) => typeof id === 'string' && id.length > 0) : []
+  state.searchResultIds = new Set(ids)
+  setFocusedNodeIds(state.searchResultIds)
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'highlight', ids })
   }
-
-  const edges = collectVisibleEdgesForNodes(ids)
-
-  return {
-    nodes: expanded,
-    edges
+  if (ids.length > 0 && state.graphMode === 'far') {
+    state.camera.scale = Math.max(state.camera.scale, 0.82)
+    updateWorkerCamera()
+    scheduleChunkFetch()
   }
 }
 
-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)
-      }
-    }
+const loadAgents = async () => {
+  const response = await fetch('/api/agents')
+  if (!response.ok) {
+    throw new Error('Failed to load agents')
   }
-  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))
+  const payload = await response.json()
+  const agents = Array.isArray(payload?.agents) ? payload.agents : []
+
+  elements.agent.innerHTML = agents
+    .map((agent) => {
+      const id = String(agent?.id || '')
+      const count = Number.isFinite(agent?.documentCount) ? agent.documentCount : 0
+      const label = id === 'shared' ? 'shared' : id
+      return '<option value="' + escapeHtml(id) + '">' + escapeHtml(label) + ' (' + count + ')</option>'
     })
+    .join('')
 
-  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 preferredAgent = initialAgentFromUrl || readStoredAgent()
+  const hasPreferred = preferredAgent && agents.some((agent) => agent?.id === preferredAgent)
+  state.agentId = hasPreferred ? preferredAgent : String(agents[0]?.id || '')
+  elements.agent.value = state.agentId
 
-    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 zoomCapByNodeCount = (nodeCount) => {
-  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 zoomCapByHubDistance = (distance) => {
-  if (!Number.isFinite(distance) || distance <= 0) {
-    return zoomRange.max
-  }
-
-  const rect = canvas.getBoundingClientRect()
-  const viewportWidth = Math.max(rect.width, 320)
-  const viewportHeight = Math.max(rect.height, 320)
-  const reference = Math.max(220, Math.min(viewportWidth, viewportHeight) * zoomCapTargetViewportShare)
-  return Math.max(0.3, Math.min(zoomRange.max, reference / distance))
-}
-
-const currentZoomMax = () => {
-  const nodeCount = state.visibleNodes.length > 0 ? state.visibleNodes.length : state.nodes.length
-  const hubDistanceCap = isDominantHub(state.primaryHub, nodeCount)
-    ? zoomCapByHubDistance(state.hubNeighborDistance)
-    : zoomRange.max
-  const minimumUsefulCap = nodeCount > massiveGraphNodeThreshold ? 1.9 : nodeCount > largeGraphNodeThreshold ? 1.35 : 0.8
-  const capped = Math.min(zoomCapByNodeCount(nodeCount), Math.max(minimumUsefulCap, hubDistanceCap))
-  return Math.max(zoomRange.min * 2, capped)
-}
-
-const clampScale = value => Math.max(zoomRange.min, 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
-}
-
-const graphBounds = nodes => {
-  if (nodes.length === 0) return null
-  let minX = Number.POSITIVE_INFINITY
-  let maxX = Number.NEGATIVE_INFINITY
-  let minY = Number.POSITIVE_INFINITY
-  let maxY = Number.NEGATIVE_INFINITY
-
-  nodes.forEach(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)
-    maxY = Math.max(maxY, node.y + radius)
-  })
-
-  return {
-    minX,
-    maxX,
-    minY,
-    maxY,
-    width: Math.max(maxX - minX, 1),
-    height: Math.max(maxY - minY, 1)
-  }
-}
-
-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.68
-  return 0.56
-}
-
-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.06, max: 0.32 }
-  return { min: 0.0012, max: 0.24 }
-}
-
-const fitView = (options = { useFiltered: true, macro: false, 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)
-
-  if (!bounds) {
-    state.transform = { x: width / 2, y: height / 2, scale: 1 }
-    state.offscreenFrameCount = 0
-    state.recoveringViewport = false
-    markRenderDirty()
-    return
-  }
-
-  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(nodes.length)
-  const scaleX = width / (bounds.width + padding * 2)
-  const scaleY = height / (bounds.height + padding * 2)
-  const fitScale = Math.min(scaleX, scaleY)
-  const biasedScale = clampScale(fitScale * fitScaleBiasByNodeCount(nodes.length))
-  const scaleRange = autoFitScaleRangeByNodeCount(nodes.length)
-  const baselineScale = clampScale(Math.min(scaleRange.max, Math.max(scaleRange.min, biasedScale)))
-  const macroScale = nodes.length > massiveGraphNodeThreshold ? massiveAutoFitMacroScale : defaultMacroScale
-  const scale = options.macro && nodes.length > 1
-    ? clampScale(Math.min(baselineScale, macroScale))
-    : 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: clampTransformCoordinate(width / 2 - centerX * scale),
-    y: clampTransformCoordinate(height / 2 - centerY * scale),
-    scale: clampScale(scale)
-  }
-  state.offscreenFrameCount = 0
-  state.recoveringViewport = false
-  markRenderDirty()
-}
-
-const resetView = () => fitView({ useFiltered: false, macro: true, preferHubCenter: true })
-
-const focusPrimaryHub = () => {
-  const hub = state.primaryHub
-  if (!hub) {
-    fitView({ useFiltered: true, macro: false, 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
-  }
-  state.offscreenFrameCount = 0
-  markRenderDirty()
-}
-
-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 createLayout = graph => {
-  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
-    }
+  elements.agent.addEventListener('change', () => {
+    state.agentId = elements.agent.value || ''
+    writeStoredAgent(state.agentId)
+    syncAgentInUrl(state.agentId)
+    loadContexts().then(() => scheduleChunkFetch({ fit: true })).catch((error) => console.error(error))
   })
-  const nodeMap = new Map(nodes.map(node => [node.id, node]))
-  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 }
-}
-
-const encodeEntityTag = (value) => {
-  const utf8 = new TextEncoder().encode(value)
-  let binary = ''
 
-  for (let index = 0; index < utf8.length; index += 1) {
-    binary += String.fromCharCode(utf8[index])
-  }
-
-  return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/g, '')
-}
-
-const graphSignature = graph => JSON.stringify({
-  nodes: graph.nodes.map(node => [node.id, node.title, node.path, node.tags]),
-  edges: graph.edges.map(edge => [edge.source, edge.target, edge.targetTitle, edge.weight, edge.priority])
-})
-
-const resetContentFilter = () => {
-  if (state.contentFilter.timer) {
-    clearTimeout(state.contentFilter.timer)
-  }
-  state.contentFilter = {
-    query: '',
-    ids: null,
-    token: state.contentFilter.token + 1,
-    timer: null
-  }
-  recomputeVisibility()
+  syncAgentInUrl(state.agentId)
 }
 
-const syncContentFilter = async (query, token) => {
-  const response = await fetch(
-      '/api/graph-filter?q=' +
-      encodeURIComponent(query) +
-      '&limit=' +
-      encodeURIComponent(String(Math.max(state.nodes.length, 1))) +
-      agentQuery('&')
-  )
-
-  if (!response.ok || token !== state.contentFilter.token) {
-    return
+const loadContexts = async () => {
+  const response = await fetch('/api/graph-contexts' + (state.agentId ? '?agent=' + encodeURIComponent(state.agentId) : ''))
+  if (!response.ok) {
+    throw new Error('Failed to load graph contexts')
   }
 
   const payload = await response.json()
-  const nodeIds = Array.isArray(payload?.nodeIds) ? payload.nodeIds.filter(id => typeof id === 'string') : []
-  if (token !== state.contentFilter.token) {
-    return
-  }
-
-  state.contentFilter.query = query
-  const merged = new Set([...(state.contentFilter.ids instanceof Set ? state.contentFilter.ids : []), ...nodeIds])
-  state.contentFilter.ids = merged
-  recomputeVisibility()
-}
-
-const scheduleContentFilterSync = () => {
-  const query = normalizeQuery(state.query)
-  if (!query) {
-    resetContentFilter()
-    return
-  }
+  const contexts = Array.isArray(payload?.contexts) ? payload.contexts : []
+  const options = [
+    '<option value="">All contexts</option>',
+    ...contexts.map((context) => {
+      const id = String(context?.id || '')
+      const title = String(context?.title || id || 'Untitled')
+      const count = Number.isFinite(context?.nodeCount) ? context.nodeCount : 0
+      return '<option value="' + escapeHtml(id) + '">' + escapeHtml(title) + ' (' + count + ')</option>'
+    })
+  ]
 
-  if (state.contentFilter.timer) {
-    clearTimeout(state.contentFilter.timer)
-  }
+  elements.context.innerHTML = options.join('')
 
-  const token = state.contentFilter.token + 1
-  state.contentFilter = {
-    query: state.contentFilter.query,
-    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 preferredContext = initialContextFromUrl || readStoredContext()
+  const hasPreferred = preferredContext && contexts.some((context) => context?.id === preferredContext)
+  state.contextId = hasPreferred ? preferredContext : ''
+  elements.context.value = state.contextId
+  writeStoredContext(state.contextId)
+  syncContextInUrl(state.contextId)
 }
 
-const tick = delta => {
-  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) {
-    return
-  }
-  const strength = Math.min(delta / 16, 2)
-
-  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 / distance) * force
-    const fy = (dy / distance) * force
-    source.vx += fx
-    source.vy += fy
-    target.vx -= fx
-    target.vy -= fy
-  })
-
-  for (let i = 0; i < nodes.length; i += 1) {
-    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)
-      const force = Math.min(2600 / (distance * distance), 0.12) * strength
-      const fx = (dx / distance) * force
-      const fy = (dy / distance) * force
-      a.vx -= fx
-      a.vy -= fy
-      b.vx += fx
-      b.vy += fy
-    }
-  }
-
-  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
-      return
-    }
-    node.vx += -node.x * 0.0008 * strength
-    node.vy += -node.y * 0.0008 * strength
-    node.vx *= 0.88
-    node.vy *= 0.88
-    node.x += node.vx * strength
-    node.y += node.vy * strength
+const setupContextControl = () => {
+  elements.context.addEventListener('change', () => {
+    state.contextId = elements.context.value || ''
+    state.selectedNodeId = null
+    writeStoredContext(state.contextId)
+    syncContextInUrl(state.contextId)
+    scheduleChunkFetch({ fit: true })
   })
 }
 
-const worldPoint = event => {
-  const rect = canvas.getBoundingClientRect()
-  return screenToWorldPoint(event.clientX - rect.left, event.clientY - rect.top)
-}
-
-const connectedNodeIdsFor = (nodeId) => {
-  const edges = state.visibleEdgeByNode.get(nodeId) ?? []
-  const ids = new Set()
+const setupRenderWorker = () => {
+  const hasWorker = typeof Worker !== 'undefined'
+  const canTransfer = typeof canvas.transferControlToOffscreen === 'function'
 
-  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)
-    }
+  if (!hasWorker || !canTransfer) {
+    state.rendererMode = 'fallback'
+    drawFallback()
+    return
   }
 
-  return ids
-}
+  try {
+    const offscreen = canvas.transferControlToOffscreen()
+    const worker = new Worker('/render-worker.js')
+    state.renderWorker = worker
 
-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
-        }
+    worker.onmessage = (event) => {
+      const payload = event.data
+      if (!payload || typeof payload !== 'object') {
+        return
       }
-    }
-  }
-}
-
-const hitNode = point => {
-  computeRenderVisibility()
-  if (state.renderClusters.length > 0) {
-    return null
-  }
-  const hitScaleFloor = state.nodes.length > massiveGraphNodeThreshold
-    ? 0.2
-    : state.nodes.length > largeGraphNodeThreshold
-      ? 0.34
-      : 0
-  if (state.transform.scale < hitScaleFloor) {
-    return null
-  }
-
-  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
-  }
-  return null
-}
-
-const baseNodeRadius = node => {
-  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 clusterRadiusPx = cluster => {
-  if (cluster.id === 'macro-galaxy') {
-    return 10
-  }
-  if (cluster.isHub) {
-    return 3.8
-  }
-  if (String(cluster.id).startsWith('ecosystem-')) {
-    const size = Math.max(1, Math.min(ecosystemLevelNodeCap, cluster.size || cluster.count || 1))
-    const sizeBias = 0.56 + Math.log10(size + 1) * 0.28
-    const densityBias = Math.log10((cluster.count || 1) + 1) * 0.12
-    return Math.max(0.62, Math.min(2.4, sizeBias + densityBias))
-  }
-  return Math.max(8, Math.min(28, 8 + Math.log2(cluster.count + 1) * 3))
-}
-
-const clusterOpacity = cluster =>
-  Math.max(0, Math.min(1, Number.isFinite(cluster.lodOpacity) ? cluster.lodOpacity : 1))
-
-const worldViewportBounds = () => {
-  const rect = canvas.getBoundingClientRect()
-  const width = Math.max(rect.width, 320)
-  const height = Math.max(rect.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 shouldRenderClusters = viewportNodes =>
-  state.transform.scale <= clusterZoomThreshold && viewportNodes.length >= clusterActivationNodeThreshold
-
-const clusterViewportNodes = viewportNodes => {
-  if (!shouldRenderClusters(viewportNodes)) {
-    return []
-  }
-
-  const worldCellSize = Math.max(clusterCellPixelSize / Math.max(state.transform.scale, 0.0001), 1)
-  const buckets = new Map()
-
-  for (let index = 0; index < viewportNodes.length; index += 1) {
-    const node = viewportNodes[index]
-    const keyX = Math.floor(node.x / worldCellSize)
-    const keyY = Math.floor(node.y / worldCellSize)
-    const key = keyX + ':' + keyY
-    const current = buckets.get(key)
-    if (current) {
-      current.count += 1
-      current.sumX += node.x
-      current.sumY += node.y
-      if ((state.nodeDegrees.get(node.id) ?? 0) > current.degree) {
-        current.representative = node
-        current.degree = state.nodeDegrees.get(node.id) ?? 0
+      if (payload.type === 'ready') {
+        state.workerReady = true
+        scheduleChunkFetch({ fit: true })
+        return
       }
-      continue
-    }
-
-    buckets.set(key, {
-      id: key,
-      count: 1,
-      sumX: node.x,
-      sumY: node.y,
-      representative: node,
-      degree: state.nodeDegrees.get(node.id) ?? 0
-    })
-  }
 
-  return Array.from(buckets.values())
-    .sort((left, right) => right.count - left.count)
-    .slice(0, Math.min(renderNodeBudget, 900))
-    .map((cluster) => ({
-      id: cluster.id,
-      x: cluster.sumX / Math.max(cluster.count, 1),
-      y: cluster.sumY / Math.max(cluster.count, 1),
-      count: cluster.count,
-      representative: cluster.representative
-    }))
-}
-
-const representativeNodesFromClusters = (clusters, limit) => {
-  const representatives = clusters
-    .map((cluster) => cluster.representative)
-    .filter((node) => Boolean(node))
-  const merged = mergeUniqueNodes(
-    representatives,
-    state.renderNodes ?? [],
-    Math.max(1, limit)
-  )
-  return ensureHubNodesInRenderedSet(merged)
-}
-
-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.renderClusterEdges = []
-
-  const shouldRenderMacroGalaxy = shouldRenderMacroGalaxyView()
-
-  if (shouldRenderMacroGalaxy) {
-    const viewportNodes = viewportNodesFromSpatialIndex(viewport)
-    const sourceNodes = viewportNodes.length > 0 ? viewportNodes : state.visibleNodes
-    const representative = state.primaryHub ?? state.macroRepresentative ?? sourceNodes[0] ?? null
-    if (representative) {
-      state.renderClusters = [
-        {
-          id: 'macro-galaxy',
-          x: state.macroCenter.x,
-          y: state.macroCenter.y,
-          count: sourceNodes.length,
-          representative
+      if (payload.type === 'pick-result') {
+        if (payload.node && typeof payload.node.id === 'string' && payload.node.id.length > 0) {
+          handlePickedNode(payload.node)
         }
-      ]
-      state.renderNodes = [representative]
-    } else {
-      state.renderClusters = []
-      state.renderNodes = []
-    }
-    state.renderEdges = []
-    state.renderClusterEdges = []
-    return
-  }
-
-  const ecosystemScaleThreshold = state.visibleNodes.length > massiveGraphNodeThreshold
-    ? massiveEcosystemClusterScaleThreshold
-    : ecosystemClusterScaleThreshold
-  if (
-    state.visibleNodes.length > ecosystemActivationNodeThreshold &&
-    state.transform.scale <= ecosystemScaleThreshold &&
-    state.ecosystemClusters.length > 0
-  ) {
-    const clusters = selectHierarchicalEcosystemClusters(viewport)
-      .sort((left, right) => right.count - left.count)
-    state.renderClusters = clusters
-    state.renderClusterEdges = ecosystemEdgesForClusters(clusters)
-    state.renderNodes = []
-    state.renderEdges = []
-    return
-  }
-
-  if (state.visibleNodes.length <= 2000) {
-    state.renderNodes = state.visibleNodes
-    state.renderClusters = []
-    state.renderClusterEdges = []
-    const ids = new Set(state.renderNodes.map((node) => node.id))
-    state.renderEdges = withMeshEdges(state.renderNodes, collectVisibleEdgesForNodes(ids))
-    return
-  }
-
-  if (state.visibleNodes.length > massiveGraphNodeThreshold) {
-    const viewportNodes = viewportNodesFromSpatialIndex(viewport)
-    const sourceNodes = viewportNodes.length > 0 ? viewportNodes : state.visibleNodes
-    const sampleLimit = nodeBudgetForScale(state.transform.scale)
-    const carryMargin = Math.max(240, Math.min(1200, 340 / Math.max(state.transform.scale, 0.0001)))
-    const carryViewport = expandViewportBounds(viewport, carryMargin)
-    const carryOverLimit = Math.max(180, Math.min(sampleLimit, Math.floor(sampleLimit * 0.5)))
-    const carryOverNodes = (state.renderNodes ?? [])
-      .filter((node) => isNodeInViewport(node, carryViewport))
-      .slice(0, carryOverLimit)
-    const sourceWithCarry = mergeUniqueNodes(
-      sourceNodes,
-      carryOverNodes,
-      Math.max(sampleLimit * 7, carryOverLimit)
-    )
-    const sourceWithCarryIds = new Set(sourceWithCarry.map((node) => node.id))
-    const sampledRaw = selectStableSampleNodes(
-      sourceWithCarry,
-      sampleLimit
-    )
-    const continuityBudget = Math.max(24, Math.min(sampleLimit - 8, Math.floor(sampleLimit * 0.42)))
-    const previousVisibleNodes = (state.renderNodes ?? [])
-      .filter((node) => sourceWithCarryIds.has(node.id))
-    const continuityNodes = selectStableSampleNodes(previousVisibleNodes, continuityBudget)
-    const sampled = mergeUniqueNodes(
-      continuityNodes,
-      sampledRaw,
-      sampleLimit
-    )
-    let sampledNodes = ensureHubNodesInRenderedSet(sampled)
-    if (state.transform.scale < 0.035) {
-      sampledNodes = includeHubPreviewNeighborhood(
-        sampledNodes,
-        Math.min(renderNodeBudget, sampleLimit + 160)
-      )
-    }
-    const sampledIds = new Set(sampledNodes.map((node) => node.id))
-    let sampledEdges = collectVisibleEdgesForNodes(sampledIds)
-
-    if (state.transform.scale >= 0.035 && sampledEdges.length === 0) {
-      const enriched = enrichSampleWithNeighbors(sampledNodes)
-      sampledNodes = ensureHubNodesInRenderedSet(enriched.nodes)
-      const sampledWithHubsIds = new Set(sampledNodes.map((node) => node.id))
-      sampledEdges = collectVisibleEdgesForNodes(sampledWithHubsIds)
-    }
-
-    state.renderClusters = []
-    state.renderClusterEdges = []
-    state.renderNodes = sampledNodes
-    state.renderEdges = withMeshEdges(sampledNodes, sampledEdges)
-    return
-  }
-
-  if (state.transform.scale <= 0.0015) {
-    const sampled = sampleVisibleNodes(Math.min(renderNodeBudget, 900))
-    const sampledIds = new Set(sampled.map((node) => node.id))
-    state.renderClusters = []
-    state.renderClusterEdges = []
-    state.renderNodes = sampled
-    state.renderEdges = withMeshEdges(sampled, collectVisibleEdgesForNodes(sampledIds))
-    return
-  }
-
-  const viewportNodes = viewportNodesFromSpatialIndex(viewport)
-  const clusters = clusterViewportNodes(viewportNodes)
-  if (clusters.length > 0) {
-    state.renderClusters = []
-    state.renderClusterEdges = []
-    state.renderNodes = representativeNodesFromClusters(clusters, Math.min(renderNodeBudget, 900))
-    state.renderEdges = []
-    return
-  }
-  state.renderClusters = []
-  state.renderClusterEdges = []
-  const stride = viewportNodeStride()
-  const picked = []
-
-  for (let index = 0; index < viewportNodes.length; index += 1) {
-    const node = viewportNodes[index]
-
-    const isPriority =
-      node.id === state.selected?.id ||
-      node.id === state.hovered?.id ||
-      node.id === state.pointer.dragNode?.id
-    if (isPriority || index % stride === 0) {
-      picked.push(node)
-    }
-  }
-
-  const nodes = picked.length > renderNodeBudget
-    ? picked.slice(0, renderNodeBudget)
-    : picked
-  if (nodes.length === 0 && state.visibleNodes.length > 0) {
-    const fallbackNodes = fallbackViewportNodes()
-    const fallbackIds = new Set(fallbackNodes.map((node) => node.id))
-    state.renderNodes = fallbackNodes
-    state.renderClusters = []
-    state.renderClusterEdges = []
-    state.renderEdges = withMeshEdges(fallbackNodes, collectVisibleEdgesForNodes(fallbackIds))
-    return
-  }
-
-  const normalizedNodes = ensureHubNodesInRenderedSet(nodes)
-  const nodeIds = new Set(normalizedNodes.map((node) => node.id))
-  const edges = collectVisibleEdgesForNodes(nodeIds)
-
-  state.renderNodes = normalizedNodes
-  state.renderEdges = withMeshEdges(normalizedNodes, edges)
-
-  if (state.renderNodes.length === 0 && state.visibleNodes.length > 0) {
-    const fallbackNodes = sampleVisibleNodes(Math.min(renderNodeBudget, 260))
-    const fallbackIds = new Set(fallbackNodes.map((node) => node.id))
-    state.renderClusters = []
-    state.renderClusterEdges = []
-    state.renderNodes = fallbackNodes
-    state.renderEdges = withMeshEdges(fallbackNodes, collectVisibleEdgesForNodes(fallbackIds))
-  }
-}
-
-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 backgroundFrameIntervalMs =
-    state.nodes.length > massiveGraphNodeThreshold
-      ? (state.transform.scale < 0.035 ? 130 : state.transform.scale < 0.08 ? 110 : 86)
-      : state.nodes.length > largeGraphNodeThreshold
-        ? 64
-        : 16
-  const isInteracting =
-    state.pointer.down ||
-    state.renderVisibilityDirty ||
-    state.recoveringViewport
-  const minFrameIntervalMs = isInteracting ? 16 : backgroundFrameIntervalMs
-  if (delta < minFrameIntervalMs) {
-    requestAnimationFrame(render)
-    return
-  }
-  const rect = canvas.getBoundingClientRect()
-  const width = Math.max(rect.width, 320)
-  const height = Math.max(rect.height, 320)
-  sanitizeGraphState()
-  if (!hasValidTransform()) {
-    resetView()
-  }
-  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'
-    ctx.textAlign = 'center'
-    ctx.fillText('No indexed notes found', width / 2, height / 2)
-    requestAnimationFrame(render)
-    return
-  }
-
-  computeRenderVisibility()
-  tick(delta)
-  const hasVisibleNodeOnScreen = state.renderNodes.some((node) => isNodeVisibleOnScreen(node, width, height))
-  const manualZoomGuardActive = now - state.lastManualZoomAt < zoomRecoveryGuardMs
-  const allowViewportAutoRecovery = state.nodes.length <= massiveGraphNodeThreshold
-  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
-  }
-  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.renderClusters.length === 0 &&
-    state.transform.scale >= minimumEdgeScale
-  if (drawAcceleratedGraph(width, height, drawEdges)) {
-    // WebGL handles the dense node/edge layer; the 2D canvas remains the interaction overlay.
-  } else if (state.renderClusters.length > 0) {
-    ctx.save()
-    ctx.translate(state.transform.x, state.transform.y)
-    ctx.scale(state.transform.scale, state.transform.scale)
-    const safeScale = Math.max(state.transform.scale, 0.0001)
-    if (state.renderClusterEdges.length > 0) {
-      for (let index = 0; index < state.renderClusterEdges.length; index += 1) {
-        const edge = state.renderClusterEdges[index]
-        const edgeOpacity = Math.min(clusterOpacity(edge.sourceCluster), clusterOpacity(edge.targetCluster))
-        if (edgeOpacity <= 0.01) {
-          continue
-        }
-        ctx.beginPath()
-        ctx.moveTo(edge.sourceCluster.x, edge.sourceCluster.y)
-        ctx.lineTo(edge.targetCluster.x, edge.targetCluster.y)
-        ctx.lineWidth = 1.2 / safeScale
-        ctx.strokeStyle = 'rgba(153, 165, 181, ' + (edge.inferred ? 0.14 : 0.22) * edgeOpacity + ')'
-        ctx.stroke()
-      }
-    }
-    state.renderClusters.forEach(cluster => {
-      const isMacro = cluster.id === 'macro-galaxy'
-      const isEcosystem = String(cluster.id).startsWith('ecosystem-')
-      const isHub = Boolean(cluster.isHub)
-      const opacity = clusterOpacity(cluster)
-      if (opacity <= 0.01) {
         return
       }
-      const radiusPx = clusterRadiusPx(cluster)
-      const radius = radiusPx / safeScale
-      const haloRadius = (radiusPx + (isMacro ? 8 : isHub ? 4 : isEcosystem ? 1.1 : 4)) / safeScale
-      ctx.globalAlpha = opacity
-      if (isHub || !isEcosystem || state.transform.scale >= ecosystemSubgraphScaleThreshold) {
-        ctx.beginPath()
-        ctx.arc(cluster.x, cluster.y, haloRadius, 0, Math.PI * 2)
-        ctx.fillStyle = isMacro ? 'rgba(243, 247, 251, 0.28)' : graphTheme.nodeHalo
-        ctx.fill()
-      }
-      ctx.beginPath()
-      ctx.arc(cluster.x, cluster.y, radius, 0, Math.PI * 2)
-      ctx.fillStyle = isMacro ? '#f3f7fb' : graphTheme.node
-      ctx.fill()
-      ctx.lineWidth = (isEcosystem && !isHub ? 0.7 : 1.4) / safeScale
-      ctx.strokeStyle = isMacro ? '#ffffff' : graphTheme.nodeStroke
-      ctx.stroke()
-      if (isMacro && cluster.representative?.title) {
-        ctx.fillStyle = '#edf2f7'
-        ctx.font = 12 / safeScale + 'px Inter, system-ui, sans-serif'
-        ctx.textAlign = 'center'
-        ctx.textBaseline = 'top'
-        ctx.fillText(cluster.representative.title.slice(0, 28), cluster.x, cluster.y + (radiusPx + 9) / safeScale)
-      }
-      ctx.globalAlpha = 1
-      // Keep cluster markers minimal and faster to draw on large graphs.
-    })
-    ctx.restore()
-  } else {
-    ctx.save()
-    ctx.translate(state.transform.x, state.transform.y)
-    ctx.scale(state.transform.scale, state.transform.scale)
-    if (drawEdges) {
-      drawGraphEdges()
-    }
-    drawGraphNodes()
-    ctx.restore()
-  }
-  if (state.renderNodes.length === 0 && state.renderClusters.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)
-}
-
-const list = items => items.length
-  ? items.map(item => '<li>' + (item.id ? '<button type="button" data-node-id="' + escapeHtml(item.id) + '">' + escapeHtml(item.title) + '</button>' : escapeHtml(item.title)) + '<small>' + escapeHtml(item.path) + (item.weight ? ' · weight ' + escapeHtml(item.weight) + ' · ' + escapeHtml(item.priority || 'normal') : '') + '</small></li>').join('')
-  : '<li><small>No links found.</small></li>'
-
-const linkedNodes = node => {
-  const nodeById = new Map(state.nodes.map(item => [item.id, item]))
-  const withEdgeMeta = (linkedNode, edge) => linkedNode ? {
-    ...linkedNode,
-    weight: edge.weight,
-    priority: edge.priority
-  } : null
-  const outgoing = state.edges
-    .filter(edge => edge.source === node.id)
-    .map(edge => withEdgeMeta(edge.target ? nodeById.get(edge.target) : { title: (edge.targetTitle || 'Unknown') + ' (unresolved)', path: 'Missing note' }, edge))
-    .filter(Boolean)
-  const incoming = state.edges
-    .filter(edge => edge.target === node.id)
-    .map(edge => withEdgeMeta(nodeById.get(edge.source), edge))
-    .filter(Boolean)
-
-  return { outgoing, incoming }
-}
-
-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('&'))
-  if (!response.ok) {
-    throw new Error('Failed to load graph node details')
-  }
 
-  const payload = await response.json()
-  const detail = payload?.node
-  if (!detail || !detail.id) {
-    throw new Error('Invalid graph node payload')
-  }
-  state.nodeDetails.set(detail.id, detail)
-  return detail
-}
-
-const wait = async (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds))
-
-const openContentDialog = async node => {
-  if (!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>'
-  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()
-  }
-
-  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 {
-    const detailedNode = await fetchNodeDetails(node)
-    if (state.selected?.id !== node.id) {
-      return
-    }
-    applyDetailToDialog(detailedNode)
-  } catch {
-    try {
-      await wait(120)
-      const retriedNode = await fetchNodeDetails(node)
-      if (state.selected?.id !== node.id) {
+      if (payload.type === 'frame-stats') {
+        state.lastVisibleNodes = Number.isFinite(payload.visibleNodes) ? payload.visibleNodes : state.lastVisibleNodes
+        state.lastVisibleEdges = Number.isFinite(payload.visibleEdges) ? payload.visibleEdges : state.lastVisibleEdges
         return
       }
-      applyDetailToDialog(retriedNode)
-    } catch {
-      elements.contentBody.textContent = 'Unable to load note content.'
-    }
-  }
-}
-
-const selectNode = (node, options = { openContent: false }) => {
-  state.selected = node
-  if (node && options.openContent) {
-    openContentDialog(node).catch(() => {
-      elements.contentBody.textContent = 'Unable to load note content.'
-    })
-  }
-}
-
-const selectNodeById = id => {
-  const node = state.nodes.find(item => item.id === id)
-  if (node) selectNode(node, { openContent: true })
-}
 
-const zoomAtPoint = (screenX, screenY, factor, source = 'generic') => {
-  state.lastManualZoomAt = performance.now()
-  const effectiveFactor = factor
-  const nextScale = clampScale(state.transform.scale * effectiveFactor)
-  if (nextScale === state.transform.scale) {
-    return
-  }
-  const worldPointAtCursor = screenToWorldPoint(screenX, screenY)
-  const worldX = worldPointAtCursor.x
-  const worldY = worldPointAtCursor.y
-  state.lastZoomFocus = {
-    x: worldX,
-    y: worldY,
-    at: performance.now()
-  }
-  state.transform.scale = clampScale(nextScale)
-  state.transform.x = clampTransformCoordinate(screenX - worldX * nextScale)
-  state.transform.y = clampTransformCoordinate(screenY - worldY * nextScale)
-  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 isMassiveEcosystemZoom =
-    state.visibleNodes.length > massiveGraphNodeThreshold &&
-    state.transform.scale <= massiveEcosystemClusterScaleThreshold
-  const sensitivityMultiplier = isMassiveEcosystemZoom ? 0.48 : 1
-  const capMultiplier = isMassiveEcosystemZoom ? 0.34 : 1
-  const sensitivity = wheelZoomExponent * (isModifierZoom ? wheelZoomModifierBoost : 1) * sensitivityMultiplier
-  const exponentCap = wheelZoomExponentCap * capMultiplier
-  const exponent = Math.max(
-    -exponentCap,
-    Math.min(exponentCap, -normalizedDelta * sensitivity)
-  )
-  return Math.exp(exponent)
-}
-
-const handleWheelZoom = event => {
-  if (elements.contentDialog?.open) {
-    return
-  }
+      if (payload.type === 'fatal') {
+        console.error(payload.message)
+        state.rendererMode = 'fallback'
+        state.workerReady = false
+        state.renderWorker.terminate()
+        state.renderWorker = null
+        drawFallback()
+      }
+    }
 
-  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
+    worker.postMessage({
+      type: 'init',
+      canvas: offscreen,
+      width: state.viewport.width,
+      height: state.viewport.height,
+      devicePixelRatio: state.viewport.ratio,
+      camera: state.camera,
+      theme: graphTheme
+    }, [offscreen])
+  } catch (error) {
+    console.error(error)
+    state.rendererMode = 'fallback'
+    drawFallback()
   }
-
-  zoomAtPoint(cursorX, cursorY, factor, 'wheel')
 }
 
-const bindEvents = () => {
-  window.addEventListener('resize', resize)
-  elements.search.addEventListener('input', event => {
-    state.query = event.target.value
-    recomputeVisibility()
-    scheduleContentFilterSync()
-  })
-  elements.agent.addEventListener('change', event => {
-    state.agentId = event.target.value
-    writeStoredAgent(state.agentId)
-    syncAgentInUrl(state.agentId)
-    state.selected = null
-    state.nodeDetails = new Map()
-    resetContentFilter()
-    recomputeVisibility()
-    scheduleContentFilterSync()
-    loadGraph({ reset: true }).catch(error => {
-      console.error(error)
-    })
-  })
-  elements.zoomIn.addEventListener('click', () => {
-    const rect = canvas.getBoundingClientRect()
-    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.948, 'button')
-  })
-  if (elements.fit) {
-    elements.fit.addEventListener('click', () => {
-      focusPrimaryHub()
-    })
-  }
-  elements.reset.addEventListener('click', () => {
-    resetView()
-  })
-  elements.contentClose.addEventListener('click', () => elements.contentDialog.close())
-  elements.contentDialog.addEventListener('click', event => {
+const wireNodeLinkClicks = () => {
+  const dialog = elements.contentDialog
+  dialog.addEventListener('click', (event) => {
     const target = event.target
-    if (target instanceof HTMLElement && target.dataset.nodeId) {
-      selectNodeById(target.dataset.nodeId)
-      return
-    }
-    if (event.target === elements.contentDialog) elements.contentDialog.close()
-  })
-  canvas.addEventListener('wheel', handleWheelZoom, { passive: false })
-  canvas.addEventListener('dblclick', event => {
-    const point = worldPoint(event)
-    const node = hitNode(point)
-    if (node) {
-      selectNode(node, { openContent: true })
+    if (!(target instanceof HTMLElement)) {
       return
     }
 
-    const rect = canvas.getBoundingClientRect()
-    const cursorX = event.clientX - rect.left
-    const cursorY = event.clientY - rect.top
-    zoomAtPoint(cursorX, cursorY, 1.055)
-  })
-  canvas.addEventListener('pointerdown', event => {
-    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)
-    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
-    state.pointer.x = event.clientX
-    state.pointer.y = event.clientY
-    state.pointer.moved = state.pointer.moved || Math.abs(dx) + Math.abs(dy) > 3
-    if (state.pointer.dragNode) {
-      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 => {
-    const draggedNode = state.pointer.dragNode
-    if (draggedNode && state.pointer.moved) {
-      settleNeighborhoodAroundNode(draggedNode)
-      markRenderDirty()
-    }
-    if (draggedNode && !state.pointer.moved) selectNode(draggedNode, { openContent: false })
-    if (!draggedNode && !state.pointer.moved) selectNode(state.hovered, { openContent: false })
-    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)
+    const button = target.closest('button[data-node-id]')
+    if (!button) {
       return
     }
 
-    if (event.key === '0') {
-      event.preventDefault()
-      resetView()
+    const id = button.getAttribute('data-node-id') || ''
+    if (id) {
+      loadNodeDetails(id).catch((error) => console.error(error))
     }
   })
 }
 
-const loadAgents = async () => {
-  const response = await fetch('/api/agents')
-  const payload = await response.json()
-  const agents = Array.isArray(payload.agents) ? payload.agents : []
-  const preferredAgent = state.agentId || initialAgentFromUrl || readStoredAgent()
-  const currentExists = agents.some(agent => agent.id === preferredAgent)
-  const selected = currentExists
-    ? 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(formatAgentLabel(agent)) + '</option>').join('')
-      : '<option value="shared">shared</option>'
-    state.agentsSignature = signature
-  }
-  elements.agent.value = selected
-}
-
-const loadGraph = async (options = { reset: false }) => {
-  const response = await fetch('/api/graph-layout' + agentQuery(), {
-    headers: state.graphSignature
-      ? {
-          'if-none-match': encodeEntityTag(state.graphSignature)
-        }
-      : undefined
-  })
-
-  if (response.status === 304) {
-    return
-  }
+const bootstrap = async () => {
+  setViewportFromCanvas()
+  setupRenderWorker()
+  setupInput()
+  setupControls()
+  setupContextControl()
+  wireNodeLinkClicks()
 
-  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
-  const layout = createLayout(graph)
-  state.graphSignature = signature
-  state.graph = graph
-  state.nodes = layout.nodes
-  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))
-    if (edge.target) {
-      degrees.set(edge.target, (degrees.get(edge.target) ?? 0) + edgeWeight(edge))
-    }
-    return degrees
-  }, new Map())
-  state.nodeDetails = new Map()
-  pushNodesToFilterWorker()
-  resetContentFilter()
-  sanitizeAllNodePositions()
-  recomputeVisibility()
-  scheduleContentFilterSync()
-  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()
-  const selectedNode = state.nodes.find(node => node.id === selectedId) ?? null
-  selectNode(selectedNode, { openContent: Boolean(selectedNode && elements.contentDialog.open) })
-  if (!selectedNode && elements.contentDialog.open) {
-    elements.contentDialog.close()
-  }
-}
-
-bindEvents()
-initFilterWorker()
-requestAnimationFrame(() => {
-  resize()
-  resetView()
-})
-
-const pollIntervalMs = 5000
-let tickCounter = 0
-
-const refreshGraphLoop = () => {
-  if (document.hidden) {
-    return
-  }
+  window.addEventListener('resize', () => {
+    setViewportFromCanvas()
+    scheduleChunkFetch()
+  })
 
-  loadGraph().catch(handleGraphRefreshError)
+  await loadAgents()
+  await loadContexts()
+  updateTotals()
+  updateTagCount()
 
-  tickCounter += 1
-  if (tickCounter % 3 === 0) {
-    loadAgents().catch((error) => {
-      console.error(error)
-    })
-  }
+  scheduleChunkFetch({ fit: true })
 }
 
-loadAgents()
-  .then(() => loadGraph({ reset: true }))
-  .then(() => {
-    requestAnimationFrame(render)
-    setInterval(refreshGraphLoop, pollIntervalMs)
-  })
-  .catch(error => {
-    console.error(error)
-  })
-
-document.addEventListener('visibilitychange', () => {
-  if (document.hidden) {
-    return
-  }
-
-  loadGraph({ reset: true }).catch(handleGraphRefreshError)
+bootstrap().catch((error) => {
+  console.error(error)
 })
 `;