html-collab 0.1.0

package/dist/cli.js

@@ -0,0 +1,4159 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { realpathSync } from "node:fs";
+import { basename as basename2 } from "node:path";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+
+// src/commands/extract.ts
+import { readFile, writeFile } from "node:fs/promises";
+import { dirname, relative, resolve, sep } from "node:path";
+
+// src/format/reduce.ts
+function reduceReviewState(state) {
+  const invalidOps = [];
+  const uniqueOps = dedupeOps(state.ops, invalidOps).sort(compareOps);
+  const threadById = new Map;
+  const messageById = new Map;
+  const editById = new Map;
+  for (const op of uniqueOps) {
+    if (op.type === "comment.create") {
+      const threadId = op.payload.threadId;
+      if (!threadId) {
+        invalidOps.push({ opId: op.opId, reason: "comment.create missing threadId" });
+        continue;
+      }
+      if (threadById.has(threadId)) {
+        invalidOps.push({ opId: op.opId, reason: `duplicate threadId ${threadId}` });
+        continue;
+      }
+      const root = {
+        messageId: op.opId,
+        actorId: op.actorId,
+        body: op.payload.body,
+        deleted: false,
+        createOp: op,
+        updateOp: op
+      };
+      const thread = {
+        threadId,
+        status: "open",
+        anchor: op.target,
+        root,
+        replies: [],
+        createdOp: op
+      };
+      threadById.set(threadId, thread);
+      messageById.set(root.messageId, root);
+      continue;
+    }
+    if (op.type === "edit.suggest") {
+      const editId = op.payload.editId;
+      if (!editId) {
+        invalidOps.push({ opId: op.opId, reason: "edit.suggest missing editId" });
+        continue;
+      }
+      if (editById.has(editId)) {
+        invalidOps.push({ opId: op.opId, reason: `duplicate editId ${editId}` });
+        continue;
+      }
+      if ((op.payload.kind === "replace" || op.payload.kind === "insert") && !op.payload.replacement) {
+        invalidOps.push({ opId: op.opId, reason: `${op.payload.kind} edit missing replacement` });
+        continue;
+      }
+      editById.set(editId, {
+        editId,
+        status: "open",
+        kind: op.payload.kind,
+        anchor: op.target,
+        replacement: op.payload.replacement,
+        note: op.payload.note,
+        createdOp: op
+      });
+    }
+  }
+  for (const op of uniqueOps) {
+    switch (op.type) {
+      case "comment.create":
+        break;
+      case "reply.create": {
+        const thread = threadById.get(op.target.threadId);
+        if (!thread) {
+          invalidOps.push({ opId: op.opId, reason: `reply targets missing thread ${op.target.threadId}` });
+          break;
+        }
+        if (messageById.has(op.opId)) {
+          invalidOps.push({ opId: op.opId, reason: `duplicate messageId ${op.opId}` });
+          break;
+        }
+        const reply = {
+          messageId: op.opId,
+          actorId: op.actorId,
+          body: op.payload.body,
+          deleted: false,
+          createOp: op,
+          updateOp: op,
+          parentId: op.target.parentId
+        };
+        thread.replies.push(reply);
+        messageById.set(reply.messageId, reply);
+        break;
+      }
+      case "comment.edit":
+      case "reply.edit": {
+        const message = messageById.get(op.target.messageId);
+        if (!message) {
+          invalidOps.push({ opId: op.opId, reason: `edit targets missing message ${op.target.messageId}` });
+          break;
+        }
+        if (compareOps(message.updateOp, op) <= 0) {
+          message.body = op.payload.body;
+          message.updateOp = op;
+        }
+        break;
+      }
+      case "comment.delete":
+      case "reply.delete": {
+        const message = messageById.get(op.target.messageId);
+        if (!message) {
+          invalidOps.push({ opId: op.opId, reason: `delete targets missing message ${op.target.messageId}` });
+          break;
+        }
+        if (compareOps(message.updateOp, op) <= 0) {
+          message.deleted = true;
+          message.updateOp = op;
+        }
+        break;
+      }
+      case "thread.resolve":
+      case "thread.reopen": {
+        const thread = threadById.get(op.target.threadId);
+        if (!thread) {
+          invalidOps.push({ opId: op.opId, reason: `status targets missing thread ${op.target.threadId}` });
+          break;
+        }
+        if (!thread.statusOp || compareOps(thread.statusOp, op) <= 0) {
+          thread.status = op.type === "thread.resolve" ? "resolved" : "open";
+          thread.statusOp = op;
+        }
+        break;
+      }
+      case "edit.suggest":
+        break;
+      case "edit.accept":
+      case "edit.reject":
+      case "edit.delete": {
+        const edit = editById.get(op.target.editId);
+        if (!edit) {
+          invalidOps.push({ opId: op.opId, reason: `edit status targets missing edit ${op.target.editId}` });
+          break;
+        }
+        if (!edit.statusOp || compareOps(edit.statusOp, op) <= 0) {
+          edit.status = op.type === "edit.accept" ? "accepted" : op.type === "edit.reject" ? "rejected" : "deleted";
+          edit.statusOp = op;
+        }
+        break;
+      }
+      default: {
+        const unknownOp = op;
+        invalidOps.push({ opId: unknownOp.opId, reason: `unsupported operation ${unknownOp.type}` });
+      }
+    }
+  }
+  const threads = Array.from(threadById.values()).map((thread) => reduceThread(thread)).sort((left, right) => {
+    const created = left.createdAt.localeCompare(right.createdAt);
+    if (created !== 0) {
+      return created;
+    }
+    return left.threadId.localeCompare(right.threadId);
+  });
+  const edits = Array.from(editById.values()).map((edit) => reduceEdit(edit)).sort((left, right) => {
+    const created = left.createdAt.localeCompare(right.createdAt);
+    if (created !== 0) {
+      return created;
+    }
+    return left.editId.localeCompare(right.editId);
+  });
+  return {
+    schemaVersion: 1,
+    docId: state.docId,
+    sourceFingerprint: state.sourceFingerprint,
+    title: state.title,
+    actors: state.actors,
+    threads,
+    edits,
+    invalidOps
+  };
+}
+function compareOps(left, right) {
+  if (left.clock !== right.clock) {
+    return left.clock - right.clock;
+  }
+  const timeComparison = left.time.localeCompare(right.time);
+  if (timeComparison !== 0) {
+    return timeComparison;
+  }
+  return left.opId.localeCompare(right.opId);
+}
+function dedupeOps(ops, invalidOps) {
+  const byId = new Map;
+  for (const op of ops) {
+    if (!op || typeof op !== "object" || !("opId" in op) || typeof op.opId !== "string") {
+      invalidOps.push({ reason: "operation missing opId" });
+      continue;
+    }
+    const existing = byId.get(op.opId);
+    if (!existing || compareOps(existing, op) <= 0) {
+      byId.set(op.opId, op);
+    }
+  }
+  return Array.from(byId.values());
+}
+function reduceThread(thread) {
+  const messages = [thread.root, ...thread.replies];
+  const updatedAt = messages.map((message) => message.updateOp.time).concat(thread.statusOp?.time ?? thread.createdOp.time).sort().at(-1) ?? thread.createdOp.time;
+  return {
+    threadId: thread.threadId,
+    status: thread.status,
+    anchor: thread.anchor,
+    root: reduceMessage(thread.root),
+    replies: thread.replies.sort((left, right) => compareOps(left.createOp, right.createOp)).map(reduceMessage),
+    createdAt: thread.createdOp.time,
+    updatedAt
+  };
+}
+function reduceMessage(message) {
+  return {
+    messageId: message.messageId,
+    actorId: message.actorId,
+    body: message.body,
+    deleted: message.deleted,
+    createdAt: message.createOp.time,
+    updatedAt: message.updateOp.time
+  };
+}
+function reduceEdit(edit) {
+  return {
+    editId: edit.editId,
+    status: edit.status,
+    kind: edit.kind,
+    anchor: edit.anchor,
+    replacement: edit.replacement,
+    note: edit.note,
+    actorId: edit.createdOp.actorId,
+    createdAt: edit.createdOp.time,
+    updatedAt: edit.statusOp?.time ?? edit.createdOp.time
+  };
+}
+
+// src/format/extract.ts
+function extractReview(state, format, options = {}) {
+  const bundle = createReviewBundle(state);
+  if (format === "json") {
+    return `${JSON.stringify(bundle, null, 2)}
+`;
+  }
+  if (format === "text") {
+    return renderTextBrief(bundle);
+  }
+  if (format === "agent") {
+    return renderAgentBrief(bundle, options);
+  }
+  return renderMarkdownBrief(bundle, options);
+}
+function createReviewBundle(state) {
+  const reduced = reduceReviewState(state);
+  const reviewers = Object.values(reduced.actors).map((actor) => actor.name).filter(Boolean).sort((left, right) => left.localeCompare(right));
+  return {
+    schemaVersion: 1,
+    docId: reduced.docId,
+    title: reduced.title,
+    sourceFingerprint: reduced.sourceFingerprint,
+    summary: {
+      openThreads: reduced.threads.filter((thread) => thread.status === "open").length,
+      resolvedThreads: reduced.threads.filter((thread) => thread.status === "resolved").length,
+      openEdits: reduced.edits.filter((edit) => edit.status === "open").length,
+      acceptedEdits: reduced.edits.filter((edit) => edit.status === "accepted").length,
+      rejectedEdits: reduced.edits.filter((edit) => edit.status === "rejected").length,
+      deletedEdits: reduced.edits.filter((edit) => edit.status === "deleted").length,
+      reviewers
+    },
+    threads: reduced.threads.map((thread) => ({
+      threadId: thread.threadId,
+      status: thread.status,
+      anchor: {
+        kind: thread.anchor.kind,
+        quote: thread.anchor.quote,
+        confidence: thread.anchor.position ? "high" : "medium",
+        position: thread.anchor.position,
+        prefix: thread.anchor.prefix,
+        suffix: thread.anchor.suffix,
+        elementFingerprint: thread.anchor.elementFingerprint,
+        headingPath: thread.anchor.headingPath
+      },
+      messages: [
+        toBundleMessage(thread.root, "comment", reduced),
+        ...thread.replies.map((reply) => toBundleMessage(reply, "reply", reduced))
+      ]
+    })),
+    edits: reduced.edits.map((edit) => toBundleEdit(edit, reduced)),
+    invalidOps: reduced.invalidOps
+  };
+}
+function renderMarkdownBrief(bundle, options) {
+  const lines = [
+    `# Review Brief: ${bundle.title ?? bundle.docId}`,
+    "",
+    `**Reviewers:** ${bundle.summary.reviewers.length ? bundle.summary.reviewers.join(", ") : "None"}`,
+    `**Comments:** ${bundle.summary.openThreads} open, ${bundle.summary.resolvedThreads} resolved`,
+    `**Suggested edits:** ${bundle.summary.openEdits} open, ${bundle.summary.acceptedEdits} accepted, ${bundle.summary.rejectedEdits} rejected, ${bundle.summary.deletedEdits} deleted`,
+    "",
+    "## Comments",
+    ""
+  ];
+  if (bundle.threads.length === 0) {
+    lines.push("No comments.", "");
+  }
+  bundle.threads.forEach((thread, index) => {
+    const link = threadLink(options.reviewHref, thread.threadId);
+    lines.push(`### Comment ${index + 1}: ${thread.status}`);
+    lines.push("");
+    if (link) {
+      lines.push(`- [Open in review](${link})`);
+    }
+    const location = locationLabel(thread.anchor);
+    if (location) {
+      lines.push(`- Location: ${location}`);
+    }
+    lines.push(`- ID: \`${thread.threadId}\``);
+    lines.push("");
+    lines.push("Context:");
+    lines.push("");
+    lines.push("> " + renderAnchorContextMarkdown(thread.anchor));
+    lines.push("");
+    lines.push("Messages:");
+    for (const message of thread.messages) {
+      if (message.deleted) {
+        continue;
+      }
+      lines.push(`- ${message.actor}: ${message.body}`);
+    }
+    lines.push("");
+  });
+  lines.push("## Suggested Edits", "");
+  if (bundle.edits.length === 0) {
+    lines.push("No suggested edits.", "");
+  }
+  bundle.edits.forEach((edit, index) => {
+    const link = editLink(options.reviewHref, edit.editId);
+    lines.push(`### Edit ${index + 1}: ${edit.status} ${edit.kind}`);
+    lines.push("");
+    if (link) {
+      lines.push(`- [Open in review](${link})`);
+    }
+    const location = locationLabel(edit.anchor);
+    if (location) {
+      lines.push(`- Location: ${location}`);
+    }
+    lines.push(`- ID: \`${edit.editId}\``);
+    lines.push(`- Reviewer: ${edit.actor}`);
+    lines.push("");
+    lines.push("Context:");
+    lines.push("");
+    lines.push("> " + renderAnchorContextMarkdown(edit.anchor));
+    lines.push("");
+    if (edit.kind === "replace") {
+      lines.push(`Replace with: ${edit.replacement ?? ""}`);
+    } else if (edit.kind === "insert") {
+      lines.push(`Insert after selection: ${edit.replacement ?? ""}`);
+    } else {
+      lines.push("Delete selected text.");
+    }
+    if (edit.note) {
+      lines.push(`Note: ${edit.note}`);
+    }
+    lines.push("");
+  });
+  if (bundle.invalidOps.length > 0) {
+    lines.push("## Invalid Operations", "");
+    for (const invalid of bundle.invalidOps) {
+      lines.push(`- ${invalid.opId ?? "unknown"}: ${invalid.reason}`);
+    }
+  }
+  return `${lines.join(`
+`).trimEnd()}
+`;
+}
+function renderTextBrief(bundle) {
+  const lines = [
+    `Review Brief: ${bundle.title ?? bundle.docId}`,
+    `Reviewers: ${bundle.summary.reviewers.length ? bundle.summary.reviewers.join(", ") : "None"}`,
+    `Comments: ${bundle.summary.openThreads} open, ${bundle.summary.resolvedThreads} resolved`,
+    `Suggested edits: ${bundle.summary.openEdits} open, ${bundle.summary.acceptedEdits} accepted, ${bundle.summary.rejectedEdits} rejected, ${bundle.summary.deletedEdits} deleted`
+  ];
+  bundle.threads.forEach((thread, index) => {
+    lines.push("");
+    lines.push(`Comment ${index + 1}: ${thread.status}`);
+    const location = locationLabel(thread.anchor);
+    if (location) {
+      lines.push(`Location: ${location}`);
+    }
+    lines.push(`ID: ${thread.threadId}`);
+    lines.push(`Context: ${renderAnchorContextPlain(thread.anchor)}`);
+    for (const message of thread.messages) {
+      if (!message.deleted) {
+        lines.push(`${message.actor}: ${message.body}`);
+      }
+    }
+  });
+  bundle.edits.forEach((edit, index) => {
+    lines.push("");
+    lines.push(`Edit ${index + 1}: ${edit.status} ${edit.kind}`);
+    const location = locationLabel(edit.anchor);
+    if (location) {
+      lines.push(`Location: ${location}`);
+    }
+    lines.push(`ID: ${edit.editId}`);
+    lines.push(`Reviewer: ${edit.actor}`);
+    lines.push(`Context: ${renderAnchorContextPlain(edit.anchor)}`);
+    if (edit.kind === "replace") {
+      lines.push(`Replace with: ${edit.replacement ?? ""}`);
+    } else if (edit.kind === "insert") {
+      lines.push(`Insert after selection: ${edit.replacement ?? ""}`);
+    } else {
+      lines.push("Delete selected text.");
+    }
+    if (edit.note) {
+      lines.push(`Note: ${edit.note}`);
+    }
+  });
+  return `${lines.join(`
+`).trimEnd()}
+`;
+}
+function renderAgentBrief(bundle, options) {
+  const inferredThreadActions = bundle.threads.filter((thread) => thread.status === "open").map((thread) => ({ thread, inference: inferThreadReplacement(thread) })).filter((entry) => Boolean(entry.inference));
+  const inferredThreadIds = new Set(inferredThreadActions.map((entry) => entry.thread.threadId));
+  const actionableEdits = bundle.edits.filter((edit) => edit.status === "open" || edit.status === "accepted");
+  const questionThreads = bundle.threads.filter((thread) => thread.status === "open" && !inferredThreadIds.has(thread.threadId));
+  const lines = [
+    `# Agent Review Plan: ${bundle.title ?? bundle.docId}`,
+    "",
+    `Reviewers: ${bundle.summary.reviewers.length ? bundle.summary.reviewers.join(", ") : "None"}`,
+    `Open comments: ${bundle.summary.openThreads}`,
+    `Open suggested edits: ${bundle.summary.openEdits}`,
+    "",
+    "Use `html-collab extract --format json` as the deterministic source of truth when applying these actions.",
+    "Preserve thread/edit IDs in work notes and report any inferred changes as inferred.",
+    "",
+    "## Direct Actions",
+    ""
+  ];
+  if (actionableEdits.length === 0 && inferredThreadActions.length === 0) {
+    lines.push("No direct actions found.", "");
+  }
+  for (const edit of actionableEdits) {
+    const link = editLink(options.reviewHref, edit.editId);
+    lines.push(`- ${agentEditActionLabel(edit)}`);
+    lines.push(`  - Source: edit \`${edit.editId}\`${link ? ` (${link})` : ""}`);
+    lines.push(`  - Status: ${edit.status}`);
+    lines.push("  - Confidence: high");
+    lines.push(`  - Context: ${renderAnchorContextPlain(edit.anchor)}`);
+    if (edit.note) {
+      lines.push(`  - Reviewer note: ${edit.note}`);
+    }
+    lines.push("");
+  }
+  for (const { thread, inference } of inferredThreadActions) {
+    const link = threadLink(options.reviewHref, thread.threadId);
+    lines.push(`- Replace selected text \`${thread.anchor.quote}\` with \`${inference.replacement}\``);
+    lines.push(`  - Source: comment \`${thread.threadId}\`${link ? ` (${link})` : ""}`);
+    lines.push("  - Confidence: medium");
+    lines.push(`  - Reason: ${inference.reason}`);
+    lines.push(`  - Context: ${renderAnchorContextPlain(thread.anchor)}`);
+    lines.push("");
+  }
+  lines.push("## Questions", "");
+  if (questionThreads.length === 0) {
+    lines.push("No blocking questions from open comments.", "");
+  }
+  for (const thread of questionThreads) {
+    const link = threadLink(options.reviewHref, thread.threadId);
+    lines.push(`- Clarify comment \`${thread.threadId}\`${link ? ` (${link})` : ""}`);
+    lines.push(`  - Context: ${renderAnchorContextPlain(thread.anchor)}`);
+    for (const message of thread.messages) {
+      if (!message.deleted) {
+        lines.push(`  - ${message.actor}: ${message.body}`);
+      }
+    }
+    lines.push("");
+  }
+  lines.push("## Suggested Edits", "");
+  if (bundle.edits.length === 0) {
+    lines.push("No suggested edits.", "");
+  }
+  for (const edit of bundle.edits) {
+    const link = editLink(options.reviewHref, edit.editId);
+    lines.push(`- \`${edit.editId}\`: ${edit.status} ${edit.kind}${link ? ` (${link})` : ""}`);
+    if (edit.kind === "replace") {
+      lines.push(`  - Replace \`${edit.anchor.quote}\` with \`${edit.replacement ?? ""}\``);
+    } else if (edit.kind === "insert") {
+      lines.push(`  - Insert \`${edit.replacement ?? ""}\` after \`${edit.anchor.quote}\``);
+    } else {
+      lines.push(`  - Delete \`${edit.anchor.quote}\``);
+    }
+  }
+  if (bundle.invalidOps.length > 0) {
+    lines.push("", "## Invalid Operations", "");
+    for (const invalid of bundle.invalidOps) {
+      lines.push(`- ${invalid.opId ?? "unknown"}: ${invalid.reason}`);
+    }
+  }
+  return `${lines.join(`
+`).trimEnd()}
+`;
+}
+function toBundleMessage(message, type, reduced) {
+  return {
+    messageId: message.messageId,
+    actor: reduced.actors[message.actorId]?.name ?? message.actorId,
+    actorId: message.actorId,
+    type,
+    body: message.body,
+    deleted: message.deleted
+  };
+}
+function toBundleEdit(edit, reduced) {
+  return {
+    editId: edit.editId,
+    status: edit.status,
+    kind: edit.kind,
+    actor: reduced.actors[edit.actorId]?.name ?? edit.actorId,
+    actorId: edit.actorId,
+    anchor: {
+      kind: edit.anchor.kind,
+      quote: edit.anchor.quote,
+      confidence: edit.anchor.position ? "high" : "medium",
+      position: edit.anchor.position,
+      prefix: edit.anchor.prefix,
+      suffix: edit.anchor.suffix,
+      elementFingerprint: edit.anchor.elementFingerprint,
+      headingPath: edit.anchor.headingPath
+    },
+    replacement: edit.replacement,
+    note: edit.note,
+    createdAt: edit.createdAt,
+    updatedAt: edit.updatedAt
+  };
+}
+function agentEditActionLabel(edit) {
+  if (edit.kind === "replace") {
+    return `Replace selected text \`${edit.anchor.quote}\` with \`${edit.replacement ?? ""}\``;
+  }
+  if (edit.kind === "insert") {
+    return `Insert \`${edit.replacement ?? ""}\` after selected text \`${edit.anchor.quote}\``;
+  }
+  return `Delete selected text \`${edit.anchor.quote}\``;
+}
+function inferThreadReplacement(thread) {
+  const message = lastVisibleMessage(thread);
+  if (!message) {
+    return;
+  }
+  const body = collapseWhitespace(message.body);
+  const quoted = extractQuotedReplacement(body);
+  if (quoted) {
+    return {
+      replacement: quoted,
+      reason: `${message.actor} said "${body}" on selected text "${thread.anchor.quote}".`
+    };
+  }
+  const patterns = [
+    /^(?:please\s+)?(?:change|replace)\s+(?:this|it|that|selection|selected text|the selected text)?\s*(?:with|to|into)\s+(.+)$/i,
+    /^(?:please\s+)?(?:use)\s+(.+?)\s+instead$/i,
+    /^(?:please\s+)?(?:make)\s+(?:this|it|that|selection|selected text|the selected text)\s+(.+)$/i,
+    /^(?:please\s+)?(?:this|it|that|selection|selected text|the selected text)\s+should\s+be\s+(.+)$/i
+  ];
+  for (const pattern of patterns) {
+    const match = pattern.exec(body);
+    if (!match?.[1]) {
+      continue;
+    }
+    const replacement = cleanReplacementLiteral(match[1]);
+    if (isLikelyLiteralReplacement(replacement, thread.anchor.quote)) {
+      return {
+        replacement,
+        reason: `${message.actor} said "${body}" on selected text "${thread.anchor.quote}".`
+      };
+    }
+  }
+  return;
+}
+function lastVisibleMessage(thread) {
+  return thread.messages.filter((message) => !message.deleted).at(-1);
+}
+function extractQuotedReplacement(body) {
+  const match = /(?:change|replace|make|use|should be|to|with)\s+["'“”‘’`](.+?)["'“”‘’`]/i.exec(body);
+  return match?.[1] ? cleanReplacementLiteral(match[1]) : undefined;
+}
+function cleanReplacementLiteral(value) {
+  return value.trim().replace(/^["'“”‘’`]+|["'“”‘’`]+$/g, "").replace(/[.!?]$/g, "").trim();
+}
+function isLikelyLiteralReplacement(replacement, quote) {
+  if (!replacement) {
+    return false;
+  }
+  if (/^-?\d+(?:\.\d+)?$/.test(replacement)) {
+    return true;
+  }
+  if (replacement.length <= 24 && !/\s/.test(replacement) && !/[.,;:!?]/.test(replacement) && quote.length <= 40) {
+    return true;
+  }
+  return false;
+}
+function threadLink(reviewHref, threadId) {
+  if (!reviewHref) {
+    return;
+  }
+  return `${reviewHref}#${threadElementId(threadId)}`;
+}
+function threadElementId(threadId) {
+  return `html-collab-thread-${encodeURIComponent(threadId)}`;
+}
+function editLink(reviewHref, editId) {
+  if (!reviewHref) {
+    return;
+  }
+  return `${reviewHref}#${editElementId(editId)}`;
+}
+function editElementId(editId) {
+  return `html-collab-edit-${encodeURIComponent(editId)}`;
+}
+function locationLabel(anchor) {
+  const heading = anchor.headingPath?.at(-1);
+  if (heading && !sameText(heading, anchor.quote) && !containsText(heading, anchor.quote)) {
+    return truncate(heading, 96);
+  }
+  return;
+}
+function renderAnchorContextMarkdown(anchor) {
+  const prefix = collapseWhitespace(anchor.prefix ?? "");
+  const quote = collapseWhitespace(anchor.quote);
+  const suffix = collapseWhitespace(anchor.suffix ?? "");
+  const head = prefix ? `…${escapeMarkdownInline(prefix)} ` : "";
+  const tail = suffix ? ` ${escapeMarkdownInline(suffix)}…` : "";
+  return `${head}**${escapeMarkdownInline(quote)}**${tail}`;
+}
+function renderAnchorContextPlain(anchor) {
+  const prefix = collapseWhitespace(anchor.prefix ?? "");
+  const quote = collapseWhitespace(anchor.quote);
+  const suffix = collapseWhitespace(anchor.suffix ?? "");
+  const head = prefix ? `…${prefix} ` : "";
+  const tail = suffix ? ` ${suffix}…` : "";
+  return `${head}«${quote}»${tail}`;
+}
+function collapseWhitespace(value) {
+  return value.replace(/\s+/g, " ").trim();
+}
+function truncate(value, max) {
+  const collapsed = collapseWhitespace(value);
+  if (collapsed.length <= max) {
+    return collapsed;
+  }
+  return `${collapsed.slice(0, max - 1)}…`;
+}
+function sameText(left, right) {
+  return collapseWhitespace(left).toLowerCase() === collapseWhitespace(right).toLowerCase();
+}
+function containsText(haystack, needle) {
+  return collapseWhitespace(haystack).toLowerCase().includes(collapseWhitespace(needle).toLowerCase());
+}
+function escapeMarkdownInline(value) {
+  return value.replace(/([\\`*_{}\[\]()#+\-!|>])/g, "\\$1");
+}
+
+// src/format/html-envelope.ts
+import { createHash, randomUUID } from "node:crypto";
+import { basename } from "node:path";
+
+// src/runtime/index.ts
+var iframeLoaderRuntime = String.raw`
+(() => {
+  const SOURCE_SCRIPT_ID = "html-collab-source";
+  const STATE_SCRIPT_ID = "html-collab-state";
+  const ACTOR_STORAGE_PREFIX = "html-collab.actor.";
+  const AUTOSAVE_DELAY_MS = 700;
+  const EDIT_VIEW_STORAGE_KEY = "html-collab.editView";
+
+  let state;
+  let sourceHtml = "";
+  let selectedAnchor = null;
+  let editViewMode = "markup";
+  let autosaveHandle = null;
+  let autosaveEnabled = false;
+  let autosaveTimer = 0;
+  let autosaveInFlight = false;
+  let autosaveQueued = false;
+  let autosavePrompted = false;
+  let autosavePromptInFlight = false;
+
+  function readJsonScript(id) {
+    const node = document.getElementById(id);
+    if (!node) {
+      throw new Error("Missing " + id + " script");
+    }
+    return JSON.parse(node.textContent || "{}");
+  }
+
+  function writeJsonScript(id, value) {
+    const node = document.getElementById(id);
+    if (!node) {
+      throw new Error("Missing " + id + " script");
+    }
+    node.textContent = JSON.stringify(value, null, 2).replace(/[<>&]/g, (character) => {
+      if (character === "<") return "\\u003c";
+      if (character === ">") return "\\u003e";
+      return "\\u0026";
+    });
+  }
+
+  function decodeBase64Utf8(value) {
+    const binary = atob(value);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index += 1) {
+      bytes[index] = binary.charCodeAt(index);
+    }
+    return new TextDecoder().decode(bytes);
+  }
+
+  function loadSourceFrame() {
+    const frame = getFrame();
+    frame.addEventListener("load", () => {
+      installFrameSelectionHandlers();
+      renderHighlights();
+      renderThreads();
+      focusFromLocationHash();
+    });
+    frame.srcdoc = sourceHtml;
+  }
+
+  function reloadSourceFrame() {
+    getFrame().srcdoc = sourceHtml;
+  }
+
+  function refreshHighlights() {
+    const viewport = captureFrameViewport();
+    clearHighlights();
+    renderHighlights();
+    restoreFrameViewport(viewport);
+  }
+
+  function captureFrameViewport() {
+    const frame = getFrame();
+    const frameWindow = frame.contentWindow;
+    const frameDocument = frame.contentDocument;
+    if (!frameWindow || !frameDocument || !frameDocument.documentElement) {
+      return null;
+    }
+
+    const width = frameDocument.documentElement.clientWidth || frameWindow.innerWidth || 0;
+    const height = frameDocument.documentElement.clientHeight || frameWindow.innerHeight || 0;
+    const points = [
+      [0.5, 0.25],
+      [0.5, 0.5],
+      [0.35, 0.25],
+      [0.65, 0.25],
+    ];
+
+    for (const [xRatio, yRatio] of points) {
+      const element = restorableViewportElement(
+        frameDocument,
+        frameDocument.elementFromPoint(Math.round(width * xRatio), Math.round(height * yRatio)),
+      );
+      if (element) {
+        return {
+          x: frameWindow.scrollX,
+          y: frameWindow.scrollY,
+          anchor: element,
+          anchorTop: element.getBoundingClientRect().top,
+        };
+      }
+    }
+
+    return {
+      x: frameWindow.scrollX,
+      y: frameWindow.scrollY,
+    };
+  }
+
+  function restorableViewportElement(frameDocument, element) {
+    let current = element;
+    while (current && current !== frameDocument.body && current !== frameDocument.documentElement) {
+      if (
+        current.matches?.(
+          "mark[data-html-collab-thread],mark[data-html-collab-edit],del,ins,.html-collab-edit-preview-replacement",
+        )
+      ) {
+        current = current.parentElement;
+        continue;
+      }
+      return current;
+    }
+    return null;
+  }
+
+  function restoreFrameViewport(viewport) {
+    if (!viewport) {
+      return;
+    }
+
+    const restore = () => {
+      const frameWindow = getFrame().contentWindow;
+      if (!frameWindow) {
+        return;
+      }
+      if (viewport.anchor?.isConnected && typeof viewport.anchorTop === "number") {
+        const delta = viewport.anchor.getBoundingClientRect().top - viewport.anchorTop;
+        frameWindow.scrollTo(viewport.x, frameWindow.scrollY + delta);
+        return;
+      }
+      frameWindow.scrollTo(viewport.x, viewport.y);
+    };
+
+    restore();
+    window.requestAnimationFrame(restore);
+  }
+
+  function clearHighlights() {
+    const frameDocument = getFrame().contentDocument;
+    if (!frameDocument || !frameDocument.body) {
+      return;
+    }
+    const marks = frameDocument.querySelectorAll('mark[data-html-collab-thread],mark[data-html-collab-edit]');
+    marks.forEach((mark) => {
+      const parent = mark.parentNode;
+      if (!parent) {
+        return;
+      }
+      if (mark.dataset.htmlCollabEdit && typeof mark.dataset.htmlCollabOriginal === "string") {
+        parent.insertBefore(frameDocument.createTextNode(mark.dataset.htmlCollabOriginal), mark);
+        parent.removeChild(mark);
+        return;
+      }
+      while (mark.firstChild) {
+        parent.insertBefore(mark.firstChild, mark);
+      }
+      parent.removeChild(mark);
+    });
+    frameDocument.body.normalize();
+  }
+
+  function getFrame() {
+    const frame = document.getElementById("html-collab-source-frame");
+    if (!(frame instanceof HTMLIFrameElement)) {
+      throw new Error("Missing html-collab source iframe");
+    }
+    return frame;
+  }
+
+  function init() {
+    const source = readJsonScript(SOURCE_SCRIPT_ID);
+    if (source.encoding !== "base64" || typeof source.html !== "string") {
+      throw new Error("Unsupported html-collab source payload");
+    }
+
+    sourceHtml = decodeBase64Utf8(source.html);
+    state = readJsonScript(STATE_SCRIPT_ID);
+    hydrateReviewer();
+    hydrateEditView();
+    bindShellEvents();
+    loadSourceFrame();
+    renderThreads();
+    updateAutosaveButton();
+    focusFromLocationHash();
+    setStatus("Ready");
+  }
+
+  function bindShellEvents() {
+    const addButton = document.getElementById("html-collab-add-comment");
+    const editButton = document.getElementById("html-collab-suggest-edit");
+    const autosaveButton = document.getElementById("html-collab-autosave");
+    const mergeButton = document.getElementById("html-collab-merge");
+    const mergeInput = document.getElementById("html-collab-merge-files");
+    const briefButton = document.getElementById("html-collab-brief");
+    const reviewerInput = document.getElementById("html-collab-reviewer");
+    const editView = document.getElementById("html-collab-edit-view");
+    const cancelButton = document.getElementById("html-collab-cancel-comment");
+    const submitButton = document.getElementById("html-collab-submit-comment");
+    const commentBody = document.getElementById("html-collab-comment-body");
+    const editKind = document.getElementById("html-collab-edit-kind");
+    const editReplacement = document.getElementById("html-collab-edit-replacement");
+    const editNote = document.getElementById("html-collab-edit-note");
+    const cancelEditButton = document.getElementById("html-collab-cancel-edit");
+    const submitEditButton = document.getElementById("html-collab-submit-edit");
+    const contextCommentButton = document.getElementById("html-collab-context-comment");
+    const contextEditButton = document.getElementById("html-collab-context-edit");
+    const hotkeysButton = document.getElementById("html-collab-hotkeys-button");
+
+    addButton?.addEventListener("click", () => openCommentComposer());
+    editButton?.addEventListener("click", () => openEditComposer());
+    contextCommentButton?.addEventListener("click", () => {
+      hideSelectionMenu();
+      openCommentComposer();
+    });
+    contextEditButton?.addEventListener("click", () => {
+      hideSelectionMenu();
+      openEditComposer();
+    });
+    hotkeysButton?.addEventListener("click", () => toggleHotkeys());
+    autosaveButton?.addEventListener("click", () => requestAutosave());
+    mergeButton?.addEventListener("click", () => mergeInput?.click());
+    briefButton?.addEventListener("click", () => openBriefModal());
+    document.getElementById("html-collab-brief-copy")?.addEventListener("click", () => copyBriefToClipboard());
+    document.getElementById("html-collab-brief-download")?.addEventListener("click", () => downloadReviewBrief());
+    document.getElementById("html-collab-brief-close")?.addEventListener("click", () => closeBriefModal());
+    document.getElementById("html-collab-brief-modal")?.addEventListener("click", (event) => {
+      if (event.target === event.currentTarget) closeBriefModal();
+    });
+    mergeInput?.addEventListener("change", () => mergeSelectedFiles(mergeInput));
+    cancelButton?.addEventListener("click", () => closeCommentComposer());
+    submitButton?.addEventListener("click", () => submitComment());
+    commentBody?.addEventListener("keydown", (event) => handleCommentComposerKeydown(event));
+    editKind?.addEventListener("change", () => updateEditComposerKind());
+    editKind?.addEventListener("keydown", (event) => handleEditComposerKeydown(event));
+    editReplacement?.addEventListener("keydown", (event) => handleEditComposerKeydown(event));
+    editNote?.addEventListener("keydown", (event) => handleEditComposerKeydown(event));
+    cancelEditButton?.addEventListener("click", () => closeEditComposer());
+    submitEditButton?.addEventListener("click", () => submitEditSuggestion());
+    editView?.addEventListener("change", () => updateEditView(editView));
+    window.addEventListener("hashchange", () => focusFromLocationHash());
+    window.addEventListener("resize", () => hideSelectionMenu());
+    document.addEventListener("click", (event) => {
+      const menu = document.getElementById("html-collab-context-menu");
+      if (menu instanceof HTMLElement && !menu.contains(event.target)) {
+        hideSelectionMenu();
+      }
+      const hotkeys = document.getElementById("html-collab-hotkeys");
+      const hotkeysButton = document.getElementById("html-collab-hotkeys-button");
+      if (
+        hotkeys instanceof HTMLElement &&
+        hotkeysButton instanceof HTMLElement &&
+        !hotkeys.hidden &&
+        !hotkeys.contains(event.target) &&
+        !hotkeysButton.contains(event.target)
+      ) {
+        hideHotkeys();
+      }
+    });
+    document.addEventListener("keydown", (event) => handleReviewShortcut(event));
+    reviewerInput?.addEventListener("change", () => {
+      if (!currentReviewerName()) {
+        return;
+      }
+      const actor = ensureActor();
+      if (!actor) {
+        return;
+      }
+      actor.name = currentReviewerName();
+      state.actors[actor.actorId] = actor;
+      persistState();
+      renderThreads();
+    });
+  }
+
+  function hydrateReviewer() {
+    const input = document.getElementById("html-collab-reviewer");
+    if (!(input instanceof HTMLInputElement)) {
+      return;
+    }
+
+    const storedName = localStorage.getItem("html-collab.reviewerName");
+    input.value = storedName || "";
+  }
+
+  function hydrateEditView() {
+    const input = document.getElementById("html-collab-edit-view");
+    const stored = localStorage.getItem(EDIT_VIEW_STORAGE_KEY);
+    editViewMode = stored === "preview" ? "preview" : "markup";
+    if (input instanceof HTMLSelectElement) {
+      input.value = editViewMode;
+    }
+  }
+
+  function updateEditView(input) {
+    if (!(input instanceof HTMLSelectElement)) {
+      return;
+    }
+    editViewMode = input.value === "preview" ? "preview" : "markup";
+    localStorage.setItem(EDIT_VIEW_STORAGE_KEY, editViewMode);
+    refreshHighlights();
+    setStatus(editViewMode === "preview" ? "Previewing replacements" : "Showing tracked changes");
+  }
+
+  function installFrameSelectionHandlers() {
+    const frame = getFrame();
+    const frameDocument = frame.contentDocument;
+    if (!frameDocument) {
+      return;
+    }
+
+    frameDocument.addEventListener("mouseup", captureSelection);
+    frameDocument.addEventListener("keyup", captureSelection);
+    frameDocument.addEventListener("selectionchange", captureSelection);
+    frameDocument.addEventListener("contextmenu", showSelectionMenu);
+    frameDocument.addEventListener("keydown", (event) => handleReviewShortcut(event));
+    frameDocument.addEventListener("scroll", () => hideSelectionMenu(), true);
+  }
+
+  function captureSelection() {
+    const anchor = getSelectionAnchor();
+    selectedAnchor = anchor;
+    if (!anchor) {
+      hideSelectionMenu();
+    }
+    const addButton = document.getElementById("html-collab-add-comment");
+    const editButton = document.getElementById("html-collab-suggest-edit");
+    if (addButton instanceof HTMLButtonElement) {
+      addButton.disabled = !anchor;
+    }
+    if (editButton instanceof HTMLButtonElement) {
+      editButton.disabled = !anchor;
+    }
+    if (anchor) {
+      setStatus("Text selected");
+    }
+  }
+
+  function showSelectionMenu(event) {
+    const anchor = getSelectionAnchor();
+    selectedAnchor = anchor;
+    if (!anchor) {
+      hideSelectionMenu();
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    setSelectionButtonsEnabled(true);
+
+    const frame = getFrame();
+    const menu = document.getElementById("html-collab-context-menu");
+    if (!(menu instanceof HTMLElement)) {
+      return;
+    }
+
+    const frameRect = frame.getBoundingClientRect();
+    menu.hidden = false;
+    const left = frameRect.left + event.clientX;
+    const top = frameRect.top + event.clientY;
+    const width = menu.offsetWidth || 128;
+    const height = menu.offsetHeight || 82;
+    menu.style.left = Math.min(left, window.innerWidth - width - 8) + "px";
+    menu.style.top = Math.min(top, window.innerHeight - height - 8) + "px";
+  }
+
+  function hideSelectionMenu() {
+    const menu = document.getElementById("html-collab-context-menu");
+    if (menu instanceof HTMLElement) {
+      menu.hidden = true;
+    }
+  }
+
+  function toggleHotkeys() {
+    const hotkeys = document.getElementById("html-collab-hotkeys");
+    const button = document.getElementById("html-collab-hotkeys-button");
+    if (!(hotkeys instanceof HTMLElement)) {
+      return;
+    }
+    hotkeys.hidden = !hotkeys.hidden;
+    if (button instanceof HTMLButtonElement) {
+      button.setAttribute("aria-expanded", hotkeys.hidden ? "false" : "true");
+    }
+  }
+
+  function hideHotkeys() {
+    const hotkeys = document.getElementById("html-collab-hotkeys");
+    const button = document.getElementById("html-collab-hotkeys-button");
+    if (hotkeys instanceof HTMLElement) {
+      hotkeys.hidden = true;
+    }
+    if (button instanceof HTMLButtonElement) {
+      button.setAttribute("aria-expanded", "false");
+    }
+  }
+
+  function handleReviewShortcut(event) {
+    if (event.defaultPrevented || isEditableEventTarget(event.target)) {
+      return;
+    }
+    const key = event.key.toLowerCase();
+    if (!selectedAnchor && (key === "c" || key === "e")) {
+      selectedAnchor = getSelectionAnchor();
+    }
+
+    if (key === "escape") {
+      const briefModal = document.getElementById("html-collab-brief-modal");
+      if (briefModal && !briefModal.hidden) {
+        closeBriefModal();
+        return;
+      }
+      hideSelectionMenu();
+      hideHotkeys();
+      closeCommentComposer();
+      closeEditComposer();
+      return;
+    }
+    if (!selectedAnchor || event.metaKey || event.ctrlKey || event.altKey) {
+      return;
+    }
+    if (key === "c") {
+      event.preventDefault();
+      hideSelectionMenu();
+      openCommentComposer();
+      return;
+    }
+    if (key === "e") {
+      event.preventDefault();
+      hideSelectionMenu();
+      openEditComposer();
+    }
+  }
+
+  function handleCommentComposerKeydown(event) {
+    if (event.isComposing) {
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeCommentComposer();
+      setStatus("Comment canceled");
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submitComment();
+    }
+  }
+
+  function handleEditComposerKeydown(event) {
+    if (event.isComposing) {
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeEditComposer();
+      setStatus("Edit canceled");
+      return;
+    }
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submitEditSuggestion();
+    }
+  }
+
+  function isInteractiveClickTarget(target) {
+    if (!(target instanceof Element)) {
+      return false;
+    }
+    return Boolean(target.closest("button, textarea, input, select, a, label"));
+  }
+
+  function isEditableEventTarget(target) {
+    if (!target || target.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const tagName = target.tagName.toLowerCase();
+    return tagName === "input" || tagName === "textarea" || tagName === "select" || target.isContentEditable;
+  }
+
+  function setSelectionButtonsEnabled(enabled) {
+    const addButton = document.getElementById("html-collab-add-comment");
+    const editButton = document.getElementById("html-collab-suggest-edit");
+    if (addButton instanceof HTMLButtonElement) {
+      addButton.disabled = !enabled;
+    }
+    if (editButton instanceof HTMLButtonElement) {
+      editButton.disabled = !enabled;
+    }
+  }
+
+  function getSelectionAnchor() {
+    const frame = getFrame();
+    const frameDocument = frame.contentDocument;
+    const frameWindow = frame.contentWindow;
+    if (!frameDocument || !frameWindow) {
+      return null;
+    }
+
+    const selection = frameWindow.getSelection();
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return null;
+    }
+
+    const range = selection.getRangeAt(0);
+    const quote = selection.toString();
+    if (!quote.trim()) {
+      return null;
+    }
+
+    const fullText = frameDocument.body?.textContent || "";
+    const start = textOffsetForRangeBoundary(frameDocument.body, range.startContainer, range.startOffset);
+    const end = textOffsetForRangeBoundary(frameDocument.body, range.endContainer, range.endOffset);
+    const safeStart = Math.max(0, start);
+    const safeEnd = Math.max(safeStart, end);
+
+    return {
+      kind: "text",
+      quote,
+      prefix: fullText.slice(Math.max(0, safeStart - 40), safeStart),
+      suffix: fullText.slice(safeEnd, Math.min(fullText.length, safeEnd + 40)),
+      position: {
+        start: safeStart,
+        end: safeEnd,
+      },
+      elementFingerprint: elementFingerprint(range.commonAncestorContainer),
+      headingPath: headingPathForNode(frameDocument, range.commonAncestorContainer),
+    };
+  }
+
+  function headingPathForNode(frameDocument, node) {
+    if (!frameDocument || !frameDocument.body || !node) {
+      return [];
+    }
+    const target = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    if (!target) {
+      return [];
+    }
+    const headings = frameDocument.body.querySelectorAll("h1,h2,h3,h4,h5,h6");
+    const stack = [];
+    headings.forEach((heading) => {
+      if (heading === target) {
+        return;
+      }
+      const relation = heading.compareDocumentPosition(target);
+      const headingPrecedesTarget = (relation & Node.DOCUMENT_POSITION_FOLLOWING) !== 0
+        || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY) !== 0;
+      if (!headingPrecedesTarget) {
+        return;
+      }
+      const level = parseInt(heading.tagName.slice(1), 10) || 1;
+      while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+        stack.pop();
+      }
+      stack.push({ level, heading });
+    });
+    return stack
+      .map((entry) => (entry.heading.textContent || "").replace(/\s+/g, " ").trim())
+      .filter((text) => text.length > 0)
+      .slice(-4)
+      .map((text) => (text.length > 80 ? text.slice(0, 79) + "…" : text));
+  }
+
+  function textOffsetForRangeBoundary(root, targetNode, targetOffset) {
+    if (!root) {
+      return 0;
+    }
+
+    let offset = 0;
+    const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node) {
+      if (node === targetNode) {
+        return offset + targetOffset;
+      }
+      offset += node.textContent.length;
+      node = walker.nextNode();
+    }
+
+    return offset;
+  }
+
+  function elementFingerprint(node) {
+    const element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    if (!element) {
+      return "";
+    }
+
+    const parts = [];
+    let current = element;
+    while (current && current.tagName && parts.length < 4) {
+      parts.unshift(current.tagName.toLowerCase());
+      current = current.parentElement;
+    }
+    return parts.join("/");
+  }
+
+  function openCommentComposer() {
+    if (!selectedAnchor) {
+      setStatus("Select text in the report first");
+      return;
+    }
+
+    const composer = document.getElementById("html-collab-composer");
+    const quote = document.getElementById("html-collab-selected-quote");
+    const body = document.getElementById("html-collab-comment-body");
+    if (!(composer instanceof HTMLElement) || !(quote instanceof HTMLElement)) {
+      return;
+    }
+
+    closeEditComposer();
+    quote.textContent = selectedAnchor.quote;
+    composer.hidden = false;
+    if (body instanceof HTMLTextAreaElement) {
+      body.value = "";
+      body.focus();
+    }
+  }
+
+  function closeCommentComposer() {
+    const composer = document.getElementById("html-collab-composer");
+    if (composer instanceof HTMLElement) {
+      composer.hidden = true;
+    }
+  }
+
+  function openEditComposer() {
+    if (!selectedAnchor) {
+      setStatus("Select text in the report first");
+      return;
+    }
+
+    const composer = document.getElementById("html-collab-edit-composer");
+    const quote = document.getElementById("html-collab-edit-selected-quote");
+    const replacement = document.getElementById("html-collab-edit-replacement");
+    const note = document.getElementById("html-collab-edit-note");
+    const kind = document.getElementById("html-collab-edit-kind");
+    if (!(composer instanceof HTMLElement) || !(quote instanceof HTMLElement)) {
+      return;
+    }
+
+    closeCommentComposer();
+    quote.textContent = selectedAnchor.quote;
+    composer.hidden = false;
+    if (kind instanceof HTMLSelectElement) {
+      kind.value = "replace";
+    }
+    if (replacement instanceof HTMLTextAreaElement) {
+      replacement.value = "";
+      replacement.focus();
+    }
+    if (note instanceof HTMLTextAreaElement) {
+      note.value = "";
+    }
+    updateEditComposerKind();
+  }
+
+  function closeEditComposer() {
+    const composer = document.getElementById("html-collab-edit-composer");
+    if (composer instanceof HTMLElement) {
+      composer.hidden = true;
+    }
+  }
+
+  function updateEditComposerKind() {
+    const kind = document.getElementById("html-collab-edit-kind");
+    const replacement = document.getElementById("html-collab-edit-replacement");
+    if (!(kind instanceof HTMLSelectElement) || !(replacement instanceof HTMLTextAreaElement)) {
+      return;
+    }
+    const isDelete = kind.value === "delete";
+    replacement.disabled = isDelete;
+    replacement.placeholder = isDelete ? "No replacement for delete suggestions" : "Replacement or inserted text";
+  }
+
+  function submitComment() {
+    const body = document.getElementById("html-collab-comment-body");
+    if (!(body instanceof HTMLTextAreaElement) || !selectedAnchor) {
+      return;
+    }
+
+    const text = body.value.trim();
+    if (!text) {
+      setStatus("Comment body is empty");
+      return;
+    }
+
+    const threadId = createId("thread");
+    const op = addOp("comment.create", selectedAnchor, {
+      threadId,
+      body: text,
+    });
+    if (!op) {
+      return;
+    }
+    closeCommentComposer();
+    selectedAnchor = null;
+    refreshHighlights();
+    renderThreads();
+    setStatus("Comment added");
+  }
+
+  function submitEditSuggestion() {
+    if (!selectedAnchor) {
+      return;
+    }
+
+    const kindInput = document.getElementById("html-collab-edit-kind");
+    const replacementInput = document.getElementById("html-collab-edit-replacement");
+    const noteInput = document.getElementById("html-collab-edit-note");
+    if (!(kindInput instanceof HTMLSelectElement) || !(replacementInput instanceof HTMLTextAreaElement)) {
+      return;
+    }
+
+    const kind = kindInput.value;
+    const replacement = replacementInput.value.trim();
+    const note = noteInput instanceof HTMLTextAreaElement ? noteInput.value.trim() : "";
+    if (kind !== "replace" && kind !== "insert" && kind !== "delete") {
+      setStatus("Choose an edit type");
+      return;
+    }
+    if (kind !== "delete" && !replacement) {
+      setStatus("Suggested text is empty");
+      return;
+    }
+
+    const payload = {
+      editId: createId("edit"),
+      kind,
+    };
+    if (kind !== "delete") {
+      payload.replacement = replacement;
+    }
+    if (note) {
+      payload.note = note;
+    }
+    const op = addOp("edit.suggest", selectedAnchor, payload);
+    if (!op) {
+      return;
+    }
+    closeEditComposer();
+    selectedAnchor = null;
+    refreshHighlights();
+    renderThreads();
+    setStatus("Edit suggested");
+  }
+
+  function renderHighlights() {
+    const frameDocument = getFrame().contentDocument;
+    if (!frameDocument) {
+      return;
+    }
+
+    installHighlightStyles(frameDocument);
+    const reduced = reduceState(state);
+    reduced.threads.forEach((thread, index) => {
+      if (thread.root.deleted) {
+        return;
+      }
+      const className = thread.status === "resolved" ? "html-collab-mark-resolved" : "html-collab-mark-open";
+      highlightAnchor(frameDocument, thread.anchor, thread.threadId, String(index + 1), className);
+    });
+    reduced.edits.forEach((edit, index) => {
+      if (edit.status === "deleted") {
+        return;
+      }
+      const className = "html-collab-edit-" + edit.status + " html-collab-edit-" + edit.kind;
+      highlightEdit(frameDocument, edit, String(index + 1), className);
+    });
+  }
+
+  function installHighlightStyles(frameDocument) {
+    if (frameDocument.getElementById("html-collab-highlight-styles")) {
+      return;
+    }
+
+    const style = frameDocument.createElement("style");
+    style.id = "html-collab-highlight-styles";
+    style.textContent = [
+      "mark[data-html-collab-thread]{padding:0 2px;border-radius:3px;cursor:pointer;}",
+      "mark.html-collab-mark-open{background:#fff08a;box-shadow:0 0 0 1px rgba(184,134,11,.22);}",
+      "mark.html-collab-mark-resolved{background:#dbeafe;box-shadow:0 0 0 1px rgba(37,99,235,.18);}",
+      "mark[data-html-collab-edit]{padding:0 2px;border-radius:3px;cursor:pointer;box-shadow:0 0 0 1px rgba(22,101,52,.2);}",
+      "mark.html-collab-edit-open{background:#dcfce7;}",
+      "mark.html-collab-edit-accepted{background:#bbf7d0;}",
+      "mark.html-collab-edit-rejected{background:#f1f5f9;color:#64748b;text-decoration:line-through;}",
+      "mark.html-collab-edit-delete{text-decoration:line-through;text-decoration-thickness:2px;}",
+      "html{overflow-anchor:none;}",
+      ".html-collab-edit-original{text-decoration:line-through;text-decoration-thickness:2px;color:#64748b;}",
+      ".html-collab-edit-inline-replacement{background:#bbf7d0;color:#14532d;text-decoration:none;padding:0 2px;border-radius:3px;}",
+      ".html-collab-edit-inline-replacement::before{content:' ';}",
+      ".html-collab-edit-preview-replacement{background:#bbf7d0;color:#14532d;text-decoration:none;padding:0 2px;border-radius:3px;}",
+      "mark.html-collab-mark-active{outline:2px solid #2563eb;outline-offset:3px;border-radius:3px;animation:html-collab-mark-pulse 1400ms ease-out;}",
+      "@keyframes html-collab-mark-pulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.55);}40%{box-shadow:0 0 0 8px rgba(37,99,235,.15);}100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}}",
+    ].join("");
+    frameDocument.head?.appendChild(style);
+  }
+
+  function highlightEdit(frameDocument, edit, number, className) {
+    if (!edit || !edit.anchor) {
+      return false;
+    }
+    if (edit.anchor.position && wrapEditRangeByOffsets(frameDocument, edit.anchor.position.start, edit.anchor.position.end, edit, number, className)) {
+      return true;
+    }
+    return wrapFirstEditQuote(frameDocument, edit.anchor.quote, edit, number, className);
+  }
+
+  function highlightAnchor(frameDocument, anchor, threadId, number, className) {
+    if (anchor.position && wrapRangeByOffsets(frameDocument, anchor.position.start, anchor.position.end, threadId, number, className)) {
+      return true;
+    }
+    return wrapFirstQuote(frameDocument, anchor.quote, threadId, number, className);
+  }
+
+  function wrapRangeByOffsets(frameDocument, start, end, threadId, number, className) {
+    if (end <= start) {
+      return false;
+    }
+
+    const body = frameDocument.body;
+    const range = frameDocument.createRange();
+    let offset = 0;
+    let foundStart = false;
+    let foundEnd = false;
+    const walker = frameDocument.createTreeWalker(body, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node) {
+      const nextOffset = offset + node.textContent.length;
+      if (!foundStart && start >= offset && start <= nextOffset) {
+        range.setStart(node, start - offset);
+        foundStart = true;
+      }
+      if (foundStart && end >= offset && end <= nextOffset) {
+        range.setEnd(node, end - offset);
+        foundEnd = true;
+        break;
+      }
+      offset = nextOffset;
+      node = walker.nextNode();
+    }
+
+    if (!foundStart || !foundEnd || range.collapsed) {
+      return false;
+    }
+
+    return surroundRange(frameDocument, range, threadId, number, className);
+  }
+
+  function wrapFirstQuote(frameDocument, quote, threadId, number, className) {
+    const body = frameDocument.body;
+    const walker = frameDocument.createTreeWalker(body, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node) {
+      const index = node.textContent.indexOf(quote);
+      if (index !== -1) {
+        const range = frameDocument.createRange();
+        range.setStart(node, index);
+        range.setEnd(node, index + quote.length);
+        return surroundRange(frameDocument, range, threadId, number, className);
+      }
+      node = walker.nextNode();
+    }
+    return false;
+  }
+
+  function wrapEditRangeByOffsets(frameDocument, start, end, edit, number, className) {
+    if (end <= start) {
+      return false;
+    }
+
+    const body = frameDocument.body;
+    const range = frameDocument.createRange();
+    let offset = 0;
+    let foundStart = false;
+    let foundEnd = false;
+    const walker = frameDocument.createTreeWalker(body, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node) {
+      const nextOffset = offset + node.textContent.length;
+      if (!foundStart && start >= offset && start <= nextOffset) {
+        range.setStart(node, start - offset);
+        foundStart = true;
+      }
+      if (foundStart && end >= offset && end <= nextOffset) {
+        range.setEnd(node, end - offset);
+        foundEnd = true;
+        break;
+      }
+      offset = nextOffset;
+      node = walker.nextNode();
+    }
+
+    if (!foundStart || !foundEnd || range.collapsed) {
+      return false;
+    }
+
+    return surroundEditRange(frameDocument, range, edit, number, className);
+  }
+
+  function wrapFirstEditQuote(frameDocument, quote, edit, number, className) {
+    const body = frameDocument.body;
+    const walker = frameDocument.createTreeWalker(body, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node) {
+      const index = node.textContent.indexOf(quote);
+      if (index !== -1) {
+        const range = frameDocument.createRange();
+        range.setStart(node, index);
+        range.setEnd(node, index + quote.length);
+        return surroundEditRange(frameDocument, range, edit, number, className);
+      }
+      node = walker.nextNode();
+    }
+    return false;
+  }
+
+  function surroundRange(frameDocument, range, threadId, number, className) {
+    const mark = frameDocument.createElement("mark");
+    mark.dataset.htmlCollabThread = threadId;
+    mark.dataset.htmlCollabNumber = number;
+    mark.className = className;
+    mark.addEventListener("click", () => focusThread(threadId));
+
+    try {
+      range.surroundContents(mark);
+      return true;
+    } catch {
+      const contents = range.extractContents();
+      mark.appendChild(contents);
+      range.insertNode(mark);
+      return true;
+    }
+  }
+
+  function surroundEditRange(frameDocument, range, edit, number, className) {
+    const mark = frameDocument.createElement("mark");
+    mark.dataset.htmlCollabEdit = edit.editId;
+    mark.dataset.htmlCollabNumber = number;
+    mark.dataset.htmlCollabOriginal = range.toString();
+    if (edit.replacement) {
+      mark.dataset.htmlCollabReplacement = edit.replacement;
+    }
+    mark.className = className;
+    mark.addEventListener("click", () => focusEdit(edit.editId));
+
+    try {
+      const contents = range.extractContents();
+      appendTrackedEditContents(frameDocument, mark, contents, edit);
+      range.insertNode(mark);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  function appendTrackedEditContents(frameDocument, mark, contents, edit) {
+    if (editViewMode === "preview" && edit.status !== "rejected") {
+      appendPreviewEditContents(frameDocument, mark, contents, edit);
+      return;
+    }
+
+    if (edit.kind === "replace") {
+      const original = frameDocument.createElement("del");
+      original.className = "html-collab-edit-original";
+      original.appendChild(contents);
+      mark.appendChild(original);
+      appendInlineReplacement(frameDocument, mark, edit.replacement || "");
+      return;
+    }
+
+    mark.appendChild(contents);
+    if (edit.kind === "insert") {
+      appendInlineReplacement(frameDocument, mark, edit.replacement || "");
+    }
+  }
+
+  function appendInlineReplacement(frameDocument, mark, text) {
+    const replacement = frameDocument.createElement("ins");
+    replacement.className = "html-collab-edit-inline-replacement";
+    replacement.textContent = text;
+    mark.appendChild(replacement);
+  }
+
+  function appendPreviewEditContents(frameDocument, mark, contents, edit) {
+    if (edit.kind === "replace") {
+      const replacement = frameDocument.createElement("span");
+      replacement.className = "html-collab-edit-preview-replacement";
+      replacement.textContent = edit.replacement || "";
+      mark.appendChild(replacement);
+      return;
+    }
+
+    if (edit.kind === "insert") {
+      mark.appendChild(contents);
+      appendInlineReplacement(frameDocument, mark, edit.replacement || "");
+      return;
+    }
+
+    mark.textContent = "";
+  }
+
+  function renderThreads() {
+    const list = document.getElementById("html-collab-thread-list");
+    const empty = document.getElementById("html-collab-empty");
+    if (!(list instanceof HTMLElement)) {
+      return;
+    }
+
+    const reduced = reduceState(state);
+    list.textContent = "";
+    if (empty instanceof HTMLElement) {
+      empty.hidden = reduced.threads.length + reduced.edits.length > 0;
+    }
+
+    const frame = document.getElementById("html-collab-source-frame");
+    const frameDoc = frame instanceof HTMLIFrameElement ? frame.contentDocument : null;
+    const docText = frameDoc && frameDoc.body ? frameDoc.body.textContent || "" : "";
+
+    const items = [];
+    reduced.threads.forEach((thread) => {
+      items.push({
+        kind: "thread",
+        data: thread,
+        position: anchorPosition(thread.anchor, docText),
+        createdAt: thread.createdAt,
+      });
+    });
+    reduced.edits.forEach((edit) => {
+      items.push({
+        kind: "edit",
+        data: edit,
+        position: anchorPosition(edit.anchor, docText, edit.replacement),
+        createdAt: edit.createdAt,
+      });
+    });
+
+    items.sort((left, right) => {
+      const leftPos = left.position == null ? Infinity : left.position;
+      const rightPos = right.position == null ? Infinity : right.position;
+      if (leftPos !== rightPos) {
+        return leftPos - rightPos;
+      }
+      return left.createdAt.localeCompare(right.createdAt);
+    });
+
+    items.forEach((item, index) => {
+      const number = index + 1;
+      if (item.kind === "thread") {
+        list.appendChild(renderThread(item.data, number));
+      } else {
+        list.appendChild(renderEdit(item.data, number));
+      }
+    });
+  }
+
+  function anchorPosition(anchor, docText, replacement) {
+    if (anchor && anchor.position && typeof anchor.position.start === "number") {
+      return anchor.position.start;
+    }
+    if (anchor && typeof anchor.quote === "string" && docText) {
+      const index = docText.indexOf(anchor.quote);
+      if (index >= 0) {
+        return index;
+      }
+    }
+    if (typeof replacement === "string" && docText) {
+      const index = docText.indexOf(replacement);
+      if (index >= 0) {
+        return index;
+      }
+    }
+    return null;
+  }
+
+  function renderPanelHeading(text) {
+    const heading = document.createElement("h2");
+    heading.className = "html-collab-panel-heading";
+    heading.textContent = text;
+    return heading;
+  }
+
+  function renderThread(thread, number) {
+    const article = document.createElement("article");
+    article.className = "html-collab-thread";
+    article.id = threadElementId(thread.threadId);
+    article.dataset.threadId = thread.threadId;
+    article.addEventListener("click", (event) => {
+      if (isInteractiveClickTarget(event.target)) {
+        return;
+      }
+      setThreadHash(thread.threadId);
+      scrollToAnchor(thread.threadId);
+    });
+
+    const header = document.createElement("div");
+    header.className = "html-collab-thread-header";
+
+    const quote = document.createElement("blockquote");
+    quote.className = "html-collab-thread-quote";
+    quote.textContent = thread.anchor.quote;
+
+    const pin = document.createElement("div");
+    pin.className = "html-collab-thread-pin";
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "html-collab-thread-number";
+    button.textContent = String(number);
+    button.addEventListener("click", () => {
+      setThreadHash(thread.threadId);
+      scrollToAnchor(thread.threadId);
+    });
+
+    const status = document.createElement("span");
+    status.className = "html-collab-thread-status";
+    status.textContent = thread.status;
+
+    pin.append(button, status);
+    header.append(quote, pin);
+    article.appendChild(header);
+
+    article.appendChild(renderMessage(thread.root, "comment"));
+    thread.replies.forEach((reply) => article.appendChild(renderMessage(reply, "reply")));
+
+    const replyBlock = document.createElement("div");
+    replyBlock.className = "html-collab-thread-reply";
+
+    const reply = document.createElement("textarea");
+    reply.className = "html-collab-reply-body";
+    reply.rows = 1;
+    reply.placeholder = "Reply";
+    reply.addEventListener("input", () => {
+      reply.style.height = "auto";
+      reply.style.height = reply.scrollHeight + "px";
+    });
+
+    const replyActions = document.createElement("div");
+    replyActions.className = "html-collab-thread-actions";
+
+    const replyButton = document.createElement("button");
+    replyButton.type = "button";
+    replyButton.textContent = "Reply";
+    replyButton.addEventListener("click", () => {
+      const body = reply.value.trim();
+      if (!body) {
+        return;
+      }
+      const op = addOp("reply.create", { threadId: thread.threadId, parentId: thread.root.messageId }, { body });
+      if (!op) {
+        return;
+      }
+      reply.value = "";
+      renderThreads();
+      setStatus("Reply added");
+    });
+
+    const resolveButton = document.createElement("button");
+    resolveButton.type = "button";
+    resolveButton.textContent = thread.status === "resolved" ? "Reopen" : "Resolve";
+    resolveButton.addEventListener("click", () => {
+      const op = addOp(thread.status === "resolved" ? "thread.reopen" : "thread.resolve", { threadId: thread.threadId }, {});
+      if (!op) {
+        return;
+      }
+      refreshHighlights();
+      renderThreads();
+      setStatus(thread.status === "resolved" ? "Thread reopened" : "Thread resolved");
+    });
+
+    replyActions.append(replyButton, resolveButton);
+    replyBlock.append(reply, replyActions);
+    article.appendChild(replyBlock);
+    return article;
+  }
+
+  function renderEdit(edit, number) {
+    const article = document.createElement("article");
+    article.className = "html-collab-thread html-collab-edit-suggestion";
+    article.id = editElementId(edit.editId);
+    article.dataset.editId = edit.editId;
+    article.addEventListener("click", (event) => {
+      if (isInteractiveClickTarget(event.target)) {
+        return;
+      }
+      setEditHash(edit.editId);
+      scrollToEdit(edit.editId);
+    });
+
+    const header = document.createElement("div");
+    header.className = "html-collab-thread-header";
+
+    const quote = document.createElement("blockquote");
+    quote.className = "html-collab-thread-quote";
+    quote.textContent = edit.anchor.quote;
+
+    const pin = document.createElement("div");
+    pin.className = "html-collab-thread-pin";
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "html-collab-thread-number";
+    button.textContent = "E" + number;
+    button.addEventListener("click", () => {
+      setEditHash(edit.editId);
+      scrollToEdit(edit.editId);
+    });
+
+    const status = document.createElement("span");
+    status.className = "html-collab-thread-status";
+    status.textContent = edit.status;
+
+    pin.append(button, status);
+    header.append(quote, pin);
+    article.appendChild(header);
+
+    const meta = document.createElement("div");
+    meta.className = "html-collab-message-meta";
+    const actor = state.actors[edit.actorId];
+    const author = document.createElement("span");
+    author.textContent = (actor?.name || edit.actorId) + " · " + formatTime(edit.createdAt);
+    meta.appendChild(author);
+    article.appendChild(meta);
+
+    const detail = document.createElement("p");
+    detail.className = "html-collab-edit-detail";
+    if (edit.kind === "replace") {
+      detail.textContent = "Replace with: ";
+      const replacement = document.createElement("span");
+      replacement.className = "html-collab-edit-replacement";
+      replacement.textContent = edit.replacement || "";
+      detail.appendChild(replacement);
+    } else if (edit.kind === "insert") {
+      detail.textContent = "Insert after selection: ";
+      const replacement = document.createElement("span");
+      replacement.className = "html-collab-edit-replacement";
+      replacement.textContent = edit.replacement || "";
+      detail.appendChild(replacement);
+    } else {
+      detail.textContent = "Delete selected text.";
+    }
+    article.appendChild(detail);
+
+    if (edit.note) {
+      const note = document.createElement("p");
+      note.className = "html-collab-edit-note";
+      note.textContent = edit.note;
+      article.appendChild(note);
+    }
+
+    if (edit.status === "deleted") {
+      return article;
+    }
+
+    const actions = document.createElement("div");
+    actions.className = "html-collab-thread-actions";
+
+    const deleteButton = document.createElement("button");
+    deleteButton.type = "button";
+    deleteButton.className = "html-collab-action-secondary";
+    deleteButton.textContent = "Delete";
+    deleteButton.addEventListener("click", () => {
+      const op = addOp("edit.delete", { editId: edit.editId }, {});
+      if (!op) {
+        return;
+      }
+      refreshHighlights();
+      renderThreads();
+      setStatus("Edit deleted");
+    });
+    actions.appendChild(deleteButton);
+
+    if (edit.status === "open") {
+      const accept = document.createElement("button");
+      accept.type = "button";
+      accept.textContent = "Accept";
+      accept.addEventListener("click", () => {
+        const op = addOp("edit.accept", { editId: edit.editId }, {});
+        if (!op) {
+          return;
+        }
+        refreshHighlights();
+        renderThreads();
+        setStatus("Edit accepted");
+      });
+
+      const reject = document.createElement("button");
+      reject.type = "button";
+      reject.textContent = "Reject";
+      reject.addEventListener("click", () => {
+        const op = addOp("edit.reject", { editId: edit.editId }, {});
+        if (!op) {
+          return;
+        }
+        refreshHighlights();
+        renderThreads();
+        setStatus("Edit rejected");
+      });
+
+      actions.append(accept, reject);
+    }
+
+    article.appendChild(actions);
+    return article;
+  }
+
+  function renderMessage(message, type) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "html-collab-message";
+
+    const meta = document.createElement("div");
+    meta.className = "html-collab-message-meta";
+    const actor = state.actors[message.actorId];
+    const author = document.createElement("span");
+    author.textContent = (actor?.name || message.actorId) + " · " + formatTime(message.createdAt);
+    meta.appendChild(author);
+
+    if (!message.deleted) {
+      const deleteLink = document.createElement("button");
+      deleteLink.type = "button";
+      deleteLink.className = "html-collab-action-secondary";
+      deleteLink.textContent = "Delete";
+      deleteLink.addEventListener("click", () => {
+        const opType = type === "comment" ? "comment.delete" : "reply.delete";
+        const op = addOp(opType, { messageId: message.messageId }, {});
+        if (!op) {
+          return;
+        }
+        refreshHighlights();
+        renderThreads();
+        setStatus(type === "comment" ? "Comment deleted" : "Reply deleted");
+      });
+      meta.appendChild(deleteLink);
+    }
+
+    const body = document.createElement("p");
+    body.textContent = message.deleted ? "Deleted" : message.body;
+    if (message.deleted) {
+      body.className = "html-collab-message-deleted";
+    }
+
+    wrapper.append(meta, body);
+    return wrapper;
+  }
+
+  function focusThread(threadId) {
+    const thread = document.getElementById(threadElementId(threadId));
+    if (thread instanceof HTMLElement) {
+      thread.scrollIntoView({ block: "nearest" });
+      thread.classList.add("html-collab-thread-active");
+      window.setTimeout(() => thread.classList.remove("html-collab-thread-active"), 1200);
+    }
+  }
+
+  function focusEdit(editId) {
+    const edit = document.getElementById(editElementId(editId));
+    if (edit instanceof HTMLElement) {
+      edit.scrollIntoView({ block: "nearest" });
+      edit.classList.add("html-collab-thread-active");
+      window.setTimeout(() => edit.classList.remove("html-collab-thread-active"), 1200);
+    }
+  }
+
+  function scrollToAnchor(threadId) {
+    const frameDocument = getFrame().contentDocument;
+    const mark = frameDocument?.querySelector('[data-html-collab-thread="' + cssEscape(threadId) + '"]');
+    if (mark && typeof mark.scrollIntoView === "function") {
+      mark.scrollIntoView({ block: "center", behavior: "smooth" });
+      pulseMark(mark);
+    }
+  }
+
+  function scrollToEdit(editId) {
+    const frameDocument = getFrame().contentDocument;
+    const mark = frameDocument?.querySelector('[data-html-collab-edit="' + cssEscape(editId) + '"]');
+    if (mark && typeof mark.scrollIntoView === "function") {
+      mark.scrollIntoView({ block: "center", behavior: "smooth" });
+      pulseMark(mark);
+    }
+  }
+
+  function pulseMark(mark) {
+    if (!mark || !mark.classList) {
+      return;
+    }
+    mark.classList.remove("html-collab-mark-active");
+    void mark.offsetWidth;
+    mark.classList.add("html-collab-mark-active");
+    window.setTimeout(() => mark.classList.remove("html-collab-mark-active"), 1400);
+  }
+
+  function addOp(type, target, payload) {
+    const actor = ensureActor();
+    if (!actor) {
+      return null;
+    }
+    const clock = nextClock();
+    const op = {
+      opId: actor.actorId + ":" + nextActorCounter(actor.actorId),
+      actorId: actor.actorId,
+      time: new Date().toISOString(),
+      clock,
+      type,
+      target,
+      payload,
+    };
+    state.ops.push(op);
+    persistState();
+    void requestAutosave({ automatic: true });
+    return op;
+  }
+
+  function ensureActor() {
+    const name = currentReviewerName() || promptReviewerName();
+    if (!name) {
+      setStatus("Enter your name to continue");
+      return null;
+    }
+    localStorage.setItem("html-collab.reviewerName", name);
+
+    const key = ACTOR_STORAGE_PREFIX + state.docId;
+    let actorId = localStorage.getItem(key);
+    if (!actorId) {
+      actorId = createId("actor");
+      localStorage.setItem(key, actorId);
+    }
+
+    const actor = state.actors[actorId] || {
+      actorId,
+      name,
+      createdAt: new Date().toISOString(),
+    };
+    actor.name = name;
+    state.actors[actorId] = actor;
+    return actor;
+  }
+
+  function currentReviewerName() {
+    const input = document.getElementById("html-collab-reviewer");
+    if (input instanceof HTMLInputElement && input.value.trim()) {
+      return input.value.trim();
+    }
+    return "";
+  }
+
+  function promptReviewerName() {
+    const input = document.getElementById("html-collab-reviewer");
+    const suggested = input instanceof HTMLInputElement ? input.value.trim() : "";
+    const name = window.prompt("Enter your name for this review", suggested);
+    const trimmed = name?.trim() || "";
+    if (!trimmed) {
+      if (input instanceof HTMLInputElement) {
+        input.focus();
+      }
+      return "";
+    }
+    if (input instanceof HTMLInputElement) {
+      input.value = trimmed;
+    }
+    return trimmed;
+  }
+
+  function nextClock() {
+    return state.ops.reduce((max, op) => Math.max(max, Number(op.clock) || 0), 0) + 1;
+  }
+
+  function nextActorCounter(actorId) {
+    let max = 0;
+    for (const op of state.ops) {
+      if (typeof op.opId !== "string" || !op.opId.startsWith(actorId + ":")) {
+        continue;
+      }
+      const value = Number(op.opId.slice(actorId.length + 1));
+      if (Number.isFinite(value)) {
+        max = Math.max(max, value);
+      }
+    }
+    return max + 1;
+  }
+
+  function persistState(options = {}) {
+    writeJsonScript(STATE_SCRIPT_ID, state);
+    if (options.autosave !== false) {
+      scheduleAutosave();
+    }
+  }
+
+  async function requestAutosave(options = {}) {
+    if (autosaveEnabled && autosaveHandle) {
+      await autosaveNow();
+      return;
+    }
+    if (autosavePromptInFlight || (options.automatic && autosavePrompted)) {
+      return;
+    }
+
+    if (typeof window.showSaveFilePicker !== "function") {
+      setStatus("Autosave needs a Chromium browser; changes are only in this tab");
+      return;
+    }
+
+    try {
+      autosavePrompted = true;
+      autosavePromptInFlight = true;
+      setStatus(options.automatic ? "Choose where to save this local review file" : "Choose a local review file to keep changes");
+      const handle = await window.showSaveFilePicker({
+        suggestedName: reviewFilename(),
+        types: [
+          {
+            description: "HTML review file",
+            accept: { "text/html": [".html"] },
+          },
+        ],
+      });
+      await assertAutosaveTarget(handle);
+      autosaveHandle = handle;
+      autosaveEnabled = true;
+      updateAutosaveButton();
+      persistState({ autosave: false });
+      await autosaveNow();
+    } catch (error) {
+      autosaveEnabled = false;
+      autosaveHandle = null;
+      updateAutosaveButton();
+      if (error?.name === "AbortError") {
+        setStatus("Autosave not enabled; choose a local review file before closing this tab");
+      } else {
+        setStatus("Autosave failed: " + errorMessage(error));
+      }
+    } finally {
+      autosavePromptInFlight = false;
+    }
+  }
+
+  async function assertAutosaveTarget(handle) {
+    if (!handle || typeof handle.getFile !== "function") {
+      return;
+    }
+
+    const file = await handle.getFile();
+    if (!file || file.size === 0) {
+      return;
+    }
+
+    const existingHtml = await file.text();
+    const existingState = parseJsonScriptFromHtml(existingHtml, STATE_SCRIPT_ID);
+    if (existingState.docId !== state.docId || existingState.sourceFingerprint !== state.sourceFingerprint) {
+      throw new Error("selected file is a different review");
+    }
+  }
+
+  function scheduleAutosave() {
+    if (!autosaveEnabled || !autosaveHandle) {
+      return;
+    }
+    if (autosaveTimer) {
+      window.clearTimeout(autosaveTimer);
+    }
+    autosaveTimer = window.setTimeout(() => {
+      autosaveTimer = 0;
+      autosaveNow();
+    }, AUTOSAVE_DELAY_MS);
+  }
+
+  async function autosaveNow() {
+    if (!autosaveEnabled || !autosaveHandle) {
+      return;
+    }
+    if (autosaveInFlight) {
+      autosaveQueued = true;
+      return;
+    }
+
+    autosaveInFlight = true;
+    updateAutosaveButton();
+    try {
+      const mergeResult = await mergeAutosaveTarget();
+      const writable = await autosaveHandle.createWritable();
+      await writable.write(serializeReviewHtml());
+      await writable.close();
+      if (mergeResult.addedOps > 0 || mergeResult.addedActors > 0) {
+        setStatus(
+          "Merged " +
+            mergeResult.addedOps +
+            " synced ops and autosaved " +
+            shortTime(new Date()),
+        );
+      } else {
+        setStatus("Autosaved " + shortTime(new Date()));
+      }
+    } catch (error) {
+      autosaveEnabled = false;
+      autosaveHandle = null;
+      autosaveQueued = false;
+      setStatus("Autosave failed: " + errorMessage(error));
+    } finally {
+      autosaveInFlight = false;
+      updateAutosaveButton();
+      if (autosaveQueued && autosaveEnabled) {
+        autosaveQueued = false;
+        scheduleAutosave();
+      }
+    }
+  }
+
+  async function mergeAutosaveTarget() {
+    if (!autosaveHandle || typeof autosaveHandle.getFile !== "function") {
+      return { addedOps: 0, addedActors: 0 };
+    }
+
+    const file = await autosaveHandle.getFile();
+    if (!file || file.size === 0) {
+      return { addedOps: 0, addedActors: 0 };
+    }
+
+    const existingHtml = await file.text();
+    const existingState = parseJsonScriptFromHtml(existingHtml, STATE_SCRIPT_ID);
+    const result = mergeImportedState(existingState);
+    if (result.addedOps > 0 || result.addedActors > 0) {
+      writeJsonScript(STATE_SCRIPT_ID, state);
+      refreshHighlights();
+      renderThreads();
+    }
+    return result;
+  }
+
+  function serializeReviewHtml() {
+    return "<!doctype html>\n" + document.documentElement.outerHTML;
+  }
+
+  function updateAutosaveButton() {
+    const button = document.getElementById("html-collab-autosave");
+    if (!(button instanceof HTMLButtonElement)) {
+      return;
+    }
+    button.textContent = autosaveInFlight ? "Autosaving" : autosaveEnabled ? "Autosave On" : "Autosave";
+    button.setAttribute("aria-pressed", autosaveEnabled ? "true" : "false");
+    button.title = autosaveEnabled ? "Autosave is writing feedback to the selected local review file" : "Choose a local review file. Until then changes live only in this tab";
+  }
+
+  async function mergeSelectedFiles(input) {
+    if (!(input instanceof HTMLInputElement) || !input.files || input.files.length === 0) {
+      return;
+    }
+
+    let addedOps = 0;
+    let addedActors = 0;
+    let rejected = 0;
+
+    for (const file of Array.from(input.files)) {
+      try {
+        const importedHtml = await file.text();
+        const importedState = parseJsonScriptFromHtml(importedHtml, STATE_SCRIPT_ID);
+        const result = mergeImportedState(importedState);
+        addedOps += result.addedOps;
+        addedActors += result.addedActors;
+      } catch {
+        rejected += 1;
+      }
+    }
+
+    input.value = "";
+    persistState();
+    refreshHighlights();
+    renderThreads();
+
+    const message = rejected > 0
+      ? "Merged " + addedOps + " ops; rejected " + rejected + " file" + (rejected === 1 ? "" : "s")
+      : "Merged " + addedOps + " ops";
+    setStatus(message + (addedActors > 0 ? " from " + addedActors + " reviewer" + (addedActors === 1 ? "" : "s") : ""));
+  }
+
+  function mergeImportedState(importedState) {
+    if (!importedState || importedState.docId !== state.docId) {
+      throw new Error("docId mismatch");
+    }
+    if (importedState.sourceFingerprint !== state.sourceFingerprint) {
+      throw new Error("source fingerprint mismatch");
+    }
+
+    let addedOps = 0;
+    let addedActors = 0;
+    const existingOps = new Set(state.ops.map((op) => op.opId));
+
+    for (const [actorId, actor] of Object.entries(importedState.actors || {})) {
+      if (!state.actors[actorId]) {
+        addedActors += 1;
+        state.actors[actorId] = actor;
+      }
+    }
+
+    for (const op of importedState.ops || []) {
+      if (!op || typeof op.opId !== "string" || existingOps.has(op.opId)) {
+        continue;
+      }
+      state.ops.push(op);
+      existingOps.add(op.opId);
+      addedOps += 1;
+    }
+
+    state.ops.sort(compareOps);
+    return { addedOps, addedActors };
+  }
+
+  function parseJsonScriptFromHtml(html, id) {
+    const pattern = /<script\b[^>]*>/gi;
+    let match = pattern.exec(html);
+    while (match) {
+      const openTag = match[0];
+      if (new RegExp("\\bid\\s*=\\s*([\"'])" + escapeRegExp(id) + "\\1", "i").test(openTag)) {
+        const contentStart = match.index + openTag.length;
+        const closeIndex = html.indexOf("<" + "/script>", contentStart);
+        if (closeIndex === -1) {
+          throw new Error("Missing closing script for " + id);
+        }
+        return JSON.parse(html.slice(contentStart, closeIndex));
+      }
+      match = pattern.exec(html);
+    }
+    throw new Error("Missing " + id);
+  }
+
+  function openBriefModal() {
+    const modal = document.getElementById("html-collab-brief-modal");
+    const body = document.getElementById("html-collab-brief-body");
+    if (!modal || !body) {
+      return;
+    }
+    body.textContent = renderMarkdownBrief();
+    resetBriefCopyButton();
+    modal.hidden = false;
+    setStatus("Brief ready — copy or download");
+  }
+
+  function closeBriefModal() {
+    const modal = document.getElementById("html-collab-brief-modal");
+    if (modal) {
+      modal.hidden = true;
+    }
+  }
+
+  function resetBriefCopyButton() {
+    const button = document.getElementById("html-collab-brief-copy");
+    if (button instanceof HTMLButtonElement) {
+      button.textContent = "Copy";
+      button.classList.remove("is-success");
+      button.disabled = false;
+    }
+  }
+
+  function copyBriefToClipboard() {
+    const brief = renderMarkdownBrief();
+    const button = document.getElementById("html-collab-brief-copy");
+    const markCopied = () => {
+      if (button instanceof HTMLButtonElement) {
+        button.textContent = "Copied";
+        button.classList.add("is-success");
+      }
+      setStatus("Brief copied to clipboard");
+      window.setTimeout(resetBriefCopyButton, 2400);
+    };
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(brief).then(markCopied).catch(() => copyBriefFallback(brief, markCopied));
+      return;
+    }
+    copyBriefFallback(brief, markCopied);
+  }
+
+  function copyBriefFallback(brief, onSuccess) {
+    const textarea = document.createElement("textarea");
+    textarea.value = brief;
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+      document.execCommand("copy");
+      onSuccess();
+    } catch (error) {
+      setStatus("Could not copy — try Download .md");
+    } finally {
+      textarea.remove();
+    }
+  }
+
+  function downloadReviewBrief() {
+    const brief = renderMarkdownBrief();
+    const blob = new Blob([brief], { type: "text/markdown;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = briefFilename();
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+    setStatus("Brief downloaded");
+  }
+
+  function renderMarkdownBrief() {
+    const reduced = reduceState(state);
+    const reviewers = Object.values(state.actors || {})
+      .map((actor) => actor.name)
+      .filter(Boolean)
+      .sort((left, right) => left.localeCompare(right));
+    const openThreads = reduced.threads.filter((thread) => thread.status === "open").length;
+    const resolvedThreads = reduced.threads.filter((thread) => thread.status === "resolved").length;
+    const openEdits = reduced.edits.filter((edit) => edit.status === "open").length;
+    const acceptedEdits = reduced.edits.filter((edit) => edit.status === "accepted").length;
+    const rejectedEdits = reduced.edits.filter((edit) => edit.status === "rejected").length;
+    const deletedEdits = reduced.edits.filter((edit) => edit.status === "deleted").length;
+    const lines = [
+      "# Review Brief: " + (state.title || state.docId),
+      "",
+      "**Reviewers:** " + (reviewers.length ? reviewers.join(", ") : "None"),
+      "**Comments:** " + openThreads + " open, " + resolvedThreads + " resolved",
+      "**Suggested edits:** " + openEdits + " open, " + acceptedEdits + " accepted, " + rejectedEdits + " rejected, " + deletedEdits + " deleted",
+      "",
+      "## Comments",
+      "",
+    ];
+
+    if (reduced.threads.length === 0) {
+      lines.push("No comments.", "");
+    }
+
+    reduced.threads.forEach((thread, index) => {
+      lines.push("### Comment " + (index + 1) + ": " + thread.status);
+      lines.push("");
+      lines.push("- [Open in review](" + reviewThreadHref(thread.threadId) + ")");
+      const location = locationLabel(thread.anchor);
+      if (location) {
+        lines.push("- Location: " + location);
+      }
+      lines.push("- ID: " + thread.threadId);
+      lines.push("");
+      lines.push("Context:");
+      lines.push("");
+      lines.push("> " + renderAnchorContextMarkdown(thread.anchor));
+      lines.push("");
+      lines.push("Messages:");
+      const messages = [thread.root].concat(thread.replies);
+      for (const message of messages) {
+        if (!message.deleted) {
+          const actor = state.actors[message.actorId]?.name || message.actorId;
+          lines.push("- " + actor + ": " + message.body);
+        }
+      }
+      lines.push("");
+    });
+
+    lines.push("## Suggested Edits", "");
+    if (reduced.edits.length === 0) {
+      lines.push("No suggested edits.", "");
+    }
+
+    reduced.edits.forEach((edit, index) => {
+      lines.push("### Edit " + (index + 1) + ": " + edit.status + " " + edit.kind);
+      lines.push("");
+      lines.push("- [Open in review](" + reviewEditHref(edit.editId) + ")");
+      const location = locationLabel(edit.anchor);
+      if (location) {
+        lines.push("- Location: " + location);
+      }
+      const actor = state.actors[edit.actorId]?.name || edit.actorId;
+      lines.push("- ID: " + edit.editId);
+      lines.push("- Reviewer: " + actor);
+      lines.push("");
+      lines.push("Context:");
+      lines.push("");
+      lines.push("> " + renderAnchorContextMarkdown(edit.anchor));
+      lines.push("");
+      if (edit.kind === "replace") {
+        lines.push("Replace with: " + (edit.replacement || ""));
+      } else if (edit.kind === "insert") {
+        lines.push("Insert after selection: " + (edit.replacement || ""));
+      } else {
+        lines.push("Delete selected text.");
+      }
+      if (edit.note) {
+        lines.push("Note: " + edit.note);
+      }
+      lines.push("");
+    });
+
+    return lines.join("\n").trimEnd() + "\n";
+  }
+
+  function locationLabel(anchor) {
+    const path = Array.isArray(anchor.headingPath) ? anchor.headingPath : [];
+    const heading = path[path.length - 1];
+    if (heading && !sameText(heading, anchor.quote) && !containsText(heading, anchor.quote)) {
+      return truncate(heading, 96);
+    }
+    return "";
+  }
+
+  function renderAnchorContextMarkdown(anchor) {
+    const prefix = collapseWhitespace(anchor.prefix || "");
+    const quote = collapseWhitespace(anchor.quote || "");
+    const suffix = collapseWhitespace(anchor.suffix || "");
+    const head = prefix ? "…" + escapeMarkdownInline(prefix) + " " : "";
+    const tail = suffix ? " " + escapeMarkdownInline(suffix) + "…" : "";
+    return head + "**" + escapeMarkdownInline(quote) + "**" + tail;
+  }
+
+  function collapseWhitespace(value) {
+    return String(value).replace(/\s+/g, " ").trim();
+  }
+
+  function truncate(value, max) {
+    const collapsed = collapseWhitespace(value);
+    if (collapsed.length <= max) {
+      return collapsed;
+    }
+    return collapsed.slice(0, max - 1) + "…";
+  }
+
+  function sameText(left, right) {
+    return collapseWhitespace(left).toLowerCase() === collapseWhitespace(right).toLowerCase();
+  }
+
+  function containsText(haystack, needle) {
+    return collapseWhitespace(haystack).toLowerCase().includes(collapseWhitespace(needle).toLowerCase());
+  }
+
+  function escapeMarkdownInline(value) {
+    return String(value).replace(/([\\\`*_{}\[\]()#+\-!|>])/g, "\\$1");
+  }
+
+  function reviewThreadHref(threadId) {
+    return reviewFileHref() + "#" + threadElementId(threadId);
+  }
+
+  function reviewEditHref(editId) {
+    return reviewFileHref() + "#" + editElementId(editId);
+  }
+
+  function reviewFileHref() {
+    if (location.protocol === "file:" && location.href) {
+      return location.href.split("#")[0];
+    }
+    return reviewFilename();
+  }
+
+  function reviewFilename() {
+    const title = state.title || "report.html";
+    if (title.endsWith(".review.html")) {
+      return title;
+    }
+    if (title.endsWith(".html")) {
+      return title.slice(0, -5) + ".review.html";
+    }
+    return title + ".review.html";
+  }
+
+  function briefFilename() {
+    const title = state.title || "report.html";
+    if (title.endsWith(".review.html")) {
+      return title.slice(0, -12) + ".review-brief.md";
+    }
+    if (title.endsWith(".html")) {
+      return title.slice(0, -5) + ".review-brief.md";
+    }
+    return title + ".review-brief.md";
+  }
+
+  function reduceState(reviewState) {
+    const unique = new Map();
+    for (const op of reviewState.ops || []) {
+      if (op && typeof op.opId === "string") {
+        unique.set(op.opId, op);
+      }
+    }
+    const ops = Array.from(unique.values()).sort(compareOps);
+    const threads = new Map();
+    const messages = new Map();
+    const edits = new Map();
+
+    for (const op of ops) {
+      if (op.type === "comment.create") {
+        if (threads.has(op.payload.threadId)) {
+          continue;
+        }
+        const root = {
+          messageId: op.opId,
+          actorId: op.actorId,
+          body: op.payload.body,
+          deleted: false,
+          createdAt: op.time,
+          updatedAt: op.time,
+          updateOp: op,
+        };
+        const thread = {
+          threadId: op.payload.threadId,
+          status: "open",
+          anchor: op.target,
+          root,
+          replies: [],
+          createdAt: op.time,
+          statusOp: null,
+        };
+        threads.set(thread.threadId, thread);
+        messages.set(root.messageId, root);
+      } else if (op.type === "edit.suggest") {
+        const editId = op.payload.editId;
+        if (!editId || edits.has(editId)) {
+          continue;
+        }
+        edits.set(editId, {
+          editId,
+          status: "open",
+          kind: op.payload.kind,
+          anchor: op.target,
+          replacement: op.payload.replacement,
+          note: op.payload.note,
+          actorId: op.actorId,
+          createdAt: op.time,
+          updatedAt: op.time,
+          statusOp: null,
+        });
+      }
+    }
+
+    for (const op of ops) {
+      if (op.type === "reply.create") {
+        const thread = threads.get(op.target.threadId);
+        if (!thread) continue;
+        const reply = {
+          messageId: op.opId,
+          actorId: op.actorId,
+          body: op.payload.body,
+          deleted: false,
+          createdAt: op.time,
+          updatedAt: op.time,
+          updateOp: op,
+        };
+        thread.replies.push(reply);
+        messages.set(reply.messageId, reply);
+      } else if (op.type === "comment.edit" || op.type === "reply.edit") {
+        const message = messages.get(op.target.messageId);
+        if (message && compareOps(message.updateOp, op) <= 0) {
+          message.body = op.payload.body;
+          message.updatedAt = op.time;
+          message.updateOp = op;
+        }
+      } else if (op.type === "comment.delete" || op.type === "reply.delete") {
+        const message = messages.get(op.target.messageId);
+        if (message && compareOps(message.updateOp, op) <= 0) {
+          message.deleted = true;
+          message.updatedAt = op.time;
+          message.updateOp = op;
+        }
+      } else if (op.type === "thread.resolve" || op.type === "thread.reopen") {
+        const thread = threads.get(op.target.threadId);
+        if (thread && (!thread.statusOp || compareOps(thread.statusOp, op) <= 0)) {
+          thread.status = op.type === "thread.resolve" ? "resolved" : "open";
+          thread.statusOp = op;
+        }
+      } else if (op.type === "edit.accept" || op.type === "edit.reject" || op.type === "edit.delete") {
+        const edit = edits.get(op.target.editId);
+        if (edit && (!edit.statusOp || compareOps(edit.statusOp, op) <= 0)) {
+          edit.status = op.type === "edit.accept" ? "accepted" : op.type === "edit.reject" ? "rejected" : "deleted";
+          edit.updatedAt = op.time;
+          edit.statusOp = op;
+        }
+      }
+    }
+
+    return {
+      threads: Array.from(threads.values()).sort((left, right) => {
+        const created = left.createdAt.localeCompare(right.createdAt);
+        return created || left.threadId.localeCompare(right.threadId);
+      }),
+      edits: Array.from(edits.values()).sort((left, right) => {
+        const created = left.createdAt.localeCompare(right.createdAt);
+        return created || left.editId.localeCompare(right.editId);
+      }),
+    };
+  }
+
+  function compareOps(left, right) {
+    if ((left.clock || 0) !== (right.clock || 0)) {
+      return (left.clock || 0) - (right.clock || 0);
+    }
+    const time = String(left.time || "").localeCompare(String(right.time || ""));
+    if (time !== 0) {
+      return time;
+    }
+    return String(left.opId || "").localeCompare(String(right.opId || ""));
+  }
+
+  function createId(prefix) {
+    if (crypto.randomUUID) {
+      return prefix + "-" + crypto.randomUUID();
+    }
+    return prefix + "-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2);
+  }
+
+  function threadElementId(threadId) {
+    return "html-collab-thread-" + encodeURIComponent(threadId);
+  }
+
+  function editElementId(editId) {
+    return "html-collab-edit-" + encodeURIComponent(editId);
+  }
+
+  function setThreadHash(threadId) {
+    const hash = "#" + threadElementId(threadId);
+    if (location.hash !== hash && history.replaceState) {
+      try {
+        history.replaceState(null, "", hash);
+      } catch {
+        location.hash = hash;
+      }
+    }
+  }
+
+  function setEditHash(editId) {
+    const hash = "#" + editElementId(editId);
+    if (location.hash !== hash && history.replaceState) {
+      try {
+        history.replaceState(null, "", hash);
+      } catch {
+        location.hash = hash;
+      }
+    }
+  }
+
+  function focusFromLocationHash() {
+    const editId = editIdFromHash(location.hash);
+    if (editId) {
+      focusEdit(editId);
+      scrollToEdit(editId);
+      return;
+    }
+
+    const threadId = threadIdFromHash(location.hash);
+    if (!threadId) {
+      return;
+    }
+    focusThread(threadId);
+    scrollToAnchor(threadId);
+  }
+
+  function threadIdFromHash(hash) {
+    const prefix = "#html-collab-thread-";
+    if (!hash || !hash.startsWith(prefix)) {
+      return null;
+    }
+    const encoded = hash.slice(prefix.length);
+    try {
+      return decodeURIComponent(encoded);
+    } catch {
+      return encoded;
+    }
+  }
+
+  function editIdFromHash(hash) {
+    const prefix = "#html-collab-edit-";
+    if (!hash || !hash.startsWith(prefix)) {
+      return null;
+    }
+    const encoded = hash.slice(prefix.length);
+    try {
+      return decodeURIComponent(encoded);
+    } catch {
+      return encoded;
+    }
+  }
+
+  function cssEscape(value) {
+    if (window.CSS && CSS.escape) {
+      return CSS.escape(value);
+    }
+    return String(value).replace(/["\\]/g, "\\$&");
+  }
+
+  function escapeRegExp(value) {
+    return String(value).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+  }
+
+  function formatTime(value) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+      return value;
+    }
+    return date.toLocaleString([], {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }
+
+  function shortTime(date) {
+    return date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  }
+
+  function errorMessage(error) {
+    if (error && typeof error.message === "string" && error.message) {
+      return error.message;
+    }
+    return "unknown error";
+  }
+
+  function setStatus(message) {
+    const status = document.getElementById("html-collab-status");
+    if (status instanceof HTMLElement) {
+      status.textContent = message;
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();
+`;
+
+// src/format/state.ts
+function createInitialState(input) {
+  const state = {
+    schemaVersion: 1,
+    docId: input.docId,
+    sourceFingerprint: input.sourceFingerprint,
+    actors: {},
+    ops: []
+  };
+  if (input.title) {
+    state.title = input.title;
+  }
+  return state;
+}
+
+// src/format/html-envelope.ts
+var SOURCE_SCRIPT_ID = "html-collab-source";
+var STATE_SCRIPT_ID = "html-collab-state";
+var PROJECT_URL = "https://github.com/glendigity/html-collab";
+var BRAND_LOGO_SVG = `<svg class="html-collab-brand-logo" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 200" fill="none" stroke="#1F2042" stroke-width="15" stroke-linejoin="round" stroke-linecap="round">
+  <polyline points="70,26 25,96 70,166"/>
+  <polyline points="250,26 295,96 250,166"/>
+  <path transform="translate(95 40)" d="M10 0 L82 0 L100 18 L100 70 A10 10 0 0 1 90 80 L30 80 L18 92 L14 80 L10 80 A10 10 0 0 1 0 70 L0 10 A10 10 0 0 1 10 0 Z" fill="#F5A524"/>
+  <path transform="translate(125 60)" d="M10 0 L82 0 L100 18 L100 70 A10 10 0 0 1 90 80 L30 80 L18 92 L14 80 L10 80 A10 10 0 0 1 0 70 L0 10 A10 10 0 0 1 10 0 Z" fill="#F5A524"/>
+</svg>`;
+var BRAND_WORDMARK_SVG = `<svg class="html-collab-brand-wordmark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 120">
+  <text x="10" y="92" font-family="'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" font-weight="700" font-size="100" fill="#1F2042">&lt;html-collab&gt;</text>
+</svg>`;
+function createReviewHtml(sourceBytes, options = {}) {
+  const sourceHtml = sourceBytes.toString("utf8");
+  const title = extractSourceTitle(sourceHtml) ?? (options.sourcePath ? basename(options.sourcePath) : undefined);
+  const sourcePayload = {
+    encoding: "base64",
+    html: sourceBytes.toString("base64")
+  };
+  const state = options.state ?? createInitialState({
+    docId: options.docId ?? randomUUID(),
+    sourceFingerprint: fingerprintSource(sourceBytes),
+    title
+  });
+  return renderReviewShell(sourcePayload, state);
+}
+function createReviewHtmlFromParts(source, state) {
+  return renderReviewShell(source, state);
+}
+function unwrapReviewHtml(reviewHtml) {
+  const source = extractSourcePayload(reviewHtml.toString());
+  if (source.encoding !== "base64") {
+    throw new Error(`Unsupported source encoding: ${source.encoding}`);
+  }
+  return Buffer.from(source.html, "base64");
+}
+function extractSourcePayload(reviewHtml) {
+  const payload = parseJsonScript(reviewHtml, SOURCE_SCRIPT_ID);
+  if (!isSourcePayload(payload)) {
+    throw new Error("Invalid html-collab source payload in this review file");
+  }
+  return payload;
+}
+function extractReviewState(reviewHtml) {
+  const state = parseJsonScript(reviewHtml, STATE_SCRIPT_ID);
+  if (!isReviewState(state)) {
+    throw new Error("Invalid html-collab review state in this review file");
+  }
+  return state;
+}
+function fingerprintSource(sourceBytes) {
+  return `sha256:${createHash("sha256").update(sourceBytes).digest("hex")}`;
+}
+function renderReviewShell(source, state) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="generator" content="html-collab">
+  <link rel="author" href="${PROJECT_URL}">
+  <title>${escapeHtml(state.title ?? "Reviewable HTML")}</title>
+  <style>
+    :root {
+      color-scheme: light;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      height: 100%;
+      margin: 0;
+    }
+
+    body {
+      background: #f6f7f9;
+      color: #1f2937;
+    }
+
+    button,
+    input,
+    select,
+    textarea {
+      font: inherit;
+    }
+
+    button {
+      min-height: 32px;
+      border: 1px solid #cbd5e1;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #1f2937;
+      cursor: pointer;
+    }
+
+    button:hover:not(:disabled) {
+      background: #f1f5f9;
+    }
+
+    button:disabled {
+      cursor: not-allowed;
+      opacity: 0.45;
+    }
+
+    textarea,
+    select,
+    input {
+      border: 1px solid #cbd5e1;
+      border-radius: 6px;
+      background: #ffffff;
+      color: #1f2937;
+    }
+
+    #html-collab-shell {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      min-height: 100vh;
+    }
+
+    .html-collab-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      min-height: 48px;
+      padding: 8px 14px;
+      border-bottom: 1px solid #d7dce3;
+      background: #ffffff;
+      color: #2f3a4a;
+      font-size: 13px;
+    }
+
+    .html-collab-brand {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 0;
+      border-radius: 6px;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .html-collab-brand:hover {
+      background: #f8fafc;
+    }
+
+    .html-collab-brand:focus-visible {
+      outline: 2px solid #2563eb;
+      outline-offset: 3px;
+    }
+
+    .html-collab-brand-logo {
+      display: block;
+      flex: 0 0 auto;
+      width: 34px;
+      height: 22px;
+    }
+
+    .html-collab-brand-wordmark {
+      display: block;
+      flex: 0 1 auto;
+      width: 124px;
+      max-width: 32vw;
+      height: auto;
+    }
+
+    .html-collab-toolbar-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+    }
+
+    .html-collab-toolbar input {
+      width: 170px;
+      min-height: 32px;
+      padding: 4px 8px;
+    }
+
+    .html-collab-toolbar button {
+      padding: 4px 10px;
+    }
+
+    .html-collab-toolbar select {
+      min-height: 32px;
+      padding: 4px 8px;
+    }
+
+    .html-collab-status {
+      color: #64748b;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .html-collab-workspace {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 360px;
+      min-height: 0;
+    }
+
+    #html-collab-canvas {
+      min-height: 0;
+      padding: 0;
+    }
+
+    #html-collab-source-frame {
+      display: block;
+      width: 100%;
+      height: calc(100vh - 49px);
+      border: 0;
+      background: #ffffff;
+    }
+
+    .html-collab-panel {
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      min-height: 0;
+      border-left: 1px solid #d7dce3;
+      background: #ffffff;
+    }
+
+    .html-collab-composer {
+      padding: 12px;
+      border-bottom: 1px solid #e2e8f0;
+      background: #fbfcfd;
+    }
+
+    .html-collab-composer[hidden] {
+      display: none;
+    }
+
+    .html-collab-selected-quote {
+      max-height: 76px;
+      margin: 0 0 8px;
+      overflow: auto;
+      border-left: 3px solid #eab308;
+      padding-left: 8px;
+      color: #475569;
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    .html-collab-composer textarea,
+    .html-collab-reply-body {
+      width: 100%;
+      resize: vertical;
+      padding: 8px;
+      line-height: 1.4;
+    }
+
+    .html-collab-reply-body {
+      resize: none;
+      overflow: hidden;
+    }
+
+    .html-collab-composer-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .html-collab-thread-actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 6px;
+      margin-top: 10px;
+    }
+
+    .html-collab-thread-reply .html-collab-thread-actions {
+      margin-top: 0;
+    }
+
+    .html-collab-thread-actions .html-collab-action-secondary {
+      margin-right: auto;
+    }
+
+    .html-collab-action-secondary {
+      min-height: 28px;
+      border: 0;
+      background: transparent;
+      color: #94a3b8;
+      padding: 2px 6px;
+      font-size: 12px;
+      border-radius: 4px;
+    }
+
+    .html-collab-action-secondary:hover:not(:disabled) {
+      background: #f1f5f9;
+      color: #475569;
+    }
+
+    .html-collab-thread-reply {
+      display: grid;
+      gap: 6px;
+      margin-top: 12px;
+      padding-top: 10px;
+      border-top: 1px dashed #e2e8f0;
+    }
+
+    .html-collab-edit-fields {
+      display: grid;
+      gap: 8px;
+    }
+
+    .html-collab-edit-fields select {
+      min-height: 32px;
+      padding: 4px 8px;
+    }
+
+    .html-collab-modal-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(15, 16, 20, 0.55);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 200;
+    }
+
+    .html-collab-modal-backdrop[hidden] {
+      display: none;
+    }
+
+    .html-collab-modal {
+      width: min(720px, 92vw);
+      max-height: min(80vh, 600px);
+      background: #ffffff;
+      border-radius: 12px;
+      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border: 1px solid #e2e8f0;
+    }
+
+    .html-collab-modal-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 20px;
+      border-bottom: 1px solid #e2e8f0;
+      background: #f8fafc;
+    }
+
+    .html-collab-modal-title {
+      font-weight: 600;
+      color: #1f2937;
+      font-size: 14px;
+    }
+
+    .html-collab-modal-subtitle {
+      font-size: 12px;
+      color: #64748b;
+    }
+
+    .html-collab-modal-actions {
+      margin-left: auto;
+      display: flex;
+      gap: 6px;
+    }
+
+    .html-collab-button-primary {
+      background: #1f2937;
+      color: #ffffff;
+      border: 1px solid #1f2937;
+      font-weight: 500;
+    }
+
+    .html-collab-button-primary:hover:not(:disabled) {
+      background: #111827;
+    }
+
+    .html-collab-button-primary.is-success {
+      background: #16a34a;
+      border-color: #16a34a;
+    }
+
+    .html-collab-modal-body {
+      margin: 0;
+      padding: 20px 24px;
+      overflow: auto;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 13px;
+      line-height: 1.55;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: #1f2937;
+      flex: 1;
+      background: #ffffff;
+    }
+
+    .html-collab-thread-scroll {
+      min-height: 0;
+      overflow: auto;
+      padding: 12px;
+    }
+
+    .html-collab-panel-heading {
+      margin: 18px 4px 8px;
+      color: #334155;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .html-collab-panel-heading:first-child {
+      margin-top: 4px;
+    }
+
+    .html-collab-empty {
+      margin: 16px 4px;
+      color: #64748b;
+      font-size: 13px;
+      line-height: 1.45;
+    }
+
+    .html-collab-thread {
+      border: 1px solid #e5e9f0;
+      border-radius: 10px;
+      padding: 12px;
+      margin-bottom: 10px;
+      background: #ffffff;
+      cursor: pointer;
+      transition: border-color 120ms ease, box-shadow 120ms ease;
+    }
+
+    .html-collab-thread:hover {
+      border-color: #cbd5e1;
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    }
+
+    .html-collab-thread textarea,
+    .html-collab-thread input {
+      cursor: text;
+    }
+
+    .html-collab-thread-active {
+      outline: 2px solid #2563eb;
+      outline-offset: 2px;
+    }
+
+    .html-collab-thread-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+
+    .html-collab-thread-header .html-collab-thread-quote {
+      flex: 1 1 auto;
+      min-width: 0;
+      margin: 4px 0 0;
+    }
+
+    .html-collab-thread-pin {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 6px;
+      flex: 0 0 auto;
+    }
+
+    .html-collab-thread-number {
+      width: 32px;
+      min-height: 32px;
+      padding: 0;
+      border-color: #eab308;
+      background: #fffbeb;
+      font-weight: 700;
+    }
+
+    .html-collab-thread-status {
+      border-radius: 999px;
+      background: #eef2f7;
+      padding: 2px 10px;
+      color: #475569;
+      font-size: 11px;
+      font-weight: 500;
+      letter-spacing: 0.02em;
+      text-transform: capitalize;
+    }
+
+    .html-collab-edit-suggestion .html-collab-thread-number {
+      border-color: #22c55e;
+      background: #f0fdf4;
+    }
+
+    .html-collab-edit-suggestion .html-collab-thread-quote {
+      border-left-color: #22c55e;
+    }
+
+    .html-collab-edit-detail {
+      margin: 6px 0 0;
+      color: #1f2937;
+      font-size: 13px;
+      line-height: 1.45;
+      white-space: pre-wrap;
+    }
+
+    .html-collab-edit-note {
+      margin: 4px 0 0;
+      color: #64748b;
+      font-size: 12px;
+      font-style: italic;
+      line-height: 1.45;
+      white-space: pre-wrap;
+    }
+
+    .html-collab-edit-replacement {
+      background: #ecfdf5;
+      color: #166534;
+      border-radius: 4px;
+      padding: 1px 6px;
+      font-size: 12px;
+    }
+
+    .html-collab-context-menu {
+      position: fixed;
+      z-index: 20;
+      display: grid;
+      gap: 4px;
+      min-width: 128px;
+      padding: 6px;
+      border: 1px solid #cbd5e1;
+      border-radius: 8px;
+      background: #ffffff;
+      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+    }
+
+    .html-collab-context-menu[hidden] {
+      display: none;
+    }
+
+    .html-collab-context-menu button {
+      width: 100%;
+      border: 0;
+      padding: 6px 8px;
+      text-align: left;
+    }
+
+    .html-collab-hotkeys {
+      position: fixed;
+      top: 54px;
+      right: 14px;
+      z-index: 21;
+      min-width: 220px;
+      padding: 10px 12px;
+      border: 1px solid #cbd5e1;
+      border-radius: 8px;
+      background: #ffffff;
+      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+      color: #334155;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    .html-collab-hotkeys[hidden] {
+      display: none;
+    }
+
+    .html-collab-hotkeys kbd {
+      display: inline-block;
+      min-width: 22px;
+      margin-right: 6px;
+      border: 1px solid #cbd5e1;
+      border-radius: 4px;
+      background: #f8fafc;
+      padding: 1px 5px;
+      color: #0f172a;
+      font: inherit;
+      text-align: center;
+    }
+
+    .html-collab-thread-quote {
+      margin: 0 0 8px;
+      border-left: 3px solid #eab308;
+      padding-left: 8px;
+      color: #475569;
+      font-size: 12px;
+      line-height: 1.4;
+    }
+
+    .html-collab-message {
+      margin: 10px 0 0;
+    }
+
+    .html-collab-message-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #64748b;
+      font-size: 12px;
+    }
+
+    .html-collab-message-meta > :first-child {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .html-collab-message p {
+      margin: 3px 0 0;
+      color: #1f2937;
+      font-size: 13px;
+      line-height: 1.45;
+      white-space: pre-wrap;
+    }
+
+    .html-collab-message-deleted {
+      color: #94a3b8 !important;
+      font-style: italic;
+    }
+
+    @media (max-width: 860px) {
+      .html-collab-workspace {
+        grid-template-columns: 1fr;
+      }
+
+      .html-collab-panel {
+        border-left: 0;
+        border-top: 1px solid #d7dce3;
+      }
+
+      #html-collab-source-frame {
+        height: 68vh;
+      }
+
+      .html-collab-brand-wordmark {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="html-collab-shell">
+    <header class="html-collab-toolbar" aria-label="HTML Collab review shell">
+      <div class="html-collab-toolbar-group">
+        <a class="html-collab-brand" href="${PROJECT_URL}" target="_blank" rel="noopener noreferrer" aria-label="Made with html-collab. Open the GitHub repository" title="Made with html-collab">${BRAND_LOGO_SVG}${BRAND_WORDMARK_SVG}</a>
+        <input id="html-collab-reviewer" type="text" autocomplete="name" aria-label="Reviewer name" placeholder="Your name">
+      </div>
+      <div class="html-collab-toolbar-group">
+        <button id="html-collab-add-comment" type="button" disabled>Comment</button>
+        <button id="html-collab-suggest-edit" type="button" disabled>Edit</button>
+        <select id="html-collab-edit-view" aria-label="Edit preview mode">
+          <option value="markup">Markup</option>
+          <option value="preview">Preview</option>
+        </select>
+        <button id="html-collab-merge" type="button">Merge</button>
+        <button id="html-collab-brief" type="button">Brief</button>
+        <button id="html-collab-autosave" type="button" aria-pressed="false">Autosave</button>
+        <button id="html-collab-hotkeys-button" type="button" aria-expanded="false" title="Keyboard shortcuts">?</button>
+        <input id="html-collab-merge-files" type="file" accept=".html,text/html" multiple hidden>
+        <div class="html-collab-status" id="html-collab-status">Review envelope ready</div>
+      </div>
+    </header>
+    <div class="html-collab-workspace">
+      <main id="html-collab-canvas">
+        <iframe
+          id="html-collab-source-frame"
+          title="Reviewed HTML source"
+        ></iframe>
+      </main>
+      <div class="html-collab-context-menu" id="html-collab-context-menu" hidden>
+        <button id="html-collab-context-comment" type="button">Comment (C)</button>
+        <button id="html-collab-context-edit" type="button">Edit (E)</button>
+      </div>
+      <div class="html-collab-hotkeys" id="html-collab-hotkeys" hidden>
+        <div><kbd>C</kbd>Comment on selected text</div>
+        <div><kbd>E</kbd>Suggest edit on selected text</div>
+        <div><kbd>Enter</kbd>Add or suggest</div>
+        <div><kbd>Esc</kbd>Cancel or close</div>
+        <div><kbd>Shift Enter</kbd>Line break</div>
+      </div>
+      <div class="html-collab-modal-backdrop" id="html-collab-brief-modal" hidden>
+        <div class="html-collab-modal" role="dialog" aria-modal="true" aria-labelledby="html-collab-brief-modal-title">
+          <header class="html-collab-modal-header">
+            <span class="html-collab-modal-title" id="html-collab-brief-modal-title">Review brief</span>
+            <span class="html-collab-modal-subtitle">Markdown · paste into your AI</span>
+            <div class="html-collab-modal-actions">
+              <button id="html-collab-brief-copy" type="button" class="html-collab-button-primary">Copy</button>
+              <button id="html-collab-brief-download" type="button">Download .md</button>
+              <button id="html-collab-brief-close" type="button" aria-label="Close">&#x2715;</button>
+            </div>
+          </header>
+          <pre class="html-collab-modal-body" id="html-collab-brief-body"></pre>
+        </div>
+      </div>
+      <aside class="html-collab-panel" aria-label="Review comments">
+        <section class="html-collab-composer" id="html-collab-composer" hidden>
+          <blockquote class="html-collab-selected-quote" id="html-collab-selected-quote"></blockquote>
+          <textarea id="html-collab-comment-body" rows="4" placeholder="Comment"></textarea>
+          <div class="html-collab-composer-actions">
+            <button id="html-collab-submit-comment" type="button">Add (Enter)</button>
+            <button id="html-collab-cancel-comment" type="button">Cancel (Esc)</button>
+          </div>
+        </section>
+        <section class="html-collab-composer" id="html-collab-edit-composer" hidden>
+          <blockquote class="html-collab-selected-quote" id="html-collab-edit-selected-quote"></blockquote>
+          <div class="html-collab-edit-fields">
+            <select id="html-collab-edit-kind" aria-label="Suggested edit type">
+              <option value="replace">Replace selection</option>
+              <option value="insert">Insert after selection</option>
+              <option value="delete">Delete selection</option>
+            </select>
+            <textarea id="html-collab-edit-replacement" rows="3" placeholder="Replacement or inserted text"></textarea>
+            <textarea id="html-collab-edit-note" rows="2" placeholder="Optional note"></textarea>
+          </div>
+          <div class="html-collab-composer-actions">
+            <button id="html-collab-submit-edit" type="button">Suggest (Enter)</button>
+            <button id="html-collab-cancel-edit" type="button">Cancel (Esc)</button>
+          </div>
+        </section>
+        <section class="html-collab-thread-scroll">
+          <p class="html-collab-empty" id="html-collab-empty">No comments yet.</p>
+          <div id="html-collab-thread-list"></div>
+        </section>
+      </aside>
+    </div>
+  </div>
+
+  <script type="application/json" id="${SOURCE_SCRIPT_ID}">${jsonForScript(source)}</script>
+  <script type="application/json" id="${STATE_SCRIPT_ID}">${jsonForScript(state)}</script>
+  <script>
+${iframeLoaderRuntime}
+  </script>
+</body>
+</html>
+`;
+}
+function parseJsonScript(html, id) {
+  const openTagPattern = /<script\b[^>]*>/gi;
+  let match;
+  while ((match = openTagPattern.exec(html)) !== null) {
+    const openTag = match[0];
+    if (!scriptTagHasId(openTag, id)) {
+      continue;
+    }
+    const contentStart = match.index + openTag.length;
+    const closeIndex = html.indexOf("</script>", contentStart);
+    if (closeIndex === -1) {
+      throw new Error(`Missing closing script tag for ${id}`);
+    }
+    return JSON.parse(html.slice(contentStart, closeIndex));
+  }
+  throw new Error(missingScriptMessage(id));
+}
+function extractSourceTitle(sourceHtml) {
+  const match = sourceHtml.match(/<title\b[^>]*>([\s\S]*?)<\/title>/i);
+  const title = match?.[1]?.replace(/\s+/g, " ").trim();
+  return title ? decodeHtmlText(title) : undefined;
+}
+function decodeHtmlText(value) {
+  return value.replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&amp;/gi, "&").replace(/&quot;/gi, '"').replace(/&#39;|&apos;/gi, "'");
+}
+function missingScriptMessage(id) {
+  if (id === STATE_SCRIPT_ID) {
+    return "This does not look like an html-collab review file: missing review state. Run html-collab wrap first.";
+  }
+  if (id === SOURCE_SCRIPT_ID) {
+    return "This does not look like an html-collab review file: missing embedded source. Run html-collab wrap first.";
+  }
+  return `Missing ${id} script`;
+}
+function scriptTagHasId(openTag, id) {
+  const escapedId = escapeRegExp(id);
+  return new RegExp(`\\bid\\s*=\\s*(["'])${escapedId}\\1`, "i").test(openTag);
+}
+function isSourcePayload(value) {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const payload = value;
+  return payload.encoding === "base64" && typeof payload.html === "string";
+}
+function isReviewState(value) {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  const state = value;
+  return state.schemaVersion === 1 && typeof state.docId === "string" && typeof state.sourceFingerprint === "string" && Boolean(state.actors) && typeof state.actors === "object" && Array.isArray(state.ops);
+}
+function jsonForScript(value) {
+  return JSON.stringify(value, null, 2).replace(/[<>&]/g, (character) => {
+    switch (character) {
+      case "<":
+        return "\\u003c";
+      case ">":
+        return "\\u003e";
+      case "&":
+        return "\\u0026";
+      default:
+        return character;
+    }
+  });
+}
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (character) => {
+    switch (character) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      case "'":
+        return "&#39;";
+      default:
+        return character;
+    }
+  });
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/commands/extract.ts
+async function extractFile(inputPath, options) {
+  const reviewHtml = await readFile(inputPath, "utf8");
+  const state = extractReviewState(reviewHtml);
+  const output = extractReview(state, options.format, {
+    reviewHref: reviewHref(inputPath, options.outputPath)
+  });
+  if (options.outputPath) {
+    await writeFile(options.outputPath, output, "utf8");
+  }
+  return output;
+}
+function reviewHref(inputPath, outputPath) {
+  if (!outputPath) {
+    return encodeURI(inputPath.split(sep).join("/"));
+  }
+  const inputAbsolute = resolve(inputPath);
+  const outputDirAbsolute = resolve(dirname(outputPath));
+  const href = relative(outputDirAbsolute, inputAbsolute) || inputPath;
+  return encodeURI(href.split(sep).join("/"));
+}
+
+// src/commands/merge.ts
+import { readFile as readFile2, writeFile as writeFile2 } from "node:fs/promises";
+
+// src/format/merge.ts
+function mergeReviewStates(states) {
+  if (states.length === 0) {
+    throw new Error("Expected at least one review state to merge");
+  }
+  const [base] = states;
+  const actors = { ...base.actors };
+  const opsById = new Map;
+  let addedOps = 0;
+  let addedActors = 0;
+  for (const op of base.ops) {
+    opsById.set(op.opId, op);
+  }
+  for (const state of states.slice(1)) {
+    if (state.docId !== base.docId) {
+      throw new Error(`Cannot merge ${state.docId}: expected docId ${base.docId}`);
+    }
+    if (state.sourceFingerprint !== base.sourceFingerprint) {
+      throw new Error(`Cannot merge ${state.docId}: source fingerprint mismatch`);
+    }
+    for (const [actorId, actor] of Object.entries(state.actors)) {
+      if (!actors[actorId]) {
+        addedActors += 1;
+      }
+      actors[actorId] = actors[actorId] ?? actor;
+    }
+    for (const op of state.ops) {
+      if (!opsById.has(op.opId)) {
+        addedOps += 1;
+      }
+      opsById.set(op.opId, opsById.get(op.opId) ?? op);
+    }
+  }
+  return {
+    state: {
+      ...base,
+      actors,
+      ops: Array.from(opsById.values()).sort(compareOpsForMerge)
+    },
+    addedOps,
+    addedActors
+  };
+}
+function compareOpsForMerge(left, right) {
+  if (left.clock !== right.clock) {
+    return left.clock - right.clock;
+  }
+  const time = left.time.localeCompare(right.time);
+  if (time !== 0) {
+    return time;
+  }
+  return left.opId.localeCompare(right.opId);
+}
+
+// src/commands/merge.ts
+async function mergeFiles(inputPaths, outputPath) {
+  if (inputPaths.length < 2) {
+    throw new Error("Expected at least two reviewed HTML files to merge");
+  }
+  const reviewHtmlFiles = await Promise.all(inputPaths.map((path) => readFile2(path, "utf8")));
+  const source = extractSourcePayload(reviewHtmlFiles[0]);
+  const states = reviewHtmlFiles.map(extractReviewState);
+  const result = mergeReviewStates(states);
+  const mergedHtml = createReviewHtmlFromParts(source, result.state);
+  await writeFile2(outputPath, mergedHtml, "utf8");
+}
+
+// src/commands/skill.ts
+import { access, readFile as readFile3, writeFile as writeFile3 } from "node:fs/promises";
+import { dirname as dirname2, join, resolve as resolve2 } from "node:path";
+import { fileURLToPath } from "node:url";
+async function skillFile(outputPath) {
+  const skill = await readPackagedSkill();
+  if (outputPath) {
+    await writeFile3(outputPath, skill);
+  }
+  return skill;
+}
+async function readPackagedSkill() {
+  const path = await findPackagedSkill(dirname2(fileURLToPath(import.meta.url)));
+  return readFile3(path, "utf8");
+}
+async function findPackagedSkill(startDir) {
+  let current = resolve2(startDir);
+  while (true) {
+    const candidate = join(current, "skill", "SKILL.md");
+    if (await pathExists(candidate)) {
+      return candidate;
+    }
+    const parent = dirname2(current);
+    if (parent === current) {
+      throw new Error("Could not find packaged html-collab skill");
+    }
+    current = parent;
+  }
+}
+async function pathExists(path) {
+  try {
+    await access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/commands/unwrap.ts
+import { readFile as readFile4, writeFile as writeFile4 } from "node:fs/promises";
+
+// src/format/apply-edits.ts
+function applyAcceptedEdits(sourceHtml, state) {
+  const accepted = reduceReviewState(state).edits.filter((edit) => edit.status === "accepted");
+  const planned = accepted.map((edit) => planEdit(sourceHtml, edit));
+  planned.sort((left, right) => right.start - left.start);
+  let html = sourceHtml;
+  for (const edit of planned) {
+    html = html.slice(0, edit.start) + edit.replacement + html.slice(edit.end);
+  }
+  return {
+    html,
+    appliedEdits: planned.length
+  };
+}
+function planEdit(sourceHtml, edit) {
+  const quote = edit.anchor.quote;
+  const start = findUniqueQuote(sourceHtml, quote, edit.editId);
+  const end = start + quote.length;
+  if (edit.kind === "replace") {
+    return {
+      start,
+      end,
+      replacement: edit.replacement ?? ""
+    };
+  }
+  if (edit.kind === "insert") {
+    return {
+      start: end,
+      end,
+      replacement: edit.replacement ?? ""
+    };
+  }
+  return {
+    start,
+    end,
+    replacement: ""
+  };
+}
+function findUniqueQuote(sourceHtml, quote, editId) {
+  if (!quote) {
+    throw new Error(`Cannot apply edit ${editId}: empty selected quote`);
+  }
+  const first = sourceHtml.indexOf(quote);
+  if (first === -1) {
+    throw new Error(`Cannot apply edit ${editId}: selected quote not found in source HTML`);
+  }
+  const second = sourceHtml.indexOf(quote, first + quote.length);
+  if (second !== -1) {
+    throw new Error(`Cannot apply edit ${editId}: selected quote is ambiguous in source HTML`);
+  }
+  return first;
+}
+
+// src/commands/unwrap.ts
+async function unwrapFile(inputPath, outputPath, options = {}) {
+  const reviewHtml = await readFile4(inputPath, "utf8");
+  const sourceBytes = unwrapReviewHtml(reviewHtml);
+  if (!options.applyAcceptedEdits) {
+    await writeFile4(outputPath, sourceBytes);
+    return {};
+  }
+  const state = extractReviewState(reviewHtml);
+  const result = applyAcceptedEdits(sourceBytes.toString("utf8"), state);
+  await writeFile4(outputPath, result.html, "utf8");
+  return { appliedEdits: result.appliedEdits };
+}
+
+// src/commands/wrap.ts
+import { readFile as readFile5, writeFile as writeFile5 } from "node:fs/promises";
+async function wrapFile(inputPath, outputPath) {
+  const sourceBytes = await readFile5(inputPath);
+  const reviewHtml = createReviewHtml(sourceBytes, { sourcePath: inputPath });
+  await writeFile5(outputPath, reviewHtml, "utf8");
+}
+
+// src/cli.ts
+async function main(argv = process.argv) {
+  try {
+    const command = parseArgs(argv.slice(2));
+    if (command.command === "wrap") {
+      await wrapFile(command.inputPath, command.outputPath);
+      return;
+    }
+    if (command.command === "merge") {
+      await mergeFiles(command.inputPaths, command.outputPath);
+      return;
+    }
+    if (command.command === "extract") {
+      const output = await extractFile(command.inputPath, {
+        format: command.format,
+        outputPath: command.outputPath
+      });
+      if (!command.outputPath) {
+        process.stdout.write(output);
+      }
+      return;
+    }
+    if (command.command === "skill") {
+      const output = await skillFile(command.outputPath);
+      if (!command.outputPath) {
+        process.stdout.write(output);
+      }
+      return;
+    }
+    const result = await unwrapFile(command.inputPath, command.outputPath, {
+      applyAcceptedEdits: command.applyAcceptedEdits
+    });
+    if (command.applyAcceptedEdits && result.appliedEdits === 0) {
+      console.warn("No accepted edits to apply; wrote the original source HTML.");
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    console.error(message);
+    console.error("");
+    console.error(usage(basename2(argv[1] ?? "html-collab")));
+    process.exitCode = 1;
+  }
+}
+function parseArgs(args) {
+  const [command, inputPath, ...rest] = args;
+  if (command !== "wrap" && command !== "unwrap" && command !== "merge" && command !== "extract" && command !== "skill") {
+    throw new Error("Expected command: wrap, merge, extract, skill, or unwrap");
+  }
+  if (command === "skill") {
+    const outputPath2 = parseSkillOptions(args.slice(1));
+    return { command, outputPath: outputPath2 };
+  }
+  if (command === "merge") {
+    const outIndex = args.indexOf("--out");
+    if (outIndex === -1) {
+      throw new Error("Missing required option --out");
+    }
+    const outputPath2 = args[outIndex + 1];
+    if (!outputPath2 || outputPath2.startsWith("-")) {
+      throw new Error("Expected a value after --out");
+    }
+    const inputPaths = args.slice(1, outIndex);
+    const unknownArgs = args.slice(outIndex + 2);
+    if (unknownArgs.length > 0) {
+      throw new Error(`Unknown option: ${unknownArgs[0]}`);
+    }
+    if (inputPaths.length < 2) {
+      throw new Error("Expected at least two reviewed HTML files for merge");
+    }
+    return { command, inputPaths, outputPath: outputPath2 };
+  }
+  if (command === "extract") {
+    if (!inputPath || inputPath.startsWith("-")) {
+      throw new Error("Expected input reviewed HTML file for extract");
+    }
+    const { format, outputPath: outputPath2 } = parseExtractOptions(rest);
+    return { command, inputPath, format, outputPath: outputPath2 };
+  }
+  if (!inputPath || inputPath.startsWith("-")) {
+    throw new Error(`Expected input HTML file for ${command}`);
+  }
+  if (command === "unwrap") {
+    const { outputPath: outputPath2, applyAcceptedEdits: applyAcceptedEdits2 } = parseUnwrapOptions(rest);
+    return { command, inputPath, outputPath: outputPath2, applyAcceptedEdits: applyAcceptedEdits2 };
+  }
+  const outputPath = readRequiredOption(rest, "--out");
+  return { command, inputPath, outputPath };
+}
+function readRequiredOption(args, name) {
+  const index = args.indexOf(name);
+  if (index === -1) {
+    throw new Error(`Missing required option ${name}`);
+  }
+  const value = args[index + 1];
+  if (!value || value.startsWith("-")) {
+    throw new Error(`Expected a value after ${name}`);
+  }
+  const unknownArgs = args.filter((arg, argIndex) => argIndex !== index && argIndex !== index + 1);
+  if (unknownArgs.length > 0) {
+    throw new Error(`Unknown option: ${unknownArgs[0]}`);
+  }
+  return value;
+}
+function parseExtractOptions(args) {
+  let format = "markdown";
+  let outputPath;
+  let index = 0;
+  while (index < args.length) {
+    const arg = args[index];
+    const value = args[index + 1];
+    if (arg === "--format") {
+      if (!isExtractFormat(value)) {
+        throw new Error("Expected --format to be markdown, json, text, or agent");
+      }
+      format = value;
+      index += 2;
+      continue;
+    }
+    if (arg === "--out") {
+      if (!value || value.startsWith("-")) {
+        throw new Error("Expected a value after --out");
+      }
+      outputPath = value;
+      index += 2;
+      continue;
+    }
+    throw new Error(`Unknown option: ${arg}`);
+  }
+  return { format, outputPath };
+}
+function parseUnwrapOptions(args) {
+  let outputPath;
+  let applyAcceptedEdits2 = false;
+  let index = 0;
+  while (index < args.length) {
+    const arg = args[index];
+    const value = args[index + 1];
+    if (arg === "--out") {
+      if (!value || value.startsWith("-")) {
+        throw new Error("Expected a value after --out");
+      }
+      outputPath = value;
+      index += 2;
+      continue;
+    }
+    if (arg === "--apply-edits") {
+      applyAcceptedEdits2 = true;
+      index += 1;
+      continue;
+    }
+    throw new Error(`Unknown option: ${arg}`);
+  }
+  if (!outputPath) {
+    throw new Error("Missing required option --out");
+  }
+  return { outputPath, applyAcceptedEdits: applyAcceptedEdits2 };
+}
+function parseSkillOptions(args) {
+  if (args.length === 0) {
+    return;
+  }
+  const outputPath = readRequiredOption(args, "--out");
+  return outputPath;
+}
+function isExtractFormat(value) {
+  return value === "markdown" || value === "json" || value === "text" || value === "agent";
+}
+function usage(commandName) {
+  return `Usage:
+  ${commandName} wrap report.html --out report.review.html
+  ${commandName} merge glen.review.html maya.review.html --out merged.review.html
+  ${commandName} extract merged.review.html --format markdown --out review-brief.md
+  ${commandName} extract merged.review.html --format agent --out agent-plan.md
+  ${commandName} extract merged.review.html --format json --out review-bundle.json
+  ${commandName} skill --out html-collab.SKILL.md
+  ${commandName} unwrap report.review.html --out report.final.html
+  ${commandName} unwrap report.review.html --apply-edits --out report.final.html`;
+}
+if (isDirectRun()) {
+  await main(process.argv);
+}
+function isDirectRun() {
+  if (!process.argv[1]) {
+    return false;
+  }
+  try {
+    return realpathSync(fileURLToPath2(import.meta.url)) === realpathSync(process.argv[1]);
+  } catch {
+    return fileURLToPath2(import.meta.url) === process.argv[1];
+  }
+}
+export {
+  main
+};