@korajs/devtools 0.3.2 → 0.5.0

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(src_exports, {
   computeStatistics: () => computeStatistics,
   filterEvents: () => filterEvents,
   getEventCategory: () => getEventCategory,
+  mountKoraDevtoolsOverlay: () => mountKoraDevtoolsOverlay,
   renderDevtoolsPanel: () => renderDevtoolsPanel
 });
 module.exports = __toCommonJS(src_exports);
@@ -188,9 +189,18 @@ var ALL_EVENT_TYPES = [
   "constraint:violated",
   "sync:connected",
   "sync:disconnected",
+  "sync:schema-mismatch",
+  "sync:auth-failed",
+  "sync:apply-failed",
   "sync:sent",
   "sync:received",
   "sync:acknowledged",
+  "sync:diagnostics",
+  "sync:bandwidth",
+  "sync:initial-sync-progress",
+  "store:persistence-error",
+  "store:quota-exceeded",
+  "replay:completed",
   "query:subscribed",
   "query:invalidated",
   "query:executed",
@@ -277,13 +287,24 @@ 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];
@@ -528,9 +549,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":
@@ -545,6 +570,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) {
@@ -571,9 +614,9 @@ function extractOperation(event) {
 }
 
 // src/ui/panel.ts
+var import_htm = __toESM(require("htm"), 1);
 var import_preact = require("preact");
 var import_hooks = require("preact/hooks");
-var import_htm = __toESM(require("htm"), 1);
 
 // src/ui/components.ts
 function formatTime(timestamp) {
@@ -586,7 +629,7 @@ function formatTime(timestamp) {
 }
 function truncate(str, max) {
   if (str.length <= max) return str;
-  return str.slice(0, max - 1) + "\u2026";
+  return `${str.slice(0, max - 1)}\u2026`;
 }
 function formatValue(value) {
   if (value === null || value === void 0) return "null";
@@ -601,33 +644,25 @@ var ALL_CATEGORIES = ["operation", "merge", "sync", "query", "connection"];
 function DevToolsPanel({ events }) {
   const [activeTab, setActiveTab] = (0, import_hooks.useState)("timeline");
   const [search, setSearch] = (0, import_hooks.useState)("");
-  const [categories, setCategories] = (0, import_hooks.useState)(
-    () => new Set(ALL_CATEGORIES)
-  );
+  const [categories, setCategories] = (0, import_hooks.useState)(() => new Set(ALL_CATEGORIES));
   const [expanded, setExpanded] = (0, import_hooks.useState)(() => /* @__PURE__ */ new Set());
   const [paused, setPaused] = (0, import_hooks.useState)(false);
-  const toggleCategory = (0, import_hooks.useCallback)(
-    (cat) => {
-      setCategories((prev) => {
-        const next = new Set(prev);
-        if (next.has(cat)) next.delete(cat);
-        else next.add(cat);
-        return next;
-      });
-    },
-    []
-  );
-  const toggleExpand = (0, import_hooks.useCallback)(
-    (id) => {
-      setExpanded((prev) => {
-        const next = new Set(prev);
-        if (next.has(id)) next.delete(id);
-        else next.add(id);
-        return next;
-      });
-    },
-    []
-  );
+  const toggleCategory = (0, import_hooks.useCallback)((cat) => {
+    setCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(cat)) next.delete(cat);
+      else next.add(cat);
+      return next;
+    });
+  }, []);
+  const toggleExpand = (0, import_hooks.useCallback)((id) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
   const filtered = (0, import_hooks.useMemo)(
     () => filterEvents(events, { categories: [...categories] }),
     [events, categories]
@@ -1029,6 +1064,65 @@ function renderDevtoolsPanel(target, events) {
   (0, import_preact.render)(html`<${DevToolsPanel} events=${events} />`, target);
 }
 
+// src/ui/panel-styles.ts
+var KORA_DEVTOOLS_STYLES = "/* ================================================================\n         Kora DevTools \u2014 Dark theme optimized for Chrome DevTools panels\n         ================================================================ */\n\n      :root {\n        --bg-primary: #1e1e2e;\n        --bg-secondary: #181825;\n        --bg-surface: #313244;\n        --bg-hover: #45475a;\n        --bg-selected: #585b70;\n        --text-primary: #cdd6f4;\n        --text-secondary: #a6adc8;\n        --text-muted: #6c7086;\n        --border: #45475a;\n\n        --green: #a6e3a1;\n        --red: #f38ba8;\n        --yellow: #f9e2af;\n        --blue: #89b4fa;\n        --purple: #cba6f7;\n        --teal: #94e2d5;\n        --peach: #fab387;\n\n        --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;\n        --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n        --font-size: 12px;\n      }\n\n      * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n      }\n\n      body {\n        background: var(--bg-primary);\n        color: var(--text-primary);\n        font-family: var(--font-sans);\n        font-size: var(--font-size);\n        line-height: 1.5;\n        overflow: hidden;\n      }\n\n      #kora-devtools-root {\n        width: 100vw;\n        height: 100vh;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-devtools {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      /* ---- Toolbar ---- */\n\n      .kora-toolbar {\n        background: var(--bg-secondary);\n        border-bottom: 1px solid var(--border);\n        padding: 4px 8px;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n        flex-shrink: 0;\n      }\n\n      .kora-tabs {\n        display: flex;\n        gap: 2px;\n      }\n\n      .kora-tab {\n        background: transparent;\n        color: var(--text-secondary);\n        border: none;\n        padding: 4px 12px;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: var(--font-size);\n        font-family: var(--font-sans);\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .kora-tab:hover {\n        background: var(--bg-hover);\n        color: var(--text-primary);\n      }\n\n      .kora-tab.active {\n        background: var(--bg-surface);\n        color: var(--text-primary);\n        font-weight: 600;\n      }\n\n      .kora-badge {\n        background: var(--bg-hover);\n        color: var(--text-muted);\n        padding: 0 6px;\n        border-radius: 10px;\n        font-size: 10px;\n        font-weight: 500;\n      }\n\n      .kora-tab.active .kora-badge {\n        background: var(--blue);\n        color: var(--bg-primary);\n      }\n\n      .kora-controls {\n        display: flex;\n        gap: 4px;\n        align-items: center;\n        margin-left: auto;\n        flex-wrap: wrap;\n      }\n\n      .kora-search {\n        background: var(--bg-surface);\n        color: var(--text-primary);\n        border: 1px solid var(--border);\n        padding: 3px 8px;\n        border-radius: 4px;\n        font-size: var(--font-size);\n        font-family: var(--font-sans);\n        width: 140px;\n        outline: none;\n      }\n\n      .kora-search:focus {\n        border-color: var(--blue);\n      }\n\n      .kora-btn {\n        background: var(--bg-surface);\n        color: var(--text-secondary);\n        border: 1px solid var(--border);\n        padding: 3px 8px;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: 11px;\n        font-family: var(--font-sans);\n      }\n\n      .kora-btn:hover {\n        background: var(--bg-hover);\n        color: var(--text-primary);\n      }\n\n      .kora-cat-toggle {\n        background: transparent;\n        color: var(--text-muted);\n        border: 1px solid transparent;\n        padding: 2px 6px;\n        border-radius: 3px;\n        cursor: pointer;\n        font-size: 10px;\n        font-family: var(--font-sans);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      }\n\n      .kora-cat-toggle:hover {\n        color: var(--text-secondary);\n      }\n\n      .kora-cat-toggle.active {\n        background: var(--bg-surface);\n        color: var(--text-primary);\n        border-color: var(--border);\n      }\n\n      /* ---- Content ---- */\n\n      .kora-content {\n        flex: 1;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-panel {\n        flex: 1;\n        overflow-y: auto;\n        padding: 8px;\n      }\n\n      .kora-empty {\n        color: var(--text-muted);\n        text-align: center;\n        padding: 40px;\n        font-style: italic;\n      }\n\n      .kora-summary {\n        color: var(--text-muted);\n        font-size: 11px;\n        padding: 4px 0 8px;\n        border-bottom: 1px solid var(--border);\n        margin-bottom: 4px;\n      }\n\n      /* ---- Event List (Timeline) ---- */\n\n      .kora-event-list {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 3px 6px;\n        border-radius: 3px;\n        cursor: pointer;\n        min-height: 24px;\n      }\n\n      .kora-row:hover {\n        background: var(--bg-hover);\n      }\n\n      .kora-row.expanded,\n      .kora-row.selected {\n        background: var(--bg-surface);\n      }\n\n      .kora-row.compact {\n        padding: 2px 6px;\n        font-size: 11px;\n      }\n\n      .kora-time {\n        color: var(--text-muted);\n        font-family: var(--font-mono);\n        font-size: 11px;\n        flex-shrink: 0;\n        width: 90px;\n      }\n\n      .kora-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        flex-shrink: 0;\n      }\n\n      .kora-type {\n        color: var(--text-secondary);\n        font-size: 11px;\n        flex-shrink: 0;\n        width: 140px;\n      }\n\n      .kora-label {\n        color: var(--text-primary);\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .kora-deps {\n        color: var(--peach);\n        font-size: 10px;\n        flex-shrink: 0;\n      }\n\n      /* ---- Detail / Expandable ---- */\n\n      .kora-detail,\n      .kora-op-detail {\n        background: var(--bg-secondary);\n        border: 1px solid var(--border);\n        border-radius: 4px;\n        padding: 8px 12px;\n        margin: 2px 0 6px 28px;\n        font-size: 11px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n\n      .kora-detail-label {\n        color: var(--text-muted);\n        font-weight: 500;\n        margin-right: 4px;\n      }\n\n      .kora-mono {\n        font-family: var(--font-mono);\n        font-size: 11px;\n      }\n\n      /* ---- Conflicts Table ---- */\n\n      .kora-table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 11px;\n      }\n\n      .kora-table th {\n        text-align: left;\n        color: var(--text-muted);\n        font-weight: 500;\n        padding: 6px 8px;\n        border-bottom: 1px solid var(--border);\n        text-transform: uppercase;\n        font-size: 10px;\n        letter-spacing: 0.5px;\n      }\n\n      .kora-table td {\n        padding: 5px 8px;\n        border-bottom: 1px solid var(--bg-surface);\n      }\n\n      .kora-conflict-row {\n        cursor: pointer;\n      }\n\n      .kora-conflict-row:hover td {\n        background: var(--bg-hover);\n      }\n\n      .kora-conflict-row.expanded td {\n        background: var(--bg-surface);\n      }\n\n      .kora-conflict-row.violated td {\n        border-left: 3px solid var(--red);\n      }\n\n      .kora-strategy {\n        padding: 1px 6px;\n        border-radius: 3px;\n        font-size: 10px;\n        font-weight: 500;\n      }\n\n      .kora-strategy.tier-1 {\n        background: rgba(166, 227, 161, 0.15);\n        color: var(--green);\n      }\n\n      .kora-strategy.tier-2 {\n        background: rgba(249, 226, 175, 0.15);\n        color: var(--yellow);\n      }\n\n      .kora-strategy.tier-3 {\n        background: rgba(203, 166, 247, 0.15);\n        color: var(--purple);\n      }\n\n      .kora-detail-row td {\n        padding: 0;\n      }\n\n      .kora-conflict-detail {\n        padding: 12px;\n      }\n\n      .kora-comparison {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 8px;\n      }\n\n      .kora-value-box {\n        background: var(--bg-primary);\n        border: 1px solid var(--border);\n        border-radius: 4px;\n        padding: 8px;\n      }\n\n      .kora-value-box.result {\n        border-color: var(--green);\n      }\n\n      .kora-value-label {\n        color: var(--text-muted);\n        font-size: 10px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        margin-bottom: 4px;\n      }\n\n      .kora-value-code {\n        font-family: var(--font-mono);\n        font-size: 11px;\n        color: var(--text-primary);\n        white-space: pre-wrap;\n        word-break: break-all;\n        margin: 0;\n      }\n\n      .kora-constraint-warning {\n        margin-top: 8px;\n        padding: 6px 10px;\n        background: rgba(243, 139, 168, 0.1);\n        border: 1px solid var(--red);\n        border-radius: 4px;\n        color: var(--red);\n        font-size: 11px;\n      }\n\n      /* ---- Operations ---- */\n\n      .kora-op-list {\n        display: flex;\n        flex-direction: column;\n      }\n\n      .kora-op-row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 3px 6px;\n        border-radius: 3px;\n        cursor: pointer;\n      }\n\n      .kora-op-row:hover {\n        background: var(--bg-hover);\n      }\n\n      .kora-op-row.expanded {\n        background: var(--bg-surface);\n      }\n\n      .kora-op-type {\n        padding: 1px 6px;\n        border-radius: 3px;\n        font-size: 10px;\n        font-weight: 600;\n        text-transform: uppercase;\n        flex-shrink: 0;\n      }\n\n      .op-insert {\n        background: rgba(166, 227, 161, 0.15);\n        color: var(--green);\n      }\n\n      .op-update {\n        background: rgba(137, 180, 250, 0.15);\n        color: var(--blue);\n      }\n\n      .op-delete {\n        background: rgba(243, 139, 168, 0.15);\n        color: var(--red);\n      }\n\n      .kora-op-collection {\n        color: var(--teal);\n        font-weight: 500;\n        flex-shrink: 0;\n      }\n\n      .kora-op-record {\n        color: var(--text-secondary);\n        flex-shrink: 0;\n      }\n\n      .kora-op-node {\n        color: var(--text-muted);\n        font-size: 10px;\n        flex-shrink: 0;\n      }\n\n      .kora-op-seq {\n        color: var(--text-muted);\n        font-size: 10px;\n        flex-shrink: 0;\n      }\n\n      /* ---- Network ---- */\n\n      .kora-network-status {\n        padding: 12px 0;\n      }\n\n      .kora-status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        font-size: 14px;\n        font-weight: 600;\n      }\n\n      .kora-status-dot {\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n      }\n\n      .connected .kora-status-dot {\n        background: var(--green);\n        box-shadow: 0 0 8px rgba(166, 227, 161, 0.5);\n      }\n\n      .disconnected .kora-status-dot {\n        background: var(--red);\n        box-shadow: 0 0 8px rgba(243, 139, 168, 0.3);\n      }\n\n      .connected .kora-status-text {\n        color: var(--green);\n      }\n\n      .disconnected .kora-status-text {\n        color: var(--red);\n      }\n\n      .kora-stats-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 8px;\n        margin: 12px 0;\n      }\n\n      .kora-stat-card {\n        background: var(--bg-surface);\n        border: 1px solid var(--border);\n        border-radius: 6px;\n        padding: 12px;\n        text-align: center;\n      }\n\n      .kora-stat-value {\n        font-size: 20px;\n        font-weight: 700;\n        color: var(--text-primary);\n        font-family: var(--font-mono);\n      }\n\n      .kora-stat-label {\n        color: var(--text-muted);\n        font-size: 10px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        margin-top: 2px;\n      }\n\n      .kora-vv-section,\n      .kora-sync-log {\n        margin-top: 16px;\n      }\n\n      .kora-vv-section h3,\n      .kora-sync-log h3 {\n        color: var(--text-secondary);\n        font-size: 12px;\n        font-weight: 600;\n        margin-bottom: 8px;\n      }\n\n      .kora-vv-table {\n        max-width: 400px;\n      }\n\n      /* ---- Scrollbar ---- */\n\n      ::-webkit-scrollbar {\n        width: 8px;\n      }\n\n      ::-webkit-scrollbar-track {\n        background: var(--bg-primary);\n      }\n\n      ::-webkit-scrollbar-thumb {\n        background: var(--bg-hover);\n        border-radius: 4px;\n      }\n\n      ::-webkit-scrollbar-thumb:hover {\n        background: var(--bg-selected);\n      }";
+
+// src/overlay/embed-overlay.ts
+var OVERLAY_HOST_ID = "kora-devtools-overlay-host";
+function mountKoraDevtoolsOverlay(instrumenter) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  const existing = document.getElementById(OVERLAY_HOST_ID);
+  if (existing) {
+    existing.remove();
+  }
+  const host = document.createElement("div");
+  host.id = OVERLAY_HOST_ID;
+  host.style.cssText = "position:fixed;inset:auto 12px 12px 12px;height:42vh;z-index:2147483646;display:none;";
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = KORA_DEVTOOLS_STYLES;
+  shadow.appendChild(style);
+  const panelRoot = document.createElement("div");
+  panelRoot.id = "kora-devtools-root";
+  panelRoot.style.height = "100%";
+  shadow.appendChild(panelRoot);
+  const hint = document.createElement("div");
+  hint.textContent = "Kora DevTools (Ctrl+Shift+K)";
+  hint.style.cssText = "position:fixed;bottom:8px;right:12px;z-index:2147483645;font:11px sans-serif;color:#6c7086;background:#1e1e2e;padding:4px 8px;border-radius:4px;opacity:0.85;";
+  document.body.appendChild(hint);
+  document.body.appendChild(host);
+  let visible = false;
+  const setVisible = (next) => {
+    visible = next;
+    host.style.display = visible ? "block" : "none";
+    hint.style.display = visible ? "none" : "block";
+  };
+  const refresh = () => {
+    if (!visible) return;
+    renderDevtoolsPanel(panelRoot, instrumenter.getBuffer().getAll());
+  };
+  const intervalId = window.setInterval(refresh, 300);
+  const onKeyDown = (event) => {
+    const isToggle = event.key === "K" && event.shiftKey && (event.ctrlKey || event.metaKey);
+    if (!isToggle) return;
+    event.preventDefault();
+    setVisible(!visible);
+    if (visible) {
+      refresh();
+    }
+  };
+  window.addEventListener("keydown", onKeyDown);
+  return () => {
+    window.clearInterval(intervalId);
+    window.removeEventListener("keydown", onKeyDown);
+    host.remove();
+    hint.remove();
+  };
+}
+
 // src/extension/port-router.ts
 var PortRouter = class {
   panelClients = /* @__PURE__ */ new Map();
@@ -1092,6 +1186,7 @@ function isContentEventMessage(value) {
   computeStatistics,
   filterEvents,
   getEventCategory,
+  mountKoraDevtoolsOverlay,
   renderDevtoolsPanel
 });
 //# sourceMappingURL=index.cjs.map