@loupekit/sdk 0.10.23-next.69 → 0.10.24-next.70

package/dist/index.js

@@ -760,6 +760,43 @@ var STYLES = (
 .voice:disabled { opacity: .45; cursor: not-allowed; }
 .voice.on { border-color: var(--pin); color: var(--pin); background: var(--bg-3); }
 
+/* reactions */
+.rxns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; position: relative; }
+.rxn {
+  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px;
+  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
+  color: var(--ink); font-size: 11px; cursor: pointer; line-height: 1.7;
+}
+.rxn:hover { border-color: var(--accent); }
+.rxn.mine { border-color: var(--accent); background: var(--accent-soft); }
+.rxn-n { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
+.rxn.mine .rxn-n { color: var(--accent); }
+.rxn-add {
+  width: 20px; height: 20px; padding: 0; border: 1px dashed var(--line); border-radius: 50%;
+  background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; line-height: 1;
+}
+.rxn-add:hover { border-color: var(--accent); color: var(--accent); }
+.rxn-pick {
+  display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px;
+  background: var(--bg); box-shadow: 0 4px 14px rgb(0 0 0 / 18%); z-index: 3;
+}
+.rxn-opt {
+  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
+  background: transparent; font-size: 14px; cursor: pointer; line-height: 1;
+}
+.rxn-opt:hover { background: var(--accent-soft); }
+
+/* who else is here */
+.peers { display: flex; align-items: center; gap: -2px; margin-right: 8px; }
+.peer-av {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 20px; height: 20px; margin-left: -5px; border-radius: 50%;
+  border: 2px solid var(--bg); background: var(--accent); color: #fff;
+  font-size: 9px; font-weight: 700; letter-spacing: .02em;
+}
+.peer-av:first-child { margin-left: 0; }
+.peer-more { margin-left: 3px; font-size: 10px; color: var(--muted); }
+
 /* in-app mentions */
 .hnotif { margin-top: 10px; }
 .nf-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 11.5px; color: var(--ink); }
@@ -2893,41 +2930,498 @@ function cropRegion(dataUrl, rect, ox, oy, scale, redact) {
   });
 }
 
-// src/store.ts
-var LocalStorageAdapter = class {
-  key(projectKey, url) {
-    return `loupe:${projectKey}:${url}`;
+// ../shared/dist/activity.js
+var ACTIVITY_STATUS_LABELS = {
+  idle: "Idle",
+  working: "Working",
+  error: "Error"
+};
+function formatDuration(ms) {
+  if (!ms || ms < 0)
+    return "\u2014";
+  const s = Math.round(ms / 1e3);
+  if (s < 60)
+    return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rest = s % 60;
+  if (m < 60)
+    return rest ? `${m}m ${rest}s` : `${m}m`;
+  const h = Math.floor(m / 60);
+  return `${h}h ${m % 60}m`;
+}
+function summarizeActivity(events, status = "idle", now = Date.now()) {
+  const files = /* @__PURE__ */ new Set();
+  const kinds = /* @__PURE__ */ new Map();
+  let errors = 0;
+  let first = Infinity;
+  for (const e of events) {
+    for (const f of e.files ?? [])
+      files.add(f);
+    kinds.set(e.kind, (kinds.get(e.kind) ?? 0) + 1);
+    if (e.level === "error")
+      errors++;
+    const t = Date.parse(e.at);
+    if (!Number.isNaN(t))
+      first = Math.min(first, t);
   }
-  readAll(projectKey, url) {
-    try {
-      const raw = localStorage.getItem(this.key(projectKey, url));
-      return raw ? JSON.parse(raw) : [];
-    } catch {
-      return [];
+  return {
+    status,
+    events: events.length,
+    errors,
+    files: files.size,
+    durationMs: events.length && first !== Infinity ? Math.max(0, now - first) : 0,
+    byKind: [...kinds.entries()].map(([kind, count]) => ({ kind, count })).sort((a, b) => b.count - a.count || a.kind.localeCompare(b.kind))
+  };
+}
+
+// ../shared/dist/lifecycle.js
+var LIFECYCLE_LABELS = {
+  sent: "Sent to agent",
+  in_pr: "In PR",
+  preview: "Review preview",
+  reviewed: "Reviewed"
+};
+function lifecycle(c) {
+  const hasProposal = !!c.proposal;
+  const pr = c.pr ?? void 0;
+  const withPr = (stage) => {
+    const out = { stage, label: LIFECYCLE_LABELS[stage] };
+    if (pr) {
+      out.pr = pr;
+      if (typeof pr.checksTotal === "number" && pr.checksTotal > 0) {
+        const passed = Math.max(0, Math.min(pr.checksTotal, pr.checksPassed ?? 0));
+        out.checks = {
+          text: `${passed}/${pr.checksTotal}`,
+          ratio: passed / pr.checksTotal
+        };
+      }
     }
+    return out;
+  };
+  if (c.status === "resolved")
+    return hasProposal || pr ? withPr("reviewed") : null;
+  if (pr)
+    return withPr("in_pr");
+  if (c.status === "in_review")
+    return { stage: "preview", label: LIFECYCLE_LABELS.preview };
+  if (hasProposal)
+    return { stage: "sent", label: LIFECYCLE_LABELS.sent };
+  return null;
+}
+function awaitingReview(comments) {
+  return comments.filter((c) => c.status === "in_review");
+}
+
+// ../shared/dist/iteration.js
+function emptyIterations() {
+  return { items: [], index: -1 };
+}
+function current(state) {
+  return state.index >= 0 ? state.items[state.index] ?? null : null;
+}
+function addIteration(state, iteration) {
+  const head = state.items.slice(0, state.index + 1);
+  const items = [...head, iteration].slice(-MAX_ITERATIONS);
+  return { items, index: items.length - 1 };
+}
+var MAX_ITERATIONS = 20;
+function canUndo(state) {
+  return state.items.length > 0;
+}
+function undo(state) {
+  if (!state.items.length)
+    return state;
+  const items = state.items.slice(0, -1);
+  return { items, index: items.length - 1 };
+}
+function canMove(state, delta) {
+  const next = state.index + delta;
+  return next >= 0 && next < state.items.length;
+}
+function move(state, delta) {
+  return canMove(state, delta) ? { ...state, index: state.index + delta } : state;
+}
+function stackLabel(state) {
+  return state.items.length ? `${state.index + 1} / ${state.items.length}` : "";
+}
+
+// ../shared/dist/consent.js
+function emptyConsent() {
+  return { state: "idle", request: null, history: [] };
+}
+function isNavigableUrl(raw) {
+  try {
+    const u = new URL(raw);
+    return u.protocol === "http:" || u.protocol === "https:";
+  } catch {
+    return false;
   }
-  writeAll(projectKey, url, comments) {
-    localStorage.setItem(this.key(projectKey, url), JSON.stringify(comments));
+}
+function requestNavigation(record, request) {
+  if (!isNavigableUrl(request.url))
+    return record;
+  return {
+    state: "requested",
+    request: {
+      id: request.id ?? `nav${Date.now().toString(36)}`,
+      at: request.at ?? (/* @__PURE__ */ new Date()).toISOString(),
+      url: request.url,
+      reason: request.reason,
+      requester: request.requester
+    },
+    history: record.history
+  };
+}
+function isPending(record) {
+  return record.state === "requested" && record.request !== null;
+}
+function decide(record, granted, now = (/* @__PURE__ */ new Date()).toISOString()) {
+  if (!isPending(record))
+    return { record, navigateTo: null };
+  const url = record.request.url;
+  return {
+    record: {
+      state: granted ? "granted" : "denied",
+      request: null,
+      history: [...record.history, { url, decision: granted ? "granted" : "denied", at: now }]
+    },
+    navigateTo: granted ? url : null
+  };
+}
+function withdraw(record) {
+  return isPending(record) ? { ...record, state: "idle", request: null } : record;
+}
+
+// ../shared/dist/thread.js
+function firstMessageFromComment(comment) {
+  return {
+    id: `${comment.id}:0`,
+    threadId: comment.id,
+    author: { ...comment.author, type: "user" },
+    body: comment.body,
+    attachments: comment.attachments?.length ? comment.attachments : void 0,
+    createdAt: comment.createdAt
+  };
+}
+function threadConversation(comment, replies) {
+  return [firstMessageFromComment(comment), ...replies].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+}
+function iterationLabel(link) {
+  if (!link.parentThreadId || link.iterationType !== "revision")
+    return null;
+  return `Iteration ${link.iterationNumber ?? 2}`;
+}
+
+// ../shared/dist/timeline.js
+function describeTarget(input) {
+  const parts = [];
+  if (input.anchor?.tag)
+    parts.push(`a <${input.anchor.tag}>`);
+  if (input.anchor?.selector)
+    parts.push(`\`${input.anchor.selector}\``);
+  return parts.length ? parts.join(" ") : input.kind === "free" ? "a page note" : "an element";
+}
+function threadTimeline(input, messages = []) {
+  const out = [];
+  const latest = messages.length ? messages[messages.length - 1].at : input.createdAt;
+  out.push({
+    at: input.createdAt,
+    kind: "captured",
+    label: "Feedback captured",
+    detail: [input.title, describeTarget(input)].filter(Boolean).join(" \xB7 ")
+  });
+  for (const m of messages) {
+    out.push({
+      at: m.at,
+      kind: "message",
+      label: `${m.authorName} replied`,
+      actor: m.fromAgent ? m.authorName : void 0
+    });
   }
-  async list(projectKey, url) {
-    return this.readAll(projectKey, url);
+  const stage = normalizeStage(input.status);
+  const reached = (s) => STAGE_ORDER.indexOf(stage) >= STAGE_ORDER.indexOf(s);
+  if (input.proposal || reached("in_review")) {
+    const agent = input.proposal?.author ?? "Claude Code";
+    out.push({
+      at: input.proposal?.createdAt ?? latest,
+      kind: "sent",
+      label: `Change ready from ${agent}`,
+      detail: "The rewritten markup is on the thread.",
+      actor: agent
+    });
   }
-  /** Every page's comments for this project, newest first — the "All" scope. */
-  async listAll(projectKey) {
-    const prefix = `loupe:${projectKey}:`;
-    const out = [];
-    for (let i = 0; i < localStorage.length; i++) {
-      const k = localStorage.key(i);
-      if (!k || !k.startsWith(prefix)) continue;
-      try {
-        out.push(...JSON.parse(localStorage.getItem(k) || "[]"));
-      } catch {
-      }
+  if (input.pr) {
+    out.push({
+      at: latest,
+      kind: "pr",
+      label: input.pr.number ? `Pull request #${input.pr.number} opened` : "Pull request opened",
+      detail: input.pr.state === "merged" ? "Merged." : input.pr.state === "closed" ? "Closed without merging." : "Waiting on review."
+    });
+    if (input.pr.previewUrl) {
+      out.push({ at: latest, kind: "preview", label: "Preview live", detail: input.pr.previewUrl });
     }
-    return out.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
   }
-  async save(comment) {
-    const all = this.readAll(comment.projectKey, comment.url);
+  if (reached("in_review")) {
+    out.push({ at: latest, kind: "review", label: "Waiting on a human review", detail: "Only a person can close this." });
+  }
+  if (stage === "resolved") {
+    out.push({ at: latest, kind: "resolved", label: "Resolved", detail: "A person closed this." });
+  }
+  return out;
+}
+var STAGE_ORDER = ["queue", "todo", "in_progress", "in_review", "resolved"];
+function normalizeStage(status) {
+  if (status === "open")
+    return "queue";
+  if (status === "done")
+    return "resolved";
+  return status;
+}
+function threadAsText(input, messages = []) {
+  const lines = [
+    `# ${input.title ?? "Feedback"} (#${input.id})`,
+    "",
+    `- Stage: ${normalizeStage(input.status)}`,
+    `- Page: ${input.url ?? "\u2014"}`
+  ];
+  if (input.anchor?.selector)
+    lines.push(`- Target: \`${input.anchor.selector}\``);
+  if (input.pr?.number)
+    lines.push(`- PR: #${input.pr.number}${input.pr.previewUrl ? ` \xB7 preview ${input.pr.previewUrl}` : ""}`);
+  lines.push("", "## Request", "", input.body);
+  if (messages.length) {
+    lines.push("", "## Conversation", "");
+    for (const m of messages)
+      lines.push(`**${m.authorName}**${m.fromAgent ? " (agent)" : ""} \u2014 ${m.at}`, "", m.body, "");
+  }
+  return lines.join("\n");
+}
+
+// ../shared/dist/mentions.js
+var HANDLE = /^[A-Za-z0-9][A-Za-z0-9._-]*/;
+function excludedRanges(body) {
+  const ranges = [];
+  for (const m of body.matchAll(/```[\s\S]*?```/g))
+    ranges.push([m.index, m.index + m[0].length]);
+  const fenced = (i) => ranges.some(([a, b]) => i >= a && i < b);
+  for (const m of body.matchAll(/`[^`\n]*`/g)) {
+    if (!fenced(m.index))
+      ranges.push([m.index, m.index + m[0].length]);
+  }
+  return ranges;
+}
+function parseMentions(body) {
+  if (!body)
+    return [];
+  const excluded = excludedRanges(body);
+  const inExcluded = (i) => excluded.some(([a, b]) => i >= a && i < b);
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (let i = 0; i < body.length; i++) {
+    if (body[i] !== "@")
+      continue;
+    if (inExcluded(i))
+      continue;
+    const prev = i > 0 ? body[i - 1] : "";
+    if (prev && !/[\s([{<"'*_~]/.test(prev))
+      continue;
+    const match = HANDLE.exec(body.slice(i + 1));
+    if (!match)
+      continue;
+    const raw = match[0];
+    const handle = raw.replace(/[._-]+$/, "");
+    if (!handle)
+      continue;
+    const key = handle.toLowerCase();
+    if (seen.has(key))
+      continue;
+    seen.add(key);
+    out.push({ handle, start: i, length: handle.length + 1 });
+  }
+  return out;
+}
+function mentionSegments(body, mentions) {
+  if (!mentions.length)
+    return [{ text: body, mention: false }];
+  const sorted = [...mentions].sort((a, b) => a.start - b.start);
+  const out = [];
+  let at = 0;
+  for (const m of sorted) {
+    if (m.start > at)
+      out.push({ text: body.slice(at, m.start), mention: false });
+    out.push({ text: body.slice(m.start, m.start + m.length), mention: true });
+    at = m.start + m.length;
+  }
+  if (at < body.length)
+    out.push({ text: body.slice(at), mention: false });
+  return out;
+}
+function mentionSuggestions(body, caret, candidates) {
+  const before = body.slice(0, caret);
+  const at = before.lastIndexOf("@");
+  if (at < 0)
+    return [];
+  const typed = before.slice(at + 1);
+  if (/\s/.test(typed))
+    return [];
+  const q = typed.toLowerCase();
+  return candidates.filter((c) => !q || c.name.toLowerCase().includes(q) || c.id.toLowerCase().includes(q)).slice(0, 6);
+}
+
+// ../shared/dist/needs-you.js
+var NEEDS_YOU_LABELS = {
+  review: "Waiting on your review",
+  question: "The agent asked you something",
+  failed: "The agent's run failed"
+};
+function looksLikeQuestion(body) {
+  const lines = body.split("\n").map((l) => l.trim()).filter(Boolean);
+  const last = lines[lines.length - 1];
+  if (!last)
+    return false;
+  return /\?["')\]]*$/.test(last);
+}
+function needsYou(input) {
+  const stage = normalizeStage2(input.status);
+  if (stage === "resolved")
+    return { needs: false };
+  if (input.agentFailed)
+    return { needs: true, reason: "failed", label: NEEDS_YOU_LABELS.failed };
+  if (input.last?.fromAgent && looksLikeQuestion(input.last.body)) {
+    return { needs: true, reason: "question", label: NEEDS_YOU_LABELS.question };
+  }
+  if (stage === "in_review")
+    return { needs: true, reason: "review", label: NEEDS_YOU_LABELS.review };
+  return { needs: false };
+}
+function normalizeStage2(status) {
+  if (status === "open")
+    return "queue";
+  if (status === "done")
+    return "resolved";
+  return status;
+}
+
+// ../shared/dist/reactions.js
+var REACTION_CHOICES = ["\u{1F44D}", "\u{1F389}", "\u{1F440}", "\u{1F64F}", "\u2764\uFE0F", "\u{1F680}"];
+function summarizeReactions(reactions, viewerId) {
+  const byEmoji = /* @__PURE__ */ new Map();
+  for (const r of reactions) {
+    const list = byEmoji.get(r.emoji) ?? [];
+    list.push(r);
+    byEmoji.set(r.emoji, list);
+  }
+  const rank = (emoji) => {
+    const at = REACTION_CHOICES.indexOf(emoji);
+    return at < 0 ? REACTION_CHOICES.length : at;
+  };
+  return [...byEmoji.entries()].map(([emoji, list]) => ({
+    emoji,
+    count: list.length,
+    mine: viewerId ? list.some((r) => r.userId === viewerId) : false,
+    users: list.map((r) => r.userName ?? r.userId)
+  })).sort((a, b) => b.count - a.count || rank(a.emoji) - rank(b.emoji) || a.emoji.localeCompare(b.emoji));
+}
+function toggleReaction(reactions, next) {
+  const has = reactions.some((r) => r.messageId === next.messageId && r.emoji === next.emoji && r.userId === next.userId);
+  if (has) {
+    return reactions.filter((r) => !(r.messageId === next.messageId && r.emoji === next.emoji && r.userId === next.userId));
+  }
+  return [...reactions, next];
+}
+
+// ../shared/dist/presence.js
+var PEER_HEARTBEAT_MS = 6e3;
+function initialsOf(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (!words.length)
+    return "?";
+  if (words.length === 1)
+    return words[0].slice(0, 1).toUpperCase();
+  return (words[0].slice(0, 1) + words[words.length - 1].slice(0, 1)).toUpperCase();
+}
+
+// ../shared/dist/index.js
+var COMMENT_STAGES = ["queue", "todo", "in_progress", "in_review", "resolved"];
+var STAGE_LABELS = {
+  queue: "Queue",
+  todo: "To Do",
+  in_progress: "In Progress",
+  in_review: "In Review",
+  resolved: "Resolved"
+};
+var LEGACY_STATUS = {
+  open: "queue",
+  in_progress: "in_progress",
+  done: "resolved"
+};
+function normalizeStatus(value) {
+  if (typeof value === "string") {
+    if (COMMENT_STAGES.includes(value))
+      return value;
+    if (value in LEGACY_STATUS)
+      return LEGACY_STATUS[value];
+  }
+  return "queue";
+}
+var COMMENT_PRIORITIES = ["critical", "high", "medium", "low"];
+var PRIORITY_LABELS = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low"
+};
+var CHANGE_TYPES = ["frontend", "backend", "api", "other"];
+var CHANGE_TYPE_LABELS = {
+  frontend: "Frontend",
+  backend: "Backend",
+  api: "API",
+  other: "Other"
+};
+var DEFAULT_PRIORITY = "medium";
+var DEFAULT_CHANGE_TYPE = "other";
+function normalizePriority(value) {
+  if (typeof value === "string" && COMMENT_PRIORITIES.includes(value)) {
+    return value;
+  }
+  return DEFAULT_PRIORITY;
+}
+
+// src/store.ts
+var LocalStorageAdapter = class {
+  key(projectKey, url) {
+    return `loupe:${projectKey}:${url}`;
+  }
+  readAll(projectKey, url) {
+    try {
+      const raw = localStorage.getItem(this.key(projectKey, url));
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  }
+  writeAll(projectKey, url, comments) {
+    localStorage.setItem(this.key(projectKey, url), JSON.stringify(comments));
+  }
+  async list(projectKey, url) {
+    return this.readAll(projectKey, url);
+  }
+  /** Every page's comments for this project, newest first — the "All" scope. */
+  async listAll(projectKey) {
+    const prefix = `loupe:${projectKey}:`;
+    const out = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (!k || !k.startsWith(prefix)) continue;
+      try {
+        out.push(...JSON.parse(localStorage.getItem(k) || "[]"));
+      } catch {
+      }
+    }
+    return out.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+  }
+  async save(comment) {
+    const all = this.readAll(comment.projectKey, comment.url);
     all.push(comment);
     this.writeAll(comment.projectKey, comment.url, all);
     return comment;
@@ -2993,6 +3487,27 @@ var LocalStorageAdapter = class {
     localStorage.setItem(this.msgKey(threadId), JSON.stringify(all));
     return stored;
   }
+  /** Offline reactions, keyed per thread. */
+  async listReactions(threadId) {
+    try {
+      const raw = localStorage.getItem(`loupe:rxn:${threadId}`);
+      const parsed = raw ? JSON.parse(raw) : [];
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  async toggleReaction(input) {
+    const current2 = await this.listReactions(input.threadId);
+    const next = toggleReaction(current2, {
+      messageId: input.messageId,
+      emoji: input.emoji,
+      userId: input.userId,
+      userName: input.userName
+    });
+    localStorage.setItem(`loupe:rxn:${input.threadId}`, JSON.stringify(next));
+    return next;
+  }
   /** Offline: the people are whoever has already commented locally. */
   async listPeople(projectKey) {
     const prefix = `loupe:${projectKey}:`;
@@ -3114,471 +3629,71 @@ var HttpAdapter = class {
     return await res.json();
   }
   async addMessage(threadId, message) {
-    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(threadId)}/messages`, this.opts({
-      method: "POST",
-      headers: this.headers(),
-      body: JSON.stringify(message)
-    }));
-    if (!res.ok) throw new Error(`addMessage failed: ${res.status}`);
-    return await res.json();
-  }
-  /** Everyone who has taken part in this project, for mention resolution. */
-  async listPeople(projectKey) {
-    const q = new URLSearchParams({ projectKey });
-    const res = await fetch(`${this.base}/v1/people?${q}`, this.opts({ headers: this.headers() }));
-    if (!res.ok) throw new Error(`listPeople failed: ${res.status}`);
-    return await res.json();
-  }
-  async listNotifications(projectKey, recipient) {
-    const q = new URLSearchParams({ projectKey, recipient });
-    const res = await fetch(`${this.base}/v1/notifications?${q}`, this.opts({ headers: this.headers() }));
-    if (!res.ok) throw new Error(`listNotifications failed: ${res.status}`);
-    return (await res.json()).notifications;
-  }
-  async markNotificationsRead(projectKey, recipient, id) {
-    await fetch(`${this.base}/v1/notifications/read`, this.opts({
-      method: "POST",
-      headers: this.headers(),
-      body: JSON.stringify({ projectKey, recipient, id })
-    }));
-  }
-  async update(id, patch) {
-    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(id)}`, this.opts({
-      method: "PATCH",
-      headers: this.headers(),
-      body: JSON.stringify(patch)
-    }));
-    if (!res.ok) throw new Error(`update failed: ${res.status}`);
-  }
-  async remove(id) {
-    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(id)}`, this.opts({
-      method: "DELETE",
-      headers: this.headers()
-    }));
-    if (!res.ok && res.status !== 404) throw new Error(`remove failed: ${res.status}`);
-  }
-};
-
-// ../shared/dist/activity.js
-var ACTIVITY_STATUS_LABELS = {
-  idle: "Idle",
-  working: "Working",
-  error: "Error"
-};
-function formatDuration(ms) {
-  if (!ms || ms < 0)
-    return "\u2014";
-  const s = Math.round(ms / 1e3);
-  if (s < 60)
-    return `${s}s`;
-  const m = Math.floor(s / 60);
-  const rest = s % 60;
-  if (m < 60)
-    return rest ? `${m}m ${rest}s` : `${m}m`;
-  const h = Math.floor(m / 60);
-  return `${h}h ${m % 60}m`;
-}
-function summarizeActivity(events, status = "idle", now = Date.now()) {
-  const files = /* @__PURE__ */ new Set();
-  const kinds = /* @__PURE__ */ new Map();
-  let errors = 0;
-  let first = Infinity;
-  for (const e of events) {
-    for (const f of e.files ?? [])
-      files.add(f);
-    kinds.set(e.kind, (kinds.get(e.kind) ?? 0) + 1);
-    if (e.level === "error")
-      errors++;
-    const t = Date.parse(e.at);
-    if (!Number.isNaN(t))
-      first = Math.min(first, t);
-  }
-  return {
-    status,
-    events: events.length,
-    errors,
-    files: files.size,
-    durationMs: events.length && first !== Infinity ? Math.max(0, now - first) : 0,
-    byKind: [...kinds.entries()].map(([kind, count]) => ({ kind, count })).sort((a, b) => b.count - a.count || a.kind.localeCompare(b.kind))
-  };
-}
-
-// ../shared/dist/lifecycle.js
-var LIFECYCLE_LABELS = {
-  sent: "Sent to agent",
-  in_pr: "In PR",
-  preview: "Review preview",
-  reviewed: "Reviewed"
-};
-function lifecycle(c) {
-  const hasProposal = !!c.proposal;
-  const pr = c.pr ?? void 0;
-  const withPr = (stage) => {
-    const out = { stage, label: LIFECYCLE_LABELS[stage] };
-    if (pr) {
-      out.pr = pr;
-      if (typeof pr.checksTotal === "number" && pr.checksTotal > 0) {
-        const passed = Math.max(0, Math.min(pr.checksTotal, pr.checksPassed ?? 0));
-        out.checks = {
-          text: `${passed}/${pr.checksTotal}`,
-          ratio: passed / pr.checksTotal
-        };
-      }
-    }
-    return out;
-  };
-  if (c.status === "resolved")
-    return hasProposal || pr ? withPr("reviewed") : null;
-  if (pr)
-    return withPr("in_pr");
-  if (c.status === "in_review")
-    return { stage: "preview", label: LIFECYCLE_LABELS.preview };
-  if (hasProposal)
-    return { stage: "sent", label: LIFECYCLE_LABELS.sent };
-  return null;
-}
-function awaitingReview(comments) {
-  return comments.filter((c) => c.status === "in_review");
-}
-
-// ../shared/dist/iteration.js
-function emptyIterations() {
-  return { items: [], index: -1 };
-}
-function current(state) {
-  return state.index >= 0 ? state.items[state.index] ?? null : null;
-}
-function addIteration(state, iteration) {
-  const head = state.items.slice(0, state.index + 1);
-  const items = [...head, iteration].slice(-MAX_ITERATIONS);
-  return { items, index: items.length - 1 };
-}
-var MAX_ITERATIONS = 20;
-function canUndo(state) {
-  return state.items.length > 0;
-}
-function undo(state) {
-  if (!state.items.length)
-    return state;
-  const items = state.items.slice(0, -1);
-  return { items, index: items.length - 1 };
-}
-function canMove(state, delta) {
-  const next = state.index + delta;
-  return next >= 0 && next < state.items.length;
-}
-function move(state, delta) {
-  return canMove(state, delta) ? { ...state, index: state.index + delta } : state;
-}
-function stackLabel(state) {
-  return state.items.length ? `${state.index + 1} / ${state.items.length}` : "";
-}
-
-// ../shared/dist/consent.js
-function emptyConsent() {
-  return { state: "idle", request: null, history: [] };
-}
-function isNavigableUrl(raw) {
-  try {
-    const u = new URL(raw);
-    return u.protocol === "http:" || u.protocol === "https:";
-  } catch {
-    return false;
-  }
-}
-function requestNavigation(record, request) {
-  if (!isNavigableUrl(request.url))
-    return record;
-  return {
-    state: "requested",
-    request: {
-      id: request.id ?? `nav${Date.now().toString(36)}`,
-      at: request.at ?? (/* @__PURE__ */ new Date()).toISOString(),
-      url: request.url,
-      reason: request.reason,
-      requester: request.requester
-    },
-    history: record.history
-  };
-}
-function isPending(record) {
-  return record.state === "requested" && record.request !== null;
-}
-function decide(record, granted, now = (/* @__PURE__ */ new Date()).toISOString()) {
-  if (!isPending(record))
-    return { record, navigateTo: null };
-  const url = record.request.url;
-  return {
-    record: {
-      state: granted ? "granted" : "denied",
-      request: null,
-      history: [...record.history, { url, decision: granted ? "granted" : "denied", at: now }]
-    },
-    navigateTo: granted ? url : null
-  };
-}
-function withdraw(record) {
-  return isPending(record) ? { ...record, state: "idle", request: null } : record;
-}
-
-// ../shared/dist/thread.js
-function firstMessageFromComment(comment) {
-  return {
-    id: `${comment.id}:0`,
-    threadId: comment.id,
-    author: { ...comment.author, type: "user" },
-    body: comment.body,
-    attachments: comment.attachments?.length ? comment.attachments : void 0,
-    createdAt: comment.createdAt
-  };
-}
-function threadConversation(comment, replies) {
-  return [firstMessageFromComment(comment), ...replies].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
-}
-function iterationLabel(link) {
-  if (!link.parentThreadId || link.iterationType !== "revision")
-    return null;
-  return `Iteration ${link.iterationNumber ?? 2}`;
-}
-
-// ../shared/dist/timeline.js
-function describeTarget(input) {
-  const parts = [];
-  if (input.anchor?.tag)
-    parts.push(`a <${input.anchor.tag}>`);
-  if (input.anchor?.selector)
-    parts.push(`\`${input.anchor.selector}\``);
-  return parts.length ? parts.join(" ") : input.kind === "free" ? "a page note" : "an element";
-}
-function threadTimeline(input, messages = []) {
-  const out = [];
-  const latest = messages.length ? messages[messages.length - 1].at : input.createdAt;
-  out.push({
-    at: input.createdAt,
-    kind: "captured",
-    label: "Feedback captured",
-    detail: [input.title, describeTarget(input)].filter(Boolean).join(" \xB7 ")
-  });
-  for (const m of messages) {
-    out.push({
-      at: m.at,
-      kind: "message",
-      label: `${m.authorName} replied`,
-      actor: m.fromAgent ? m.authorName : void 0
-    });
-  }
-  const stage = normalizeStage(input.status);
-  const reached = (s) => STAGE_ORDER.indexOf(stage) >= STAGE_ORDER.indexOf(s);
-  if (input.proposal || reached("in_review")) {
-    const agent = input.proposal?.author ?? "Claude Code";
-    out.push({
-      at: input.proposal?.createdAt ?? latest,
-      kind: "sent",
-      label: `Change ready from ${agent}`,
-      detail: "The rewritten markup is on the thread.",
-      actor: agent
-    });
-  }
-  if (input.pr) {
-    out.push({
-      at: latest,
-      kind: "pr",
-      label: input.pr.number ? `Pull request #${input.pr.number} opened` : "Pull request opened",
-      detail: input.pr.state === "merged" ? "Merged." : input.pr.state === "closed" ? "Closed without merging." : "Waiting on review."
-    });
-    if (input.pr.previewUrl) {
-      out.push({ at: latest, kind: "preview", label: "Preview live", detail: input.pr.previewUrl });
-    }
-  }
-  if (reached("in_review")) {
-    out.push({ at: latest, kind: "review", label: "Waiting on a human review", detail: "Only a person can close this." });
+    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(threadId)}/messages`, this.opts({
+      method: "POST",
+      headers: this.headers(),
+      body: JSON.stringify(message)
+    }));
+    if (!res.ok) throw new Error(`addMessage failed: ${res.status}`);
+    return await res.json();
   }
-  if (stage === "resolved") {
-    out.push({ at: latest, kind: "resolved", label: "Resolved", detail: "A person closed this." });
+  async listReactions(threadId) {
+    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(threadId)}/messages/all/reactions`, this.opts({ headers: this.headers() }));
+    if (res.status === 404) return [];
+    if (!res.ok) throw new Error(`listReactions failed: ${res.status}`);
+    return (await res.json()).reactions;
   }
-  return out;
-}
-var STAGE_ORDER = ["queue", "todo", "in_progress", "in_review", "resolved"];
-function normalizeStage(status) {
-  if (status === "open")
-    return "queue";
-  if (status === "done")
-    return "resolved";
-  return status;
-}
-function threadAsText(input, messages = []) {
-  const lines = [
-    `# ${input.title ?? "Feedback"} (#${input.id})`,
-    "",
-    `- Stage: ${normalizeStage(input.status)}`,
-    `- Page: ${input.url ?? "\u2014"}`
-  ];
-  if (input.anchor?.selector)
-    lines.push(`- Target: \`${input.anchor.selector}\``);
-  if (input.pr?.number)
-    lines.push(`- PR: #${input.pr.number}${input.pr.previewUrl ? ` \xB7 preview ${input.pr.previewUrl}` : ""}`);
-  lines.push("", "## Request", "", input.body);
-  if (messages.length) {
-    lines.push("", "## Conversation", "");
-    for (const m of messages)
-      lines.push(`**${m.authorName}**${m.fromAgent ? " (agent)" : ""} \u2014 ${m.at}`, "", m.body, "");
+  async toggleReaction(input) {
+    const res = await fetch(
+      `${this.base}/v1/comments/${encodeURIComponent(input.threadId)}/messages/${encodeURIComponent(input.messageId)}/reactions`,
+      this.opts({
+        method: "POST",
+        headers: this.headers(),
+        body: JSON.stringify({ emoji: input.emoji, userId: input.userId, userName: input.userName })
+      })
+    );
+    if (!res.ok) throw new Error(`toggleReaction failed: ${res.status}`);
+    return (await res.json()).reactions;
   }
-  return lines.join("\n");
-}
-
-// ../shared/dist/mentions.js
-var HANDLE = /^[A-Za-z0-9][A-Za-z0-9._-]*/;
-function excludedRanges(body) {
-  const ranges = [];
-  for (const m of body.matchAll(/```[\s\S]*?```/g))
-    ranges.push([m.index, m.index + m[0].length]);
-  const fenced = (i) => ranges.some(([a, b]) => i >= a && i < b);
-  for (const m of body.matchAll(/`[^`\n]*`/g)) {
-    if (!fenced(m.index))
-      ranges.push([m.index, m.index + m[0].length]);
+  /** Everyone who has taken part in this project, for mention resolution. */
+  async listPeople(projectKey) {
+    const q = new URLSearchParams({ projectKey });
+    const res = await fetch(`${this.base}/v1/people?${q}`, this.opts({ headers: this.headers() }));
+    if (!res.ok) throw new Error(`listPeople failed: ${res.status}`);
+    return await res.json();
   }
-  return ranges;
-}
-function parseMentions(body) {
-  if (!body)
-    return [];
-  const excluded = excludedRanges(body);
-  const inExcluded = (i) => excluded.some(([a, b]) => i >= a && i < b);
-  const out = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (let i = 0; i < body.length; i++) {
-    if (body[i] !== "@")
-      continue;
-    if (inExcluded(i))
-      continue;
-    const prev = i > 0 ? body[i - 1] : "";
-    if (prev && !/[\s([{<"'*_~]/.test(prev))
-      continue;
-    const match = HANDLE.exec(body.slice(i + 1));
-    if (!match)
-      continue;
-    const raw = match[0];
-    const handle = raw.replace(/[._-]+$/, "");
-    if (!handle)
-      continue;
-    const key = handle.toLowerCase();
-    if (seen.has(key))
-      continue;
-    seen.add(key);
-    out.push({ handle, start: i, length: handle.length + 1 });
+  async listNotifications(projectKey, recipient) {
+    const q = new URLSearchParams({ projectKey, recipient });
+    const res = await fetch(`${this.base}/v1/notifications?${q}`, this.opts({ headers: this.headers() }));
+    if (!res.ok) throw new Error(`listNotifications failed: ${res.status}`);
+    return (await res.json()).notifications;
   }
-  return out;
-}
-function mentionSegments(body, mentions) {
-  if (!mentions.length)
-    return [{ text: body, mention: false }];
-  const sorted = [...mentions].sort((a, b) => a.start - b.start);
-  const out = [];
-  let at = 0;
-  for (const m of sorted) {
-    if (m.start > at)
-      out.push({ text: body.slice(at, m.start), mention: false });
-    out.push({ text: body.slice(m.start, m.start + m.length), mention: true });
-    at = m.start + m.length;
+  async markNotificationsRead(projectKey, recipient, id) {
+    await fetch(`${this.base}/v1/notifications/read`, this.opts({
+      method: "POST",
+      headers: this.headers(),
+      body: JSON.stringify({ projectKey, recipient, id })
+    }));
   }
-  if (at < body.length)
-    out.push({ text: body.slice(at), mention: false });
-  return out;
-}
-function mentionSuggestions(body, caret, candidates) {
-  const before = body.slice(0, caret);
-  const at = before.lastIndexOf("@");
-  if (at < 0)
-    return [];
-  const typed = before.slice(at + 1);
-  if (/\s/.test(typed))
-    return [];
-  const q = typed.toLowerCase();
-  return candidates.filter((c) => !q || c.name.toLowerCase().includes(q) || c.id.toLowerCase().includes(q)).slice(0, 6);
-}
-
-// ../shared/dist/needs-you.js
-var NEEDS_YOU_LABELS = {
-  review: "Waiting on your review",
-  question: "The agent asked you something",
-  failed: "The agent's run failed"
-};
-function looksLikeQuestion(body) {
-  const lines = body.split("\n").map((l) => l.trim()).filter(Boolean);
-  const last = lines[lines.length - 1];
-  if (!last)
-    return false;
-  return /\?["')\]]*$/.test(last);
-}
-function needsYou(input) {
-  const stage = normalizeStage2(input.status);
-  if (stage === "resolved")
-    return { needs: false };
-  if (input.agentFailed)
-    return { needs: true, reason: "failed", label: NEEDS_YOU_LABELS.failed };
-  if (input.last?.fromAgent && looksLikeQuestion(input.last.body)) {
-    return { needs: true, reason: "question", label: NEEDS_YOU_LABELS.question };
+  async update(id, patch) {
+    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(id)}`, this.opts({
+      method: "PATCH",
+      headers: this.headers(),
+      body: JSON.stringify(patch)
+    }));
+    if (!res.ok) throw new Error(`update failed: ${res.status}`);
   }
-  if (stage === "in_review")
-    return { needs: true, reason: "review", label: NEEDS_YOU_LABELS.review };
-  return { needs: false };
-}
-function normalizeStage2(status) {
-  if (status === "open")
-    return "queue";
-  if (status === "done")
-    return "resolved";
-  return status;
-}
-
-// ../shared/dist/index.js
-var COMMENT_STAGES = ["queue", "todo", "in_progress", "in_review", "resolved"];
-var STAGE_LABELS = {
-  queue: "Queue",
-  todo: "To Do",
-  in_progress: "In Progress",
-  in_review: "In Review",
-  resolved: "Resolved"
-};
-var LEGACY_STATUS = {
-  open: "queue",
-  in_progress: "in_progress",
-  done: "resolved"
-};
-function normalizeStatus(value) {
-  if (typeof value === "string") {
-    if (COMMENT_STAGES.includes(value))
-      return value;
-    if (value in LEGACY_STATUS)
-      return LEGACY_STATUS[value];
+  async remove(id) {
+    const res = await fetch(`${this.base}/v1/comments/${encodeURIComponent(id)}`, this.opts({
+      method: "DELETE",
+      headers: this.headers()
+    }));
+    if (!res.ok && res.status !== 404) throw new Error(`remove failed: ${res.status}`);
   }
-  return "queue";
-}
-var COMMENT_PRIORITIES = ["critical", "high", "medium", "low"];
-var PRIORITY_LABELS = {
-  critical: "Critical",
-  high: "High",
-  medium: "Medium",
-  low: "Low"
-};
-var CHANGE_TYPES = ["frontend", "backend", "api", "other"];
-var CHANGE_TYPE_LABELS = {
-  frontend: "Frontend",
-  backend: "Backend",
-  api: "API",
-  other: "Other"
 };
-var DEFAULT_PRIORITY = "medium";
-var DEFAULT_CHANGE_TYPE = "other";
-function normalizePriority(value) {
-  if (typeof value === "string" && COMMENT_PRIORITIES.includes(value)) {
-    return value;
-  }
-  return DEFAULT_PRIORITY;
-}
 
 // src/app.ts
-var SDK_VERSION = true ? "0.10.23" : "dev";
+var SDK_VERSION = true ? "0.10.24" : "dev";
 var ACCENTS = [
   { id: "indigo", dark: "#6b73e6", light: "#4a55d6", soft: "rgba(107,115,230,0.12)" },
   { id: "violet", dark: "#a06be6", light: "#7c3fd4", soft: "rgba(160,107,230,0.14)" },
@@ -3996,6 +4111,10 @@ var LoupeApp = class {
     /** Optimistic replies the store rejected — offered for retry rather than lost. */
     this.msgFailed = /* @__PURE__ */ new Set();
     this.msgErr = /* @__PURE__ */ new Map();
+    /** Other people on this page. Empty unless a bridge is configured. */
+    this.peers = [];
+    /** Reactions per thread, keyed `${threadId}:${messageId}`, so a re-render is free. */
+    this.reactions = /* @__PURE__ */ new Map();
     /** Everyone who has taken part, for mention autocomplete. Fetched once. */
     this.people = /* @__PURE__ */ new Map();
     this.cfg = cfg;
@@ -4015,6 +4134,7 @@ var LoupeApp = class {
     this.renderPins();
     this.renderList();
     this.renderHome();
+    this.startPresence();
     void this.loadNotifications();
     if (this.scope === "all") void this.loadAllComments();
     this.observe();
@@ -4164,7 +4284,9 @@ var LoupeApp = class {
     closeBtn.innerHTML = I_CLOSE;
     closeBtn.onclick = () => this.closeDock();
     ctl.append(posWrap, this.themeBtn, setWrap, minBtn, closeBtn);
-    head.append(brand, ctl);
+    this.peerEl = el("div", "peers");
+    if (!this.cfg.bridge) this.peerEl.style.display = "none";
+    head.append(brand, this.peerEl, ctl);
     this.minBar = el("div", "minbar");
     this.minBar.onclick = () => this.setMinimized(false);
     this.tabList = [...BUILTIN_TABS, ...(this.cfg.tabs ?? []).map((t) => ({ id: t.id, label: t.label }))];
@@ -6324,6 +6446,37 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
         else body.appendChild(document.createTextNode(seg.text));
       }
       row.append(head, body);
+      const pills = el("div", "rxns");
+      for (const r of summarizeReactions(this.reactionsOf(c.id, m.id), this.cfg.user.id)) {
+        const pill = el("button", "rxn" + (r.mine ? " mine" : ""));
+        pill.append(document.createTextNode(r.emoji), el("span", "rxn-n", String(r.count)));
+        pill.title = r.users.join(", ");
+        pill.onclick = (e) => {
+          e.stopPropagation();
+          void this.react(c, m.id, r.emoji);
+        };
+        pills.appendChild(pill);
+      }
+      const add = el("button", "rxn-add", "\uFF0B");
+      add.title = "Add a reaction";
+      add.onclick = (e) => {
+        e.stopPropagation();
+        const open = pills.querySelector(".rxn-pick");
+        pills.querySelectorAll(".rxn-pick").forEach((n) => n.remove());
+        if (open) return;
+        const pick = el("div", "rxn-pick");
+        for (const emoji of REACTION_CHOICES) {
+          const b = el("button", "rxn-opt", emoji);
+          b.onclick = (ev) => {
+            ev.stopPropagation();
+            void this.react(c, m.id, emoji);
+          };
+          pick.appendChild(b);
+        }
+        pills.appendChild(pick);
+      };
+      pills.appendChild(add);
+      row.appendChild(pills);
       if (this.msgPending.has(m.id)) row.appendChild(el("div", "msg-state", "Sending\u2026"));
       if (this.msgFailed.has(m.id)) {
         const failed = el("div", "msg-state failed");
@@ -6435,6 +6588,108 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     wrap.appendChild(copyRow);
     return wrap;
   }
+  /**
+   * Join, then keep talking.
+   *
+   * Presence is a heartbeat, not a flag, because a browser that is closed or crashes
+   * sends no goodbye. The bridge expires anything silent past the TTL, and the panel
+   * re-joins on a 404 rather than assuming it is still known.
+   */
+  startPresence() {
+    const bridge = this.cfg.bridge;
+    if (!bridge) return;
+    const base = bridge.replace(/\/$/, "");
+    const pageUrl = location.pathname + location.search;
+    const tick = async () => {
+      try {
+        if (!this.peerId) {
+          const res = await fetch(`${base}/presence`, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ url: pageUrl, userId: this.cfg.user.id, name: this.cfg.user.name })
+          });
+          if (!res.ok) return;
+          const data = await res.json();
+          this.peerId = data.peer?.id;
+        } else {
+          const res = await fetch(`${base}/presence/${encodeURIComponent(this.peerId)}/heartbeat`, { method: "POST" });
+          if (res.status === 404) this.peerId = void 0;
+        }
+        const listed = await fetch(
+          `${base}/presence?url=${encodeURIComponent(pageUrl)}&viewer=${encodeURIComponent(this.peerId ?? "")}`
+        );
+        if (listed.ok) {
+          const data = await listed.json();
+          this.peers = Array.isArray(data.peers) ? data.peers : [];
+          this.renderPeers();
+        }
+      } catch {
+        this.peers = [];
+        this.renderPeers();
+      }
+    };
+    void tick();
+    this.peerTimer = setInterval(() => void tick(), PEER_HEARTBEAT_MS);
+  }
+  renderPeers() {
+    if (!this.peerEl) return;
+    this.peerEl.textContent = "";
+    if (!this.peers.length) {
+      this.peerEl.style.display = "none";
+      return;
+    }
+    this.peerEl.style.display = "";
+    for (const p of this.peers.slice(0, 4)) {
+      const av = el("span", "peer-av", initialsOf(p.name));
+      av.title = `${p.name} is on this page`;
+      this.peerEl.appendChild(av);
+    }
+    if (this.peers.length > 4) this.peerEl.appendChild(el("span", "peer-more", `+${this.peers.length - 4}`));
+  }
+  stopPresence() {
+    if (this.peerTimer) clearInterval(this.peerTimer);
+    this.peerTimer = void 0;
+    if (this.cfg.bridge && this.peerId) {
+      const base = this.cfg.bridge.replace(/\/$/, "");
+      void fetch(`${base}/presence/${encodeURIComponent(this.peerId)}`, { method: "DELETE", keepalive: true }).catch(() => {
+      });
+    }
+    this.peerId = void 0;
+    this.peers = [];
+  }
+  reactionsOf(threadId, messageId) {
+    return this.reactions.get(`${threadId}:${messageId}`) ?? [];
+  }
+  /**
+   * Toggle a reaction.
+   *
+   * Optimistic, then replaced by the server's own set: the server returns the whole
+   * list precisely so the count can never drift from what was stored.
+   */
+  async react(c, messageId, emoji) {
+    const key = `${c.id}:${messageId}`;
+    const before = this.reactionsOf(c.id, messageId);
+    this.reactions.set(key, toggleReaction(before, {
+      messageId,
+      emoji,
+      userId: this.cfg.user.id,
+      userName: this.cfg.user.name
+    }));
+    this.renderList();
+    try {
+      const next = await this.store.toggleReaction({
+        threadId: c.id,
+        messageId,
+        emoji,
+        userId: this.cfg.user.id,
+        userName: this.cfg.user.name
+      });
+      this.reactions.set(key, Array.isArray(next) ? next : this.reactionsOf(c.id, messageId));
+    } catch {
+      this.reactions.set(key, before);
+    }
+    this.renderList();
+  }
   async loadPeople() {
     if (this.people.has(this.cfg.projectKey)) return;
     try {
@@ -6447,6 +6702,17 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
   async loadMessages(c) {
     if (this.messages.has(c.id)) return;
     void this.loadPeople();
+    void this.store.listReactions(c.id).then((all) => {
+      if (!Array.isArray(all)) return;
+      for (const r of all) {
+        const key = `${c.id}:${r.messageId}`;
+        const list = this.reactions.get(key) ?? [];
+        if (!list.some((x) => x.userId === r.userId && x.emoji === r.emoji)) list.push(r);
+        this.reactions.set(key, list);
+      }
+      this.renderList();
+    }).catch(() => {
+    });
     try {
       this.messages.set(c.id, await this.store.listMessages(c.id));
     } catch {
@@ -6593,6 +6859,7 @@ ${c.body}` : c.body)}</div>` + (c.context?.html ? `<pre class="or-code">${escape
     if (elx) elx.scrollIntoView({ behavior: "smooth", block: "center" });
   }
   destroy() {
+    this.stopPresence();
     this.stopRecording?.();
     this.setMode("off");
     this.mo?.disconnect();