browsertrack 0.1.2 → 0.2.1

package/dist/cli/index.js

@@ -142,6 +142,9 @@ var StorageDB = class {
         region_json TEXT,
         screenshot_path TEXT,
         incident_id TEXT,
+        scenario_id TEXT,
+        step_number INTEGER,
+        scenario_title TEXT,
         status TEXT DEFAULT 'OPEN',
         created_at TEXT,
         updated_at TEXT,
@@ -164,7 +167,20 @@ var StorageDB = class {
       CREATE INDEX IF NOT EXISTS idx_incidents_project ON incidents(project_id, status);
       CREATE INDEX IF NOT EXISTS idx_incidents_fp ON incidents(fingerprint);
       CREATE INDEX IF NOT EXISTS idx_notes_project ON notes(project_id, status);
+      CREATE INDEX IF NOT EXISTS idx_notes_scenario ON notes(scenario_id, step_number);
     `);
+    try {
+      this.db.exec("ALTER TABLE notes ADD COLUMN scenario_id TEXT;");
+    } catch {
+    }
+    try {
+      this.db.exec("ALTER TABLE notes ADD COLUMN step_number INTEGER;");
+    } catch {
+    }
+    try {
+      this.db.exec("ALTER TABLE notes ADD COLUMN scenario_title TEXT;");
+    } catch {
+    }
   }
   // --- PROJECTS ---
   upsertProject(project) {
@@ -466,8 +482,8 @@ var StorageDB = class {
       `INSERT INTO notes (
           id, project_id, session_id, type, message, route, url,
           viewport_json, scroll_json, target_json, element_context_json, region_json,
-          screenshot_path, incident_id, status, created_at, updated_at, resolved_at
-        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+          screenshot_path, incident_id, scenario_id, step_number, scenario_title, status, created_at, updated_at, resolved_at
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
     ).run(
       note.id,
       note.projectId,
@@ -483,6 +499,9 @@ var StorageDB = class {
       note.region ? JSON.stringify(note.region) : null,
       note.screenshots?.original || null,
       note.incidentId || null,
+      note.scenarioId || null,
+      note.stepNumber ?? null,
+      note.scenarioTitle || null,
       note.status,
       note.createdAt,
       note.updatedAt,
@@ -509,6 +528,10 @@ var StorageDB = class {
       sql += " AND route = ?";
       params.push(options.route);
     }
+    if (options.scenarioId) {
+      sql += " AND scenario_id = ?";
+      params.push(options.scenarioId);
+    }
     sql += " ORDER BY created_at DESC LIMIT ?";
     params.push(options.limit || 50);
     const rows = this.db.prepare(sql).all(...params);
@@ -518,6 +541,71 @@ var StorageDB = class {
     this.db.prepare("DELETE FROM note_verifications WHERE note_id = ?").run(id);
     this.db.prepare("DELETE FROM notes WHERE id = ?").run(id);
   }
+  // --- SCENARIOS (MULTI-STEP FLOWS) ---
+  listScenarios(options = {}) {
+    let sql = `
+      SELECT 
+        scenario_id, 
+        project_id, 
+        COALESCE(MAX(scenario_title), 'Scenario') as title,
+        COUNT(id) as steps_count,
+        CASE WHEN SUM(CASE WHEN status != 'RESOLVED' THEN 1 ELSE 0 END) = 0 THEN 'RESOLVED' ELSE 'OPEN' END as status,
+        MIN(route) as route,
+        MIN(created_at) as first_step_at,
+        MAX(created_at) as last_step_at
+      FROM notes
+      WHERE scenario_id IS NOT NULL
+    `;
+    const params = [];
+    if (options.projectId) {
+      sql += " AND (project_id = ? OR project_id IS NULL)";
+      params.push(options.projectId);
+    }
+    sql += " GROUP BY scenario_id";
+    if (options.status) {
+      if (options.status === "RESOLVED") {
+        sql += " HAVING SUM(CASE WHEN status != 'RESOLVED' THEN 1 ELSE 0 END) = 0";
+      } else {
+        sql += " HAVING SUM(CASE WHEN status != 'RESOLVED' THEN 1 ELSE 0 END) > 0";
+      }
+    }
+    sql += " ORDER BY last_step_at DESC LIMIT ?";
+    params.push(options.limit || 50);
+    const rows = this.db.prepare(sql).all(...params);
+    return rows.map((r) => ({
+      id: r.scenario_id,
+      projectId: r.project_id,
+      title: r.title,
+      stepsCount: Number(r.steps_count),
+      status: r.status,
+      route: r.route || "/",
+      firstStepAt: r.first_step_at,
+      lastStepAt: r.last_step_at
+    }));
+  }
+  getScenario(scenarioId) {
+    const rows = this.db.prepare("SELECT * FROM notes WHERE scenario_id = ? ORDER BY COALESCE(step_number, 999999) ASC, created_at ASC").all(scenarioId);
+    if (!rows || rows.length === 0) return null;
+    const steps = rows.map((r) => this.mapNoteRow(r));
+    const title = steps.find((s) => s.scenarioTitle)?.scenarioTitle || `Scenario ${scenarioId}`;
+    const allResolved = steps.every((s) => s.status === "RESOLVED");
+    return {
+      id: scenarioId,
+      projectId: steps[0].projectId,
+      title,
+      stepsCount: steps.length,
+      status: allResolved ? "RESOLVED" : "OPEN",
+      steps,
+      createdAt: steps[0].createdAt,
+      updatedAt: steps[steps.length - 1].updatedAt
+    };
+  }
+  deleteScenario(scenarioId) {
+    const notes = this.db.prepare("SELECT id FROM notes WHERE scenario_id = ?").all(scenarioId);
+    for (const n of notes) {
+      this.deleteNote(n.id);
+    }
+  }
   updateNoteStatus(id, status) {
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const resolvedAt = status === "RESOLVED" ? now : null;
@@ -629,6 +717,9 @@ var StorageDB = class {
       region: row.region_json ? JSON.parse(row.region_json) : void 0,
       status: row.status,
       incidentId: row.incident_id || void 0,
+      scenarioId: row.scenario_id || void 0,
+      stepNumber: row.step_number != null ? Number(row.step_number) : void 0,
+      scenarioTitle: row.scenario_title || void 0,
       screenshots: row.screenshot_path ? {
         original: row.screenshot_path
       } : void 0,
@@ -1174,6 +1265,9 @@ var NotesEngine = class {
       region: payload.region,
       status: "OPEN",
       incidentId: payload.incidentId,
+      scenarioId: payload.scenarioId,
+      stepNumber: payload.stepNumber,
+      scenarioTitle: payload.scenarioTitle,
       screenshots: screenshotPath ? { original: screenshotPath } : void 0,
       createdAt: now,
       updatedAt: now
@@ -1796,16 +1890,23 @@ function setupWebSocketServer(wss, db, sessionManager, incidentEngine, notesEngi
             elementContext: data.elementContext,
             region: data.region,
             screenshot: data.screenshot,
-            incidentId: data.incidentId
+            incidentId: data.incidentId,
+            scenarioId: data.scenarioId,
+            stepNumber: data.stepNumber,
+            scenarioTitle: data.scenarioTitle
           });
           if (verbose) {
-            console.log(`[BrowserTrack] Visual note created: ${note.id} on ${note.route} ("${note.message}")`);
+            console.log(
+              `[BrowserTrack] Visual note created: ${note.id} on ${note.route} ("${note.message}")${note.scenarioId ? ` [Scenario: ${note.scenarioTitle || note.scenarioId} Step ${note.stepNumber}]` : ""}`
+            );
           }
           ws.send(
             JSON.stringify({
               type: "note_created_ack",
               noteId: note.id,
-              status: note.status
+              status: note.status,
+              scenarioId: note.scenarioId,
+              stepNumber: note.stepNumber
             })
           );
           const allNotes = db.listNotes({ projectId: note.projectId, limit: 100 });
@@ -1851,6 +1952,18 @@ function setupWebSocketServer(wss, db, sessionManager, incidentEngine, notesEngi
           }
           return;
         }
+        if (data.type === "delete_scenario" && data.scenarioId) {
+          const scenario = db.getScenario(data.scenarioId);
+          if (scenario) {
+            db.deleteScenario(data.scenarioId);
+            const allNotes = db.listNotes({ projectId: scenario.projectId, limit: 100 });
+            sessionManager.broadcastToProject(scenario.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;
@@ -2082,7 +2195,8 @@ async function handleToolCall(name, args, ctx) {
           tag: incident.lastElement.tag,
           visible: incident.lastElement.visible,
           innerText: incident.lastElement.innerText,
-          outerHTML: incident.lastElement.outerHTML
+          outerHTML: incident.lastElement.outerHTML,
+          componentSource: incident.lastElement.componentSource
         } : void 0,
         recentBreadcrumbs: breadcrumbsTimeline,
         networkFailures: incident.networkFailures,
@@ -2208,6 +2322,7 @@ async function handleToolCall(name, args, ctx) {
     case "list_notes": {
       const notes = db.listNotes({
         projectId: args.projectId,
+        scenarioId: args.scenarioId,
         status: args.status,
         limit: args.limit || 20
       });
@@ -2218,6 +2333,9 @@ async function handleToolCall(name, args, ctx) {
           type: n.type,
           status: n.status,
           route: n.route,
+          scenarioId: n.scenarioId,
+          stepNumber: n.stepNumber,
+          scenarioTitle: n.scenarioTitle,
           viewport: `${n.viewport.width} \xD7 ${n.viewport.height}`,
           target: n.target?.selector || n.type,
           message: n.message,
@@ -2226,6 +2344,53 @@ async function handleToolCall(name, args, ctx) {
         }))
       };
     }
+    case "list_scenarios": {
+      const scenarios = db.listScenarios({
+        projectId: args.projectId,
+        status: args.status,
+        limit: args.limit || 20
+      });
+      return {
+        total: scenarios.length,
+        scenarios: scenarios.map((s) => ({
+          id: s.id,
+          title: s.title,
+          stepsCount: s.stepsCount,
+          status: s.status,
+          route: s.route,
+          firstStepAt: s.firstStepAt,
+          lastStepAt: s.lastStepAt
+        }))
+      };
+    }
+    case "get_scenario": {
+      const scenario = db.getScenario(args.scenarioId);
+      if (!scenario) {
+        throw new Error(`Scenario '${args.scenarioId}' not found.`);
+      }
+      return {
+        id: scenario.id,
+        title: scenario.title,
+        stepsCount: scenario.stepsCount,
+        status: scenario.status,
+        steps: scenario.steps.map((step) => ({
+          id: step.id,
+          stepNumber: step.stepNumber,
+          type: step.type,
+          message: step.message,
+          route: step.route,
+          url: step.url,
+          targetSelector: step.target?.selector,
+          boundingRect: step.target?.boundingRect || step.region,
+          elementContext: step.elementContext,
+          screenshot: step.screenshots?.original,
+          status: step.status,
+          createdAt: step.createdAt
+        })),
+        createdAt: scenario.createdAt,
+        updatedAt: scenario.updatedAt
+      };
+    }
     case "get_note": {
       const note = db.getNote(args.noteId);
       if (!note) {
@@ -2237,6 +2402,9 @@ async function handleToolCall(name, args, ctx) {
         type: note.type,
         status: note.status,
         message: note.message,
+        scenarioId: note.scenarioId,
+        stepNumber: note.stepNumber,
+        scenarioTitle: note.scenarioTitle,
         route: note.route,
         url: note.url,
         viewport: note.viewport,
@@ -2494,6 +2662,7 @@ var TOOLS = [
       type: "object",
       properties: {
         projectId: { type: "string", description: "Filter notes by project ID or name" },
+        scenarioId: { type: "string", description: "Filter notes by scenario / flow ID" },
         status: {
           type: "string",
           enum: ["OPEN", "IN_PROGRESS", "VERIFYING", "RESOLVED", "FAILED", "INCONCLUSIVE"],
@@ -2503,6 +2672,33 @@ var TOOLS = [
       }
     }
   },
+  {
+    name: "list_scenarios",
+    description: "List recorded reproduction scenarios and multi-step user interaction flows",
+    inputSchema: {
+      type: "object",
+      properties: {
+        projectId: { type: "string", description: "Filter scenarios by project ID or name" },
+        status: {
+          type: "string",
+          enum: ["OPEN", "RESOLVED"],
+          description: "Filter by scenario status"
+        },
+        limit: { type: "number", description: "Maximum number of scenarios to return (default: 20)" }
+      }
+    }
+  },
+  {
+    name: "get_scenario",
+    description: "Retrieve full chronological step-by-step reproduction flow with selectors, route, screenshots, and action details",
+    inputSchema: {
+      type: "object",
+      properties: {
+        scenarioId: { type: "string", description: "The unique ID of the scenario / flow (e.g. scen_123)" }
+      },
+      required: ["scenarioId"]
+    }
+  },
   {
     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)",