web-remarq 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -89,6 +89,21 @@ function destroyViewportListener() {
 }
 
 // src/core/storage.ts
+function migrateAnnotation(legacy) {
+  const rawStatus = legacy.status;
+  const status = rawStatus === "resolved" ? "verified" : rawStatus;
+  if (Array.isArray(legacy.lifecycle) && legacy.lifecycle.length > 0) {
+    return __spreadProps(__spreadValues({}, legacy), { status, lifecycle: legacy.lifecycle });
+  }
+  const createdTs = typeof legacy.timestamp === "number" ? legacy.timestamp : Date.now();
+  const lifecycle = [
+    { type: "created", actor: "designer", timestamp: createdTs }
+  ];
+  if (rawStatus === "resolved") {
+    lifecycle.push({ type: "migrated", actor: null, timestamp: Date.now() });
+  }
+  return __spreadProps(__spreadValues({}, legacy), { status, lifecycle });
+}
 var AnnotationStorage = class {
   constructor(adapter) {
     this.adapter = adapter;
@@ -105,6 +120,9 @@ var AnnotationStorage = class {
   getByRoute(route) {
     return this.cache.filter((a) => a.route === route);
   }
+  getById(id) {
+    return this.cache.find((a) => a.id === id);
+  }
   async add(annotation) {
     this.cache.push(annotation);
     await this.adapter.save(annotation);
@@ -131,7 +149,7 @@ var AnnotationStorage = class {
     };
   }
   async importJSON(data) {
-    this.cache = [...data.annotations];
+    this.cache = data.annotations.map(migrateAnnotation);
     this.migrateViewportBuckets();
     await this.adapter.clear();
     for (const ann of this.cache) {
@@ -141,7 +159,7 @@ var AnnotationStorage = class {
   async init() {
     const data = await this.adapter.load();
     if (data) {
-      this.cache = data.annotations;
+      this.cache = data.annotations.map(migrateAnnotation);
       this.migrateViewportBuckets();
     }
   }
@@ -611,7 +629,16 @@ function generateAgentExport(annotations, viewportBucket) {
     status: ann.status,
     timestamp: ann.timestamp,
     source: resolveSource(ann.fingerprint),
-    searchHints: buildSearchHints(ann.fingerprint)
+    searchHints: buildSearchHints(ann.fingerprint),
+    lifecycle: ann.lifecycle.map((ev) => {
+      const out = {
+        type: ev.type,
+        actor: ev.actor,
+        timestamp: ev.timestamp
+      };
+      if (ev.reason !== void 0) out.reason = ev.reason;
+      return out;
+    })
   }));
   return {
     version: 1,
@@ -621,6 +648,67 @@ function generateAgentExport(annotations, viewportBucket) {
   };
 }
 
+// src/core/lifecycle.ts
+var InvalidTransitionError = class extends Error {
+  constructor(from, action) {
+    super(`Cannot ${action} from status "${from}"`);
+    this.name = "InvalidTransitionError";
+  }
+};
+var ACTION_TO_EVENT = {
+  acknowledge: "acknowledged",
+  claimFix: "fix_claimed",
+  verify: "verified",
+  reject: "rejected",
+  dismiss: "dismissed",
+  reopen: "reopened"
+};
+var DEFAULT_ACTOR_BY_EVENT = {
+  created: "designer",
+  acknowledged: "developer",
+  fix_claimed: "agent",
+  verified: "developer",
+  rejected: "developer",
+  dismissed: "developer",
+  reopened: "developer",
+  migrated: null
+};
+function createEvent(type, opts = {}) {
+  var _a3, _b;
+  const event = {
+    type,
+    actor: (_a3 = opts.actor) != null ? _a3 : DEFAULT_ACTOR_BY_EVENT[type],
+    timestamp: (_b = opts.timestamp) != null ? _b : Date.now()
+  };
+  if (opts.actorName !== void 0) event.actorName = opts.actorName;
+  if (opts.reason !== void 0) event.reason = opts.reason;
+  return event;
+}
+function nextStatus(from, action) {
+  switch (action) {
+    case "acknowledge":
+      return from === "pending" ? "in_progress" : null;
+    case "claimFix":
+      return from === "pending" || from === "in_progress" ? "fixed_unverified" : null;
+    case "verify":
+      return from === "fixed_unverified" || from === "in_progress" ? "verified" : null;
+    case "reject":
+      return from === "fixed_unverified" ? "pending" : null;
+    case "dismiss":
+      return from === "pending" || from === "in_progress" || from === "fixed_unverified" ? "dismissed" : null;
+    case "reopen":
+      return from === "dismissed" || from === "verified" ? "pending" : null;
+  }
+}
+function transition(annotation, action, opts = {}) {
+  const next = nextStatus(annotation.status, action);
+  if (next === null) {
+    throw new InvalidTransitionError(annotation.status, action);
+  }
+  const event = createEvent(ACTION_TO_EVENT[action], opts);
+  return { status: next, event };
+}
+
 // src/ui/styles.ts
 var STYLES_ID = "data-remarq-styles";
 var CSS = `
@@ -635,6 +723,11 @@ var CSS = `
   --remarq-resolved: #22c55e;
   --remarq-overlay: rgba(59, 130, 246, 0.15);
   --remarq-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  --remarq-status-pending: #f97316;
+  --remarq-status-in-progress: #eab308;
+  --remarq-status-fixed-unverified: #3b82f6;
+  --remarq-status-verified: #22c55e;
+  --remarq-status-dismissed: #6b7280;
 }
 
 [data-remarq-theme="dark"] {
@@ -648,6 +741,11 @@ var CSS = `
   --remarq-resolved: #4ade80;
   --remarq-overlay: rgba(96, 165, 250, 0.15);
   --remarq-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  --remarq-status-pending: #fb923c;
+  --remarq-status-in-progress: #facc15;
+  --remarq-status-fixed-unverified: #60a5fa;
+  --remarq-status-verified: #4ade80;
+  --remarq-status-dismissed: #9ca3af;
 }
 
 .remarq-toolbar {
@@ -691,19 +789,29 @@ var CSS = `
 
 .remarq-badge {
   position: absolute;
-  top: -4px;
-  right: -4px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border-radius: 50%;
   background: var(--remarq-pending);
   color: #ffffff;
   font-size: 10px;
   font-weight: 600;
+  line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+}
+
+.remarq-toolbar-badge--verification {
+  top: auto;
+  bottom: -6px;
+  right: -6px;
+  background: var(--remarq-status-fixed-unverified);
+  cursor: pointer;
 }
 
 .remarq-overlay {
@@ -753,8 +861,11 @@ var CSS = `
 }
 
 .remarq-marker:hover { transform: scale(1.2); }
-.remarq-marker[data-status="pending"] { background: var(--remarq-pending); }
-.remarq-marker[data-status="resolved"] { background: var(--remarq-resolved); opacity: 0.7; }
+.remarq-marker--pending { background: var(--remarq-status-pending); }
+.remarq-marker--in-progress { background: var(--remarq-status-in-progress); }
+.remarq-marker--fixed-unverified { background: var(--remarq-status-fixed-unverified); }
+.remarq-marker--verified { background: var(--remarq-status-verified); opacity: 0.7; }
+.remarq-marker--dismissed { background: var(--remarq-status-dismissed); opacity: 0.5; }
 
 .remarq-popup {
   position: absolute;
@@ -799,14 +910,30 @@ var CSS = `
 
 .remarq-popup-actions {
   display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+  flex-direction: column;
+  gap: 6px;
   padding: 8px 12px;
   border-top: 1px solid var(--remarq-border);
 }
 
+.remarq-popup-actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.remarq-popup-actions-row--transitions {
+  justify-content: flex-start;
+}
+
+.remarq-popup-actions-row--utility {
+  justify-content: flex-end;
+  padding-top: 6px;
+  border-top: 1px dashed var(--remarq-border);
+}
+
 .remarq-popup-actions button {
-  padding: 4px 12px;
+  padding: 5px 12px;
   border: 1px solid var(--remarq-border);
   border-radius: 4px;
   background: var(--remarq-bg);
@@ -821,6 +948,19 @@ var CSS = `
   color: #ffffff;
 }
 
+.remarq-popup-utility-btn {
+  font-size: 11px !important;
+  padding: 3px 10px !important;
+  color: var(--remarq-text-secondary) !important;
+  background: transparent !important;
+  border-color: transparent !important;
+}
+
+.remarq-popup-utility-btn:hover {
+  background: var(--remarq-bg-secondary) !important;
+  color: var(--remarq-text) !important;
+}
+
 .remarq-detached-panel {
   position: fixed;
   z-index: 2147483646;
@@ -1079,6 +1219,51 @@ var CSS = `
   color: var(--remarq-text-secondary);
   margin-top: 4px;
 }
+
+.remarq-popup-history {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--remarq-text-secondary);
+}
+
+.remarq-popup-history summary {
+  cursor: pointer;
+  padding: 4px 0;
+  user-select: none;
+}
+
+.remarq-popup-history-list {
+  list-style: none;
+  margin: 4px 0 0 0;
+  padding: 0;
+}
+
+.remarq-popup-history-list li {
+  padding: 2px 0;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.remarq-popup-reason {
+  width: 100%;
+  min-height: 50px;
+  margin-bottom: 8px;
+  padding: 6px;
+  border: 1px solid var(--remarq-border);
+  border-radius: 4px;
+  background: var(--remarq-bg-secondary);
+  color: var(--remarq-text);
+  font-family: inherit;
+  font-size: 12px;
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.remarq-popup-reason-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
 `;
 function injectStyles() {
   if (document.querySelector(`style[${STYLES_ID}]`)) return;
@@ -1186,8 +1371,19 @@ var Toolbar = class {
     this.inspectBtn = this.createButton("inspect", ICONS.inspect, () => callbacks.onInspect());
     this.badgeEl = document.createElement("span");
     this.badgeEl.className = "remarq-badge";
+    this.badgeEl.title = "Needs attention";
     this.badgeEl.style.display = "none";
     this.inspectBtn.appendChild(this.badgeEl);
+    this.verificationBadgeEl = document.createElement("span");
+    this.verificationBadgeEl.className = "remarq-badge remarq-toolbar-badge--verification";
+    this.verificationBadgeEl.title = "Pending your verification";
+    this.verificationBadgeEl.style.display = "none";
+    this.verificationBadgeEl.addEventListener("click", (e) => {
+      var _a3;
+      e.stopPropagation();
+      (_a3 = callbacks.onVerificationBadgeClick) == null ? void 0 : _a3.call(callbacks);
+    });
+    this.inspectBtn.appendChild(this.verificationBadgeEl);
     this.spacingBtn = this.createButton("spacing", ICONS.spacing, () => callbacks.onSpacingToggle());
     this.spacingBtn.disabled = true;
     const copyBtn = this.createButton("copy", ICONS.copy, () => callbacks.onCopy());
@@ -1234,6 +1430,10 @@ var Toolbar = class {
     this.badgeEl.textContent = String(count);
     this.badgeEl.style.display = count > 0 ? "flex" : "none";
   }
+  setVerificationBadgeCount(count) {
+    this.verificationBadgeEl.textContent = String(count);
+    this.verificationBadgeEl.style.display = count > 0 ? "flex" : "none";
+  }
   getFileInput() {
     return this.fileInput;
   }
@@ -1717,6 +1917,47 @@ var SpacingOverlay = class {
 };
 
 // src/ui/popup.ts
+var STATUS_LABEL = {
+  pending: "Pending",
+  in_progress: "In progress",
+  fixed_unverified: "Fix claimed",
+  verified: "Verified",
+  dismissed: "Dismissed"
+};
+var EVENT_LABEL = {
+  created: "Created",
+  acknowledged: "In progress",
+  fix_claimed: "Fix claimed",
+  verified: "Verified",
+  rejected: "Rejected",
+  dismissed: "Dismissed",
+  reopened: "Reopened",
+  migrated: "Migrated"
+};
+function actionsForStatus(status) {
+  switch (status) {
+    case "pending":
+      return [
+        { label: "Acknowledge", action: "acknowledge", primary: true },
+        { label: "Dismiss", action: "dismiss", needsReason: true }
+      ];
+    case "in_progress":
+      return [
+        { label: "Mark verified", action: "verify", primary: true },
+        { label: "Dismiss", action: "dismiss", needsReason: true }
+      ];
+    case "fixed_unverified":
+      return [
+        { label: "Verify", action: "verify", primary: true },
+        { label: "Reject", action: "reject", needsReason: true },
+        { label: "Dismiss", action: "dismiss", needsReason: true }
+      ];
+    case "verified":
+      return [{ label: "Reopen", action: "reopen" }];
+    case "dismissed":
+      return [{ label: "Reopen", action: "reopen" }];
+  }
+}
 var POPUP_WIDTH = 300;
 var POPUP_MARGIN = 8;
 var Popup = class {
@@ -1725,6 +1966,7 @@ var Popup = class {
     this.popupEl = null;
     this.keyHandler = null;
     this.outsideClickHandler = null;
+    this.pendingEditFlush = null;
   }
   show(info, position, onSubmit, onCancel) {
     this.hide();
@@ -1809,7 +2051,7 @@ var Popup = class {
     popup2.className = "remarq-popup";
     const header = document.createElement("div");
     header.className = "remarq-popup-header";
-    header.textContent = `<${info.tag}>${info.text ? ` "${info.text}"` : ""} [${info.status}]`;
+    header.textContent = `<${info.tag}>${info.text ? ` "${info.text}"` : ""} [${STATUS_LABEL[info.status]}]`;
     const body = document.createElement("div");
     body.className = "remarq-popup-body";
     const makeCommentEl = () => {
@@ -1821,38 +2063,10 @@ var Popup = class {
       return el;
     };
     body.appendChild(makeCommentEl());
+    body.appendChild(this.buildLifecycleViewer(info.lifecycle));
     const actions = document.createElement("div");
     actions.className = "remarq-popup-actions";
-    if (info.status === "pending") {
-      const resolveBtn = document.createElement("button");
-      resolveBtn.className = "remarq-primary";
-      resolveBtn.textContent = "Resolve";
-      resolveBtn.addEventListener("click", () => {
-        this.hide();
-        callbacks.onResolve();
-      });
-      actions.appendChild(resolveBtn);
-    }
-    const copyBtn = document.createElement("button");
-    copyBtn.textContent = "Copy";
-    copyBtn.addEventListener("click", () => {
-      callbacks.onCopy();
-    });
-    actions.appendChild(copyBtn);
-    const deleteBtn = document.createElement("button");
-    deleteBtn.textContent = "Delete";
-    deleteBtn.addEventListener("click", () => {
-      this.hide();
-      callbacks.onDelete();
-    });
-    actions.appendChild(deleteBtn);
-    const closeBtn = document.createElement("button");
-    closeBtn.textContent = "Close";
-    closeBtn.addEventListener("click", () => {
-      this.hide();
-      callbacks.onClose();
-    });
-    actions.appendChild(closeBtn);
+    this.renderActionButtons(actions, info, callbacks);
     popup2.appendChild(header);
     popup2.appendChild(body);
     popup2.appendChild(actions);
@@ -1879,7 +2093,103 @@ var Popup = class {
       document.addEventListener("mousedown", this.outsideClickHandler);
     }, 0);
   }
+  buildLifecycleViewer(lifecycle) {
+    var _a3, _b;
+    const details = document.createElement("details");
+    details.className = "remarq-popup-history";
+    const summary = document.createElement("summary");
+    summary.textContent = `History (${lifecycle.length})`;
+    details.appendChild(summary);
+    const list = document.createElement("ul");
+    list.className = "remarq-popup-history-list";
+    for (const ev of lifecycle) {
+      const li = document.createElement("li");
+      const when = new Date(ev.timestamp).toLocaleString();
+      const who = (_a3 = ev.actor) != null ? _a3 : "system";
+      const what = (_b = EVENT_LABEL[ev.type]) != null ? _b : ev.type;
+      let text = `${when} \xB7 ${who} \xB7 ${what}`;
+      if (ev.reason) text += ` \u2014 ${ev.reason}`;
+      li.textContent = text;
+      list.appendChild(li);
+    }
+    details.appendChild(list);
+    return details;
+  }
+  renderActionButtons(container, info, callbacks) {
+    container.replaceChildren();
+    const transitions = document.createElement("div");
+    transitions.className = "remarq-popup-actions-row remarq-popup-actions-row--transitions";
+    for (const def of actionsForStatus(info.status)) {
+      const btn = document.createElement("button");
+      btn.textContent = def.label;
+      if (def.primary) btn.className = "remarq-primary";
+      btn.addEventListener("click", () => {
+        if (def.needsReason) {
+          this.showReasonInput(container, info, callbacks, def);
+        } else {
+          this.hide();
+          callbacks.onTransition(def.action);
+        }
+      });
+      transitions.appendChild(btn);
+    }
+    container.appendChild(transitions);
+    const utility = document.createElement("div");
+    utility.className = "remarq-popup-actions-row remarq-popup-actions-row--utility";
+    const copyBtn = document.createElement("button");
+    copyBtn.className = "remarq-popup-utility-btn";
+    copyBtn.textContent = "Copy";
+    copyBtn.addEventListener("click", () => callbacks.onCopy());
+    utility.appendChild(copyBtn);
+    const deleteBtn = document.createElement("button");
+    deleteBtn.className = "remarq-popup-utility-btn";
+    deleteBtn.textContent = "Delete";
+    deleteBtn.addEventListener("click", () => {
+      this.hide();
+      callbacks.onDelete();
+    });
+    utility.appendChild(deleteBtn);
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "remarq-popup-utility-btn";
+    closeBtn.textContent = "Close";
+    closeBtn.addEventListener("click", () => {
+      this.hide();
+      callbacks.onClose();
+    });
+    utility.appendChild(closeBtn);
+    container.appendChild(utility);
+  }
+  showReasonInput(container, info, callbacks, def) {
+    container.replaceChildren();
+    const textarea = document.createElement("textarea");
+    textarea.placeholder = `Reason for ${def.label.toLowerCase()} (optional)\u2026`;
+    textarea.className = "remarq-popup-reason";
+    container.appendChild(textarea);
+    const row = document.createElement("div");
+    row.className = "remarq-popup-reason-row";
+    const cancel = document.createElement("button");
+    cancel.textContent = "Cancel";
+    cancel.addEventListener("click", () => {
+      this.renderActionButtons(container, info, callbacks);
+    });
+    const submit = document.createElement("button");
+    submit.className = "remarq-primary";
+    submit.textContent = "Submit";
+    submit.addEventListener("click", () => {
+      const reason = textarea.value.trim() || void 0;
+      this.hide();
+      callbacks.onTransition(def.action, reason);
+    });
+    row.appendChild(cancel);
+    row.appendChild(submit);
+    container.appendChild(row);
+    textarea.focus();
+  }
   hide() {
+    if (this.pendingEditFlush) {
+      this.pendingEditFlush();
+      this.pendingEditFlush = null;
+    }
     if (this.popupEl) {
       this.popupEl.remove();
       this.popupEl = null;
@@ -1914,12 +2224,8 @@ var Popup = class {
     commentEl.replaceWith(textarea);
     textarea.focus();
     textarea.selectionStart = textarea.value.length;
-    const saveEdit = () => {
-      const newComment = textarea.value.trim();
-      if (newComment && newComment !== info.comment) {
-        info.comment = newComment;
-        callbacks.onEdit(newComment);
-      }
+    const restoreView = () => {
+      if (!textarea.isConnected) return;
       const restored = document.createElement("div");
       restored.textContent = info.comment;
       restored.style.cursor = "pointer";
@@ -1927,26 +2233,33 @@ var Popup = class {
       restored.addEventListener("click", () => this.enterEditMode(restored, info, callbacks));
       textarea.replaceWith(restored);
     };
+    const commitEdit = () => {
+      this.pendingEditFlush = null;
+      const newComment = textarea.value.trim();
+      if (newComment && newComment !== info.comment) {
+        info.comment = newComment;
+        callbacks.onEdit(newComment);
+      }
+      restoreView();
+    };
+    const cancelEdit = () => {
+      this.pendingEditFlush = null;
+      restoreView();
+    };
+    this.pendingEditFlush = commitEdit;
     textarea.addEventListener("keydown", (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
-        saveEdit();
+        commitEdit();
       }
       if (e.key === "Escape") {
         e.stopPropagation();
-        const restored = document.createElement("div");
-        restored.textContent = info.comment;
-        restored.style.cursor = "pointer";
-        restored.title = "Click to edit";
-        restored.addEventListener("click", () => this.enterEditMode(restored, info, callbacks));
-        textarea.replaceWith(restored);
+        cancelEdit();
       }
     });
     textarea.addEventListener("blur", () => {
       setTimeout(() => {
-        if (textarea.isConnected) {
-          saveEdit();
-        }
+        if (textarea.isConnected) commitEdit();
       }, 50);
     });
   }
@@ -1974,6 +2287,16 @@ var Popup = class {
 };
 
 // src/ui/markers.ts
+var STATUS_COLOR = {
+  pending: "var(--remarq-status-pending)",
+  in_progress: "var(--remarq-status-in-progress)",
+  fixed_unverified: "var(--remarq-status-fixed-unverified)",
+  verified: "var(--remarq-status-verified)",
+  dismissed: "var(--remarq-status-dismissed)"
+};
+function statusClass(status) {
+  return `remarq-marker--${status.replace("_", "-")}`;
+}
 var MarkerManager = class {
   constructor(container, onClick) {
     this.container = container;
@@ -1986,7 +2309,7 @@ var MarkerManager = class {
   addMarker(annotation, target) {
     this.counter++;
     const markerEl = document.createElement("div");
-    markerEl.className = "remarq-marker";
+    markerEl.className = `remarq-marker ${statusClass(annotation.status)}`;
     markerEl.setAttribute("data-status", annotation.status);
     markerEl.setAttribute("data-annotation-id", annotation.id);
     markerEl.textContent = String(this.counter);
@@ -2012,7 +2335,17 @@ var MarkerManager = class {
     const entry = this.markers.get(id);
     if (entry) {
       entry.annotation.status = status;
+      entry.markerEl.className = `remarq-marker ${statusClass(status)}`;
       entry.markerEl.setAttribute("data-status", status);
+      this.applyOutline(entry.target, status);
+    }
+  }
+  scrollToMarker(id) {
+    const entry = this.markers.get(id);
+    if (!entry) return;
+    try {
+      entry.target.scrollIntoView({ behavior: "smooth", block: "center" });
+    } catch (e) {
     }
   }
   clear() {
@@ -2031,7 +2364,7 @@ var MarkerManager = class {
     this.clear();
   }
   applyOutline(target, status) {
-    const color = status === "pending" ? "#f97316" : "rgba(34, 197, 94, 0.5)";
+    const color = STATUS_COLOR[status];
     target.style.outline = `2px solid ${color}`;
     target.style.outlineOffset = "2px";
   }
@@ -2378,8 +2711,18 @@ function refreshMarkers() {
     markers.addMarker(ann, el);
   }
   detachedPanel.update(otherBreakpoint, detached);
-  const pendingCount = anns.filter((a) => a.status === "pending").length;
-  toolbar.setBadgeCount(pendingCount);
+  const needsAttention = anns.filter(
+    (a) => a.status === "pending" || a.status === "in_progress"
+  ).length;
+  const needsVerification = anns.filter((a) => a.status === "fixed_unverified").length;
+  toolbar.setBadgeCount(needsAttention);
+  toolbar.setVerificationBadgeCount(needsVerification);
+}
+function jumpToFirstUnverified() {
+  if (!storage || !markers) return;
+  const ann = storage.getByRoute(currentRoute()).find((a) => a.status === "fixed_unverified");
+  if (!ann) return;
+  markers.scrollToMarker(ann.id);
 }
 function scheduleRefresh() {
   if (refreshScheduled) return;
@@ -2412,6 +2755,7 @@ function handleInspectClick(e) {
         classFilter: options.classFilter,
         dataAttribute: options.dataAttribute
       });
+      const now = Date.now();
       const ann = {
         id: generateId(),
         comment,
@@ -2419,8 +2763,9 @@ function handleInspectClick(e) {
         route: currentRoute(),
         viewport: `${window.innerWidth}x${window.innerHeight}`,
         viewportBucket: toBucket(window.innerWidth),
-        timestamp: Date.now(),
-        status: "pending"
+        timestamp: now,
+        status: "pending",
+        lifecycle: [{ type: "created", actor: "designer", timestamp: now }]
       };
       cacheElement(ann.id, target);
       storage.add(ann);
@@ -2512,7 +2857,8 @@ function handleMarkerClick(annotationId) {
       tag: ann.fingerprint.tagName,
       text: (_a3 = ann.fingerprint.textContent) != null ? _a3 : "",
       comment: ann.comment,
-      status: ann.status
+      status: ann.status,
+      lifecycle: ann.lifecycle
     },
     {
       top: window.scrollY + rect.bottom + 8,
@@ -2520,9 +2866,8 @@ function handleMarkerClick(annotationId) {
       anchorBottom: window.scrollY + rect.top - 8
     },
     {
-      onResolve: () => {
-        storage.update(ann.id, { status: "resolved" });
-        refreshMarkers();
+      onTransition: (action, reason) => {
+        applyTransition(ann.id, action, reason ? { reason } : void 0);
       },
       onDelete: () => {
         elementCache.delete(ann.id);
@@ -2536,12 +2881,14 @@ function handleMarkerClick(annotationId) {
         refreshMarkers();
       },
       onCopy: () => {
-        const fp = ann.fingerprint;
+        var _a4;
+        const fresh = (_a4 = storage.getById(ann.id)) != null ? _a4 : ann;
+        const fp = fresh.fingerprint;
         const lines = [
-          `[${ann.status}] "${ann.comment}"`,
+          `[${fresh.status}] "${fresh.comment}"`,
           `Element: <${fp.tagName}>${fp.textContent ? ` "${fp.textContent}"` : ""}`,
-          `Route: ${ann.route}`,
-          `Viewport: ${ann.viewportBucket}px`
+          `Route: ${fresh.route}`,
+          `Viewport: ${fresh.viewportBucket}px`
         ];
         if (fp.sourceLocation) lines.push(`Source: ${fp.sourceLocation}`);
         navigator.clipboard.writeText(lines.join("\n")).then(() => {
@@ -2676,6 +3023,16 @@ function copyAgentToClipboard() {
     console.warn("[web-remarq] Clipboard write failed");
   });
 }
+function applyTransition(id, action, opts = {}) {
+  if (!storage) return;
+  const ann = storage.getById(id);
+  if (!ann) return;
+  const { status, event } = transition(ann, action, opts);
+  const lifecycle = [...ann.lifecycle, event];
+  storage.update(id, { status, lifecycle });
+  markers == null ? void 0 : markers.updateStatus(id, status);
+  refreshMarkers();
+}
 function setupMutationObserver() {
   mutationObserver = new MutationObserver((mutations) => {
     let hasExternalMutation = false;
@@ -2737,7 +3094,8 @@ var WebRemarq = {
           showToast(themeManager.container, "All annotations cleared");
         },
         onThemeToggle: () => themeManager.toggle(),
-        onHelp: () => showShortcutsModal(themeManager.container)
+        onHelp: () => showShortcutsModal(themeManager.container),
+        onVerificationBadgeClick: jumpToFirstUnverified
       }, position);
       routeObserver = new RouteObserver();
       unsubRoute = routeObserver.onChange(() => refreshMarkers());
@@ -2831,6 +3189,28 @@ var WebRemarq = {
     elementCache.clear();
     storage == null ? void 0 : storage.clearAll();
     if (initialized) refreshMarkers();
+  },
+  acknowledge(id, opts) {
+    applyTransition(id, "acknowledge", opts);
+  },
+  claimFix(id, opts) {
+    applyTransition(id, "claimFix", opts);
+  },
+  verify(id, opts) {
+    applyTransition(id, "verify", opts);
+  },
+  reject(id, opts) {
+    applyTransition(id, "reject", opts);
+  },
+  dismiss(id, opts) {
+    applyTransition(id, "dismiss", opts);
+  },
+  reopen(id, opts) {
+    applyTransition(id, "reopen", opts);
+  },
+  /** @deprecated Use verify() instead. */
+  markResolved(id) {
+    applyTransition(id, "verify");
   }
 };
 // Annotate the CommonJS export names for ESM import in node: