npm - @andespindola/brainlink - Versions diffs - 0.1.0-beta.154 → 0.1.0-beta.156 - Mend

@andespindola/brainlink 0.1.0-beta.154 → 0.1.0-beta.156

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/application/frontend/client-css.js +77 -0
package/dist/application/frontend/client-html.js +4 -0
package/dist/application/frontend/client-js.js +496 -18
package/dist/application/frontend/client-render-worker-js.js +53 -0
package/dist/application/get-graph-contexts.js +20 -6
package/dist/application/get-graph-layout.js +1 -1
package/dist/application/graph-view-state.js +66 -0
package/dist/application/server/routes.js +45 -0
package/dist/domain/graph-layout.js +33 -16
package/package.json +1 -1

package/dist/application/frontend/client-css.js CHANGED Viewed

@@ -99,10 +99,87 @@ select {
   cursor: grab;
 }
+#graph.is-node-hover {
+  cursor: pointer;
+}
+#graph.is-node-dragging {
+  cursor: move;
+}
 #graph:active {
   cursor: grabbing;
 }
+.graph-labels {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.graph-label {
+  position: absolute;
+  max-width: 220px;
+  transform: translate(-50%, calc(-100% - 10px));
+  padding: 4px 7px;
+  border: 1px solid rgba(129, 146, 170, 0.28);
+  border-radius: 6px;
+  background: rgba(13, 16, 20, 0.78);
+  color: var(--text);
+  font-size: 11px;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
+}
+.graph-label.is-focused {
+  border-color: rgba(53, 208, 162, 0.72);
+  color: #dffbf3;
+}
+.graph-tooltip {
+  position: absolute;
+  z-index: 4;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: rgba(13, 16, 20, 0.94);
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.35;
+  pointer-events: none;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
+}
+.graph-tooltip strong,
+.graph-tooltip small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.graph-tooltip small {
+  margin-top: 3px;
+  color: var(--muted);
+}
+.mini-map {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  z-index: 3;
+  width: 180px;
+  height: 120px;
+  border: 1px solid rgba(129, 146, 170, 0.28);
+  border-radius: 8px;
+  background: rgba(13, 16, 20, 0.78);
+  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
+}
 .eyebrow {
   color: var(--muted);
   font-size: 12px;

package/dist/application/frontend/client-html.js CHANGED Viewed

@@ -42,12 +42,16 @@ export const createClientHtml = () => `<!doctype html>
               <button id="zoomIn" type="button" title="Zoom in">+</button>
               <button id="zoomOut" type="button" title="Zoom out">-</button>
               <button id="fit" type="button" title="Focus central hub">◎</button>
+              <button id="releaseNode" type="button" title="Release selected node">◇</button>
               <button id="reset" type="button" title="Reset view">⌂</button>
             </div>
           </div>
         </header>
         <div class="graph-stage">
           <canvas id="graph" aria-label="Brainlink knowledge graph"></canvas>
+          <div id="graphLabels" class="graph-labels" aria-hidden="true"></div>
+          <div id="graphTooltip" class="graph-tooltip" role="tooltip" hidden></div>
+          <canvas id="miniMap" class="mini-map" aria-label="Graph overview"></canvas>
         </div>
       </section>
     </main>

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

@@ -1,5 +1,5 @@
 export const createClientJs = () => `const canvas = document.getElementById('graph')
-const ctx2dFallback = canvas.getContext('2d')
+let ctx2dFallback = null
 const byId = (id) => document.getElementById(id)
 const elements = {
   search: byId('search'),
@@ -11,7 +11,11 @@ const elements = {
   zoomIn: byId('zoomIn'),
   zoomOut: byId('zoomOut'),
   fit: byId('fit'),
+  releaseNode: byId('releaseNode'),
   reset: byId('reset'),
+  labels: byId('graphLabels'),
+  tooltip: byId('graphTooltip'),
+  miniMap: byId('miniMap'),
   contentDialog: byId('contentDialog'),
   contentTitle: byId('contentTitle'),
   contentPath: byId('contentPath'),
@@ -34,10 +38,15 @@ const state = {
     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
   },
@@ -53,6 +62,18 @@ const state = {
   contextId: '',
   graphSignature: '',
   graphMode: 'near',
+  nodePositionsSignature: '',
+  nodePositionsScope: '',
+  serverNodePositionsScope: '',
+  nodePositions: new Map(),
+  hoveredNodeId: '',
+  focusedNodeIds: new Set(),
+  spatialIndex: {
+    key: '',
+    cells: new Map()
+  },
+  miniMapView: null,
+  overlayScheduled: false,
   chunk: {
     nodes: [],
     edges: []
@@ -63,7 +84,6 @@ const state = {
   fetchTimer: null,
   fetchAbortController: null,
   cameraSyncScheduled: false,
-  lastDragFetchAt: 0,
   lastWheelAt: 0,
   lastVisibleNodes: 0,
   lastVisibleEdges: 0,
@@ -80,6 +100,7 @@ const zoomRange = {
 const selectedAgentStorageKey = 'brainlink:selected-agent'
 const selectedContextStorageKey = 'brainlink:selected-context'
+const nodePositionsStoragePrefix = 'brainlink:graph-node-positions:'
 const escapeHtml = (value) => String(value)
   .replaceAll('&', '&amp;')
@@ -126,6 +147,151 @@ const writeStoredContext = (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)
@@ -237,8 +403,84 @@ const worldToScreen = (x, y) => ({
   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' || !ctx2dFallback) {
+  if (state.rendererMode !== 'fallback') {
+    return
+  }
+  ctx2dFallback = ctx2dFallback ?? canvas.getContext('2d')
+  if (!ctx2dFallback) {
     return
   }
   const width = state.viewport.width
@@ -301,6 +543,7 @@ const updateTagCount = () => {
 }
 const updateWorkerCamera = () => {
+  updateGraphOverlays()
   if (!state.renderWorker || !state.workerReady) {
     return
   }
@@ -321,6 +564,7 @@ const updateWorkerCamera = () => {
 }
 const updateWorkerSize = () => {
+  updateGraphOverlays()
   if (!state.renderWorker || !state.workerReady) {
     return
   }
@@ -334,6 +578,164 @@ const updateWorkerSize = () => {
 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 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(13, 16, 20, 0.86)'
+  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(174, 184, 197, 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(53, 208, 162, 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 updateGraphOverlays = () => {
+  if (state.overlayScheduled) {
+    return
+  }
+  state.overlayScheduled = true
+  requestAnimationFrame(() => {
+    state.overlayScheduled = false
+    drawLabels()
+    drawMiniMap()
+  })
+}
 const list = (items) => {
   const rows = normalizeList(items)
   if (rows.length === 0) {
@@ -442,6 +844,7 @@ const loadNodeDetails = async (nodeId) => {
   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 })
@@ -552,11 +955,16 @@ const fetchChunk = async ({ fit } = { fit: false }) => {
   }
   state.graphSignature = typeof chunk.signature === 'string' ? chunk.signature : ''
+  ensureNodePositionsLoaded()
+  await syncNodePositionsFromServer()
   state.graphMode = typeof chunk.mode === 'string' ? chunk.mode : 'near'
+  const chunkNodes = applyManualNodePositions(chunk.nodes)
   state.chunk = {
-    nodes: normalizeList(chunk.nodes),
+    nodes: chunkNodes,
     edges: normalizeList(chunk.edges)
   }
+  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
@@ -570,10 +978,11 @@ const fetchChunk = async ({ fit } = { fit: false }) => {
   }
   if (state.renderWorker && state.workerReady) {
-    state.renderWorker.postMessage({ type: 'chunk', chunk })
+    state.renderWorker.postMessage({ type: 'chunk', chunk: renderChunk })
     state.renderWorker.postMessage({ type: 'select', id: state.selectedNodeId })
   }
+  updateGraphOverlays()
   drawFallback()
 }
@@ -584,7 +993,7 @@ const scheduleChunkFetch = ({ fit } = { fit: false }) => {
   const now = performance.now()
   const recentlyWheeling = now - state.lastWheelAt < 180
-  const delay = fit ? 0 : (state.pointer.down ? 120 : (recentlyWheeling ? 140 : 48))
+  const delay = fit ? 0 : (state.pointer.down ? 260 : (recentlyWheeling ? 160 : 48))
   state.fetchTimer = setTimeout(() => {
     state.fetchTimer = null
     fetchChunk({ fit }).catch((error) => {
@@ -605,13 +1014,13 @@ const setViewportFromCanvas = () => {
   drawFallback()
 }
-const pickFallbackNodeId = (screenX, screenY) => {
-  const nodes = normalizeList(state.chunk.nodes)
+const pickFallbackNode = (screenX, screenY) => {
+  const nodes = spatialCandidates(screenX, screenY)
   if (nodes.length === 0) {
-    return ''
+    return null
   }
-  let bestId = ''
+  let bestNode = null
   let bestDistance = Infinity
   for (let index = 0; index < nodes.length; index += 1) {
     const node = nodes[index]
@@ -626,11 +1035,16 @@ const pickFallbackNodeId = (screenX, screenY) => {
     const distance = Math.hypot(screenX - point.x, screenY - point.y)
     if (distance <= radius && distance < bestDistance) {
       bestDistance = distance
-      bestId = id
+      bestNode = node
     }
   }
-  return bestId
+  return bestNode
+}
+const pickFallbackNodeId = (screenX, screenY) => {
+  const node = pickFallbackNode(screenX, screenY)
+  return typeof node?.[0] === 'string' ? node[0] : ''
 }
 const pickAt = (screenX, screenY) => {
@@ -686,14 +1100,23 @@ const setupInput = () => {
   canvas.addEventListener('pointerdown', (event) => {
     const pointer = resolvePointer(event)
+    const candidateNode = pickFallbackNode(pointer.x, pointer.y)
+    const candidateNodeId = candidateNode?.[6] === 'node' && 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
-    const world = screenToWorld(pointer.x, 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
     canvas.setPointerCapture(event.pointerId)
@@ -709,26 +1132,45 @@ const setupInput = () => {
       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()
-      const now = performance.now()
-      if (now - state.lastDragFetchAt > 180) {
-        state.lastDragFetchAt = now
-        scheduleChunkFetch()
-      }
       drawFallback()
       return
     }
+    const hovered = pickFallbackNode(pointer.x, pointer.y)
+    const hoveredId = hovered?.[6] === 'node' && 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) => {
@@ -736,19 +1178,49 @@ const setupInput = () => {
     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)
     state.pointer.down = false
     state.pointer.dragging = false
+    canvas.classList.remove('is-node-dragging')
+    state.pointer.dragNodeId = ''
     canvas.releasePointerCapture(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()
+  })
+  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)
@@ -783,7 +1255,13 @@ const setupControls = () => {
     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 })

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

@@ -16,6 +16,7 @@ const state = {
   radius: new Float32Array(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),
@@ -23,6 +24,7 @@ const state = {
 }
 const nodeIndexById = new Map()
 const highlightedIds = new Set()
+const focusedIds = new Set()
 let selectedNodeId = null
 let dirty = true
 let renderScheduled = false
@@ -179,6 +181,7 @@ const ensureNodeCapacity = (count) => {
   state.radius = new Float32Array(nextCapacity)
   state.visible = new Uint8Array(nextCapacity)
   state.highlighted = new Uint8Array(nextCapacity)
+  state.focused = new Uint8Array(nextCapacity)
   state.selected = new Uint8Array(nextCapacity)
 }
@@ -230,6 +233,7 @@ const loadChunk = (chunk) => {
     state.radius[index] = nodeRadius(relevance, kind)
     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)
   }
@@ -390,6 +394,12 @@ const renderFrame = (now) => {
     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,
@@ -489,6 +499,23 @@ const setHighlights = (ids) => {
   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) {
@@ -498,6 +525,22 @@ const setSelected = (id) => {
   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') {
@@ -542,11 +585,21 @@ self.onmessage = (event) => {
     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,

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

@@ -1,19 +1,33 @@
 import { getGraphLayout } from './get-graph-layout.js';
 export const getGraphContexts = async (vaultPath, agentId) => {
     const { layout } = await getGraphLayout(vaultPath, { agentId });
-    const nodeIdsByContext = layout.nodes.reduce((contexts, node) => {
+    const nodeIdsByContext = new Map();
+    const contextByNodeId = new Map();
+    layout.nodes.forEach((node) => {
         const title = node.segment || node.group || 'root';
-        const nodeIds = contexts.get(title) ?? new Set();
+        const nodeIds = nodeIdsByContext.get(title) ?? new Set();
         nodeIds.add(node.id);
-        contexts.set(title, nodeIds);
-        return contexts;
-    }, new Map());
+        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: layout.edges.filter((edge) => nodeIds.has(edge.source) && Boolean(edge.target && nodeIds.has(edge.target))).length
+        edgeCount: edgeCountByContext.get(title) ?? 0
     }))
         .sort((left, right) => right.nodeCount - left.nodeCount || left.title.localeCompare(right.title));
 };

package/dist/application/get-graph-layout.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { addVisualContextEdges } from '../domain/graph-contexts.js';
 import { createStarGraphLayout } from '../domain/graph-layout.js';
 import { indexStoragePath } from '../infrastructure/file-index.js';
 import { getGraphSummary } from './get-graph-summary.js';
-const graphLayoutVersion = 5;
+const graphLayoutVersion = 6;
 const graphLayoutCache = new Map();
 const safeCacheSegment = (value, fallback) => value?.replace(/[^a-zA-Z0-9_-]/g, '_') || fallback;
 const graphLayoutStoragePath = (vaultPath, options) => {

package/dist/application/graph-view-state.js ADDED Viewed

@@ -0,0 +1,66 @@
+import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+const stateVersion = 1;
+const graphViewStatePath = (vaultPath) => join(vaultPath, '.brainlink', 'graph-view-state.json');
+const stateKey = (input) => [input.signature, input.agentId ?? 'all-agents', input.context ?? 'all-contexts'].join(':');
+const emptyPersistedState = () => ({
+    version: stateVersion,
+    states: {}
+});
+const readPersistedState = async (vaultPath) => {
+    try {
+        const parsed = JSON.parse(await readFile(graphViewStatePath(vaultPath), 'utf8'));
+        return parsed.version === stateVersion && parsed.states && typeof parsed.states === 'object' ? parsed : emptyPersistedState();
+    }
+    catch {
+        return emptyPersistedState();
+    }
+};
+const writePersistedState = async (vaultPath, state) => {
+    const target = graphViewStatePath(vaultPath);
+    const temp = `${target}.tmp`;
+    await mkdir(dirname(target), { recursive: true, mode: 0o700 });
+    await writeFile(temp, `${JSON.stringify(state)}\n`, { encoding: 'utf8', mode: 0o600 });
+    await rename(temp, target);
+};
+const normalizePositions = (positions) => positions.flatMap((position) => {
+    const id = typeof position.id === 'string' ? position.id.trim() : '';
+    const x = Number(position.x);
+    const y = Number(position.y);
+    return id && Number.isFinite(x) && Number.isFinite(y) ? [{ id, x, y }] : [];
+});
+export const getGraphViewState = async (vaultPath, input) => {
+    const persisted = await readPersistedState(vaultPath);
+    const state = persisted.states[stateKey(input)];
+    return state ?? {
+        ...input,
+        positions: []
+    };
+};
+export const saveGraphViewState = async (vaultPath, input) => {
+    const persisted = await readPersistedState(vaultPath);
+    const nextState = {
+        ...input,
+        positions: normalizePositions(input.positions)
+    };
+    await writePersistedState(vaultPath, {
+        version: stateVersion,
+        states: {
+            ...persisted.states,
+            [stateKey(input)]: nextState
+        }
+    });
+    return nextState;
+};
+export const deleteGraphViewState = async (vaultPath, input) => {
+    const persisted = await readPersistedState(vaultPath);
+    const { [stateKey(input)]: _removed, ...states } = persisted.states;
+    await writePersistedState(vaultPath, {
+        version: stateVersion,
+        states
+    });
+    return {
+        ...input,
+        positions: []
+    };
+};

package/dist/application/server/routes.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { getGraphNode } from '../get-graph-node.js';
 import { getGraphLayout } from '../get-graph-layout.js';
 import { getGraphView } from '../get-graph-view.js';
 import { getGraphStreamChunk } from '../get-graph-stream-chunk.js';
+import { deleteGraphViewState, getGraphViewState, saveGraphViewState } from '../graph-view-state.js';
 import { listAgents } from '../list-agents.js';
 import { listBacklinks, listLinks } from '../list-links.js';
 import { searchGraphNodeIds } from '../search-graph-node-ids.js';
@@ -64,6 +65,21 @@ const parseNumber = (value, fallback) => {
     const parsed = Number(value);
     return Number.isFinite(parsed) ? parsed : fallback;
 };
+const readJsonBody = async (request, limitBytes = 1_000_000) => {
+    let body = '';
+    for await (const chunk of request) {
+        body += String(chunk);
+        if (Buffer.byteLength(body, 'utf8') > limitBytes) {
+            throw Object.assign(new Error('Request body too large'), { statusCode: 413 });
+        }
+    }
+    return body.trim().length > 0 ? JSON.parse(body) : {};
+};
+const readGraphViewStateInput = (url) => ({
+    signature: url.searchParams.get('signature')?.trim() ?? '',
+    agentId: readAgentQuery(url),
+    context: readContextQuery(url)
+});
 const compactGraphLayoutThreshold = 12_000;
 const compactGraphLayoutEdgeLimit = 60_000;
 const graphLayoutBodyCacheLimit = 8;
@@ -285,6 +301,35 @@ export const route = async (request, url, vaultPath) => {
             context: readContextQuery(url)
         })), 200, contentTypes['.json']);
     }
+    if (isReadMethod(request) && url.pathname === '/api/graph-view-state') {
+        const input = readGraphViewStateInput(url);
+        if (!input.signature) {
+            return createResponse(createJsonResponse({ error: 'Missing signature query parameter' }), 400, contentTypes['.json']);
+        }
+        return createResponse(createJsonResponse(await getGraphViewState(vaultPath, input)), 200, contentTypes['.json']);
+    }
+    if (request.method === 'POST' && url.pathname === '/api/graph-view-state') {
+        const input = readGraphViewStateInput(url);
+        if (!input.signature) {
+            return createResponse(createJsonResponse({ error: 'Missing signature query parameter' }), 400, contentTypes['.json']);
+        }
+        const body = await readJsonBody(request);
+        const positions = Array.isArray(body.positions)
+            ? body.positions.map((position) => ({
+                id: String(position.id ?? ''),
+                x: Number(position.x),
+                y: Number(position.y)
+            }))
+            : [];
+        return createResponse(createJsonResponse(await saveGraphViewState(vaultPath, { ...input, positions })), 200, contentTypes['.json']);
+    }
+    if (request.method === 'DELETE' && url.pathname === '/api/graph-view-state') {
+        const input = readGraphViewStateInput(url);
+        if (!input.signature) {
+            return createResponse(createJsonResponse({ error: 'Missing signature query parameter' }), 400, contentTypes['.json']);
+        }
+        return createResponse(createJsonResponse(await deleteGraphViewState(vaultPath, input)), 200, contentTypes['.json']);
+    }
     if (isReadMethod(request) && url.pathname === '/api/graph-node') {
         const id = url.searchParams.get('id')?.trim() ?? '';
         if (!id) {

package/dist/domain/graph-layout.js CHANGED Viewed

@@ -356,8 +356,9 @@ const resolveCollisionPair = (left, right, minDistance) => {
         return;
     }
     const push = (minDistance - distance) / 2;
-    const ux = dx / distance;
-    const uy = dy / distance;
+    const fallbackAngle = Math.PI * 2 * (Math.abs(hashText(`${left.id}:${right.id}`) % 1000) / 1000);
+    const ux = Math.abs(dx) + Math.abs(dy) < 0.001 ? Math.cos(fallbackAngle) : dx / distance;
+    const uy = Math.abs(dx) + Math.abs(dy) < 0.001 ? Math.sin(fallbackAngle) : dy / distance;
     left.x -= ux * push;
     left.y -= uy * push;
     right.x += ux * push;
@@ -487,19 +488,35 @@ const createStarNodes = (nodes, segments, degrees, hubId, levels) => {
                 y: 0
             }));
         }
-        const ringRadius = Math.max(300 + (level - 1) * 360, (levelNodes.length * 112) / (Math.PI * 2));
-        return levelNodes.map((node, index) => {
-            const segment = segments.get(node.id) ?? groupLabel(groupKey(node));
-            const segmentOffset = (segmentIndexByName.get(segment) ?? 0) / Math.max(segmentNames.length, 1);
-            const angle = Math.PI * 2 * ((index / Math.max(levelNodes.length, 1) + segmentOffset * 0.18) % 1) - Math.PI / 2;
-            const radialJitter = jitter(node.id, 48);
-            return {
-                ...node,
-                group: groupLabel(groupKey(node)),
-                segment,
-                x: Math.cos(angle) * (ringRadius + radialJitter) + jitter(node.title, 18),
-                y: Math.sin(angle) * (ringRadius + radialJitter) + jitter(node.path, 18)
-            };
+        const levelNodesBySegment = segmentNames
+            .map((segment) => ({
+            segment,
+            nodes: levelNodes.filter((node) => (segments.get(node.id) ?? groupLabel(groupKey(node))) === segment)
+        }))
+            .filter((group) => group.nodes.length > 0);
+        const totalNodes = levelNodesBySegment.reduce((total, group) => total + group.nodes.length, 0);
+        const baseRadius = Math.max(360 + (level - 1) * 460, (levelNodes.length * 156) / (Math.PI * 2));
+        let arcCursor = -Math.PI / 2;
+        return levelNodesBySegment.flatMap((group) => {
+            const arcSize = (Math.PI * 2 * group.nodes.length) / Math.max(totalNodes, 1);
+            const arcPadding = Math.min(0.22, arcSize * 0.18);
+            const arcStart = arcCursor + arcPadding;
+            const arcEnd = arcCursor + arcSize - arcPadding;
+            const usableArc = Math.max(0.001, arcEnd - arcStart);
+            const segmentRadius = Math.max(baseRadius, (group.nodes.length * 156) / usableArc);
+            arcCursor += arcSize;
+            return group.nodes.map((node, index) => {
+                const lane = index % 3 - 1;
+                const angle = arcStart + usableArc * ((index + 0.5) / Math.max(group.nodes.length, 1)) + jitter(node.title, 0.035);
+                const radialJitter = jitter(node.id, 34);
+                return {
+                    ...node,
+                    group: groupLabel(groupKey(node)),
+                    segment: group.segment,
+                    x: Math.cos(angle) * (segmentRadius + lane * 52 + radialJitter) + jitter(node.title, 16),
+                    y: Math.sin(angle) * (segmentRadius + lane * 52 + radialJitter) + jitter(node.path, 16)
+                };
+            });
         });
     });
 };
@@ -508,7 +525,7 @@ export const createStarGraphLayout = (graph) => {
     const hubId = selectPrimaryHubId(graph.nodes, degrees) ?? selectHighestDegreeNodeId(graph.nodes, degrees);
     const segments = assignSegments(graph.nodes, graph.edges, degrees);
     const levels = assignStarLevels(graph.nodes, graph.edges, hubId);
-    const nodes = relaxCollisions(createStarNodes(graph.nodes, segments, degrees, hubId, levels), 132, 18);
+    const nodes = relaxCollisions(createStarNodes(graph.nodes, segments, degrees, hubId, levels), 156, 22);
     const centeredNodes = centerLayoutByNode(nodes, hubId);
     const groups = createGraphLayoutHierarchy(centeredNodes, graph.edges, degrees);
     return {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@andespindola/brainlink",
-  "version": "0.1.0-beta.154",
+  "version": "0.1.0-beta.156",
   "description": "Local-first knowledge memory for agents with Markdown, backlinks, indexing and context retrieval.",
   "type": "module",
   "license": "MIT",