@andespindola/brainlink 0.1.0-beta.15 → 0.1.0-beta.150

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

@@ -1,35 +1,6 @@
 export const createClientJs = () => `const canvas = document.getElementById('graph')
-const ctx = canvas.getContext('2d')
-const largeGraphNodeThreshold = 4000
-const largeGraphEdgeRenderLimit = 16000
-const state = {
-  graph: { nodes: [], edges: [] },
-  nodes: [],
-  edges: [],
-  visibleNodes: [],
-  visibleEdges: [],
-  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;')
+const ctx2dFallback = canvas.getContext('2d')
+const byId = (id) => document.getElementById(id)
 const elements = {
   search: byId('search'),
   agent: byId('agent'),
@@ -43,6 +14,8 @@ const elements = {
   contentDialog: byId('contentDialog'),
   contentTitle: byId('contentTitle'),
   contentPath: byId('contentPath'),
+  contentFacts: byId('contentFacts'),
+  contentContextLinks: byId('contentContextLinks'),
   contentTags: byId('contentTags'),
   contentOutgoing: byId('contentOutgoing'),
   contentIncoming: byId('contentIncoming'),
@@ -50,661 +23,922 @@ const elements = {
   contentClose: byId('contentClose')
 }
 
+const state = {
+  camera: {
+    x: 0,
+    y: 0,
+    scale: 0.22
+  },
+  pointer: {
+    down: false,
+    moved: false,
+    dragging: false,
+    x: 0,
+    y: 0,
+    startX: 0,
+    startY: 0,
+    worldAnchorX: 0,
+    worldAnchorY: 0
+  },
+  viewport: {
+    width: 320,
+    height: 320,
+    ratio: window.devicePixelRatio || 1
+  },
+  workerReady: false,
+  rendererMode: 'worker',
+  renderWorker: null,
+  agentId: '',
+  graphSignature: '',
+  graphMode: 'near',
+  chunk: {
+    nodes: [],
+    edges: []
+  },
+  selectedNodeId: null,
+  searchToken: 0,
+  fetchToken: 0,
+  fetchTimer: null,
+  fetchAbortController: null,
+  cameraSyncScheduled: false,
+  lastDragFetchAt: 0,
+  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 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 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 normalizeQuery = value => value.trim().toLowerCase()
+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 agentQuery = (separator = '?') => state.agentId ? separator + 'agent=' + encodeURIComponent(state.agentId) : ''
+
+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 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 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 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 clampScale = (scale) => Math.max(zoomRange.min, Math.min(zoomRange.max, scale))
 
-  return localFilteredNodes(query)
+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 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
+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 edgeWeight = edge => Number.isFinite(edge.weight) ? Math.max(1, edge.weight) : 1
+const screenToWorld = (screenX, screenY) => ({
+  x: (screenX - state.camera.x) / state.camera.scale,
+  y: (screenY - state.camera.y) / state.camera.scale
+})
 
-const clampScale = value => Math.max(zoomRange.min, Math.min(zoomRange.max, value))
+const worldToScreen = (x, y) => ({
+  x: x * state.camera.scale + state.camera.x,
+  y: y * state.camera.scale + state.camera.y
+})
 
-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
+const drawFallback = () => {
+  if (state.rendererMode !== 'fallback' || !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)
 
-  nodes.forEach(node => {
-    const radius = nodeRadius(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 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])
+  }
 
-  return {
-    minX,
-    maxX,
-    minY,
-    maxY,
-    width: Math.max(maxX - minX, 1),
-    height: Math.max(maxY - minY, 1)
+  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 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 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
+}
 
-  if (!bounds) {
-    state.transform = { x: width / 2, y: height / 2, scale: 1 }
+const updateWorkerCamera = () => {
+  if (!state.renderWorker || !state.workerReady) {
     return
   }
-
-  const padding = 100
-  const scaleX = width / (bounds.width + padding * 2)
-  const scaleY = height / (bounds.height + padding * 2)
-  const scale = clampScale(Math.min(scaleX, scaleY))
-  const centerX = (bounds.minX + bounds.maxX) / 2
-  const centerY = (bounds.minY + bounds.maxY) / 2
-
-  state.transform = {
-    x: width / 2 - centerX * scale,
-    y: height / 2 - centerY * scale,
-    scale
+  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
+    })
+  })
 }
 
-const resetView = () => fitView({ useFiltered: false })
+const updateWorkerSize = () => {
+  if (!state.renderWorker || !state.workerReady) {
+    return
+  }
+  state.renderWorker.postMessage({
+    type: 'resize',
+    width: state.viewport.width,
+    height: state.viewport.height,
+    devicePixelRatio: state.viewport.ratio
+  })
+}
 
-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 }
+const normalizeList = (items) => Array.isArray(items) ? items : []
+
+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 encodeEntityTag = (value) => {
-  const utf8 = new TextEncoder().encode(value)
-  let binary = ''
+const extractContextLinks = (content) => {
+  if (typeof content !== 'string' || content.length === 0) {
+    return []
+  }
+  const lines = content.split(/\\r?\\n/)
+  let start = -1
+  for (let index = 0; index < lines.length; index += 1) {
+    if (/^#{1,6}\\s+(?:context\\s+links?|links?\\s+de\\s+contexto)\\b/i.test(lines[index].trim())) {
+      start = index + 1
+      break
+    }
+  }
+  if (start < 0) {
+    return []
+  }
 
-  for (let index = 0; index < utf8.length; index += 1) {
-    binary += String.fromCharCode(utf8[index])
+  const links = []
+  const seenTitles = new Set()
+  for (let index = start; index < lines.length; index += 1) {
+    const line = lines[index].trim()
+    if (!line) {
+      continue
+    }
+    if (/^#{1,6}\\s+/.test(line)) {
+      break
+    }
+    const matches = Array.from(line.matchAll(/\\[\\[([^\\]]+)\\]\\]/g))
+    if (matches.length === 0) {
+      continue
+    }
+    const priorityMatch = line.match(/#(critical|important)\\b|priority:\\s*(high|critical)/i)
+    const priority = priorityMatch ? String(priorityMatch[1] || priorityMatch[2] || 'normal').toLowerCase() : 'normal'
+
+    for (let matchIndex = 0; matchIndex < matches.length; matchIndex += 1) {
+      const title = String(matches[matchIndex][1] || '').trim()
+      if (!title || seenTitles.has(title.toLowerCase())) {
+        continue
+      }
+      seenTitles.add(title.toLowerCase())
+      links.push({ title, priority })
+    }
   }
+  return links
+}
 
-  return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/g, '')
+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 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 listFacts = (facts) => facts
+  .map((fact) => '<li><strong>' + escapeHtml(fact.label) + ':</strong> <small>' + escapeHtml(fact.value) + '</small></li>')
+  .join('')
 
-const resetContentFilter = () => {
-  if (state.contentFilter.timer) {
-    clearTimeout(state.contentFilter.timer)
+const listContextLinks = (links) => {
+  if (!Array.isArray(links) || links.length === 0) {
+    return '<li><small>No context links found.</small></li>'
   }
-  state.contentFilter = {
-    query: '',
-    ids: null,
-    token: state.contentFilter.token + 1,
-    timer: null
+  return links
+    .map((link) => '<li><span>' + escapeHtml(link.title) + '</span><small>' + escapeHtml(link.priority || 'normal') + '</small></li>')
+    .join('')
+}
+
+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] })
+      }
+    }
   }
-  recomputeVisibility()
+
+  return { outgoing, incoming }
 }
 
-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 openContentDialog = () => {
+  const dialog = elements.contentDialog
+  if (!dialog.open) {
+    dialog.show()
+  }
+}
 
-  if (!response.ok || token !== state.contentFilter.token) {
+const loadNodeDetails = async (nodeId) => {
+  if (!nodeId) {
     return
   }
 
+  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(nodeId) + agentQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load graph node details')
+  }
+
   const payload = await response.json()
-  const nodeIds = Array.isArray(payload?.nodeIds) ? payload.nodeIds.filter(id => typeof id === 'string') : []
-  if (token !== state.contentFilter.token) {
-    return
+  if (!payload || typeof payload !== 'object' || !payload.node) {
+    throw new Error('Invalid graph node payload')
+  }
+
+  const node = payload.node
+  state.selectedNodeId = node.id
+
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'select', id: node.id })
   }
 
-  state.contentFilter.query = query
-  state.contentFilter.ids = new Set(nodeIds)
-  recomputeVisibility()
+  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 = extractContextLinks(node.content)
+  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 scheduleContentFilterSync = () => {
-  const query = normalizeQuery(state.query)
-  if (!query) {
-    resetContentFilter()
+const fitFromChunk = () => {
+  const nodes = normalizeList(state.chunk.nodes)
+  if (nodes.length === 0) {
     return
   }
 
-  if (state.contentFilter.timer) {
-    clearTimeout(state.contentFilter.timer)
+  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
+    }
+    if (x < minX) minX = x
+    if (y < minY) minY = y
+    if (x > maxX) maxX = x
+    if (y > maxY) maxY = y
   }
 
-  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 (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
+    return
   }
+
+  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 tick = delta => {
-  const nodes = state.visibleNodes
-  const edges = state.visibleEdges
-  if (nodes.length > 1200) {
+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())
+  })
+
+  if (state.agentId) {
+    params.set('agent', state.agentId)
+  }
+
+  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 chunk = await response.json()
+  if (controller.signal.aborted) {
+    return
+  }
+  if (token !== state.fetchToken) {
     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
-    }
+  state.graphSignature = typeof chunk.signature === 'string' ? chunk.signature : ''
+  state.graphMode = typeof chunk.mode === 'string' ? chunk.mode : 'near'
+  state.chunk = {
+    nodes: normalizeList(chunk.nodes),
+    edges: normalizeList(chunk.edges)
+  }
+  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
   }
 
-  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
-  })
+  updateTotals()
+  updateTagCount()
+
+  if (fit) {
+    fitFromChunk()
+  }
+
+  if (state.renderWorker && state.workerReady) {
+    state.renderWorker.postMessage({ type: 'chunk', chunk })
+    state.renderWorker.postMessage({ type: 'select', id: state.selectedNodeId })
+  }
+
+  drawFallback()
 }
 
-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 scheduleChunkFetch = ({ fit } = { fit: false }) => {
+  if (state.fetchTimer) {
+    clearTimeout(state.fetchTimer)
   }
+
+  const now = performance.now()
+  const recentlyWheeling = now - state.lastWheelAt < 180
+  const delay = fit ? 0 : (state.pointer.down ? 120 : (recentlyWheeling ? 140 : 48))
+  state.fetchTimer = setTimeout(() => {
+    state.fetchTimer = null
+    fetchChunk({ fit }).catch((error) => {
+      if (error && error.name === 'AbortError') {
+        return
+      }
+      console.error(error)
+    })
+  }, delay)
+}
+
+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
+  updateWorkerSize()
+  drawFallback()
 }
 
-const hitNode = point => {
-  if (state.nodes.length > largeGraphNodeThreshold && state.transform.scale < 0.55) {
-    return null
+const pickFallbackNodeId = (screenX, screenY) => {
+  const nodes = normalizeList(state.chunk.nodes)
+  if (nodes.length === 0) {
+    return ''
   }
 
-  const nodes = state.visibleNodes
-  for (let index = nodes.length - 1; index >= 0; index -= 1) {
+  let bestId = ''
+  let bestDistance = Infinity
+  for (let index = 0; index < nodes.length; 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 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
+      bestId = id
+    }
   }
-  return null
-}
 
-const nodeRadius = node => {
-  const degree = state.nodeDegrees.get(node.id) ?? 0
-  return 9 + Math.min(degree, 8) * 1.6
+  return bestId
 }
 
-const render = now => {
-  const delta = now - state.last
-  state.last = now
-  const minFrameIntervalMs = state.nodes.length > largeGraphNodeThreshold ? 180 : 16
-  if (delta < minFrameIntervalMs) {
-    requestAnimationFrame(render)
+const pickAt = (screenX, screenY) => {
+  if (state.rendererMode === 'fallback') {
+    const nodeId = pickFallbackNodeId(screenX, screenY)
+    if (nodeId) {
+      loadNodeDetails(nodeId).catch((error) => console.error(error))
+    }
     return
   }
-  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)
+
+  if (!state.renderWorker || !state.workerReady) {
     return
   }
-  ctx.save()
-  ctx.translate(state.transform.x, state.transform.y)
-  ctx.scale(state.transform.scale, state.transform.scale)
-
-  tick(delta)
-  const drawEdges = !(state.nodes.length > largeGraphNodeThreshold && state.transform.scale < 0.22)
-  if (drawEdges) {
-    state.visibleEdges.forEach(edge => {
-    const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
-    ctx.beginPath()
-    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
-    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
-    ctx.strokeStyle = selectedEdge ? graphTheme.edgeActive : graphTheme.edge
-    ctx.lineWidth = (selectedEdge ? 1.8 : 1) + Math.min(edgeWeight(edge) - 1, 8) * 0.22
-    ctx.stroke()
-    })
-  }
 
-  state.visibleNodes.forEach(node => {
-    const radius = nodeRadius(node)
-    const isSelected = state.selected?.id === node.id
-    const isHovered = state.hovered?.id === node.id
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
-    ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
-    ctx.fill()
-    ctx.beginPath()
-    ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
-    ctx.fillStyle = isSelected ? graphTheme.nodeSelected : isHovered ? graphTheme.nodeHover : graphTheme.node
-    ctx.fill()
-    ctx.lineWidth = isSelected ? 2.6 : 1.5
-    ctx.strokeStyle = isSelected ? graphTheme.nodeStrokeActive : graphTheme.nodeStroke
-    ctx.stroke()
-
-    const shouldDrawLabels =
-      isSelected ||
-      isHovered ||
-      (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
-    if (shouldDrawLabels) {
-      ctx.fillStyle = graphTheme.label
-      ctx.font = '12px Inter, system-ui, sans-serif'
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'top'
-      ctx.fillText(node.title.slice(0, 34), node.x, node.y + radius + 8)
-    }
+  const requestId = Math.random().toString(36).slice(2)
+  state.renderWorker.postMessage({
+    type: 'pick',
+    requestId,
+    x: screenX,
+    y: screenY
   })
+}
 
-  ctx.restore()
-  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)
-
-  return { outgoing, incoming }
+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 fetchNodeDetails = async node => {
-  const cached = state.nodeDetails.get(node.id)
-  if (cached) {
-    return cached
+const resolvePointer = (event) => {
+  const rect = canvas.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
   }
+}
 
-  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 setupInput = () => {
+  const dragActivationDistance = 6
 
-  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
-}
+  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 })
 
-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()
-  }
+  canvas.addEventListener('pointerdown', (event) => {
+    const pointer = resolvePointer(event)
+    state.pointer.down = true
+    state.pointer.moved = false
+    state.pointer.dragging = false
+    state.pointer.x = pointer.x
+    state.pointer.y = pointer.y
+    state.pointer.startX = pointer.x
+    state.pointer.startY = pointer.y
+    const world = screenToWorld(pointer.x, pointer.y)
+    state.pointer.worldAnchorX = world.x
+    state.pointer.worldAnchorY = world.y
+    canvas.setPointerCapture(event.pointerId)
+  })
 
-  try {
-    const detailedNode = await fetchNodeDetails(node)
-    if (state.selected?.id !== node.id) {
+  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
+      }
+      if (!state.pointer.dragging) {
+        state.pointer.x = pointer.x
+        state.pointer.y = pointer.y
+        return
+      }
+      state.camera.x += dx
+      state.camera.y += dy
+      state.pointer.x = pointer.x
+      state.pointer.y = pointer.y
+      updateWorkerCamera()
+      const now = performance.now()
+      if (now - state.lastDragFetchAt > 180) {
+        state.lastDragFetchAt = now
+        scheduleChunkFetch()
+      }
+      drawFallback()
       return
     }
-    elements.contentBody.textContent = detailedNode.content
-  } 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 })
-}
+  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
+    state.pointer.down = false
+    state.pointer.dragging = false
+    canvas.releasePointerCapture(event.pointerId)
 
-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()
+    if (shouldPick) {
+      pickAt(pointer.x, pointer.y)
+      return
+    }
+    if (shouldRefreshAfterDrag) {
+      scheduleChunkFetch()
+    }
   })
-  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('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.reset.addEventListener('click', () => {
-    resetView()
+    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
+
+  elements.search.addEventListener('input', () => {
+    const token = ++state.searchToken
+    const query = (elements.search.value || '').trim()
+    if (!query) {
+      if (state.renderWorker && state.workerReady) {
+        state.renderWorker.postMessage({ type: 'highlight', ids: [] })
+      }
       return
     }
-    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)
+
+    fetch('/api/graph-filter?q=' + encodeURIComponent(query) + '&limit=1800' + agentQuery('&'))
+      .then((response) => response.json())
+      .then((payload) => {
+        if (token !== state.searchToken) {
+          return
+        }
+        const ids = Array.isArray(payload?.nodeIds) ? payload.nodeIds : []
+        if (state.renderWorker && state.workerReady) {
+          state.renderWorker.postMessage({ type: 'highlight', ids })
+        }
+      })
+      .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 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
-  })
-
-  if (response.status === 304) {
-    return
+  if (!response.ok) {
+    throw new Error('Failed to load agents')
   }
 
   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 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)
+    scheduleChunkFetch({ fit: true })
+  })
 
-bindEvents()
-requestAnimationFrame(() => {
-  resize()
-  resetView()
-})
+  syncAgentInUrl(state.agentId)
+}
 
-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()
+  wireNodeLinkClicks()
+
+  window.addEventListener('resize', () => {
+    setViewportFromCanvas()
+    scheduleChunkFetch()
   })
 
-document.addEventListener('visibilitychange', () => {
-  if (document.hidden) {
-    return
+  await loadAgents()
+  updateTotals()
+  updateTagCount()
+
+  if (state.rendererMode === 'fallback') {
+    scheduleChunkFetch({ fit: true })
   }
+}
 
-  loadGraph({ reset: true }).catch(handleGraphRefreshError)
+bootstrap().catch((error) => {
+  console.error(error)
 })
 `;