@korajs/devtools 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,3 +1,12 @@
+import {
+  buildPanelModel,
+  computeStatistics,
+  filterEvents,
+  getEventCategory,
+  mountKoraDevtoolsOverlay,
+  renderDevtoolsPanel
+} from "./chunk-N64DMGUU.js";
+
 // src/bridge/message-bridge.ts
 var DEFAULT_CHANNEL = "kora-devtools";
 var MessageBridge = class {
@@ -144,9 +153,18 @@ var ALL_EVENT_TYPES = [
   "constraint:violated",
   "sync:connected",
   "sync:disconnected",
+  "sync:schema-mismatch",
+  "sync:auth-failed",
+  "sync:apply-failed",
   "sync:sent",
   "sync:received",
   "sync:acknowledged",
+  "sync:diagnostics",
+  "sync:bandwidth",
+  "sync:initial-sync-progress",
+  "store:persistence-error",
+  "store:quota-exceeded",
+  "replay:completed",
   "query:subscribed",
   "query:invalidated",
   "query:executed",
@@ -222,779 +240,6 @@ var Instrumenter = class {
   }
 };
 
-// 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: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"
-};
-function eventTypeToCategory(type) {
-  return EVENT_TYPE_CATEGORIES[type];
-}
-
-// src/filter/event-filter.ts
-function getEventCategory(type) {
-  return eventTypeToCategory(type);
-}
-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/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: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}`;
-  }
-}
-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
-import htm from "htm";
-import { h, render } from "preact";
-import { useCallback, useMemo, useState } from "preact/hooks";
-
-// 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.ts
-var html = htm.bind(h);
-var ALL_CATEGORIES = ["operation", "merge", "sync", "query", "connection"];
-function DevToolsPanel({ events }) {
-  const [activeTab, setActiveTab] = useState("timeline");
-  const [search, setSearch] = useState("");
-  const [categories, setCategories] = useState(() => new Set(ALL_CATEGORIES));
-  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
-  const [paused, setPaused] = useState(false);
-  const toggleCategory = useCallback((cat) => {
-    setCategories((prev) => {
-      const next = new Set(prev);
-      if (next.has(cat)) next.delete(cat);
-      else next.add(cat);
-      return next;
-    });
-  }, []);
-  const toggleExpand = useCallback((id) => {
-    setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }, []);
-  const filtered = useMemo(
-    () => filterEvents(events, { categories: [...categories] }),
-    [events, categories]
-  );
-  const model = useMemo(() => buildPanelModel(filtered), [filtered]);
-  const stats = 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) {
-  render(html`<${DevToolsPanel} events=${events} />`, target);
-}
-
 // src/extension/port-router.ts
 var PortRouter = class {
   panelClients = /* @__PURE__ */ new Map();
@@ -1057,6 +302,7 @@ export {
   computeStatistics,
   filterEvents,
   getEventCategory,
+  mountKoraDevtoolsOverlay,
   renderDevtoolsPanel
 };
 //# sourceMappingURL=index.js.map