npm - @andespindola/brainlink - Versions diffs - 0.1.0-beta.133 → 0.1.0-beta.135 - Mend

@andespindola/brainlink 0.1.0-beta.133 → 0.1.0-beta.135

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +3 -2
package/dist/application/frontend/client-css.js +22 -5
package/dist/application/frontend/client-html.js +1 -1
package/dist/application/frontend/client-js.js +208 -54
package/dist/application/server/routes.js +53 -6
package/docs/AGENT_USAGE.md +1 -1
package/docs/ARCHITECTURE.md +1 -0
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -71,6 +71,7 @@ Legacy `.jsonl.gz` packs are upgraded to `.blpk` automatically on first search/c
 - Full-text, semantic and hybrid retrieval on a local file index.
 - Middle-out context assembly around the strongest chunk per document.
 - In-process index and context caching with automatic invalidation on index updates.
+- HTTP graph server caches generated frontend assets and graph-layout JSON payloads by signature, and skips layout serialization when ETag returns `304`.
 - Compressed-space prefiltering for `.blpk` packs before decryption and scan.
 - Incremental indexing that reprocesses only changed markdown files and reuses existing chunks/embeddings for unchanged notes.
 - Adaptive compressed-pack rebuild policy to keep indexing fast during small edit batches.
@@ -589,7 +590,7 @@ The graph UI shows:
 - notes as nodes
 - representative `[[wiki links]]` as weighted edges
-- details opened on node click (tags, outgoing links, backlinks, full Markdown content)
+- details opened in a non-modal side panel (tags, outgoing links, backlinks, full Markdown content), so zoom and pan remain available while inspecting data
 - neutral graph nodes with segment/group metadata
 - agent selector (id-only labels) for isolated views
 - graph filter matches title, path, tags and note content
@@ -601,7 +602,7 @@ The graph UI shows:
 - Bloom-like scene navigation: reset fits the current graph scene, wheel zoom stays anchored to the cursor, and WebGL acceleration draws the dense node and edge layer faster
 - zoom-out floor for large and massive graphs to keep the scene reachable without switching into a separate macro graph mode
 - keyboard shortcuts: `+` zoom in, `-` zoom out, `0` reset fit
-- double-click on canvas zooms in at cursor position
+- click on a hierarchy group expands that group from the same world position; clicking the same focused group again opens its details panel; double-click on empty canvas zooms in at cursor position
 - floating graph totals (notes, links, tags) below the Brainlink title
 - 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

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

@@ -262,14 +262,20 @@ li small {
 }
 .content-dialog {
-  width: min(1240px, calc(100vw - 24px));
-  max-height: calc(100svh - 20px);
+  position: fixed;
+  top: 84px;
+  right: 12px;
+  margin: 0;
+  width: min(440px, calc(100vw - 24px));
+  height: min(calc(100svh - 124px), 820px);
+  max-height: calc(100svh - 124px);
   padding: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--panel);
   color: var(--text);
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
+  overflow: hidden;
 }
 .content-dialog::backdrop {
@@ -280,7 +286,8 @@ li small {
 .content-dialog article {
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
-  max-height: calc(100svh - 22px);
+  height: 100%;
+  max-height: 100%;
 }
 .content-dialog header {
@@ -299,7 +306,7 @@ li small {
 .content-dialog h2 {
   margin-top: 6px;
-  font-size: 24px;
+  font-size: 19px;
   line-height: 1.15;
   overflow-wrap: anywhere;
 }
@@ -367,7 +374,7 @@ li small {
   min-height: 0;
   border: 0;
   border-radius: 0;
-  padding: 22px;
+  padding: 14px;
 }
 .app-footer {
@@ -415,6 +422,16 @@ li small {
     flex-direction: column;
   }
+  .content-dialog {
+    top: auto;
+    right: 12px;
+    left: 12px;
+    bottom: 38px;
+    width: auto;
+    height: min(calc(100svh - 170px), 640px);
+    max-height: calc(100svh - 170px);
+  }
   .metric-chip {
     min-width: 82px;
   }

package/dist/application/frontend/client-html.js CHANGED Viewed

@@ -56,7 +56,7 @@ export const createClientHtml = () => `<!doctype html>
       <article>
         <header>
           <div>
-            <span class="eyebrow">Markdown content</span>
+            <span class="eyebrow">Node details</span>
             <h2 id="contentTitle">Selected note</h2>
             <p id="contentPath"></p>
           </div>

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

@@ -18,9 +18,12 @@ const hierarchyMicroEnterScale = 0.18
 const hierarchyMicroExitScale = 0.12
 const hierarchyFocusAcquireCoverage = 0.52
 const hierarchyFocusAcquireScale = 0.16
-const hierarchyChildRevealPower = 4
-const hierarchyFocusedOnlyProgress = 0.64
+const hierarchyChildRevealStartProgress = 0.28
+const hierarchyChildRevealExponent = 1.8
+const hierarchyFocusedOnlyProgress = 0.86
 const hierarchyChildGraphFitMargin = 1.28
+const hierarchyChildRevealGrowthRatio = 0.3
+const hierarchyChildRevealGrowthFloor = 2
 const minNodePixelRadius = 2.3
 const viewportPaddingPx = 280
 const worldCoordinateLimit = 5_000_000
@@ -88,6 +91,8 @@ const state = {
   lastZoomFocus: { x: 0, y: 0, at: 0 },
   hierarchyFocusGroupId: null,
   hierarchyFocusStack: [],
+  hierarchyRevealFocusGroupId: null,
+  hierarchyRevealBudget: 1,
   zoomTransition: {
     active: false,
     source: 'generic',
@@ -1225,6 +1230,15 @@ const smoothProgress = value => {
   return bounded * bounded * (3 - 2 * bounded)
 }
+const childRevealProgressForFocus = progress => {
+  const bounded = Math.max(0, Math.min(1, progress))
+  if (bounded <= hierarchyChildRevealStartProgress) {
+    return 0
+  }
+  const shifted = (bounded - hierarchyChildRevealStartProgress) / Math.max(1 - hierarchyChildRevealStartProgress, 0.0001)
+  return Math.pow(smoothProgress(shifted), hierarchyChildRevealExponent)
+}
 const groupRenderRadius = group => {
   const childCount = Math.max(group.nodeIds.length, group.childGroupIds.length, 1)
   return 10 + Math.min(Math.log2(childCount + 1) * 4.2, 22)
@@ -1447,7 +1461,7 @@ const selectViewportItemsWithFill = (items, viewport, limit = renderNodeBudget)
   return visible.concat(fill)
 }
-const updateHierarchyFocusGroup = (groups, viewport) => {
+const updateHierarchyFocusGroup = (groups, _viewport) => {
   const activeGroupIds = new Set(groups.map(group => group.id))
   state.hierarchyFocusStack = state.hierarchyFocusStack.filter(groupId => state.groupById.has(groupId))
   const parentGroup = activeHierarchyParentGroup()
@@ -1462,7 +1476,6 @@ const updateHierarchyFocusGroup = (groups, viewport) => {
   const current = state.hierarchyFocusGroupId
     ? groups.find(group => group.id === state.hierarchyFocusGroupId) ?? null
     : null
-  const currentCoverage = current ? groupViewportCoverage(current, viewport) : 0
   const hasActiveFocusedTransition =
     Boolean(current) &&
     state.zoomTransition.active &&
@@ -1473,46 +1486,47 @@ const updateHierarchyFocusGroup = (groups, viewport) => {
   if (hasActiveFocusedTransition) {
     return current
   }
+  const selectedGroupId = state.selected?.isGroupNode ? state.selected.groupId : null
+  const selectedGroup = selectedGroupId
+    ? groups.find(group => group.id === selectedGroupId) ?? null
+    : null
-  if (
-    current &&
-    state.transform.scale >= hierarchyMicroExitScale &&
-    currentCoverage >= hierarchyMicroExitCoverage
-  ) {
-    if (current.childGroupIds.length > 0 && state.hierarchyFocusStack.at(-1) !== current.id) {
-      state.hierarchyFocusStack = [...state.hierarchyFocusStack, current.id]
-    }
-    return current
-  }
-  const candidate = groups
-    .map(group => groupWithCoverage(group, viewport))
-    .sort((left, right) => right.coverage - left.coverage)[0]
-  if (
-    candidate &&
-    state.transform.scale >= hierarchyFocusAcquireScale &&
-    candidate.coverage >= hierarchyFocusAcquireCoverage
-  ) {
-    state.hierarchyFocusGroupId = candidate.group.id
-    if (candidate.group.childGroupIds.length > 0 && state.hierarchyFocusStack.at(-1) !== candidate.group.id) {
-      state.hierarchyFocusStack = [...state.hierarchyFocusStack, candidate.group.id]
-    }
-    return candidate.group
+  if (selectedGroup && state.transform.scale >= hierarchyMicroExitScale) {
+    state.hierarchyFocusGroupId = selectedGroup.id
+    return selectedGroup
   }
   if (state.hierarchyFocusStack.length > 0 && state.transform.scale < hierarchyMicroExitScale) {
     state.hierarchyFocusStack = state.hierarchyFocusStack.slice(0, -1)
+    if (state.selected?.isGroupNode) {
+      state.selected = null
+    }
   }
   state.hierarchyFocusGroupId = null
   return null
 }
-const hierarchyViewportProgress = (group, viewport) => {
-  const coverage = groupViewportCoverage(group, viewport)
-  const coverageProgress = (coverage - hierarchyFocusAcquireCoverage) / (hierarchyMicroEnterCoverage - hierarchyFocusAcquireCoverage)
-  const scaleProgress = (state.transform.scale - hierarchyFocusAcquireScale) / (hierarchyMicroEnterScale - hierarchyFocusAcquireScale)
-  const viewportProgress = smoothProgress(Math.min(coverageProgress, scaleProgress))
+const updateHierarchyChildRevealBudget = (focusGroupId, targetLimit) => {
+  if (state.hierarchyRevealFocusGroupId !== focusGroupId) {
+    state.hierarchyRevealFocusGroupId = focusGroupId
+    state.hierarchyRevealBudget = 1
+  }
+  if (state.hierarchyRevealBudget > targetLimit) {
+    state.hierarchyRevealBudget = targetLimit
+    return targetLimit
+  }
+  const remaining = Math.max(0, targetLimit - state.hierarchyRevealBudget)
+  const growth = Math.max(
+    hierarchyChildRevealGrowthFloor,
+    Math.floor(remaining * hierarchyChildRevealGrowthRatio)
+  )
+  state.hierarchyRevealBudget = Math.min(targetLimit, state.hierarchyRevealBudget + growth)
+  return state.hierarchyRevealBudget
+}
+const hierarchyViewportProgress = (group, _viewport) => {
   const hasActiveFocusedTransition =
     state.zoomTransition.active &&
     state.zoomTransition.source === 'group' &&
@@ -1520,13 +1534,12 @@ const hierarchyViewportProgress = (group, viewport) => {
     state.selected.groupId === group.id
   if (!hasActiveFocusedTransition) {
-    return viewportProgress
+    return 1
   }
   const targetSpan = Math.max(state.zoomTransition.targetScale - hierarchyFocusAcquireScale, 0.0001)
   const transitionScaleProgress = (state.transform.scale - hierarchyFocusAcquireScale) / targetSpan
-  const transitionProgress = Math.pow(Math.max(0, Math.min(1, transitionScaleProgress)), 2.8)
-  return Math.max(viewportProgress, transitionProgress)
+  return Math.pow(Math.max(0, Math.min(1, transitionScaleProgress)), 2.8)
 }
 const groupEdgesForRenderedGroups = (groupNodes) => {
@@ -1582,15 +1595,20 @@ const computeHierarchyRenderVisibility = (viewport) => {
   if (state.groups.length === 0 || state.visibleNodes.length <= 1000) {
     state.hierarchyFocusGroupId = null
     state.hierarchyFocusStack = []
+    state.hierarchyRevealFocusGroupId = null
+    state.hierarchyRevealBudget = 1
     return false
   }
   const groups = selectViewportItemsWithFill(hierarchyGroupsForScale(), viewport, renderNodeBudget)
   const focus = updateHierarchyFocusGroup(groups, viewport)
   const progress = focus ? hierarchyViewportProgress(focus, viewport) : 0
+  const revealProgress = childRevealProgressForFocus(progress)
   const groupNodes = groups.map(createGroupRenderNode)
-  if (!focus || progress <= 0.02) {
+  if (!focus || revealProgress <= 0) {
+    state.hierarchyRevealFocusGroupId = null
+    state.hierarchyRevealBudget = 1
     state.renderNodes = groupNodes
     state.renderEdges = groupEdgesForRenderedGroups(groupNodes)
     return true
@@ -1601,22 +1619,22 @@ const computeHierarchyRenderVisibility = (viewport) => {
   const focusChildGroups = focus.childGroupIds
     .map(groupId => state.groupById.get(groupId))
     .filter(Boolean)
-  const childRevealProgress = Math.pow(Math.max(0, Math.min(1, progress)), hierarchyChildRevealPower)
-  const childLimit = Math.min(renderNodeBudget, Math.max(1, Math.floor(renderNodeBudget * childRevealProgress)))
+  const childTargetLimit = Math.min(renderNodeBudget, Math.max(1, Math.floor(renderNodeBudget * revealProgress)))
+  const childLimit = updateHierarchyChildRevealBudget(focus.id, childTargetLimit)
   const focusRenderNode = groupNodes.find(node => node.groupId === focus.id) ?? createGroupRenderNode(focus)
   const arrangedChildren = focusChildGroups.length > 0
     ? arrangeChildGroupNodes(focusChildGroups, focus, focusRenderNode)
     : arrangeChildGraphNodes(rawChildNodes, focus, focusRenderNode)
   const childNodes = selectStableSampleNodes(arrangedChildren, childLimit)
-    .map(node => interpolateNodeFromGroup(node, focusRenderNode, progress))
+    .map(node => interpolateNodeFromGroup(node, focusRenderNode, revealProgress))
   const childIds = new Set(childNodes.map(node => node.id))
   const childById = new Map(childNodes.map(node => [node.id, node]))
-  const isMicroView = progress >= hierarchyFocusedOnlyProgress
+  const isMicroView = revealProgress >= hierarchyFocusedOnlyProgress
   const visibleGroupNodes = isMicroView
     ? []
-    : groupNodes.filter(node => node.groupId !== focus.id || progress < 0.92)
+    : groupNodes.filter(node => node.groupId !== focus.id || revealProgress < 0.96)
   const groupEdges = isMicroView ? [] : groupEdgesForRenderedGroups(visibleGroupNodes)
-  const childEdges = (isMicroView || progress > 0.02)
+  const childEdges = (isMicroView || revealProgress > 0)
     ? focusChildGroups.length > 0
       ? groupEdgesForRenderedGroups(childNodes)
       : collectVisibleEdgesForNodes(childIds).map(edge => ({
@@ -2102,6 +2120,8 @@ const resetView = () => fitView({ useFiltered: false, preferHubCenter: false })
 const resetHierarchyFocus = () => {
   state.hierarchyFocusGroupId = null
   state.hierarchyFocusStack = []
+  state.hierarchyRevealFocusGroupId = null
+  state.hierarchyRevealBudget = 1
 }
 const focusPrimaryHub = () => {
@@ -2920,6 +2940,66 @@ const linkedNodes = node => {
   return { outgoing, incoming }
 }
+const linkedGroupsForGroupNode = groupNode => {
+  const group = state.groupById.get(groupNode.groupId)
+  if (!group) {
+    return { outgoing: [], incoming: [], internalEdgeCount: 0, externalEdgeCount: 0 }
+  }
+  const nodeIds = new Set(group.nodeIds)
+  const externalByGroup = new Map()
+  let internalEdgeCount = 0
+  let externalEdgeCount = 0
+  for (let index = 0; index < state.visibleEdges.length; index += 1) {
+    const edge = state.visibleEdges[index]
+    if (!edge.target) continue
+    const sourceInside = nodeIds.has(edge.source)
+    const targetInside = nodeIds.has(edge.target)
+    if (sourceInside && targetInside) {
+      internalEdgeCount += 1
+      continue
+    }
+    if (!sourceInside && !targetInside) continue
+    externalEdgeCount += 1
+    const externalNodeId = sourceInside ? edge.target : edge.source
+    const externalGroup = state.nodeLeafGroupById.get(externalNodeId)
+    const externalKey = externalGroup?.id ?? 'unknown'
+    const externalTitle = externalGroup?.title ?? (edge.targetTitle || 'Unknown group')
+    const direction = sourceInside ? 'outgoing' : 'incoming'
+    const current = externalByGroup.get(externalKey)
+    if (current) {
+      current.weight += edgeWeight(edge)
+      if (direction === 'outgoing') current.outgoing += 1
+      if (direction === 'incoming') current.incoming += 1
+      continue
+    }
+    externalByGroup.set(externalKey, {
+      id: '',
+      title: externalTitle,
+      path: 'Group relation - ' + direction,
+      weight: edgeWeight(edge),
+      priority: edge.priority || 'normal',
+      outgoing: direction === 'outgoing' ? 1 : 0,
+      incoming: direction === 'incoming' ? 1 : 0
+    })
+  }
+  const external = Array.from(externalByGroup.values())
+    .sort((left, right) => right.weight - left.weight || left.title.localeCompare(right.title))
+  const outgoing = external
+    .filter(item => item.outgoing > 0)
+    .slice(0, 18)
+  const incoming = external
+    .filter(item => item.incoming > 0)
+    .slice(0, 18)
+  return { outgoing, incoming, internalEdgeCount, externalEdgeCount }
+}
 const fetchNodeDetails = async node => {
   const cached = state.nodeDetails.get(node.id)
   if (cached) {
@@ -2942,8 +3022,43 @@ const fetchNodeDetails = async node => {
 const wait = async (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds))
+const openGroupDialog = groupNode => {
+  const group = state.groupById.get(groupNode.groupId)
+  if (!group) return
+  const groupLinks = linkedGroupsForGroupNode(groupNode)
+  const title = group.title || 'Group'
+  const groupType = group.childGroupIds.length > 0 ? 'Hierarchical group' : 'Leaf group'
+  const nodeCount = group.nodeIds.length
+  const childGroupCount = group.childGroupIds.length
+  const radius = Math.round(childGraphRenderRadius(group))
+  elements.contentTitle.textContent = title
+  elements.contentPath.textContent = groupType + ' - level ' + group.level
+  elements.contentTags.innerHTML = [
+    '<span>segment: ' + escapeHtml(group.segment || 'root') + '</span>',
+    '<span>cluster: ' + escapeHtml(group.group || 'root') + '</span>'
+  ].join('')
+  elements.contentOutgoing.innerHTML = list(groupLinks.outgoing)
+  elements.contentIncoming.innerHTML = list(groupLinks.incoming)
+  elements.contentBody.textContent = [
+    'Nodes: ' + nodeCount,
+    'Child groups: ' + childGroupCount,
+    'Internal links: ' + groupLinks.internalEdgeCount,
+    'External links: ' + groupLinks.externalEdgeCount,
+    'Render radius: ' + radius
+  ].join('\\n')
+  if (!elements.contentDialog.open) {
+    elements.contentDialog.show()
+  }
+}
 const openContentDialog = async node => {
-  if (!node || node.isGroupNode) return
+  if (!node) return
+  if (node.isGroupNode) {
+    openGroupDialog(node)
+    return
+  }
   elements.contentTitle.textContent = node.title || 'Loading...'
   elements.contentPath.textContent = node.path || 'Loading...'
   elements.contentTags.innerHTML = Array.isArray(node.tags) && node.tags.length
@@ -2954,7 +3069,7 @@ const openContentDialog = async node => {
   elements.contentIncoming.innerHTML = list(initialLinks.incoming)
   elements.contentBody.textContent = 'Loading note content...'
   if (!elements.contentDialog.open) {
-    elements.contentDialog.showModal()
+    elements.contentDialog.show()
   }
   const applyDetailToDialog = detail => {
@@ -2986,7 +3101,8 @@ const openContentDialog = async node => {
   }
 }
-const selectNode = (node, options = { openContent: false }) => {
+const expandGroupNode = node => {
+  if (!node?.isGroupNode) return
   if (node?.isGroupNode) {
     state.selected = node
     const group = state.groupById.get(node.groupId)
@@ -3007,6 +3123,38 @@ const selectNode = (node, options = { openContent: false }) => {
     markRenderDirty()
     return
   }
+}
+const handleGroupNodePrimaryClick = node => {
+  if (!node?.isGroupNode) return
+  const alreadyFocused = state.selected?.isGroupNode && state.selected.groupId === node.groupId
+  if (alreadyFocused && !state.zoomTransition.active) {
+    selectNode(node, { openContent: true })
+    return
+  }
+  expandGroupNode(node)
+}
+const selectNode = (node, options = { openContent: false }) => {
+  if (!node) {
+    state.selected = null
+    if (elements.contentDialog.open) {
+      elements.contentDialog.close()
+    }
+    markRenderDirty()
+    return
+  }
+  if (node?.isGroupNode) {
+    state.selected = node
+    if (options.openContent) {
+      openContentDialog(node).catch(() => {
+        elements.contentBody.textContent = 'Unable to load group details.'
+      })
+    }
+    markRenderDirty()
+    return
+  }
   state.selected = node
   if (node && options.openContent) {
     openContentDialog(node).catch(() => {
@@ -3087,10 +3235,6 @@ const wheelZoomFactor = event => {
 }
 const handleWheelZoom = event => {
-  if (elements.contentDialog?.open) {
-    return
-  }
   event.preventDefault()
   const rect = canvas.getBoundingClientRect()
   const rawCursorX = Number.isFinite(event.offsetX) ? event.offsetX : event.clientX - rect.left
@@ -3159,7 +3303,9 @@ const bindEvents = () => {
     const point = worldPoint(event)
     const node = hitNode(point)
     if (node) {
-      selectNode(node, { openContent: true })
+      if (!node.isGroupNode) {
+        selectNode(node, { openContent: true })
+      }
       return
     }
@@ -3223,8 +3369,14 @@ const bindEvents = () => {
       settleNeighborhoodAroundNode(draggedNode)
       markRenderDirty()
     }
-    if (draggedNode && !state.pointer.moved) selectNode(draggedNode, { openContent: false })
-    if (!draggedNode && !state.pointer.moved) selectNode(state.hovered, { openContent: false })
+    if (!state.pointer.moved) {
+      const clickedNode = draggedNode ?? state.hovered
+      if (clickedNode?.isGroupNode) {
+        handleGroupNodePrimaryClick(clickedNode)
+      } else {
+        selectNode(clickedNode, { openContent: true })
+      }
+    }
     state.pointer = { x: 0, y: 0, down: false, dragNode: null, moved: false }
     canvas.releasePointerCapture(event.pointerId)
   })
@@ -3312,6 +3464,8 @@ const loadGraph = async (options = { reset: false }) => {
   state.groups = layout.groups
   state.hierarchyFocusGroupId = null
   state.hierarchyFocusStack = []
+  state.hierarchyRevealFocusGroupId = null
+  state.hierarchyRevealBudget = 1
   state.groupById = new Map(state.groups.map(group => [group.id, group]))
   state.leafGroups = state.groups.filter(group => group.nodeIds.length > 0)
   state.nodeLeafGroupById = new Map(state.leafGroups.flatMap(group => group.nodeIds.map(nodeId => [nodeId, group])))

package/dist/application/server/routes.js CHANGED Viewed

@@ -59,6 +59,36 @@ const parseNumber = (value, fallback) => {
 };
 const compactGraphLayoutThreshold = 12_000;
 const compactGraphLayoutEdgeLimit = 60_000;
+const graphLayoutBodyCacheLimit = 8;
+const graphLayoutBodyCache = new Map();
+let cachedClientHtml = null;
+let cachedClientCss = null;
+let cachedClientJs = null;
+let cachedClientWorkerJs = null;
+const readClientHtml = () => {
+    if (cachedClientHtml === null) {
+        cachedClientHtml = createClientHtml();
+    }
+    return cachedClientHtml;
+};
+const readClientCss = () => {
+    if (cachedClientCss === null) {
+        cachedClientCss = createClientCss();
+    }
+    return cachedClientCss;
+};
+const readClientJs = () => {
+    if (cachedClientJs === null) {
+        cachedClientJs = createClientJs();
+    }
+    return cachedClientJs;
+};
+const readClientWorkerJs = () => {
+    if (cachedClientWorkerJs === null) {
+        cachedClientWorkerJs = createClientWorkerJs();
+    }
+    return cachedClientWorkerJs;
+};
 const compactGraphLayoutEdgeLimitFor = (nodeCount) => {
     if (nodeCount > 100_000)
         return 15_000;
@@ -146,18 +176,31 @@ const compactLayoutPayload = (layout) => {
     };
 };
 const encodeLayoutPayload = (layout) => layout.nodes.length > compactGraphLayoutThreshold ? compactLayoutPayload(layout) : { compact: false, layout: stripLayoutContent(layout) };
+const readGraphLayoutBody = (signature) => graphLayoutBodyCache.get(signature) ?? null;
+const storeGraphLayoutBody = (signature, body) => {
+    if (graphLayoutBodyCache.has(signature)) {
+        graphLayoutBodyCache.delete(signature);
+    }
+    graphLayoutBodyCache.set(signature, body);
+    while (graphLayoutBodyCache.size > graphLayoutBodyCacheLimit) {
+        const oldest = graphLayoutBodyCache.keys().next().value;
+        if (!oldest)
+            break;
+        graphLayoutBodyCache.delete(oldest);
+    }
+};
 export const route = async (request, url, vaultPath) => {
     if (isReadMethod(request) && (url.pathname === '/' || url.pathname === '/index.html')) {
-        return createResponse(createClientHtml(), 200, contentTypes['.html']);
+        return createResponse(readClientHtml(), 200, contentTypes['.html']);
     }
     if (isReadMethod(request) && url.pathname === '/styles.css') {
-        return createResponse(createClientCss(), 200, contentTypes['.css']);
+        return createResponse(readClientCss(), 200, contentTypes['.css']);
     }
     if (isReadMethod(request) && url.pathname === '/app.js') {
-        return createResponse(createClientJs(), 200, contentTypes['.js']);
+        return createResponse(readClientJs(), 200, contentTypes['.js']);
     }
     if (isReadMethod(request) && url.pathname === '/app-worker.js') {
-        return createResponse(createClientWorkerJs(), 200, contentTypes['.js']);
+        return createResponse(readClientWorkerJs(), 200, contentTypes['.js']);
     }
     if (isReadMethod(request) && url.pathname === '/api/graph') {
         return createResponse(createJsonResponse(await getGraph(vaultPath, readAgentQuery(url))), 200, contentTypes['.json']);
@@ -167,8 +210,6 @@ export const route = async (request, url, vaultPath) => {
         const requestEtags = request.headers['if-none-match'];
         const notModified = sameEntityTag(requestEtags, signature);
         const etag = encodeEntityTag(signature);
-        const body = createJsonResponse({ signature, ...encodeLayoutPayload(layout) });
-        const jsonResponse = createResponse(body, 200, contentTypes['.json']);
         const notModifiedResponse = createResponse('', 304, contentTypes['.json']);
         if (notModified) {
             return {
@@ -179,6 +220,12 @@ export const route = async (request, url, vaultPath) => {
                 }
             };
         }
+        const cachedBody = readGraphLayoutBody(signature);
+        const body = cachedBody ?? createJsonResponse({ signature, ...encodeLayoutPayload(layout) });
+        if (!cachedBody) {
+            storeGraphLayoutBody(signature, body);
+        }
+        const jsonResponse = createResponse(body, 200, contentTypes['.json']);
         return {
             ...jsonResponse,
             headers: {

package/docs/AGENT_USAGE.md CHANGED Viewed

@@ -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 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 with every aggregated link between visible group nodes, zoom-in grows the focused node into a local child graph anchored at the same point, once the child graph is framed the sibling groups stop rendering, and groups with child groups open another graph level instead of jumping directly to leaf notes.
+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 empty canvas zooms in at cursor position. Clicking a hierarchy group expands that group from the same world position; clicking the same focused group again opens its details panel. Totals for notes, links and tags stay visible as floating metrics under the Brainlink title, and node details open in a non-modal side panel (tags, outgoing links, backlinks and Markdown content), so zoom and pan remain available during inspection. Vaults above 1000 notes also expose stable hierarchy 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 with every aggregated link between visible group nodes, zoom-in grows the focused node into a local child graph anchored at the same point, once the child graph is framed the sibling groups stop rendering, and groups with child groups open another graph level instead of jumping directly to leaf notes.
 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/docs/ARCHITECTURE.md CHANGED Viewed

@@ -171,6 +171,7 @@ HTTP request
 ```
 The HTTP API is local-first and unauthenticated. It is meant for local agents, browser UI, and development workflows.
+The route adapter caches generated frontend assets (`/`, `/styles.css`, `/app.js`, `/app-worker.js`) and graph-layout JSON payloads by layout signature to reduce repeated CPU and allocation pressure during navigation.
 ## MCP Flow

package/package.json CHANGED Viewed

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