browsertrack 0.0.1 → 0.1.1

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

@@ -0,0 +1,165 @@
+import fs from 'node:fs';
+import http from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { StorageDB } from '../storage/db.js';
+import type { SessionManager } from '../session/manager.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;
+
+    // CORS headers for local development access
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+    if (req.method === 'OPTIONS') {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+
+    // 1. Health check
+    if (pathname === '/health' || pathname === '/') {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          status: 'ok',
+          name: 'browsertrack',
+          version: '0.1.0',
+          activeSessions: sessionManager.getActiveCount(),
+          timestamp: new Date().toISOString(),
+        })
+      );
+      return;
+    }
+
+    // 2. Client script tag bundle
+    if (pathname === '/client.js' || pathname === '/browserdiag.js') {
+      let scriptContent = '';
+      try {
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        // Look in dist or adjacent package
+        const candidatePaths = [
+          path.resolve(__dirname, '../client.iife.js'),
+          path.resolve(__dirname, '../../dist/client.iife.js'),
+          path.resolve(__dirname, '../../../dist/client.iife.js'),
+        ];
+
+        for (const p of candidatePaths) {
+          if (fs.existsSync(p)) {
+            scriptContent = fs.readFileSync(p, 'utf-8');
+            break;
+          }
+        }
+      } catch {}
+
+      if (!scriptContent) {
+        scriptContent = `console.warn("[BrowserTrack] Standalone client bundle not built yet. Run 'npm run build'.");`;
+      }
+
+      res.writeHead(200, {
+        'Content-Type': 'application/javascript; charset=utf-8',
+        'Cache-Control': 'no-cache',
+      });
+      res.end(scriptContent);
+      return;
+    }
+
+    // 3. API - Projects
+    if (pathname === '/api/projects') {
+      const projects = db.listProjects();
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, projects }));
+      return;
+    }
+
+    // 4. API - Sessions
+    if (pathname === '/api/sessions') {
+      const projectId = parsedUrl.searchParams.get('project') || undefined;
+      const activeOnly = parsedUrl.searchParams.get('active') === 'true';
+      const sessions = db.listSessions(projectId, activeOnly);
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, sessions }));
+      return;
+    }
+
+    // 5. API - Incidents
+    if (pathname === '/api/incidents') {
+      const projectId = parsedUrl.searchParams.get('project') || undefined;
+      const status = (parsedUrl.searchParams.get('status') as any) || undefined;
+      const limit = parseInt(parsedUrl.searchParams.get('limit') || '50', 10);
+      const incidents = db.listIncidents({ projectId, status, limit });
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, incidents }));
+      return;
+    }
+
+    // 6. API - Incident Detail
+    if (pathname.startsWith('/api/incidents/')) {
+      const incidentId = pathname.replace('/api/incidents/', '');
+      const incident = db.getIncident(incidentId);
+      if (!incident) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: 'Incident not found' }));
+        return;
+      }
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, incident }));
+      return;
+    }
+
+    // 7. API - Notes
+    if (pathname === '/api/notes') {
+      const projectId = parsedUrl.searchParams.get('project') || undefined;
+      const status = (parsedUrl.searchParams.get('status') as any) || undefined;
+      const limit = parseInt(parsedUrl.searchParams.get('limit') || '50', 10);
+      const notes = db.listNotes({ projectId, status, limit });
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, notes }));
+      return;
+    }
+
+    // 8. API - Note Detail
+    if (pathname.startsWith('/api/notes/')) {
+      const noteId = pathname.replace('/api/notes/', '');
+      const note = db.getNote(noteId);
+      if (!note) {
+        res.writeHead(404, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: 'Note not found' }));
+        return;
+      }
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, note }));
+      return;
+    }
+
+    // 9. Screenshots Serving
+    if (pathname.startsWith('/screenshots/')) {
+      const relativePath = pathname.replace('/screenshots/', '');
+      const filePath = path.join(baseScreenshotsDir, relativePath);
+      if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+        const ext = path.extname(filePath).toLowerCase();
+        const mimeTypes: Record<string, string> = {
+          '.webp': 'image/webp',
+          '.png': 'image/png',
+          '.jpg': 'image/jpeg',
+          '.jpeg': 'image/jpeg',
+        };
+        res.writeHead(200, { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' });
+        fs.createReadStream(filePath).pipe(res);
+        return;
+      }
+      res.writeHead(404, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ ok: false, error: 'Screenshot not found' }));
+      return;
+    }
+
+    // Not found
+    res.writeHead(404, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ ok: false, error: 'Not found' }));
+  };
+}

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

@@ -0,0 +1,246 @@
+import crypto from 'node:crypto';
+import type { WebSocket, WebSocketServer } from 'ws';
+import type { ClientEventMessage, CommandResponse, HelloMessage } 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';
+
+export function setupWebSocketServer(
+  wss: WebSocketServer,
+  db: StorageDB,
+  sessionManager: SessionManager,
+  incidentEngine: IncidentEngine,
+  notesEngine?: NotesEngine,
+  maxEventsPerSession = 1000,
+  verbose = false
+): void {
+  wss.on('connection', (ws: WebSocket) => {
+    let currentSessionId: string | null = null;
+
+    ws.on('message', (raw: string | Buffer) => {
+      try {
+        const text = typeof raw === 'string' ? raw : raw.toString('utf-8');
+        const data = JSON.parse(text);
+
+        // 1. Hello handshake
+        if (data.type === 'hello') {
+          const hello = data as HelloMessage;
+          const sessionId = `sess_${crypto.randomUUID().slice(0, 8)}`;
+          currentSessionId = sessionId;
+
+          // Determine or create project
+          let project = hello.projectId ? db.getProject(hello.projectId) : null;
+          if (!project && hello.origin) {
+            project = db.getProjectByOrigin(hello.origin);
+          }
+          if (!project) {
+            // Auto-create project based on origin or hostname
+            let projName = 'default';
+            try {
+              const url = new URL(hello.origin || 'http://localhost');
+              projName = url.port ? `app-${url.port}` : url.hostname;
+            } catch {
+              projName = 'app';
+            }
+            project = db.upsertProject({
+              id: `proj_${crypto.randomUUID().slice(0, 8)}`,
+              name: projName,
+              origin: hello.origin || 'http://localhost',
+            });
+          }
+
+          const now = new Date().toISOString();
+          db.upsertSession({
+            id: sessionId,
+            projectId: project.id,
+            origin: hello.origin || '',
+            url: hello.url || '',
+            title: hello.title || '',
+            userAgent: hello.userAgent || '',
+            connectedAt: now,
+            lastSeenAt: now,
+            active: true,
+          });
+
+          sessionManager.registerSocket(sessionId, ws, hello.origin || '', project.id);
+
+          ws.send(
+            JSON.stringify({
+              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,
+            })
+          );
+
+          if (verbose) {
+            console.log(`[BrowserTrack] New session connected: ${sessionId} (${project.name} @ ${hello.origin})`);
+          }
+          return;
+        }
+
+        // 2. Client Event (runtime error, console, network, breadcrumb)
+        if (data.type === 'event') {
+          const eventMsg = data as ClientEventMessage;
+          const sessionId = eventMsg.sessionId || currentSessionId;
+          if (!sessionId) return;
+
+          const eventId = `evt_${crypto.randomUUID().slice(0, 8)}`;
+          db.insertEvent({
+            id: eventId,
+            sessionId,
+            eventType: eventMsg.eventType,
+            payload: eventMsg.payload,
+            timestamp: eventMsg.timestamp || Date.now(),
+            route: eventMsg.route,
+            url: eventMsg.url,
+          });
+
+          // Session retention prune
+          db.pruneSessionEvents(sessionId, maxEventsPerSession);
+
+          // Incident processing
+          const incident = incidentEngine.processClientEvent(eventMsg);
+          if (incident && verbose) {
+            console.log(
+              `[BrowserTrack] Incident recorded: ${incident.id} (${incident.type}: ${incident.message}) [${incident.occurrences}x]`
+            );
+          }
+          return;
+        }
+
+        // 3. Visual Note Creation
+        if (data.type === 'create_note' && notesEngine) {
+          const note = notesEngine.createNoteFromClient({
+            sessionId: data.sessionId || currentSessionId || '',
+            noteType: data.noteType,
+            message: data.message,
+            route: data.route,
+            url: data.url,
+            viewport: data.viewport,
+            scroll: data.scroll,
+            target: data.target,
+            elementContext: data.elementContext,
+            region: data.region,
+            screenshot: data.screenshot,
+            incidentId: data.incidentId,
+          });
+
+          if (verbose) {
+            console.log(`[BrowserTrack] Visual note created: ${note.id} on ${note.route} ("${note.message}")`);
+          }
+
+          ws.send(
+            JSON.stringify({
+              type: 'note_created_ack',
+              noteId: note.id,
+              status: note.status,
+            })
+          );
+
+          // Broadcast updated notes to all active browser tabs in this project
+          const allNotes = db.listNotes({ projectId: note.projectId, limit: 100 });
+          sessionManager.broadcastToProject(note.projectId, {
+            type: 'notes_sync',
+            notes: allNotes,
+          });
+          return;
+        }
+
+        // 4. Visual Note Status / Delete Actions
+        if (data.type === 'resolve_note' && data.noteId) {
+          const note = db.getNote(data.noteId);
+          if (note) {
+            db.updateNoteStatus(data.noteId, 'RESOLVED');
+            const allNotes = db.listNotes({ projectId: note.projectId, limit: 100 });
+            sessionManager.broadcastToProject(note.projectId, {
+              type: 'notes_sync',
+              notes: allNotes,
+            });
+          }
+          return;
+        }
+
+        if (data.type === 'reopen_note' && data.noteId) {
+          const note = db.getNote(data.noteId);
+          if (note) {
+            db.updateNoteStatus(data.noteId, 'OPEN');
+            const allNotes = db.listNotes({ projectId: note.projectId, limit: 100 });
+            sessionManager.broadcastToProject(note.projectId, {
+              type: 'notes_sync',
+              notes: allNotes,
+            });
+          }
+          return;
+        }
+
+        if (data.type === 'delete_note' && data.noteId) {
+          const note = db.getNote(data.noteId);
+          if (note) {
+            db.deleteNote(data.noteId);
+            const allNotes = db.listNotes({ projectId: note.projectId, limit: 100 });
+            sessionManager.broadcastToProject(note.projectId, {
+              type: 'notes_sync',
+              notes: allNotes,
+            });
+          }
+          return;
+        }
+
+        if (data.type === 'get_notes') {
+          const session = currentSessionId ? db.getSession(currentSessionId) : null;
+          const projectId = data.projectId || session?.projectId;
+          if (projectId) {
+            const allNotes = db.listNotes({ projectId, limit: 100 });
+            ws.send(
+              JSON.stringify({
+                type: 'notes_sync',
+                notes: allNotes,
+              })
+            );
+          }
+          return;
+        }
+
+        // 5. Command Response
+        if (data.type === 'command_response') {
+          const res = data.response as CommandResponse;
+          const sessionId = data.sessionId || currentSessionId;
+          if (sessionId && res) {
+            sessionManager.handleCommandResponse(sessionId, res);
+          }
+          return;
+        }
+      } catch (err: any) {
+        if (verbose) {
+          console.error('[BrowserTrack] WebSocket message error:', err?.message);
+        }
+      }
+    });
+
+    ws.on('close', () => {
+      if (currentSessionId) {
+        sessionManager.unregisterSocket(currentSessionId);
+        if (verbose) {
+          console.log(`[BrowserTrack] Session disconnected: ${currentSessionId}`);
+        }
+      }
+    });
+
+    ws.on('error', () => {
+      if (currentSessionId) {
+        sessionManager.unregisterSocket(currentSessionId);
+      }
+    });
+  });
+}

package/packages/daemon/src/session/manager.ts

@@ -0,0 +1,147 @@
+import type { WebSocket } from 'ws';
+import type { ClientCommand, CommandResponse, Session } from '../../../core/src/index.js';
+import type { StorageDB } from '../storage/db.js';
+
+interface ActiveSessionSocket {
+  sessionId: string;
+  ws: WebSocket;
+  origin: string;
+  projectId: string;
+  pendingCommands: Map<
+    string,
+    {
+      resolve: (res: CommandResponse) => void;
+      reject: (err: Error) => void;
+      timer: any;
+    }
+  >;
+}
+
+export class SessionManager {
+  private activeSockets: Map<string, ActiveSessionSocket> = new Map();
+  private db: StorageDB;
+
+  constructor(db: StorageDB) {
+    this.db = db;
+  }
+
+  public registerSocket(sessionId: string, ws: WebSocket, origin: string, projectId: string): void {
+    this.activeSockets.set(sessionId, {
+      sessionId,
+      ws,
+      origin,
+      projectId,
+      pendingCommands: new Map(),
+    });
+  }
+
+  public unregisterSocket(sessionId: string): void {
+    const active = this.activeSockets.get(sessionId);
+    if (active) {
+      for (const pending of active.pendingCommands.values()) {
+        clearTimeout(pending.timer);
+        pending.reject(new Error('Session disconnected before command completed'));
+      }
+      active.pendingCommands.clear();
+      this.activeSockets.delete(sessionId);
+      this.db.deactivateSession(sessionId);
+    }
+  }
+
+  public handleCommandResponse(sessionId: string, response: CommandResponse): void {
+    const active = this.activeSockets.get(sessionId);
+    if (!active) return;
+
+    const pending = active.pendingCommands.get(response.id);
+    if (pending) {
+      clearTimeout(pending.timer);
+      active.pendingCommands.delete(response.id);
+      pending.resolve(response);
+    }
+  }
+
+  public async sendCommand<T = any>(sessionId: string, command: ClientCommand<T>, timeoutMs = 5000): Promise<CommandResponse> {
+    const active = this.activeSockets.get(sessionId);
+    if (!active || active.ws.readyState !== 1 /* WebSocket.OPEN */) {
+      return {
+        id: command.id,
+        ok: false,
+        error: `Session ${sessionId} is not actively connected`,
+      };
+    }
+
+    return new Promise<CommandResponse>((resolve, reject) => {
+      const timer = setTimeout(() => {
+        active.pendingCommands.delete(command.id);
+        resolve({
+          id: command.id,
+          ok: false,
+          error: `Command ${command.type} timed out after ${timeoutMs}ms`,
+        });
+      }, timeoutMs);
+
+      active.pendingCommands.set(command.id, {
+        resolve,
+        reject,
+        timer,
+      });
+
+      try {
+        active.ws.send(
+          JSON.stringify({
+            type: 'command',
+            command,
+          })
+        );
+      } catch (err: any) {
+        clearTimeout(timer);
+        active.pendingCommands.delete(command.id);
+        resolve({
+          id: command.id,
+          ok: false,
+          error: err?.message || 'Failed to send command over WebSocket',
+        });
+      }
+    });
+  }
+
+  public getActiveSessionForProject(projectId: string): Session | null {
+    for (const active of this.activeSockets.values()) {
+      if (active.projectId === projectId) {
+        return this.db.getSession(active.sessionId);
+      }
+    }
+    return null;
+  }
+
+  public getAnyActiveSession(): Session | null {
+    const first = this.activeSockets.keys().next().value;
+    if (!first) return null;
+    return this.db.getSession(first);
+  }
+
+  public getActiveCount(): number {
+    return this.activeSockets.size;
+  }
+
+  public broadcastToProject(projectId: string, message: any): void {
+    const raw = typeof message === 'string' ? message : JSON.stringify(message);
+    for (const active of this.activeSockets.values()) {
+      if (active.projectId === projectId && active.ws.readyState === 1 /* OPEN */) {
+        try {
+          active.ws.send(raw);
+        } catch {}
+      }
+    }
+  }
+
+  public sendToSession(sessionId: string, message: any): void {
+    const active = this.activeSockets.get(sessionId);
+    if (active && active.ws.readyState === 1) {
+      try {
+        const raw = typeof message === 'string' ? message : JSON.stringify(message);
+        active.ws.send(raw);
+      } catch {}
+    }
+  }
+}