browsertrack 0.0.1 → 0.1.0

package/dist/chunk-ANMR5WBH.js

@@ -0,0 +1,659 @@
+import {
+  NoteVerificationEngine,
+  NotesEngine,
+  ScreenshotStore,
+  SessionManager,
+  StorageDB,
+  VerificationEngine,
+  getDaemonConfig
+} from "./chunk-BSKNG4V7.js";
+
+// packages/mcp/src/tools.ts
+var TOOLS = [
+  {
+    name: "list_projects",
+    description: "List all registered projects tracked by BrowserTrack/BrowserDiag",
+    inputSchema: {
+      type: "object",
+      properties: {}
+    }
+  },
+  {
+    name: "list_sessions",
+    description: "List active and recent browser sessions connected to the local development daemon",
+    inputSchema: {
+      type: "object",
+      properties: {
+        projectId: { type: "string", description: "Filter sessions by project ID or name" },
+        activeOnly: { type: "boolean", description: "Show only currently active WebSocket sessions (default: true)" }
+      }
+    }
+  },
+  {
+    name: "list_incidents",
+    description: "List recorded browser runtime errors, unhandled rejections, and console errors grouped into incidents",
+    inputSchema: {
+      type: "object",
+      properties: {
+        projectId: { type: "string", description: "Filter by project ID or name" },
+        status: {
+          type: "string",
+          enum: ["OPEN", "FIX_ATTEMPTED", "VERIFYING", "VERIFIED", "FAILED", "INCONCLUSIVE"],
+          description: "Filter by incident status"
+        },
+        severity: {
+          type: "string",
+          enum: ["error", "warn", "fatal"],
+          description: "Filter by severity"
+        },
+        limit: { type: "number", description: "Maximum number of incidents to return (default: 20)" }
+      }
+    }
+  },
+  {
+    name: "get_incident",
+    description: "Retrieve compact and high-signal debugging context for a specific error incident (stack trace, breadcrumbs, network failures, last interacted element, error screenshot)",
+    inputSchema: {
+      type: "object",
+      properties: {
+        incidentId: { type: "string", description: "The unique ID of the incident (e.g. inc_42)" }
+      },
+      required: ["incidentId"]
+    }
+  },
+  {
+    name: "get_console",
+    description: "Get recent console logs, warnings, and errors from a browser session",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sessionId: { type: "string", description: "Browser session ID (optional, defaults to active session)" },
+        limit: { type: "number", description: "Number of console logs to retrieve (default: 30)" }
+      }
+    }
+  },
+  {
+    name: "get_network_failures",
+    description: "Get recent failed HTTP network requests (4xx, 5xx, network errors, timeouts, aborts)",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sessionId: { type: "string", description: "Browser session ID (optional)" },
+        limit: { type: "number", description: "Maximum number of failed requests to return (default: 20)" }
+      }
+    }
+  },
+  {
+    name: "get_breadcrumbs",
+    description: "Get the sequence of recent user interactions, navigations, console logs, and network events prior to an error",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sessionId: { type: "string", description: "Browser session ID (optional)" },
+        incidentId: { type: "string", description: "Incident ID to fetch breadcrumbs from (optional)" },
+        limit: { type: "number", description: "Maximum number of breadcrumbs (default: 50)" }
+      }
+    }
+  },
+  {
+    name: "get_page_state",
+    description: "Query the live page state (URL, route, document title, readyState, active element) from the connected browser session",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sessionId: { type: "string", description: "Target session ID (optional, defaults to active)" }
+      }
+    }
+  },
+  {
+    name: "capture_element",
+    description: "Capture a screenshot of a specific DOM element or the entire visible page in the active browser tab",
+    inputSchema: {
+      type: "object",
+      properties: {
+        selector: { type: "string", description: 'CSS selector of the element to capture (e.g. [data-testid="user-card"])' },
+        sessionId: { type: "string", description: "Browser session ID (optional)" }
+      }
+    }
+  },
+  {
+    name: "verify_incident",
+    description: "Trigger closed-loop verification of a bug fix: reloads the browser, checks if the incident reoccurs, evaluates optional verification probes, and records before/after screenshots",
+    inputSchema: {
+      type: "object",
+      properties: {
+        incidentId: { type: "string", description: "The ID of the incident to verify" },
+        route: { type: "string", description: "Optional route to navigate to for verification (defaults to incident route)" },
+        targetSelector: { type: "string", description: "Optional element selector to inspect and capture after-fix screenshot" },
+        expect: {
+          type: "array",
+          description: "Optional verification probes to evaluate after reload",
+          items: {
+            type: "object",
+            properties: {
+              type: {
+                type: "string",
+                enum: ["element_exists", "element_visible", "text_contains", "route_is", "no_incident"]
+              },
+              selector: { type: "string" },
+              text: { type: "string" },
+              route: { type: "string" }
+            },
+            required: ["type"]
+          }
+        },
+        observationWindowMs: { type: "number", description: "Observation window in milliseconds (default: 2000)" }
+      },
+      required: ["incidentId"]
+    }
+  },
+  {
+    name: "get_verification",
+    description: "Retrieve the latest verification result and before/after screenshot artifacts for an incident",
+    inputSchema: {
+      type: "object",
+      properties: {
+        incidentId: { type: "string", description: "The ID of the incident" }
+      },
+      required: ["incidentId"]
+    }
+  },
+  {
+    name: "list_notes",
+    description: "List visual development notes / screen annotations left on elements, regions, or pages during development",
+    inputSchema: {
+      type: "object",
+      properties: {
+        projectId: { type: "string", description: "Filter notes by project ID or name" },
+        status: {
+          type: "string",
+          enum: ["OPEN", "IN_PROGRESS", "VERIFYING", "RESOLVED", "FAILED", "INCONCLUSIVE"],
+          description: "Filter by note status (default: OPEN)"
+        },
+        limit: { type: "number", description: "Maximum number of notes to return (default: 20)" }
+      }
+    }
+  },
+  {
+    name: "get_note",
+    description: "Retrieve full debugging context for a visual note (message, route, viewport dimensions, target element selector, DOM context, screenshot file path, project path)",
+    inputSchema: {
+      type: "object",
+      properties: {
+        noteId: { type: "string", description: "The unique ID of the visual note (e.g. note_42)" }
+      },
+      required: ["noteId"]
+    }
+  },
+  {
+    name: "resolve_note",
+    description: "Mark a visual note as RESOLVED once the layout or styling issue has been fixed",
+    inputSchema: {
+      type: "object",
+      properties: {
+        noteId: { type: "string", description: "The ID of the visual note to resolve" }
+      },
+      required: ["noteId"]
+    }
+  },
+  {
+    name: "reopen_note",
+    description: "Reopen a previously resolved visual note",
+    inputSchema: {
+      type: "object",
+      properties: {
+        noteId: { type: "string", description: "The ID of the visual note to reopen" }
+      },
+      required: ["noteId"]
+    }
+  },
+  {
+    name: "verify_note",
+    description: "Run closed-loop layout & visual verification for a note: checks route, element existence/visibility, evaluates viewport overflow probes, captures after-screenshot, and computes geometry diff",
+    inputSchema: {
+      type: "object",
+      properties: {
+        noteId: { type: "string", description: "The ID of the visual note to verify" },
+        observationWindowMs: { type: "number", description: "Observation window in milliseconds (default: 1000)" }
+      },
+      required: ["noteId"]
+    }
+  },
+  {
+    name: "get_note_verification",
+    description: "Retrieve the latest verification result, before/after screenshot references, and layout geometry diff for a visual note",
+    inputSchema: {
+      type: "object",
+      properties: {
+        noteId: { type: "string", description: "The ID of the visual note" }
+      },
+      required: ["noteId"]
+    }
+  },
+  {
+    name: "capture_note_context",
+    description: "Inspect live DOM context, bounding box, overflow, and styles for a target element in the active browser tab",
+    inputSchema: {
+      type: "object",
+      properties: {
+        selector: { type: "string", description: "CSS selector of the target element" },
+        sessionId: { type: "string", description: "Browser session ID (optional)" }
+      },
+      required: ["selector"]
+    }
+  }
+];
+
+// packages/mcp/src/handlers.ts
+async function handleToolCall(name, args, ctx) {
+  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.`);
+      }
+      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
+        } : void 0,
+        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)}...` : void 0
+      };
+    }
+    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} \xD7 ${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
+        } : void 0,
+        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: (/* @__PURE__ */ 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}`);
+  }
+}
+
+// packages/mcp/src/server.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js";
+function createMcpServer(options = {}) {
+  const config = getDaemonConfig({ dbPath: options.dbPath });
+  const db = options.context?.db || new StorageDB(config.dbPath);
+  const screenshotStore = new ScreenshotStore(config.screenshotsDir);
+  const sessionManager = options.context?.sessionManager || new SessionManager(db);
+  const verificationEngine = options.context?.verificationEngine || new VerificationEngine(db, sessionManager, screenshotStore);
+  const notesEngine = new NotesEngine(db, screenshotStore);
+  const noteVerificationEngine = options.context?.noteVerificationEngine || new NoteVerificationEngine(db, sessionManager, notesEngine);
+  const ctx = {
+    db,
+    sessionManager,
+    verificationEngine,
+    noteVerificationEngine,
+    daemonUrl: `http://${config.host}:${config.port}`,
+    ...options.context
+  };
+  const server = new Server(
+    {
+      name: "browsertrack-mcp",
+      version: "0.1.0"
+    },
+    {
+      capabilities: {
+        tools: {}
+      }
+    }
+  );
+  server.setRequestHandler(ListToolsRequestSchema, async () => {
+    return { tools: TOOLS };
+  });
+  server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    try {
+      const result = await handleToolCall(name, args || {}, ctx);
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result, null, 2)
+          }
+        ]
+      };
+    } catch (err) {
+      return {
+        isError: true,
+        content: [
+          {
+            type: "text",
+            text: `Error executing tool ${name}: ${err?.message || String(err)}`
+          }
+        ]
+      };
+    }
+  });
+  return {
+    server,
+    async startStdio() {
+      const transport = new StdioServerTransport();
+      await server.connect(transport);
+    }
+  };
+}
+
+export {
+  TOOLS,
+  handleToolCall,
+  createMcpServer
+};
+//# sourceMappingURL=chunk-ANMR5WBH.js.map