browsertrack 0.1.0 → 0.1.1

package/dist/client/index.cjs

@@ -58,6 +58,8 @@ var BreadcrumbBuffer = class {
 };
 
 // packages/core/src/redaction.ts
+var import_redact = require("@visulima/redact");
+var REDACTED_PLACEHOLDER = "[REDACTED]";
 var SENSITIVE_KEY_PATTERNS = [
   /^authorization$/i,
   /^cookie$/i,
@@ -87,7 +89,6 @@ var SENSITIVE_QUERY_PARAMS = [
   "code",
   "signature"
 ];
-var REDACTED_PLACEHOLDER = "[REDACTED]";
 function isSensitiveKey(key) {
   if (!key) return false;
   const cleaned = key.replace(/[-_]/g, "");
@@ -1020,6 +1021,7 @@ var WebSocketTransport = class {
     __publicField(this, "maxReconnectDelay", 1e4);
     __publicField(this, "reconnectTimer", null);
     __publicField(this, "commandHandler");
+    __publicField(this, "messageListeners", []);
     __publicField(this, "isDestroyed", false);
     this.wsUrl = options.url || "ws://127.0.0.1:7331";
     this.projectId = options.projectId;
@@ -1028,6 +1030,12 @@ var WebSocketTransport = class {
   setCommandHandler(handler) {
     this.commandHandler = handler;
   }
+  onMessage(listener) {
+    this.messageListeners.push(listener);
+    return () => {
+      this.messageListeners = this.messageListeners.filter((l) => l !== listener);
+    };
+  }
   getSessionId() {
     return this.sessionId;
   }
@@ -1051,6 +1059,12 @@ var WebSocketTransport = class {
           const raw = typeof event.data === "string" ? event.data : "";
           if (!raw) return;
           const msg = JSON.parse(raw);
+          for (const listener of this.messageListeners) {
+            try {
+              listener(msg);
+            } catch {
+            }
+          }
           if (msg.type === "hello_ack") {
             this.sessionId = msg.sessionId;
             if (this.debug) {
@@ -1165,8 +1179,11 @@ var NoteInspector = class {
     __publicField(this, "highlightOverlay", null);
     __publicField(this, "regionOverlay", null);
     __publicField(this, "regionBox", null);
+    __publicField(this, "regionBanner", null);
+    __publicField(this, "markersContainer", null);
     __publicField(this, "toolbarElement", null);
     __publicField(this, "modalOverlay", null);
+    __publicField(this, "cardOverlay", null);
     __publicField(this, "activeMode", "idle");
     __publicField(this, "hoveredElement", null);
     __publicField(this, "selectedElement", null);
@@ -1174,6 +1191,8 @@ var NoteInspector = class {
     __publicField(this, "isDraggingRegion", false);
     __publicField(this, "dragStartX", 0);
     __publicField(this, "dragStartY", 0);
+    __publicField(this, "savedNotes", []);
+    __publicField(this, "showMarkers", true);
     __publicField(this, "cleanups", []);
     this.transport = transport;
     this.screenshotDriver = screenshotDriver;
@@ -1193,8 +1212,19 @@ var NoteInspector = class {
     } else {
       this.ensureContainer();
     }
+    const unsubscribe = this.transport.onMessage((msg) => {
+      if (msg && msg.type === "notes_sync" && Array.isArray(msg.notes)) {
+        this.syncNotes(msg.notes);
+      }
+    });
+    this.cleanups.push(unsubscribe);
     this.setupListeners();
   }
+  syncNotes(notes) {
+    this.savedNotes = notes;
+    this.updateToolbarCount();
+    this.renderMarkers();
+  }
   setMode(mode) {
     this.activeMode = mode;
     this.updateToolbarState();
@@ -1222,16 +1252,17 @@ var NoteInspector = class {
       const style = document.createElement("style");
       style.textContent = `
         :host {
-          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
           color-scheme: dark;
           -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
         }
         
         /* 1. Element Highlight Overlay */
         .bt-highlight {
           position: fixed;
           border: 2px solid #3b82f6;
-          background: rgba(59, 130, 246, 0.15);
+          background: rgba(59, 130, 246, 0.16);
           border-radius: 4px;
           pointer-events: none;
           transition: all 0.05s ease-out;
@@ -1241,18 +1272,19 @@ var NoteInspector = class {
 
         .bt-badge {
           position: absolute;
-          top: -24px;
+          top: -26px;
           left: 0;
-          background: #1e293b;
+          background: #0f172a;
           color: #38bdf8;
           border: 1px solid #3b82f6;
           font-size: 11px;
           font-weight: 600;
-          padding: 2px 6px;
-          border-radius: 3px;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          padding: 2px 7px;
+          border-radius: 4px;
           white-space: nowrap;
           pointer-events: none;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
         }
 
         /* 2. Region Selection Overlay */
@@ -1264,7 +1296,8 @@ var NoteInspector = class {
           cursor: crosshair;
           z-index: 2147483642;
           pointer-events: auto;
-          background: rgba(15, 23, 42, 0.2);
+          background: rgba(15, 23, 42, 0.25);
+          user-select: none;
         }
 
         .bt-region-box {
@@ -1278,32 +1311,171 @@ var NoteInspector = class {
 
         .bt-region-badge {
           position: absolute;
-          top: -24px;
+          top: -26px;
           left: 0;
           background: #0f172a;
           color: #38bdf8;
           border: 1px solid #0284c7;
           font-size: 11px;
           font-weight: 600;
-          padding: 2px 6px;
-          border-radius: 3px;
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+          padding: 2px 7px;
+          border-radius: 4px;
           white-space: nowrap;
           pointer-events: none;
+          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
+        }
+
+        .bt-region-banner {
+          position: fixed;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: #0f172a;
+          color: #f8fafc;
+          border: 1px solid #0284c7;
+          border-radius: 30px;
+          padding: 8px 16px;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          box-shadow: 0 10px 25px -5px rgba(0,0,0,0.6);
+          font-size: 12.5px;
+          font-weight: 500;
+          pointer-events: auto;
+          z-index: 2147483645;
+          user-select: none;
+        }
+
+        .bt-region-cancel-btn {
+          background: rgba(239, 68, 68, 0.15);
+          color: #fca5a5;
+          border: 1px solid rgba(239, 68, 68, 0.4);
+          padding: 3px 10px;
+          border-radius: 20px;
+          font-size: 11px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          font-family: inherit;
+        }
+
+        .bt-region-cancel-btn:hover {
+          background: rgba(239, 68, 68, 0.3);
+          color: #ffffff;
+        }
+
+        /* 3. Note Markers on Page */
+        .bt-markers-layer {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 0;
+          height: 0;
+          pointer-events: none;
+          z-index: 2147483638;
+        }
+
+        .bt-note-marker {
+          position: fixed;
+          pointer-events: auto;
+          background: linear-gradient(135deg, #2563eb, #1d4ed8);
+          color: #ffffff;
+          border: 2px solid #ffffff;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,99,235,0.4);
+          border-radius: 999px;
+          height: 26px;
+          min-width: 26px;
+          padding: 0 7px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 4px;
+          cursor: pointer;
+          font-size: 11px;
+          font-weight: 700;
+          user-select: none;
+          transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
+          animation: bt-pop-in 0.2s ease-out;
+          box-sizing: border-box;
+          z-index: 2147483641;
+        }
+
+        @keyframes bt-pop-in {
+          0% { transform: scale(0.6); opacity: 0; }
+          100% { transform: scale(1); opacity: 1; }
+        }
+
+        .bt-note-marker:hover {
+          transform: scale(1.15) translateY(-2px);
+          box-shadow: 0 8px 20px rgba(37,99,235,0.6), 0 0 0 2px #60a5fa;
+        }
+
+        .bt-marker-resolved {
+          background: linear-gradient(135deg, #475569, #334155);
+          border-color: #94a3b8;
+          opacity: 0.75;
+        }
+
+        .bt-region-marker-box {
+          position: fixed;
+          border: 2px dashed #0284c7;
+          background: rgba(14, 165, 233, 0.08);
+          pointer-events: none;
+          box-sizing: border-box;
+          border-radius: 6px;
+          z-index: 2147483639;
+        }
+
+        .bt-page-notes-dock {
+          position: fixed;
+          top: 16px;
+          right: 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          pointer-events: none;
+          z-index: 2147483641;
         }
 
-        /* 3. Floating Quick Toolbar */
+        .bt-page-note-pill {
+          background: #0f172a;
+          color: #c084fc;
+          border: 1px solid #7e22ce;
+          border-radius: 20px;
+          padding: 5px 12px;
+          font-size: 11.5px;
+          font-weight: 600;
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+          cursor: pointer;
+          pointer-events: auto;
+          transition: all 0.15s ease;
+        }
+
+        .bt-page-note-pill:hover {
+          background: #1e1b4b;
+          transform: translateY(-1px);
+        }
+
+        /* 4. Floating Quick Toolbar */
         .bt-toolbar {
           position: fixed;
           bottom: 20px;
           right: 20px;
-          background: #1e293b;
+          background: #0f172a;
           border: 1px solid #334155;
           border-radius: 30px;
           padding: 4px 6px;
           display: flex;
           align-items: center;
           gap: 4px;
-          box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.5);
+          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;
           z-index: 2147483646;
           user-select: none;
@@ -1316,17 +1488,18 @@ var NoteInspector = class {
           color: #94a3b8;
           font-size: 12px;
           font-weight: 500;
-          padding: 6px 10px;
+          padding: 6px 12px;
           border-radius: 20px;
           cursor: pointer;
           display: flex;
           align-items: center;
-          gap: 5px;
+          gap: 6px;
           transition: all 0.15s ease;
+          font-family: inherit;
         }
 
         .bt-toolbar-btn:hover {
-          background: #334155;
+          background: #1e293b;
           color: #f8fafc;
         }
 
@@ -1334,15 +1507,27 @@ var NoteInspector = class {
           background: #2563eb;
           color: #ffffff;
           font-weight: 600;
+          box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
+        }
+
+        .bt-count-pill {
+          background: rgba(255, 255, 255, 0.2);
+          color: #ffffff;
+          font-size: 10px;
+          font-weight: 700;
+          padding: 1px 6px;
+          border-radius: 10px;
+          line-height: 1.2;
         }
 
         .bt-toolbar-divider {
           width: 1px;
           height: 16px;
           background: #334155;
+          margin: 0 2px;
         }
 
-        /* 4. Modal Backdrop & Editor */
+        /* 5. Modals & Popover Card */
         .bt-modal-backdrop {
           position: fixed;
           top: 0;
@@ -1350,7 +1535,7 @@ var NoteInspector = class {
           width: 100vw;
           height: 100vh;
           background: rgba(15, 23, 42, 0.75);
-          backdrop-filter: blur(4px);
+          backdrop-filter: blur(6px);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -1358,20 +1543,26 @@ var NoteInspector = class {
           z-index: 2147483647;
           opacity: 1;
           box-sizing: border-box;
+          animation: bt-fade-in 0.15s ease-out;
+        }
+
+        @keyframes bt-fade-in {
+          from { opacity: 0; transform: scale(0.98); }
+          to { opacity: 1; transform: scale(1); }
         }
 
         .bt-modal {
-          background: #1e293b;
+          background: #0f172a;
           color: #f8fafc;
           border: 1px solid #334155;
-          border-radius: 12px;
-          padding: 18px;
-          width: 420px;
-          max-width: 90vw;
-          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
+          border-radius: 14px;
+          padding: 20px;
+          width: 450px;
+          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;
           flex-direction: column;
-          gap: 12px;
+          gap: 14px;
           box-sizing: border-box;
         }
 
@@ -1382,87 +1573,181 @@ var NoteInspector = class {
         }
 
         .bt-modal-title {
-          font-size: 14px;
+          font-size: 14.5px;
           font-weight: 600;
+          letter-spacing: -0.01em;
           display: flex;
           align-items: center;
-          gap: 6px;
+          gap: 8px;
           color: #f8fafc;
         }
 
         .bt-mode-badge {
           font-size: 10px;
           font-weight: 700;
+          letter-spacing: 0.05em;
           text-transform: uppercase;
-          background: rgba(59, 130, 246, 0.2);
+          padding: 2px 7px;
+          border-radius: 6px;
+        }
+
+        .bt-badge-element {
+          background: rgba(59, 130, 246, 0.15);
           color: #60a5fa;
-          border: 1px solid #3b82f6;
-          padding: 2px 6px;
-          border-radius: 4px;
+          border: 1px solid rgba(59, 130, 246, 0.4);
+        }
+
+        .bt-badge-region {
+          background: rgba(14, 165, 233, 0.15);
+          color: #38bdf8;
+          border: 1px solid rgba(14, 165, 233, 0.4);
+        }
+
+        .bt-badge-page {
+          background: rgba(168, 85, 247, 0.15);
+          color: #c084fc;
+          border: 1px solid rgba(168, 85, 247, 0.4);
+        }
+
+        .bt-badge-status-open {
+          background: rgba(16, 185, 129, 0.15);
+          color: #34d399;
+          border: 1px solid rgba(16, 185, 129, 0.4);
+        }
+
+        .bt-badge-status-resolved {
+          background: rgba(100, 116, 139, 0.2);
+          color: #94a3b8;
+          border: 1px solid rgba(100, 116, 139, 0.4);
         }
 
         .bt-close-btn {
           background: transparent;
           border: none;
           color: #94a3b8;
-          font-size: 16px;
+          font-size: 15px;
           cursor: pointer;
-          padding: 2px 6px;
-          border-radius: 4px;
+          padding: 3px 7px;
+          border-radius: 6px;
+          transition: all 0.12s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
         .bt-close-btn:hover {
-          background: #334155;
+          background: #1e293b;
           color: #ffffff;
         }
 
         .bt-target-pill {
-          background: #0f172a;
+          background: #090d16;
           color: #94a3b8;
-          border: 1px solid #334155;
-          border-radius: 6px;
-          padding: 6px 10px;
+          border: 1px solid #1e293b;
+          border-radius: 8px;
+          padding: 8px 12px;
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-          font-size: 11px;
+          font-size: 11.5px;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          overflow: hidden;
+        }
+
+        .bt-pill-content {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          color: #cbd5e1;
+        }
+
+        .bt-note-message-box {
+          background: #090d16;
+          border: 1px solid #1e293b;
+          border-radius: 8px;
+          padding: 12px 14px;
+          font-size: 13.5px;
+          line-height: 1.5;
+          color: #f1f5f9;
+          white-space: pre-wrap;
+          word-break: break-word;
+          max-height: 180px;
+          overflow-y: auto;
         }
 
         .bt-textarea {
-          background: #0f172a;
+          background: #090d16;
           color: #f8fafc;
           border: 1px solid #334155;
-          border-radius: 6px;
-          padding: 10px;
-          font-size: 13px;
+          border-radius: 8px;
+          padding: 12px;
+          font-size: 13.5px;
+          line-height: 1.5;
           resize: vertical;
-          min-height: 85px;
+          min-height: 95px;
           outline: none;
           box-sizing: border-box;
           width: 100%;
           font-family: inherit;
+          transition: border-color 0.15s ease, box-shadow 0.15s ease;
+        }
+
+        .bt-textarea::placeholder {
+          color: #64748b;
         }
 
         .bt-textarea:focus {
           border-color: #3b82f6;
-          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+        }
+
+        .bt-modal-footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 12px;
+          margin-top: 2px;
+        }
+
+        .bt-kbd-hint {
+          font-size: 11px;
+          color: #64748b;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          user-select: none;
+        }
+
+        .bt-kbd-hint kbd {
+          background: #1e293b;
+          color: #94a3b8;
+          border: 1px solid #334155;
+          border-radius: 4px;
+          padding: 1px 5px;
+          font-family: inherit;
+          font-size: 10px;
+          font-weight: 600;
         }
 
         .bt-modal-actions {
           display: flex;
           justify-content: flex-end;
+          align-items: center;
           gap: 8px;
         }
 
         .bt-btn {
-          padding: 8px 14px;
-          border-radius: 6px;
-          font-size: 12px;
+          padding: 8px 16px;
+          border-radius: 7px;
+          font-size: 12.5px;
           font-weight: 600;
           cursor: pointer;
           border: 1px solid transparent;
-          transition: all 0.1s ease;
+          transition: all 0.15s ease;
           font-family: inherit;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
         }
 
         .bt-btn-cancel {
@@ -1470,20 +1755,38 @@ var NoteInspector = class {
           color: #94a3b8;
         }
         .bt-btn-cancel:hover {
-          background: #334155;
+          background: #1e293b;
           color: #f8fafc;
         }
 
         .bt-btn-save {
           background: #2563eb;
           color: #ffffff;
+          box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
         }
         .bt-btn-save:hover {
           background: #1d4ed8;
+          box-shadow: 0 4px 10px rgba(37, 99, 235, 0.45);
+        }
+
+        .bt-btn-resolve {
+          background: rgba(16, 185, 129, 0.15);
+          color: #6ee7b7;
+          border: 1px solid rgba(16, 185, 129, 0.35);
+        }
+        .bt-btn-resolve:hover {
+          background: rgba(16, 185, 129, 0.3);
+          color: #ffffff;
+        }
+
+        .bt-btn-delete {
+          background: rgba(239, 68, 68, 0.15);
+          color: #fca5a5;
+          border: 1px solid rgba(239, 68, 68, 0.35);
         }
-        .bt-btn-save:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
+        .bt-btn-delete:hover {
+          background: rgba(239, 68, 68, 0.3);
+          color: #ffffff;
         }
       `;
       this.shadowRoot.appendChild(style);
@@ -1491,6 +1794,9 @@ var NoteInspector = class {
       this.highlightOverlay.className = "bt-highlight";
       this.highlightOverlay.style.display = "none";
       this.shadowRoot.appendChild(this.highlightOverlay);
+      this.markersContainer = document.createElement("div");
+      this.markersContainer.className = "bt-markers-layer";
+      this.shadowRoot.appendChild(this.markersContainer);
       if (this.options.showToolbar) {
         this.createToolbar();
       }
@@ -1517,19 +1823,33 @@ var NoteInspector = class {
       <button class="bt-toolbar-btn" id="bt-mode-page" title="Leave full-page note">
         <span>\u{1F4C4}</span> Page
       </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>
     `;
     const btnElement = this.toolbarElement.querySelector("#bt-mode-element");
     const btnRegion = this.toolbarElement.querySelector("#bt-mode-region");
     const btnPage = this.toolbarElement.querySelector("#bt-mode-page");
-    btnElement.onclick = () => {
+    const btnToggleNotes = this.toolbarElement.querySelector("#bt-toggle-notes");
+    btnElement.onclick = (e) => {
+      e.stopPropagation();
       this.setMode(this.activeMode === "element" ? "idle" : "element");
     };
-    btnRegion.onclick = () => {
+    btnRegion.onclick = (e) => {
+      e.stopPropagation();
       this.setMode(this.activeMode === "region" ? "idle" : "region");
     };
-    btnPage.onclick = () => {
+    btnPage.onclick = (e) => {
+      e.stopPropagation();
       this.setMode("page");
     };
+    btnToggleNotes.onclick = (e) => {
+      e.stopPropagation();
+      this.showMarkers = !this.showMarkers;
+      btnToggleNotes.classList.toggle("active", this.showMarkers);
+      this.renderMarkers();
+    };
     this.shadowRoot.appendChild(this.toolbarElement);
   }
   updateToolbarState() {
@@ -1541,9 +1861,186 @@ var NoteInspector = class {
     btnRegion?.classList.toggle("active", this.activeMode === "region");
     btnPage?.classList.toggle("active", this.activeMode === "page");
   }
+  updateToolbarCount() {
+    if (!this.toolbarElement) return;
+    const countEl = this.toolbarElement.querySelector("#bt-notes-count");
+    if (countEl) {
+      const openCount = this.savedNotes.filter((n) => n.status === "OPEN").length;
+      countEl.textContent = String(openCount);
+    }
+  }
+  renderMarkers() {
+    const root = this.ensureContainer();
+    if (!root || !this.markersContainer) return;
+    this.markersContainer.innerHTML = "";
+    if (!this.showMarkers) 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))
+    );
+    const pageNotes = [];
+    activeNotes.forEach((note, index) => {
+      if (note.type === "page") {
+        pageNotes.push(note);
+        return;
+      }
+      if (note.type === "region" && note.region) {
+        const regBox = document.createElement("div");
+        regBox.className = "bt-region-marker-box";
+        regBox.style.left = `${note.region.x}px`;
+        regBox.style.top = `${note.region.y}px`;
+        regBox.style.width = `${note.region.width}px`;
+        regBox.style.height = `${note.region.height}px`;
+        this.markersContainer.appendChild(regBox);
+        const pin = document.createElement("div");
+        pin.className = "bt-note-marker";
+        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.onclick = (e) => {
+          e.stopPropagation();
+          this.openNoteCard(note);
+        };
+        this.markersContainer.appendChild(pin);
+        return;
+      }
+      let targetEl = null;
+      if (note.target?.selector) {
+        try {
+          targetEl = document.querySelector(note.target.selector);
+        } catch {
+        }
+      }
+      const rect = targetEl ? targetEl.getBoundingClientRect() : note.target?.boundingRect;
+      if (rect) {
+        const pin = document.createElement("div");
+        pin.className = "bt-note-marker";
+        pin.setAttribute("data-note-id", note.id);
+        pin.title = 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.onclick = (e) => {
+          e.stopPropagation();
+          this.openNoteCard(note);
+        };
+        if (targetEl) {
+          pin.onmouseenter = () => this.updateHighlight(targetEl);
+          pin.onmouseleave = () => this.hideHighlight();
+        }
+        this.markersContainer.appendChild(pin);
+      }
+    });
+    if (pageNotes.length > 0) {
+      const pageDock = document.createElement("div");
+      pageDock.className = "bt-page-notes-dock";
+      pageNotes.forEach((pNote, idx) => {
+        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>`;
+        pill.onclick = (e) => {
+          e.stopPropagation();
+          this.openNoteCard(pNote);
+        };
+        pageDock.appendChild(pill);
+      });
+      this.markersContainer.appendChild(pageDock);
+    }
+  }
+  updateMarkerPositions() {
+    if (!this.showMarkers || !this.markersContainer) return;
+    this.renderMarkers();
+  }
+  openNoteCard(note) {
+    const root = this.ensureContainer();
+    if (!root) return;
+    if (this.cardOverlay && this.cardOverlay.parentElement) {
+      this.cardOverlay.parentElement.removeChild(this.cardOverlay);
+      this.cardOverlay = null;
+    }
+    const backdrop = document.createElement("div");
+    backdrop.className = "bt-modal-backdrop";
+    this.cardOverlay = backdrop;
+    const badgeClass = `bt-badge-${note.type.toLowerCase()}`;
+    const statusClass = note.status === "OPEN" ? "bt-badge-status-open" : "bt-badge-status-resolved";
+    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();
+    backdrop.innerHTML = `
+      <div class="bt-modal">
+        <div class="bt-modal-header">
+          <div class="bt-modal-title">
+            <span>${icon} Visual Note Details</span>
+            <span class="bt-mode-badge ${badgeClass}">${note.type.toUpperCase()}</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>
+
+        <div class="bt-target-pill" title="${contextText}">
+          <span>\u{1F3F7}\uFE0F</span>
+          <span class="bt-pill-content">${contextText}</span>
+        </div>
+
+        <div class="bt-note-message-box">${note.message}</div>
+
+        <div style="font-size: 11px; color: #64748b; display: flex; justify-content: space-between; padding: 0 2px;">
+          <span>Created: ${formattedDate}</span>
+          <span>ID: <code style="font-family: monospace; color: #94a3b8;">${note.id}</code></span>
+        </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 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">
+              ${note.status === "OPEN" ? "<span>\u2705</span> Resolve Note" : "<span>\u21BA</span> Reopen"}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    const btnClose = backdrop.querySelector("#btn-card-close");
+    const btnDismiss = backdrop.querySelector("#btn-card-dismiss");
+    const btnResolve = backdrop.querySelector("#btn-card-resolve");
+    const btnDelete = backdrop.querySelector("#btn-card-delete");
+    const closeCard = () => {
+      if (this.cardOverlay) {
+        root.removeChild(this.cardOverlay);
+        this.cardOverlay = null;
+        this.hideHighlight();
+      }
+    };
+    btnClose.onclick = closeCard;
+    btnDismiss.onclick = closeCard;
+    backdrop.onclick = (e) => {
+      if (e.target === backdrop) closeCard();
+    };
+    btnResolve.onclick = () => {
+      if (note.status === "OPEN") {
+        this.transport.send({ type: "resolve_note", noteId: note.id });
+      } else {
+        this.transport.send({ type: "reopen_note", noteId: note.id });
+      }
+      closeCard();
+    };
+    btnDelete.onclick = () => {
+      this.transport.send({ type: "delete_note", noteId: note.id });
+      closeCard();
+    };
+    root.appendChild(backdrop);
+  }
   setupListeners() {
     const onMouseMove = (e) => {
-      if (this.modalOverlay || this.isDraggingRegion || this.activeMode === "region") return;
+      if (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();
+        return;
+      }
       if (e.altKey || this.activeMode === "element") {
         const target = document.elementFromPoint(e.clientX, e.clientY);
         if (target && target !== this.container && !this.container?.contains(target)) {
@@ -1557,7 +2054,12 @@ var NoteInspector = class {
       }
     };
     const onClick = (e) => {
-      if (this.modalOverlay || this.activeMode === "region") return;
+      if (this.modalOverlay || this.cardOverlay) return;
+      const path = e.composedPath ? e.composedPath() : [];
+      if (this.container && path.includes(this.container)) {
+        return;
+      }
+      if (this.activeMode === "region") return;
       if (e.altKey || this.activeMode === "element") {
         e.preventDefault();
         e.stopPropagation();
@@ -1571,18 +2073,39 @@ var NoteInspector = class {
         }
       }
     };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        if (this.cardOverlay && this.cardOverlay.parentElement && this.shadowRoot) {
+          this.shadowRoot.removeChild(this.cardOverlay);
+          this.cardOverlay = null;
+        } else if (this.activeMode === "region" || this.activeMode === "element") {
+          this.setMode("idle");
+        }
+      }
+    };
     const onKeyUp = (e) => {
-      if (e.key === "Alt" && !this.modalOverlay && this.activeMode !== "element") {
+      if (e.key === "Alt" && !this.modalOverlay && !this.cardOverlay && this.activeMode !== "element") {
         this.hideHighlight();
       }
     };
+    const onScrollOrResize = () => {
+      requestAnimationFrame(() => {
+        this.updateMarkerPositions();
+      });
+    };
     window.addEventListener("mousemove", onMouseMove, { capture: true, passive: true });
     window.addEventListener("click", onClick, { capture: true });
+    window.addEventListener("keydown", onKeyDown, { capture: true });
     window.addEventListener("keyup", onKeyUp, { capture: true });
+    window.addEventListener("scroll", onScrollOrResize, { capture: true, passive: true });
+    window.addEventListener("resize", onScrollOrResize, { passive: true });
     this.cleanups.push(() => {
       window.removeEventListener("mousemove", onMouseMove, { capture: true });
       window.removeEventListener("click", onClick, { capture: true });
+      window.removeEventListener("keydown", onKeyDown, { capture: true });
       window.removeEventListener("keyup", onKeyUp, { capture: true });
+      window.removeEventListener("scroll", onScrollOrResize, { capture: true });
+      window.removeEventListener("resize", onScrollOrResize);
     });
   }
   showRegionOverlay() {
@@ -1595,7 +2118,26 @@ var NoteInspector = class {
       this.regionBox.className = "bt-region-box";
       this.regionBox.style.display = "none";
       this.regionOverlay.appendChild(this.regionBox);
+      this.regionBanner = document.createElement("div");
+      this.regionBanner.className = "bt-region-banner";
+      this.regionBanner.innerHTML = `
+        <span>\u{1F4D0} Drag rectangle on screen to select region</span>
+        <button class="bt-region-cancel-btn" id="bt-region-cancel">\u2715 Cancel (Esc)</button>
+      `;
+      const btnCancel = this.regionBanner.querySelector("#bt-region-cancel");
+      btnCancel.onclick = (e) => {
+        e.stopPropagation();
+        this.setMode("idle");
+      };
+      this.regionOverlay.appendChild(this.regionBanner);
+      this.regionOverlay.oncontextmenu = (e) => {
+        e.preventDefault();
+        this.setMode("idle");
+      };
       this.regionOverlay.onmousedown = (e) => {
+        const path = e.composedPath ? e.composedPath() : [];
+        if (this.regionBanner && path.includes(this.regionBanner)) return;
+        if (this.toolbarElement && path.includes(this.toolbarElement)) return;
         this.isDraggingRegion = true;
         this.dragStartX = e.clientX;
         this.dragStartY = e.clientY;
@@ -1636,7 +2178,7 @@ var NoteInspector = class {
         const top = Math.min(this.dragStartY, currentY);
         const width = Math.abs(currentX - this.dragStartX);
         const height = Math.abs(currentY - this.dragStartY);
-        if (width > 20 && height > 20) {
+        if (width > 15 && height > 15) {
           this.selectedRegion = {
             x: Math.round(left),
             y: Math.round(top),
@@ -1652,11 +2194,16 @@ var NoteInspector = class {
         }
       };
     }
-    root.appendChild(this.regionOverlay);
+    if (this.toolbarElement && this.toolbarElement.parentNode === root) {
+      root.insertBefore(this.regionOverlay, this.toolbarElement);
+    } else {
+      root.appendChild(this.regionOverlay);
+    }
   }
   hideRegionOverlay() {
-    if (this.regionOverlay && this.regionOverlay.parentElement) {
-      this.regionOverlay.parentElement.removeChild(this.regionOverlay);
+    this.isDraggingRegion = false;
+    if (this.regionOverlay && this.regionOverlay.parentNode) {
+      this.regionOverlay.parentNode.removeChild(this.regionOverlay);
     }
     if (this.regionBox) {
       this.regionBox.style.display = "none";
@@ -1695,7 +2242,7 @@ var NoteInspector = class {
       this.updateHighlight(targetEl);
     }
     this.renderNoteModal({
-      title: "\u{1F4DD} Add Visual Note",
+      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) => {
@@ -1705,7 +2252,7 @@ var NoteInspector = class {
   }
   openRegionNoteEditor(region) {
     this.renderNoteModal({
-      title: "\u{1F4DD} Add Region Note",
+      title: "Add Region Note",
       modeBadge: "REGION",
       pillText: `Selected Area: x:${region.x}, y:${region.y} (${region.width} \xD7 ${region.height} px)`,
       onSave: async (message) => {
@@ -1723,22 +2270,31 @@ 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 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>${options.title}</span>
-            <span class="bt-mode-badge">${options.modeBadge}</span>
+            <span>\u{1F4DD} ${options.title}</span>
+            <span class="bt-mode-badge ${badgeClass}">${options.modeBadge}</span>
           </div>
-          <button class="bt-close-btn" id="btn-close" title="Close">\u2715</button>
+          <button class="bt-close-btn" id="btn-close" title="Close (Esc)">\u2715</button>
         </div>
         <div class="bt-target-pill" title="${options.pillText}">
-          \u{1F3AF} ${options.pillText}
+          <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>
-        <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>
+        <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>
+          </div>
         </div>
       </div>
     `;
@@ -1958,6 +2514,12 @@ var NoteInspector = class {
     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;
   }
 };