browsertrack 0.1.2 → 0.2.0

package/dist/client/index.cjs

@@ -1184,7 +1184,9 @@ var NoteInspector = class {
     __publicField(this, "toolbarElement", null);
     __publicField(this, "modalOverlay", null);
     __publicField(this, "cardOverlay", null);
+    __publicField(this, "toastContainer", null);
     __publicField(this, "activeMode", "idle");
+    __publicField(this, "activeScenario", null);
     __publicField(this, "hoveredElement", null);
     __publicField(this, "selectedElement", null);
     __publicField(this, "selectedRegion", null);
@@ -1225,6 +1227,41 @@ var NoteInspector = class {
     this.updateToolbarCount();
     this.renderMarkers();
   }
+  showToast(message, icon = "\u2728", durationMs = 2500) {
+    if (typeof document === "undefined") return;
+    const root = this.ensureContainer();
+    if (!root || !this.toastContainer) return;
+    const toast = document.createElement("div");
+    toast.className = "bt-toast";
+    toast.innerHTML = `<span>${icon}</span> <span>${message}</span>`;
+    this.toastContainer.appendChild(toast);
+    setTimeout(() => {
+      toast.classList.add("bt-toast-fadeout");
+      setTimeout(() => {
+        if (toast.parentElement) {
+          toast.parentElement.removeChild(toast);
+        }
+      }, 250);
+    }, durationMs);
+  }
+  startScenario(title) {
+    const defaultTitle = title || `Scenario ${(/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+    this.activeScenario = {
+      id: `scen_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 6)}`,
+      title: defaultTitle,
+      stepNumber: 1
+    };
+    this.updateToolbarState();
+    this.setMode("element");
+    this.showToast(`Started flow: "${defaultTitle}"`, "\u{1F3AC}");
+  }
+  finishScenario() {
+    const title = this.activeScenario?.title;
+    this.activeScenario = null;
+    this.updateToolbarState();
+    this.setMode("idle");
+    this.showToast(title ? `Finished flow: "${title}"` : "Flow recording finished", "\u2713");
+  }
   setMode(mode) {
     this.activeMode = mode;
     this.updateToolbarState();
@@ -1404,6 +1441,12 @@ var NoteInspector = class {
           z-index: 2147483641;
         }
 
+        .bt-note-marker-step {
+          background: linear-gradient(135deg, #f59e0b, #d97706);
+          border-color: #fef3c7;
+          box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4), 0 0 0 1px rgba(217, 119, 6, 0.5);
+        }
+
         @keyframes bt-pop-in {
           0% { transform: scale(0.6); opacity: 0; }
           100% { transform: scale(1); opacity: 1; }
@@ -1414,6 +1457,10 @@ var NoteInspector = class {
           box-shadow: 0 8px 20px rgba(37,99,235,0.6), 0 0 0 2px #60a5fa;
         }
 
+        .bt-note-marker-step:hover {
+          box-shadow: 0 8px 20px rgba(245, 158, 11, 0.7), 0 0 0 2px #fde68a;
+        }
+
         .bt-marker-resolved {
           background: linear-gradient(135deg, #475569, #334155);
           border-color: #94a3b8;
@@ -1510,6 +1557,19 @@ var NoteInspector = class {
           box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
         }
 
+        .bt-toolbar-btn.active-scenario {
+          background: linear-gradient(135deg, #f59e0b, #d97706);
+          color: #ffffff;
+          font-weight: 700;
+          box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
+          animation: bt-pulse 2s infinite;
+        }
+
+        @keyframes bt-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.85; }
+        }
+
         .bt-count-pill {
           background: rgba(255, 255, 255, 0.2);
           color: #ffffff;
@@ -1557,7 +1617,7 @@ var NoteInspector = class {
           border: 1px solid #334155;
           border-radius: 14px;
           padding: 20px;
-          width: 450px;
+          width: 470px;
           max-width: 92vw;
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
           display: flex;
@@ -1580,6 +1640,7 @@ var NoteInspector = class {
           align-items: center;
           gap: 8px;
           color: #f8fafc;
+          flex-wrap: wrap;
         }
 
         .bt-mode-badge {
@@ -1609,6 +1670,12 @@ var NoteInspector = class {
           border: 1px solid rgba(168, 85, 247, 0.4);
         }
 
+        .bt-badge-step {
+          background: rgba(245, 158, 11, 0.15);
+          color: #fbbf24;
+          border: 1px solid rgba(245, 158, 11, 0.4);
+        }
+
         .bt-badge-status-open {
           background: rgba(16, 185, 129, 0.15);
           color: #34d399;
@@ -1660,6 +1727,43 @@ var NoteInspector = class {
           color: #cbd5e1;
         }
 
+        .bt-scenario-stepper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background: #090d16;
+          border: 1px solid #1e293b;
+          border-radius: 8px;
+          padding: 6px 10px;
+          font-size: 12px;
+          font-weight: 600;
+          color: #f59e0b;
+        }
+
+        .bt-step-nav-btn {
+          background: #1e293b;
+          color: #f8fafc;
+          border: 1px solid #334155;
+          padding: 4px 10px;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 11px;
+          font-weight: 600;
+          transition: all 0.12s ease;
+          font-family: inherit;
+        }
+
+        .bt-step-nav-btn:hover:not(:disabled) {
+          background: #2563eb;
+          border-color: #3b82f6;
+          color: #ffffff;
+        }
+
+        .bt-step-nav-btn:disabled {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+
         .bt-note-message-box {
           background: #090d16;
           border: 1px solid #1e293b;
@@ -1704,8 +1808,9 @@ var NoteInspector = class {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          gap: 12px;
+          gap: 10px;
           margin-top: 2px;
+          flex-wrap: wrap;
         }
 
         .bt-kbd-hint {
@@ -1733,12 +1838,13 @@ var NoteInspector = class {
           justify-content: flex-end;
           align-items: center;
           gap: 8px;
+          flex-wrap: wrap;
         }
 
         .bt-btn {
-          padding: 8px 16px;
+          padding: 7px 14px;
           border-radius: 7px;
-          font-size: 12.5px;
+          font-size: 12px;
           font-weight: 600;
           cursor: pointer;
           border: 1px solid transparent;
@@ -1747,7 +1853,7 @@ var NoteInspector = class {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          gap: 6px;
+          gap: 5px;
         }
 
         .bt-btn-cancel {
@@ -1769,6 +1875,25 @@ var NoteInspector = class {
           box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
         }
 
+        .bt-btn-next-step {
+          background: linear-gradient(135deg, #6366f1, #4f46e5);
+          color: #ffffff;
+          box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+        }
+        .bt-btn-next-step:hover {
+          background: linear-gradient(135deg, #4f46e5, #4338ca);
+          box-shadow: 0 4px 12px rgba(99, 102, 241, 0.55);
+        }
+
+        .bt-btn-finish-flow {
+          background: linear-gradient(135deg, #10b981, #059669);
+          color: #ffffff;
+          box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
+        }
+        .bt-btn-finish-flow:hover {
+          background: linear-gradient(135deg, #059669, #047857);
+        }
+
         .bt-btn-resolve {
           background: rgba(16, 185, 129, 0.15);
           color: #6ee7b7;
@@ -1788,6 +1913,47 @@ var NoteInspector = class {
           background: rgba(239, 68, 68, 0.3);
           color: #ffffff;
         }
+
+        /* 6. Toast Notifications */
+        .bt-toast-container {
+          position: fixed;
+          bottom: 74px;
+          right: 24px;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          pointer-events: none;
+          z-index: 2147483647;
+          align-items: flex-end;
+        }
+
+        .bt-toast {
+          background: #0f172a;
+          color: #f8fafc;
+          border: 1px solid #334155;
+          border-radius: 30px;
+          padding: 8px 16px;
+          font-size: 12.5px;
+          font-weight: 500;
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+          pointer-events: auto;
+          animation: bt-toast-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+          transition: opacity 0.25s ease, transform 0.25s ease;
+          user-select: none;
+        }
+
+        .bt-toast-fadeout {
+          opacity: 0;
+          transform: translateY(6px);
+        }
+
+        @keyframes bt-toast-in {
+          from { opacity: 0; transform: translateY(8px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
       `;
       this.shadowRoot.appendChild(style);
       this.highlightOverlay = document.createElement("div");
@@ -1797,6 +1963,9 @@ var NoteInspector = class {
       this.markersContainer = document.createElement("div");
       this.markersContainer.className = "bt-markers-layer";
       this.shadowRoot.appendChild(this.markersContainer);
+      this.toastContainer = document.createElement("div");
+      this.toastContainer.className = "bt-toast-container";
+      this.shadowRoot.appendChild(this.toastContainer);
       if (this.options.showToolbar) {
         this.createToolbar();
       }
@@ -1824,6 +1993,10 @@ var NoteInspector = class {
         <span>\u{1F4C4}</span> Page
       </button>
       <div class="bt-toolbar-divider"></div>
+      <button class="bt-toolbar-btn" id="bt-mode-flow" title="Record multi-step reproduction flow">
+        <span>\u{1F3AC}</span> Flow
+      </button>
+      <div class="bt-toolbar-divider"></div>
       <button class="bt-toolbar-btn active" id="bt-toggle-notes" title="Toggle visible note markers on screen">
         <span>\u{1F4CC}</span> Notes <span class="bt-count-pill" id="bt-notes-count">0</span>
       </button>
@@ -1831,6 +2004,7 @@ var NoteInspector = class {
     const btnElement = this.toolbarElement.querySelector("#bt-mode-element");
     const btnRegion = this.toolbarElement.querySelector("#bt-mode-region");
     const btnPage = this.toolbarElement.querySelector("#bt-mode-page");
+    const btnFlow = this.toolbarElement.querySelector("#bt-mode-flow");
     const btnToggleNotes = this.toolbarElement.querySelector("#bt-toggle-notes");
     btnElement.onclick = (e) => {
       e.stopPropagation();
@@ -1844,6 +2018,14 @@ var NoteInspector = class {
       e.stopPropagation();
       this.setMode("page");
     };
+    btnFlow.onclick = (e) => {
+      e.stopPropagation();
+      if (this.activeScenario) {
+        this.finishScenario();
+      } else {
+        this.startScenario();
+      }
+    };
     btnToggleNotes.onclick = (e) => {
       e.stopPropagation();
       this.showMarkers = !this.showMarkers;
@@ -1857,9 +2039,21 @@ var NoteInspector = class {
     const btnElement = this.toolbarElement.querySelector("#bt-mode-element");
     const btnRegion = this.toolbarElement.querySelector("#bt-mode-region");
     const btnPage = this.toolbarElement.querySelector("#bt-mode-page");
+    const btnFlow = this.toolbarElement.querySelector("#bt-mode-flow");
     btnElement?.classList.toggle("active", this.activeMode === "element");
     btnRegion?.classList.toggle("active", this.activeMode === "region");
     btnPage?.classList.toggle("active", this.activeMode === "page");
+    if (btnFlow) {
+      if (this.activeScenario) {
+        btnFlow.className = "bt-toolbar-btn active-scenario";
+        btnFlow.innerHTML = `<span>\u{1F3AC}</span> Step ${this.activeScenario.stepNumber} (Finish)`;
+        btnFlow.setAttribute("title", `Click to finish recording "${this.activeScenario.title}"`);
+      } else {
+        btnFlow.className = "bt-toolbar-btn";
+        btnFlow.innerHTML = `<span>\u{1F3AC}</span> Flow`;
+        btnFlow.setAttribute("title", "Record multi-step reproduction flow");
+      }
+    }
   }
   updateToolbarCount() {
     if (!this.toolbarElement) return;
@@ -1884,6 +2078,9 @@ var NoteInspector = class {
         pageNotes.push(note);
         return;
       }
+      const isStep = !!note.scenarioId && note.stepNumber != null;
+      const stepLabel = isStep ? `\u{1F3AC} Step ${note.stepNumber}` : `#${index + 1}`;
+      const markerClass = `bt-note-marker ${isStep ? "bt-note-marker-step" : ""}`;
       if (note.type === "region" && note.region) {
         const regBox = document.createElement("div");
         regBox.className = "bt-region-marker-box";
@@ -1893,11 +2090,11 @@ var NoteInspector = class {
         regBox.style.height = `${note.region.height}px`;
         this.markersContainer.appendChild(regBox);
         const pin = document.createElement("div");
-        pin.className = "bt-note-marker";
+        pin.className = markerClass;
         pin.style.left = `${Math.max(4, note.region.x - 12)}px`;
         pin.style.top = `${Math.max(4, note.region.y - 12)}px`;
-        pin.title = note.message;
-        pin.innerHTML = `<span>\u{1F4D0}</span> <span>#${index + 1}</span>`;
+        pin.title = isStep ? `[${note.scenarioTitle || "Scenario"}] Step ${note.stepNumber}: ${note.message}` : note.message;
+        pin.innerHTML = `<span>${isStep ? "\u{1F3AC}" : "\u{1F4D0}"}</span> <span>${stepLabel}</span>`;
         pin.onclick = (e) => {
           e.stopPropagation();
           this.openNoteCard(note);
@@ -1915,12 +2112,12 @@ var NoteInspector = class {
       const rect = targetEl ? targetEl.getBoundingClientRect() : note.target?.boundingRect;
       if (rect) {
         const pin = document.createElement("div");
-        pin.className = "bt-note-marker";
+        pin.className = markerClass;
         pin.setAttribute("data-note-id", note.id);
-        pin.title = note.message;
+        pin.title = isStep ? `[${note.scenarioTitle || "Scenario"}] Step ${note.stepNumber}: ${note.message}` : note.message;
         pin.style.left = `${Math.max(4, rect.left - 10)}px`;
         pin.style.top = `${Math.max(4, rect.top - 12)}px`;
-        pin.innerHTML = `<span>\u{1F4DD}</span> <span>#${index + 1}</span>`;
+        pin.innerHTML = `<span>${isStep ? "\u{1F3AC}" : "\u{1F4DD}"}</span> <span>${stepLabel}</span>`;
         pin.onclick = (e) => {
           e.stopPropagation();
           this.openNoteCard(note);
@@ -1935,10 +2132,11 @@ var NoteInspector = class {
     if (pageNotes.length > 0) {
       const pageDock = document.createElement("div");
       pageDock.className = "bt-page-notes-dock";
-      pageNotes.forEach((pNote, idx) => {
+      pageNotes.forEach((pNote) => {
         const pill = document.createElement("div");
         pill.className = "bt-page-note-pill";
-        pill.innerHTML = `<span>\u{1F4C4}</span> <span>Page Note (${truncate(pNote.message, 25)})</span>`;
+        const label = pNote.scenarioId && pNote.stepNumber ? `Step ${pNote.stepNumber}: ` : "";
+        pill.innerHTML = `<span>\u{1F4C4}</span> <span>${label}${truncate(pNote.message, 25)}</span>`;
         pill.onclick = (e) => {
           e.stopPropagation();
           this.openNoteCard(pNote);
@@ -1967,17 +2165,39 @@ var NoteInspector = class {
     const icon = note.type === "region" ? "\u{1F4D0}" : note.type === "page" ? "\u{1F4C4}" : "\u{1F3AF}";
     const contextText = note.type === "region" && note.region ? `Region: ${note.region.width} \xD7 ${note.region.height} px \xB7 Route: ${note.route}` : note.type === "page" ? `Page Note \xB7 Route: ${note.route}` : `${note.target?.selector || "Element"} (${note.target?.boundingRect?.width || 0}\xD7${note.target?.boundingRect?.height || 0}px) \xB7 ${note.route}`;
     const formattedDate = new Date(note.createdAt).toLocaleString();
+    let scenarioStepsHtml = "";
+    let scenarioSteps = [];
+    if (note.scenarioId) {
+      scenarioSteps = this.savedNotes.filter((n) => n.scenarioId === note.scenarioId).sort((a, b) => (a.stepNumber || 0) - (b.stepNumber || 0));
+      const currentIndex = scenarioSteps.findIndex((s) => s.id === note.id);
+      const prevStep = currentIndex > 0 ? scenarioSteps[currentIndex - 1] : null;
+      const nextStep = currentIndex >= 0 && currentIndex < scenarioSteps.length - 1 ? scenarioSteps[currentIndex + 1] : null;
+      scenarioStepsHtml = `
+        <div class="bt-scenario-stepper">
+          <button class="bt-step-nav-btn" id="btn-prev-step" ${!prevStep ? "disabled" : ""}>
+            \u25C0 Step ${prevStep ? prevStep.stepNumber : ""}
+          </button>
+          <span>\u{1F3AC} Step ${note.stepNumber || 1} of ${scenarioSteps.length}</span>
+          <button class="bt-step-nav-btn" id="btn-next-step-card" ${!nextStep ? "disabled" : ""}>
+            Step ${nextStep ? nextStep.stepNumber : ""} \u25B6
+          </button>
+        </div>
+      `;
+    }
     backdrop.innerHTML = `
       <div class="bt-modal">
         <div class="bt-modal-header">
           <div class="bt-modal-title">
-            <span>${icon} Visual Note Details</span>
+            <span>${note.scenarioId ? "\u{1F3AC} " + (note.scenarioTitle || "Scenario Flow") : icon + " Visual Note Details"}</span>
             <span class="bt-mode-badge ${badgeClass}">${note.type.toUpperCase()}</span>
+            ${note.scenarioId && note.stepNumber ? `<span class="bt-mode-badge bt-badge-step">STEP ${note.stepNumber}</span>` : ""}
             <span class="bt-mode-badge ${statusClass}">${note.status}</span>
           </div>
           <button class="bt-close-btn" id="btn-card-close" title="Close (Esc)">\u2715</button>
         </div>
 
+        ${scenarioStepsHtml}
+
         <div class="bt-target-pill" title="${contextText}">
           <span>\u{1F3F7}\uFE0F</span>
           <span class="bt-pill-content">${contextText}</span>
@@ -1991,9 +2211,14 @@ var NoteInspector = class {
         </div>
 
         <div class="bt-modal-footer">
-          <button class="bt-btn bt-btn-delete" id="btn-card-delete" title="Delete this note">
-            <span>\u{1F5D1}\uFE0F</span> Delete
-          </button>
+          <div style="display: flex; gap: 6px;">
+            <button class="bt-btn bt-btn-delete" id="btn-card-delete" title="Delete this note">
+              <span>\u{1F5D1}\uFE0F</span> Delete
+            </button>
+            ${note.scenarioId ? `<button class="bt-btn bt-btn-delete" id="btn-card-delete-flow" title="Delete entire scenario flow">
+                    <span>\u{1F5D1}\uFE0F</span> Delete Flow
+                  </button>` : ""}
+          </div>
           <div class="bt-modal-actions">
             <button class="bt-btn bt-btn-cancel" id="btn-card-dismiss">Close</button>
             <button class="bt-btn ${note.status === "OPEN" ? "bt-btn-resolve" : "bt-btn-save"}" id="btn-card-resolve">
@@ -2007,6 +2232,9 @@ var NoteInspector = class {
     const btnDismiss = backdrop.querySelector("#btn-card-dismiss");
     const btnResolve = backdrop.querySelector("#btn-card-resolve");
     const btnDelete = backdrop.querySelector("#btn-card-delete");
+    const btnDeleteFlow = backdrop.querySelector("#btn-card-delete-flow");
+    const btnPrevStep = backdrop.querySelector("#btn-prev-step");
+    const btnNextStepCard = backdrop.querySelector("#btn-next-step-card");
     const closeCard = () => {
       if (this.cardOverlay) {
         root.removeChild(this.cardOverlay);
@@ -2019,18 +2247,44 @@ var NoteInspector = class {
     backdrop.onclick = (e) => {
       if (e.target === backdrop) closeCard();
     };
+    if (btnPrevStep && scenarioSteps.length > 0) {
+      const currentIndex = scenarioSteps.findIndex((s) => s.id === note.id);
+      if (currentIndex > 0) {
+        btnPrevStep.onclick = () => {
+          this.openNoteCard(scenarioSteps[currentIndex - 1]);
+        };
+      }
+    }
+    if (btnNextStepCard && scenarioSteps.length > 0) {
+      const currentIndex = scenarioSteps.findIndex((s) => s.id === note.id);
+      if (currentIndex >= 0 && currentIndex < scenarioSteps.length - 1) {
+        btnNextStepCard.onclick = () => {
+          this.openNoteCard(scenarioSteps[currentIndex + 1]);
+        };
+      }
+    }
     btnResolve.onclick = () => {
       if (note.status === "OPEN") {
         this.transport.send({ type: "resolve_note", noteId: note.id });
+        this.showToast("Note marked as resolved", "\u2705");
       } else {
         this.transport.send({ type: "reopen_note", noteId: note.id });
+        this.showToast("Note reopened", "\u21BA");
       }
       closeCard();
     };
     btnDelete.onclick = () => {
       this.transport.send({ type: "delete_note", noteId: note.id });
+      this.showToast("Note deleted", "\u{1F5D1}\uFE0F");
       closeCard();
     };
+    if (btnDeleteFlow && note.scenarioId) {
+      btnDeleteFlow.onclick = () => {
+        this.transport.send({ type: "delete_scenario", scenarioId: note.scenarioId });
+        this.showToast("Scenario flow deleted", "\u{1F5D1}\uFE0F");
+        closeCard();
+      };
+    }
     root.appendChild(backdrop);
   }
   setupListeners() {
@@ -2067,7 +2321,7 @@ var NoteInspector = class {
         if (target && target !== this.container && !this.container?.contains(target)) {
           this.selectedElement = target;
           this.openNoteEditor(target, "element");
-          if (this.activeMode === "element") {
+          if (this.activeMode === "element" && !this.activeScenario) {
             this.setMode("idle");
           }
         }
@@ -2079,7 +2333,9 @@ var NoteInspector = class {
           this.shadowRoot.removeChild(this.cardOverlay);
           this.cardOverlay = null;
         } else if (this.activeMode === "region" || this.activeMode === "element") {
-          this.setMode("idle");
+          if (!this.activeScenario) {
+            this.setMode("idle");
+          }
         }
       }
     };
@@ -2185,28 +2441,27 @@ var NoteInspector = class {
             width: Math.round(width),
             height: Math.round(height)
           };
-          this.hideRegionOverlay();
-          this.setMode("idle");
           this.openRegionNoteEditor(this.selectedRegion);
-        } else {
-          this.hideRegionOverlay();
+        }
+        if (this.regionBox) {
+          this.regionBox.style.display = "none";
+        }
+        if (!this.activeScenario) {
           this.setMode("idle");
         }
       };
-    }
-    if (this.toolbarElement && this.toolbarElement.parentNode === root) {
-      root.insertBefore(this.regionOverlay, this.toolbarElement);
-    } else {
       root.appendChild(this.regionOverlay);
+    } else {
+      this.regionOverlay.style.display = "block";
     }
   }
   hideRegionOverlay() {
-    this.isDraggingRegion = false;
-    if (this.regionOverlay && this.regionOverlay.parentNode) {
-      this.regionOverlay.parentNode.removeChild(this.regionOverlay);
-    }
-    if (this.regionBox) {
-      this.regionBox.style.display = "none";
+    if (this.regionOverlay) {
+      this.regionOverlay.style.display = "none";
+      this.isDraggingRegion = false;
+      if (this.regionBox) {
+        this.regionBox.style.display = "none";
+      }
     }
   }
   updateHighlight(el) {
@@ -2214,19 +2469,19 @@ var NoteInspector = class {
     if (!root || !this.highlightOverlay) return;
     const rect = el.getBoundingClientRect();
     this.highlightOverlay.style.display = "block";
-    this.highlightOverlay.style.top = `${rect.top}px`;
     this.highlightOverlay.style.left = `${rect.left}px`;
+    this.highlightOverlay.style.top = `${rect.top}px`;
     this.highlightOverlay.style.width = `${rect.width}px`;
     this.highlightOverlay.style.height = `${rect.height}px`;
-    const selector = getSemanticSelector(el);
-    const badgeText = `${selector} \xB7 ${Math.round(rect.width)}\xD7${Math.round(rect.height)}`;
     let badge = this.highlightOverlay.querySelector(".bt-badge");
     if (!badge) {
       badge = document.createElement("div");
       badge.className = "bt-badge";
       this.highlightOverlay.appendChild(badge);
     }
-    badge.textContent = badgeText;
+    const selector = getSemanticSelector(el);
+    const label = this.activeScenario ? `\u{1F3AC} Step ${this.activeScenario.stepNumber} \xB7 ${selector}` : selector;
+    badge.textContent = `${label} (${Math.round(rect.width)} \xD7 ${Math.round(rect.height)} px)`;
   }
   hideHighlight() {
     if (this.highlightOverlay) {
@@ -2242,21 +2497,57 @@ var NoteInspector = class {
       this.updateHighlight(targetEl);
     }
     this.renderNoteModal({
-      title: "Add Visual Note",
-      modeBadge: noteType.toUpperCase(),
+      title: this.activeScenario ? `Step ${this.activeScenario.stepNumber}: ${this.activeScenario.title}` : "Add Visual Note",
+      modeBadge: this.activeScenario ? `STEP ${this.activeScenario.stepNumber}` : noteType.toUpperCase(),
       pillText: noteType === "page" ? `Page Viewport: ${window.innerWidth} \xD7 ${window.innerHeight} px` : `${getSemanticSelector(targetEl)} (${Math.round(targetEl.getBoundingClientRect().width)}\xD7${Math.round(targetEl.getBoundingClientRect().height)}) \xB7 Viewport: ${window.innerWidth}\xD7${window.innerHeight}`,
-      onSave: async (message) => {
-        await this.saveVisualNote(targetEl, message, noteType);
+      onSave: async (message, action) => {
+        let scenarioParam;
+        if (action === "next_step" && !this.activeScenario) {
+          this.startScenario();
+        }
+        if (this.activeScenario) {
+          scenarioParam = {
+            scenarioId: this.activeScenario.id,
+            stepNumber: this.activeScenario.stepNumber,
+            scenarioTitle: this.activeScenario.title
+          };
+        }
+        await this.saveVisualNote(targetEl, message, noteType, scenarioParam);
+        if (action === "next_step" && this.activeScenario) {
+          this.activeScenario.stepNumber++;
+          this.updateToolbarState();
+          this.setMode("element");
+        } else if (action === "finish_flow" && this.activeScenario) {
+          this.finishScenario();
+        }
       }
     });
   }
   openRegionNoteEditor(region) {
     this.renderNoteModal({
-      title: "Add Region Note",
-      modeBadge: "REGION",
+      title: this.activeScenario ? `Step ${this.activeScenario.stepNumber}: ${this.activeScenario.title}` : "Add Region Note",
+      modeBadge: this.activeScenario ? `STEP ${this.activeScenario.stepNumber}` : "REGION",
       pillText: `Selected Area: x:${region.x}, y:${region.y} (${region.width} \xD7 ${region.height} px)`,
-      onSave: async (message) => {
-        await this.saveRegionVisualNote(region, message);
+      onSave: async (message, action) => {
+        let scenarioParam;
+        if (action === "next_step" && !this.activeScenario) {
+          this.startScenario();
+        }
+        if (this.activeScenario) {
+          scenarioParam = {
+            scenarioId: this.activeScenario.id,
+            stepNumber: this.activeScenario.stepNumber,
+            scenarioTitle: this.activeScenario.title
+          };
+        }
+        await this.saveRegionVisualNote(region, message, scenarioParam);
+        if (action === "next_step" && this.activeScenario) {
+          this.activeScenario.stepNumber++;
+          this.updateToolbarState();
+          this.setMode("element");
+        } else if (action === "finish_flow" && this.activeScenario) {
+          this.finishScenario();
+        }
       }
     });
   }
@@ -2270,14 +2561,15 @@ var NoteInspector = class {
     const backdrop = document.createElement("div");
     backdrop.className = "bt-modal-backdrop";
     this.modalOverlay = backdrop;
-    const badgeClass = `bt-badge-${options.modeBadge.toLowerCase()}`;
-    const icon = options.modeBadge === "REGION" ? "\u{1F4D0}" : options.modeBadge === "PAGE" ? "\u{1F4C4}" : "\u{1F3AF}";
+    const isStep = options.modeBadge.startsWith("STEP");
+    const badgeClass = isStep ? "bt-badge-step" : `bt-badge-${options.modeBadge.toLowerCase()}`;
+    const icon = isStep ? "\u{1F3AC}" : options.modeBadge === "REGION" ? "\u{1F4D0}" : options.modeBadge === "PAGE" ? "\u{1F4C4}" : "\u{1F3AF}";
     const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
     backdrop.innerHTML = `
       <div class="bt-modal">
         <div class="bt-modal-header">
           <div class="bt-modal-title">
-            <span>\u{1F4DD} ${options.title}</span>
+            <span>${icon} ${options.title}</span>
             <span class="bt-mode-badge ${badgeClass}">${options.modeBadge}</span>
           </div>
           <button class="bt-close-btn" id="btn-close" title="Close (Esc)">\u2715</button>
@@ -2286,14 +2578,19 @@ var NoteInspector = class {
           <span>${icon}</span>
           <span class="bt-pill-content">${options.pillText}</span>
         </div>
-        <textarea class="bt-textarea" placeholder="Describe the layout issue, styling bug, or note for AI agent..." autofocus></textarea>
+        <textarea class="bt-textarea" placeholder="Describe the layout issue, user action, or note for AI agent..." autofocus></textarea>
         <div class="bt-modal-footer">
           <div class="bt-kbd-hint">
             <kbd>${isMac ? "\u2318" : "Ctrl"}+Enter</kbd> save \xB7 <kbd>Esc</kbd> cancel
           </div>
           <div class="bt-modal-actions">
             <button class="bt-btn bt-btn-cancel" id="btn-cancel">Cancel</button>
-            <button class="bt-btn bt-btn-save" id="btn-save">Save Note</button>
+            <button class="bt-btn bt-btn-next-step" id="btn-next-step" title="Save this step and immediately select the next element">
+              <span>\u27A1\uFE0F</span> ${this.activeScenario ? "Save & Next Step" : "Save as Step 1 (Flow)"}
+            </button>
+            ${this.activeScenario ? `<button class="bt-btn bt-btn-finish-flow" id="btn-finish-flow" title="Save final step and complete scenario">
+                    <span>\u2713</span> Save & Finish Flow
+                  </button>` : `<button class="bt-btn bt-btn-save" id="btn-save">Save Note</button>`}
           </div>
         </div>
       </div>
@@ -2302,6 +2599,8 @@ var NoteInspector = class {
     const btnClose = backdrop.querySelector("#btn-close");
     const btnCancel = backdrop.querySelector("#btn-cancel");
     const btnSave = backdrop.querySelector("#btn-save");
+    const btnNextStep = backdrop.querySelector("#btn-next-step");
+    const btnFinishFlow = backdrop.querySelector("#btn-finish-flow");
     const closeModal = () => {
       if (this.modalOverlay) {
         root.removeChild(this.modalOverlay);
@@ -2317,22 +2616,29 @@ var NoteInspector = class {
         closeModal();
       }
     };
-    const submitNote = async () => {
+    const handleAction = async (action) => {
       const message = textarea.value.trim();
       if (!message) return;
-      btnSave.textContent = "Saving...";
-      btnSave.disabled = true;
+      btnNextStep.disabled = true;
+      if (btnSave) btnSave.disabled = true;
+      if (btnFinishFlow) btnFinishFlow.disabled = true;
       try {
-        await options.onSave(message);
+        await options.onSave(message, action);
       } finally {
         closeModal();
       }
     };
-    btnSave.onclick = submitNote;
+    if (btnSave) {
+      btnSave.onclick = () => handleAction("save");
+    }
+    btnNextStep.onclick = () => handleAction("next_step");
+    if (btnFinishFlow) {
+      btnFinishFlow.onclick = () => handleAction("finish_flow");
+    }
     textarea.onkeydown = (e) => {
-      if (e.key === "Enter" && (e.metaKey || e.ctrlKey || !e.shiftKey)) {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
-        submitNote();
+        handleAction(this.activeScenario ? "next_step" : "save");
       }
       if (e.key === "Escape") {
         closeModal();
@@ -2341,7 +2647,7 @@ var NoteInspector = class {
     root.appendChild(backdrop);
     setTimeout(() => textarea?.focus(), 50);
   }
-  async saveVisualNote(targetEl, message, noteType = "element") {
+  async saveVisualNote(targetEl, message, noteType = "element", scenario) {
     const rect = targetEl.getBoundingClientRect();
     const selector = noteType === "page" ? "body" : getSemanticSelector(targetEl);
     let screenshotDataUrl;
@@ -2368,33 +2674,38 @@ var NoteInspector = class {
       visible: rect.width > 0 && rect.height > 0,
       confidence: selector.startsWith("[data-test") ? "high" : selector.startsWith("#") ? "medium" : "low"
     };
+    const route = typeof window !== "undefined" ? window.location.pathname + window.location.search : "/";
+    const url = typeof window !== "undefined" ? window.location.href : "http://localhost/";
+    const viewport = typeof window !== "undefined" ? { width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio || 1 } : { width: 1280, height: 800, devicePixelRatio: 1 };
+    const scroll = typeof window !== "undefined" ? { scrollX: window.scrollX, scrollY: window.scrollY } : { scrollX: 0, scrollY: 0 };
     const notePayload = {
       type: "create_note",
       sessionId: this.transport.getSessionId() || "",
       noteType,
       message,
-      route: window.location.pathname + window.location.search,
-      url: window.location.href,
-      viewport: {
-        width: window.innerWidth,
-        height: window.innerHeight,
-        devicePixelRatio: window.devicePixelRatio || 1
-      },
-      scroll: {
-        scrollX: window.scrollX,
-        scrollY: window.scrollY
-      },
+      route,
+      url,
+      viewport,
+      scroll,
       target,
       elementContext,
       screenshot: screenshotDataUrl,
+      scenarioId: scenario?.scenarioId,
+      stepNumber: scenario?.stepNumber,
+      scenarioTitle: scenario?.scenarioTitle,
       timestamp: Date.now()
     };
     this.transport.send(notePayload);
     if (this.options.onNoteCreated) {
       this.options.onNoteCreated(notePayload);
     }
+    if (scenario?.scenarioId) {
+      this.showToast(`Step ${scenario.stepNumber || 1} recorded`, "\u{1F3AC}");
+    } else {
+      this.showToast("Visual note saved", "\u2728");
+    }
   }
-  async saveRegionVisualNote(region, message) {
+  async saveRegionVisualNote(region, message, scenario) {
     let screenshotDataUrl;
     try {
       const snap = await this.screenshotDriver.captureElement(document.body || document.documentElement);
@@ -2403,123 +2714,113 @@ var NoteInspector = class {
       }
     } catch {
     }
+    const route = typeof window !== "undefined" ? window.location.pathname + window.location.search : "/";
+    const url = typeof window !== "undefined" ? window.location.href : "http://localhost/";
+    const viewport = typeof window !== "undefined" ? { width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio || 1 } : { width: 1280, height: 800, devicePixelRatio: 1 };
+    const scroll = typeof window !== "undefined" ? { scrollX: window.scrollX, scrollY: window.scrollY } : { scrollX: 0, scrollY: 0 };
     const notePayload = {
       type: "create_note",
       sessionId: this.transport.getSessionId() || "",
       noteType: "region",
       message,
-      route: window.location.pathname + window.location.search,
-      url: window.location.href,
-      viewport: {
-        width: window.innerWidth,
-        height: window.innerHeight,
-        devicePixelRatio: window.devicePixelRatio || 1
-      },
-      scroll: {
-        scrollX: window.scrollX,
-        scrollY: window.scrollY
-      },
+      route,
+      url,
+      viewport,
+      scroll,
       region,
       screenshot: screenshotDataUrl,
+      scenarioId: scenario?.scenarioId,
+      stepNumber: scenario?.stepNumber,
+      scenarioTitle: scenario?.scenarioTitle,
       timestamp: Date.now()
     };
     this.transport.send(notePayload);
     if (this.options.onNoteCreated) {
       this.options.onNoteCreated(notePayload);
     }
-  }
-  async cropDataUrl(dataUrl, region) {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.onload = () => {
-        try {
-          const canvas = document.createElement("canvas");
-          canvas.width = region.width;
-          canvas.height = region.height;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) {
-            resolve(dataUrl);
-            return;
-          }
-          const dpr = window.devicePixelRatio || 1;
-          ctx.drawImage(
-            img,
-            region.x * dpr,
-            region.y * dpr,
-            region.width * dpr,
-            region.height * dpr,
-            0,
-            0,
-            region.width,
-            region.height
-          );
-          resolve(canvas.toDataURL("image/webp", 0.9));
-        } catch {
-          resolve(dataUrl);
-        }
-      };
-      img.onerror = () => resolve(dataUrl);
-      img.src = dataUrl;
-    });
+    if (scenario?.scenarioId) {
+      this.showToast(`Step ${scenario.stepNumber || 1} region recorded`, "\u{1F3AC}");
+    } else {
+      this.showToast("Region note saved", "\u{1F4D0}");
+    }
   }
   extractElementContext(el) {
     const selector = getSemanticSelector(el);
-    const tag = el.tagName.toLowerCase();
     const attributes = {};
     for (let i = 0; i < el.attributes.length; i++) {
       const attr = el.attributes[i];
-      if (attr.name === "value" && el.type === "password") {
+      if (this.options.maskSelectors?.some((mask) => {
+        try {
+          return el.matches(mask);
+        } catch {
+          return false;
+        }
+      }) && (attr.name === "value" || attr.name === "data-secret")) {
         attributes[attr.name] = "[REDACTED]";
       } else {
         attributes[attr.name] = attr.value;
       }
     }
-    let outerHTML = "";
-    try {
-      const clone = el.cloneNode(true);
-      for (const passInput of Array.from(clone.querySelectorAll('input[type="password"]'))) {
-        passInput.setAttribute("value", "[REDACTED]");
-      }
-      outerHTML = truncate(clone.outerHTML, 10240);
-    } catch {
-      outerHTML = truncate(el.outerHTML, 10240);
+    let outerHTML = el.outerHTML;
+    if (outerHTML && outerHTML.length > 1e3) {
+      outerHTML = truncate(outerHTML, 1e3);
     }
-    let parent;
-    if (el.parentElement && el.parentElement !== document.body) {
-      parent = {
-        selector: getSemanticSelector(el.parentElement),
-        tag: el.parentElement.tagName.toLowerCase()
-      };
+    let innerText = el.innerText || el.textContent || "";
+    if (innerText && innerText.length > 200) {
+      innerText = truncate(innerText, 200);
     }
     return {
       selector,
-      tag,
+      tag: el.tagName.toLowerCase(),
       attributes,
       outerHTML,
-      innerText: truncate(el.textContent?.trim(), 200),
-      parent
+      innerText,
+      parent: el.parentElement ? {
+        selector: getSemanticSelector(el.parentElement),
+        tag: el.parentElement.tagName.toLowerCase()
+      } : void 0
     };
   }
+  async cropDataUrl(dataUrl, region) {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        canvas.width = region.width;
+        canvas.height = region.height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          resolve(dataUrl);
+          return;
+        }
+        const dpr = window.devicePixelRatio || 1;
+        ctx.drawImage(
+          img,
+          region.x * dpr,
+          region.y * dpr,
+          region.width * dpr,
+          region.height * dpr,
+          0,
+          0,
+          region.width,
+          region.height
+        );
+        resolve(canvas.toDataURL("image/png"));
+      };
+      img.onerror = () => resolve(dataUrl);
+      img.src = dataUrl;
+    });
+  }
   destroy() {
     for (const cleanup of this.cleanups) {
-      try {
-        cleanup();
-      } catch {
-      }
+      cleanup();
     }
     this.cleanups = [];
-    if (this.container && this.container.parentElement) {
-      this.container.parentElement.removeChild(this.container);
-    }
-    this.container = null;
-    this.shadowRoot = null;
-    this.toolbarElement = null;
-    this.regionOverlay = null;
-    this.regionBox = null;
-    this.regionBanner = null;
-    this.markersContainer = null;
-    this.modalOverlay = null;
-    this.cardOverlay = null;
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+      this.container = null;
+      this.shadowRoot = null;
+    }
   }
 };