@korajs/devtools 0.3.2 → 0.5.0

package/dist/extension/panel.js

@@ -1,8 +1,32 @@
+// ../../node_modules/.pnpm/htm@3.1.1/node_modules/htm/dist/htm.mjs
+var n = function(t4, s3, r3, e3) {
+  var u3;
+  s3[0] = 0;
+  for (var h3 = 1; h3 < s3.length; h3++) {
+    var p3 = s3[h3++], a3 = s3[h3] ? (s3[0] |= p3 ? 1 : 2, r3[s3[h3++]]) : s3[++h3];
+    3 === p3 ? e3[0] = a3 : 4 === p3 ? e3[1] = Object.assign(e3[1] || {}, a3) : 5 === p3 ? (e3[1] = e3[1] || {})[s3[++h3]] = a3 : 6 === p3 ? e3[1][s3[++h3]] += a3 + "" : p3 ? (u3 = t4.apply(a3, n(t4, a3, r3, ["", null])), e3.push(u3), a3[0] ? s3[0] |= 2 : (s3[h3 - 2] = 0, s3[h3] = u3)) : e3.push(a3);
+  }
+  return e3;
+};
+var t = /* @__PURE__ */ new Map();
+function htm_default(s3) {
+  var r3 = t.get(this);
+  return r3 || (r3 = /* @__PURE__ */ new Map(), t.set(this, r3)), (r3 = n(this, r3.get(s3) || (r3.set(s3, r3 = (function(n3) {
+    for (var t4, s4, r4 = 1, e3 = "", u3 = "", h3 = [0], p3 = function(n4) {
+      1 === r4 && (n4 || (e3 = e3.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? h3.push(0, n4, e3) : 3 === r4 && (n4 || e3) ? (h3.push(3, n4, e3), r4 = 2) : 2 === r4 && "..." === e3 && n4 ? h3.push(4, n4, 0) : 2 === r4 && e3 && !n4 ? h3.push(5, 0, true, e3) : r4 >= 5 && ((e3 || !n4 && 5 === r4) && (h3.push(r4, 0, e3, s4), r4 = 6), n4 && (h3.push(r4, n4, 0, s4), r4 = 6)), e3 = "";
+    }, a3 = 0; a3 < n3.length; a3++) {
+      a3 && (1 === r4 && p3(), p3(a3));
+      for (var l3 = 0; l3 < n3[a3].length; l3++) t4 = n3[a3][l3], 1 === r4 ? "<" === t4 ? (p3(), h3 = [h3], r4 = 3) : e3 += t4 : 4 === r4 ? "--" === e3 && ">" === t4 ? (r4 = 1, e3 = "") : e3 = t4 + e3[0] : u3 ? t4 === u3 ? u3 = "" : e3 += t4 : '"' === t4 || "'" === t4 ? u3 = t4 : ">" === t4 ? (p3(), r4 = 1) : r4 && ("=" === t4 ? (r4 = 5, s4 = e3, e3 = "") : "/" === t4 && (r4 < 5 || ">" === n3[a3][l3 + 1]) ? (p3(), 3 === r4 && (h3 = h3[0]), r4 = h3, (h3 = h3[0]).push(2, 0, r4), r4 = 0) : " " === t4 || "	" === t4 || "\n" === t4 || "\r" === t4 ? (p3(), r4 = 2) : e3 += t4), 3 === r4 && "!--" === e3 && (r4 = 4, h3 = h3[0]);
+    }
+    return p3(), h3;
+  })(s3)), r3), arguments, [])).length > 1 ? r3 : r3[0];
+}
+
 // ../../node_modules/.pnpm/preact@10.29.1/node_modules/preact/dist/preact.mjs
-var n;
+var n2;
 var l;
 var u;
-var t;
+var t2;
 var i;
 var r;
 var o;
@@ -29,7 +53,7 @@ function b(n3) {
 function k(l3, u3, t4) {
   var i3, r3, o3, e3 = {};
   for (o3 in u3) "key" == o3 ? i3 = u3[o3] : "ref" == o3 ? r3 = u3[o3] : e3[o3] = u3[o3];
-  if (arguments.length > 2 && (e3.children = arguments.length > 3 ? n.call(arguments, 2) : t4), "function" == typeof l3 && null != l3.defaultProps) for (o3 in l3.defaultProps) void 0 === e3[o3] && (e3[o3] = l3.defaultProps[o3]);
+  if (arguments.length > 2 && (e3.children = arguments.length > 3 ? n2.call(arguments, 2) : t4), "function" == typeof l3 && null != l3.defaultProps) for (o3 in l3.defaultProps) void 0 === e3[o3] && (e3[o3] = l3.defaultProps[o3]);
   return x(l3, e3, i3, r3, null);
 }
 function x(n3, t4, i3, r3, o3) {
@@ -198,7 +222,7 @@ function G(u3, t4, i3, r3, o3, e3, f3, c3, s3) {
   }
   if (null == x2) m3 === k3 || c3 && u3.data == k3 || (u3.data = k3);
   else {
-    if (e3 = e3 && n.call(u3.childNodes), !c3 && null != e3) for (m3 = {}, a3 = 0; a3 < u3.attributes.length; a3++) m3[(y2 = u3.attributes[a3]).name] = y2.value;
+    if (e3 = e3 && n2.call(u3.childNodes), !c3 && null != e3) for (m3 = {}, a3 = 0; a3 < u3.attributes.length; a3++) m3[(y2 = u3.attributes[a3]).name] = y2.value;
     for (a3 in m3) y2 = m3[a3], "dangerouslySetInnerHTML" == a3 ? p3 = y2 : "children" == a3 || a3 in k3 || "value" == a3 && "defaultValue" in k3 || "checked" == a3 && "defaultChecked" in k3 || N(u3, a3, null, y2, o3);
     for (a3 in k3) y2 = k3[a3], "children" == a3 ? v3 = y2 : "dangerouslySetInnerHTML" == a3 ? h3 = y2 : "value" == a3 ? w3 = y2 : "checked" == a3 ? _2 = y2 : c3 && "function" != typeof y2 || m3[a3] === y2 || N(u3, a3, y2, m3[a3], o3);
     if (h3) c3 || p3 && (h3.__html == p3.__html || h3.__html == u3.innerHTML) || (u3.innerHTML = h3.__html), t4.__k = [];
@@ -235,16 +259,16 @@ function Q(n3, l3, u3) {
 }
 function R(u3, t4, i3) {
   var r3, o3, e3, f3;
-  t4 == document && (t4 = document.documentElement), l.__ && l.__(u3, t4), o3 = (r3 = "function" == typeof i3) ? null : i3 && i3.__k || t4.__k, e3 = [], f3 = [], q(t4, u3 = (!r3 && i3 || t4).__k = k(S, null, [u3]), o3 || d, d, t4.namespaceURI, !r3 && i3 ? [i3] : o3 ? null : t4.firstChild ? n.call(t4.childNodes) : null, e3, !r3 && i3 ? i3 : o3 ? o3.__e : t4.firstChild, r3, f3), D(e3, u3, f3);
+  t4 == document && (t4 = document.documentElement), l.__ && l.__(u3, t4), o3 = (r3 = "function" == typeof i3) ? null : i3 && i3.__k || t4.__k, e3 = [], f3 = [], q(t4, u3 = (!r3 && i3 || t4).__k = k(S, null, [u3]), o3 || d, d, t4.namespaceURI, !r3 && i3 ? [i3] : o3 ? null : t4.firstChild ? n2.call(t4.childNodes) : null, e3, !r3 && i3 ? i3 : o3 ? o3.__e : t4.firstChild, r3, f3), D(e3, u3, f3);
 }
-n = w.slice, l = { __e: function(n3, l3, u3, t4) {
+n2 = w.slice, l = { __e: function(n3, l3, u3, t4) {
   for (var i3, r3, o3; l3 = l3.__; ) if ((i3 = l3.__c) && !i3.__) try {
     if ((r3 = i3.constructor) && null != r3.getDerivedStateFromError && (i3.setState(r3.getDerivedStateFromError(n3)), o3 = i3.__d), null != i3.componentDidCatch && (i3.componentDidCatch(n3, t4 || {}), o3 = i3.__d), o3) return i3.__E = i3;
   } catch (l4) {
     n3 = l4;
   }
   throw n3;
-} }, u = 0, t = function(n3) {
+} }, u = 0, t2 = function(n3) {
   return null != n3 && void 0 === n3.constructor;
 }, C.prototype.setState = function(n3, l3) {
   var u3;
@@ -256,7 +280,7 @@ n = w.slice, l = { __e: function(n3, l3, u3, t4) {
 }, H.__r = 0, f = Math.random().toString(8), c = "__d" + f, s = "__a" + f, a = /(PointerCapture)$|Capture$/i, h = 0, p = V(false), v = V(true), y = 0;
 
 // ../../node_modules/.pnpm/preact@10.29.1/node_modules/preact/hooks/dist/hooks.mjs
-var t2;
+var t3;
 var r2;
 var u2;
 var i2;
@@ -278,7 +302,7 @@ function d2(n3) {
   return o2 = 1, h2(D2, n3);
 }
 function h2(n3, u3, i3) {
-  var o3 = p2(t2++, 2);
+  var o3 = p2(t3++, 2);
   if (o3.t = n3, !o3.__c && (o3.__ = [i3 ? i3(u3) : D2(void 0, u3), function(n4) {
     var t4 = o3.__N ? o3.__N[0] : o3.__[0], r3 = o3.t(t4, n4);
     t4 !== r3 && (o3.__N = [r3, o3.__[1]], o3.__c.setState({}));
@@ -312,7 +336,7 @@ function h2(n3, u3, i3) {
   return o3.__N || o3.__;
 }
 function T2(n3, r3) {
-  var u3 = p2(t2++, 7);
+  var u3 = p2(t3++, 7);
   return C2(u3.__H, r3) && (u3.__ = n3(), u3.__H = r3, u3.__h = n3), u3.__;
 }
 function q2(n3, t4) {
@@ -335,11 +359,11 @@ c2.__b = function(n3) {
 }, c2.__ = function(n3, t4) {
   n3 && t4.__k && t4.__k.__m && (n3.__m = t4.__k.__m), s2 && s2(n3, t4);
 }, c2.__r = function(n3) {
-  a2 && a2(n3), t2 = 0;
+  a2 && a2(n3), t3 = 0;
   var i3 = (r2 = n3.__c).__H;
   i3 && (u2 === r2 ? (i3.__h = [], r2.__h = [], i3.__.some(function(n4) {
     n4.__N && (n4.__ = n4.__N), n4.u = n4.__N = void 0;
-  })) : (i3.__h.some(z2), i3.__h.some(B2), i3.__h = [], t2 = 0)), u2 = r2;
+  })) : (i3.__h.some(z2), i3.__h.some(B2), i3.__h = [], t3 = 0)), u2 = r2;
 }, c2.diffed = function(n3) {
   v2 && v2(n3);
   var t4 = n3.__c;
@@ -393,30 +417,6 @@ function D2(n3, t4) {
   return "function" == typeof t4 ? t4(n3) : t4;
 }
 
-// ../../node_modules/.pnpm/htm@3.1.1/node_modules/htm/dist/htm.mjs
-var n2 = function(t4, s3, r3, e3) {
-  var u3;
-  s3[0] = 0;
-  for (var h3 = 1; h3 < s3.length; h3++) {
-    var p3 = s3[h3++], a3 = s3[h3] ? (s3[0] |= p3 ? 1 : 2, r3[s3[h3++]]) : s3[++h3];
-    3 === p3 ? e3[0] = a3 : 4 === p3 ? e3[1] = Object.assign(e3[1] || {}, a3) : 5 === p3 ? (e3[1] = e3[1] || {})[s3[++h3]] = a3 : 6 === p3 ? e3[1][s3[++h3]] += a3 + "" : p3 ? (u3 = t4.apply(a3, n2(t4, a3, r3, ["", null])), e3.push(u3), a3[0] ? s3[0] |= 2 : (s3[h3 - 2] = 0, s3[h3] = u3)) : e3.push(a3);
-  }
-  return e3;
-};
-var t3 = /* @__PURE__ */ new Map();
-function htm_default(s3) {
-  var r3 = t3.get(this);
-  return r3 || (r3 = /* @__PURE__ */ new Map(), t3.set(this, r3)), (r3 = n2(this, r3.get(s3) || (r3.set(s3, r3 = (function(n3) {
-    for (var t4, s4, r4 = 1, e3 = "", u3 = "", h3 = [0], p3 = function(n4) {
-      1 === r4 && (n4 || (e3 = e3.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? h3.push(0, n4, e3) : 3 === r4 && (n4 || e3) ? (h3.push(3, n4, e3), r4 = 2) : 2 === r4 && "..." === e3 && n4 ? h3.push(4, n4, 0) : 2 === r4 && e3 && !n4 ? h3.push(5, 0, true, e3) : r4 >= 5 && ((e3 || !n4 && 5 === r4) && (h3.push(r4, 0, e3, s4), r4 = 6), n4 && (h3.push(r4, n4, 0, s4), r4 = 6)), e3 = "";
-    }, a3 = 0; a3 < n3.length; a3++) {
-      a3 && (1 === r4 && p3(), p3(a3));
-      for (var l3 = 0; l3 < n3[a3].length; l3++) t4 = n3[a3][l3], 1 === r4 ? "<" === t4 ? (p3(), h3 = [h3], r4 = 3) : e3 += t4 : 4 === r4 ? "--" === e3 && ">" === t4 ? (r4 = 1, e3 = "") : e3 = t4 + e3[0] : u3 ? t4 === u3 ? u3 = "" : e3 += t4 : '"' === t4 || "'" === t4 ? u3 = t4 : ">" === t4 ? (p3(), r4 = 1) : r4 && ("=" === t4 ? (r4 = 5, s4 = e3, e3 = "") : "/" === t4 && (r4 < 5 || ">" === n3[a3][l3 + 1]) ? (p3(), 3 === r4 && (h3 = h3[0]), r4 = h3, (h3 = h3[0]).push(2, 0, r4), r4 = 0) : " " === t4 || "	" === t4 || "\n" === t4 || "\r" === t4 ? (p3(), r4 = 2) : e3 += t4), 3 === r4 && "!--" === e3 && (r4 = 4, h3 = h3[0]);
-    }
-    return p3(), h3;
-  })(s3)), r3), arguments, [])).length > 1 ? r3 : r3[0];
-}
-
 // src/types.ts
 var EVENT_TYPE_CATEGORIES = {
   "operation:created": "operation",
@@ -428,18 +428,164 @@ var EVENT_TYPE_CATEGORIES = {
   "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"
+  "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 e3 = event.event;
+  switch (e3.type) {
+    case "operation:created":
+    case "operation:applied":
+      return e3.operation.collection;
+    case "merge:started":
+      return e3.operationA.collection;
+    case "merge:completed":
+    case "merge:conflict":
+      return e3.trace.operationA.collection;
+    case "constraint:violated":
+      return e3.trace.operationA.collection;
+    case "query:subscribed":
+      return e3.collection;
+    case "query:invalidated":
+      return e3.trigger.collection;
+    case "sync:sent":
+      return e3.operations[0]?.collection ?? null;
+    case "sync:received":
+      return e3.operations[0]?.collection ?? null;
+    default:
+      return null;
+  }
+}
+function filterEvents(events2, criteria) {
+  const { categories, types, timeRange, collection } = criteria;
+  if (!categories && !types && !timeRange && !collection) {
+    return events2;
+  }
+  const categorySet = categories ? new Set(categories) : null;
+  const typeSet = types ? new Set(types) : null;
+  return events2.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(events2) {
+  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 events2) {
+    const e3 = timestamped.event;
+    const category = eventTypeToCategory(e3.type);
+    eventsByCategory[category]++;
+    eventsByType[e3.type] = (eventsByType[e3.type] ?? 0) + 1;
+    switch (e3.type) {
+      case "merge:completed":
+        mergeDurationSum += e3.trace.duration;
+        mergeDurationCount++;
+        break;
+      case "merge:conflict":
+        mergeConflicts++;
+        mergeDurationSum += e3.trace.duration;
+        mergeDurationCount++;
+        break;
+      case "constraint:violated":
+        constraintViolations++;
+        break;
+      case "query:executed":
+        queryDurationSum += e3.duration;
+        queryDurationCount++;
+        break;
+      case "sync:sent":
+        syncOperationsSent += e3.batchSize;
+        break;
+      case "sync:received":
+        syncOperationsReceived += e3.batchSize;
+        break;
+    }
+  }
+  return {
+    totalEvents: events2.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 d3 = new Date(timestamp);
+  const h3 = String(d3.getHours()).padStart(2, "0");
+  const m3 = String(d3.getMinutes()).padStart(2, "0");
+  const s3 = String(d3.getSeconds()).padStart(2, "0");
+  const ms = String(d3.getMilliseconds()).padStart(3, "0");
+  return `${h3}:${m3}:${s3}.${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(events2) {
   const timeline = events2.map((entry) => ({
@@ -561,9 +707,13 @@ function timelineLabel(event) {
     case "sync:connected":
       return `sync connected ${event.nodeId}`;
     case "sync:disconnected":
-      return `sync disconnected`;
+      return "sync disconnected";
     case "sync:auth-failed":
-      return `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":
@@ -578,6 +728,24 @@ function timelineLabel(event) {
       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) {
@@ -603,174 +771,31 @@ function extractOperation(event) {
   }
 }
 
-// src/stats/event-stats.ts
-function computeStatistics(events2) {
-  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 events2) {
-    const e3 = timestamped.event;
-    const category = eventTypeToCategory(e3.type);
-    eventsByCategory[category]++;
-    eventsByType[e3.type] = (eventsByType[e3.type] ?? 0) + 1;
-    switch (e3.type) {
-      case "merge:completed":
-        mergeDurationSum += e3.trace.duration;
-        mergeDurationCount++;
-        break;
-      case "merge:conflict":
-        mergeConflicts++;
-        mergeDurationSum += e3.trace.duration;
-        mergeDurationCount++;
-        break;
-      case "constraint:violated":
-        constraintViolations++;
-        break;
-      case "query:executed":
-        queryDurationSum += e3.duration;
-        queryDurationCount++;
-        break;
-      case "sync:sent":
-        syncOperationsSent += e3.batchSize;
-        break;
-      case "sync:received":
-        syncOperationsReceived += e3.batchSize;
-        break;
-    }
-  }
-  return {
-    totalEvents: events2.length,
-    eventsByCategory,
-    eventsByType,
-    mergeConflicts,
-    constraintViolations,
-    avgMergeDuration: mergeDurationCount > 0 ? mergeDurationSum / mergeDurationCount : null,
-    avgQueryDuration: queryDurationCount > 0 ? queryDurationSum / queryDurationCount : null,
-    syncOperationsSent,
-    syncOperationsReceived
-  };
-}
-
-// src/filter/event-filter.ts
-function extractCollection(event) {
-  const e3 = event.event;
-  switch (e3.type) {
-    case "operation:created":
-    case "operation:applied":
-      return e3.operation.collection;
-    case "merge:started":
-      return e3.operationA.collection;
-    case "merge:completed":
-    case "merge:conflict":
-      return e3.trace.operationA.collection;
-    case "constraint:violated":
-      return e3.trace.operationA.collection;
-    case "query:subscribed":
-      return e3.collection;
-    case "query:invalidated":
-      return e3.trigger.collection;
-    case "sync:sent":
-      return e3.operations[0]?.collection ?? null;
-    case "sync:received":
-      return e3.operations[0]?.collection ?? null;
-    default:
-      return null;
-  }
-}
-function filterEvents(events2, criteria) {
-  const { categories, types, timeRange, collection } = criteria;
-  if (!categories && !types && !timeRange && !collection) {
-    return events2;
-  }
-  const categorySet = categories ? new Set(categories) : null;
-  const typeSet = types ? new Set(types) : null;
-  return events2.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/ui/components.ts
-function formatTime(timestamp) {
-  const d3 = new Date(timestamp);
-  const h3 = String(d3.getHours()).padStart(2, "0");
-  const m3 = String(d3.getMinutes()).padStart(2, "0");
-  const s3 = String(d3.getSeconds()).padStart(2, "0");
-  const ms = String(d3.getMilliseconds()).padStart(3, "0");
-  return `${h3}:${m3}:${s3}.${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_default.bind(k);
 var ALL_CATEGORIES = ["operation", "merge", "sync", "query", "connection"];
 function DevToolsPanel({ events: events2 }) {
   const [activeTab, setActiveTab] = d2("timeline");
   const [search, setSearch] = d2("");
-  const [categories, setCategories] = d2(
-    () => new Set(ALL_CATEGORIES)
-  );
+  const [categories, setCategories] = d2(() => new Set(ALL_CATEGORIES));
   const [expanded, setExpanded] = d2(() => /* @__PURE__ */ new Set());
   const [paused, setPaused] = d2(false);
-  const toggleCategory = q2(
-    (cat) => {
-      setCategories((prev) => {
-        const next = new Set(prev);
-        if (next.has(cat)) next.delete(cat);
-        else next.add(cat);
-        return next;
-      });
-    },
-    []
-  );
-  const toggleExpand = q2(
-    (id) => {
-      setExpanded((prev) => {
-        const next = new Set(prev);
-        if (next.has(id)) next.delete(id);
-        else next.add(id);
-        return next;
-      });
-    },
-    []
-  );
+  const toggleCategory = q2((cat) => {
+    setCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(cat)) next.delete(cat);
+      else next.add(cat);
+      return next;
+    });
+  }, []);
+  const toggleExpand = q2((id) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
   const filtered = T2(
     () => filterEvents(events2, { categories: [...categories] }),
     [events2, categories]