@korajs/devtools 0.1.3 → 0.3.0

package/dist/index.js

@@ -373,7 +373,7 @@ function buildPanelModel(events) {
     dependsOn: extractCausalDependencies(entry.event)
   }));
   const conflicts = events.flatMap((entry) => {
-    if (entry.event.type !== "merge:completed" && entry.event.type !== "merge:conflict") {
+    if (entry.event.type !== "merge:completed" && entry.event.type !== "merge:conflict" && entry.event.type !== "constraint:violated") {
       return [];
     }
     const trace = entry.event.trace;
@@ -524,40 +524,462 @@ function extractOperation(event) {
 }
 
 // src/ui/panel.ts
-function renderDevtoolsPanel(target, events) {
-  const model = buildPanelModel(events);
-  target.innerHTML = [
-    '<section data-panel="timeline"><h2>Sync Timeline</h2>',
-    `<p>Total events: ${model.timeline.length}</p>`,
-    "<ul>",
-    ...model.timeline.slice(-20).map(
-      (item) => `<li><span style="color:${item.color}">${item.type}</span> \xB7 ${escapeHtml(item.label)}</li>`
-    ),
-    "</ul></section>",
-    '<section data-panel="conflicts"><h2>Conflict Inspector</h2>',
-    `<p>Conflicts: ${model.conflicts.length}</p>`,
-    "<ul>",
-    ...model.conflicts.slice(-20).map(
-      (item) => `<li>${escapeHtml(item.collection)}.${escapeHtml(item.field)} \xB7 ${escapeHtml(item.strategy)} \xB7 tier ${item.tier}</li>`
-    ),
-    "</ul></section>",
-    '<section data-panel="operations"><h2>Operation Log</h2>',
-    `<p>Operations: ${model.operations.length}</p>`,
-    "<ul>",
-    ...model.operations.slice(-20).map(
-      (item) => `<li>${escapeHtml(item.opType)} ${escapeHtml(item.collection)}/${escapeHtml(item.recordId)} (${escapeHtml(item.operationId)})</li>`
-    ),
-    "</ul></section>",
-    '<section data-panel="network"><h2>Network Status</h2>',
-    `<p>Connected: ${model.network.connected ? "yes" : "no"}</p>`,
-    `<p>Pending ACKs: ${model.network.pendingAcks}</p>`,
-    `<p>Sent ops: ${model.network.sentOps}</p>`,
-    `<p>Received ops: ${model.network.receivedOps}</p>`,
-    "</section>"
-  ].join("");
+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 escapeHtml(value) {
-  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+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