@korajs/devtools 0.4.0 → 0.5.0

package/dist/overlay.cjs

@@ -0,0 +1,884 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/overlay/embed-overlay.ts
+var embed_overlay_exports = {};
+__export(embed_overlay_exports, {
+  mountKoraDevtoolsOverlay: () => mountKoraDevtoolsOverlay
+});
+module.exports = __toCommonJS(embed_overlay_exports);
+
+// src/ui/panel.ts
+var import_htm = __toESM(require("htm"), 1);
+var import_preact = require("preact");
+var import_hooks = require("preact/hooks");
+
+// src/types.ts
+var EVENT_TYPE_CATEGORIES = {
+  "operation:created": "operation",
+  "operation:applied": "operation",
+  "merge:started": "merge",
+  "merge:completed": "merge",
+  "merge:conflict": "merge",
+  "constraint:violated": "merge",
+  "sync:connected": "sync",
+  "sync:disconnected": "sync",
+  "sync:auth-failed": "sync",
+  "sync:schema-mismatch": "sync",
+  "sync:apply-failed": "sync",
+  "sync:sent": "sync",
+  "sync:received": "sync",
+  "sync:acknowledged": "sync",
+  "query:subscribed": "query",
+  "query:invalidated": "query",
+  "query:executed": "query",
+  "connection:quality": "connection",
+  "sync:diagnostics": "sync",
+  "sync:bandwidth": "sync",
+  "sync:initial-sync-progress": "sync",
+  "awareness:updated": "sync",
+  "state-machine:transition": "operation",
+  "state-machine:rejected": "operation",
+  "store:persistence-error": "connection",
+  "store:quota-exceeded": "connection",
+  "replay:completed": "operation"
+};
+function eventTypeToCategory(type) {
+  return EVENT_TYPE_CATEGORIES[type];
+}
+
+// src/filter/event-filter.ts
+function extractCollection(event) {
+  const e = event.event;
+  switch (e.type) {
+    case "operation:created":
+    case "operation:applied":
+      return e.operation.collection;
+    case "merge:started":
+      return e.operationA.collection;
+    case "merge:completed":
+    case "merge:conflict":
+      return e.trace.operationA.collection;
+    case "constraint:violated":
+      return e.trace.operationA.collection;
+    case "query:subscribed":
+      return e.collection;
+    case "query:invalidated":
+      return e.trigger.collection;
+    case "sync:sent":
+      return e.operations[0]?.collection ?? null;
+    case "sync:received":
+      return e.operations[0]?.collection ?? null;
+    default:
+      return null;
+  }
+}
+function filterEvents(events, criteria) {
+  const { categories, types, timeRange, collection } = criteria;
+  if (!categories && !types && !timeRange && !collection) {
+    return events;
+  }
+  const categorySet = categories ? new Set(categories) : null;
+  const typeSet = types ? new Set(types) : null;
+  return events.filter((event) => {
+    if (categorySet) {
+      const cat = eventTypeToCategory(event.event.type);
+      if (!categorySet.has(cat)) return false;
+    }
+    if (typeSet) {
+      if (!typeSet.has(event.event.type)) return false;
+    }
+    if (timeRange) {
+      if (event.receivedAt < timeRange.start || event.receivedAt > timeRange.end) {
+        return false;
+      }
+    }
+    if (collection) {
+      const eventCollection = extractCollection(event);
+      if (eventCollection !== collection) return false;
+    }
+    return true;
+  });
+}
+
+// src/stats/event-stats.ts
+function computeStatistics(events) {
+  const eventsByCategory = {
+    operation: 0,
+    merge: 0,
+    sync: 0,
+    query: 0,
+    connection: 0
+  };
+  const eventsByType = {};
+  let mergeConflicts = 0;
+  let constraintViolations = 0;
+  let mergeDurationSum = 0;
+  let mergeDurationCount = 0;
+  let queryDurationSum = 0;
+  let queryDurationCount = 0;
+  let syncOperationsSent = 0;
+  let syncOperationsReceived = 0;
+  for (const timestamped of events) {
+    const e = timestamped.event;
+    const category = eventTypeToCategory(e.type);
+    eventsByCategory[category]++;
+    eventsByType[e.type] = (eventsByType[e.type] ?? 0) + 1;
+    switch (e.type) {
+      case "merge:completed":
+        mergeDurationSum += e.trace.duration;
+        mergeDurationCount++;
+        break;
+      case "merge:conflict":
+        mergeConflicts++;
+        mergeDurationSum += e.trace.duration;
+        mergeDurationCount++;
+        break;
+      case "constraint:violated":
+        constraintViolations++;
+        break;
+      case "query:executed":
+        queryDurationSum += e.duration;
+        queryDurationCount++;
+        break;
+      case "sync:sent":
+        syncOperationsSent += e.batchSize;
+        break;
+      case "sync:received":
+        syncOperationsReceived += e.batchSize;
+        break;
+    }
+  }
+  return {
+    totalEvents: events.length,
+    eventsByCategory,
+    eventsByType,
+    mergeConflicts,
+    constraintViolations,
+    avgMergeDuration: mergeDurationCount > 0 ? mergeDurationSum / mergeDurationCount : null,
+    avgQueryDuration: queryDurationCount > 0 ? queryDurationSum / queryDurationCount : null,
+    syncOperationsSent,
+    syncOperationsReceived
+  };
+}
+
+// src/ui/components.ts
+function formatTime(timestamp) {
+  const d = new Date(timestamp);
+  const h2 = String(d.getHours()).padStart(2, "0");
+  const m = String(d.getMinutes()).padStart(2, "0");
+  const s = String(d.getSeconds()).padStart(2, "0");
+  const ms = String(d.getMilliseconds()).padStart(3, "0");
+  return `${h2}:${m}:${s}.${ms}`;
+}
+function truncate(str, max) {
+  if (str.length <= max) return str;
+  return `${str.slice(0, max - 1)}\u2026`;
+}
+function formatValue(value) {
+  if (value === null || value === void 0) return "null";
+  if (typeof value === "string") return `"${value}"`;
+  if (typeof value === "object") return JSON.stringify(value, null, 2);
+  return String(value);
+}
+
+// src/ui/panel-state.ts
+function buildPanelModel(events) {
+  const timeline = events.map((entry) => ({
+    id: entry.id,
+    type: entry.event.type,
+    label: timelineLabel(entry.event),
+    color: timelineColor(entry.event.type),
+    receivedAt: entry.receivedAt,
+    dependsOn: extractCausalDependencies(entry.event)
+  }));
+  const conflicts = events.flatMap((entry) => {
+    if (entry.event.type !== "merge:completed" && entry.event.type !== "merge:conflict" && entry.event.type !== "constraint:violated") {
+      return [];
+    }
+    const trace = entry.event.trace;
+    return [
+      {
+        id: entry.id,
+        timestamp: entry.receivedAt,
+        collection: trace.operationA.collection,
+        field: trace.field,
+        strategy: trace.strategy,
+        tier: trace.tier,
+        inputA: trace.inputA,
+        inputB: trace.inputB,
+        output: trace.output,
+        constraintViolated: trace.constraintViolated
+      }
+    ];
+  });
+  const operations = events.map((entry) => {
+    const operation = extractOperation(entry.event);
+    if (!operation) return null;
+    return {
+      id: entry.id,
+      timestamp: entry.receivedAt,
+      operationId: operation.id,
+      collection: operation.collection,
+      recordId: operation.recordId,
+      opType: operation.type,
+      data: operation.data,
+      causalDeps: operation.causalDeps,
+      nodeId: operation.nodeId,
+      sequenceNumber: operation.sequenceNumber
+    };
+  }).filter((item) => item !== null);
+  const network = buildNetworkStatus(events, operations);
+  return {
+    timeline,
+    conflicts,
+    operations,
+    network
+  };
+}
+function buildNetworkStatus(events, operations) {
+  let connected = false;
+  let quality = null;
+  let pendingAcks = 0;
+  let lastSyncAt = null;
+  let sentOps = 0;
+  let receivedOps = 0;
+  for (const entry of events) {
+    switch (entry.event.type) {
+      case "sync:connected":
+        connected = true;
+        lastSyncAt = entry.receivedAt;
+        break;
+      case "sync:disconnected":
+        connected = false;
+        break;
+      case "connection:quality":
+        quality = entry.event.quality;
+        break;
+      case "sync:sent":
+        sentOps += entry.event.operations.length;
+        pendingAcks += entry.event.operations.length;
+        lastSyncAt = entry.receivedAt;
+        break;
+      case "sync:received":
+        receivedOps += entry.event.operations.length;
+        lastSyncAt = entry.receivedAt;
+        break;
+      case "sync:acknowledged":
+        pendingAcks = Math.max(0, pendingAcks - 1);
+        lastSyncAt = entry.receivedAt;
+        break;
+    }
+  }
+  const vector = /* @__PURE__ */ new Map();
+  for (const operation of operations) {
+    const current = vector.get(operation.nodeId) ?? 0;
+    if (operation.sequenceNumber > current) {
+      vector.set(operation.nodeId, operation.sequenceNumber);
+    }
+  }
+  return {
+    connected,
+    quality,
+    pendingAcks,
+    lastSyncAt,
+    sentOps,
+    receivedOps,
+    versionVector: [...vector.entries()].map(([nodeId, sequenceNumber]) => ({ nodeId, sequenceNumber })).sort((left, right) => left.nodeId.localeCompare(right.nodeId))
+  };
+}
+function timelineLabel(event) {
+  switch (event.type) {
+    case "operation:created":
+    case "operation:applied":
+      return `${event.operation.type} ${event.operation.collection}/${event.operation.recordId}`;
+    case "merge:started":
+      return `merge start ${event.operationA.collection}`;
+    case "merge:completed":
+      return `merge complete ${event.trace.field}`;
+    case "merge:conflict":
+      return `merge conflict ${event.trace.field}`;
+    case "constraint:violated":
+      return `constraint ${event.constraint}`;
+    case "sync:connected":
+      return `sync connected ${event.nodeId}`;
+    case "sync:disconnected":
+      return "sync disconnected";
+    case "sync:auth-failed":
+      return "sync auth failed";
+    case "sync:schema-mismatch":
+      return `schema mismatch client ${event.clientSchemaVersion} server ${event.serverSchemaVersion}`;
+    case "sync:apply-failed":
+      return `sync apply failed ${event.operationId}`;
+    case "sync:sent":
+      return `sync sent ${event.batchSize}`;
+    case "sync:received":
+      return `sync received ${event.batchSize}`;
+    case "sync:acknowledged":
+      return `sync ack ${event.sequenceNumber}`;
+    case "query:subscribed":
+      return `query subscribed ${event.collection}`;
+    case "query:invalidated":
+      return `query invalidated ${event.queryId}`;
+    case "query:executed":
+      return `query executed ${event.queryId}`;
+    case "connection:quality":
+      return `connection ${event.quality}`;
+    case "sync:diagnostics":
+      return `sync diagnostics ${event.diagnostics.quality}`;
+    case "sync:bandwidth":
+      return `bandwidth ${event.direction} ${event.bytesPerSecond}B/s`;
+    case "sync:initial-sync-progress":
+      return `initial sync ${Math.round(event.progress * 100)}%`;
+    case "awareness:updated":
+      return `awareness ${event.states.size} peers`;
+    case "state-machine:transition":
+      return `transition ${event.collection} ${event.from} \u2192 ${event.to}`;
+    case "state-machine:rejected":
+      return `transition rejected ${event.collection} ${event.from} \u2192 ${event.to}`;
+    case "store:persistence-error":
+      return `store persistence error ${event.message}`;
+    case "store:quota-exceeded":
+      return "store quota exceeded";
+    case "replay:completed":
+      return `replay ${event.operationsApplied} ops`;
+  }
+}
+function timelineColor(type) {
+  if (type.startsWith("operation:")) return "#22c55e";
+  if (type.startsWith("sync:")) return "#a855f7";
+  if (type.startsWith("merge:") || type.startsWith("constraint:")) return "#f59e0b";
+  if (type.startsWith("query:")) return "#0ea5e9";
+  return "#64748b";
+}
+function extractCausalDependencies(event) {
+  const operation = extractOperation(event);
+  return operation?.causalDeps ?? [];
+}
+function extractOperation(event) {
+  switch (event.type) {
+    case "operation:created":
+    case "operation:applied":
+      return event.operation;
+    case "query:invalidated":
+      return event.trigger;
+    default:
+      return null;
+  }
+}
+
+// src/ui/panel.ts
+var html = import_htm.default.bind(import_preact.h);
+var ALL_CATEGORIES = ["operation", "merge", "sync", "query", "connection"];
+function DevToolsPanel({ events }) {
+  const [activeTab, setActiveTab] = (0, import_hooks.useState)("timeline");
+  const [search, setSearch] = (0, import_hooks.useState)("");
+  const [categories, setCategories] = (0, import_hooks.useState)(() => new Set(ALL_CATEGORIES));
+  const [expanded, setExpanded] = (0, import_hooks.useState)(() => /* @__PURE__ */ new Set());
+  const [paused, setPaused] = (0, import_hooks.useState)(false);
+  const toggleCategory = (0, import_hooks.useCallback)((cat) => {
+    setCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(cat)) next.delete(cat);
+      else next.add(cat);
+      return next;
+    });
+  }, []);
+  const toggleExpand = (0, import_hooks.useCallback)((id) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const filtered = (0, import_hooks.useMemo)(
+    () => filterEvents(events, { categories: [...categories] }),
+    [events, categories]
+  );
+  const model = (0, import_hooks.useMemo)(() => buildPanelModel(filtered), [filtered]);
+  const stats = (0, import_hooks.useMemo)(() => computeStatistics(events), [events]);
+  return html`
+		<div class="kora-devtools">
+			<${Toolbar}
+				activeTab=${activeTab}
+				onTabChange=${setActiveTab}
+				totalEvents=${events.length}
+				conflicts=${stats.mergeConflicts}
+				search=${search}
+				onSearchChange=${setSearch}
+				paused=${paused}
+				onPauseToggle=${() => setPaused((p) => !p)}
+				onClear=${() => setExpanded(/* @__PURE__ */ new Set())}
+				categories=${categories}
+				onToggleCategory=${toggleCategory}
+			/>
+			<div class="kora-content">
+				${activeTab === "timeline" && html`<${TimelinePanel}
+					items=${model.timeline}
+					search=${search}
+					expanded=${expanded}
+					onToggle=${toggleExpand}
+				/>`}
+				${activeTab === "conflicts" && html`<${ConflictsPanel}
+					items=${model.conflicts}
+					search=${search}
+					expanded=${expanded}
+					onToggle=${toggleExpand}
+				/>`}
+				${activeTab === "operations" && html`<${OperationsPanel}
+					items=${model.operations}
+					search=${search}
+					expanded=${expanded}
+					onToggle=${toggleExpand}
+				/>`}
+				${activeTab === "network" && html`<${NetworkPanel} network=${model.network} events=${events} />`}
+			</div>
+		</div>
+	`;
+}
+function Toolbar({
+  activeTab,
+  onTabChange,
+  totalEvents,
+  conflicts,
+  search,
+  onSearchChange,
+  paused,
+  onPauseToggle,
+  onClear,
+  categories,
+  onToggleCategory
+}) {
+  const tabs = [
+    { id: "timeline", label: "Timeline", badge: totalEvents },
+    { id: "conflicts", label: "Conflicts", badge: conflicts },
+    { id: "operations", label: "Operations" },
+    { id: "network", label: "Network" }
+  ];
+  return html`
+		<div class="kora-toolbar">
+			<div class="kora-tabs">
+				${tabs.map(
+    (tab) => html`
+						<button
+							class="kora-tab${activeTab === tab.id ? " active" : ""}"
+							onClick=${() => onTabChange(tab.id)}
+						>
+							${tab.label}
+							${tab.badge != null && tab.badge > 0 ? html`<span class="kora-badge">${tab.badge}</span>` : null}
+						</button>
+					`
+  )}
+			</div>
+			<div class="kora-controls">
+				<input
+					type="text"
+					class="kora-search"
+					placeholder="Filter..."
+					value=${search}
+					onInput=${(e) => onSearchChange(e.target.value)}
+				/>
+				<button class="kora-btn" onClick=${onPauseToggle}>
+					${paused ? "Resume" : "Pause"}
+				</button>
+				<button class="kora-btn" onClick=${onClear}>Clear</button>
+				${ALL_CATEGORIES.map(
+    (cat) => html`
+						<button
+							class="kora-cat-toggle${categories.has(cat) ? " active" : ""}"
+							onClick=${() => onToggleCategory(cat)}
+						>
+							${cat}
+						</button>
+					`
+  )}
+			</div>
+		</div>
+	`;
+}
+function TimelinePanel({
+  items,
+  search,
+  expanded,
+  onToggle
+}) {
+  const lowerSearch = search.toLowerCase();
+  const filtered = lowerSearch ? items.filter(
+    (i) => i.label.toLowerCase().includes(lowerSearch) || i.type.toLowerCase().includes(lowerSearch)
+  ) : items;
+  const visible = filtered.slice(-200).reverse();
+  if (visible.length === 0) {
+    return html`<div class="kora-panel"><div class="kora-empty">No events recorded yet.</div></div>`;
+  }
+  return html`
+		<div class="kora-panel kora-timeline">
+			<div class="kora-summary">Showing ${visible.length} of ${items.length} events</div>
+			<div class="kora-event-list">
+				${visible.map(
+    (item) => html`
+						<div
+							key=${item.id}
+							class="kora-row${expanded.has(item.id) ? " expanded" : ""}"
+							onClick=${() => onToggle(item.id)}
+						>
+							<span class="kora-time">${formatTime(item.receivedAt)}</span>
+							<span class="kora-dot" style="background:${item.color}"></span>
+							<span class="kora-type">${item.type}</span>
+							<span class="kora-label">${item.label}</span>
+							${item.dependsOn.length > 0 ? html`<span class="kora-deps">deps: ${item.dependsOn.length}</span>` : null}
+						</div>
+						${expanded.has(item.id) ? html`
+									<div class="kora-detail">
+										<div>
+											<span class="kora-detail-label">Event ID:</span> ${item.id}
+										</div>
+										<div>
+											<span class="kora-detail-label">Received:</span>
+											${new Date(item.receivedAt).toISOString()}
+										</div>
+										${item.dependsOn.length > 0 ? html`<div>
+													<span class="kora-detail-label">Causal deps:</span>
+													${item.dependsOn.join(", ")}
+												</div>` : null}
+									</div>
+								` : null}
+					`
+  )}
+			</div>
+		</div>
+	`;
+}
+function ConflictsPanel({
+  items,
+  search,
+  expanded,
+  onToggle
+}) {
+  const lowerSearch = search.toLowerCase();
+  const filtered = lowerSearch ? items.filter(
+    (i) => i.collection.toLowerCase().includes(lowerSearch) || i.field.toLowerCase().includes(lowerSearch) || i.strategy.toLowerCase().includes(lowerSearch)
+  ) : items;
+  const visible = filtered.slice(-100).reverse();
+  if (visible.length === 0) {
+    return html`<div class="kora-panel"><div class="kora-empty">No merge conflicts detected.</div></div>`;
+  }
+  return html`
+		<div class="kora-panel kora-conflicts">
+			<div class="kora-summary">
+				${items.length} conflict${items.length !== 1 ? "s" : ""}
+			</div>
+			<table class="kora-table">
+				<thead>
+					<tr>
+						<th>Time</th>
+						<th>Collection</th>
+						<th>Field</th>
+						<th>Strategy</th>
+						<th>Tier</th>
+						<th>Result</th>
+					</tr>
+				</thead>
+				<tbody>
+					${visible.map(
+    (item) => html`
+							<tr
+								key=${item.id}
+								class="kora-conflict-row${item.constraintViolated ? " violated" : ""}${expanded.has(item.id) ? " expanded" : ""}"
+								onClick=${() => onToggle(item.id)}
+							>
+								<td>${formatTime(item.timestamp)}</td>
+								<td>${item.collection}</td>
+								<td class="kora-mono">${item.field}</td>
+								<td>
+									<span class="kora-strategy tier-${item.tier}">${item.strategy}</span>
+								</td>
+								<td>${item.tier}</td>
+								<td class="kora-mono">${truncate(String(item.output), 30)}</td>
+							</tr>
+							${expanded.has(item.id) ? html`
+										<tr class="kora-detail-row">
+											<td colspan="6">
+												<div class="kora-conflict-detail">
+													<div class="kora-comparison">
+														<div class="kora-value-box">
+															<div class="kora-value-label">Input A (local)</div>
+															<pre class="kora-value-code">
+${formatValue(item.inputA)}</pre
+															>
+														</div>
+														<div class="kora-value-box">
+															<div class="kora-value-label">Input B (remote)</div>
+															<pre class="kora-value-code">
+${formatValue(item.inputB)}</pre
+															>
+														</div>
+														<div class="kora-value-box result">
+															<div class="kora-value-label">Result</div>
+															<pre class="kora-value-code">
+${formatValue(item.output)}</pre
+															>
+														</div>
+													</div>
+													${item.constraintViolated ? html`<div class="kora-constraint-warning">
+																Constraint violated: ${item.constraintViolated}
+															</div>` : null}
+												</div>
+											</td>
+										</tr>
+									` : null}
+						`
+  )}
+				</tbody>
+			</table>
+		</div>
+	`;
+}
+function OperationsPanel({
+  items,
+  search,
+  expanded,
+  onToggle
+}) {
+  const lowerSearch = search.toLowerCase();
+  const filtered = lowerSearch ? items.filter(
+    (i) => i.collection.toLowerCase().includes(lowerSearch) || i.recordId.toLowerCase().includes(lowerSearch) || i.operationId.toLowerCase().includes(lowerSearch) || i.opType.toLowerCase().includes(lowerSearch)
+  ) : items;
+  const visible = filtered.slice(-200).reverse();
+  if (visible.length === 0) {
+    return html`<div class="kora-panel"><div class="kora-empty">No operations recorded yet.</div></div>`;
+  }
+  return html`
+		<div class="kora-panel kora-operations">
+			<div class="kora-summary">
+				Showing ${visible.length} of ${items.length} operations
+			</div>
+			<div class="kora-op-list">
+				${visible.map(
+    (item) => html`
+						<div
+							key=${item.id}
+							class="kora-op-row${expanded.has(item.id) ? " expanded" : ""}"
+							onClick=${() => onToggle(item.id)}
+						>
+							<span class="kora-time">${formatTime(item.timestamp)}</span>
+							<span class="kora-op-type op-${item.opType}">${item.opType}</span>
+							<span class="kora-op-collection">${item.collection}</span>
+							<span class="kora-op-record kora-mono"
+								>${truncate(item.recordId, 12)}</span
+							>
+							<span class="kora-op-node">node:${truncate(item.nodeId, 8)}</span>
+							<span class="kora-op-seq">#${item.sequenceNumber}</span>
+						</div>
+						${expanded.has(item.id) ? html`
+									<div class="kora-op-detail">
+										<div>
+											<span class="kora-detail-label">Operation ID:</span>
+											<span class="kora-mono">${item.operationId}</span>
+										</div>
+										<div>
+											<span class="kora-detail-label">Node:</span>
+											<span class="kora-mono">${item.nodeId}</span>
+										</div>
+										<div>
+											<span class="kora-detail-label">Sequence:</span>
+											${item.sequenceNumber}
+										</div>
+										${item.causalDeps.length > 0 ? html`<div>
+													<span class="kora-detail-label">Causal deps:</span>
+													<span class="kora-mono"
+														>${item.causalDeps.join(", ")}</span
+													>
+												</div>` : null}
+										${item.data ? html`<div>
+													<div class="kora-detail-label">Data:</div>
+													<pre class="kora-value-code">
+${JSON.stringify(item.data, null, 2)}</pre
+													>
+												</div>` : null}
+									</div>
+								` : null}
+					`
+  )}
+			</div>
+		</div>
+	`;
+}
+function NetworkPanel({
+  network,
+  events
+}) {
+  const statusClass = network.connected ? "connected" : "disconnected";
+  const statusText = network.connected ? network.quality ? `Connected (${network.quality})` : "Connected" : "Disconnected";
+  const syncEvents = events.filter((e) => {
+    const cat = eventTypeToCategory(e.event.type);
+    return cat === "sync" || cat === "connection";
+  }).slice(-50).reverse();
+  return html`
+		<div class="kora-panel kora-network">
+			<div class="kora-network-status">
+				<div class="kora-status-indicator ${statusClass}">
+					<span class="kora-status-dot"></span>
+					<span class="kora-status-text">${statusText}</span>
+				</div>
+			</div>
+
+			<div class="kora-stats-grid">
+				<${StatCard} label="Sent" value=${String(network.sentOps)} unit="ops" />
+				<${StatCard} label="Received" value=${String(network.receivedOps)} unit="ops" />
+				<${StatCard} label="Pending" value=${String(network.pendingAcks)} unit="acks" />
+				<${StatCard}
+					label="Last Sync"
+					value=${network.lastSyncAt ? formatTime(network.lastSyncAt) : "never"}
+				/>
+			</div>
+
+			${network.versionVector.length > 0 ? html`
+						<div class="kora-vv-section">
+							<h3>Version Vector</h3>
+							<table class="kora-table kora-vv-table">
+								<thead>
+									<tr>
+										<th>Node</th>
+										<th>Sequence</th>
+									</tr>
+								</thead>
+								<tbody>
+									${network.versionVector.map(
+    (entry) => html`
+											<tr key=${entry.nodeId}>
+												<td class="kora-mono">${truncate(entry.nodeId, 16)}</td>
+												<td>${entry.sequenceNumber}</td>
+											</tr>
+										`
+  )}
+								</tbody>
+							</table>
+						</div>
+					` : null}
+
+			${syncEvents.length > 0 ? html`
+						<div class="kora-sync-log">
+							<h3>Recent Sync Activity</h3>
+							<div class="kora-event-list">
+								${syncEvents.map(
+    (entry) => html`
+										<div key=${entry.id} class="kora-row compact">
+											<span class="kora-time"
+												>${formatTime(entry.receivedAt)}</span
+											>
+											<span class="kora-type">${entry.event.type}</span>
+										</div>
+									`
+  )}
+							</div>
+						</div>
+					` : null}
+		</div>
+	`;
+}
+function StatCard({
+  label,
+  value,
+  unit
+}) {
+  return html`
+		<div class="kora-stat-card">
+			<div class="kora-stat-value">${value}</div>
+			<div class="kora-stat-label">${label}${unit ? ` (${unit})` : ""}</div>
+		</div>
+	`;
+}
+function renderDevtoolsPanel(target, events) {
+  (0, import_preact.render)(html`<${DevToolsPanel} events=${events} />`, target);
+}
+
+// src/ui/panel-styles.ts
+var KORA_DEVTOOLS_STYLES = "/* ================================================================\n         Kora DevTools \u2014 Dark theme optimized for Chrome DevTools panels\n         ================================================================ */\n\n      :root {\n        --bg-primary: #1e1e2e;\n        --bg-secondary: #181825;\n        --bg-surface: #313244;\n        --bg-hover: #45475a;\n        --bg-selected: #585b70;\n        --text-primary: #cdd6f4;\n        --text-secondary: #a6adc8;\n        --text-muted: #6c7086;\n        --border: #45475a;\n\n        --green: #a6e3a1;\n        --red: #f38ba8;\n        --yellow: #f9e2af;\n        --blue: #89b4fa;\n        --purple: #cba6f7;\n        --teal: #94e2d5;\n        --peach: #fab387;\n\n        --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;\n        --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n        --font-size: 12px;\n      }\n\n      * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n      }\n\n      body {\n        background: var(--bg-primary);\n        color: var(--text-primary);\n        font-family: var(--font-sans);\n        font-size: var(--font-size);\n        line-height: 1.5;\n        overflow: hidden;\n      }\n\n      #kora-devtools-root {\n        width: 100vw;\n        height: 100vh;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-devtools {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      /* ---- Toolbar ---- */\n\n      .kora-toolbar {\n        background: var(--bg-secondary);\n        border-bottom: 1px solid var(--border);\n        padding: 4px 8px;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n        flex-shrink: 0;\n      }\n\n      .kora-tabs {\n        display: flex;\n        gap: 2px;\n      }\n\n      .kora-tab {\n        background: transparent;\n        color: var(--text-secondary);\n        border: none;\n        padding: 4px 12px;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: var(--font-size);\n        font-family: var(--font-sans);\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .kora-tab:hover {\n        background: var(--bg-hover);\n        color: var(--text-primary);\n      }\n\n      .kora-tab.active {\n        background: var(--bg-surface);\n        color: var(--text-primary);\n        font-weight: 600;\n      }\n\n      .kora-badge {\n        background: var(--bg-hover);\n        color: var(--text-muted);\n        padding: 0 6px;\n        border-radius: 10px;\n        font-size: 10px;\n        font-weight: 500;\n      }\n\n      .kora-tab.active .kora-badge {\n        background: var(--blue);\n        color: var(--bg-primary);\n      }\n\n      .kora-controls {\n        display: flex;\n        gap: 4px;\n        align-items: center;\n        margin-left: auto;\n        flex-wrap: wrap;\n      }\n\n      .kora-search {\n        background: var(--bg-surface);\n        color: var(--text-primary);\n        border: 1px solid var(--border);\n        padding: 3px 8px;\n        border-radius: 4px;\n        font-size: var(--font-size);\n        font-family: var(--font-sans);\n        width: 140px;\n        outline: none;\n      }\n\n      .kora-search:focus {\n        border-color: var(--blue);\n      }\n\n      .kora-btn {\n        background: var(--bg-surface);\n        color: var(--text-secondary);\n        border: 1px solid var(--border);\n        padding: 3px 8px;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: 11px;\n        font-family: var(--font-sans);\n      }\n\n      .kora-btn:hover {\n        background: var(--bg-hover);\n        color: var(--text-primary);\n      }\n\n      .kora-cat-toggle {\n        background: transparent;\n        color: var(--text-muted);\n        border: 1px solid transparent;\n        padding: 2px 6px;\n        border-radius: 3px;\n        cursor: pointer;\n        font-size: 10px;\n        font-family: var(--font-sans);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      }\n\n      .kora-cat-toggle:hover {\n        color: var(--text-secondary);\n      }\n\n      .kora-cat-toggle.active {\n        background: var(--bg-surface);\n        color: var(--text-primary);\n        border-color: var(--border);\n      }\n\n      /* ---- Content ---- */\n\n      .kora-content {\n        flex: 1;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-panel {\n        flex: 1;\n        overflow-y: auto;\n        padding: 8px;\n      }\n\n      .kora-empty {\n        color: var(--text-muted);\n        text-align: center;\n        padding: 40px;\n        font-style: italic;\n      }\n\n      .kora-summary {\n        color: var(--text-muted);\n        font-size: 11px;\n        padding: 4px 0 8px;\n        border-bottom: 1px solid var(--border);\n        margin-bottom: 4px;\n      }\n\n      /* ---- Event List (Timeline) ---- */\n\n      .kora-event-list {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 3px 6px;\n        border-radius: 3px;\n        cursor: pointer;\n        min-height: 24px;\n      }\n\n      .kora-row:hover {\n        background: var(--bg-hover);\n      }\n\n      .kora-row.expanded,\n      .kora-row.selected {\n        background: var(--bg-surface);\n      }\n\n      .kora-row.compact {\n        padding: 2px 6px;\n        font-size: 11px;\n      }\n\n      .kora-time {\n        color: var(--text-muted);\n        font-family: var(--font-mono);\n        font-size: 11px;\n        flex-shrink: 0;\n        width: 90px;\n      }\n\n      .kora-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        flex-shrink: 0;\n      }\n\n      .kora-type {\n        color: var(--text-secondary);\n        font-size: 11px;\n        flex-shrink: 0;\n        width: 140px;\n      }\n\n      .kora-label {\n        color: var(--text-primary);\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .kora-deps {\n        color: var(--peach);\n        font-size: 10px;\n        flex-shrink: 0;\n      }\n\n      /* ---- Detail / Expandable ---- */\n\n      .kora-detail,\n      .kora-op-detail {\n        background: var(--bg-secondary);\n        border: 1px solid var(--border);\n        border-radius: 4px;\n        padding: 8px 12px;\n        margin: 2px 0 6px 28px;\n        font-size: 11px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n\n      .kora-detail-label {\n        color: var(--text-muted);\n        font-weight: 500;\n        margin-right: 4px;\n      }\n\n      .kora-mono {\n        font-family: var(--font-mono);\n        font-size: 11px;\n      }\n\n      /* ---- Conflicts Table ---- */\n\n      .kora-table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 11px;\n      }\n\n      .kora-table th {\n        text-align: left;\n        color: var(--text-muted);\n        font-weight: 500;\n        padding: 6px 8px;\n        border-bottom: 1px solid var(--border);\n        text-transform: uppercase;\n        font-size: 10px;\n        letter-spacing: 0.5px;\n      }\n\n      .kora-table td {\n        padding: 5px 8px;\n        border-bottom: 1px solid var(--bg-surface);\n      }\n\n      .kora-conflict-row {\n        cursor: pointer;\n      }\n\n      .kora-conflict-row:hover td {\n        background: var(--bg-hover);\n      }\n\n      .kora-conflict-row.expanded td {\n        background: var(--bg-surface);\n      }\n\n      .kora-conflict-row.violated td {\n        border-left: 3px solid var(--red);\n      }\n\n      .kora-strategy {\n        padding: 1px 6px;\n        border-radius: 3px;\n        font-size: 10px;\n        font-weight: 500;\n      }\n\n      .kora-strategy.tier-1 {\n        background: rgba(166, 227, 161, 0.15);\n        color: var(--green);\n      }\n\n      .kora-strategy.tier-2 {\n        background: rgba(249, 226, 175, 0.15);\n        color: var(--yellow);\n      }\n\n      .kora-strategy.tier-3 {\n        background: rgba(203, 166, 247, 0.15);\n        color: var(--purple);\n      }\n\n      .kora-detail-row td {\n        padding: 0;\n      }\n\n      .kora-conflict-detail {\n        padding: 12px;\n      }\n\n      .kora-comparison {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 8px;\n      }\n\n      .kora-value-box {\n        background: var(--bg-primary);\n        border: 1px solid var(--border);\n        border-radius: 4px;\n        padding: 8px;\n      }\n\n      .kora-value-box.result {\n        border-color: var(--green);\n      }\n\n      .kora-value-label {\n        color: var(--text-muted);\n        font-size: 10px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        margin-bottom: 4px;\n      }\n\n      .kora-value-code {\n        font-family: var(--font-mono);\n        font-size: 11px;\n        color: var(--text-primary);\n        white-space: pre-wrap;\n        word-break: break-all;\n        margin: 0;\n      }\n\n      .kora-constraint-warning {\n        margin-top: 8px;\n        padding: 6px 10px;\n        background: rgba(243, 139, 168, 0.1);\n        border: 1px solid var(--red);\n        border-radius: 4px;\n        color: var(--red);\n        font-size: 11px;\n      }\n\n      /* ---- Operations ---- */\n\n      .kora-op-list {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-op-row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 3px 6px;\n        border-radius: 3px;\n        cursor: pointer;\n      }\n\n      .kora-op-row:hover {\n        background: var(--bg-hover);\n      }\n\n      .kora-op-row.expanded {\n        background: var(--bg-surface);\n      }\n\n      .kora-op-type {\n        padding: 1px 6px;\n        border-radius: 3px;\n        font-size: 10px;\n        font-weight: 600;\n        text-transform: uppercase;\n        flex-shrink: 0;\n      }\n\n      .op-insert {\n        background: rgba(166, 227, 161, 0.15);\n        color: var(--green);\n      }\n\n      .op-update {\n        background: rgba(137, 180, 250, 0.15);\n        color: var(--blue);\n      }\n\n      .op-delete {\n        background: rgba(243, 139, 168, 0.15);\n        color: var(--red);\n      }\n\n      .kora-op-collection {\n        color: var(--teal);\n        font-weight: 500;\n        flex-shrink: 0;\n      }\n\n      .kora-op-record {\n        color: var(--text-secondary);\n        flex-shrink: 0;\n      }\n\n      .kora-op-node {\n        color: var(--text-muted);\n        font-size: 10px;\n        flex-shrink: 0;\n      }\n\n      .kora-op-seq {\n        color: var(--text-muted);\n        font-size: 10px;\n        flex-shrink: 0;\n      }\n\n      /* ---- Network ---- */\n\n      .kora-network-status {\n        padding: 12px 0;\n      }\n\n      .kora-status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        font-size: 14px;\n        font-weight: 600;\n      }\n\n      .kora-status-dot {\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n      }\n\n      .connected .kora-status-dot {\n        background: var(--green);\n        box-shadow: 0 0 8px rgba(166, 227, 161, 0.5);\n      }\n\n      .disconnected .kora-status-dot {\n        background: var(--red);\n        box-shadow: 0 0 8px rgba(243, 139, 168, 0.3);\n      }\n\n      .connected .kora-status-text {\n        color: var(--green);\n      }\n\n      .disconnected .kora-status-text {\n        color: var(--red);\n      }\n\n      .kora-stats-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 8px;\n        margin: 12px 0;\n      }\n\n      .kora-stat-card {\n        background: var(--bg-surface);\n        border: 1px solid var(--border);\n        border-radius: 6px;\n        padding: 12px;\n        text-align: center;\n      }\n\n      .kora-stat-value {\n        font-size: 20px;\n        font-weight: 700;\n        color: var(--text-primary);\n        font-family: var(--font-mono);\n      }\n\n      .kora-stat-label {\n        color: var(--text-muted);\n        font-size: 10px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        margin-top: 2px;\n      }\n\n      .kora-vv-section,\n      .kora-sync-log {\n        margin-top: 16px;\n      }\n\n      .kora-vv-section h3,\n      .kora-sync-log h3 {\n        color: var(--text-secondary);\n        font-size: 12px;\n        font-weight: 600;\n        margin-bottom: 8px;\n      }\n\n      .kora-vv-table {\n        max-width: 400px;\n      }\n\n      /* ---- Scrollbar ---- */\n\n      ::-webkit-scrollbar {\n        width: 8px;\n      }\n\n      ::-webkit-scrollbar-track {\n        background: var(--bg-primary);\n      }\n\n      ::-webkit-scrollbar-thumb {\n        background: var(--bg-hover);\n        border-radius: 4px;\n      }\n\n      ::-webkit-scrollbar-thumb:hover {\n        background: var(--bg-selected);\n      }";
+
+// src/overlay/embed-overlay.ts
+var OVERLAY_HOST_ID = "kora-devtools-overlay-host";
+function mountKoraDevtoolsOverlay(instrumenter) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const existing = document.getElementById(OVERLAY_HOST_ID);
+  if (existing) {
+    existing.remove();
+  }
+  const host = document.createElement("div");
+  host.id = OVERLAY_HOST_ID;
+  host.style.cssText = "position:fixed;inset:auto 12px 12px 12px;height:42vh;z-index:2147483646;display:none;";
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = KORA_DEVTOOLS_STYLES;
+  shadow.appendChild(style);
+  const panelRoot = document.createElement("div");
+  panelRoot.id = "kora-devtools-root";
+  panelRoot.style.height = "100%";
+  shadow.appendChild(panelRoot);
+  const hint = document.createElement("div");
+  hint.textContent = "Kora DevTools (Ctrl+Shift+K)";
+  hint.style.cssText = "position:fixed;bottom:8px;right:12px;z-index:2147483645;font:11px sans-serif;color:#6c7086;background:#1e1e2e;padding:4px 8px;border-radius:4px;opacity:0.85;";
+  document.body.appendChild(hint);
+  document.body.appendChild(host);
+  let visible = false;
+  const setVisible = (next) => {
+    visible = next;
+    host.style.display = visible ? "block" : "none";
+    hint.style.display = visible ? "none" : "block";
+  };
+  const refresh = () => {
+    if (!visible) return;
+    renderDevtoolsPanel(panelRoot, instrumenter.getBuffer().getAll());
+  };
+  const intervalId = window.setInterval(refresh, 300);
+  const onKeyDown = (event) => {
+    const isToggle = event.key === "K" && event.shiftKey && (event.ctrlKey || event.metaKey);
+    if (!isToggle) return;
+    event.preventDefault();
+    setVisible(!visible);
+    if (visible) {
+      refresh();
+    }
+  };
+  window.addEventListener("keydown", onKeyDown);
+  return () => {
+    window.clearInterval(intervalId);
+    window.removeEventListener("keydown", onKeyDown);
+    host.remove();
+    hint.remove();
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  mountKoraDevtoolsOverlay
+});
+//# sourceMappingURL=overlay.cjs.map