@korajs/devtools 0.1.0 → 0.1.3

package/README.md

@@ -0,0 +1,58 @@
+# @korajs/devtools
+
+Browser DevTools extension for Kora.js. Inspect operations, trace conflict resolution decisions, monitor sync status, and debug your offline-first app in real time.
+
+## Install
+
+```bash
+pnpm add -D @korajs/devtools
+```
+
+## Enable
+
+Add `devtools: true` to your app config:
+
+```typescript
+import { createApp } from 'korajs'
+
+const app = createApp({
+  schema,
+  devtools: process.env.NODE_ENV === 'development',
+})
+```
+
+When enabled, the Kora DevTools panel appears in your browser's developer tools.
+
+## Panels
+
+### Sync Timeline
+Horizontal timeline of operations and sync events, color-coded by type. Click any event to inspect it. Causal arrows show dependencies between operations.
+
+### Conflict Inspector
+Table of all merge events, filterable by collection, tier, and strategy. Expand any row to see the full `MergeTrace` -- input values, base value, resolved output, and which tier handled it.
+
+### Operation Log
+Searchable list of all operations. Click an operation to view its full payload, causal dependencies, and the database state at that point in time.
+
+### Network Status
+Real-time connection quality indicator, pending operation count, bandwidth graph, and last sync timestamp.
+
+## Instrumentation Events
+
+The DevTools extension listens for events emitted by the Kora runtime:
+
+- `operation:created` / `operation:applied`
+- `merge:started` / `merge:completed` / `merge:conflict`
+- `sync:connected` / `sync:disconnected` / `sync:sent` / `sync:received`
+- `query:subscribed` / `query:invalidated` / `query:executed`
+- `connection:quality`
+
+## Keyboard Shortcut
+
+In development mode, press `Ctrl+Shift+K` (or `Cmd+Shift+K` on macOS) to toggle the embedded DevTools overlay.
+
+## License
+
+MIT
+
+See the [full documentation](https://github.com/ehoneahobed/kora) for guides, API reference, and examples.

package/dist/extension/background.cjs

@@ -55,7 +55,7 @@ function isContentEventMessage(value) {
 }
 
 // src/extension/background.ts
-var runtime = globalThis.chrome?.runtime;
+var runtime = chrome?.runtime;
 if (runtime?.onConnect) {
   const router = new PortRouter();
   runtime.onConnect.addListener((port) => {

package/dist/extension/background.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/extension/port-router.ts","../../src/extension/background.ts"],"sourcesContent":["export interface ExtensionPort {\n\tname: string\n\tonMessage: {\n\t\taddListener(callback: (message: unknown) => void): void\n\t}\n\tonDisconnect: {\n\t\taddListener(callback: () => void): void\n\t}\n\tpostMessage(message: unknown): void\n\tsender?: { tab?: { id?: number } }\n}\n\ninterface PanelClient {\n\tport: ExtensionPort\n\ttabId: number\n}\n\n/**\n * Routes content-script events to the matching DevTools panel by tab.\n */\nexport class PortRouter {\n\tprivate readonly panelClients = new Map<number, PanelClient>()\n\tprivate readonly contentClients = new Map<number, ExtensionPort>()\n\n\thandleConnection(port: ExtensionPort): void {\n\t\tif (port.name === 'kora-panel') {\n\t\t\tthis.attachPanel(port)\n\t\t\treturn\n\t\t}\n\n\t\tif (port.name === 'kora-content') {\n\t\t\tthis.attachContent(port)\n\t\t}\n\t}\n\n\tprivate attachPanel(port: ExtensionPort): void {\n\t\tport.onMessage.addListener((message) => {\n\t\t\tif (!isPanelInitMessage(message)) return\n\n\t\t\tthis.panelClients.set(message.tabId, { tabId: message.tabId, port })\n\t\t})\n\n\t\tport.onDisconnect.addListener(() => {\n\t\t\tfor (const [tabId, client] of this.panelClients) {\n\t\t\t\tif (client.port === port) {\n\t\t\t\t\tthis.panelClients.delete(tabId)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate attachContent(port: ExtensionPort): void {\n\t\tconst tabId = port.sender?.tab?.id\n\t\tif (typeof tabId !== 'number') {\n\t\t\treturn\n\t\t}\n\n\t\tthis.contentClients.set(tabId, port)\n\n\t\tport.onMessage.addListener((message) => {\n\t\t\tif (!isContentEventMessage(message)) return\n\n\t\t\tconst panel = this.panelClients.get(tabId)\n\t\t\tif (!panel) return\n\n\t\t\tpanel.port.postMessage({ type: 'kora-event', payload: message.payload })\n\t\t})\n\n\t\tport.onDisconnect.addListener(() => {\n\t\t\tthis.contentClients.delete(tabId)\n\t\t})\n\t}\n}\n\nfunction isPanelInitMessage(value: unknown): value is { type: 'panel-init'; tabId: number } {\n\tif (typeof value !== 'object' || value === null) return false\n\tconst record = value as Record<string, unknown>\n\treturn record.type === 'panel-init' && typeof record.tabId === 'number'\n}\n\nfunction isContentEventMessage(value: unknown): value is { type: 'kora-event'; payload: unknown } {\n\tif (typeof value !== 'object' || value === null) return false\n\tconst record = value as Record<string, unknown>\n\treturn record.type === 'kora-event' && 'payload' in record\n}\n","import { PortRouter, type ExtensionPort } from './port-router'\n\ninterface RuntimeLike {\n\tonConnect?: {\n\t\taddListener(callback: (port: ExtensionPort) => void): void\n\t}\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\n\nif (runtime?.onConnect) {\n\tconst router = new PortRouter()\n\truntime.onConnect.addListener((port) => {\n\t\trouter.handleConnection(port)\n\t})\n}\n"],"mappings":";;;AAoBO,IAAM,aAAN,MAAiB;AAAA,EACN,eAAe,oBAAI,IAAyB;AAAA,EAC5C,iBAAiB,oBAAI,IAA2B;AAAA,EAEjE,iBAAiB,MAA2B;AAC3C,QAAI,KAAK,SAAS,cAAc;AAC/B,WAAK,YAAY,IAAI;AACrB;AAAA,IACD;AAEA,QAAI,KAAK,SAAS,gBAAgB;AACjC,WAAK,cAAc,IAAI;AAAA,IACxB;AAAA,EACD;AAAA,EAEQ,YAAY,MAA2B;AAC9C,SAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAI,CAAC,mBAAmB,OAAO,EAAG;AAElC,WAAK,aAAa,IAAI,QAAQ,OAAO,EAAE,OAAO,QAAQ,OAAO,KAAK,CAAC;AAAA,IACpE,CAAC;AAED,SAAK,aAAa,YAAY,MAAM;AACnC,iBAAW,CAAC,OAAO,MAAM,KAAK,KAAK,cAAc;AAChD,YAAI,OAAO,SAAS,MAAM;AACzB,eAAK,aAAa,OAAO,KAAK;AAAA,QAC/B;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF;AAAA,EAEQ,cAAc,MAA2B;AAChD,UAAM,QAAQ,KAAK,QAAQ,KAAK;AAChC,QAAI,OAAO,UAAU,UAAU;AAC9B;AAAA,IACD;AAEA,SAAK,eAAe,IAAI,OAAO,IAAI;AAEnC,SAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAI,CAAC,sBAAsB,OAAO,EAAG;AAErC,YAAM,QAAQ,KAAK,aAAa,IAAI,KAAK;AACzC,UAAI,CAAC,MAAO;AAEZ,YAAM,KAAK,YAAY,EAAE,MAAM,cAAc,SAAS,QAAQ,QAAQ,CAAC;AAAA,IACxE,CAAC;AAED,SAAK,aAAa,YAAY,MAAM;AACnC,WAAK,eAAe,OAAO,KAAK;AAAA,IACjC,CAAC;AAAA,EACF;AACD;AAEA,SAAS,mBAAmB,OAAgE;AAC3F,MAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;AACxD,QAAM,SAAS;AACf,SAAO,OAAO,SAAS,gBAAgB,OAAO,OAAO,UAAU;AAChE;AAEA,SAAS,sBAAsB,OAAmE;AACjG,MAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;AACxD,QAAM,SAAS;AACf,SAAO,OAAO,SAAS,gBAAgB,aAAa;AACrD;;;AC5EA,IAAM,UAAW,WAAsD,QAAQ;AAE/E,IAAI,SAAS,WAAW;AACvB,QAAM,SAAS,IAAI,WAAW;AAC9B,UAAQ,UAAU,YAAY,CAAC,SAAS;AACvC,WAAO,iBAAiB,IAAI;AAAA,EAC7B,CAAC;AACF;","names":[]}
+{"version":3,"sources":["../../src/extension/port-router.ts","../../src/extension/background.ts"],"sourcesContent":["export interface ExtensionPort {\n\tname: string\n\tonMessage: {\n\t\taddListener(callback: (message: unknown) => void): void\n\t}\n\tonDisconnect: {\n\t\taddListener(callback: () => void): void\n\t}\n\tpostMessage(message: unknown): void\n\tsender?: { tab?: { id?: number } }\n}\n\ninterface PanelClient {\n\tport: ExtensionPort\n\ttabId: number\n}\n\n/**\n * Routes content-script events to the matching DevTools panel by tab.\n */\nexport class PortRouter {\n\tprivate readonly panelClients = new Map<number, PanelClient>()\n\tprivate readonly contentClients = new Map<number, ExtensionPort>()\n\n\thandleConnection(port: ExtensionPort): void {\n\t\tif (port.name === 'kora-panel') {\n\t\t\tthis.attachPanel(port)\n\t\t\treturn\n\t\t}\n\n\t\tif (port.name === 'kora-content') {\n\t\t\tthis.attachContent(port)\n\t\t}\n\t}\n\n\tprivate attachPanel(port: ExtensionPort): void {\n\t\tport.onMessage.addListener((message) => {\n\t\t\tif (!isPanelInitMessage(message)) return\n\n\t\t\tthis.panelClients.set(message.tabId, { tabId: message.tabId, port })\n\t\t})\n\n\t\tport.onDisconnect.addListener(() => {\n\t\t\tfor (const [tabId, client] of this.panelClients) {\n\t\t\t\tif (client.port === port) {\n\t\t\t\t\tthis.panelClients.delete(tabId)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate attachContent(port: ExtensionPort): void {\n\t\tconst tabId = port.sender?.tab?.id\n\t\tif (typeof tabId !== 'number') {\n\t\t\treturn\n\t\t}\n\n\t\tthis.contentClients.set(tabId, port)\n\n\t\tport.onMessage.addListener((message) => {\n\t\t\tif (!isContentEventMessage(message)) return\n\n\t\t\tconst panel = this.panelClients.get(tabId)\n\t\t\tif (!panel) return\n\n\t\t\tpanel.port.postMessage({ type: 'kora-event', payload: message.payload })\n\t\t})\n\n\t\tport.onDisconnect.addListener(() => {\n\t\t\tthis.contentClients.delete(tabId)\n\t\t})\n\t}\n}\n\nfunction isPanelInitMessage(value: unknown): value is { type: 'panel-init'; tabId: number } {\n\tif (typeof value !== 'object' || value === null) return false\n\tconst record = value as Record<string, unknown>\n\treturn record.type === 'panel-init' && typeof record.tabId === 'number'\n}\n\nfunction isContentEventMessage(value: unknown): value is { type: 'kora-event'; payload: unknown } {\n\tif (typeof value !== 'object' || value === null) return false\n\tconst record = value as Record<string, unknown>\n\treturn record.type === 'kora-event' && 'payload' in record\n}\n","import { PortRouter, type ExtensionPort } from './port-router'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nconst runtime = chrome?.runtime\n\nif (runtime?.onConnect) {\n\tconst router = new PortRouter()\n\truntime.onConnect.addListener((port: ExtensionPort) => {\n\t\trouter.handleConnection(port)\n\t})\n}\n"],"mappings":";;;AAoBO,IAAM,aAAN,MAAiB;AAAA,EACN,eAAe,oBAAI,IAAyB;AAAA,EAC5C,iBAAiB,oBAAI,IAA2B;AAAA,EAEjE,iBAAiB,MAA2B;AAC3C,QAAI,KAAK,SAAS,cAAc;AAC/B,WAAK,YAAY,IAAI;AACrB;AAAA,IACD;AAEA,QAAI,KAAK,SAAS,gBAAgB;AACjC,WAAK,cAAc,IAAI;AAAA,IACxB;AAAA,EACD;AAAA,EAEQ,YAAY,MAA2B;AAC9C,SAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAI,CAAC,mBAAmB,OAAO,EAAG;AAElC,WAAK,aAAa,IAAI,QAAQ,OAAO,EAAE,OAAO,QAAQ,OAAO,KAAK,CAAC;AAAA,IACpE,CAAC;AAED,SAAK,aAAa,YAAY,MAAM;AACnC,iBAAW,CAAC,OAAO,MAAM,KAAK,KAAK,cAAc;AAChD,YAAI,OAAO,SAAS,MAAM;AACzB,eAAK,aAAa,OAAO,KAAK;AAAA,QAC/B;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF;AAAA,EAEQ,cAAc,MAA2B;AAChD,UAAM,QAAQ,KAAK,QAAQ,KAAK;AAChC,QAAI,OAAO,UAAU,UAAU;AAC9B;AAAA,IACD;AAEA,SAAK,eAAe,IAAI,OAAO,IAAI;AAEnC,SAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAI,CAAC,sBAAsB,OAAO,EAAG;AAErC,YAAM,QAAQ,KAAK,aAAa,IAAI,KAAK;AACzC,UAAI,CAAC,MAAO;AAEZ,YAAM,KAAK,YAAY,EAAE,MAAM,cAAc,SAAS,QAAQ,QAAQ,CAAC;AAAA,IACxE,CAAC;AAED,SAAK,aAAa,YAAY,MAAM;AACnC,WAAK,eAAe,OAAO,KAAK;AAAA,IACjC,CAAC;AAAA,EACF;AACD;AAEA,SAAS,mBAAmB,OAAgE;AAC3F,MAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;AACxD,QAAM,SAAS;AACf,SAAO,OAAO,SAAS,gBAAgB,OAAO,OAAO,UAAU;AAChE;AAEA,SAAS,sBAAsB,OAAmE;AACjG,MAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;AACxD,QAAM,SAAS;AACf,SAAO,OAAO,SAAS,gBAAgB,aAAa;AACrD;;;AC9EA,IAAM,UAAU,QAAQ;AAExB,IAAI,SAAS,WAAW;AACvB,QAAM,SAAS,IAAI,WAAW;AAC9B,UAAQ,UAAU,YAAY,CAAC,SAAwB;AACtD,WAAO,iBAAiB,IAAI;AAAA,EAC7B,CAAC;AACF;","names":[]}

package/dist/extension/background.js

@@ -1,9 +1,59 @@
-import {
-  PortRouter
-} from "../chunk-JH2X4T4Z.js";
+// 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;
+}
 
 // src/extension/background.ts
-var runtime = globalThis.chrome?.runtime;
+var runtime = chrome?.runtime;
 if (runtime?.onConnect) {
   const router = new PortRouter();
   runtime.onConnect.addListener((port) => {

package/dist/extension/background.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/extension/background.ts"],"sourcesContent":["import { PortRouter, type ExtensionPort } from './port-router'\n\ninterface RuntimeLike {\n\tonConnect?: {\n\t\taddListener(callback: (port: ExtensionPort) => void): void\n\t}\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\n\nif (runtime?.onConnect) {\n\tconst router = new PortRouter()\n\truntime.onConnect.addListener((port) => {\n\t\trouter.handleConnection(port)\n\t})\n}\n"],"mappings":";;;;;AAQA,IAAM,UAAW,WAAsD,QAAQ;AAE/E,IAAI,SAAS,WAAW;AACvB,QAAM,SAAS,IAAI,WAAW;AAC9B,UAAQ,UAAU,YAAY,CAAC,SAAS;AACvC,WAAO,iBAAiB,IAAI;AAAA,EAC7B,CAAC;AACF;","names":[]}
+{"version":3,"sources":["../../src/extension/port-router.ts","../../src/extension/background.ts"],"sourcesContent":["export interface ExtensionPort {\n\tname: string\n\tonMessage: {\n\t\taddListener(callback: (message: unknown) => void): void\n\t}\n\tonDisconnect: {\n\t\taddListener(callback: () => void): void\n\t}\n\tpostMessage(message: unknown): void\n\tsender?: { tab?: { id?: number } }\n}\n\ninterface PanelClient {\n\tport: ExtensionPort\n\ttabId: number\n}\n\n/**\n * Routes content-script events to the matching DevTools panel by tab.\n */\nexport class PortRouter {\n\tprivate readonly panelClients = new Map<number, PanelClient>()\n\tprivate readonly contentClients = new Map<number, ExtensionPort>()\n\n\thandleConnection(port: ExtensionPort): void {\n\t\tif (port.name === 'kora-panel') {\n\t\t\tthis.attachPanel(port)\n\t\t\treturn\n\t\t}\n\n\t\tif (port.name === 'kora-content') {\n\t\t\tthis.attachContent(port)\n\t\t}\n\t}\n\n\tprivate attachPanel(port: ExtensionPort): void {\n\t\tport.onMessage.addListener((message) => {\n\t\t\tif (!isPanelInitMessage(message)) return\n\n\t\t\tthis.panelClients.set(message.tabId, { tabId: message.tabId, port })\n\t\t})\n\n\t\tport.onDisconnect.addListener(() => {\n\t\t\tfor (const [tabId, client] of this.panelClients) {\n\t\t\t\tif (client.port === port) {\n\t\t\t\t\tthis.panelClients.delete(tabId)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate attachContent(port: ExtensionPort): void {\n\t\tconst tabId = port.sender?.tab?.id\n\t\tif (typeof tabId !== 'number') {\n\t\t\treturn\n\t\t}\n\n\t\tthis.contentClients.set(tabId, port)\n\n\t\tport.onMessage.addListener((message) => {\n\t\t\tif (!isContentEventMessage(message)) return\n\n\t\t\tconst panel = this.panelClients.get(tabId)\n\t\t\tif (!panel) return\n\n\t\t\tpanel.port.postMessage({ type: 'kora-event', payload: message.payload })\n\t\t})\n\n\t\tport.onDisconnect.addListener(() => {\n\t\t\tthis.contentClients.delete(tabId)\n\t\t})\n\t}\n}\n\nfunction isPanelInitMessage(value: unknown): value is { type: 'panel-init'; tabId: number } {\n\tif (typeof value !== 'object' || value === null) return false\n\tconst record = value as Record<string, unknown>\n\treturn record.type === 'panel-init' && typeof record.tabId === 'number'\n}\n\nfunction isContentEventMessage(value: unknown): value is { type: 'kora-event'; payload: unknown } {\n\tif (typeof value !== 'object' || value === null) return false\n\tconst record = value as Record<string, unknown>\n\treturn record.type === 'kora-event' && 'payload' in record\n}\n","import { PortRouter, type ExtensionPort } from './port-router'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nconst runtime = chrome?.runtime\n\nif (runtime?.onConnect) {\n\tconst router = new PortRouter()\n\truntime.onConnect.addListener((port: ExtensionPort) => {\n\t\trouter.handleConnection(port)\n\t})\n}\n"],"mappings":";AAoBO,IAAM,aAAN,MAAiB;AAAA,EACN,eAAe,oBAAI,IAAyB;AAAA,EAC5C,iBAAiB,oBAAI,IAA2B;AAAA,EAEjE,iBAAiB,MAA2B;AAC3C,QAAI,KAAK,SAAS,cAAc;AAC/B,WAAK,YAAY,IAAI;AACrB;AAAA,IACD;AAEA,QAAI,KAAK,SAAS,gBAAgB;AACjC,WAAK,cAAc,IAAI;AAAA,IACxB;AAAA,EACD;AAAA,EAEQ,YAAY,MAA2B;AAC9C,SAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAI,CAAC,mBAAmB,OAAO,EAAG;AAElC,WAAK,aAAa,IAAI,QAAQ,OAAO,EAAE,OAAO,QAAQ,OAAO,KAAK,CAAC;AAAA,IACpE,CAAC;AAED,SAAK,aAAa,YAAY,MAAM;AACnC,iBAAW,CAAC,OAAO,MAAM,KAAK,KAAK,cAAc;AAChD,YAAI,OAAO,SAAS,MAAM;AACzB,eAAK,aAAa,OAAO,KAAK;AAAA,QAC/B;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF;AAAA,EAEQ,cAAc,MAA2B;AAChD,UAAM,QAAQ,KAAK,QAAQ,KAAK;AAChC,QAAI,OAAO,UAAU,UAAU;AAC9B;AAAA,IACD;AAEA,SAAK,eAAe,IAAI,OAAO,IAAI;AAEnC,SAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAI,CAAC,sBAAsB,OAAO,EAAG;AAErC,YAAM,QAAQ,KAAK,aAAa,IAAI,KAAK;AACzC,UAAI,CAAC,MAAO;AAEZ,YAAM,KAAK,YAAY,EAAE,MAAM,cAAc,SAAS,QAAQ,QAAQ,CAAC;AAAA,IACxE,CAAC;AAED,SAAK,aAAa,YAAY,MAAM;AACnC,WAAK,eAAe,OAAO,KAAK;AAAA,IACjC,CAAC;AAAA,EACF;AACD;AAEA,SAAS,mBAAmB,OAAgE;AAC3F,MAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;AACxD,QAAM,SAAS;AACf,SAAO,OAAO,SAAS,gBAAgB,OAAO,OAAO,UAAU;AAChE;AAEA,SAAS,sBAAsB,OAAmE;AACjG,MAAI,OAAO,UAAU,YAAY,UAAU,KAAM,QAAO;AACxD,QAAM,SAAS;AACf,SAAO,OAAO,SAAS,gBAAgB,aAAa;AACrD;;;AC9EA,IAAM,UAAU,QAAQ;AAExB,IAAI,SAAS,WAAW;AACvB,QAAM,SAAS,IAAI,WAAW;AAC9B,UAAQ,UAAU,YAAY,CAAC,SAAwB;AACtD,WAAO,iBAAiB,IAAI;AAAA,EAC7B,CAAC;AACF;","names":[]}

package/dist/extension/content-script.cjs

@@ -1,7 +1,7 @@
 "use strict";
 
 // src/extension/content-script.ts
-var runtime = globalThis.chrome?.runtime;
+var runtime = chrome?.runtime;
 if (runtime) {
   const port = runtime.connect({ name: "kora-content" });
   window.addEventListener("message", (event) => {

package/dist/extension/content-script.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/extension/content-script.ts"],"sourcesContent":["import type { TimestampedEvent } from '../types'\n\ninterface RuntimePort {\n\tpostMessage(message: unknown): void\n}\n\ninterface RuntimeLike {\n\tconnect(info: { name: string }): RuntimePort\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\n\nif (runtime) {\n\tconst port = runtime.connect({ name: 'kora-content' })\n\n\twindow.addEventListener('message', (event: MessageEvent) => {\n\t\tconst data = event.data as { source?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!data || data.source !== 'kora-devtools' || !data.payload) {\n\t\t\treturn\n\t\t}\n\n\t\tport.postMessage({\n\t\t\ttype: 'kora-event',\n\t\t\tpayload: data.payload,\n\t\t})\n\t})\n}\n"],"mappings":";;;AAUA,IAAM,UAAW,WAAsD,QAAQ;AAE/E,IAAI,SAAS;AACZ,QAAM,OAAO,QAAQ,QAAQ,EAAE,MAAM,eAAe,CAAC;AAErD,SAAO,iBAAiB,WAAW,CAAC,UAAwB;AAC3D,UAAM,OAAO,MAAM;AACnB,QAAI,CAAC,QAAQ,KAAK,WAAW,mBAAmB,CAAC,KAAK,SAAS;AAC9D;AAAA,IACD;AAEA,SAAK,YAAY;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,IACf,CAAC;AAAA,EACF,CAAC;AACF;","names":[]}
+{"version":3,"sources":["../../src/extension/content-script.ts"],"sourcesContent":["import type { TimestampedEvent } from '../types'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nconst runtime = chrome?.runtime\n\nif (runtime) {\n\tconst port = runtime.connect({ name: 'kora-content' })\n\n\twindow.addEventListener('message', (event: MessageEvent) => {\n\t\tconst data = event.data as { source?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!data || data.source !== 'kora-devtools' || !data.payload) {\n\t\t\treturn\n\t\t}\n\n\t\tport.postMessage({\n\t\t\ttype: 'kora-event',\n\t\t\tpayload: data.payload,\n\t\t})\n\t})\n}\n"],"mappings":";;;AAMA,IAAM,UAAU,QAAQ;AAExB,IAAI,SAAS;AACZ,QAAM,OAAO,QAAQ,QAAQ,EAAE,MAAM,eAAe,CAAC;AAErD,SAAO,iBAAiB,WAAW,CAAC,UAAwB;AAC3D,UAAM,OAAO,MAAM;AACnB,QAAI,CAAC,QAAQ,KAAK,WAAW,mBAAmB,CAAC,KAAK,SAAS;AAC9D;AAAA,IACD;AAEA,SAAK,YAAY;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,IACf,CAAC;AAAA,EACF,CAAC;AACF;","names":[]}

package/dist/extension/content-script.js

@@ -1,5 +1,5 @@
 // src/extension/content-script.ts
-var runtime = globalThis.chrome?.runtime;
+var runtime = chrome?.runtime;
 if (runtime) {
   const port = runtime.connect({ name: "kora-content" });
   window.addEventListener("message", (event) => {

package/dist/extension/content-script.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/extension/content-script.ts"],"sourcesContent":["import type { TimestampedEvent } from '../types'\n\ninterface RuntimePort {\n\tpostMessage(message: unknown): void\n}\n\ninterface RuntimeLike {\n\tconnect(info: { name: string }): RuntimePort\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\n\nif (runtime) {\n\tconst port = runtime.connect({ name: 'kora-content' })\n\n\twindow.addEventListener('message', (event: MessageEvent) => {\n\t\tconst data = event.data as { source?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!data || data.source !== 'kora-devtools' || !data.payload) {\n\t\t\treturn\n\t\t}\n\n\t\tport.postMessage({\n\t\t\ttype: 'kora-event',\n\t\t\tpayload: data.payload,\n\t\t})\n\t})\n}\n"],"mappings":";AAUA,IAAM,UAAW,WAAsD,QAAQ;AAE/E,IAAI,SAAS;AACZ,QAAM,OAAO,QAAQ,QAAQ,EAAE,MAAM,eAAe,CAAC;AAErD,SAAO,iBAAiB,WAAW,CAAC,UAAwB;AAC3D,UAAM,OAAO,MAAM;AACnB,QAAI,CAAC,QAAQ,KAAK,WAAW,mBAAmB,CAAC,KAAK,SAAS;AAC9D;AAAA,IACD;AAEA,SAAK,YAAY;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,IACf,CAAC;AAAA,EACF,CAAC;AACF;","names":[]}
+{"version":3,"sources":["../../src/extension/content-script.ts"],"sourcesContent":["import type { TimestampedEvent } from '../types'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nconst runtime = chrome?.runtime\n\nif (runtime) {\n\tconst port = runtime.connect({ name: 'kora-content' })\n\n\twindow.addEventListener('message', (event: MessageEvent) => {\n\t\tconst data = event.data as { source?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!data || data.source !== 'kora-devtools' || !data.payload) {\n\t\t\treturn\n\t\t}\n\n\t\tport.postMessage({\n\t\t\ttype: 'kora-event',\n\t\t\tpayload: data.payload,\n\t\t})\n\t})\n}\n"],"mappings":";AAMA,IAAM,UAAU,QAAQ;AAExB,IAAI,SAAS;AACZ,QAAM,OAAO,QAAQ,QAAQ,EAAE,MAAM,eAAe,CAAC;AAErD,SAAO,iBAAiB,WAAW,CAAC,UAAwB;AAC3D,UAAM,OAAO,MAAM;AACnB,QAAI,CAAC,QAAQ,KAAK,WAAW,mBAAmB,CAAC,KAAK,SAAS;AAC9D;AAAA,IACD;AAEA,SAAK,YAAY;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,IACf,CAAC;AAAA,EACF,CAAC;AACF;","names":[]}

package/dist/extension/devtools.cjs

@@ -1,9 +1,8 @@
 "use strict";
 
 // src/extension/devtools.ts
-var devtools = globalThis.chrome?.devtools;
-if (devtools?.panels) {
-  devtools.panels.create("Kora", "", "devtools-page.html", () => {
+if (chrome?.devtools?.panels) {
+  chrome.devtools.panels.create("Kora", "", "devtools-page.html", () => {
   });
 }
 //# sourceMappingURL=devtools.cjs.map

package/dist/extension/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/extension/devtools.ts"],"sourcesContent":["interface DevtoolsLike {\n\tpanels: {\n\t\tcreate(\n\t\t\ttitle: string,\n\t\t\ticonPath: string,\n\t\t\tpagePath: string,\n\t\t\tcallback: () => void,\n\t\t): void\n\t}\n}\n\nconst devtools = (globalThis as { chrome?: { devtools?: DevtoolsLike } }).chrome?.devtools\n\nif (devtools?.panels) {\n\tdevtools.panels.create('Kora', '', 'devtools-page.html', () => {})\n}\n"],"mappings":";;;AAWA,IAAM,WAAY,WAAwD,QAAQ;AAElF,IAAI,UAAU,QAAQ;AACrB,WAAS,OAAO,OAAO,QAAQ,IAAI,sBAAsB,MAAM;AAAA,EAAC,CAAC;AAClE;","names":[]}
+{"version":3,"sources":["../../src/extension/devtools.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nif (chrome?.devtools?.panels) {\n\tchrome.devtools.panels.create('Kora', '', 'devtools-page.html', () => {})\n}\n"],"mappings":";;;AAIA,IAAI,QAAQ,UAAU,QAAQ;AAC7B,SAAO,SAAS,OAAO,OAAO,QAAQ,IAAI,sBAAsB,MAAM;AAAA,EAAC,CAAC;AACzE;","names":[]}

package/dist/extension/devtools.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<html lang="en">
+  <head><meta charset="utf-8" /></head>
+  <body>
+    <script type="module" src="./devtools.js"></script>
+  </body>
+</html>

package/dist/extension/devtools.js

@@ -1,7 +1,6 @@
 // src/extension/devtools.ts
-var devtools = globalThis.chrome?.devtools;
-if (devtools?.panels) {
-  devtools.panels.create("Kora", "", "devtools-page.html", () => {
+if (chrome?.devtools?.panels) {
+  chrome.devtools.panels.create("Kora", "", "devtools-page.html", () => {
   });
 }
 //# sourceMappingURL=devtools.js.map

package/dist/extension/devtools.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/extension/devtools.ts"],"sourcesContent":["interface DevtoolsLike {\n\tpanels: {\n\t\tcreate(\n\t\t\ttitle: string,\n\t\t\ticonPath: string,\n\t\t\tpagePath: string,\n\t\t\tcallback: () => void,\n\t\t): void\n\t}\n}\n\nconst devtools = (globalThis as { chrome?: { devtools?: DevtoolsLike } }).chrome?.devtools\n\nif (devtools?.panels) {\n\tdevtools.panels.create('Kora', '', 'devtools-page.html', () => {})\n}\n"],"mappings":";AAWA,IAAM,WAAY,WAAwD,QAAQ;AAElF,IAAI,UAAU,QAAQ;AACrB,WAAS,OAAO,OAAO,QAAQ,IAAI,sBAAsB,MAAM;AAAA,EAAC,CAAC;AAClE;","names":[]}
+{"version":3,"sources":["../../src/extension/devtools.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nif (chrome?.devtools?.panels) {\n\tchrome.devtools.panels.create('Kora', '', 'devtools-page.html', () => {})\n}\n"],"mappings":";AAIA,IAAI,QAAQ,UAAU,QAAQ;AAC7B,SAAO,SAAS,OAAO,OAAO,QAAQ,IAAI,sBAAsB,MAAM;AAAA,EAAC,CAAC;AACzE;","names":[]}

package/dist/extension/manifest.json

@@ -9,7 +9,7 @@
     "service_worker": "background.js",
     "type": "module"
   },
-  "devtools_page": "devtools.js",
+  "devtools_page": "devtools.html",
   "content_scripts": [
     {
       "matches": ["<all_urls>"],

package/dist/extension/panel.cjs

@@ -203,16 +203,16 @@ var extensionRoot = document.getElementById("kora-devtools-root");
 if (!extensionRoot) {
   throw new Error("Missing #kora-devtools-root element");
 }
-var runtime = globalThis.chrome?.runtime;
-var devtools = globalThis.chrome?.devtools;
 var events = [];
+var runtime = chrome?.runtime;
+var devtools = chrome?.devtools;
 if (runtime && devtools) {
+  const tabId = devtools.inspectedWindow.tabId;
   const port = runtime.connect({ name: "kora-panel" });
-  port.postMessage({ type: "panel-init", tabId: devtools.inspectedWindow.tabId });
+  port.postMessage({ type: "panel-init", tabId });
   port.onMessage.addListener((message) => {
-    const typed = message;
-    if (!typed || typed.type !== "kora-event" || !typed.payload) return;
-    events.push(typed.payload);
+    if (!message || message.type !== "kora-event" || !message.payload) return;
+    events.push(message.payload);
     renderDevtoolsPanel(extensionRoot, events);
   });
 }

package/dist/extension/panel.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/panel-state.ts","../../src/ui/panel.ts","../../src/extension/panel.ts"],"sourcesContent":["import type { KoraEvent, Operation } from '@korajs/core'\nimport type { TimestampedEvent } from '../types'\n\nexport interface TimelineItem {\n\tid: number\n\ttype: KoraEvent['type']\n\tlabel: string\n\tcolor: string\n\treceivedAt: number\n\tdependsOn: string[]\n}\n\nexport interface ConflictItem {\n\tid: number\n\ttimestamp: number\n\tcollection: string\n\tfield: string\n\tstrategy: string\n\ttier: 1 | 2 | 3\n\tinputA: unknown\n\tinputB: unknown\n\toutput: unknown\n\tconstraintViolated: string | null\n}\n\nexport interface OperationItem {\n\tid: number\n\ttimestamp: number\n\toperationId: string\n\tcollection: string\n\trecordId: string\n\topType: Operation['type']\n\tdata: Record<string, unknown> | null\n\tcausalDeps: string[]\n\tnodeId: string\n\tsequenceNumber: number\n}\n\nexport interface NetworkStatusModel {\n\tconnected: boolean\n\tquality: string | null\n\tpendingAcks: number\n\tlastSyncAt: number | null\n\tsentOps: number\n\treceivedOps: number\n\tversionVector: Array<{ nodeId: string; sequenceNumber: number }>\n}\n\nexport interface DevtoolsPanelModel {\n\ttimeline: TimelineItem[]\n\tconflicts: ConflictItem[]\n\toperations: OperationItem[]\n\tnetwork: NetworkStatusModel\n}\n\nexport function buildPanelModel(events: readonly TimestampedEvent[]): DevtoolsPanelModel {\n\tconst timeline = events.map((entry) => ({\n\t\tid: entry.id,\n\t\ttype: entry.event.type,\n\t\tlabel: timelineLabel(entry.event),\n\t\tcolor: timelineColor(entry.event.type),\n\t\treceivedAt: entry.receivedAt,\n\t\tdependsOn: extractCausalDependencies(entry.event),\n\t}))\n\n\tconst conflicts = events\n\t\t.flatMap((entry) => {\n\t\t\tif (entry.event.type !== 'merge:completed' && entry.event.type !== 'merge:conflict') {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\tconst trace = entry.event.trace\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tid: entry.id,\n\t\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\t\tcollection: trace.operationA.collection,\n\t\t\t\t\tfield: trace.field,\n\t\t\t\t\tstrategy: trace.strategy,\n\t\t\t\t\ttier: trace.tier,\n\t\t\t\t\tinputA: trace.inputA,\n\t\t\t\t\tinputB: trace.inputB,\n\t\t\t\t\toutput: trace.output,\n\t\t\t\t\tconstraintViolated: trace.constraintViolated,\n\t\t\t\t},\n\t\t\t]\n\t\t})\n\n\tconst operations = events\n\t\t.map((entry) => {\n\t\t\tconst operation = extractOperation(entry.event)\n\t\t\tif (!operation) return null\n\n\t\t\treturn {\n\t\t\t\tid: entry.id,\n\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\toperationId: operation.id,\n\t\t\t\tcollection: operation.collection,\n\t\t\t\trecordId: operation.recordId,\n\t\t\t\topType: operation.type,\n\t\t\t\tdata: operation.data,\n\t\t\t\tcausalDeps: operation.causalDeps,\n\t\t\t\tnodeId: operation.nodeId,\n\t\t\t\tsequenceNumber: operation.sequenceNumber,\n\t\t\t}\n\t\t})\n\t\t.filter((item): item is OperationItem => item !== null)\n\n\tconst network = buildNetworkStatus(events, operations)\n\n\treturn {\n\t\ttimeline,\n\t\tconflicts,\n\t\toperations,\n\t\tnetwork,\n\t}\n}\n\nfunction buildNetworkStatus(\n\tevents: readonly TimestampedEvent[],\n\toperations: readonly OperationItem[],\n): NetworkStatusModel {\n\tlet connected = false\n\tlet quality: string | null = null\n\tlet pendingAcks = 0\n\tlet lastSyncAt: number | null = null\n\tlet sentOps = 0\n\tlet receivedOps = 0\n\n\tfor (const entry of events) {\n\t\tswitch (entry.event.type) {\n\t\t\tcase 'sync:connected':\n\t\t\t\tconnected = true\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:disconnected':\n\t\t\t\tconnected = false\n\t\t\t\tbreak\n\t\t\tcase 'connection:quality':\n\t\t\t\tquality = entry.event.quality\n\t\t\t\tbreak\n\t\t\tcase 'sync:sent':\n\t\t\t\tsentOps += entry.event.operations.length\n\t\t\t\tpendingAcks += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:received':\n\t\t\t\treceivedOps += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:acknowledged':\n\t\t\t\tpendingAcks = Math.max(0, pendingAcks - 1)\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tconst vector = new Map<string, number>()\n\tfor (const operation of operations) {\n\t\tconst current = vector.get(operation.nodeId) ?? 0\n\t\tif (operation.sequenceNumber > current) {\n\t\t\tvector.set(operation.nodeId, operation.sequenceNumber)\n\t\t}\n\t}\n\n\treturn {\n\t\tconnected,\n\t\tquality,\n\t\tpendingAcks,\n\t\tlastSyncAt,\n\t\tsentOps,\n\t\treceivedOps,\n\t\tversionVector: [...vector.entries()]\n\t\t\t.map(([nodeId, sequenceNumber]) => ({ nodeId, sequenceNumber }))\n\t\t\t.sort((left, right) => left.nodeId.localeCompare(right.nodeId)),\n\t}\n}\n\nfunction timelineLabel(event: KoraEvent): string {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn `${event.operation.type} ${event.operation.collection}/${event.operation.recordId}`\n\t\tcase 'merge:started':\n\t\t\treturn `merge start ${event.operationA.collection}`\n\t\tcase 'merge:completed':\n\t\t\treturn `merge complete ${event.trace.field}`\n\t\tcase 'merge:conflict':\n\t\t\treturn `merge conflict ${event.trace.field}`\n\t\tcase 'constraint:violated':\n\t\t\treturn `constraint ${event.constraint}`\n\t\tcase 'sync:connected':\n\t\t\treturn `sync connected ${event.nodeId}`\n\t\tcase 'sync:disconnected':\n\t\t\treturn `sync disconnected`\n\t\tcase 'sync:sent':\n\t\t\treturn `sync sent ${event.batchSize}`\n\t\tcase 'sync:received':\n\t\t\treturn `sync received ${event.batchSize}`\n\t\tcase 'sync:acknowledged':\n\t\t\treturn `sync ack ${event.sequenceNumber}`\n\t\tcase 'query:subscribed':\n\t\t\treturn `query subscribed ${event.collection}`\n\t\tcase 'query:invalidated':\n\t\t\treturn `query invalidated ${event.queryId}`\n\t\tcase 'query:executed':\n\t\t\treturn `query executed ${event.queryId}`\n\t\tcase 'connection:quality':\n\t\t\treturn `connection ${event.quality}`\n\t}\n}\n\nfunction timelineColor(type: KoraEvent['type']): string {\n\tif (type.startsWith('operation:')) return '#22c55e'\n\tif (type.startsWith('sync:')) return '#a855f7'\n\tif (type.startsWith('merge:') || type.startsWith('constraint:')) return '#f59e0b'\n\tif (type.startsWith('query:')) return '#0ea5e9'\n\treturn '#64748b'\n}\n\nfunction extractCausalDependencies(event: KoraEvent): string[] {\n\tconst operation = extractOperation(event)\n\treturn operation?.causalDeps ?? []\n}\n\nfunction extractOperation(event: KoraEvent): Operation | null {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn event.operation\n\t\tcase 'query:invalidated':\n\t\t\treturn event.trigger\n\t\tdefault:\n\t\t\treturn null\n\t}\n}\n","import type { TimestampedEvent } from '../types'\nimport { buildPanelModel } from './panel-state'\n\nexport function renderDevtoolsPanel(target: HTMLElement, events: readonly TimestampedEvent[]): void {\n\tconst model = buildPanelModel(events)\n\n\ttarget.innerHTML = [\n\t\t'<section data-panel=\"timeline\"><h2>Sync Timeline</h2>',\n\t\t`<p>Total events: ${model.timeline.length}</p>`,\n\t\t'<ul>',\n\t\t...model.timeline.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li><span style=\"color:${item.color}\">${item.type}</span> · ${escapeHtml(item.label)}</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"conflicts\"><h2>Conflict Inspector</h2>',\n\t\t`<p>Conflicts: ${model.conflicts.length}</p>`,\n\t\t'<ul>',\n\t\t...model.conflicts\n\t\t\t.slice(-20)\n\t\t\t.map(\n\t\t\t\t(item) =>\n\t\t\t\t\t`<li>${escapeHtml(item.collection)}.${escapeHtml(item.field)} · ${escapeHtml(item.strategy)} · tier ${item.tier}</li>`,\n\t\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"operations\"><h2>Operation Log</h2>',\n\t\t`<p>Operations: ${model.operations.length}</p>`,\n\t\t'<ul>',\n\t\t...model.operations.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li>${escapeHtml(item.opType)} ${escapeHtml(item.collection)}/${escapeHtml(item.recordId)} (${escapeHtml(item.operationId)})</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"network\"><h2>Network Status</h2>',\n\t\t`<p>Connected: ${model.network.connected ? 'yes' : 'no'}</p>`,\n\t\t`<p>Pending ACKs: ${model.network.pendingAcks}</p>`,\n\t\t`<p>Sent ops: ${model.network.sentOps}</p>`,\n\t\t`<p>Received ops: ${model.network.receivedOps}</p>`,\n\t\t'</section>',\n\t].join('')\n}\n\nfunction escapeHtml(value: string): string {\n\treturn value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')\n}\n","import type { TimestampedEvent } from '../types'\nimport { renderDevtoolsPanel } from '../ui/panel'\n\ninterface RuntimePort {\n\tonMessage: {\n\t\taddListener(callback: (message: unknown) => void): void\n\t}\n\tpostMessage(message: unknown): void\n}\n\ninterface RuntimeLike {\n\tconnect(info: { name: string }): RuntimePort\n}\n\ninterface DevtoolsLike {\n\tinspectedWindow: { tabId: number }\n}\n\nconst extensionRoot = document.getElementById('kora-devtools-root')\nif (!extensionRoot) {\n\tthrow new Error('Missing #kora-devtools-root element')\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\nconst devtools = (globalThis as { chrome?: { devtools?: DevtoolsLike } }).chrome?.devtools\n\nconst events: TimestampedEvent[] = []\n\nif (runtime && devtools) {\n\tconst port = runtime.connect({ name: 'kora-panel' })\n\tport.postMessage({ type: 'panel-init', tabId: devtools.inspectedWindow.tabId })\n\n\tport.onMessage.addListener((message) => {\n\t\tconst typed = message as { type?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!typed || typed.type !== 'kora-event' || !typed.payload) return\n\n\t\tevents.push(typed.payload)\n\t\trenderDevtoolsPanel(extensionRoot, events)\n\t})\n}\n\nrenderDevtoolsPanel(extensionRoot, events)\n"],"mappings":"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","names":["events","events"]}
+{"version":3,"sources":["../../src/ui/panel-state.ts","../../src/ui/panel.ts","../../src/extension/panel.ts"],"sourcesContent":["import type { KoraEvent, Operation } from '@korajs/core'\nimport type { TimestampedEvent } from '../types'\n\nexport interface TimelineItem {\n\tid: number\n\ttype: KoraEvent['type']\n\tlabel: string\n\tcolor: string\n\treceivedAt: number\n\tdependsOn: string[]\n}\n\nexport interface ConflictItem {\n\tid: number\n\ttimestamp: number\n\tcollection: string\n\tfield: string\n\tstrategy: string\n\ttier: 1 | 2 | 3\n\tinputA: unknown\n\tinputB: unknown\n\toutput: unknown\n\tconstraintViolated: string | null\n}\n\nexport interface OperationItem {\n\tid: number\n\ttimestamp: number\n\toperationId: string\n\tcollection: string\n\trecordId: string\n\topType: Operation['type']\n\tdata: Record<string, unknown> | null\n\tcausalDeps: string[]\n\tnodeId: string\n\tsequenceNumber: number\n}\n\nexport interface NetworkStatusModel {\n\tconnected: boolean\n\tquality: string | null\n\tpendingAcks: number\n\tlastSyncAt: number | null\n\tsentOps: number\n\treceivedOps: number\n\tversionVector: Array<{ nodeId: string; sequenceNumber: number }>\n}\n\nexport interface DevtoolsPanelModel {\n\ttimeline: TimelineItem[]\n\tconflicts: ConflictItem[]\n\toperations: OperationItem[]\n\tnetwork: NetworkStatusModel\n}\n\nexport function buildPanelModel(events: readonly TimestampedEvent[]): DevtoolsPanelModel {\n\tconst timeline = events.map((entry) => ({\n\t\tid: entry.id,\n\t\ttype: entry.event.type,\n\t\tlabel: timelineLabel(entry.event),\n\t\tcolor: timelineColor(entry.event.type),\n\t\treceivedAt: entry.receivedAt,\n\t\tdependsOn: extractCausalDependencies(entry.event),\n\t}))\n\n\tconst conflicts = events\n\t\t.flatMap((entry) => {\n\t\t\tif (entry.event.type !== 'merge:completed' && entry.event.type !== 'merge:conflict') {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\tconst trace = entry.event.trace\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tid: entry.id,\n\t\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\t\tcollection: trace.operationA.collection,\n\t\t\t\t\tfield: trace.field,\n\t\t\t\t\tstrategy: trace.strategy,\n\t\t\t\t\ttier: trace.tier,\n\t\t\t\t\tinputA: trace.inputA,\n\t\t\t\t\tinputB: trace.inputB,\n\t\t\t\t\toutput: trace.output,\n\t\t\t\t\tconstraintViolated: trace.constraintViolated,\n\t\t\t\t},\n\t\t\t]\n\t\t})\n\n\tconst operations = events\n\t\t.map((entry) => {\n\t\t\tconst operation = extractOperation(entry.event)\n\t\t\tif (!operation) return null\n\n\t\t\treturn {\n\t\t\t\tid: entry.id,\n\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\toperationId: operation.id,\n\t\t\t\tcollection: operation.collection,\n\t\t\t\trecordId: operation.recordId,\n\t\t\t\topType: operation.type,\n\t\t\t\tdata: operation.data,\n\t\t\t\tcausalDeps: operation.causalDeps,\n\t\t\t\tnodeId: operation.nodeId,\n\t\t\t\tsequenceNumber: operation.sequenceNumber,\n\t\t\t}\n\t\t})\n\t\t.filter((item): item is OperationItem => item !== null)\n\n\tconst network = buildNetworkStatus(events, operations)\n\n\treturn {\n\t\ttimeline,\n\t\tconflicts,\n\t\toperations,\n\t\tnetwork,\n\t}\n}\n\nfunction buildNetworkStatus(\n\tevents: readonly TimestampedEvent[],\n\toperations: readonly OperationItem[],\n): NetworkStatusModel {\n\tlet connected = false\n\tlet quality: string | null = null\n\tlet pendingAcks = 0\n\tlet lastSyncAt: number | null = null\n\tlet sentOps = 0\n\tlet receivedOps = 0\n\n\tfor (const entry of events) {\n\t\tswitch (entry.event.type) {\n\t\t\tcase 'sync:connected':\n\t\t\t\tconnected = true\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:disconnected':\n\t\t\t\tconnected = false\n\t\t\t\tbreak\n\t\t\tcase 'connection:quality':\n\t\t\t\tquality = entry.event.quality\n\t\t\t\tbreak\n\t\t\tcase 'sync:sent':\n\t\t\t\tsentOps += entry.event.operations.length\n\t\t\t\tpendingAcks += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:received':\n\t\t\t\treceivedOps += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:acknowledged':\n\t\t\t\tpendingAcks = Math.max(0, pendingAcks - 1)\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tconst vector = new Map<string, number>()\n\tfor (const operation of operations) {\n\t\tconst current = vector.get(operation.nodeId) ?? 0\n\t\tif (operation.sequenceNumber > current) {\n\t\t\tvector.set(operation.nodeId, operation.sequenceNumber)\n\t\t}\n\t}\n\n\treturn {\n\t\tconnected,\n\t\tquality,\n\t\tpendingAcks,\n\t\tlastSyncAt,\n\t\tsentOps,\n\t\treceivedOps,\n\t\tversionVector: [...vector.entries()]\n\t\t\t.map(([nodeId, sequenceNumber]) => ({ nodeId, sequenceNumber }))\n\t\t\t.sort((left, right) => left.nodeId.localeCompare(right.nodeId)),\n\t}\n}\n\nfunction timelineLabel(event: KoraEvent): string {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn `${event.operation.type} ${event.operation.collection}/${event.operation.recordId}`\n\t\tcase 'merge:started':\n\t\t\treturn `merge start ${event.operationA.collection}`\n\t\tcase 'merge:completed':\n\t\t\treturn `merge complete ${event.trace.field}`\n\t\tcase 'merge:conflict':\n\t\t\treturn `merge conflict ${event.trace.field}`\n\t\tcase 'constraint:violated':\n\t\t\treturn `constraint ${event.constraint}`\n\t\tcase 'sync:connected':\n\t\t\treturn `sync connected ${event.nodeId}`\n\t\tcase 'sync:disconnected':\n\t\t\treturn `sync disconnected`\n\t\tcase 'sync:sent':\n\t\t\treturn `sync sent ${event.batchSize}`\n\t\tcase 'sync:received':\n\t\t\treturn `sync received ${event.batchSize}`\n\t\tcase 'sync:acknowledged':\n\t\t\treturn `sync ack ${event.sequenceNumber}`\n\t\tcase 'query:subscribed':\n\t\t\treturn `query subscribed ${event.collection}`\n\t\tcase 'query:invalidated':\n\t\t\treturn `query invalidated ${event.queryId}`\n\t\tcase 'query:executed':\n\t\t\treturn `query executed ${event.queryId}`\n\t\tcase 'connection:quality':\n\t\t\treturn `connection ${event.quality}`\n\t}\n}\n\nfunction timelineColor(type: KoraEvent['type']): string {\n\tif (type.startsWith('operation:')) return '#22c55e'\n\tif (type.startsWith('sync:')) return '#a855f7'\n\tif (type.startsWith('merge:') || type.startsWith('constraint:')) return '#f59e0b'\n\tif (type.startsWith('query:')) return '#0ea5e9'\n\treturn '#64748b'\n}\n\nfunction extractCausalDependencies(event: KoraEvent): string[] {\n\tconst operation = extractOperation(event)\n\treturn operation?.causalDeps ?? []\n}\n\nfunction extractOperation(event: KoraEvent): Operation | null {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn event.operation\n\t\tcase 'query:invalidated':\n\t\t\treturn event.trigger\n\t\tdefault:\n\t\t\treturn null\n\t}\n}\n","import type { TimestampedEvent } from '../types'\nimport { buildPanelModel } from './panel-state'\n\nexport function renderDevtoolsPanel(target: HTMLElement, events: readonly TimestampedEvent[]): void {\n\tconst model = buildPanelModel(events)\n\n\ttarget.innerHTML = [\n\t\t'<section data-panel=\"timeline\"><h2>Sync Timeline</h2>',\n\t\t`<p>Total events: ${model.timeline.length}</p>`,\n\t\t'<ul>',\n\t\t...model.timeline.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li><span style=\"color:${item.color}\">${item.type}</span> · ${escapeHtml(item.label)}</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"conflicts\"><h2>Conflict Inspector</h2>',\n\t\t`<p>Conflicts: ${model.conflicts.length}</p>`,\n\t\t'<ul>',\n\t\t...model.conflicts\n\t\t\t.slice(-20)\n\t\t\t.map(\n\t\t\t\t(item) =>\n\t\t\t\t\t`<li>${escapeHtml(item.collection)}.${escapeHtml(item.field)} · ${escapeHtml(item.strategy)} · tier ${item.tier}</li>`,\n\t\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"operations\"><h2>Operation Log</h2>',\n\t\t`<p>Operations: ${model.operations.length}</p>`,\n\t\t'<ul>',\n\t\t...model.operations.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li>${escapeHtml(item.opType)} ${escapeHtml(item.collection)}/${escapeHtml(item.recordId)} (${escapeHtml(item.operationId)})</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"network\"><h2>Network Status</h2>',\n\t\t`<p>Connected: ${model.network.connected ? 'yes' : 'no'}</p>`,\n\t\t`<p>Pending ACKs: ${model.network.pendingAcks}</p>`,\n\t\t`<p>Sent ops: ${model.network.sentOps}</p>`,\n\t\t`<p>Received ops: ${model.network.receivedOps}</p>`,\n\t\t'</section>',\n\t].join('')\n}\n\nfunction escapeHtml(value: string): string {\n\treturn value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')\n}\n","import type { TimestampedEvent } from '../types'\nimport { renderDevtoolsPanel } from '../ui/panel'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nconst extensionRoot = document.getElementById('kora-devtools-root')\nif (!extensionRoot) {\n\tthrow new Error('Missing #kora-devtools-root element')\n}\n\nconst events: TimestampedEvent[] = []\n\nconst runtime = chrome?.runtime\nconst devtools = chrome?.devtools\n\nif (runtime && devtools) {\n\tconst tabId = devtools.inspectedWindow.tabId\n\tconst port = runtime.connect({ name: 'kora-panel' })\n\tport.postMessage({ type: 'panel-init', tabId })\n\n\tport.onMessage.addListener((message: { type?: string; payload?: TimestampedEvent }) => {\n\t\tif (!message || message.type !== 'kora-event' || !message.payload) return\n\n\t\tevents.push(message.payload)\n\t\trenderDevtoolsPanel(extensionRoot, events)\n\t})\n}\n\nrenderDevtoolsPanel(extensionRoot, events)\n"],"mappings":"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","names":["events","events"]}

package/dist/extension/panel.js

@@ -1,22 +1,216 @@
-import {
-  renderDevtoolsPanel
-} from "../chunk-4ZQ2RTZM.js";
+// src/ui/panel-state.ts
+function buildPanelModel(events2) {
+  const timeline = events2.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 = events2.flatMap((entry) => {
+    if (entry.event.type !== "merge:completed" && entry.event.type !== "merge:conflict") {
+      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 = events2.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(events2, operations);
+  return {
+    timeline,
+    conflicts,
+    operations,
+    network
+  };
+}
+function buildNetworkStatus(events2, operations) {
+  let connected = false;
+  let quality = null;
+  let pendingAcks = 0;
+  let lastSyncAt = null;
+  let sentOps = 0;
+  let receivedOps = 0;
+  for (const entry of events2) {
+    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
+function renderDevtoolsPanel(target, events2) {
+  const model = buildPanelModel(events2);
+  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("");
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
 
 // src/extension/panel.ts
 var extensionRoot = document.getElementById("kora-devtools-root");
 if (!extensionRoot) {
   throw new Error("Missing #kora-devtools-root element");
 }
-var runtime = globalThis.chrome?.runtime;
-var devtools = globalThis.chrome?.devtools;
 var events = [];
+var runtime = chrome?.runtime;
+var devtools = chrome?.devtools;
 if (runtime && devtools) {
+  const tabId = devtools.inspectedWindow.tabId;
   const port = runtime.connect({ name: "kora-panel" });
-  port.postMessage({ type: "panel-init", tabId: devtools.inspectedWindow.tabId });
+  port.postMessage({ type: "panel-init", tabId });
   port.onMessage.addListener((message) => {
-    const typed = message;
-    if (!typed || typed.type !== "kora-event" || !typed.payload) return;
-    events.push(typed.payload);
+    if (!message || message.type !== "kora-event" || !message.payload) return;
+    events.push(message.payload);
     renderDevtoolsPanel(extensionRoot, events);
   });
 }

package/dist/extension/panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/extension/panel.ts"],"sourcesContent":["import type { TimestampedEvent } from '../types'\nimport { renderDevtoolsPanel } from '../ui/panel'\n\ninterface RuntimePort {\n\tonMessage: {\n\t\taddListener(callback: (message: unknown) => void): void\n\t}\n\tpostMessage(message: unknown): void\n}\n\ninterface RuntimeLike {\n\tconnect(info: { name: string }): RuntimePort\n}\n\ninterface DevtoolsLike {\n\tinspectedWindow: { tabId: number }\n}\n\nconst extensionRoot = document.getElementById('kora-devtools-root')\nif (!extensionRoot) {\n\tthrow new Error('Missing #kora-devtools-root element')\n}\n\nconst runtime = (globalThis as { chrome?: { runtime?: RuntimeLike } }).chrome?.runtime\nconst devtools = (globalThis as { chrome?: { devtools?: DevtoolsLike } }).chrome?.devtools\n\nconst events: TimestampedEvent[] = []\n\nif (runtime && devtools) {\n\tconst port = runtime.connect({ name: 'kora-panel' })\n\tport.postMessage({ type: 'panel-init', tabId: devtools.inspectedWindow.tabId })\n\n\tport.onMessage.addListener((message) => {\n\t\tconst typed = message as { type?: string; payload?: TimestampedEvent } | undefined\n\t\tif (!typed || typed.type !== 'kora-event' || !typed.payload) return\n\n\t\tevents.push(typed.payload)\n\t\trenderDevtoolsPanel(extensionRoot, events)\n\t})\n}\n\nrenderDevtoolsPanel(extensionRoot, events)\n"],"mappings":";;;;;AAkBA,IAAM,gBAAgB,SAAS,eAAe,oBAAoB;AAClE,IAAI,CAAC,eAAe;AACnB,QAAM,IAAI,MAAM,qCAAqC;AACtD;AAEA,IAAM,UAAW,WAAsD,QAAQ;AAC/E,IAAM,WAAY,WAAwD,QAAQ;AAElF,IAAM,SAA6B,CAAC;AAEpC,IAAI,WAAW,UAAU;AACxB,QAAM,OAAO,QAAQ,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAK,YAAY,EAAE,MAAM,cAAc,OAAO,SAAS,gBAAgB,MAAM,CAAC;AAE9E,OAAK,UAAU,YAAY,CAAC,YAAY;AACvC,UAAM,QAAQ;AACd,QAAI,CAAC,SAAS,MAAM,SAAS,gBAAgB,CAAC,MAAM,QAAS;AAE7D,WAAO,KAAK,MAAM,OAAO;AACzB,wBAAoB,eAAe,MAAM;AAAA,EAC1C,CAAC;AACF;AAEA,oBAAoB,eAAe,MAAM;","names":[]}
+{"version":3,"sources":["../../src/ui/panel-state.ts","../../src/ui/panel.ts","../../src/extension/panel.ts"],"sourcesContent":["import type { KoraEvent, Operation } from '@korajs/core'\nimport type { TimestampedEvent } from '../types'\n\nexport interface TimelineItem {\n\tid: number\n\ttype: KoraEvent['type']\n\tlabel: string\n\tcolor: string\n\treceivedAt: number\n\tdependsOn: string[]\n}\n\nexport interface ConflictItem {\n\tid: number\n\ttimestamp: number\n\tcollection: string\n\tfield: string\n\tstrategy: string\n\ttier: 1 | 2 | 3\n\tinputA: unknown\n\tinputB: unknown\n\toutput: unknown\n\tconstraintViolated: string | null\n}\n\nexport interface OperationItem {\n\tid: number\n\ttimestamp: number\n\toperationId: string\n\tcollection: string\n\trecordId: string\n\topType: Operation['type']\n\tdata: Record<string, unknown> | null\n\tcausalDeps: string[]\n\tnodeId: string\n\tsequenceNumber: number\n}\n\nexport interface NetworkStatusModel {\n\tconnected: boolean\n\tquality: string | null\n\tpendingAcks: number\n\tlastSyncAt: number | null\n\tsentOps: number\n\treceivedOps: number\n\tversionVector: Array<{ nodeId: string; sequenceNumber: number }>\n}\n\nexport interface DevtoolsPanelModel {\n\ttimeline: TimelineItem[]\n\tconflicts: ConflictItem[]\n\toperations: OperationItem[]\n\tnetwork: NetworkStatusModel\n}\n\nexport function buildPanelModel(events: readonly TimestampedEvent[]): DevtoolsPanelModel {\n\tconst timeline = events.map((entry) => ({\n\t\tid: entry.id,\n\t\ttype: entry.event.type,\n\t\tlabel: timelineLabel(entry.event),\n\t\tcolor: timelineColor(entry.event.type),\n\t\treceivedAt: entry.receivedAt,\n\t\tdependsOn: extractCausalDependencies(entry.event),\n\t}))\n\n\tconst conflicts = events\n\t\t.flatMap((entry) => {\n\t\t\tif (entry.event.type !== 'merge:completed' && entry.event.type !== 'merge:conflict') {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\tconst trace = entry.event.trace\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tid: entry.id,\n\t\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\t\tcollection: trace.operationA.collection,\n\t\t\t\t\tfield: trace.field,\n\t\t\t\t\tstrategy: trace.strategy,\n\t\t\t\t\ttier: trace.tier,\n\t\t\t\t\tinputA: trace.inputA,\n\t\t\t\t\tinputB: trace.inputB,\n\t\t\t\t\toutput: trace.output,\n\t\t\t\t\tconstraintViolated: trace.constraintViolated,\n\t\t\t\t},\n\t\t\t]\n\t\t})\n\n\tconst operations = events\n\t\t.map((entry) => {\n\t\t\tconst operation = extractOperation(entry.event)\n\t\t\tif (!operation) return null\n\n\t\t\treturn {\n\t\t\t\tid: entry.id,\n\t\t\t\ttimestamp: entry.receivedAt,\n\t\t\t\toperationId: operation.id,\n\t\t\t\tcollection: operation.collection,\n\t\t\t\trecordId: operation.recordId,\n\t\t\t\topType: operation.type,\n\t\t\t\tdata: operation.data,\n\t\t\t\tcausalDeps: operation.causalDeps,\n\t\t\t\tnodeId: operation.nodeId,\n\t\t\t\tsequenceNumber: operation.sequenceNumber,\n\t\t\t}\n\t\t})\n\t\t.filter((item): item is OperationItem => item !== null)\n\n\tconst network = buildNetworkStatus(events, operations)\n\n\treturn {\n\t\ttimeline,\n\t\tconflicts,\n\t\toperations,\n\t\tnetwork,\n\t}\n}\n\nfunction buildNetworkStatus(\n\tevents: readonly TimestampedEvent[],\n\toperations: readonly OperationItem[],\n): NetworkStatusModel {\n\tlet connected = false\n\tlet quality: string | null = null\n\tlet pendingAcks = 0\n\tlet lastSyncAt: number | null = null\n\tlet sentOps = 0\n\tlet receivedOps = 0\n\n\tfor (const entry of events) {\n\t\tswitch (entry.event.type) {\n\t\t\tcase 'sync:connected':\n\t\t\t\tconnected = true\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:disconnected':\n\t\t\t\tconnected = false\n\t\t\t\tbreak\n\t\t\tcase 'connection:quality':\n\t\t\t\tquality = entry.event.quality\n\t\t\t\tbreak\n\t\t\tcase 'sync:sent':\n\t\t\t\tsentOps += entry.event.operations.length\n\t\t\t\tpendingAcks += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:received':\n\t\t\t\treceivedOps += entry.event.operations.length\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t\tcase 'sync:acknowledged':\n\t\t\t\tpendingAcks = Math.max(0, pendingAcks - 1)\n\t\t\t\tlastSyncAt = entry.receivedAt\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tconst vector = new Map<string, number>()\n\tfor (const operation of operations) {\n\t\tconst current = vector.get(operation.nodeId) ?? 0\n\t\tif (operation.sequenceNumber > current) {\n\t\t\tvector.set(operation.nodeId, operation.sequenceNumber)\n\t\t}\n\t}\n\n\treturn {\n\t\tconnected,\n\t\tquality,\n\t\tpendingAcks,\n\t\tlastSyncAt,\n\t\tsentOps,\n\t\treceivedOps,\n\t\tversionVector: [...vector.entries()]\n\t\t\t.map(([nodeId, sequenceNumber]) => ({ nodeId, sequenceNumber }))\n\t\t\t.sort((left, right) => left.nodeId.localeCompare(right.nodeId)),\n\t}\n}\n\nfunction timelineLabel(event: KoraEvent): string {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn `${event.operation.type} ${event.operation.collection}/${event.operation.recordId}`\n\t\tcase 'merge:started':\n\t\t\treturn `merge start ${event.operationA.collection}`\n\t\tcase 'merge:completed':\n\t\t\treturn `merge complete ${event.trace.field}`\n\t\tcase 'merge:conflict':\n\t\t\treturn `merge conflict ${event.trace.field}`\n\t\tcase 'constraint:violated':\n\t\t\treturn `constraint ${event.constraint}`\n\t\tcase 'sync:connected':\n\t\t\treturn `sync connected ${event.nodeId}`\n\t\tcase 'sync:disconnected':\n\t\t\treturn `sync disconnected`\n\t\tcase 'sync:sent':\n\t\t\treturn `sync sent ${event.batchSize}`\n\t\tcase 'sync:received':\n\t\t\treturn `sync received ${event.batchSize}`\n\t\tcase 'sync:acknowledged':\n\t\t\treturn `sync ack ${event.sequenceNumber}`\n\t\tcase 'query:subscribed':\n\t\t\treturn `query subscribed ${event.collection}`\n\t\tcase 'query:invalidated':\n\t\t\treturn `query invalidated ${event.queryId}`\n\t\tcase 'query:executed':\n\t\t\treturn `query executed ${event.queryId}`\n\t\tcase 'connection:quality':\n\t\t\treturn `connection ${event.quality}`\n\t}\n}\n\nfunction timelineColor(type: KoraEvent['type']): string {\n\tif (type.startsWith('operation:')) return '#22c55e'\n\tif (type.startsWith('sync:')) return '#a855f7'\n\tif (type.startsWith('merge:') || type.startsWith('constraint:')) return '#f59e0b'\n\tif (type.startsWith('query:')) return '#0ea5e9'\n\treturn '#64748b'\n}\n\nfunction extractCausalDependencies(event: KoraEvent): string[] {\n\tconst operation = extractOperation(event)\n\treturn operation?.causalDeps ?? []\n}\n\nfunction extractOperation(event: KoraEvent): Operation | null {\n\tswitch (event.type) {\n\t\tcase 'operation:created':\n\t\tcase 'operation:applied':\n\t\t\treturn event.operation\n\t\tcase 'query:invalidated':\n\t\t\treturn event.trigger\n\t\tdefault:\n\t\t\treturn null\n\t}\n}\n","import type { TimestampedEvent } from '../types'\nimport { buildPanelModel } from './panel-state'\n\nexport function renderDevtoolsPanel(target: HTMLElement, events: readonly TimestampedEvent[]): void {\n\tconst model = buildPanelModel(events)\n\n\ttarget.innerHTML = [\n\t\t'<section data-panel=\"timeline\"><h2>Sync Timeline</h2>',\n\t\t`<p>Total events: ${model.timeline.length}</p>`,\n\t\t'<ul>',\n\t\t...model.timeline.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li><span style=\"color:${item.color}\">${item.type}</span> · ${escapeHtml(item.label)}</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"conflicts\"><h2>Conflict Inspector</h2>',\n\t\t`<p>Conflicts: ${model.conflicts.length}</p>`,\n\t\t'<ul>',\n\t\t...model.conflicts\n\t\t\t.slice(-20)\n\t\t\t.map(\n\t\t\t\t(item) =>\n\t\t\t\t\t`<li>${escapeHtml(item.collection)}.${escapeHtml(item.field)} · ${escapeHtml(item.strategy)} · tier ${item.tier}</li>`,\n\t\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"operations\"><h2>Operation Log</h2>',\n\t\t`<p>Operations: ${model.operations.length}</p>`,\n\t\t'<ul>',\n\t\t...model.operations.slice(-20).map(\n\t\t\t(item) =>\n\t\t\t\t`<li>${escapeHtml(item.opType)} ${escapeHtml(item.collection)}/${escapeHtml(item.recordId)} (${escapeHtml(item.operationId)})</li>`,\n\t\t),\n\t\t'</ul></section>',\n\t\t'<section data-panel=\"network\"><h2>Network Status</h2>',\n\t\t`<p>Connected: ${model.network.connected ? 'yes' : 'no'}</p>`,\n\t\t`<p>Pending ACKs: ${model.network.pendingAcks}</p>`,\n\t\t`<p>Sent ops: ${model.network.sentOps}</p>`,\n\t\t`<p>Received ops: ${model.network.receivedOps}</p>`,\n\t\t'</section>',\n\t].join('')\n}\n\nfunction escapeHtml(value: string): string {\n\treturn value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')\n}\n","import type { TimestampedEvent } from '../types'\nimport { renderDevtoolsPanel } from '../ui/panel'\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\ndeclare const chrome: any\n/* eslint-enable @typescript-eslint/no-explicit-any */\n\nconst extensionRoot = document.getElementById('kora-devtools-root')\nif (!extensionRoot) {\n\tthrow new Error('Missing #kora-devtools-root element')\n}\n\nconst events: TimestampedEvent[] = []\n\nconst runtime = chrome?.runtime\nconst devtools = chrome?.devtools\n\nif (runtime && devtools) {\n\tconst tabId = devtools.inspectedWindow.tabId\n\tconst port = runtime.connect({ name: 'kora-panel' })\n\tport.postMessage({ type: 'panel-init', tabId })\n\n\tport.onMessage.addListener((message: { type?: string; payload?: TimestampedEvent }) => {\n\t\tif (!message || message.type !== 'kora-event' || !message.payload) return\n\n\t\tevents.push(message.payload)\n\t\trenderDevtoolsPanel(extensionRoot, events)\n\t})\n}\n\nrenderDevtoolsPanel(extensionRoot, events)\n"],"mappings":"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","names":["events","events"]}