browsertrack 0.0.1 → 0.1.0

package/test/daemon/notes-storage.test.ts

@@ -0,0 +1,130 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import type { VisualNote } from '../../packages/core/src/index.js';
+import { StorageDB } from '../../packages/daemon/src/storage/db.js';
+
+describe('Daemon StorageDB - Visual Notes', () => {
+  let db: StorageDB;
+
+  beforeEach(() => {
+    db = new StorageDB(':memory:');
+    db.upsertProject({ id: 'proj_1', name: 'my-app', origin: 'http://localhost:3000' });
+    db.upsertSession({
+      id: 'sess_1',
+      projectId: 'proj_1',
+      origin: 'http://localhost:3000',
+      connectedAt: new Date().toISOString(),
+      lastSeenAt: new Date().toISOString(),
+    });
+  });
+
+  it('inserts and retrieves a visual note', () => {
+    const note: VisualNote = {
+      id: 'note_abc123',
+      projectId: 'proj_1',
+      sessionId: 'sess_1',
+      type: 'element',
+      message: 'Card text is truncated on small screens',
+      route: '/settings',
+      url: 'http://localhost:3000/settings',
+      viewport: { width: 375, height: 667, devicePixelRatio: 2 },
+      scroll: { scrollX: 0, scrollY: 0 },
+      target: {
+        selector: '.card-title',
+        boundingRect: { x: 10, y: 50, width: 200, height: 30, top: 50, left: 10, bottom: 80, right: 210 },
+        visible: true,
+      },
+      elementContext: {
+        selector: '.card-title',
+        tag: 'h3',
+        attributes: { class: 'card-title' },
+        outerHTML: '<h3 class="card-title">Settings</h3>',
+      },
+      status: 'OPEN',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+
+    db.insertNote(note);
+
+    const fetched = db.getNote('note_abc123');
+    expect(fetched).toBeDefined();
+    expect(fetched?.id).toBe('note_abc123');
+    expect(fetched?.message).toBe('Card text is truncated on small screens');
+    expect(fetched?.viewport.width).toBe(375);
+    expect(fetched?.target?.selector).toBe('.card-title');
+    expect(fetched?.status).toBe('OPEN');
+  });
+
+  it('updates note status to RESOLVED and back to OPEN', () => {
+    const note: VisualNote = {
+      id: 'note_status_test',
+      projectId: 'proj_1',
+      sessionId: 'sess_1',
+      type: 'page',
+      message: 'Header background should be transparent',
+      route: '/',
+      url: 'http://localhost:3000/',
+      viewport: { width: 1440, height: 900, devicePixelRatio: 1 },
+      scroll: { scrollX: 0, scrollY: 0 },
+      status: 'OPEN',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+
+    db.insertNote(note);
+    expect(db.getNote('note_status_test')?.status).toBe('OPEN');
+
+    db.updateNoteStatus('note_status_test', 'RESOLVED');
+    const resolved = db.getNote('note_status_test');
+    expect(resolved?.status).toBe('RESOLVED');
+    expect(resolved?.resolvedAt).toBeDefined();
+
+    db.updateNoteStatus('note_status_test', 'OPEN');
+    const reopened = db.getNote('note_status_test');
+    expect(reopened?.status).toBe('OPEN');
+  });
+
+  it('stores and retrieves note verification records', () => {
+    db.insertNote({
+      id: 'note_ver_test',
+      projectId: 'proj_1',
+      sessionId: 'sess_1',
+      type: 'element',
+      message: 'Fix overflow',
+      route: '/home',
+      url: 'http://localhost:3000/home',
+      viewport: { width: 390, height: 844, devicePixelRatio: 3 },
+      scroll: { scrollX: 0, scrollY: 0 },
+      status: 'OPEN',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    });
+
+    db.insertNoteVerification({
+      noteId: 'note_ver_test',
+      status: 'VERIFIED',
+      checks: [
+        { type: 'element_exists', passed: true, details: 'Element found' },
+        { type: 'no_viewport_overflow', passed: true, details: 'Fits inside 390px viewport' },
+      ],
+      geometryDiff: {
+        overflowFixed: true,
+        viewportWidth: 390,
+        overflowPx: 0,
+      },
+      screenshots: {
+        before: '/path/to/before.webp',
+        after: '/path/to/after.webp',
+      },
+      timestamp: new Date().toISOString(),
+      message: 'Visual note verified successfully',
+    });
+
+    const latest = db.getLatestNoteVerification('note_ver_test');
+    expect(latest).toBeDefined();
+    expect(latest?.status).toBe('VERIFIED');
+    expect(latest?.checks.length).toBe(2);
+    expect(latest?.geometryDiff?.overflowFixed).toBe(true);
+    expect(latest?.screenshots?.after).toBe('/path/to/after.webp');
+  });
+});

package/test/daemon/notes-verification.test.ts

@@ -0,0 +1,135 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { StorageDB } from '../../packages/daemon/src/storage/db.js';
+import { ScreenshotStore } from '../../packages/daemon/src/storage/screenshot-store.js';
+import { SessionManager } from '../../packages/daemon/src/session/manager.js';
+import { NotesEngine } from '../../packages/daemon/src/notes/engine.js';
+import { NoteVerificationEngine } from '../../packages/daemon/src/notes/verification.js';
+
+describe('NoteVerificationEngine - Layout Probes & Verification', () => {
+  let db: StorageDB;
+  let screenshotStore: ScreenshotStore;
+  let sessionManager: SessionManager;
+  let notesEngine: NotesEngine;
+  let noteVerifier: NoteVerificationEngine;
+
+  beforeEach(() => {
+    db = new StorageDB(':memory:');
+    screenshotStore = new ScreenshotStore('/tmp/test-notes-screenshots');
+    sessionManager = new SessionManager(db);
+    notesEngine = new NotesEngine(db, screenshotStore);
+    noteVerifier = new NoteVerificationEngine(db, sessionManager, notesEngine);
+
+    db.upsertProject({ id: 'proj_notes', name: 'notes-app', origin: 'http://localhost:3000' });
+    db.upsertSession({
+      id: 'sess_live',
+      projectId: 'proj_notes',
+      origin: 'http://localhost:3000',
+      connectedAt: new Date().toISOString(),
+      lastSeenAt: new Date().toISOString(),
+    });
+  });
+
+  it('returns INCONCLUSIVE when no active session is connected', async () => {
+    db.insertNote({
+      id: 'note_no_sess',
+      projectId: 'proj_notes',
+      sessionId: 'sess_live',
+      type: 'element',
+      message: 'Check responsive card',
+      route: '/',
+      url: 'http://localhost:3000/',
+      viewport: { width: 390, height: 844, devicePixelRatio: 3 },
+      scroll: { scrollX: 0, scrollY: 0 },
+      target: {
+        selector: '.card',
+        boundingRect: { x: 0, y: 0, width: 420, height: 200, top: 0, left: 0, bottom: 200, right: 420 },
+        visible: true,
+      },
+      status: 'OPEN',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    });
+
+    const res = await noteVerifier.verifyNote('note_no_sess');
+    expect(res.status).toBe('INCONCLUSIVE');
+    expect(res.message).toContain('No active browser session');
+  });
+
+  it('verifies note with layout overflow fixed when session responds', async () => {
+    // Mock connected socket
+    const fakeSocket: any = {
+      readyState: 1,
+      send: (data: string) => {
+        const wrapper = JSON.parse(data);
+        const cmd = wrapper.command;
+        if (!cmd) return;
+
+        if (cmd.type === 'get_page_state') {
+          sessionManager.handleCommandResponse('sess_live', {
+            id: cmd.id,
+            ok: true,
+            result: { route: '/', title: 'Test App', readyState: 'complete', url: 'http://localhost:3000/' },
+          });
+        } else if (cmd.type === 'query_element') {
+          sessionManager.handleCommandResponse('sess_live', {
+            id: cmd.id,
+            ok: true,
+            result: {
+              exists: true,
+              visible: true,
+              boundingRect: { x: 0, y: 0, width: 350, height: 180, top: 0, left: 0, bottom: 180, right: 350 },
+            },
+          });
+        } else if (cmd.type === 'check_overflow') {
+          sessionManager.handleCommandResponse('sess_live', {
+            id: cmd.id,
+            ok: true,
+            result: {
+              selector: '.card',
+              overflow: false,
+              viewportWidth: 390,
+              viewportHeight: 844,
+              overflowRightPx: 0,
+              overflowBottomPx: 0,
+              rect: { x: 0, y: 0, width: 350, height: 180, top: 0, left: 0, bottom: 180, right: 350 },
+            },
+          });
+        } else if (cmd.type === 'capture_element') {
+          sessionManager.handleCommandResponse('sess_live', {
+            id: cmd.id,
+            ok: true,
+            result: { dataUrl: 'data:image/webp;base64,UklGRmYAAABXRUJQVlA4IFoAAAAwAQCdASoBAAEAD8D+JaQAA3AA/ua2wAAA', format: 'webp', width: 350, height: 180 },
+          });
+        }
+      },
+    };
+
+    sessionManager.registerSocket('sess_live', fakeSocket, 'http://localhost:3000', 'proj_notes');
+
+    db.insertNote({
+      id: 'note_fixed_ovf',
+      projectId: 'proj_notes',
+      sessionId: 'sess_live',
+      type: 'element',
+      message: "Mobile'da buraya bak, sağa taşıyor",
+      route: '/',
+      url: 'http://localhost:3000/',
+      viewport: { width: 390, height: 844, devicePixelRatio: 3 },
+      scroll: { scrollX: 0, scrollY: 0 },
+      target: {
+        selector: '.card',
+        boundingRect: { x: 0, y: 0, width: 440, height: 200, top: 0, left: 0, bottom: 200, right: 440 },
+        visible: true,
+      },
+      status: 'OPEN',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    });
+
+    const res = await noteVerifier.verifyNote('note_fixed_ovf');
+    expect(res.status).toBe('VERIFIED');
+    expect(res.geometryDiff?.overflowFixed).toBe(true);
+    expect(res.geometryDiff?.current?.width).toBe(350);
+    expect(res.checks.some((c) => c.type === 'no_viewport_overflow' && c.passed)).toBe(true);
+  });
+});

package/test/daemon/storage.test.ts

@@ -0,0 +1,123 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { StorageDB } from '../../packages/daemon/src/storage/db.js';
+
+describe('StorageDB (SQLite)', () => {
+  let tempDbPath: string;
+  let db: StorageDB;
+
+  beforeEach(() => {
+    tempDbPath = path.join(os.tmpdir(), `bt_test_${Date.now()}_${Math.random().toString(36).slice(2)}.db`);
+    db = new StorageDB(tempDbPath);
+  });
+
+  afterEach(() => {
+    db.close();
+    if (fs.existsSync(tempDbPath)) {
+      fs.unlinkSync(tempDbPath);
+    }
+  });
+
+  it('should upsert and retrieve projects', () => {
+    const project = db.upsertProject({
+      id: 'proj_euix',
+      name: 'euix',
+      origin: 'http://localhost:5173',
+      path: '/Users/dev/projects/euix',
+    });
+
+    expect(project.id).toBe('proj_euix');
+    expect(project.name).toBe('euix');
+
+    const fetched = db.getProject('euix');
+    expect(fetched).not.toBeNull();
+    expect(fetched?.origin).toBe('http://localhost:5173');
+    expect(fetched?.path).toBe('/Users/dev/projects/euix');
+  });
+
+  it('should track sessions and query by project', () => {
+    db.upsertProject({ id: 'proj_1', name: 'app1', origin: 'http://localhost:3000' });
+
+    db.upsertSession({
+      id: 'sess_1',
+      projectId: 'proj_1',
+      origin: 'http://localhost:3000',
+      url: 'http://localhost:3000/dashboard',
+      title: 'App Dashboard',
+      userAgent: 'Mozilla/5.0 Chrome/120.0',
+      connectedAt: new Date().toISOString(),
+      lastSeenAt: new Date().toISOString(),
+      active: true,
+    });
+
+    const activeSessions = db.listSessions('proj_1', true);
+    expect(activeSessions.length).toBe(1);
+    expect(activeSessions[0].id).toBe('sess_1');
+
+    db.deactivateSession('sess_1');
+    const afterDeactivate = db.listSessions('proj_1', true);
+    expect(afterDeactivate.length).toBe(0);
+  });
+
+  it('should enforce event retention per session', () => {
+    const sessionId = 'sess_retention';
+    for (let i = 1; i <= 20; i++) {
+      db.insertEvent({
+        id: `evt_${i}`,
+        sessionId,
+        eventType: 'console',
+        payload: { message: `Log ${i}` },
+        timestamp: 1000 + i,
+      });
+    }
+
+    // Prune to keep only last 5
+    db.pruneSessionEvents(sessionId, 5);
+
+    const remaining = db.getEvents({ sessionId, limit: 50 });
+    expect(remaining.length).toBe(5);
+    expect(remaining[0].id).toBe('evt_20');
+    expect(remaining[4].id).toBe('evt_16');
+  });
+
+  it('should insert, update, and list incidents', () => {
+    const incident = {
+      id: 'inc_1',
+      projectId: 'proj_test',
+      sessionId: 'sess_test',
+      type: 'TypeError',
+      severity: 'error' as const,
+      message: 'Cannot read properties of undefined',
+      source: { file: '/src/main.ts', line: 42 },
+      fingerprint: 'fp_abc123',
+      route: '/home',
+      firstSeen: new Date().toISOString(),
+      lastSeen: new Date().toISOString(),
+      occurrences: 1,
+      status: 'OPEN' as const,
+      breadcrumbs: [],
+      networkFailures: [],
+    };
+
+    db.insertIncident(incident);
+
+    const found = db.findIncidentByFingerprint('fp_abc123');
+    expect(found).not.toBeNull();
+    expect(found?.id).toBe('inc_1');
+    expect(found?.occurrences).toBe(1);
+
+    // Increment occurrence
+    db.updateIncidentOccurrence('inc_1', {
+      sessionId: 'sess_test',
+      lastSeen: new Date().toISOString(),
+      occurrences: 2,
+      route: '/home',
+      breadcrumbs: [],
+    });
+
+    const updated = db.getIncident('inc_1');
+    expect(updated?.occurrences).toBe(2);
+  });
+});

package/test/daemon/verification-engine.test.ts

@@ -0,0 +1,88 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { SessionManager } from '../../packages/daemon/src/session/manager.js';
+import { StorageDB } from '../../packages/daemon/src/storage/db.js';
+import { ScreenshotStore } from '../../packages/daemon/src/storage/screenshot-store.js';
+import { VerificationEngine } from '../../packages/daemon/src/verification/engine.js';
+
+describe('VerificationEngine', () => {
+  let tempDir: string;
+  let db: StorageDB;
+  let screenshotStore: ScreenshotStore;
+  let sessionManager: SessionManager;
+  let verificationEngine: VerificationEngine;
+
+  beforeEach(() => {
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'bt_ver_test_'));
+    const dbPath = path.join(tempDir, 'test.db');
+    const screenshotsDir = path.join(tempDir, 'screenshots');
+
+    db = new StorageDB(dbPath);
+    screenshotStore = new ScreenshotStore(screenshotsDir);
+    sessionManager = new SessionManager(db);
+    verificationEngine = new VerificationEngine(db, sessionManager, screenshotStore);
+
+    db.upsertProject({ id: 'proj_demo', name: 'demo', origin: 'http://localhost:5173' });
+  });
+
+  afterEach(() => {
+    db.close();
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  });
+
+  it('should return INCONCLUSIVE when no active session is connected to browser', async () => {
+    db.insertIncident({
+      id: 'inc_test_1',
+      projectId: 'proj_demo',
+      sessionId: 'sess_inactive',
+      type: 'TypeError',
+      severity: 'error',
+      message: 'Cannot read properties of null',
+      source: { file: '/src/main.ts', line: 10 },
+      fingerprint: 'fp_test_1',
+      route: '/app',
+      firstSeen: new Date().toISOString(),
+      lastSeen: new Date().toISOString(),
+      occurrences: 1,
+      status: 'OPEN',
+      breadcrumbs: [],
+      networkFailures: [],
+    });
+
+    const result = await verificationEngine.verifyIncident('inc_test_1');
+    expect(result.status).toBe('INCONCLUSIVE');
+    expect(result.message).toContain('No active browser session');
+  });
+
+  it('should record verification result in database and update incident status', async () => {
+    db.insertIncident({
+      id: 'inc_test_2',
+      projectId: 'proj_demo',
+      sessionId: 'sess_inactive',
+      type: 'ReferenceError',
+      severity: 'error',
+      message: 'Button not found',
+      source: { file: '/src/app.ts', line: 20 },
+      fingerprint: 'fp_test_2',
+      route: '/app',
+      firstSeen: new Date().toISOString(),
+      lastSeen: new Date().toISOString(),
+      occurrences: 1,
+      status: 'OPEN',
+      breadcrumbs: [],
+      networkFailures: [],
+    });
+
+    await verificationEngine.verifyIncident('inc_test_2');
+
+    const latest = db.getLatestVerification('inc_test_2');
+    expect(latest).not.toBeNull();
+    expect(latest?.incidentId).toBe('inc_test_2');
+    expect(latest?.status).toBe('INCONCLUSIVE');
+
+    const updatedInc = db.getIncident('inc_test_2');
+    expect(updatedInc?.status).toBe('INCONCLUSIVE');
+  });
+});

package/test/e2e/daemon-mcp-e2e.test.ts

@@ -0,0 +1,153 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import WebSocket from 'ws';
+import { createDaemon } from '../../packages/daemon/src/index.js';
+import { handleToolCall } from '../../packages/mcp/src/handlers.js';
+
+describe('BrowserTrack Full E2E Lifecycle (Daemon + WebSocket Client + MCP)', () => {
+  let tempDir: string;
+  let daemon: ReturnType<typeof createDaemon>;
+  let wsClient: WebSocket | null = null;
+  const testPort = 7339;
+
+  beforeEach(async () => {
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'bt_e2e_'));
+    const dbPath = path.join(tempDir, 'e2e.db');
+    const screenshotsDir = path.join(tempDir, 'screenshots');
+
+    daemon = createDaemon({
+      port: testPort,
+      host: '127.0.0.1',
+      dbPath,
+      screenshotsDir,
+      verbose: false,
+    });
+
+    await daemon.start();
+  });
+
+  afterEach(async () => {
+    if (wsClient) {
+      wsClient.close();
+      wsClient = null;
+    }
+    await daemon.stop();
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  });
+
+  it('should complete full cycle: handshake -> error ingestion -> incident creation -> MCP tool query -> command dispatch', async () => {
+    let receivedSessionId = '';
+
+    // 1. Connect WebSocket client (simulating browser)
+    wsClient = new WebSocket(`ws://127.0.0.1:${testPort}`);
+
+    await new Promise<void>((resolve) => {
+      wsClient!.on('open', () => {
+        // Send hello
+        wsClient!.send(
+          JSON.stringify({
+            type: 'hello',
+            origin: 'http://localhost:5173',
+            url: 'http://localhost:5173/products/123',
+            title: 'Product Details',
+            userAgent: 'Mozilla/5.0 TestBrowser',
+            timestamp: Date.now(),
+          })
+        );
+      });
+
+      wsClient!.on('message', (raw: string | Buffer) => {
+        const msg = JSON.parse(raw.toString());
+        if (msg.type === 'hello_ack') {
+          receivedSessionId = msg.sessionId;
+          resolve();
+        }
+      });
+    });
+
+    expect(receivedSessionId.startsWith('sess_')).toBe(true);
+
+    // 2. Browser client triggers runtime error
+    wsClient.send(
+      JSON.stringify({
+        type: 'event',
+        sessionId: receivedSessionId,
+        eventType: 'runtime_error',
+        payload: {
+          errorType: 'TypeError',
+          message: 'Cannot read property price of undefined',
+          filename: 'http://localhost:5173/src/components/ProductCard.tsx',
+          lineno: 45,
+          colno: 12,
+          timestamp: Date.now(),
+        },
+        breadcrumbs: [
+          { type: 'navigation', message: 'navigate /products/123', timestamp: Date.now() - 200 },
+          { type: 'click', message: 'click button.add-to-cart', timestamp: Date.now() - 100 },
+        ],
+        lastElement: {
+          selector: 'button.add-to-cart',
+          tag: 'button',
+          visible: true,
+          innerText: 'Add to Cart',
+        },
+        route: '/products/123',
+        url: 'http://localhost:5173/products/123',
+        timestamp: Date.now(),
+      })
+    );
+
+    // Wait a brief tick for SQLite write
+    await new Promise((r) => setTimeout(r, 100));
+
+    // 3. MCP query: list_incidents
+    const listRes = await handleToolCall('list_incidents', {}, { db: daemon.db });
+    expect(listRes.total).toBe(1);
+    const incidentId = listRes.incidents[0].id;
+    expect(incidentId.startsWith('inc_')).toBe(true);
+    expect(listRes.incidents[0].message).toBe('Cannot read property price of undefined');
+
+    // 4. MCP query: get_incident
+    const getRes = await handleToolCall('get_incident', { incidentId }, { db: daemon.db });
+    expect(getRes.id).toBe(incidentId);
+    expect(getRes.source.file).toBe('/src/components/ProductCard.tsx');
+    expect(getRes.source.line).toBe(45);
+    expect(getRes.lastInteractedElement?.selector).toBe('button.add-to-cart');
+    expect(getRes.recentBreadcrumbs.length).toBe(2);
+
+    // 5. Test Live Command: get_page_state via daemon session manager
+    // Setup client listener to reply to get_page_state command
+    wsClient.on('message', (raw: string | Buffer) => {
+      const msg = JSON.parse(raw.toString());
+      if (msg.type === 'command' && msg.command.type === 'get_page_state') {
+        wsClient!.send(
+          JSON.stringify({
+            type: 'command_response',
+            sessionId: receivedSessionId,
+            response: {
+              id: msg.command.id,
+              ok: true,
+              result: {
+                url: 'http://localhost:5173/products/123',
+                route: '/products/123',
+                title: 'Product Details',
+                readyState: 'complete',
+              },
+            },
+          })
+        );
+      }
+    });
+
+    const pageState = await handleToolCall(
+      'get_page_state',
+      { sessionId: receivedSessionId },
+      { db: daemon.db, sessionManager: daemon.sessionManager }
+    );
+
+    expect(pageState.url).toBe('http://localhost:5173/products/123');
+    expect(pageState.title).toBe('Product Details');
+  });
+});