@bod.ee/db 0.12.6 → 0.13.1

package/admin/src/components/tabs/Streams.tsx

@@ -0,0 +1,329 @@
+import { useRef } from 'react';
+import { db } from '../../context/DbContext';
+import { showStatus, escHtml, refreshTreePath } from './utils';
+
+interface StreamSub { id: string; cb: (events: unknown[]) => void; }
+
+export default function Streams() {
+  const activeStreamSubs = useRef<Record<string, StreamSub>>({});
+  const subListRef = useRef<HTMLDivElement>(null);
+
+  function fillCompact(path: string, age: string, count: string, key: string) {
+    (document.getElementById('st-compact-path') as HTMLInputElement).value = path;
+    (document.getElementById('st-compact-age') as HTMLInputElement).value = age;
+    (document.getElementById('st-compact-count') as HTMLInputElement).value = count;
+    (document.getElementById('st-compact-key') as HTMLInputElement).value = key;
+  }
+
+  function fillStreamPush(path: string, value: string, idem: string) {
+    (document.getElementById('st-push-path') as HTMLInputElement).value = path;
+    (document.getElementById('st-push-value') as HTMLTextAreaElement).value = value;
+    (document.getElementById('st-push-idem') as HTMLInputElement).value = idem;
+  }
+
+  async function doStreamSnapshot() {
+    const path = (document.getElementById('st-snap-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('st-snap-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const snap = await db.streamSnapshot(path) as { key: string; data: Record<string, unknown> } | null;
+      const el = document.getElementById('st-snap-result') as HTMLElement;
+      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: unknown) { showStatus('st-snap-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doStreamMaterialize() {
+    const path = (document.getElementById('st-snap-path') as HTMLInputElement).value.trim();
+    const keepKey = (document.getElementById('st-snap-keepkey') as HTMLInputElement).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) as Record<string, unknown>;
+      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') as HTMLElement;
+      el.textContent = JSON.stringify(view, null, 2);
+      el.style.display = 'block';
+    } catch (e: unknown) { showStatus('st-snap-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doStreamCompact() {
+    const path = (document.getElementById('st-compact-path') as HTMLInputElement).value.trim();
+    const maxAge = (document.getElementById('st-compact-age') as HTMLInputElement).value.trim();
+    const maxCount = (document.getElementById('st-compact-count') as HTMLInputElement).value.trim();
+    const keepKey = (document.getElementById('st-compact-key') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('st-compact-status', 'Path required', false);
+    const opts: Record<string, unknown> = {};
+    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) as { deleted: number; snapshotSize: number };
+      showStatus('st-compact-status', `Compacted — folded ${result.deleted} events into snapshot (${result.snapshotSize} keys)`, true, performance.now() - t0);
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('st-compact-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doStreamReset() {
+    const path = (document.getElementById('st-compact-path') as HTMLInputElement).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);
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('st-compact-status', (e as Error).message, false); }
+  }
+
+  async function doStreamPush() {
+    const path = (document.getElementById('st-push-path') as HTMLInputElement).value.trim();
+    const raw = (document.getElementById('st-push-value') as HTMLTextAreaElement).value.trim();
+    const idem = (document.getElementById('st-push-idem') as HTMLInputElement).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: Record<string, unknown> = { 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);
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('st-push-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doStreamRead() {
+    const path = (document.getElementById('st-read-path') as HTMLInputElement).value.trim();
+    const groupId = (document.getElementById('st-read-group') as HTMLInputElement).value.trim();
+    const limit = Number((document.getElementById('st-read-limit') as HTMLInputElement).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) as Array<{ key: string }>;
+      showStatus('st-read-status', `${events.length} events`, true, performance.now() - t0);
+      const el = document.getElementById('st-read-result') as HTMLElement;
+      el.textContent = JSON.stringify(events, null, 2);
+      el.style.display = 'block';
+      if (events.length > 0) {
+        (document.getElementById('st-ack-key') as HTMLInputElement).value = events[events.length - 1].key;
+        (document.getElementById('st-ack-path') as HTMLInputElement).value = path;
+        (document.getElementById('st-ack-group') as HTMLInputElement).value = groupId;
+      }
+    } catch (e: unknown) { showStatus('st-read-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doStreamAck() {
+    const path = (document.getElementById('st-ack-path') as HTMLInputElement).value.trim();
+    const groupId = (document.getElementById('st-ack-group') as HTMLInputElement).value.trim();
+    const key = (document.getElementById('st-ack-key') as HTMLInputElement).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: unknown) { showStatus('st-ack-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doStreamSub() {
+    const path = (document.getElementById('st-sub-path') as HTMLInputElement).value.trim();
+    const groupId = (document.getElementById('st-sub-group') as HTMLInputElement).value.trim();
+    if (!path || !groupId) return;
+    const subKey = `${path}:${groupId}`;
+    if (activeStreamSubs.current[subKey]) return;
+    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" id="unsub-${id}">✕</button>
+      </div>
+      <div class="sub-log" id="log-${id}"><div style="color:#555">Waiting for events…</div></div>`;
+    subListRef.current!.appendChild(div);
+    document.getElementById('unsub-' + id)!.onclick = () => doStreamUnsub(id, subKey, path, groupId);
+    const cb = (events: unknown[]) => {
+      const logEl = document.getElementById('log-' + id)!;
+      for (const ev of events as Array<{ key: string; data: unknown }>) {
+        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.current[subKey] = { id, cb };
+    } catch {
+      div.remove();
+      db._streamCbs.get(subKey)?.delete(cb);
+    }
+  }
+
+  function doStreamUnsub(id: string, subKey: string, path: string, groupId: string) {
+    const sub = activeStreamSubs.current[subKey];
+    if (sub) {
+      db._streamCbs?.get(subKey)?.delete(sub.cb);
+      db.streamUnsub(path, groupId).catch(() => {});
+      delete activeStreamSubs.current[subKey];
+    }
+    document.getElementById(id)?.remove();
+  }
+
+  async function doStreamDemo() {
+    const TOPIC = 'events/demo-orders';
+    const el = document.getElementById('st-demo-result') as HTMLElement;
+    el.style.display = 'block'; el.textContent = '';
+    const wait = (ms = 500) => new Promise(r => setTimeout(r, ms));
+    const appendLog = async (s: string, 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.streamReset(TOPIC);
+      await appendLog('🧹 Reset topic — clean slate');
+      const keys: string[] = [];
+      for (let i = 1; i <= 5; i++) {
+        const k = await db._send('push', { path: TOPIC, value: { orderId: `order-${i}`, amount: i * 100, status: 'created' } }) as string;
+        keys.push(k);
+        await appendLog(`📥 Pushed order-${i}: ${k.slice(0,8)} ($${i * 100})`, 300);
+      }
+      let eventsA = await db.streamRead(TOPIC, 'group-analytics', 10) as unknown[];
+      await appendLog(`\n📊 Group "analytics" read ${eventsA.length} events`);
+      let eventsB = await db.streamRead(TOPIC, 'group-billing', 10) as unknown[];
+      await appendLog(`💰 Group "billing" read ${eventsB.length} events (same events — fan-out!)`);
+      await db.streamAck(TOPIC, 'group-analytics', keys[2]);
+      await appendLog(`\n📊 Analytics acked up to ${keys[2].slice(0,8)} (3 of 5 processed)`);
+      await db.streamAck(TOPIC, 'group-billing', keys[4]);
+      await appendLog(`💰 Billing acked up to ${keys[4].slice(0,8)} (all 5 processed)`);
+      eventsA = await db.streamRead(TOPIC, 'group-analytics', 10) as unknown[];
+      await appendLog(`\n📊 Analytics re-read: ${eventsA.length} unprocessed events remaining`);
+      eventsB = await db.streamRead(TOPIC, 'group-billing', 10) as unknown[];
+      await appendLog(`💰 Billing re-read: ${eventsB.length} (all caught up)`);
+      await appendLog('\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 appendLog(`   → order-${i} ($${i * 100})`, 250);
+      }
+      const idemKey1 = await db._send('push', { path: TOPIC, value: { orderId: 'order-9', amount: 900 }, idempotencyKey: 'order-9-created' }) as string;
+      await appendLog(`\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' }) as string;
+      await appendLog(`🔑 Duplicate push order-9: ${idemKey2.slice(0,8)} (same key — deduped!)`);
+      await appendLog('\n🗜️ Compacting: keep last 3 events, keepKey=orderId...');
+      const compactResult = await db.streamCompact(TOPIC, { maxCount: 3, keepKey: 'orderId' }) as { deleted: number; snapshotSize: number };
+      await appendLog(`   Folded ${compactResult.deleted} events into snapshot (${compactResult.snapshotSize} unique orders)`);
+      const snap = await db.streamSnapshot(TOPIC) as { data: Record<string, unknown> } | null;
+      await appendLog(`\n📸 Snapshot has ${snap ? Object.keys(snap.data).length : 0} entries`);
+      const view = await db.streamMaterialize(TOPIC, 'orderId') as Record<string, { amount?: number }>;
+      const viewKeys = Object.keys(view);
+      await appendLog(`🔮 Materialized view: ${viewKeys.length} total orders`);
+      for (const k of viewKeys.slice(0, 5)) await appendLog(`   → ${k}: $${view[k]?.amount}`, 200);
+      if (viewKeys.length > 5) await appendLog(`   ... and ${viewKeys.length - 5} more`, 200);
+      await db.streamReset(TOPIC);
+      await appendLog('\n🧹 Cleaned up topic');
+      const ms = (performance.now() - t0).toFixed(1);
+      await appendLog(`🎉 Demo complete in ${ms}ms — fan-out, offsets, idempotency, compaction, materialization`, 0);
+      showStatus('st-demo-status', 'Demo complete', true, performance.now() - t0);
+    } catch (e: unknown) {
+      await appendLog(`\n❌ Error: ${(e as Error).message}`, 0);
+      showStatus('st-demo-status', (e as Error).message, false);
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>E2E Demo — push events → consumer groups → ack → compact → materialize</label>
+        <div className="row"><button className="success" onClick={doStreamDemo}>RUN DEMO</button></div>
+        <div id="st-demo-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="st-demo-result" style={{ marginTop: 4, display: 'none', maxHeight: 400, whiteSpace: 'pre-wrap' }}>—</div>
+      </div>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Push Event — append to a topic (idempotent push optional)</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillStreamPush('events/orders', '{"orderId":"o99","amount":250}', '')}>push order</button>
+          <button className="sm" onClick={() => fillStreamPush('events/orders', '{"orderId":"o99","amount":250}', 'order-o99')}>idempotent push</button>
+        </div>
+        <div className="row">
+          <input id="st-push-path" type="text" placeholder="events/orders" defaultValue="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={{ minHeight: 40, marginTop: 4 }} defaultValue='{ "orderId": "o99", "amount": 250 }'></textarea>
+        <div className="row" style={{ marginTop: 4 }}><button className="success" onClick={doStreamPush}>PUSH</button></div>
+        <div id="st-push-status" style={{ marginTop: 4 }}></div>
+      </div>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Read — fetch unprocessed events for a consumer group</label>
+        <div className="row">
+          <input id="st-read-path" type="text" placeholder="events/orders" defaultValue="events/orders" style={{ flex: 2 }} />
+          <input id="st-read-group" type="text" placeholder="group ID" defaultValue="admin-ui" style={{ flex: 1 }} />
+          <input id="st-read-limit" type="number" defaultValue="50" style={{ width: 70 }} placeholder="limit" />
+          <button onClick={doStreamRead}>READ</button>
+        </div>
+        <div id="st-read-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="st-read-result" style={{ marginTop: 4, display: 'none', maxHeight: 300 }}>—</div>
+      </div>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Ack — commit offset for a consumer group</label>
+        <div className="row">
+          <input id="st-ack-path" type="text" placeholder="events/orders" defaultValue="events/orders" style={{ flex: 2 }} />
+          <input id="st-ack-group" type="text" placeholder="group ID" defaultValue="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={{ marginTop: 4 }}></div>
+      </div>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Compact — remove old/excess events (safe: respects consumer offsets)</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillCompact('events/orders', '', '100', '')}>keep 100</button>
+          <button className="sm" onClick={() => fillCompact('events/orders', '3600', '', '')}>max 1h</button>
+          <button className="sm" onClick={() => fillCompact('events/orders', '', '', 'orderId')}>keepKey: orderId</button>
+        </div>
+        <div className="row">
+          <input id="st-compact-path" type="text" placeholder="events/orders" defaultValue="events/orders" style={{ flex: 2 }} />
+          <input id="st-compact-age" type="number" placeholder="maxAge (sec)" style={{ width: 110 }} />
+          <input id="st-compact-count" type="number" placeholder="maxCount" style={{ width: 100 }} />
+          <input id="st-compact-key" type="text" placeholder="keepKey field" style={{ flex: 1 }} />
+          <button className="danger" onClick={doStreamCompact}>COMPACT</button>
+          <button className="danger" onClick={doStreamReset} title="Delete all events, snapshot, and offsets">RESET</button>
+        </div>
+        <div id="st-compact-status" style={{ marginTop: 4 }}></div>
+      </div>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Snapshot & Materialize — view base state and merged view</label>
+        <div className="row">
+          <input id="st-snap-path" type="text" placeholder="events/orders" defaultValue="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 className="success" onClick={doStreamMaterialize}>MATERIALIZE</button>
+        </div>
+        <div id="st-snap-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="st-snap-result" style={{ marginTop: 4, display: 'none', maxHeight: 300 }}>—</div>
+      </div>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Subscribe — live stream with replay from last offset</label>
+        <div className="row">
+          <input id="st-sub-path" type="text" placeholder="events/orders" defaultValue="events/orders" style={{ flex: 2 }} />
+          <input id="st-sub-group" type="text" placeholder="group ID" defaultValue="admin-live" style={{ flex: 1 }} />
+          <button className="sub" onClick={doStreamSub}>SUBSCRIBE</button>
+        </div>
+        <div ref={subListRef} id="st-sub-list" style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 6 }}></div>
+      </div>
+    </div>
+  );
+}

package/admin/src/components/tabs/StressTests.tsx

@@ -0,0 +1,209 @@
+import { db } from '../../context/DbContext';
+
+function setProgress(id: string, pct: number) {
+  const el = document.getElementById(id) as HTMLElement;
+  if (el) el.style.width = pct + '%';
+}
+function setStressResult(id: string, text: string) {
+  const el = document.getElementById(id) as HTMLElement;
+  if (el) el.textContent = text;
+}
+function fmtStressResult({ n, elapsedMs, extraLines = [] }: { n: number; elapsedMs: number; extraLines?: string[] }) {
+  const ops = Math.round(n / (elapsedMs / 1000));
+  return [`ops: ${n}`, `time: ${elapsedMs.toFixed(1)}ms`, `throughput: ${ops.toLocaleString()} ops/s`, ...extraLines].join('\n');
+}
+
+export default function StressTests() {
+  async function runSeqWrites() {
+    const n = Number((document.getElementById('sw-n') as HTMLInputElement).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);
+  }
+
+  async function runBurstReads() {
+    const n = Number((document.getElementById('br-n') as HTMLInputElement).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: number[] = [];
+    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') as HTMLInputElement).value);
+    const writePct = Number((document.getElementById('mw-wp') as HTMLInputElement).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);
+  }
+
+  async function runQueryLoad() {
+    const n = Number((document.getElementById('ql-n') as HTMLInputElement).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' as const }, limit: 10 },
+      { order: { field: 'name', dir: 'asc' as const }, 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') as HTMLInputElement).value);
+    const batches = Number((document.getElementById('bu-b') as HTMLInputElement).value);
+    setStressResult('bu-result', 'Running…'); setProgress('bu-prog', 0);
+    const t0 = performance.now();
+    for (let b = 0; b < batches; b++) {
+      const updates: Record<string, unknown> = {};
+      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));
+    }
+    setStressResult('bu-result', fmtStressResult({ n: keysPerBatch * batches, elapsedMs: performance.now() - t0, extraLines: [`batches: ${batches}`, `keys/batch: ${keysPerBatch}`] }));
+    setProgress('bu-prog', 100);
+  }
+
+  async function runDeepPaths() {
+    const n = Number((document.getElementById('dp-n') as HTMLInputElement).value);
+    const depth = Number((document.getElementById('dp-d') as HTMLInputElement).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);
+  }
+
+  return (
+    <div className="stress-grid">
+      <div className="stress-card">
+        <h4>Sequential Writes</h4>
+        <div className="row" style={{ alignItems: 'center', gap: 8 }}>
+          <label style={{ margin: 0 }}>N:</label>
+          <input type="number" id="sw-n" defaultValue="1000" min="10" max="100000" style={{ width: 90 }} />
+          <button onClick={runSeqWrites}>Run</button>
+        </div>
+        <div className="progress-bar"><div className="progress-fill" id="sw-prog"></div></div>
+        <div className="stress-result" id="sw-result">—</div>
+      </div>
+      <div className="stress-card">
+        <h4>Burst Reads</h4>
+        <div className="row" style={{ alignItems: 'center', gap: 8 }}>
+          <label style={{ margin: 0 }}>N:</label>
+          <input type="number" id="br-n" defaultValue="2000" min="10" max="100000" style={{ width: 90 }} />
+          <button onClick={runBurstReads}>Run</button>
+        </div>
+        <div className="progress-bar"><div className="progress-fill" id="br-prog"></div></div>
+        <div className="stress-result" id="br-result">—</div>
+      </div>
+      <div className="stress-card">
+        <h4>Mixed Read/Write</h4>
+        <div className="row" style={{ alignItems: 'center', gap: 8 }}>
+          <label style={{ margin: 0 }}>N:</label>
+          <input type="number" id="mw-n" defaultValue="500" min="10" max="50000" style={{ width: 90 }} />
+          <label style={{ margin: 0 }}>W%:</label>
+          <input type="number" id="mw-wp" defaultValue="30" min="0" max="100" style={{ width: 60 }} />
+          <button onClick={runMixed}>Run</button>
+        </div>
+        <div className="progress-bar"><div className="progress-fill" id="mw-prog"></div></div>
+        <div className="stress-result" id="mw-result">—</div>
+      </div>
+      <div className="stress-card">
+        <h4>Query Under Load</h4>
+        <div className="row" style={{ alignItems: 'center', gap: 8 }}>
+          <label style={{ margin: 0 }}>Records:</label>
+          <input type="number" id="ql-n" defaultValue="500" min="10" max="10000" style={{ width: 80 }} />
+          <button onClick={runQueryLoad}>Run</button>
+        </div>
+        <div className="progress-bar"><div className="progress-fill" id="ql-prog"></div></div>
+        <div className="stress-result" id="ql-result">—</div>
+      </div>
+      <div className="stress-card">
+        <h4>Bulk Update</h4>
+        <div className="row" style={{ alignItems: 'center', gap: 8 }}>
+          <label style={{ margin: 0 }}>Keys/batch:</label>
+          <input type="number" id="bu-n" defaultValue="100" min="5" max="5000" style={{ width: 80 }} />
+          <label style={{ margin: 0 }}>Batches:</label>
+          <input type="number" id="bu-b" defaultValue="20" min="1" max="500" style={{ width: 60 }} />
+          <button onClick={runBulkUpdate}>Run</button>
+        </div>
+        <div className="progress-bar"><div className="progress-fill" id="bu-prog"></div></div>
+        <div className="stress-result" id="bu-result">—</div>
+      </div>
+      <div className="stress-card">
+        <h4>Deep Path Writes</h4>
+        <div className="row" style={{ alignItems: 'center', gap: 8 }}>
+          <label style={{ margin: 0 }}>N:</label>
+          <input type="number" id="dp-n" defaultValue="200" min="10" max="5000" style={{ width: 80 }} />
+          <label style={{ margin: 0 }}>Depth:</label>
+          <input type="number" id="dp-d" defaultValue="6" min="2" max="12" style={{ width: 60 }} />
+          <button onClick={runDeepPaths}>Run</button>
+        </div>
+        <div className="progress-bar"><div className="progress-fill" id="dp-prog"></div></div>
+        <div className="stress-result" id="dp-result">—</div>
+      </div>
+    </div>
+  );
+}

package/admin/src/components/tabs/Subscriptions.tsx

@@ -0,0 +1,69 @@
+import { useRef } from 'react';
+import { db } from '../../context/DbContext';
+import { escHtml } from './utils';
+
+const EVENT_BADGE: Record<string, string> = { added: 'color:#4ec9b0', changed: 'color:#569cd6', removed: 'color:#f48771', value: 'color:#9cdcfe' };
+
+interface SubEntry { unsub: () => void; id: string; }
+
+export default function Subscriptions() {
+  const activeSubs = useRef<Record<string, SubEntry>>({});
+  const listRef = useRef<HTMLDivElement>(null);
+
+  function doSubscribe(mode: 'value' | 'child') {
+    const path = (document.getElementById('sub-path') as HTMLInputElement).value.trim();
+    const subKey = `${mode}:${path}`;
+    if (!path || activeSubs.current[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" id="unsub-${id}">✕</button>
+      </div>
+      <div class="sub-log" id="log-${id}"><div style="color:#555">Waiting for events…</div></div>`;
+    listRef.current!.appendChild(div);
+    document.getElementById('unsub-' + id)!.onclick = () => doUnsubscribe(id, subKey);
+
+    function appendEntry(type: string, label: string, val: unknown) {
+      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: () => void;
+    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.current[subKey] = { unsub, id };
+  }
+
+  function doUnsubscribe(id: string, subKey: string) {
+    activeSubs.current[subKey]?.unsub();
+    delete activeSubs.current[subKey];
+    document.getElementById(id)?.remove();
+  }
+
+  return (
+    <>
+      <div>
+        <label>Path to Subscribe</label>
+        <div className="row">
+          <input id="sub-path" type="text" placeholder="users/alice" />
+          <button className="sub" onClick={() => doSubscribe('value')}>VALUE</button>
+          <button className="sub" onClick={() => doSubscribe('child')} style={{ background: '#4a3f6b' }}>CHILD</button>
+        </div>
+        <div style={{ color: '#555', fontSize: 11, marginTop: 4 }}>VALUE — fires on any change at/below path &nbsp;·&nbsp; CHILD — fires for direct child added/changed/removed</div>
+      </div>
+      <div ref={listRef} id="sub-list" style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 6 }}></div>
+    </>
+  );
+}