backpack-viewer 0.2.20 → 0.3.0

package/dist/main.js

@@ -1,4 +1,4 @@
-import { listOntologies, loadOntology, saveOntology, renameOntology, listBranches, createBranch, switchBranch, deleteBranch, listSnapshots, createSnapshot, rollbackSnapshot, } 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";
@@ -9,10 +9,13 @@ import { initShortcuts } from "./shortcuts";
 import { initEmptyState } from "./empty-state";
 import { createHistory } from "./history";
 import { matchKey } from "./keybindings";
+import { initContextMenu } from "./context-menu";
 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 ---
@@ -184,10 +187,21 @@ async function main() {
         exit.textContent = "\u00d7";
         exit.title = "Exit focus (Esc)";
         exit.addEventListener("click", () => toolsPane.clearFocusSet());
+        const walkBtn = document.createElement("button");
+        walkBtn.className = "walk-indicator";
+        if (canvas.getWalkMode())
+            walkBtn.classList.add("active");
+        walkBtn.textContent = "Walk";
+        walkBtn.title = "Toggle walk mode (W) — click nodes to traverse";
+        walkBtn.addEventListener("click", () => {
+            canvas.setWalkMode(!canvas.getWalkMode());
+            walkBtn.classList.toggle("active", canvas.getWalkMode());
+        });
         focusIndicator.appendChild(label);
         focusIndicator.appendChild(minus);
         focusIndicator.appendChild(hopsLabel);
         focusIndicator.appendChild(plus);
+        focusIndicator.appendChild(walkBtn);
         focusIndicator.appendChild(exit);
     }
     function removeFocusIndicator() {
@@ -196,8 +210,65 @@ async function main() {
             focusIndicator = null;
         }
     }
+    // --- Path bar ---
+    const pathBar = document.createElement("div");
+    pathBar.className = "path-bar hidden";
+    canvasContainer.appendChild(pathBar);
+    function showPathBar(path) {
+        pathBar.innerHTML = "";
+        if (!currentData)
+            return;
+        for (let i = 0; i < path.nodeIds.length; i++) {
+            const nodeId = path.nodeIds[i];
+            const node = currentData.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                continue;
+            const label = Object.values(node.properties).find((v) => typeof v === "string") ?? node.id;
+            // Edge label before this node (except the first)
+            if (i > 0) {
+                const edgeId = path.edgeIds[i - 1];
+                const edge = currentData.edges.find((e) => e.id === edgeId);
+                const arrow = document.createElement("span");
+                arrow.className = "path-bar-edge";
+                arrow.textContent = edge ? `→ ${edge.type} →` : "→";
+                pathBar.appendChild(arrow);
+            }
+            const nodeBtn = document.createElement("span");
+            nodeBtn.className = "path-bar-node";
+            nodeBtn.textContent = label;
+            nodeBtn.addEventListener("click", () => canvas.panToNode(nodeId));
+            pathBar.appendChild(nodeBtn);
+        }
+        const closeBtn = document.createElement("button");
+        closeBtn.className = "path-bar-close";
+        closeBtn.textContent = "\u00d7";
+        closeBtn.addEventListener("click", hidePathBar);
+        pathBar.appendChild(closeBtn);
+        pathBar.classList.remove("hidden");
+    }
+    function hidePathBar() {
+        pathBar.classList.add("hidden");
+        pathBar.innerHTML = "";
+        canvas.clearHighlightedPath();
+    }
     canvas = initCanvas(canvasContainer, (nodeIds) => {
         currentSelection = nodeIds ?? [];
+        // Don't touch the path bar when walk mode is active — syncWalkTrail manages it
+        if (!canvas.getWalkMode()) {
+            if (nodeIds && nodeIds.length === 2) {
+                const path = canvas.findPath(nodeIds[0], nodeIds[1]);
+                if (path && path.nodeIds.length > 0) {
+                    canvas.setHighlightedPath(path.nodeIds, path.edgeIds);
+                    showPathBar(path);
+                }
+                else {
+                    hidePathBar();
+                }
+            }
+            else {
+                hidePathBar();
+            }
+        }
         if (nodeIds && nodeIds.length > 0 && currentData) {
             infoPanel.show(nodeIds, currentData);
             if (mobileQuery.matches)
@@ -217,14 +288,16 @@ async function main() {
                 topLeft.appendChild(focusIndicator);
             updateUrl(activeOntology, focus.seedNodeIds);
             infoPanel.setFocusDisabled(focus.hops === 0);
+            syncWalkTrail();
         }
         else {
             removeFocusIndicator();
             infoPanel.setFocusDisabled(false);
             if (activeOntology)
                 updateUrl(activeOntology);
+            syncWalkTrail();
         }
-    }, { lod: cfg.lod, navigation: cfg.navigation });
+    }, { lod: cfg.lod, navigation: cfg.navigation, walk: cfg.walk });
     const search = initSearch(canvasContainer, {
         maxResults: cfg.limits.maxSearchResults,
         debounceMs: cfg.limits.searchDebounceMs,
@@ -248,6 +321,41 @@ async function main() {
             if (currentData)
                 infoPanel.show([nodeId], currentData);
         },
+        onWalkTrailRemove(nodeId) {
+            canvas.removeFromWalkTrail(nodeId);
+            syncWalkTrail();
+        },
+        onWalkIsolate() {
+            if (!currentData)
+                return;
+            const trail = canvas.getWalkTrail();
+            if (trail.length === 0)
+                return;
+            canvas.enterFocus(trail, 0);
+        },
+        async onWalkSaveSnippet(label) {
+            if (!activeOntology || !currentData)
+                return;
+            const trail = canvas.getWalkTrail();
+            if (trail.length < 2)
+                return;
+            const nodeSet = new Set(trail);
+            const edgeIds = currentData.edges
+                .filter((e) => nodeSet.has(e.sourceId) && nodeSet.has(e.targetId))
+                .map((e) => e.id);
+            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);
@@ -399,7 +507,53 @@ async function main() {
             await deleteBranch(graphName, branchName);
             await refreshBranches(graphName);
         },
+        onSnippetLoad: async (graphName, snippetId) => {
+            const snippet = await loadSnippet(graphName, snippetId);
+            if (snippet?.nodeIds?.length > 0) {
+                canvas.enterFocus(snippet.nodeIds, 0);
+            }
+        },
+        onSnippetDelete: async (graphName, snippetId) => {
+            await deleteSnippet(graphName, snippetId);
+            await refreshSnippets(graphName);
+        },
     });
+    function syncWalkTrail() {
+        const trail = canvas.getWalkTrail();
+        if (!currentData || trail.length === 0) {
+            toolsPane.setWalkTrail([]);
+            hidePathBar();
+            return;
+        }
+        const edgeIds = [];
+        const items = trail.map((id, i) => {
+            const node = currentData.nodes.find((n) => n.id === id);
+            let edgeType;
+            if (i > 0) {
+                const prevId = trail[i - 1];
+                const edge = currentData.edges.find((e) => (e.sourceId === prevId && e.targetId === id) ||
+                    (e.targetId === prevId && e.sourceId === id));
+                edgeType = edge?.type;
+                if (edge)
+                    edgeIds.push(edge.id);
+            }
+            return {
+                id,
+                label: node ? (Object.values(node.properties).find((v) => typeof v === "string") ?? node.id) : id,
+                type: node?.type ?? "?",
+                edgeType,
+            };
+        });
+        toolsPane.setWalkTrail(items);
+        // Show path bar for walk trail
+        if (trail.length >= 2) {
+            canvas.setHighlightedPath(trail, edgeIds);
+            showPathBar({ nodeIds: trail, edgeIds });
+        }
+        else {
+            hidePathBar();
+        }
+    }
     async function refreshBranches(graphName) {
         const branches = await listBranches(graphName);
         const active = branches.find((b) => b.active);
@@ -411,8 +565,64 @@ async function main() {
         const snaps = await listSnapshots(graphName);
         toolsPane.setSnapshots(snaps);
     }
+    async function refreshSnippets(graphName) {
+        const snips = await listSnippets(graphName);
+        sidebar.setSnippets(graphName, snips);
+    }
+    // Insert sidebar expand button into top-left bar (before tools toggle)
+    topLeft.insertBefore(sidebar.expandBtn, topLeft.firstChild);
     const shortcuts = initShortcuts(canvasContainer, bindings);
     const emptyState = initEmptyState(canvasContainer);
+    // Context menu (right-click on nodes)
+    const contextMenu = initContextMenu(canvasContainer, {
+        onStar(nodeId) {
+            if (!currentData)
+                return;
+            const node = currentData.nodes.find((n) => n.id === nodeId);
+            if (!node)
+                return;
+            const starred = node.properties._starred === true;
+            node.properties._starred = !starred;
+            saveOntology(activeOntology, currentData);
+            canvas.loadGraph(currentData);
+        },
+        onFocusNode(nodeId) {
+            toolsPane.addToFocusSet([nodeId]);
+        },
+        onExploreInBranch(nodeId) {
+            // Create a branch and enter focus
+            if (activeOntology) {
+                const branchName = `explore-${nodeId.slice(0, 8)}`;
+                createBranch(activeOntology, branchName).then(() => {
+                    switchBranch(activeOntology, branchName).then(() => {
+                        canvas.enterFocus([nodeId], 1);
+                    });
+                });
+            }
+        },
+        onCopyId(nodeId) {
+            navigator.clipboard.writeText(nodeId);
+        },
+    });
+    // Right-click handler for context menu
+    canvasContainer.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        const canvasEl = canvasContainer.querySelector("canvas");
+        if (!canvasEl || !currentData)
+            return;
+        const rect = canvasEl.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const hit = canvas.nodeAtScreen(x, y);
+        if (!hit)
+            return;
+        const node = currentData.nodes.find((n) => n.id === hit.id);
+        if (!node)
+            return;
+        const label = Object.values(node.properties).find((v) => typeof v === "string") ?? node.id;
+        const isStarred = node.properties._starred === true;
+        contextMenu.show(node.id, label, isStarred, e.clientX - rect.left, e.clientY - rect.top);
+    });
     // Apply display defaults from config
     if (!cfg.display.edges)
         canvas.setEdges(false);
@@ -462,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),
@@ -478,9 +689,13 @@ async function main() {
         toolsPane.setData(currentData);
         emptyState.hide();
         updateUrl(name);
-        // Load branches and snapshots
-        await refreshBranches(name);
-        await refreshSnapshots(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));
@@ -504,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);
     }
@@ -586,6 +810,26 @@ async function main() {
         clusteringIncrease() { const p = getLayoutParams(); setLayoutParams({ clusterStrength: Math.min(1, p.clusterStrength + 0.03) }); canvas.reheat(); },
         help() { shortcuts.toggle(); },
         toggleSidebar() { sidebar.toggle(); },
+        walkIsolate() {
+            if (!currentData)
+                return;
+            const trail = canvas.getWalkTrail();
+            if (trail.length === 0)
+                return;
+            // Extract a subgraph of only the trail nodes and edges between them, re-layout as a fresh graph
+            canvas.enterFocus(trail, 0);
+        },
+        walkMode() {
+            // If not in focus mode, enter focus on current selection first
+            if (!canvas.isFocused() && currentSelection.length > 0) {
+                toolsPane.addToFocusSet(currentSelection);
+            }
+            canvas.setWalkMode(!canvas.getWalkMode());
+            const walkBtn = canvasContainer.querySelector(".walk-indicator");
+            if (walkBtn)
+                walkBtn.classList.toggle("active", canvas.getWalkMode());
+            syncWalkTrail();
+        },
         escape() { if (canvas.isFocused()) {
             toolsPane.clearFocusSet();
         }
@@ -628,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);
@@ -645,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/shortcuts.js

@@ -18,6 +18,8 @@ const ACTION_ORDER = [
     "spacingDecrease", "spacingIncrease",
     "clusteringDecrease", "clusteringIncrease",
     "toggleSidebar",
+    "walkMode",
+    "walkIsolate",
     "escape",
 ];
 /** Format a binding string for display (e.g. "ctrl+z" → "Ctrl+Z"). */

package/dist/sidebar.d.ts

@@ -1,17 +1,27 @@
 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;
     onBranchSwitch?: (graphName: string, branchName: string) => void;
     onBranchCreate?: (graphName: string, branchName: string) => void;
     onBranchDelete?: (graphName: string, branchName: string) => void;
+    onSnippetLoad?: (graphName: string, snippetId: string) => void;
+    onSnippetDelete?: (graphName: string, snippetId: string) => void;
 }
 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;
     }[]): void;
+    setSnippets(graphName: string, snippets: {
+        id: string;
+        label: string;
+        nodeCount: number;
+    }[]): void;
     toggle: () => void;
+    expandBtn: HTMLButtonElement;
 };