@andespindola/brainlink 0.1.0-beta.161 → 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;
@@ -342,7 +345,8 @@ li small {
 }
 
 .content-dialog {
-  position: fixed;
+  position: absolute;
+  z-index: 6;
   top: 12px;
   right: 12px;
   bottom: 12px;
@@ -350,7 +354,7 @@ li small {
   top: max(12px, env(safe-area-inset-top));
   right: max(12px, env(safe-area-inset-right));
   bottom: max(12px, env(safe-area-inset-bottom));
-  left: max(12px, calc(100vw - 780px));
+  left: max(12px, calc(100% - 780px));
   margin: 0;
   width: auto;
   height: auto;
@@ -361,13 +365,12 @@ 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;
 }
 
-.content-dialog::backdrop {
-  background: rgba(4, 7, 10, 0.72);
-  backdrop-filter: blur(4px);
+.content-dialog[hidden] {
+  display: none;
 }
 
 .content-dialog article {
@@ -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-html.js

@@ -52,47 +52,47 @@ export const createClientHtml = () => `<!doctype html>
           <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>
+          <aside id="contentDialog" class="content-dialog" role="dialog" aria-labelledby="contentTitle" hidden>
+            <article>
+              <header>
+                <div>
+                  <span class="eyebrow">Node details</span>
+                  <h2 id="contentTitle">Selected note</h2>
+                  <p id="contentPath"></p>
+                </div>
+                <button id="contentClose" type="button" aria-label="Close node details" title="Close node details">&times;</button>
+              </header>
+              <div class="content-meta">
+                <section class="content-meta-section">
+                  <h3>Facts</h3>
+                  <ul id="contentFacts"></ul>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Context Links</h3>
+                  <ul id="contentContextLinks"></ul>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Tags</h3>
+                  <div id="contentTags" class="tags"></div>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Outgoing</h3>
+                  <ul id="contentOutgoing"></ul>
+                </section>
+                <section class="content-meta-section">
+                  <h3>Backlinks</h3>
+                  <ul id="contentIncoming"></ul>
+                </section>
+              </div>
+              <pre id="contentBody" class="note-content"></pre>
+            </article>
+          </aside>
         </div>
       </section>
     </main>
     <footer class="app-footer" aria-label="Copyright notice">
       <small>Copyright © 2026 Substructa</small>
     </footer>
-    <dialog id="contentDialog" class="content-dialog" aria-labelledby="contentTitle">
-      <article>
-        <header>
-          <div>
-            <span class="eyebrow">Node details</span>
-            <h2 id="contentTitle">Selected note</h2>
-            <p id="contentPath"></p>
-          </div>
-          <button id="contentClose" type="button" aria-label="Close node details" title="Close node details">&times;</button>
-        </header>
-        <div class="content-meta">
-          <section class="content-meta-section">
-            <h3>Facts</h3>
-            <ul id="contentFacts"></ul>
-          </section>
-          <section class="content-meta-section">
-            <h3>Context Links</h3>
-            <ul id="contentContextLinks"></ul>
-          </section>
-          <section class="content-meta-section">
-            <h3>Tags</h3>
-            <div id="contentTags" class="tags"></div>
-          </section>
-          <section class="content-meta-section">
-            <h3>Outgoing</h3>
-            <ul id="contentOutgoing"></ul>
-          </section>
-          <section class="content-meta-section">
-            <h3>Backlinks</h3>
-            <ul id="contentIncoming"></ul>
-          </section>
-        </div>
-        <pre id="contentBody" class="note-content"></pre>
-      </article>
-    </dialog>
     <script src="/app.js"></script>
   </body>
 </html>`;

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))
 }
@@ -866,10 +891,11 @@ const linkedNodes = (node) => {
 }
 
 const openContentDialog = () => {
-  const dialog = elements.contentDialog
-  if (!dialog.open) {
-    dialog.show()
-  }
+  elements.contentDialog.hidden = false
+}
+
+const closeContentDialog = () => {
+  elements.contentDialog.hidden = true
 }
 
 const loadNodeDetails = async (nodeId) => {
@@ -1282,6 +1308,10 @@ const setupInput = () => {
   })
 
   window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !elements.contentDialog.hidden) {
+      closeContentDialog()
+      return
+    }
     if (event.key === '+') {
       zoomAtPoint(state.viewport.width / 2, state.viewport.height / 2, 1.06)
       return
@@ -1323,12 +1353,12 @@ const setupControls = () => {
   })
 
   elements.contentClose.addEventListener('click', () => {
-    elements.contentDialog.close()
+    closeContentDialog()
   })
 
   elements.contentDialog.addEventListener('click', (event) => {
     if (event.target === elements.contentDialog) {
-      elements.contentDialog.close()
+      closeContentDialog()
     }
   })
 

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