@bod.ee/db 0.12.6 → 0.13.1

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

@@ -0,0 +1,222 @@
+import { db } from '../../context/DbContext';
+import { showStatus, refreshTreePath } from './utils';
+
+export default function Advanced() {
+  // Transforms
+  function fillTransform(path: string, type: string, value: string) {
+    (document.getElementById('tf-path') as HTMLInputElement).value = path;
+    (document.getElementById('tf-type') as HTMLSelectElement).value = type;
+    (document.getElementById('tf-value') as HTMLInputElement).value = value;
+  }
+
+  async function doTransform() {
+    const path = (document.getElementById('tf-path') as HTMLInputElement).value.trim();
+    const type = (document.getElementById('tf-type') as HTMLSelectElement).value;
+    const rawVal = (document.getElementById('tf-value') as HTMLInputElement).value.trim();
+    let value: unknown;
+    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') as HTMLElement;
+      el.textContent = JSON.stringify(result, null, 2); el.style.display = 'block';
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('tf-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  // TTL
+  function fillTTL(path: string, value: string, seconds: number) {
+    (document.getElementById('ttl-path') as HTMLInputElement).value = path;
+    (document.getElementById('ttl-value') as HTMLTextAreaElement).value = value;
+    (document.getElementById('ttl-seconds') as HTMLInputElement).value = String(seconds);
+  }
+
+  async function doSetTTL() {
+    const path = (document.getElementById('ttl-path') as HTMLInputElement).value.trim();
+    const ttl = Number((document.getElementById('ttl-seconds') as HTMLInputElement).value) || 60;
+    const raw = (document.getElementById('ttl-value') as HTMLTextAreaElement).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);
+      refreshTreePath(path);
+    } catch (e: unknown) { showStatus('ttl-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doSweep() {
+    const t0 = performance.now();
+    try {
+      const expired = await db.sweep() as unknown[];
+      showStatus('ttl-status', `Swept ${expired?.length ?? 0} entries`, true, performance.now() - t0);
+    } catch (e: unknown) { showStatus('ttl-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  // FTS
+  function fillFts(query: string, prefix: string) {
+    (document.getElementById('fts-query') as HTMLInputElement).value = query;
+    (document.getElementById('fts-prefix') as HTMLInputElement).value = prefix || '';
+  }
+  function fillFtsIndex(path: string, content: string) {
+    (document.getElementById('fts-path') as HTMLInputElement).value = path;
+    (document.getElementById('fts-content') as HTMLInputElement).value = content;
+  }
+
+  async function doFtsIndex() {
+    const path = (document.getElementById('fts-path') as HTMLInputElement).value.trim();
+    const content = (document.getElementById('fts-content') as HTMLInputElement).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: unknown) { showStatus('fts-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doFtsSearch() {
+    const text = (document.getElementById('fts-query') as HTMLInputElement).value.trim();
+    const pathPrefix = (document.getElementById('fts-prefix') as HTMLInputElement).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) as unknown[];
+      const el = document.getElementById('fts-result') as HTMLElement;
+      showStatus('fts-status', `${results.length} results`, true, performance.now() - t0);
+      el.textContent = JSON.stringify(results, null, 2); el.style.display = 'block';
+    } catch (e: unknown) { showStatus('fts-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  // Vectors
+  function fillVecSearch(prefix: string) {
+    const q = JSON.stringify(Array.from({ length: 384 }, (_, i) => +(Math.sin(i * 0.1) * 0.5).toFixed(4)));
+    (document.getElementById('vec-query') as HTMLInputElement).value = q;
+    (document.getElementById('vec-prefix') as HTMLInputElement).value = prefix || '';
+  }
+
+  async function doVecStore() {
+    const path = (document.getElementById('vec-path') as HTMLInputElement).value.trim();
+    const raw = (document.getElementById('vec-embedding') as HTMLInputElement).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: unknown) { showStatus('vec-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  async function doVecSearch() {
+    const raw = (document.getElementById('vec-query') as HTMLInputElement).value.trim();
+    const pathPrefix = (document.getElementById('vec-prefix') as HTMLInputElement).value.trim() || undefined;
+    const limit = Number((document.getElementById('vec-limit') as HTMLInputElement).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) as unknown[];
+      const el = document.getElementById('vec-result') as HTMLElement;
+      showStatus('vec-status', `${results.length} results`, true, performance.now() - t0);
+      el.textContent = JSON.stringify(results, null, 2); el.style.display = 'block';
+    } catch (e: unknown) { showStatus('vec-status', (e as Error).message, false, performance.now() - t0); }
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      {/* Transforms */}
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Transforms — apply atomic operations to paths</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillTransform('counters/likes', 'increment', '1')}>increment +1</button>
+          <button className="sm" onClick={() => fillTransform('users/alice/updatedAt', 'serverTimestamp', '')}>serverTimestamp</button>
+          <button className="sm" onClick={() => fillTransform('users/alice/tags', 'arrayUnion', '["vip","active"]')}>arrayUnion</button>
+          <button className="sm" onClick={() => fillTransform('users/alice/tags', 'arrayRemove', '["active"]')}>arrayRemove</button>
+        </div>
+        <div className="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 className="row" style={{ marginTop: 4 }}>
+          <input id="tf-value" type="text" placeholder="value" style={{ flex: 1 }} />
+          <button className="success" onClick={doTransform}>APPLY</button>
+        </div>
+        <div id="tf-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="tf-result" style={{ marginTop: 4, display: 'none' }}>—</div>
+      </div>
+
+      {/* TTL */}
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>TTL — set values with auto-expiry</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillTTL('sessions/temp', '{"token":"abc123"}', 60)}>session 60s</button>
+          <button className="sm" onClick={() => fillTTL('cache/homepage', '"cached html"', 10)}>cache 10s</button>
+        </div>
+        <div className="row">
+          <input id="ttl-path" type="text" placeholder="sessions/temp" style={{ flex: 2 }} />
+          <input id="ttl-seconds" type="number" placeholder="TTL (seconds)" defaultValue="60" style={{ width: 120 }} />
+        </div>
+        <div style={{ marginTop: 4 }}>
+          <textarea id="ttl-value" style={{ minHeight: 40 }} placeholder='"session data" or { "token": "abc" }'></textarea>
+        </div>
+        <div className="row" style={{ marginTop: 4 }}>
+          <button className="success" onClick={doSetTTL}>SET WITH TTL</button>
+          <button onClick={doSweep}>SWEEP NOW</button>
+        </div>
+        <div id="ttl-status" style={{ marginTop: 4 }}></div>
+      </div>
+
+      {/* FTS */}
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Full-Text Search (FTS5)</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillFts('admin', 'users')}>search "admin"</button>
+          <button className="sm" onClick={() => fillFts('design', '')}>search "design"</button>
+          <button className="sm" onClick={() => fillFtsIndex('posts/p1', 'A tutorial about building reactive databases')}>index post</button>
+        </div>
+        <div className="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 className="row" style={{ marginTop: 4 }}>
+          <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 className="success" onClick={doFtsSearch}>SEARCH</button>
+        </div>
+        <div id="fts-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="fts-result" style={{ marginTop: 4, display: 'none' }}>—</div>
+      </div>
+
+      {/* Vectors */}
+      <div style={{ border: '1px solid #222', borderRadius: 3, padding: 10 }}>
+        <label style={{ fontSize: 11, color: '#888', marginBottom: 6 }}>Vector Search (cosine similarity, 384d)</label>
+        <div style={{ display: 'flex', gap: 4, marginBottom: 6, flexWrap: 'wrap' }}>
+          <button className="sm" onClick={() => fillVecSearch('users')}>search users</button>
+          <button className="sm" onClick={() => fillVecSearch('')}>search all</button>
+        </div>
+        <div className="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 className="row" style={{ marginTop: 4 }}>
+          <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" defaultValue="5" style={{ width: 60 }} placeholder="limit" />
+          <button className="success" onClick={doVecSearch}>SEARCH</button>
+        </div>
+        <div id="vec-status" style={{ marginTop: 4 }}></div>
+        <div className="result" id="vec-result" style={{ marginTop: 4, display: 'none' }}>—</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+import { useEffect } from 'react';
+import { db } from '../../context/DbContext';
+import { escHtml } from './utils';
+
+interface Props { active: boolean; }
+
+export default function AuthRules({ active }: Props) {
+  useEffect(() => {
+    if (active) loadRules();
+  }, [active]);
+
+  async function loadRules() {
+    const el = document.getElementById('auth-rules') as HTMLElement;
+    try {
+      const rules = await db.getRules() as Array<{ pattern: string; read: unknown; write: unknown }>;
+      el.textContent = (rules as Array<{ pattern: string; read: unknown; write: unknown }>).map(r => {
+        const parts = [];
+        if (r.read !== null) parts.push(`read: ${r.read}`);
+        if (r.write !== null) parts.push(`write: ${r.write}`);
+        return `${r.pattern.padEnd(20)} → ${parts.join(', ')}`;
+      }).join('\n') || '(no rules configured)';
+    } catch { el.textContent = 'Failed to load rules'; }
+  }
+
+  async function applyAuth(token: string) {
+    const statusEl = document.getElementById('auth-status') as HTMLElement;
+    const rwStatusEl = document.getElementById('rw-auth-status') as HTMLElement;
+    if (!token) {
+      db.disconnect(); db.reconnect();
+      if (statusEl) statusEl.innerHTML = '<span style="color:#555">Not authenticated — all open rules apply</span>';
+      if (rwStatusEl) rwStatusEl.innerHTML = '<span style="color:#555">none</span>';
+      return;
+    }
+    try {
+      const ctx = await db._send('auth', { token });
+      const s = escHtml(JSON.stringify(ctx));
+      if (statusEl) statusEl.innerHTML = `<span style="color:#4ec9b0">Authenticated</span> — ${s}`;
+      if (rwStatusEl) rwStatusEl.innerHTML = `<span style="color:#4ec9b0">${s}</span>`;
+    } catch (e: unknown) {
+      const msg = (e as Error).message;
+      if (statusEl) statusEl.innerHTML = `<span style="color:#f48771">Auth failed: ${escHtml(msg)}</span>`;
+      if (rwStatusEl) rwStatusEl.innerHTML = `<span style="color:#f48771">failed</span>`;
+    }
+  }
+
+  async function doAuth() {
+    const token = (document.getElementById('auth-token') as HTMLInputElement).value.trim();
+    await applyAuth(token);
+  }
+
+  function doDeauth() {
+    (document.getElementById('auth-token') as HTMLInputElement).value = '';
+    (document.getElementById('rw-auth-token') as HTMLInputElement).value = '';
+    applyAuth('');
+  }
+
+  async function doTestRule() {
+    const path = (document.getElementById('auth-test-path') as HTMLInputElement).value.trim();
+    const op = (document.getElementById('auth-test-op') as HTMLSelectElement).value;
+    const resultEl = document.getElementById('auth-test-result') as HTMLElement;
+    if (!path) return;
+    try {
+      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);
+        resultEl.innerHTML = `<span style="color:#4ec9b0">ALLOWED</span> — write ${escHtml(path)}`;
+      }
+    } catch (e: unknown) {
+      const msg = (e as Error).message;
+      const denied = msg?.includes('Permission denied') || msg?.includes('denied');
+      resultEl.innerHTML = `<span style="color:${denied ? '#f48771' : '#ce9178'}">${denied ? 'DENIED' : 'ERROR'}</span> — ${escHtml(msg)}`;
+    }
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div>
+        <label>Authenticate</label>
+        <div className="row">
+          <input id="auth-token" type="text" placeholder="admin-secret  or  user:alice" style={{ flex: 1 }} />
+          <button onClick={doAuth}>AUTH</button>
+          <button className="danger" onClick={doDeauth}>CLEAR</button>
+        </div>
+        <div id="auth-status" style={{ marginTop: 4, fontSize: 12, color: '#555' }}>Not authenticated — all open rules apply</div>
+      </div>
+      <div>
+        <label>Active Rules (server-configured)</label>
+        <div className="result" style={{ fontSize: 11, lineHeight: 1.6, whiteSpace: 'pre' }} id="auth-rules">Loading…</div>
+      </div>
+      <div>
+        <label>Test Rule — check if current auth can read/write a path</label>
+        <div className="row">
+          <input id="auth-test-path" type="text" placeholder="users/alice" style={{ flex: 1 }} />
+          <select id="auth-test-op" style={{ width: 90 }}><option value="read">READ</option><option value="write">WRITE</option></select>
+          <button onClick={doTestRule}>TEST</button>
+        </div>
+        <div className="result" id="auth-test-result">—</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+import { useRef } from 'react';
+import { db } from '../../context/DbContext';
+
+interface CacheEntry { data: unknown; updatedAt?: number; }
+
+export default function Cache() {
+  const memoryCache = useRef(new Map<string, CacheEntry>());
+  const subOffRef = useRef<(() => void) | null>(null);
+  const logRef = useRef<string[]>([]);
+
+  function cacheLog(msg: string) {
+    logRef.current.push(`[${new Date().toLocaleTimeString()}] ${msg}`);
+    if (logRef.current.length > 20) logRef.current.shift();
+    const el = document.getElementById('cache-log') as HTMLElement;
+    if (el) el.textContent = logRef.current.join('\n');
+  }
+
+  async function cacheSet() {
+    const path = (document.getElementById('cache-path') as HTMLInputElement).value.trim();
+    const val = JSON.parse((document.getElementById('cache-value') as HTMLInputElement).value);
+    await db.set(path, val);
+    memoryCache.current.delete(path);
+    cacheLog(`SET ${path} → invalidated cache`);
+    (document.getElementById('cache-result') as HTMLElement).textContent = `✓ Set ${path} and invalidated cache`;
+  }
+
+  async function cacheGet() {
+    const path = (document.getElementById('cache-path') as HTMLInputElement).value.trim();
+    const t0 = performance.now();
+    const cached = memoryCache.current.get(path);
+    if (cached) {
+      const ms = (performance.now() - t0).toFixed(2);
+      cacheLog(`HIT ${path} (${ms}ms) — served from memory`);
+      (document.getElementById('cache-result') as HTMLElement).textContent =
+        `[CACHE HIT · ${ms}ms]\n` + JSON.stringify(cached.data, null, 2) +
+        (cached.updatedAt ? `\n\nupdatedAt: ${new Date(cached.updatedAt).toLocaleString()}` : '');
+      db.getSnapshot(path).then(snap => {
+        memoryCache.current.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+        cacheLog(`REVALIDATED ${path}`);
+      }).catch(() => {});
+      return;
+    }
+    const snap = await db.getSnapshot(path);
+    const ms = (performance.now() - t0).toFixed(2);
+    memoryCache.current.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+    cacheLog(`MISS ${path} (${ms}ms) — fetched from network, cached`);
+    (document.getElementById('cache-result') as HTMLElement).textContent =
+      `[CACHE MISS · ${ms}ms]\n` + JSON.stringify(snap.val(), null, 2) +
+      (snap.updatedAt ? `\n\nupdatedAt: ${new Date(snap.updatedAt).toLocaleString()}` : '');
+  }
+
+  async function cacheGetFresh() {
+    const path = (document.getElementById('cache-path') as HTMLInputElement).value.trim();
+    const t0 = performance.now();
+    const snap = await db.getSnapshot(path);
+    const ms = (performance.now() - t0).toFixed(2);
+    memoryCache.current.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+    cacheLog(`FRESH ${path} (${ms}ms) — network fetch, cache updated`);
+    (document.getElementById('cache-result') as HTMLElement).textContent =
+      `[NETWORK · ${ms}ms]\n` + JSON.stringify(snap.val(), null, 2) +
+      (snap.updatedAt ? `\n\nupdatedAt: ${new Date(snap.updatedAt).toLocaleString()}` : '');
+  }
+
+  function cacheSub() {
+    if (subOffRef.current) { cacheLog('Already subscribed'); return; }
+    const path = (document.getElementById('cache-path') as HTMLInputElement).value.trim();
+    subOffRef.current = db.on(path, (snap) => {
+      memoryCache.current.set(path, { data: snap.val(), updatedAt: snap.updatedAt });
+      cacheLog(`SUB UPDATE ${path} — cache refreshed`);
+      (document.getElementById('cache-result') as HTMLElement).textContent =
+        `[LIVE · subscribed]\n` + JSON.stringify(snap.val(), null, 2) +
+        (snap.updatedAt ? `\n\nupdatedAt: ${new Date(snap.updatedAt).toLocaleString()}` : '');
+    });
+    cacheLog(`SUBSCRIBED to ${path} — cache stays fresh`);
+  }
+
+  function cacheUnsub() {
+    if (subOffRef.current) { subOffRef.current(); subOffRef.current = null; cacheLog('Unsubscribed'); }
+  }
+
+  function cacheStats() {
+    const stats = { memoryEntries: memoryCache.current.size, paths: [...memoryCache.current.keys()], subscribed: !!subOffRef.current };
+    (document.getElementById('cache-result') as HTMLElement).textContent = JSON.stringify(stats, null, 2);
+    cacheLog(`Stats: ${memoryCache.current.size} entries in memory`);
+  }
+
+  return (
+    <>
+      <h3 style={{ color: '#569cd6', marginBottom: 8 }}>BodClientCached Demo</h3>
+      <p style={{ color: '#666', fontSize: 11, marginBottom: 10 }}>Two-tier cache (memory + IndexedDB) with stale-while-revalidate. Wraps BodClient for instant reads.</p>
+      <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
+        <div style={{ flex: 1 }}>
+          <label>Path</label>
+          <input type="text" id="cache-path" defaultValue="cache/demo" placeholder="path" />
+        </div>
+        <div style={{ flex: 1 }}>
+          <label>Value (JSON)</label>
+          <input type="text" id="cache-value" defaultValue='{"name":"Alice","score":42}' placeholder="value" />
+        </div>
+      </div>
+      <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
+        <button onClick={cacheSet}>Set (invalidates cache)</button>
+        <button onClick={cacheGet}>Get (cache-first)</button>
+        <button onClick={cacheGetFresh}>Get Fresh (network)</button>
+        <button className="success" onClick={cacheSub}>Subscribe (keeps fresh)</button>
+        <button className="danger" onClick={cacheUnsub}>Unsubscribe</button>
+        <button onClick={cacheStats}>Cache Stats</button>
+      </div>
+      <div id="cache-result" className="result" style={{ minHeight: 120 }}>Cache demo — set a value, then get it (served from cache on second read).</div>
+      <div id="cache-log" className="result" style={{ minHeight: 80, marginTop: 8, color: '#888', fontSize: 11 }}>Event log...</div>
+    </>
+  );
+}