@andespindola/brainlink 0.1.0-beta.162 → 0.1.0-beta.164

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

@@ -1,13 +1,13 @@
 export const createClientCss = () => `:root {
   color-scheme: dark;
-  --bg: #0d0f12;
-  --panel: #15191f;
-  --panel-strong: #1c222b;
-  --line: #29313c;
-  --text: #edf2f7;
-  --muted: #99a5b5;
-  --accent: #35d0a2;
-  --accent-weak: rgba(53, 208, 162, 0.14);
+  --bg: #071019;
+  --panel: #0d1823;
+  --panel-strong: #112130;
+  --line: rgba(143, 172, 204, 0.18);
+  --text: #edf4ff;
+  --muted: #97a9bd;
+  --accent: #5aa8ff;
+  --accent-weak: rgba(90, 168, 255, 0.18);
   --danger: #ff6b6b;
 }
 
@@ -63,7 +63,8 @@ select {
   min-height: 72px;
   padding: 10px 16px;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(17, 21, 27, 0.96) 0%, rgba(17, 21, 27, 0.86) 100%);
+  background: rgba(9, 18, 28, 0.92);
+  box-shadow: 0 1px 14px rgba(1, 6, 13, 0.42);
   backdrop-filter: blur(8px);
 }
 
@@ -81,9 +82,15 @@ select {
   position: relative;
   width: 100%;
   height: 100%;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
   background:
-    radial-gradient(circle at 18% 20%, rgba(53, 208, 162, 0.12), transparent 28rem),
-    linear-gradient(135deg, #0d0f12 0%, #12161c 55%, #0a0d10 100%);
+    linear-gradient(rgba(164, 197, 230, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(164, 197, 230, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at top, rgba(43, 93, 143, 0.22), transparent 44%),
+    #08131d;
+  background-size: 28px 28px, 28px 28px, auto;
   overflow: hidden;
 }
 
@@ -93,6 +100,7 @@ select {
   inset: 0;
   width: 100%;
   height: 100%;
+  touch-action: none;
 }
 
 #graph {
@@ -126,23 +134,23 @@ select {
 .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);
+  transform: translate(-50%, calc(-100% - 12px));
+  padding: 4px 8px;
+  border: 1px solid rgba(143, 172, 204, 0.18);
   border-radius: 6px;
-  background: rgba(13, 16, 20, 0.78);
+  background: rgba(7, 16, 25, 0.92);
   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);
+  box-shadow: 0 12px 28px rgba(1, 6, 13, 0.36);
 }
 
 .graph-label.is-focused {
-  border-color: rgba(53, 208, 162, 0.72);
-  color: #dffbf3;
+  border-color: rgba(90, 168, 255, 0.56);
+  color: #d7e9ff;
 }
 
 .graph-tooltip {
@@ -152,12 +160,12 @@ select {
   padding: 8px 10px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: rgba(13, 16, 20, 0.94);
+  background: rgba(9, 18, 28, 0.96);
   color: var(--text);
   font-size: 12px;
   line-height: 1.35;
   pointer-events: none;
-  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
+  box-shadow: 0 18px 44px rgba(1, 6, 13, 0.42);
 }
 
 .graph-tooltip strong,
@@ -179,10 +187,10 @@ select {
   z-index: 3;
   width: 180px;
   height: 120px;
-  border: 1px solid rgba(129, 146, 170, 0.28);
+  border: 1px solid rgba(143, 172, 204, 0.18);
   border-radius: 8px;
-  background: rgba(13, 16, 20, 0.78);
-  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38);
+  background: rgba(8, 19, 29, 0.84);
+  box-shadow: 0 18px 40px rgba(1, 6, 13, 0.36);
 }
 
 .eyebrow {
@@ -215,7 +223,7 @@ select {
   border: 1px solid var(--line);
   border-radius: 8px;
   outline: none;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(12, 24, 36, 0.94);
   color: var(--text);
   padding: 0 14px;
 }
@@ -236,7 +244,7 @@ select {
   height: 38px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(12, 24, 36, 0.94);
   color: var(--text);
   cursor: pointer;
 }
@@ -257,7 +265,7 @@ select {
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(12, 24, 36, 0.94);
   display: grid;
   gap: 3px;
 }
@@ -332,7 +340,7 @@ li small {
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #101419;
+  background: #091521;
   color: var(--text);
   white-space: pre-wrap;
   overflow: auto;
@@ -362,7 +370,8 @@ li small {
   border-radius: 8px;
   background: var(--panel);
   color: var(--text);
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
+  box-shadow: 0 24px 80px rgba(23, 32, 51, 0.22);
+  backdrop-filter: blur(10px);
   overflow: hidden;
 }
 
@@ -466,7 +475,7 @@ li small {
   padding: 10px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: var(--panel-strong);
+  background: #091521;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 8px;
@@ -506,7 +515,7 @@ li small {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
+  background: linear-gradient(180deg, rgba(7, 16, 25, 0), rgba(7, 16, 25, 0.84));
 }
 
 .app-footer small {

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

@@ -369,14 +369,41 @@ const parseColor = (hex) => {
 }
 
 const graphTheme = {
-  node: parseColor('#aeb8c5'),
-  nodeCluster: parseColor('#6bb7e8'),
-  nodeHighlight: parseColor('#f5c24a'),
-  nodeSelected: parseColor('#ffffff'),
-  edge: [0.58, 0.64, 0.74, 0.24],
-  edgeHeavy: [0.78, 0.84, 0.92, 0.44],
-  clear: parseColor('#0d0f12')
-}
+  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))
 
@@ -518,7 +545,7 @@ const drawFallback = () => {
   canvas.width = Math.floor(width * ratio)
   canvas.height = Math.floor(height * ratio)
   ctx2dFallback.setTransform(ratio, 0, 0, ratio, 0, 0)
-  ctx2dFallback.fillStyle = '#0d0f12'
+  ctx2dFallback.fillStyle = '#08131d'
   ctx2dFallback.fillRect(0, 0, width, height)
 
   const nodes = Array.isArray(state.chunk.nodes) ? state.chunk.nodes : []
@@ -528,7 +555,7 @@ const drawFallback = () => {
     nodeById.set(nodes[i][0], nodes[i])
   }
 
-  ctx2dFallback.strokeStyle = 'rgba(150,165,190,0.2)'
+  ctx2dFallback.strokeStyle = 'rgba(151,181,212,0.18)'
   ctx2dFallback.lineWidth = 1
   for (let i = 0; i < edges.length; i += 1) {
     const edge = edges[i]
@@ -547,16 +574,16 @@ const drawFallback = () => {
     const node = nodes[i]
     const p = worldToScreen(node[2], node[3])
     const selected = state.selectedNodeId === node[0]
-    const color = node[6] === 'cluster' ? '#6bb7e8' : '#aeb8c5'
+    const color = segmentColor(node[5] || node[4] || node[1])
     const radius = Math.max(2.4, Math.min(14, 4 + node[7] * 0.55))
 
     ctx2dFallback.beginPath()
-    ctx2dFallback.fillStyle = selected ? '#ffffff' : color
+    ctx2dFallback.fillStyle = selected ? '#edf4ff' : color
     ctx2dFallback.arc(p.x, p.y, radius, 0, Math.PI * 2)
     ctx2dFallback.fill()
   }
 
-  ctx2dFallback.fillStyle = '#edf2f7'
+  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)
@@ -645,6 +672,28 @@ const updateNodePositionInChunk = (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
@@ -718,7 +767,7 @@ const drawMiniMap = () => {
   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.fillStyle = 'rgba(8, 19, 29, 0.88)'
   ctx.fillRect(0, 0, width, height)
 
   const xs = nodes.map((node) => Number(node[2])).filter(Number.isFinite)
@@ -738,7 +787,7 @@ const drawMiniMap = () => {
   })
   state.miniMapView = { minX, minY, scale, offsetX, offsetY, width, height }
 
-  ctx.fillStyle = 'rgba(174, 184, 197, 0.62)'
+  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)
@@ -748,7 +797,7 @@ const drawMiniMap = () => {
   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.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))
 }
@@ -1103,11 +1152,28 @@ const pickFallbackNodeId = (screenX, screenY) => {
   return typeof node?.[0] === 'string' ? node[0] : ''
 }
 
+const handlePickedNode = (node) => {
+  const nodeId = typeof node?.id === 'string' ? node.id : typeof node?.[0] === 'string' ? node[0] : ''
+  if (!nodeId) {
+    return
+  }
+
+  const kind = typeof node?.kind === 'string' ? node.kind : nodeKind(node)
+  if (kind === 'cluster') {
+    const currentScale = state.camera.scale
+    const targetScale = currentScale < 0.22 ? 0.28 : Math.min(1.1, currentScale * 1.6)
+    focusNodeInViewport(nodeId, targetScale)
+    return
+  }
+
+  loadNodeDetails(nodeId).catch((error) => console.error(error))
+}
+
 const pickAt = (screenX, screenY) => {
   if (state.rendererMode === 'fallback') {
-    const nodeId = pickFallbackNodeId(screenX, screenY)
-    if (nodeId) {
-      loadNodeDetails(nodeId).catch((error) => console.error(error))
+    const node = pickFallbackNode(screenX, screenY)
+    if (node) {
+      handlePickedNode(node)
     }
     return
   }
@@ -1145,6 +1211,19 @@ const resolvePointer = (event) => {
 
 const setupInput = () => {
   const dragActivationDistance = 6
+  const resetPointerState = (pointerId = null) => {
+    state.pointer.down = false
+    state.pointer.dragging = false
+    state.pointer.dragNodeId = ''
+    canvas.classList.remove('is-node-dragging')
+    if (pointerId !== null) {
+      try {
+        if (canvas.hasPointerCapture(pointerId)) {
+          canvas.releasePointerCapture(pointerId)
+        }
+      } catch {}
+    }
+  }
 
   canvas.addEventListener('wheel', (event) => {
     event.preventDefault()
@@ -1155,9 +1234,10 @@ const setupInput = () => {
   }, { passive: false })
 
   canvas.addEventListener('pointerdown', (event) => {
+    event.preventDefault()
     const pointer = resolvePointer(event)
     const candidateNode = pickFallbackNode(pointer.x, pointer.y)
-    const candidateNodeId = candidateNode?.[6] === 'node' && typeof candidateNode?.[0] === 'string' ? candidateNode[0] : ''
+    const candidateNodeId = isRealGraphNode(candidateNode) && typeof candidateNode?.[0] === 'string' ? candidateNode[0] : ''
     const candidateX = Number(candidateNode?.[2])
     const candidateY = Number(candidateNode?.[3])
     const world = screenToWorld(pointer.x, pointer.y)
@@ -1175,10 +1255,15 @@ const setupInput = () => {
     state.pointer.nodeStartY = candidateNodeId && Number.isFinite(candidateY) ? candidateY : 0
     state.pointer.worldAnchorX = world.x
     state.pointer.worldAnchorY = world.y
-    canvas.setPointerCapture(event.pointerId)
+    try {
+      canvas.setPointerCapture(event.pointerId)
+    } catch {}
   })
 
   canvas.addEventListener('pointermove', (event) => {
+    if (state.pointer.down) {
+      event.preventDefault()
+    }
     const pointer = resolvePointer(event)
 
     if (state.pointer.down) {
@@ -1216,7 +1301,7 @@ const setupInput = () => {
     }
 
     const hovered = pickFallbackNode(pointer.x, pointer.y)
-    const hoveredId = hovered?.[6] === 'node' && typeof hovered?.[0] === 'string' ? hovered[0] : ''
+    const hoveredId = isRealGraphNode(hovered) && typeof hovered?.[0] === 'string' ? hovered[0] : ''
     if (state.hoveredNodeId !== hoveredId) {
       state.hoveredNodeId = hoveredId
       canvas.classList.toggle('is-node-hover', Boolean(hoveredId))
@@ -1235,11 +1320,7 @@ const setupInput = () => {
     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)
+    resetPointerState(event.pointerId)
 
     if (shouldPick) {
       pickAt(pointer.x, pointer.y)
@@ -1262,6 +1343,16 @@ const setupInput = () => {
     updateGraphOverlays()
   })
 
+  canvas.addEventListener('pointercancel', (event) => {
+    resetPointerState(event.pointerId)
+    hideTooltip()
+    updateGraphOverlays()
+  })
+
+  canvas.addEventListener('lostpointercapture', () => {
+    resetPointerState()
+  })
+
   elements.miniMap.addEventListener('click', (event) => {
     if (!state.miniMapView) {
       return
@@ -1482,7 +1573,7 @@ const setupRenderWorker = () => {
 
       if (payload.type === 'pick-result') {
         if (payload.node && typeof payload.node.id === 'string' && payload.node.id.length > 0) {
-          loadNodeDetails(payload.node.id).catch((error) => console.error(error))
+          handlePickedNode(payload.node)
         }
         return
       }

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

@@ -14,6 +14,7 @@ const state = {
   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),
@@ -39,13 +40,25 @@ let pointPositionsBuffer = new Float32Array(0)
 let pointSizesBuffer = new Float32Array(0)
 
 const defaultTheme = {
-  node: [0.68, 0.72, 0.78, 1],
-  nodeCluster: [0.42, 0.76, 0.92, 1],
-  nodeHighlight: [0.95, 0.76, 0.22, 1],
-  nodeSelected: [0.99, 0.99, 1, 1],
-  edge: [0.58, 0.64, 0.74, 0.24],
-  edgeHeavy: [0.78, 0.84, 0.92, 0.44],
-  clear: [0.05, 0.06, 0.08, 1]
+  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 }
@@ -181,6 +194,7 @@ const ensureNodeCapacity = (count) => {
   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)
@@ -199,11 +213,21 @@ const ensureEdgeCapacity = (count) => {
 }
 
 const nodeRadius = (relevance, kind) => {
-  const base = kind === 'cluster' ? 7.8 : 4.6
-  const modifier = Math.min(4.8, Math.max(0, relevance * 0.55))
+  const base = kind === 'cluster' ? 8.8 : 5.4
+  const modifier = Math.min(5.6, Math.max(0, relevance * 0.62))
   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 : []
@@ -223,6 +247,7 @@ const loadChunk = (chunk) => {
     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
 
@@ -233,6 +258,7 @@ const loadChunk = (chunk) => {
     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
@@ -349,6 +375,13 @@ const drawNodeLayer = (predicate, color, radiusBoost = 1) => {
   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)
@@ -398,15 +431,13 @@ const renderFrame = (now) => {
     scheduleSettledRender(now)
   }
 
-  drawNodeLayer(
-    (index) => state.visible[index] === 1 && state.selected[index] === 0 && state.highlighted[index] === 0,
-    theme.node,
+  drawColoredNodeLayer(
+    (index) => state.visible[index] === 1 && state.kinds[index] !== 'cluster' && state.selected[index] === 0 && state.highlighted[index] === 0 && state.focused[index] === 0,
     1
   )
 
-  drawNodeLayer(
+  drawColoredNodeLayer(
     (index) => state.visible[index] === 1 && state.kinds[index] === 'cluster' && state.selected[index] === 0,
-    theme.nodeCluster,
     1.15
   )
 

package/package.json

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