browsertrack 0.1.2 → 0.2.1

package/dist/client/index.cjs

@@ -28,7 +28,9 @@ __export(src_exports, {
   DEFAULT_OPTIONS: () => DEFAULT_OPTIONS,
   NoteInspector: () => NoteInspector,
   getClient: () => getClient,
-  init: () => init
+  init: () => init,
+  resolveComponentSource: () => resolveComponentSource,
+  shouldHideUIFromUrl: () => shouldHideUIFromUrl
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -167,12 +169,220 @@ function truncate(str, maxLength = 200) {
   return str.slice(0, maxLength) + "...";
 }
 
+// packages/client/src/source/resolver.ts
+function resolveComponentSource(el) {
+  if (!el || typeof el !== "object") return void 0;
+  const reactInfo = resolveReactComponent(el);
+  if (reactInfo) return reactInfo;
+  const vueInfo = resolveVueComponent(el);
+  if (vueInfo) return vueInfo;
+  const svelteInfo = resolveSvelteComponent(el);
+  if (svelteInfo) return svelteInfo;
+  if (el.tagName && el.tagName.includes("-")) {
+    return {
+      framework: "web-component",
+      componentName: el.tagName.toLowerCase(),
+      hierarchy: [el.tagName.toLowerCase()]
+    };
+  }
+  const attrInfo = resolveDataAttributeComponent(el);
+  if (attrInfo) return attrInfo;
+  return void 0;
+}
+function resolveReactComponent(el) {
+  try {
+    const fiberKey = Object.keys(el).find(
+      (key) => key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")
+    );
+    if (!fiberKey) return void 0;
+    const hostFiber = el[fiberKey];
+    if (!hostFiber) return void 0;
+    let sourceFile;
+    let sourceLine;
+    let sourceColumn;
+    let componentName;
+    const hierarchy = [];
+    let props;
+    if (hostFiber._debugSource) {
+      sourceFile = hostFiber._debugSource.fileName;
+      sourceLine = hostFiber._debugSource.lineNumber;
+      sourceColumn = hostFiber._debugSource.columnNumber;
+    }
+    if (hostFiber._debugOwner) {
+      const ownerType = hostFiber._debugOwner.type;
+      componentName = getReactComponentName(ownerType);
+      if (!sourceFile && hostFiber._debugOwner._debugSource) {
+        sourceFile = hostFiber._debugOwner._debugSource.fileName;
+        sourceLine = hostFiber._debugOwner._debugSource.lineNumber;
+        sourceColumn = hostFiber._debugOwner._debugSource.columnNumber;
+      }
+    }
+    let curr = hostFiber;
+    while (curr) {
+      const type = curr.type;
+      const name = getReactComponentName(type);
+      if (name && !name.startsWith("html:") && name !== "Fragment") {
+        if (!componentName) {
+          componentName = name;
+        }
+        if (!hierarchy.includes(name)) {
+          hierarchy.unshift(name);
+        }
+        if (!sourceFile && curr._debugSource) {
+          sourceFile = curr._debugSource.fileName;
+          sourceLine = curr._debugSource.lineNumber;
+          sourceColumn = curr._debugSource.columnNumber;
+        }
+        if (!props && curr.memoizedProps && typeof curr.memoizedProps === "object") {
+          props = sanitizeProps(curr.memoizedProps);
+        }
+      }
+      curr = curr.return;
+    }
+    if (!componentName && !sourceFile) {
+      return void 0;
+    }
+    return {
+      framework: "react",
+      componentName,
+      sourceFile: normalizeFilePath(sourceFile),
+      sourceLine,
+      sourceColumn,
+      hierarchy: hierarchy.length > 0 ? hierarchy : componentName ? [componentName] : void 0,
+      props
+    };
+  } catch {
+    return void 0;
+  }
+}
+function getReactComponentName(type) {
+  if (!type) return void 0;
+  if (typeof type === "string") return void 0;
+  if (type.displayName) return type.displayName;
+  if (type.name) return type.name;
+  if (type.render?.displayName) return type.render.displayName;
+  if (type.render?.name) return type.render.name;
+  return void 0;
+}
+function resolveVueComponent(el) {
+  try {
+    const vueParent = el.__vueParentComponent || el.__vnode?.ctx;
+    if (vueParent) {
+      const type = vueParent.type || {};
+      const componentName = type.name || type.__name || type.displayName || "AnonymousComponent";
+      const sourceFile = type.__file;
+      const hierarchy = [];
+      let curr = vueParent;
+      while (curr) {
+        const cType = curr.type || {};
+        const cName = cType.name || cType.__name || cType.displayName;
+        if (cName && !hierarchy.includes(cName)) {
+          hierarchy.unshift(cName);
+        }
+        curr = curr.parent;
+      }
+      return {
+        framework: "vue",
+        componentName,
+        sourceFile: normalizeFilePath(sourceFile),
+        hierarchy: hierarchy.length > 0 ? hierarchy : [componentName],
+        props: vueParent.props ? sanitizeProps(vueParent.props) : void 0
+      };
+    }
+    const vue2Instance = el.__vue__;
+    if (vue2Instance) {
+      const options = vue2Instance.$options || {};
+      const componentName = options.name || options._componentTag || "VueComponent";
+      const sourceFile = options.__file;
+      return {
+        framework: "vue",
+        componentName,
+        sourceFile: normalizeFilePath(sourceFile),
+        hierarchy: [componentName],
+        props: vue2Instance.$props ? sanitizeProps(vue2Instance.$props) : void 0
+      };
+    }
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function resolveSvelteComponent(el) {
+  try {
+    let curr = el;
+    while (curr) {
+      const meta = curr.__svelte_meta;
+      if (meta && meta.loc) {
+        return {
+          framework: "svelte",
+          sourceFile: normalizeFilePath(meta.loc.file),
+          sourceLine: meta.loc.line,
+          sourceColumn: meta.loc.column,
+          componentName: meta.loc.file ? getBaseNameWithoutExt(meta.loc.file) : void 0,
+          hierarchy: meta.loc.file ? [getBaseNameWithoutExt(meta.loc.file)] : void 0
+        };
+      }
+      curr = curr.parentElement;
+    }
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function resolveDataAttributeComponent(el) {
+  try {
+    const compEl = el.closest("[data-component], [data-component-name], [data-source-file]");
+    if (!compEl) return void 0;
+    const componentName = compEl.getAttribute("data-component") || compEl.getAttribute("data-component-name") || void 0;
+    const sourceFile = compEl.getAttribute("data-source-file") || void 0;
+    const lineAttr = compEl.getAttribute("data-source-line");
+    const sourceLine = lineAttr ? parseInt(lineAttr, 10) : void 0;
+    if (!componentName && !sourceFile) return void 0;
+    return {
+      framework: "vanilla",
+      componentName,
+      sourceFile: normalizeFilePath(sourceFile),
+      sourceLine: isNaN(sourceLine) ? void 0 : sourceLine,
+      hierarchy: componentName ? [componentName] : void 0
+    };
+  } catch {
+    return void 0;
+  }
+}
+function normalizeFilePath(filePath) {
+  if (!filePath) return void 0;
+  const cleaned = filePath.split("?")[0];
+  return cleaned;
+}
+function getBaseNameWithoutExt(filePath) {
+  const parts = filePath.split("/");
+  const last = parts[parts.length - 1] || filePath;
+  return last.split(".")[0] || last;
+}
+function sanitizeProps(props) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("__") || typeof value === "function") continue;
+    if (value === null || value === void 0) {
+      result[key] = value;
+    } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      result[key] = value;
+    } else if (Array.isArray(value)) {
+      result[key] = `Array(${value.length})`;
+    } else if (typeof value === "object") {
+      result[key] = "[Object]";
+    }
+  }
+  return result;
+}
+
 // packages/client/src/interceptors/interaction.ts
 function extractElementSummary(el) {
   const selector = getSemanticSelector(el);
   const tag = el.tagName.toLowerCase();
   const id = el.id || void 0;
   const classes = Array.from(el.classList || []);
+  const componentSource = resolveComponentSource(el);
   let boundingRect = void 0;
   let visible = true;
   try {
@@ -204,7 +414,8 @@ function extractElementSummary(el) {
     boundingRect,
     visible,
     innerText,
-    outerHTML
+    outerHTML,
+    componentSource
   };
 }
 function setupInteractionInterceptors(onInteraction) {
@@ -522,10 +733,62 @@ var DEFAULT_OPTIONS = {
     enabled: true,
     shortcut: "Alt+Click",
     showBadges: true,
+    showToolbar: true,
     maskSelectors: ['input[type="password"]', "[data-sensitive]"]
   },
+  hidden: false,
+  hideQueryParam: void 0,
   debug: false
 };
+var HIDE_VALUES = /* @__PURE__ */ new Set(["0", "false", "hidden", "hide", "off", "none", "disabled", "ui_off", "silent"]);
+function shouldHideUIFromUrl(customParam, searchString) {
+  let search = searchString;
+  if (search === void 0) {
+    if (typeof window === "undefined" || !window.location) return false;
+    search = window.location.search;
+  }
+  if (!search) return false;
+  try {
+    const params = new URLSearchParams(search);
+    if (customParam) {
+      const customKeys = Array.isArray(customParam) ? customParam : [customParam];
+      for (const key of customKeys) {
+        if (params.has(key)) {
+          const val = (params.get(key) || "").toLowerCase().trim();
+          if (val === "" || val === "1" || val === "true" || HIDE_VALUES.has(val)) {
+            return true;
+          }
+        }
+      }
+    }
+    for (const flag of ["no_bt", "no_browsertrack", "hide_bt", "hide_browsertrack"]) {
+      if (params.has(flag)) {
+        const val = (params.get(flag) || "").toLowerCase().trim();
+        if (val === "" || val === "1" || val === "true" || val === "yes") {
+          return true;
+        }
+      }
+    }
+    if (params.has("bt")) {
+      const val = (params.get("bt") || "").toLowerCase().trim();
+      if (HIDE_VALUES.has(val)) return true;
+    }
+    if (params.has("browsertrack")) {
+      const val = (params.get("browsertrack") || "").toLowerCase().trim();
+      if (HIDE_VALUES.has(val)) return true;
+    }
+    if (params.has("bt_ui")) {
+      const val = (params.get("bt_ui") || "").toLowerCase().trim();
+      if (HIDE_VALUES.has(val) || val === "0" || val === "false") return true;
+    }
+    if (params.has("bt_hide")) {
+      const val = (params.get("bt_hide") || "").toLowerCase().trim();
+      if (val === "" || val === "1" || val === "true") return true;
+    }
+  } catch {
+  }
+  return false;
+}
 
 // packages/client/src/interceptors/console.ts
 function setupConsoleInterceptors(onConsole) {
@@ -1184,7 +1447,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);
@@ -1193,13 +1458,18 @@ var NoteInspector = class {
     __publicField(this, "dragStartY", 0);
     __publicField(this, "savedNotes", []);
     __publicField(this, "showMarkers", true);
+    __publicField(this, "isHidden", false);
     __publicField(this, "cleanups", []);
     this.transport = transport;
     this.screenshotDriver = screenshotDriver;
+    const hiddenByQuery = shouldHideUIFromUrl(options.hideQueryParam);
+    this.isHidden = options.hidden === true || hiddenByQuery;
+    this.showMarkers = options.showBadges !== false && !this.isHidden;
     this.options = {
       shortcut: "Alt+Click",
       maskSelectors: ['input[type="password"]', "[data-sensitive]"],
       showToolbar: true,
+      showBadges: true,
       ...options
     };
   }
@@ -1225,6 +1495,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();
@@ -1242,12 +1547,48 @@ var NoteInspector = class {
       this.hideHighlight();
     }
   }
+  isVisible() {
+    return !this.isHidden;
+  }
+  setVisible(visible) {
+    this.isHidden = !visible;
+    this.showMarkers = this.options.showBadges !== false && !this.isHidden;
+    if (this.container) {
+      this.container.style.display = this.isHidden ? "none" : "block";
+    }
+    if (this.toolbarElement) {
+      this.toolbarElement.style.display = this.isHidden ? "none" : "flex";
+    } else if (!this.isHidden && this.options.showToolbar !== false) {
+      this.createToolbar();
+    }
+    if (this.isHidden) {
+      this.hideHighlight();
+      this.hideRegionOverlay();
+      if (this.modalOverlay && this.shadowRoot) {
+        this.shadowRoot.removeChild(this.modalOverlay);
+        this.modalOverlay = null;
+      }
+      if (this.cardOverlay && this.shadowRoot) {
+        this.shadowRoot.removeChild(this.cardOverlay);
+        this.cardOverlay = null;
+      }
+      if (this.markersContainer) {
+        this.markersContainer.innerHTML = "";
+      }
+    } else {
+      this.renderMarkers();
+      this.updateToolbarCount();
+    }
+  }
   ensureContainer() {
     if (typeof document === "undefined") return null;
     if (!this.container) {
       this.container = document.createElement("div");
       this.container.id = "browsertrack-inspector-host";
       this.container.style.cssText = "all: initial; position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 2147483647; pointer-events: none;";
+      if (this.isHidden) {
+        this.container.style.display = "none";
+      }
       this.shadowRoot = this.container.attachShadow({ mode: "open" });
       const style = document.createElement("style");
       style.textContent = `
@@ -1404,6 +1745,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 +1761,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 +1861,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 +1921,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 +1944,7 @@ var NoteInspector = class {
           align-items: center;
           gap: 8px;
           color: #f8fafc;
+          flex-wrap: wrap;
         }
 
         .bt-mode-badge {
@@ -1609,6 +1974,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 +2031,59 @@ var NoteInspector = class {
           color: #cbd5e1;
         }
 
+        .bt-component-pill {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: rgba(15, 23, 42, 0.95);
+          border: 1px solid rgba(99, 102, 241, 0.35);
+          border-radius: 6px;
+          padding: 6px 10px;
+          font-size: 11.5px;
+          color: #c7d2fe;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .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 +2128,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 +2158,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 +2173,7 @@ var NoteInspector = class {
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          gap: 6px;
+          gap: 5px;
         }
 
         .bt-btn-cancel {
@@ -1769,6 +2195,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 +2233,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,7 +2283,10 @@ var NoteInspector = class {
       this.markersContainer = document.createElement("div");
       this.markersContainer.className = "bt-markers-layer";
       this.shadowRoot.appendChild(this.markersContainer);
-      if (this.options.showToolbar) {
+      this.toastContainer = document.createElement("div");
+      this.toastContainer.className = "bt-toast-container";
+      this.shadowRoot.appendChild(this.toastContainer);
+      if (this.options.showToolbar && !this.isHidden) {
         this.createToolbar();
       }
     }
@@ -1824,6 +2313,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 +2324,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 +2338,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 +2359,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;
@@ -1873,7 +2387,7 @@ var NoteInspector = class {
     const root = this.ensureContainer();
     if (!root || !this.markersContainer) return;
     this.markersContainer.innerHTML = "";
-    if (!this.showMarkers) return;
+    if (!this.showMarkers || this.isHidden) return;
     const currentPath = window.location.pathname;
     const activeNotes = this.savedNotes.filter(
       (n) => n.status === "OPEN" && (n.route === currentPath || !n.route || n.route === "/" || window.location.href.includes(n.route))
@@ -1884,6 +2398,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 +2410,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 +2432,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 +2452,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 +2485,46 @@ 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}
+
+        ${note.elementContext?.componentSource?.componentName ? `<div class="bt-component-pill" title="${note.elementContext.componentSource.sourceFile ? note.elementContext.componentSource.sourceFile + (note.elementContext.componentSource.sourceLine ? ":" + note.elementContext.componentSource.sourceLine : "") : note.elementContext.componentSource.componentName}">
+                <span>\u{1F9EC}</span>
+                <span style="font-weight: 600; color: #a5b4fc;">&lt;${note.elementContext.componentSource.componentName}&gt;</span>
+                ${note.elementContext.componentSource.sourceFile ? `<span style="color: #64748b; font-size: 11px; margin-left: 4px;">${note.elementContext.componentSource.sourceFile}${note.elementContext.componentSource.sourceLine ? ":" + note.elementContext.componentSource.sourceLine : ""}</span>` : ""}
+                ${note.elementContext.componentSource.framework ? `<span class="bt-mode-badge" style="background: rgba(99, 102, 241, 0.15); color: #818cf8; margin-left: auto; font-size: 10px;">${note.elementContext.componentSource.framework.toUpperCase()}</span>` : ""}
+              </div>` : ""}
+
         <div class="bt-target-pill" title="${contextText}">
           <span>\u{1F3F7}\uFE0F</span>
           <span class="bt-pill-content">${contextText}</span>
@@ -1991,9 +2538,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 +2559,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,23 +2574,49 @@ 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() {
     const onMouseMove = (e) => {
-      if (this.modalOverlay || this.cardOverlay || this.isDraggingRegion || this.activeMode === "region") return;
+      if (this.isHidden || this.modalOverlay || this.cardOverlay || this.isDraggingRegion || this.activeMode === "region") return;
       const path = e.composedPath ? e.composedPath() : [];
       if (this.container && path.includes(this.container)) {
         this.hideHighlight();
@@ -2054,7 +2635,7 @@ var NoteInspector = class {
       }
     };
     const onClick = (e) => {
-      if (this.modalOverlay || this.cardOverlay) return;
+      if (this.isHidden || this.modalOverlay || this.cardOverlay) return;
       const path = e.composedPath ? e.composedPath() : [];
       if (this.container && path.includes(this.container)) {
         return;
@@ -2067,7 +2648,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 +2660,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 +2768,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 +2796,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) {
@@ -2241,22 +2823,60 @@ var NoteInspector = class {
     if (noteType === "element") {
       this.updateHighlight(targetEl);
     }
+    const comp = noteType === "element" ? resolveComponentSource(targetEl) : void 0;
+    const compPrefix = comp?.componentName ? `\u{1F9EC} <${comp.componentName}>${comp.sourceFile ? " (" + comp.sourceFile + (comp.sourceLine ? ":" + comp.sourceLine : "") + ")" : ""} \xB7 ` : "";
     this.renderNoteModal({
-      title: "Add Visual Note",
-      modeBadge: 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);
+      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` : `${compPrefix}${getSemanticSelector(targetEl)} (${Math.round(targetEl.getBoundingClientRect().width)}\xD7${Math.round(targetEl.getBoundingClientRect().height)}) \xB7 Viewport: ${window.innerWidth}\xD7${window.innerHeight}`,
+      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 +2890,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 +2907,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 +2928,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 +2945,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 +2976,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 +3003,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 +3043,115 @@ 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);
     }
+    const componentSource = resolveComponentSource(el);
     return {
       selector,
-      tag,
+      tag: el.tagName.toLowerCase(),
       attributes,
       outerHTML,
-      innerText: truncate(el.textContent?.trim(), 200),
-      parent
+      innerText,
+      componentSource,
+      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;
+    }
   }
 };
 
@@ -2556,7 +3188,11 @@ var BrowserTrackClient = class {
     if (this.options.notes.enabled) {
       this.inspector = new NoteInspector(this.transport, this.screenshotDriver, {
         shortcut: this.options.notes.shortcut,
-        maskSelectors: this.options.notes.maskSelectors
+        maskSelectors: this.options.notes.maskSelectors,
+        showToolbar: this.options.notes.showToolbar,
+        showBadges: this.options.notes.showBadges,
+        hidden: this.options.hidden,
+        hideQueryParam: this.options.hideQueryParam
       });
     }
   }
@@ -2622,6 +3258,14 @@ var BrowserTrackClient = class {
       this.inspector.setMode("element");
     }
   }
+  isUIVisible() {
+    return this.inspector ? this.inspector.isVisible() : false;
+  }
+  setUIVisible(visible) {
+    if (this.inspector) {
+      this.inspector.setVisible(visible);
+    }
+  }
   setInspectMode(mode) {
     if (this.inspector) {
       this.inspector.setMode(mode);
@@ -2762,8 +3406,10 @@ if (typeof window !== "undefined") {
     const autoInit = currentScript?.getAttribute("data-auto-init") !== "false";
     const daemonUrl = currentScript?.getAttribute("data-daemon-url") || void 0;
     const projectId = currentScript?.getAttribute("data-project-id") || void 0;
+    const hidden = currentScript?.getAttribute("data-hidden") === "true";
+    const hideQueryParam = currentScript?.getAttribute("data-hide-query-param") || void 0;
     if (autoInit) {
-      init({ daemonUrl, projectId });
+      init({ daemonUrl, projectId, hidden, hideQueryParam });
     }
   } catch {
   }
@@ -2776,5 +3422,7 @@ if (typeof window !== "undefined") {
   DEFAULT_OPTIONS,
   NoteInspector,
   getClient,
-  init
+  init,
+  resolveComponentSource,
+  shouldHideUIFromUrl
 });