chore(release): bump version to v0.14.8

Author: justinbmeyer

overlay/src/ws.ts

@@ -11,40 +11,51 @@ const handlers: MessageHandler[] = [];
 export function connect(url: string = 'ws://localhost:3333'): void {
   connectAttempts++;
   const attempt = connectAttempts;
-  debugLog('tw-overlay', `ws connect() attempt #${attempt} to ${url} | readyState of previous socket: ${socket?.readyState ?? 'none'}`);
+  const t0 = performance.now();
+  const ts = () => `+${(performance.now() - t0).toFixed(0)}ms`;
+  debugLog('tw-overlay', `ws connect() attempt #${attempt} to ${url} | readyState of previous socket: ${socket?.readyState ?? 'none'} [${ts()}]`);
 
   try {
     socket = new WebSocket(url);
   } catch (err) {
-    console.error(`[tw-overlay][ws] WebSocket constructor threw:`, err);
+    console.error(`[tw-overlay][ws] WebSocket constructor threw [${ts()}]:`, err);
     return;
   }
 
-  debugLog('tw-overlay', `ws WebSocket created, readyState=${socket.readyState} (0=CONNECTING)`);
+  debugLog('tw-overlay', `ws WebSocket created, readyState=${socket.readyState} (0=CONNECTING) [${ts()}]`);
 
   socket.addEventListener('open', () => {
     connected = true;
     connectAttempts = 0; // Reset backoff on successful connection
-    debugLog('tw-overlay', `ws OPEN (attempt #${attempt}) — registering as overlay`);
+    debugLog('tw-overlay', `ws OPEN (attempt #${attempt}) [${ts()}] — registering as overlay`);
     // Register as overlay so the server can route messages to us
     send({ type: 'REGISTER', role: 'overlay' });
     window.dispatchEvent(new CustomEvent('overlay-ws-connected'));
   });
 
   socket.addEventListener('close', (event) => {
-    debugWarn('tw-overlay', `ws CLOSE (attempt #${attempt}) — code=${event.code} reason="${event.reason}" wasClean=${event.wasClean} | was connected=${connected}`);
+    debugWarn('tw-overlay', `ws CLOSE (attempt #${attempt}) [${ts()}] — code=${event.code} reason="${event.reason}" wasClean=${event.wasClean} | was connected=${connected}`);
     connected = false;
     socket = null;
     window.dispatchEvent(new CustomEvent('overlay-ws-disconnected'));
     // Exponential backoff: 500ms, 1s, 2s, 3s (cap)
     const delay = Math.min(500 * Math.pow(2, connectAttempts - 1), 3000);
-    debugLog('tw-overlay', `ws Will reconnect in ${delay}ms…`);
+    debugLog('tw-overlay', `ws Will reconnect in ${delay}ms… [${ts()}]`);
     reconnectTimer = setTimeout(() => connect(url), delay);
   });
 
+  socket.addEventListener('error', (err) => {
+    console.error(`[tw-overlay][ws] ERROR (attempt #${attempt}) [${ts()}] — connected=${connected} readyState=${socket?.readyState}`, err);
+  });
+
+  let firstMessage = true;
   socket.addEventListener('message', (event) => {
     try {
       const data = JSON.parse(event.data);
+      if (firstMessage) {
+        debugLog('tw-overlay', `WS ← first message: ${data.type ?? 'unknown'} [${ts()}]`);
+        firstMessage = false;
+      }
       debugLog('tw-overlay', `WS ← ${data.type ?? 'unknown'}`, data);
       for (const handler of handlers) {
         handler(data);
@@ -53,10 +64,6 @@ export function connect(url: string = 'ws://localhost:3333'): void {
       console.error('[tw-overlay] Failed to parse message:', err);
     }
   });
-
-  socket.addEventListener('error', (err) => {
-    console.error(`[tw-overlay][ws] ERROR (attempt #${attempt}) — connected=${connected} readyState=${socket?.readyState}`, err);
-  });
 }
 
 export function send(data: object): void {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.14.7",
+  "version": "0.14.8",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",

server/websocket.ts

@@ -14,6 +14,13 @@ export interface WebSocketDeps {
 export function setupWebSocket(httpServer: Server): WebSocketDeps {
   const wss = new WebSocketServer({ server: httpServer, maxPayload: 10 * 1024 * 1024, perMessageDeflate: false });
   const clientRoles = new Map<WebSocket, string>();
+  const serverStartTime = Date.now();
+  const ts = () => `[${((Date.now() - serverStartTime) / 1000).toFixed(1)}s]`;
+
+  // Log when the HTTP server receives a WebSocket upgrade request
+  httpServer.on('upgrade', (req) => {
+    console.error(`${ts()} [ws] HTTP upgrade request for: ${req.url} from ${req.headers.origin ?? 'unknown origin'}`);
+  });
 
   // Heartbeat: ping every 25s to keep Codespaces tunnel alive
   const aliveClients = new WeakSet<WebSocket>();
@@ -48,8 +55,8 @@ export function setupWebSocket(httpServer: Server): WebSocketDeps {
     broadcastTo("panel", { type: "QUEUE_UPDATE", ...getQueueUpdate() });
   }
 
-  wss.on("connection", (ws: WebSocket) => {
-    console.error("[ws] Client connected");
+  wss.on("connection", (ws: WebSocket, req) => {
+    console.error(`${ts()} [ws] Client connected from ${req.url}`);
     aliveClients.add(ws);
     ws.on("pong", () => { aliveClients.add(ws); });
 
@@ -61,16 +68,16 @@ export function setupWebSocket(httpServer: Server): WebSocketDeps {
           const role = msg.role;
           if (role === "overlay" || role === "panel" || role === "design") {
             clientRoles.set(ws, role);
-            console.error(`[ws] Client registered as: ${role}`);
+            console.error(`${ts()} [ws] Client registered as: ${role}`);
             if (role === "panel") {
               ws.send(JSON.stringify({ type: "QUEUE_UPDATE", ...getQueueUpdate() }));
               // Tell newly-registered panel whether an overlay is connected
               const overlayConnected = hasOverlay();
-              console.error(`[ws] Sending OVERLAY_STATUS { connected: ${overlayConnected} } to new panel`);
+              console.error(`${ts()} [ws] Sending OVERLAY_STATUS { connected: ${overlayConnected} } to new panel`);
               ws.send(JSON.stringify({ type: "OVERLAY_STATUS", connected: overlayConnected }));
             } else if (role === "overlay") {
               // Notify all panels that an overlay connected
-              console.error(`[ws] Broadcasting OVERLAY_STATUS { connected: true } to all panels`);
+              console.error(`${ts()} [ws] Broadcasting OVERLAY_STATUS { connected: true } to all panels`);
               broadcastTo("panel", { type: "OVERLAY_STATUS", connected: true });
             }
           }
@@ -200,7 +207,7 @@ export function setupWebSocket(httpServer: Server): WebSocketDeps {
     ws.on("close", () => {
       const role = clientRoles.get(ws);
       clientRoles.delete(ws);
-      console.error("[ws] Client disconnected");
+      console.error(`${ts()} [ws] Client disconnected (was: ${role ?? 'unregistered'})`);
       // If an overlay disconnected, notify panels
       if (role === "overlay" && !hasOverlay()) {
         broadcastTo("panel", { type: "OVERLAY_STATUS", connected: false });