@concavejs/devtools 0.0.1-alpha.4

package/dist/vite-plugin.js

@@ -0,0 +1,544 @@
+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;
+  let t = !1;
+  return {
+    name: "concave-devtools",
+    configResolved(e) {
+      t = e.mode === "development";
+    },
+    transformIndexHtml: {
+      order: "pre",
+      handler(e) {
+        if (!t || !a)
+          return e;
+        const n = `
+<script>
+  // Initialize event store immediately
+  (function() {
+    if (window.__concaveDevTools) return;
+    
+    console.log('[DevTools] Installing WebSocket interceptor...');
+    
+    // Minimal event store for capturing events
+    window.__concaveDevToolsEvents = [];
+    window.__concaveDevToolsPendingQueries = new Map();
+    window.__concaveDevToolsPendingMutations = new Map();
+    window.__concaveDevToolsPendingActions = new Map();
+    window.__concaveDevToolsPendingAuthTokenType = null;
+    
+    const OriginalWebSocket = window.WebSocket;
+
+    const emitAuthEvent = (direction, messageType, status, details, error, tokenType) => {
+      const now = Date.now();
+      window.__concaveDevToolsEvents.push({
+        id: 'auth-' + direction + '-' + messageType + '-' + now + '-' + Math.random().toString(36).slice(2, 8),
+        timestamp: now,
+        type: 'auth',
+        direction,
+        messageType,
+        status,
+        tokenType,
+        error,
+        details,
+      });
+    };
+
+    const decodeJwtClaims = (token) => {
+      const parts = token.split('.');
+      if (parts.length < 2) return null;
+      try {
+        const normalized = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+        const padded = normalized + '='.repeat((4 - (normalized.length % 4)) % 4);
+        const payload = JSON.parse(atob(padded));
+        const keys = ['iss', 'sub', 'aud', 'exp', 'iat', 'nbf'];
+        const claims = {};
+        keys.forEach((key) => {
+          if (payload[key] !== undefined) claims[key] = payload[key];
+        });
+        if (typeof claims.exp === 'number') claims.expIso = new Date(claims.exp * 1000).toISOString();
+        if (typeof claims.iat === 'number') claims.iatIso = new Date(claims.iat * 1000).toISOString();
+        return Object.keys(claims).length > 0 ? claims : null;
+      } catch (e) {
+        return null;
+      }
+    };
+    
+    // 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) {
+        if (typeof data === 'string') {
+          try {
+            const msg = JSON.parse(data);
+            const now = Date.now();
+
+            if (msg.type === 'Connect') {
+              const connectDetails = {};
+              if (typeof msg.connectionCount === 'number') connectDetails.connectionCount = msg.connectionCount;
+              if (typeof msg.lastCloseReason === 'string') connectDetails.lastCloseReason = msg.lastCloseReason;
+              if (typeof msg.clientTs === 'number') connectDetails.clientTs = msg.clientTs;
+              if (typeof msg.sessionId === 'string') connectDetails.sessionId = msg.sessionId;
+              emitAuthEvent('client', 'Connect', 'success', connectDetails, undefined, undefined);
+            }
+
+            if (msg.type === 'Authenticate') {
+              const authDetails = {};
+              if (typeof msg.baseVersion === 'number') authDetails.baseVersion = msg.baseVersion;
+              if (typeof msg.tokenType === 'string') authDetails.tokenType = msg.tokenType;
+              if (typeof msg.value === 'string' && msg.value.length > 0) {
+                authDetails.tokenLength = msg.value.length;
+                authDetails.tokenPreview = msg.value.length > 24
+                  ? msg.value.slice(0, 12) + '…' + msg.value.slice(-10)
+                  : msg.value;
+                const claims = decodeJwtClaims(msg.value);
+                if (claims) authDetails.jwtClaims = claims;
+              }
+              window.__concaveDevToolsPendingAuthTokenType = msg.tokenType || 'Unknown';
+              emitAuthEvent('client', 'Authenticate', 'success', authDetails, undefined, msg.tokenType);
+            }
+            
+            // Track queries
+            if (msg.type === 'ModifyQuerySet' && msg.modifications) {
+              msg.modifications.forEach(mod => {
+                if (mod.type === 'Add') {
+                  window.__concaveDevToolsPendingQueries.set(mod.queryId, {
+                    queryId: mod.queryId,
+                    udfPath: mod.udfPath,
+                    args: mod.args,
+                    componentPath: mod.componentPath,
+                    startTime: now
+                  });
+                  
+                  window.__concaveDevToolsEvents.push({
+                    id: 'sub-' + mod.queryId + '-' + now,
+                    timestamp: now,
+                    type: 'subscription',
+                    queryId: mod.queryId,
+                    udfPath: mod.udfPath,
+                    args: mod.args,
+                    componentPath: mod.componentPath,
+                    status: 'added'
+                  });
+                } else if (mod.type === 'Remove') {
+                  const pending = window.__concaveDevToolsPendingQueries.get(mod.queryId);
+                  window.__concaveDevToolsPendingQueries.delete(mod.queryId);
+                  // Emit removed subscription if we have context
+                  window.__concaveDevToolsEvents.push({
+                    id: 'sub-' + mod.queryId + '-' + now,
+                    timestamp: now,
+                    type: 'subscription',
+                    queryId: mod.queryId,
+                    udfPath: pending ? pending.udfPath : 'unknown',
+                    args: pending ? pending.args : [],
+                    componentPath: pending ? pending.componentPath : undefined,
+                    status: 'removed'
+                  });
+                }
+              });
+            }
+            
+            // Track mutations
+            if (msg.type === 'Mutation') {
+              window.__concaveDevToolsPendingMutations.set(msg.requestId, {
+                requestId: msg.requestId,
+                udfPath: msg.udfPath,
+                args: msg.args,
+                componentPath: msg.componentPath,
+                startTime: now
+              });
+            }
+            
+            // Track actions
+            if (msg.type === 'Action') {
+              window.__concaveDevToolsPendingActions.set(msg.requestId, {
+                requestId: msg.requestId,
+                udfPath: msg.udfPath,
+                args: msg.args,
+                componentPath: msg.componentPath,
+                startTime: now
+              });
+            }
+          } catch (e) {
+            console.warn('[DevTools] Error parsing client message:', e);
+          }
+        }
+        return originalSend(data);
+      };
+      
+      // Intercept message handler
+      const originalAddEventListener = ws.addEventListener.bind(ws);
+      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();
+
+              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
+                  );
+                  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 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
+                      });
+                    });
+                  }
+                  
+                  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
+                      });
+                    });
+                  }
+                  
+                  window.__concaveDevToolsPendingActions.delete(msg.requestId);
+                }
+              }
+            } catch (e) {
+              console.warn('[DevTools] Error parsing server message:', e);
+            }
+            return listener(event);
+          };
+          return originalAddEventListener('message', wrappedListener, options);
+        }
+        return originalAddEventListener(type, listener, options);
+      };
+
+      // Intercept onmessage assignment as well
+      (function(){
+        let currentHandler = null;
+        Object.defineProperty(ws, 'onmessage', {
+          configurable: true,
+          enumerable: true,
+          get() {
+            return currentHandler;
+          },
+          set(handler) {
+            // Remove previous wrapper if present
+            if ((ws).__concaveOnMessageWrapper) {
+              ws.removeEventListener('message', (ws).__concaveOnMessageWrapper);
+            }
+            currentHandler = handler;
+            if (typeof handler === 'function') {
+              const wrapper = function(event) {
+                try {
+                  const msg = JSON.parse(event.data);
+                  const now = Date.now();
+
+                  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;
+                  }
+
+                  // Mirror the same processing as in addEventListener wrapper
+                  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
+                          });
+                          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
+                              });
+                            });
+                          }
+                        }
+                      }
+                    });
+                  }
+                  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
+                      });
+                      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);
+                    }
+                  }
+                  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
+                      });
+                      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);
+                    }
+                  }
+                } catch (e) {
+                  console.warn('[DevTools] Error parsing server message (onmessage):', e);
+                }
+                if (typeof handler === 'function') {
+                  handler.call(ws, event);
+                }
+              };
+              (ws).__concaveOnMessageWrapper = wrapper;
+              ws.addEventListener('message', wrapper);
+            } else {
+              (ws).__concaveOnMessageWrapper = null;
+            }
+          }
+        });
+      })();
+      
+      return ws;
+    };
+    
+    // Preserve prototype chain
+    Object.setPrototypeOf(window.WebSocket, OriginalWebSocket);
+    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 })};
+<\/script>
+`, c = `
+<script type="module">
+  import { initDevTools } from '/@fs${s.resolve(g, "../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;
+      }
+    },
+    // Ensure devtools dependencies are optimized
+    config(e) {
+      var n;
+      return {
+        optimizeDeps: {
+          include: [...((n = e.optimizeDeps) == null ? void 0 : n.include) || [], "react", "react-dom"]
+        }
+      };
+    }
+  };
+}
+export {
+  p as concaveDevTools,
+  p as default
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@concavejs/devtools",
+  "version": "0.0.1-alpha.4",
+  "license": "FSL-1.1-Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./vite": {
+      "types": "./dist/vite-plugin/index.d.ts",
+      "default": "./dist/vite-plugin.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "default": "./dist/client.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "sync:version": "node scripts/sync-extension-version.mjs",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "build:standalone": "vite build --config vite.config.standalone.ts",
+    "build:page-agent": "vite build --config vite.config.page-agent.ts",
+    "build:panel": "vite build --config vite.config.panel.ts",
+    "build:extension": "bun run sync:version && bun run build:standalone && cp dist-standalone/devtools.js extension/devtools.js && bun run build:panel",
+    "build:all": "bun run build && bun run build:extension",
+    "sync:icons": "cp ../brand/assets/icon-16.png extension/icons/icon16.png && cp ../brand/assets/icon-48.png extension/icons/icon48.png && cp ../brand/assets/icon-128.png extension/icons/icon128.png",
+    "dev": "tsc --watch",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@concavejs/brand": "0.0.1-alpha.4",
+    "@concavejs/core": "0.0.1-alpha.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "vite": "^5.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^4.1.18",
+    "terser": "^5.46.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  }
+}