@andespindola/brainlink 0.1.0-beta.109 → 0.1.0-beta.110

package/README.md

@@ -604,6 +604,7 @@ The graph UI shows:
 - hierarchical hot-path optimizations reduce per-frame allocations and repeated scans during layered cluster expansion and edge projection
 - hierarchical edge projection now caches hub membership and node-to-cluster resolution per frame to keep large recursive subgraph rendering smooth during continuous zoom and pan
 - hierarchical projection now uses stronger perspective yaw/pitch and depth-based render ordering so layered subgraphs read as a true 3D field instead of a flat expansion
+- node rendering also applies depth projection cues on large visible sets (position, scale, opacity and edge depth weighting) so the graph keeps 3D perception when leaving cluster-only LOD layers
 - WebGL node and edge acceleration when supported, falling back to Canvas 2D without changing graph behavior
 - compact macro-to-micro density progression so reset keeps the graph mass oriented and zoom-in separates local neighborhoods progressively
 - graph camera treats hub-centered navigation as structural only when the hub is dominant; diffuse stress graphs reset and zoom around the full graph mass

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

@@ -41,6 +41,16 @@ const ecosystemDepthRadialGain = 0.09
 const ecosystemDepthOrbitalMaxOffset = 160
 const ecosystemDepthMinScale = 0.24
 const ecosystemDepthOpacityFloor = 0.2
+const graphDepthNear = 40
+const graphDepthFar = 560
+const graphDepthPerspective = 760
+const graphDepthYaw = 0.2
+const graphDepthPitch = 0.12
+const graphDepthRadialGain = 0.08
+const graphDepthMinScale = 0.58
+const graphDepthOpacityFloor = 0.42
+const graphDepthEdgeOpacityFloor = 0.24
+const graphDepthProjectionNodeThreshold = 120
 const zoomRecoveryGuardMs = 4200
 const zoomCapTargetViewportShare = 0.72
 const meshEdgeScaleThreshold = 0.09
@@ -67,6 +77,7 @@ const state = {
   renderEdges: [],
   renderClusters: [],
   renderClusterEdges: [],
+  renderNodeDepthProjectionById: new Map(),
   nodeDegrees: new Map(),
   selected: null,
   hovered: null,
@@ -1778,12 +1789,29 @@ const edgeOpacityForScale = (edge, scale) => {
   return 0.46
 }
 
+const edgeDepthOpacity = edge => {
+  if (!shouldProjectRenderNodesInDepth()) {
+    return 1
+  }
+  return Math.max(
+    graphDepthEdgeOpacityFloor,
+    Math.min(nodeRenderOpacity(edge.sourceNode), nodeRenderOpacity(edge.targetNode))
+  )
+}
+
+const edgeDepthScale = edge => {
+  if (!shouldProjectRenderNodesInDepth()) {
+    return 1
+  }
+  return Math.max(0.62, Math.min(1.18, Math.min(nodeRenderScale(edge.sourceNode), nodeRenderScale(edge.targetNode))))
+}
+
 const edgeStrokeFor = (edge, selectedEdge) => {
   if (selectedEdge) {
     return graphTheme.edgeActive
   }
 
-  const opacity = edgeOpacityForScale(edge, state.transform.scale)
+  const opacity = edgeOpacityForScale(edge, state.transform.scale) * edgeDepthOpacity(edge)
   return edge.inferred
     ? 'rgba(203, 213, 225, ' + opacity + ')'
     : 'rgba(153, 165, 181, ' + opacity + ')'
@@ -1791,17 +1819,19 @@ const edgeStrokeFor = (edge, selectedEdge) => {
 
 const edgeWidthFor = (edge, selectedEdge) => {
   if (edge.inferred) {
-    return selectedEdge ? 1.22 : 0.84
+    const width = selectedEdge ? 1.22 : 0.84
+    return width * edgeDepthScale(edge)
   }
 
-  return (selectedEdge ? 1.9 : 1.05) + Math.min(edgeWeight(edge) - 1, 8) * 0.24
+  const width = (selectedEdge ? 1.9 : 1.05) + Math.min(edgeWeight(edge) - 1, 8) * 0.24
+  return width * edgeDepthScale(edge)
 }
 
 const drawGraphEdge = (edge) => {
   const selectedEdge = state.selected && (edge.source === state.selected.id || edge.target === state.selected.id)
   ctx.beginPath()
-  ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
-  ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
+  ctx.moveTo(nodeRenderX(edge.sourceNode), nodeRenderY(edge.sourceNode))
+  ctx.lineTo(nodeRenderX(edge.targetNode), nodeRenderY(edge.targetNode))
   ctx.strokeStyle = edgeStrokeFor(edge, selectedEdge)
   ctx.lineWidth = edgeWidthFor(edge, selectedEdge)
   ctx.stroke()
@@ -1815,8 +1845,8 @@ const drawEdgeBatch = (edges, options) => {
   ctx.beginPath()
   for (let index = 0; index < edges.length; index += 1) {
     const edge = edges[index]
-    ctx.moveTo(edge.sourceNode.x, edge.sourceNode.y)
-    ctx.lineTo(edge.targetNode.x, edge.targetNode.y)
+    ctx.moveTo(nodeRenderX(edge.sourceNode), nodeRenderY(edge.sourceNode))
+    ctx.lineTo(nodeRenderX(edge.targetNode), nodeRenderY(edge.targetNode))
   }
   ctx.strokeStyle = options.strokeStyle
   ctx.lineWidth = options.lineWidth
@@ -1871,15 +1901,19 @@ const shouldDrawNodeLabels = (node, isSelected, isHovered) =>
   (state.nodes.length <= largeGraphNodeThreshold && (state.transform.scale > 1.18 || state.nodes.length <= 25))
 
 const drawSingleNode = (node, options = { drawLabel: true }) => {
-  const radius = nodeRadius(node)
+  const radius = nodeRadius(node) * nodeRenderScale(node)
+  const x = nodeRenderX(node)
+  const y = nodeRenderY(node)
+  const opacity = nodeRenderOpacity(node)
   const isSelected = state.selected?.id === node.id
   const isHovered = state.hovered?.id === node.id
+  ctx.globalAlpha = opacity
   ctx.beginPath()
-  ctx.arc(node.x, node.y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
+  ctx.arc(x, y, radius + (isSelected ? 7 : isHovered ? 4 : 0), 0, Math.PI * 2)
   ctx.fillStyle = isSelected || isHovered ? graphTheme.nodeHaloActive : graphTheme.nodeHalo
   ctx.fill()
   ctx.beginPath()
-  ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
+  ctx.arc(x, y, radius, 0, Math.PI * 2)
   ctx.fillStyle = isSelected ? graphTheme.nodeSelected : isHovered ? graphTheme.nodeHover : graphTheme.node
   ctx.fill()
   ctx.lineWidth = isSelected ? 2.6 : 1.5
@@ -1887,12 +1921,14 @@ const drawSingleNode = (node, options = { drawLabel: true }) => {
   ctx.stroke()
 
   if (options.drawLabel && shouldDrawNodeLabels(node, isSelected, isHovered)) {
+    ctx.globalAlpha = Math.max(0.58, opacity)
     ctx.fillStyle = graphTheme.label
     ctx.font = '12px Inter, system-ui, sans-serif'
     ctx.textAlign = 'center'
     ctx.textBaseline = 'top'
-    ctx.fillText(node.title.slice(0, 34), node.x, node.y + radius + 8)
+    ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
   }
+  ctx.globalAlpha = 1
 }
 
 const drawNodeBatch = (nodes) => {
@@ -1902,28 +1938,36 @@ const drawNodeBatch = (nodes) => {
 
   const drawHalos = state.renderNodes.length <= 1200 || state.transform.scale >= 0.45
   if (drawHalos) {
-    ctx.beginPath()
     for (let index = 0; index < nodes.length; index += 1) {
       const node = nodes[index]
-      ctx.moveTo(node.x + nodeRadius(node) + 3, node.y)
-      ctx.arc(node.x, node.y, nodeRadius(node) + 3, 0, Math.PI * 2)
+      const radius = nodeRadius(node) * nodeRenderScale(node)
+      const x = nodeRenderX(node)
+      const y = nodeRenderY(node)
+      ctx.globalAlpha = Math.max(0.2, nodeRenderOpacity(node) * 0.5)
+      ctx.beginPath()
+      ctx.arc(x, y, radius + 3, 0, Math.PI * 2)
+      ctx.fillStyle = graphTheme.nodeHalo
+      ctx.fill()
     }
-    ctx.fillStyle = graphTheme.nodeHalo
-    ctx.fill()
+    ctx.globalAlpha = 1
   }
 
-  ctx.beginPath()
   for (let index = 0; index < nodes.length; index += 1) {
     const node = nodes[index]
-    const radius = nodeRadius(node)
-    ctx.moveTo(node.x + radius, node.y)
-    ctx.arc(node.x, node.y, radius, 0, Math.PI * 2)
+    const radius = nodeRadius(node) * nodeRenderScale(node)
+    const x = nodeRenderX(node)
+    const y = nodeRenderY(node)
+    const opacity = nodeRenderOpacity(node)
+    ctx.globalAlpha = opacity
+    ctx.beginPath()
+    ctx.arc(x, y, radius, 0, Math.PI * 2)
+    ctx.fillStyle = graphTheme.node
+    ctx.fill()
+    ctx.lineWidth = 1.25
+    ctx.strokeStyle = graphTheme.nodeStroke
+    ctx.stroke()
   }
-  ctx.fillStyle = graphTheme.node
-  ctx.fill()
-  ctx.lineWidth = 1.25
-  ctx.strokeStyle = graphTheme.nodeStroke
-  ctx.stroke()
+  ctx.globalAlpha = 1
 }
 
 const drawGraphNodes = () => {
@@ -1942,6 +1986,10 @@ const drawGraphNodes = () => {
     }
   }
 
+  if (shouldProjectRenderNodesInDepth()) {
+    regularNodes.sort((left, right) => nodeRenderDepth(right) - nodeRenderDepth(left))
+  }
+
   drawNodeBatch(regularNodes)
 
   if (state.transform.scale >= 0.62 && state.renderNodes.length <= 1200) {
@@ -1951,8 +1999,13 @@ const drawGraphNodes = () => {
     ctx.textBaseline = 'top'
     for (let index = 0; index < regularNodes.length; index += 1) {
       const node = regularNodes[index]
-      ctx.fillText(node.title.slice(0, 34), node.x, node.y + nodeRadius(node) + 8)
+      const x = nodeRenderX(node)
+      const y = nodeRenderY(node)
+      const radius = nodeRadius(node) * nodeRenderScale(node)
+      ctx.globalAlpha = Math.max(0.6, nodeRenderOpacity(node))
+      ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
     }
+    ctx.globalAlpha = 1
   }
 
   priorityNodes.forEach(node => drawSingleNode(node))
@@ -2003,12 +2056,17 @@ const drawGraphLabels = nodes => {
   ctx.textBaseline = 'top'
   for (let index = 0; index < nodes.length; index += 1) {
     const node = nodes[index]
-    ctx.fillText(node.title.slice(0, 34), node.x, node.y + nodeRadius(node) + 8)
+    const x = nodeRenderX(node)
+    const y = nodeRenderY(node)
+    const radius = nodeRadius(node) * nodeRenderScale(node)
+    ctx.globalAlpha = Math.max(0.6, nodeRenderOpacity(node))
+    ctx.fillText(node.title.slice(0, 34), x, y + radius + 8)
   }
+  ctx.globalAlpha = 1
 }
 
 const drawAcceleratedGraph = (width, height, drawEdges) => {
-  if (!webGlRenderer || state.renderClusters.length > 0) {
+  if (!webGlRenderer || state.renderClusters.length > 0 || shouldProjectRenderNodesInDepth()) {
     return false
   }
 
@@ -2968,8 +3026,10 @@ const hitNode = point => {
   const nodes = state.renderNodes
   for (let index = nodes.length - 1; index >= 0; index -= 1) {
     const node = nodes[index]
-    const radius = nodeRadius(node)
-    if (Math.hypot(point.x - node.x, point.y - node.y) <= radius + 5) return node
+    const radius = nodeRadius(node) * nodeRenderScale(node)
+    const x = nodeRenderX(node)
+    const y = nodeRenderY(node)
+    if (Math.hypot(point.x - x, point.y - y) <= radius + 5) return node
   }
   return null
 }
@@ -3005,6 +3065,86 @@ const clusterOpacity = cluster =>
 const clusterDepth = cluster => Number.isFinite(cluster.depth) ? cluster.depth : ecosystemDepthNear
 const clusterDepthScale = cluster => Number.isFinite(cluster.depthScale) ? cluster.depthScale : 1
 
+const shouldProjectRenderNodesInDepth = () =>
+  state.renderClusters.length === 0 &&
+  state.renderNodes.length >= graphDepthProjectionNodeThreshold
+
+const nodeProjectionAnchor = () => {
+  const hub = state.primaryHub
+  if (hub) {
+    return { x: hub.x, y: hub.y }
+  }
+  if (state.macroRepresentative) {
+    return { x: state.macroRepresentative.x, y: state.macroRepresentative.y }
+  }
+  return ecosystemFocusPoint()
+}
+
+const projectGraphNodePoint = (x, y, depth, anchor) => {
+  const safeDepth = Math.max(0, depth)
+  const dx = x - anchor.x
+  const dy = y - anchor.y
+  const yawSin = Math.sin(graphDepthYaw)
+  const yawCos = Math.cos(graphDepthYaw)
+  const pitchSin = Math.sin(graphDepthPitch)
+  const pitchCos = Math.cos(graphDepthPitch)
+  const rotatedX = dx * yawCos + safeDepth * yawSin
+  const rotatedZ = Math.max(0, safeDepth * yawCos - dx * yawSin)
+  const rotatedY = dy * pitchCos - rotatedZ * pitchSin
+  const projectedDepth = Math.max(0, rotatedZ + Math.max(0, dy * pitchSin))
+  const factor = graphDepthPerspective / (graphDepthPerspective + projectedDepth)
+  return {
+    x: anchor.x + rotatedX * factor,
+    y: anchor.y + rotatedY * factor,
+    depth: projectedDepth,
+    scale: graphDepthMinScale + (1 - graphDepthMinScale) * factor
+  }
+}
+
+const refreshRenderNodeDepthProjection = () => {
+  if (!shouldProjectRenderNodesInDepth()) {
+    state.renderNodeDepthProjectionById = new Map()
+    return
+  }
+
+  const anchor = nodeProjectionAnchor()
+  let maxDistance = 1
+  for (let index = 0; index < state.renderNodes.length; index += 1) {
+    const node = state.renderNodes[index]
+    const distance = Math.hypot(node.x - anchor.x, node.y - anchor.y)
+    if (distance > maxDistance) {
+      maxDistance = distance
+    }
+  }
+
+  const projectionById = new Map()
+  for (let index = 0; index < state.renderNodes.length; index += 1) {
+    const node = state.renderNodes[index]
+    const radialDistance = Math.hypot(node.x - anchor.x, node.y - anchor.y)
+    const radialRatio = radialDistance / maxDistance
+    const degree = state.nodeDegrees.get(node.id) ?? 0
+    const degreeLift = Math.min(60, degree * 2.2)
+    const radialDepth = radialRatio * graphDepthFar * graphDepthRadialGain
+    const depth = Math.max(0, graphDepthNear + radialDepth - degreeLift)
+    const projected = projectGraphNodePoint(node.x, node.y, depth, anchor)
+    const opacity = Math.max(graphDepthOpacityFloor, Math.min(1, projected.scale * 1.08))
+    projectionById.set(node.id, {
+      x: projected.x,
+      y: projected.y,
+      depth: projected.depth,
+      scale: projected.scale,
+      opacity
+    })
+  }
+  state.renderNodeDepthProjectionById = projectionById
+}
+
+const projectedNode = node => state.renderNodeDepthProjectionById.get(node.id) ?? null
+const nodeRenderX = node => projectedNode(node)?.x ?? node.x
+const nodeRenderY = node => projectedNode(node)?.y ?? node.y
+const nodeRenderDepth = node => projectedNode(node)?.depth ?? graphDepthNear
+const nodeRenderScale = node => projectedNode(node)?.scale ?? 1
+const nodeRenderOpacity = node => projectedNode(node)?.opacity ?? 1
 const worldViewportBounds = () => {
   const width = Math.max(state.viewport.width, 320)
   const height = Math.max(state.viewport.height, 320)
@@ -3389,6 +3529,7 @@ const render = now => {
 
   computeRenderVisibility()
   tick(delta, now)
+  refreshRenderNodeDepthProjection()
   const hasVisibleNodeOnScreen = state.renderNodes.some((node) => isNodeVisibleOnScreen(node, width, height))
   const manualZoomGuardActive = now - state.lastManualZoomAt < zoomRecoveryGuardMs
   const allowViewportAutoRecovery = state.nodes.length <= massiveGraphNodeThreshold

package/package.json

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