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

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

@@ -1,14 +1,14 @@
 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);
-  --danger: #ff6b6b;
+  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;
 }
 
 * {
@@ -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(255, 255, 255, 0.96);
+  box-shadow: 0 1px 8px rgba(23, 32, 51, 0.08);
   backdrop-filter: blur(8px);
 }
 
@@ -82,8 +83,10 @@ select {
   width: 100%;
   height: 100%;
   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(23, 32, 51, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(23, 32, 51, 0.035) 1px, transparent 1px),
+    #f6f8fb;
+  background-size: 28px 28px, 28px 28px, auto;
   overflow: hidden;
 }
 
@@ -126,23 +129,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(101, 115, 134, 0.24);
   border-radius: 6px;
-  background: rgba(13, 16, 20, 0.78);
+  background: rgba(255, 255, 255, 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 8px 22px rgba(23, 32, 51, 0.12);
 }
 
 .graph-label.is-focused {
-  border-color: rgba(53, 208, 162, 0.72);
-  color: #dffbf3;
+  border-color: rgba(11, 111, 203, 0.56);
+  color: #0b4f92;
 }
 
 .graph-tooltip {
@@ -152,12 +155,12 @@ select {
   padding: 8px 10px;
   border: 1px solid var(--line);
   border-radius: 6px;
-  background: rgba(13, 16, 20, 0.94);
+  background: rgba(255, 255, 255, 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 16px 40px rgba(23, 32, 51, 0.18);
 }
 
 .graph-tooltip strong,
@@ -181,8 +184,8 @@ select {
   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);
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 16px 42px rgba(23, 32, 51, 0.16);
 }
 
 .eyebrow {
@@ -215,7 +218,7 @@ select {
   border: 1px solid var(--line);
   border-radius: 8px;
   outline: none;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(255, 255, 255, 0.94);
   color: var(--text);
   padding: 0 14px;
 }
@@ -236,7 +239,7 @@ select {
   height: 38px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(255, 255, 255, 0.94);
   color: var(--text);
   cursor: pointer;
 }
@@ -257,7 +260,7 @@ select {
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(21, 25, 31, 0.88);
+  background: rgba(255, 255, 255, 0.94);
   display: grid;
   gap: 3px;
 }
@@ -332,7 +335,7 @@ li small {
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #101419;
+  background: #f8fafc;
   color: var(--text);
   white-space: pre-wrap;
   overflow: auto;
@@ -362,7 +365,7 @@ 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);
   overflow: hidden;
 }
 
@@ -466,7 +469,7 @@ li small {
   padding: 10px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: var(--panel-strong);
+  background: #f8fafc;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   gap: 8px;

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

@@ -369,14 +369,39 @@ 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('#4c8eda'),
+  nodeCluster: parseColor('#2f6fb4'),
+  nodeHighlight: parseColor('#f2b441'),
+  nodeSelected: parseColor('#172033'),
+  nodePalette: [
+    parseColor('#4c8eda'),
+    parseColor('#65b96e'),
+    parseColor('#f0a33a'),
+    parseColor('#d95f8d'),
+    parseColor('#8d72d9'),
+    parseColor('#55bfc4'),
+    parseColor('#ec6b56'),
+    parseColor('#9aa6b2'),
+    parseColor('#b78255'),
+    parseColor('#6f9fd8')
+  ],
+  edge: [0.23, 0.31, 0.42, 0.18],
+  edgeHeavy: [0.23, 0.31, 0.42, 0.34],
+  clear: parseColor('#f6f8fb')
+}
+
+const segmentPalette = ['#4c8eda', '#65b96e', '#f0a33a', '#d95f8d', '#8d72d9', '#55bfc4', '#ec6b56', '#9aa6b2', '#b78255', '#6f9fd8']
+
+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 clampScale = (scale) => Math.max(zoomRange.min, Math.min(zoomRange.max, scale))
 
@@ -518,7 +543,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 = '#f6f8fb'
   ctx2dFallback.fillRect(0, 0, width, height)
 
   const nodes = Array.isArray(state.chunk.nodes) ? state.chunk.nodes : []
@@ -528,7 +553,7 @@ const drawFallback = () => {
     nodeById.set(nodes[i][0], nodes[i])
   }
 
-  ctx2dFallback.strokeStyle = 'rgba(150,165,190,0.2)'
+  ctx2dFallback.strokeStyle = 'rgba(59,79,108,0.18)'
   ctx2dFallback.lineWidth = 1
   for (let i = 0; i < edges.length; i += 1) {
     const edge = edges[i]
@@ -547,7 +572,7 @@ 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()
@@ -556,7 +581,7 @@ const drawFallback = () => {
     ctx2dFallback.fill()
   }
 
-  ctx2dFallback.fillStyle = '#edf2f7'
+  ctx2dFallback.fillStyle = '#172033'
   ctx2dFallback.font = '12px Inter, system-ui, sans-serif'
   ctx2dFallback.textAlign = 'center'
   ctx2dFallback.fillText('Fallback canvas mode', Math.max(width, 320) / 2, 24)
@@ -718,7 +743,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(255, 255, 255, 0.88)'
   ctx.fillRect(0, 0, width, height)
 
   const xs = nodes.map((node) => Number(node[2])).filter(Number.isFinite)
@@ -738,7 +763,7 @@ const drawMiniMap = () => {
   })
   state.miniMapView = { minX, minY, scale, offsetX, offsetY, width, height }
 
-  ctx.fillStyle = 'rgba(174, 184, 197, 0.62)'
+  ctx.fillStyle = 'rgba(76, 142, 218, 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 +773,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(11, 111, 203, 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))
 }

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.163",
   "description": "Local-first knowledge memory for agents with Markdown, backlinks, indexing and context retrieval.",
   "type": "module",
   "license": "MIT",