@concavejs/devtools 0.0.1-alpha.5 → 0.0.1-alpha.6

package/dist/vite-plugin.js

@@ -1,8 +1,8 @@
-import s from "path";
-import { fileURLToPath as m } from "url";
-const g = s.dirname(m(import.meta.url));
-function p(i = {}) {
-  const { enabled: a = !0, position: r = "bottom-right" } = i;
+import o from "path";
+import { fileURLToPath as l } from "url";
+const m = o.dirname(l(import.meta.url));
+function p(s = {}) {
+  const { enabled: i = !0, position: a = "bottom-right" } = s;
   let t = !1;
   return {
     name: "concave-devtools",
@@ -12,9 +12,9 @@ function p(i = {}) {
     transformIndexHtml: {
       order: "pre",
       handler(e) {
-        if (!t || !a)
+        if (!t || !i)
           return e;
-        const n = `
+        const r = `
 <script>
   // Initialize event store immediately
   (function() {
@@ -28,7 +28,56 @@ function p(i = {}) {
     window.__concaveDevToolsPendingMutations = new Map();
     window.__concaveDevToolsPendingActions = new Map();
     window.__concaveDevToolsPendingAuthTokenType = null;
-    
+
+    // Latency simulation config (mutated by devtools settings panel)
+    if (!window.__concaveDevToolsLatencyConfig) {
+      window.__concaveDevToolsLatencyConfig = { latencyMs: 0, jitterMs: 0 };
+    }
+
+    var __concaveGetLatencyDelay = function() {
+      var cfg = window.__concaveDevToolsLatencyConfig;
+      if (!cfg) return 0;
+      var base = Number(cfg.latencyMs) || 0;
+      var jitter = Number(cfg.jitterMs) || 0;
+      if (base <= 0 && jitter <= 0) return 0;
+      return Math.max(0, base + (jitter > 0 ? (Math.random() * 2 - 1) * jitter : 0));
+    };
+
+    var __concaveInternalMessageListener = Symbol.for('__concaveDevToolsInternalWsListener');
+    var __concaveLatencyDelaySymbol = Symbol.for('__concaveDevToolsWsDelayMs');
+    var __concaveGetDelayForEvent = function(event) {
+      if (!event || typeof event !== 'object') return __concaveGetLatencyDelay();
+      var existing = event[__concaveLatencyDelaySymbol];
+      if (typeof existing === 'number' && isFinite(existing) && existing >= 0) {
+        return existing;
+      }
+      var sampled = __concaveGetLatencyDelay();
+      try {
+        Object.defineProperty(event, __concaveLatencyDelaySymbol, {
+          value: sampled,
+          configurable: true
+        });
+      } catch (e) {
+        event[__concaveLatencyDelaySymbol] = sampled;
+      }
+      return sampled;
+    };
+    var __concaveInvokeWithLatency = function(listener, target, event) {
+      if (typeof listener !== 'function') return;
+      if (listener[__concaveInternalMessageListener]) {
+        listener.call(target, event);
+        return;
+      }
+      var delay = __concaveGetDelayForEvent(event);
+      if (delay > 0) {
+        setTimeout(function() {
+          listener.call(target, event);
+        }, delay);
+        return;
+      }
+      listener.call(target, event);
+    };
+
     const OriginalWebSocket = window.WebSocket;
 
     const emitAuthEvent = (direction, messageType, status, details, error, tokenType) => {
@@ -69,7 +118,7 @@ function p(i = {}) {
     // Create intercepted WebSocket constructor
     window.WebSocket = function(url, protocols) {
       const ws = new OriginalWebSocket(url, protocols);
-      
+
       // Intercept send
       const originalSend = ws.send.bind(ws);
       ws.send = function(data) {
@@ -125,6 +174,17 @@ function p(i = {}) {
                     componentPath: mod.componentPath,
                     status: 'added'
                   });
+
+                  window.__concaveDevToolsEvents.push({
+                    id: 'query-pending-' + mod.queryId + '-' + now,
+                    timestamp: now,
+                    type: 'query',
+                    queryId: mod.queryId,
+                    udfPath: mod.udfPath,
+                    args: mod.args,
+                    componentPath: mod.componentPath,
+                    status: 'pending'
+                  });
                 } else if (mod.type === 'Remove') {
                   const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
                   window.__concaveDevToolsPendingQueries.delete(mod.queryId);
@@ -152,6 +212,17 @@ function p(i = {}) {
                 componentPath: msg.componentPath,
                 startTime: now
               });
+
+              window.__concaveDevToolsEvents.push({
+                id: 'mutation-pending-' + msg.requestId + '-' + now,
+                timestamp: now,
+                type: 'mutation',
+                requestId: msg.requestId,
+                udfPath: msg.udfPath,
+                args: msg.args,
+                componentPath: msg.componentPath,
+                status: 'pending'
+              });
             }
             
             // Track actions
@@ -163,6 +234,17 @@ function p(i = {}) {
                 componentPath: msg.componentPath,
                 startTime: now
               });
+
+              window.__concaveDevToolsEvents.push({
+                id: 'action-pending-' + msg.requestId + '-' + now,
+                timestamp: now,
+                type: 'action',
+                requestId: msg.requestId,
+                udfPath: msg.udfPath,
+                args: msg.args,
+                componentPath: msg.componentPath,
+                status: 'pending'
+              });
             }
           } catch (e) {
             console.warn('[DevTools] Error parsing client message:', e);
@@ -171,171 +253,194 @@ function p(i = {}) {
         return originalSend(data);
       };
       
-      // Intercept message handler
+      // Intercept message handlers and keep listener identity stable so removeEventListener works.
       const originalAddEventListener = ws.addEventListener.bind(ws);
+      const originalRemoveEventListener = ws.removeEventListener.bind(ws);
+      const messageListenerWrappers = new WeakMap();
       ws.addEventListener = function(type, listener, options) {
         if (type === 'message' && typeof listener === 'function') {
-          const wrappedListener = function(event) {
-            try {
-              const msg = JSON.parse(event.data);
-              const now = Date.now();
+          let wrappedListener = messageListenerWrappers.get(listener);
+          if (!wrappedListener) {
+            wrappedListener = function(event) {
+              try {
+                const msg = JSON.parse(event.data);
+                const now = Date.now();
+                const delayMs = __concaveGetDelayForEvent(event);
 
-              if (msg.type === 'AuthError') {
-                const errorDetails = {};
-                if (typeof msg.baseVersion === 'number') errorDetails.baseVersion = msg.baseVersion;
-                if (typeof msg.authUpdateAttempted === 'boolean') errorDetails.authUpdateAttempted = msg.authUpdateAttempted;
-                emitAuthEvent('server', 'AuthError', 'error', errorDetails, msg.error || 'Authentication failed', window.__concaveDevToolsPendingAuthTokenType || undefined);
-                window.__concaveDevToolsPendingAuthTokenType = null;
-              }
-              
-              // Handle transitions (query updates)
-              if (msg.type === 'Transition' && msg.modifications) {
-                if (window.__concaveDevToolsPendingAuthTokenType) {
-                  emitAuthEvent(
-                    'server',
-                    'Authenticated',
-                    'success',
-                    { modificationCount: msg.modifications.length },
-                    undefined,
-                    window.__concaveDevToolsPendingAuthTokenType
-                  );
+                if (msg.type === 'AuthError') {
+                  const errorDetails = {};
+                  if (typeof msg.baseVersion === 'number') errorDetails.baseVersion = msg.baseVersion;
+                  if (typeof msg.authUpdateAttempted === 'boolean') errorDetails.authUpdateAttempted = msg.authUpdateAttempted;
+                  emitAuthEvent('server', 'AuthError', 'error', errorDetails, msg.error || 'Authentication failed', window.__concaveDevToolsPendingAuthTokenType || undefined);
                   window.__concaveDevToolsPendingAuthTokenType = null;
                 }
-                msg.modifications.forEach(mod => {
-                  if (mod.type === 'QueryUpdated' || mod.type === 'QueryFailed') {
-                    const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
-                    if (pending) {
-                      const duration = now - pending.startTime;
-                      window.__concaveDevToolsEvents.push({
-                        id: 'query-' + mod.queryId + '-' + now,
-                        timestamp: now,
-                        type: 'query',
-                        queryId: mod.queryId,
-                        udfPath: pending.udfPath,
-                        args: pending.args,
-                        componentPath: pending.componentPath,
-                        status: mod.type === 'QueryUpdated' ? 'success' : 'error',
-                        result: mod.type === 'QueryUpdated' ? mod.value : undefined,
-                        error: mod.type === 'QueryFailed' ? mod.errorMessage : undefined,
-                        logLines: mod.logLines,
-                        duration: duration
-                      });
-                      
-                      // Extract log events
-                      if (mod.logLines && mod.logLines.length > 0) {
-                        mod.logLines.forEach(logLine => {
-                          const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
-                          const level = match ? match[1].toLowerCase() : 'log';
-                          const message = match ? match[2] : logLine;
-                          window.__concaveDevToolsEvents.push({
-                            id: 'log-' + now + '-' + Math.random(),
-                            timestamp: now,
-                            type: 'log',
-                            level: level,
-                            message: message,
-                            relatedEventId: 'query-' + mod.queryId + '-' + now
-                          });
+                
+                // Handle transitions (query updates)
+                if (msg.type === 'Transition' && msg.modifications) {
+                  if (window.__concaveDevToolsPendingAuthTokenType) {
+                    emitAuthEvent(
+                      'server',
+                      'Authenticated',
+                      'success',
+                      { modificationCount: msg.modifications.length },
+                      undefined,
+                      window.__concaveDevToolsPendingAuthTokenType
+                    );
+                    window.__concaveDevToolsPendingAuthTokenType = null;
+                  }
+                  msg.modifications.forEach(mod => {
+                    if (mod.type === 'QueryUpdated' || mod.type === 'QueryFailed') {
+                      const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
+                      if (pending) {
+                        const duration = now - pending.startTime;
+                        window.__concaveDevToolsEvents.push({
+                          id: 'query-' + mod.queryId + '-' + now,
+                          timestamp: now,
+                          type: 'query',
+                          queryId: mod.queryId,
+                          udfPath: pending.udfPath,
+                          args: pending.args,
+                          componentPath: pending.componentPath,
+                          status: mod.type === 'QueryUpdated' ? 'success' : 'error',
+                          result: mod.type === 'QueryUpdated' ? mod.value : undefined,
+                          error: mod.type === 'QueryFailed' ? mod.errorMessage : undefined,
+                          logLines: mod.logLines,
+                          duration: duration,
+                          simulatedDelayMs: delayMs,
+                          endToEndDurationMs: duration + delayMs
                         });
+                        
+                        // Extract log events
+                        if (mod.logLines && mod.logLines.length > 0) {
+                          mod.logLines.forEach(logLine => {
+                            const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
+                            const level = match ? match[1].toLowerCase() : 'log';
+                            const message = match ? match[2] : logLine;
+                            window.__concaveDevToolsEvents.push({
+                              id: 'log-' + now + '-' + Math.random(),
+                              timestamp: now,
+                              type: 'log',
+                              level: level,
+                              message: message,
+                              relatedEventId: 'query-' + mod.queryId + '-' + now
+                            });
+                          });
+                        }
                       }
                     }
-                  }
-                });
-              }
-              
-              // Handle mutation responses
-              if (msg.type === 'MutationResponse') {
-                const pending = window.__concaveDevToolsPendingMutations.get(msg.requestId);
-                if (pending) {
-                  const duration = now - pending.startTime;
-                  window.__concaveDevToolsEvents.push({
-                    id: 'mutation-' + msg.requestId + '-' + now,
-                    timestamp: now,
-                    type: 'mutation',
-                    requestId: msg.requestId,
-                    udfPath: pending.udfPath,
-                    args: pending.args,
-                    componentPath: pending.componentPath,
-                    status: msg.success ? 'success' : 'error',
-                    result: msg.success ? msg.result : undefined,
-                    error: !msg.success ? msg.result : undefined,
-                    logLines: msg.logLines,
-                    duration: duration
                   });
-                  
-                  // Extract log events
-                  if (msg.logLines && msg.logLines.length > 0) {
-                    msg.logLines.forEach(logLine => {
-                      const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
-                      const level = match ? match[1].toLowerCase() : 'log';
-                      const message = match ? match[2] : logLine;
-                      window.__concaveDevToolsEvents.push({
-                        id: 'log-' + now + '-' + Math.random(),
-                        timestamp: now,
-                        type: 'log',
-                        level: level,
-                        message: message,
-                        relatedEventId: 'mutation-' + msg.requestId + '-' + now
-                      });
+                }
+                
+                // Handle mutation responses
+                if (msg.type === 'MutationResponse') {
+                  const pending = window.__concaveDevToolsPendingMutations.get(msg.requestId);
+                  if (pending) {
+                    const duration = now - pending.startTime;
+                    window.__concaveDevToolsEvents.push({
+                      id: 'mutation-' + msg.requestId + '-' + now,
+                      timestamp: now,
+                      type: 'mutation',
+                      requestId: msg.requestId,
+                      udfPath: pending.udfPath,
+                      args: pending.args,
+                      componentPath: pending.componentPath,
+                      status: msg.success ? 'success' : 'error',
+                      result: msg.success ? msg.result : undefined,
+                      error: !msg.success ? msg.result : undefined,
+                      logLines: msg.logLines,
+                      duration: duration,
+                      simulatedDelayMs: delayMs,
+                      endToEndDurationMs: duration + delayMs
                     });
+                    
+                    // Extract log events
+                    if (msg.logLines && msg.logLines.length > 0) {
+                      msg.logLines.forEach(logLine => {
+                        const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
+                        const level = match ? match[1].toLowerCase() : 'log';
+                        const message = match ? match[2] : logLine;
+                        window.__concaveDevToolsEvents.push({
+                          id: 'log-' + now + '-' + Math.random(),
+                          timestamp: now,
+                          type: 'log',
+                          level: level,
+                          message: message,
+                          relatedEventId: 'mutation-' + msg.requestId + '-' + now
+                        });
+                      });
+                    }
+                    
+                    window.__concaveDevToolsPendingMutations.delete(msg.requestId);
                   }
-                  
-                  window.__concaveDevToolsPendingMutations.delete(msg.requestId);
                 }
-              }
-              
-              // Handle action responses
-              if (msg.type === 'ActionResponse') {
-                const pending = window.__concaveDevToolsPendingActions.get(msg.requestId);
-                if (pending) {
-                  const duration = now - pending.startTime;
-                  window.__concaveDevToolsEvents.push({
-                    id: 'action-' + msg.requestId + '-' + now,
-                    timestamp: now,
-                    type: 'action',
-                    requestId: msg.requestId,
-                    udfPath: pending.udfPath,
-                    args: pending.args,
-                    componentPath: pending.componentPath,
-                    status: msg.success ? 'success' : 'error',
-                    result: msg.success ? msg.result : undefined,
-                    error: !msg.success ? msg.result : undefined,
-                    logLines: msg.logLines,
-                    duration: duration
-                  });
-                  
-                  // Extract log events
-                  if (msg.logLines && msg.logLines.length > 0) {
-                    msg.logLines.forEach(logLine => {
-                      const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
-                      const level = match ? match[1].toLowerCase() : 'log';
-                      const message = match ? match[2] : logLine;
-                      window.__concaveDevToolsEvents.push({
-                        id: 'log-' + now + '-' + Math.random(),
-                        timestamp: now,
-                        type: 'log',
-                        level: level,
-                        message: message,
-                        relatedEventId: 'action-' + msg.requestId + '-' + now
-                      });
+                
+                // Handle action responses
+                if (msg.type === 'ActionResponse') {
+                  const pending = window.__concaveDevToolsPendingActions.get(msg.requestId);
+                  if (pending) {
+                    const duration = now - pending.startTime;
+                    window.__concaveDevToolsEvents.push({
+                      id: 'action-' + msg.requestId + '-' + now,
+                      timestamp: now,
+                      type: 'action',
+                      requestId: msg.requestId,
+                      udfPath: pending.udfPath,
+                      args: pending.args,
+                      componentPath: pending.componentPath,
+                      status: msg.success ? 'success' : 'error',
+                      result: msg.success ? msg.result : undefined,
+                      error: !msg.success ? msg.result : undefined,
+                      logLines: msg.logLines,
+                      duration: duration,
+                      simulatedDelayMs: delayMs,
+                      endToEndDurationMs: duration + delayMs
                     });
+                    
+                    // Extract log events
+                    if (msg.logLines && msg.logLines.length > 0) {
+                      msg.logLines.forEach(logLine => {
+                        const match = logLine.match(/^\\[(log|info|warn|error)\\]\\s+(.+)$/i);
+                        const level = match ? match[1].toLowerCase() : 'log';
+                        const message = match ? match[2] : logLine;
+                        window.__concaveDevToolsEvents.push({
+                          id: 'log-' + now + '-' + Math.random(),
+                          timestamp: now,
+                          type: 'log',
+                          level: level,
+                          message: message,
+                          relatedEventId: 'action-' + msg.requestId + '-' + now
+                        });
+                      });
+                    }
+                    
+                    window.__concaveDevToolsPendingActions.delete(msg.requestId);
                   }
-                  
-                  window.__concaveDevToolsPendingActions.delete(msg.requestId);
                 }
+              } catch (e) {
+                console.warn('[DevTools] Error parsing server message:', e);
               }
-            } catch (e) {
-              console.warn('[DevTools] Error parsing server message:', e);
-            }
-            return listener(event);
-          };
+              __concaveInvokeWithLatency(listener, ws, event);
+            };
+            wrappedListener[__concaveInternalMessageListener] = true;
+            messageListenerWrappers.set(listener, wrappedListener);
+          }
           return originalAddEventListener('message', wrappedListener, options);
         }
         return originalAddEventListener(type, listener, options);
       };
 
+      ws.removeEventListener = function(type, listener, options) {
+        if (type === 'message' && typeof listener === 'function') {
+          const wrappedListener = messageListenerWrappers.get(listener);
+          return originalRemoveEventListener('message', wrappedListener || listener, options);
+        }
+        return originalRemoveEventListener(type, listener, options);
+      };
+
       // Intercept onmessage assignment as well
       (function(){
         let currentHandler = null;
+        let currentOnMessageWrapper = null;
         Object.defineProperty(ws, 'onmessage', {
           configurable: true,
           enumerable: true,
@@ -344,8 +449,9 @@ function p(i = {}) {
           },
           set(handler) {
             // Remove previous wrapper if present
-            if ((ws).__concaveOnMessageWrapper) {
-              ws.removeEventListener('message', (ws).__concaveOnMessageWrapper);
+            if (currentOnMessageWrapper) {
+              originalRemoveEventListener('message', currentOnMessageWrapper);
+              currentOnMessageWrapper = null;
             }
             currentHandler = handler;
             if (typeof handler === 'function') {
@@ -353,6 +459,7 @@ function p(i = {}) {
                 try {
                   const msg = JSON.parse(event.data);
                   const now = Date.now();
+                  const delayMs = __concaveGetDelayForEvent(event);
 
                   if (msg.type === 'AuthError') {
                     const errorDetails = {};
@@ -392,7 +499,9 @@ function p(i = {}) {
                             result: mod.type === 'QueryUpdated' ? mod.value : undefined,
                             error: mod.type === 'QueryFailed' ? mod.errorMessage : undefined,
                             logLines: mod.logLines,
-                            duration: duration
+                            duration: duration,
+                            simulatedDelayMs: delayMs,
+                            endToEndDurationMs: duration + delayMs
                           });
                           if (mod.logLines && mod.logLines.length > 0) {
                             mod.logLines.forEach(logLine => {
@@ -429,7 +538,9 @@ function p(i = {}) {
                         result: msg.success ? msg.result : undefined,
                         error: !msg.success ? msg.result : undefined,
                         logLines: msg.logLines,
-                        duration: duration
+                        duration: duration,
+                        simulatedDelayMs: delayMs,
+                        endToEndDurationMs: duration + delayMs
                       });
                       if (msg.logLines && msg.logLines.length > 0) {
                         msg.logLines.forEach(logLine => {
@@ -465,7 +576,9 @@ function p(i = {}) {
                         result: msg.success ? msg.result : undefined,
                         error: !msg.success ? msg.result : undefined,
                         logLines: msg.logLines,
-                        duration: duration
+                        duration: duration,
+                        simulatedDelayMs: delayMs,
+                        endToEndDurationMs: duration + delayMs
                       });
                       if (msg.logLines && msg.logLines.length > 0) {
                         msg.logLines.forEach(logLine => {
@@ -488,14 +601,11 @@ function p(i = {}) {
                 } catch (e) {
                   console.warn('[DevTools] Error parsing server message (onmessage):', e);
                 }
-                if (typeof handler === 'function') {
-                  handler.call(ws, event);
-                }
+                __concaveInvokeWithLatency(handler, ws, event);
               };
-              (ws).__concaveOnMessageWrapper = wrapper;
-              ws.addEventListener('message', wrapper);
-            } else {
-              (ws).__concaveOnMessageWrapper = null;
+              wrapper[__concaveInternalMessageListener] = true;
+              currentOnMessageWrapper = wrapper;
+              originalAddEventListener('message', wrapper);
             }
           }
         });
@@ -503,36 +613,35 @@ function p(i = {}) {
       
       return ws;
     };
-    
+
     // Preserve prototype chain
     Object.setPrototypeOf(window.WebSocket, OriginalWebSocket);
-    Object.defineProperty(window.WebSocket, 'prototype', { 
+    Object.defineProperty(window.WebSocket, 'prototype', {
       value: OriginalWebSocket.prototype,
       writable: false,
       configurable: false
     });
-    
+
     console.log('[DevTools] WebSocket interceptor installed');
   })();
 <\/script>
 `, d = `
 <script>
-  window.__concaveDevToolsConfig = ${JSON.stringify({ position: r, autoInit: !0 })};
+  window.__concaveDevToolsConfig = ${JSON.stringify({ position: a, autoInit: !0 })};
 <\/script>
 `, c = `
 <script type="module">
-  import { initDevTools } from '/@fs${s.resolve(g, "../client.tsx").replace(/\\/g, "/")}';
+  import { initDevTools } from '/@fs${o.resolve(m, "../client.tsx").replace(/\\/g, "/")}';
 <\/script>
-`, o = n + d + c;
-        return e.includes("</head>") ? e.replace("</head>", `${o}</head>`) : e.includes("</body>") ? e.replace("</body>", `${o}</body>`) : e + o;
+`, n = r + d + c;
+        return e.includes("</head>") ? e.replace("</head>", `${n}</head>`) : e.includes("</body>") ? e.replace("</body>", `${n}</body>`) : e + n;
       }
     },
     // Ensure devtools dependencies are optimized
     config(e) {
-      var n;
       return {
         optimizeDeps: {
-          include: [...((n = e.optimizeDeps) == null ? void 0 : n.include) || [], "react", "react-dom"]
+          include: [...e.optimizeDeps?.include || [], "react", "react-dom"]
         }
       };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concavejs/devtools",
-  "version": "0.0.1-alpha.5",
+  "version": "0.0.1-alpha.6",
   "license": "FSL-1.1-Apache-2.0",
   "publishConfig": {
     "access": "public"
@@ -38,13 +38,13 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@concavejs/brand": "0.0.1-alpha.5",
-    "@concavejs/core": "0.0.1-alpha.5"
+    "@concavejs/brand": "0.0.1-alpha.6",
+    "@concavejs/core": "0.0.1-alpha.6"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "vite": "^5.0.0"
+    "vite": "^7.1.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.18",
@@ -57,6 +57,6 @@
     "tailwindcss": "^4.1.18",
     "terser": "^5.46.0",
     "typescript": "^5.3.0",
-    "vite": "^5.0.0"
+    "vite": "^7.1.2"
   }
 }