browsertrack 0.0.1 → 0.1.1

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

@@ -0,0 +1,98 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { IncidentEngine } from '../../packages/daemon/src/incidents/engine.js';
+import { StorageDB } from '../../packages/daemon/src/storage/db.js';
+import { ScreenshotStore } from '../../packages/daemon/src/storage/screenshot-store.js';
+
+describe('IncidentEngine', () => {
+  let tempDir: string;
+  let db: StorageDB;
+  let screenshotStore: ScreenshotStore;
+  let engine: IncidentEngine;
+
+  beforeEach(() => {
+    tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'bt_inc_test_'));
+    const dbPath = path.join(tempDir, 'test.db');
+    const screenshotsDir = path.join(tempDir, 'screenshots');
+
+    db = new StorageDB(dbPath);
+    screenshotStore = new ScreenshotStore(screenshotsDir);
+    engine = new IncidentEngine(db, screenshotStore);
+
+    // Setup project and session
+    db.upsertProject({ id: 'proj_app', name: 'app', origin: 'http://localhost:5173' });
+    db.upsertSession({
+      id: 'sess_100',
+      projectId: 'proj_app',
+      origin: 'http://localhost:5173',
+      url: 'http://localhost:5173/dashboard',
+      title: 'Dashboard',
+      userAgent: 'Chrome/120',
+      connectedAt: new Date().toISOString(),
+      lastSeenAt: new Date().toISOString(),
+      active: true,
+    });
+  });
+
+  afterEach(() => {
+    db.close();
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  });
+
+  it('should create a new incident from a runtime error event', () => {
+    const incident = engine.processClientEvent({
+      type: 'event',
+      sessionId: 'sess_100',
+      eventType: 'runtime_error',
+      payload: {
+        errorType: 'TypeError',
+        message: "Cannot read properties of null (reading 'userName')",
+        filename: 'http://localhost:5173/src/User.tsx?t=12345',
+        lineno: 28,
+        colno: 5,
+        timestamp: Date.now(),
+      },
+      route: '/dashboard',
+      url: 'http://localhost:5173/dashboard',
+      timestamp: Date.now(),
+    });
+
+    expect(incident).not.toBeNull();
+    expect(incident?.id.startsWith('inc_')).toBe(true);
+    expect(incident?.occurrences).toBe(1);
+    expect(incident?.status).toBe('OPEN');
+    expect(incident?.source.file).toBe('/src/User.tsx');
+    expect(incident?.source.line).toBe(28);
+  });
+
+  it('should deduplicate recurring errors and increment occurrences', () => {
+    const eventPayload = {
+      type: 'event' as const,
+      sessionId: 'sess_100',
+      eventType: 'runtime_error' as const,
+      payload: {
+        errorType: 'ReferenceError',
+        message: 'AuthService is not defined',
+        filename: '/src/services/auth.ts',
+        lineno: 14,
+        timestamp: Date.now(),
+      },
+      route: '/login',
+      url: 'http://localhost:5173/login',
+      timestamp: Date.now(),
+    };
+
+    const first = engine.processClientEvent(eventPayload);
+    const second = engine.processClientEvent(eventPayload);
+    const third = engine.processClientEvent(eventPayload);
+
+    expect(first?.id).toBe(second?.id);
+    expect(first?.id).toBe(third?.id);
+    expect(third?.occurrences).toBe(3);
+
+    const fromDb = db.getIncident(first!.id);
+    expect(fromDb?.occurrences).toBe(3);
+  });
+});

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');
+  });
+});