feat(f7): render annotated track-changes HTML (#21)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

test/trackChangesModel.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { splitBlocks, diffBlocks } from "../src/trackChangesModel";
+import { splitBlocks, diffBlocks, renderTrackChanges } from "../src/trackChangesModel";
 
 describe("splitBlocks", () => {
   it("splits prose paragraphs on blank lines, dropping empties", () => {
@@ -76,3 +76,49 @@ describe("diffBlocks", () => {
     expect(k).toContain("unchanged");
   });
 });
+
+describe("renderTrackChanges", () => {
+  it("wraps each block in a cw-blk div with its kind class", () => {
+    const html = renderTrackChanges("Alpha.\n", "Alpha.\n\nBravo.\n");
+    expect(html).toContain('class="cw-blk cw-unchanged"');
+    expect(html).toContain('class="cw-blk cw-added"');
+  });
+
+  it("emits inline <ins>/<del> for a prose modification", () => {
+    const html = renderTrackChanges("The quick fox.\n", "The slow fox.\n");
+    expect(html).toContain("<ins>");
+    expect(html).toContain("<del>");
+    expect(html).toContain("cw-changed");
+  });
+
+  it("renders a changed CODE fence atomically: cw-changed, no inline ins/del", () => {
+    const html = renderTrackChanges("```ts\nconst a = 1;\n```\n", "```ts\nconst a = 2;\n```\n");
+    expect(html).toContain("cw-changed");
+    expect(html).not.toContain("<ins>");
+    expect(html).not.toContain("<del>");
+    expect(html).toContain("cw-badge");
+  });
+
+  it('emits <pre class="mermaid"> for a mermaid fence + a changed badge', () => {
+    const html = renderTrackChanges(
+      "```mermaid\nflowchart LR\n a-->b\n```\n",
+      "```mermaid\nflowchart LR\n a-->c\n```\n",
+    );
+    expect(html).toContain('<pre class="mermaid">');
+    expect(html).toContain("a--&gt;c"); // current source, escaped
+    expect(html).toContain("cw-badge");
+  });
+
+  it("unchanged doc renders with no marks", () => {
+    const html = renderTrackChanges("Alpha.\n", "Alpha.\n");
+    expect(html).not.toContain("cw-added");
+    expect(html).not.toContain("cw-removed");
+    expect(html).not.toContain("cw-changed");
+  });
+
+  it("is deterministic (same inputs → identical HTML) (INV-22)", () => {
+    const a = renderTrackChanges("X.\n\nY.\n", "X.\n\nZ.\n");
+    const b = renderTrackChanges("X.\n\nY.\n", "X.\n\nZ.\n");
+    expect(a).toBe(b);
+  });
+});