@andespindola/brainlink 0.1.0-beta.16 → 0.1.0-beta.161

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

@@ -1,53 +1,26 @@
 export const createClientJs = () => `const canvas = document.getElementById('graph')
-const ctx = canvas.getContext('2d')
-const largeGraphNodeThreshold = 4000
-const largeGraphEdgeRenderLimit = 16000
-const renderNodeBudget = 1800
-const minNodePixelRadius = 1.8
-const viewportPaddingPx = 280
-const state = {
-  graph: { nodes: [], edges: [] },
-  nodes: [],
-  edges: [],
-  visibleNodes: [],
-  visibleEdges: [],
-  renderNodes: [],
-  renderEdges: [],
-  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 },
-  graphSignature: '',
-  graphStatus: '',
-  last: performance.now()
-}
-
-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'),
@@ -55,743 +28,1534 @@ 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.05,
+  min: 0.0002,
   max: 4.5
 }
 
-const agentQuery = () => state.agentId ? '?agent=' + encodeURIComponent(state.agentId) : ''
+const selectedAgentStorageKey = 'brainlink:selected-agent'
+const selectedContextStorageKey = 'brainlink:selected-context'
+const nodePositionsStoragePrefix = 'brainlink:graph-node-positions:'
 
-const setGraphStatus = text => {
-  state.graphStatus = text
+const escapeHtml = (value) => String(value)
+  .replaceAll('&', '&amp;')
+  .replaceAll('<', '&lt;')
+  .replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;')
+  .replaceAll("'", '&#039;')
+
+const readStoredAgent = () => {
+  try {
+    const value = window.localStorage.getItem(selectedAgentStorageKey)?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
 }
 
-const handleGraphRefreshError = error => {
-  console.error(error)
+const writeStoredAgent = (agentId) => {
+  try {
+    if (!agentId) {
+      window.localStorage.removeItem(selectedAgentStorageKey)
+      return
+    }
+    window.localStorage.setItem(selectedAgentStorageKey, agentId)
+  } 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 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)
-  ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+const readStoredContext = () => {
+  try {
+    const value = window.localStorage.getItem(selectedContextStorageKey)?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
 }
 
-const normalizeQuery = value => value.trim().toLowerCase()
+const writeStoredContext = (contextId) => {
+  try {
+    if (!contextId) {
+      window.localStorage.removeItem(selectedContextStorageKey)
+      return
+    }
+    window.localStorage.setItem(selectedContextStorageKey, contextId)
+  } 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 nodePositionsStorageKey = () => [
+  nodePositionsStoragePrefix,
+  state.graphSignature || 'unknown',
+  state.agentId || 'all-agents',
+  state.contextId || 'all-contexts'
+].join(':')
 
-const filteredNodes = () => {
-  const query = normalizeQuery(state.query)
-  if (!query) return state.nodes
-  if (state.contentFilter.query === query && state.contentFilter.ids instanceof Set) {
-    return state.nodes.filter(node => state.contentFilter.ids.has(node.id))
-  }
+const readStoredNodePositions = () => {
+  try {
+    const raw = window.localStorage.getItem(nodePositionsStorageKey())
+    const parsed = raw ? JSON.parse(raw) : []
+    if (!Array.isArray(parsed)) {
+      return new Map()
+    }
 
-  return localFilteredNodes(query)
+    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()
+  }
 }
 
-const recomputeVisibility = () => {
-  const nodes = filteredNodes()
-  const ids = new Set(nodes.map(node => node.id))
-  const edges = state.edges.filter(edge => ids.has(edge.source) && edge.target && ids.has(edge.target))
-  const limitedEdges = state.nodes.length > largeGraphNodeThreshold
-    ? [...edges]
-      .sort((left, right) => edgeWeight(right) - edgeWeight(left))
-      .slice(0, largeGraphEdgeRenderLimit)
-    : edges
+const ensureNodePositionsLoaded = () => {
+  const storageKey = nodePositionsStorageKey()
+  if (!state.graphSignature || (state.nodePositionsSignature === state.graphSignature && state.nodePositionsScope === storageKey)) {
+    return
+  }
 
-  state.visibleNodes = nodes
-  state.visibleEdges = limitedEdges
+  state.nodePositions = readStoredNodePositions()
+  state.nodePositionsSignature = state.graphSignature
+  state.nodePositionsScope = storageKey
 }
 
-const edgeWeight = edge => Number.isFinite(edge.weight) ? Math.max(1, edge.weight) : 1
+const writeStoredNodePositions = () => {
+  try {
+    if (!state.graphSignature) {
+      return
+    }
+
+    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])
 
-const clampScale = value => Math.max(zoomRange.min, Math.min(zoomRange.max, value))
+    if (entries.length === 0) {
+      window.localStorage.removeItem(nodePositionsStorageKey())
+      return
+    }
 
-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
+    window.localStorage.setItem(nodePositionsStorageKey(), JSON.stringify(entries))
+  } catch {}
+}
 
-  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)
-  })
+const clearStoredNodePositions = () => {
+  try {
+    if (state.graphSignature) {
+      window.localStorage.removeItem(nodePositionsStorageKey())
+    }
+  } catch {}
+  state.nodePositions = new Map()
+  state.nodePositionsSignature = state.graphSignature
+  state.nodePositionsScope = nodePositionsStorageKey()
+}
 
-  return {
-    minX,
-    maxX,
-    minY,
-    maxY,
-    width: Math.max(maxX - minX, 1),
-    height: Math.max(maxY - minY, 1)
+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 fitView = (options = { useFiltered: true }) => {
-  const rect = canvas.getBoundingClientRect()
-  const width = Math.max(rect.width, 320)
-  const height = Math.max(rect.height, 320)
-  const nodes = options.useFiltered ? filteredNodes() : state.nodes
-  const bounds = graphBounds(nodes)
+const syncNodePositionsFromServer = async () => {
+  if (!state.graphSignature) {
+    return
+  }
+  const scope = nodePositionsStorageKey()
+  if (state.serverNodePositionsScope === scope) {
+    return
+  }
+  state.serverNodePositionsScope = scope
 
-  if (!bounds) {
-    state.transform = { x: width / 2, y: height / 2, scale: 1 }
+  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 persistNodePositionsToServer = () => {
+  if (!state.graphSignature) {
     return
   }
 
-  const padding = 100
-  const scaleX = width / (bounds.width + padding * 2)
-  const scaleY = height / (bounds.height + padding * 2)
-  const fitScale = clampScale(Math.min(scaleX, scaleY))
-  const minimumLargeGraphScale = nodes.length > largeGraphNodeThreshold ? 0.13 : zoomRange.min
-  const scale = Math.max(fitScale, minimumLargeGraphScale)
-  const centerX = (bounds.minX + bounds.maxX) / 2
-  const centerY = (bounds.minY + bounds.maxY) / 2
+  const positions = Array.from(state.nodePositions.entries()).map(([id, position]) => ({
+    id,
+    x: position.x,
+    y: position.y
+  }))
+
+  fetch('/api/graph-view-state?' + graphViewStateQuery(), {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ positions })
+  }).catch(() => {})
+}
 
-  state.transform = {
-    x: width / 2 - centerX * scale,
-    y: height / 2 - centerY * scale,
-    scale
+const clearNodePositionsOnServer = () => {
+  if (!state.graphSignature) {
+    return
   }
+
+  fetch('/api/graph-view-state?' + graphViewStateQuery(), { method: 'DELETE' }).catch(() => {})
 }
 
-const resetView = () => fitView({ useFiltered: false })
+const releaseSelectedNodePosition = () => {
+  if (!state.selectedNodeId || !state.nodePositions.has(state.selectedNodeId)) {
+    return
+  }
 
-const createLayout = graph => {
-  const nodes = graph.nodes.map(node => ({
-    ...node,
-    x: Number.isFinite(node.x) ? node.x : 0,
-    y: Number.isFinite(node.y) ? node.y : 0
-  }))
-  const nodeMap = new Map(nodes.map(node => [node.id, node]))
-  const edges = graph.edges
-    .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 }
+  state.nodePositions.delete(state.selectedNodeId)
+  writeStoredNodePositions()
+  persistNodePositionsToServer()
+  scheduleChunkFetch({ fit: false })
 }
 
-const encodeEntityTag = (value) => {
-  const utf8 = new TextEncoder().encode(value)
-  let binary = ''
+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 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')
+    }
+    window.history.replaceState({}, '', url.toString())
+  } catch {}
+}
 
-  for (let index = 0; index < utf8.length; index += 1) {
-    binary += String.fromCharCode(utf8[index])
+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 initialContextFromUrl = (() => {
+  try {
+    const raw = new URL(window.location.href).searchParams.get('context')
+    const value = raw?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
+})()
+
+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()
+
+  return query ? separator + query : ''
+}
+
+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
+  ]
+}
 
-  return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/g, '')
+const graphTheme = {
+  node: parseColor('#aeb8c5'),
+  nodeCluster: parseColor('#6bb7e8'),
+  nodeHighlight: parseColor('#f5c24a'),
+  nodeSelected: parseColor('#ffffff'),
+  edge: [0.58, 0.64, 0.74, 0.24],
+  edgeHeavy: [0.78, 0.84, 0.92, 0.44],
+  clear: parseColor('#0d0f12')
+}
+
+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 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 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 resetContentFilter = () => {
-  if (state.contentFilter.timer) {
-    clearTimeout(state.contentFilter.timer)
+const worldToScreen = (x, y) => ({
+  x: x * state.camera.scale + state.camera.x,
+  y: y * state.camera.scale + state.camera.y
+})
+
+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
   }
-  state.contentFilter = {
-    query: '',
-    ids: null,
-    token: state.contentFilter.token + 1,
-    timer: null
+
+  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)
+      return
+    }
+    cells.set(key, [node])
+  })
+
+  state.spatialIndex = { key, cells }
+}
+
+const spatialCandidates = (screenX, screenY) => {
+  rebuildSpatialIndex()
+  const cellSize = 44
+  const cellX = Math.floor(screenX / cellSize)
+  const cellY = Math.floor(screenY / cellSize)
+  const nodes = []
+
+  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) ?? []))
+    }
   }
-  recomputeVisibility()
+
+  return nodes
 }
 
-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()
-  )
+const nodeByIdFromChunk = () => new Map(normalizeList(state.chunk.nodes).map((node) => [node[0], node]))
+
+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
+}
 
-  if (!response.ok || token !== state.contentFilter.token) {
+const setFocusedNodeIds = (ids) => {
+  state.focusedNodeIds = ids
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'focus', ids: Array.from(ids) })
+  }
+  updateGraphOverlays()
+}
+
+const drawFallback = () => {
+  if (state.rendererMode !== 'fallback') {
     return
   }
+  ctx2dFallback = ctx2dFallback ?? canvas.getContext('2d')
+  if (!ctx2dFallback) {
+    return
+  }
+  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 = '#0d0f12'
+  ctx2dFallback.fillRect(0, 0, width, height)
 
-  const payload = await response.json()
-  const nodeIds = Array.isArray(payload?.nodeIds) ? payload.nodeIds.filter(id => typeof id === 'string') : []
-  if (token !== state.contentFilter.token) {
+  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])
+  }
+
+  ctx2dFallback.strokeStyle = 'rgba(150,165,190,0.2)'
+  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 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 = node[6] === 'cluster' ? '#6bb7e8' : '#aeb8c5'
+    const radius = Math.max(2.4, Math.min(14, 4 + node[7] * 0.55))
+
+    ctx2dFallback.beginPath()
+    ctx2dFallback.fillStyle = selected ? '#ffffff' : color
+    ctx2dFallback.arc(p.x, p.y, radius, 0, Math.PI * 2)
+    ctx2dFallback.fill()
+  }
+
+  ctx2dFallback.fillStyle = '#edf2f7'
+  ctx2dFallback.font = '12px Inter, system-ui, sans-serif'
+  ctx2dFallback.textAlign = 'center'
+  ctx2dFallback.fillText('Fallback canvas mode', Math.max(width, 320) / 2, 24)
+}
+
+const updateTotals = () => {
+  elements.nodeCount.textContent = String(state.totals.nodes)
+  elements.edgeCount.textContent = String(state.totals.edges)
+}
+
+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
+    }
+    state.renderWorker.postMessage({
+      type: 'camera',
+      camera: state.camera
+    })
+  })
+}
 
-  state.contentFilter.query = query
-  state.contentFilter.ids = new Set(nodeIds)
-  recomputeVisibility()
+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 scheduleContentFilterSync = () => {
-  const query = normalizeQuery(state.query)
-  if (!query) {
-    resetContentFilter()
+const normalizeList = (items) => Array.isArray(items) ? items : []
+
+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
+  }
+
+  const next = [...node]
+  next[2] = position.x
+  next[3] = position.y
+  return next
+})
+
+const updateNodePositionInChunk = (nodeId, x, y) => {
+  if (!nodeId || !Number.isFinite(x) || !Number.isFinite(y)) {
     return
   }
 
-  if (state.contentFilter.timer) {
-    clearTimeout(state.contentFilter.timer)
+  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 = ''
 
-  const token = state.contentFilter.token + 1
-  state.contentFilter = {
-    query: state.contentFilter.query,
-    ids: state.contentFilter.ids,
-    token,
-    timer: setTimeout(() => {
-      syncContentFilter(query, token).catch(() => {})
-    }, 180)
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'move-node', id: nodeId, x, y })
   }
+  updateGraphOverlays()
 }
 
-const tick = delta => {
-  const nodes = state.renderNodes.length > 0 ? state.renderNodes : state.visibleNodes
-  const edges = state.renderEdges.length > 0 ? state.renderEdges : state.visibleEdges
-  if (nodes.length > 1200) {
+const showTooltip = (node, pointer) => {
+  if (!elements.tooltip || !node) {
     return
   }
-  const strength = Math.min(delta / 16, 2)
-
-  edges.forEach(edge => {
-    const source = edge.sourceNode
-    const target = edge.targetNode
-    const dx = target.x - source.x
-    const dy = target.y - source.y
-    const distance = Math.max(Math.hypot(dx, dy), 1)
-    const force = (distance - 150) * 0.002 * strength
-    const fx = dx * force
-    const fy = dy * force
-    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]
-      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 => {
-    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
+  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'
+}
+
+const hideTooltip = () => {
+  if (elements.tooltip) {
+    elements.tooltip.hidden = true
+  }
+}
+
+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 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 worldPoint = event => {
-  const rect = canvas.getBoundingClientRect()
-  return {
-    x: (event.clientX - rect.left - state.transform.x) / state.transform.scale,
-    y: (event.clientY - rect.top - state.transform.y) / state.transform.scale
+const drawLabels = () => {
+  if (!elements.labels) {
+    return
   }
+
+  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 hitNode = point => {
-  if (state.nodes.length > largeGraphNodeThreshold && state.transform.scale < 0.55) {
-    return null
+const drawMiniMap = () => {
+  const miniMap = elements.miniMap
+  if (!(miniMap instanceof HTMLCanvasElement)) {
+    return
+  }
+  const nodes = normalizeList(state.chunk.nodes)
+  const ctx = miniMap.getContext('2d')
+  if (!ctx || nodes.length === 0) {
+    return
   }
 
-  const nodes = state.renderNodes
-  for (let index = nodes.length - 1; index >= 0; index -= 1) {
-    const node = nodes[index]
-    const radius = nodeRadius(node)
-    if (Math.hypot(point.x - node.x, point.y - node.y) <= radius + 5) return node
+  const 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(13, 16, 20, 0.86)'
+  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(174, 184, 197, 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(53, 208, 162, 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 shouldDeferGraphOverlays = () => state.pointer.down || performance.now() - state.lastWheelAt < 150
+
+const updateGraphOverlays = () => {
+  if (state.overlayScheduled) {
+    return
   }
-  return null
+  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
+    }
+    elements.labels?.classList.remove('is-stale')
+    drawLabels()
+    if (state.miniMapDirty) {
+      drawMiniMap()
+      state.miniMapDirty = false
+    }
+  })
 }
 
-const baseNodeRadius = node => {
-  const degree = state.nodeDegrees.get(node.id) ?? 0
-  return 9 + Math.min(degree, 8) * 1.6
+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>'
+    })
+    .join('')
 }
 
-const nodeRadius = node => Math.max(baseNodeRadius(node), minNodePixelRadius / Math.max(state.transform.scale, 0.0001))
+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 worldViewportBounds = () => {
-  const rect = canvas.getBoundingClientRect()
-  const width = Math.max(rect.width, 320)
-  const height = Math.max(rect.height, 320)
-  const padding = viewportPaddingPx
+const listFacts = (facts) => facts
+  .map((fact) => '<li><strong>' + escapeHtml(fact.label) + ':</strong> <small>' + escapeHtml(fact.value) + '</small></li>')
+  .join('')
 
-  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 listContextLinks = (links) => {
+  if (!Array.isArray(links) || links.length === 0) {
+    return '<li><small>No context links found.</small></li>'
   }
+  return links
+    .map((link) => '<li><span>' + escapeHtml(link.title) + '</span><small>' + escapeHtml(link.priority || 'normal') + '</small></li>')
+    .join('')
 }
 
-const isNodeInViewport = (node, viewport) =>
-  node.x >= viewport.minX &&
-  node.x <= viewport.maxX &&
-  node.y >= viewport.minY &&
-  node.y <= viewport.maxY
+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 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 viewportNodeStride = () => {
-  if (state.nodes.length <= largeGraphNodeThreshold) {
-    return 1
+const linkedNodes = (node) => {
+  const nodeById = new Map((state.chunk.nodes || []).map((item) => [item[0], item]))
+  const edges = normalizeList(state.chunk.edges)
+
+  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] })
+      }
+    }
   }
 
-  if (state.transform.scale >= 0.95) {
-    return 1
+  return { outgoing, incoming }
+}
+
+const openContentDialog = () => {
+  const dialog = elements.contentDialog
+  if (!dialog.open) {
+    dialog.show()
+  }
+}
+
+const loadNodeDetails = async (nodeId) => {
+  if (!nodeId) {
+    return
   }
-  if (state.transform.scale >= 0.7) {
-    return 2
+
+  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(nodeId) + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load graph node details')
   }
-  if (state.transform.scale >= 0.48) {
-    return 3
+
+  const payload = await response.json()
+  if (!payload || typeof payload !== 'object' || !payload.node) {
+    throw new Error('Invalid graph node payload')
   }
-  if (state.transform.scale >= 0.28) {
-    return 5
+
+  const node = payload.node
+  state.selectedNodeId = node.id
+  setFocusedNodeIds(linkedNodeIds(node.id))
+
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'select', id: node.id })
   }
 
-  return 8
+  elements.contentTitle.textContent = node.title || 'Untitled'
+  elements.contentPath.textContent = node.path || ''
+
+  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 : ''
+
+  openContentDialog()
 }
 
-const computeRenderVisibility = () => {
-  const viewport = worldViewportBounds()
-  const stride = viewportNodeStride()
-  const picked = []
+const fitFromChunk = () => {
+  const nodes = normalizeList(state.chunk.nodes)
+  if (nodes.length === 0) {
+    return
+  }
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
 
-  for (let index = 0; index < state.visibleNodes.length; index += 1) {
-    const node = state.visibleNodes[index]
-    if (!isNodeInViewport(node, viewport)) {
+  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
     }
+    if (x < minX) minX = x
+    if (y < minY) minY = y
+    if (x > maxX) maxX = x
+    if (y > maxY) maxY = y
+  }
 
-    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)
-    }
+  if (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
+    return
   }
 
-  const nodes = picked.length > renderNodeBudget
-    ? picked.slice(0, renderNodeBudget)
-    : picked
-  const nodeIds = new Set(nodes.map((node) => node.id))
-  const edges = state.visibleEdges.filter((edge) => nodeIds.has(edge.source) && edge.target && nodeIds.has(edge.target))
+  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.renderNodes = nodes
-  state.renderEdges = edges
+  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 render = now => {
-  const delta = now - state.last
-  state.last = now
-  const minFrameIntervalMs = state.nodes.length > largeGraphNodeThreshold ? 48 : 16
-  if (delta < minFrameIntervalMs) {
-    requestAnimationFrame(render)
-    return
+const fetchChunk = async ({ fit } = { fit: false }) => {
+  const token = ++state.fetchToken
+  if (state.fetchAbortController) {
+    state.fetchAbortController.abort()
   }
-  const rect = canvas.getBoundingClientRect()
-  const width = Math.max(rect.width, 320)
-  const height = Math.max(rect.height, 320)
-  ctx.clearRect(0, 0, 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)
+  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())
+  })
+
+  if (state.agentId) {
+    params.set('agent', state.agentId)
+  }
+  if (state.contextId) {
+    params.set('context', state.contextId)
+  }
+
+  const requestKey = graphStreamRequestKey({ x, y, w, h })
+  if (!fit && state.lastChunkRequestKey === requestKey && state.chunk.nodes.length > 0) {
     return
   }
-  ctx.save()
-  ctx.translate(state.transform.x, state.transform.y)
-  ctx.scale(state.transform.scale, state.transform.scale)
-
-  computeRenderVisibility()
-  tick(delta)
-  const drawEdges = !(state.nodes.length > largeGraphNodeThreshold && state.transform.scale < 0.22)
-  if (drawEdges) {
-    state.renderEdges.forEach(edge => {
-    const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
-    ctx.beginPath()
-    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
-    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
-    ctx.strokeStyle = selectedEdge ? graphTheme.edgeActive : graphTheme.edge
-    ctx.lineWidth = (selectedEdge ? 1.8 : 1) + Math.min(edgeWeight(edge) - 1, 8) * 0.22
-    ctx.stroke()
-    })
+
+  const response = await fetch('/api/graph-stream?' + params.toString(), { signal: controller.signal })
+  if (!response.ok) {
+    throw new Error('Failed to fetch graph stream chunk')
   }
 
-  state.renderNodes.forEach(node => {
-    const radius = nodeRadius(node)
-    const isSelected = state.selected?.id === node.id
-    const isHovered = state.hovered?.id === node.id
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
-    ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
-    ctx.fill()
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
-    ctx.fillStyle = isSelected ? graphTheme.nodeSelected : isHovered ? graphTheme.nodeHover : graphTheme.node
-    ctx.fill()
-    ctx.lineWidth = isSelected ? 2.6 : 1.5
-    ctx.strokeStyle = isSelected ? graphTheme.nodeStrokeActive : graphTheme.nodeStroke
-    ctx.stroke()
-
-    const shouldDrawLabels =
-      isSelected ||
-      isHovered ||
-      (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
-    if (shouldDrawLabels) {
-      ctx.fillStyle = graphTheme.label
-      ctx.font = '12px Inter, system-ui, sans-serif'
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'top'
-      ctx.fillText(node.title.slice(0, 34), node.x, node.y + radius + 8)
-    }
-  })
+  const chunk = await response.json()
+  if (controller.signal.aborted) {
+    return
+  }
+  if (token !== state.fetchToken) {
+    return
+  }
 
-  ctx.restore()
-  if (state.renderNodes.length === 0) {
-    ctx.fillStyle = '#99a5b5'
-    ctx.font = '12px Inter, system-ui, sans-serif'
-    ctx.textAlign = 'center'
-    ctx.fillText('Move or zoom to reveal nearby notes', width / 2, height / 2)
-  }
-  requestAnimationFrame(render)
-}
-
-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.graph.edges
-    .filter(edge => edge.source === node.id)
-    .map(edge => withEdgeMeta(edge.target ? nodeById.get(edge.target) : { title: edge.targetTitle + ' (unresolved)', path: 'Missing note' }, edge))
-    .filter(Boolean)
-  const incoming = state.graph.edges
-    .filter(edge => edge.target === node.id)
-    .map(edge => withEdgeMeta(nodeById.get(edge.source), edge))
-    .filter(Boolean)
+  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 { outgoing, incoming }
-}
+  updateTotals()
+  updateTagCount()
 
-const fetchNodeDetails = async node => {
-  const cached = state.nodeDetails.get(node.id)
-  if (cached) {
-    return cached
+  if (fit) {
+    fitFromChunk()
   }
 
-  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(node.id) + agentQuery())
-  if (!response.ok) {
-    throw new Error('Failed to load graph node details')
+  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) })
   }
 
-  const payload = await response.json()
-  const detail = payload?.node
-  if (!detail || !detail.id) {
-    throw new Error('Invalid graph node payload')
+  updateGraphOverlays()
+  drawFallback()
+}
+
+const scheduleChunkFetch = ({ fit } = { fit: false }) => {
+  if (state.fetchTimer) {
+    clearTimeout(state.fetchTimer)
   }
-  state.nodeDetails.set(detail.id, detail)
-  return detail
+
+  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
+      }
+      console.error(error)
+    })
+  }, delay)
 }
 
-const openContentDialog = async node => {
-  if (!node) return
-  const { outgoing, incoming } = linkedNodes(node)
-  elements.contentTitle.textContent = node.title
-  elements.contentPath.textContent = node.path
-  elements.contentTags.innerHTML = node.tags.length
-    ? node.tags.map(tag => '<span>#' + escapeHtml(tag) + '</span>').join('')
-    : '<span>No tags</span>'
-  elements.contentOutgoing.innerHTML = list(outgoing)
-  elements.contentIncoming.innerHTML = list(incoming)
-  elements.contentBody.textContent = 'Loading note content...'
-  if (!elements.contentDialog.open) {
-    elements.contentDialog.showModal()
+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 pickFallbackNode = (screenX, screenY) => {
+  const nodes = spatialCandidates(screenX, screenY)
+  if (nodes.length === 0) {
+    return null
   }
 
-  try {
-    const detailedNode = await fetchNodeDetails(node)
-    if (state.selected?.id !== node.id) {
-      return
+  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(2.4, Math.min(14, 4 + (Number.isFinite(weight) ? weight : 0) * 0.55))
+    const distance = Math.hypot(screenX - point.x, screenY - point.y)
+    if (distance <= radius && distance < bestDistance) {
+      bestDistance = distance
+      bestNode = node
     }
-    elements.contentBody.textContent = detailedNode.content
-  } catch {
-    elements.contentBody.textContent = 'Unable to load note content.'
   }
+
+  return bestNode
 }
 
-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 pickFallbackNodeId = (screenX, screenY) => {
+  const node = pickFallbackNode(screenX, screenY)
+  return typeof node?.[0] === 'string' ? node[0] : ''
 }
 
-const selectNodeById = id => {
-  const node = state.nodes.find(item => item.id === id)
-  if (node) selectNode(node, { openContent: true })
+const pickAt = (screenX, screenY) => {
+  if (state.rendererMode === 'fallback') {
+    const nodeId = pickFallbackNodeId(screenX, screenY)
+    if (nodeId) {
+      loadNodeDetails(nodeId).catch((error) => console.error(error))
+    }
+    return
+  }
+
+  if (!state.renderWorker || !state.workerReady) {
+    return
+  }
+
+  const requestId = Math.random().toString(36).slice(2)
+  state.renderWorker.postMessage({
+    type: 'pick',
+    requestId,
+    x: screenX,
+    y: screenY
+  })
 }
 
 const zoomAtPoint = (screenX, screenY, factor) => {
-  const nextScale = clampScale(state.transform.scale * factor)
-  if (nextScale === state.transform.scale) return
-  const worldX = (screenX - state.transform.x) / state.transform.scale
-  const worldY = (screenY - state.transform.y) / state.transform.scale
-  state.transform.scale = nextScale
-  state.transform.x = screenX - worldX * nextScale
-  state.transform.y = screenY - worldY * nextScale
-}
-
-const bindEvents = () => {
-  window.addEventListener('resize', resize)
-  elements.search.addEventListener('input', event => {
-    state.query = event.target.value
-    recomputeVisibility()
-    scheduleContentFilterSync()
+  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 resolvePointer = (event) => {
+  const rect = canvas.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  }
+}
+
+const setupInput = () => {
+  const dragActivationDistance = 6
+
+  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) => {
+    const pointer = resolvePointer(event)
+    const candidateNode = pickFallbackNode(pointer.x, pointer.y)
+    const candidateNodeId = candidateNode?.[6] === 'node' && 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
+    canvas.setPointerCapture(event.pointerId)
   })
-  elements.agent.addEventListener('change', event => {
-    state.agentId = event.target.value
-    state.selected = null
-    state.nodeDetails = new Map()
-    resetContentFilter()
-    recomputeVisibility()
-    scheduleContentFilterSync()
-    loadGraph({ reset: true }).catch(error => {
-      console.error(error)
-    })
+
+  canvas.addEventListener('pointermove', (event) => {
+    const pointer = resolvePointer(event)
+
+    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
+    }
+
+    const hovered = pickFallbackNode(pointer.x, pointer.y)
+    const hoveredId = hovered?.[6] === 'node' && 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 {
+      hideTooltip()
+    }
   })
+
+  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)
+    state.pointer.down = false
+    state.pointer.dragging = false
+    canvas.classList.remove('is-node-dragging')
+    state.pointer.dragNodeId = ''
+    canvas.releasePointerCapture(event.pointerId)
+
+    if (shouldPick) {
+      pickAt(pointer.x, pointer.y)
+      return
+    }
+    if (shouldPersistNodePosition) {
+      writeStoredNodePositions()
+      persistNodePositionsToServer()
+      return
+    }
+    if (shouldRefreshAfterDrag) {
+      scheduleChunkFetch()
+    }
+  })
+
+  canvas.addEventListener('pointerleave', () => {
+    state.hoveredNodeId = ''
+    canvas.classList.remove('is-node-hover')
+    hideTooltip()
+    updateGraphOverlays()
+  })
+
+  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)
+  })
+
+  window.addEventListener('keydown', (event) => {
+    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 setupControls = () => {
   elements.zoomIn.addEventListener('click', () => {
-    const rect = canvas.getBoundingClientRect()
-    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.18)
+    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
   })
+
   elements.zoomOut.addEventListener('click', () => {
-    const rect = canvas.getBoundingClientRect()
-    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.84)
+    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
   })
-  if (elements.fit) {
-    elements.fit.addEventListener('click', () => {
-      fitView({ useFiltered: true })
-    })
-  }
+
+  elements.fit.addEventListener('click', () => {
+    fitFromChunk()
+    scheduleChunkFetch()
+  })
+
+  elements.releaseNode.addEventListener('click', () => {
+    releaseSelectedNodePosition()
+  })
+
   elements.reset.addEventListener('click', () => {
-    resetView()
+    clearStoredNodePositions()
+    clearNodePositionsOnServer()
+    state.camera = { x: 0, y: 0, scale: 0.22 }
+    updateWorkerCamera()
+    scheduleChunkFetch({ fit: true })
   })
-  elements.contentClose.addEventListener('click', () => elements.contentDialog.close())
-  elements.contentDialog.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()
+
+  elements.contentClose.addEventListener('click', () => {
+    elements.contentDialog.close()
   })
-  canvas.addEventListener('wheel', event => {
-    event.preventDefault()
-    const rect = canvas.getBoundingClientRect()
-    const cursorX = event.clientX - rect.left
-    const cursorY = event.clientY - rect.top
-    const factor = event.deltaY < 0 ? 1.08 : 0.92
-    zoomAtPoint(cursorX, cursorY, factor)
-  }, { passive: false })
-  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
+
+  elements.contentDialog.addEventListener('click', (event) => {
+    if (event.target === elements.contentDialog) {
+      elements.contentDialog.close()
     }
-    canvas.setPointerCapture(event.pointerId)
   })
-  canvas.addEventListener('pointermove', event => {
-    const point = worldPoint(event)
-    state.hovered = hitNode(point)
-    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) {
-      state.pointer.dragNode.x = point.x
-      state.pointer.dragNode.y = point.y
-      return
+
+  elements.search.addEventListener('input', () => {
+    if (state.searchTimer) {
+      clearTimeout(state.searchTimer)
     }
-    state.transform.x += dx
-    state.transform.y += dy
-  })
-  canvas.addEventListener('pointerup', event => {
-    if (state.pointer.dragNode && !state.pointer.moved) selectNode(state.pointer.dragNode, { openContent: true })
-    if (!state.pointer.dragNode && !state.pointer.moved) selectNode(state.hovered, { openContent: true })
-    state.pointer = { x: 0, y: 0, down: false, dragNode: null, moved: false }
-    canvas.releasePointerCapture(event.pointerId)
+    state.searchTimer = setTimeout(() => {
+      state.searchTimer = null
+      runGraphSearch().catch((error) => console.error(error))
+    }, 160)
   })
 }
 
+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
+  }
+
+  const response = await fetch('/api/graph-filter?q=' + encodeURIComponent(query) + '&limit=1800' + scopeQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to search graph')
+  }
+  const payload = await response.json()
+  if (token !== state.searchToken) {
+    return
+  }
+
+  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 })
+  }
+  if (ids.length > 0 && state.graphMode === 'far') {
+    state.camera.scale = Math.max(state.camera.scale, 0.82)
+    updateWorkerCamera()
+    scheduleChunkFetch()
+  }
+}
+
 const loadAgents = async () => {
   const response = await fetch('/api/agents')
+  if (!response.ok) {
+    throw new Error('Failed to load agents')
+  }
+
   const payload = await response.json()
-  const agents = Array.isArray(payload.agents) ? payload.agents : []
-  const currentExists = agents.some(agent => agent.id === state.agentId)
-  const selected = currentExists
-    ? state.agentId
-    : (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
-  if (signature !== state.agentsSignature) {
-    elements.agent.innerHTML = agents.length
-      ? agents.map(agent => '<option value="' + escapeHtml(agent.id) + '">' + escapeHtml(agent.id) + ' · ' + agent.documentCount + '</option>').join('')
-      : '<option value="shared">shared · 0</option>'
-    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
+  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('')
+
+  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
+
+  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))
   })
 
-  if (response.status === 304) {
-    return
+  syncAgentInUrl(state.agentId)
+}
+
+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 graph = payload?.layout ?? payload
-  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.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()
-  resetContentFilter()
-  recomputeVisibility()
-  scheduleContentFilterSync()
-  const tags = new Set(graph.nodes.flatMap(node => node.tags))
-  setGraphStatus(state.agentId + ' · ' + graph.nodes.length + ' notes · ' + graph.edges.length + ' links · live')
-  elements.nodeCount.textContent = graph.nodes.length
-  elements.edgeCount.textContent = graph.edges.length
-  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()
-  }
+  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>'
+    })
+  ]
+
+  elements.context.innerHTML = options.join('')
+
+  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)
 }
 
-bindEvents()
-requestAnimationFrame(() => {
-  resize()
-  resetView()
-})
+const setupContextControl = () => {
+  elements.context.addEventListener('change', () => {
+    state.contextId = elements.context.value || ''
+    state.selectedNodeId = null
+    writeStoredContext(state.contextId)
+    syncContextInUrl(state.contextId)
+    scheduleChunkFetch({ fit: true })
+  })
+}
 
-const pollIntervalMs = 5000
-let tickCounter = 0
+const setupRenderWorker = () => {
+  const hasWorker = typeof Worker !== 'undefined'
+  const canTransfer = typeof canvas.transferControlToOffscreen === 'function'
 
-const refreshGraphLoop = () => {
-  if (document.hidden) {
+  if (!hasWorker || !canTransfer) {
+    state.rendererMode = 'fallback'
+    drawFallback()
     return
   }
 
-  loadGraph().catch(handleGraphRefreshError)
+  try {
+    const offscreen = canvas.transferControlToOffscreen()
+    const worker = new Worker('/render-worker.js')
+    state.renderWorker = worker
+
+    worker.onmessage = (event) => {
+      const payload = event.data
+      if (!payload || typeof payload !== 'object') {
+        return
+      }
+
+      if (payload.type === 'ready') {
+        state.workerReady = true
+        scheduleChunkFetch({ fit: true })
+        return
+      }
+
+      if (payload.type === 'pick-result') {
+        if (payload.node && typeof payload.node.id === 'string' && payload.node.id.length > 0) {
+          loadNodeDetails(payload.node.id).catch((error) => console.error(error))
+        }
+        return
+      }
+
+      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
+      }
+
+      if (payload.type === 'fatal') {
+        console.error(payload.message)
+        state.rendererMode = 'fallback'
+        state.workerReady = false
+        state.renderWorker.terminate()
+        state.renderWorker = null
+        drawFallback()
+      }
+    }
 
-  tickCounter += 1
-  if (tickCounter % 3 === 0) {
-    loadAgents().catch((error) => {
-      console.error(error)
-    })
+    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()
   }
 }
 
-loadAgents()
-  .then(() => loadGraph({ reset: true }))
-  .then(() => {
-    requestAnimationFrame(render)
-    setInterval(refreshGraphLoop, pollIntervalMs)
+const wireNodeLinkClicks = () => {
+  const dialog = elements.contentDialog
+  dialog.addEventListener('click', (event) => {
+    const target = event.target
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    const button = target.closest('button[data-node-id]')
+    if (!button) {
+      return
+    }
+
+    const id = button.getAttribute('data-node-id') || ''
+    if (id) {
+      loadNodeDetails(id).catch((error) => console.error(error))
+    }
   })
-  .catch(error => {
-    console.error(error)
+}
+
+const bootstrap = async () => {
+  setViewportFromCanvas()
+  setupRenderWorker()
+  setupInput()
+  setupControls()
+  setupContextControl()
+  wireNodeLinkClicks()
+
+  window.addEventListener('resize', () => {
+    setViewportFromCanvas()
+    scheduleChunkFetch()
   })
 
-document.addEventListener('visibilitychange', () => {
-  if (document.hidden) {
-    return
-  }
+  await loadAgents()
+  await loadContexts()
+  updateTotals()
+  updateTagCount()
 
-  loadGraph({ reset: true }).catch(handleGraphRefreshError)
+  scheduleChunkFetch({ fit: true })
+}
+
+bootstrap().catch((error) => {
+  console.error(error)
 })
 `;