@andespindola/brainlink 1.0.4 → 1.0.6

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

@@ -0,0 +1,296 @@
+export const createRenderingJs = () => `
+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
+    }
+  })
+}
+`;

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

@@ -0,0 +1,114 @@
+export const createScopeThemeJs = () => `
+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'
+}
+`;

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

@@ -0,0 +1,98 @@
+export const createSpatialJs = () => `
+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()
+}
+`;