@korajs/devtools 0.1.2 → 0.3.0

package/dist/index.js

@@ -1,11 +1,3 @@
-import {
-  PortRouter
-} from "./chunk-JH2X4T4Z.js";
-import {
-  buildPanelModel,
-  renderDevtoolsPanel
-} from "./chunk-4ZQ2RTZM.js";
-
 // src/bridge/message-bridge.ts
 var DEFAULT_CHANNEL = "kora-devtools";
 var MessageBridge = class {
@@ -369,6 +361,680 @@ function computeStatistics(events) {
     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: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}`;
+  }
+}
+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 { h, render } from "preact";
+import { useState, useCallback, useMemo } from "preact/hooks";
+import htm from "htm";
+
+// 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();
+  contentClients = /* @__PURE__ */ new Map();
+  handleConnection(port) {
+    if (port.name === "kora-panel") {
+      this.attachPanel(port);
+      return;
+    }
+    if (port.name === "kora-content") {
+      this.attachContent(port);
+    }
+  }
+  attachPanel(port) {
+    port.onMessage.addListener((message) => {
+      if (!isPanelInitMessage(message)) return;
+      this.panelClients.set(message.tabId, { tabId: message.tabId, port });
+    });
+    port.onDisconnect.addListener(() => {
+      for (const [tabId, client] of this.panelClients) {
+        if (client.port === port) {
+          this.panelClients.delete(tabId);
+        }
+      }
+    });
+  }
+  attachContent(port) {
+    const tabId = port.sender?.tab?.id;
+    if (typeof tabId !== "number") {
+      return;
+    }
+    this.contentClients.set(tabId, port);
+    port.onMessage.addListener((message) => {
+      if (!isContentEventMessage(message)) return;
+      const panel = this.panelClients.get(tabId);
+      if (!panel) return;
+      panel.port.postMessage({ type: "kora-event", payload: message.payload });
+    });
+    port.onDisconnect.addListener(() => {
+      this.contentClients.delete(tabId);
+    });
+  }
+};
+function isPanelInitMessage(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const record = value;
+  return record.type === "panel-init" && typeof record.tabId === "number";
+}
+function isContentEventMessage(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const record = value;
+  return record.type === "kora-event" && "payload" in record;
+}
 export {
   EventBuffer,
   Instrumenter,