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

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

@@ -1,14 +1,14 @@
 export const createClientCss = () => `:root {
-  color-scheme: light;
-  --bg: #eef2f7;
-  --panel: #ffffff;
-  --panel-strong: #f7f9fc;
-  --line: #d9e1ec;
-  --text: #172033;
-  --muted: #657386;
-  --accent: #0b6fcb;
-  --accent-weak: rgba(11, 111, 203, 0.12);
-  --danger: #d84949;
+  color-scheme: dark;
+  --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,8 +63,8 @@ select {
   min-height: 72px;
   padding: 10px 16px;
   border-bottom: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 1px 8px rgba(23, 32, 51, 0.08);
+  background: rgba(9, 18, 28, 0.92);
+  box-shadow: 0 1px 14px rgba(1, 6, 13, 0.42);
   backdrop-filter: blur(8px);
 }
 
@@ -82,10 +82,14 @@ select {
   position: relative;
   width: 100%;
   height: 100%;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
   background:
-    linear-gradient(rgba(23, 32, 51, 0.035) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(23, 32, 51, 0.035) 1px, transparent 1px),
-    #f6f8fb;
+    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;
 }
@@ -96,6 +100,7 @@ select {
   inset: 0;
   width: 100%;
   height: 100%;
+  touch-action: none;
 }
 
 #graph {
@@ -131,21 +136,21 @@ select {
   max-width: 220px;
   transform: translate(-50%, calc(-100% - 12px));
   padding: 4px 8px;
-  border: 1px solid rgba(101, 115, 134, 0.24);
+  border: 1px solid rgba(143, 172, 204, 0.18);
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.92);
+  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(23, 32, 51, 0.12);
+  box-shadow: 0 12px 28px rgba(1, 6, 13, 0.36);
 }
 
 .graph-label.is-focused {
-  border-color: rgba(11, 111, 203, 0.56);
-  color: #0b4f92;
+  border-color: rgba(90, 168, 255, 0.56);
+  color: #d7e9ff;
 }
 
 .graph-tooltip {
@@ -155,12 +160,12 @@ select {
   padding: 8px 10px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.96);
+  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(23, 32, 51, 0.18);
+  box-shadow: 0 18px 44px rgba(1, 6, 13, 0.42);
 }
 
 .graph-tooltip strong,
@@ -182,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(255, 255, 255, 0.88);
-  box-shadow: 0 16px 42px rgba(23, 32, 51, 0.16);
+  background: rgba(8, 19, 29, 0.84);
+  box-shadow: 0 18px 40px rgba(1, 6, 13, 0.36);
 }
 
 .eyebrow {
@@ -218,7 +223,7 @@ select {
   border: 1px solid var(--line);
   border-radius: 8px;
   outline: none;
-  background: rgba(255, 255, 255, 0.94);
+  background: rgba(12, 24, 36, 0.94);
   color: var(--text);
   padding: 0 14px;
 }
@@ -239,7 +244,7 @@ select {
   height: 38px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.94);
+  background: rgba(12, 24, 36, 0.94);
   color: var(--text);
   cursor: pointer;
 }
@@ -260,7 +265,7 @@ select {
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.94);
+  background: rgba(12, 24, 36, 0.94);
   display: grid;
   gap: 3px;
 }
@@ -335,7 +340,7 @@ li small {
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #f8fafc;
+  background: #091521;
   color: var(--text);
   white-space: pre-wrap;
   overflow: auto;
@@ -366,6 +371,7 @@ li small {
   background: var(--panel);
   color: var(--text);
   box-shadow: 0 24px 80px rgba(23, 32, 51, 0.22);
+  backdrop-filter: blur(10px);
   overflow: hidden;
 }
 
@@ -469,7 +475,7 @@ li small {
   padding: 10px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #f8fafc;
+  background: #091521;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 8px;
@@ -509,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,28 +369,28 @@ const parseColor = (hex) => {
 }
 
 const graphTheme = {
-  node: parseColor('#4c8eda'),
-  nodeCluster: parseColor('#2f6fb4'),
-  nodeHighlight: parseColor('#f2b441'),
-  nodeSelected: parseColor('#172033'),
+  node: parseColor('#5aa8ff'),
+  nodeCluster: parseColor('#3f7fbd'),
+  nodeHighlight: parseColor('#ffcb67'),
+  nodeSelected: parseColor('#edf4ff'),
   nodePalette: [
-    parseColor('#4c8eda'),
-    parseColor('#65b96e'),
-    parseColor('#f0a33a'),
-    parseColor('#d95f8d'),
-    parseColor('#8d72d9'),
-    parseColor('#55bfc4'),
-    parseColor('#ec6b56'),
-    parseColor('#9aa6b2'),
-    parseColor('#b78255'),
-    parseColor('#6f9fd8')
+    parseColor('#5aa8ff'),
+    parseColor('#5ecf92'),
+    parseColor('#ffb65c'),
+    parseColor('#ff7dac'),
+    parseColor('#a88fff'),
+    parseColor('#59d0dd'),
+    parseColor('#ff8f6a'),
+    parseColor('#a4b3c3'),
+    parseColor('#c9945f'),
+    parseColor('#7cb6ff')
   ],
-  edge: [0.23, 0.31, 0.42, 0.18],
-  edgeHeavy: [0.23, 0.31, 0.42, 0.34],
-  clear: parseColor('#f6f8fb')
+  edge: [0.59, 0.71, 0.83, 0.14],
+  edgeHeavy: [0.59, 0.71, 0.83, 0.3],
+  clear: parseColor('#08131d')
 }
 
-const segmentPalette = ['#4c8eda', '#65b96e', '#f0a33a', '#d95f8d', '#8d72d9', '#55bfc4', '#ec6b56', '#9aa6b2', '#b78255', '#6f9fd8']
+const segmentPalette = ['#5aa8ff', '#5ecf92', '#ffb65c', '#ff7dac', '#a88fff', '#59d0dd', '#ff8f6a', '#a4b3c3', '#c9945f', '#7cb6ff']
 
 const segmentColorIndex = (segment) => {
   const value = String(segment || '')
@@ -402,6 +402,8 @@ const segmentColorIndex = (segment) => {
 }
 
 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))
 
@@ -543,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 = '#f6f8fb'
+  ctx2dFallback.fillStyle = '#08131d'
   ctx2dFallback.fillRect(0, 0, width, height)
 
   const nodes = Array.isArray(state.chunk.nodes) ? state.chunk.nodes : []
@@ -553,7 +555,7 @@ const drawFallback = () => {
     nodeById.set(nodes[i][0], nodes[i])
   }
 
-  ctx2dFallback.strokeStyle = 'rgba(59,79,108,0.18)'
+  ctx2dFallback.strokeStyle = 'rgba(151,181,212,0.18)'
   ctx2dFallback.lineWidth = 1
   for (let i = 0; i < edges.length; i += 1) {
     const edge = edges[i]
@@ -576,12 +578,12 @@ const drawFallback = () => {
     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 = '#172033'
+  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)
@@ -670,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
@@ -743,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(255, 255, 255, 0.88)'
+  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)
@@ -763,7 +787,7 @@ const drawMiniMap = () => {
   })
   state.miniMapView = { minX, minY, scale, offsetX, offsetY, width, height }
 
-  ctx.fillStyle = 'rgba(76, 142, 218, 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)
@@ -773,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(11, 111, 203, 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))
 }
@@ -1128,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
   }
@@ -1170,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()
@@ -1180,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)
@@ -1200,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) {
@@ -1241,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))
@@ -1260,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)
@@ -1287,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
@@ -1507,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/package.json

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