web-remarq 0.5.0 → 0.7.0

package/dist/index.js

@@ -65,79 +65,151 @@ function destroyViewportListener() {
 }
 
 // src/core/storage.ts
-var STORAGE_KEY = "remarq:annotations";
+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() {
-    this.annotations = [];
-    this.extraFields = {};
-    this.isMemoryOnly = false;
-    this.load();
+  constructor(adapter) {
+    this.adapter = adapter;
+    this.cache = [];
+    this.ready = this.init();
+  }
+  get isMemoryOnly() {
+    var _a3;
+    return (_a3 = this.adapter.isMemoryOnly) != null ? _a3 : false;
   }
   getAll() {
-    return [...this.annotations];
+    return [...this.cache];
   }
   getByRoute(route) {
-    return this.annotations.filter((a) => a.route === route);
+    return this.cache.filter((a) => a.route === route);
   }
-  add(annotation) {
-    this.annotations.push(annotation);
-    this.save();
+  getById(id) {
+    return this.cache.find((a) => a.id === id);
   }
-  remove(id) {
-    this.annotations = this.annotations.filter((a) => a.id !== id);
-    this.save();
+  async add(annotation) {
+    this.cache.push(annotation);
+    await this.adapter.save(annotation);
   }
-  update(id, changes) {
-    const idx = this.annotations.findIndex((a) => a.id === id);
-    if (idx !== -1) {
-      this.annotations[idx] = __spreadValues(__spreadValues({}, this.annotations[idx]), changes);
-      this.save();
-    }
+  async remove(id) {
+    this.cache = this.cache.filter((a) => a.id !== id);
+    await this.adapter.remove(id);
   }
-  clearAll() {
-    this.annotations = [];
-    this.save();
+  async update(id, changes) {
+    const idx = this.cache.findIndex((a) => a.id === id);
+    if (idx === -1) return;
+    const updated = __spreadValues(__spreadValues({}, this.cache[idx]), changes);
+    this.cache[idx] = updated;
+    await this.adapter.save(updated);
+  }
+  async clearAll() {
+    this.cache = [];
+    await this.adapter.clear();
   }
   exportJSON() {
     return {
       version: 1,
-      annotations: [...this.annotations]
+      annotations: [...this.cache]
     };
   }
-  importJSON(data) {
-    this.annotations = [...data.annotations];
+  async importJSON(data) {
+    this.cache = data.annotations.map(migrateAnnotation);
     this.migrateViewportBuckets();
-    this.save();
+    await this.adapter.clear();
+    for (const ann of this.cache) {
+      await this.adapter.save(ann);
+    }
+  }
+  async init() {
+    const data = await this.adapter.load();
+    if (data) {
+      this.cache = data.annotations.map(migrateAnnotation);
+      this.migrateViewportBuckets();
+    }
   }
   migrateViewportBuckets() {
-    for (const ann of this.annotations) {
+    for (const ann of this.cache) {
       if (ann.viewportBucket == null && ann.viewport) {
         const width = parseInt(ann.viewport.split("x")[0], 10);
         ann.viewportBucket = toBucket(width);
       }
     }
   }
-  load() {
+};
+
+// src/core/local-storage-adapter.ts
+var STORAGE_KEY = "remarq:annotations";
+var LocalStorageAdapter = class {
+  constructor() {
+    this.isMemoryOnly = false;
+    this.extraFields = {};
+    this.memoryStore = null;
+  }
+  async load() {
+    if (this.isMemoryOnly) return this.memoryStore;
     try {
       const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw) {
-        const parsed = JSON.parse(raw);
-        const _a3 = parsed, { version, annotations } = _a3, rest = __objRest(_a3, ["version", "annotations"]);
-        this.annotations = annotations != null ? annotations : [];
-        this.extraFields = rest;
-        this.migrateViewportBuckets();
-      }
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      const _a3 = parsed, { version, annotations } = _a3, rest = __objRest(_a3, ["version", "annotations"]);
+      this.extraFields = rest;
+      const store = {
+        version: 1,
+        annotations: Array.isArray(annotations) ? annotations : []
+      };
+      this.memoryStore = store;
+      return store;
     } catch (e) {
       this.isMemoryOnly = true;
+      return this.memoryStore;
+    }
+  }
+  async save(annotation) {
+    const store = await this.ensureStore();
+    const idx = store.annotations.findIndex((a) => a.id === annotation.id);
+    if (idx === -1) {
+      store.annotations.push(annotation);
+    } else {
+      store.annotations[idx] = annotation;
     }
+    this.persist(store);
+  }
+  async remove(id) {
+    const store = await this.ensureStore();
+    store.annotations = store.annotations.filter((a) => a.id !== id);
+    this.persist(store);
+  }
+  async clear() {
+    const store = await this.ensureStore();
+    store.annotations = [];
+    this.persist(store);
   }
-  save() {
+  async ensureStore() {
+    if (this.memoryStore) return this.memoryStore;
+    const loaded = await this.load();
+    if (loaded) return loaded;
+    this.memoryStore = { version: 1, annotations: [] };
+    return this.memoryStore;
+  }
+  persist(store) {
     if (this.isMemoryOnly) return;
     try {
       const data = __spreadProps(__spreadValues({
         version: 1
       }, this.extraFields), {
-        annotations: this.annotations
+        annotations: store.annotations
       });
       localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
     } catch (e) {
@@ -533,7 +605,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,
@@ -543,6 +624,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 = `
@@ -557,6 +699,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"] {
@@ -570,6 +717,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 {
@@ -613,19 +765,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 {
@@ -675,8 +837,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;
@@ -721,14 +886,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);
@@ -743,6 +924,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;
@@ -1001,6 +1195,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;
@@ -1108,8 +1347,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());
@@ -1156,6 +1406,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;
   }
@@ -1639,6 +1893,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 {
@@ -1647,6 +1942,7 @@ var Popup = class {
     this.popupEl = null;
     this.keyHandler = null;
     this.outsideClickHandler = null;
+    this.pendingEditFlush = null;
   }
   show(info, position, onSubmit, onCancel) {
     this.hide();
@@ -1731,7 +2027,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 = () => {
@@ -1743,38 +2039,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);
@@ -1801,7 +2069,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;
@@ -1836,12 +2200,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";
@@ -1849,26 +2209,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);
     });
   }
@@ -1896,6 +2263,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;
@@ -1908,7 +2285,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);
@@ -1934,7 +2311,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() {
@@ -1953,7 +2340,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";
   }
@@ -2300,8 +2687,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;
@@ -2334,6 +2731,7 @@ function handleInspectClick(e) {
         classFilter: options.classFilter,
         dataAttribute: options.dataAttribute
       });
+      const now = Date.now();
       const ann = {
         id: generateId(),
         comment,
@@ -2341,8 +2739,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);
@@ -2434,7 +2833,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,
@@ -2442,9 +2842,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);
@@ -2458,12 +2857,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(() => {
@@ -2598,6 +2999,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;
@@ -2617,18 +3028,18 @@ function setupMutationObserver() {
 }
 var WebRemarq = {
   init(opts) {
-    var _a3;
+    var _a3, _b;
     if (initialized) return;
     options = opts != null ? opts : {};
     try {
       injectStyles();
-      storage = new AnnotationStorage();
+      storage = new AnnotationStorage((_a3 = options.storage) != null ? _a3 : new LocalStorageAdapter());
       themeManager = new ThemeManager(document.body, options.theme);
       overlay = new Overlay(themeManager.container);
       spacingOverlay = new SpacingOverlay(themeManager.container);
       popup = new Popup(themeManager.container);
       markers = new MarkerManager(themeManager.container, handleMarkerClick);
-      const position = (_a3 = options.position) != null ? _a3 : "bottom-right";
+      const position = (_b = options.position) != null ? _b : "bottom-right";
       detachedPanel = new DetachedPanel(themeManager.container, (id) => {
         elementCache.delete(id);
         storage.remove(id);
@@ -2659,11 +3070,9 @@ var WebRemarq = {
           showToast(themeManager.container, "All annotations cleared");
         },
         onThemeToggle: () => themeManager.toggle(),
-        onHelp: () => showShortcutsModal(themeManager.container)
+        onHelp: () => showShortcutsModal(themeManager.container),
+        onVerificationBadgeClick: jumpToFirstUnverified
       }, position);
-      if (storage.isMemoryOnly) {
-        toolbar.setMemoryWarning(true);
-      }
       routeObserver = new RouteObserver();
       unsubRoute = routeObserver.onChange(() => refreshMarkers());
       document.addEventListener("click", handleInspectClick, true);
@@ -2671,8 +3080,13 @@ var WebRemarq = {
       document.addEventListener("keydown", handleInspectKeydown);
       setupMutationObserver();
       initViewportListener(() => refreshMarkers());
+      storage.ready.then(() => {
+        if (storage.isMemoryOnly) {
+          toolbar.setMemoryWarning(true);
+        }
+        refreshMarkers();
+      });
       console.debug(`[web-remarq] Initialized on route: ${currentRoute()}`);
-      refreshMarkers();
       initialized = true;
     } catch (err) {
       console.error("[web-remarq] Init failed:", err);
@@ -2751,9 +3165,32 @@ 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");
   }
 };
 export {
+  LocalStorageAdapter,
   WebRemarq
 };
 //# sourceMappingURL=index.js.map