@korajs/cli 0.6.0 → 1.0.0-beta.0

package/dist/studio-server-NIFKZI4F.js

@@ -0,0 +1,1738 @@
+#!/usr/bin/env node
+
+// src/commands/studio/studio-server.ts
+import { createServer } from "http";
+
+// src/commands/studio/db-reader.ts
+var KORA_TABLE_PREFIX = "_kora_";
+var OPS_TABLE_PREFIX = "_kora_ops_";
+var META_COLUMNS = /* @__PURE__ */ new Set([
+  "id",
+  "_created_at",
+  "_updated_at",
+  "_version",
+  "_field_versions",
+  "_deleted"
+]);
+function parseVersionStamp(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return null;
+  }
+  const parts = raw.split(":");
+  if (parts.length < 3) {
+    return null;
+  }
+  const wallTime = Number.parseInt(parts[0] ?? "", 10);
+  const logical = Number.parseInt(parts[1] ?? "", 10);
+  if (Number.isNaN(wallTime) || Number.isNaN(logical)) {
+    return null;
+  }
+  return { wallTime, logical, nodeId: parts.slice(2).join(":") };
+}
+function parseFieldVersionsColumn(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    const result = {};
+    for (const [field, value] of Object.entries(parsed)) {
+      const version = parseVersionStamp(value);
+      if (version) {
+        result[field] = version;
+      }
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+function safeIdentifier(name) {
+  if (!/^[a-zA-Z0-9_]+$/.test(name)) {
+    throw new Error(`Unsafe SQL identifier: "${name}"`);
+  }
+  return name;
+}
+function parseJsonColumn(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return null;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function parseJsonArrayColumn(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.map(String) : [];
+  } catch {
+    return [];
+  }
+}
+var StudioDbReader = class _StudioDbReader {
+  constructor(db, dbPath) {
+    this.db = db;
+    this.dbPath = dbPath;
+  }
+  db;
+  dbPath;
+  /**
+   * Open a Kora database strictly read-only.
+   * @throws when the file does not exist or is not a Kora database
+   */
+  static async open(dbPath) {
+    let Database;
+    try {
+      Database = (await import("better-sqlite3")).default;
+    } catch {
+      throw new Error(
+        'Kora Studio needs the "better-sqlite3" package to open database files. Install it in your project: pnpm add -D better-sqlite3'
+      );
+    }
+    const db = new Database(dbPath, { readonly: true, fileMustExist: true });
+    const reader = new _StudioDbReader(db, dbPath);
+    if (reader.listCollections().length === 0 && !reader.hasKoraTables()) {
+      db.close();
+      throw new Error(`"${dbPath}" does not look like a Kora database (no _kora_* tables found).`);
+    }
+    return reader;
+  }
+  close() {
+    this.db.close();
+  }
+  hasKoraTables() {
+    const row = this.db.prepare("SELECT COUNT(*) as count FROM sqlite_master WHERE type='table' AND name LIKE ?").get(`${KORA_TABLE_PREFIX}%`);
+    return row.count > 0;
+  }
+  /** Collections = tables that have a companion _kora_ops_<name> table. */
+  listCollections() {
+    const tables = this.db.prepare("SELECT name FROM sqlite_master WHERE type='table' ORDER BY name").all();
+    const names = new Set(tables.map((t) => t.name));
+    const collections = [];
+    for (const { name } of tables) {
+      if (name.startsWith(OPS_TABLE_PREFIX)) {
+        const collection = name.slice(OPS_TABLE_PREFIX.length);
+        if (names.has(collection)) {
+          collections.push(collection);
+        }
+      }
+    }
+    return collections.sort();
+  }
+  overview() {
+    const collections = this.listCollections().map((name) => {
+      const table = safeIdentifier(name);
+      const live = this.db.prepare(`SELECT COUNT(*) as count FROM ${table} WHERE _deleted = 0`).get();
+      const tombstones = this.db.prepare(`SELECT COUNT(*) as count FROM ${table} WHERE _deleted = 1`).get();
+      const operations = this.db.prepare(`SELECT COUNT(*) as count FROM ${OPS_TABLE_PREFIX}${table}`).get();
+      const columnRows = this.db.prepare(`PRAGMA table_info(${table})`).all();
+      return {
+        name,
+        liveRecords: live.count,
+        tombstones: tombstones.count,
+        operations: operations.count,
+        columns: columnRows.map((c) => c.name).filter((c) => !META_COLUMNS.has(c))
+      };
+    });
+    const versionVector = this.tableExists("_kora_version_vector") ? this.db.prepare(
+      "SELECT node_id as nodeId, sequence_number as sequenceNumber FROM _kora_version_vector ORDER BY node_id"
+    ).all() : [];
+    const meta = this.tableExists("_kora_meta") ? this.db.prepare("SELECT key, value FROM _kora_meta ORDER BY key").all() : [];
+    const pendingSyncOps = this.tableExists("_kora_sync_queue") ? this.db.prepare("SELECT COUNT(*) as count FROM _kora_sync_queue").get().count : 0;
+    const auditTraces = this.tableExists("_kora_audit_traces") ? this.db.prepare("SELECT COUNT(*) as count FROM _kora_audit_traces").get().count : 0;
+    return { dbPath: this.dbPath, collections, versionVector, meta, pendingSyncOps, auditTraces };
+  }
+  records(collection, options = {}) {
+    const table = safeIdentifier(collection);
+    const limit = Math.min(Math.max(options.limit ?? 50, 1), 500);
+    const offset = Math.max(options.offset ?? 0, 0);
+    const clauses = [];
+    const params = [];
+    if (!options.includeDeleted) {
+      clauses.push("_deleted = 0");
+    }
+    if (options.search && options.search.trim().length > 0) {
+      const textColumns = this.db.prepare(`PRAGMA table_info(${table})`).all().filter((c) => c.type.toUpperCase().includes("TEXT") || c.name === "id");
+      const term = `%${options.search.trim()}%`;
+      const likes = textColumns.map((c) => {
+        params.push(term);
+        return `${safeIdentifier(c.name)} LIKE ?`;
+      });
+      if (likes.length > 0) {
+        clauses.push(`(${likes.join(" OR ")})`);
+      }
+    }
+    const where = clauses.length > 0 ? `WHERE ${clauses.join(" AND ")}` : "";
+    const total = this.db.prepare(`SELECT COUNT(*) as count FROM ${table} ${where}`).get(...params).count;
+    const rows = this.db.prepare(`SELECT * FROM ${table} ${where} ORDER BY _updated_at DESC LIMIT ? OFFSET ?`).all(...params, limit, offset);
+    return { records: rows.map((row) => this.toStudioRecord(row)), total };
+  }
+  /** Full operation log for one collection (capped), for replay and the DAG. */
+  allOperations(collection, cap = 5e3) {
+    const table = safeIdentifier(collection);
+    const rows = this.db.prepare(`SELECT * FROM ${OPS_TABLE_PREFIX}${table} ORDER BY timestamp ASC LIMIT ?`).all(Math.min(Math.max(cap, 1), 2e4));
+    return rows.map((row) => this.toStudioOperation(row));
+  }
+  /**
+   * Cheap change fingerprint for live updates. SQLite's `data_version` PRAGMA
+   * increments whenever ANOTHER connection commits — exactly what a read-only
+   * watcher needs to know "something changed, refetch".
+   */
+  fingerprint() {
+    const row = this.db.prepare("PRAGMA data_version").get();
+    return String(row.data_version);
+  }
+  /** Raw value of a single column on a record (for richtext preview decode). */
+  rawFieldValue(collection, recordId, field) {
+    const table = safeIdentifier(collection);
+    const column = safeIdentifier(field);
+    const row = this.db.prepare(`SELECT ${column} as value FROM ${table} WHERE id = ?`).get(recordId);
+    return row?.value;
+  }
+  record(collection, recordId) {
+    const table = safeIdentifier(collection);
+    const row = this.db.prepare(`SELECT * FROM ${table} WHERE id = ?`).get(recordId);
+    return row ? this.toStudioRecord(row) : null;
+  }
+  /** Full operation history for one record, newest first. */
+  recordOperations(collection, recordId) {
+    const table = safeIdentifier(collection);
+    const rows = this.db.prepare(
+      `SELECT * FROM ${OPS_TABLE_PREFIX}${table} WHERE record_id = ? ORDER BY timestamp DESC`
+    ).all(recordId);
+    return rows.map((row) => this.toStudioOperation(row));
+  }
+  operations(collection, options = {}) {
+    const table = safeIdentifier(collection);
+    const limit = Math.min(Math.max(options.limit ?? 50, 1), 500);
+    const offset = Math.max(options.offset ?? 0, 0);
+    const total = this.db.prepare(`SELECT COUNT(*) as count FROM ${OPS_TABLE_PREFIX}${table}`).get().count;
+    const rows = this.db.prepare(`SELECT * FROM ${OPS_TABLE_PREFIX}${table} ORDER BY timestamp DESC LIMIT ? OFFSET ?`).all(limit, offset);
+    return { operations: rows.map((row) => this.toStudioOperation(row)), total };
+  }
+  auditTraces(limit = 100) {
+    if (!this.tableExists("_kora_audit_traces")) {
+      return [];
+    }
+    const rows = this.db.prepare(
+      `SELECT id, recorded_at, event_type, collection, record_id, field, strategy, tier, constraint_name
+				 FROM _kora_audit_traces ORDER BY recorded_at DESC LIMIT ?`
+    ).all(Math.min(Math.max(limit, 1), 500));
+    return rows.map((row) => ({
+      id: String(row.id),
+      recordedAt: Number(row.recorded_at),
+      eventType: String(row.event_type),
+      collection: String(row.collection),
+      recordId: String(row.record_id),
+      field: String(row.field),
+      strategy: String(row.strategy),
+      tier: Number(row.tier),
+      constraintName: row.constraint_name === null ? null : String(row.constraint_name)
+    }));
+  }
+  tableExists(name) {
+    const row = this.db.prepare("SELECT COUNT(*) as count FROM sqlite_master WHERE type='table' AND name = ?").get(name);
+    return row.count > 0;
+  }
+  toStudioRecord(row) {
+    const fields = {};
+    for (const [key, value] of Object.entries(row)) {
+      if (!META_COLUMNS.has(key)) {
+        fields[key] = value instanceof Uint8Array || Buffer.isBuffer(value) ? `<binary ${value.byteLength} bytes>` : value;
+      }
+    }
+    return {
+      id: String(row.id),
+      fields,
+      createdAt: Number(row._created_at),
+      updatedAt: Number(row._updated_at),
+      deleted: row._deleted === 1,
+      version: parseVersionStamp(row._version),
+      fieldVersions: parseFieldVersionsColumn(row._field_versions)
+    };
+  }
+  toStudioOperation(row) {
+    return {
+      id: String(row.id),
+      nodeId: String(row.node_id),
+      type: String(row.type),
+      recordId: String(row.record_id),
+      data: parseJsonColumn(row.data),
+      previousData: parseJsonColumn(row.previous_data),
+      timestamp: parseVersionStamp(row.timestamp),
+      sequenceNumber: Number(row.sequence_number),
+      causalDeps: parseJsonArrayColumn(row.causal_deps),
+      schemaVersion: Number(row.schema_version)
+    };
+  }
+};
+
+// src/commands/studio/studio-replay.ts
+function compareVersion(a, b) {
+  if (!a || !b) {
+    return a === b ? 0 : a ? 1 : -1;
+  }
+  if (a.wallTime !== b.wallTime) {
+    return a.wallTime - b.wallTime;
+  }
+  if (a.logical !== b.logical) {
+    return a.logical - b.logical;
+  }
+  return a.nodeId < b.nodeId ? -1 : a.nodeId > b.nodeId ? 1 : 0;
+}
+function sortByHlc(ops) {
+  return [...ops].sort((a, b) => compareVersion(a.timestamp, b.timestamp));
+}
+function replayToOperation(ops, upToOpId) {
+  const ordered = sortByHlc(ops);
+  let cutIndex = ordered.length - 1;
+  if (upToOpId !== null) {
+    const found = ordered.findIndex((o) => o.id === upToOpId);
+    if (found === -1) {
+      throw new Error(`Operation "${upToOpId}" not found in the log`);
+    }
+    cutIndex = found;
+  }
+  const records = /* @__PURE__ */ new Map();
+  for (let i = 0; i <= cutIndex; i++) {
+    const operation = ordered[i];
+    if (!operation) {
+      continue;
+    }
+    const writer = operation.timestamp ? shortNode(operation.timestamp.nodeId) : "?";
+    if (operation.type === "insert" && operation.data) {
+      const writers = {};
+      for (const field of Object.keys(operation.data)) {
+        writers[field] = writer;
+      }
+      records.set(operation.recordId, {
+        fields: { ...operation.data },
+        deleted: false,
+        writers
+      });
+    } else if (operation.type === "update" && operation.data) {
+      const existing = records.get(operation.recordId);
+      if (existing) {
+        for (const [field, value] of Object.entries(operation.data)) {
+          existing.fields[field] = value;
+          existing.writers[field] = writer;
+        }
+      } else {
+        const writers = {};
+        for (const field of Object.keys(operation.data)) {
+          writers[field] = writer;
+        }
+        records.set(operation.recordId, {
+          fields: { ...operation.data },
+          deleted: false,
+          writers
+        });
+      }
+    } else if (operation.type === "delete") {
+      const existing = records.get(operation.recordId);
+      if (existing) {
+        existing.deleted = true;
+      } else {
+        records.set(operation.recordId, { fields: {}, deleted: true, writers: {} });
+      }
+    }
+  }
+  return {
+    records: [...records.entries()].map(([id, r]) => ({
+      id,
+      fields: r.fields,
+      deleted: r.deleted,
+      lastWriterByField: r.writers
+    })),
+    appliedCount: cutIndex + 1,
+    totalCount: ordered.length,
+    cutOperation: ordered[cutIndex] ?? null
+  };
+}
+function buildCausalDag(ops) {
+  const ordered = sortByHlc(ops);
+  const laneByNode = /* @__PURE__ */ new Map();
+  const lanes = [];
+  for (const operation of ordered) {
+    if (!laneByNode.has(operation.nodeId)) {
+      laneByNode.set(operation.nodeId, lanes.length);
+      lanes.push({ nodeId: operation.nodeId, shortNodeId: shortNode(operation.nodeId) });
+    }
+  }
+  const idSet = new Set(ordered.map((o) => o.id));
+  const nodes = ordered.map((operation, index) => ({
+    id: operation.id,
+    type: operation.type,
+    recordId: operation.recordId,
+    nodeId: operation.nodeId,
+    shortNodeId: shortNode(operation.nodeId),
+    sequenceNumber: operation.sequenceNumber,
+    wallTime: operation.timestamp?.wallTime ?? 0,
+    x: index,
+    lane: laneByNode.get(operation.nodeId) ?? 0,
+    dataPreview: operation.data ? JSON.stringify(operation.data).slice(0, 80) : ""
+  }));
+  const edges = [];
+  for (const operation of ordered) {
+    for (const dep of operation.causalDeps) {
+      if (idSet.has(dep)) {
+        edges.push({ from: dep, to: operation.id });
+      }
+    }
+  }
+  return { nodes, edges, lanes };
+}
+function shortNode(nodeId) {
+  return nodeId.length > 8 ? nodeId.slice(-8) : nodeId;
+}
+
+// src/commands/studio/studio-ui.ts
+var STUDIO_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Kora Studio</title>
+<link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+<header>
+  <div class="logo">kora <span>studio</span></div>
+  <div class="modebadge" id="modebadge"></div>
+  <div class="dbpath mono" id="dbpath"></div>
+  <div class="live" id="live"><div class="dot"></div><span>live</span></div>
+  <button id="refresh">Refresh</button>
+</header>
+<div class="tabs" id="tabs"></div>
+<div class="layout">
+  <nav class="sidebar" id="sidebar"></nav>
+  <main id="main"><div class="empty">Loading\u2026</div></main>
+</div>
+<div class="drawer" id="drawer"></div>
+<div class="dag-tip" id="dagtip"></div>
+<script src="/app.js"></script>
+</body>
+</html>
+`;
+
+// src/commands/studio/studio-ui-app.ts
+var STUDIO_APP_JS = `
+(function () {
+  'use strict';
+
+  // \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  var state = {
+    mode: 'file',            // 'file' | 'lab'
+    tab: 'data',             // data | ops | timetravel | merges | sync | lab
+    device: null,            // selected lab device for data-ish tabs
+    devices: [],
+    collection: null,
+    page: 0,
+    includeDeleted: false,
+    search: '',
+    overview: null,
+    ttPosition: null,        // time-travel slider position
+    ttPlaying: null,
+    labState: null,
+    feed: [],
+    deviceColors: {},
+    live: false
+  };
+  var PAGE = 50;
+  var refreshTimer = null;
+
+  // \u2500\u2500 Utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function qs(sel) { return document.querySelector(sel); }
+  function api(path) {
+    var sep = path.indexOf('?') === -1 ? '?' : '&';
+    var url = state.device ? path + sep + 'device=' + encodeURIComponent(state.device) : path;
+    return fetch(url).then(function (r) {
+      if (!r.ok) { return r.json().then(function (b) { throw new Error(b.error || r.statusText); }); }
+      return r.json();
+    });
+  }
+  function post(path, body) {
+    return fetch(path, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body || {})
+    }).then(function (r) {
+      if (!r.ok) { return r.json().then(function (b) { throw new Error(b.error || r.statusText); }); }
+      return r.json();
+    });
+  }
+  function el(tag, attrs, children) {
+    var node = document.createElement(tag);
+    if (attrs) { Object.keys(attrs).forEach(function (k) {
+      if (k === 'class') node.className = attrs[k];
+      else if (k === 'text') node.textContent = attrs[k];
+      else if (k === 'html') node.innerHTML = attrs[k];
+      else if (k.slice(0, 2) === 'on') node.addEventListener(k.slice(2), attrs[k]);
+      else node.setAttribute(k, attrs[k]);
+    }); }
+    (children || []).forEach(function (c) { if (c) node.appendChild(c); });
+    return node;
+  }
+  function fmtTime(ms) {
+    if (!ms) return '\xB7';
+    var d = new Date(ms);
+    return d.toLocaleTimeString() + '.' + ('00' + d.getMilliseconds()).slice(-3);
+  }
+  function fmtDateTime(ms) {
+    if (!ms) return '\xB7';
+    var d = new Date(ms);
+    return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
+  }
+  function shortNode(id) { return id && id.length > 8 ? id.slice(-8) : (id || '\xB7'); }
+  function shortId(id) { return id && id.length > 13 ? id.slice(0, 13) + '\u2026' : (id || ''); }
+  function fmtVal(v) {
+    if (v === null || v === undefined) return 'null';
+    if (typeof v === 'object') return JSON.stringify(v);
+    return String(v);
+  }
+  function deviceColor(name) {
+    if (!(name in state.deviceColors)) {
+      state.deviceColors[name] = 'dev-c' + (Object.keys(state.deviceColors).length % 6);
+    }
+    return state.deviceColors[name];
+  }
+  function debounceRefresh() {
+    if (refreshTimer) clearTimeout(refreshTimer);
+    refreshTimer = setTimeout(function () { render(false); }, 250);
+  }
+
+  // \u2500\u2500 Boot + live events \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  fetch('/api/mode').then(function (r) { return r.json(); }).then(function (info) {
+    state.mode = info.mode;
+    state.devices = info.devices || [];
+    if (state.mode === 'lab') { state.tab = 'lab'; state.device = state.devices[0] || null; }
+    qs('#modebadge').textContent = state.mode;
+    if (info.spectator) {
+      qs('#dbpath').textContent = '\u21C4 ' + info.spectator.url +
+        (info.spectator.connected ? ' \xB7 connected' : ' \xB7 connecting\u2026') +
+        ' \xB7 ' + info.spectator.operationsReceived + ' ops received';
+    }
+    connectEvents();
+    render(true);
+  });
+
+  function connectEvents() {
+    var source = new EventSource('/api/events');
+    source.addEventListener('hello', function () {
+      state.live = true; qs('#live').className = 'live on';
+    });
+    source.addEventListener('change', function () {
+      if (state.tab !== 'timetravel') debounceRefresh();
+    });
+    source.addEventListener('lab', function (event) {
+      var data = JSON.parse(event.data);
+      state.feed.push(data);
+      if (state.feed.length > 400) state.feed.shift();
+      appendFeedLine(data);
+    });
+    source.addEventListener('spectator', function (event) {
+      var data = JSON.parse(event.data);
+      data.device = 'server';
+      state.feed.push(data);
+      if (state.feed.length > 400) state.feed.shift();
+      appendFeedLine(data);
+      // Keep the header status fresh as ops stream in.
+      fetch('/api/spectator/status').then(function (r) { return r.json(); }).then(function (s) {
+        qs('#dbpath').textContent = '\u21C4 ' + s.url +
+          (s.connected ? ' \xB7 connected' : ' \xB7 reconnecting\u2026') +
+          ' \xB7 ' + s.operationsReceived + ' ops received';
+      }).catch(function () {});
+    });
+    source.onerror = function () {
+      state.live = false; qs('#live').className = 'live';
+    };
+  }
+
+  // \u2500\u2500 Tabs + chrome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderTabs() {
+    var tabs = qs('#tabs');
+    tabs.textContent = '';
+    var defs = [];
+    if (state.mode === 'lab') defs.push(['lab', 'Lab']);
+    defs.push(['data', 'Data'], ['ops', 'Operations'], ['timetravel', 'Time Travel'], ['merges', 'Merges'], ['sync', 'Sync']);
+    defs.forEach(function (d) {
+      tabs.appendChild(el('div', {
+        class: 'tab' + (state.tab === d[0] ? ' active' : ''),
+        text: d[1],
+        onclick: function () { state.tab = d[0]; state.page = 0; closeDrawer(); render(true); }
+      }));
+    });
+    tabs.appendChild(el('div', { class: 'spacer' }));
+    if (state.mode === 'lab' && state.tab !== 'lab') {
+      var pick = el('select', { onchange: function () { state.device = pick.value; state.page = 0; render(true); } },
+        state.devices.map(function (d) {
+          var o = el('option', { value: d, text: d });
+          if (d === state.device) o.selected = true;
+          return o;
+        }));
+      tabs.appendChild(el('div', { class: 'devicepick' }, [el('span', { text: 'device:' }), pick]));
+    }
+  }
+
+  function renderSidebar() {
+    var nav = qs('#sidebar');
+    nav.textContent = '';
+    if (state.tab === 'lab' || state.tab === 'sync' || state.tab === 'merges') {
+      nav.style.display = 'none';
+      return;
+    }
+    nav.style.display = '';
+    nav.appendChild(el('h3', { text: 'Collections' }));
+    (state.overview ? state.overview.collections : []).forEach(function (c) {
+      nav.appendChild(el('div', {
+        class: 'item' + (state.collection === c.name ? ' active' : ''),
+        onclick: function () { state.collection = c.name; state.page = 0; closeDrawer(); render(false); }
+      }, [
+        el('span', { text: c.name }),
+        el('span', { class: 'count', text: String(c.liveRecords) + (c.tombstones ? ' +' + c.tombstones + '\u2020' : '') })
+      ]));
+    });
+  }
+
+  // \u2500\u2500 Main render \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function render(full) {
+    renderTabs();
+    if (state.tab === 'lab') { renderSidebar(); renderLab(full); return; }
+    api('/api/overview').then(function (overview) {
+      state.overview = overview;
+      qs('#dbpath').textContent = overview.dbPath || '';
+      if (!state.collection || !overview.collections.some(function (c) { return c.name === state.collection; })) {
+        state.collection = overview.collections.length ? overview.collections[0].name : null;
+      }
+      renderSidebar();
+      var main = qs('#main');
+      main.textContent = '';
+      if (state.tab === 'data') return renderData(main);
+      if (state.tab === 'ops') return renderOps(main);
+      if (state.tab === 'timetravel') return renderTimeTravel(main);
+      if (state.tab === 'merges') return renderMerges(main);
+      if (state.tab === 'sync') return renderSync(main);
+    }).catch(function (e) {
+      qs('#main').innerHTML = '<div class="error">' + e.message + '</div>';
+    });
+  }
+
+  function toolbar(main, title, extra) {
+    main.appendChild(el('div', { class: 'toolbar' }, [el('h2', { text: title })].concat(extra || [])));
+  }
+  function pager(main, total) {
+    var pages = Math.max(1, Math.ceil(total / PAGE));
+    main.appendChild(el('div', { class: 'pager' }, [
+      el('button', { text: '\u2039 Prev', onclick: function () { if (state.page > 0) { state.page--; render(false); } } }),
+      el('span', { text: 'page ' + (state.page + 1) + ' / ' + pages + ' \xB7 ' + total + ' total' }),
+      el('button', { text: 'Next \u203A', onclick: function () { if (state.page < pages - 1) { state.page++; render(false); } } })
+    ]));
+  }
+
+  // \u2500\u2500 Data tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderData(main) {
+    if (!state.collection) { main.appendChild(el('div', { class: 'empty', text: 'No collections.' })); return; }
+    var searchBox = el('input', { type: 'text', placeholder: 'search\u2026', value: state.search });
+    searchBox.oninput = function () { state.search = searchBox.value; state.page = 0; debounceRefresh(); };
+    var deletedToggle = el('label', {}, [
+      (function () { var cb = el('input', { type: 'checkbox' }); cb.checked = state.includeDeleted;
+        cb.onchange = function () { state.includeDeleted = cb.checked; state.page = 0; render(false); }; return cb; })(),
+      el('span', { text: 'tombstones' })
+    ]);
+    toolbar(main, state.collection, [searchBox, deletedToggle]);
+
+    var q = '/api/collections/' + state.collection + '/records?limit=' + PAGE +
+      '&offset=' + (state.page * PAGE) + '&includeDeleted=' + state.includeDeleted +
+      (state.search ? '&search=' + encodeURIComponent(state.search) : '');
+    api(q).then(function (data) {
+      var info = state.overview.collections.filter(function (c) { return c.name === state.collection; })[0];
+      var columns = info ? info.columns : [];
+      if (!data.records.length) { main.appendChild(el('div', { class: 'empty', text: 'No records.' })); return; }
+      var thead = el('tr', {}, [el('th', { text: 'id' })].concat(
+        columns.map(function (c) { return el('th', { text: c }); }),
+        [el('th', { text: 'updated' })]
+      ));
+      var tbody = el('tbody', {}, data.records.map(function (r) {
+        return el('tr', { class: 'clickable' + (r.deleted ? ' tombstone' : ''), onclick: function () { openRecord(r.id); } },
+          [el('td', { class: 'mono', text: shortId(r.id) })].concat(
+            columns.map(function (c) { return el('td', { text: fmtVal(r.fields[c]).slice(0, 60) }); }),
+            [el('td', { class: 'mono', text: fmtDateTime(r.updatedAt) })]
+          ));
+      }));
+      main.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+      pager(main, data.total);
+    }).catch(showError(main));
+  }
+
+  // \u2500\u2500 Record drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function openRecord(id) {
+    api('/api/collections/' + state.collection + '/records/' + encodeURIComponent(id)).then(function (data) {
+      var drawer = qs('#drawer');
+      drawer.textContent = '';
+      var r = data.record;
+      drawer.appendChild(el('h3', {}, [
+        el('span', { class: 'mono', text: r.id }),
+        el('span', { class: 'close', text: '\u2715', onclick: closeDrawer })
+      ]));
+      if (r.deleted) drawer.appendChild(el('span', { class: 'badge delete', text: 'tombstone' }));
+
+      drawer.appendChild(el('h4', { text: 'Fields \u2014 with last writer per field' }));
+      Object.keys(r.fields).forEach(function (f) {
+        var fv = r.fieldVersions[f];
+        var val = fmtVal(r.fields[f]);
+        var preview = data.richtextPreviews && data.richtextPreviews[f];
+        drawer.appendChild(el('div', { class: 'fieldrow' }, [
+          el('div', { class: 'fname mono', text: f }),
+          el('div', { class: 'fval', text: val }),
+          preview ? el('div', { class: 'preview', text: '\u201C' + preview + '\u201D' }) : null,
+          fv ? el('span', { class: 'chip' }, [
+            el('span', { text: 'last writer' }),
+            el('b', { class: 'mono', text: shortNode(fv.nodeId) }),
+            el('span', { class: 'mono', text: fmtDateTime(fv.wallTime) })
+          ]) : el('span', { class: 'chip', text: 'no field version' })
+        ]));
+      });
+
+      drawer.appendChild(el('h4', { text: 'Causal graph for this record' }));
+      var dagBox = el('div', { class: 'dagwrap' });
+      drawer.appendChild(dagBox);
+      api('/api/collections/' + state.collection + '/dag?record=' + encodeURIComponent(id)).then(function (dag) {
+        renderDag(dagBox, dag, 500);
+      });
+
+      drawer.appendChild(el('h4', { text: 'Operation history (newest first)' }));
+      if (!data.operations.length) drawer.appendChild(el('div', { class: 'empty', text: 'No operations (compacted?).' }));
+      data.operations.forEach(function (o) {
+        var body = el('div', { class: 'op ' + o.type }, [
+          el('div', {}, [
+            el('span', { class: 'badge ' + o.type, text: o.type }),
+            el('span', { class: 'meta', text: '  ' + shortNode(o.nodeId) + ' \xB7 seq ' + o.sequenceNumber + ' \xB7 ' + (o.timestamp ? fmtDateTime(o.timestamp.wallTime) : '\xB7') })
+          ])
+        ]);
+        if (o.data) {
+          var pre = el('pre', { class: 'mono' });
+          pre.textContent = JSON.stringify(o.data, null, 1);
+          body.appendChild(pre);
+        }
+        drawer.appendChild(body);
+      });
+      drawer.className = 'drawer open';
+    }).catch(function (e) { alertError(e); });
+  }
+  function closeDrawer() { qs('#drawer').className = 'drawer'; }
+
+  // \u2500\u2500 Operations tab (DAG + table) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderOps(main) {
+    if (!state.collection) { main.appendChild(el('div', { class: 'empty', text: 'No collections.' })); return; }
+    toolbar(main, state.collection + ' \u2014 operation log');
+    var dagBox = el('div', { class: 'dagwrap' });
+    main.appendChild(dagBox);
+    api('/api/collections/' + state.collection + '/dag?limit=120').then(function (dag) {
+      renderDag(dagBox, dag, null);
+    });
+
+    api('/api/collections/' + state.collection + '/ops?limit=' + PAGE + '&offset=' + (state.page * PAGE)).then(function (data) {
+      if (!data.operations.length) { main.appendChild(el('div', { class: 'empty', text: 'Empty (compacted?).' })); return; }
+      var thead = el('tr', {}, ['type', 'record', 'node', 'seq', 'time', 'data'].map(function (h) { return el('th', { text: h }); }));
+      var tbody = el('tbody', {}, data.operations.map(function (o) {
+        return el('tr', { class: 'clickable', onclick: function () { openRecord(o.recordId); } }, [
+          el('td', {}, [el('span', { class: 'badge ' + o.type, text: o.type })]),
+          el('td', { class: 'mono', text: shortId(o.recordId) }),
+          el('td', { class: 'mono', text: shortNode(o.nodeId) }),
+          el('td', { class: 'mono', text: String(o.sequenceNumber) }),
+          el('td', { class: 'mono', text: o.timestamp ? fmtDateTime(o.timestamp.wallTime) : '\xB7' }),
+          el('td', { class: 'mono', text: o.data ? JSON.stringify(o.data).slice(0, 70) : '\xB7' })
+        ]);
+      }));
+      main.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+      pager(main, data.total);
+    }).catch(showError(main));
+  }
+
+  // \u2500\u2500 Causal DAG renderer (SVG) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderDag(container, dag, maxWidth) {
+    container.textContent = '';
+    if (!dag.nodes.length) { container.appendChild(el('div', { class: 'empty', text: 'No operations to graph.' })); return; }
+    var XSTEP = 46, YSTEP = 44, PADX = 90, PADY = 26, R = 7;
+    var width = PADX + dag.nodes.length * XSTEP + 30;
+    var height = PADY + dag.lanes.length * YSTEP + 16;
+    var svgns = 'http://www.w3.org/2000/svg';
+    var svg = document.createElementNS(svgns, 'svg');
+    svg.setAttribute('width', String(width));
+    svg.setAttribute('height', String(height));
+
+    var defs = document.createElementNS(svgns, 'defs');
+    defs.innerHTML = '<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#3a4356"/></marker>';
+    svg.appendChild(defs);
+
+    var colors = { insert: '#48bb78', update: '#4299e1', delete: '#f56565' };
+    var pos = {};
+    dag.nodes.forEach(function (n) {
+      pos[n.id] = { x: PADX + n.x * XSTEP, y: PADY + n.lane * YSTEP + YSTEP / 2 };
+    });
+
+    dag.lanes.forEach(function (lane, i) {
+      var y = PADY + i * YSTEP + YSTEP / 2;
+      var line = document.createElementNS(svgns, 'line');
+      line.setAttribute('x1', '10'); line.setAttribute('x2', String(width - 10));
+      line.setAttribute('y1', String(y)); line.setAttribute('y2', String(y));
+      line.setAttribute('class', 'dag-lane-line');
+      svg.appendChild(line);
+      var label = document.createElementNS(svgns, 'text');
+      label.setAttribute('x', '10'); label.setAttribute('y', String(y - 8));
+      label.setAttribute('class', 'dag-lane-label');
+      label.textContent = lane.shortNodeId;
+      svg.appendChild(label);
+    });
+
+    dag.edges.forEach(function (e) {
+      var a = pos[e.from], b = pos[e.to];
+      if (!a || !b) return;
+      var path = document.createElementNS(svgns, 'path');
+      var midX = (a.x + b.x) / 2;
+      path.setAttribute('d', 'M ' + a.x + ' ' + a.y + ' C ' + midX + ' ' + a.y + ', ' + midX + ' ' + b.y + ', ' + (b.x - R - 2) + ' ' + b.y);
+      path.setAttribute('class', 'dag-edge');
+      svg.appendChild(path);
+    });
+
+    var tip = qs('#dagtip');
+    dag.nodes.forEach(function (n) {
+      var g = document.createElementNS(svgns, 'g');
+      g.setAttribute('class', 'dag-node');
+      var c = document.createElementNS(svgns, 'circle');
+      var p = pos[n.id];
+      c.setAttribute('cx', String(p.x)); c.setAttribute('cy', String(p.y)); c.setAttribute('r', String(R));
+      c.setAttribute('fill', '#161a22');
+      c.setAttribute('stroke', colors[n.type] || '#8b93a7');
+      g.appendChild(c);
+      g.addEventListener('mousemove', function (ev) {
+        tip.style.display = 'block';
+        tip.style.left = (ev.clientX + 14) + 'px';
+        tip.style.top = (ev.clientY + 14) + 'px';
+        tip.innerHTML = '<b>' + n.type + '</b> by ' + n.shortNodeId + ' \xB7 seq ' + n.sequenceNumber +
+          '<br/>record ' + shortId(n.recordId) +
+          (n.dataPreview ? '<br/><span class="mono">' + escapeHtml(n.dataPreview) + '</span>' : '');
+      });
+      g.addEventListener('mouseleave', function () { tip.style.display = 'none'; });
+      g.addEventListener('click', function () { openRecord(n.recordId); });
+      svg.appendChild(g);
+    });
+
+    if (maxWidth) container.style.maxWidth = maxWidth + 'px';
+    container.appendChild(svg);
+    container.scrollLeft = width;
+  }
+  function escapeHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  // \u2500\u2500 Time travel tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderTimeTravel(main) {
+    if (!state.collection) { main.appendChild(el('div', { class: 'empty', text: 'No collections.' })); return; }
+    toolbar(main, state.collection + ' \u2014 time travel');
+    api('/api/collections/' + state.collection + '/replay').then(function (full) {
+      var total = full.totalCount;
+      if (!total) { main.appendChild(el('div', { class: 'empty', text: 'No operations to replay.' })); return; }
+      if (state.ttPosition === null || state.ttPosition > total) state.ttPosition = total;
+
+      var posLabel = el('span', { class: 'mono', text: '' });
+      var slider = el('input', { type: 'range', min: '1', max: String(total), value: String(state.ttPosition) });
+      var playBtn = el('button', { text: '\u25B6 replay' });
+      var cutBox = el('div', { class: 'tt-cut mono' });
+      var stateBox = el('div', {});
+
+      function show(position) {
+        state.ttPosition = position;
+        posLabel.textContent = position + ' / ' + total + ' ops';
+        api('/api/collections/' + state.collection + '/replay?upTo=' + encodeURIComponent(opIdAt(position))).then(function (cut) {
+          var o = cut.cutOperation;
+          cutBox.innerHTML = o
+            ? 'cut at <b>' + o.type + '</b> by ' + shortNode(o.nodeId) + ' \xB7 ' + (o.timestamp ? fmtDateTime(o.timestamp.wallTime) : '') +
+              (o.data ? ' \xB7 ' + escapeHtml(JSON.stringify(o.data).slice(0, 90)) : '')
+            : '';
+          renderReplayState(stateBox, cut);
+        });
+      }
+      // The full replay result orders ops by HLC; fetch the ordered id list once.
+      var orderedIds = [];
+      api('/api/collections/' + state.collection + '/dag?limit=20000').then(function (dag) {
+        orderedIds = dag.nodes.map(function (n) { return n.id; });
+        show(Math.min(state.ttPosition, orderedIds.length));
+      });
+      function opIdAt(position) { return orderedIds[position - 1]; }
+
+      slider.oninput = function () { show(Number(slider.value)); };
+      playBtn.onclick = function () {
+        if (state.ttPlaying) { clearInterval(state.ttPlaying); state.ttPlaying = null; playBtn.textContent = '\u25B6 replay'; return; }
+        var pos = 1;
+        playBtn.textContent = '\u23F8 pause';
+        state.ttPlaying = setInterval(function () {
+          if (pos > orderedIds.length) { clearInterval(state.ttPlaying); state.ttPlaying = null; playBtn.textContent = '\u25B6 replay'; return; }
+          slider.value = String(pos);
+          show(pos);
+          pos++;
+        }, 350);
+      };
+
+      main.appendChild(el('div', { class: 'tt-controls' }, [playBtn, slider, posLabel]));
+      main.appendChild(cutBox);
+      main.appendChild(stateBox);
+    }).catch(showError(main));
+  }
+
+  function renderReplayState(box, cut) {
+    box.textContent = '';
+    if (!cut.records.length) { box.appendChild(el('div', { class: 'empty', text: 'No records at this point.' })); return; }
+    var fieldSet = {};
+    cut.records.forEach(function (r) { Object.keys(r.fields).forEach(function (f) { fieldSet[f] = true; }); });
+    var fields = Object.keys(fieldSet);
+    var thead = el('tr', {}, [el('th', { text: 'id' })].concat(fields.map(function (f) { return el('th', { text: f }); })));
+    var tbody = el('tbody', {}, cut.records.map(function (r) {
+      return el('tr', { class: r.deleted ? 'tombstone' : '' },
+        [el('td', { class: 'mono', text: shortId(r.id) })].concat(fields.map(function (f) {
+          return el('td', { text: r.fields[f] === undefined ? '' : fmtVal(r.fields[f]).slice(0, 40) });
+        })));
+    }));
+    box.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+  }
+
+  // \u2500\u2500 Merges tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderMerges(main) {
+    toolbar(main, 'Merge audit trail');
+    api('/api/audit?limit=200').then(function (data) {
+      if (!data.traces.length) { main.appendChild(el('div', { class: 'empty', text: 'No merge audit traces recorded.' })); return; }
+      var thead = el('tr', {}, ['when', 'event', 'collection', 'record', 'field', 'strategy', 'tier'].map(function (h) { return el('th', { text: h }); }));
+      var tbody = el('tbody', {}, data.traces.map(function (t) {
+        return el('tr', {}, [
+          el('td', { class: 'mono', text: fmtDateTime(t.recordedAt) }),
+          el('td', { text: t.eventType }),
+          el('td', { text: t.collection }),
+          el('td', { class: 'mono', text: shortId(t.recordId) }),
+          el('td', { text: t.field }),
+          el('td', { text: t.strategy }),
+          el('td', { text: String(t.tier) })
+        ]);
+      }));
+      main.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+    }).catch(showError(main));
+  }
+
+  // \u2500\u2500 Sync tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderSync(main) {
+    toolbar(main, 'Sync state' + (state.device ? ' \u2014 ' + state.device : ''));
+    var o = state.overview;
+    main.appendChild(el('div', { class: 'panel' }, [
+      el('h3', { text: 'Version vector \u2014 what this store has seen from each node' }),
+      el('table', { class: 'grid' }, [
+        el('thead', {}, [el('tr', {}, [el('th', { text: 'node' }), el('th', { text: 'max sequence' })])]),
+        el('tbody', {}, o.versionVector.map(function (v) {
+          return el('tr', {}, [el('td', { class: 'mono', text: v.nodeId }), el('td', { class: 'mono', text: String(v.sequenceNumber) })]);
+        }))
+      ])
+    ]));
+    main.appendChild(el('div', { class: 'panel' }, [
+      el('h3', { text: 'Outbound queue' }),
+      el('div', { text: o.pendingSyncOps + ' operation(s) waiting to sync' })
+    ]));
+    main.appendChild(el('div', { class: 'panel' }, [
+      el('h3', { text: 'Store meta' }),
+      el('table', { class: 'grid' }, [
+        el('tbody', {}, o.meta.map(function (m) {
+          return el('tr', {}, [el('td', { class: 'mono', text: m.key }), el('td', { class: 'mono', text: m.value })]);
+        }))
+      ])
+    ]));
+    if (state.mode === 'spectator') {
+      var feedBox = el('div', { class: 'lab-feed', style: 'width:100%;max-height:340px' }, [
+        el('h3', { text: 'Live events from the server' }),
+        el('div', { class: 'feed', id: 'feed' })
+      ]);
+      main.appendChild(feedBox);
+      state.feed.slice(-200).forEach(appendFeedLine);
+    }
+  }
+
+  // \u2500\u2500 Lab tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderLab(full) {
+    var main = qs('#main');
+    qs('#sidebar').style.display = 'none';
+    Promise.all([fetch('/api/lab/state').then(function (r) { return r.json(); }),
+                 fetch('/api/lab/convergence').then(function (r) { return r.json(); })])
+      .then(function (results) {
+        state.labState = results[0];
+        state.devices = results[0].devices.map(function (d) { return d.name; });
+        var convergence = results[1];
+        main.textContent = '';
+        qs('#dbpath').textContent = 'sync laboratory \xB7 ' + results[0].serverOperations + ' ops on server';
+
+        var conv = el('div', { class: 'convergence ' + (convergence.converged ? 'ok' : 'bad') }, [
+          el('div', { text: convergence.converged
+            ? '\u2713 ALL ' + convergence.deviceCount + ' DEVICES CONVERGED'
+            : '\u2717 DEVICES DIVERGED (' + convergence.differences.length + ' difference(s)) \u2014 sync to converge' })
+        ]);
+        if (!convergence.converged) {
+          conv.appendChild(el('div', { class: 'diffs', text: convergence.differences.slice(0, 4).join(' \xB7 ') }));
+        }
+        var addBtn = el('button', { class: 'primary', text: '+ add device', onclick: function () {
+          post('/api/lab/devices', {}).then(function () { render(true); }).catch(alertError);
+        } });
+        var syncAllBtn = el('button', { text: 'sync all', onclick: function () {
+          var chain = Promise.resolve();
+          state.devices.forEach(function (d) { chain = chain.then(function () { return post('/api/lab/devices/' + d + '/sync', {}); }); });
+          chain.then(function () { return post('/api/lab/devices/' + state.devices[0] + '/sync', {}); })
+               .then(function () { render(true); }).catch(alertError);
+        } });
+        main.appendChild(el('div', { class: 'lab-top' }, [conv, addBtn, syncAllBtn]));
+
+        var devicesBox = el('div', { class: 'lab-devices' });
+        results[0].devices.forEach(function (d) { devicesBox.appendChild(deviceCard(d, results[0].collections)); });
+
+        var feedBox = el('div', { class: 'lab-feed' }, [
+          el('h3', { text: 'Live events' }),
+          el('div', { class: 'feed', id: 'feed' })
+        ]);
+        main.appendChild(el('div', { class: 'lab-grid' }, [devicesBox, feedBox]));
+        state.feed.slice(-200).forEach(appendFeedLine);
+      })
+      .catch(showError(qs('#main')));
+  }
+
+  function deviceCard(d, collections) {
+    var collection = collections[0];
+    var card = el('div', { class: 'device-card' + (d.connected ? '' : ' offline') });
+    card.appendChild(el('div', { class: 'device-head' }, [
+      el('span', { class: 'name ' + deviceColor(d.name), text: d.name }),
+      el('span', { class: 'node mono', text: shortNode(d.nodeId) }),
+      el('span', { class: 'badge ' + (d.connected ? 'ok' : 'bad'), text: d.connected ? 'online' : 'offline' }),
+      d.pendingOperations ? el('span', { class: 'badge neutral', text: d.pendingOperations + ' queued' }) : null,
+      el('span', { class: 'spacer' }),
+      el('button', { text: d.connected ? 'disconnect' : 'connect', onclick: function () {
+        post('/api/lab/devices/' + d.name + '/' + (d.connected ? 'disconnect' : 'connect'), {})
+          .then(function () { render(true); }).catch(alertError);
+      } }),
+      el('button', { text: 'sync', onclick: function () {
+        post('/api/lab/devices/' + d.name + '/sync', {}).then(function () { render(true); }).catch(alertError);
+      } })
+    ]));
+
+    var body = el('div', { class: 'device-body' });
+    card.appendChild(body);
+
+    // Chaos controls
+    body.appendChild(el('h5', { text: 'Network chaos (applies on next connect)' }));
+    var chaosDefs = [['dropRate', 'drop'], ['duplicateRate', 'duplicate'], ['reorderRate', 'reorder']];
+    chaosDefs.forEach(function (cd) {
+      var key = cd[0];
+      var valueLabel = el('span', { class: 'mono', text: String(d.chaos[key]) });
+      var range = el('input', { type: 'range', min: '0', max: '0.5', step: '0.05', value: String(d.chaos[key]) });
+      range.oninput = function () { valueLabel.textContent = range.value; };
+      range.onchange = function () {
+        var body2 = {}; body2[key] = Number(range.value);
+        post('/api/lab/devices/' + d.name + '/chaos', body2).catch(alertError);
+      };
+      body.appendChild(el('div', { class: 'chaos-row' }, [el('span', { text: cd[1] }), range, valueLabel]));
+    });
+
+    // Records with inline editing
+    body.appendChild(el('h5', { text: 'records (' + collection.name + ') \u2014 edits happen ON this device' }));
+    var recBox = el('div', {});
+    body.appendChild(recBox);
+    api('/api/collections/' + collection.name + '/records?limit=20&device=' + encodeURIComponent(d.name)).then(function (data) {
+      data.records.forEach(function (r) {
+        var titleInput = el('input', { type: 'text', value: String(r.fields.title || '') });
+        titleInput.onchange = function () {
+          post('/api/lab/devices/' + d.name + '/update', { collection: collection.name, id: r.id, data: { title: titleInput.value } }).catch(alertError);
+        };
+        var doneCb = el('input', { type: 'checkbox', title: 'done' });
+        doneCb.checked = !!r.fields.done;
+        doneCb.onchange = function () {
+          post('/api/lab/devices/' + d.name + '/update', { collection: collection.name, id: r.id, data: { done: doneCb.checked } }).catch(alertError);
+        };
+        var incBtn = el('button', { text: '+1', title: 'atomic increment \u2014 composes across devices', onclick: function () {
+          post('/api/lab/devices/' + d.name + '/update', { collection: collection.name, id: r.id, data: {}, increments: { points: 1 } })
+            .then(function () { debounceRefresh(); }).catch(alertError);
+        } });
+        var delBtn = el('button', { class: 'danger', text: '\u2715', title: 'delete', onclick: function () {
+          post('/api/lab/devices/' + d.name + '/delete', { collection: collection.name, id: r.id })
+            .then(function () { debounceRefresh(); }).catch(alertError);
+        } });
+        recBox.appendChild(el('div', { class: 'rec-line' }, [
+          doneCb, titleInput,
+          el('span', { class: 'pts mono', text: String(r.fields.points === undefined ? '' : r.fields.points) }),
+          incBtn, delBtn,
+          el('button', { text: '\u2315', title: 'inspect', onclick: function () { state.device = d.name; state.collection = collection.name; openRecord(r.id); } })
+        ]));
+      });
+      if (!data.records.length) recBox.appendChild(el('div', { class: 'empty', text: 'no records yet' }));
+    });
+
+    // Insert form
+    var newTitle = el('input', { type: 'text', placeholder: 'new task title\u2026' });
+    var insertBtn = el('button', { class: 'primary', text: 'insert', onclick: function () {
+      if (!newTitle.value.trim()) return;
+      post('/api/lab/devices/' + d.name + '/insert', { collection: collection.name, data: { title: newTitle.value.trim() } })
+        .then(function () { newTitle.value = ''; debounceRefresh(); }).catch(alertError);
+    } });
+    newTitle.addEventListener('keydown', function (e) { if (e.key === 'Enter') insertBtn.click(); });
+    body.appendChild(el('div', { class: 'insert-form' }, [newTitle, insertBtn]));
+    return card;
+  }
+
+  function appendFeedLine(event) {
+    var feed = qs('#feed');
+    if (!feed) return;
+    var cls = 'feed-line';
+    if (event.type === 'operation:created') cls += ' evt-created';
+    if (event.type === 'operation:applied') cls += ' evt-applied';
+    if (event.type === 'merge:conflict') cls += ' evt-conflict';
+    if (event.type === 'sync:apply-failed') cls += ' evt-failed';
+    feed.appendChild(el('div', { class: cls }, [
+      el('span', { class: 'mono', text: fmtTime(event.at) }),
+      el('span', { class: 'dev ' + deviceColor(event.device), text: event.device }),
+      el('span', { class: 'what', text: event.type.replace('operation:', '').replace('sync:', '') + ' \xB7 ' + event.summary })
+    ]));
+    feed.scrollTop = feed.scrollHeight;
+  }
+
+  // \u2500\u2500 Misc \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function showError(main) {
+    return function (e) { main.appendChild(el('div', { class: 'error', text: e.message })); };
+  }
+  function alertError(e) { console.error(e); qs('#dbpath').textContent = 'error: ' + e.message; }
+
+  qs('#refresh').onclick = function () { render(true); };
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeDrawer(); });
+})();
+`;
+
+// src/commands/studio/studio-ui-css.ts
+var STUDIO_CSS = `
+:root {
+  --bg: #0e1015; --panel: #161a22; --panel-2: #1c212c; --panel-3: #232936;
+  --border: #262c3a; --text: #e6e9f0; --muted: #8b93a7;
+  --accent: #4fd1c5; --accent-2: #9f7aea;
+  --insert: #48bb78; --update: #4299e1; --delete: #f56565; --warn: #ed8936;
+  --ok-bg: rgba(72,187,120,.12); --bad-bg: rgba(245,101,101,.12);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; }
+body {
+  background: var(--bg); color: var(--text); overflow: hidden;
+  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
+button {
+  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
+  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px;
+}
+button:hover { border-color: var(--accent); }
+button.primary { background: rgba(79,209,197,.12); border-color: var(--accent); color: var(--accent); }
+button.danger { color: var(--delete); }
+button:disabled { opacity: .4; cursor: default; }
+input, select {
+  background: var(--bg); color: var(--text); border: 1px solid var(--border);
+  border-radius: 6px; padding: 4px 8px; font-size: 13px;
+}
+input:focus, select:focus { outline: none; border-color: var(--accent); }
+input[type="checkbox"] { width: auto; }
+input[type="range"] { padding: 0; }
+
+header {
+  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
+  background: var(--panel); border-bottom: 1px solid var(--border); height: 48px;
+}
+header .logo { font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
+header .logo span { color: var(--accent); }
+header .modebadge {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px;
+  border-radius: 10px; background: rgba(159,122,234,.15); color: var(--accent-2);
+}
+header .dbpath { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+header .live { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
+header .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+header .live.on .dot { background: var(--insert); box-shadow: 0 0 8px rgba(72,187,120,.8); }
+
+.tabs { display: flex; gap: 2px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
+.tabs .tab {
+  padding: 8px 16px; cursor: pointer; color: var(--muted); font-size: 13px;
+  border-bottom: 2px solid transparent; user-select: none;
+}
+.tabs .tab:hover { color: var(--text); }
+.tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tabs .spacer { flex: 1; }
+.tabs .devicepick { display: flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--muted); font-size: 12px; }
+
+.layout { display: flex; height: calc(100vh - 85px); }
+nav.sidebar {
+  width: 220px; background: var(--panel); border-right: 1px solid var(--border);
+  padding: 12px 0; overflow-y: auto; flex-shrink: 0;
+}
+nav.sidebar h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 8px 16px 4px; }
+nav.sidebar .item {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 6px 16px; cursor: pointer; border-left: 2px solid transparent; font-size: 13px;
+}
+nav.sidebar .item:hover { background: var(--panel-2); }
+nav.sidebar .item.active { border-left-color: var(--accent); background: var(--panel-2); }
+nav.sidebar .item .count { color: var(--muted); font-size: 11px; }
+main { flex: 1; overflow: auto; padding: 16px 20px; }
+
+.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
+.toolbar h2 { font-size: 16px; margin-right: auto; }
+.toolbar label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
+
+table.grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+table.grid th, table.grid td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
+table.grid th { background: var(--panel-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; z-index: 1; }
+table.grid tbody tr.clickable { cursor: pointer; }
+table.grid tbody tr.clickable:hover { background: var(--panel-2); }
+tr.tombstone td { color: var(--muted); text-decoration: line-through; }
+
+.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
+.badge.insert { background: rgba(72,187,120,.15); color: var(--insert); }
+.badge.update { background: rgba(66,153,225,.15); color: var(--update); }
+.badge.delete { background: rgba(245,101,101,.15); color: var(--delete); }
+.badge.neutral { background: var(--panel-3); color: var(--muted); }
+.badge.ok { background: var(--ok-bg); color: var(--insert); }
+.badge.bad { background: var(--bad-bg); color: var(--delete); }
+
+.chip {
+  display: inline-flex; gap: 6px; align-items: center; background: var(--panel-2);
+  border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--muted);
+}
+.chip b { color: var(--accent-2); font-weight: 600; }
+
+.pager { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; }
+.empty { color: var(--muted); padding: 40px; text-align: center; }
+.error { color: var(--delete); padding: 20px; }
+
+.drawer {
+  position: fixed; top: 85px; right: 0; bottom: 0; width: 560px; max-width: 92vw;
+  background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto;
+  padding: 16px; box-shadow: -12px 0 30px rgba(0,0,0,.45); display: none; z-index: 20;
+}
+.drawer.open { display: block; }
+.drawer h3 { font-size: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
+.drawer h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 16px 0 8px; }
+.drawer .close { cursor: pointer; color: var(--muted); padding: 4px 8px; }
+.fieldrow { padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
+.fieldrow .fname { color: var(--accent); font-size: 12px; }
+.fieldrow .fval { word-break: break-word; margin: 2px 0 4px; }
+.fieldrow .preview { color: var(--muted); font-style: italic; }
+
+.op { border-left: 2px solid var(--border); margin-left: 6px; padding: 6px 0 6px 14px; position: relative; }
+.op::before { content: ""; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+.op.insert::before { background: var(--insert); } .op.update::before { background: var(--update); } .op.delete::before { background: var(--delete); }
+.op .meta { color: var(--muted); font-size: 11px; }
+.op pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-top: 4px; overflow-x: auto; }
+
+.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
+.panel h3 { font-size: 13px; margin-bottom: 8px; color: var(--accent); }
+
+/* DAG */
+.dagwrap { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; margin-bottom: 14px; }
+.dagwrap svg { display: block; }
+.dag-node { cursor: pointer; }
+.dag-node circle { stroke-width: 2; }
+.dag-node text { fill: var(--muted); font-size: 10px; font-family: ui-monospace, Menlo, monospace; }
+.dag-edge { stroke: #3a4356; stroke-width: 1.4; fill: none; marker-end: url(#arrow); }
+.dag-lane-label { fill: var(--accent-2); font-size: 11px; font-family: ui-monospace, Menlo, monospace; }
+.dag-lane-line { stroke: #1d2330; stroke-width: 1; }
+.dag-tip {
+  position: fixed; background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px;
+  padding: 6px 10px; font-size: 12px; pointer-events: none; z-index: 50; max-width: 380px; display: none;
+}
+
+/* Time travel */
+.tt-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
+.tt-controls input[type="range"] { flex: 1; }
+.tt-cut { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 12px; }
+
+/* Lab */
+.lab-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
+.convergence { padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; }
+.convergence.ok { background: var(--ok-bg); color: var(--insert); border: 1px solid rgba(72,187,120,.4); }
+.convergence.bad { background: var(--bad-bg); color: var(--delete); border: 1px solid rgba(245,101,101,.4); }
+.convergence .diffs { font-weight: 400; font-size: 11px; margin-top: 4px; color: var(--muted); }
+.lab-grid { display: flex; gap: 14px; align-items: flex-start; }
+.lab-devices { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 14px; }
+.device-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+.device-card.offline { border-color: rgba(245,101,101,.35); }
+.device-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel-2); }
+.device-head .name { font-weight: 700; }
+.device-head .node { color: var(--muted); font-size: 11px; }
+.device-head .spacer { flex: 1; }
+.device-body { padding: 10px 12px; }
+.device-body h5 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 10px 0 6px; }
+.chaos-row { display: grid; grid-template-columns: 78px 1fr 44px; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
+.rec-line { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid var(--border); font-size: 12px; flex-wrap: wrap; }
+.rec-line:hover { background: var(--panel-2); }
+.rec-line .title { flex: 1; min-width: 120px; }
+.rec-line input[type="text"] { font-size: 12px; padding: 2px 6px; width: 130px; }
+.rec-line .pts { color: var(--accent); min-width: 30px; text-align: right; }
+.insert-form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
+.insert-form input { flex: 1; min-width: 120px; }
+.lab-feed { width: 360px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
+.lab-feed h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
+.lab-feed .feed { overflow-y: auto; padding: 6px 0; flex: 1; }
+.feed-line { display: flex; gap: 8px; padding: 3px 12px; font-size: 11px; align-items: baseline; }
+.feed-line .dev { min-width: 66px; font-weight: 600; }
+.feed-line .what { color: var(--muted); }
+.feed-line.evt-created .what, .feed-line.evt-applied .what { color: var(--text); }
+.feed-line.evt-conflict .what { color: var(--warn); }
+.feed-line.evt-failed .what { color: var(--delete); font-weight: 700; }
+.dev-c0 { color: #4fd1c5; } .dev-c1 { color: #9f7aea; } .dev-c2 { color: #f6ad55; }
+.dev-c3 { color: #63b3ed; } .dev-c4 { color: #f687b3; } .dev-c5 { color: #68d391; }
+`;
+
+// src/commands/studio/studio-server.ts
+var SSE_POLL_MS = 700;
+async function startStudioServer(options) {
+  const host = options.host ?? "127.0.0.1";
+  const dbPath = options.spectator ? options.spectator.dbPath : options.dbPath;
+  const context = {
+    mode: options.spectator ? "spectator" : options.lab ? "lab" : "file",
+    lab: options.lab ?? null,
+    spectator: options.spectator ?? null,
+    mainReader: dbPath ? await StudioDbReader.open(dbPath) : null,
+    deviceReaders: /* @__PURE__ */ new Map()
+  };
+  const sseClients = /* @__PURE__ */ new Set();
+  const broadcast = (event, data) => {
+    const payload = `event: ${event}
+data: ${JSON.stringify(data)}
+
+`;
+    for (const client of sseClients) {
+      client.write(payload);
+    }
+  };
+  let unsubscribeSpectator = null;
+  if (context.spectator) {
+    unsubscribeSpectator = context.spectator.onEvent((event) => {
+      broadcast("spectator", event);
+      broadcast("change", { at: event.at });
+    });
+  }
+  let pollTimer = null;
+  if (context.mode === "file" && context.mainReader) {
+    let lastFingerprint = context.mainReader.fingerprint();
+    pollTimer = setInterval(() => {
+      try {
+        const current = context.mainReader?.fingerprint();
+        if (current !== void 0 && current !== lastFingerprint) {
+          lastFingerprint = current;
+          broadcast("change", { at: Date.now() });
+        }
+      } catch {
+      }
+    }, SSE_POLL_MS);
+  }
+  let unsubscribeLab = null;
+  if (context.lab) {
+    unsubscribeLab = context.lab.onEvent((event) => {
+      broadcast("lab", event);
+      broadcast("change", { at: event.at });
+    });
+  }
+  const server = createServer((req, res) => {
+    handleRequest(context, sseClients, req, res).catch((error) => {
+      const message = error instanceof Error ? error.message : "Internal error";
+      if (!res.headersSent) {
+        sendJson(res, 500, { error: message });
+      } else {
+        res.end();
+      }
+    });
+  });
+  await new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(options.port, host, () => {
+      server.removeListener("error", reject);
+      resolve();
+    });
+  });
+  const address = server.address();
+  const port = typeof address === "object" && address !== null ? address.port : options.port;
+  return {
+    server,
+    port,
+    url: `http://${host}:${port}`,
+    close: async () => {
+      if (pollTimer) {
+        clearInterval(pollTimer);
+      }
+      unsubscribeSpectator?.();
+      unsubscribeLab?.();
+      for (const client of sseClients) {
+        client.end();
+      }
+      sseClients.clear();
+      context.mainReader?.close();
+      for (const [, reader] of context.deviceReaders) {
+        reader.close();
+      }
+      context.deviceReaders.clear();
+      await new Promise((resolve, reject) => {
+        server.close((error) => error ? reject(error) : resolve());
+      });
+    }
+  };
+}
+async function resolveReader(context, url) {
+  const device = url.searchParams.get("device");
+  if (device && context.lab) {
+    const cached = context.deviceReaders.get(device);
+    if (cached) {
+      return cached;
+    }
+    const state = context.lab.deviceState(device);
+    const reader = await StudioDbReader.open(state.dbPath);
+    context.deviceReaders.set(device, reader);
+    return reader;
+  }
+  if (context.mainReader) {
+    return context.mainReader;
+  }
+  if (context.lab) {
+    const first = context.lab.listDevices()[0];
+    if (first) {
+      return resolveReader(context, new URL(`${url.origin}${url.pathname}?device=${first.name}`));
+    }
+  }
+  throw new Error("No database available");
+}
+async function handleRequest(context, sseClients, req, res) {
+  const url = new URL(req.url ?? "/", "http://studio.local");
+  const path = url.pathname;
+  const method = req.method ?? "GET";
+  if (method === "GET" && (path === "/" || path === "/index.html")) {
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+    res.end(STUDIO_HTML);
+    return;
+  }
+  if (method === "GET" && path === "/app.js") {
+    res.writeHead(200, { "content-type": "text/javascript; charset=utf-8" });
+    res.end(STUDIO_APP_JS);
+    return;
+  }
+  if (method === "GET" && path === "/style.css") {
+    res.writeHead(200, { "content-type": "text/css; charset=utf-8" });
+    res.end(STUDIO_CSS);
+    return;
+  }
+  if (method === "GET" && path === "/api/events") {
+    res.writeHead(200, {
+      "content-type": "text/event-stream",
+      "cache-control": "no-store",
+      connection: "keep-alive"
+    });
+    res.write(`event: hello
+data: ${JSON.stringify({ mode: context.mode })}
+
+`);
+    if (context.lab) {
+      for (const event of context.lab.recentEvents().slice(-100)) {
+        res.write(`event: lab
+data: ${JSON.stringify(event)}
+
+`);
+      }
+    }
+    if (context.spectator) {
+      for (const event of context.spectator.recentEvents().slice(-100)) {
+        res.write(`event: spectator
+data: ${JSON.stringify(event)}
+
+`);
+      }
+    }
+    sseClients.add(res);
+    req.on("close", () => {
+      sseClients.delete(res);
+    });
+    return;
+  }
+  if (path.startsWith("/api/lab")) {
+    if (!context.lab) {
+      sendJson(res, 404, {
+        error: "Studio is not running in lab mode. Start with: kora studio --lab"
+      });
+      return;
+    }
+    await handleLabRoute(context, context.lab, req, res, url);
+    return;
+  }
+  if (method !== "GET") {
+    sendJson(res, 405, { error: "Studio data routes are read-only: GET only." });
+    return;
+  }
+  if (path === "/api/mode") {
+    sendJson(res, 200, {
+      mode: context.mode,
+      devices: context.lab?.listDevices().map((d) => d.name) ?? [],
+      ...context.spectator ? { spectator: context.spectator.status() } : {}
+    });
+    return;
+  }
+  if (path === "/api/spectator/status") {
+    if (!context.spectator) {
+      sendJson(res, 404, { error: "Not in spectator mode" });
+      return;
+    }
+    sendJson(res, 200, context.spectator.status());
+    return;
+  }
+  if (path === "/api/overview") {
+    const reader = await resolveReader(context, url);
+    sendJson(res, 200, reader.overview());
+    return;
+  }
+  if (path === "/api/audit") {
+    const reader = await resolveReader(context, url);
+    sendJson(res, 200, { traces: reader.auditTraces(intParam(url, "limit") ?? 100) });
+    return;
+  }
+  const collectionMatch = path.match(
+    /^\/api\/collections\/([a-zA-Z0-9_]+)\/(records|ops|replay|dag)(?:\/([^/]+))?(?:\/(ops))?$/
+  );
+  if (collectionMatch) {
+    const [, collection, kind, recordId, sub] = collectionMatch;
+    if (!collection || !kind) {
+      sendJson(res, 400, { error: "Bad request" });
+      return;
+    }
+    const reader = await resolveReader(context, url);
+    if (!reader.listCollections().includes(collection)) {
+      sendJson(res, 404, { error: `Unknown collection "${collection}"` });
+      return;
+    }
+    if (kind === "replay") {
+      const ops = reader.allOperations(collection);
+      const upTo = url.searchParams.get("upTo");
+      sendJson(res, 200, replayToOperation(ops, upTo));
+      return;
+    }
+    if (kind === "dag") {
+      const record = url.searchParams.get("record");
+      const limit = intParam(url, "limit") ?? 200;
+      let ops = reader.allOperations(collection);
+      if (record) {
+        ops = ops.filter((o) => o.recordId === record);
+      } else {
+        ops = ops.slice(-limit);
+      }
+      sendJson(res, 200, buildCausalDag(ops));
+      return;
+    }
+    if (kind === "ops") {
+      sendJson(
+        res,
+        200,
+        reader.operations(collection, {
+          limit: intParam(url, "limit"),
+          offset: intParam(url, "offset")
+        })
+      );
+      return;
+    }
+    if (recordId && sub === "ops") {
+      sendJson(res, 200, { operations: reader.recordOperations(collection, recordId) });
+      return;
+    }
+    if (recordId) {
+      const record = reader.record(collection, recordId);
+      if (!record) {
+        sendJson(res, 404, { error: `Record "${recordId}" not found` });
+        return;
+      }
+      const richtextPreviews = await decodeRichtextFields(
+        reader,
+        collection,
+        recordId,
+        record.fields
+      );
+      sendJson(res, 200, {
+        record,
+        richtextPreviews,
+        operations: reader.recordOperations(collection, recordId)
+      });
+      return;
+    }
+    sendJson(
+      res,
+      200,
+      reader.records(collection, {
+        limit: intParam(url, "limit"),
+        offset: intParam(url, "offset"),
+        includeDeleted: url.searchParams.get("includeDeleted") === "true",
+        search: url.searchParams.get("search") ?? void 0
+      })
+    );
+    return;
+  }
+  sendJson(res, 404, { error: `No route for ${path}` });
+}
+async function handleLabRoute(context, lab, req, res, url) {
+  const path = url.pathname;
+  const method = req.method ?? "GET";
+  if (method === "GET" && path === "/api/lab/state") {
+    const schema = lab.getSchema();
+    sendJson(res, 200, {
+      devices: lab.listDevices(),
+      serverOperations: lab.serverOperationCount(),
+      collections: Object.entries(schema.collections).map(([name, def]) => ({
+        name,
+        fields: Object.entries(def.fields).map(([fieldName, descriptor]) => ({
+          name: fieldName,
+          kind: descriptor.kind,
+          optional: !descriptor.required,
+          enumValues: descriptor.enumValues ?? null,
+          defaultValue: descriptor.defaultValue ?? null
+        }))
+      }))
+    });
+    return;
+  }
+  if (method === "GET" && path === "/api/lab/convergence") {
+    sendJson(res, 200, await lab.convergence());
+    return;
+  }
+  if (method !== "POST") {
+    sendJson(res, 405, { error: "POST required" });
+    return;
+  }
+  const body = await readJsonBody(req);
+  if (path === "/api/lab/devices") {
+    const state = await lab.addDevice(typeof body.name === "string" ? body.name : void 0);
+    sendJson(res, 200, state);
+    return;
+  }
+  const deviceMatch = path.match(
+    /^\/api\/lab\/devices\/([a-zA-Z0-9_-]+)\/(connect|disconnect|sync|chaos|insert|update|delete)$/
+  );
+  if (!deviceMatch) {
+    sendJson(res, 404, { error: `No lab route for ${path}` });
+    return;
+  }
+  const [, device, action] = deviceMatch;
+  if (!device || !action) {
+    sendJson(res, 400, { error: "Bad request" });
+    return;
+  }
+  switch (action) {
+    case "connect":
+      await lab.connect(device);
+      break;
+    case "disconnect": {
+      await lab.disconnect(device);
+      break;
+    }
+    case "sync":
+      await lab.sync(device);
+      break;
+    case "chaos":
+      sendJson(
+        res,
+        200,
+        lab.setChaos(device, body)
+      );
+      return;
+    case "insert": {
+      const record = await lab.insert(
+        device,
+        String(body.collection ?? ""),
+        body.data ?? {}
+      );
+      sendJson(res, 200, { record });
+      return;
+    }
+    case "update": {
+      const record = await lab.update(
+        device,
+        String(body.collection ?? ""),
+        String(body.id ?? ""),
+        body.data ?? {},
+        body.increments ?? void 0
+      );
+      sendJson(res, 200, { record });
+      return;
+    }
+    case "delete":
+      await lab.delete(device, String(body.collection ?? ""), String(body.id ?? ""));
+      break;
+  }
+  sendJson(res, 200, { ok: true, device: lab.deviceState(device) });
+}
+async function decodeRichtextFields(reader, collection, recordId, fields) {
+  const previews = {};
+  const binaryFields = Object.entries(fields).filter(
+    ([, value]) => typeof value === "string" && value.startsWith("<binary ")
+  );
+  if (binaryFields.length === 0) {
+    return previews;
+  }
+  let toPlainText = null;
+  try {
+    const storePkg = await import("@korajs/store");
+    toPlainText = storePkg.richtextToPlainText ?? null;
+  } catch {
+    return previews;
+  }
+  if (!toPlainText) {
+    return previews;
+  }
+  for (const [field] of binaryFields) {
+    try {
+      const raw = reader.rawFieldValue(collection, recordId, field);
+      if (raw instanceof Uint8Array || Buffer.isBuffer(raw)) {
+        previews[field] = toPlainText(new Uint8Array(raw));
+      }
+    } catch {
+    }
+  }
+  return previews;
+}
+async function readJsonBody(req) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of req) {
+    size += chunk.length;
+    if (size > 256 * 1024) {
+      throw new Error("Request body too large");
+    }
+    chunks.push(chunk);
+  }
+  if (chunks.length === 0) {
+    return {};
+  }
+  try {
+    return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+  } catch {
+    throw new Error("Invalid JSON body");
+  }
+}
+function intParam(url, name) {
+  const raw = url.searchParams.get(name);
+  if (raw === null) {
+    return void 0;
+  }
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+}
+function sendJson(res, status, body) {
+  res.writeHead(status, {
+    "content-type": "application/json; charset=utf-8",
+    "cache-control": "no-store"
+  });
+  res.end(JSON.stringify(body));
+}
+export {
+  startStudioServer
+};
+//# sourceMappingURL=studio-server-NIFKZI4F.js.map