@bod.ee/db 0.7.0 → 0.8.0

package/admin/ui.html

@@ -9,14 +9,15 @@
 
   /* Metrics bar */
   #metrics-bar { display: flex; background: #0a0a0a; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; overflow-x: auto; align-items: stretch; }
-  .metric-card { display: flex; flex-direction: column; padding: 5px 10px 4px; border-right: 1px solid #181818; min-width: 110px; flex-shrink: 0; gap: 1px; }
-  .metric-card:last-child { border-right: none; margin-left: auto; min-width: auto; }
-  .metric-top { display: flex; justify-content: space-between; align-items: baseline; }
+  .metric-card { display: flex; flex-direction: column; padding: 5px 10px 4px; border-right: 1px solid #181818; width: 130px; flex-shrink: 0; gap: 1px; overflow: hidden; }
+  .metric-card:last-child { border-right: none; width: auto; }
+  .metric-right { margin-left: auto; }
+  .metric-top { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
   .metric-label { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; }
-  .metric-value { font-size: 13px; color: #4ec9b0; font-weight: bold; }
+  .metric-value { font-size: 13px; color: #4ec9b0; font-weight: bold; min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
   .metric-value.warn { color: #ce9178; }
   .metric-value.dim { color: #888; }
-  .metric-canvas { display: block; margin-top: 2px; }
+  .metric-canvas { display: block; margin-top: 2px; width: 100%; }
   #ws-dot { width: 7px; height: 7px; border-radius: 50%; background: #555; display: inline-block; margin-left: 4px; vertical-align: middle; }
   #ws-dot.live { background: #4ec9b0; animation: pulse 1.5s infinite; }
   @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@@ -66,6 +67,7 @@
   button.sub { background: #3a2e5a; color: #c5b8f0; }
   button.sub:hover { background: #5a4a8a; }
   button.sm { padding: 3px 7px; font-size: 11px; }
+  button.icon { display:inline-flex;align-items:center;justify-content:center;padding:3px 5px;vertical-align:middle; }
   .result { background: #111; border: 1px solid #222; border-radius: 3px; padding: 8px; overflow: auto; max-height: 280px; white-space: pre; color: #9cdcfe; font-size: 12px; }
   .status { font-size: 11px; padding: 3px 8px; border-radius: 3px; }
   .status.ok { background: #1a3a1a; color: #4ec9b0; }
@@ -120,6 +122,14 @@
     <canvas class="metric-canvas" id="g-nodes" width="100" height="28"></canvas>
     <div style="font-size:10px;color:#555;margin-top:2px"><span id="s-dbsize">—</span> MB on disk</div>
   </div>
+  <div class="metric-card">
+    <div class="metric-top"><span class="metric-label">Ping</span><span class="metric-value" id="s-ping">—</span></div>
+    <canvas class="metric-canvas" id="g-ping" width="100" height="28"></canvas>
+  </div>
+  <div class="metric-card metric-right" id="repl-card" style="border-left:1px solid #282828;display:none;width:180px">
+    <div class="metric-top"><span class="metric-label">Replication</span><span class="metric-value dim" id="s-repl-role">—</span></div>
+    <div style="margin-top:4px;font-size:10px" id="s-repl-sources"></div>
+  </div>
   <div class="metric-card" style="border-left:1px solid #282828">
     <div class="metric-top"><span class="metric-label">Uptime</span><span class="metric-value dim" id="s-uptime">—</span></div>
     <div style="margin-top:4px;font-size:10px;color:#555" id="s-ts">—</div>
@@ -133,7 +143,7 @@
   <div id="tree-header">
     <b>Tree</b>
     <span id="node-count">—</span>
-    <button class="sm" onclick="loadTree()">↻</button>
+    <button class="sm icon" onclick="loadTree()" title="Reload"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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">Connecting…</div>
 </div>
@@ -148,6 +158,9 @@
     <div class="tab" onclick="showTab('advanced')">Advanced</div>
     <div class="tab" onclick="showTab('streams')">Streams</div>
     <div class="tab" onclick="showTab('mq')">MQ</div>
+    <div class="tab" onclick="showTab('repl');loadRepl()">Replication</div>
+    <div class="tab" onclick="showTab('vfs');vfsNavigate(vfsPath)">VFS</div>
+    <div class="tab" onclick="showTab('cache')">Cache</div>
     <div class="tab" onclick="showTab('stress')">Stress Tests</div>
     <div class="tab" onclick="showTab('view')">View</div>
   </div>
@@ -563,6 +576,174 @@
     </div>
   </div>
 
+  <!-- Replication Panel -->
+  <div class="panel" id="panel-repl">
+    <div style="display:flex;flex-direction:column;gap:12px">
+
+      <!-- Status -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Source Feed Status — paths synced from remote BodDB instances</label>
+        <div class="row" style="margin-bottom:6px">
+          <button onclick="loadRepl()">REFRESH</button>
+        </div>
+        <div id="repl-status" style="margin-top:4px"></div>
+        <div class="result" id="repl-config" style="margin-top:4px;display:none;max-height:300px">—</div>
+      </div>
+
+      <!-- Synced Data -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Synced Data — local copy of source paths (read-only mirror)</label>
+        <div class="result" id="repl-synced" style="max-height:400px;display:none">—</div>
+      </div>
+
+      <!-- Write to Source (demo) -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Write to Source — modify remote data and watch it sync locally</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillReplWrite('catalog/widgets','{&quot;name&quot;:&quot;Widget A&quot;,&quot;price&quot;:34.99,&quot;stock&quot;:200}')">update widget price</button>
+          <button class="sm" onclick="fillReplWrite('catalog/new-item','{&quot;name&quot;:&quot;New Item&quot;,&quot;price&quot;:9.99,&quot;stock&quot;:50}')">add item</button>
+          <button class="sm" onclick="fillReplWrite('alerts/sys-3','{&quot;level&quot;:&quot;error&quot;,&quot;msg&quot;:&quot;Disk full&quot;,&quot;ts&quot;:' + Date.now() + '}')">add alert</button>
+        </div>
+        <div class="row">
+          <input id="repl-write-path" type="text" placeholder="catalog/widgets" value="catalog/widgets" style="flex:2">
+        </div>
+        <textarea id="repl-write-value" style="min-height:40px;margin-top:4px" placeholder='{ "name": "Widget A", "price": 34.99 }'>{ "name": "Widget A", "price": 34.99, "stock": 200 }</textarea>
+        <div class="row" style="margin-top:4px">
+          <button class="success" onclick="doReplWrite()">WRITE TO SOURCE</button>
+          <button class="danger" onclick="doReplDelete()">DELETE ON SOURCE</button>
+        </div>
+        <div id="repl-write-status" style="margin-top:4px"></div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- VFS Panel -->
+  <div class="panel" id="panel-vfs">
+    <!-- Explorer toolbar -->
+    <div id="vfs-toolbar" style="display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap">
+      <div id="vfs-breadcrumb" style="flex:1;font-size:13px;color:#ccc;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></div>
+      <input id="vfs-upload-file" type="file" style="display:none" onchange="vfsUploadHere()">
+      <button class="success sm" onclick="document.getElementById('vfs-upload-file').click()">Upload</button>
+      <button class="sm" onclick="vfsSyncFolder()">Sync Folder</button>
+      <button class="sm" onclick="vfsMkdirHere()">New Folder</button>
+      <button class="sm icon" onclick="vfsNavigate(vfsPath)" title="Reload"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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>
+    <!-- File table -->
+    <div id="vfs-table" style="border:1px solid #222;border-radius:3px;overflow:auto;max-height:320px;font-size:12px">
+      <div style="padding:20px;text-align:center;color:#555">Loading…</div>
+    </div>
+    <div id="vfs-explorer-status" style="margin-top:4px"></div>
+    <!-- Preview panel -->
+    <div id="vfs-preview" style="display:none;margin-top:6px;border:1px solid #222;border-radius:3px;overflow:hidden">
+      <div id="vfs-preview-header" style="padding:6px 10px;border-bottom:1px solid #222;display:flex;align-items:center;gap:8px;font-size:12px">
+        <span id="vfs-preview-name" style="color:#569cd6;font-weight:bold"></span>
+        <span id="vfs-preview-info" style="color:#888"></span>
+        <span style="flex:1"></span>
+        <button class="sm" onclick="vfsDownload()">Download</button>
+        <button class="sm" onclick="vfsRename()">Rename</button>
+        <button class="danger sm" onclick="if(confirm('Delete?'))vfsDeleteSel()">Delete</button>
+        <button class="sm" onclick="document.getElementById('vfs-preview').style.display='none'">✕</button>
+      </div>
+      <div id="vfs-preview-body" style="padding:10px;max-height:250px;overflow:auto;font-size:12px;color:#ccc;white-space:pre-wrap;font-family:monospace"></div>
+    </div>
+    <!-- Advanced: original form-based ops -->
+    <details style="margin-top:12px">
+      <summary style="cursor:pointer;color:#888;font-size:11px">Advanced (raw API)</summary>
+      <div style="display:flex;flex-direction:column;gap:12px;margin-top:8px">
+        <div style="border:1px solid #222;border-radius:3px;padding:10px">
+          <label style="font-size:11px;color:#888;margin-bottom:6px">Upload File — POST binary to /files/&lt;path&gt;</label>
+          <div class="row">
+            <input id="vfs-upload-path" type="text" placeholder="docs/readme.txt" style="flex:2">
+            <input id="vfs-adv-upload-file" type="file" style="flex:2" onchange="if(this.files[0])document.getElementById('vfs-upload-path').value=this.files[0].name">
+            <button class="success" onclick="doVfsUpload()">UPLOAD</button>
+          </div>
+          <div id="vfs-upload-status" style="margin-top:4px"></div>
+        </div>
+        <div style="border:1px solid #222;border-radius:3px;padding:10px">
+          <label style="font-size:11px;color:#888;margin-bottom:6px">Download File</label>
+          <div class="row">
+            <input id="vfs-download-path" type="text" placeholder="docs/readme.txt" style="flex:2">
+            <button onclick="doVfsDownload()">DOWNLOAD</button>
+          </div>
+          <div id="vfs-download-status" style="margin-top:4px"></div>
+        </div>
+        <div style="border:1px solid #222;border-radius:3px;padding:10px">
+          <label style="font-size:11px;color:#888;margin-bottom:6px">Stat</label>
+          <div class="row">
+            <input id="vfs-stat-path" type="text" placeholder="docs/readme.txt" style="flex:2">
+            <button onclick="doVfsStat()">STAT</button>
+          </div>
+          <div id="vfs-stat-status" style="margin-top:4px"></div>
+          <div class="result" id="vfs-stat-result" style="margin-top:4px;display:none;max-height:200px">—</div>
+        </div>
+        <div style="border:1px solid #222;border-radius:3px;padding:10px">
+          <label style="font-size:11px;color:#888;margin-bottom:6px">List Directory</label>
+          <div class="row">
+            <input id="vfs-list-path" type="text" placeholder="docs" style="flex:2">
+            <button onclick="doVfsList()">LIST</button>
+          </div>
+          <div id="vfs-list-status" style="margin-top:4px"></div>
+          <div class="result" id="vfs-list-result" style="margin-top:4px;display:none;max-height:300px">—</div>
+        </div>
+        <div style="border:1px solid #222;border-radius:3px;padding:10px">
+          <label style="font-size:11px;color:#888;margin-bottom:6px">Mkdir</label>
+          <div class="row">
+            <input id="vfs-mkdir-path" type="text" placeholder="docs/drafts" style="flex:2">
+            <button class="success" onclick="doVfsMkdir()">MKDIR</button>
+          </div>
+          <div id="vfs-mkdir-status" style="margin-top:4px"></div>
+        </div>
+        <div style="border:1px solid #222;border-radius:3px;padding:10px">
+          <label style="font-size:11px;color:#888;margin-bottom:6px">Move / Rename</label>
+          <div class="row">
+            <input id="vfs-move-src" type="text" placeholder="docs/old.txt" style="flex:2">
+            <span style="color:#555">→</span>
+            <input id="vfs-move-dst" type="text" placeholder="docs/new.txt" style="flex:2">
+            <button onclick="doVfsMove()">MOVE</button>
+          </div>
+          <div id="vfs-move-status" style="margin-top:4px"></div>
+        </div>
+        <div style="border:1px solid #222;border-radius:3px;padding:10px">
+          <label style="font-size:11px;color:#888;margin-bottom:6px">Delete</label>
+          <div class="row">
+            <input id="vfs-delete-path" type="text" placeholder="docs/readme.txt" style="flex:2">
+            <button class="danger" onclick="if(confirm('Delete this file?'))doVfsDelete()">DELETE</button>
+          </div>
+          <div id="vfs-delete-status" style="margin-top:4px"></div>
+        </div>
+      </div>
+    </details>
+  </div>
+
+  <div class="panel" id="panel-cache">
+    <h3 style="color:#569cd6;margin-bottom:8px">CachedClient Demo</h3>
+    <p style="color:#666;font-size:11px;margin-bottom:10px">Two-tier cache (memory + IndexedDB) with stale-while-revalidate. Wraps BodClient for instant reads.</p>
+
+    <div style="display:flex;gap:6px;margin-bottom:10px">
+      <div style="flex:1">
+        <label>Path</label>
+        <input type="text" id="cache-path" value="cache/demo" placeholder="path">
+      </div>
+      <div style="flex:1">
+        <label>Value (JSON)</label>
+        <input type="text" id="cache-value" value='{"name":"Alice","score":42}' placeholder="value">
+      </div>
+    </div>
+
+    <div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
+      <button onclick="cacheSet()">Set (invalidates cache)</button>
+      <button onclick="cacheGet()">Get (cache-first)</button>
+      <button onclick="cacheGetFresh()">Get Fresh (network)</button>
+      <button class="success" onclick="cacheSub()">Subscribe (keeps fresh)</button>
+      <button class="danger" onclick="cacheUnsub()">Unsubscribe</button>
+      <button onclick="cacheStats()">Cache Stats</button>
+    </div>
+
+    <div id="cache-result" class="result" style="min-height:120px">Cache demo — set a value, then get it (served from cache on second read).</div>
+    <div id="cache-log" class="result" style="min-height:80px;margin-top:8px;color:#888;font-size:11px">Event log...</div>
+  </div>
+
   <!-- Stress Tests Panel -->
   <div class="panel" id="panel-stress">
     <div class="stress-grid">
@@ -694,7 +875,7 @@ function log(level, ...args) {
 
 // ── ZuzClient (browser port, mirrors src/client/ZuzClient.ts API exactly) ──────
 class ValueSnapshot {
-  constructor(path, data) { this.path = path; this._data = data; }
+  constructor(path, data, updatedAt) { this.path = path; this._data = data; this.updatedAt = updatedAt; }
   val() { return this._data; }
   get key() { return this.path.split('/').pop(); }
   exists() { return this._data !== null && this._data !== undefined; }
@@ -740,7 +921,7 @@ class ZuzClient {
         }
         if (this._activeSubs.size) log('debug', `Re-subscribed ${this._activeSubs.size} active subs`);
         resolve();
-        loadTree();
+        setTimeout(loadTree, 0);
       };
       ws.onclose = () => {
         document.getElementById('ws-dot').classList.remove('live');
@@ -759,7 +940,7 @@ class ZuzClient {
         const msg = JSON.parse(e.data);
         if (msg.type === 'value') {
           if (msg.path !== '_admin/stats' && !msg.path.startsWith('stress/')) log('debug', `← value`, msg.path);
-          const snap = new ValueSnapshot(msg.path, msg.data);
+          const snap = new ValueSnapshot(msg.path, msg.data, msg.updatedAt);
           for (const cb of this._valueCbs.get(msg.path) ?? []) cb(snap);
           return;
         }
@@ -776,14 +957,14 @@ class ZuzClient {
           return;
         }
         const p = this._pending.get(msg.id);
-        if (p) { this._pending.delete(msg.id); msg.ok ? p.resolve(msg.data ?? null) : p.reject(new Error(msg.error)); }
+        if (p) { this._pending.delete(msg.id); msg.ok ? p.resolve(msg) : p.reject(new Error(msg.error)); }
       };
     });
   }
 
   disconnect() { this._closed = true; this._ws?.close(); }
 
-  _send(op, params = {}) {
+  _sendRaw(op, params = {}) {
     return new Promise((resolve, reject) => {
       if (this._ws?.readyState !== WebSocket.OPEN) return reject(new Error('Not connected'));
       const id = String(++this._msgId);
@@ -795,7 +976,13 @@ class ZuzClient {
     });
   }
 
+  async _send(op, params = {}) {
+    const msg = await this._sendRaw(op, params);
+    return msg.data ?? null;
+  }
+
   get(path) { return this._send('get', { path }); }
+  async getSnapshot(path) { const msg = await this._sendRaw('get', { path }); return new ValueSnapshot(path, msg.data ?? null, msg.updatedAt); }
   getShallow(path) { return this._send('get', { path: path ?? '', shallow: true }); }
   set(path, value) { return this._send('set', { path, value }); }
   update(updates) { return this._send('update', { updates }); }
@@ -927,8 +1114,23 @@ const graphs = {
   heap: new Sparkline('g-heap', '#569cd6'),
   rss:  new Sparkline('g-rss',  '#9cdcfe'),
   nodes:new Sparkline('g-nodes','#4ec9b0'),
+  ping: new Sparkline('g-ping', '#c586c0'),
 };
 
+// ── Ping measurement ────────────────────────────────────────────────────────
+async function measurePing() {
+  try {
+    const t0 = performance.now();
+    await db.get('_admin/stats');
+    const ms = Math.round(performance.now() - t0);
+    const el = document.getElementById('s-ping');
+    el.textContent = ms + ' ms';
+    el.className = 'metric-value' + (ms > 200 ? ' warn' : '');
+    graphs.ping.push(ms);
+  } catch {}
+}
+setInterval(measurePing, 2000);
+
 db.on('_admin/stats', (snap) => {
   const s = snap.val();
   if (!s) return;
@@ -959,6 +1161,25 @@ db.on('_admin/stats', (snap) => {
   document.getElementById('s-subs').textContent = s.subs ?? 0;
   document.getElementById('s-uptime').textContent = fmtUptime(s.process.uptimeSec);
   document.getElementById('s-ts').textContent = new Date(s.ts).toLocaleTimeString();
+
+  // Replication stats
+  if (s.repl) {
+    const card = document.getElementById('repl-card');
+    card.style.display = '';
+    document.getElementById('s-repl-role').textContent = s.repl.role;
+    const srcEl = document.getElementById('s-repl-sources');
+    if (s.repl.sources.length) {
+      srcEl.innerHTML = s.repl.sources.map(src => {
+        const dot = src.connected ? '<span style="color:#4ec9b0">●</span>' : '<span style="color:#f48771">●</span>';
+        const prefix = src.localPrefix ? `→${src.localPrefix}/` : '';
+        const pend = src.pending;
+        const pendColor = pend > 100 ? '#f48771' : pend > 10 ? '#ce9178' : '#4ec9b0';
+        return `<span style="color:#555">${dot} ${src.paths.join(',')} ${prefix} <span style="color:${pendColor}">${pend} behind</span> · ${src.eventsApplied}ev</span>`;
+      }).join('<br>');
+    } else {
+      srcEl.innerHTML = '<span style="color:#555">no sources</span>';
+    }
+  }
 });
 
 // Connect after all subscriptions are registered so onopen re-subscribes them all
@@ -1014,12 +1235,14 @@ function fmtUptime(sec) {
 }
 
 // ── Tab switching ──────────────────────────────────────────────────────────────
-const TAB_IDS = ['rw','query','subs','auth','advanced','streams','mq','stress','view'];
+const TAB_IDS = ['rw','query','subs','auth','advanced','streams','mq','repl','vfs','cache','stress','view'];
 function showTab(id) {
   document.querySelectorAll('.tab').forEach((t, i) => t.classList.toggle('active', TAB_IDS[i] === id));
   document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
   document.getElementById('panel-' + id).classList.add('active');
-  localStorage.setItem('zuzdb:tab', id);
+  const url = new URL(location.href);
+  url.searchParams.set('tab', id);
+  history.replaceState(null, '', url);
 }
 
 // ── Field persistence ──────────────────────────────────────────────────────────
@@ -1064,8 +1287,15 @@ function restoreFields() {
       else if (DEFAULT_VALUES[id]) { el.value = DEFAULT_VALUES[id]; }
     }
   } catch {}
-  const tab = localStorage.getItem('zuzdb:tab');
-  if (tab && TAB_IDS.includes(tab)) showTab(tab);
+  const tab = new URLSearchParams(location.search).get('tab') || localStorage.getItem('zuzdb:tab');
+  if (tab && TAB_IDS.includes(tab)) {
+    showTab(tab);
+    setTimeout(() => {
+      if (tab === 'vfs') vfsNavigate(vfsPath);
+      if (tab === 'repl') loadRepl();
+      if (tab === 'auth') loadRules();
+    }, 0);
+  }
 }
 for (const id of PERSIST_FIELDS) {
   document.getElementById(id).addEventListener('input', persistFields);
@@ -1247,9 +1477,11 @@ function selectPath(path) {
   document.getElementById('view-time').textContent = '';
   document.getElementById('view-result').textContent = 'Loading…';
   const t0 = performance.now();
-  db.get(path).then(data => {
-    document.getElementById('view-time').textContent = (performance.now() - t0).toFixed(1) + ' ms';
-    document.getElementById('view-result').textContent = JSON.stringify(data, null, 2);
+  db.getSnapshot(path).then(snap => {
+    const elapsed = (performance.now() - t0).toFixed(1) + ' ms';
+    const updated = snap.updatedAt ? new Date(snap.updatedAt).toLocaleString() : '';
+    document.getElementById('view-time').textContent = elapsed + (updated ? ` · updated ${updated}` : '');
+    document.getElementById('view-result').textContent = JSON.stringify(snap.val(), null, 2);
   }).catch(e => {
     document.getElementById('view-time').textContent = (performance.now() - t0).toFixed(1) + ' ms';
     document.getElementById('view-result').textContent = 'Error: ' + e.message;
@@ -2276,6 +2508,485 @@ function showStatus(id, msg, ok, ms) {
   el.className = 'status ' + (ok ? 'ok' : 'err');
   el.textContent = ms != null ? `${msg} (${ms.toFixed(1)}ms)` : msg;
 }
+
+// ── Replication ────────────────────────────────────────────────────────────────
+async function loadRepl() {
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/replication');
+    const json = await res.json();
+    const ms = performance.now() - t0;
+    if (!json.ok) { showStatus('repl-status', json.error || 'Failed', false, ms); return; }
+
+    const { role, sources, synced } = json;
+    showStatus('repl-status', `Role: ${role} — ${sources.length} source(s)`, true, ms);
+
+    const configEl = document.getElementById('repl-config');
+    configEl.style.display = 'block';
+    configEl.textContent = sources.map(s =>
+      `${s.url}\n  paths: [${s.paths.join(', ')}]\n  localPrefix: ${s.localPrefix || '(none)'}\n  id: ${s.id || '(auto)'}`
+    ).join('\n\n') || '(no sources configured)';
+
+    const syncedEl = document.getElementById('repl-synced');
+    syncedEl.style.display = 'block';
+    syncedEl.textContent = JSON.stringify(synced, null, 2);
+  } catch (e) {
+    showStatus('repl-status', e.message, false);
+  }
+}
+
+function fillReplWrite(path, value) {
+  document.getElementById('repl-write-path').value = path;
+  document.getElementById('repl-write-value').value = value;
+}
+
+async function doReplWrite() {
+  const path = document.getElementById('repl-write-path').value.trim();
+  const raw = document.getElementById('repl-write-value').value.trim();
+  if (!path) return showStatus('repl-write-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const value = JSON.parse(raw);
+    const res = await fetch('/replication/source-write', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, value }),
+    });
+    const json = await res.json();
+    const ms = performance.now() - t0;
+    showStatus('repl-write-status', json.ok ? `Written to source: ${path}` : (json.error || 'Failed'), json.ok, ms);
+    if (json.ok) setTimeout(loadRepl, 600);
+  } catch (e) {
+    showStatus('repl-write-status', e.message, false, performance.now() - t0);
+  }
+}
+
+async function doReplDelete() {
+  const path = document.getElementById('repl-write-path').value.trim();
+  if (!path) return showStatus('repl-write-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/replication/source-delete/' + path, { method: 'DELETE' });
+    const json = await res.json();
+    const ms = performance.now() - t0;
+    showStatus('repl-write-status', json.ok ? `Deleted on source: ${path}` : (json.error || 'Failed'), json.ok, ms);
+    if (json.ok) setTimeout(loadRepl, 600);
+  } catch (e) {
+    showStatus('repl-write-status', e.message, false, performance.now() - t0);
+  }
+}
+// ── VFS Explorer ──────────────────────────────────────────────────────────────
+let vfsPath = '';
+let vfsSelected = null;
+
+function vfsFormatSize(b) {
+  if (b == null) return '—';
+  if (b < 1024) return b + ' B';
+  if (b < 1024*1024) return (b/1024).toFixed(1) + ' KB';
+  return (b/(1024*1024)).toFixed(1) + ' MB';
+}
+function vfsFormatDate(ts) {
+  if (!ts) return '';
+  const d = new Date(typeof ts === 'number' ? ts : ts);
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+
+async function vfsNavigate(path) {
+  vfsPath = (path || '').replace(/^\/+|\/+$/g, '');
+  vfsSelected = null;
+  document.getElementById('vfs-preview').style.display = 'none';
+  // breadcrumb
+  const bc = document.getElementById('vfs-breadcrumb');
+  const segs = vfsPath ? vfsPath.split('/') : [];
+  let html = '<span style="cursor:pointer;color:#569cd6" onclick="vfsNavigate(\'\')">/</span>';
+  let built = '';
+  for (let i = 0; i < segs.length; i++) {
+    built += (i ? '/' : '') + segs[i];
+    const p = built;
+    html += ' &gt; <span style="cursor:pointer;color:#569cd6" onclick="vfsNavigate(\'' + p.replace(/'/g, "\\'") + '\')">' + segs[i] + '</span>';
+  }
+  bc.innerHTML = html;
+  // fetch listing
+  const tbl = document.getElementById('vfs-table');
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + (vfsPath || '') + '?list=1');
+    const json = await res.json();
+    const ms = performance.now() - t0;
+    if (!json.ok) { tbl.innerHTML = '<div style="padding:12px;color:#f44">Error: ' + (json.error || 'Failed') + '</div>'; return; }
+    const items = json.data || [];
+    // sort: dirs first, then alpha
+    items.sort((a, b) => {
+      if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+      return (a.name || '').localeCompare(b.name || '');
+    });
+    showStatus('vfs-explorer-status', items.length + ' items', true, ms);
+    if (!items.length) {
+      tbl.innerHTML = '<div style="padding:20px;text-align:center;color:#555">Empty directory</div>';
+      return;
+    }
+    window._vfsItems = items;
+    let rows = '<table style="width:100%;border-collapse:collapse"><tbody>';
+    for (let idx = 0; idx < items.length; idx++) {
+      const item = items[idx];
+      const icon = item.isDir ? '&#x1F4C1;' : '&#x1F4C4;';
+      const fp = (vfsPath ? vfsPath + '/' + item.name : item.name).replace(/'/g, "\\'");
+      const clickAttr = item.isDir
+        ? 'onclick="vfsNavigate(\'' + fp + '\')"'
+        : 'onclick="vfsPreview(' + idx + ',\'' + fp + '\')"';
+      const svgDl = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+      const svgRn = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.83 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></svg>';
+      const svgDel = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>';
+      const btnBase = 'display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0';
+      const dlStyle = item.isDir ? btnBase + ';visibility:hidden' : btnBase;
+      const actions = '<span class="vfs-row-actions" style="display:flex;gap:3px;align-items:center;visibility:hidden">' +
+          '<button class="sm" style="' + dlStyle + '" onclick="event.stopPropagation();vfsActOn(' + idx + ',\'' + fp + '\',\'download\')" title="Download">' + svgDl + '</button>' +
+          '<button class="sm" style="' + btnBase + '" onclick="event.stopPropagation();vfsActOn(' + idx + ',\'' + fp + '\',\'rename\')" title="Rename">' + svgRn + '</button>' +
+          '<button class="danger sm" style="' + btnBase + '" onclick="event.stopPropagation();vfsActOn(' + idx + ',\'' + fp + '\',\'delete\')" title="Delete">' + svgDel + '</button>' +
+        '</span>';
+      rows += '<tr style="cursor:pointer;padding:0;border-bottom:1px solid #1a1a1a;height:34px" ' + clickAttr +
+        ' onmouseover="this.style.background=\'#1e1e1e\';var a=this.querySelector(\'.vfs-row-actions\');if(a)a.style.visibility=\'visible\'"' +
+        ' onmouseout="this.style.background=\'\';var a=this.querySelector(\'.vfs-row-actions\');if(a)a.style.visibility=\'hidden\'">';
+      rows += '<td style="width:28px;padding:6px 4px 6px 10px">' + icon + '</td>';
+      rows += '<td style="color:#ccc;padding:6px 4px">' + (item.name || '') + '</td>';
+      rows += '<td style="width:70px;text-align:right;color:#888;padding:6px 4px">' + (item.isDir ? '' : vfsFormatSize(item.size)) + '</td>';
+      rows += '<td style="width:70px;text-align:right;color:#666;padding:6px 4px">' + vfsFormatDate(item.mtime) + '</td>';
+      rows += '<td style="width:90px;text-align:right;padding:6px 10px 6px 4px">' + actions + '</td>';
+      rows += '</tr>';
+    }
+    rows += '</tbody></table>';
+    tbl.innerHTML = rows;
+  } catch (e) {
+    tbl.innerHTML = '<div style="padding:12px;color:#f44">' + e.message + '</div>';
+  }
+}
+
+function vfsSetSelected(idx, fullPath) {
+  vfsSelected = { ...window._vfsItems[idx], fullPath };
+}
+
+async function vfsPreview(idx, fullPath) {
+  vfsSetSelected(idx, fullPath);
+  const item = vfsSelected;
+  const panel = document.getElementById('vfs-preview');
+  const body = document.getElementById('vfs-preview-body');
+  document.getElementById('vfs-preview-name').textContent = item.name;
+  document.getElementById('vfs-preview-info').textContent = vfsFormatSize(item.size) + (item.mime ? ' \u00b7 ' + item.mime : '');
+  panel.style.display = 'block';
+  body.textContent = 'Loading\u2026';
+  // preview text-based files, show info for binary
+  const textTypes = ['text/', 'application/json', 'application/xml', 'application/javascript', 'application/typescript', 'application/yaml', 'application/toml'];
+  const isText = !item.mime || textTypes.some(t => (item.mime || '').startsWith(t)) || (item.size || 0) === 0;
+  if (isText && item.size > 0) {
+    try {
+      const res = await fetch('/files/' + fullPath);
+      if (!res.ok) { body.textContent = 'Failed to load'; return; }
+      const text = await res.text();
+      body.textContent = text.length > 50000 ? text.slice(0, 50000) + '\n\u2026 (truncated)' : text;
+    } catch (e) { body.textContent = e.message; }
+  } else if (item.size === 0) {
+    body.textContent = '(empty file)';
+  } else {
+    body.textContent = 'Binary file \u00b7 ' + vfsFormatSize(item.size) + ' \u00b7 ' + (item.mime || 'unknown type') + '\n\nUse Download to save.';
+  }
+}
+
+function vfsActOn(idx, fullPath, action) {
+  vfsSetSelected(idx, fullPath);
+  if (action === 'download') vfsDownload();
+  else if (action === 'rename') vfsRename();
+  else if (action === 'delete' && confirm('Delete ' + vfsSelected.name + '?')) vfsDeleteSel();
+}
+
+async function vfsUploadHere() {
+  const fileInput = document.getElementById('vfs-upload-file');
+  if (!fileInput.files.length) return;
+  const file = fileInput.files[0];
+  const path = (vfsPath ? vfsPath + '/' : '') + file.name;
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path, { method: 'POST', body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' } });
+    const json = await res.json();
+    showStatus('vfs-explorer-status', json.ok ? 'Uploaded ' + file.name : (json.error || 'Failed'), json.ok, performance.now() - t0);
+  } catch (e) { showStatus('vfs-explorer-status', e.message, false, performance.now() - t0); }
+  fileInput.value = '';
+  vfsNavigate(vfsPath);
+}
+
+async function vfsSyncFolder() {
+  if (!window.showDirectoryPicker) { alert('Browser does not support directory picker (use Chrome/Edge)'); return; }
+  let dirHandle;
+  try { dirHandle = await window.showDirectoryPicker(); } catch { return; } // user cancelled
+  const basePath = vfsPath ? vfsPath + '/' + dirHandle.name : dirHandle.name;
+  // recursively collect all files
+  async function collectFiles(handle, prefix) {
+    const files = [];
+    for await (const [name, entry] of handle.entries()) {
+      const path = prefix ? prefix + '/' + name : name;
+      if (entry.kind === 'file') {
+        files.push({ path, handle: entry });
+      } else {
+        files.push(...await collectFiles(entry, path));
+      }
+    }
+    return files;
+  }
+  showStatus('vfs-explorer-status', 'Scanning folder\u2026', true);
+  const files = await collectFiles(dirHandle, '');
+  if (!files.length) { showStatus('vfs-explorer-status', 'Folder is empty', false); return; }
+  const t0 = performance.now();
+  let ok = 0, fail = 0;
+  showStatus('vfs-explorer-status', 'Uploading 0/' + files.length + '\u2026', true);
+  // upload in batches of 5
+  for (let i = 0; i < files.length; i += 5) {
+    const batch = files.slice(i, i + 5);
+    const results = await Promise.allSettled(batch.map(async (f) => {
+      const file = await f.handle.getFile();
+      const res = await fetch('/files/' + basePath + '/' + f.path, {
+        method: 'POST', body: file,
+        headers: { 'Content-Type': file.type || 'application/octet-stream' }
+      });
+      const json = await res.json();
+      if (!json.ok) throw new Error(json.error);
+    }));
+    for (const r of results) r.status === 'fulfilled' ? ok++ : fail++;
+    showStatus('vfs-explorer-status', 'Uploading ' + (ok + fail) + '/' + files.length + '\u2026', true);
+  }
+  const ms = performance.now() - t0;
+  showStatus('vfs-explorer-status', 'Synced ' + ok + ' files' + (fail ? ', ' + fail + ' failed' : ''), !fail, ms);
+  vfsNavigate(vfsPath);
+}
+
+async function vfsMkdirHere() {
+  const name = prompt('Folder name:');
+  if (!name) return;
+  const path = (vfsPath ? vfsPath + '/' : '') + name;
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path + '?mkdir=1', { method: 'POST' });
+    const json = await res.json();
+    showStatus('vfs-explorer-status', json.ok ? 'Created ' + name : (json.error || 'Failed'), json.ok, performance.now() - t0);
+  } catch (e) { showStatus('vfs-explorer-status', e.message, false, performance.now() - t0); }
+  vfsNavigate(vfsPath);
+}
+
+async function vfsDownload() {
+  if (!vfsSelected) return;
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + vfsSelected.fullPath);
+    if (!res.ok) return showStatus('vfs-explorer-status', 'Not found', false, performance.now() - t0);
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a'); a.href = url; a.download = vfsSelected.name;
+    document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
+    showStatus('vfs-explorer-status', 'Downloaded ' + vfsSelected.name + ' (' + vfsFormatSize(blob.size) + ')', true, performance.now() - t0);
+  } catch (e) { showStatus('vfs-explorer-status', e.message, false, performance.now() - t0); }
+}
+
+async function vfsRename() {
+  if (!vfsSelected) return;
+  const newName = prompt('New name:', vfsSelected.name);
+  if (!newName || newName === vfsSelected.name) return;
+  const dst = (vfsPath ? vfsPath + '/' : '') + newName;
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + vfsSelected.fullPath + '?move=' + encodeURIComponent(dst), { method: 'PUT' });
+    const json = await res.json();
+    showStatus('vfs-explorer-status', json.ok ? 'Renamed → ' + newName : (json.error || 'Failed'), json.ok, performance.now() - t0);
+  } catch (e) { showStatus('vfs-explorer-status', e.message, false, performance.now() - t0); }
+  vfsNavigate(vfsPath);
+}
+
+async function vfsDeleteSel() {
+  if (!vfsSelected) return;
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + vfsSelected.fullPath, { method: 'DELETE' });
+    const json = await res.json();
+    showStatus('vfs-explorer-status', json.ok ? 'Deleted ' + vfsSelected.name : (json.error || 'Failed'), json.ok, performance.now() - t0);
+  } catch (e) { showStatus('vfs-explorer-status', e.message, false, performance.now() - t0); }
+  vfsSelected = null;
+  document.getElementById('vfs-preview').style.display = 'none';
+  vfsNavigate(vfsPath);
+}
+
+// ── VFS Advanced (raw API) ────────────────────────────────────────────────────
+async function doVfsUpload() {
+  const path = document.getElementById('vfs-upload-path').value.trim();
+  const fileInput = document.getElementById('vfs-adv-upload-file');
+  if (!path) return showStatus('vfs-upload-status', 'Path required', false);
+  if (!fileInput.files.length) return showStatus('vfs-upload-status', 'Select a file', false);
+  const file = fileInput.files[0];
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path, { method: 'POST', body: file, headers: { 'Content-Type': file.type || 'application/octet-stream' } });
+    const json = await res.json();
+    const ms = performance.now() - t0;
+    if (json.ok) {
+      for (const id of ['vfs-download-path','vfs-stat-path','vfs-delete-path','vfs-move-src']) document.getElementById(id).value = path;
+      const dir = path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '';
+      document.getElementById('vfs-list-path').value = dir || '/';
+    }
+    showStatus('vfs-upload-status', json.ok ? `Uploaded ${json.data.size} bytes (${json.data.mime})` : (json.error || 'Failed'), json.ok, ms);
+  } catch (e) { showStatus('vfs-upload-status', e.message, false, performance.now() - t0); }
+}
+
+async function doVfsDownload() {
+  const path = document.getElementById('vfs-download-path').value.trim();
+  if (!path) return showStatus('vfs-download-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path);
+    if (!res.ok) { showStatus('vfs-download-status', 'Not found', false, performance.now() - t0); return; }
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = path.split('/').pop();
+    document.body.appendChild(a); a.click(); a.remove();
+    URL.revokeObjectURL(url);
+    showStatus('vfs-download-status', `Downloaded ${blob.size} bytes`, true, performance.now() - t0);
+  } catch (e) { showStatus('vfs-download-status', e.message, false, performance.now() - t0); }
+}
+
+async function doVfsStat() {
+  const path = document.getElementById('vfs-stat-path').value.trim();
+  if (!path) return showStatus('vfs-stat-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path + '?stat=1');
+    const json = await res.json();
+    const ms = performance.now() - t0;
+    const el = document.getElementById('vfs-stat-result');
+    if (json.ok) { el.style.display = 'block'; el.textContent = JSON.stringify(json.data, null, 2); }
+    else { el.style.display = 'none'; }
+    showStatus('vfs-stat-status', json.ok ? `${json.data.isDir ? 'Dir' : 'File'}: ${json.data.name} (${json.data.size}b)` : (json.error || 'Not found'), json.ok, ms);
+  } catch (e) { showStatus('vfs-stat-status', e.message, false, performance.now() - t0); }
+}
+
+async function doVfsList() {
+  const path = document.getElementById('vfs-list-path').value.trim();
+  if (!path) return showStatus('vfs-list-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path + '?list=1');
+    const json = await res.json();
+    const ms = performance.now() - t0;
+    const el = document.getElementById('vfs-list-result');
+    if (json.ok) { el.style.display = 'block'; el.textContent = JSON.stringify(json.data, null, 2); }
+    else { el.style.display = 'none'; }
+    showStatus('vfs-list-status', json.ok ? `${json.data.length} entries` : (json.error || 'Failed'), json.ok, ms);
+  } catch (e) { showStatus('vfs-list-status', e.message, false, performance.now() - t0); }
+}
+
+async function doVfsMkdir() {
+  const path = document.getElementById('vfs-mkdir-path').value.trim();
+  if (!path) return showStatus('vfs-mkdir-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path + '?mkdir=1', { method: 'POST' });
+    const json = await res.json();
+    showStatus('vfs-mkdir-status', json.ok ? `Created: ${path}` : (json.error || 'Failed'), json.ok, performance.now() - t0);
+  } catch (e) { showStatus('vfs-mkdir-status', e.message, false, performance.now() - t0); }
+}
+
+async function doVfsMove() {
+  const src = document.getElementById('vfs-move-src').value.trim();
+  const dst = document.getElementById('vfs-move-dst').value.trim();
+  if (!src || !dst) return showStatus('vfs-move-status', 'Both paths required', false);
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + src + '?move=' + encodeURIComponent(dst), { method: 'PUT' });
+    const json = await res.json();
+    showStatus('vfs-move-status', json.ok ? `Moved → ${json.data.path}` : (json.error || 'Failed'), json.ok, performance.now() - t0);
+  } catch (e) { showStatus('vfs-move-status', e.message, false, performance.now() - t0); }
+}
+
+async function doVfsDelete() {
+  const path = document.getElementById('vfs-delete-path').value.trim();
+  if (!path) return showStatus('vfs-delete-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const res = await fetch('/files/' + path, { method: 'DELETE' });
+    const json = await res.json();
+    showStatus('vfs-delete-status', json.ok ? `Deleted: ${path}` : (json.error || 'Failed'), json.ok, performance.now() - t0);
+  } catch (e) { showStatus('vfs-delete-status', e.message, false, performance.now() - t0); }
+}
+
+// ── Cache Demo ──────────────────────────────────────────────────────────────────
+const _cache = { memory: new Map(), subOff: null, log: [] };
+
+function _cacheLog(msg) {
+  _cache.log.push(`[${new Date().toLocaleTimeString()}] ${msg}`);
+  if (_cache.log.length > 20) _cache.log.shift();
+  const el = document.getElementById('cache-log');
+  if (el) el.textContent = _cache.log.join('\n');
+}
+
+async function cacheSet() {
+  const path = document.getElementById('cache-path').value.trim();
+  const val = JSON.parse(document.getElementById('cache-value').value);
+  await db.set(path, val);
+  _cache.memory.delete(path); // invalidate
+  _cacheLog(`SET ${path} → invalidated cache`);
+  document.getElementById('cache-result').textContent = `✓ Set ${path} and invalidated cache`;
+}
+
+async function cacheGet() {
+  const path = document.getElementById('cache-path').value.trim();
+  const t0 = performance.now();
+  const cached = _cache.memory.get(path);
+  if (cached) {
+    const ms = (performance.now() - t0).toFixed(2);
+    _cacheLog(`HIT ${path} (${ms}ms) — served from memory`);
+    document.getElementById('cache-result').textContent = `[CACHE HIT · ${ms}ms]\n` + JSON.stringify(cached.data, null, 2) +
+      (cached.updatedAt ? `\n\nupdatedAt: ${new Date(cached.updatedAt).toLocaleString()}` : '');
+    // background revalidate
+    db.getSnapshot(path).then(snap => {
+      _cache.memory.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+      _cacheLog(`REVALIDATED ${path}`);
+    }).catch(() => {});
+    return;
+  }
+  const snap = await db.getSnapshot(path);
+  const ms = (performance.now() - t0).toFixed(2);
+  _cache.memory.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+  _cacheLog(`MISS ${path} (${ms}ms) — fetched from network, cached`);
+  document.getElementById('cache-result').textContent = `[CACHE MISS · ${ms}ms]\n` + JSON.stringify(snap.val(), null, 2) +
+    (snap.updatedAt ? `\n\nupdatedAt: ${new Date(snap.updatedAt).toLocaleString()}` : '');
+}
+
+async function cacheGetFresh() {
+  const path = document.getElementById('cache-path').value.trim();
+  const t0 = performance.now();
+  const snap = await db.getSnapshot(path);
+  const ms = (performance.now() - t0).toFixed(2);
+  _cache.memory.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+  _cacheLog(`FRESH ${path} (${ms}ms) — network fetch, cache updated`);
+  document.getElementById('cache-result').textContent = `[NETWORK · ${ms}ms]\n` + JSON.stringify(snap.val(), null, 2) +
+    (snap.updatedAt ? `\n\nupdatedAt: ${new Date(snap.updatedAt).toLocaleString()}` : '');
+}
+
+function cacheSub() {
+  if (_cache.subOff) { _cacheLog('Already subscribed'); return; }
+  const path = document.getElementById('cache-path').value.trim();
+  _cache.subOff = db.on(path, (snap) => {
+    _cache.memory.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+    _cacheLog(`SUB UPDATE ${path} — cache refreshed`);
+    document.getElementById('cache-result').textContent = `[LIVE · subscribed]\n` + JSON.stringify(snap.val(), null, 2) +
+      (snap.updatedAt ? `\n\nupdatedAt: ${new Date(snap.updatedAt).toLocaleString()}` : '');
+  });
+  _cacheLog(`SUBSCRIBED to ${path} — cache stays fresh`);
+}
+
+function cacheUnsub() {
+  if (_cache.subOff) { _cache.subOff(); _cache.subOff = null; _cacheLog('Unsubscribed'); }
+}
+
+function cacheStats() {
+  const stats = { memoryEntries: _cache.memory.size, paths: [..._cache.memory.keys()], subscribed: !!_cache.subOff };
+  document.getElementById('cache-result').textContent = JSON.stringify(stats, null, 2);
+  _cacheLog(`Stats: ${_cache.memory.size} entries in memory`);
+}
 </script>
 </body>
 </html>