@andespindola/brainlink 0.1.0-beta.126 → 0.1.0-beta.128

package/README.md

@@ -84,11 +84,11 @@ Legacy `.jsonl.gz` packs are upgraded to `.blpk` automatically on first search/c
 - Graph renderer optimized for large datasets with viewport-driven node culling and edge lookup by visible nodes.
 - Canvas graph rendering uses the same batched node and edge pipeline for every graph size, reducing per-frame draw calls while keeping selected and hovered items highlighted.
 - WebGL acceleration is used when available for dense node and edge drawing, with Canvas 2D preserved as the interaction and fallback layer.
-- Graph rendering keeps the flat node scene and adds stable hierarchical mesh groups for vaults above 1000 notes, with every visible graph level capped at 1000 nodes, the macro level projected as its own graph, and recursive parent groups when a level itself exceeds 1000 groups.
+- Graph rendering keeps the flat node scene and adds stable hierarchical mesh groups for vaults above 1000 notes, with every visible graph level filled toward 1000 nodes, each group capped at 1000 child nodes, and recursive parent groups when a level itself exceeds 1000 groups.
 - Large graph layout API automatically uses compact payload encoding with link-coverage-aware edge selection to reduce initial client load without hiding major relationships.
 - Large-segment layout spacing now grows logarithmically to keep initial visual density consistent between medium and very large vaults (for example, ~1k vs ~50k notes).
 - Graph coordinates are visually compacted across graph sizes so reset starts from a stable fitted scene and zoom-in progressively reveals local detail.
-- Zoomed-out graph LOD renders hierarchy groups as normal mesh graph nodes and expands a group only after it is framed in the viewport, progressively hiding sibling groups in micro view.
+- Zoomed-out graph LOD renders hierarchy groups as normal mesh graph nodes and expands a group from the focused node's current viewport position only after it is framed, progressively hiding sibling groups in micro view.
 - Graph reset fits the full graph scene instead of starting in a separate macro overview mode.
 - Graph filtering runs in a dedicated browser worker to keep the UI thread responsive during heavy datasets.
 - Edge rendering budgets adapt to zoom level to prevent frame spikes on large graph panoramas.
@@ -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 projected graph level capped at 1000 group nodes, zoom-in expands the framed node into its own radial child graph capped at 1000 nodes, micro view renders only that focused subgraph with dense-node label suppression in a local frame anchored to the group node, and zoom-out restores sibling groups
+- large graph LOD keeps a recursive graph-of-graphs mesh model: zoom-out fills the projected macro level toward 1000 lightweight group nodes, zoom-in expands the framed node from its current viewport position into its own radial child graph capped at 1000 nodes, micro view renders only that focused subgraph with dense-node label suppression in a local frame anchored to the rendered 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

@@ -23,8 +23,8 @@ const transformCoordinateLimit = 20_000_000
 const hoverHitTestIntervalMs = 64
 const zoomRecoveryGuardMs = 4200
 const meshEdgeScaleThreshold = 0.09
-const meshEdgeMinBudget = 140
-const meshEdgeMaxBudget = 1400
+const meshEdgeMinBudget = 90
+const meshEdgeMaxBudget = 850
 const dragNeighborhoodMaxAffected = 180
 const dragSettleRounds = 3
 const wheelZoomExponent = 0.0009
@@ -1281,9 +1281,9 @@ const arrangeGraphLevelNodes = (nodes, radiusForNode = () => 1) => {
   return arranged
 }
 
-const arrangeChildGraphNodes = (nodes, group) => {
+const arrangeChildGraphNodes = (nodes, group, origin = group) => {
   if (nodes.length <= 1) {
-    return nodes.map(node => ({ ...node, x: group.x, y: group.y }))
+    return nodes.map(node => ({ ...node, x: origin.x, y: origin.y }))
   }
 
   const targetRadius = childGraphRenderRadius(group)
@@ -1303,7 +1303,7 @@ const arrangeChildGraphNodes = (nodes, group) => {
     })
   const goldenAngle = Math.PI * (3 - Math.sqrt(5))
   const arranged = centerNode
-    ? [{ ...centerNode, x: group.x, y: group.y }]
+    ? [{ ...centerNode, x: origin.x, y: origin.y }]
     : []
 
   outerNodes.forEach((node, index) => {
@@ -1311,19 +1311,19 @@ const arrangeChildGraphNodes = (nodes, group) => {
     const angle = index * goldenAngle
     arranged.push({
       ...node,
-      x: group.x + Math.cos(angle) * ringRadius,
-      y: group.y + Math.sin(angle) * ringRadius
+      x: origin.x + Math.cos(angle) * ringRadius,
+      y: origin.y + Math.sin(angle) * ringRadius
     })
   })
 
   return arranged
 }
 
-const interpolateNodeFromGroup = (node, group, progress) => {
+const interpolateNodeFromGroup = (node, origin, progress) => {
   return {
     ...node,
-    x: group.x + (node.x - group.x) * progress,
-    y: group.y + (node.y - group.y) * progress,
+    x: origin.x + (node.x - origin.x) * progress,
+    y: origin.y + (node.y - origin.y) * progress,
     vx: 0,
     vy: 0
   }
@@ -1360,6 +1360,33 @@ const groupWithCoverage = (group, viewport) => ({
   coverage: groupViewportCoverage(group, viewport)
 })
 
+const distanceToViewportCenter = (item, viewport) => {
+  const centerX = (viewport.minX + viewport.maxX) / 2
+  const centerY = (viewport.minY + viewport.maxY) / 2
+  return Math.hypot(item.x - centerX, item.y - centerY)
+}
+
+const selectViewportItemsWithFill = (items, viewport, limit = renderNodeBudget) => {
+  const visible = items.filter(item =>
+    item.x + item.radius >= viewport.minX &&
+    item.x - item.radius <= viewport.maxX &&
+    item.y + item.radius >= viewport.minY &&
+    item.y - item.radius <= viewport.maxY
+  )
+
+  if (visible.length >= limit) {
+    return visible.slice(0, limit)
+  }
+
+  const selectedIds = new Set(visible.map(item => item.id))
+  const fill = items
+    .filter(item => !selectedIds.has(item.id))
+    .sort((left, right) => distanceToViewportCenter(left, viewport) - distanceToViewportCenter(right, viewport) || left.id.localeCompare(right.id))
+    .slice(0, Math.max(0, limit - visible.length))
+
+  return visible.concat(fill)
+}
+
 const updateHierarchyFocusGroup = (groups, viewport) => {
   const current = state.hierarchyFocusGroupId
     ? groups.find(group => group.id === state.hierarchyFocusGroupId) ?? null
@@ -1451,14 +1478,7 @@ const computeHierarchyRenderVisibility = (viewport) => {
     return false
   }
 
-  const groups = hierarchyGroupsForScale()
-    .filter(group =>
-      group.x + group.radius >= viewport.minX &&
-      group.x - group.radius <= viewport.maxX &&
-      group.y + group.radius >= viewport.minY &&
-      group.y - group.radius <= viewport.maxY
-    )
-    .slice(0, renderNodeBudget)
+  const groups = selectViewportItemsWithFill(hierarchyGroupsForScale(), viewport, renderNodeBudget)
   const focus = updateHierarchyFocusGroup(groups, viewport)
   const progress = focus ? hierarchyViewportProgress(focus, viewport) : 0
   const groupNodes = groups.map(createGroupRenderNode)
@@ -1472,10 +1492,11 @@ const computeHierarchyRenderVisibility = (viewport) => {
   const focusIds = new Set(focus.nodeIds)
   const rawChildNodes = state.visibleNodes.filter(node => focusIds.has(node.id))
   const childLimit = Math.max(90, Math.min(renderNodeBudget, Math.floor(renderNodeBudget * progress)))
+  const focusRenderNode = groupNodes.find(node => node.groupId === focus.id) ?? createGroupRenderNode(focus)
   const childNodes = selectStableSampleNodes(
-    arrangeChildGraphNodes(rawChildNodes, focus),
+    arrangeChildGraphNodes(rawChildNodes, focus, focusRenderNode),
     childLimit
-  ).map(node => interpolateNodeFromGroup(node, focus, progress))
+  ).map(node => interpolateNodeFromGroup(node, focusRenderNode, 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
@@ -1554,12 +1575,12 @@ const buildMeshEdgesForNodes = (nodes, existingEdges) => {
 
   const desiredBudget = Math.min(
     meshEdgeMaxBudget,
-    Math.max(meshEdgeMinBudget, Math.floor(edgeBudgetForCurrentFrame() * 0.62))
+    Math.max(meshEdgeMinBudget, Math.floor(edgeBudgetForCurrentFrame() * 0.36))
   )
   const perNodeNeighborCount =
-    state.transform.scale >= 1.05 ? 4
-      : state.transform.scale >= 0.62 ? 3
-        : 2
+    state.transform.scale >= 1.05 ? 3
+      : state.transform.scale >= 0.62 ? 2
+        : 1
   const cellSize = Math.max(120, 280 / Math.max(state.transform.scale, 0.0001))
   const maxDistance = 980
   const maxDistanceSquared = maxDistance * maxDistance

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

@@ -4,12 +4,13 @@ import { dirname, join } from 'node:path';
 import { createCauliflowerGraphLayout } from '../domain/graph-layout.js';
 import { indexStoragePath } from '../infrastructure/file-index.js';
 import { getGraphSummary } from './get-graph-summary.js';
+const graphLayoutVersion = 2;
 const graphLayoutCache = new Map();
 const graphLayoutStoragePath = (vaultPath, agentId) => join(vaultPath, '.brainlink', `graph-layout-${agentId?.replace(/[^a-zA-Z0-9_-]/g, '_') ?? 'all'}.json`);
 const readPersistedLayout = async (vaultPath, databaseSignature, agentId) => {
     try {
         const parsed = JSON.parse(await readFile(graphLayoutStoragePath(vaultPath, agentId), 'utf8'));
-        return parsed.databaseSignature === databaseSignature ? parsed : null;
+        return parsed.databaseSignature === databaseSignature && parsed.layoutVersion === graphLayoutVersion ? parsed : null;
     }
     catch {
         return null;
@@ -44,7 +45,7 @@ export const getGraphLayout = async (vaultPath, agentId) => {
     const databaseSignature = await readDatabaseSignature(vaultPath);
     const cacheKey = `${vaultPath}:${agentId ?? ''}`;
     const cached = graphLayoutCache.get(cacheKey);
-    if (cached?.databaseSignature === databaseSignature) {
+    if (cached?.databaseSignature === databaseSignature && cached.layoutVersion === graphLayoutVersion) {
         return {
             signature: cached.signature,
             layout: cached.layout
@@ -65,7 +66,7 @@ export const getGraphLayout = async (vaultPath, agentId) => {
         ...rawLayout,
         nodes: rawLayout.nodes.map((node) => ({ ...node, content: '' }))
     };
-    const nextCache = { databaseSignature, signature, layout };
+    const nextCache = { layoutVersion: graphLayoutVersion, databaseSignature, signature, layout };
     graphLayoutCache.set(cacheKey, nextCache);
     await writePersistedLayout(vaultPath, agentId, nextCache);
     return {

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

@@ -2,8 +2,8 @@ import { getGraphLayout } from './get-graph-layout.js';
 const macroScale = 0.24;
 const microCoverage = 0.72;
 const nodeLimit = 1000;
-const edgeLimit = 5000;
-const meshEdgeLimit = 2500;
+const edgeLimit = 3200;
+const meshEdgeLimit = 1200;
 const inViewport = (item, input) => {
     const radius = item.radius ?? 48;
     return (item.x + radius >= input.x &&
@@ -58,6 +58,23 @@ const arrangeGraphLevelGroups = (groups) => {
     });
     return arranged;
 };
+const distanceToViewportCenter = (item, input) => {
+    const centerX = input.x + input.width / 2;
+    const centerY = input.y + input.height / 2;
+    return Math.hypot(item.x - centerX, item.y - centerY);
+};
+const selectViewportItemsWithFill = (items, input, limit = nodeLimit) => {
+    const visible = items.filter((item) => inViewport(item, input));
+    if (visible.length >= limit) {
+        return visible.slice(0, limit);
+    }
+    const selectedIds = new Set(visible.map((item) => item.id));
+    const fill = items
+        .filter((item) => !selectedIds.has(item.id))
+        .sort((left, right) => distanceToViewportCenter(left, input) - distanceToViewportCenter(right, input) || left.id.localeCompare(right.id))
+        .slice(0, Math.max(0, limit - visible.length));
+    return visible.concat(fill);
+};
 const groupNode = (group) => [
     `group:${group.id}`,
     group.title,
@@ -195,7 +212,7 @@ export const getGraphView = async (vaultPath, input) => {
     }
     const rootGroups = arrangeGraphLevelGroups(groups.filter((group) => group.parentId === null));
     const leafGroups = arrangeGraphLevelGroups(groups.filter((group) => group.nodeIds.length > 0));
-    const visibleGroups = rootGroups.filter((group) => inViewport(group, input));
+    const visibleGroups = selectViewportItemsWithFill(rootGroups, input);
     const focused = leafGroups
         .filter((group) => group.nodeIds.length > 0 && inViewport(group, input))
         .map((group) => ({ group, coverage: groupCoverage(group, input) }))
@@ -222,7 +239,7 @@ export const getGraphView = async (vaultPath, input) => {
             }
         };
     }
-    const groupsToRender = (visibleGroups.length > 0 ? visibleGroups : rootGroups).slice(0, nodeLimit);
+    const groupsToRender = visibleGroups.slice(0, nodeLimit);
     const viewNodes = groupsToRender.map(groupNode);
     return {
         signature,

package/dist/domain/graph-layout.js

@@ -231,9 +231,13 @@ const chunkNodes = (nodes, degrees, groupNodeLimit = hierarchyGroupNodeLimit) =>
             return degreeDelta;
         return left.title.localeCompare(right.title);
     });
+    const groupCountTarget = Math.min(groupNodeLimit, sortedNodes.length);
+    const chunkSize = sortedNodes.length <= groupNodeLimit * groupNodeLimit
+        ? Math.max(1, Math.ceil(sortedNodes.length / groupCountTarget))
+        : groupNodeLimit;
     const chunks = [];
-    for (let index = 0; index < sortedNodes.length; index += groupNodeLimit) {
-        chunks.push(sortedNodes.slice(index, index + groupNodeLimit));
+    for (let index = 0; index < sortedNodes.length; index += chunkSize) {
+        chunks.push(sortedNodes.slice(index, index + chunkSize));
     }
     return chunks;
 };

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 the macro level as a projected mesh graph of group nodes, zoom-in expands a group only after it is framed in the viewport, and micro view renders only the focused radial child graph with dense-node label suppression in a local frame anchored to the group node 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 that fill each visible graph level toward 1000 nodes while keeping every group capped at 1000 child nodes; zoom-out renders the macro level as a projected mesh graph of group nodes, zoom-in expands a group from the focused node's current viewport position only after it is framed, and micro view renders only the focused radial child graph with dense-node label suppression in a local frame anchored to the rendered 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.126",
+  "version": "0.1.0-beta.128",
   "description": "Local-first knowledge memory for agents with Markdown, backlinks, indexing and context retrieval.",
   "type": "module",
   "license": "MIT",