backpack-viewer 0.3.1 → 0.4.0

package/dist/main.js

@@ -517,7 +517,50 @@ async function main() {
             await deleteSnippet(graphName, snippetId);
             await refreshSnippets(graphName);
         },
+        onBackpackSwitch: async (name) => {
+            await fetch("/api/backpacks/switch", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ name }),
+            });
+            // The dev WS will fire an active-backpack-change event that
+            // triggers refreshBackpacksAndGraphs(). Production server has no
+            // live-reload channel, so we refresh immediately as fallback.
+            await refreshBackpacksAndGraphs();
+        },
+        onBackpackRegister: async (name, p, activate) => {
+            await fetch("/api/backpacks", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ name, path: p, activate }),
+            });
+            await refreshBackpacksAndGraphs();
+        },
     });
+    async function refreshBackpacksAndGraphs() {
+        try {
+            const res = await fetch("/api/backpacks");
+            const list = await res.json();
+            sidebar.setBackpacks(list);
+        }
+        catch { }
+        // Re-fetch ontology list from the (possibly new) active backpack
+        try {
+            const updated = await listOntologies();
+            sidebar.setSummaries(updated);
+            // If the previously-active graph no longer exists, clear it
+            if (activeOntology && !updated.some((g) => g.name === activeOntology)) {
+                activeOntology = "";
+                currentData = null;
+                canvas.loadGraph({
+                    metadata: { name: "", description: "", createdAt: "", updatedAt: "" },
+                    nodes: [],
+                    edges: [],
+                });
+            }
+        }
+        catch { }
+    }
     function syncWalkTrail() {
         const trail = canvas.getWalkTrail();
         if (!currentData || trail.length === 0) {
@@ -719,6 +762,15 @@ async function main() {
             }
         }
     }
+    // Fetch backpack registry first so the picker shows the right active
+    // backpack from the initial render. Fire-and-forget ontology + remote
+    // list in parallel.
+    try {
+        const res = await fetch("/api/backpacks");
+        const list = await res.json();
+        sidebar.setBackpacks(list);
+    }
+    catch { }
     // Load ontology list (local + remote in parallel)
     const [summaries, remotes] = await Promise.all([
         listOntologies(),
@@ -871,6 +923,11 @@ async function main() {
     });
     // Live reload — when Claude adds nodes via MCP, re-fetch and re-render
     if (import.meta.hot) {
+        // Hot-swap when the active backpack changes (via /api/backpacks/switch
+        // or the user clicking the picker on another viewer tab)
+        import.meta.hot.on("active-backpack-change", async () => {
+            await refreshBackpacksAndGraphs();
+        });
         import.meta.hot.on("ontology-change", async () => {
             const [updated, updatedRemotes] = await Promise.all([
                 listOntologies(),

package/dist/sidebar.d.ts

@@ -1,5 +1,11 @@
 import type { LearningGraphSummary } from "backpack-ontology";
 import type { RemoteSummary } from "./api.js";
+export interface BackpackSummary {
+    name: string;
+    path: string;
+    color: string;
+    active?: boolean;
+}
 export interface SidebarCallbacks {
     onSelect: (name: string) => void;
     onRename?: (oldName: string, newName: string) => void;
@@ -8,8 +14,13 @@ export interface SidebarCallbacks {
     onBranchDelete?: (graphName: string, branchName: string) => void;
     onSnippetLoad?: (graphName: string, snippetId: string) => void;
     onSnippetDelete?: (graphName: string, snippetId: string) => void;
+    onBackpackSwitch?: (name: string) => void;
+    onBackpackRegister?: (name: string, path: string, activate: boolean) => void;
 }
 export declare function initSidebar(container: HTMLElement, onSelectOrCallbacks: ((name: string) => void) | SidebarCallbacks): {
+    setBackpacks(list: BackpackSummary[]): void;
+    setActiveBackpack(entry: BackpackSummary): void;
+    getActiveBackpack(): BackpackSummary | null;
     setSummaries(summaries: LearningGraphSummary[]): void;
     setActive(name: string): void;
     setRemotes(remotes: RemoteSummary[]): void;

package/dist/sidebar.js

@@ -51,6 +51,112 @@ export function initSidebar(container, onSelectOrCallbacks) {
     headingRow.appendChild(heading);
     headingRow.appendChild(collapseBtn);
     container.appendChild(headingRow);
+    // Backpack picker pill — discrete indicator of the active backpack with
+    // a dropdown to switch between registered ones.
+    const backpackPicker = document.createElement("button");
+    backpackPicker.className = "backpack-picker-pill";
+    backpackPicker.type = "button";
+    backpackPicker.setAttribute("aria-haspopup", "listbox");
+    backpackPicker.setAttribute("aria-expanded", "false");
+    const pickerDot = document.createElement("span");
+    pickerDot.className = "backpack-picker-dot";
+    const pickerName = document.createElement("span");
+    pickerName.className = "backpack-picker-name";
+    pickerName.textContent = "...";
+    const pickerCaret = document.createElement("span");
+    pickerCaret.className = "backpack-picker-caret";
+    pickerCaret.textContent = "▾";
+    backpackPicker.appendChild(pickerDot);
+    backpackPicker.appendChild(pickerName);
+    backpackPicker.appendChild(pickerCaret);
+    const pickerDropdown = document.createElement("div");
+    pickerDropdown.className = "backpack-picker-dropdown";
+    pickerDropdown.hidden = true;
+    pickerDropdown.setAttribute("role", "listbox");
+    const pickerContainer = document.createElement("div");
+    pickerContainer.className = "backpack-picker-container";
+    pickerContainer.appendChild(backpackPicker);
+    pickerContainer.appendChild(pickerDropdown);
+    container.appendChild(pickerContainer);
+    let pickerOpen = false;
+    function closePicker() {
+        pickerOpen = false;
+        pickerDropdown.hidden = true;
+        backpackPicker.setAttribute("aria-expanded", "false");
+    }
+    function openPicker() {
+        pickerOpen = true;
+        pickerDropdown.hidden = false;
+        backpackPicker.setAttribute("aria-expanded", "true");
+    }
+    backpackPicker.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (pickerOpen)
+            closePicker();
+        else
+            openPicker();
+    });
+    // Click outside closes the dropdown
+    document.addEventListener("click", (e) => {
+        if (!pickerContainer.contains(e.target))
+            closePicker();
+    });
+    let currentBackpacks = [];
+    let currentActiveBackpack = null;
+    function renderPickerDropdown() {
+        pickerDropdown.replaceChildren();
+        for (const b of currentBackpacks) {
+            const item = document.createElement("button");
+            item.className = "backpack-picker-item";
+            item.type = "button";
+            item.setAttribute("role", "option");
+            if (b.active)
+                item.classList.add("active");
+            const dot = document.createElement("span");
+            dot.className = "backpack-picker-item-dot";
+            dot.style.setProperty("--backpack-color", b.color);
+            const name = document.createElement("span");
+            name.className = "backpack-picker-item-name";
+            name.textContent = b.name;
+            const path = document.createElement("span");
+            path.className = "backpack-picker-item-path";
+            path.textContent = b.path;
+            item.appendChild(dot);
+            item.appendChild(name);
+            item.appendChild(path);
+            item.addEventListener("click", (e) => {
+                e.stopPropagation();
+                closePicker();
+                if (!b.active && cbs.onBackpackSwitch) {
+                    cbs.onBackpackSwitch(b.name);
+                }
+            });
+            pickerDropdown.appendChild(item);
+        }
+        // Separator + "Add new backpack..." action
+        const divider = document.createElement("div");
+        divider.className = "backpack-picker-divider";
+        pickerDropdown.appendChild(divider);
+        const addItem = document.createElement("button");
+        addItem.className = "backpack-picker-item backpack-picker-add";
+        addItem.type = "button";
+        addItem.textContent = "+ Add new backpack…";
+        addItem.addEventListener("click", async (e) => {
+            e.stopPropagation();
+            closePicker();
+            if (!cbs.onBackpackRegister)
+                return;
+            const name = await showPrompt("Backpack name", "Short kebab-case name (e.g. work, family, project-alpha)", "");
+            if (!name)
+                return;
+            const p = await showPrompt("Backpack path", "Absolute or tilde-expanded path to the graphs directory", "");
+            if (!p)
+                return;
+            const activate = await showConfirm("Switch to new backpack?", `Make "${name}" the active backpack immediately?`);
+            cbs.onBackpackRegister(name, p, activate);
+        });
+        pickerDropdown.appendChild(addItem);
+    }
     // Expand button — inserted into the canvas top-left bar when sidebar is collapsed
     const expandBtn = document.createElement("button");
     expandBtn.className = "tools-pane-toggle hidden";
@@ -79,6 +185,36 @@ export function initSidebar(container, onSelectOrCallbacks) {
         }
     });
     return {
+        setBackpacks(list) {
+            currentBackpacks = list.slice();
+            const active = list.find((b) => b.active) ?? null;
+            currentActiveBackpack = active;
+            if (active) {
+                pickerName.textContent = active.name;
+                pickerDot.style.setProperty("--backpack-color", active.color);
+                container.style.setProperty("--backpack-color", active.color);
+            }
+            renderPickerDropdown();
+        },
+        setActiveBackpack(entry) {
+            currentActiveBackpack = entry;
+            // Update the currentBackpacks list to reflect the new active
+            currentBackpacks = currentBackpacks.map((b) => ({
+                ...b,
+                active: b.name === entry.name,
+            }));
+            // If this name wasn't in the list (newly registered), include it
+            if (!currentBackpacks.some((b) => b.name === entry.name)) {
+                currentBackpacks.push({ ...entry, active: true });
+            }
+            pickerName.textContent = entry.name;
+            pickerDot.style.setProperty("--backpack-color", entry.color);
+            container.style.setProperty("--backpack-color", entry.color);
+            renderPickerDropdown();
+        },
+        getActiveBackpack() {
+            return currentActiveBackpack;
+        },
         setSummaries(summaries) {
             list.innerHTML = "";
             // Fetch all locks in one batch request, then distribute to items

package/dist/style.css

@@ -110,6 +110,9 @@ body {
   min-width: 280px;
   background: var(--bg-surface);
   border-right: 1px solid var(--border);
+  /* Colored left border accents the active backpack — color is set via
+     CSS custom property --backpack-color updated on switch */
+  border-left: 3px solid var(--backpack-color, transparent);
   display: flex;
   flex-direction: column;
   padding: 16px;
@@ -315,6 +318,129 @@ body {
   opacity: 1;
 }
 
+/* --- Backpack picker (active backpack indicator + switcher) --- */
+
+.backpack-picker-container {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.backpack-picker-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 8px;
+  background: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--fg);
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.backpack-picker-pill:hover {
+  border-color: var(--backpack-color, var(--accent));
+}
+
+.backpack-picker-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--backpack-color, var(--accent));
+  flex-shrink: 0;
+}
+
+.backpack-picker-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.backpack-picker-caret {
+  opacity: 0.6;
+  font-size: 10px;
+}
+
+.backpack-picker-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px var(--shadow);
+  z-index: 50;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.backpack-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.backpack-picker-item:hover {
+  background: var(--bg-hover);
+}
+
+.backpack-picker-item.active {
+  background: var(--bg-hover);
+  font-weight: 600;
+}
+
+.backpack-picker-item-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--backpack-color, var(--accent));
+  flex-shrink: 0;
+}
+
+.backpack-picker-item-name {
+  flex-shrink: 0;
+}
+
+.backpack-picker-item-path {
+  flex: 1;
+  opacity: 0.55;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 9px;
+  text-align: right;
+}
+
+.backpack-picker-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 0;
+}
+
+.backpack-picker-add {
+  opacity: 0.75;
+  font-style: italic;
+}
+
 .sidebar-lock-badge {
   font-size: 10px;
   color: #c08c00;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-viewer",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Web-based graph visualizer for backpack-ontology — Canvas 2D, force-directed layout, live reload",
   "license": "Apache-2.0",
   "author": "Noah Irzinger",
@@ -23,7 +23,7 @@
     "release:major": "npm version major && git push && git push --tags"
   },
   "dependencies": {
-    "backpack-ontology": "^0.3.0"
+    "backpack-ontology": "^0.4.0"
   },
   "devDependencies": {
     "@types/node": "^25.5.0",