synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/ui-explorer.js

@@ -9,7 +9,7 @@
 import { state, emit, on } from './state.js';
 import { catColor } from './colors.js';
 import { openMemoryCard } from './ui-detail.js';
-import { truncate } from './utils.js';
+import { truncate, debounce, rafThrottle } from './utils.js';
 import { scheduleGraphRemoval, cancelScheduledRemoval, buildCategorySidebar, openColorPicker, editCategoryUI, deleteCategoryUI } from './ui-sidebar.js';
 import { updateCategory as apiUpdateCategory } from './api.js';
 import { KEYS } from './constants.js';
@@ -19,6 +19,30 @@ import { isGuest, hasPermission } from './ui-sync.js';
 
 const $ = (id) => document.getElementById(id);
 
+// Reused across all memory rows — constructing an Intl formatter once is far
+// cheaper than `new Date().toLocaleString(...)` (which builds a formatter on
+// every call) when rendering hundreds of memories per rebuild.
+const _dateFmt = new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
+
+// Render-time indices so a single delegated listener on the tree container can
+// recover the category item / memory node for a clicked row, instead of every
+// row carrying its own click/drag closures (hundreds, re-created on each rebuild).
+// Rebuilt by buildTreeImpl on every render; keyed by the data-cat / data-id the
+// rows already carry, so delegation keeps working under virtualization too.
+const _catIndex = new Map();  // category name → { item, isParent }
+const _memIndex = new Map();  // memory id → node
+
+// Virtualization: the tree is flattened (respecting collapse + filter) into a
+// flat list of row descriptors. Small trees render every row; large trees render
+// only a window around the viewport, so paint/layout AND DOM construction stay
+// bounded no matter how many memories the store holds.
+let _flatRows = [];            // [{ kind:'category'|'memory', depth, item|node, isParent, name }]
+let _virtActive = false;       // true when the windowed renderer is in use
+let _rowH = 24;                // row height in px (CSS min-height; calibrated from a real row)
+let _rowHMeasured = false;
+const VIRT_THRESHOLD = 200;    // flat-row count above which windowing kicks in
+const VIRT_BUFFER = 8;         // extra rows rendered above/below the viewport
+
 /** True when guest and memories permission is disabled */
 function guestReadOnly() { return isGuest() && !hasPermission('memories'); }
 
@@ -259,7 +283,7 @@ function cycleSortMode() {
     sortBtn.setAttribute('data-tooltip', labels[_sortMode]);
   }
 
-  buildTree();
+  scheduleBuildTree();
 }
 
 
@@ -386,94 +410,150 @@ function countFilteredMemories(treeItem) {
 // DOM RENDERING
 // ═══════════════════════════════════════════
 
-function buildTree() {
+// Render entry points. `buildTreeImpl` does the actual DOM work; callers should
+// prefer the coalesced wrappers below so that a burst of rebuilds (several
+// event-bus emits in one tick, or rapid keystrokes) collapses into a single
+// rebuild instead of N full reflows.
+//   • scheduleBuildTree   — rAF-coalesced; one rebuild per frame at most
+//   • debouncedFilterBuild — trailing debounce for the filter input
+// First-open calls buildTreeImpl directly so the panel paints this frame.
+function buildTreeImpl() {
   const container = $('explorer-tree');
   if (!container) return;
 
+  // Reset the delegation indices; flattenTree repopulates them for every visible row.
+  _catIndex.clear();
+  _memIndex.clear();
+
   const treeData = buildTreeData();
-  container.innerHTML = '';
 
+  // Footer counts — computed over the full subtree (collapsed categories still
+  // count their memories), independent of collapse state and the render window.
   let totalMemories = 0;
   let visibleMemories = 0;
-
   for (const item of treeData) {
-    const { el, total, visible } = renderTreeItem(item, 0);
-    if (el) container.appendChild(el);
-    totalMemories += total;
-    visibleMemories += visible;
+    totalMemories += countMemories(item);
+    visibleMemories += countFilteredMemories(item);
   }
-
-  // Update footer
   const countEl = $('explorer-count');
   if (countEl) {
-    if (_filterText) {
-      countEl.textContent = `${visibleMemories} / ${totalMemories} memories`;
-    } else {
-      countEl.textContent = `${totalMemories} memories`;
-    }
+    countEl.textContent = _filterText
+      ? `${visibleMemories} / ${totalMemories} memories`
+      : `${totalMemories} memories`;
   }
 
-  // Highlight selected node
-  if (state.selectedNodeId) {
-    highlightNode(state.selectedNodeId, false);
-  }
+  // Flatten the visible hierarchy into row descriptors.
+  _flatRows = flattenTree(treeData);
 
-  // Wire drag-and-drop (only once per container element)
+  // Wire delegated interaction + drag-and-drop (once per container element).
   if (!container._dragWired) {
     initExplorerDrag(container);
+    container.addEventListener('click', onTreeClick);
+    container.addEventListener('dragstart', onTreeDragStart);
+    container.addEventListener('dragend', onTreeDragEnd);
     container._dragWired = true;
   }
+
+  if (_flatRows.length > VIRT_THRESHOLD) {
+    // Windowed render — only the rows near the viewport are built/painted.
+    _virtActive = true;
+    ensureVirtualDom(container);
+    container._vsizer.style.height = `${_flatRows.length * _rowH}px`;
+    if (container.firstElementChild !== container._vsizer) {
+      container.replaceChildren(container._vsizer);
+    }
+    container._vwindow._start = container._vwindow._end = -1;  // force re-render
+    renderVirtualWindow(container);
+  } else {
+    // Small tree — render every row in a single off-DOM fragment swap.
+    _virtActive = false;
+    const frag = document.createDocumentFragment();
+    for (const row of _flatRows) frag.appendChild(renderFlatRow(row));
+    container.replaceChildren(frag);
+  }
+
+  // Highlight selected node (windowed rows are tagged on render; this also clears
+  // any stale selection in the non-virtualized path).
+  if (state.selectedNodeId) {
+    highlightNode(state.selectedNodeId, false);
+  }
 }
 
-function renderTreeItem(item, depth) {
-  const isParent = item.type === 'parent';
+const scheduleBuildTree = rafThrottle(buildTreeImpl);
+const debouncedFilterBuild = debounce(buildTreeImpl, 120);
+
+// Flatten the (filtered, collapse-aware) category/memory hierarchy into a flat
+// list of row descriptors, populating the delegation indices for every visible
+// row. Children of collapsed categories are skipped. Preserves the original
+// order: a category, then its child categories, then its direct memories.
+function flattenTree(treeData) {
+  const rows = [];
+  const walk = (items, depth) => {
+    for (const item of items) {
+      const filteredMemories = item.memories ? item.memories.filter(matchesFilter) : [];
+      const filteredChildCount = item.children
+        ? item.children.reduce((sum, c) => sum + countFilteredMemories(c), 0)
+        : 0;
+      // Skip categories with nothing matching the active filter.
+      if (_filterText && (filteredMemories.length + filteredChildCount) === 0) continue;
+
+      const isParent = item.type === 'parent';
+      _catIndex.set(item.name, { item, isParent });
+      rows.push({ kind: 'category', item, isParent, depth });
+
+      // Only descend into expanded categories.
+      if (!_collapsed.has(item.name)) {
+        if (item.children) walk(item.children, depth + 1);
+        for (const mem of filteredMemories) {
+          _memIndex.set(mem.id, mem);
+          rows.push({ kind: 'memory', node: mem, depth: depth + 1 });
+        }
+      }
+    }
+  };
+  walk(treeData, 0);
+  return rows;
+}
 
-  // For categories, check if any memories match filter
+function renderFlatRow(row) {
+  return row.kind === 'memory'
+    ? renderMemoryItem(row.node, row.depth)
+    : renderCategoryRow(row.item, row.depth, row.isParent);
+}
+
+// One category row (no children container — the hierarchy lives in _flatRows).
+function renderCategoryRow(item, depth, isParent) {
   const filteredMemories = item.memories ? item.memories.filter(matchesFilter) : [];
   const filteredChildCount = item.children
     ? item.children.reduce((sum, c) => sum + countFilteredMemories(c), 0)
     : 0;
   const totalFiltered = filteredMemories.length + filteredChildCount;
-
   const totalMemories = countMemories(item);
 
-  // Skip if filter active and nothing matches
-  if (_filterText && totalFiltered === 0) {
-    return { el: null, total: totalMemories, visible: 0 };
-  }
-
   const el = document.createElement('div');
   el.className = `explorer-node ${isParent ? 'explorer-parent' : 'explorer-category'}`;
   el.dataset.cat = item.name;
+  el.dataset.expanded = String(!_collapsed.has(item.name));
 
-  const expanded = !_collapsed.has(item.name);
-  el.dataset.expanded = String(expanded);
-
-  // Category row
   const row = document.createElement('div');
   row.className = 'explorer-row';
   row.style.paddingLeft = `${10 + depth * 16}px`;
 
-  // Chevron
+  // Chevron (only when there's expandable content)
   const hasContent = (filteredMemories.length > 0) ||
     (item.children && item.children.some(c => !_filterText || countFilteredMemories(c) > 0));
   const chevron = document.createElement('span');
   chevron.className = 'explorer-chevron';
-  chevron.textContent = hasContent ? '\u25B6' : '';
+  chevron.textContent = hasContent ? '▶' : '';
   row.appendChild(chevron);
 
-  // Color dot (click to change color)
+  // Color dot
   const dot = document.createElement('span');
   dot.className = 'explorer-dot';
-  const color = catColor(item.name);
-  dot.style.background = color;
+  dot.style.background = catColor(item.name);
   dot.setAttribute('data-tooltip', 'Color');
   dot.setAttribute('data-tooltip-pos', 'right');
   dot.style.cursor = 'pointer';
-  dot.addEventListener('click', (e) => {
-    e.stopPropagation();
-    openColorPicker(item.name, el);
-  });
   row.appendChild(dot);
 
   // Label
@@ -484,103 +564,89 @@ function renderTreeItem(item, depth) {
   label.setAttribute('data-tooltip-pos', 'right');
   row.appendChild(label);
 
-  // Badge (count)
+  // Count badge
   const badge = document.createElement('span');
   badge.className = 'explorer-badge';
-  if (_filterText) {
-    badge.textContent = `${totalFiltered}/${totalMemories}`;
-  } else {
-    badge.textContent = String(totalMemories);
-  }
+  badge.textContent = _filterText ? `${totalFiltered}/${totalMemories}` : String(totalMemories);
   row.appendChild(badge);
 
-  // Visibility state indicator (dimmed row when hidden)
-  const isActive = state.activeCategories.has(item.name);
-  if (!isActive) el.classList.add('explorer-hidden-cat');
+  if (!state.activeCategories.has(item.name)) el.classList.add('explorer-hidden-cat');
 
-  // "..." context menu button
+  // "..." options button
   const moreBtn = document.createElement('button');
   moreBtn.className = 'explorer-more';
-  moreBtn.textContent = '\u22EF'; // ⋯
+  moreBtn.textContent = '⋯';
   moreBtn.setAttribute('data-tooltip', 'Options');
   moreBtn.setAttribute('data-tooltip-pos', 'left');
-  moreBtn.addEventListener('click', (e) => {
-    e.stopPropagation();
-    const eyeState = {
-      toggle: () => {
-        const catName = item.name;
-        const childNames = isParent
-          ? Object.entries(state.categoryMetadata)
-              .filter(([, m]) => m.parent === catName)
-              .map(([n]) => n)
-          : [];
-        const targets = [catName, ...childNames];
-
-        if (state.activeCategories.has(catName)) {
-          targets.forEach(c => state.activeCategories.delete(c));
-          el.classList.add('explorer-hidden-cat');
-          scheduleGraphRemoval();
-        } else {
-          targets.forEach(c => state.activeCategories.add(c));
-          el.classList.remove('explorer-hidden-cat');
-          cancelScheduledRemoval();
-          emit('graph:refresh');
-        }
-        emit('categories-changed');
-      }
-    };
-    showCategoryContextMenu(moreBtn, item, isParent, eyeState);
-  });
   row.appendChild(moreBtn);
 
   el.appendChild(row);
+  // All clicks handled by the delegated onTreeClick listener.
+  return el;
+}
 
-  // Click to toggle collapse
-  row.addEventListener('click', (e) => {
-    if (e.target.closest('.explorer-more')) return;
-    if (e.target.closest('.explorer-dot')) return;
-    e.stopPropagation();
-    const wasExpanded = el.dataset.expanded === 'true';
-    el.dataset.expanded = String(!wasExpanded);
-    if (wasExpanded) {
-      _collapsed.add(item.name);
-    } else {
-      _collapsed.delete(item.name);
-    }
-    saveCollapsed();
-  });
-
-  // Children container
-  const childrenEl = document.createElement('div');
-  childrenEl.className = 'explorer-children';
-
-  let visibleCount = 0;
-
-  // Render child categories
-  if (item.children) {
-    for (const child of item.children) {
-      const { el: childEl, visible } = renderTreeItem(child, depth + 1);
-      if (childEl) childrenEl.appendChild(childEl);
-      visibleCount += visible;
-    }
+// ── Windowed (virtualized) rendering ────────
+// A tall sizer creates the scrollbar; an absolutely-positioned window holds only
+// the rows near the viewport, translated into place. Recomputed on rebuild and on
+// scroll (rAF-throttled).
+function ensureVirtualDom(container) {
+  if (container._vsizer) return;
+  const sizer = document.createElement('div');
+  sizer.className = 'explorer-vsizer';
+  sizer.style.position = 'relative';
+  sizer.style.width = '100%';
+  const win = document.createElement('div');
+  win.className = 'explorer-vwindow';
+  win.style.position = 'absolute';
+  win.style.top = '0';
+  win.style.left = '0';
+  win.style.right = '0';
+  win._start = win._end = -1;
+  sizer.appendChild(win);
+  container._vsizer = sizer;
+  container._vwindow = win;
+  if (!container._vscrollWired) {
+    container.addEventListener('scroll', rafThrottle(() => {
+      if (_virtActive) renderVirtualWindow(container);
+    }), { passive: true });
+    container._vscrollWired = true;
   }
+}
 
-  // Render memories directly in this category
-  for (const mem of filteredMemories) {
-    const memEl = renderMemoryItem(mem, depth + 1);
-    childrenEl.appendChild(memEl);
-    visibleCount++;
+function renderVirtualWindow(container) {
+  const sizer = container._vsizer, win = container._vwindow;
+  if (!sizer || !win) return;
+  const total = _flatRows.length;
+  const viewportH = container.clientHeight || 400;
+  const visCount = Math.ceil(viewportH / _rowH);
+  const start = Math.max(0, Math.floor(container.scrollTop / _rowH) - VIRT_BUFFER);
+  const end = Math.min(total, start + visCount + VIRT_BUFFER * 2);
+  if (win._start === start && win._end === end) return;  // window unchanged
+  win._start = start; win._end = end;
+
+  const frag = document.createDocumentFragment();
+  for (let i = start; i < end; i++) frag.appendChild(renderFlatRow(_flatRows[i]));
+  win.replaceChildren(frag);
+  win.style.transform = `translateY(${start * _rowH}px)`;
+
+  // One-time calibration of row height against a real row (handles zoom / CSS drift).
+  if (!_rowHMeasured && win.firstElementChild) {
+    _rowHMeasured = true;
+    const h = win.firstElementChild.getBoundingClientRect().height;
+    if (h > 0 && Math.abs(h - _rowH) > 0.5) {
+      _rowH = h;
+      sizer.style.height = `${total * _rowH}px`;
+      win._start = win._end = -1;  // force recompute with corrected height
+      renderVirtualWindow(container);
+    }
   }
-
-  el.appendChild(childrenEl);
-
-  return { el, total: totalMemories, visible: visibleCount };
 }
 
 function renderMemoryItem(node, depth) {
   const el = document.createElement('div');
   el.className = 'explorer-node explorer-memory';
   el.dataset.id = node.id;
+  _memIndex.set(node.id, node);
 
   if (node.id === state.selectedNodeId) {
     el.classList.add('selected');
@@ -601,7 +667,7 @@ function renderMemoryItem(node, depth) {
   label.className = 'explorer-label';
   const preview = getMemoryLabel(node);
   label.textContent = truncate(preview, 60);
-  const created = node.payload.created_at ? new Date(node.payload.created_at).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' }) : '';
+  const created = node.payload.created_at ? _dateFmt.format(new Date(node.payload.created_at)) : '';
   row.setAttribute('data-tooltip', created ? `${preview}\n${created}` : preview);
   row.setAttribute('data-tooltip-pos', 'right');
   row.appendChild(label);
@@ -620,30 +686,110 @@ function renderMemoryItem(node, depth) {
 
   el.appendChild(row);
 
-  // Click to open detail panel + navigate graph
-  row.addEventListener('click', (e) => {
+  // Row click (open detail + navigate graph) and drag-to-terminal are handled by
+  // the delegated listeners on the container. We still mark the node draggable so
+  // the browser initiates native HTML5 drag; the delegated dragstart reads the id.
+  if (!guestReadOnly()) {
+    el.draggable = true;
+  }
+
+  return el;
+}
+
+
+// ═══════════════════════════════════════════
+// DELEGATED TREE INTERACTION
+// ═══════════════════════════════════════════
+// One set of listeners on the #explorer-tree container handles every row,
+// recovering the category/memory via data-cat/data-id + the render-time indices.
+// Replaces the per-row closures that were re-created on every rebuild, and keeps
+// working under virtualization (rows are recovered by attribute, not by closure).
+
+function onTreeClick(e) {
+  // Color dot → open color picker for the category.
+  const dotEl = e.target.closest('.explorer-dot');
+  if (dotEl) {
+    e.stopPropagation();
+    const nodeEl = dotEl.closest('.explorer-node');
+    const entry = nodeEl && _catIndex.get(nodeEl.dataset.cat);
+    if (entry) openColorPicker(entry.item.name, nodeEl);
+    return;
+  }
+
+  // "..." button → category context menu.
+  const moreBtn = e.target.closest('.explorer-more');
+  if (moreBtn) {
+    e.stopPropagation();
+    const nodeEl = moreBtn.closest('.explorer-node');
+    const entry = nodeEl && _catIndex.get(nodeEl.dataset.cat);
+    if (!entry) return;
+    const { item, isParent } = entry;
+    const eyeState = {
+      toggle: () => {
+        const catName = item.name;
+        const childNames = isParent
+          ? Object.entries(state.categoryMetadata)
+              .filter(([, m]) => m.parent === catName)
+              .map(([n]) => n)
+          : [];
+        const targets = [catName, ...childNames];
+        if (state.activeCategories.has(catName)) {
+          targets.forEach(c => state.activeCategories.delete(c));
+          nodeEl.classList.add('explorer-hidden-cat');
+          scheduleGraphRemoval();
+        } else {
+          targets.forEach(c => state.activeCategories.add(c));
+          nodeEl.classList.remove('explorer-hidden-cat');
+          cancelScheduledRemoval();
+          emit('graph:refresh');
+        }
+        emit('categories-changed');
+      }
+    };
+    showCategoryContextMenu(moreBtn, item, isParent, eyeState);
+    return;
+  }
+
+  // Memory row → open detail panel + navigate graph.
+  const memEl = e.target.closest('.explorer-memory');
+  if (memEl) {
     e.stopPropagation();
+    const node = _memIndex.get(memEl.dataset.id);
+    if (!node) return;
     state.selectedNodeId = node.id;
     openMemoryCard(node);
     emit('graph:navigate', { node, zoom: 'close' });
     emit('node-selected', node);
     highlightNode(node.id, false);
-  });
+    return;
+  }
 
-  // Drag to terminal — feed memory as context to CLI
-  if (!guestReadOnly()) {
-    el.draggable = true;
-    el.addEventListener('dragstart', (e) => {
-      e.dataTransfer.setData('application/x-synabun-memory', node.id);
-      e.dataTransfer.effectAllowed = 'copy';
-      el.classList.add('dragging');
-    });
-    el.addEventListener('dragend', () => {
-      el.classList.remove('dragging');
-    });
+  // Category row → toggle collapse. In the flat model children are separate rows,
+  // so re-flatten + re-render to show/hide them (rAF-coalesced).
+  const catNodeEl = e.target.closest('.explorer-node');
+  if (catNodeEl && e.target.closest('.explorer-row')) {
+    e.stopPropagation();
+    const wasExpanded = catNodeEl.dataset.expanded === 'true';
+    catNodeEl.dataset.expanded = String(!wasExpanded);  // instant chevron feedback
+    const catName = catNodeEl.dataset.cat;
+    if (wasExpanded) _collapsed.add(catName);
+    else _collapsed.delete(catName);
+    saveCollapsed();
+    scheduleBuildTree();
   }
+}
 
-  return el;
+function onTreeDragStart(e) {
+  const memEl = e.target.closest('.explorer-memory');
+  if (!memEl) return;
+  e.dataTransfer.setData('application/x-synabun-memory', memEl.dataset.id);
+  e.dataTransfer.effectAllowed = 'copy';
+  memEl.classList.add('dragging');
+}
+
+function onTreeDragEnd(e) {
+  const memEl = e.target.closest('.explorer-memory');
+  if (memEl) memEl.classList.remove('dragging');
 }
 
 
@@ -655,32 +801,46 @@ function highlightNode(nodeId, scrollIntoView = true) {
   const container = $('explorer-tree');
   if (!container) return;
 
-  // Remove previous highlight
+  // When scrolling to a node, make sure it's visible: if it isn't in the current
+  // flattened list, its category (or parent category) is collapsed — expand and
+  // rebuild. Do this BEFORE clearing/applying selection so the rebuild's own
+  // selection pass doesn't leave a stale highlight.
+  if (nodeId && scrollIntoView && !_flatRows.some(r => r.kind === 'memory' && r.node.id === nodeId)) {
+    const node = state.allNodes?.find(n => n.id === nodeId);
+    const cat = node?.payload?.category || 'uncategorized';
+    let changed = _collapsed.delete(cat);
+    const parent = state.categoryMetadata?.[cat]?.parent;
+    if (parent && _collapsed.delete(parent)) changed = true;
+    if (changed) { saveCollapsed(); buildTreeImpl(); }
+  }
+
+  // Remove previous highlight (after any rebuild above).
   container.querySelectorAll('.explorer-memory.selected').forEach(el => {
     el.classList.remove('selected');
   });
 
   if (!nodeId) return;
 
-  // Find and highlight
+  // In windowed mode the target row may be outside the rendered slice — scroll it
+  // into the viewport and re-render the window so the element exists in the DOM.
+  if (_virtActive && scrollIntoView) {
+    const idx = _flatRows.findIndex(r => r.kind === 'memory' && r.node.id === nodeId);
+    if (idx >= 0) {
+      const rowTop = idx * _rowH;
+      const viewH = container.clientHeight || 400;
+      if (rowTop < container.scrollTop || rowTop + _rowH > container.scrollTop + viewH) {
+        container.scrollTop = Math.max(0, rowTop - Math.floor(viewH / 2));
+      }
+      renderVirtualWindow(container);
+    }
+  }
+
   const memEl = container.querySelector(`.explorer-memory[data-id="${CSS.escape(nodeId)}"]`);
   if (!memEl) return;
-
   memEl.classList.add('selected');
 
-  if (scrollIntoView) {
-    // Expand parent categories if needed
-    let parent = memEl.parentElement;
-    while (parent && parent !== container) {
-      if (parent.classList.contains('explorer-node') && parent.dataset.expanded === 'false') {
-        parent.dataset.expanded = 'true';
-        _collapsed.delete(parent.dataset.cat);
-      }
-      parent = parent.parentElement;
-    }
-    saveCollapsed();
-
-    // Scroll into view
+  // Non-virtualized rows live in normal flow — native scrollIntoView is smoothest.
+  if (scrollIntoView && !_virtActive) {
     memEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
   }
 }
@@ -719,7 +879,7 @@ export function toggleExplorer() {
 
   // Build tree on first show
   if (_visible && !panel.dataset.built) {
-    buildTree();
+    buildTreeImpl();
     panel.dataset.built = '1';
   }
 }
@@ -729,23 +889,23 @@ export function toggleExplorer() {
 // ═══════════════════════════════════════════
 
 function collapseAll() {
-  const container = $('explorer-tree');
-  if (!container) return;
-  container.querySelectorAll('.explorer-node[data-cat]').forEach(el => {
-    el.dataset.expanded = 'false';
-    _collapsed.add(el.dataset.cat);
-  });
+  // Collapse every category by name (walk the data, not the DOM — under windowed
+  // rendering only a slice of rows exists in the DOM).
+  const addNames = (items) => {
+    for (const it of items) {
+      if (it.name) _collapsed.add(it.name);
+      if (it.children) addNames(it.children);
+    }
+  };
+  addNames(buildTreeData());
   saveCollapsed();
+  scheduleBuildTree();
 }
 
 function expandAll() {
-  const container = $('explorer-tree');
-  if (!container) return;
-  container.querySelectorAll('.explorer-node[data-cat]').forEach(el => {
-    el.dataset.expanded = 'true';
-  });
   _collapsed.clear();
   saveCollapsed();
+  scheduleBuildTree();
 }
 
 
@@ -759,6 +919,26 @@ function initResizeHandle() {
   if (!handle || !panel) return;
 
   let dragging = false;
+  let resizeRaf = 0;
+  let pendingWidth = _width;
+
+  const applyResize = () => {
+    resizeRaf = 0;
+    _width = pendingWidth;
+    panel.style.width = `${_width}px`;
+    applyExplorerWidth();
+  };
+  const scheduleResize = (width) => {
+    pendingWidth = width;
+    if (!resizeRaf) resizeRaf = requestAnimationFrame(applyResize);
+  };
+  const flushResize = () => {
+    if (resizeRaf) {
+      cancelAnimationFrame(resizeRaf);
+      resizeRaf = 0;
+    }
+    applyResize();
+  };
 
   handle.addEventListener('mousedown', (e) => {
     e.preventDefault();
@@ -771,14 +951,13 @@ function initResizeHandle() {
   document.addEventListener('mousemove', (e) => {
     if (!dragging) return;
     const newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, e.clientX));
-    _width = newWidth;
-    panel.style.width = `${_width}px`;
-    applyExplorerWidth();
+    scheduleResize(newWidth);
   });
 
   document.addEventListener('mouseup', () => {
     if (!dragging) return;
     dragging = false;
+    flushResize();
     handle.classList.remove('active');
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
@@ -1045,7 +1224,7 @@ function initExplorerDrag(container) {
             topNames.splice(insertIdx, 0, droppedName);
             saved.topLevel = topNames;
             saveExplorerCatOrder(saved);
-            buildTree();
+            scheduleBuildTree();
 
           } else if (target.type === 'reorder-sibling' && target.parentName) {
             // Read current child order within the parent
@@ -1062,7 +1241,7 @@ function initExplorerDrag(container) {
                 if (!saved.children) saved.children = {};
                 saved.children[target.parentName] = childNames;
                 saveExplorerCatOrder(saved);
-                buildTree();
+                scheduleBuildTree();
               }
             }
 
@@ -1091,7 +1270,7 @@ function initExplorerDrag(container) {
                 const presentCats = new Set(state.allNodes.map(n => n.payload.category));
                 buildCategorySidebar(presentCats);
                 emit('graph:refresh');
-                buildTree();
+                scheduleBuildTree();
               } catch (err) {
                 console.error('Explorer: error reparenting category:', err);
               } finally {
@@ -1122,7 +1301,7 @@ function initExplorerDrag(container) {
                 const presentCats = new Set(state.allNodes.map(n => n.payload.category));
                 buildCategorySidebar(presentCats);
                 emit('graph:refresh');
-                buildTree();
+                scheduleBuildTree();
               } catch (err) {
                 console.error('Explorer: error making category top-level:', err);
               } finally {
@@ -1215,7 +1394,7 @@ export function initExplorer() {
     filterInput.addEventListener('input', () => {
       _filterText = filterInput.value.trim();
       filterClear.style.display = _filterText ? '' : 'none';
-      buildTree();
+      debouncedFilterBuild();
     });
   }
   if (filterClear) {
@@ -1224,7 +1403,7 @@ export function initExplorer() {
       _filterText = '';
       if (filterInput) filterInput.value = '';
       filterClear.style.display = 'none';
-      buildTree();
+      scheduleBuildTree();
     });
   }
 
@@ -1265,7 +1444,7 @@ export function initExplorer() {
       cancelScheduledRemoval();
       emit('graph:refresh');
       emit('categories-changed');
-      buildTree();
+      scheduleBuildTree();
     });
   }
   if (deselectAllBtn) {
@@ -1273,7 +1452,7 @@ export function initExplorer() {
       state.activeCategories.clear();
       scheduleGraphRemoval();
       emit('categories-changed');
-      buildTree();
+      scheduleBuildTree();
     });
   }
 
@@ -1287,21 +1466,21 @@ export function initExplorer() {
 
   // Rebuild tree when data changes
   on('data-loaded', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
     else {
       if (panel) delete panel.dataset.built;
     }
   });
 
   on('data:reload', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
     else {
       if (panel) delete panel.dataset.built;
     }
   });
 
   on('categories-changed', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
     else {
       if (panel) delete panel.dataset.built;
     }
@@ -1309,7 +1488,7 @@ export function initExplorer() {
 
   // Also listen to sidebar's colon-separated event (edit/delete/create)
   on('categories:changed', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
     else {
       if (panel) delete panel.dataset.built;
     }
@@ -1317,10 +1496,10 @@ export function initExplorer() {
 
   // Rebuild when permissions arrive or change (context menu items may differ)
   on('session:info', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
   });
   on('permissions:changed', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
   });
 
   // Sync selection from graph click
@@ -1332,11 +1511,11 @@ export function initExplorer() {
 
   // Search integration
   on('search:apply', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
   });
 
   on('search:clear', () => {
-    if (_visible) buildTree();
+    if (_visible) scheduleBuildTree();
   });
 
   // Restore visibility if it was open last time