@andespindola/brainlink 0.1.0-beta.98 → 1.0.0

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

@@ -0,0 +1,676 @@
+export const createClientRenderWorkerJs = () => `let canvas = null
+let gl = null
+let viewportWidth = 320
+let viewportHeight = 320
+let devicePixelRatio = 1
+const camera = { x: 0, y: 0, scale: 1 }
+const state = {
+  nodeCount: 0,
+  edgeCount: 0,
+  ids: [],
+  titles: [],
+  kinds: [],
+  x: new Float32Array(0),
+  y: new Float32Array(0),
+  relevance: new Float32Array(0),
+  radius: new Float32Array(0),
+  colorIndex: new Uint8Array(0),
+  visible: new Uint8Array(0),
+  highlighted: new Uint8Array(0),
+  focused: new Uint8Array(0),
+  selected: new Uint8Array(0),
+  edgeSource: new Uint32Array(0),
+  edgeTarget: new Uint32Array(0),
+  edgeWeight: new Float32Array(0)
+}
+const nodeIndexById = new Map()
+const highlightedIds = new Set()
+const focusedIds = new Set()
+let selectedNodeId = null
+let dirty = true
+let renderScheduled = false
+let hoverX = null
+let hoverY = null
+let lastFrameAt = 0
+let lastVisibleEdges = 0
+let interactionUntil = 0
+let settledRenderTimer = null
+let edgePositionsBuffer = new Float32Array(0)
+let pointPositionsBuffer = new Float32Array(0)
+let pointSizesBuffer = new Float32Array(0)
+
+const defaultTheme = {
+  node: [0.30, 0.56, 0.85, 1],
+  nodeCluster: [0.18, 0.44, 0.71, 1],
+  nodeHighlight: [0.95, 0.70, 0.25, 1],
+  nodeSelected: [0.09, 0.13, 0.20, 1],
+  nodePalette: [
+    [0.30, 0.56, 0.85, 1],
+    [0.40, 0.73, 0.43, 1],
+    [0.94, 0.64, 0.23, 1],
+    [0.85, 0.37, 0.55, 1],
+    [0.55, 0.45, 0.85, 1],
+    [0.33, 0.75, 0.77, 1],
+    [0.93, 0.42, 0.34, 1],
+    [0.60, 0.65, 0.70, 1],
+    [0.72, 0.51, 0.33, 1],
+    [0.44, 0.62, 0.85, 1]
+  ],
+  edge: [0.23, 0.31, 0.42, 0.18],
+  edgeHeavy: [0.23, 0.31, 0.42, 0.34],
+  clear: [0.96, 0.97, 0.98, 1]
+}
+
+const theme = { ...defaultTheme }
+
+const createShader = (type, source) => {
+  const shader = gl.createShader(type)
+  if (!shader) return null
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader)
+    return null
+  }
+  return shader
+}
+
+const createProgram = (vertexSource, fragmentSource) => {
+  const vertexShader = createShader(gl.VERTEX_SHADER, vertexSource)
+  const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentSource)
+  if (!vertexShader || !fragmentShader) return null
+  const program = gl.createProgram()
+  if (!program) return null
+  gl.attachShader(program, vertexShader)
+  gl.attachShader(program, fragmentShader)
+  gl.linkProgram(program)
+  gl.deleteShader(vertexShader)
+  gl.deleteShader(fragmentShader)
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program)
+    return null
+  }
+  return program
+}
+
+let lineProgram = null
+let pointProgram = null
+let lineBuffer = null
+let pointPositionBuffer = null
+let pointSizeBuffer = null
+let linePositionLocation = -1
+let lineResolutionLocation = null
+let lineColorLocation = null
+let pointPositionLocation = -1
+let pointSizeLocation = -1
+let pointResolutionLocation = null
+let pointColorLocation = null
+
+const initWebGl = () => {
+  if (!canvas) {
+    return false
+  }
+
+  gl = canvas.getContext('webgl2', { alpha: false, antialias: true, depth: false, stencil: false }) ||
+    canvas.getContext('webgl', { alpha: false, antialias: true, depth: false, stencil: false })
+
+  if (!gl) {
+    return false
+  }
+
+  lineProgram = createProgram(
+    'attribute vec2 a_position; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); }',
+    'precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; }'
+  )
+
+  pointProgram = createProgram(
+    'attribute vec2 a_position; attribute float a_size; uniform vec2 u_resolution; void main() { vec2 zeroToOne = a_position / u_resolution; vec2 clip = zeroToOne * 2.0 - 1.0; gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0); gl_PointSize = a_size; }',
+    'precision mediump float; uniform vec4 u_color; void main() { vec2 center = gl_PointCoord - vec2(0.5); float distanceFromCenter = length(center); if (distanceFromCenter > 0.5) discard; float alpha = smoothstep(0.5, 0.38, distanceFromCenter); gl_FragColor = vec4(u_color.rgb, u_color.a * alpha); }'
+  )
+
+  if (!lineProgram || !pointProgram) {
+    return false
+  }
+
+  lineBuffer = gl.createBuffer()
+  pointPositionBuffer = gl.createBuffer()
+  pointSizeBuffer = gl.createBuffer()
+  if (!lineBuffer || !pointPositionBuffer || !pointSizeBuffer) {
+    return false
+  }
+
+  linePositionLocation = gl.getAttribLocation(lineProgram, 'a_position')
+  lineResolutionLocation = gl.getUniformLocation(lineProgram, 'u_resolution')
+  lineColorLocation = gl.getUniformLocation(lineProgram, 'u_color')
+  pointPositionLocation = gl.getAttribLocation(pointProgram, 'a_position')
+  pointSizeLocation = gl.getAttribLocation(pointProgram, 'a_size')
+  pointResolutionLocation = gl.getUniformLocation(pointProgram, 'u_resolution')
+  pointColorLocation = gl.getUniformLocation(pointProgram, 'u_color')
+
+  gl.enable(gl.BLEND)
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+  gl.disable(gl.DEPTH_TEST)
+
+  return true
+}
+
+const ensureFloat32Capacity = (buffer, neededLength) => {
+  if (buffer.length >= neededLength) {
+    return buffer
+  }
+  const next = Math.max(neededLength, Math.ceil(buffer.length * 1.6), 1024)
+  return new Float32Array(next)
+}
+
+const resizeCanvas = (width, height, ratio) => {
+  viewportWidth = Math.max(320, Number.isFinite(width) ? width : viewportWidth)
+  viewportHeight = Math.max(320, Number.isFinite(height) ? height : viewportHeight)
+  devicePixelRatio = Math.max(1, Number.isFinite(ratio) ? ratio : devicePixelRatio)
+
+  if (!canvas) return
+
+  canvas.width = Math.floor(viewportWidth * devicePixelRatio)
+  canvas.height = Math.floor(viewportHeight * devicePixelRatio)
+  if (gl) {
+    gl.viewport(0, 0, canvas.width, canvas.height)
+  }
+  dirty = true
+  requestRender()
+}
+
+const toScreenPoint = (x, y) => {
+  const sx = (x * camera.scale + camera.x) * devicePixelRatio
+  const sy = (y * camera.scale + camera.y) * devicePixelRatio
+  return [sx, sy]
+}
+
+const ensureNodeCapacity = (count) => {
+  if (state.x.length >= count) {
+    return
+  }
+
+  const nextCapacity = Math.max(count, Math.ceil(state.x.length * 1.5), 512)
+  state.x = new Float32Array(nextCapacity)
+  state.y = new Float32Array(nextCapacity)
+  state.relevance = new Float32Array(nextCapacity)
+  state.radius = new Float32Array(nextCapacity)
+  state.colorIndex = new Uint8Array(nextCapacity)
+  state.visible = new Uint8Array(nextCapacity)
+  state.highlighted = new Uint8Array(nextCapacity)
+  state.focused = new Uint8Array(nextCapacity)
+  state.selected = new Uint8Array(nextCapacity)
+}
+
+const ensureEdgeCapacity = (count) => {
+  if (state.edgeSource.length >= count) {
+    return
+  }
+
+  const nextCapacity = Math.max(count, Math.ceil(state.edgeSource.length * 1.5), 1024)
+  state.edgeSource = new Uint32Array(nextCapacity)
+  state.edgeTarget = new Uint32Array(nextCapacity)
+  state.edgeWeight = new Float32Array(nextCapacity)
+}
+
+const nodeRadius = (relevance, kind) => {
+  const base = kind === 'cluster' ? 10.2 : 6.4
+  const modifier = Math.min(6.6, Math.max(0, relevance * 0.72))
+  return base + modifier
+}
+
+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
+  }
+  const palette = Array.isArray(theme.nodePalette) && theme.nodePalette.length > 0 ? theme.nodePalette : [theme.node]
+  return Math.abs(hash) % palette.length
+}
+
+const loadChunk = (chunk) => {
+  const nodes = Array.isArray(chunk?.nodes) ? chunk.nodes : []
+  const edges = Array.isArray(chunk?.edges) ? chunk.edges : []
+
+  ensureNodeCapacity(nodes.length)
+  nodeIndexById.clear()
+  state.ids = new Array(nodes.length)
+  state.titles = new Array(nodes.length)
+  state.kinds = new Array(nodes.length)
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const row = nodes[index]
+    const id = typeof row?.[0] === 'string' ? row[0] : ''
+    if (!id) {
+      continue
+    }
+    const title = typeof row?.[1] === 'string' ? row[1] : id
+    const x = Number.isFinite(row?.[2]) ? Number(row[2]) : 0
+    const y = Number.isFinite(row?.[3]) ? Number(row[3]) : 0
+    const segment = typeof row?.[5] === 'string' ? row[5] : ''
+    const kind = row?.[6] === 'cluster' ? 'cluster' : 'node'
+    const relevance = Number.isFinite(row?.[7]) ? Number(row[7]) : 0
+
+    state.ids[index] = id
+    state.titles[index] = title
+    state.kinds[index] = kind
+    state.x[index] = x
+    state.y[index] = y
+    state.relevance[index] = relevance
+    state.radius[index] = nodeRadius(relevance, kind)
+    state.colorIndex[index] = segmentColorIndex(segment || title)
+    state.visible[index] = 0
+    state.highlighted[index] = highlightedIds.has(id) ? 1 : 0
+    state.focused[index] = focusedIds.has(id) ? 1 : 0
+    state.selected[index] = selectedNodeId === id ? 1 : 0
+    nodeIndexById.set(id, index)
+  }
+
+  state.nodeCount = nodes.length
+
+  ensureEdgeCapacity(edges.length)
+  let edgeCount = 0
+  for (let index = 0; index < edges.length; index += 1) {
+    const row = edges[index]
+    const sourceId = typeof row?.[0] === 'string' ? row[0] : ''
+    const targetId = typeof row?.[1] === 'string' ? row[1] : ''
+    const source = nodeIndexById.get(sourceId)
+    const target = nodeIndexById.get(targetId)
+    if (source === undefined || target === undefined || source === target) {
+      continue
+    }
+    state.edgeSource[edgeCount] = source
+    state.edgeTarget[edgeCount] = target
+    state.edgeWeight[edgeCount] = Number.isFinite(row?.[2]) ? Number(row[2]) : 1
+    edgeCount += 1
+  }
+
+  state.edgeCount = edgeCount
+  dirty = true
+}
+
+const cullVisibleNodes = () => {
+  const minX = -280
+  const minY = -280
+  const maxX = viewportWidth + 280
+  const maxY = viewportHeight + 280
+
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    const radius = state.radius[index] * camera.scale
+    const [sx, sy] = toScreenPoint(state.x[index], state.y[index])
+    const screenX = sx / devicePixelRatio
+    const screenY = sy / devicePixelRatio
+    state.visible[index] = screenX + radius >= minX && screenX - radius <= maxX && screenY + radius >= minY && screenY - radius <= maxY ? 1 : 0
+  }
+}
+
+const drawEdges = () => {
+  if (!gl || state.edgeCount === 0) return
+
+  edgePositionsBuffer = ensureFloat32Capacity(edgePositionsBuffer, state.edgeCount * 4)
+  let cursor = 0
+  let visibleEdges = 0
+  for (let index = 0; index < state.edgeCount; index += 1) {
+    const source = state.edgeSource[index]
+    const target = state.edgeTarget[index]
+    if (state.visible[source] === 0 && state.visible[target] === 0) {
+      continue
+    }
+    const [sx, sy] = toScreenPoint(state.x[source], state.y[source])
+    const [tx, ty] = toScreenPoint(state.x[target], state.y[target])
+    edgePositionsBuffer[cursor] = sx
+    edgePositionsBuffer[cursor + 1] = sy
+    edgePositionsBuffer[cursor + 2] = tx
+    edgePositionsBuffer[cursor + 3] = ty
+    cursor += 4
+    visibleEdges += 1
+  }
+
+  lastVisibleEdges = visibleEdges
+  if (cursor === 0) return
+
+  gl.useProgram(lineProgram)
+  gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, edgePositionsBuffer.subarray(0, cursor), gl.STREAM_DRAW)
+  gl.enableVertexAttribArray(linePositionLocation)
+  gl.vertexAttribPointer(linePositionLocation, 2, gl.FLOAT, false, 0, 0)
+  gl.uniform2f(lineResolutionLocation, canvas.width, canvas.height)
+  gl.uniform4fv(lineColorLocation, state.nodeCount > 4000 ? theme.edge : theme.edgeHeavy)
+  gl.lineWidth(1)
+  gl.drawArrays(gl.LINES, 0, cursor / 2)
+}
+
+const drawNodeLayer = (predicate, color, radiusBoost = 1) => {
+  if (!gl || state.nodeCount === 0) return
+
+  pointPositionsBuffer = ensureFloat32Capacity(pointPositionsBuffer, state.nodeCount * 2)
+  pointSizesBuffer = ensureFloat32Capacity(pointSizesBuffer, state.nodeCount)
+  let positionCursor = 0
+  let sizeCursor = 0
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    if (!predicate(index)) continue
+    const [sx, sy] = toScreenPoint(state.x[index], state.y[index])
+    pointPositionsBuffer[positionCursor] = sx
+    pointPositionsBuffer[positionCursor + 1] = sy
+    pointSizesBuffer[sizeCursor] = Math.max(1.2, state.radius[index] * camera.scale * devicePixelRatio * radiusBoost)
+    positionCursor += 2
+    sizeCursor += 1
+  }
+
+  if (positionCursor === 0) return
+
+  gl.useProgram(pointProgram)
+  gl.bindBuffer(gl.ARRAY_BUFFER, pointPositionBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, pointPositionsBuffer.subarray(0, positionCursor), gl.STREAM_DRAW)
+  gl.enableVertexAttribArray(pointPositionLocation)
+  gl.vertexAttribPointer(pointPositionLocation, 2, gl.FLOAT, false, 0, 0)
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, pointSizeBuffer)
+  gl.bufferData(gl.ARRAY_BUFFER, pointSizesBuffer.subarray(0, sizeCursor), gl.STREAM_DRAW)
+  gl.enableVertexAttribArray(pointSizeLocation)
+  gl.vertexAttribPointer(pointSizeLocation, 1, gl.FLOAT, false, 0, 0)
+
+  gl.uniform2f(pointResolutionLocation, canvas.width, canvas.height)
+  gl.uniform4fv(pointColorLocation, color)
+  gl.drawArrays(gl.POINTS, 0, positionCursor / 2)
+}
+
+const drawColoredNodeLayer = (predicate, radiusBoost = 1) => {
+  const palette = Array.isArray(theme.nodePalette) && theme.nodePalette.length > 0 ? theme.nodePalette : [theme.node]
+  for (let colorIndex = 0; colorIndex < palette.length; colorIndex += 1) {
+    drawNodeLayer((index) => predicate(index) && state.colorIndex[index] === colorIndex, palette[colorIndex], radiusBoost)
+  }
+}
+
+const clear = () => {
+  if (!gl || !canvas) return
+  gl.viewport(0, 0, canvas.width, canvas.height)
+  gl.clearColor(theme.clear[0], theme.clear[1], theme.clear[2], theme.clear[3])
+  gl.clear(gl.COLOR_BUFFER_BIT)
+}
+
+const isCameraInteracting = (now) => now < interactionUntil
+
+const scheduleSettledRender = (now) => {
+  if (settledRenderTimer) {
+    return
+  }
+  const delay = Math.max(32, interactionUntil - now + 16)
+  settledRenderTimer = setTimeout(() => {
+    settledRenderTimer = null
+    dirty = true
+    requestRender()
+  }, delay)
+}
+
+const renderFrame = (now) => {
+  renderScheduled = false
+  if (!dirty) {
+    return
+  }
+
+  const delta = now - lastFrameAt
+  const minInterval = state.nodeCount > 20000 ? 22 : 16
+  if (delta < minInterval) {
+    requestRender()
+    return
+  }
+  lastFrameAt = now
+
+  if (!gl) {
+    return
+  }
+
+  cullVisibleNodes()
+  clear()
+  const cameraInteracting = isCameraInteracting(now)
+  if (!cameraInteracting || state.edgeCount < 1200) {
+    drawEdges()
+  } else {
+    lastVisibleEdges = 0
+    scheduleSettledRender(now)
+  }
+
+  drawColoredNodeLayer(
+    (index) => state.visible[index] === 1 && state.kinds[index] !== 'cluster' && state.selected[index] === 0 && state.highlighted[index] === 0 && state.focused[index] === 0,
+    1
+  )
+
+  drawColoredNodeLayer(
+    (index) => state.visible[index] === 1 && state.kinds[index] === 'cluster' && state.selected[index] === 0,
+    1.15
+  )
+
+  drawNodeLayer(
+    (index) => state.visible[index] === 1 && state.highlighted[index] === 1,
+    theme.nodeHighlight,
+    1.22
+  )
+
+  drawNodeLayer(
+    (index) => state.visible[index] === 1 && state.focused[index] === 1,
+    theme.nodeHighlight,
+    1.12
+  )
+
+  drawNodeLayer(
+    (index) => state.visible[index] === 1 && state.selected[index] === 1,
+    theme.nodeSelected,
+    1.32
+  )
+
+  if (dirty) {
+    postMessage({
+      type: 'frame-stats',
+      visibleNodes: (() => {
+        let count = 0
+        for (let index = 0; index < state.nodeCount; index += 1) {
+          if (state.visible[index] === 1) count += 1
+        }
+        return count
+      })(),
+      visibleEdges: lastVisibleEdges
+    })
+    dirty = false
+  }
+}
+
+const requestRender = () => {
+  if (renderScheduled) {
+    return
+  }
+  renderScheduled = true
+  const raf = self.requestAnimationFrame
+  if (typeof raf === 'function') {
+    raf.call(self, renderFrame)
+    return
+  }
+  setTimeout(() => renderFrame(performance.now()), 16)
+}
+
+const setCamera = (nextCamera) => {
+  if (!nextCamera || typeof nextCamera !== 'object') {
+    return
+  }
+  camera.x = Number.isFinite(nextCamera.x) ? Number(nextCamera.x) : camera.x
+  camera.y = Number.isFinite(nextCamera.y) ? Number(nextCamera.y) : camera.y
+  camera.scale = Number.isFinite(nextCamera.scale) ? Math.max(0.0002, Math.min(8, Number(nextCamera.scale))) : camera.scale
+  interactionUntil = performance.now() + 140
+  dirty = true
+  requestRender()
+}
+
+const worldAtScreen = (screenX, screenY) => {
+  const x = (screenX - camera.x) / camera.scale
+  const y = (screenY - camera.y) / camera.scale
+  return [x, y]
+}
+
+const pickNode = (screenX, screenY) => {
+  const [worldX, worldY] = worldAtScreen(screenX, screenY)
+  let bestIndex = -1
+  let bestDistance = Infinity
+
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    if (state.visible[index] === 0) continue
+    const dx = state.x[index] - worldX
+    const dy = state.y[index] - worldY
+    const distance = Math.hypot(dx, dy)
+    const maxDistance = state.radius[index] * 1.2
+    if (distance <= maxDistance && distance < bestDistance) {
+      bestDistance = distance
+      bestIndex = index
+    }
+  }
+
+  if (bestIndex < 0) {
+    return null
+  }
+
+  return {
+    id: state.ids[bestIndex],
+    title: state.titles[bestIndex],
+    kind: state.kinds[bestIndex],
+    x: state.x[bestIndex],
+    y: state.y[bestIndex]
+  }
+}
+
+const setHighlights = (ids) => {
+  highlightedIds.clear()
+  const list = Array.isArray(ids) ? ids : []
+  for (let index = 0; index < list.length; index += 1) {
+    const id = list[index]
+    if (typeof id === 'string' && id.length > 0) {
+      highlightedIds.add(id)
+    }
+  }
+
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    state.highlighted[index] = highlightedIds.has(state.ids[index]) ? 1 : 0
+  }
+  dirty = true
+  requestRender()
+}
+
+const setFocus = (ids) => {
+  focusedIds.clear()
+  const list = Array.isArray(ids) ? ids : []
+  for (let index = 0; index < list.length; index += 1) {
+    const id = list[index]
+    if (typeof id === 'string' && id.length > 0) {
+      focusedIds.add(id)
+    }
+  }
+
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    state.focused[index] = focusedIds.has(state.ids[index]) ? 1 : 0
+  }
+  dirty = true
+  requestRender()
+}
+
+const setSelected = (id) => {
+  selectedNodeId = typeof id === 'string' && id.length > 0 ? id : null
+  for (let index = 0; index < state.nodeCount; index += 1) {
+    state.selected[index] = selectedNodeId === state.ids[index] ? 1 : 0
+  }
+  dirty = true
+  requestRender()
+}
+
+const moveNode = (id, x, y) => {
+  if (typeof id !== 'string' || !Number.isFinite(x) || !Number.isFinite(y)) {
+    return
+  }
+
+  const index = nodeIndexById.get(id)
+  if (index === undefined) {
+    return
+  }
+
+  state.x[index] = x
+  state.y[index] = y
+  dirty = true
+  requestRender()
+}
+
+self.onmessage = (event) => {
+  const payload = event.data
+  if (!payload || typeof payload !== 'object') {
+    return
+  }
+
+  if (payload.type === 'init') {
+    canvas = payload.canvas
+    if (payload.theme && typeof payload.theme === 'object') {
+      Object.assign(theme, payload.theme)
+    }
+    const initialized = initWebGl()
+    if (!initialized) {
+      postMessage({ type: 'fatal', message: 'WebGL is not available in render worker.' })
+      return
+    }
+    resizeCanvas(payload.width, payload.height, payload.devicePixelRatio)
+    setCamera(payload.camera)
+    requestRender()
+    postMessage({ type: 'ready' })
+    return
+  }
+
+  if (payload.type === 'resize') {
+    resizeCanvas(payload.width, payload.height, payload.devicePixelRatio)
+    return
+  }
+
+  if (payload.type === 'camera') {
+    setCamera(payload.camera)
+    return
+  }
+
+  if (payload.type === 'chunk') {
+    loadChunk(payload.chunk)
+    requestRender()
+    return
+  }
+
+  if (payload.type === 'highlight') {
+    setHighlights(payload.ids)
+    return
+  }
+
+  if (payload.type === 'focus') {
+    setFocus(payload.ids)
+    return
+  }
+
+  if (payload.type === 'select') {
+    setSelected(payload.id)
+    return
+  }
+
+  if (payload.type === 'move-node') {
+    moveNode(payload.id, Number(payload.x), Number(payload.y))
+    return
+  }
+
+  if (payload.type === 'pick') {
+    const node = pickNode(
+      Number.isFinite(payload.x) ? Number(payload.x) : 0,
+      Number.isFinite(payload.y) ? Number(payload.y) : 0
+    )
+    postMessage({
+      type: 'pick-result',
+      requestId: payload.requestId,
+      node
+    })
+    return
+  }
+
+  if (payload.type === 'pointer') {
+    hoverX = Number.isFinite(payload.x) ? Number(payload.x) : null
+    hoverY = Number.isFinite(payload.y) ? Number(payload.y) : null
+    return
+  }
+}
+`;

package/dist/application/get-graph-contexts.js

@@ -0,0 +1,33 @@
+import { getGraphLayout } from './get-graph-layout.js';
+export const getGraphContexts = async (vaultPath, agentId) => {
+    const { layout } = await getGraphLayout(vaultPath, { agentId });
+    const nodeIdsByContext = new Map();
+    const contextByNodeId = new Map();
+    layout.nodes.forEach((node) => {
+        const title = node.segment || node.group || 'root';
+        const nodeIds = nodeIdsByContext.get(title) ?? new Set();
+        nodeIds.add(node.id);
+        nodeIdsByContext.set(title, nodeIds);
+        contextByNodeId.set(node.id, title);
+    });
+    const edgeCountByContext = new Map();
+    layout.edges.forEach((edge) => {
+        if (!edge.target) {
+            return;
+        }
+        const sourceContext = contextByNodeId.get(edge.source);
+        const targetContext = contextByNodeId.get(edge.target);
+        if (!sourceContext || sourceContext !== targetContext) {
+            return;
+        }
+        edgeCountByContext.set(sourceContext, (edgeCountByContext.get(sourceContext) ?? 0) + 1);
+    });
+    return Array.from(nodeIdsByContext.entries())
+        .map(([title, nodeIds]) => ({
+        id: title,
+        title,
+        nodeCount: nodeIds.size,
+        edgeCount: edgeCountByContext.get(title) ?? 0
+    }))
+        .sort((left, right) => right.nodeCount - left.nodeCount || left.title.localeCompare(right.title));
+};