backpack-viewer 0.2.21 → 0.3.0

package/dist/empty-state.js

@@ -2,6 +2,19 @@ export function initEmptyState(container) {
     const el = document.createElement("div");
     el.className = "empty-state";
     el.innerHTML = `
+    <div class="empty-state-bg">
+      <div class="empty-state-circle c1"></div>
+      <div class="empty-state-circle c2"></div>
+      <div class="empty-state-circle c3"></div>
+      <div class="empty-state-circle c4"></div>
+      <div class="empty-state-circle c5"></div>
+      <svg class="empty-state-lines" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
+        <line x1="80" y1="60" x2="220" y2="140" stroke="currentColor" stroke-width="0.5" opacity="0.15"/>
+        <line x1="220" y1="140" x2="320" y2="80" stroke="currentColor" stroke-width="0.5" opacity="0.15"/>
+        <line x1="220" y1="140" x2="160" y2="240" stroke="currentColor" stroke-width="0.5" opacity="0.15"/>
+        <line x1="160" y1="240" x2="300" y2="220" stroke="currentColor" stroke-width="0.5" opacity="0.15"/>
+      </svg>
+    </div>
     <div class="empty-state-content">
       <div class="empty-state-icon">
         <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">

package/dist/info-panel.js

@@ -403,7 +403,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
         label.textContent = `${nodes.length} nodes selected`;
         header.appendChild(label);
         const badgeRow = document.createElement("div");
-        badgeRow.style.cssText = "display:flex;flex-wrap:wrap;gap:4px;margin-top:6px";
+        badgeRow.className = "info-badge-row";
         const typeCounts = new Map();
         for (const node of nodes) {
             typeCounts.set(node.type, (typeCounts.get(node.type) ?? 0) + 1);
@@ -451,7 +451,7 @@ export function initInfoPanel(container, callbacks, onNavigateToNode, onFocus) {
             : "Connections Between Selected");
         if (sharedEdges.length === 0) {
             const empty = document.createElement("p");
-            empty.style.cssText = "font-size:12px;color:var(--text-dim)";
+            empty.className = "info-empty-message";
             empty.textContent = "No direct connections between selected nodes";
             connSection.appendChild(empty);
         }

package/dist/label-cache.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Offscreen canvas label cache.
+ *
+ * Pre-renders text labels to small offscreen canvases, then draws them
+ * via drawImage() which is much faster than fillText() per frame.
+ * Cache keys are "text|font|color" to handle theme changes.
+ */
+/**
+ * Draw a cached label centered at (x, y) with the given baseline alignment.
+ * Returns immediately — cache miss renders inline and stores for next frame.
+ */
+export declare function drawCachedLabel(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, font: string, color: string, align: "top" | "bottom"): void;
+/** Clear the entire cache (call on theme change or graph reload). */
+export declare function clearLabelCache(): void;

package/dist/label-cache.js

@@ -0,0 +1,54 @@
+/**
+ * Offscreen canvas label cache.
+ *
+ * Pre-renders text labels to small offscreen canvases, then draws them
+ * via drawImage() which is much faster than fillText() per frame.
+ * Cache keys are "text|font|color" to handle theme changes.
+ */
+const cache = new Map();
+const MAX_CACHE_SIZE = 2000;
+function key(text, font, color) {
+    return `${text}|${font}|${color}`;
+}
+// Shared measurement canvas — reused across all renderLabel calls
+const measureCanvas = new OffscreenCanvas(1, 1);
+const measureCtx = measureCanvas.getContext("2d");
+function renderLabel(text, font, color) {
+    measureCtx.font = font;
+    const metrics = measureCtx.measureText(text);
+    const w = Math.ceil(metrics.width) + 2; // 1px padding each side
+    const h = Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) + 4;
+    const canvas = new OffscreenCanvas(w, h);
+    const ctx = canvas.getContext("2d");
+    ctx.font = font;
+    ctx.fillStyle = color;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    ctx.fillText(text, 1, 1);
+    return { canvas, width: w, height: h };
+}
+/**
+ * Draw a cached label centered at (x, y) with the given baseline alignment.
+ * Returns immediately — cache miss renders inline and stores for next frame.
+ */
+export function drawCachedLabel(ctx, text, x, y, font, color, align) {
+    const k = key(text, font, color);
+    let entry = cache.get(k);
+    if (!entry) {
+        // Evict oldest entries if cache is full
+        if (cache.size >= MAX_CACHE_SIZE) {
+            const first = cache.keys().next().value;
+            if (first !== undefined)
+                cache.delete(first);
+        }
+        entry = renderLabel(text, font, color);
+        cache.set(k, entry);
+    }
+    const dx = x - entry.width / 2;
+    const dy = align === "top" ? y : y - entry.height;
+    ctx.drawImage(entry.canvas, dx, dy);
+}
+/** Clear the entire cache (call on theme change or graph reload). */
+export function clearLabelCache() {
+    cache.clear();
+}

package/dist/layout-worker.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Web Worker for off-main-thread force-directed layout.
+ *
+ * Runs the tick loop in a worker thread so physics never blocks
+ * the main thread's rendering or input handling.
+ *
+ * Protocol:
+ *   Main → Worker:
+ *     { type: 'start', nodes, edges, params }  — begin simulation
+ *     { type: 'stop' }                          — halt simulation
+ *     { type: 'params', params }                — update layout params + reheat
+ *
+ *   Worker → Main:
+ *     { type: 'tick', positions: Float64Array, alpha }  — position update per tick
+ *     { type: 'settled' }                                — simulation converged
+ */
+export {};

package/dist/layout-worker.js

@@ -0,0 +1,78 @@
+/**
+ * Web Worker for off-main-thread force-directed layout.
+ *
+ * Runs the tick loop in a worker thread so physics never blocks
+ * the main thread's rendering or input handling.
+ *
+ * Protocol:
+ *   Main → Worker:
+ *     { type: 'start', nodes, edges, params }  — begin simulation
+ *     { type: 'stop' }                          — halt simulation
+ *     { type: 'params', params }                — update layout params + reheat
+ *
+ *   Worker → Main:
+ *     { type: 'tick', positions: Float64Array, alpha }  — position update per tick
+ *     { type: 'settled' }                                — simulation converged
+ */
+import { createLayout, tick, setLayoutParams, autoLayoutParams } from "./layout.js";
+const ALPHA_MIN = 0.001;
+const TICK_BATCH = 3; // ticks per message to reduce postMessage overhead
+let running = false;
+let state = null;
+let alpha = 1;
+function packPositions(nodes) {
+    const buf = new Float64Array(nodes.length * 4);
+    for (let i = 0; i < nodes.length; i++) {
+        const n = nodes[i];
+        buf[i * 4] = n.x;
+        buf[i * 4 + 1] = n.y;
+        buf[i * 4 + 2] = n.vx;
+        buf[i * 4 + 3] = n.vy;
+    }
+    return buf;
+}
+function runLoop() {
+    if (!running || !state)
+        return;
+    for (let i = 0; i < TICK_BATCH; i++) {
+        if (alpha < ALPHA_MIN) {
+            running = false;
+            const positions = packPositions(state.nodes);
+            self.postMessage({ type: "tick", positions, alpha }, { transfer: [positions.buffer] });
+            self.postMessage({ type: "settled" });
+            return;
+        }
+        alpha = tick(state, alpha);
+    }
+    const positions = packPositions(state.nodes);
+    self.postMessage({ type: "tick", positions, alpha }, { transfer: [positions.buffer] });
+    // Yield to allow incoming messages, then continue
+    setTimeout(runLoop, 0);
+}
+self.onmessage = (e) => {
+    const msg = e.data;
+    if (msg.type === "start") {
+        running = false; // stop any existing loop
+        const data = msg.data;
+        const params = msg.params;
+        // Auto-scale params based on graph size, then apply overrides
+        const auto = autoLayoutParams(data.nodes.length);
+        setLayoutParams({ ...auto, ...params });
+        state = createLayout(data);
+        alpha = 1;
+        running = true;
+        runLoop();
+    }
+    if (msg.type === "stop") {
+        running = false;
+    }
+    if (msg.type === "params") {
+        setLayoutParams(msg.params);
+        // Reheat simulation
+        alpha = Math.max(alpha, 0.3);
+        if (!running && state) {
+            running = true;
+            runLoop();
+        }
+    }
+};

package/dist/layout.js

@@ -1,3 +1,4 @@
+import { buildQuadtree, applyRepulsion } from "./quadtree.js";
 export const DEFAULT_LAYOUT_PARAMS = {
     clusterStrength: 0.08,
     spacing: 1.5,
@@ -106,27 +107,81 @@ export function createLayout(data) {
     }));
     return { nodes, edges, nodeMap };
 }
+// Barnes-Hut accuracy parameter (0.5 = accurate, 1.0 = fast).
+// 0.7 is a good balance for interactive use.
+const BH_THETA = 0.7;
+// Threshold below which we fall back to direct O(n²) — quadtree overhead isn't worth it
+const BH_THRESHOLD = 80;
 /** Run one tick of the force simulation. Returns new alpha. */
 export function tick(state, alpha) {
     const { nodes, edges, nodeMap } = state;
-    // Repulsion — all pairs (stronger between different types)
-    for (let i = 0; i < nodes.length; i++) {
-        for (let j = i + 1; j < nodes.length; j++) {
-            const a = nodes[i];
-            const b = nodes[j];
-            let dx = b.x - a.x;
-            let dy = b.y - a.y;
-            let dist = Math.sqrt(dx * dx + dy * dy);
-            if (dist < MIN_DISTANCE)
-                dist = MIN_DISTANCE;
-            const rep = a.type === b.type ? REPULSION : CROSS_TYPE_REPULSION_BASE * params.spacing;
-            const force = (rep * alpha) / (dist * dist);
-            const fx = (dx / dist) * force;
-            const fy = (dy / dist) * force;
-            a.vx -= fx;
-            a.vy -= fy;
-            b.vx += fx;
-            b.vy += fy;
+    // Repulsion — Barnes-Hut O(n log n) for large graphs, direct O(n²) for small
+    const crossRep = CROSS_TYPE_REPULSION_BASE * params.spacing;
+    if (nodes.length >= BH_THRESHOLD) {
+        // Barnes-Hut: apply cross-type repulsion strength globally via quadtree
+        const tree = buildQuadtree(nodes);
+        if (tree) {
+            for (const node of nodes) {
+                applyRepulsion(tree, node, BH_THETA, crossRep, alpha, MIN_DISTANCE);
+            }
+        }
+        // Same-type correction: same-type pairs should use REPULSION (weaker) not crossRep.
+        // Apply a negative correction of (crossRep - REPULSION) for same-type pairs.
+        // Group by type to avoid checking all n² pairs — only intra-group pairs.
+        const repDiff = crossRep - REPULSION;
+        if (repDiff > 0) {
+            const typeGroups = new Map();
+            for (const node of nodes) {
+                let group = typeGroups.get(node.type);
+                if (!group) {
+                    group = [];
+                    typeGroups.set(node.type, group);
+                }
+                group.push(node);
+            }
+            for (const group of typeGroups.values()) {
+                for (let i = 0; i < group.length; i++) {
+                    for (let j = i + 1; j < group.length; j++) {
+                        const a = group[i];
+                        const b = group[j];
+                        let dx = b.x - a.x;
+                        let dy = b.y - a.y;
+                        let dist = Math.sqrt(dx * dx + dy * dy);
+                        if (dist < MIN_DISTANCE)
+                            dist = MIN_DISTANCE;
+                        // Subtract the excess repulsion (correction is attractive between same-type)
+                        const force = (repDiff * alpha) / (dist * dist);
+                        const fx = (dx / dist) * force;
+                        const fy = (dy / dist) * force;
+                        a.vx += fx;
+                        a.vy += fy;
+                        b.vx -= fx;
+                        b.vy -= fy;
+                    }
+                }
+            }
+        }
+    }
+    else {
+        // Small graph — direct all-pairs (original algorithm)
+        for (let i = 0; i < nodes.length; i++) {
+            for (let j = i + 1; j < nodes.length; j++) {
+                const a = nodes[i];
+                const b = nodes[j];
+                let dx = b.x - a.x;
+                let dy = b.y - a.y;
+                let dist = Math.sqrt(dx * dx + dy * dy);
+                if (dist < MIN_DISTANCE)
+                    dist = MIN_DISTANCE;
+                const rep = a.type === b.type ? REPULSION : crossRep;
+                const force = (rep * alpha) / (dist * dist);
+                const fx = (dx / dist) * force;
+                const fy = (dy / dist) * force;
+                a.vx -= fx;
+                a.vy -= fy;
+                b.vx += fx;
+                b.vy += fy;
+            }
         }
     }
     // Attraction — along edges (shorter rest length within same type)

package/dist/main.js

@@ -1,4 +1,4 @@
-import { listOntologies, loadOntology, saveOntology, renameOntology, listBranches, createBranch, switchBranch, deleteBranch, listSnapshots, createSnapshot, rollbackSnapshot, listSnippets, saveSnippet, loadSnippet, deleteSnippet, } from "./api";
+import { listOntologies, loadOntology, saveOntology, renameOntology, listBranches, createBranch, switchBranch, deleteBranch, listSnapshots, createSnapshot, rollbackSnapshot, listSnippets, saveSnippet, loadSnippet, deleteSnippet, listRemotes, loadRemote, } from "./api";
 import { initSidebar } from "./sidebar";
 import { initCanvas } from "./canvas";
 import { initInfoPanel } from "./info-panel";
@@ -14,6 +14,8 @@ import defaultConfig from "./default-config.json";
 import "./style.css";
 let activeOntology = "";
 let currentData = null;
+let remoteNames = new Set();
+let activeIsRemote = false;
 async function main() {
     const canvasContainer = document.getElementById("canvas-container");
     // --- Load config ---
@@ -344,6 +346,16 @@ async function main() {
             await saveSnippet(activeOntology, label, trail, edgeIds);
             await refreshSnippets(activeOntology);
         },
+        async onStarredSaveSnippet(label, nodeIds) {
+            if (!activeOntology || !currentData)
+                return;
+            const nodeSet = new Set(nodeIds);
+            const edgeIds = currentData.edges
+                .filter((e) => nodeSet.has(e.sourceId) && nodeSet.has(e.targetId))
+                .map((e) => e.id);
+            await saveSnippet(activeOntology, label, nodeIds, edgeIds);
+            await refreshSnippets(activeOntology);
+        },
         onFocusChange(seedNodeIds) {
             if (seedNodeIds && seedNodeIds.length > 0) {
                 canvas.enterFocus(seedNodeIds, 0);
@@ -660,12 +672,13 @@ async function main() {
     }
     async function selectGraph(name, panToNodeIds, focusSeedIds, focusHops) {
         activeOntology = name;
+        activeIsRemote = remoteNames.has(name);
         sidebar.setActive(name);
         infoPanel.hide();
         removeFocusIndicator();
         search.clear();
         undoHistory.clear();
-        currentData = await loadOntology(name);
+        currentData = activeIsRemote ? await loadRemote(name) : await loadOntology(name);
         const autoParams = autoLayoutParams(currentData.nodes.length);
         setLayoutParams({
             spacing: Math.max(cfg.layout.spacing, autoParams.spacing),
@@ -676,10 +689,13 @@ async function main() {
         toolsPane.setData(currentData);
         emptyState.hide();
         updateUrl(name);
-        // Load branches and snapshots
-        await refreshBranches(name);
-        await refreshSnapshots(name);
-        await refreshSnippets(name);
+        // Load branches and snapshots — skipped for remote graphs (read-only,
+        // no branch/snapshot/snippet APIs on the remote endpoint)
+        if (!activeIsRemote) {
+            await refreshBranches(name);
+            await refreshSnapshots(name);
+            await refreshSnippets(name);
+        }
         // Restore focus mode if requested
         if (focusSeedIds?.length && currentData) {
             const validFocus = focusSeedIds.filter((id) => currentData.nodes.some((n) => n.id === id));
@@ -703,16 +719,25 @@ async function main() {
             }
         }
     }
-    // Load ontology list
-    const summaries = await listOntologies();
+    // Load ontology list (local + remote in parallel)
+    const [summaries, remotes] = await Promise.all([
+        listOntologies(),
+        listRemotes().catch(() => []),
+    ]);
     sidebar.setSummaries(summaries);
+    sidebar.setRemotes(remotes);
+    remoteNames = new Set(remotes.map((r) => r.name));
     // Auto-load from URL hash, or first graph
     const initialUrl = parseUrl();
     const initialName = initialUrl.graph && summaries.some((s) => s.name === initialUrl.graph)
         ? initialUrl.graph
-        : summaries.length > 0
-            ? summaries[0].name
-            : null;
+        : initialUrl.graph && remoteNames.has(initialUrl.graph)
+            ? initialUrl.graph
+            : summaries.length > 0
+                ? summaries[0].name
+                : remotes.length > 0
+                    ? remotes[0].name
+                    : null;
     if (initialName) {
         await selectGraph(initialName, initialUrl.nodes.length ? initialUrl.nodes : undefined, initialUrl.focus.length ? initialUrl.focus : undefined, initialUrl.hops);
     }
@@ -847,13 +872,20 @@ async function main() {
     // Live reload — when Claude adds nodes via MCP, re-fetch and re-render
     if (import.meta.hot) {
         import.meta.hot.on("ontology-change", async () => {
-            const updated = await listOntologies();
+            const [updated, updatedRemotes] = await Promise.all([
+                listOntologies(),
+                listRemotes().catch(() => []),
+            ]);
             sidebar.setSummaries(updated);
-            if (updated.length > 0)
+            sidebar.setRemotes(updatedRemotes);
+            remoteNames = new Set(updatedRemotes.map((r) => r.name));
+            if (updated.length > 0 || updatedRemotes.length > 0)
                 emptyState.hide();
             if (activeOntology) {
                 try {
-                    currentData = await loadOntology(activeOntology);
+                    currentData = activeIsRemote
+                        ? await loadRemote(activeOntology)
+                        : await loadOntology(activeOntology);
                     canvas.loadGraph(currentData);
                     search.setLearningGraphData(currentData);
                     toolsPane.setData(currentData);
@@ -864,6 +896,7 @@ async function main() {
             }
             else if (updated.length > 0) {
                 activeOntology = updated[0].name;
+                activeIsRemote = false;
                 sidebar.setActive(activeOntology);
                 currentData = await loadOntology(activeOntology);
                 canvas.loadGraph(currentData);

package/dist/quadtree.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Barnes-Hut quadtree for O(n log n) force-directed repulsion.
+ *
+ * Instead of computing repulsion between every pair of nodes (O(n²)),
+ * the quadtree groups distant nodes into aggregate "bodies" and applies
+ * a single force from each group. The θ parameter controls accuracy:
+ * lower θ = more accurate but slower, higher θ = faster but less precise.
+ */
+export interface Body {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    type: string;
+}
+interface QuadNode {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    cx: number;
+    cy: number;
+    mass: number;
+    children: (QuadNode | null)[];
+    body: Body | null;
+}
+/**
+ * Build a quadtree from an array of bodies.
+ * Computes bounding box automatically with padding.
+ */
+export declare function buildQuadtree(bodies: Body[]): QuadNode | null;
+/**
+ * Apply Barnes-Hut repulsion forces to a single body.
+ *
+ * @param root      Quadtree root
+ * @param body      The body to compute forces for
+ * @param theta     Accuracy parameter (0.5–1.0). Higher = faster, less accurate.
+ * @param strength  Base repulsion strength
+ * @param alpha     Simulation alpha (decays over time)
+ * @param minDist   Minimum distance clamp to avoid explosion
+ */
+export declare function applyRepulsion(root: QuadNode, body: Body, theta: number, strength: number, alpha: number, minDist: number): void;
+export {};

package/dist/quadtree.js

@@ -0,0 +1,147 @@
+/**
+ * Barnes-Hut quadtree for O(n log n) force-directed repulsion.
+ *
+ * Instead of computing repulsion between every pair of nodes (O(n²)),
+ * the quadtree groups distant nodes into aggregate "bodies" and applies
+ * a single force from each group. The θ parameter controls accuracy:
+ * lower θ = more accurate but slower, higher θ = faster but less precise.
+ */
+function createNode(x0, y0, x1, y1) {
+    return { x0, y0, x1, y1, cx: 0, cy: 0, mass: 0, children: [null, null, null, null], body: null };
+}
+function quadrant(node, x, y) {
+    const mx = (node.x0 + node.x1) / 2;
+    const my = (node.y0 + node.y1) / 2;
+    return (x < mx ? 0 : 1) + (y < my ? 0 : 2);
+}
+function childBounds(node, q) {
+    const mx = (node.x0 + node.x1) / 2;
+    const my = (node.y0 + node.y1) / 2;
+    switch (q) {
+        case 0: return [node.x0, node.y0, mx, my]; // NW
+        case 1: return [mx, node.y0, node.x1, my]; // NE
+        case 2: return [node.x0, my, mx, node.y1]; // SW
+        default: return [mx, my, node.x1, node.y1]; // SE
+    }
+}
+function insert(node, body) {
+    // Empty leaf — place body here
+    if (node.mass === 0 && node.body === null) {
+        node.body = body;
+        node.cx = body.x;
+        node.cy = body.y;
+        node.mass = 1;
+        return;
+    }
+    // If leaf with existing body, push it down
+    if (node.body !== null) {
+        const existing = node.body;
+        node.body = null;
+        // If bodies are at the exact same position, nudge slightly to avoid infinite recursion
+        if (existing.x === body.x && existing.y === body.y) {
+            body.x += (Math.random() - 0.5) * 0.1;
+            body.y += (Math.random() - 0.5) * 0.1;
+        }
+        const eq = quadrant(node, existing.x, existing.y);
+        if (node.children[eq] === null) {
+            const [x0, y0, x1, y1] = childBounds(node, eq);
+            node.children[eq] = createNode(x0, y0, x1, y1);
+        }
+        insert(node.children[eq], existing);
+    }
+    // Insert new body into appropriate child
+    const q = quadrant(node, body.x, body.y);
+    if (node.children[q] === null) {
+        const [x0, y0, x1, y1] = childBounds(node, q);
+        node.children[q] = createNode(x0, y0, x1, y1);
+    }
+    insert(node.children[q], body);
+    // Update aggregate center of mass
+    const total = node.mass + 1;
+    node.cx = (node.cx * node.mass + body.x) / total;
+    node.cy = (node.cy * node.mass + body.y) / total;
+    node.mass = total;
+}
+/**
+ * Build a quadtree from an array of bodies.
+ * Computes bounding box automatically with padding.
+ */
+export function buildQuadtree(bodies) {
+    if (bodies.length === 0)
+        return null;
+    // Find bounding box
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const b of bodies) {
+        if (b.x < minX)
+            minX = b.x;
+        if (b.y < minY)
+            minY = b.y;
+        if (b.x > maxX)
+            maxX = b.x;
+        if (b.y > maxY)
+            maxY = b.y;
+    }
+    // Pad and square the bounds (quadtree needs square region)
+    const pad = Math.max(maxX - minX, maxY - minY) * 0.1 + 50;
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    const half = Math.max(maxX - minX, maxY - minY) / 2 + pad;
+    const root = createNode(cx - half, cy - half, cx + half, cy + half);
+    for (const b of bodies)
+        insert(root, b);
+    return root;
+}
+/**
+ * Apply Barnes-Hut repulsion forces to a single body.
+ *
+ * @param root      Quadtree root
+ * @param body      The body to compute forces for
+ * @param theta     Accuracy parameter (0.5–1.0). Higher = faster, less accurate.
+ * @param strength  Base repulsion strength
+ * @param alpha     Simulation alpha (decays over time)
+ * @param minDist   Minimum distance clamp to avoid explosion
+ */
+export function applyRepulsion(root, body, theta, strength, alpha, minDist) {
+    _walk(root, body, theta, strength, alpha, minDist);
+}
+function _walk(node, body, theta, strength, alpha, minDist) {
+    if (node.mass === 0)
+        return;
+    const dx = node.cx - body.x;
+    const dy = node.cy - body.y;
+    const distSq = dx * dx + dy * dy;
+    // If this is a leaf with a single body, compute direct force (skip self)
+    if (node.body !== null) {
+        if (node.body !== body) {
+            let dist = Math.sqrt(distSq);
+            if (dist < minDist)
+                dist = minDist;
+            const force = (strength * alpha) / (dist * dist);
+            const fx = (dx / dist) * force;
+            const fy = (dy / dist) * force;
+            body.vx -= fx;
+            body.vy -= fy;
+            // Newton's 3rd law applied in the caller loop to avoid double-counting
+        }
+        return;
+    }
+    // Barnes-Hut criterion: if node is far enough away, treat as aggregate
+    const size = node.x1 - node.x0;
+    if (size * size / distSq < theta * theta) {
+        let dist = Math.sqrt(distSq);
+        if (dist < minDist)
+            dist = minDist;
+        const force = (strength * node.mass * alpha) / (dist * dist);
+        const fx = (dx / dist) * force;
+        const fy = (dy / dist) * force;
+        body.vx -= fx;
+        body.vy -= fy;
+        return;
+    }
+    // Otherwise, recurse into children
+    for (let i = 0; i < 4; i++) {
+        if (node.children[i] !== null) {
+            _walk(node.children[i], body, theta, strength, alpha, minDist);
+        }
+    }
+}

package/dist/sidebar.d.ts

@@ -1,4 +1,5 @@
 import type { LearningGraphSummary } from "backpack-ontology";
+import type { RemoteSummary } from "./api.js";
 export interface SidebarCallbacks {
     onSelect: (name: string) => void;
     onRename?: (oldName: string, newName: string) => void;
@@ -11,6 +12,7 @@ export interface SidebarCallbacks {
 export declare function initSidebar(container: HTMLElement, onSelectOrCallbacks: ((name: string) => void) | SidebarCallbacks): {
     setSummaries(summaries: LearningGraphSummary[]): void;
     setActive(name: string): void;
+    setRemotes(remotes: RemoteSummary[]): void;
     setActiveBranch(graphName: string, branchName: string, allBranches?: {
         name: string;
         active: boolean;