@bod.ee/db 0.12.6 → 0.13.1

package/admin/src/context/DbContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { ZuzClient } from '../client/ZuzClient';
+
+declare global {
+  interface Window { __BODDB_URL__?: string; }
+  const __BODDB_WS_URL__: string | undefined;
+}
+
+const url = window.__BODDB_URL__ || new URLSearchParams(location.search).get('url') ||
+  (typeof __BODDB_WS_URL__ !== 'undefined' ? __BODDB_WS_URL__ : null) ||
+  `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}`;
+
+export const db = new ZuzClient(url);
+
+interface DbContextValue {
+  connected: boolean;
+}
+
+const DbContext = createContext<DbContextValue>({ connected: false });
+
+export function DbProvider({ children }: { children: ReactNode }) {
+  const [connected, setConnected] = useState(db.connected);
+
+  useEffect(() => {
+    db.onStatusChange = setConnected;
+    db.connect();
+    return () => { db.onStatusChange = undefined; };
+  }, []);
+
+  return <DbContext.Provider value={{ connected }}>{children}</DbContext.Provider>;
+}
+
+export function useDb() { return useContext(DbContext); }

package/admin/src/context/StatsContext.tsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { db } from './DbContext';
+import { ValueSnapshot } from '../client/types';
+
+export interface StatsData {
+  process: { cpuPercent: number; heapUsedMb: number; rssMb: number; uptimeSec: number };
+  db: { nodeCount: number; sizeMb?: number; path?: string };
+  system?: { cpuCores: number; cpuPercent: number; totalMemMb: number };
+  clients?: number;
+  subs?: number;
+  ts: number;
+  version?: string;
+  repl?: {
+    role: string;
+    sources: Array<{ connected: boolean; paths: string[]; localPrefix?: string; pending: number; eventsApplied: number }>;
+  };
+}
+
+interface StatsContextValue {
+  stats: StatsData | null;
+  statsEnabled: boolean;
+  toggleStats: () => void;
+}
+
+const StatsContext = createContext<StatsContextValue>({
+  stats: null, statsEnabled: true, toggleStats: () => {},
+});
+
+export function StatsProvider({ children }: { children: ReactNode }) {
+  const [stats, setStats] = useState<StatsData | null>(null);
+  const [statsEnabled, setStatsEnabled] = useState(true);
+
+  useEffect(() => {
+    const unsub = db.on('_admin/stats', (snap: ValueSnapshot) => {
+      const s = snap.val() as StatsData | null;
+      if (s) setStats(s);
+    });
+    return () => { unsub(); };
+  }, []);
+
+  const toggleStats = async () => {
+    try {
+      const result = await db._send('admin-stats-toggle', { enabled: !statsEnabled }) as { enabled: boolean };
+      setStatsEnabled(result.enabled);
+      if (!result.enabled) setStats(null);
+    } catch {}
+  };
+
+  return (
+    <StatsContext.Provider value={{ stats, statsEnabled, toggleStats }}>
+      {children}
+    </StatsContext.Provider>
+  );
+}
+
+export function useStats() { return useContext(StatsContext); }

package/admin/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/admin/src/styles.css

@@ -0,0 +1,96 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: monospace; font-size: 13px; background: #0d0d0d; color: #d4d4d4; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
+
+/* Metrics bar */
+#metrics-bar { display: flex; background: #0a0a0a; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; align-items: stretch; width: 100%; }
+.metric-card { display: flex; flex-direction: column; padding: 5px 10px; border-right: 1px solid #181818; width: 160px; flex-shrink: 0; gap: 3px; overflow: hidden; }
+.metric-card:last-child { border-right: none; width: auto; flex: 1; }
+.metric-top { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
+.metric-label { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; }
+.metric-value { font-size: 13px; color: #4ec9b0; font-weight: bold; min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
+.metric-value.warn { color: #ce9178; }
+.metric-value.dim { color: #888; }
+.metric-canvas { display: block; margin-top: 2px; width: 100%; height: 28px; }
+#ws-dot { width: 7px; height: 7px; border-radius: 50%; background: #555; display: inline-block; margin-left: 4px; vertical-align: middle; }
+#ws-dot.live { background: #4ec9b0; animation: pulse 1.5s infinite; }
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
+
+/* Main layout */
+#main { display: flex; flex: 1; overflow: hidden; }
+
+/* Tree */
+#tree-pane { width: 28%; border-right: 1px solid #2a2a2a; display: flex; flex-direction: column; min-width: 180px; }
+#tree-header { padding: 6px 10px; background: #161616; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; }
+#tree-header span { color: #555; font-size: 11px; }
+#tree-container { flex: 1; overflow-y: auto; padding: 4px; }
+#tree-container details { margin-left: 12px; }
+#tree-container summary { cursor: pointer; padding: 2px 4px; border-radius: 3px; color: #4ec9b0; list-style: none; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
+#tree-container summary::before { content: '▶'; font-size: 10px; color: #666; margin-right: 5px; flex-shrink: 0; display: inline-block; transition: transform 0.15s; }
+details[open] > summary::before { transform: rotate(90deg); color: #aaa; }
+#tree-container summary .tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+#tree-container summary .ttl-badge, #tree-container summary .count-badge { flex-shrink: 0; margin-left: 4px; }
+#tree-container summary:hover { background: #1e1e1e; }
+.tree-leaf { padding: 2px 4px 2px 16px; cursor: pointer; border-radius: 3px; color: #9cdcfe; display: flex; gap: 4px; align-items: baseline; overflow: hidden; }
+.tree-leaf:hover { background: #1e1e1e; }
+.tree-val { color: #ce9178; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
+.tree-key { color: #4ec9b0; flex-shrink: 0; }
+.ttl-badge { font-size: 9px; padding: 0 4px; border-radius: 3px; background: #4d3519; color: #d4a054; flex-shrink: 0; }
+.count-badge { font-size: 9px; padding: 0 4px; border-radius: 3px; background: #1e2d3d; color: #569cd6; flex-shrink: 0; }
+@keyframes treeFlash { 0%,100% { background: transparent; } 30% { background: rgba(86,156,214,0.25); } }
+.flash { animation: treeFlash 1.2s ease-out; border-radius: 3px; }
+
+/* Right pane */
+#right-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.tabs { display: flex; background: #161616; border-bottom: 1px solid #2a2a2a; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
+.tabs::-webkit-scrollbar { display: none; }
+.tab { padding: 7px 16px; cursor: pointer; border-bottom: 2px solid transparent; color: #666; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
+.tab.active { color: #fff; border-bottom-color: #569cd6; }
+.panel { display: none; flex: 1; overflow-y: auto; padding: 12px; flex-direction: column; gap: 10px; }
+.panel.active { display: flex; }
+
+/* Controls */
+label { color: #666; font-size: 10px; margin-bottom: 2px; display: block; text-transform: uppercase; letter-spacing: 0.3px; }
+input[type=text], textarea, select { width: 100%; background: #1a1a1a; border: 1px solid #333; color: #d4d4d4; padding: 5px 8px; border-radius: 3px; font-family: monospace; font-size: 12px; }
+input[type=text]:focus, textarea:focus { outline: none; border-color: #569cd6; }
+textarea { resize: vertical; min-height: 80px; }
+.row { display: flex; gap: 6px; align-items: flex-end; }
+.row input { flex: 1; }
+button { padding: 5px 11px; border: none; border-radius: 3px; cursor: pointer; font-family: monospace; font-size: 12px; background: #264f78; color: #ccc; white-space: nowrap; }
+button:hover { background: #3a6fa8; color: #fff; }
+button.danger { background: #4a1e1e; color: #f48771; }
+button.danger:hover { background: #7a2e2e; }
+button.success { background: #1e4a1e; color: #4ec9b0; }
+button.success:hover { background: #2e7a2e; }
+button.sub { background: #3a2e5a; color: #c5b8f0; }
+button.sub:hover { background: #5a4a8a; }
+button.sm { padding: 3px 7px; font-size: 11px; }
+button.icon { display:inline-flex;align-items:center;justify-content:center;padding:3px 5px;vertical-align:middle; }
+.result { background: #111; border: 1px solid #222; border-radius: 3px; padding: 8px; overflow: auto; max-height: 280px; white-space: pre; color: #9cdcfe; font-size: 12px; }
+.status { font-size: 11px; padding: 3px 8px; border-radius: 3px; }
+.status.ok { background: #1a3a1a; color: #4ec9b0; }
+.status.err { background: #3a1a1a; color: #f48771; }
+
+/* Query filters */
+.filter-row { display: flex; gap: 5px; align-items: center; margin-bottom: 4px; }
+.filter-row input { flex: 2; }
+.filter-row select { flex: 1; }
+table { width: 100%; border-collapse: collapse; font-size: 12px; }
+th { background: #1a1a1a; padding: 4px 8px; text-align: left; color: #666; border-bottom: 1px solid #222; }
+td { padding: 4px 8px; border-bottom: 1px solid #1a1a1a; color: #d4d4d4; word-break: break-all; }
+tr:hover td { background: #161616; }
+
+/* Subscriptions */
+.sub-item { background: #111; border: 1px solid #222; border-radius: 3px; padding: 8px; }
+.sub-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; color: #4ec9b0; }
+.sub-log { max-height: 130px; overflow-y: auto; font-size: 11px; background: #0a0a0a; padding: 5px; border-radius: 2px; }
+.sub-log div { padding: 2px 0; border-bottom: 1px solid #161616; color: #9cdcfe; }
+.sub-log div span { color: #555; margin-right: 6px; }
+
+/* Stress test */
+.stress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.stress-card { background: #111; border: 1px solid #222; border-radius: 3px; padding: 10px; }
+.stress-card h4 { color: #888; font-size: 11px; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
+.stress-result { margin-top: 8px; font-size: 11px; background: #0a0a0a; border-radius: 2px; padding: 6px; color: #4ec9b0; min-height: 60px; white-space: pre-wrap; }
+.progress-bar { height: 4px; background: #222; border-radius: 2px; margin-top: 6px; overflow: hidden; }
+.progress-fill { height: 100%; background: #569cd6; border-radius: 2px; width: 0%; transition: width 0.1s; }
+input[type=number] { width: 80px; background: #1a1a1a; border: 1px solid #333; color: #d4d4d4; padding: 4px 6px; border-radius: 3px; font-family: monospace; font-size: 12px; }

package/admin/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/admin/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/admin/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/admin/vite.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, Plugin } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve, dirname } from 'path';
+import { spawnSync } from 'child_process';
+
+const BODDB_URL = process.env.BODDB_URL ?? 'http://localhost:4444';
+
+function openFolderPlugin(): Plugin {
+  return {
+    name: 'open-folder',
+    configureServer(server) {
+      server.middlewares.use('/open-folder', (req, res) => {
+        const url = new URL(req.url!, `http://localhost`);
+        const filePath = url.searchParams.get('path');
+        if (filePath) {
+          if (process.platform === 'darwin') spawnSync('open', ['-R', resolve(filePath)]);
+          else if (process.platform === 'win32') spawnSync('explorer', ['/select,', resolve(filePath)]);
+          else spawnSync('xdg-open', [dirname(resolve(filePath))]);
+        }
+        res.end('ok');
+      });
+    },
+  };
+}
+
+export default defineConfig(({ command }) => ({
+  plugins: [react(), openFolderPlugin()],
+  build: { outDir: 'dist' },
+  server: {
+    port: 5173,
+    proxy: {
+      '/db': BODDB_URL,
+      '/files': BODDB_URL,
+      '/sse': BODDB_URL,
+      '/replication': BODDB_URL,
+    },
+  },
+  define: {
+    // Only bake WS URL in dev; production uses location-based fallback
+    __BODDB_WS_URL__: command === 'serve' ? JSON.stringify(BODDB_URL.replace(/^http/, 'ws')) : 'undefined',
+  },
+}));

package/deploy/base.yaml

@@ -15,4 +15,4 @@ service:
 https:
   email: admin@livshitz.com
 deploy:
-  excludes: [.git, node_modules, .tmp, tests, .claude, .cursor, bun.lock, data]
+  excludes: [.git, node_modules, admin/node_modules, .tmp, tests, .claude, .cursor, data]

package/deploy/prod-il.config.ts

@@ -12,8 +12,11 @@ export default {
   },
   transport: {
     staticRoutes: {
-      '/admin': './admin/ui.html',
-      '/': './admin/ui.html',
+      '/admin': './admin/dist/index.html',
+      '/': './admin/dist/index.html',
+    },
+    staticDirs: {
+      '/assets': './admin/dist/assets',
     },
   },
 }

package/deploy/prod.config.ts

@@ -9,8 +9,11 @@ export default {
   replication: { role: 'primary' as const },
   transport: {
     staticRoutes: {
-      '/admin': './admin/ui.html',
-      '/': './admin/ui.html',
+      '/admin': './admin/dist/index.html',
+      '/': './admin/dist/index.html',
+    },
+    staticDirs: {
+      '/assets': './admin/dist/assets',
     },
   },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bod.ee/db",
-  "version": "0.12.6",
+  "version": "0.13.1",
   "module": "index.ts",
   "type": "module",
   "exports": {
@@ -19,10 +19,14 @@
     "build": "echo 'no build step'",
     "gen:models": "echo 'no gen:models step'",
     "admin": "bun run admin/admin.ts",
+    "admin:build": "cd admin && bun run build",
+    "admin:dev": "cd admin && bun run dev",
+    "start-admin:dev": "bunx concurrently -n server,admin -c cyan,yellow \"bun run cli.ts config.ts\" \"bun run admin:dev\"",
     "demo": "bun --watch run cli.ts admin/demo.config.ts",
     "admin:remote": "bun run admin/proxy.ts",
     "serve": "bun run cli.ts",
     "start": "bun run cli.ts config.ts",
+    "start-admin": "bunx concurrently -n server,admin -c cyan,yellow \"bun run cli.ts config.ts\" \"bun run admin/admin.ts\"",
     "publish-lib": "bun publish --access public",
     "mcp": "bun run mcp.ts --stdio",
     "deploy": "bun run deploy/deploy.ts boddb deploy",

package/src/server/BodDB.ts

@@ -11,7 +11,7 @@ import { ReplicationEngine, type ReplicationOptions, type WriteEvent } from './R
 import { VFSEngine, type VFSEngineOptions } from './VFSEngine.ts';
 import { KeyAuthEngine, type KeyAuthEngineOptions } from './KeyAuthEngine.ts';
 import { validatePath } from '../shared/pathUtils.ts';
-import { Logger, type LogConfig } from '../shared/logger.ts';
+import { Logger, ComponentLogger, type LogConfig } from '../shared/logger.ts';
 import pkg from '../../package.json' with { type: 'json' };
 const PKG_VERSION: string = pkg.version ?? 'unknown';
 
@@ -76,6 +76,7 @@ export class BodDB {
   private _lastCpuUsage = process.cpuUsage();
   private _lastCpuTime = performance.now();
   private _lastStats: Record<string, unknown> | null = null;
+  private _sweepLog: ComponentLogger | null = null;
 
   constructor(options?: Partial<BodDBOptions>) {
     this.options = { ...new BodDBOptions(), ...options };
@@ -217,7 +218,10 @@ export class BodDB {
   }
 
   get(path: string): unknown {
-    if (path === '_admin/stats' && this._lastStats) return this._lastStats;
+    if (path === '_admin/stats' && this._statsInterval) {
+      // Return last broadcast stats if available (subscriber-gated); never compute on-demand here
+      return this._lastStats ?? null;
+    }
     return this.storage.get(path);
   }
 
@@ -240,6 +244,7 @@ export class BodDB {
 
   /** Manually trigger TTL sweep + stream auto-compact, returns expired paths */
   sweep(): string[] {
+    if (!this._sweepLog) this._sweepLog = this.log.forComponent('storage');
     const expired = this.storage.sweep();
     if (expired.length > 0) {
       if (this.subs.hasSubscriptions) {
@@ -249,7 +254,9 @@ export class BodDB {
       for (const p of expired) {
         this._fireWrite({ op: 'delete', path: p });
       }
-      this.log.forComponent('storage').debug(`Sweep: ${expired.length} expired paths removed`);
+      this._sweepLog.debug(`Sweep: ${expired.length} expired paths removed`);
+    } else {
+      this._sweepLog.debug('Sweep: no expired paths');
     }
     this.stream.autoCompact();
     this.mq.sweep();
@@ -394,6 +401,38 @@ export class BodDB {
     return result;
   }
 
+  /** Compute a one-shot stats snapshot (used for REST GET when no WS subscribers are active). */
+  private _collectStats(): Record<string, unknown> {
+    const { statSync } = require('fs');
+    const { cpus, totalmem, freemem } = require('os');
+    const MB = 1 / (1024 * 1024);
+    const mem = process.memoryUsage();
+    const osCpuList = cpus();
+    return {
+      version: PKG_VERSION,
+      process: {
+        cpuPercent: null, // not meaningful for a one-shot snapshot
+        heapUsedMb: Math.round(mem.heapUsed * MB * 100) / 100,
+        rssMb: Math.round(mem.rss * MB * 100) / 100,
+        uptimeSec: Math.floor(process.uptime()),
+      },
+      db: {
+        path: this.options.path !== ':memory:' ? require('path').resolve(this.options.path) : ':memory:',
+        nodeCount: (() => { try { return (this._statsStmtCount?.get() as any)?.n ?? null; } catch { return null; } })(),
+        sizeMb: (() => { try { return this.options.path !== ':memory:' ? Math.round(statSync(this.options.path).size * MB * 100) / 100 : null; } catch { return null; } })(),
+      },
+      system: {
+        cpuCores: osCpuList.length,
+        totalMemMb: Math.round(totalmem() * MB),
+        cpuPercent: null, // not meaningful for a one-shot snapshot
+      },
+      subs: this.subs.subscriberCount(),
+      clients: this._transport?.clientCount ?? 0,
+      repl: this.replication?.stats() ?? null,
+      ts: Date.now(),
+    };
+  }
+
   /** Start publishing process/db stats to `_admin/stats` (only when subscribers exist). */
   startStatsPublisher(): void {
     if (this._statsInterval) return;
@@ -413,7 +452,7 @@ export class BodDB {
     // Reuse a single stats object to minimize allocations
     const statsData: Record<string, unknown> = {
       version: PKG_VERSION,
-      process: {}, db: {}, system: {},
+      process: {}, db: { path: this.options.path !== ':memory:' ? require('path').resolve(this.options.path) : ':memory:' }, system: {},
       subs: 0, clients: 0, repl: null, ts: 0,
     };
     const proc = statsData.process as Record<string, number>;
@@ -426,8 +465,26 @@ export class BodDB {
     sys.cpuCores = cpus().length;
     sys.totalMemMb = Math.round(totalmem() * MB);
 
+    const statsLog = this.log.forComponent('stats');
+    let wasIdle = true;
     this._statsInterval = setInterval(() => {
       if (!this._transport) return;
+      // Skip all collection work when no clients are watching _admin/stats
+      if (!this._transport.hasStatsSubscribers) {
+        if (!wasIdle) {
+          wasIdle = true;
+          statsLog.debug('No stats subscribers — collection paused');
+        }
+        return;
+      }
+      // Resuming from idle: reset CPU baselines to avoid a bogus spike
+      if (wasIdle) {
+        wasIdle = false;
+        this._lastCpuUsage = process.cpuUsage();
+        this._lastCpuTime = performance.now();
+        lastOsCpus = cpus();
+        statsLog.debug('Stats subscriber connected — collection resumed');
+      }
       tick++;
 
       const now = performance.now();
@@ -468,7 +525,7 @@ export class BodDB {
       if (this._transport) this._transport.broadcastStats(statsData, Date.now());
 
     }, 1000);
-    this.log.forComponent('stats').info('Stats publisher started');
+    statsLog.info('Stats publisher started (collection gated on active subscribers)');
   }
 
   /** Stop the stats publisher. */