@andespindola/brainlink 1.0.5 → 1.0.6

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

@@ -1,1837 +1,24 @@
-export const createClientJs = () => `const canvas = document.getElementById('graph')
-let ctx2dFallback = null
-const byId = (id) => document.getElementById(id)
-const elements = {
-  search: byId('search'),
-  agent: byId('agent'),
-  context: byId('context'),
-  nodeCount: byId('nodeCount'),
-  edgeCount: byId('edgeCount'),
-  zoomIn: byId('zoomIn'),
-  zoomOut: byId('zoomOut'),
-  fit: byId('fit'),
-  releaseNode: byId('releaseNode'),
-  reset: byId('reset'),
-  uploadOpen: byId('uploadOpen'),
-  uploadDialog: byId('uploadDialog'),
-  uploadForm: byId('uploadForm'),
-  uploadFile: byId('uploadFile'),
-  uploadTitleInput: byId('uploadTitleInput'),
-  uploadAllowSensitive: byId('uploadAllowSensitive'),
-  uploadClose: byId('uploadClose'),
-  uploadSubmit: byId('uploadSubmit'),
-  uploadStatus: byId('uploadStatus'),
-  labels: byId('graphLabels'),
-  tooltip: byId('graphTooltip'),
-  miniMap: byId('miniMap'),
-  contentDialog: byId('contentDialog'),
-  contentTitle: byId('contentTitle'),
-  contentPath: byId('contentPath'),
-  contentFacts: byId('contentFacts'),
-  contentContextLinks: byId('contentContextLinks'),
-  contentTags: byId('contentTags'),
-  contentOutgoing: byId('contentOutgoing'),
-  contentIncoming: byId('contentIncoming'),
-  contentBody: byId('contentBody'),
-  contentClose: byId('contentClose'),
-  copyWikiLink: byId('copyWikiLink'),
-  suggestNodeLinks: byId('suggestNodeLinks'),
-  contentActionStatus: byId('contentActionStatus'),
-  contentLinkSuggestions: byId('contentLinkSuggestions')
-}
-
-const state = {
-  camera: {
-    x: 0,
-    y: 0,
-    scale: 0.22
-  },
-  pointer: {
-    down: false,
-    moved: false,
-    dragging: false,
-    dragNodeId: '',
-    x: 0,
-    y: 0,
-    startX: 0,
-    startY: 0,
-    startWorldX: 0,
-    startWorldY: 0,
-    nodeStartX: 0,
-    nodeStartY: 0,
-    worldAnchorX: 0,
-    worldAnchorY: 0
-  },
-  viewport: {
-    width: 320,
-    height: 320,
-    ratio: window.devicePixelRatio || 1
-  },
-  workerReady: false,
-  rendererMode: 'worker',
-  renderWorker: null,
-  agentId: '',
-  contextId: '',
-  graphSignature: '',
-  graphMode: 'near',
-  nodePositionsSignature: '',
-  nodePositionsScope: '',
-  serverNodePositionsScope: '',
-  nodePositions: new Map(),
-  hoveredNodeId: '',
-  focusedNodeIds: new Set(),
-  spatialIndex: {
-    key: '',
-    cells: new Map()
-  },
-  miniMapView: null,
-  miniMapDirty: true,
-  overlayScheduled: false,
-  overlayIdleTimer: null,
-  chunk: {
-    nodes: [],
-    edges: []
-  },
-  selectedNodeId: null,
-  searchToken: 0,
-  searchTimer: null,
-  searchResultIds: new Set(),
-  fetchToken: 0,
-  fetchTimer: null,
-  fetchAbortController: null,
-  lastChunkRequestKey: '',
-  cameraSyncScheduled: false,
-  lastWheelAt: 0,
-  lastVisibleNodes: 0,
-  lastVisibleEdges: 0,
-  totals: {
-    nodes: 0,
-    edges: 0
-  }
-}
-
-const zoomRange = {
-  min: 0.0002,
-  max: 4.5
-}
-
-const selectedAgentStorageKey = 'brainlink:selected-agent'
-const selectedContextStorageKey = 'brainlink:selected-context'
-const nodePositionsStoragePrefix = 'brainlink:graph-node-positions:'
-
-const escapeHtml = (value) => String(value)
-  .replaceAll('&', '&')
-  .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 writeStoredAgent = (agentId) => {
-  try {
-    if (!agentId) {
-      window.localStorage.removeItem(selectedAgentStorageKey)
-      return
-    }
-    window.localStorage.setItem(selectedAgentStorageKey, agentId)
-  } catch {}
-}
-
-const readStoredContext = () => {
-  try {
-    const value = window.localStorage.getItem(selectedContextStorageKey)?.trim() ?? ''
-    return value.length > 0 ? value : ''
-  } catch {
-    return ''
-  }
-}
-
-const writeStoredContext = (contextId) => {
-  try {
-    if (!contextId) {
-      window.localStorage.removeItem(selectedContextStorageKey)
-      return
-    }
-    window.localStorage.setItem(selectedContextStorageKey, contextId)
-  } catch {}
-}
-
-const nodePositionsStorageKey = () => [
-  nodePositionsStoragePrefix,
-  state.graphSignature || 'unknown',
-  state.agentId || 'all-agents',
-  state.contextId || 'all-contexts'
-].join(':')
-
-const readStoredNodePositions = () => {
-  try {
-    const raw = window.localStorage.getItem(nodePositionsStorageKey())
-    const parsed = raw ? JSON.parse(raw) : []
-    if (!Array.isArray(parsed)) {
-      return new Map()
-    }
-
-    return new Map(parsed.flatMap((entry) => {
-      const id = typeof entry?.[0] === 'string' ? entry[0] : ''
-      const x = Number(entry?.[1])
-      const y = Number(entry?.[2])
-      return id && Number.isFinite(x) && Number.isFinite(y) ? [[id, { x, y }]] : []
-    }))
-  } catch {
-    return new Map()
-  }
-}
-
-const ensureNodePositionsLoaded = () => {
-  const storageKey = nodePositionsStorageKey()
-  if (!state.graphSignature || (state.nodePositionsSignature === state.graphSignature && state.nodePositionsScope === storageKey)) {
-    return
-  }
-
-  state.nodePositions = readStoredNodePositions()
-  state.nodePositionsSignature = state.graphSignature
-  state.nodePositionsScope = storageKey
-}
-
-const writeStoredNodePositions = () => {
-  try {
-    if (!state.graphSignature) {
-      return
-    }
-
-    const entries = Array.from(state.nodePositions.entries())
-      .filter((entry) => Number.isFinite(entry[1]?.x) && Number.isFinite(entry[1]?.y))
-      .map((entry) => [entry[0], entry[1].x, entry[1].y])
-
-    if (entries.length === 0) {
-      window.localStorage.removeItem(nodePositionsStorageKey())
-      return
-    }
-
-    window.localStorage.setItem(nodePositionsStorageKey(), JSON.stringify(entries))
-  } catch {}
-}
-
-const clearStoredNodePositions = () => {
-  try {
-    if (state.graphSignature) {
-      window.localStorage.removeItem(nodePositionsStorageKey())
-    }
-  } catch {}
-  state.nodePositions = new Map()
-  state.nodePositionsSignature = state.graphSignature
-  state.nodePositionsScope = nodePositionsStorageKey()
-}
-
-const graphViewStateQuery = () => {
-  const params = new URLSearchParams({ signature: state.graphSignature })
-  if (state.agentId) {
-    params.set('agent', state.agentId)
-  }
-  if (state.contextId) {
-    params.set('context', state.contextId)
-  }
-  return params.toString()
-}
-
-const syncNodePositionsFromServer = async () => {
-  if (!state.graphSignature) {
-    return
-  }
-  const scope = nodePositionsStorageKey()
-  if (state.serverNodePositionsScope === scope) {
-    return
-  }
-  state.serverNodePositionsScope = scope
-
-  try {
-    const response = await fetch('/api/graph-view-state?' + graphViewStateQuery())
-    if (!response.ok) {
-      return
-    }
-    const payload = await response.json()
-    const positions = Array.isArray(payload?.positions) ? payload.positions : []
-    if (positions.length === 0) {
-      return
-    }
-    state.nodePositions = new Map(positions.flatMap((position) => {
-      const id = typeof position?.id === 'string' ? position.id : ''
-      const x = Number(position?.x)
-      const y = Number(position?.y)
-      return id && Number.isFinite(x) && Number.isFinite(y) ? [[id, { x, y }]] : []
-    }))
-    writeStoredNodePositions()
-  } catch {}
-}
-
-const persistNodePositionsToServer = () => {
-  if (!state.graphSignature) {
-    return
-  }
-
-  const positions = Array.from(state.nodePositions.entries()).map(([id, position]) => ({
-    id,
-    x: position.x,
-    y: position.y
-  }))
-
-  fetch('/api/graph-view-state?' + graphViewStateQuery(), {
-    method: 'POST',
-    headers: { 'content-type': 'application/json' },
-    body: JSON.stringify({ positions })
-  }).catch(() => {})
-}
-
-const clearNodePositionsOnServer = () => {
-  if (!state.graphSignature) {
-    return
-  }
-
-  fetch('/api/graph-view-state?' + graphViewStateQuery(), { method: 'DELETE' }).catch(() => {})
-}
-
-const releaseSelectedNodePosition = () => {
-  if (!state.selectedNodeId || !state.nodePositions.has(state.selectedNodeId)) {
-    return
-  }
-
-  state.nodePositions.delete(state.selectedNodeId)
-  writeStoredNodePositions()
-  persistNodePositionsToServer()
-  scheduleChunkFetch({ fit: false })
-}
-
-const syncAgentInUrl = (agentId) => {
-  try {
-    const url = new URL(window.location.href)
-    if (agentId && agentId.trim().length > 0) {
-      url.searchParams.set('agent', agentId)
-    } else {
-      url.searchParams.delete('agent')
-    }
-    window.history.replaceState({}, '', url.toString())
-  } catch {}
-}
-
-const syncContextInUrl = (contextId) => {
-  try {
-    const url = new URL(window.location.href)
-    if (contextId && contextId.trim().length > 0) {
-      url.searchParams.set('context', contextId)
-    } else {
-      url.searchParams.delete('context')
-    }
-    window.history.replaceState({}, '', url.toString())
-  } catch {}
-}
-
-const initialAgentFromUrl = (() => {
-  try {
-    const raw = new URL(window.location.href).searchParams.get('agent')
-    const value = raw?.trim() ?? ''
-    return value.length > 0 ? value : ''
-  } catch {
-    return ''
-  }
-})()
-
-const initialContextFromUrl = (() => {
-  try {
-    const raw = new URL(window.location.href).searchParams.get('context')
-    const value = raw?.trim() ?? ''
-    return value.length > 0 ? value : ''
-  } catch {
-    return ''
-  }
-})()
-
-const scopeQuery = (separator = '?') => {
-  const params = new URLSearchParams()
-  if (state.agentId) {
-    params.set('agent', state.agentId)
-  }
-  if (state.contextId) {
-    params.set('context', state.contextId)
-  }
-  const query = params.toString()
-
-  return query ? separator + query : ''
-}
-
-const parseColor = (hex) => {
-  const normalized = String(hex || '#ffffff').replace('#', '')
-  const expanded = normalized.length === 3
-    ? normalized.split('').map((char) => char + char).join('')
-    : normalized.padEnd(6, 'f')
-  const value = Number.parseInt(expanded, 16)
-  return [
-    ((value >> 16) & 255) / 255,
-    ((value >> 8) & 255) / 255,
-    (value & 255) / 255,
-    1
-  ]
-}
-
-const graphTheme = {
-  node: parseColor('#5aa8ff'),
-  nodeCluster: parseColor('#3f7fbd'),
-  nodeHighlight: parseColor('#ffcb67'),
-  nodeSelected: parseColor('#edf4ff'),
-  nodePalette: [
-    parseColor('#5aa8ff'),
-    parseColor('#5ecf92'),
-    parseColor('#ffb65c'),
-    parseColor('#ff7dac'),
-    parseColor('#a88fff'),
-    parseColor('#59d0dd'),
-    parseColor('#ff8f6a'),
-    parseColor('#a4b3c3'),
-    parseColor('#c9945f'),
-    parseColor('#7cb6ff')
-  ],
-  edge: [0.59, 0.71, 0.83, 0.14],
-  edgeHeavy: [0.59, 0.71, 0.83, 0.3],
-  clear: parseColor('#08131d')
-}
-
-const segmentPalette = ['#5aa8ff', '#5ecf92', '#ffb65c', '#ff7dac', '#a88fff', '#59d0dd', '#ff8f6a', '#a4b3c3', '#c9945f', '#7cb6ff']
-
-const segmentColorIndex = (segment) => {
-  const value = String(segment || '')
-  let hash = 0
-  for (let index = 0; index < value.length; index += 1) {
-    hash = ((hash << 5) - hash + value.charCodeAt(index)) | 0
-  }
-  return Math.abs(hash) % segmentPalette.length
-}
-
-const segmentColor = (segment) => segmentPalette[segmentColorIndex(segment)] || segmentPalette[0]
-const nodeKind = (node) => node?.[6] === 'cluster' ? 'cluster' : 'node'
-const isRealGraphNode = (node) => nodeKind(node) === 'node'
-
-const clampScale = (scale) => Math.max(zoomRange.min, Math.min(zoomRange.max, scale))
-
-const getZoomNodeBudget = () => {
-  const scale = state.camera.scale
-  if (scale < 0.06) return 900
-  if (scale < 0.12) return 1600
-  if (scale < 0.24) return 2600
-  if (scale < 0.7) return 4000
-  return 6000
-}
-
-const getZoomEdgeBudget = () => {
-  const scale = state.camera.scale
-  if (scale < 0.06) return 2000
-  if (scale < 0.12) return 4800
-  if (scale < 0.24) return 9000
-  if (scale < 0.7) return 15000
-  return 26000
-}
-
-const zoomDetailBand = () => {
-  const scale = state.camera.scale
-  if (scale < 0.06) return 'far'
-  if (scale < 0.12) return 'wide'
-  if (scale < 0.24) return 'mid'
-  if (scale < 0.7) return 'near'
-  return 'detail'
-}
-
-const graphStreamRequestKey = ({ x, y, w, h }) => {
-  const grid = Math.max(80, Math.min(720, Math.max(w, h) / 6))
-  return [
-    state.agentId || '*',
-    state.contextId || '*',
-    zoomDetailBand(),
-    getZoomNodeBudget(),
-    getZoomEdgeBudget(),
-    Math.round(x / grid),
-    Math.round(y / grid),
-    Math.round(w / grid),
-    Math.round(h / grid)
-  ].join(':')
-}
-
-const screenToWorld = (screenX, screenY) => ({
-  x: (screenX - state.camera.x) / state.camera.scale,
-  y: (screenY - state.camera.y) / state.camera.scale
-})
-
-const worldToScreen = (x, y) => ({
-  x: x * state.camera.scale + state.camera.x,
-  y: y * state.camera.scale + state.camera.y
-})
-
-const spatialIndexKey = () => [
-  state.graphSignature,
-  state.camera.x.toFixed(1),
-  state.camera.y.toFixed(1),
-  state.camera.scale.toFixed(4),
-  normalizeList(state.chunk.nodes).length
-].join(':')
-
-const rebuildSpatialIndex = () => {
-  const key = spatialIndexKey()
-  if (state.spatialIndex.key === key) {
-    return
-  }
-
-  const cellSize = 44
-  const cells = new Map()
-  normalizeList(state.chunk.nodes).forEach((node) => {
-    const id = typeof node?.[0] === 'string' ? node[0] : ''
-    if (!id) return
-    const x = Number(node?.[2])
-    const y = Number(node?.[3])
-    if (!Number.isFinite(x) || !Number.isFinite(y)) return
-    const point = worldToScreen(x, y)
-    const cellX = Math.floor(point.x / cellSize)
-    const cellY = Math.floor(point.y / cellSize)
-    const key = cellX + ',' + cellY
-    const bucket = cells.get(key)
-    if (bucket) {
-      bucket.push(node)
-      return
-    }
-    cells.set(key, [node])
-  })
-
-  state.spatialIndex = { key, cells }
-}
-
-const spatialCandidates = (screenX, screenY) => {
-  rebuildSpatialIndex()
-  const cellSize = 44
-  const cellX = Math.floor(screenX / cellSize)
-  const cellY = Math.floor(screenY / cellSize)
-  const nodes = []
-
-  for (let y = cellY - 1; y <= cellY + 1; y += 1) {
-    for (let x = cellX - 1; x <= cellX + 1; x += 1) {
-      nodes.push(...(state.spatialIndex.cells.get(x + ',' + y) ?? []))
-    }
-  }
-
-  return nodes
-}
-
-const nodeByIdFromChunk = () => new Map(normalizeList(state.chunk.nodes).map((node) => [node[0], node]))
-
-const linkedNodeIds = (nodeId) => {
-  const ids = new Set(nodeId ? [nodeId] : [])
-  normalizeList(state.chunk.edges).forEach((edge) => {
-    if (edge?.[0] === nodeId && typeof edge?.[1] === 'string') ids.add(edge[1])
-    if (edge?.[1] === nodeId && typeof edge?.[0] === 'string') ids.add(edge[0])
-  })
-  return ids
-}
-
-const setFocusedNodeIds = (ids) => {
-  state.focusedNodeIds = ids
-  if (state.renderWorker && state.workerReady) {
-    state.renderWorker.postMessage({ type: 'focus', ids: Array.from(ids) })
-  }
-  updateGraphOverlays()
-}
-
-const drawFallback = () => {
-  if (state.rendererMode !== 'fallback') {
-    return
-  }
-  ctx2dFallback = ctx2dFallback ?? canvas.getContext('2d')
-  if (!ctx2dFallback) {
-    return
-  }
-  const width = state.viewport.width
-  const height = state.viewport.height
-  const ratio = state.viewport.ratio
-  canvas.width = Math.floor(width * ratio)
-  canvas.height = Math.floor(height * ratio)
-  ctx2dFallback.setTransform(ratio, 0, 0, ratio, 0, 0)
-  ctx2dFallback.fillStyle = '#08131d'
-  ctx2dFallback.fillRect(0, 0, width, height)
-
-  const nodes = Array.isArray(state.chunk.nodes) ? state.chunk.nodes : []
-  const edges = Array.isArray(state.chunk.edges) ? state.chunk.edges : []
-  const nodeById = new Map()
-  for (let i = 0; i < nodes.length; i += 1) {
-    nodeById.set(nodes[i][0], nodes[i])
-  }
-
-  ctx2dFallback.strokeStyle = 'rgba(151,181,212,0.18)'
-  ctx2dFallback.lineWidth = 1
-  for (let i = 0; i < edges.length; i += 1) {
-    const edge = edges[i]
-    const source = nodeById.get(edge[0])
-    const target = nodeById.get(edge[1])
-    if (!source || !target) continue
-    const from = worldToScreen(source[2], source[3])
-    const to = worldToScreen(target[2], target[3])
-    ctx2dFallback.beginPath()
-    ctx2dFallback.moveTo(from.x, from.y)
-    ctx2dFallback.lineTo(to.x, to.y)
-    ctx2dFallback.stroke()
-  }
-
-  for (let i = 0; i < nodes.length; i += 1) {
-    const node = nodes[i]
-    const p = worldToScreen(node[2], node[3])
-    const selected = state.selectedNodeId === node[0]
-    const color = segmentColor(node[5] || node[4] || node[1])
-    const radius = Math.max(3.2, Math.min(16.5, 5 + node[7] * 0.65))
-
-    ctx2dFallback.beginPath()
-    ctx2dFallback.fillStyle = selected ? '#edf4ff' : color
-    ctx2dFallback.arc(p.x, p.y, radius, 0, Math.PI * 2)
-    ctx2dFallback.fill()
-  }
-
-  ctx2dFallback.fillStyle = '#97a9bd'
-  ctx2dFallback.font = '12px Inter, system-ui, sans-serif'
-  ctx2dFallback.textAlign = 'center'
-  ctx2dFallback.fillText('Fallback canvas mode', Math.max(width, 320) / 2, 24)
-}
-
-const updateTotals = () => {
-  elements.nodeCount.textContent = String(state.totals.nodes)
-  elements.edgeCount.textContent = String(state.totals.edges)
-}
-
-const updateWorkerCamera = () => {
-  updateGraphOverlays()
-  if (!state.renderWorker || !state.workerReady) {
-    return
-  }
-  if (state.cameraSyncScheduled) {
-    return
-  }
-  state.cameraSyncScheduled = true
-  requestAnimationFrame(() => {
-    state.cameraSyncScheduled = false
-    if (!state.renderWorker || !state.workerReady) {
-      return
-    }
-    state.renderWorker.postMessage({
-      type: 'camera',
-      camera: state.camera
-    })
-  })
-}
-
-const updateWorkerSize = () => {
-  updateGraphOverlays()
-  if (!state.renderWorker || !state.workerReady) {
-    return
-  }
-  state.renderWorker.postMessage({
-    type: 'resize',
-    width: state.viewport.width,
-    height: state.viewport.height,
-    devicePixelRatio: state.viewport.ratio
-  })
-}
-
-const normalizeList = (items) => Array.isArray(items) ? items : []
-
-const applyManualNodePositions = (nodes) => normalizeList(nodes).map((node) => {
-  const id = typeof node?.[0] === 'string' ? node[0] : ''
-  const position = id ? state.nodePositions.get(id) : null
-  if (!position || !Number.isFinite(position.x) || !Number.isFinite(position.y)) {
-    return node
-  }
-
-  const next = [...node]
-  next[2] = position.x
-  next[3] = position.y
-  return next
-})
-
-const updateNodePositionInChunk = (nodeId, x, y) => {
-  if (!nodeId || !Number.isFinite(x) || !Number.isFinite(y)) {
-    return
-  }
-
-  state.chunk = {
-    ...state.chunk,
-    nodes: normalizeList(state.chunk.nodes).map((node) => {
-      if (node?.[0] !== nodeId) {
-        return node
-      }
-      const next = [...node]
-      next[2] = x
-      next[3] = y
-      return next
-    })
-  }
-  state.spatialIndex.key = ''
-
-  if (state.renderWorker && state.workerReady) {
-    state.renderWorker.postMessage({ type: 'move-node', id: nodeId, x, y })
-  }
-  updateGraphOverlays()
-}
-
-const focusNodeInViewport = (nodeId, nextScale = null) => {
-  const node = nodeByIdFromChunk().get(nodeId)
-  if (!node) {
-    return false
-  }
-
-  const x = Number(node[2])
-  const y = Number(node[3])
-  if (!Number.isFinite(x) || !Number.isFinite(y)) {
-    return false
-  }
-
-  if (Number.isFinite(nextScale)) {
-    state.camera.scale = clampScale(Number(nextScale))
-  }
-  state.camera.x = state.viewport.width / 2 - x * state.camera.scale
-  state.camera.y = state.viewport.height / 2 - y * state.camera.scale
-  updateWorkerCamera()
-  scheduleChunkFetch()
-  return true
-}
-
-const showTooltip = (node, pointer) => {
-  if (!elements.tooltip || !node) {
-    return
-  }
-
-  elements.tooltip.hidden = false
-  elements.tooltip.innerHTML =
-    '<strong>' + escapeHtml(node[1] || node[0]) + '</strong>' +
-    '<small>' + escapeHtml(node[4] || node[5] || '') + '</small>'
-  elements.tooltip.style.left = Math.min(state.viewport.width - 24, pointer.x + 14) + 'px'
-  elements.tooltip.style.top = Math.min(state.viewport.height - 24, pointer.y + 14) + 'px'
-}
-
-const hideTooltip = () => {
-  if (elements.tooltip) {
-    elements.tooltip.hidden = true
-  }
-}
-
-const labelCandidates = () => {
-  const nodes = normalizeList(state.chunk.nodes)
-  const visible = nodes.filter((node) => {
-    const x = Number(node?.[2])
-    const y = Number(node?.[3])
-    if (!Number.isFinite(x) || !Number.isFinite(y)) return false
-    const point = worldToScreen(x, y)
-    return point.x >= -80 && point.x <= state.viewport.width + 80 && point.y >= -80 && point.y <= state.viewport.height + 80
-  })
-  const shouldShowMany = state.camera.scale >= 0.72 || visible.length <= 120
-  const focused = state.focusedNodeIds
-
-  return visible
-    .filter((node) => shouldShowMany || focused.has(node[0]) || node[0] === state.hoveredNodeId || node[0] === state.selectedNodeId || Number(node?.[7]) > 5.5)
-    .sort((left, right) => {
-      const leftFocused = focused.has(left[0]) || left[0] === state.hoveredNodeId || left[0] === state.selectedNodeId ? 1 : 0
-      const rightFocused = focused.has(right[0]) || right[0] === state.hoveredNodeId || right[0] === state.selectedNodeId ? 1 : 0
-      if (rightFocused !== leftFocused) return rightFocused - leftFocused
-      return Number(right?.[7] ?? 0) - Number(left?.[7] ?? 0)
-    })
-    .slice(0, state.camera.scale >= 0.72 ? 160 : 48)
-}
-
-const drawLabels = () => {
-  if (!elements.labels) {
-    return
-  }
-
-  elements.labels.innerHTML = labelCandidates().map((node) => {
-    const point = worldToScreen(Number(node[2]), Number(node[3]))
-    const focused = state.focusedNodeIds.has(node[0]) || node[0] === state.hoveredNodeId || node[0] === state.selectedNodeId
-    return '<span class="graph-label' + (focused ? ' is-focused' : '') + '" style="left:' +
-      point.x.toFixed(1) + 'px;top:' + point.y.toFixed(1) + 'px">' + escapeHtml(node[1] || node[0]) + '</span>'
-  }).join('')
-}
-
-const drawMiniMap = () => {
-  const miniMap = elements.miniMap
-  if (!(miniMap instanceof HTMLCanvasElement)) {
-    return
-  }
-  const nodes = normalizeList(state.chunk.nodes)
-  const ctx = miniMap.getContext('2d')
-  if (!ctx || nodes.length === 0) {
-    return
-  }
-
-  const ratio = window.devicePixelRatio || 1
-  const width = miniMap.clientWidth || 180
-  const height = miniMap.clientHeight || 120
-  miniMap.width = Math.floor(width * ratio)
-  miniMap.height = Math.floor(height * ratio)
-  ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
-  ctx.clearRect(0, 0, width, height)
-  ctx.fillStyle = 'rgba(8, 19, 29, 0.88)'
-  ctx.fillRect(0, 0, width, height)
-
-  const xs = nodes.map((node) => Number(node[2])).filter(Number.isFinite)
-  const ys = nodes.map((node) => Number(node[3])).filter(Number.isFinite)
-  const minX = Math.min(...xs)
-  const maxX = Math.max(...xs)
-  const minY = Math.min(...ys)
-  const maxY = Math.max(...ys)
-  const graphWidth = Math.max(1, maxX - minX)
-  const graphHeight = Math.max(1, maxY - minY)
-  const scale = Math.min((width - 18) / graphWidth, (height - 18) / graphHeight)
-  const offsetX = (width - graphWidth * scale) / 2
-  const offsetY = (height - graphHeight * scale) / 2
-  const toMini = (x, y) => ({
-    x: offsetX + (x - minX) * scale,
-    y: offsetY + (y - minY) * scale
-  })
-  state.miniMapView = { minX, minY, scale, offsetX, offsetY, width, height }
-
-  ctx.fillStyle = 'rgba(90, 168, 255, 0.62)'
-  nodes.forEach((node) => {
-    const point = toMini(Number(node[2]), Number(node[3]))
-    ctx.fillRect(point.x - 1, point.y - 1, 2, 2)
-  })
-
-  const worldTopLeft = screenToWorld(0, 0)
-  const worldBottomRight = screenToWorld(state.viewport.width, state.viewport.height)
-  const topLeft = toMini(Math.min(worldTopLeft.x, worldBottomRight.x), Math.min(worldTopLeft.y, worldBottomRight.y))
-  const bottomRight = toMini(Math.max(worldTopLeft.x, worldBottomRight.x), Math.max(worldTopLeft.y, worldBottomRight.y))
-  ctx.strokeStyle = 'rgba(90, 168, 255, 0.86)'
-  ctx.lineWidth = 1
-  ctx.strokeRect(topLeft.x, topLeft.y, Math.max(3, bottomRight.x - topLeft.x), Math.max(3, bottomRight.y - topLeft.y))
-}
-
-const shouldDeferGraphOverlays = () => state.pointer.down || performance.now() - state.lastWheelAt < 150
-
-const updateGraphOverlays = () => {
-  if (state.overlayScheduled) {
-    return
-  }
-  state.overlayScheduled = true
-  requestAnimationFrame(() => {
-    state.overlayScheduled = false
-    if (shouldDeferGraphOverlays()) {
-      elements.labels?.classList.add('is-stale')
-      if (!state.overlayIdleTimer) {
-        state.overlayIdleTimer = setTimeout(() => {
-          state.overlayIdleTimer = null
-          updateGraphOverlays()
-        }, 170)
-      }
-      return
-    }
-    elements.labels?.classList.remove('is-stale')
-    drawLabels()
-    if (state.miniMapDirty) {
-      drawMiniMap()
-      state.miniMapDirty = false
-    }
-  })
-}
-
-const 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 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 listFacts = (facts) => facts
-  .map((fact) => '<li><strong>' + escapeHtml(fact.label) + ':</strong> <small>' + escapeHtml(fact.value) + '</small></li>')
-  .join('')
-
-const listContextLinks = (links) => {
-  if (!Array.isArray(links) || links.length === 0) {
-    return '<li><small>No context links found.</small></li>'
-  }
-  return links
-    .map((link) => '<li><span>' + escapeHtml(link.title) + '</span><small>' + escapeHtml(link.priority || 'normal') + '</small></li>')
-    .join('')
-}
-
-const nodeContextLinks = (node, outgoing) => {
-  const titles = Array.isArray(node?.contextLinks) ? node.contextLinks : []
-  const outgoingByTitle = new Map(normalizeList(outgoing).map((link) => [String(link.title || '').toLowerCase(), link]))
-
-  return titles
-    .map((title) => {
-      const match = outgoingByTitle.get(String(title).toLowerCase())
-      return {
-        title,
-        priority: match?.priority || 'normal'
-      }
-    })
-    .filter((link) => typeof link.title === 'string' && link.title.trim().length > 0)
-}
-
-const 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] })
-      }
-    }
-  }
-
-  return { outgoing, incoming }
-}
-
-const openContentDialog = () => {
-  elements.contentDialog.hidden = false
-}
-
-const closeContentDialog = () => {
-  elements.contentDialog.hidden = true
-}
-
-const selectedNode = () => {
-  if (!state.selectedNodeId) {
-    return null
-  }
-
-  const packed = nodeByIdFromChunk().get(state.selectedNodeId)
-  if (!packed) {
-    return null
-  }
-
-  return {
-    id: packed[0],
-    title: packed[1],
-    path: packed[4] || ''
-  }
-}
-
-const copySelectedWikiLink = async () => {
-  const node = selectedNode()
-  if (!node) {
-    elements.contentActionStatus.textContent = 'Select a note first.'
-    return
-  }
-
-  const value = '[[' + node.title + ']]'
-  try {
-    await navigator.clipboard.writeText(value)
-    elements.contentActionStatus.textContent = 'Copied ' + value
-  } catch {
-    elements.contentActionStatus.textContent = value
-  }
-}
-
-const loadSelectedLinkSuggestions = async () => {
-  const content = elements.contentBody.textContent || ''
-  if (!content.trim()) {
-    elements.contentActionStatus.textContent = 'Selected note has no content.'
-    return
-  }
-
-  elements.contentActionStatus.textContent = 'Loading suggestions...'
-  const response = await fetch('/api/suggest-links?limit=5&content=' + encodeURIComponent(content.slice(0, 2000)) + scopeQuery('&'))
-  if (!response.ok) {
-    throw new Error('Failed to load link suggestions')
-  }
-  const payload = await response.json()
-  const suggestions = Array.isArray(payload.suggestions) ? payload.suggestions : []
-  elements.contentLinkSuggestions.innerHTML = suggestions.length > 0
-    ? suggestions.map((item) => '<li><button type="button" data-title="' + escapeHtml(item.title) + '">[[' + escapeHtml(item.title) + ']]</button></li>').join('')
-    : '<li>No strong suggestions</li>'
-  elements.contentActionStatus.textContent = suggestions.length > 0 ? 'Suggested Context Links' : 'No strong suggestions found.'
-}
-
-const loadNodeDetails = async (nodeId) => {
-  if (!nodeId) {
-    return
-  }
-
-  const response = await fetch('/api/graph-node?id=' + encodeURIComponent(nodeId) + scopeQuery('&'))
-  if (!response.ok) {
-    throw new Error('Failed to load graph node details')
-  }
-
-  const payload = await response.json()
-  if (!payload || typeof payload !== 'object' || !payload.node) {
-    throw new Error('Invalid graph node payload')
-  }
-
-  const node = payload.node
-  state.selectedNodeId = node.id
-  setFocusedNodeIds(linkedNodeIds(node.id))
-
-  if (state.renderWorker && state.workerReady) {
-    state.renderWorker.postMessage({ type: 'select', id: node.id })
-  }
-
-  elements.contentTitle.textContent = node.title || 'Untitled'
-  elements.contentPath.textContent = node.path || ''
-
-  const tags = Array.isArray(node.tags) ? node.tags : []
-  elements.contentTags.innerHTML = tags.length > 0
-    ? tags.map((tag) => '<span>' + escapeHtml(tag) + '</span>').join('')
-    : '<span>No tags</span>'
-
-  const related = linkedNodes(node)
-  const contextLinks = nodeContextLinks(node, related.outgoing)
-  const facts = buildFacts(node, related.outgoing.length, related.incoming.length)
-  elements.contentFacts.innerHTML = listFacts(facts)
-  elements.contentContextLinks.innerHTML = listContextLinks(contextLinks)
-  elements.contentOutgoing.innerHTML = list(related.outgoing)
-  elements.contentIncoming.innerHTML = list(related.incoming)
-  elements.contentBody.textContent = typeof node.content === 'string' ? node.content : ''
-  elements.contentActionStatus.textContent = ''
-  elements.contentLinkSuggestions.innerHTML = ''
-
-  openContentDialog()
-}
-
-const fitFromChunk = () => {
-  const nodes = normalizeList(state.chunk.nodes)
-  if (nodes.length === 0) {
-    return
-  }
-
-  let minX = Infinity
-  let minY = Infinity
-  let maxX = -Infinity
-  let maxY = -Infinity
-
-  for (let index = 0; index < 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
-  }
-
-  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 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)
-  }
-  if (state.contextId) {
-    params.set('context', state.contextId)
-  }
-
-  const requestKey = graphStreamRequestKey({ x, y, w, h })
-  if (!fit && state.lastChunkRequestKey === requestKey && state.chunk.nodes.length > 0) {
-    return
-  }
-
-  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
-  }
-
-  state.graphSignature = typeof chunk.signature === 'string' ? chunk.signature : ''
-  state.lastChunkRequestKey = requestKey
-  ensureNodePositionsLoaded()
-  await syncNodePositionsFromServer()
-  state.graphMode = typeof chunk.mode === 'string' ? chunk.mode : 'near'
-  const chunkNodes = applyManualNodePositions(chunk.nodes)
-  state.chunk = {
-    nodes: chunkNodes,
-    edges: normalizeList(chunk.edges)
-  }
-  state.miniMapDirty = true
-  state.spatialIndex.key = ''
-  const renderChunk = { ...chunk, nodes: chunkNodes }
-  state.totals = {
-    nodes: Number.isFinite(chunk?.totals?.nodes) ? Number(chunk.totals.nodes) : state.chunk.nodes.length,
-    edges: Number.isFinite(chunk?.totals?.edges) ? Number(chunk.totals.edges) : state.chunk.edges.length
-  }
-
-  updateTotals()
-
-  if (fit) {
-    fitFromChunk()
-  }
-
-  if (state.renderWorker && state.workerReady) {
-    state.renderWorker.postMessage({ type: 'chunk', chunk: renderChunk })
-    state.renderWorker.postMessage({ type: 'select', id: state.selectedNodeId })
-    state.renderWorker.postMessage({ type: 'highlight', ids: Array.from(state.searchResultIds) })
-  }
-
-  updateGraphOverlays()
-  drawFallback()
-}
-
-const scheduleChunkFetch = ({ fit } = { fit: false }) => {
-  if (state.fetchTimer) {
-    clearTimeout(state.fetchTimer)
-  }
-
-  const now = performance.now()
-  const recentlyWheeling = now - state.lastWheelAt < 320
-  const heavyScene = state.lastVisibleNodes > 1200 || state.lastVisibleEdges > 3500
-  const delay = fit ? 0 : (state.pointer.down ? 320 : (recentlyWheeling ? (heavyScene ? 420 : 300) : (heavyScene ? 120 : 72)))
-  state.fetchTimer = setTimeout(() => {
-    state.fetchTimer = null
-    fetchChunk({ fit }).catch((error) => {
-      if (error && error.name === 'AbortError') {
-        return
-      }
-      console.error(error)
-    })
-  }, delay)
-}
-
-const setViewportFromCanvas = () => {
-  const rect = canvas.getBoundingClientRect()
-  state.viewport.width = Math.max(320, rect.width)
-  state.viewport.height = Math.max(320, rect.height)
-  state.viewport.ratio = window.devicePixelRatio || 1
-  state.miniMapDirty = true
-  updateWorkerSize()
-  drawFallback()
-}
-
-const pickFallbackNode = (screenX, screenY) => {
-  const nodes = spatialCandidates(screenX, screenY)
-  if (nodes.length === 0) {
-    return null
-  }
-
-  let bestNode = null
-  let bestDistance = Infinity
-  for (let index = 0; index < nodes.length; index += 1) {
-    const node = nodes[index]
-    const id = typeof node[0] === 'string' ? node[0] : ''
-    if (!id) continue
-    const x = Number(node[2])
-    const y = Number(node[3])
-    const weight = Number(node[7])
-    if (!Number.isFinite(x) || !Number.isFinite(y)) continue
-    const point = worldToScreen(x, y)
-    const radius = Math.max(3.2, Math.min(16.5, 5 + (Number.isFinite(weight) ? weight : 0) * 0.65))
-    const distance = Math.hypot(screenX - point.x, screenY - point.y)
-    if (distance <= radius && distance < bestDistance) {
-      bestDistance = distance
-      bestNode = node
-    }
-  }
-
-  return bestNode
-}
-
-const pickFallbackNodeId = (screenX, screenY) => {
-  const node = pickFallbackNode(screenX, screenY)
-  return typeof node?.[0] === 'string' ? node[0] : ''
-}
-
-const handlePickedNode = (node) => {
-  const nodeId = typeof node?.id === 'string' ? node.id : typeof node?.[0] === 'string' ? node[0] : ''
-  if (!nodeId) {
-    return
-  }
-
-  const kind = typeof node?.kind === 'string' ? node.kind : nodeKind(node)
-  if (kind === 'cluster') {
-    const currentScale = state.camera.scale
-    const targetScale = currentScale < 0.22 ? 0.28 : Math.min(1.1, currentScale * 1.6)
-    focusNodeInViewport(nodeId, targetScale)
-    return
-  }
-
-  loadNodeDetails(nodeId).catch((error) => console.error(error))
-}
-
-const pickAt = (screenX, screenY) => {
-  if (state.rendererMode === 'fallback') {
-    const node = pickFallbackNode(screenX, screenY)
-    if (node) {
-      handlePickedNode(node)
-    }
-    return
-  }
-
-  if (!state.renderWorker || !state.workerReady) {
-    return
-  }
-
-  const requestId = Math.random().toString(36).slice(2)
-  state.renderWorker.postMessage({
-    type: 'pick',
-    requestId,
-    x: screenX,
-    y: screenY
-  })
-}
-
-const zoomAtPoint = (screenX, screenY, factor) => {
-  const clamped = Math.max(0.92, Math.min(1.09, factor))
-  const before = screenToWorld(screenX, screenY)
-  state.camera.scale = clampScale(state.camera.scale * clamped)
-  state.camera.x = screenX - before.x * state.camera.scale
-  state.camera.y = screenY - before.y * state.camera.scale
-  updateWorkerCamera()
-  scheduleChunkFetch()
-}
-
-const resolvePointer = (event) => {
-  const rect = canvas.getBoundingClientRect()
-  return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top
-  }
-}
-
-const setupInput = () => {
-  const dragActivationDistance = 6
-  const resetPointerState = (pointerId = null) => {
-    state.pointer.down = false
-    state.pointer.dragging = false
-    state.pointer.dragNodeId = ''
-    canvas.classList.remove('is-node-dragging')
-    if (pointerId !== null) {
-      try {
-        if (canvas.hasPointerCapture(pointerId)) {
-          canvas.releasePointerCapture(pointerId)
-        }
-      } catch {}
-    }
-  }
-
-  canvas.addEventListener('wheel', (event) => {
-    event.preventDefault()
-    state.lastWheelAt = performance.now()
-    const pointer = resolvePointer(event)
-    const exponent = Math.max(-0.05, Math.min(0.05, -event.deltaY * 0.001))
-    zoomAtPoint(pointer.x, pointer.y, Math.exp(exponent))
-  }, { passive: false })
-
-  canvas.addEventListener('pointerdown', (event) => {
-    event.preventDefault()
-    const pointer = resolvePointer(event)
-    const candidateNode = pickFallbackNode(pointer.x, pointer.y)
-    const candidateNodeId = isRealGraphNode(candidateNode) && typeof candidateNode?.[0] === 'string' ? candidateNode[0] : ''
-    const candidateX = Number(candidateNode?.[2])
-    const candidateY = Number(candidateNode?.[3])
-    const world = screenToWorld(pointer.x, pointer.y)
-    state.pointer.down = true
-    state.pointer.moved = false
-    state.pointer.dragging = false
-    state.pointer.dragNodeId = candidateNodeId
-    state.pointer.x = pointer.x
-    state.pointer.y = pointer.y
-    state.pointer.startX = pointer.x
-    state.pointer.startY = pointer.y
-    state.pointer.startWorldX = world.x
-    state.pointer.startWorldY = world.y
-    state.pointer.nodeStartX = candidateNodeId && Number.isFinite(candidateX) ? candidateX : 0
-    state.pointer.nodeStartY = candidateNodeId && Number.isFinite(candidateY) ? candidateY : 0
-    state.pointer.worldAnchorX = world.x
-    state.pointer.worldAnchorY = world.y
-    try {
-      canvas.setPointerCapture(event.pointerId)
-    } catch {}
-  })
-
-  canvas.addEventListener('pointermove', (event) => {
-    if (state.pointer.down) {
-      event.preventDefault()
-    }
-    const pointer = resolvePointer(event)
-
-    if (state.pointer.down) {
-      const dx = pointer.x - state.pointer.x
-      const dy = pointer.y - state.pointer.y
-      const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
-      if (distanceFromStart >= dragActivationDistance) {
-        state.pointer.moved = true
-        state.pointer.dragging = true
-        canvas.classList.toggle('is-node-dragging', Boolean(state.pointer.dragNodeId))
-      }
-      if (!state.pointer.dragging) {
-        state.pointer.x = pointer.x
-        state.pointer.y = pointer.y
-        return
-      }
-      if (state.pointer.dragNodeId) {
-        const world = screenToWorld(pointer.x, pointer.y)
-        const x = state.pointer.nodeStartX + world.x - state.pointer.startWorldX
-        const y = state.pointer.nodeStartY + world.y - state.pointer.startWorldY
-        state.nodePositions.set(state.pointer.dragNodeId, { x, y })
-        updateNodePositionInChunk(state.pointer.dragNodeId, x, y)
-        state.pointer.x = pointer.x
-        state.pointer.y = pointer.y
-        drawFallback()
-        return
-      }
-      state.camera.x += dx
-      state.camera.y += dy
-      state.pointer.x = pointer.x
-      state.pointer.y = pointer.y
-      updateWorkerCamera()
-      drawFallback()
-      return
-    }
-
-    const hovered = pickFallbackNode(pointer.x, pointer.y)
-    const hoveredId = isRealGraphNode(hovered) && typeof hovered?.[0] === 'string' ? hovered[0] : ''
-    if (state.hoveredNodeId !== hoveredId) {
-      state.hoveredNodeId = hoveredId
-      canvas.classList.toggle('is-node-hover', Boolean(hoveredId))
-      updateGraphOverlays()
-    }
-    if (hoveredId) {
-      showTooltip(hovered, pointer)
-    } else {
-      hideTooltip()
-    }
-  })
-
-  canvas.addEventListener('pointerup', (event) => {
-    const pointer = resolvePointer(event)
-    const distanceFromStart = Math.hypot(pointer.x - state.pointer.startX, pointer.y - state.pointer.startY)
-    const shouldPick = !state.pointer.dragging && distanceFromStart < dragActivationDistance
-    const shouldRefreshAfterDrag = state.pointer.dragging
-    const shouldPersistNodePosition = state.pointer.dragging && Boolean(state.pointer.dragNodeId)
-    resetPointerState(event.pointerId)
-
-    if (shouldPick) {
-      pickAt(pointer.x, pointer.y)
-      return
-    }
-    if (shouldPersistNodePosition) {
-      writeStoredNodePositions()
-      persistNodePositionsToServer()
-      return
-    }
-    if (shouldRefreshAfterDrag) {
-      scheduleChunkFetch()
-    }
-  })
-
-  canvas.addEventListener('pointerleave', () => {
-    state.hoveredNodeId = ''
-    canvas.classList.remove('is-node-hover')
-    hideTooltip()
-    updateGraphOverlays()
-  })
-
-  canvas.addEventListener('pointercancel', (event) => {
-    resetPointerState(event.pointerId)
-    hideTooltip()
-    updateGraphOverlays()
-  })
-
-  canvas.addEventListener('lostpointercapture', () => {
-    resetPointerState()
-  })
-
-  elements.miniMap.addEventListener('click', (event) => {
-    if (!state.miniMapView) {
-      return
-    }
-    const rect = elements.miniMap.getBoundingClientRect()
-    const x = event.clientX - rect.left
-    const y = event.clientY - rect.top
-    const worldX = state.miniMapView.minX + (x - state.miniMapView.offsetX) / state.miniMapView.scale
-    const worldY = state.miniMapView.minY + (y - state.miniMapView.offsetY) / state.miniMapView.scale
-    state.camera.x = state.viewport.width / 2 - worldX * state.camera.scale
-    state.camera.y = state.viewport.height / 2 - worldY * state.camera.scale
-    updateWorkerCamera()
-    scheduleChunkFetch()
-  })
-
-  canvas.addEventListener('dblclick', (event) => {
-    const pointer = resolvePointer(event)
-    zoomAtPoint(pointer.x, pointer.y, 1.065)
-  })
-
-  window.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && !elements.uploadDialog.hidden) {
-      closeUploadDialog()
-      return
-    }
-    if (event.key === 'Escape' && !elements.contentDialog.hidden) {
-      closeContentDialog()
-      return
-    }
-    if (event.key === '+') {
-      zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
-      return
-    }
-    if (event.key === '-') {
-      zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
-      return
-    }
-    if (event.key === '0') {
-      scheduleChunkFetch({ fit: true })
-    }
-  })
-}
-
-const openUploadDialog = () => {
-  elements.uploadDialog.hidden = false
-  elements.uploadStatus.textContent = ''
-  elements.uploadTitleInput.value = ''
-  elements.uploadFile.value = ''
-  elements.uploadAllowSensitive.checked = false
-  window.setTimeout(() => elements.uploadFile.focus(), 0)
-}
-
-const closeUploadDialog = () => {
-  elements.uploadDialog.hidden = true
-}
-
-const setUploadBusy = (busy) => {
-  elements.uploadSubmit.disabled = busy
-  elements.uploadFile.disabled = busy
-  elements.uploadTitleInput.disabled = busy
-  elements.uploadAllowSensitive.disabled = busy
-}
-
-const uploadImportUrl = () => {
-  const params = new URLSearchParams()
-  if (state.agentId) {
-    params.set('agent', state.agentId)
-  }
-  const query = params.toString()
-
-  return '/api/import-file' + (query ? '?' + query : '')
-}
-
-const submitUpload = async (event) => {
-  event.preventDefault()
-  const file = elements.uploadFile.files?.[0]
-  if (!file) {
-    elements.uploadStatus.textContent = 'Choose a file to import.'
-    return
-  }
-
-  const form = new FormData()
-  form.append('file', file)
-  const title = elements.uploadTitleInput.value.trim()
-  if (title) {
-    form.append('title', title)
-  }
-  if (elements.uploadAllowSensitive.checked) {
-    form.append('allowSensitive', 'true')
-  }
-
-  setUploadBusy(true)
-  elements.uploadStatus.textContent = 'Importing...'
-
-  try {
-    const response = await fetch(uploadImportUrl(), {
-      method: 'POST',
-      body: form
-    })
-    const payload = await response.json().catch(() => ({}))
-    if (!response.ok) {
-      throw new Error(payload?.error || 'Import failed')
-    }
-
-    elements.uploadStatus.textContent = 'Imported "' + String(payload?.title || file.name) + '".'
-    await loadAgents()
-    await loadContexts()
-    scheduleChunkFetch({ fit: true })
-    window.setTimeout(closeUploadDialog, 700)
-  } catch (error) {
-    elements.uploadStatus.textContent = error instanceof Error ? error.message : String(error)
-  } finally {
-    setUploadBusy(false)
-  }
-}
-
-const setupUploadDialog = () => {
-  elements.uploadOpen.addEventListener('click', openUploadDialog)
-  elements.uploadClose.addEventListener('click', closeUploadDialog)
-  elements.uploadForm.addEventListener('submit', (event) => {
-    submitUpload(event).catch((error) => {
-      elements.uploadStatus.textContent = error instanceof Error ? error.message : String(error)
-      setUploadBusy(false)
-    })
-  })
-  elements.uploadDialog.addEventListener('click', (event) => {
-    if (event.target === elements.uploadDialog) {
-      closeUploadDialog()
-    }
-  })
-}
-
-const setupControls = () => {
-  elements.zoomIn.addEventListener('click', () => {
-    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
-  })
-
-  elements.zoomOut.addEventListener('click', () => {
-    zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 0.944)
-  })
-
-  elements.fit.addEventListener('click', () => {
-    fitFromChunk()
-    scheduleChunkFetch()
-  })
-
-  elements.releaseNode.addEventListener('click', () => {
-    releaseSelectedNodePosition()
-  })
-
-  elements.reset.addEventListener('click', () => {
-    clearStoredNodePositions()
-    clearNodePositionsOnServer()
-    state.camera = { x: 0, y: 0, scale: 0.22 }
-    updateWorkerCamera()
-    scheduleChunkFetch({ fit: true })
-  })
-
-  elements.contentClose.addEventListener('click', () => {
-    closeContentDialog()
-  })
-
-  elements.copyWikiLink.addEventListener('click', () => {
-    copySelectedWikiLink().catch((error) => {
-      elements.contentActionStatus.textContent = error instanceof Error ? error.message : String(error)
-    })
-  })
-
-  elements.suggestNodeLinks.addEventListener('click', () => {
-    loadSelectedLinkSuggestions().catch((error) => {
-      elements.contentActionStatus.textContent = error instanceof Error ? error.message : String(error)
-    })
-  })
-
-  elements.contentLinkSuggestions.addEventListener('click', (event) => {
-    const button = event.target.closest('button[data-title]')
-    if (!button) {
-      return
-    }
-    const value = '[[' + button.dataset.title + ']]'
-    navigator.clipboard.writeText(value).then(() => {
-      elements.contentActionStatus.textContent = 'Copied ' + value
-    }).catch(() => {
-      elements.contentActionStatus.textContent = value
-    })
-  })
-
-  elements.contentDialog.addEventListener('click', (event) => {
-    if (event.target === elements.contentDialog) {
-      closeContentDialog()
-    }
-  })
-
-  elements.search.addEventListener('input', () => {
-    if (state.searchTimer) {
-      clearTimeout(state.searchTimer)
-    }
-    state.searchTimer = setTimeout(() => {
-      state.searchTimer = null
-      runGraphSearch().catch((error) => console.error(error))
-    }, 160)
-  })
-}
-
-const runGraphSearch = async () => {
-  const token = ++state.searchToken
-  const query = (elements.search.value || '').trim()
-  if (!query) {
-    state.searchResultIds = new Set()
-    setFocusedNodeIds(new Set())
-    if (state.renderWorker && state.workerReady) {
-      state.renderWorker.postMessage({ type: 'highlight', ids: [] })
-    }
-    return
-  }
-
-  const response = await fetch('/api/graph-filter?q=' + encodeURIComponent(query) + '&limit=1800' + scopeQuery('&'))
-  if (!response.ok) {
-    throw new Error('Failed to search graph')
-  }
-  const payload = await response.json()
-  if (token !== state.searchToken) {
-    return
-  }
-
-  const ids = Array.isArray(payload?.nodeIds) ? payload.nodeIds.filter((id) => typeof id === 'string' && id.length > 0) : []
-  state.searchResultIds = new Set(ids)
-  setFocusedNodeIds(state.searchResultIds)
-  if (state.renderWorker && state.workerReady) {
-    state.renderWorker.postMessage({ type: 'highlight', ids })
-  }
-  if (ids.length > 0 && state.graphMode === 'far') {
-    state.camera.scale = Math.max(state.camera.scale, 0.82)
-    updateWorkerCamera()
-    scheduleChunkFetch()
-  }
-}
-
-const loadAgents = async () => {
-  const response = await fetch('/api/agents')
-  if (!response.ok) {
-    throw new Error('Failed to load agents')
-  }
-
-  const payload = await response.json()
-  const agents = Array.isArray(payload?.agents) ? payload.agents : []
-
-  elements.agent.innerHTML = agents
-    .map((agent) => {
-      const id = String(agent?.id || '')
-      const count = Number.isFinite(agent?.documentCount) ? agent.documentCount : 0
-      const label = id === 'shared' ? 'shared' : id
-      return '<option value="' + escapeHtml(id) + '">' + escapeHtml(label) + ' (' + count + ')</option>'
-    })
-    .join('')
-
-  const preferredAgent = initialAgentFromUrl || readStoredAgent()
-  const hasPreferred = preferredAgent && agents.some((agent) => agent?.id === preferredAgent)
-  state.agentId = hasPreferred ? preferredAgent : String(agents[0]?.id || '')
-  elements.agent.value = state.agentId
-
-  elements.agent.addEventListener('change', () => {
-    state.agentId = elements.agent.value || ''
-    writeStoredAgent(state.agentId)
-    syncAgentInUrl(state.agentId)
-    loadContexts().then(() => scheduleChunkFetch({ fit: true })).catch((error) => console.error(error))
-  })
-
-  syncAgentInUrl(state.agentId)
-}
-
-const loadContexts = async () => {
-  const response = await fetch('/api/graph-contexts' + (state.agentId ? '?agent=' + encodeURIComponent(state.agentId) : ''))
-  if (!response.ok) {
-    throw new Error('Failed to load graph contexts')
-  }
-
-  const payload = await response.json()
-  const contexts = Array.isArray(payload?.contexts) ? payload.contexts : []
-  const options = [
-    '<option value="">All contexts</option>',
-    ...contexts.map((context) => {
-      const id = String(context?.id || '')
-      const title = String(context?.title || id || 'Untitled')
-      const count = Number.isFinite(context?.nodeCount) ? context.nodeCount : 0
-      return '<option value="' + escapeHtml(id) + '">' + escapeHtml(title) + ' (' + count + ')</option>'
-    })
-  ]
-
-  elements.context.innerHTML = options.join('')
-
-  const preferredContext = initialContextFromUrl || readStoredContext()
-  const hasPreferred = preferredContext && contexts.some((context) => context?.id === preferredContext)
-  state.contextId = hasPreferred ? preferredContext : ''
-  elements.context.value = state.contextId
-  writeStoredContext(state.contextId)
-  syncContextInUrl(state.contextId)
-}
-
-const setupContextControl = () => {
-  elements.context.addEventListener('change', () => {
-    state.contextId = elements.context.value || ''
-    state.selectedNodeId = null
-    writeStoredContext(state.contextId)
-    syncContextInUrl(state.contextId)
-    scheduleChunkFetch({ fit: true })
-  })
-}
-
-const setupRenderWorker = () => {
-  const hasWorker = typeof Worker !== 'undefined'
-  const canTransfer = typeof canvas.transferControlToOffscreen === 'function'
-
-  if (!hasWorker || !canTransfer) {
-    state.rendererMode = 'fallback'
-    drawFallback()
-    return
-  }
-
-  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) {
-          handlePickedNode(payload.node)
-        }
-        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()
-      }
-    }
-
-    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()
-  }
-}
-
-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))
-    }
-  })
-}
-
-const bootstrap = async () => {
-  setViewportFromCanvas()
-  setupRenderWorker()
-  setupInput()
-  setupControls()
-  setupUploadDialog()
-  setupContextControl()
-  wireNodeLinkClicks()
-
-  window.addEventListener('resize', () => {
-    setViewportFromCanvas()
-    scheduleChunkFetch()
-  })
-
-  await loadAgents()
-  await loadContexts()
-  updateTotals()
-
-  scheduleChunkFetch({ fit: true })
-}
-
-bootstrap().catch((error) => {
-  console.error(error)
-})
-`;
+import { createElementsJs } from './client/elements.js';
+import { createStorageJs } from './client/storage.js';
+import { createScopeThemeJs } from './client/scope-theme.js';
+import { createSpatialJs } from './client/spatial.js';
+import { createRenderingJs } from './client/rendering.js';
+import { createNodeDetailsJs } from './client/node-details.js';
+import { createChunkFetchJs } from './client/chunk-fetch.js';
+import { createInputJs } from './client/input.js';
+import { createUploadJs } from './client/upload.js';
+import { createControlsJs } from './client/controls.js';
+import { createWorkerBootstrapJs } from './client/worker-bootstrap.js';
+export const createClientJs = () => [
+    createElementsJs(),
+    createStorageJs(),
+    createScopeThemeJs(),
+    createSpatialJs(),
+    createRenderingJs(),
+    createNodeDetailsJs(),
+    createChunkFetchJs(),
+    createInputJs(),
+    createUploadJs(),
+    createControlsJs(),
+    createWorkerBootstrapJs()
+].join('');