@andespindola/brainlink 0.1.0-beta.6 → 0.1.0-beta.61

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

@@ -1,19 +1,68 @@
 export const createClientJs = () => `const canvas = document.getElementById('graph')
 const ctx = canvas.getContext('2d')
+const largeGraphNodeThreshold = 4000
+const massiveGraphNodeThreshold = 20000
+const largeGraphEdgeRenderLimit = 120000
+const renderNodeBudget = 900
+const renderEdgeBudget = 2400
+const clusterActivationNodeThreshold = 600
+const clusterZoomThreshold = 0.18
+const macroGalaxyZoomThreshold = 0.012
+const massiveAutoFitMacroScale = 0.006
+const defaultMacroScale = 0.006
+const clusterCellPixelSize = 64
+const minNodePixelRadius = 2.3
+const viewportPaddingPx = 280
+const worldCoordinateLimit = 5_000_000
+const transformCoordinateLimit = 20_000_000
+const hoverHitTestIntervalMs = 64
+const overviewClusterMaxCount = 1400
+const zoomRecoveryGuardMs = 1500
+const zoomCapTargetViewportShare = 0.72
+const meshEdgeScaleThreshold = 0.09
+const meshEdgeMinBudget = 140
+const meshEdgeMaxBudget = 1400
+const layeredCoreScaleThreshold = 0.55
 const state = {
   graph: { nodes: [], edges: [] },
   nodes: [],
+  nodeById: new Map(),
   edges: [],
+  visibleNodes: [],
+  visibleEdges: [],
+  renderNodes: [],
+  renderEdges: [],
+  renderClusters: [],
+  nodeDegrees: new Map(),
   selected: null,
   hovered: null,
   query: '',
+  contentFilter: { query: '', ids: null, token: 0, timer: null },
   agentId: '',
   agentsSignature: '',
+  nodeDetails: new Map(),
   transform: { x: 0, y: 0, scale: 1 },
   pointer: { x: 0, y: 0, down: false, dragNode: null, moved: false },
+  cursor: { x: 0, y: 0, inCanvas: false },
   graphSignature: '',
   graphStatus: '',
-  last: performance.now()
+  graphTotals: { nodes: 0, edges: 0 },
+  last: performance.now(),
+  offscreenFrameCount: 0,
+  recoveringViewport: false,
+  renderVisibilityDirty: true,
+  lastViewportKey: '',
+  visibleNodeSpatial: { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() },
+  visibleEdgeByNode: new Map(),
+  overviewClusters: [],
+  macroCenter: { x: 0, y: 0 },
+  macroRepresentative: null,
+  primaryHub: null,
+  hubNeighborDistance: Number.POSITIVE_INFINITY,
+  filterWorker: null,
+  filterReady: false,
+  lastHoverHitAt: 0,
+  lastManualZoomAt: 0
 }
 
 const byId = id => document.getElementById(id)
@@ -24,97 +73,1119 @@ const escapeHtml = value => String(value)
   .replaceAll('"', '"')
   .replaceAll("'", ''')
 const elements = {
-  stats: byId('stats'),
   search: byId('search'),
   agent: byId('agent'),
-  title: byId('title'),
-  path: byId('path'),
-  tags: byId('tags'),
-  notes: byId('notes'),
-  content: byId('content'),
-  outgoing: byId('outgoing'),
-  incoming: byId('incoming'),
   nodeCount: byId('nodeCount'),
   edgeCount: byId('edgeCount'),
   tagCount: byId('tagCount'),
   zoomIn: byId('zoomIn'),
   zoomOut: byId('zoomOut'),
-  reset: byId('reset')
+  fit: byId('fit'),
+  reset: byId('reset'),
+  contentDialog: byId('contentDialog'),
+  contentTitle: byId('contentTitle'),
+  contentPath: byId('contentPath'),
+  contentTags: byId('contentTags'),
+  contentOutgoing: byId('contentOutgoing'),
+  contentIncoming: byId('contentIncoming'),
+  contentBody: byId('contentBody'),
+  contentClose: byId('contentClose')
 }
 
-const agentQuery = () => state.agentId ? '?agent=' + encodeURIComponent(state.agentId) : ''
+const zoomRange = {
+  min: 0.0002,
+  max: 4.5
+}
+
+const initialAgentFromUrl = (() => {
+  try {
+    const raw = new URL(window.location.href).searchParams.get('agent')
+    const value = raw?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
+})()
+
+const selectedAgentStorageKey = 'brainlink:selected-agent'
+
+const readStoredAgent = () => {
+  try {
+    const value = window.localStorage.getItem(selectedAgentStorageKey)?.trim() ?? ''
+    return value.length > 0 ? value : ''
+  } catch {
+    return ''
+  }
+}
+
+const writeStoredAgent = (agentId) => {
+  try {
+    if (!agentId) {
+      window.localStorage.removeItem(selectedAgentStorageKey)
+      return
+    }
+    window.localStorage.setItem(selectedAgentStorageKey, agentId)
+  } catch {}
+}
+
+const syncAgentInUrl = (agentId) => {
+  try {
+    const url = new URL(window.location.href)
+    if (agentId && agentId.trim().length > 0) {
+      url.searchParams.set('agent', agentId)
+    } else {
+      url.searchParams.delete('agent')
+    }
+    window.history.replaceState({}, '', url.toString())
+  } catch {}
+}
+
+const agentQuery = (separator = '?') => state.agentId ? separator + 'agent=' + encodeURIComponent(state.agentId) : ''
 
 const setGraphStatus = text => {
   state.graphStatus = text
-  elements.stats.textContent = text
 }
 
-const handleGraphRefreshError = error => {
-  if (state.graphSignature) {
-    elements.stats.textContent = state.graphStatus
-    console.error(error)
-    return
+const handleGraphRefreshError = error => {
+  console.error(error)
+}
+
+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 initFilterWorker = () => {
+  if (typeof Worker === 'undefined') {
+    return
+  }
+  try {
+    const worker = new Worker('/app-worker.js')
+    worker.onmessage = event => {
+      const payload = event.data
+      if (!payload || typeof payload !== 'object') return
+
+      if (payload.type === 'ready') {
+        state.filterReady = true
+        if (state.nodes.length > 0) {
+          worker.postMessage({
+            type: 'load-nodes',
+            nodes: state.nodes.map(node => ({
+              id: node.id,
+              title: node.title,
+              path: node.path || '',
+              tags: Array.isArray(node.tags) ? node.tags : []
+            }))
+          })
+        }
+        return
+      }
+
+      if (payload.type === 'filter-result') {
+        const token = payload.token
+        if (token !== state.contentFilter.token) {
+          return
+        }
+
+        const ids = Array.isArray(payload.ids) ? payload.ids.filter(id => typeof id === 'string') : []
+        state.contentFilter.query = normalizeQuery(state.query)
+        state.contentFilter.ids = new Set(ids)
+        recomputeVisibility()
+      }
+    }
+    state.filterWorker = worker
+  } catch {
+    state.filterWorker = null
+    state.filterReady = false
+  }
+}
+
+const pushNodesToFilterWorker = () => {
+  if (!state.filterWorker || !state.filterReady) {
+    return
+  }
+
+  state.filterWorker.postMessage({
+    type: 'load-nodes',
+    nodes: state.nodes.map(node => ({
+      id: node.id,
+      title: node.title,
+      path: node.path || '',
+      tags: Array.isArray(node.tags) ? node.tags : []
+    }))
+  })
+}
+
+const resize = () => {
+  const rect = canvas.getBoundingClientRect()
+  const width = Math.max(rect.width, 320)
+  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)
+  markRenderDirty()
+}
+
+const normalizeQuery = value => value.trim().toLowerCase()
+const hubNodeRetentionLimit = 2
+const hubNodePattern = /\b(memory\s*hub|knowledge\s*hub|hub|moc|map|memory\s*map|mapa)\b/i
+const memoryHubPathPattern = /\bmemory[-_\s]*hub\b/i
+
+const hubNodeScore = node => {
+  const title = node.title.trim().toLowerCase()
+  if (title === 'memory hub') return 6
+  if (title === 'knowledge hub') return 5
+  if (memoryHubPathPattern.test(node.path || '')) return 4
+  if (node.tags.some(tag => tag.trim().toLowerCase() === 'memory-hub')) return 3
+  if (/\bmoc\b/i.test(node.title)) return 2
+  return hubNodePattern.test(node.title) || hubNodePattern.test(node.path || '') || node.tags.some(tag => hubNodePattern.test(tag))
+    ? 1
+    : 0
+}
+
+const localFilteredNodes = query =>
+  state.nodes.filter(node =>
+    node.title.toLowerCase().includes(query) ||
+    (node.path || '').toLowerCase().includes(query) ||
+    node.tags.some(tag => tag.toLowerCase().includes(query))
+  )
+
+const rankedHubNodes = () => {
+  if (state.nodes.length === 0) {
+    return []
+  }
+
+  const byTitleAndDegree = [...state.nodes]
+    .filter(node => hubNodeScore(node) > 0)
+    .sort((left, right) => {
+      const byHubScore = hubNodeScore(right) - hubNodeScore(left)
+      if (byHubScore !== 0) return byHubScore
+      const byDegree = (state.nodeDegrees.get(right.id) ?? 0) - (state.nodeDegrees.get(left.id) ?? 0)
+      if (byDegree !== 0) return byDegree
+      return left.title.localeCompare(right.title)
+    })
+
+  if (byTitleAndDegree.length > 0) {
+    return byTitleAndDegree.slice(0, hubNodeRetentionLimit)
+  }
+
+  return [...state.nodes]
+    .sort((left, right) => {
+      const byDegree = (state.nodeDegrees.get(right.id) ?? 0) - (state.nodeDegrees.get(left.id) ?? 0)
+      if (byDegree !== 0) return byDegree
+      return left.title.localeCompare(right.title)
+    })
+    .slice(0, 1)
+}
+
+const withPersistentHubNodes = nodes => {
+  if (nodes.length === 0) {
+    return rankedHubNodes()
+  }
+
+  const ids = new Set(nodes.map(node => node.id))
+  const hubsToKeep = rankedHubNodes().filter(node => !ids.has(node.id))
+  return nodes.concat(hubsToKeep)
+}
+
+const filteredNodes = () => {
+  const query = normalizeQuery(state.query)
+  if (!query) return state.nodes
+  if (state.contentFilter.query === query && state.contentFilter.ids instanceof Set) {
+    const matched = state.nodes.filter(node => state.contentFilter.ids.has(node.id))
+    return withPersistentHubNodes(matched)
+  }
+
+  return withPersistentHubNodes(localFilteredNodes(query))
+}
+
+const resolveMacroRepresentative = (nodes) => {
+  if (nodes.length === 0) {
+    return null
+  }
+
+  const hubCandidate = state.primaryHub && nodes.some(node => node.id === state.primaryHub.id)
+    ? state.primaryHub
+    : null
+  let best = hubCandidate ?? nodes[0]
+  let bestDegree = state.nodeDegrees.get(best.id) ?? 0
+
+  for (let index = 1; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const degree = state.nodeDegrees.get(node.id) ?? 0
+    if (degree > bestDegree) {
+      best = node
+      bestDegree = degree
+    }
+  }
+
+  return best
+}
+
+const nearestHubNeighborDistance = (hub, nodes) => {
+  if (!hub || nodes.length <= 1) {
+    return Number.POSITIVE_INFINITY
+  }
+
+  let minimum = Number.POSITIVE_INFINITY
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    if (node.id === hub.id) continue
+    const distance = Math.hypot(node.x - hub.x, node.y - hub.y)
+    if (distance < minimum) {
+      minimum = distance
+    }
+  }
+
+  return minimum
+}
+
+const recomputeVisibility = () => {
+  const nodes = filteredNodes()
+  const ids = new Set(nodes.map(node => node.id))
+  const edges = state.edges.filter(edge => ids.has(edge.source) && edge.target && ids.has(edge.target))
+  const limitedEdges = state.nodes.length > largeGraphNodeThreshold
+    ? [...edges]
+      .sort((left, right) => edgeWeight(right) - edgeWeight(left))
+      .slice(0, largeGraphEdgeRenderLimit)
+    : edges
+
+  state.visibleNodes = nodes
+  state.visibleEdges = limitedEdges
+  state.visibleNodeSpatial = createSpatialIndex(nodes)
+  state.visibleEdgeByNode = createVisibleEdgeLookup(limitedEdges)
+  state.overviewClusters = nodes.length > massiveGraphNodeThreshold ? buildOverviewClusters(nodes) : []
+  const primaryHub = rankedHubNodes()[0] ?? null
+  state.primaryHub = primaryHub
+  state.hubNeighborDistance = nearestHubNeighborDistance(primaryHub, nodes)
+  const bounds = graphBounds(nodes)
+  state.macroCenter = bounds
+    ? {
+      x: primaryHub ? primaryHub.x : (bounds.minX + bounds.maxX) / 2,
+      y: primaryHub ? primaryHub.y : (bounds.minY + bounds.maxY) / 2
+    }
+    : { x: 0, y: 0 }
+  state.macroRepresentative = resolveMacroRepresentative(nodes)
+  markRenderDirty()
+}
+
+const edgeWeight = edge => Number.isFinite(edge.weight) ? Math.max(1, edge.weight) : 1
+const markRenderDirty = () => {
+  state.renderVisibilityDirty = true
+}
+
+const createSpatialIndex = nodes => {
+  if (nodes.length === 0) {
+    return { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() }
+  }
+
+  const bounds = graphBounds(nodes)
+  if (!bounds) {
+    return { cellSize: 220, minX: 0, minY: 0, maxX: 0, maxY: 0, buckets: new Map() }
+  }
+
+  const targetNodesPerCell = 18
+  const approximateCellArea = Math.max((bounds.width * bounds.height) / Math.max(nodes.length / targetNodesPerCell, 1), 1)
+  const cellSize = Math.max(90, Math.min(2200, Math.sqrt(approximateCellArea)))
+  const buckets = new Map()
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const cellX = Math.floor((node.x - bounds.minX) / cellSize)
+    const cellY = Math.floor((node.y - bounds.minY) / cellSize)
+    const key = cellX + ':' + cellY
+    const bucket = buckets.get(key)
+    if (bucket) {
+      bucket.push(node)
+      continue
+    }
+    buckets.set(key, [node])
+  }
+
+  return {
+    cellSize,
+    minX: bounds.minX,
+    minY: bounds.minY,
+    maxX: bounds.maxX,
+    maxY: bounds.maxY,
+    buckets
+  }
+}
+
+const viewportNodesFromSpatialIndex = viewport => {
+  if (state.visibleNodes.length <= 2500) {
+    return state.visibleNodes.filter(node => isNodeInViewport(node, viewport))
+  }
+
+  const spatial = state.visibleNodeSpatial
+  if (!spatial || spatial.buckets.size === 0) {
+    return state.visibleNodes.filter(node => isNodeInViewport(node, viewport))
+  }
+
+  const minCellX = Math.floor((viewport.minX - spatial.minX) / spatial.cellSize)
+  const maxCellX = Math.floor((viewport.maxX - spatial.minX) / spatial.cellSize)
+  const minCellY = Math.floor((viewport.minY - spatial.minY) / spatial.cellSize)
+  const maxCellY = Math.floor((viewport.maxY - spatial.minY) / spatial.cellSize)
+  const nodes = []
+
+  for (let cellX = minCellX; cellX <= maxCellX; cellX += 1) {
+    for (let cellY = minCellY; cellY <= maxCellY; cellY += 1) {
+      const bucket = spatial.buckets.get(cellX + ':' + cellY)
+      if (!bucket) continue
+
+      for (let index = 0; index < bucket.length; index += 1) {
+        const node = bucket[index]
+        if (isNodeInViewport(node, viewport)) {
+          nodes.push(node)
+        }
+      }
+    }
+  }
+
+  return nodes
+}
+
+const createVisibleEdgeLookup = edges => {
+  const lookup = new Map()
+
+  for (let index = 0; index < edges.length; index += 1) {
+    const edge = edges[index]
+    if (!edge.target) continue
+
+    const sourceList = lookup.get(edge.source)
+    if (sourceList) {
+      sourceList.push(edge)
+    } else {
+      lookup.set(edge.source, [edge])
+    }
+
+    const targetList = lookup.get(edge.target)
+    if (targetList) {
+      targetList.push(edge)
+    } else {
+      lookup.set(edge.target, [edge])
+    }
+  }
+
+  return lookup
+}
+
+const buildOverviewClusters = nodes => {
+  if (nodes.length === 0) {
+    return []
+  }
+
+  const bounds = graphBounds(nodes)
+  if (!bounds) {
+    return []
+  }
+
+  const longest = Math.max(bounds.width, bounds.height, 1)
+  const cellSize = Math.max(longest / 56, 900)
+  const buckets = new Map()
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const keyX = Math.floor((node.x - bounds.minX) / cellSize)
+    const keyY = Math.floor((node.y - bounds.minY) / cellSize)
+    const key = keyX + ':' + keyY
+    const degree = state.nodeDegrees.get(node.id) ?? 0
+    const current = buckets.get(key)
+    if (current) {
+      current.count += 1
+      current.sumX += node.x
+      current.sumY += node.y
+      if (degree > current.degree) {
+        current.representative = node
+        current.degree = degree
+      }
+      continue
+    }
+
+    buckets.set(key, {
+      id: key,
+      count: 1,
+      sumX: node.x,
+      sumY: node.y,
+      representative: node,
+      degree
+    })
+  }
+
+  return Array.from(buckets.values())
+    .sort((left, right) => right.count - left.count)
+    .slice(0, overviewClusterMaxCount)
+    .map((cluster) => ({
+      id: cluster.id,
+      x: cluster.sumX / Math.max(cluster.count, 1),
+      y: cluster.sumY / Math.max(cluster.count, 1),
+      count: cluster.count,
+      representative: cluster.representative
+    }))
+}
+
+const filterOverviewClustersByViewport = viewport =>
+  state.overviewClusters.filter((cluster) =>
+    cluster.x >= viewport.minX &&
+    cluster.x <= viewport.maxX &&
+    cluster.y >= viewport.minY &&
+    cluster.y <= viewport.maxY
+  )
+
+const edgeBudgetForCurrentFrame = () => {
+  const zoom = state.transform.scale
+  if (zoom < 0.12) return 380
+  if (zoom < 0.18) return 900
+  if (zoom < 0.28) return 1700
+  if (zoom < 0.45) return 2800
+  if (zoom < 0.7) return 4200
+  if (zoom < 1.05) return 5600
+  return 7600
+}
+
+const clusterBudgetForScale = (scale) => {
+  if (scale < 0.008) return 90
+  if (scale < 0.014) return 150
+  if (scale < 0.022) return 240
+  if (scale < 0.035) return 360
+  return 520
+}
+
+const nodeBudgetForScale = (scale) => {
+  if (scale < 0.035) return 220
+  if (scale < 0.06) return 360
+  if (scale < 0.09) return 520
+  if (scale < 0.14) return 720
+  return renderNodeBudget
+}
+
+const layerWindowForScale = (scale) => {
+  if (scale < 0.08) return { inner: 0.78, outer: 1 }
+  if (scale < 0.14) return { inner: 0.62, outer: 0.9 }
+  if (scale < 0.24) return { inner: 0.46, outer: 0.74 }
+  if (scale < 0.36) return { inner: 0.3, outer: 0.58 }
+  if (scale < layeredCoreScaleThreshold) return { inner: 0.16, outer: 0.42 }
+  if (scale < 0.9) return { inner: 0.06, outer: 0.26 }
+  return { inner: 0, outer: 0.14 }
+}
+
+const selectLayeredNodesForScale = (sourceNodes) => {
+  const hub = state.primaryHub
+  if (!hub || sourceNodes.length <= 1200 || state.visibleNodes.length <= massiveGraphNodeThreshold) {
+    return sourceNodes
+  }
+
+  let maxDistance = 0
+  const distances = sourceNodes.map((node) => {
+    const distance = Math.hypot(node.x - hub.x, node.y - hub.y)
+    if (distance > maxDistance) {
+      maxDistance = distance
+    }
+    return { node, distance }
+  })
+
+  if (maxDistance <= 0.001) {
+    return sourceNodes
+  }
+
+  const window = layerWindowForScale(state.transform.scale)
+  const inner = window.inner * maxDistance
+  const outer = window.outer * maxDistance
+  const layered = distances
+    .filter((item) => item.distance >= inner && item.distance <= outer)
+    .map((item) => item.node)
+
+  if (state.transform.scale >= layeredCoreScaleThreshold && !layered.some((node) => node.id === hub.id)) {
+    layered.push(hub)
+  }
+
+  if (layered.length > 0) {
+    return layered
+  }
+
+  const midpoint = (window.inner + window.outer) / 2
+  const fallback = [...distances]
+    .sort((left, right) => {
+      const leftNorm = left.distance / maxDistance
+      const rightNorm = right.distance / maxDistance
+      const leftDelta = Math.abs(leftNorm - midpoint)
+      const rightDelta = Math.abs(rightNorm - midpoint)
+      if (leftDelta !== rightDelta) return leftDelta - rightDelta
+      return left.node.id.localeCompare(right.node.id)
+    })
+    .slice(0, Math.min(900, sourceNodes.length))
+    .map((item) => item.node)
+
+  if (state.transform.scale >= layeredCoreScaleThreshold && !fallback.some((node) => node.id === hub.id)) {
+    fallback.push(hub)
+  }
+
+  return fallback
+}
+
+const edgeIdentityKey = edge => {
+  if (!edge.target) return ''
+  const pair = edge.source < edge.target
+    ? edge.source + '|' + edge.target
+    : edge.target + '|' + edge.source
+  return pair + '|' + (edge.inferred ? 'mesh' : 'real')
+}
+
+const edgeRelevanceScore = edge => {
+  let score = edgeWeight(edge) * 10
+  if (!edge.inferred) {
+    score += 8
+  }
+
+  const selectedId = state.selected?.id
+  if (selectedId && (edge.source === selectedId || edge.target === selectedId)) {
+    score += 120
+  }
+
+  const hoveredId = state.hovered?.id
+  if (hoveredId && (edge.source === hoveredId || edge.target === hoveredId)) {
+    score += 70
+  }
+
+  const hubId = state.primaryHub?.id
+  if (hubId && (edge.source === hubId || edge.target === hubId)) {
+    score += 42
+  }
+
+  return score
+}
+
+const collectVisibleEdgesForNodes = nodeIds => {
+  if (nodeIds.size === 0) {
+    return []
+  }
+
+  const seen = new Set()
+  const candidates = []
+  const limit = edgeBudgetForCurrentFrame()
+
+  nodeIds.forEach(nodeId => {
+    const candidateEdges = state.visibleEdgeByNode.get(nodeId) ?? []
+    for (let index = 0; index < candidateEdges.length; index += 1) {
+      const edge = candidateEdges[index]
+      if (!edge.target || !nodeIds.has(edge.source) || !nodeIds.has(edge.target)) {
+        continue
+      }
+      const key = edgeIdentityKey(edge)
+      if (seen.has(key)) continue
+
+      seen.add(key)
+      candidates.push(edge)
+    }
+  })
+
+  if (candidates.length <= limit) {
+    return candidates
+  }
+
+  return candidates
+    .sort((left, right) => {
+      const scoreDelta = edgeRelevanceScore(right) - edgeRelevanceScore(left)
+      if (scoreDelta !== 0) {
+        return scoreDelta
+      }
+      const leftKey = edgeIdentityKey(left)
+      const rightKey = edgeIdentityKey(right)
+      return leftKey.localeCompare(rightKey)
+    })
+    .slice(0, limit)
+}
+
+const edgeOpacityForScale = (edge, scale) => {
+  if (edge.inferred) {
+    if (scale < 0.2) return 0.06
+    if (scale < 0.4) return 0.08
+    if (scale < 0.7) return 0.1
+    return 0.14
+  }
+
+  if (scale < 0.2) return 0.14
+  if (scale < 0.4) return 0.2
+  if (scale < 0.7) return 0.28
+  if (scale < 1.05) return 0.36
+  return 0.46
+}
+
+const edgeStrokeFor = (edge, selectedEdge) => {
+  if (selectedEdge) {
+    return graphTheme.edgeActive
+  }
+
+  const opacity = edgeOpacityForScale(edge, state.transform.scale)
+  return edge.inferred
+    ? 'rgba(203, 213, 225, ' + opacity + ')'
+    : 'rgba(153, 165, 181, ' + opacity + ')'
+}
+
+const edgeWidthFor = (edge, selectedEdge) => {
+  if (edge.inferred) {
+    return selectedEdge ? 1.22 : 0.84
+  }
+
+  return (selectedEdge ? 1.9 : 1.05) + Math.min(edgeWeight(edge) - 1, 8) * 0.24
+}
+
+const drawGraphEdge = (edge) => {
+  const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
+  ctx.beginPath()
+  ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
+  ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
+  ctx.strokeStyle = edgeStrokeFor(edge, selectedEdge)
+  ctx.lineWidth = edgeWidthFor(edge, selectedEdge)
+  ctx.stroke()
+}
+
+const drawGraphEdges = () => {
+  const selectedEdges = []
+  const regularEdges = []
+  for (let index = 0; index < state.renderEdges.length; index += 1) {
+    const edge = state.renderEdges[index]
+    const isSelected = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
+    if (isSelected) {
+      selectedEdges.push(edge)
+    } else {
+      regularEdges.push(edge)
+    }
+  }
+
+  for (let index = 0; index < regularEdges.length; index += 1) {
+    drawGraphEdge(regularEdges[index])
+  }
+  for (let index = 0; index < selectedEdges.length; index += 1) {
+    drawGraphEdge(selectedEdges[index])
+  }
+}
+
+const edgePairKey = (source, target) =>
+  source < target ? source + '|' + target : target + '|' + source
+
+const meshNeighborBuckets = (nodes, cellSize) => {
+  const buckets = new Map()
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]
+    const cellX = Math.floor(node.x / cellSize)
+    const cellY = Math.floor(node.y / cellSize)
+    const key = cellX + ':' + cellY
+    const bucket = buckets.get(key)
+    if (bucket) {
+      bucket.push(node)
+    } else {
+      buckets.set(key, [node])
+    }
+  }
+
+  return buckets
+}
+
+const meshCandidatesForNode = (node, buckets, cellSize) => {
+  const cellX = Math.floor(node.x / cellSize)
+  const cellY = Math.floor(node.y / cellSize)
+  const candidates = []
+
+  for (let offsetX = -1; offsetX <= 1; offsetX += 1) {
+    for (let offsetY = -1; offsetY <= 1; offsetY += 1) {
+      const bucket = buckets.get((cellX + offsetX) + ':' + (cellY + offsetY))
+      if (!bucket) continue
+      for (let index = 0; index < bucket.length; index += 1) {
+        const candidate = bucket[index]
+        if (candidate.id !== node.id) {
+          candidates.push(candidate)
+        }
+      }
+    }
+  }
+
+  return candidates
+}
+
+const buildMeshEdgesForNodes = (nodes, existingEdges) => {
+  if (nodes.length < 2 || state.transform.scale < meshEdgeScaleThreshold) {
+    return []
+  }
+
+  const existingKeys = new Set()
+  for (let index = 0; index < existingEdges.length; index += 1) {
+    const edge = existingEdges[index]
+    if (edge.target) {
+      existingKeys.add(edgePairKey(edge.source, edge.target))
+    }
+  }
+
+  const desiredBudget = Math.min(
+    meshEdgeMaxBudget,
+    Math.max(meshEdgeMinBudget, Math.floor(edgeBudgetForCurrentFrame() * 0.62))
+  )
+  const perNodeNeighborCount =
+    state.transform.scale >= 1.05 ? 4
+      : state.transform.scale >= 0.62 ? 3
+        : 2
+  const cellSize = Math.max(120, 280 / Math.max(state.transform.scale, 0.0001))
+  const maxDistance = 980
+  const maxDistanceSquared = maxDistance * maxDistance
+  const buckets = meshNeighborBuckets(nodes, cellSize)
+  const meshEdges = []
+  const meshKeys = new Set()
+
+  for (let index = 0; index < nodes.length && meshEdges.length < desiredBudget; index += 1) {
+    const node = nodes[index]
+    const candidates = meshCandidatesForNode(node, buckets, cellSize)
+      .map((candidate) => ({
+        node: candidate,
+        distanceSquared: (candidate.x - node.x) ** 2 + (candidate.y - node.y) ** 2
+      }))
+      .filter((candidate) => candidate.distanceSquared <= maxDistanceSquared)
+      .sort((left, right) => left.distanceSquared - right.distanceSquared)
+
+    let linked = 0
+    for (let candidateIndex = 0; candidateIndex < candidates.length && linked < perNodeNeighborCount && meshEdges.length < desiredBudget; candidateIndex += 1) {
+      const candidate = candidates[candidateIndex].node
+      const key = edgePairKey(node.id, candidate.id)
+      if (existingKeys.has(key) || meshKeys.has(key)) {
+        continue
+      }
+
+      meshKeys.add(key)
+      meshEdges.push({
+        source: node.id,
+        target: candidate.id,
+        targetTitle: candidate.title,
+        weight: 1,
+        priority: 'normal',
+        sourceNode: node,
+        targetNode: candidate,
+        inferred: true
+      })
+      linked += 1
+    }
+  }
+
+  return meshEdges
+}
+
+const withMeshEdges = (nodes, edges) => {
+  if (nodes.length === 0 || state.visibleNodes.length <= largeGraphNodeThreshold || state.transform.scale < meshEdgeScaleThreshold) {
+    return edges
+  }
+
+  const meshEdges = buildMeshEdgesForNodes(nodes, edges)
+  return meshEdges.length > 0 ? edges.concat(meshEdges) : edges
+}
+
+const fallbackViewportNodes = () => {
+  const nodes = []
+  const maxNodes = Math.min(renderNodeBudget, 220)
+  const step = Math.max(1, Math.ceil(state.visibleNodes.length / maxNodes))
+
+  for (let index = 0; index < state.visibleNodes.length && nodes.length < maxNodes; index += step) {
+    nodes.push(state.visibleNodes[index])
+  }
+
+  if (state.selected && !nodes.find(node => node.id === state.selected.id)) {
+    nodes.push(state.selected)
+  }
+
+  return nodes
+}
+
+const sampleVisibleNodes = (limit = renderNodeBudget, sourceNodes = state.visibleNodes) => {
+  if (sourceNodes.length === 0 || limit <= 0) {
+    return []
+  }
+
+  const nodes = []
+  const maxNodes = Math.min(Math.max(limit, 1), sourceNodes.length)
+  const step = Math.max(1, Math.ceil(sourceNodes.length / maxNodes))
+
+  for (let index = 0; index < sourceNodes.length && nodes.length < maxNodes; index += step) {
+    nodes.push(sourceNodes[index])
+  }
+
+  if (state.selected && !nodes.find(node => node.id === state.selected.id)) {
+    nodes.push(state.selected)
+  }
+
+  return nodes
+}
+
+const enrichSampleWithNeighbors = (nodes) => {
+  if (nodes.length === 0) {
+    return {
+      nodes,
+      edges: []
+    }
+  }
+
+  const maxNodes = Math.min(renderNodeBudget, nodes.length + 200)
+  const expanded = [...nodes]
+  const ids = new Set(expanded.map((node) => node.id))
+
+  for (let index = 0; index < nodes.length && expanded.length < maxNodes; index += 1) {
+    const node = nodes[index]
+    const candidates = [...(state.visibleEdgeByNode.get(node.id) ?? [])]
+      .filter((edge) => edge.target)
+      .sort((left, right) => edgeWeight(right) - edgeWeight(left))
+      .slice(0, 3)
+
+    for (let candidateIndex = 0; candidateIndex < candidates.length && expanded.length < maxNodes; candidateIndex += 1) {
+      const edge = candidates[candidateIndex]
+      const otherId = edge.source === node.id ? edge.target : edge.source
+
+      if (!otherId || ids.has(otherId)) {
+        continue
+      }
+
+      const otherNode = state.nodeById.get(otherId)
+      if (!otherNode) {
+        continue
+      }
+
+      ids.add(otherId)
+      expanded.push(otherNode)
+    }
+  }
+
+  const edges = collectVisibleEdgesForNodes(ids)
+
+  return {
+    nodes: expanded,
+    edges
+  }
+}
+
+const ensureHubNodesInRenderedSet = (nodes) => {
+  if (nodes.length === 0) {
+    return nodes
+  }
+
+  const maxNodes = Math.max(Math.min(renderNodeBudget, nodes.length), 1)
+  const ids = new Set(nodes.map((node) => node.id))
+  const hubs = rankedHubNodes()
+  const merged = [...nodes]
+
+  for (let index = 0; index < hubs.length; index += 1) {
+    const hub = hubs[index]
+    if (ids.has(hub.id)) {
+      continue
+    }
+
+    if (merged.length < maxNodes) {
+      merged.push(hub)
+      ids.add(hub.id)
+      continue
+    }
+
+    const replacementIndex = merged.findIndex((node) => !hubs.some((candidate) => candidate.id === node.id))
+    if (replacementIndex >= 0) {
+      ids.delete(merged[replacementIndex].id)
+      merged[replacementIndex] = hub
+      ids.add(hub.id)
+    }
   }
 
-  elements.stats.textContent = 'Failed to load graph'
-  console.error(error)
+  return merged
 }
 
-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 zoomCapByNodeCount = (nodeCount) => {
+  if (nodeCount > 50000) return 2.6
+  if (nodeCount > 20000) return 2.35
+  if (nodeCount > 6000) return 2.1
+  if (nodeCount > 2000) return 2.2
+  return zoomRange.max
 }
 
-const resize = () => {
+const zoomCapByHubDistance = (distance) => {
+  if (!Number.isFinite(distance) || distance <= 0) {
+    return zoomRange.max
+  }
+
   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 viewportWidth = Math.max(rect.width, 320)
+  const viewportHeight = Math.max(rect.height, 320)
+  const reference = Math.max(220, Math.min(viewportWidth, viewportHeight) * zoomCapTargetViewportShare)
+  return Math.max(0.3, Math.min(zoomRange.max, reference / distance))
 }
 
-const filteredNodes = () => {
-  const query = state.query.trim().toLowerCase()
-  if (!query) return state.nodes
-  return state.nodes.filter(node =>
-    node.title.toLowerCase().includes(query) ||
-    node.path.toLowerCase().includes(query) ||
-    node.tags.some(tag => tag.toLowerCase().includes(query))
-  )
+const currentZoomMax = () => {
+  const nodeCount = state.visibleNodes.length > 0 ? state.visibleNodes.length : state.nodes.length
+  const hubDistanceCap = zoomCapByHubDistance(state.hubNeighborDistance)
+  const minimumUsefulCap = nodeCount > massiveGraphNodeThreshold ? 1.9 : nodeCount > largeGraphNodeThreshold ? 1.35 : 0.8
+  const capped = Math.min(zoomCapByNodeCount(nodeCount), Math.max(minimumUsefulCap, hubDistanceCap))
+  return Math.max(zoomRange.min * 2, capped)
+}
+
+const clampScale = value => Math.max(zoomRange.min, Math.min(currentZoomMax(), value))
+const isFiniteNumber = value => Number.isFinite(value)
+const isReasonableCoordinate = value => isFiniteNumber(value) && Math.abs(value) <= worldCoordinateLimit
+const clampTransformCoordinate = value => {
+  if (!isFiniteNumber(value)) return 0
+  if (value > transformCoordinateLimit) return transformCoordinateLimit
+  if (value < -transformCoordinateLimit) return -transformCoordinateLimit
+  return value
 }
 
-const visibleIds = () => new Set(filteredNodes().map(node => node.id))
+const graphBounds = nodes => {
+  if (nodes.length === 0) return null
+  let minX = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+
+  nodes.forEach(node => {
+    const radius = baseNodeRadius(node)
+    minX = Math.min(minX, node.x - radius)
+    maxX = Math.max(maxX, node.x + radius)
+    minY = Math.min(minY, node.y - radius)
+    maxY = Math.max(maxY, node.y + radius)
+  })
 
-const visibleEdges = () => {
-  const ids = visibleIds()
-  return state.edges.filter(edge => ids.has(edge.source) && edge.target && ids.has(edge.target))
+  return {
+    minX,
+    maxX,
+    minY,
+    maxY,
+    width: Math.max(maxX - minX, 1),
+    height: Math.max(maxY - minY, 1)
+  }
 }
 
-const edgeWeight = edge => Number.isFinite(edge.weight) ? Math.max(1, edge.weight) : 1
+const fitScaleBiasByNodeCount = nodeCount => {
+  if (nodeCount <= 6) return 1.22
+  if (nodeCount <= 20) return 1.12
+  if (nodeCount <= 60) return 1.04
+  if (nodeCount <= 180) return 1
+  if (nodeCount <= 600) return 0.94
+  if (nodeCount <= 2000) return 0.82
+  if (nodeCount <= 6000) return 0.68
+  return 0.56
+}
 
-const resetView = () => {
+const autoFitScaleRangeByNodeCount = nodeCount => {
+  if (nodeCount <= 6) return { min: 0.4, max: 2.2 }
+  if (nodeCount <= 20) return { min: 0.34, max: 1.65 }
+  if (nodeCount <= 60) return { min: 0.25, max: 1.22 }
+  if (nodeCount <= 180) return { min: 0.18, max: 0.92 }
+  if (nodeCount <= 600) return { min: 0.12, max: 0.72 }
+  if (nodeCount <= 2000) return { min: 0.08, max: 0.52 }
+  if (nodeCount <= 6000) return { min: 0.06, max: 0.32 }
+  return { min: 0.0008, max: 0.24 }
+}
+
+const fitView = (options = { useFiltered: true, macro: false, preferHubCenter: true }) => {
   const rect = canvas.getBoundingClientRect()
-  state.transform = { x: Math.max(rect.width, 320) / 2, y: Math.max(rect.height, 320) / 2, scale: 1 }
+  const width = Math.max(rect.width, 320)
+  const height = Math.max(rect.height, 320)
+  const nodes = options.useFiltered ? filteredNodes() : state.nodes
+  const bounds = graphBounds(nodes)
+
+  if (!bounds) {
+    state.transform = { x: width / 2, y: height / 2, scale: 1 }
+    state.offscreenFrameCount = 0
+    state.recoveringViewport = false
+    markRenderDirty()
+    return
+  }
+
+  const paddingByNodeCount = nodeCount => {
+    if (nodeCount <= 6) return 28
+    if (nodeCount <= 20) return 44
+    if (nodeCount <= 60) return 68
+    if (nodeCount <= 180) return 86
+    if (nodeCount <= 600) return 110
+    if (nodeCount <= 2000) return 140
+    return 180
+  }
+  const padding = paddingByNodeCount(nodes.length)
+  const scaleX = width / (bounds.width + padding * 2)
+  const scaleY = height / (bounds.height + padding * 2)
+  const fitScale = Math.min(scaleX, scaleY)
+  const biasedScale = clampScale(fitScale * fitScaleBiasByNodeCount(nodes.length))
+  const scaleRange = autoFitScaleRangeByNodeCount(nodes.length)
+  const baselineScale = clampScale(Math.min(scaleRange.max, Math.max(scaleRange.min, biasedScale)))
+  const macroScale = nodes.length > massiveGraphNodeThreshold ? massiveAutoFitMacroScale : defaultMacroScale
+  const scale = options.macro && nodes.length > 1
+    ? clampScale(Math.min(baselineScale, macroScale))
+    : nodes.length > massiveGraphNodeThreshold
+      ? clampScale(Math.min(baselineScale, massiveAutoFitMacroScale))
+      : baselineScale
+  const hubCenter =
+    options.preferHubCenter && state.primaryHub && nodes.some((node) => node.id === state.primaryHub.id)
+      ? state.primaryHub
+      : null
+  const centerX = hubCenter ? hubCenter.x : (bounds.minX + bounds.maxX) / 2
+  const centerY = hubCenter ? hubCenter.y : (bounds.minY + bounds.maxY) / 2
+
+  state.transform = {
+    x: clampTransformCoordinate(width / 2 - centerX * scale),
+    y: clampTransformCoordinate(height / 2 - centerY * scale),
+    scale: clampScale(scale)
+  }
+  state.offscreenFrameCount = 0
+  state.recoveringViewport = false
+  markRenderDirty()
 }
 
+const resetView = () => fitView({ useFiltered: false, macro: true, preferHubCenter: true })
+
 const createLayout = graph => {
-  const nodes = graph.nodes.map(node => ({
-    ...node,
-    x: Number.isFinite(node.x) ? node.x : 0,
-    y: Number.isFinite(node.y) ? node.y : 0
-  }))
+  const nodeRows = Array.isArray(graph.nodes) ? graph.nodes : []
+  const edgeRows = Array.isArray(graph.edges) ? graph.edges : []
+  const nodes = nodeRows.map(node => {
+    if (Array.isArray(node)) {
+      const [id, title, x, y, group, segment] = node
+      return {
+        id: typeof id === 'string' ? id : '',
+        title: typeof title === 'string' ? title : 'Untitled',
+        path: '',
+        tags: [],
+        group: typeof group === 'string' ? group : 'root',
+        segment: typeof segment === 'string' ? segment : 'root',
+        x: Number.isFinite(x) ? x : 0,
+        y: Number.isFinite(y) ? y : 0,
+        vx: 0,
+        vy: 0
+      }
+    }
+
+    return {
+      ...node,
+      path: typeof node.path === 'string' ? node.path : '',
+      tags: Array.isArray(node.tags) ? node.tags : [],
+      x: Number.isFinite(node.x) ? node.x : 0,
+      y: Number.isFinite(node.y) ? node.y : 0,
+      vx: Number.isFinite(node.vx) ? node.vx : 0,
+      vy: Number.isFinite(node.vy) ? node.vy : 0
+    }
+  })
   const nodeMap = new Map(nodes.map(node => [node.id, node]))
-  const edges = graph.edges
+  const edges = edgeRows
+    .map(edge => {
+      if (Array.isArray(edge)) {
+        const [source, target, weight, priority] = edge
+        return {
+          source: typeof source === 'string' ? source : '',
+          target: typeof target === 'string' ? target : null,
+          targetTitle: '',
+          weight: Number.isFinite(weight) ? weight : 1,
+          priority: typeof priority === 'string' ? priority : 'normal'
+        }
+      }
+      return edge
+    })
     .filter(edge => edge.target && nodeMap.has(edge.source) && nodeMap.has(edge.target))
     .map(edge => ({ ...edge, sourceNode: nodeMap.get(edge.source), targetNode: nodeMap.get(edge.target) }))
   return { nodes, edges }
@@ -128,29 +1199,107 @@ const encodeEntityTag = (value) => {
     binary += String.fromCharCode(utf8[index])
   }
 
-  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '')
+  return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/g, '')
 }
 
 const graphSignature = graph => JSON.stringify({
-  nodes: graph.nodes.map(node => [node.id, node.title, node.path, node.content, node.tags]),
+  nodes: graph.nodes.map(node => [node.id, node.title, node.path, node.tags]),
   edges: graph.edges.map(edge => [edge.source, edge.target, edge.targetTitle, edge.weight, edge.priority])
 })
 
+const resetContentFilter = () => {
+  if (state.contentFilter.timer) {
+    clearTimeout(state.contentFilter.timer)
+  }
+  state.contentFilter = {
+    query: '',
+    ids: null,
+    token: state.contentFilter.token + 1,
+    timer: null
+  }
+  recomputeVisibility()
+}
+
+const syncContentFilter = async (query, token) => {
+  const response = await fetch(
+      '/api/graph-filter?q=' +
+      encodeURIComponent(query) +
+      '&limit=' +
+      encodeURIComponent(String(Math.max(state.nodes.length, 1))) +
+      agentQuery('&')
+  )
+
+  if (!response.ok || token !== state.contentFilter.token) {
+    return
+  }
+
+  const payload = await response.json()
+  const nodeIds = Array.isArray(payload?.nodeIds) ? payload.nodeIds.filter(id => typeof id === 'string') : []
+  if (token !== state.contentFilter.token) {
+    return
+  }
+
+  state.contentFilter.query = query
+  const merged = new Set([...(state.contentFilter.ids instanceof Set ? state.contentFilter.ids : []), ...nodeIds])
+  state.contentFilter.ids = merged
+  recomputeVisibility()
+}
+
+const scheduleContentFilterSync = () => {
+  const query = normalizeQuery(state.query)
+  if (!query) {
+    resetContentFilter()
+    return
+  }
+
+  if (state.contentFilter.timer) {
+    clearTimeout(state.contentFilter.timer)
+  }
+
+  const token = state.contentFilter.token + 1
+  state.contentFilter = {
+    query: state.contentFilter.query,
+    ids: state.contentFilter.ids,
+    token,
+    timer: setTimeout(() => {
+      if (state.filterWorker && state.filterReady) {
+        state.filterWorker.postMessage({
+          type: 'filter',
+          query,
+          token,
+          limit: Math.max(state.nodes.length, 1)
+        })
+      }
+      syncContentFilter(query, token).catch(() => {})
+    }, 180)
+  }
+}
+
 const tick = delta => {
-  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 nodes = state.renderNodes.length > 0 ? state.renderNodes : state.visibleNodes
+  const edges = state.renderEdges.length > 0 ? state.renderEdges : state.visibleEdges
+  const shouldRunPhysics =
+    state.nodes.length <= 8000 &&
+    nodes.length <= 320 &&
+    state.transform.scale >= 0.08
+  if (!shouldRunPhysics) {
+    return
+  }
   const strength = Math.min(delta / 16, 2)
 
   edges.forEach(edge => {
     const source = edge.sourceNode
     const target = edge.targetNode
+    source.vx = Number.isFinite(source.vx) ? source.vx : 0
+    source.vy = Number.isFinite(source.vy) ? source.vy : 0
+    target.vx = Number.isFinite(target.vx) ? target.vx : 0
+    target.vy = Number.isFinite(target.vy) ? target.vy : 0
     const dx = target.x - source.x
     const dy = target.y - source.y
     const distance = Math.max(Math.hypot(dx, dy), 1)
     const force = (distance - 150) * 0.002 * strength
-    const fx = dx * force
-    const fy = dy * force
+    const fx = (dx / distance) * force
+    const fy = (dy / distance) * force
     source.vx += fx
     source.vy += fy
     target.vx -= fx
@@ -161,6 +1310,10 @@ const tick = delta => {
     for (let j = i + 1; j < nodes.length; j += 1) {
       const a = nodes[i]
       const b = nodes[j]
+      a.vx = Number.isFinite(a.vx) ? a.vx : 0
+      a.vy = Number.isFinite(a.vy) ? a.vy : 0
+      b.vx = Number.isFinite(b.vx) ? b.vx : 0
+      b.vy = Number.isFinite(b.vy) ? b.vy : 0
       const dx = b.x - a.x
       const dy = b.y - a.y
       const distance = Math.max(Math.hypot(dx, dy), 1)
@@ -175,6 +1328,10 @@ const tick = delta => {
   }
 
   nodes.forEach(node => {
+    node.vx = Number.isFinite(node.vx) ? node.vx : 0
+    node.vy = Number.isFinite(node.vy) ? node.vy : 0
+    node.x = Number.isFinite(node.x) ? node.x : 0
+    node.y = Number.isFinite(node.y) ? node.y : 0
     if (state.pointer.dragNode === node) {
       node.vx = 0
       node.vy = 0
@@ -198,7 +1355,20 @@ const worldPoint = event => {
 }
 
 const hitNode = point => {
-  const nodes = filteredNodes()
+  computeRenderVisibility()
+  if (state.renderClusters.length > 0) {
+    return null
+  }
+  const hitScaleFloor = state.nodes.length > massiveGraphNodeThreshold
+    ? 0.2
+    : state.nodes.length > largeGraphNodeThreshold
+      ? 0.34
+      : 0
+  if (state.transform.scale < hitScaleFloor) {
+    return null
+  }
+
+  const nodes = state.renderNodes
   for (let index = nodes.length - 1; index >= 0; index -= 1) {
     const node = nodes[index]
     const radius = nodeRadius(node)
@@ -207,17 +1377,304 @@ const hitNode = point => {
   return null
 }
 
-const nodeRadius = node => {
-  const degree = state.edges.filter(edge => edge.source === node.id || edge.target === node.id).length
+const baseNodeRadius = node => {
+  const degree = state.nodeDegrees.get(node.id) ?? 0
   return 9 + Math.min(degree, 8) * 1.6
 }
 
+const nodeRadius = node => Math.max(baseNodeRadius(node), minNodePixelRadius / Math.max(state.transform.scale, 0.0001))
+
+const worldViewportBounds = () => {
+  const rect = canvas.getBoundingClientRect()
+  const width = Math.max(rect.width, 320)
+  const height = Math.max(rect.height, 320)
+  const padding = viewportPaddingPx
+
+  return {
+    minX: (-state.transform.x - padding) / state.transform.scale,
+    maxX: (width - state.transform.x + padding) / state.transform.scale,
+    minY: (-state.transform.y - padding) / state.transform.scale,
+    maxY: (height - state.transform.y + padding) / state.transform.scale
+  }
+}
+
+const isNodeInViewport = (node, viewport) =>
+  node.x >= viewport.minX &&
+  node.x <= viewport.maxX &&
+  node.y >= viewport.minY &&
+  node.y <= viewport.maxY
+
+const viewportNodeStride = () => {
+  if (state.nodes.length <= largeGraphNodeThreshold) {
+    return 1
+  }
+
+  if (state.transform.scale >= 0.95) {
+    return 1
+  }
+  if (state.transform.scale >= 0.7) {
+    return 2
+  }
+  if (state.transform.scale >= 0.48) {
+    return 3
+  }
+  if (state.transform.scale >= 0.28) {
+    return 5
+  }
+
+  return 8
+}
+
+const shouldRenderClusters = viewportNodes =>
+  state.transform.scale <= clusterZoomThreshold && viewportNodes.length >= clusterActivationNodeThreshold
+
+const clusterViewportNodes = viewportNodes => {
+  if (!shouldRenderClusters(viewportNodes)) {
+    return []
+  }
+
+  const worldCellSize = Math.max(clusterCellPixelSize / Math.max(state.transform.scale, 0.0001), 1)
+  const buckets = new Map()
+
+  for (let index = 0; index < viewportNodes.length; index += 1) {
+    const node = viewportNodes[index]
+    const keyX = Math.floor(node.x / worldCellSize)
+    const keyY = Math.floor(node.y / worldCellSize)
+    const key = keyX + ':' + keyY
+    const current = buckets.get(key)
+    if (current) {
+      current.count += 1
+      current.sumX += node.x
+      current.sumY += node.y
+      if ((state.nodeDegrees.get(node.id) ?? 0) > current.degree) {
+        current.representative = node
+        current.degree = state.nodeDegrees.get(node.id) ?? 0
+      }
+      continue
+    }
+
+    buckets.set(key, {
+      id: key,
+      count: 1,
+      sumX: node.x,
+      sumY: node.y,
+      representative: node,
+      degree: state.nodeDegrees.get(node.id) ?? 0
+    })
+  }
+
+  return Array.from(buckets.values())
+    .sort((left, right) => right.count - left.count)
+    .slice(0, Math.min(renderNodeBudget, 900))
+    .map((cluster) => ({
+      id: cluster.id,
+      x: cluster.sumX / Math.max(cluster.count, 1),
+      y: cluster.sumY / Math.max(cluster.count, 1),
+      count: cluster.count,
+      representative: cluster.representative
+    }))
+}
+
+const computeRenderVisibility = () => {
+  if (!hasValidTransform()) {
+    fitView({ useFiltered: true })
+  }
+  const viewport = worldViewportBounds()
+  const viewportKey =
+    Math.round(viewport.minX * 10) + ':' +
+    Math.round(viewport.maxX * 10) + ':' +
+    Math.round(viewport.minY * 10) + ':' +
+    Math.round(viewport.maxY * 10) + ':' +
+    Math.round(state.transform.scale * 1000)
+
+  if (!state.renderVisibilityDirty && viewportKey === state.lastViewportKey) {
+    return
+  }
+  state.lastViewportKey = viewportKey
+  state.renderVisibilityDirty = false
+
+  const shouldRenderMacroGalaxy =
+    state.transform.scale <= macroGalaxyZoomThreshold && state.visibleNodes.length > 1
+
+  if (shouldRenderMacroGalaxy) {
+    const viewportNodes = viewportNodesFromSpatialIndex(viewport)
+    const sourceNodes = viewportNodes.length > 0 ? viewportNodes : state.visibleNodes
+    const representative = state.primaryHub ?? state.macroRepresentative ?? sourceNodes[0] ?? null
+    if (representative) {
+      state.renderClusters = [
+        {
+          id: 'macro-galaxy',
+          x: state.macroCenter.x,
+          y: state.macroCenter.y,
+          count: sourceNodes.length,
+          representative
+        }
+      ]
+      state.renderNodes = [representative]
+    } else {
+      state.renderClusters = []
+      state.renderNodes = []
+    }
+    state.renderEdges = []
+    return
+  }
+
+  if (state.visibleNodes.length <= 2000) {
+    state.renderNodes = state.visibleNodes
+    state.renderClusters = []
+    const ids = new Set(state.renderNodes.map((node) => node.id))
+    state.renderEdges = withMeshEdges(state.renderNodes, collectVisibleEdgesForNodes(ids))
+    return
+  }
+
+  if (state.visibleNodes.length > massiveGraphNodeThreshold) {
+    const viewportNodes = viewportNodesFromSpatialIndex(viewport)
+    const sourceNodes = viewportNodes.length > 0 ? viewportNodes : state.visibleNodes
+    const layeredNodes = selectLayeredNodesForScale(sourceNodes)
+    const sampleLimit = nodeBudgetForScale(state.transform.scale)
+    const sampled = layeredNodes.length > sampleLimit
+      ? sampleVisibleNodes(Math.min(sampleLimit, renderNodeBudget), layeredNodes)
+      : layeredNodes.slice(0, Math.min(layeredNodes.length, renderNodeBudget))
+    const sampledIds = new Set(sampled.map((node) => node.id))
+    let sampledEdges = state.transform.scale >= 0.035 ? collectVisibleEdgesForNodes(sampledIds) : []
+    let sampledNodes = ensureHubNodesInRenderedSet(sampled)
+
+    if (state.transform.scale >= 0.035 && sampledEdges.length === 0) {
+      const enriched = enrichSampleWithNeighbors(sampledNodes)
+      sampledNodes = ensureHubNodesInRenderedSet(enriched.nodes)
+      const sampledWithHubsIds = new Set(sampledNodes.map((node) => node.id))
+      sampledEdges = collectVisibleEdgesForNodes(sampledWithHubsIds)
+    }
+
+    state.renderClusters = []
+    state.renderNodes = sampledNodes
+    state.renderEdges = withMeshEdges(sampledNodes, sampledEdges)
+    return
+  }
+
+  if (state.transform.scale <= 0.0015) {
+    const sampled = sampleVisibleNodes(Math.min(renderNodeBudget, 900))
+    const sampledIds = new Set(sampled.map((node) => node.id))
+    state.renderClusters = []
+    state.renderNodes = sampled
+    state.renderEdges = withMeshEdges(sampled, collectVisibleEdgesForNodes(sampledIds))
+    return
+  }
+
+  const viewportNodes = viewportNodesFromSpatialIndex(viewport)
+  const clusters = clusterViewportNodes(viewportNodes)
+  if (clusters.length > 0) {
+    state.renderClusters = clusters
+    state.renderNodes = clusters.map(cluster => cluster.representative)
+    state.renderEdges = []
+    return
+  }
+  state.renderClusters = []
+  const stride = viewportNodeStride()
+  const picked = []
+
+  for (let index = 0; index < viewportNodes.length; index += 1) {
+    const node = viewportNodes[index]
+
+    const isPriority =
+      node.id === state.selected?.id ||
+      node.id === state.hovered?.id ||
+      node.id === state.pointer.dragNode?.id
+    if (isPriority || index % stride === 0) {
+      picked.push(node)
+    }
+  }
+
+  const nodes = picked.length > renderNodeBudget
+    ? picked.slice(0, renderNodeBudget)
+    : picked
+  if (nodes.length === 0 && state.visibleNodes.length > 0) {
+    const fallbackNodes = fallbackViewportNodes()
+    const fallbackIds = new Set(fallbackNodes.map((node) => node.id))
+    state.renderNodes = fallbackNodes
+    state.renderClusters = []
+    state.renderEdges = withMeshEdges(fallbackNodes, collectVisibleEdgesForNodes(fallbackIds))
+    return
+  }
+
+  const normalizedNodes = ensureHubNodesInRenderedSet(nodes)
+  const nodeIds = new Set(normalizedNodes.map((node) => node.id))
+  const edges = collectVisibleEdgesForNodes(nodeIds)
+
+  state.renderNodes = normalizedNodes
+  state.renderEdges = withMeshEdges(normalizedNodes, edges)
+
+  if (state.renderNodes.length === 0 && state.visibleNodes.length > 0) {
+    const fallbackNodes = sampleVisibleNodes(Math.min(renderNodeBudget, 260))
+    const fallbackIds = new Set(fallbackNodes.map((node) => node.id))
+    state.renderClusters = []
+    state.renderNodes = fallbackNodes
+    state.renderEdges = withMeshEdges(fallbackNodes, collectVisibleEdgesForNodes(fallbackIds))
+  }
+}
+
+const isNodeVisibleOnScreen = (node, width, height) => {
+  const radius = nodeRadius(node) * state.transform.scale
+  const screenX = node.x * state.transform.scale + state.transform.x
+  const screenY = node.y * state.transform.scale + state.transform.y
+
+  return (
+    screenX + radius >= 0 &&
+    screenX - radius <= width &&
+    screenY + radius >= 0 &&
+    screenY - radius <= height
+  )
+}
+
+const hasValidTransform = () =>
+  isFiniteNumber(state.transform.x) &&
+  isFiniteNumber(state.transform.y) &&
+  isFiniteNumber(state.transform.scale) &&
+  Math.abs(state.transform.x) <= transformCoordinateLimit &&
+  Math.abs(state.transform.y) <= transformCoordinateLimit &&
+  state.transform.scale > 0
+
+const sanitizeNodePosition = node => {
+  if (!isReasonableCoordinate(node.x)) node.x = 0
+  if (!isReasonableCoordinate(node.y)) node.y = 0
+  if (!isFiniteNumber(node.vx) || Math.abs(node.vx) > worldCoordinateLimit) node.vx = 0
+  if (!isFiniteNumber(node.vy) || Math.abs(node.vy) > worldCoordinateLimit) node.vy = 0
+}
+
+const sanitizeAllNodePositions = () => {
+  state.nodes.forEach(sanitizeNodePosition)
+  state.visibleNodes.forEach(sanitizeNodePosition)
+}
+
+const sanitizeGraphState = () => {
+  state.renderNodes.forEach(sanitizeNodePosition)
+}
+
 const render = now => {
   const delta = now - state.last
   state.last = now
+  const backgroundFrameIntervalMs =
+    state.nodes.length > massiveGraphNodeThreshold
+      ? (state.transform.scale < 0.035 ? 130 : state.transform.scale < 0.08 ? 110 : 86)
+      : state.nodes.length > largeGraphNodeThreshold
+        ? 64
+        : 16
+  const isInteracting =
+    state.pointer.down ||
+    state.renderVisibilityDirty ||
+    state.recoveringViewport
+  const minFrameIntervalMs = isInteracting ? 16 : backgroundFrameIntervalMs
+  if (delta < minFrameIntervalMs) {
+    requestAnimationFrame(render)
+    return
+  }
   const rect = canvas.getBoundingClientRect()
   const width = Math.max(rect.width, 320)
   const height = Math.max(rect.height, 320)
+  sanitizeGraphState()
+  if (!hasValidTransform()) {
+    resetView()
+  }
   ctx.clearRect(0, 0, width, height)
   if (state.nodes.length === 0) {
     ctx.fillStyle = '#99a5b5'
@@ -231,17 +1688,69 @@ const render = now => {
   ctx.translate(state.transform.x, state.transform.y)
   ctx.scale(state.transform.scale, state.transform.scale)
 
-  visibleEdges().forEach(edge => {
-    const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
-    ctx.beginPath()
-    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
-    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
-    ctx.strokeStyle = selectedEdge ? graphTheme.edgeActive : graphTheme.edge
-    ctx.lineWidth = (selectedEdge ? 1.8 : 1) + Math.min(edgeWeight(edge) - 1, 8) * 0.22
-    ctx.stroke()
-  })
+  computeRenderVisibility()
+  tick(delta)
+  const hasVisibleNodeOnScreen = state.renderNodes.some((node) => isNodeVisibleOnScreen(node, width, height))
+  const manualZoomGuardActive = now - state.lastManualZoomAt < zoomRecoveryGuardMs
+  if (!hasVisibleNodeOnScreen && state.renderNodes.length > 0 && !manualZoomGuardActive) {
+    state.offscreenFrameCount += 1
+    if (state.offscreenFrameCount >= 6 && !state.recoveringViewport) {
+      state.recoveringViewport = true
+      fitView({ useFiltered: true })
+      state.offscreenFrameCount = 0
+      requestAnimationFrame(() => {
+        state.recoveringViewport = false
+      })
+    }
+  } else {
+    state.offscreenFrameCount = 0
+  }
+  const minimumEdgeScale =
+    state.renderNodes.length > 1300
+      ? 0.12
+      : state.renderNodes.length > 900
+        ? 0.085
+        : state.renderNodes.length > 500
+          ? 0.05
+          : 0
+  const drawEdges =
+    state.renderClusters.length === 0 &&
+    state.transform.scale >= minimumEdgeScale
+  if (drawEdges) {
+    drawGraphEdges()
+  }
 
-  filteredNodes().forEach(node => {
+  if (state.renderClusters.length > 0) {
+    const safeScale = Math.max(state.transform.scale, 0.0001)
+    state.renderClusters.forEach(cluster => {
+      const isMacro = cluster.id === 'macro-galaxy'
+      const radiusPx = isMacro
+        ? 10
+        : Math.max(8, Math.min(28, 8 + Math.log2(cluster.count + 1) * 3))
+      const radius = radiusPx / safeScale
+      const haloRadius = (radiusPx + (isMacro ? 8 : 4)) / safeScale
+      ctx.beginPath()
+      ctx.arc(cluster.x, cluster.y, haloRadius, 0, Math.PI * 2)
+      ctx.fillStyle = isMacro ? 'rgba(243, 247, 251, 0.28)' : graphTheme.nodeHalo
+      ctx.fill()
+      ctx.beginPath()
+      ctx.arc(cluster.x, cluster.y, radius, 0, Math.PI * 2)
+      ctx.fillStyle = isMacro ? '#f3f7fb' : graphTheme.node
+      ctx.fill()
+      ctx.lineWidth = 1.4 / safeScale
+      ctx.strokeStyle = isMacro ? '#ffffff' : graphTheme.nodeStroke
+      ctx.stroke()
+      if (isMacro && cluster.representative?.title) {
+        ctx.fillStyle = '#edf2f7'
+        ctx.font = 12 / safeScale + 'px Inter, system-ui, sans-serif'
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'top'
+        ctx.fillText(cluster.representative.title.slice(0, 28), cluster.x, cluster.y + (radiusPx + 9) / safeScale)
+      }
+      // Keep cluster markers minimal and faster to draw on large graphs.
+    })
+  } else {
+    state.renderNodes.forEach(node => {
     const radius = nodeRadius(node)
     const isSelected = state.selected?.id === node.id
     const isHovered = state.hovered?.id === node.id
@@ -257,16 +1766,28 @@ const render = now => {
     ctx.strokeStyle = isSelected ? graphTheme.nodeStrokeActive : graphTheme.nodeStroke
     ctx.stroke()
 
-    if (isSelected || isHovered || state.transform.scale > 1.18 || state.nodes.length <= 25) {
+    const shouldDrawLabels =
+      isSelected ||
+      isHovered ||
+      (state.nodes.length > largeGraphNodeThreshold && state.transform.scale >= 0.62 && state.renderNodes.length <= 1200) ||
+      (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
+    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)
     }
-  })
+    })
+  }
 
   ctx.restore()
+  if (state.renderNodes.length === 0 && state.renderClusters.length === 0) {
+    ctx.fillStyle = '#99a5b5'
+    ctx.font = '12px Inter, system-ui, sans-serif'
+    ctx.textAlign = 'center'
+    ctx.fillText('Move or zoom to reveal nearby notes', width / 2, height / 2)
+  }
   requestAnimationFrame(render)
 }
 
@@ -274,88 +1795,209 @@ 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 allNotesList = () => state.nodes.length
-  ? state.nodes.map(node => '<li><button type="button" data-node-id="' + escapeHtml(node.id) + '">' + escapeHtml(node.title) + '</button><small>' + escapeHtml(node.path) + '</small></li>').join('')
-  : '<li><small>No notes indexed.</small></li>'
-
-const selectNode = node => {
-  state.selected = node
-  if (!node) {
-    elements.title.textContent = 'Graph Overview'
-    elements.path.textContent = state.nodes.length + ' notes and ' + state.graph.edges.length + ' links indexed.'
-    elements.tags.innerHTML = ''
-    elements.notes.innerHTML = allNotesList()
-    elements.content.textContent = 'Selecione uma nota no grafo ou na lista para ver o Markdown completo, backlinks e links de saida.'
-    elements.outgoing.innerHTML = '<li><small>Select a note to inspect outgoing links.</small></li>'
-    elements.incoming.innerHTML = '<li><small>Select a note to inspect backlinks.</small></li>'
-    return
-  }
+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
+  const outgoing = state.edges
     .filter(edge => edge.source === node.id)
-    .map(edge => withEdgeMeta(edge.target ? nodeById.get(edge.target) : { title: edge.targetTitle + ' (unresolved)', path: 'Missing note' }, edge))
+    .map(edge => withEdgeMeta(edge.target ? nodeById.get(edge.target) : { title: (edge.targetTitle || 'Unknown') + ' (unresolved)', path: 'Missing note' }, edge))
     .filter(Boolean)
-  const incoming = state.graph.edges
+  const incoming = state.edges
     .filter(edge => edge.target === node.id)
     .map(edge => withEdgeMeta(nodeById.get(edge.source), edge))
     .filter(Boolean)
 
-  elements.title.textContent = node.title
-  elements.path.textContent = node.path
-  elements.tags.innerHTML = node.tags.length
+  return { outgoing, incoming }
+}
+
+const fetchNodeDetails = async node => {
+  const cached = state.nodeDetails.get(node.id)
+  if (cached) {
+    return cached
+  }
+
+  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(node.id) + agentQuery('&'))
+  if (!response.ok) {
+    throw new Error('Failed to load graph node details')
+  }
+
+  const payload = await response.json()
+  const detail = payload?.node
+  if (!detail || !detail.id) {
+    throw new Error('Invalid graph node payload')
+  }
+  state.nodeDetails.set(detail.id, detail)
+  return detail
+}
+
+const wait = async (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds))
+
+const openContentDialog = async node => {
+  if (!node) return
+  elements.contentTitle.textContent = node.title || 'Loading...'
+  elements.contentPath.textContent = node.path || 'Loading...'
+  elements.contentTags.innerHTML = Array.isArray(node.tags) && node.tags.length
     ? node.tags.map(tag => '<span>#' + escapeHtml(tag) + '</span>').join('')
     : '<span>No tags</span>'
-  elements.notes.innerHTML = allNotesList()
-  elements.content.textContent = node.content
-  elements.outgoing.innerHTML = list(outgoing)
-  elements.incoming.innerHTML = list(incoming)
+  const initialLinks = linkedNodes(node)
+  elements.contentOutgoing.innerHTML = list(initialLinks.outgoing)
+  elements.contentIncoming.innerHTML = list(initialLinks.incoming)
+  elements.contentBody.textContent = 'Loading note content...'
+  if (!elements.contentDialog.open) {
+    elements.contentDialog.showModal()
+  }
+
+  const applyDetailToDialog = detail => {
+    elements.contentTitle.textContent = detail.title
+    elements.contentPath.textContent = detail.path
+    elements.contentTags.innerHTML = detail.tags.length
+      ? detail.tags.map(tag => '<span>#' + escapeHtml(tag) + '</span>').join('')
+      : '<span>No tags</span>'
+    elements.contentBody.textContent = detail.content
+  }
+
+  try {
+    const detailedNode = await fetchNodeDetails(node)
+    if (state.selected?.id !== node.id) {
+      return
+    }
+    applyDetailToDialog(detailedNode)
+  } catch {
+    try {
+      await wait(120)
+      const retriedNode = await fetchNodeDetails(node)
+      if (state.selected?.id !== node.id) {
+        return
+      }
+      applyDetailToDialog(retriedNode)
+    } catch {
+      elements.contentBody.textContent = 'Unable to load note content.'
+    }
+  }
+}
+
+const selectNode = (node, options = { openContent: false }) => {
+  state.selected = node
+  if (node && options.openContent) {
+    openContentDialog(node).catch(() => {
+      elements.contentBody.textContent = 'Unable to load note content.'
+    })
+  }
 }
 
 const selectNodeById = id => {
   const node = state.nodes.find(item => item.id === id)
-  if (node) selectNode(node)
+  if (node) selectNode(node, { openContent: true })
+}
+
+const zoomAtPoint = (screenX, screenY, factor, source = 'generic') => {
+  if (source === 'wheel') {
+    state.lastManualZoomAt = performance.now()
+  }
+  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 = clampScale(nextScale)
+  state.transform.x = clampTransformCoordinate(screenX - worldX * nextScale)
+  state.transform.y = clampTransformCoordinate(screenY - worldY * nextScale)
+  state.offscreenFrameCount = 0
+  markRenderDirty()
+}
+
+const wheelZoomFactor = event => {
+  const isModifierZoom = event.metaKey || event.ctrlKey
+  const deltaModeFactor = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 120 : 1
+  const absoluteDelta = Math.min(Math.abs(event.deltaY * deltaModeFactor), 1600)
+
+  if (absoluteDelta <= 0.0001) {
+    return 1
+  }
+
+  const baseStep = Math.max(0.06, Math.min(0.45, absoluteDelta / 480))
+  const adjustedStep = baseStep * (isModifierZoom ? 1.4 : 1)
+
+  return event.deltaY < 0 ? 1 + adjustedStep : 1 / (1 + adjustedStep)
 }
 
-const zoom = factor => {
-  state.transform.scale = Math.max(0.25, Math.min(3.5, state.transform.scale * factor))
+const handleWheelZoom = event => {
+  if (elements.contentDialog?.open) {
+    return
+  }
+
+  event.preventDefault()
+  const rect = canvas.getBoundingClientRect()
+  const rawCursorX = Number.isFinite(event.offsetX) ? event.offsetX : event.clientX - rect.left
+  const rawCursorY = Number.isFinite(event.offsetY) ? event.offsetY : event.clientY - rect.top
+  const cursorX = Math.max(0, Math.min(Math.max(rect.width, 320), rawCursorX))
+  const cursorY = Math.max(0, Math.min(Math.max(rect.height, 320), rawCursorY))
+  const factor = wheelZoomFactor(event)
+
+  if (!Number.isFinite(factor) || factor <= 0 || factor === 1) {
+    return
+  }
+
+  zoomAtPoint(cursorX, cursorY, factor, 'wheel')
 }
 
 const bindEvents = () => {
   window.addEventListener('resize', resize)
   elements.search.addEventListener('input', event => {
     state.query = event.target.value
-    elements.stats.textContent = state.query
-      ? filteredNodes().length + ' filtered notes'
-      : state.nodes.length + ' notes · ' + state.edges.length + ' links'
+    recomputeVisibility()
+    scheduleContentFilterSync()
   })
   elements.agent.addEventListener('change', event => {
     state.agentId = event.target.value
+    writeStoredAgent(state.agentId)
+    syncAgentInUrl(state.agentId)
     state.selected = null
+    state.nodeDetails = new Map()
+    resetContentFilter()
+    recomputeVisibility()
+    scheduleContentFilterSync()
     loadGraph({ reset: true }).catch(error => {
-      elements.stats.textContent = 'Failed to load agent graph'
       console.error(error)
     })
   })
-  elements.zoomIn.addEventListener('click', () => zoom(1.18))
-  elements.zoomOut.addEventListener('click', () => zoom(0.84))
-  elements.reset.addEventListener('click', resetView)
-  ;[elements.notes, elements.outgoing, elements.incoming].forEach(element => {
-    element.addEventListener('click', event => {
-      const target = event.target
-      if (!(target instanceof HTMLElement)) return
-      const nodeId = target.dataset.nodeId
-      if (nodeId) selectNodeById(nodeId)
+  elements.zoomIn.addEventListener('click', () => {
+    const rect = canvas.getBoundingClientRect()
+    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.3)
+  })
+  elements.zoomOut.addEventListener('click', () => {
+    const rect = canvas.getBoundingClientRect()
+    zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.77)
+  })
+  if (elements.fit) {
+    elements.fit.addEventListener('click', () => {
+      fitView({ useFiltered: true })
     })
+  }
+  elements.reset.addEventListener('click', () => {
+    resetView()
+  })
+  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()
+  })
+  canvas.addEventListener('wheel', handleWheelZoom, { passive: false })
+  canvas.addEventListener('dblclick', event => {
+    const rect = canvas.getBoundingClientRect()
+    const cursorX = event.clientX - rect.left
+    const cursorY = event.clientY - rect.top
+    zoomAtPoint(cursorX, cursorY, 1.25)
   })
-  canvas.addEventListener('wheel', event => {
-    event.preventDefault()
-    zoom(event.deltaY < 0 ? 1.08 : 0.92)
-  }, { passive: false })
   canvas.addEventListener('pointerdown', event => {
     const point = worldPoint(event)
     const node = hitNode(point)
@@ -363,12 +2005,24 @@ const bindEvents = () => {
     if (node) {
       node.x = point.x
       node.y = point.y
+      markRenderDirty()
     }
     canvas.setPointerCapture(event.pointerId)
   })
   canvas.addEventListener('pointermove', event => {
     const point = worldPoint(event)
-    state.hovered = hitNode(point)
+    const now = performance.now()
+    const canHoverHitTest =
+      !(state.nodes.length > massiveGraphNodeThreshold && state.transform.scale < 0.06)
+    const shouldHitTest = canHoverHitTest &&
+      (state.pointer.down || now - state.lastHoverHitAt >= hoverHitTestIntervalMs)
+    if (shouldHitTest) {
+      state.hovered = hitNode(point)
+      state.lastHoverHitAt = now
+    } else if (!canHoverHitTest) {
+      state.hovered = null
+    }
+    state.cursor = { x: event.clientX, y: event.clientY, inCanvas: true }
     if (!state.pointer.down) return
     const dx = event.clientX - state.pointer.x
     const dy = event.clientY - state.pointer.y
@@ -378,34 +2032,72 @@ const bindEvents = () => {
     if (state.pointer.dragNode) {
       state.pointer.dragNode.x = point.x
       state.pointer.dragNode.y = point.y
+      markRenderDirty()
       return
     }
     state.transform.x += dx
     state.transform.y += dy
+    state.transform.x = clampTransformCoordinate(state.transform.x)
+    state.transform.y = clampTransformCoordinate(state.transform.y)
+    state.offscreenFrameCount = 0
+    markRenderDirty()
   })
   canvas.addEventListener('pointerup', event => {
-    if (state.pointer.dragNode && !state.pointer.moved) selectNode(state.pointer.dragNode)
-    if (!state.pointer.dragNode && !state.pointer.moved) selectNode(state.hovered)
+    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)
   })
+  canvas.addEventListener('pointercancel', () => {
+    state.pointer = { x: 0, y: 0, down: false, dragNode: null, moved: false }
+  })
+  canvas.addEventListener('pointerenter', event => {
+    state.cursor = { x: event.clientX, y: event.clientY, inCanvas: true }
+  })
+  canvas.addEventListener('pointerleave', event => {
+    state.cursor = { x: event.clientX, y: event.clientY, inCanvas: false }
+  })
+  window.addEventListener('keydown', event => {
+    if (event.key === '+' || event.key === '=') {
+      event.preventDefault()
+      const rect = canvas.getBoundingClientRect()
+      zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 1.25)
+      return
+    }
+
+    if (event.key === '-' || event.key === '_') {
+      event.preventDefault()
+      const rect = canvas.getBoundingClientRect()
+      zoomAtPoint(Math.max(rect.width, 320) / 2, Math.max(rect.height, 320) / 2, 0.8)
+      return
+    }
+
+    if (event.key === '0') {
+      event.preventDefault()
+      resetView()
+    }
+  })
 }
 
 const loadAgents = async () => {
   const response = await fetch('/api/agents')
   const payload = await response.json()
   const agents = Array.isArray(payload.agents) ? payload.agents : []
-  const currentExists = agents.some(agent => agent.id === state.agentId)
+  const preferredAgent = state.agentId || initialAgentFromUrl || readStoredAgent()
+  const currentExists = agents.some(agent => agent.id === preferredAgent)
   const selected = currentExists
-    ? state.agentId
+    ? preferredAgent
     : (agents.find(agent => agent.id === 'shared')?.id ?? agents[0]?.id ?? 'shared')
   const signature = JSON.stringify(agents.map(agent => [agent.id, agent.documentCount]))
 
   state.agentId = selected
+  writeStoredAgent(selected)
+  syncAgentInUrl(selected)
   if (signature !== state.agentsSignature) {
+    const formatAgentLabel = (agent) => agent.id
     elements.agent.innerHTML = agents.length
-      ? agents.map(agent => '<option value="' + escapeHtml(agent.id) + '">' + escapeHtml(agent.id) + ' · ' + agent.documentCount + '</option>').join('')
-      : '<option value="shared">shared · 0</option>'
+      ? agents.map(agent => '<option value="' + escapeHtml(agent.id) + '">' + escapeHtml(formatAgentLabel(agent)) + '</option>').join('')
+      : '<option value="shared">shared</option>'
     state.agentsSignature = signature
   }
   elements.agent.value = selected
@@ -426,6 +2118,10 @@ const loadGraph = async (options = { reset: false }) => {
 
   const payload = await response.json()
   const graph = payload?.layout ?? payload
+  state.graphTotals = {
+    nodes: Number.isFinite(payload?.totals?.nodes) ? payload.totals.nodes : (Array.isArray(graph.nodes) ? graph.nodes.length : 0),
+    edges: Number.isFinite(payload?.totals?.edges) ? payload.totals.edges : (Array.isArray(graph.edges) ? graph.edges.length : 0)
+  }
   const signature = payload?.signature ?? graphSignature(graph)
   if (!options.reset && signature === state.graphSignature) return
   const selectedId = state.selected?.id
@@ -433,18 +2129,37 @@ const loadGraph = async (options = { reset: false }) => {
   state.graphSignature = signature
   state.graph = graph
   state.nodes = layout.nodes
+  state.nodeById = new Map(state.nodes.map((node) => [node.id, node]))
   state.edges = layout.edges
-  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
+  state.nodeDegrees = state.edges.reduce((degrees, edge) => {
+    degrees.set(edge.source, (degrees.get(edge.source) ?? 0) + edgeWeight(edge))
+    if (edge.target) {
+      degrees.set(edge.target, (degrees.get(edge.target) ?? 0) + edgeWeight(edge))
+    }
+    return degrees
+  }, new Map())
+  state.nodeDetails = new Map()
+  pushNodesToFilterWorker()
+  resetContentFilter()
+  sanitizeAllNodePositions()
+  recomputeVisibility()
+  scheduleContentFilterSync()
+  const tags = new Set(state.nodes.flatMap(node => node.tags))
+  setGraphStatus(state.agentId + ' · ' + state.graphTotals.nodes + ' notes · ' + state.graphTotals.edges + ' links · live')
+  elements.nodeCount.textContent = state.graphTotals.nodes
+  elements.edgeCount.textContent = state.graphTotals.edges
   elements.tagCount.textContent = tags.size
   resize()
   if (options.reset) resetView()
-  selectNode(state.nodes.find(node => node.id === selectedId) ?? null)
+  const selectedNode = state.nodes.find(node => node.id === selectedId) ?? null
+  selectNode(selectedNode, { openContent: Boolean(selectedNode && elements.contentDialog.open) })
+  if (!selectedNode && elements.contentDialog.open) {
+    elements.contentDialog.close()
+  }
 }
 
 bindEvents()
+initFilterWorker()
 requestAnimationFrame(() => {
   resize()
   resetView()
@@ -475,7 +2190,6 @@ loadAgents()
     setInterval(refreshGraphLoop, pollIntervalMs)
   })
   .catch(error => {
-    elements.stats.textContent = 'Failed to load graph'
     console.error(error)
   })