browsertrack 0.0.1 → 0.1.0

package/packages/daemon/src/storage/screenshot-store.ts

@@ -0,0 +1,49 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+export class ScreenshotStore {
+  private baseDir: string;
+
+  constructor(baseDir: string) {
+    this.baseDir = baseDir;
+    fs.mkdirSync(this.baseDir, { recursive: true });
+  }
+
+  public saveScreenshot(projectId: string, incidentId: string, name: string, dataUrl: string): { filePath: string; format: string } | null {
+    try {
+      if (!dataUrl || !dataUrl.startsWith('data:image/')) return null;
+
+      const match = dataUrl.match(/^data:image\/([a-zA-Z0-9+]+);base64,(.+)$/);
+      if (!match) return null;
+
+      let format = match[1].toLowerCase();
+      if (format === 'jpeg') format = 'jpg';
+      const base64Data = match[2];
+      const buffer = Buffer.from(base64Data, 'base64');
+
+      const targetDir = path.join(this.baseDir, projectId || 'default', 'incidents', incidentId);
+      fs.mkdirSync(targetDir, { recursive: true });
+
+      const fileName = `${name}.${format}`;
+      const filePath = path.join(targetDir, fileName);
+
+      fs.writeFileSync(filePath, buffer);
+
+      return { filePath, format };
+    } catch {
+      return null;
+    }
+  }
+
+  public getScreenshotPath(projectId: string, incidentId: string, name: string): string | null {
+    const targetDir = path.join(this.baseDir, projectId || 'default', 'incidents', incidentId);
+    if (!fs.existsSync(targetDir)) return null;
+
+    const files = fs.readdirSync(targetDir);
+    const match = files.find((f) => f.startsWith(`${name}.`));
+    if (match) {
+      return path.join(targetDir, match);
+    }
+    return null;
+  }
+}

package/packages/daemon/src/verification/engine.ts

@@ -0,0 +1,264 @@
+import crypto from 'node:crypto';
+import type {
+  Incident,
+  IncidentStatus,
+  ProbeResult,
+  VerificationProbe,
+  VerificationRecipe,
+  VerificationResult,
+} from '../../../core/src/index.js';
+import type { SessionManager } from '../session/manager.js';
+import type { StorageDB } from '../storage/db.js';
+import type { ScreenshotStore } from '../storage/screenshot-store.js';
+
+export class VerificationEngine {
+  private db: StorageDB;
+  private sessionManager: SessionManager;
+  private screenshotStore: ScreenshotStore;
+
+  constructor(db: StorageDB, sessionManager: SessionManager, screenshotStore: ScreenshotStore) {
+    this.db = db;
+    this.sessionManager = sessionManager;
+    this.screenshotStore = screenshotStore;
+  }
+
+  public async verifyIncident(incidentId: string, recipe?: VerificationRecipe): Promise<VerificationResult> {
+    const incident = this.db.getIncident(incidentId);
+    if (!incident) {
+      return {
+        incidentId,
+        status: 'FAILED',
+        checks: [{ type: 'no_incident', passed: false, details: `Incident ${incidentId} not found` }],
+        timestamp: new Date().toISOString(),
+        message: `Incident ${incidentId} not found in database`,
+      };
+    }
+
+    // 1. Find active session
+    let session = this.sessionManager.getActiveSessionForProject(incident.projectId);
+    if (!session) {
+      session = this.sessionManager.getAnyActiveSession();
+    }
+
+    if (!session) {
+      const result: VerificationResult = {
+        incidentId,
+        status: 'INCONCLUSIVE',
+        checks: [],
+        timestamp: new Date().toISOString(),
+        message: 'No active browser session currently connected to verify the fix.',
+      };
+      this.recordVerification(result, incident);
+      return result;
+    }
+
+    // 2. Set status to VERIFYING and record baseline
+    this.db.updateIncidentStatus(incidentId, 'VERIFYING');
+    const baselineOccurrences = incident.occurrences;
+
+    // 3. Initiate browser reload or navigation
+    const targetRoute = recipe?.route || incident.route;
+    const observationMs = recipe?.observationWindowMs || 2000;
+
+    if (recipe?.route && recipe.route !== incident.route) {
+      await this.sessionManager.sendCommand(session.id, {
+        id: `cmd_${crypto.randomUUID().slice(0, 8)}`,
+        type: 'navigate',
+        params: { url: recipe.route },
+      });
+    } else {
+      await this.sessionManager.sendCommand(session.id, {
+        id: `cmd_${crypto.randomUUID().slice(0, 8)}`,
+        type: 'reload',
+        params: { force: true },
+      });
+    }
+
+    // 4. Observation window
+    await new Promise((resolve) => setTimeout(resolve, observationMs));
+
+    // 5. Check if incident re-occurred
+    const freshIncident = this.db.getIncident(incidentId);
+    const hasReoccurred = freshIncident ? freshIncident.occurrences > baselineOccurrences : false;
+
+    const checks: ProbeResult[] = [];
+    checks.push({
+      type: 'no_incident',
+      passed: !hasReoccurred,
+      details: hasReoccurred
+        ? `Incident reoccurred (${freshIncident?.occurrences} occurrences vs baseline ${baselineOccurrences})`
+        : 'No recurring error observed during verification window',
+    });
+
+    // 6. Run additional probes
+    const probes = recipe?.expect || [];
+    for (const probe of probes) {
+      const probeRes = await this.evaluateProbe(session.id, probe);
+      checks.push(probeRes);
+    }
+
+    // 7. Check target element or last element for after-screenshot
+    let afterScreenshotPath: string | undefined;
+    const targetSelector = recipe?.targetSelector || incident.lastElement?.selector;
+
+    if (targetSelector) {
+      const captureCmd = await this.sessionManager.sendCommand(session.id, {
+        id: `cmd_${crypto.randomUUID().slice(0, 8)}`,
+        type: 'capture_element',
+        params: { selector: targetSelector },
+      });
+
+      if (captureCmd.ok && captureCmd.result?.dataUrl) {
+        const saved = this.screenshotStore.saveScreenshot(
+          incident.projectId,
+          incident.id,
+          'verified',
+          captureCmd.result.dataUrl
+        );
+        if (saved) {
+          afterScreenshotPath = saved.filePath;
+        }
+      }
+    }
+
+    // 8. Calculate verdict
+    let verdict: IncidentStatus = 'VERIFIED';
+    const anyCheckFailed = checks.some((c) => !c.passed);
+
+    if (anyCheckFailed || hasReoccurred) {
+      verdict = 'FAILED';
+    } else {
+      // Check if incident required an explicit interaction (like button click) that wasn't covered by probes
+      const wasInteractionError = incident.breadcrumbs.some((b) => b.type === 'click' || b.type === 'submit');
+      if (wasInteractionError && probes.length === 0) {
+        verdict = 'INCONCLUSIVE';
+      }
+    }
+
+    const verificationResult: VerificationResult = {
+      incidentId,
+      status: verdict,
+      checks,
+      screenshots: {
+        before: incident.screenshots?.error,
+        after: afterScreenshotPath,
+      },
+      timestamp: new Date().toISOString(),
+      message:
+        verdict === 'VERIFIED'
+          ? 'Fix verified: Error did not reoccur and all checks passed.'
+          : verdict === 'FAILED'
+            ? 'Verification failed: Error reoccurred or probe expectation was not met.'
+            : 'Verification inconclusive: Error did not appear on reload, but specific interaction may need manual verification or custom probes.',
+    };
+
+    this.recordVerification(verificationResult, incident);
+    return verificationResult;
+  }
+
+  private async evaluateProbe(sessionId: string, probe: VerificationProbe): Promise<ProbeResult> {
+    try {
+      switch (probe.type) {
+        case 'element_exists': {
+          if (!probe.selector) {
+            return { type: probe.type, passed: false, details: 'Missing selector in probe' };
+          }
+          const res = await this.sessionManager.sendCommand(sessionId, {
+            id: `cmd_${crypto.randomUUID().slice(0, 8)}`,
+            type: 'query_element',
+            params: { selector: probe.selector },
+          });
+          const exists = res.ok && !!res.result?.exists;
+          return {
+            type: probe.type,
+            passed: exists,
+            details: exists ? `Element ${probe.selector} exists in DOM` : `Element ${probe.selector} does not exist`,
+          };
+        }
+
+        case 'element_visible': {
+          if (!probe.selector) {
+            return { type: probe.type, passed: false, details: 'Missing selector in probe' };
+          }
+          const res = await this.sessionManager.sendCommand(sessionId, {
+            id: `cmd_${crypto.randomUUID().slice(0, 8)}`,
+            type: 'query_element',
+            params: { selector: probe.selector },
+          });
+          const visible = res.ok && !!res.result?.exists && !!res.result?.visible;
+          return {
+            type: probe.type,
+            passed: visible,
+            details: visible ? `Element ${probe.selector} is visible` : `Element ${probe.selector} is not visible`,
+          };
+        }
+
+        case 'text_contains': {
+          if (!probe.selector || !probe.text) {
+            return { type: probe.type, passed: false, details: 'Missing selector or text in probe' };
+          }
+          const res = await this.sessionManager.sendCommand(sessionId, {
+            id: `cmd_${crypto.randomUUID().slice(0, 8)}`,
+            type: 'query_element',
+            params: { selector: probe.selector },
+          });
+          const innerText = res.result?.innerText || '';
+          const contains = res.ok && innerText.includes(probe.text);
+          return {
+            type: probe.type,
+            passed: contains,
+            details: contains
+              ? `Element ${probe.selector} contains text "${probe.text}"`
+              : `Element text "${innerText}" did not contain "${probe.text}"`,
+          };
+        }
+
+        case 'route_is': {
+          if (!probe.route) {
+            return { type: probe.type, passed: false, details: 'Missing route in probe' };
+          }
+          const res = await this.sessionManager.sendCommand(sessionId, {
+            id: `cmd_${crypto.randomUUID().slice(0, 8)}`,
+            type: 'get_page_state',
+          });
+          const currentRoute = res.result?.route || '';
+          const matches = res.ok && (currentRoute === probe.route || currentRoute.startsWith(probe.route));
+          return {
+            type: probe.type,
+            passed: matches,
+            details: matches
+              ? `Current route matches ${probe.route}`
+              : `Current route is "${currentRoute}", expected "${probe.route}"`,
+          };
+        }
+
+        default:
+          return {
+            type: probe.type,
+            passed: true,
+            details: `Probe ${probe.type} evaluated`,
+          };
+      }
+    } catch (err: any) {
+      return {
+        type: probe.type,
+        passed: false,
+        details: err?.message || 'Probe execution error',
+      };
+    }
+  }
+
+  private recordVerification(result: VerificationResult, incident: Incident): void {
+    this.db.updateIncidentStatus(incident.id, result.status);
+    this.db.insertVerification({
+      id: `ver_${crypto.randomUUID().slice(0, 8)}`,
+      incidentId: incident.id,
+      status: result.status,
+      checks: result.checks,
+      beforeScreenshot: result.screenshots?.before,
+      afterScreenshot: result.screenshots?.after,
+      message: result.message,
+      createdAt: result.timestamp,
+    });
+  }
+}

package/packages/mcp/src/handlers.ts

@@ -0,0 +1,398 @@
+import type { StorageDB } from '../../daemon/src/storage/db.js';
+import type { VerificationEngine } from '../../daemon/src/verification/engine.js';
+import type { NoteVerificationEngine } from '../../daemon/src/notes/verification.js';
+import type { SessionManager } from '../../daemon/src/session/manager.js';
+
+export interface McpContext {
+  db: StorageDB;
+  sessionManager?: SessionManager;
+  verificationEngine?: VerificationEngine;
+  noteVerificationEngine?: NoteVerificationEngine;
+  daemonUrl?: string;
+}
+
+export async function handleToolCall(name: string, args: any, ctx: McpContext): Promise<any> {
+  const { db, sessionManager, verificationEngine, noteVerificationEngine } = ctx;
+
+  switch (name) {
+    case 'list_projects': {
+      const projects = db.listProjects();
+      return {
+        projects: projects.map((p) => ({
+          id: p.id,
+          name: p.name,
+          origin: p.origin,
+          path: p.path,
+          updatedAt: p.updatedAt,
+        })),
+      };
+    }
+
+    case 'list_sessions': {
+      const activeOnly = args.activeOnly !== false;
+      const sessions = db.listSessions(args.projectId, activeOnly);
+      return {
+        count: sessions.length,
+        sessions: sessions.map((s) => ({
+          id: s.id,
+          projectId: s.projectId,
+          origin: s.origin,
+          url: s.url,
+          title: s.title,
+          active: s.active,
+          lastSeenAt: s.lastSeenAt,
+        })),
+      };
+    }
+
+    case 'list_incidents': {
+      const incidents = db.listIncidents({
+        projectId: args.projectId,
+        status: args.status,
+        severity: args.severity,
+        limit: args.limit || 20,
+      });
+      return {
+        total: incidents.length,
+        incidents: incidents.map((inc) => ({
+          id: inc.id,
+          type: inc.type,
+          severity: inc.severity,
+          message: inc.message,
+          source: `${inc.source.file}:${inc.source.line}`,
+          route: inc.route,
+          status: inc.status,
+          occurrences: inc.occurrences,
+          firstSeen: inc.firstSeen,
+          lastSeen: inc.lastSeen,
+        })),
+      };
+    }
+
+    case 'get_incident': {
+      const incident = db.getIncident(args.incidentId);
+      if (!incident) {
+        throw new Error(`Incident '${args.incidentId}' not found.`);
+      }
+
+      // Compact breadcrumbs summary (last 10 most relevant)
+      const breadcrumbsTimeline = incident.breadcrumbs.slice(-15).map((b) => {
+        const time = new Date(b.timestamp).toISOString().split('T')[1]?.slice(0, 8);
+        return `[${time}] ${b.message}`;
+      });
+
+      return {
+        id: incident.id,
+        status: incident.status,
+        type: incident.type,
+        severity: incident.severity,
+        message: incident.message,
+        source: {
+          file: incident.source.file,
+          line: incident.source.line,
+          column: incident.source.column,
+        },
+        route: incident.route,
+        occurrences: incident.occurrences,
+        firstSeen: incident.firstSeen,
+        lastSeen: incident.lastSeen,
+        stack: incident.stack,
+        lastInteractedElement: incident.lastElement
+          ? {
+              selector: incident.lastElement.selector,
+              tag: incident.lastElement.tag,
+              visible: incident.lastElement.visible,
+              innerText: incident.lastElement.innerText,
+              outerHTML: incident.lastElement.outerHTML,
+            }
+          : undefined,
+        recentBreadcrumbs: breadcrumbsTimeline,
+        networkFailures: incident.networkFailures,
+        screenshot: incident.screenshots?.error,
+      };
+    }
+
+    case 'get_console': {
+      const limit = args.limit || 30;
+      const events = db.getEvents({
+        sessionId: args.sessionId,
+        eventType: 'console',
+        limit,
+      });
+
+      return {
+        logs: events.map((e) => ({
+          level: e.payload.level,
+          message: e.payload.message,
+          timestamp: new Date(e.timestamp).toISOString(),
+          route: e.route,
+        })),
+      };
+    }
+
+    case 'get_network_failures': {
+      const limit = args.limit || 20;
+      const events = db.getEvents({
+        sessionId: args.sessionId,
+        limit: 100,
+      });
+
+      const failures = events
+        .filter((e) => (e.eventType === 'fetch' || e.eventType === 'xhr') && (e.payload.status >= 400 || e.payload.error))
+        .slice(0, limit)
+        .map((e) => ({
+          url: e.payload.url,
+          method: e.payload.method,
+          status: e.payload.status,
+          error: e.payload.error,
+          durationMs: e.payload.durationMs,
+          timestamp: new Date(e.timestamp).toISOString(),
+        }));
+
+      return { failures };
+    }
+
+    case 'get_breadcrumbs': {
+      if (args.incidentId) {
+        const incident = db.getIncident(args.incidentId);
+        if (!incident) {
+          throw new Error(`Incident '${args.incidentId}' not found.`);
+        }
+        return {
+          incidentId: args.incidentId,
+          breadcrumbs: incident.breadcrumbs.slice(-(args.limit || 50)),
+        };
+      }
+
+      const events = db.getEvents({
+        sessionId: args.sessionId,
+        limit: args.limit || 50,
+      });
+
+      return {
+        breadcrumbs: events.map((e) => ({
+          type: e.eventType,
+          message: e.payload.message || `${e.eventType} on ${e.route}`,
+          timestamp: new Date(e.timestamp).toISOString(),
+          route: e.route,
+        })),
+      };
+    }
+
+    case 'get_page_state': {
+      if (!sessionManager) {
+        throw new Error('Live browser connection not available: Daemon session manager not attached.');
+      }
+      let session = args.sessionId ? db.getSession(args.sessionId) : sessionManager.getAnyActiveSession();
+      if (!session) {
+        throw new Error('No active browser session connected.');
+      }
+
+      const cmdRes = await sessionManager.sendCommand(session.id, {
+        id: `cmd_mcp_${Date.now()}`,
+        type: 'get_page_state',
+      });
+
+      if (!cmdRes.ok) {
+        throw new Error(cmdRes.error || 'Failed to retrieve page state from browser.');
+      }
+      return cmdRes.result;
+    }
+
+    case 'capture_element': {
+      if (!sessionManager) {
+        throw new Error('Live browser connection not available: Daemon session manager not attached.');
+      }
+      let session = args.sessionId ? db.getSession(args.sessionId) : sessionManager.getAnyActiveSession();
+      if (!session) {
+        throw new Error('No active browser session connected.');
+      }
+
+      const cmdRes = await sessionManager.sendCommand(session.id, {
+        id: `cmd_mcp_${Date.now()}`,
+        type: 'capture_element',
+        params: { selector: args.selector },
+      });
+
+      if (!cmdRes.ok) {
+        throw new Error(cmdRes.error || cmdRes.reason || 'Failed to capture element screenshot.');
+      }
+      return {
+        ok: true,
+        format: cmdRes.result?.format || 'webp',
+        width: cmdRes.result?.width,
+        height: cmdRes.result?.height,
+        dataUrlPreview: cmdRes.result?.dataUrl ? `${cmdRes.result.dataUrl.slice(0, 100)}...` : undefined,
+      };
+    }
+
+    case 'verify_incident': {
+      if (!verificationEngine) {
+        throw new Error('Verification engine not available: Daemon session manager not attached.');
+      }
+
+      const res = await verificationEngine.verifyIncident(args.incidentId, {
+        route: args.route,
+        targetSelector: args.targetSelector,
+        expect: args.expect,
+        observationWindowMs: args.observationWindowMs,
+      });
+
+      return res;
+    }
+
+    case 'get_verification': {
+      const v = db.getLatestVerification(args.incidentId);
+      if (!v) {
+        throw new Error(`No verification records found for incident '${args.incidentId}'.`);
+      }
+      return v;
+    }
+
+    case 'list_notes': {
+      const notes = db.listNotes({
+        projectId: args.projectId,
+        status: args.status,
+        limit: args.limit || 20,
+      });
+
+      return {
+        total: notes.length,
+        notes: notes.map((n) => ({
+          id: n.id,
+          type: n.type,
+          status: n.status,
+          route: n.route,
+          viewport: `${n.viewport.width} × ${n.viewport.height}`,
+          target: n.target?.selector || n.type,
+          message: n.message,
+          screenshotAvailable: !!n.screenshots?.original,
+          createdAt: n.createdAt,
+        })),
+      };
+    }
+
+    case 'get_note': {
+      const note = db.getNote(args.noteId);
+      if (!note) {
+        throw new Error(`Visual note '${args.noteId}' not found.`);
+      }
+
+      const project = db.getProject(note.projectId);
+
+      return {
+        id: note.id,
+        type: note.type,
+        status: note.status,
+        message: note.message,
+        route: note.route,
+        url: note.url,
+        viewport: note.viewport,
+        scroll: note.scroll,
+        target: note.target,
+        elementContext: note.elementContext,
+        region: note.region,
+        screenshot: {
+          available: !!note.screenshots?.original,
+          original: note.screenshots?.original,
+          after: note.screenshots?.after,
+        },
+        project: project
+          ? {
+              id: project.id,
+              name: project.name,
+              origin: project.origin,
+              path: project.path,
+            }
+          : undefined,
+        relatedIncidentId: note.incidentId,
+        createdAt: note.createdAt,
+        updatedAt: note.updatedAt,
+        resolvedAt: note.resolvedAt,
+      };
+    }
+
+    case 'resolve_note': {
+      const note = db.getNote(args.noteId);
+      if (!note) {
+        throw new Error(`Visual note '${args.noteId}' not found.`);
+      }
+      db.updateNoteStatus(args.noteId, 'RESOLVED');
+      return {
+        ok: true,
+        noteId: args.noteId,
+        status: 'RESOLVED',
+        resolvedAt: new Date().toISOString(),
+      };
+    }
+
+    case 'reopen_note': {
+      const note = db.getNote(args.noteId);
+      if (!note) {
+        throw new Error(`Visual note '${args.noteId}' not found.`);
+      }
+      db.updateNoteStatus(args.noteId, 'OPEN');
+      return {
+        ok: true,
+        noteId: args.noteId,
+        status: 'OPEN',
+      };
+    }
+
+    case 'verify_note': {
+      if (!noteVerificationEngine) {
+        throw new Error('Note verification engine not available: Daemon session manager not attached.');
+      }
+      const res = await noteVerificationEngine.verifyNote(args.noteId, {
+        observationWindowMs: args.observationWindowMs,
+      });
+      return res;
+    }
+
+    case 'get_note_verification': {
+      const v = db.getLatestNoteVerification(args.noteId);
+      if (!v) {
+        throw new Error(`No verification records found for visual note '${args.noteId}'.`);
+      }
+      return v;
+    }
+
+    case 'capture_note_context': {
+      if (!sessionManager) {
+        throw new Error('Live browser connection not available: Daemon session manager not attached.');
+      }
+      let session = args.sessionId ? db.getSession(args.sessionId) : sessionManager.getAnyActiveSession();
+      if (!session) {
+        throw new Error('No active browser session connected.');
+      }
+
+      const queryCmd = await sessionManager.sendCommand(session.id, {
+        id: `cmd_ctx_${Date.now()}`,
+        type: 'query_element',
+        params: { selector: args.selector },
+      });
+
+      const overflowCmd = await sessionManager.sendCommand(session.id, {
+        id: `cmd_ovf_${Date.now()}`,
+        type: 'check_overflow',
+        params: { selector: args.selector },
+      });
+
+      const styleCmd = await sessionManager.sendCommand(session.id, {
+        id: `cmd_sty_${Date.now()}`,
+        type: 'get_element_style',
+        params: { selector: args.selector },
+      });
+
+      return {
+        selector: args.selector,
+        element: queryCmd.result,
+        overflow: overflowCmd.result,
+        styles: styleCmd.result?.styles,
+      };
+    }
+
+    default:
+      throw new Error(`Unknown MCP tool: ${name}`);
+  }
+}