browsertrack 0.2.1 → 0.2.2

package/packages/client/src/notes/inspector.ts

@@ -1050,9 +1050,16 @@ export class NoteInspector {
 
     const currentPath = window.location.pathname;
     // Filter open notes on this route or global
-    const activeNotes = this.savedNotes.filter(
-      (n) => n.status === 'OPEN' && (n.route === currentPath || !n.route || n.route === '/' || window.location.href.includes(n.route))
-    );
+    const activeNotes = this.savedNotes.filter((n) => {
+      if (n.status !== 'OPEN') return false;
+      if (!n.route) return true;
+      if (n.route === currentPath) return true;
+      // Support hash or query routes (e.g. /#modal or /?tab=settings)
+      if (n.route.includes('#') || n.route.includes('?')) {
+        return window.location.href.includes(n.route);
+      }
+      return false;
+    });
 
     const pageNotes: VisualNote[] = [];
 
@@ -1343,81 +1350,103 @@ export class NoteInspector {
   private setupListeners(): void {
     // 1. Mouse move: hover highlight in element mode or with Alt key
     const onMouseMove = (e: MouseEvent) => {
-      if (this.isHidden || this.modalOverlay || this.cardOverlay || this.isDraggingRegion || this.activeMode === 'region') return;
-
-      // Don't highlight elements if mouse is over our own inspector UI
-      const path = e.composedPath ? e.composedPath() : [];
-      if (this.container && path.includes(this.container)) {
-        this.hideHighlight();
-        return;
-      }
+      try {
+        if (this.isHidden || this.modalOverlay || this.cardOverlay || this.isDraggingRegion || this.activeMode === 'region') return;
 
-      if (e.altKey || this.activeMode === 'element') {
-        const target = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null;
-        if (target && target !== this.container && !this.container?.contains(target)) {
-          this.hoveredElement = target;
-          this.updateHighlight(target);
+        // Don't highlight elements if mouse is over our own inspector UI
+        const path = e.composedPath ? e.composedPath() : [];
+        if (this.container && path.includes(this.container)) {
+          this.hideHighlight();
           return;
         }
-      }
 
-      if (!e.altKey && this.activeMode !== 'element') {
-        this.hideHighlight();
+        if (e.altKey || this.activeMode === 'element') {
+          const target = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null;
+          if (target && target !== this.container && !this.container?.contains(target)) {
+            this.hoveredElement = target;
+            this.updateHighlight(target);
+            return;
+          }
+        }
+
+        if (!e.altKey && this.activeMode !== 'element') {
+          this.hideHighlight();
+        }
+      } catch {
+        // Defensive: never let inspector hover crash host app
       }
     };
 
     // 2. Click: Alt+Click or Element mode click selects element and opens editor
     const onClick = (e: MouseEvent) => {
-      if (this.isHidden || this.modalOverlay || this.cardOverlay) return;
+      try {
+        if (this.isHidden || this.modalOverlay || this.cardOverlay) return;
 
-      // If clicking inside inspector toolbar or container, do NOT intercept
-      const path = e.composedPath ? e.composedPath() : [];
-      if (this.container && path.includes(this.container)) {
-        return;
-      }
+        // If clicking inside inspector toolbar or container, do NOT intercept
+        const path = e.composedPath ? e.composedPath() : [];
+        if (this.container && path.includes(this.container)) {
+          return;
+        }
 
-      if (this.activeMode === 'region') return;
+        if (this.activeMode === 'region') return;
 
-      if (e.altKey || this.activeMode === 'element') {
-        e.preventDefault();
-        e.stopPropagation();
+        if (e.altKey || this.activeMode === 'element') {
+          e.preventDefault();
+          e.stopPropagation();
 
-        const target = (this.hoveredElement || document.elementFromPoint(e.clientX, e.clientY)) as HTMLElement | null;
-        if (target && target !== this.container && !this.container?.contains(target)) {
-          this.selectedElement = target;
-          this.openNoteEditor(target, 'element');
-          if (this.activeMode === 'element' && !this.activeScenario) {
-            this.setMode('idle');
+          const target = (this.hoveredElement || document.elementFromPoint(e.clientX, e.clientY)) as HTMLElement | null;
+          if (target && target !== this.container && !this.container?.contains(target)) {
+            this.selectedElement = target;
+            this.openNoteEditor(target, 'element');
+            if (this.activeMode === 'element' && !this.activeScenario) {
+              this.setMode('idle');
+            }
           }
         }
+      } catch {
+        // Defensive
       }
     };
 
     // 3. Key handling: Escape cancels active modes, Alt release hides highlight
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        if (this.cardOverlay && this.cardOverlay.parentElement && this.shadowRoot) {
-          this.shadowRoot.removeChild(this.cardOverlay);
-          this.cardOverlay = null;
-        } else if (this.activeMode === 'region' || this.activeMode === 'element') {
-          if (!this.activeScenario) {
-            this.setMode('idle');
+      try {
+        if (e.key === 'Escape') {
+          if (this.cardOverlay && this.cardOverlay.parentElement && this.shadowRoot) {
+            this.shadowRoot.removeChild(this.cardOverlay);
+            this.cardOverlay = null;
+          } else if (this.activeMode === 'region' || this.activeMode === 'element') {
+            if (!this.activeScenario) {
+              this.setMode('idle');
+            }
           }
         }
+      } catch {
+        // Defensive
       }
     };
 
     const onKeyUp = (e: KeyboardEvent) => {
-      if (e.key === 'Alt' && !this.modalOverlay && !this.cardOverlay && this.activeMode !== 'element') {
-        this.hideHighlight();
+      try {
+        if (e.key === 'Alt' && !this.modalOverlay && !this.cardOverlay && this.activeMode !== 'element') {
+          this.hideHighlight();
+        }
+      } catch {
+        // Defensive
       }
     };
 
     // 4. Scroll & resize: reposition markers accurately
     const onScrollOrResize = () => {
-      requestAnimationFrame(() => {
-        this.updateMarkerPositions();
-      });
+      try {
+        requestAnimationFrame(() => {
+          try {
+            this.updateMarkerPositions();
+          } catch {}
+        });
+      } catch {
+        // Defensive
+      }
     };
 
     window.addEventListener('mousemove', onMouseMove, { capture: true, passive: true });
@@ -2005,7 +2034,11 @@ export class NoteInspector {
           region.width,
           region.height
         );
-        resolve(canvas.toDataURL('image/png'));
+        try {
+          resolve(canvas.toDataURL('image/png'));
+        } catch {
+          resolve(dataUrl);
+        }
       };
       img.onerror = () => resolve(dataUrl);
       img.src = dataUrl;

package/packages/client/src/source/resolver.ts

@@ -76,7 +76,9 @@ function resolveReactComponent(el: HTMLElement): ComponentSourceInfo | undefined
 
     // Walk up fiber return tree to discover composite components and hierarchy
     let curr = hostFiber;
-    while (curr) {
+    let depth = 0;
+    while (curr && depth < 50) {
+      depth++;
       const type = curr.type;
       const name = getReactComponentName(type);
 
@@ -146,7 +148,9 @@ function resolveVueComponent(el: HTMLElement): ComponentSourceInfo | undefined {
       const hierarchy: string[] = [];
 
       let curr = vueParent;
-      while (curr) {
+      let depth = 0;
+      while (curr && depth < 50) {
+        depth++;
         const cType = curr.type || {};
         const cName = cType.name || cType.__name || cType.displayName;
         if (cName && !hierarchy.includes(cName)) {
@@ -192,7 +196,9 @@ function resolveVueComponent(el: HTMLElement): ComponentSourceInfo | undefined {
 function resolveSvelteComponent(el: HTMLElement): ComponentSourceInfo | undefined {
   try {
     let curr: HTMLElement | null = el;
-    while (curr) {
+    let depth = 0;
+    while (curr && depth < 50) {
+      depth++;
       const meta = (curr as any).__svelte_meta;
       if (meta && meta.loc) {
         return {

package/packages/client/src/transport/websocket.ts

@@ -1,4 +1,5 @@
 import type { HelloMessage, ClientCommand, CommandResponse } from '../../../core/src/index.js';
+import { safeJsonStringify } from '../../../core/src/index.js';
 import type { ClientCommandHandler } from '../commands/handler.js';
 
 export interface TransportOptions {
@@ -111,15 +112,19 @@ export class WebSocketTransport {
   }
 
   public send(payload: any): void {
-    const raw = JSON.stringify(payload);
-    if (this.isConnected()) {
-      try {
-        this.ws!.send(raw);
-      } catch {
+    try {
+      const raw = safeJsonStringify(payload);
+      if (this.isConnected()) {
+        try {
+          this.ws!.send(raw);
+        } catch {
+          this.enqueue(raw);
+        }
+      } else {
         this.enqueue(raw);
       }
-    } else {
-      this.enqueue(raw);
+    } catch {
+      // Defensive: never let payload serialization crash caller
     }
   }
 
@@ -148,18 +153,18 @@ export class WebSocketTransport {
   private sendHello(): void {
     if (typeof window === 'undefined') return;
 
-    const hello: HelloMessage = {
-      type: 'hello',
-      origin: window.location.origin,
-      url: window.location.href,
-      title: document.title,
-      userAgent: navigator.userAgent,
-      timestamp: Date.now(),
-      projectId: this.projectId,
-    };
-
     try {
-      this.ws!.send(JSON.stringify(hello));
+      const hello: HelloMessage = {
+        type: 'hello',
+        origin: window.location.origin,
+        url: window.location.href,
+        title: document.title,
+        userAgent: navigator.userAgent,
+        timestamp: Date.now(),
+        projectId: this.projectId,
+      };
+
+      this.ws!.send(safeJsonStringify(hello));
     } catch {
       // Defensive
     }

package/packages/core/src/index.ts

@@ -7,3 +7,4 @@ export * from './types/notes.js';
 export * from './fingerprint.js';
 export * from './redaction.js';
 export * from './selector.js';
+export * from './safety.js';

package/packages/core/src/safety.ts

@@ -0,0 +1,86 @@
+/**
+ * BrowserTrack Safety & Error-Resilience Utilities
+ * Provides bulletproof try/catch wrappers, circular-safe JSON serialization, and defensive helpers.
+ */
+
+/**
+ * Safely parses a JSON string with fallback. Never throws.
+ */
+export function safeJsonParse<T>(raw: any, fallback: T): T {
+  if (raw === null || raw === undefined) return fallback;
+  if (typeof raw !== 'string') return typeof raw === 'object' ? (raw as T) : fallback;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Safely serializes an object to JSON, handling circular references and non-serializable values.
+ * Never throws "TypeError: Converting circular structure to JSON".
+ */
+export function safeJsonStringify(val: any, fallback = '{}'): string {
+  if (val === undefined) return fallback;
+  try {
+    const seen = new WeakSet();
+    return JSON.stringify(val, (key, value) => {
+      if (typeof value === 'object' && value !== null) {
+        if (seen.has(value)) {
+          return '[Circular]';
+        }
+        seen.add(value);
+      }
+      if (typeof value === 'bigint') {
+        return value.toString();
+      }
+      return value;
+    });
+  } catch {
+    try {
+      return JSON.stringify(String(val));
+    } catch {
+      return fallback;
+    }
+  }
+}
+
+/**
+ * Executes a synchronous function within an isolated try/catch block.
+ * Returns the function result, or fallback if an exception was thrown.
+ */
+export function safeExecute<T>(fn: () => T, fallback: T, onError?: (err: any) => void): T {
+  try {
+    return fn();
+  } catch (err: any) {
+    if (onError) {
+      try {
+        onError(err);
+      } catch {}
+    }
+    return fallback;
+  }
+}
+
+/**
+ * Executes an asynchronous promise or async function safely without unhandled rejection.
+ */
+export async function safeAsync<T>(
+  action: Promise<T> | (() => Promise<T>),
+  fallback: T,
+  onError?: (err: any) => void
+): Promise<T> {
+  try {
+    if (typeof action === 'function') {
+      return await action();
+    }
+    return await action;
+  } catch (err: any) {
+    if (onError) {
+      try {
+        onError(err);
+      } catch {}
+    }
+    return fallback;
+  }
+}

package/packages/daemon/src/server/daemon.ts

@@ -40,7 +40,13 @@ export class BrowserTrackDaemon {
   public async start(): Promise<void> {
     if (this.isRunning) return;
 
-    const httpHandler = createHttpHandler(this.db, this.sessionManager, this.config.screenshotsDir);
+    const httpHandler = createHttpHandler(
+      this.db,
+      this.sessionManager,
+      this.config.screenshotsDir,
+      this.verificationEngine,
+      this.noteVerificationEngine
+    );
     this.httpServer = http.createServer(httpHandler);
 
     this.wss = new WebSocketServer({ server: this.httpServer });

package/packages/daemon/src/server/http.ts

@@ -4,11 +4,59 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import type { StorageDB } from '../storage/db.js';
 import type { SessionManager } from '../session/manager.js';
+import type { VerificationEngine } from '../verification/engine.js';
+import type { NoteVerificationEngine } from '../notes/verification.js';
 
-export function createHttpHandler(db: StorageDB, sessionManager: SessionManager, baseScreenshotsDir: string) {
-  return (req: http.IncomingMessage, res: http.ServerResponse) => {
-    const parsedUrl = new URL(req.url || '/', `http://${req.headers.host || '127.0.0.1'}`);
-    const pathname = parsedUrl.pathname;
+function readJsonBody(req: http.IncomingMessage, res: http.ServerResponse, maxSizeBytes = 10 * 1024 * 1024): Promise<any> {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    let isTooLarge = false;
+
+    req.on('data', (chunk) => {
+      if (isTooLarge) return;
+      body += chunk;
+      if (body.length > maxSizeBytes) {
+        isTooLarge = true;
+        if (!res.headersSent) {
+          res.writeHead(413, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: 'Payload too large' }));
+        }
+        req.destroy();
+        reject(new Error('Payload too large'));
+      }
+    });
+
+    req.on('end', () => {
+      if (isTooLarge) return;
+      try {
+        const parsed = body ? JSON.parse(body) : {};
+        resolve(parsed);
+      } catch (err: any) {
+        if (!res.headersSent) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: 'Malformed JSON payload' }));
+        }
+        reject(err);
+      }
+    });
+
+    req.on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+export function createHttpHandler(
+  db: StorageDB,
+  sessionManager: SessionManager,
+  baseScreenshotsDir: string,
+  verificationEngine?: VerificationEngine,
+  noteVerificationEngine?: NoteVerificationEngine
+) {
+  return async (req: http.IncomingMessage, res: http.ServerResponse) => {
+    try {
+      const parsedUrl = new URL(req.url || '/', `http://${req.headers.host || '127.0.0.1'}`);
+      const pathname = parsedUrl.pathname;
 
     // CORS headers for local development access
     res.setHeader('Access-Control-Allow-Origin', '*');
@@ -158,8 +206,80 @@ export function createHttpHandler(db: StorageDB, sessionManager: SessionManager,
       return;
     }
 
+    // 10. API - Dispatch Live Command to Browser Session
+    if (pathname === '/api/command' && req.method === 'POST') {
+      try {
+        const data = await readJsonBody(req, res);
+        const sessionId = data.sessionId || sessionManager.getAnyActiveSession()?.id;
+        if (!sessionId) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: 'No active browser session connected' }));
+          return;
+        }
+        const cmdRes = await sessionManager.sendCommand(sessionId, data.command, data.timeoutMs || 5000);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify(cmdRes));
+      } catch (err: any) {
+        if (!res.headersSent) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: err?.message || String(err) }));
+        }
+      }
+      return;
+    }
+
+    // 11. API - Verify Incident
+    if (pathname === '/api/verify/incident' && req.method === 'POST') {
+      try {
+        if (!verificationEngine) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: 'Verification engine not attached to daemon' }));
+          return;
+        }
+        const data = await readJsonBody(req, res);
+        const result = await verificationEngine.verifyIncident(data.incidentId, data.options);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, result }));
+      } catch (err: any) {
+        if (!res.headersSent) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: err?.message || String(err) }));
+        }
+      }
+      return;
+    }
+
+    // 12. API - Verify Note
+    if (pathname === '/api/verify/note' && req.method === 'POST') {
+      try {
+        if (!noteVerificationEngine) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: 'Note verification engine not attached to daemon' }));
+          return;
+        }
+        const data = await readJsonBody(req, res);
+        const result = await noteVerificationEngine.verifyNote(data.noteId, data.options);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, result }));
+      } catch (err: any) {
+        if (!res.headersSent) {
+          res.writeHead(500, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: err?.message || String(err) }));
+        }
+      }
+      return;
+    }
+
     // Not found
     res.writeHead(404, { 'Content-Type': 'application/json' });
     res.end(JSON.stringify({ ok: false, error: 'Not found' }));
-  };
+  } catch (err: any) {
+    if (!res.headersSent) {
+      try {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: err?.message || 'Internal Server Error' }));
+      } catch {}
+    }
+  }
+};
 }

package/packages/daemon/src/server/ws.ts

@@ -1,11 +1,23 @@
 import crypto from 'node:crypto';
 import type { WebSocket, WebSocketServer } from 'ws';
 import type { ClientEventMessage, CommandResponse, HelloMessage } from '../../../core/src/index.js';
+import { safeJsonStringify } from '../../../core/src/index.js';
 import type { IncidentEngine } from '../incidents/engine.js';
 import type { NotesEngine } from '../notes/engine.js';
 import type { SessionManager } from '../session/manager.js';
 import type { StorageDB } from '../storage/db.js';
 
+function safeWsSend(ws: WebSocket, payload: any): boolean {
+  if (ws.readyState !== 1 /* WebSocket.OPEN */) return false;
+  try {
+    const raw = typeof payload === 'string' ? payload : safeJsonStringify(payload);
+    ws.send(raw);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 export function setupWebSocketServer(
   wss: WebSocketServer,
   db: StorageDB,
@@ -65,23 +77,19 @@ export function setupWebSocketServer(
 
           sessionManager.registerSocket(sessionId, ws, hello.origin || '', project.id);
 
-          ws.send(
-            JSON.stringify({
-              type: 'hello_ack',
-              sessionId,
-              projectId: project.id,
-              projectName: project.name,
-            })
-          );
+          safeWsSend(ws, {
+            type: 'hello_ack',
+            sessionId,
+            projectId: project.id,
+            projectName: project.name,
+          });
 
           // Sync existing notes for this project on load
           const existingNotes = db.listNotes({ projectId: project.id, limit: 100 });
-          ws.send(
-            JSON.stringify({
-              type: 'notes_sync',
-              notes: existingNotes,
-            })
-          );
+          safeWsSend(ws, {
+            type: 'notes_sync',
+            notes: existingNotes,
+          });
 
           if (verbose) {
             console.log(`[BrowserTrack] New session connected: ${sessionId} (${project.name} @ ${hello.origin})`);
@@ -147,15 +155,13 @@ export function setupWebSocketServer(
             );
           }
 
-          ws.send(
-            JSON.stringify({
-              type: 'note_created_ack',
-              noteId: note.id,
-              status: note.status,
-              scenarioId: note.scenarioId,
-              stepNumber: note.stepNumber,
-            })
-          );
+          safeWsSend(ws, {
+            type: 'note_created_ack',
+            noteId: note.id,
+            status: note.status,
+            scenarioId: note.scenarioId,
+            stepNumber: note.stepNumber,
+          });
 
           // Broadcast updated notes to all active browser tabs in this project
           const allNotes = db.listNotes({ projectId: note.projectId, limit: 100 });
@@ -224,12 +230,10 @@ export function setupWebSocketServer(
           const projectId = data.projectId || session?.projectId;
           if (projectId) {
             const allNotes = db.listNotes({ projectId, limit: 100 });
-            ws.send(
-              JSON.stringify({
-                type: 'notes_sync',
-                notes: allNotes,
-              })
-            );
+            safeWsSend(ws, {
+              type: 'notes_sync',
+              notes: allNotes,
+            });
           }
           return;
         }