npm - @bod.ee/db - Versions diffs - 0.7.0 - Mend

@bod.ee/db 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/.claude/settings.local.json +23 -0
package/.claude/skills/config-file.md +54 -0
package/.claude/skills/deploying-bod-db.md +29 -0
package/.claude/skills/developing-bod-db.md +127 -0
package/.claude/skills/using-bod-db.md +403 -0
package/CLAUDE.md +110 -0
package/README.md +252 -0
package/admin/rules.ts +12 -0
package/admin/server.ts +523 -0
package/admin/ui.html +2281 -0
package/cli.ts +177 -0
package/client.ts +2 -0
package/config.ts +20 -0
package/deploy/.env.example +1 -0
package/deploy/base.yaml +18 -0
package/deploy/boddb-logs.yaml +10 -0
package/deploy/boddb.yaml +10 -0
package/deploy/demo.html +196 -0
package/deploy/deploy.ts +32 -0
package/deploy/prod-logs.config.ts +15 -0
package/deploy/prod.config.ts +15 -0
package/index.ts +20 -0
package/mcp.ts +78 -0
package/package.json +29 -0
package/react.ts +1 -0
package/src/client/BodClient.ts +515 -0
package/src/react/hooks.ts +121 -0
package/src/server/BodDB.ts +319 -0
package/src/server/ExpressionRules.ts +250 -0
package/src/server/FTSEngine.ts +76 -0
package/src/server/FileAdapter.ts +116 -0
package/src/server/MCPAdapter.ts +409 -0
package/src/server/MQEngine.ts +286 -0
package/src/server/QueryEngine.ts +45 -0
package/src/server/RulesEngine.ts +108 -0
package/src/server/StorageEngine.ts +464 -0
package/src/server/StreamEngine.ts +320 -0
package/src/server/SubscriptionEngine.ts +120 -0
package/src/server/Transport.ts +479 -0
package/src/server/VectorEngine.ts +115 -0
package/src/shared/errors.ts +15 -0
package/src/shared/pathUtils.ts +94 -0
package/src/shared/protocol.ts +59 -0
package/src/shared/transforms.ts +99 -0
package/tests/batch.test.ts +60 -0
package/tests/bench.ts +205 -0
package/tests/e2e.test.ts +284 -0
package/tests/expression-rules.test.ts +114 -0
package/tests/file-adapter.test.ts +57 -0
package/tests/fts.test.ts +58 -0
package/tests/mq-flow.test.ts +204 -0
package/tests/mq.test.ts +326 -0
package/tests/push.test.ts +55 -0
package/tests/query.test.ts +60 -0
package/tests/rules.test.ts +78 -0
package/tests/sse.test.ts +78 -0
package/tests/storage.test.ts +199 -0
package/tests/stream.test.ts +385 -0
package/tests/stress.test.ts +202 -0
package/tests/subscriptions.test.ts +86 -0
package/tests/transforms.test.ts +92 -0
package/tests/transport.test.ts +209 -0
package/tests/ttl.test.ts +70 -0
package/tests/vector.test.ts +69 -0
package/tsconfig.json +27 -0

package/admin/ui.html ADDED Viewed

@@ -0,0 +1,2281 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>ZuzDB Admin</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: monospace; font-size: 13px; background: #0d0d0d; color: #d4d4d4; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+  /* 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-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.warn { color: #ce9178; }
+  .metric-value.dim { color: #888; }
+  .metric-canvas { display: block; margin-top: 2px; }
+  #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} }
+  /* Main layout */
+  #main { display: flex; flex: 1; overflow: hidden; }
+  /* Tree */
+  #tree-pane { width: 28%; border-right: 1px solid #2a2a2a; display: flex; flex-direction: column; min-width: 180px; }
+  #tree-header { padding: 6px 10px; background: #161616; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; }
+  #tree-header span { color: #555; font-size: 11px; }
+  #tree-container { flex: 1; overflow-y: auto; padding: 4px; }
+  #tree-container details { margin-left: 12px; }
+  #tree-container summary { cursor: pointer; padding: 2px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4ec9b0; list-style: none; }
+  #tree-container summary::before { content: '▶'; font-size: 10px; color: #666; margin-right: 5px; display: inline-block; transition: transform 0.15s; }
+  details[open] > summary::before { transform: rotate(90deg); color: #aaa; }
+  #tree-container summary:hover { background: #1e1e1e; }
+  .tree-leaf { padding: 2px 4px 2px 16px; cursor: pointer; border-radius: 3px; color: #9cdcfe; display: flex; gap: 4px; align-items: baseline; overflow: hidden; }
+  .tree-leaf:hover { background: #1e1e1e; }
+  .tree-val { color: #ce9178; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
+  .tree-key { color: #4ec9b0; flex-shrink: 0; }
+  .ttl-badge { font-size: 9px; padding: 0 4px; border-radius: 3px; background: #4d3519; color: #d4a054; flex-shrink: 0; }
+  @keyframes treeFlash { 0%,100% { background: transparent; } 30% { background: rgba(86,156,214,0.25); } }
+  .flash { animation: treeFlash 1.2s ease-out; border-radius: 3px; }
+  /* Right pane */
+  #right-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+  .tabs { display: flex; background: #161616; border-bottom: 1px solid #2a2a2a; }
+  .tab { padding: 7px 16px; cursor: pointer; border-bottom: 2px solid transparent; color: #666; font-size: 12px; }
+  .tab.active { color: #fff; border-bottom-color: #569cd6; }
+  .panel { display: none; flex: 1; overflow-y: auto; padding: 12px; flex-direction: column; gap: 10px; }
+  .panel.active { display: flex; }
+  /* Controls */
+  label { color: #666; font-size: 10px; margin-bottom: 2px; display: block; text-transform: uppercase; letter-spacing: 0.3px; }
+  input[type=text], textarea, select { width: 100%; background: #1a1a1a; border: 1px solid #333; color: #d4d4d4; padding: 5px 8px; border-radius: 3px; font-family: monospace; font-size: 12px; }
+  input[type=text]:focus, textarea:focus { outline: none; border-color: #569cd6; }
+  textarea { resize: vertical; min-height: 80px; }
+  .row { display: flex; gap: 6px; align-items: flex-end; }
+  .row input { flex: 1; }
+  button { padding: 5px 11px; border: none; border-radius: 3px; cursor: pointer; font-family: monospace; font-size: 12px; background: #264f78; color: #ccc; white-space: nowrap; }
+  button:hover { background: #3a6fa8; color: #fff; }
+  button.danger { background: #4a1e1e; color: #f48771; }
+  button.danger:hover { background: #7a2e2e; }
+  button.success { background: #1e4a1e; color: #4ec9b0; }
+  button.success:hover { background: #2e7a2e; }
+  button.sub { background: #3a2e5a; color: #c5b8f0; }
+  button.sub:hover { background: #5a4a8a; }
+  button.sm { padding: 3px 7px; font-size: 11px; }
+  .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; }
+  .status.err { background: #3a1a1a; color: #f48771; }
+  /* Query filters */
+  .filter-row { display: flex; gap: 5px; align-items: center; margin-bottom: 4px; }
+  .filter-row input { flex: 2; }
+  .filter-row select { flex: 1; }
+  table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  th { background: #1a1a1a; padding: 4px 8px; text-align: left; color: #666; border-bottom: 1px solid #222; }
+  td { padding: 4px 8px; border-bottom: 1px solid #1a1a1a; color: #d4d4d4; word-break: break-all; }
+  tr:hover td { background: #161616; }
+  /* Subscriptions */
+  .sub-item { background: #111; border: 1px solid #222; border-radius: 3px; padding: 8px; }
+  .sub-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; color: #4ec9b0; }
+  .sub-log { max-height: 130px; overflow-y: auto; font-size: 11px; background: #0a0a0a; padding: 5px; border-radius: 2px; }
+  .sub-log div { padding: 2px 0; border-bottom: 1px solid #161616; color: #9cdcfe; }
+  .sub-log div span { color: #555; margin-right: 6px; }
+  /* Stress test */
+  .stress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .stress-card { background: #111; border: 1px solid #222; border-radius: 3px; padding: 10px; }
+  .stress-card h4 { color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
+  .stress-result { margin-top: 8px; font-size: 11px; background: #0a0a0a; border-radius: 2px; padding: 6px; color: #4ec9b0; min-height: 60px; white-space: pre-wrap; }
+  .progress-bar { height: 4px; background: #222; border-radius: 2px; margin-top: 6px; overflow: hidden; }
+  .progress-fill { height: 100%; background: #569cd6; border-radius: 2px; width: 0%; transition: width 0.1s; }
+  input[type=number] { width: 80px; background: #1a1a1a; border: 1px solid #333; color: #d4d4d4; padding: 4px 6px; border-radius: 3px; font-family: monospace; font-size: 12px; }
+</style>
+</head>
+<body>
+<!-- Metrics Bar -->
+<div id="metrics-bar">
+  <div class="metric-card">
+    <div class="metric-top"><span class="metric-label">CPU</span><span class="metric-value" id="s-cpu">—</span></div>
+    <canvas class="metric-canvas" id="g-cpu" width="100" height="28"></canvas>
+    <div style="font-size:10px;color:#555;margin-top:2px">sys <span id="s-syscpu">—</span>% · <span id="s-cpucores">—</span> cores</div>
+  </div>
+  <div class="metric-card">
+    <div class="metric-top"><span class="metric-label">Heap</span><span class="metric-value" id="s-heap">—</span></div>
+    <canvas class="metric-canvas" id="g-heap" width="100" height="28"></canvas>
+  </div>
+  <div class="metric-card">
+    <div class="metric-top"><span class="metric-label">RSS</span><span class="metric-value" id="s-rss">—</span></div>
+    <canvas class="metric-canvas" id="g-rss" width="100" height="28"></canvas>
+    <div style="font-size:10px;color:#555;margin-top:2px">of <span id="s-totalmem">—</span> total</div>
+  </div>
+  <div class="metric-card">
+    <div class="metric-top"><span class="metric-label">Nodes</span><span class="metric-value" id="s-nodes">—</span></div>
+    <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" 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>
+    <div style="margin-top:4px"><span class="metric-label">WS<span id="ws-dot"></span></span> <span style="font-size:10px;color:#555"><span id="s-clients">0</span> clients · <span id="s-subs">0</span> subs</span></div>
+  </div>
+</div>
+<div id="main">
+<!-- Tree Pane -->
+<div id="tree-pane">
+  <div id="tree-header">
+    <b>Tree</b>
+    <span id="node-count">—</span>
+    <button class="sm" onclick="loadTree()">↻</button>
+  </div>
+  <div id="tree-container">Connecting…</div>
+</div>
+<!-- Right Pane -->
+<div id="right-pane">
+  <div class="tabs">
+    <div class="tab active" onclick="showTab('rw')">Read / Write</div>
+    <div class="tab" onclick="showTab('query')">Query Builder</div>
+    <div class="tab" onclick="showTab('subs')">Live Subscriptions</div>
+    <div class="tab" onclick="showTab('auth');loadRules()">Auth &amp; Rules</div>
+    <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('stress')">Stress Tests</div>
+    <div class="tab" onclick="showTab('view')">View</div>
+  </div>
+  <!-- Read/Write Panel -->
+  <div class="panel active" id="panel-rw">
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
+      <span style="font-size:11px;color:#555">Auth:</span>
+      <input id="rw-auth-token" type="text" placeholder="token (or leave empty)" style="flex:1;font-size:11px">
+      <button onclick="doRwAuth()" class="sm">SET</button>
+      <span id="rw-auth-status" style="font-size:11px;color:#555">—</span>
+    </div>
+    <div>
+      <label>Path</label>
+      <div class="row">
+        <input id="rw-path" type="text" placeholder="users/alice/name">
+        <button onclick="doGet()">GET</button>
+        <button class="danger" onclick="doDelete()">DELETE</button>
+      </div>
+    </div>
+    <div>
+      <label>Value (JSON)</label>
+      <textarea id="rw-value" placeholder='"Alice"&#10;or { "name": "Alice", "age": 30 }'></textarea>
+    </div>
+    <div class="row"><button class="success" onclick="doSet()">SET</button><button onclick="doUpdate()">UPDATE</button></div>
+    <div id="rw-status"></div>
+    <div>
+      <label>Result</label>
+      <div class="result" id="rw-result">—</div>
+    </div>
+    <div style="margin-top:8px">
+      <label>Multi-path Update — JSON object mapping path → value</label>
+      <textarea id="upd-value" style="min-height:80px" placeholder='{ "users/alice/age": 31, "users/bob/role": "admin" }'></textarea>
+      <div class="row" style="margin-top:4px"><button onclick="doUpdateTab()">MULTI-UPDATE</button></div>
+      <div id="upd-status"></div>
+    </div>
+    <div style="margin-top:8px;border-top:1px solid #222;padding-top:8px">
+      <label>Push — append value with auto-generated key</label>
+      <div class="row">
+        <input id="push-path" type="text" placeholder="logs" style="flex:1">
+        <button class="success" onclick="doPush()">PUSH</button>
+      </div>
+      <textarea id="push-value" style="min-height:50px;margin-top:4px" placeholder='{ "level": "info", "msg": "hello" }'></textarea>
+      <div id="push-status"></div>
+    </div>
+    <div style="margin-top:8px;border-top:1px solid #222;padding-top:8px">
+      <label>Batch — atomic multi-op (JSON array of operations)</label>
+      <textarea id="batch-value" style="min-height:80px" placeholder='[
+  { "op": "set", "path": "users/dave", "value": { "name": "Dave", "role": "user" } },
+  { "op": "delete", "path": "settings/temp" },
+  { "op": "push", "path": "logs", "value": { "msg": "batch op" } }
+]'></textarea>
+      <div class="row" style="margin-top:4px"><button onclick="doBatch()">RUN BATCH</button></div>
+      <div id="batch-status"></div>
+      <div class="result" id="batch-result" style="margin-top:4px;display:none">—</div>
+    </div>
+  </div>
+  <!-- Query Panel -->
+  <div class="panel" id="panel-query">
+    <div>
+      <label>Base Path</label>
+      <input id="q-path" type="text" placeholder="users">
+    </div>
+    <div>
+      <label>Filters</label>
+      <div id="q-filters"></div>
+      <button onclick="addFilter()" style="margin-top:5px" class="sm">+ Filter</button>
+    </div>
+    <div class="row">
+      <div style="flex:2"><label>Order Field</label><input id="q-order-field" type="text" placeholder="name"></div>
+      <div style="flex:1"><label>Dir</label><select id="q-order-dir"><option value="asc">asc</option><option value="desc">desc</option></select></div>
+      <div style="flex:1"><label>Limit</label><input id="q-limit" type="text" placeholder="—"></div>
+      <div style="flex:1"><label>Offset</label><input id="q-offset" type="text" placeholder="—"></div>
+    </div>
+    <div><button onclick="doQuery()">RUN QUERY</button></div>
+    <div id="q-status"></div>
+    <div id="q-result"></div>
+  </div>
+  <!-- Subscriptions Panel -->
+  <div class="panel" id="panel-subs">
+    <div>
+      <label>Path to Subscribe</label>
+      <div class="row">
+        <input id="sub-path" type="text" placeholder="users/alice">
+        <button class="sub" onclick="doSubscribe('value')">VALUE</button>
+        <button class="sub" onclick="doSubscribe('child')" style="background:#4a3f6b">CHILD</button>
+      </div>
+      <div style="color:#555;font-size:11px;margin-top:4px">VALUE — fires on any change at/below path &nbsp;·&nbsp; CHILD — fires for direct child added/changed/removed</div>
+    </div>
+    <div id="sub-list" style="display:flex;flex-direction:column;gap:8px;margin-top:6px;"></div>
+  </div>
+  <!-- Auth & Rules Panel -->
+  <div class="panel" id="panel-auth">
+    <div style="display:flex;flex-direction:column;gap:12px">
+      <div>
+        <label>Authenticate</label>
+        <div class="row">
+          <input id="auth-token" type="text" placeholder='admin-secret  or  user:alice' style="flex:1">
+          <button onclick="doAuth()">AUTH</button>
+          <button class="danger" onclick="doDeauth()">CLEAR</button>
+        </div>
+        <div id="auth-status" style="margin-top:4px;font-size:12px;color:#555">Not authenticated — all open rules apply</div>
+      </div>
+      <div>
+        <label>Active Rules (server-configured)</label>
+        <div class="result" style="font-size:11px;line-height:1.6;white-space:pre" id="auth-rules">Loading…</div>
+      </div>
+      <div>
+        <label>Test Rule — check if current auth can read/write a path</label>
+        <div class="row">
+          <input id="auth-test-path" type="text" placeholder="users/alice" style="flex:1">
+          <select id="auth-test-op" style="width:90px"><option value="read">READ</option><option value="write">WRITE</option></select>
+          <button onclick="doTestRule()">TEST</button>
+        </div>
+        <div class="result" id="auth-test-result">—</div>
+      </div>
+    </div>
+  </div>
+  <!-- Advanced Panel (Transforms, TTL, FTS, Vectors) -->
+  <div class="panel" id="panel-advanced">
+    <div style="display:flex;flex-direction:column;gap:12px">
+      <!-- Transforms -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Transforms — apply atomic operations to paths</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillTransform('counters/likes','increment','1')">increment +1</button>
+          <button class="sm" onclick="fillTransform('users/alice/updatedAt','serverTimestamp','')">serverTimestamp</button>
+          <button class="sm" onclick="fillTransform('users/alice/tags','arrayUnion','[&quot;vip&quot;,&quot;active&quot;]')">arrayUnion</button>
+          <button class="sm" onclick="fillTransform('users/alice/tags','arrayRemove','[&quot;active&quot;]')">arrayRemove</button>
+        </div>
+        <div class="row">
+          <input id="tf-path" type="text" placeholder="counters/likes" style="flex:2">
+          <select id="tf-type" style="flex:1">
+            <option value="increment">increment</option>
+            <option value="serverTimestamp">serverTimestamp</option>
+            <option value="arrayUnion">arrayUnion</option>
+            <option value="arrayRemove">arrayRemove</option>
+          </select>
+        </div>
+        <div class="row" style="margin-top:4px">
+          <input id="tf-value" type="text" placeholder="value (number for increment, JSON array for array ops)" style="flex:1">
+          <button class="success" onclick="doTransform()">APPLY</button>
+        </div>
+        <div id="tf-status" style="margin-top:4px"></div>
+        <div class="result" id="tf-result" style="margin-top:4px;display:none">—</div>
+      </div>
+      <!-- TTL -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">TTL — set values with auto-expiry</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillTTL('sessions/temp','{&quot;token&quot;:&quot;abc123&quot;}',60)">session 60s</button>
+          <button class="sm" onclick="fillTTL('cache/homepage','&quot;cached html&quot;',10)">cache 10s</button>
+        </div>
+        <div class="row">
+          <input id="ttl-path" type="text" placeholder="sessions/temp" style="flex:2">
+          <input id="ttl-seconds" type="number" placeholder="TTL (seconds)" value="60" style="width:120px">
+        </div>
+        <div style="margin-top:4px">
+          <textarea id="ttl-value" style="min-height:40px" placeholder='"session data" or { "token": "abc" }'></textarea>
+        </div>
+        <div class="row" style="margin-top:4px">
+          <button class="success" onclick="doSetTTL()">SET WITH TTL</button>
+          <button onclick="doSweep()">SWEEP NOW</button>
+        </div>
+        <div id="ttl-status" style="margin-top:4px"></div>
+      </div>
+      <!-- FTS -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Full-Text Search (FTS5)</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillFts('admin','users')">search "admin"</button>
+          <button class="sm" onclick="fillFts('design','')">search "design"</button>
+          <button class="sm" onclick="fillFtsIndex('posts/p1','A tutorial about building reactive databases')">index post</button>
+        </div>
+        <div class="row">
+          <input id="fts-path" type="text" placeholder="path to index" style="flex:1">
+          <input id="fts-content" type="text" placeholder="text content to index" style="flex:2">
+          <button onclick="doFtsIndex()">INDEX</button>
+        </div>
+        <div class="row" style="margin-top:4px">
+          <input id="fts-query" type="text" placeholder="search query" style="flex:2">
+          <input id="fts-prefix" type="text" placeholder="path prefix (optional)" style="flex:1">
+          <button class="success" onclick="doFtsSearch()">SEARCH</button>
+        </div>
+        <div id="fts-status" style="margin-top:4px"></div>
+        <div class="result" id="fts-result" style="margin-top:4px;display:none">—</div>
+      </div>
+      <!-- Vectors -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Vector Search (cosine similarity, 384d)</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillVecSearch('users')">search users</button>
+          <button class="sm" onclick="fillVecSearch('')">search all</button>
+        </div>
+        <div class="row">
+          <input id="vec-path" type="text" placeholder="path to store embedding" style="flex:1">
+          <input id="vec-embedding" type="text" placeholder="[0.1, 0.2, ...] (384 floats)" style="flex:2">
+          <button onclick="doVecStore()">STORE</button>
+        </div>
+        <div class="row" style="margin-top:4px">
+          <input id="vec-query" type="text" placeholder="query vector [0.1, 0.2, ...]" style="flex:2">
+          <input id="vec-prefix" type="text" placeholder="path prefix" style="flex:1">
+          <input id="vec-limit" type="number" value="5" style="width:60px" placeholder="limit">
+          <button class="success" onclick="doVecSearch()">SEARCH</button>
+        </div>
+        <div id="vec-status" style="margin-top:4px"></div>
+        <div class="result" id="vec-result" style="margin-top:4px;display:none">—</div>
+      </div>
+    </div>
+  </div>
+  <!-- Streams Panel -->
+  <div class="panel" id="panel-streams">
+    <div style="display:flex;flex-direction:column;gap:12px">
+      <!-- E2E Demo -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">E2E Demo — push events → consumer groups → ack → compact → materialize</label>
+        <div class="row">
+          <button class="success" onclick="doStreamDemo()">RUN DEMO</button>
+        </div>
+        <div id="st-demo-status" style="margin-top:4px"></div>
+        <div class="result" id="st-demo-result" style="margin-top:4px;display:none;max-height:400px;white-space:pre-wrap">—</div>
+      </div>
+      <!-- Push Event -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Push Event — append to a topic (idempotent push optional)</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillStreamPush('events/orders','{&quot;orderId&quot;:&quot;o99&quot;,&quot;amount&quot;:250}','')">push order</button>
+          <button class="sm" onclick="fillStreamPush('events/orders','{&quot;orderId&quot;:&quot;o99&quot;,&quot;amount&quot;:250}','order-o99')">idempotent push</button>
+        </div>
+        <div class="row">
+          <input id="st-push-path" type="text" placeholder="events/orders" value="events/orders" style="flex:2">
+          <input id="st-push-idem" type="text" placeholder="idempotency key (optional)" style="flex:1">
+        </div>
+        <textarea id="st-push-value" style="min-height:40px;margin-top:4px" placeholder='{ "orderId": "o99", "amount": 250 }'>{ "orderId": "o99", "amount": 250 }</textarea>
+        <div class="row" style="margin-top:4px">
+          <button class="success" onclick="doStreamPush()">PUSH</button>
+        </div>
+        <div id="st-push-status" style="margin-top:4px"></div>
+      </div>
+      <!-- Read Stream -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Read — fetch unprocessed events for a consumer group</label>
+        <div class="row">
+          <input id="st-read-path" type="text" placeholder="events/orders" value="events/orders" style="flex:2">
+          <input id="st-read-group" type="text" placeholder="group ID" value="admin-ui" style="flex:1">
+          <input id="st-read-limit" type="number" value="50" style="width:70px" placeholder="limit">
+          <button onclick="doStreamRead()">READ</button>
+        </div>
+        <div id="st-read-status" style="margin-top:4px"></div>
+        <div class="result" id="st-read-result" style="margin-top:4px;display:none;max-height:300px">—</div>
+      </div>
+      <!-- Ack -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Ack — commit offset for a consumer group</label>
+        <div class="row">
+          <input id="st-ack-path" type="text" placeholder="events/orders" value="events/orders" style="flex:2">
+          <input id="st-ack-group" type="text" placeholder="group ID" value="admin-ui" style="flex:1">
+          <input id="st-ack-key" type="text" placeholder="event key to ack" style="flex:2">
+          <button onclick="doStreamAck()">ACK</button>
+        </div>
+        <div id="st-ack-status" style="margin-top:4px"></div>
+      </div>
+      <!-- Compact -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Compact — remove old/excess events (safe: respects consumer offsets)</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillCompact('events/orders','','100','')">keep 100</button>
+          <button class="sm" onclick="fillCompact('events/orders','3600','','')">max 1h</button>
+          <button class="sm" onclick="fillCompact('events/orders','','','orderId')">keepKey: orderId</button>
+        </div>
+        <div class="row">
+          <input id="st-compact-path" type="text" placeholder="events/orders" value="events/orders" style="flex:2">
+          <input id="st-compact-age" type="number" placeholder="maxAge (sec)" style="width:110px">
+          <input id="st-compact-count" type="number" placeholder="maxCount" style="width:100px">
+          <input id="st-compact-key" type="text" placeholder="keepKey field" style="flex:1">
+          <button class="danger" onclick="doStreamCompact()">COMPACT</button>
+          <button class="danger" onclick="doStreamReset()" title="Delete all events, snapshot, and offsets">RESET</button>
+        </div>
+        <div id="st-compact-status" style="margin-top:4px"></div>
+      </div>
+      <!-- Snapshot & Materialize -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Snapshot & Materialize — view base state and merged view</label>
+        <div class="row">
+          <input id="st-snap-path" type="text" placeholder="events/orders" value="events/orders" style="flex:2">
+          <input id="st-snap-keepkey" type="text" placeholder="keepKey (for materialize)" style="flex:1">
+          <button onclick="doStreamSnapshot()">SNAPSHOT</button>
+          <button class="success" onclick="doStreamMaterialize()">MATERIALIZE</button>
+        </div>
+        <div id="st-snap-status" style="margin-top:4px"></div>
+        <div class="result" id="st-snap-result" style="margin-top:4px;display:none;max-height:300px">—</div>
+      </div>
+      <!-- Stream Subscribe -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Subscribe — live stream with replay from last offset</label>
+        <div class="row">
+          <input id="st-sub-path" type="text" placeholder="events/orders" value="events/orders" style="flex:2">
+          <input id="st-sub-group" type="text" placeholder="group ID" value="admin-live" style="flex:1">
+          <button class="sub" onclick="doStreamSub()">SUBSCRIBE</button>
+        </div>
+        <div id="st-sub-list" style="display:flex;flex-direction:column;gap:8px;margin-top:6px;"></div>
+      </div>
+    </div>
+  </div>
+  <!-- MQ Panel -->
+  <div class="panel" id="panel-mq">
+    <div style="display:flex;flex-direction:column;gap:12px">
+      <!-- E2E Demo -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">E2E Demo — full worker lifecycle: push → fetch → ack/nack → retry → DLQ</label>
+        <div class="row">
+          <button class="success" onclick="doMqDemo()">RUN DEMO</button>
+        </div>
+        <div id="mq-demo-status" style="margin-top:4px"></div>
+        <div class="result" id="mq-demo-result" style="margin-top:4px;display:none;max-height:400px;white-space:pre-wrap">—</div>
+      </div>
+      <!-- Push Job -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Push Job — enqueue a message (SQS-style, exactly-once delivery)</label>
+        <div style="display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap">
+          <button class="sm" onclick="fillMqPush('queues/jobs','{&quot;type&quot;:&quot;email&quot;,&quot;to&quot;:&quot;user@example.com&quot;}','')">email job</button>
+          <button class="sm" onclick="fillMqPush('queues/jobs','{&quot;type&quot;:&quot;sms&quot;,&quot;to&quot;:&quot;+1234567890&quot;}','sms-123')">idempotent sms</button>
+        </div>
+        <div class="row">
+          <input id="mq-push-path" type="text" placeholder="queues/jobs" value="queues/jobs" style="flex:2">
+          <input id="mq-push-idem" type="text" placeholder="idempotency key (optional)" style="flex:1">
+        </div>
+        <textarea id="mq-push-value" style="min-height:40px;margin-top:4px" placeholder='{ "type": "email", "to": "user@example.com" }'>{ "type": "email", "to": "user@example.com" }</textarea>
+        <div class="row" style="margin-top:4px">
+          <button class="success" onclick="doMqPush()">PUSH</button>
+        </div>
+        <div id="mq-push-status" style="margin-top:4px"></div>
+      </div>
+      <!-- Fetch -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Fetch — claim messages (visibility timeout applies)</label>
+        <div class="row">
+          <input id="mq-fetch-path" type="text" placeholder="queues/jobs" value="queues/jobs" style="flex:2">
+          <input id="mq-fetch-count" type="number" value="1" style="width:70px" placeholder="count">
+          <button onclick="doMqFetch()">FETCH</button>
+        </div>
+        <div id="mq-fetch-status" style="margin-top:4px"></div>
+        <div class="result" id="mq-fetch-result" style="margin-top:4px;display:none;max-height:300px">—</div>
+      </div>
+      <!-- Ack / Nack -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Ack / Nack — confirm processing or release back to queue</label>
+        <div class="row">
+          <input id="mq-ack-path" type="text" placeholder="queues/jobs" value="queues/jobs" style="flex:2">
+          <input id="mq-ack-key" type="text" placeholder="message key" style="flex:2">
+          <button class="danger" onclick="doMqAck()">ACK</button>
+          <button onclick="doMqNack()">NACK</button>
+        </div>
+        <div id="mq-ack-status" style="margin-top:4px"></div>
+      </div>
+      <!-- Peek -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Peek — view messages without claiming</label>
+        <div class="row">
+          <input id="mq-peek-path" type="text" placeholder="queues/jobs" value="queues/jobs" style="flex:2">
+          <input id="mq-peek-count" type="number" value="10" style="width:70px" placeholder="count">
+          <button onclick="doMqPeek()">PEEK</button>
+        </div>
+        <div id="mq-peek-status" style="margin-top:4px"></div>
+        <div class="result" id="mq-peek-result" style="margin-top:4px;display:none;max-height:300px">—</div>
+      </div>
+      <!-- DLQ -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Dead Letter Queue — messages that exceeded max deliveries</label>
+        <div class="row">
+          <input id="mq-dlq-path" type="text" placeholder="queues/jobs" value="queues/jobs" style="flex:2">
+          <button onclick="doMqDlq()">VIEW DLQ</button>
+        </div>
+        <div id="mq-dlq-status" style="margin-top:4px"></div>
+        <div class="result" id="mq-dlq-result" style="margin-top:4px;display:none;max-height:300px">—</div>
+      </div>
+      <!-- Purge -->
+      <div style="border:1px solid #222;border-radius:3px;padding:10px">
+        <label style="font-size:11px;color:#888;margin-bottom:6px">Purge — delete all pending messages in a queue</label>
+        <div class="row">
+          <input id="mq-purge-path" type="text" placeholder="queues/jobs" value="queues/jobs" style="flex:2">
+          <button class="danger" onclick="if(confirm('Purge all pending messages?'))doMqPurge()">PURGE</button>
+        </div>
+        <div id="mq-purge-status" style="margin-top:4px"></div>
+      </div>
+    </div>
+  </div>
+  <!-- Stress Tests Panel -->
+  <div class="panel" id="panel-stress">
+    <div class="stress-grid">
+      <div class="stress-card">
+        <h4>Sequential Writes</h4>
+        <div class="row" style="align-items:center;gap:8px">
+          <label style="margin:0">N:</label>
+          <input type="number" id="sw-n" value="1000" min="10" max="100000" style="width:90px">
+          <button onclick="runSeqWrites()">Run</button>
+        </div>
+        <div class="progress-bar"><div class="progress-fill" id="sw-prog"></div></div>
+        <div class="stress-result" id="sw-result">—</div>
+      </div>
+      <div class="stress-card">
+        <h4>Burst Reads</h4>
+        <div class="row" style="align-items:center;gap:8px">
+          <label style="margin:0">N:</label>
+          <input type="number" id="br-n" value="2000" min="10" max="100000" style="width:90px">
+          <button onclick="runBurstReads()">Run</button>
+        </div>
+        <div class="progress-bar"><div class="progress-fill" id="br-prog"></div></div>
+        <div class="stress-result" id="br-result">—</div>
+      </div>
+      <div class="stress-card">
+        <h4>Mixed Read/Write</h4>
+        <div class="row" style="align-items:center;gap:8px">
+          <label style="margin:0">N:</label>
+          <input type="number" id="mw-n" value="500" min="10" max="50000" style="width:90px">
+          <label style="margin:0">W%:</label>
+          <input type="number" id="mw-wp" value="30" min="0" max="100" style="width:60px">
+          <button onclick="runMixed()">Run</button>
+        </div>
+        <div class="progress-bar"><div class="progress-fill" id="mw-prog"></div></div>
+        <div class="stress-result" id="mw-result">—</div>
+      </div>
+      <div class="stress-card">
+        <h4>Query Under Load</h4>
+        <div class="row" style="align-items:center;gap:8px">
+          <label style="margin:0">Records:</label>
+          <input type="number" id="ql-n" value="500" min="10" max="10000" style="width:80px">
+          <button onclick="runQueryLoad()">Run</button>
+        </div>
+        <div class="progress-bar"><div class="progress-fill" id="ql-prog"></div></div>
+        <div class="stress-result" id="ql-result">—</div>
+      </div>
+      <div class="stress-card">
+        <h4>Bulk Update</h4>
+        <div class="row" style="align-items:center;gap:8px">
+          <label style="margin:0">Keys/batch:</label>
+          <input type="number" id="bu-n" value="100" min="5" max="5000" style="width:80px">
+          <label style="margin:0">Batches:</label>
+          <input type="number" id="bu-b" value="20" min="1" max="500" style="width:60px">
+          <button onclick="runBulkUpdate()">Run</button>
+        </div>
+        <div class="progress-bar"><div class="progress-fill" id="bu-prog"></div></div>
+        <div class="stress-result" id="bu-result">—</div>
+      </div>
+      <div class="stress-card">
+        <h4>Deep Path Writes</h4>
+        <div class="row" style="align-items:center;gap:8px">
+          <label style="margin:0">N:</label>
+          <input type="number" id="dp-n" value="200" min="10" max="5000" style="width:80px">
+          <label style="margin:0">Depth:</label>
+          <input type="number" id="dp-d" value="6" min="2" max="12" style="width:60px">
+          <button onclick="runDeepPaths()">Run</button>
+        </div>
+        <div class="progress-bar"><div class="progress-fill" id="dp-prog"></div></div>
+        <div class="stress-result" id="dp-result">—</div>
+      </div>
+    </div>
+  </div>
+  <!-- View Panel -->
+  <div class="panel" id="panel-view">
+    <div style="display:flex;flex-direction:column;gap:10px;height:100%">
+      <div style="display:flex;align-items:center;gap:10px">
+        <span style="color:#888;font-size:12px">Path:</span>
+        <span id="view-path" style="color:#4ec9b0;font-family:monospace;font-size:13px">—</span>
+        <span id="view-time" style="color:#555;font-size:11px"></span>
+      </div>
+      <pre id="view-result" style="flex:1;margin:0;padding:12px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:4px;overflow:auto;color:#d4d4d4;font-size:13px;white-space:pre-wrap;word-break:break-all">Select a node in the tree to view its data.</pre>
+    </div>
+  </div>
+</div>
+</div>
+<script>
+// ── Logger ─────────────────────────────────────────────────────────────────────
+const LEVEL_STYLE = {
+  debug: 'color:#666',
+  info:  'color:#4ec9b0',
+  warn:  'color:#ce9178',
+  error: 'color:#f48771;font-weight:bold',
+};
+// Aggregates rapid repeated debug messages into a collapsed group with a count
+const _agg = { key: null, count: 0, paths: [], timer: null };
+function _flushAgg() {
+  if (!_agg.count) return;
+  console.groupCollapsed(`%c[DEBUG] ${_agg.key} ×${_agg.count}`, 'color:#666');
+  _agg.paths.forEach(p => console.debug('%c  ' + p, 'color:#555'));
+  console.groupEnd();
+  _agg.key = null; _agg.count = 0; _agg.paths = [];
+}
+function log(level, ...args) {
+  if (level === 'debug') {
+    const key = args[0]; // e.g. '→ set'
+    const path = args[1] ?? '';
+    // Aggregate high-frequency debug ops
+    if (_agg.key === key) {
+      _agg.count++;
+      _agg.paths.push(path);
+      clearTimeout(_agg.timer);
+      _agg.timer = setTimeout(_flushAgg, 400);
+      return;
+    }
+    _flushAgg();
+    // Start new aggregation window
+    _agg.key = key; _agg.count = 1; _agg.paths = [path];
+    clearTimeout(_agg.timer);
+    _agg.timer = setTimeout(_flushAgg, 400);
+    return;
+  }
+  _flushAgg(); // flush any pending aggregate before an info/warn/error
+  const style = LEVEL_STYLE[level] ?? '';
+  console[level === 'error' ? 'error' : level === 'warn' ? 'warn' : 'log'](`%c[${level.toUpperCase()}]`, style, ...args);
+}
+// ── ZuzClient (browser port, mirrors src/client/ZuzClient.ts API exactly) ──────
+class ValueSnapshot {
+  constructor(path, data) { this.path = path; this._data = data; }
+  val() { return this._data; }
+  get key() { return this.path.split('/').pop(); }
+  exists() { return this._data !== null && this._data !== undefined; }
+}
+class ClientQueryBuilder {
+  constructor(client, path) { this._client = client; this._path = path; this._filters = []; }
+  where(field, op, value) { this._filters.push({ field, op, value }); return this; }
+  order(field, dir = 'asc') { this._order = { field, dir }; return this; }
+  limit(n) { this._limit = n; return this; }
+  offset(n) { this._offset = n; return this; }
+  get() { return this._client._query(this._path, this._filters.length ? this._filters : undefined, this._order, this._limit, this._offset); }
+}
+class ZuzClient {
+  constructor(url = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}`) {
+    this._url = url;
+    this._ws = null;
+    this._msgId = 0;
+    this._pending = new Map();
+    this._valueCbs = new Map();  // path → Set<(ValueSnapshot)=>void>
+    this._childCbs = new Map();  // path → Set<(ChildEvent)=>void>
+    this._activeSubs = new Set(); // 'value:path' | 'child:path'
+    this._reconnectDelay = 1000;
+    this._closed = false;
+  }
+  connect() {
+    if (this._ws?.readyState === WebSocket.OPEN) return Promise.resolve();
+    return new Promise((resolve) => {
+      log('info', `WS connecting to ${this._url}`);
+      const ws = new WebSocket(this._url);
+      this._ws = ws;
+      ws.onopen = async () => {
+        this._reconnectDelay = 1000;
+        document.getElementById('ws-dot').classList.add('live');
+        log('info', `WS connected`);
+        // re-subscribe all active subs after reconnect
+        for (const key of this._activeSubs) {
+          const colon = key.indexOf(':');
+          const event = key.slice(0, colon), path = key.slice(colon + 1);
+          this._send('sub', { path, event }).catch(() => {});
+        }
+        if (this._activeSubs.size) log('debug', `Re-subscribed ${this._activeSubs.size} active subs`);
+        resolve();
+        loadTree();
+      };
+      ws.onclose = () => {
+        document.getElementById('ws-dot').classList.remove('live');
+        for (const [, p] of this._pending) p.reject(new Error('Connection closed'));
+        this._pending.clear();
+        if (!this._closed) {
+          const delay = this._reconnectDelay = Math.min(this._reconnectDelay * 2, 30000);
+          log('warn', `WS disconnected — reconnecting in ${delay}ms`);
+          setTimeout(() => this.connect(), delay);
+        } else {
+          log('info', 'WS closed');
+        }
+      };
+      ws.onerror = (e) => log('error', 'WS error', e.message ?? '');
+      ws.onmessage = (e) => {
+        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);
+          for (const cb of this._valueCbs.get(msg.path) ?? []) cb(snap);
+          return;
+        }
+        if (msg.type === 'stream') {
+          const streamKey = `${msg.path}:${msg.groupId}`;
+          const cbs = this._streamCbs?.get(streamKey);
+          if (cbs) { for (const cb of cbs) cb(msg.events); }
+          return;
+        }
+        if (msg.type === 'child') {
+          if (!msg.path.startsWith('_admin') && msg.path !== 'stress' && !msg.path.startsWith('stress/')) log('debug', `← child:${msg.event}`, `${msg.path}/${msg.key}`);
+          const ev = { type: msg.event, key: msg.key, path: msg.path + '/' + msg.key, val: () => msg.data };
+          for (const cb of this._childCbs.get(msg.path) ?? []) cb(ev);
+          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)); }
+      };
+    });
+  }
+  disconnect() { this._closed = true; this._ws?.close(); }
+  _send(op, params = {}) {
+    return new Promise((resolve, reject) => {
+      if (this._ws?.readyState !== WebSocket.OPEN) return reject(new Error('Not connected'));
+      const id = String(++this._msgId);
+      this._pending.set(id, { resolve, reject });
+      const p = params.path ?? '';
+      if (!['sub','unsub'].includes(op) && !p.startsWith('_admin') && !p.startsWith('stress/'))
+        log('debug', `→ ${op}`, p);
+      this._ws.send(JSON.stringify({ id, op, ...params }));
+    });
+  }
+  get(path) { return this._send('get', { path }); }
+  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 }); }
+  delete(path) { return this._send('delete', { path }); }
+  batch(operations) { return this._send('batch', { operations }); }
+  push(path, value) { return this._send('push', { path, value }); }
+  transform(path, type, value) { return this._send('transform', { path, type, value }); }
+  setTTL(path, value, ttl) { return this._send('set-ttl', { path, value, ttl }); }
+  sweep() { return this._send('sweep', {}); }
+  ftsIndex(path, content) { return this._send('fts-index', { path, content }); }
+  ftsSearch(text, path, limit) { return this._send('fts-search', { text, path, limit }); }
+  vecStore(path, embedding) { return this._send('vec-store', { path, embedding }); }
+  vecSearch(query, path, limit, threshold) { return this._send('vec-search', { query, path, limit, threshold }); }
+  getRules() { return this._send('get-rules', {}); }
+  streamCompact(path, opts) { return this._send('stream-compact', { path, ...opts }); }
+  streamReset(path) { return this._send('stream-reset', { path }); }
+  streamSnapshot(path) { return this._send('stream-snapshot', { path }); }
+  streamMaterialize(path, keepKey) { return this._send('stream-materialize', { path, keepKey }); }
+  streamRead(path, groupId, limit) { return this._send('stream-read', { path, groupId, limit }); }
+  streamAck(path, groupId, key) { return this._send('stream-ack', { path, groupId, key }); }
+  streamSub(path, groupId) { return this._send('stream-sub', { path, groupId }); }
+  streamUnsub(path, groupId) { return this._send('stream-unsub', { path, groupId }); }
+  mqPush(path, value, idem) { return this._send('mq-push', { path, value, idempotencyKey: idem || undefined }); }
+  mqFetch(path, count) { return this._send('mq-fetch', { path, count }); }
+  mqAck(path, key) { return this._send('mq-ack', { path, key }); }
+  mqNack(path, key) { return this._send('mq-nack', { path, key }); }
+  mqPeek(path, count) { return this._send('mq-peek', { path, count }); }
+  mqDlq(path) { return this._send('mq-dlq', { path }); }
+  mqPurge(path, opts) { return this._send('mq-purge', { path, all: opts?.all }); }
+  query(path) { return new ClientQueryBuilder(this, path); }
+  _query(path, filters, order, limit, offset) {
+    return this._send('query', { path, filters, order, limit, offset });
+  }
+  on(path, cb) {
+    const key = `value:${path}`;
+    if (!this._valueCbs.has(path)) this._valueCbs.set(path, new Set());
+    this._valueCbs.get(path).add(cb);
+    if (!this._activeSubs.has(key)) {
+      this._activeSubs.add(key);
+      if (this._ws?.readyState === WebSocket.OPEN) this._send('sub', { path, event: 'value' }).catch(() => {});
+    }
+    return () => {
+      this._valueCbs.get(path)?.delete(cb);
+      if (!this._valueCbs.get(path)?.size) {
+        this._valueCbs.delete(path); this._activeSubs.delete(key);
+        if (this._ws?.readyState === WebSocket.OPEN) this._send('unsub', { path, event: 'value' }).catch(() => {});
+      }
+    };
+  }
+  onChild(path, cb) {
+    const key = `child:${path}`;
+    if (!this._childCbs.has(path)) this._childCbs.set(path, new Set());
+    this._childCbs.get(path).add(cb);
+    if (!this._activeSubs.has(key)) {
+      this._activeSubs.add(key);
+      if (this._ws?.readyState === WebSocket.OPEN) this._send('sub', { path, event: 'child' }).catch(() => {});
+    }
+    return () => {
+      this._childCbs.get(path)?.delete(cb);
+      if (!this._childCbs.get(path)?.size) {
+        this._childCbs.delete(path); this._activeSubs.delete(key);
+        if (this._ws?.readyState === WebSocket.OPEN) this._send('unsub', { path, event: 'child' }).catch(() => {});
+      }
+    };
+  }
+  get connected() { return this._ws?.readyState === WebSocket.OPEN; }
+}
+const db = new ZuzClient();
+// ── Sparkline ──────────────────────────────────────────────────────────────────
+const SPARK_POINTS = 60;
+function hexToRgba(hex, a) {
+  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})`;
+}
+class Sparkline {
+  constructor(canvasId, color = '#4ec9b0') {
+    this.canvas = document.getElementById(canvasId);
+    this.ctx = this.canvas.getContext('2d');
+    this.color = color; this.data = [];
+    const dpr = window.devicePixelRatio || 1;
+    const w = this.canvas.width, h = this.canvas.height;
+    this.canvas.width = w * dpr; this.canvas.height = h * dpr;
+    this.canvas.style.width = w + 'px'; this.canvas.style.height = h + 'px';
+    this.ctx.scale(dpr, dpr);
+    this.W = w; this.H = h;
+  }
+  push(v) {
+    this.data.push(v);
+    if (this.data.length > SPARK_POINTS) this.data.shift();
+    this.draw();
+  }
+  draw() {
+    const { ctx, data, W, H, color } = this;
+    ctx.clearRect(0, 0, W, H);
+    if (data.length < 2) return;
+    const min = Math.min(...data), max = Math.max(...data), range = max - min || 1;
+    const xStep = W / (SPARK_POINTS - 1), pad = 2;
+    const yScale = v => 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();
+  }
+}
+// ── Stats subscription via ZuzDB ───────────────────────────────────────────────
+const graphs = {
+  cpu:  new Sparkline('g-cpu',  '#ce9178'),
+  heap: new Sparkline('g-heap', '#569cd6'),
+  rss:  new Sparkline('g-rss',  '#9cdcfe'),
+  nodes:new Sparkline('g-nodes','#4ec9b0'),
+};
+db.on('_admin/stats', (snap) => {
+  const s = snap.val();
+  if (!s) return;
+  const cpu = s.process.cpuPercent;
+  const cpuEl = document.getElementById('s-cpu');
+  cpuEl.textContent = cpu + '%';
+  cpuEl.className = 'metric-value' + (cpu > 80 ? ' warn' : '');
+  graphs.cpu.push(cpu);
+  document.getElementById('s-heap').textContent = s.process.heapUsedMb + ' MB';
+  graphs.heap.push(s.process.heapUsedMb);
+  document.getElementById('s-rss').textContent = s.process.rssMb + ' MB';
+  graphs.rss.push(s.process.rssMb);
+  document.getElementById('s-nodes').textContent = s.db.nodeCount;
+  document.getElementById('s-dbsize').textContent = s.db.sizeMb ?? '—';
+  graphs.nodes.push(s.db.nodeCount);
+  if (s.system) {
+    document.getElementById('s-cpucores').textContent = s.system.cpuCores;
+    document.getElementById('s-syscpu').textContent = s.system.cpuPercent;
+    const totalGb = (s.system.totalMemMb / 1024).toFixed(1);
+    document.getElementById('s-totalmem').textContent = totalGb + ' GB';
+  }
+  document.getElementById('s-clients').textContent = s.clients ?? 0;
+  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();
+});
+// Connect after all subscriptions are registered so onopen re-subscribes them all
+db.connect();
+// ── Live tree via child subscriptions ──────────────────────────────────────────
+const _treeUnsubs = new Map(); // key → unsub fn
+const showAdmin = new URLSearchParams(location.search).has('showAdmin');
+let _treeDebounceTimer = null;
+const _pendingChangedPaths = new Set();
+let _lastAdminRefresh = 0;
+function debouncedLoadTree(path) {
+  _pendingChangedPaths.add(path);
+  clearTimeout(_treeDebounceTimer);
+  _treeDebounceTimer = setTimeout(() => {
+    const paths = [..._pendingChangedPaths];
+    _pendingChangedPaths.clear();
+    const roots = new Set();
+    for (const p of paths) {
+      const top = p.split('/')[0];
+      // Throttle _admin to once per 3s (updates every 1s)
+      if (top === '_admin') {
+        const now = Date.now();
+        if (now - _lastAdminRefresh < 3000) continue;
+        _lastAdminRefresh = now;
+      }
+      roots.add(top);
+    }
+    for (const r of roots) refreshPath(r);
+  }, 300);
+}
+function subscribeTreeLive(topLevelKeys) {
+  // Unsub keys no longer in tree
+  for (const [key, unsub] of _treeUnsubs) {
+    if (!topLevelKeys.includes(key)) { unsub(); _treeUnsubs.delete(key); }
+  }
+  // Skip stress key (too noisy); _admin is throttled via debounce
+  const NOISY_KEYS = new Set(['stress', '_admin']);
+  const visibleKeys = topLevelKeys.filter(k => !NOISY_KEYS.has(k));
+  for (const key of visibleKeys) {
+    if (_treeUnsubs.has(key)) continue;
+    const unsub = db.onChild(key, (ev) => debouncedLoadTree(ev.path));
+    _treeUnsubs.set(key, unsub);
+  }
+}
+function fmtUptime(sec) {
+  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';
+}
+// ── Tab switching ──────────────────────────────────────────────────────────────
+const TAB_IDS = ['rw','query','subs','auth','advanced','streams','mq','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);
+}
+// ── Field persistence ──────────────────────────────────────────────────────────
+const PERSIST_FIELDS = ['rw-path','rw-value','upd-value','q-path','sub-path','auth-test-path','rw-auth-token','auth-token','push-path','push-value','batch-value','tf-path','tf-value','ttl-path','ttl-value','fts-path','fts-content','fts-query','fts-prefix','vec-path','vec-embedding','vec-query','vec-prefix'];
+const DEFAULT_VALUES = {
+  'rw-path': 'users/alice',
+  'rw-value': '{ "name": "Alice", "age": 30, "role": "admin" }',
+  'upd-value': '{ "users/alice/age": 31, "users/bob/role": "admin" }',
+  'q-path': 'users',
+  'sub-path': 'users',
+  'auth-test-path': 'users/alice',
+  'push-path': 'logs',
+  'push-value': `{ "level": "info", "msg": "hello from admin", "ts": ${Date.now()} }`,
+  'batch-value': '[\n  { "op": "set", "path": "counters/views", "value": 42 },\n  { "op": "push", "path": "logs", "value": { "msg": "batch test" } }\n]',
+  'tf-path': 'counters/likes',
+  'tf-value': '1',
+  'ttl-path': 'sessions/demo',
+  'ttl-value': '{ "token": "abc123", "user": "alice" }',
+  'fts-path': 'users/alice',
+  'fts-content': 'Alice is an admin user who manages the system',
+  'fts-query': 'admin',
+  'fts-prefix': 'users',
+  'vec-path': 'users/alice',
+  'vec-embedding': JSON.stringify(Array.from({length:384}, (_,i) => +(Math.sin(i*0.1)*0.5).toFixed(4))),
+  'vec-query': JSON.stringify(Array.from({length:384}, (_,i) => +(Math.sin(i*0.1)*0.5).toFixed(4))),
+  'vec-prefix': 'users',
+};
+function persistFields() {
+  const state = {};
+  for (const id of PERSIST_FIELDS) state[id] = document.getElementById(id).value;
+  localStorage.setItem('zuzdb:fields', JSON.stringify(state));
+}
+function restoreFields() {
+  const saved = localStorage.getItem('zuzdb:fields');
+  try {
+    const state = JSON.parse(saved ?? '{}');
+    const hasState = saved && Object.keys(state).some(k => state[k]);
+    for (const id of PERSIST_FIELDS) {
+      const el = document.getElementById(id);
+      if (!el) continue;
+      if (hasState && state[id]) { el.value = state[id]; }
+      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);
+}
+for (const id of PERSIST_FIELDS) {
+  document.getElementById(id).addEventListener('input', persistFields);
+}
+restoreFields();
+// ── Tree — preserves open state on refresh + across reloads ────────────────────
+const OPEN_KEY = 'zuzdb:treeOpen';
+function getOpenPaths() {
+  const open = new Set();
+  document.querySelectorAll('#tree-container details[open]').forEach(d => open.add(d.dataset.path));
+  return open;
+}
+function saveOpenPaths(open) {
+  try { localStorage.setItem(OPEN_KEY, JSON.stringify([...open])); } catch {}
+}
+function loadOpenPaths() {
+  try { return new Set(JSON.parse(localStorage.getItem(OPEN_KEY) ?? '[]')); } catch { return new Set(); }
+}
+// ── Lazy tree ─────────────────────────────────────────────────────────────────
+// Fetches only immediate children of a path. Nodes expand on click.
+const _loadedPaths = new Set(); // tracks which branch paths have been fetched
+let _treeGeneration = 0; // incremented on full reload to cancel stale expansions
+async function fetchChildren(path) {
+  try {
+    return await db.getShallow(path || undefined) || [];
+  } catch { return []; }
+}
+function renderChildren(children, parentPath) {
+  let html = '';
+  for (const ch of children) {
+    if (!showAdmin && (parentPath ? parentPath + '/' + ch.key : ch.key).startsWith('_admin')) continue;
+    const path = parentPath ? parentPath + '/' + ch.key : ch.key;
+    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="selectPath('${path.replace(/'/g, "\\'")}')"><span class="tree-key">${escHtml(ch.key)}</span>${ttlBadge}<span class="tree-val">${escHtml(String(display ?? ''))}</span></div>`;
+    } else {
+      const isOpen = _restoredOpenPaths.has(path);
+      html += `<details data-path="${escHtml(path)}"${isOpen ? ' open' : ''}><summary onclick="selectPath('${path.replace(/'/g, "\\'")}')">${escHtml(ch.key)}${ttlBadge}</summary><div class="tree-children" data-parent="${escHtml(path)}"></div></details>`;
+    }
+  }
+  return html;
+}
+let _restoredOpenPaths = loadOpenPaths();
+async function loadTree(changedPaths) {
+  _loadedPaths.clear();
+  const gen = ++_treeGeneration;
+  _restoredOpenPaths = getOpenPaths().size ? getOpenPaths() : loadOpenPaths();
+  const children = await fetchChildren('');
+  if (!children || gen !== _treeGeneration) return;
+  const container = document.getElementById('tree-container');
+  container.innerHTML = renderChildren(children, '');
+  // Subscribe live to top-level keys
+  subscribeTreeLive(children.filter(c => !c.isLeaf).map(c => c.key));
+  // Auto-expand any that were previously open
+  for (const det of container.querySelectorAll('details[open]')) {
+    expandNode(det);
+  }
+  // Attach toggle listeners
+  attachToggleListeners(container);
+  // Update node count
+  updateNodeCount();
+  // Flash changed
+  if (changedPaths) flashPaths(changedPaths);
+}
+function attachToggleListeners(root) {
+  root.querySelectorAll('details').forEach(d => {
+    if (d._treeListener) return;
+    d._treeListener = true;
+    d.addEventListener('toggle', () => {
+      saveOpenPaths(getOpenPaths());
+      if (d.open) expandNode(d);
+    }, { passive: true });
+  });
+}
+async function expandNode(details, isRefresh) {
+  const path = details.dataset.path;
+  if (_loadedPaths.has(path)) return;
+  _loadedPaths.add(path);
+  const gen = _treeGeneration;
+  // Remember which sub-paths were open before re-render
+  const prevOpen = new Set();
+  if (isRefresh) {
+    details.querySelectorAll('details[open]').forEach(d => prevOpen.add(d.dataset.path));
+  }
+  const childContainer = details.querySelector(':scope > .tree-children');
+  if (!childContainer) return;
+  const children = await fetchChildren(path);
+  if (gen !== _treeGeneration) return; // stale — tree was reloaded
+  // Merge prevOpen into _restoredOpenPaths so renderChildren marks them open
+  for (const p of prevOpen) _restoredOpenPaths.add(p);
+  childContainer.innerHTML = renderChildren(children, path);
+  // Auto-expand open children (restored or previously open)
+  for (const det of childContainer.querySelectorAll(':scope details[open]')) {
+    expandNode(det);
+  }
+  attachToggleListeners(childContainer);
+  updateNodeCount();
+}
+async function refreshPath(path) {
+  // Re-fetch the nearest loaded ancestor and update its children in-place
+  // For simplicity, find the <details> or root and re-expand
+  const parts = path.split('/');
+  let target = '';
+  // Walk up to find the deepest loaded ancestor
+  for (let i = 1; i <= parts.length; i++) {
+    const p = parts.slice(0, i).join('/');
+    if (_loadedPaths.has(p)) target = p;
+  }
+  if (!target) {
+    // Refresh root
+    return loadTree([path]);
+  }
+  // Re-fetch this node and all its children
+  for (const p of [..._loadedPaths]) {
+    if (p === target || p.startsWith(target + '/')) _loadedPaths.delete(p);
+  }
+  const det = document.querySelector(`#tree-container details[data-path="${CSS.escape(target)}"]`);
+  if (det && det.open) {
+    await expandNode(det, true);
+    flashPaths([path]);
+  }
+}
+function updateNodeCount() {
+  const leaves = document.querySelectorAll('#tree-container .tree-leaf').length;
+  const branches = document.querySelectorAll('#tree-container details').length;
+  document.getElementById('node-count').textContent = `${leaves} leaves, ${branches} branches`;
+}
+function flashPaths(paths) {
+  for (const path of paths) {
+    let el = document.querySelector(`#tree-container [data-path="${CSS.escape(path)}"]`);
+    if (!el) {
+      const parts = path.split('/');
+      while (parts.length > 1) {
+        parts.pop();
+        el = document.querySelector(`#tree-container [data-path="${CSS.escape(parts.join('/'))}"]`);
+        if (el) break;
+      }
+    }
+    if (el) { el.classList.add('flash'); setTimeout(() => el.classList.remove('flash'), 1200); }
+  }
+}
+function selectPath(path) {
+  document.getElementById('rw-path').value = path;
+  document.getElementById('sub-path').value = path;
+  document.getElementById('q-path').value = path.includes('/') ? path.split('/').slice(0, -1).join('/') : path;
+  showTab('view');
+  document.getElementById('view-path').textContent = 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);
+  }).catch(e => {
+    document.getElementById('view-time').textContent = (performance.now() - t0).toFixed(1) + ' ms';
+    document.getElementById('view-result').textContent = 'Error: ' + e.message;
+  });
+}
+function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+// ── Read/Write ─────────────────────────────────────────────────────────────────
+async function doGet() {
+  const path = document.getElementById('rw-path').value.trim();
+  log('info', `GET ${path}`);
+  const t0 = performance.now();
+  try {
+    const res = await db.get(path);
+    const ms = performance.now() - t0;
+    log('info', `GET ${path} →`, res);
+    document.getElementById('rw-result').textContent = JSON.stringify(res, null, 2);
+    showStatus('rw-status', 'OK', true, ms);
+  } catch(e) { log('error', `GET ${path} failed:`, e.message); showStatus('rw-status', e.message, false, performance.now() - t0); }
+}
+async function doSet() {
+  const path = document.getElementById('rw-path').value.trim();
+  const raw = document.getElementById('rw-value').value.trim();
+  let value;
+  try { value = JSON.parse(raw); } catch { return showStatus('rw-status', 'Invalid JSON', false); }
+  log('info', `SET ${path} =`, value);
+  const t0 = performance.now();
+  try {
+    await db.set(path, value);
+    showStatus('rw-status', 'Set OK', true, performance.now() - t0);
+    refreshPath(path);
+  } catch(e) { log('error', `SET ${path} failed:`, e.message); showStatus('rw-status', e.message, false, performance.now() - t0); }
+}
+async function doUpdate() {
+  const path = document.getElementById('rw-path').value.trim();
+  const raw = document.getElementById('rw-value').value.trim();
+  let value;
+  try { value = JSON.parse(raw); } catch { return showStatus('rw-status', 'Invalid JSON', false); }
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) return showStatus('rw-status', 'UPDATE requires an object', false);
+  const updates = Object.fromEntries(Object.entries(value).map(([k, v]) => [`${path}/${k}`, v]));
+  log('info', `UPDATE ${path}`, updates);
+  const t0 = performance.now();
+  try {
+    await db.update(updates);
+    showStatus('rw-status', 'Updated OK', true, performance.now() - t0);
+    for (const p of Object.keys(updates)) refreshPath(p);
+  } catch(e) { log('error', `UPDATE ${path} failed:`, e.message); showStatus('rw-status', e.message, false, performance.now() - t0); }
+}
+async function doDelete() {
+  const path = document.getElementById('rw-path').value.trim();
+  log('info', `DELETE ${path}`);
+  const t0 = performance.now();
+  try {
+    await db.delete(path);
+    showStatus('rw-status', 'Deleted', true, performance.now() - t0);
+    refreshPath(path);
+  } catch(e) { log('error', `DELETE ${path} failed:`, e.message); showStatus('rw-status', e.message, false, performance.now() - t0); }
+}
+// ── Update tab ─────────────────────────────────────────────────────────────────
+async function doUpdateTab() {
+  const raw = document.getElementById('upd-value').value.trim();
+  let updates;
+  try { updates = JSON.parse(raw); } catch { return showStatus('upd-status', 'Invalid JSON', false); }
+  log('info', 'UPDATE (multi-path)', updates);
+  const t0 = performance.now();
+  try {
+    await db.update(updates);
+    showStatus('upd-status', 'Updated', true, performance.now() - t0);
+    for (const p of Object.keys(updates)) refreshPath(p);
+  } catch(e) { log('error', 'UPDATE failed:', e.message); showStatus('upd-status', e.message, false, performance.now() - t0); }
+}
+// ── Push ────────────────────────────────────────────────────────────────────────
+async function doPush() {
+  const path = document.getElementById('push-path').value.trim();
+  const raw = document.getElementById('push-value').value.trim();
+  let value;
+  try { value = JSON.parse(raw); } catch { return showStatus('push-status', 'Invalid JSON', false); }
+  log('info', `PUSH ${path}`, value);
+  const t0 = performance.now();
+  try {
+    const key = await db.push(path, value);
+    showStatus('push-status', `Pushed → ${key}`, true, performance.now() - t0);
+    refreshPath(path);
+  } catch(e) { log('error', `PUSH ${path} failed:`, e.message); showStatus('push-status', e.message, false, performance.now() - t0); }
+}
+// ── Batch ───────────────────────────────────────────────────────────────────────
+async function doBatch() {
+  const raw = document.getElementById('batch-value').value.trim();
+  let operations;
+  try { operations = JSON.parse(raw); } catch { return showStatus('batch-status', 'Invalid JSON array', false); }
+  if (!Array.isArray(operations)) return showStatus('batch-status', 'Must be a JSON array', false);
+  log('info', `BATCH ${operations.length} ops`, operations);
+  const t0 = performance.now();
+  try {
+    const result = await db.batch(operations);
+    showStatus('batch-status', `Batch OK (${operations.length} ops)`, true, performance.now() - t0);
+    const resultEl = document.getElementById('batch-result');
+    if (result) { resultEl.textContent = JSON.stringify(result, null, 2); resultEl.style.display = 'block'; }
+    else { resultEl.style.display = 'none'; }
+    // Refresh affected paths
+    const batchPaths = new Set(operations.map(op => (op.path || Object.keys(op.updates || {})[0] || '').split('/')[0]).filter(Boolean));
+    for (const p of batchPaths) refreshPath(p);
+  } catch(e) { log('error', 'BATCH failed:', e.message); showStatus('batch-status', e.message, false, performance.now() - t0); }
+}
+// ── Query Builder ──────────────────────────────────────────────────────────────
+function addFilter() {
+  const container = document.getElementById('q-filters');
+  const row = document.createElement('div');
+  row.className = 'filter-row';
+  row.innerHTML = `
+    <input type="text" placeholder="field" style="flex:2">
+    <select style="flex:1"><option>==</option><option>!=</option><option>&gt;</option><option>&gt;=</option><option>&lt;</option><option>&lt;=</option><option>contains</option><option>startsWith</option></select>
+    <input type="text" placeholder="value" style="flex:2">
+    <button onclick="this.parentElement.remove()" class="danger sm">✕</button>`;
+  container.appendChild(row);
+}
+async function doQuery() {
+  const path = document.getElementById('q-path').value.trim();
+  const filterRows = document.querySelectorAll('#q-filters .filter-row');
+  const filters = [...filterRows].map(r => {
+    const inputs = r.querySelectorAll('input');
+    const op = r.querySelector('select').value;
+    let val = inputs[1].value.trim();
+    try { val = JSON.parse(val); } catch {}
+    return { field: inputs[0].value.trim(), op, value: val };
+  }).filter(f => f.field);
+  const orderField = document.getElementById('q-order-field').value.trim();
+  const orderDir = document.getElementById('q-order-dir').value;
+  const limit = document.getElementById('q-limit').value.trim();
+  const offset = document.getElementById('q-offset').value.trim();
+  let q = db.query(path);
+  for (const f of filters) q = q.where(f.field, f.op, f.value);
+  if (orderField) q = q.order(orderField, orderDir);
+  if (limit) q = q.limit(Number(limit));
+  if (offset) q = q.offset(Number(offset));
+  const t0 = performance.now();
+  const res = await q.get();
+  showStatus('q-status', Array.isArray(res) ? `${res.length} results` : 'Error', Array.isArray(res), performance.now() - t0);
+  document.getElementById('q-result').innerHTML = renderTable(res);
+}
+function renderTable(data) {
+  if (!Array.isArray(data) || !data.length) return '<div class="result">No results</div>';
+  const allKeys = [...new Set(data.flatMap(r => Object.keys(r)))];
+  const ths = allKeys.map(k => `<th>${escHtml(k)}</th>`).join('');
+  const trs = data.map(r => `<tr>${allKeys.map(k => `<td>${escHtml(r[k] == null ? '' : String(r[k]))}</td>`).join('')}</tr>`).join('');
+  return `<div style="overflow:auto;margin-top:6px"><table><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table></div>`;
+}
+// ── Subscriptions (via ZuzDB WS) ───────────────────────────────────────────────
+const activeSubs = {};
+const EVENT_BADGE = { added: 'color:#4ec9b0', changed: 'color:#569cd6', removed: 'color:#f48771', value: 'color:#9cdcfe' };
+function doSubscribe(mode = 'value') {
+  const path = document.getElementById('sub-path').value.trim();
+  const subKey = `${mode}:${path}`;
+  if (!path || activeSubs[subKey]) return;
+  const id = 'sub-' + Math.random().toString(36).slice(2);
+  const div = document.createElement('div');
+  div.className = 'sub-item'; div.id = id;
+  div.innerHTML = `
+    <div class="sub-item-header">
+      <b>${escHtml(path)}</b>
+      <span style="color:#555;font-size:11px;margin-left:4px">[${mode}]</span>
+      <button class="danger sm" onclick="doUnsubscribe('${id}','${subKey}')">✕</button>
+    </div>
+    <div class="sub-log" id="log-${id}"><div style="color:#555">Waiting for events…</div></div>`;
+  document.getElementById('sub-list').appendChild(div);
+  function appendEntry(type, label, val) {
+    const logEl = document.getElementById('log-' + id);
+    const time = new Date().toLocaleTimeString();
+    const entry = document.createElement('div');
+    const style = EVENT_BADGE[type] ?? 'color:#9cdcfe';
+    entry.innerHTML = `<span>${time}</span><span style="${style};margin-right:6px">${escHtml(type)}</span><span style="color:#666;margin-right:4px">${escHtml(label)}</span>${escHtml(JSON.stringify(val))}`;
+    logEl.prepend(entry);
+    if (logEl.children.length > 50) logEl.lastChild.remove();
+  }
+  let unsub;
+  if (mode === 'child') {
+    unsub = db.onChild(path, (ev) => appendEntry(ev.type, ev.key, ev.val()));
+  } else {
+    unsub = db.on(path, (snap) => appendEntry('value', snap.path, snap.val()));
+  }
+  activeSubs[subKey] = { unsub, id };
+}
+function doUnsubscribe(id, subKey) {
+  activeSubs[subKey]?.unsub();
+  delete activeSubs[subKey];
+  document.getElementById(id)?.remove();
+}
+// ── Auth & Rules ───────────────────────────────────────────────────────────────
+let _authCtx = null;
+async function loadRules() {
+  const el = document.getElementById('auth-rules');
+  try {
+    const rules = await db.getRules();
+    el.textContent = rules.map(r => {
+      const parts = [];
+      if (r.read !== null) parts.push(`read: ${typeof r.read === 'string' ? r.read : r.read}`);
+      if (r.write !== null) parts.push(`write: ${typeof r.write === 'string' ? r.write : r.write}`);
+      return `${r.pattern.padEnd(20)} → ${parts.join(', ')}`;
+    }).join('\n') || '(no rules configured)';
+  } catch { el.textContent = 'Failed to load rules'; }
+}
+function _updateAuthStatus(ctx) {
+  const summary = ctx ? `${escHtml(JSON.stringify(ctx))}` : 'Not authenticated';
+  const color = ctx ? '#4ec9b0' : '#555';
+  document.getElementById('auth-status').innerHTML = `<span style="color:${color}">${ctx ? 'Authenticated' : 'Not authenticated'}</span>${ctx ? ' — ' + summary : ''}`;
+  document.getElementById('rw-auth-status').innerHTML = ctx
+    ? `<span style="color:#4ec9b0">${escHtml(JSON.stringify(ctx))}</span>`
+    : '<span style="color:#555">none</span>';
+}
+async function _applyAuth(token) {
+  if (!token) {
+    _authCtx = null;
+    db.disconnect(); db._closed = false; db.connect();
+    _updateAuthStatus(null);
+    log('info', 'Auth cleared — reconnecting');
+    return;
+  }
+  try {
+    const ctx = await db._send('auth', { token });
+    _authCtx = ctx;
+    _updateAuthStatus(ctx);
+    log('info', 'Auth success', ctx);
+  } catch(e) {
+    _authCtx = null;
+    _updateAuthStatus(null);
+    document.getElementById('auth-status').innerHTML = `<span style="color:#f48771">Auth failed: ${escHtml(e.message)}</span>`;
+    document.getElementById('rw-auth-status').innerHTML = `<span style="color:#f48771">failed</span>`;
+    log('warn', 'Auth failed:', e.message);
+  }
+}
+async function doAuth() {
+  const token = document.getElementById('auth-token').value.trim();
+  await _applyAuth(token);
+}
+async function doRwAuth() {
+  const token = document.getElementById('rw-auth-token').value.trim();
+  document.getElementById('auth-token').value = token; // keep in sync
+  await _applyAuth(token);
+}
+function doDeauth() {
+  document.getElementById('auth-token').value = '';
+  document.getElementById('rw-auth-token').value = '';
+  _applyAuth('');
+}
+async function doTestRule() {
+  const path = document.getElementById('auth-test-path').value.trim();
+  const op = document.getElementById('auth-test-op').value;
+  const resultEl = document.getElementById('auth-test-result');
+  if (!path) return;
+  try {
+    // Attempt the op — if it throws PERMISSION_DENIED we know it's blocked
+    if (op === 'read') {
+      await db.get(path);
+      resultEl.innerHTML = `<span style="color:#4ec9b0">ALLOWED</span> — read ${escHtml(path)}`;
+    } else {
+      const existing = await db.get(path);
+      await db.set(path, existing); // write same value back — non-destructive test
+      resultEl.innerHTML = `<span style="color:#4ec9b0">ALLOWED</span> — write ${escHtml(path)}`;
+    }
+  } catch(e) {
+    const denied = e.message?.includes('Permission denied') || e.message?.includes('denied');
+    resultEl.innerHTML = `<span style="color:${denied ? '#f48771' : '#ce9178'}">${denied ? 'DENIED' : 'ERROR'}</span> — ${escHtml(e.message)}`;
+  }
+}
+// ── Quick-fill helpers ───────────────────────────────────────────────────────────
+function fillTransform(path, type, value) {
+  document.getElementById('tf-path').value = path;
+  document.getElementById('tf-type').value = type;
+  document.getElementById('tf-value').value = value;
+}
+function fillTTL(path, value, seconds) {
+  document.getElementById('ttl-path').value = path;
+  document.getElementById('ttl-value').value = value;
+  document.getElementById('ttl-seconds').value = seconds;
+}
+function fillFts(query, prefix) {
+  document.getElementById('fts-query').value = query;
+  document.getElementById('fts-prefix').value = prefix || '';
+}
+function fillFtsIndex(path, content) {
+  document.getElementById('fts-path').value = path;
+  document.getElementById('fts-content').value = content;
+}
+function fillVecSearch(prefix) {
+  // Fill with alice's embedding pattern for easy testing
+  const q = JSON.stringify(Array.from({length: 384}, (_, i) => +(Math.sin(i * 0.1) * 0.5).toFixed(4)));
+  document.getElementById('vec-query').value = q;
+  document.getElementById('vec-prefix').value = prefix || '';
+}
+// ── Transforms ──────────────────────────────────────────────────────────────────
+async function doTransform() {
+  const path = document.getElementById('tf-path').value.trim();
+  const type = document.getElementById('tf-type').value;
+  const rawVal = document.getElementById('tf-value').value.trim();
+  let value;
+  if (type === 'serverTimestamp') {
+    value = null;
+  } else if (type === 'increment') {
+    value = Number(rawVal) || 0;
+  } else {
+    try { value = JSON.parse(rawVal); } catch { return showStatus('tf-status', 'Invalid JSON value', false); }
+  }
+  const t0 = performance.now();
+  try {
+    const result = await db.transform(path, type, value);
+    showStatus('tf-status', `${type} applied`, true, performance.now() - t0);
+    const el = document.getElementById('tf-result');
+    el.textContent = JSON.stringify(result, null, 2); el.style.display = 'block';
+    refreshPath(path);
+  } catch(e) { showStatus('tf-status', e.message, false, performance.now() - t0); }
+}
+// ── TTL ─────────────────────────────────────────────────────────────────────────
+async function doSetTTL() {
+  const path = document.getElementById('ttl-path').value.trim();
+  const ttl = Number(document.getElementById('ttl-seconds').value) || 60;
+  const raw = document.getElementById('ttl-value').value.trim();
+  let value;
+  try { value = JSON.parse(raw); } catch { return showStatus('ttl-status', 'Invalid JSON', false); }
+  const t0 = performance.now();
+  try {
+    await db.setTTL(path, value, ttl);
+    showStatus('ttl-status', `Set with TTL=${ttl}s`, true, performance.now() - t0);
+    refreshPath(path);
+  } catch(e) { showStatus('ttl-status', e.message, false, performance.now() - t0); }
+}
+async function doSweep() {
+  const t0 = performance.now();
+  try {
+    const expired = await db.sweep();
+    showStatus('ttl-status', `Swept ${expired?.length ?? 0} entries`, true, performance.now() - t0);
+    if (expired?.length) loadTree();
+  } catch(e) { showStatus('ttl-status', e.message, false, performance.now() - t0); }
+}
+// ── FTS ─────────────────────────────────────────────────────────────────────────
+async function doFtsIndex() {
+  const path = document.getElementById('fts-path').value.trim();
+  const content = document.getElementById('fts-content').value.trim();
+  if (!path || !content) return showStatus('fts-status', 'Path and content required', false);
+  const t0 = performance.now();
+  try {
+    await db.ftsIndex(path, content);
+    showStatus('fts-status', 'Indexed', true, performance.now() - t0);
+  } catch(e) { showStatus('fts-status', e.message, false, performance.now() - t0); }
+}
+async function doFtsSearch() {
+  const text = document.getElementById('fts-query').value.trim();
+  const pathPrefix = document.getElementById('fts-prefix').value.trim() || undefined;
+  if (!text) return showStatus('fts-status', 'Enter a search query', false);
+  const t0 = performance.now();
+  try {
+    const results = await db.ftsSearch(text, pathPrefix);
+    const el = document.getElementById('fts-result');
+    showStatus('fts-status', `${results.length} results`, true, performance.now() - t0);
+    el.textContent = JSON.stringify(results, null, 2); el.style.display = 'block';
+  } catch(e) { showStatus('fts-status', e.message, false, performance.now() - t0); }
+}
+// ── Vectors ─────────────────────────────────────────────────────────────────────
+async function doVecStore() {
+  const path = document.getElementById('vec-path').value.trim();
+  const raw = document.getElementById('vec-embedding').value.trim();
+  let embedding;
+  try { embedding = JSON.parse(raw); } catch { return showStatus('vec-status', 'Invalid JSON array', false); }
+  if (!Array.isArray(embedding)) return showStatus('vec-status', 'Embedding must be an array', false);
+  const t0 = performance.now();
+  try {
+    await db.vecStore(path, embedding);
+    showStatus('vec-status', `Stored (${embedding.length}d)`, true, performance.now() - t0);
+  } catch(e) { showStatus('vec-status', e.message, false, performance.now() - t0); }
+}
+async function doVecSearch() {
+  const raw = document.getElementById('vec-query').value.trim();
+  const pathPrefix = document.getElementById('vec-prefix').value.trim() || undefined;
+  const limit = Number(document.getElementById('vec-limit').value) || 5;
+  let query;
+  try { query = JSON.parse(raw); } catch { return showStatus('vec-status', 'Invalid JSON array', false); }
+  const t0 = performance.now();
+  try {
+    const results = await db.vecSearch(query, pathPrefix, limit);
+    const el = document.getElementById('vec-result');
+    showStatus('vec-status', `${results.length} results`, true, performance.now() - t0);
+    el.textContent = JSON.stringify(results, null, 2); el.style.display = 'block';
+  } catch(e) { showStatus('vec-status', e.message, false, performance.now() - t0); }
+}
+// ── Stress Tests ───────────────────────────────────────────────────────────────
+function setProgress(id, pct) { document.getElementById(id).style.width = pct + '%'; }
+function setStressResult(id, text) { document.getElementById(id).textContent = text; }
+function fmtStressResult({ n, elapsedMs, extraLines = [] }) {
+  const ops = Math.round(n / (elapsedMs / 1000));
+  return [`ops: ${n}`, `time: ${elapsedMs.toFixed(1)}ms`, `throughput: ${ops.toLocaleString()} ops/s`, ...extraLines].join('\n');
+}
+async function runSeqWrites() {
+  const n = Number(document.getElementById('sw-n').value);
+  setStressResult('sw-result', 'Running…'); setProgress('sw-prog', 0);
+  const t0 = performance.now();
+  const batch = 50;
+  for (let i = 0; i < n; i += batch) {
+    const end = Math.min(i + batch, n);
+    await Promise.all(Array.from({ length: end - i }, (_, j) => db.set(`stress/seq/${i+j}`, { v: i+j, ts: Date.now() })));
+    setProgress('sw-prog', Math.round((end / n) * 100));
+  }
+  setStressResult('sw-result', fmtStressResult({ n, elapsedMs: performance.now() - t0 }));
+  setProgress('sw-prog', 100); loadTree();
+}
+async function runBurstReads() {
+  const n = Number(document.getElementById('br-n').value);
+  setStressResult('br-result', 'Seeding…');
+  await db.set('stress/read-target', { hello: 'world', x: 42 });
+  setStressResult('br-result', 'Running…'); setProgress('br-prog', 0);
+  const t0 = performance.now(); const latencies = [];
+  const batch = 100;
+  for (let i = 0; i < n; i += batch) {
+    const end = Math.min(i + batch, n); const bt = performance.now();
+    await Promise.all(Array.from({ length: end - i }, () => db.get('stress/read-target')));
+    latencies.push(performance.now() - bt);
+    setProgress('br-prog', Math.round((end / n) * 100));
+  }
+  const elapsedMs = performance.now() - t0;
+  const avgBatch = latencies.reduce((a, b) => a + b, 0) / latencies.length;
+  setStressResult('br-result', fmtStressResult({ n, elapsedMs, extraLines: [`avg batch: ${avgBatch.toFixed(1)}ms`] }));
+  setProgress('br-prog', 100);
+}
+async function runMixed() {
+  const n = Number(document.getElementById('mw-n').value);
+  const writePct = Number(document.getElementById('mw-wp').value) / 100;
+  setStressResult('mw-result', 'Running…'); setProgress('mw-prog', 0);
+  const t0 = performance.now(); let writes = 0, reads = 0;
+  const batch = 50;
+  for (let i = 0; i < n; i += batch) {
+    const end = Math.min(i + batch, n);
+    await Promise.all(Array.from({ length: end - i }, (_, j) => {
+      if (Math.random() < writePct) { writes++; return db.set(`stress/mixed/${i+j}`, i+j); }
+      reads++; return db.get(`stress/mixed/${(i+j) % Math.max(1, i)}`);
+    }));
+    setProgress('mw-prog', Math.round((end / n) * 100));
+  }
+  setStressResult('mw-result', fmtStressResult({ n, elapsedMs: performance.now() - t0, extraLines: [`writes: ${writes}`, `reads: ${reads}`] }));
+  setProgress('mw-prog', 100); loadTree();
+}
+async function runQueryLoad() {
+  const n = Number(document.getElementById('ql-n').value);
+  setStressResult('ql-result', 'Seeding ' + n + ' records…'); setProgress('ql-prog', 5);
+  const batch = 50;
+  for (let i = 0; i < n; i += batch) {
+    const end = Math.min(i + batch, n);
+    await Promise.all(Array.from({ length: end - i }, (_, j) => {
+      const idx = i + j;
+      return db.set(`stress/qload/u${idx}`, { name: `User${idx}`, score: Math.floor(Math.random() * 100), role: idx % 3 === 0 ? 'admin' : 'user' });
+    }));
+    setProgress('ql-prog', 5 + Math.round((Math.min(i + batch, n) / n) * 45));
+  }
+  setStressResult('ql-result', 'Running queries…');
+  const queries = [
+    { filters: [{ field: 'role', op: '==', value: 'admin' }] },
+    { filters: [{ field: 'score', op: '>=', value: 50 }], order: { field: 'score', dir: 'desc' }, limit: 10 },
+    { order: { field: 'name', dir: 'asc' }, limit: 20 },
+  ];
+  const t0 = performance.now(); const qRuns = 30;
+  for (let i = 0; i < qRuns; i++) {
+    const qp = queries[i % queries.length];
+    let q = db.query('stress/qload');
+    for (const f of qp.filters ?? []) q = q.where(f.field, f.op, f.value);
+    if (qp.order) q = q.order(qp.order.field, qp.order.dir);
+    if (qp.limit) q = q.limit(qp.limit);
+    await q.get();
+    setProgress('ql-prog', 50 + Math.round((i / qRuns) * 50));
+  }
+  const elapsedMs = performance.now() - t0;
+  setStressResult('ql-result', fmtStressResult({ n: qRuns, elapsedMs, extraLines: [`records: ${n}`, `avg/query: ${(elapsedMs/qRuns).toFixed(1)}ms`] }));
+  setProgress('ql-prog', 100);
+}
+async function runBulkUpdate() {
+  const keysPerBatch = Number(document.getElementById('bu-n').value);
+  const batches = Number(document.getElementById('bu-b').value);
+  setStressResult('bu-result', 'Running…'); setProgress('bu-prog', 0);
+  const t0 = performance.now();
+  for (let b = 0; b < batches; b++) {
+    const updates = {};
+    for (let k = 0; k < keysPerBatch; k++) updates[`stress/bulk/k${k}`] = { batch: b, val: k * b };
+    await db.update(updates);
+    setProgress('bu-prog', Math.round(((b + 1) / batches) * 100));
+  }
+  const elapsedMs = performance.now() - t0;
+  setStressResult('bu-result', fmtStressResult({ n: keysPerBatch * batches, elapsedMs, extraLines: [`batches: ${batches}`, `keys/batch: ${keysPerBatch}`] }));
+  setProgress('bu-prog', 100); loadTree();
+}
+async function runDeepPaths() {
+  const n = Number(document.getElementById('dp-n').value);
+  const depth = Number(document.getElementById('dp-d').value);
+  setStressResult('dp-result', 'Running…'); setProgress('dp-prog', 0);
+  const t0 = performance.now(); const batch = 20;
+  for (let i = 0; i < n; i += batch) {
+    const end = Math.min(i + batch, n);
+    await Promise.all(Array.from({ length: end - i }, (_, j) => {
+      const idx = i + j;
+      const segs = Array.from({ length: depth }, (_, d) => `l${d}_${idx % (10 + d)}`);
+      return db.set('stress/deep/' + segs.join('/'), idx);
+    }));
+    setProgress('dp-prog', Math.round((end / n) * 100));
+  }
+  setStressResult('dp-result', fmtStressResult({ n, elapsedMs: performance.now() - t0, extraLines: [`depth: ${depth}`] }));
+  setProgress('dp-prog', 100); loadTree();
+}
+// ── Streams ────────────────────────────────────────────────────────────────────
+function fillCompact(path, age, count, key) {
+  document.getElementById('st-compact-path').value = path;
+  document.getElementById('st-compact-age').value = age;
+  document.getElementById('st-compact-count').value = count;
+  document.getElementById('st-compact-key').value = key;
+}
+async function doStreamSnapshot() {
+  const path = document.getElementById('st-snap-path').value.trim();
+  if (!path) return showStatus('st-snap-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const snap = await db.streamSnapshot(path);
+    const el = document.getElementById('st-snap-result');
+    if (snap) {
+      showStatus('st-snap-status', `Snapshot at key ${snap.key} — ${Object.keys(snap.data).length} entries`, true, performance.now() - t0);
+      el.textContent = JSON.stringify(snap, null, 2);
+    } else {
+      showStatus('st-snap-status', 'No snapshot (not yet compacted)', true, performance.now() - t0);
+      el.textContent = 'null';
+    }
+    el.style.display = 'block';
+  } catch(e) { showStatus('st-snap-status', e.message, false, performance.now() - t0); }
+}
+async function doStreamMaterialize() {
+  const path = document.getElementById('st-snap-path').value.trim();
+  const keepKey = document.getElementById('st-snap-keepkey').value.trim() || undefined;
+  if (!path) return showStatus('st-snap-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const view = await db.streamMaterialize(path, keepKey);
+    const keys = Object.keys(view);
+    showStatus('st-snap-status', `Materialized view — ${keys.length} entries`, true, performance.now() - t0);
+    const el = document.getElementById('st-snap-result');
+    el.textContent = JSON.stringify(view, null, 2);
+    el.style.display = 'block';
+  } catch(e) { showStatus('st-snap-status', e.message, false, performance.now() - t0); }
+}
+async function doStreamCompact() {
+  const path = document.getElementById('st-compact-path').value.trim();
+  const maxAge = document.getElementById('st-compact-age').value.trim();
+  const maxCount = document.getElementById('st-compact-count').value.trim();
+  const keepKey = document.getElementById('st-compact-key').value.trim();
+  if (!path) return showStatus('st-compact-status', 'Path required', false);
+  const opts = {};
+  if (maxAge) opts.maxAge = Number(maxAge);
+  if (maxCount) opts.maxCount = Number(maxCount);
+  if (keepKey) opts.keepKey = keepKey;
+  if (!Object.keys(opts).length) return showStatus('st-compact-status', 'At least one option required', false);
+  const t0 = performance.now();
+  try {
+    const result = await db.streamCompact(path, opts);
+    showStatus('st-compact-status', `Compacted — folded ${result.deleted} events into snapshot (${result.snapshotSize} keys)`, true, performance.now() - t0);
+    refreshPath(path);
+  } catch(e) { showStatus('st-compact-status', e.message, false, performance.now() - t0); }
+}
+async function doStreamReset() {
+  const path = document.getElementById('st-compact-path').value.trim();
+  if (!path) return showStatus('st-compact-status', 'Path required', false);
+  if (!confirm(`Reset "${path}"? This deletes ALL events, snapshot, and consumer offsets.`)) return;
+  try {
+    await db.streamReset(path);
+    showStatus('st-compact-status', `Reset "${path}" — all events, snapshot, and offsets deleted`, true);
+    refreshPath(path);
+  } catch(e) { showStatus('st-compact-status', e.message, false); }
+}
+function fillStreamPush(path, value, idem) {
+  document.getElementById('st-push-path').value = path;
+  document.getElementById('st-push-value').value = value;
+  document.getElementById('st-push-idem').value = idem;
+}
+async function doStreamPush() {
+  const path = document.getElementById('st-push-path').value.trim();
+  const raw = document.getElementById('st-push-value').value.trim();
+  const idem = document.getElementById('st-push-idem').value.trim();
+  let value;
+  try { value = JSON.parse(raw); } catch { return showStatus('st-push-status', 'Invalid JSON', false); }
+  const t0 = performance.now();
+  try {
+    const params = { path, value };
+    if (idem) params.idempotencyKey = idem;
+    const key = await db._send('push', params);
+    showStatus('st-push-status', `Pushed → ${key}${idem ? ' (idempotent)' : ''}`, true, performance.now() - t0);
+    refreshPath(path);
+  } catch(e) { showStatus('st-push-status', e.message, false, performance.now() - t0); }
+}
+async function doStreamRead() {
+  const path = document.getElementById('st-read-path').value.trim();
+  const groupId = document.getElementById('st-read-group').value.trim();
+  const limit = Number(document.getElementById('st-read-limit').value) || 50;
+  if (!path || !groupId) return showStatus('st-read-status', 'Path and group ID required', false);
+  const t0 = performance.now();
+  try {
+    const events = await db.streamRead(path, groupId, limit);
+    showStatus('st-read-status', `${events.length} events`, true, performance.now() - t0);
+    const el = document.getElementById('st-read-result');
+    el.textContent = JSON.stringify(events, null, 2);
+    el.style.display = 'block';
+    // Auto-fill ack key with last event
+    if (events.length > 0) {
+      document.getElementById('st-ack-key').value = events[events.length - 1].key;
+      document.getElementById('st-ack-path').value = path;
+      document.getElementById('st-ack-group').value = groupId;
+    }
+  } catch(e) { showStatus('st-read-status', e.message, false, performance.now() - t0); }
+}
+async function doStreamAck() {
+  const path = document.getElementById('st-ack-path').value.trim();
+  const groupId = document.getElementById('st-ack-group').value.trim();
+  const key = document.getElementById('st-ack-key').value.trim();
+  if (!path || !groupId || !key) return showStatus('st-ack-status', 'All fields required', false);
+  const t0 = performance.now();
+  try {
+    await db.streamAck(path, groupId, key);
+    showStatus('st-ack-status', `Acked → ${key}`, true, performance.now() - t0);
+  } catch(e) { showStatus('st-ack-status', e.message, false, performance.now() - t0); }
+}
+const activeStreamSubs = {};
+async function doStreamSub() {
+  const path = document.getElementById('st-sub-path').value.trim();
+  const groupId = document.getElementById('st-sub-group').value.trim();
+  if (!path || !groupId) return;
+  const subKey = `${path}:${groupId}`;
+  if (activeStreamSubs[subKey]) return;
+  // Register callback
+  if (!db._streamCbs) db._streamCbs = new Map();
+  if (!db._streamCbs.has(subKey)) db._streamCbs.set(subKey, new Set());
+  const id = 'ssub-' + Math.random().toString(36).slice(2);
+  const div = document.createElement('div');
+  div.className = 'sub-item'; div.id = id;
+  div.innerHTML = `
+    <div class="sub-item-header">
+      <b>${escHtml(path)}</b>
+      <span style="color:#555;font-size:11px;margin-left:4px">[stream:${escHtml(groupId)}]</span>
+      <button class="danger sm" onclick="doStreamUnsub('${id}','${subKey}','${path}','${groupId}')">✕</button>
+    </div>
+    <div class="sub-log" id="log-${id}"><div style="color:#555">Waiting for events…</div></div>`;
+  document.getElementById('st-sub-list').appendChild(div);
+  const cb = (events) => {
+    const logEl = document.getElementById('log-' + id);
+    for (const ev of events) {
+      const time = new Date().toLocaleTimeString();
+      const entry = document.createElement('div');
+      entry.innerHTML = `<span>${time}</span><span style="color:#4ec9b0;margin-right:6px">${escHtml(ev.key)}</span>${escHtml(JSON.stringify(ev.data))}`;
+      logEl.prepend(entry);
+      if (logEl.children.length > 100) logEl.lastChild.remove();
+    }
+  };
+  db._streamCbs.get(subKey).add(cb);
+  try {
+    await db.streamSub(path, groupId);
+    activeStreamSubs[subKey] = { id, cb };
+  } catch(e) {
+    div.remove();
+    db._streamCbs.get(subKey)?.delete(cb);
+  }
+}
+function doStreamUnsub(id, subKey, path, groupId) {
+  const sub = activeStreamSubs[subKey];
+  if (sub) {
+    db._streamCbs?.get(subKey)?.delete(sub.cb);
+    db.streamUnsub(path, groupId).catch(() => {});
+    delete activeStreamSubs[subKey];
+  }
+  document.getElementById(id)?.remove();
+}
+async function doStreamDemo() {
+  const TOPIC = 'events/demo-orders';
+  const el = document.getElementById('st-demo-result');
+  el.style.display = 'block';
+  el.textContent = '';
+  const wait = (ms = 500) => new Promise(r => setTimeout(r, ms));
+  const log = async (s, delay = 500) => {
+    el.textContent += (el.textContent ? '\n' : '') + s;
+    el.scrollTop = el.scrollHeight;
+    if (delay > 0) await wait(delay);
+  };
+  const t0 = performance.now();
+  try {
+    // Clean slate
+    await db.streamReset(TOPIC);
+    await log('🧹 Reset topic — clean slate');
+    // 1. Push 5 order events
+    const keys = [];
+    for (let i = 1; i <= 5; i++) {
+      const k = await db._send('push', { path: TOPIC, value: { orderId: `order-${i}`, amount: i * 100, status: 'created' } });
+      keys.push(k);
+      await log(`📥 Pushed order-${i}: ${k.slice(0,8)} ($${i * 100})`, 300);
+    }
+    // 2. Consumer group A reads all
+    let eventsA = await db.streamRead(TOPIC, 'group-analytics', 10);
+    await log(`\n📊 Group "analytics" read ${eventsA.length} events`);
+    // 3. Consumer group B reads all
+    let eventsB = await db.streamRead(TOPIC, 'group-billing', 10);
+    await log(`💰 Group "billing" read ${eventsB.length} events (same events — fan-out!)`);
+    // 4. Analytics acks up to event 3
+    await db.streamAck(TOPIC, 'group-analytics', keys[2]);
+    await log(`\n📊 Analytics acked up to ${keys[2].slice(0,8)} (3 of 5 processed)`);
+    // 5. Billing acks all
+    await db.streamAck(TOPIC, 'group-billing', keys[4]);
+    await log(`💰 Billing acked up to ${keys[4].slice(0,8)} (all 5 processed)`);
+    // 6. Analytics re-reads — should get remaining 2
+    eventsA = await db.streamRead(TOPIC, 'group-analytics', 10);
+    await log(`\n📊 Analytics re-read: ${eventsA.length} unprocessed events remaining`);
+    for (const ev of eventsA) {
+      await log(`   → ${ev.key.slice(0,8)}: order-${ev.data?.orderId?.split('-')[1]} ($${ev.data?.amount})`, 250);
+    }
+    // 7. Billing re-reads — should get 0
+    eventsB = await db.streamRead(TOPIC, 'group-billing', 10);
+    await log(`💰 Billing re-read: ${eventsB.length} (all caught up)`);
+    // 8. Push more events
+    await log('\n📥 Pushing 3 more events...');
+    for (let i = 6; i <= 8; i++) {
+      await db._send('push', { path: TOPIC, value: { orderId: `order-${i}`, amount: i * 100, status: 'created' } });
+      await log(`   → order-${i} ($${i * 100})`, 250);
+    }
+    // 9. Idempotent push
+    const idemKey1 = await db._send('push', { path: TOPIC, value: { orderId: 'order-9', amount: 900 }, idempotencyKey: 'order-9-created' });
+    await log(`\n🔑 Idempotent push order-9: ${idemKey1.slice(0,8)}`);
+    const idemKey2 = await db._send('push', { path: TOPIC, value: { orderId: 'order-9', amount: 900 }, idempotencyKey: 'order-9-created' });
+    await log(`🔑 Duplicate push order-9: ${idemKey2.slice(0,8)} (same key — deduped!)`);
+    // 10. Compact — fold old events into snapshot
+    await log('\n🗜️ Compacting: keep last 3 events, keepKey=orderId...');
+    const compactResult = await db.streamCompact(TOPIC, { maxCount: 3, keepKey: 'orderId' });
+    await log(`   Folded ${compactResult.deleted} events into snapshot (${compactResult.snapshotSize} unique orders)`);
+    // 11. View snapshot
+    const snap = await db.streamSnapshot(TOPIC);
+    await log(`\n📸 Snapshot has ${snap ? Object.keys(snap.data).length : 0} entries`);
+    // 12. Materialize — merged view
+    const view = await db.streamMaterialize(TOPIC, 'orderId');
+    const viewKeys = Object.keys(view);
+    await log(`🔮 Materialized view: ${viewKeys.length} total orders`);
+    for (const k of viewKeys.slice(0, 5)) {
+      await log(`   → ${k}: $${view[k]?.amount}`, 200);
+    }
+    if (viewKeys.length > 5) await log(`   ... and ${viewKeys.length - 5} more`, 200);
+    // Cleanup
+    await db.streamReset(TOPIC);
+    await log('\n🧹 Cleaned up topic');
+    const ms = (performance.now() - t0).toFixed(1);
+    await log(`🎉 Demo complete in ${ms}ms — fan-out, offsets, idempotency, compaction, materialization`, 0);
+    showStatus('st-demo-status', 'Demo complete', true, performance.now() - t0);
+  } catch (e) {
+    await log(`\n❌ Error: ${e.message}`, 0);
+    showStatus('st-demo-status', e.message, false);
+  }
+}
+// ── MQ ─────────────────────────────────────────────────────────────────────────
+function fillMqPush(path, value, idem) {
+  document.getElementById('mq-push-path').value = path;
+  document.getElementById('mq-push-value').value = value;
+  document.getElementById('mq-push-idem').value = idem;
+}
+async function doMqPush() {
+  const path = document.getElementById('mq-push-path').value.trim();
+  const idem = document.getElementById('mq-push-idem').value.trim();
+  if (!path) return showStatus('mq-push-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const value = JSON.parse(document.getElementById('mq-push-value').value);
+    const key = await db.mqPush(path, value, idem);
+    showStatus('mq-push-status', `Pushed → ${key}`, true, performance.now() - t0);
+  } catch (e) { showStatus('mq-push-status', e.message, false); }
+}
+async function doMqFetch() {
+  const path = document.getElementById('mq-fetch-path').value.trim();
+  const count = parseInt(document.getElementById('mq-fetch-count').value) || 1;
+  if (!path) return showStatus('mq-fetch-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const msgs = await db.mqFetch(path, count);
+    const el = document.getElementById('mq-fetch-result');
+    el.style.display = 'block';
+    el.textContent = JSON.stringify(msgs, null, 2);
+    showStatus('mq-fetch-status', `${msgs.length} message(s) claimed`, true, performance.now() - t0);
+    // Auto-fill ack key
+    if (msgs.length > 0) {
+      document.getElementById('mq-ack-path').value = path;
+      document.getElementById('mq-ack-key').value = msgs[0].key;
+    }
+  } catch (e) { showStatus('mq-fetch-status', e.message, false); }
+}
+async function doMqAck() {
+  const path = document.getElementById('mq-ack-path').value.trim();
+  const key = document.getElementById('mq-ack-key').value.trim();
+  if (!path || !key) return showStatus('mq-ack-status', 'Path and key required', false);
+  const t0 = performance.now();
+  try {
+    await db.mqAck(path, key);
+    showStatus('mq-ack-status', `Acked ${key}`, true, performance.now() - t0);
+  } catch (e) { showStatus('mq-ack-status', e.message, false); }
+}
+async function doMqNack() {
+  const path = document.getElementById('mq-ack-path').value.trim();
+  const key = document.getElementById('mq-ack-key').value.trim();
+  if (!path || !key) return showStatus('mq-ack-status', 'Path and key required', false);
+  const t0 = performance.now();
+  try {
+    await db.mqNack(path, key);
+    showStatus('mq-ack-status', `Nacked ${key} — released to pending`, true, performance.now() - t0);
+  } catch (e) { showStatus('mq-ack-status', e.message, false); }
+}
+async function doMqPeek() {
+  const path = document.getElementById('mq-peek-path').value.trim();
+  const count = parseInt(document.getElementById('mq-peek-count').value) || 10;
+  if (!path) return showStatus('mq-peek-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const msgs = await db.mqPeek(path, count);
+    const el = document.getElementById('mq-peek-result');
+    el.style.display = 'block';
+    el.textContent = JSON.stringify(msgs, null, 2);
+    showStatus('mq-peek-status', `${msgs.length} message(s)`, true, performance.now() - t0);
+  } catch (e) { showStatus('mq-peek-status', e.message, false); }
+}
+async function doMqDlq() {
+  const path = document.getElementById('mq-dlq-path').value.trim();
+  if (!path) return showStatus('mq-dlq-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const msgs = await db.mqDlq(path);
+    const el = document.getElementById('mq-dlq-result');
+    el.style.display = 'block';
+    el.textContent = msgs.length ? JSON.stringify(msgs, null, 2) : '(empty)';
+    showStatus('mq-dlq-status', `${msgs.length} dead letter(s)`, true, performance.now() - t0);
+  } catch (e) { showStatus('mq-dlq-status', e.message, false); }
+}
+async function doMqPurge() {
+  const path = document.getElementById('mq-purge-path').value.trim();
+  if (!path) return showStatus('mq-purge-status', 'Path required', false);
+  const t0 = performance.now();
+  try {
+    const count = await db.mqPurge(path);
+    showStatus('mq-purge-status', `Purged ${count} message(s)`, true, performance.now() - t0);
+  } catch (e) { showStatus('mq-purge-status', e.message, false); }
+}
+async function doMqDemo() {
+  const Q = 'queues/demo';
+  const el = document.getElementById('mq-demo-result');
+  el.style.display = 'block';
+  el.textContent = '';
+  const wait = (ms = 500) => new Promise(r => setTimeout(r, ms));
+  const log = async (s, delay = 500) => {
+    el.textContent += (el.textContent ? '\n' : '') + s;
+    el.scrollTop = el.scrollHeight;
+    if (delay > 0) await wait(delay);
+  };
+  const t0 = performance.now();
+  try {
+    await db.mqPurge(Q, { all: true });
+    await log('🧹 Purged queue — clean slate');
+    // 1. Push 5 jobs
+    const keys = [];
+    for (let i = 1; i <= 5; i++) {
+      const k = await db.mqPush(Q, { task: `job-${i}`, priority: i > 3 ? 'high' : 'normal' });
+      keys.push(k);
+      await log(`📥 Pushed job-${i}: ${k.slice(0,8)}`, 300);
+    }
+    // 2. Peek — all pending
+    let peek = await db.mqPeek(Q, 10);
+    await log(`\n📋 Peek: ${peek.length} msgs — all ${peek.map(m => m.status).join(', ')}`);
+    // 3. Worker 1 fetches 3
+    const batch1 = await db.mqFetch(Q, 3);
+    await log(`\n👷 Worker 1 claimed ${batch1.length}: ${batch1.map(m => m.key.slice(0,8)).join(', ')}`);
+    // 4. Worker 2 fetches remaining
+    const batch2 = await db.mqFetch(Q, 5);
+    await log(`👷 Worker 2 claimed ${batch2.length}: ${batch2.map(m => m.key.slice(0,8)).join(', ')}`);
+    // 5. Worker 3 gets nothing
+    const batch3 = await db.mqFetch(Q, 5);
+    await log(`👷 Worker 3 claimed ${batch3.length} (none left!)`);
+    // 6. Peek — all inflight
+    peek = await db.mqPeek(Q, 10);
+    await log(`📋 Peek: all ${peek.map(m => m.status).join(', ')}`);
+    // 7. Worker 1: ack 1 & 3, nack 2
+    await db.mqAck(Q, batch1[0].key);
+    await log(`\n✅ Acked ${batch1[0].key.slice(0,8)} (job-1 done)`);
+    await db.mqNack(Q, batch1[1].key);
+    await log(`🔄 Nacked ${batch1[1].key.slice(0,8)} (job-2 → back to pending)`);
+    await db.mqAck(Q, batch1[2].key);
+    await log(`✅ Acked ${batch1[2].key.slice(0,8)} (job-3 done)`);
+    // 8. Worker 2: ack both
+    await db.mqAck(Q, batch2[0].key);
+    await log(`✅ Acked ${batch2[0].key.slice(0,8)} (job-4 done)`);
+    await db.mqAck(Q, batch2[1].key);
+    await log(`✅ Acked ${batch2[1].key.slice(0,8)} (job-5 done)`);
+    // 9. Peek — only job-2 remains
+    peek = await db.mqPeek(Q, 10);
+    await log(`\n📋 Remaining: ${peek.length} msg — status: ${peek[0]?.status}, deliveries: ${peek[0]?.deliveryCount}`);
+    // 10. Retry job-2 multiple times
+    const retry1 = await db.mqFetch(Q, 1);
+    await log(`\n🔄 Retry 1: fetched, deliveryCount=${retry1[0].deliveryCount}`);
+    await db.mqNack(Q, retry1[0].key);
+    await log(`   → nacked back to pending`, 300);
+    const retry2 = await db.mqFetch(Q, 1);
+    await log(`🔄 Retry 2: fetched, deliveryCount=${retry2[0].deliveryCount}`);
+    await db.mqNack(Q, retry2[0].key);
+    await log(`   → nacked back to pending`, 300);
+    const retry3 = await db.mqFetch(Q, 1);
+    await log(`🔄 Retry 3: fetched, deliveryCount=${retry3[0].deliveryCount}`);
+    await log(`   → simulating worker crash (left inflight)...`, 300);
+    // 11. State check
+    await log(`\n⏳ In production, sweep reclaims expired inflight msgs every 60s`);
+    peek = await db.mqPeek(Q, 10);
+    await log(`📋 Peek: ${peek.length} msg — status: ${peek[0]?.status}, deliveries: ${peek[0]?.deliveryCount}`);
+    await log(`   After maxDeliveries (default 5), sweep moves to DLQ`);
+    // 12. Check DLQ
+    const dlq = await db.mqDlq(Q);
+    await log(`\n💀 DLQ: ${dlq.length} dead letters`);
+    // Cleanup
+    await db.mqPurge(Q, { all: true });
+    await log(`\n🧹 Cleaned up queue`);
+    const ms = (performance.now() - t0).toFixed(1);
+    await log(`🎉 Demo complete in ${ms}ms — 5 pushed, 4 acked, 1 retried 3x`, 0);
+    showStatus('mq-demo-status', `Demo complete`, true, performance.now() - t0);
+  } catch (e) {
+    await log(`\n❌ Error: ${e.message}`, 0);
+    showStatus('mq-demo-status', e.message, false);
+  }
+}
+// ── Helpers ────────────────────────────────────────────────────────────────────
+function showStatus(id, msg, ok, ms) {
+  const el = document.getElementById(id);
+  el.className = 'status ' + (ok ? 'ok' : 'err');
+  el.textContent = ms != null ? `${msg} (${ms.toFixed(1)}ms)` : msg;
+}
+</script>
+</body>
+</html>