feat(f7.1): render augmented mermaid diff in changed-block branch (#22)

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

test/trackChangesModel.test.ts

@@ -99,14 +99,16 @@ describe("renderTrackChanges", () => {
     expect(html).toContain("cw-badge");
   });
 
-  it('emits <pre class="mermaid"> for a mermaid fence + a changed badge', () => {
+  it('emits <pre class="mermaid"> for a changed flowchart, augmented intra-diagram (#22)', () => {
     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");
+    expect(html).toContain("a--&gt;c"); // current source preserved as prefix, escaped
+    // a changed flowchart is now diffed in place (INV-29): styling, not a whole-block badge
+    expect(html).toContain("classDef cwAdded");
+    expect(html).not.toContain('<span class="cw-badge">changed</span>');
   });
 
   it("unchanged doc renders with no marks", () => {
@@ -232,3 +234,33 @@ describe("renderAuthorship", () => {
     expect(renderAuthorship(text, spans)).toBe(renderAuthorship(text, spans));
   });
 });
+
+import { renderTrackChanges as rtc2 } from "../src/trackChangesModel";
+
+describe("renderTrackChanges — intra-diagram mermaid (#22)", () => {
+  it("augments a changed flowchart with styling directives (INV-29)", () => {
+    const base = "```mermaid\nflowchart LR\n A-->B\n```\n";
+    const cur = "```mermaid\nflowchart LR\n A-->B\n B-->C\n```\n";
+    const html = rtc2(base, cur);
+    expect(html).toContain("classDef cwAdded");
+    expect(html).toMatch(/class\s+C\s+cwAdded/);
+    expect(html).toContain('class="cw-mermaid-legend"');
+    // no single whole-block "changed" badge when we augmented
+    expect(html).not.toContain('<span class="cw-badge">changed</span>');
+  });
+
+  it("augments a changed sequence diagram", () => {
+    const base = "```mermaid\nsequenceDiagram\n A->>B: hi\n```\n";
+    const cur = "```mermaid\nsequenceDiagram\n A->>B: hi\n B->>C: on\n```\n";
+    const html = rtc2(base, cur);
+    expect(html).toContain("rect rgb(46, 160, 67)");
+  });
+
+  it("falls back to the v1 badge for an unsupported diagram type (INV-30)", () => {
+    const base = "```mermaid\nclassDiagram\n class A\n```\n";
+    const cur = "```mermaid\nclassDiagram\n class B\n```\n";
+    const html = rtc2(base, cur);
+    expect(html).toContain('<span class="cw-badge">changed</span>');
+    expect(html).not.toContain("classDef cwAdded");
+  });
+});