@bod.ee/db 0.12.6 → 0.13.1

package/admin/src/client/types.ts

@@ -0,0 +1,28 @@
+export class ValueSnapshot {
+  constructor(
+    public path: string,
+    private _data: unknown,
+    public updatedAt?: number,
+  ) {}
+  val() { return this._data; }
+  get key() { return this.path.split('/').pop()!; }
+  exists() { return this._data !== null && this._data !== undefined; }
+}
+
+export interface ChildEvent {
+  type: 'added' | 'changed' | 'removed';
+  key: string;
+  path: string;
+  val: () => unknown;
+}
+
+export interface FilterSpec {
+  field: string;
+  op: string;
+  value: unknown;
+}
+
+export interface OrderSpec {
+  field: string;
+  dir: 'asc' | 'desc';
+}

package/admin/src/components/MetricsBar.tsx

@@ -0,0 +1,167 @@
+import { useRef, useEffect, useState } from 'react';
+import { useStats } from '../context/StatsContext';
+import { useDb } from '../context/DbContext';
+import { db } from '../context/DbContext';
+import Sparkline, { SparklineHandle } from './Sparkline';
+
+function fmtUptime(sec: number) {
+  if (sec < 60) return sec + 's';
+  if (sec < 3600) return Math.floor(sec / 60) + 'm ' + (sec % 60) + 's';
+  return Math.floor(sec / 3600) + 'h ' + Math.floor((sec % 3600) / 60) + 'm';
+}
+
+export default function MetricsBar() {
+  const { stats, statsEnabled, toggleStats } = useStats();
+  const { connected } = useDb();
+  const [ping, setPing] = useState<number | null>(null);
+
+  const cpuRef = useRef<SparklineHandle>(null);
+  const heapRef = useRef<SparklineHandle>(null);
+  const rssRef = useRef<SparklineHandle>(null);
+  const nodesRef = useRef<SparklineHandle>(null);
+  const pingRef = useRef<SparklineHandle>(null);
+
+  const pingValueRef = useRef<number>(0);
+
+  // Ping: measure WS round-trip every 5s
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      try {
+        const t0 = performance.now();
+        await db.get('__ping__');
+        const ms = Math.round(performance.now() - t0);
+        pingValueRef.current = ms;
+        setPing(ms);
+      } catch {}
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Push all sparklines on every stats tick (1s)
+  useEffect(() => {
+    if (stats) {
+      cpuRef.current?.push(stats.process.cpuPercent);
+      heapRef.current?.push(stats.process.heapUsedMb);
+      rssRef.current?.push(stats.process.rssMb);
+      nodesRef.current?.push(stats.db.nodeCount);
+      pingRef.current?.push(pingValueRef.current);
+    }
+  }, [stats]);
+
+  const cpu = stats?.process.cpuPercent;
+  const replCard = stats?.repl;
+  const dbPath = stats?.db.path as string | undefined;
+  const dbPathName = dbPath ? (dbPath.includes('/') ? dbPath.substring(dbPath.lastIndexOf('/') + 1) : dbPath) : null;
+  const dbPathDir = dbPath ? (dbPath.includes('/') ? dbPath.substring(0, dbPath.lastIndexOf('/')) : '.') : null;
+  const dbPathIsLocal = dbPath ? (!dbPath.startsWith('http') && !dbPath.startsWith('ws') && dbPath !== ':memory:') : false;
+
+  return (
+    <>
+      <div className="metric-card">
+        <div className="metric-top">
+          <span className="metric-label">CPU</span>
+          <span className={`metric-value${cpu != null && cpu > 80 ? ' warn' : ''}`}>{cpu != null ? cpu + '%' : '—'}</span>
+        </div>
+        <Sparkline ref={cpuRef} color="#ce9178" />
+        <div style={{ fontSize: 10, color: '#555', marginTop: 'auto' }}>
+          sys <span>{stats?.system?.cpuPercent ?? '—'}%</span> · <span>{stats?.system?.cpuCores ?? '—'}</span> cores
+        </div>
+      </div>
+
+      <div className="metric-card">
+        <div className="metric-top">
+          <span className="metric-label">Heap</span>
+          <span className="metric-value">{stats ? stats.process.heapUsedMb + ' MB' : '—'}</span>
+        </div>
+        <Sparkline ref={heapRef} color="#569cd6" />
+      </div>
+
+      <div className="metric-card">
+        <div className="metric-top">
+          <span className="metric-label">RSS</span>
+          <span className="metric-value">{stats ? stats.process.rssMb + ' MB' : '—'}</span>
+        </div>
+        <Sparkline ref={rssRef} color="#9cdcfe" />
+        <div style={{ fontSize: 10, color: '#555', marginTop: 'auto' }}>
+          of <span>{stats?.system ? (stats.system.totalMemMb / 1024).toFixed(1) + ' GB' : '—'}</span> total
+        </div>
+      </div>
+
+      <div className="metric-card">
+        <div className="metric-top">
+          <span className="metric-label">Nodes</span>
+          <span className="metric-value">{stats?.db.nodeCount ?? '—'}</span>
+        </div>
+        <Sparkline ref={nodesRef} color="#4ec9b0" />
+        <div style={{ fontSize: 10, color: '#555', marginTop: 'auto' }}>
+          <span>{stats?.db.sizeMb ?? '—'}</span> MB on disk
+        </div>
+      </div>
+
+      <div className="metric-card">
+        <div className="metric-top">
+          <span className="metric-label">Ping</span>
+          <span className={`metric-value${ping != null && ping > 200 ? ' warn' : ''}`}>{ping != null ? ping + ' ms' : '—'}</span>
+        </div>
+        <Sparkline ref={pingRef} color="#c586c0" />
+      </div>
+
+      <div style={{ marginLeft: 'auto', display: 'flex', flexShrink: 0 }}>
+        {replCard && (
+          <div className="metric-card" style={{ borderLeft: '1px solid #282828', width: 180 }}>
+            <div className="metric-top">
+              <span className="metric-label">Replication</span>
+              <span className="metric-value dim">{replCard.role}</span>
+            </div>
+            <div style={{ marginTop: 4, fontSize: 10 }}>
+              {replCard.sources.length ? replCard.sources.map((src, i) => {
+                const dot = src.connected ? <span style={{ color: '#4ec9b0' }}>●</span> : <span style={{ color: '#f48771' }}>●</span>;
+                const pend = src.pending;
+                const pendColor = pend > 100 ? '#f48771' : pend > 10 ? '#ce9178' : '#4ec9b0';
+                const prefix = src.localPrefix ? `→${src.localPrefix}/` : '';
+                return (
+                  <span key={i} style={{ color: '#555', display: 'block' }}>
+                    {dot} {src.paths.join(',')} {prefix} <span style={{ color: pendColor }}>{pend} behind</span> · {src.eventsApplied}ev
+                  </span>
+                );
+              }) : <span style={{ color: '#555' }}>no sources</span>}
+            </div>
+          </div>
+        )}
+        <div className="metric-card" style={{ borderLeft: '1px solid #282828' }}>
+          <div className="metric-top">
+            <span className="metric-label">Uptime</span>
+            <span className="metric-value dim" style={{ fontSize: 11 }}>{stats ? fmtUptime(stats.process.uptimeSec) : '—'}</span>
+          </div>
+          <div style={{ fontSize: 10, color: '#555', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '4px 0', marginTop: 4, lineHeight: '13px' }}>
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, height: 13 }}>
+              <span className="metric-label" style={{ color: '#555', lineHeight: '13px' }}>WS</span>
+              <span onClick={toggleStats} title="Toggle server stats collection"
+                style={{ cursor: 'pointer', userSelect: 'none', display: 'inline-flex', alignItems: 'center',
+                  width: 20, height: 10, borderRadius: 5, padding: '0 2px', boxSizing: 'border-box', flexShrink: 0,
+                  background: statsEnabled ? '#1a3a2a' : '#1c1c1c',
+                  border: '1px solid ' + (statsEnabled ? '#2a5a3a' : '#2e2e2e'),
+                  transition: 'background 0.2s, border-color 0.2s', justifyContent: statsEnabled ? 'flex-end' : 'flex-start' }}>
+                <span style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0,
+                  background: statsEnabled ? '#4ec9b0' : '#3a3a3a', display: 'inline-block',
+                  ...(statsEnabled ? { animation: 'pulse 1.5s infinite' } : {}) }}></span>
+              </span>
+            </span>
+            <span style={{ textAlign: 'right', lineHeight: '13px' }}>{stats ? new Date(stats.ts).toLocaleTimeString() : '—'}</span>
+            <span style={{ lineHeight: '13px' }}>{stats?.subs ?? 0} subs</span>
+            <span style={{ textAlign: 'right', lineHeight: '13px' }}>v{stats?.version ?? '—'}</span>
+            <span style={{ lineHeight: '13px' }}>{stats?.clients ?? 0} clients</span>
+            <span style={{ textAlign: 'right', lineHeight: '13px' }}>
+              {dbPath && (dbPathIsLocal ? (
+                <a href="#" onClick={(e) => { e.preventDefault(); fetch(`/open-folder?path=${encodeURIComponent(dbPath)}`); }}
+                  style={{ color: '#444', textDecoration: 'none', cursor: 'pointer' }} title={dbPath}>./{dbPathName}</a>
+              ) : (
+                <span style={{ color: '#333' }} title={dbPath}>{dbPath}</span>
+              ))}
+            </span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/admin/src/components/Sparkline.tsx

@@ -0,0 +1,72 @@
+import { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
+
+const SPARK_POINTS = 60;
+
+function hexToRgba(hex: string, a: number) {
+  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${a})`;
+}
+
+export interface SparklineHandle {
+  push(v: number): void;
+}
+
+interface Props {
+  color?: string;
+  id?: string;
+}
+
+const Sparkline = forwardRef<SparklineHandle, Props>(({ color = '#4ec9b0', id }, ref) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const dataRef = useRef<number[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    push(v: number) {
+      dataRef.current.push(v);
+      if (dataRef.current.length > SPARK_POINTS) dataRef.current.shift();
+      draw();
+    },
+  }));
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const dpr = window.devicePixelRatio || 1;
+    const w = canvas.clientWidth || 100, h = canvas.clientHeight || 28;
+    canvas.width = w * dpr; canvas.height = h * dpr;
+    const ctx = canvas.getContext('2d')!;
+    ctx.scale(dpr, dpr);
+  }, []);
+
+  function draw() {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d')!;
+    const dpr = window.devicePixelRatio || 1;
+    const W = canvas.width / dpr, H = canvas.height / dpr;
+    const data = dataRef.current;
+    ctx.clearRect(0, 0, W, H);
+    if (data.length < 2) return;
+    const min = Math.min(...data), max = Math.max(...data), range = max - min;
+    const xStep = W / (SPARK_POINTS - 1), pad = 2;
+    const yScale = (v: number) => range === 0 ? H / 2 : H - pad - ((v - min) / range) * (H - pad * 2);
+    const x0 = (SPARK_POINTS - data.length) * xStep;
+    ctx.beginPath();
+    ctx.moveTo(x0, H);
+    data.forEach((v, i) => ctx.lineTo(x0 + i * xStep, yScale(v)));
+    ctx.lineTo(x0 + (data.length - 1) * xStep, H);
+    ctx.closePath();
+    ctx.fillStyle = hexToRgba(color, 0.15);
+    ctx.fill();
+    ctx.beginPath();
+    data.forEach((v, i) => { const x = x0 + i * xStep; i === 0 ? ctx.moveTo(x, yScale(v)) : ctx.lineTo(x, yScale(v)); });
+    ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.stroke();
+    const lv = data[data.length - 1];
+    ctx.beginPath(); ctx.arc(x0 + (data.length - 1) * xStep, yScale(lv), 2.5, 0, Math.PI * 2);
+    ctx.fillStyle = color; ctx.fill();
+  }
+
+  return <canvas id={id} ref={canvasRef} className="metric-canvas" width={100} height={28} />;
+});
+
+export default Sparkline;

package/admin/src/components/TreePane.tsx

@@ -0,0 +1,287 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { db } from '../context/DbContext';
+import { useDb } from '../context/DbContext';
+
+declare global {
+  interface Window { _vfsItems?: unknown[]; }
+}
+
+const OPEN_KEY = 'zuzdb:treeOpen';
+const showAdmin = new URLSearchParams(location.search).has('showAdmin');
+
+function getOpenPaths(): Set<string> {
+  const open = new Set<string>();
+  document.querySelectorAll('#tree-container details[open]').forEach((d) => {
+    open.add((d as HTMLElement).dataset.path!);
+  });
+  return open;
+}
+function saveOpenPaths(open: Set<string>) {
+  try { localStorage.setItem(OPEN_KEY, JSON.stringify([...open])); } catch {}
+}
+function loadOpenPaths(): Set<string> {
+  try { return new Set(JSON.parse(localStorage.getItem(OPEN_KEY) ?? '[]')); } catch { return new Set(); }
+}
+function escHtml(s: string) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+
+interface ShallowChild {
+  key: string;
+  isLeaf: boolean;
+  value?: unknown;
+  count?: number;
+  ttl?: number;
+}
+
+export function selectPath(path: string) {
+  const rwPath = document.getElementById('rw-path') as HTMLInputElement;
+  const subPath = document.getElementById('sub-path') as HTMLInputElement;
+  const qPath = document.getElementById('q-path') as HTMLInputElement;
+  const viewPath = document.getElementById('view-path');
+  const viewTime = document.getElementById('view-time');
+  const viewResult = document.getElementById('view-result');
+  if (rwPath) rwPath.value = path;
+  if (subPath) subPath.value = path;
+  if (qPath) qPath.value = path.includes('/') ? path.split('/').slice(0, -1).join('/') : path;
+  // Switch to view tab
+  const tabEvent = new CustomEvent('zuzdb:selectPath', { detail: path });
+  window.dispatchEvent(tabEvent);
+  if (viewPath) viewPath.textContent = path;
+  if (viewTime) viewTime.textContent = '';
+  if (viewResult) viewResult.textContent = 'Loading…';
+  const t0 = performance.now();
+  db.getSnapshot(path).then(snap => {
+    const elapsed = (performance.now() - t0).toFixed(1) + ' ms';
+    const updated = snap.updatedAt ? new Date(snap.updatedAt).toLocaleString() : '';
+    if (viewTime) viewTime.textContent = elapsed + (updated ? ` · updated ${updated}` : '');
+    if (viewResult) viewResult.textContent = JSON.stringify(snap.val(), null, 2);
+  }).catch(e => {
+    if (viewTime) viewTime.textContent = (performance.now() - t0).toFixed(1) + ' ms';
+    if (viewResult) viewResult.textContent = 'Error: ' + e.message;
+  });
+}
+
+export default function TreePane() {
+  const { connected } = useDb();
+  const loadedPathsRef = useRef(new Set<string>());
+  const treeGenRef = useRef(0);
+  const restoredOpenRef = useRef<Set<string>>(loadOpenPaths());
+  const treeUnsubs = useRef(new Map<string, () => void>());
+  const pendingChangedPaths = useRef(new Set<string>());
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastAdminRefresh = useRef(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const nodeCountRef = useRef<HTMLSpanElement>(null);
+
+  async function fetchChildren(path?: string): Promise<ShallowChild[]> {
+    try {
+      return (await db.getShallow(path || undefined) as ShallowChild[]) || [];
+    } catch { return []; }
+  }
+
+  function renderChildren(children: ShallowChild[], parentPath: string): string {
+    let html = '';
+    for (const ch of children) {
+      const path = parentPath ? parentPath + '/' + ch.key : ch.key;
+      if (!showAdmin && path.startsWith('_admin')) continue;
+      const ttlBadge = ch.ttl != null && ch.ttl >= 0
+        ? `<span class="ttl-badge" title="Expires in ${ch.ttl}s">${ch.ttl}s</span>`
+        : ch.ttl === -1 ? '<span class="ttl-badge" title="Contains TTL entries">ttl</span>' : '';
+      if (ch.isLeaf) {
+        const raw = typeof ch.value === 'object' && ch.value !== null ? JSON.stringify(ch.value) : String(ch.value ?? '');
+        const display = raw.length > 36 ? raw.slice(0, 36) + '…' : raw;
+        html += `<div class="tree-leaf" data-path="${escHtml(path)}" onclick="window.__treeSelectPath('${path.replace(/'/g, "\\'")}')">`
+          + `<span class="tree-key">${escHtml(ch.key)}</span>${ttlBadge}`
+          + `<span class="tree-val">${escHtml(String(display ?? ''))}</span></div>`;
+      } else {
+        const isOpen = restoredOpenRef.current.has(path);
+        const countBadge = ch.count != null ? `<span class="count-badge">${ch.count}</span>` : '';
+        html += `<details data-path="${escHtml(path)}"${isOpen ? ' open' : ''}>`
+          + `<summary><span class="tree-label" onclick="window.__treeSelectPath('${path.replace(/'/g, "\\'")}')">${escHtml(ch.key)}</span>${ttlBadge}${countBadge}</summary>`
+          + `<div class="tree-children" data-parent="${escHtml(path)}"></div></details>`;
+      }
+    }
+    return html;
+  }
+
+  function updateNodeCount() {
+    if (!containerRef.current || !nodeCountRef.current) return;
+    const leaves = containerRef.current.querySelectorAll('.tree-leaf').length;
+    const branches = containerRef.current.querySelectorAll('details').length;
+    nodeCountRef.current.textContent = `${leaves} leaves, ${branches} branches`;
+  }
+
+  function flashPaths(paths: string[]) {
+    for (const path of paths) {
+      let el = containerRef.current?.querySelector(`[data-path="${CSS.escape(path)}"]`) as HTMLElement | null;
+      if (!el) {
+        const parts = path.split('/');
+        while (parts.length > 1) {
+          parts.pop();
+          el = containerRef.current?.querySelector(`[data-path="${CSS.escape(parts.join('/'))}"]`) as HTMLElement | null;
+          if (el) break;
+        }
+      }
+      if (el) { el.classList.add('flash'); setTimeout(() => el!.classList.remove('flash'), 1200); }
+    }
+  }
+
+  function attachToggleListeners(root: Element) {
+    root.querySelectorAll('details').forEach(d => {
+      if ((d as HTMLElement & { _treeListener?: boolean })._treeListener) return;
+      (d as HTMLElement & { _treeListener?: boolean })._treeListener = true;
+      d.addEventListener('toggle', () => {
+        saveOpenPaths(getOpenPaths());
+        if ((d as HTMLDetailsElement).open) expandNode(d as HTMLDetailsElement);
+      }, { passive: true });
+    });
+  }
+
+  const expandNode = useCallback(async (details: HTMLDetailsElement, isRefresh?: boolean) => {
+    const path = details.dataset.path!;
+    if (loadedPathsRef.current.has(path)) return;
+    loadedPathsRef.current.add(path);
+    const gen = treeGenRef.current;
+    const prevOpen = new Set<string>();
+    if (isRefresh) {
+      details.querySelectorAll('details[open]').forEach(d => prevOpen.add((d as HTMLElement).dataset.path!));
+    }
+    const childContainer = details.querySelector(':scope > .tree-children') as HTMLElement | null;
+    if (!childContainer) return;
+    const children = await fetchChildren(path);
+    if (gen !== treeGenRef.current) return;
+    for (const p of prevOpen) restoredOpenRef.current.add(p);
+    childContainer.innerHTML = renderChildren(children, path);
+    for (const det of childContainer.querySelectorAll(':scope details[open]')) {
+      expandNode(det as HTMLDetailsElement);
+    }
+    attachToggleListeners(childContainer);
+    updateNodeCount();
+  }, []);
+
+  function subscribeTreeLive(topLevelKeys: string[]) {
+    const NOISY = new Set(['stress', '_admin']);
+    for (const [key, unsub] of treeUnsubs.current) {
+      if (!topLevelKeys.includes(key)) { unsub(); treeUnsubs.current.delete(key); }
+    }
+    for (const key of topLevelKeys.filter(k => !NOISY.has(k))) {
+      if (treeUnsubs.current.has(key)) continue;
+      const unsub = db.onChild(key, (ev) => debouncedLoadTree(ev.path));
+      treeUnsubs.current.set(key, unsub);
+    }
+  }
+
+  function debouncedLoadTree(path: string) {
+    pendingChangedPaths.current.add(path);
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    debounceTimer.current = setTimeout(() => {
+      const paths = [...pendingChangedPaths.current];
+      pendingChangedPaths.current.clear();
+      const roots = new Set<string>();
+      for (const p of paths) {
+        const top = p.split('/')[0];
+        if (top === '_admin') {
+          const now = Date.now();
+          if (now - lastAdminRefresh.current < 3000) continue;
+          lastAdminRefresh.current = now;
+        }
+        roots.add(top);
+      }
+      for (const r of roots) refreshPath(r);
+    }, 300);
+  }
+
+  const refreshPath = useCallback(async (path: string) => {
+    const parts = path.split('/');
+    let target = '';
+    for (let i = 1; i <= parts.length; i++) {
+      const p = parts.slice(0, i).join('/');
+      if (loadedPathsRef.current.has(p)) target = p;
+    }
+    if (!target) {
+      const topKey = parts[0];
+      const existing = containerRef.current?.querySelector(`[data-path="${CSS.escape(topKey)}"]`);
+      if (!existing) { return loadTree([path]); }
+      flashPaths([path]);
+      return;
+    }
+    for (const p of [...loadedPathsRef.current]) {
+      if (p === target || p.startsWith(target + '/')) loadedPathsRef.current.delete(p);
+    }
+    const det = containerRef.current?.querySelector(`details[data-path="${CSS.escape(target)}"]`) as HTMLDetailsElement | null;
+    if (det && det.open) {
+      await expandNode(det, true);
+      flashPaths([path]);
+    } else {
+      flashPaths([path]);
+    }
+  }, [expandNode]);
+
+  const loadTree = useCallback(async (changedPaths?: string[]) => {
+    loadedPathsRef.current.clear();
+    const gen = ++treeGenRef.current;
+    restoredOpenRef.current = getOpenPaths().size ? getOpenPaths() : loadOpenPaths();
+    const children = await fetchChildren('');
+    if (!children || gen !== treeGenRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
+    container.innerHTML = renderChildren(children, '');
+    subscribeTreeLive(children.filter(c => !c.isLeaf).map(c => c.key));
+    for (const det of container.querySelectorAll('details[open]')) {
+      expandNode(det as HTMLDetailsElement);
+    }
+    attachToggleListeners(container);
+    updateNodeCount();
+    if (changedPaths) flashPaths(changedPaths);
+  }, [expandNode]);
+
+  // Expose selectPath and loadTree globally for tree leaf clicks
+  useEffect(() => {
+    (window as unknown as Record<string, unknown>).__treeSelectPath = selectPath;
+    (window as unknown as Record<string, unknown>).__treeRefreshPath = refreshPath;
+  }, [refreshPath]);
+
+  useEffect(() => {
+    if (!connected) return;
+    // Retry: first load may return empty if server is still initializing
+    let cancelled = false;
+    (async () => {
+      for (let i = 0; i < 3; i++) {
+        await loadTree();
+        if (cancelled || (containerRef.current?.children.length ?? 0) > 0) return;
+        await new Promise(r => setTimeout(r, 500));
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [connected, loadTree]);
+
+  // Handle #approve= deep link
+  useEffect(() => {
+    if (location.hash.startsWith('#approve=')) {
+      const rid = location.hash.slice('#approve='.length);
+      location.hash = '';
+      const timer = setInterval(() => {
+        if (!db.connected) return;
+        clearInterval(timer);
+        window.dispatchEvent(new CustomEvent('zuzdb:tab', { detail: 'keyauth' }));
+        const el = document.getElementById('ka-qr-request-id') as HTMLInputElement;
+        if (el) el.value = rid;
+      }, 300);
+    }
+  }, []);
+
+  return (
+    <div id="tree-pane">
+      <div id="tree-header">
+        <b>Tree</b>
+        <span ref={nodeCountRef}>—</span>
+        <button className="sm icon" onClick={() => loadTree()} title="Reload">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="23 4 23 10 17 10" />
+            <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10" />
+          </svg>
+        </button>
+      </div>
+      <div id="tree-container" ref={containerRef}>Connecting…</div>
+    </div>
+  );
+}