@andespindola/brainlink 1.0.5 → 1.0.7

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()
+}
+`;

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

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

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

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

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

@@ -0,0 +1,147 @@
+export const createWorkerBootstrapJs = () => `
+const mainThreadWebGlAvailable = () => {
+  try {
+    const probe = document.createElement('canvas')
+    const gl = probe.getContext('webgl2') || probe.getContext('webgl') || probe.getContext('experimental-webgl')
+    return Boolean(gl)
+  } catch (error) {
+    return false
+  }
+}
+
+// Uma vez que o controle do canvas é transferido para o worker (OffscreenCanvas),
+// o elemento original não fornece mais nenhum contexto (2D ou WebGL). Quando o
+// worker falha ao iniciar o WebGL, trocamos por um canvas novo para que o
+// fallback 2D consiga desenhar o grafo.
+const replaceGraphCanvas = () => {
+  const replacement = canvas.cloneNode(false)
+  if (canvas.parentNode) {
+    canvas.parentNode.replaceChild(replacement, canvas)
+  }
+  canvas = replacement
+  ctx2dFallback = null
+}
+
+const enterFallbackMode = (rebindInput) => {
+  state.rendererMode = 'fallback'
+  if (rebindInput) {
+    setupInput()
+  }
+  setViewportFromCanvas()
+  drawFallback()
+}
+
+const setupRenderWorker = () => {
+  const hasWorker = typeof Worker !== 'undefined'
+  const canTransfer = typeof canvas.transferControlToOffscreen === 'function'
+
+  if (!hasWorker || !canTransfer || !mainThreadWebGlAvailable()) {
+    enterFallbackMode(false)
+    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.workerReady = false
+        if (state.renderWorker) {
+          state.renderWorker.terminate()
+        }
+        state.renderWorker = null
+        // O canvas já foi transferido para o worker: troca por um novo e
+        // religa os eventos de interação antes de cair no fallback 2D.
+        replaceGraphCanvas()
+        enterFallbackMode(true)
+      }
+    }
+
+    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)
+    replaceGraphCanvas()
+    enterFallbackMode(false)
+  }
+}
+
+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)
+})
+`;