@andespindola/brainlink 1.0.4 → 1.0.6

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