@andespindola/brainlink 0.1.0-beta.123 → 0.1.0-beta.124

package/README.md

@@ -606,7 +606,7 @@ The graph UI shows:
 - graph rendering safeguards (batched canvas drawing across graph sizes, edge draw caps, lower redraw rate, zoom-aware interaction)
 - adaptive CPU safeguards for large graphs: idle frame pacing, throttled background physics updates and cached viewport dimensions to reduce redraw/layout overhead while preserving interaction responsiveness
 - WebGL node and edge acceleration when supported, falling back to Canvas 2D without changing graph behavior
-- large graph LOD keeps a recursive graph-of-graphs mesh model: zoom-out shows one level capped at 1000 group nodes, zoom-in expands the framed node into its child graph capped at 1000 nodes, micro view renders only that focused subgraph, and zoom-out restores sibling groups
+- large graph LOD keeps a recursive graph-of-graphs mesh model: zoom-out shows one level capped at 1000 group nodes, zoom-in expands the framed node into its child graph capped at 1000 nodes, micro view renders only that focused subgraph in a local frame anchored to the group node, and zoom-out restores sibling groups
 
 The server indexes before starting by default. Use `--no-index` to skip that step:
 

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

@@ -11,7 +11,6 @@ const massiveOverviewScaleThreshold = 0.065
 const massiveSegmentedScaleThreshold = 0.45
 const massiveSegmentRepresentativeBudget = 760
 const massiveAutoFitMacroScale = 0.018
-const hierarchyGroupScaleThreshold = 0.62
 const hierarchyExpansionStartScale = 0.18
 const hierarchyMicroEnterCoverage = 0.72
 const hierarchyMicroExitCoverage = 0.52
@@ -1213,6 +1212,11 @@ const groupRenderRadius = group => {
   return 10 + Math.min(Math.log2(childCount + 1) * 4.2, 22)
 }
 
+const childGraphRenderRadius = group => {
+  const childCount = Math.max(group.nodeIds.length, group.childGroupIds.length, 1)
+  return Math.max(420, Math.min(1800, Math.sqrt(childCount) * 24))
+}
+
 const createGroupRenderNode = group => ({
   id: groupRenderNodeId(group),
   groupId: group.id,
@@ -1229,13 +1233,55 @@ const createGroupRenderNode = group => ({
   radius: groupRenderRadius(group)
 })
 
-const interpolateNodeFromGroup = (node, group, progress) => ({
-  ...node,
-  x: group.x + (node.x - group.x) * progress,
-  y: group.y + (node.y - group.y) * progress,
-  vx: 0,
-  vy: 0
-})
+const localGraphBounds = nodes => {
+  if (nodes.length === 0) {
+    return { centerX: 0, centerY: 0, radius: 1 }
+  }
+
+  const bounds = nodes.reduce(
+    (current, node) => ({
+      minX: Math.min(current.minX, node.x),
+      maxX: Math.max(current.maxX, node.x),
+      minY: Math.min(current.minY, node.y),
+      maxY: Math.max(current.maxY, node.y)
+    }),
+    {
+      minX: Number.POSITIVE_INFINITY,
+      maxX: Number.NEGATIVE_INFINITY,
+      minY: Number.POSITIVE_INFINITY,
+      maxY: Number.NEGATIVE_INFINITY
+    }
+  )
+  const centerX = (bounds.minX + bounds.maxX) / 2
+  const centerY = (bounds.minY + bounds.maxY) / 2
+  const radius = nodes.reduce(
+    (largest, node) => Math.max(largest, Math.hypot(node.x - centerX, node.y - centerY)),
+    1
+  )
+
+  return { centerX, centerY, radius }
+}
+
+const projectNodeIntoGroupGraph = (node, group, bounds) => {
+  const targetRadius = childGraphRenderRadius(group)
+  const scale = targetRadius / Math.max(bounds.radius, 1)
+
+  return {
+    x: group.x + (node.x - bounds.centerX) * scale,
+    y: group.y + (node.y - bounds.centerY) * scale
+  }
+}
+
+const interpolateNodeFromGroup = (node, group, bounds, progress) => {
+  const projected = projectNodeIntoGroupGraph(node, group, bounds)
+  return {
+    ...node,
+    x: group.x + (projected.x - group.x) * progress,
+    y: group.y + (projected.y - group.y) * progress,
+    vx: 0,
+    vy: 0
+  }
+}
 
 const parentHierarchyGroups = () =>
   state.groups.filter(group => group.parentId === null)
@@ -1257,7 +1303,7 @@ const groupViewportCoverage = (group, viewport) => {
   const centerX = (viewport.minX + viewport.maxX) / 2
   const centerY = (viewport.minY + viewport.maxY) / 2
   const centerDistance = Math.hypot(group.x - centerX, group.y - centerY)
-  const fitCoverage = Math.min(1, group.radius / Math.max(viewportRadius, 1))
+  const fitCoverage = Math.min(1, childGraphRenderRadius(group) / Math.max(viewportRadius, 1))
   const centerCoverage = 1 - Math.min(1, centerDistance / Math.max(viewportRadius, 1))
 
   return fitCoverage * 0.72 + centerCoverage * 0.28
@@ -1352,7 +1398,7 @@ const groupEdgesForRenderedGroups = (groupNodes) => {
 }
 
 const computeHierarchyRenderVisibility = (viewport) => {
-  if (state.groups.length === 0 || state.visibleNodes.length <= 1000 || state.transform.scale >= hierarchyGroupScaleThreshold) {
+  if (state.groups.length === 0 || state.visibleNodes.length <= 1000) {
     state.hierarchyFocusGroupId = null
     return false
   }
@@ -1376,11 +1422,13 @@ const computeHierarchyRenderVisibility = (viewport) => {
   }
 
   const focusIds = new Set(focus.nodeIds)
+  const rawChildNodes = state.visibleNodes.filter(node => focusIds.has(node.id))
+  const childBounds = localGraphBounds(rawChildNodes)
   const childLimit = Math.max(160, Math.min(zoomedMassiveRenderNodeBudget, Math.floor(renderNodeBudget * progress * 2.4)))
   const childNodes = selectStableSampleNodes(
-    state.visibleNodes.filter(node => focusIds.has(node.id)),
+    rawChildNodes,
     childLimit
-  ).map(node => interpolateNodeFromGroup(node, focus, progress))
+  ).map(node => interpolateNodeFromGroup(node, focus, childBounds, progress))
   const childIds = new Set(childNodes.map(node => node.id))
   const childById = new Map(childNodes.map(node => [node.id, node]))
   const isMicroView = progress >= 0.72

package/dist/application/get-graph-view.js

@@ -16,10 +16,14 @@ const groupCoverage = (group, input) => {
     const centerX = input.x + input.width / 2;
     const centerY = input.y + input.height / 2;
     const centerDistance = Math.hypot(group.x - centerX, group.y - centerY);
-    const fitCoverage = Math.min(1, group.radius / Math.max(viewportRadius, 1));
+    const fitCoverage = Math.min(1, childGraphRenderRadius(group) / Math.max(viewportRadius, 1));
     const centerCoverage = 1 - Math.min(1, centerDistance / Math.max(viewportRadius, 1));
     return fitCoverage * 0.72 + centerCoverage * 0.28;
 };
+const childGraphRenderRadius = (group) => {
+    const childCount = Math.max(group.nodeIds.length, group.childGroupIds.length, 1);
+    return Math.max(420, Math.min(1800, Math.sqrt(childCount) * 24));
+};
 const groupNode = (group) => [
     `group:${group.id}`,
     group.title,
@@ -38,6 +42,34 @@ const realNode = (node) => [
     node.segment,
     'node'
 ];
+const graphBounds = (nodes) => {
+    if (nodes.length === 0) {
+        return { centerX: 0, centerY: 0, radius: 1 };
+    }
+    const bounds = nodes.reduce((current, node) => ({
+        minX: Math.min(current.minX, node.x),
+        maxX: Math.max(current.maxX, node.x),
+        minY: Math.min(current.minY, node.y),
+        maxY: Math.max(current.maxY, node.y)
+    }), {
+        minX: Number.POSITIVE_INFINITY,
+        maxX: Number.NEGATIVE_INFINITY,
+        minY: Number.POSITIVE_INFINITY,
+        maxY: Number.NEGATIVE_INFINITY
+    });
+    const centerX = (bounds.minX + bounds.maxX) / 2;
+    const centerY = (bounds.minY + bounds.maxY) / 2;
+    const radius = nodes.reduce((largest, node) => Math.max(largest, Math.hypot(node.x - centerX, node.y - centerY)), 1);
+    return { centerX, centerY, radius };
+};
+const projectNodeIntoGroupGraph = (node, group, bounds) => {
+    const scale = childGraphRenderRadius(group) / Math.max(bounds.radius, 1);
+    return {
+        ...node,
+        x: group.x + (node.x - bounds.centerX) * scale,
+        y: group.y + (node.y - bounds.centerY) * scale
+    };
+};
 const descendants = (group, groupById) => group.nodeIds.length > 0
     ? group.nodeIds
     : group.childGroupIds.flatMap((childId) => {
@@ -120,9 +152,18 @@ export const getGraphView = async (vaultPath, input) => {
         .sort((left, right) => right.coverage - left.coverage)[0];
     if (focused && input.scale >= macroScale && focused.coverage >= microCoverage) {
         const nodeIds = new Set(focused.group.nodeIds);
-        const nodes = layout.nodes
-            .filter((node) => nodeIds.has(node.id) && inViewport(node, input))
+        const projectedNodes = layout.nodes
+            .filter((node) => nodeIds.has(node.id));
+        const bounds = graphBounds(projectedNodes);
+        const nodesInViewport = projectedNodes
+            .map((node) => projectNodeIntoGroupGraph(node, focused.group, bounds))
+            .filter((node) => inViewport(node, input))
             .slice(0, nodeLimit);
+        const nodes = nodesInViewport.length > 0
+            ? nodesInViewport
+            : projectedNodes
+                .slice(0, nodeLimit)
+                .map((node) => projectNodeIntoGroupGraph(node, focused.group, bounds));
         const visibleNodeIds = new Set(nodes.map((node) => node.id));
         const viewNodes = nodes.map(realNode);
         return {

package/docs/AGENT_USAGE.md

@@ -607,7 +607,7 @@ Without `--vault`, the graph UI serves `$HOME/.brainlink/vault`.
 
 The frontend includes an agent selector that shows only the agent id. Selecting an agent calls the same read APIs with `agent=<agent-id>` and renders that namespace instead of merging every agent into one graph.
 
-Graph navigation controls include zoom in, zoom out, fit visible nodes and reset-to-fit-all nodes. Mouse wheel zoom (including `cmd+scroll` and `ctrl+scroll`) is anchored to the cursor. Keyboard shortcuts are `+` (zoom in), `-` (zoom out) and `0` (reset fit). Double-click on canvas zooms in at cursor position. Totals for notes, links and tags stay visible as floating metrics under the Brainlink title, and node details open on click in a modal (tags, outgoing links, backlinks and Markdown content). Vaults above 1000 notes also expose stable hierarchy mesh groups of up to 1000 direct nodes, with recursive parent groups when a level exceeds 1000 groups; zoom-out renders those groups as normal mesh graph nodes, zoom-in expands a group only after it is framed in the viewport, and micro view renders only the focused subgraph until zoom-out restores sibling groups.
+Graph navigation controls include zoom in, zoom out, fit visible nodes and reset-to-fit-all nodes. Mouse wheel zoom (including `cmd+scroll` and `ctrl+scroll`) is anchored to the cursor. Keyboard shortcuts are `+` (zoom in), `-` (zoom out) and `0` (reset fit). Double-click on canvas zooms in at cursor position. Totals for notes, links and tags stay visible as floating metrics under the Brainlink title, and node details open on click in a modal (tags, outgoing links, backlinks and Markdown content). Vaults above 1000 notes also expose stable hierarchy mesh groups of up to 1000 direct nodes, with recursive parent groups when a level exceeds 1000 groups; zoom-out renders those groups as normal mesh graph nodes, zoom-in expands a group only after it is framed in the viewport, and micro view renders only the focused subgraph in a local frame anchored to the group node until zoom-out restores sibling groups.
 During graph filtering, Brainlink keeps hub context nodes visible (`Memory Hub`/`MOC`/high-degree fallback) so filtered views still show relationship anchors.
 
 The command reindexes by default, then serves:

package/package.json

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