@bod.ee/db 0.12.6 → 0.13.1

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

@@ -0,0 +1,237 @@
+import { db } from '../../context/DbContext';
+import { showStatus } from './utils';
+
+export default function MessageQueue() {
+  function fillMqPush(path: string, value: string, idem: string) {
+    (document.getElementById('mq-push-path') as HTMLInputElement).value = path;
+    (document.getElementById('mq-push-value') as HTMLTextAreaElement).value = value;
+    (document.getElementById('mq-push-idem') as HTMLInputElement).value = idem;
+  }
+
+  async function doMqPush() {
+    const path = (document.getElementById('mq-push-path') as HTMLInputElement).value.trim();
+    const idem = (document.getElementById('mq-push-idem') as HTMLInputElement).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') as HTMLTextAreaElement).value);
+      const key = await db.mqPush(path, value, idem);
+      showStatus('mq-push-status', `Pushed → ${key}`, true, performance.now() - t0);
+    } catch (e: unknown) { showStatus('mq-push-status', (e as Error).message, false); }
+  }
+
+  async function doMqFetch() {
+    const path = (document.getElementById('mq-fetch-path') as HTMLInputElement).value.trim();
+    const count = parseInt((document.getElementById('mq-fetch-count') as HTMLInputElement).value) || 1;
+    if (!path) return showStatus('mq-fetch-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const msgs = await db.mqFetch(path, count) as Array<{ key: string }>;
+      const el = document.getElementById('mq-fetch-result') as HTMLElement;
+      el.style.display = 'block';
+      el.textContent = JSON.stringify(msgs, null, 2);
+      showStatus('mq-fetch-status', `${msgs.length} message(s) claimed`, true, performance.now() - t0);
+      if (msgs.length > 0) {
+        (document.getElementById('mq-ack-path') as HTMLInputElement).value = path;
+        (document.getElementById('mq-ack-key') as HTMLInputElement).value = msgs[0].key;
+      }
+    } catch (e: unknown) { showStatus('mq-fetch-status', (e as Error).message, false); }
+  }
+
+  async function doMqAck() {
+    const path = (document.getElementById('mq-ack-path') as HTMLInputElement).value.trim();
+    const key = (document.getElementById('mq-ack-key') as HTMLInputElement).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: unknown) { showStatus('mq-ack-status', (e as Error).message, false); }
+  }
+
+  async function doMqNack() {
+    const path = (document.getElementById('mq-ack-path') as HTMLInputElement).value.trim();
+    const key = (document.getElementById('mq-ack-key') as HTMLInputElement).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: unknown) { showStatus('mq-ack-status', (e as Error).message, false); }
+  }
+
+  async function doMqPeek() {
+    const path = (document.getElementById('mq-peek-path') as HTMLInputElement).value.trim();
+    const count = parseInt((document.getElementById('mq-peek-count') as HTMLInputElement).value) || 10;
+    if (!path) return showStatus('mq-peek-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const msgs = await db.mqPeek(path, count) as unknown[];
+      const el = document.getElementById('mq-peek-result') as HTMLElement;
+      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: unknown) { showStatus('mq-peek-status', (e as Error).message, false); }
+  }
+
+  async function doMqDlq() {
+    const path = (document.getElementById('mq-dlq-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('mq-dlq-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const msgs = await db.mqDlq(path) as unknown[];
+      const el = document.getElementById('mq-dlq-result') as HTMLElement;
+      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: unknown) { showStatus('mq-dlq-status', (e as Error).message, false); }
+  }
+
+  async function doMqPurge() {
+    const path = (document.getElementById('mq-purge-path') as HTMLInputElement).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: unknown) { showStatus('mq-purge-status', (e as Error).message, false); }
+  }
+
+  async function doMqDemo() {
+    const Q = 'queues/demo';
+    const el = document.getElementById('mq-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.mqPurge(Q, { all: true });
+      await appendLog('🧹 Purged queue — clean slate');
+      const keys: string[] = [];
+      for (let i = 1; i <= 5; i++) {
+        const k = await db.mqPush(Q, { task: `job-${i}`, priority: i > 3 ? 'high' : 'normal' }) as string;
+        keys.push(k);
+        await appendLog(`📥 Pushed job-${i}: ${k.slice(0,8)}`, 300);
+      }
+      let peek = await db.mqPeek(Q, 10) as Array<{ key: string; status: string; deliveryCount: number }>;
+      await appendLog(`\n📋 Peek: ${peek.length} msgs — all ${peek.map(m => m.status).join(', ')}`);
+      const batch1 = await db.mqFetch(Q, 3) as Array<{ key: string; deliveryCount: number }>;
+      await appendLog(`\n👷 Worker 1 claimed ${batch1.length}: ${batch1.map(m => m.key.slice(0,8)).join(', ')}`);
+      const batch2 = await db.mqFetch(Q, 5) as Array<{ key: string }>;
+      await appendLog(`👷 Worker 2 claimed ${batch2.length}: ${batch2.map(m => m.key.slice(0,8)).join(', ')}`);
+      const batch3 = await db.mqFetch(Q, 5) as unknown[];
+      await appendLog(`👷 Worker 3 claimed ${batch3.length} (none left!)`);
+      peek = await db.mqPeek(Q, 10) as Array<{ key: string; status: string; deliveryCount: number }>;
+      await appendLog(`📋 Peek: all ${peek.map(m => m.status).join(', ')}`);
+      await db.mqAck(Q, batch1[0].key);
+      await appendLog(`\n✅ Acked ${batch1[0].key.slice(0,8)} (job-1 done)`);
+      await db.mqNack(Q, batch1[1].key);
+      await appendLog(`🔄 Nacked ${batch1[1].key.slice(0,8)} (job-2 → back to pending)`);
+      await db.mqAck(Q, batch1[2].key);
+      await appendLog(`✅ Acked ${batch1[2].key.slice(0,8)} (job-3 done)`);
+      await db.mqAck(Q, batch2[0].key);
+      await appendLog(`✅ Acked ${batch2[0].key.slice(0,8)} (job-4 done)`);
+      await db.mqAck(Q, batch2[1].key);
+      await appendLog(`✅ Acked ${batch2[1].key.slice(0,8)} (job-5 done)`);
+      peek = await db.mqPeek(Q, 10) as Array<{ key: string; status: string; deliveryCount: number }>;
+      await appendLog(`\n📋 Remaining: ${peek.length} msg — status: ${peek[0]?.status}, deliveries: ${peek[0]?.deliveryCount}`);
+      const retry1 = await db.mqFetch(Q, 1) as Array<{ key: string; deliveryCount: number }>;
+      await appendLog(`\n🔄 Retry 1: fetched, deliveryCount=${retry1[0].deliveryCount}`);
+      await db.mqNack(Q, retry1[0].key);
+      await appendLog(`   → nacked back to pending`, 300);
+      const retry2 = await db.mqFetch(Q, 1) as Array<{ key: string; deliveryCount: number }>;
+      await appendLog(`🔄 Retry 2: fetched, deliveryCount=${retry2[0].deliveryCount}`);
+      await db.mqNack(Q, retry2[0].key);
+      await appendLog(`   → nacked back to pending`, 300);
+      const retry3 = await db.mqFetch(Q, 1) as Array<{ key: string; deliveryCount: number }>;
+      await appendLog(`🔄 Retry 3: fetched, deliveryCount=${retry3[0].deliveryCount}`);
+      await appendLog(`   → simulating worker crash (left inflight)...`, 300);
+      await appendLog(`\n⏳ In production, sweep reclaims expired inflight msgs every 60s`);
+      peek = await db.mqPeek(Q, 10) as Array<{ key: string; status: string; deliveryCount: number }>;
+      await appendLog(`📋 Peek: ${peek.length} msg — status: ${peek[0]?.status}, deliveries: ${peek[0]?.deliveryCount}`);
+      await appendLog(`   After maxDeliveries (default 5), sweep moves to DLQ`);
+      const dlq = await db.mqDlq(Q) as unknown[];
+      await appendLog(`\n💀 DLQ: ${dlq.length} dead letters`);
+      await db.mqPurge(Q, { all: true });
+      await appendLog(`\n🧹 Cleaned up queue`);
+      const ms = (performance.now() - t0).toFixed(1);
+      await appendLog(`🎉 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: unknown) {
+      await appendLog(`\n❌ Error: ${(e as Error).message}`, 0);
+      showStatus('mq-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 — full worker lifecycle: push → fetch → ack/nack → retry → DLQ</label>
+        <div className="row"><button className="success" onClick={doMqDemo}>RUN DEMO</button></div>
+        <div id="mq-demo-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="mq-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 Job — enqueue a message (SQS-style, exactly-once delivery)</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillMqPush('queues/jobs', '{"type":"email","to":"user@example.com"}', '')}>email job</button>
+          <button className="sm" onClick={() => fillMqPush('queues/jobs', '{"type":"sms","to":"+1234567890"}', 'sms-123')}>idempotent sms</button>
+        </div>
+        <div className="row">
+          <input id="mq-push-path" type="text" placeholder="queues/jobs" defaultValue="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={{ minHeight: 40, marginTop: 4 }} defaultValue='{ "type": "email", "to": "user@example.com" }'></textarea>
+        <div className="row" style={{ marginTop: 4 }}><button className="success" onClick={doMqPush}>PUSH</button></div>
+        <div id="mq-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 }}>Fetch — claim messages (visibility timeout applies)</label>
+        <div className="row">
+          <input id="mq-fetch-path" type="text" placeholder="queues/jobs" defaultValue="queues/jobs" style={{ flex: 2 }} />
+          <input id="mq-fetch-count" type="number" defaultValue="1" style={{ width: 70 }} placeholder="count" />
+          <button onClick={doMqFetch}>FETCH</button>
+        </div>
+        <div id="mq-fetch-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="mq-fetch-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 / Nack — confirm processing or release back to queue</label>
+        <div className="row">
+          <input id="mq-ack-path" type="text" placeholder="queues/jobs" defaultValue="queues/jobs" style={{ flex: 2 }} />
+          <input id="mq-ack-key" type="text" placeholder="message key" style={{ flex: 2 }} />
+          <button className="danger" onClick={doMqAck}>ACK</button>
+          <button onClick={doMqNack}>NACK</button>
+        </div>
+        <div id="mq-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 }}>Peek — view messages without claiming</label>
+        <div className="row">
+          <input id="mq-peek-path" type="text" placeholder="queues/jobs" defaultValue="queues/jobs" style={{ flex: 2 }} />
+          <input id="mq-peek-count" type="number" defaultValue="10" style={{ width: 70 }} placeholder="count" />
+          <button onClick={doMqPeek}>PEEK</button>
+        </div>
+        <div id="mq-peek-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="mq-peek-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 }}>Dead Letter Queue — messages that exceeded max deliveries</label>
+        <div className="row">
+          <input id="mq-dlq-path" type="text" placeholder="queues/jobs" defaultValue="queues/jobs" style={{ flex: 2 }} />
+          <button onClick={doMqDlq}>VIEW DLQ</button>
+        </div>
+        <div id="mq-dlq-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="mq-dlq-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 }}>Purge — delete all pending messages in a queue</label>
+        <div className="row">
+          <input id="mq-purge-path" type="text" placeholder="queues/jobs" defaultValue="queues/jobs" style={{ flex: 2 }} />
+          <button className="danger" onClick={() => { if (confirm('Purge all pending messages?')) doMqPurge(); }}>PURGE</button>
+        </div>
+        <div id="mq-purge-status" style={{ marginTop: 4 }}></div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+import { useRef } from 'react';
+import { db } from '../../context/DbContext';
+import { showStatus, escHtml } from './utils';
+
+export default function Query() {
+  const filtersRef = useRef<HTMLDivElement>(null);
+
+  function addFilter() {
+    const container = filtersRef.current!;
+    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);
+  }
+
+  function renderTable(data: unknown): string {
+    if (!Array.isArray(data) || !data.length) return '<div class="result">No results</div>';
+    const allKeys = [...new Set(data.flatMap((r) => Object.keys(r as Record<string, unknown>)))];
+    const ths = allKeys.map((k) => `<th>${escHtml(k)}</th>`).join('');
+    const trs = data.map((r) => `<tr>${allKeys.map((k) => `<td>${escHtml((r as Record<string, unknown>)[k] == null ? '' : String((r as Record<string, unknown>)[k]))}</td>`).join('')}</tr>`).join('');
+    return `<div style="overflow:auto;margin-top:6px"><table><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table></div>`;
+  }
+
+  async function doQuery() {
+    const path = (document.getElementById('q-path') as HTMLInputElement).value.trim();
+    const filterRows = filtersRef.current!.querySelectorAll('.filter-row');
+    const filters = [...filterRows].map((r) => {
+      const inputs = r.querySelectorAll('input');
+      const op = (r.querySelector('select') as HTMLSelectElement).value;
+      let val: unknown = (inputs[1] as HTMLInputElement).value.trim();
+      try { val = JSON.parse(val as string); } catch {}
+      return { field: (inputs[0] as HTMLInputElement).value.trim(), op, value: val };
+    }).filter((f) => f.field);
+    const orderField = (document.getElementById('q-order-field') as HTMLInputElement).value.trim();
+    const orderDir = (document.getElementById('q-order-dir') as HTMLSelectElement).value as 'asc' | 'desc';
+    const limit = (document.getElementById('q-limit') as HTMLInputElement).value.trim();
+    const offset = (document.getElementById('q-offset') as HTMLInputElement).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 as unknown[]).length} results` : 'Error', Array.isArray(res), performance.now() - t0);
+    (document.getElementById('q-result') as HTMLElement).innerHTML = renderTable(res);
+  }
+
+  return (
+    <>
+      <div>
+        <label>Base Path</label>
+        <input id="q-path" type="text" placeholder="users" />
+      </div>
+      <div>
+        <label>Filters</label>
+        <div id="q-filters" ref={filtersRef}></div>
+        <button onClick={addFilter} style={{ marginTop: 5 }} className="sm">+ Filter</button>
+      </div>
+      <div className="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>
+    </>
+  );
+}

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

@@ -0,0 +1,177 @@
+import { db } from '../../context/DbContext';
+import { showStatus, refreshTreePath } from './utils';
+
+export default function ReadWrite() {
+  async function doGet() {
+    const path = (document.getElementById('rw-path') as HTMLInputElement).value.trim();
+    const t0 = performance.now();
+    try {
+      const res = await db.get(path);
+      (document.getElementById('rw-result') as HTMLElement).textContent = JSON.stringify(res, null, 2);
+      showStatus('rw-status', 'OK', true, performance.now() - t0);
+    } catch (e: unknown) { showStatus('rw-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doSet() {
+    const path = (document.getElementById('rw-path') as HTMLInputElement).value.trim();
+    const raw = (document.getElementById('rw-value') as HTMLTextAreaElement).value.trim();
+    let value;
+    try { value = JSON.parse(raw); } catch { return showStatus('rw-status', 'Invalid JSON', false); }
+    const t0 = performance.now();
+    try {
+      await db.set(path, value);
+      showStatus('rw-status', 'Set OK', true, performance.now() - t0);
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('rw-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doUpdate() {
+    const path = (document.getElementById('rw-path') as HTMLInputElement).value.trim();
+    const raw = (document.getElementById('rw-value') as HTMLTextAreaElement).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]));
+    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)) refreshTreePath(p);
+    } catch (e: unknown) { showStatus('rw-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doDelete() {
+    const path = (document.getElementById('rw-path') as HTMLInputElement).value.trim();
+    const t0 = performance.now();
+    try {
+      await db.delete(path);
+      showStatus('rw-status', 'Deleted', true, performance.now() - t0);
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('rw-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doRwAuth() {
+    const token = (document.getElementById('rw-auth-token') as HTMLInputElement).value.trim();
+    const authToken = document.getElementById('auth-token') as HTMLInputElement;
+    if (authToken) authToken.value = token;
+    await applyAuth(token);
+  }
+
+  async function applyAuth(token: string) {
+    const statusEl = document.getElementById('rw-auth-status');
+    const authStatusEl = document.getElementById('auth-status');
+    if (!token) {
+      db.disconnect(); db.reconnect();
+      if (statusEl) statusEl.innerHTML = '<span style="color:#555">none</span>';
+      if (authStatusEl) authStatusEl.innerHTML = '<span style="color:#555">Not authenticated</span>';
+      return;
+    }
+    try {
+      const ctx = await db._send('auth', { token }) as unknown;
+      const s = JSON.stringify(ctx);
+      if (statusEl) statusEl.innerHTML = `<span style="color:#4ec9b0">${s}</span>`;
+      if (authStatusEl) authStatusEl.innerHTML = `<span style="color:#4ec9b0">Authenticated</span> — ${s}`;
+    } catch (e: unknown) {
+      const msg = (e as Error).message;
+      if (statusEl) statusEl.innerHTML = `<span style="color:#f48771">failed</span>`;
+      if (authStatusEl) authStatusEl.innerHTML = `<span style="color:#f48771">Auth failed: ${msg}</span>`;
+    }
+  }
+
+  async function doUpdateTab() {
+    const raw = (document.getElementById('upd-value') as HTMLTextAreaElement).value.trim();
+    let updates;
+    try { updates = JSON.parse(raw); } catch { return showStatus('upd-status', 'Invalid JSON', false); }
+    const t0 = performance.now();
+    try {
+      await db.update(updates);
+      showStatus('upd-status', 'Updated', true, performance.now() - t0);
+      for (const p of Object.keys(updates)) refreshTreePath(p);
+    } catch (e: unknown) { showStatus('upd-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doPush() {
+    const path = (document.getElementById('push-path') as HTMLInputElement).value.trim();
+    const raw = (document.getElementById('push-value') as HTMLTextAreaElement).value.trim();
+    let value;
+    try { value = JSON.parse(raw); } catch { return showStatus('push-status', 'Invalid JSON', false); }
+    const t0 = performance.now();
+    try {
+      const key = await db.push(path, value);
+      showStatus('push-status', `Pushed → ${key}`, true, performance.now() - t0);
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('push-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doBatch() {
+    const raw = (document.getElementById('batch-value') as HTMLTextAreaElement).value.trim();
+    let operations: unknown[];
+    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);
+    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') as HTMLElement;
+      if (result) { resultEl.textContent = JSON.stringify(result, null, 2); resultEl.style.display = 'block'; }
+      else { resultEl.style.display = 'none'; }
+      const batchPaths = new Set((operations as Array<{path?: string; updates?: Record<string,unknown>}>).map(op =>
+        (op.path || Object.keys(op.updates || {})[0] || '').split('/')[0]).filter(Boolean));
+      for (const p of batchPaths) refreshTreePath(p);
+    } catch (e: unknown) { showStatus('batch-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  return (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+        <span style={{ fontSize: 11, color: '#555' }}>Auth:</span>
+        <input id="rw-auth-token" type="text" placeholder="token (or leave empty)" style={{ flex: 1, fontSize: 11 }} />
+        <button onClick={doRwAuth} className="sm">SET</button>
+        <span id="rw-auth-status" style={{ fontSize: 11, color: '#555' }}>—</span>
+      </div>
+      <div>
+        <label>Path</label>
+        <div className="row">
+          <input id="rw-path" type="text" placeholder="users/alice/name" />
+          <button onClick={doGet}>GET</button>
+          <button className="danger" onClick={doDelete}>DELETE</button>
+        </div>
+      </div>
+      <div>
+        <label>Value (JSON)</label>
+        <textarea id="rw-value" placeholder={'"Alice"\nor { "name": "Alice", "age": 30 }'}></textarea>
+      </div>
+      <div className="row">
+        <button className="success" onClick={doSet}>SET</button>
+        <button onClick={doUpdate}>UPDATE</button>
+      </div>
+      <div id="rw-status"></div>
+      <div>
+        <label>Result</label>
+        <div className="result" id="rw-result">—</div>
+      </div>
+      <div style={{ marginTop: 8 }}>
+        <label>Multi-path Update — JSON object mapping path → value</label>
+        <textarea id="upd-value" style={{ minHeight: 80 }} placeholder='{ "users/alice/age": 31, "users/bob/role": "admin" }'></textarea>
+        <div className="row" style={{ marginTop: 4 }}><button onClick={doUpdateTab}>MULTI-UPDATE</button></div>
+        <div id="upd-status"></div>
+      </div>
+      <div style={{ marginTop: 8, borderTop: '1px solid #222', paddingTop: 8 }}>
+        <label>Push — append value with auto-generated key</label>
+        <div className="row">
+          <input id="push-path" type="text" placeholder="logs" style={{ flex: 1 }} />
+          <button className="success" onClick={doPush}>PUSH</button>
+        </div>
+        <textarea id="push-value" style={{ minHeight: 50, marginTop: 4 }} placeholder='{ "level": "info", "msg": "hello" }'></textarea>
+        <div id="push-status"></div>
+      </div>
+      <div style={{ marginTop: 8, borderTop: '1px solid #222', paddingTop: 8 }}>
+        <label>Batch — atomic multi-op (JSON array of operations)</label>
+        <textarea id="batch-value" style={{ minHeight: 80 }}></textarea>
+        <div className="row" style={{ marginTop: 4 }}><button onClick={doBatch}>RUN BATCH</button></div>
+        <div id="batch-status"></div>
+        <div className="result" id="batch-result" style={{ marginTop: 4, display: 'none' }}>—</div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { useEffect } from 'react';
+import { showStatus, apiFetch } from './utils';
+
+interface Props { active: boolean; }
+
+export default function Replication({ active }: Props) {
+  useEffect(() => { if (active) loadRepl(); }, [active]);
+
+  async function loadRepl() {
+    const t0 = performance.now();
+    try {
+      const res = await fetch('/replication');
+      const json = await res.json();
+      const ms = performance.now() - t0;
+      if (!json.ok) { showStatus('repl-status', json.error || 'Failed', false, ms); return; }
+      const { role, sources, synced } = json;
+      showStatus('repl-status', `Role: ${role} — ${sources.length} source(s)`, true, ms);
+      const configEl = document.getElementById('repl-config') as HTMLElement;
+      configEl.style.display = 'block';
+      configEl.textContent = sources.map((s: Record<string, unknown>) =>
+        `${s.url}\n  paths: [${(s.paths as string[]).join(', ')}]\n  localPrefix: ${s.localPrefix || '(none)'}\n  id: ${s.id || '(auto)'}`
+      ).join('\n\n') || '(no sources configured)';
+      const syncedEl = document.getElementById('repl-synced') as HTMLElement;
+      syncedEl.style.display = 'block';
+      syncedEl.textContent = JSON.stringify(synced, null, 2);
+    } catch (e: unknown) { showStatus('repl-status', (e as Error).message, false); }
+  }
+
+  function fillReplWrite(path: string, value: string) {
+    (document.getElementById('repl-write-path') as HTMLInputElement).value = path;
+    (document.getElementById('repl-write-value') as HTMLTextAreaElement).value = value;
+  }
+
+  async function doReplWrite() {
+    const path = (document.getElementById('repl-write-path') as HTMLInputElement).value.trim();
+    const raw = (document.getElementById('repl-write-value') as HTMLTextAreaElement).value.trim();
+    if (!path) return showStatus('repl-write-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const value = JSON.parse(raw);
+      const json = await apiFetch('/replication/source-write', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path, value }),
+      });
+      const ms = performance.now() - t0;
+      showStatus('repl-write-status', json.ok ? `Written to source: ${path}` : (json.error as string || 'Failed'), !!json.ok, ms);
+      if (json.ok) setTimeout(loadRepl, 600);
+    } catch (e: unknown) { showStatus('repl-write-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doReplDelete() {
+    const path = (document.getElementById('repl-write-path') as HTMLInputElement).value.trim();
+    if (!path) return showStatus('repl-write-status', 'Path required', false);
+    const t0 = performance.now();
+    try {
+      const json = await apiFetch('/replication/source-delete/' + path, { method: 'DELETE' });
+      const ms = performance.now() - t0;
+      showStatus('repl-write-status', json.ok ? `Deleted on source: ${path}` : (json.error as string || 'Failed'), !!json.ok, ms);
+      if (json.ok) setTimeout(loadRepl, 600);
+    } catch (e: unknown) { showStatus('repl-write-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  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 }}>Source Feed Status — paths synced from remote BodDB instances</label>
+        <div className="row" style={{ marginBottom: 6 }}><button onClick={loadRepl}>REFRESH</button></div>
+        <div id="repl-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="repl-config" 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 }}>Synced Data — local copy of source paths (read-only mirror)</label>
+        <div className="result" id="repl-synced" style={{ maxHeight: 400, display: 'none' }}>—</div>
+      </div>
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Write to Source — modify remote data and watch it sync locally</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillReplWrite('catalog/widgets', '{"name":"Widget A","price":34.99,"stock":200}')}>update widget price</button>
+          <button className="sm" onClick={() => fillReplWrite('catalog/new-item', '{"name":"New Item","price":9.99,"stock":50}')}>add item</button>
+          <button className="sm" onClick={() => fillReplWrite('alerts/sys-3', `{"level":"error","msg":"Disk full","ts":${Date.now()}}`)}>add alert</button>
+        </div>
+        <div className="row">
+          <input id="repl-write-path" type="text" placeholder="catalog/widgets" defaultValue="catalog/widgets" style={{ flex: 2 }} />
+        </div>
+        <textarea id="repl-write-value" style={{ minHeight: 40, marginTop: 4 }} defaultValue='{ "name": "Widget A", "price": 34.99, "stock": 200 }'></textarea>
+        <div className="row" style={{ marginTop: 4 }}>
+          <button className="success" onClick={doReplWrite}>WRITE TO SOURCE</button>
+          <button className="danger" onClick={doReplDelete}>DELETE ON SOURCE</button>
+        </div>
+        <div id="repl-write-status" style={{ marginTop: 4 }}></div>
+      </div>
+    </div>
+  );
+}