README.md

@@ -164,6 +164,38 @@ instead of git archaeology.
 Design: `vscode-cowriting-plugin-content/specs/coauthoring-diff-view.md`.
 Live smoke: [`docs/MANUAL-SMOKE-F6.md`](docs/MANUAL-SMOKE-F6.md).
 
+## F7 — Rendered track-changes preview (Feature #21)
+
+**`Ctrl+Alt+R`** (or **Cowriting: Open Track-Changes Preview**) opens a
+read-only webview **beside** a **Markdown** editor that renders the document and
+marks what changed since the F6 baseline — the "track changes" / "suggesting
+mode" altitude rather than a raw-text split-diff:
+
+- **Prose** additions are highlighted (`<ins>`), deletions struck (`<del>`),
+  refined to the word.
+- **Code and mermaid fences** are diffed **whole** (atomic, INV-23): a changed or
+  added one renders fully with a small **"changed"** badge; a removed one renders
+  struck. Mermaid fences render as **diagrams** (mermaid runs in the webview).
+  Intra-diagram node/edge diffing is deferred (#22).
+- It **updates live** as you and Claude edit (debounced), and **re-bases** when
+  Claude lands an edit (baseline advances, INV-18) or you pin — so accepted text
+  drops its marks. It **reuses the F6 baseline** and adds **no** persistence
+  (pure read-only, INV-20).
+- The webview is **sealed** (INV-21): local bundled assets only, strict CSP with
+  a per-load nonce, no network/CDN, no LLM. Mermaid is bundled into the
+  **webview** asset only, never the extension-host bundle.
+- The render engine (`src/trackChangesModel.ts`) is a **pure, vscode-free**
+  function (INV-22), unit-tested with no editor and no webview; host E2E
+  (`test/e2e/suite/trackChangesPreview.test.ts`) drives the same programmatic
+  propose/accept seam with no LLM.
+
+F7 is **markdown-only**; for any other file (incl. code), use F6's diff toggle
+(`Ctrl+Alt+D`). The webview's visual rendering (mermaid, theming) is verified by
+the manual smoke, not the sealed-sandbox E2E.
+
+Design: `vscode-cowriting-plugin-content/specs/coauthoring-rendered-preview.md`.
+Live smoke: [`docs/MANUAL-SMOKE-F7.md`](docs/MANUAL-SMOKE-F7.md).
+
 ## Develop
 
 - `npm run watch` — rebuild on change.

docs/MANUAL-SMOKE-F7.md

@@ -0,0 +1,38 @@
+# Manual smoke — F7 rendered track-changes preview (#21)
+
+The webview's *visual* rendering (mermaid, theming) is verified here, not in the
+automated host E2E (the webview is a sealed sandbox — §6.8). Run once per change
+that touches F7.
+
+## Setup
+
+1. `npm run build`
+2. Launch the Extension Development Host (F5 in VS Code, or the Run panel).
+3. Open a folder and a markdown document containing prose, a `mermaid` fenced
+   diagram, and a `ts` code fence (e.g. copy
+   `test/e2e/fixtures/workspace/docs/preview.md`).
+
+## Steps
+
+1. **Open the preview.** Run **"Cowriting: Open Track-Changes Preview"** (or
+   `Ctrl+Alt+R`). A preview opens beside the editor, rendering the document.
+   Header reads `Track changes since opened …`, summary `+0 −0`. The mermaid
+   diagram renders as a diagram; the code fence renders as highlighted code.
+2. **Edit prose.** In the source editor, change a word in a paragraph. The
+   preview updates (≈150 ms): the old word struck (`<del>`), the new word
+   highlighted (`<ins>`); the summary increments.
+3. **Edit the mermaid.** Change `a --> b` to `a --> c`. The preview re-renders the
+   **new** diagram with a **"changed"** badge at its top-right.
+4. **Ask Claude + accept.** Select the target sentence → "Ask Claude to Edit
+   Selection" → accept the proposal. The accepted text **drops its marks** (the
+   baseline advanced; PUC-3).
+5. **Pin.** Run "Cowriting: Pin Diff Baseline to Now". All marks clear (baseline
+   == now; PUC-4).
+6. **Theme.** Toggle light/dark (`Ctrl+K Ctrl+T`). Marks and the diagram restyle
+   to the theme.
+7. **Cleanliness.** `git status` shows nothing changed by the preview (INV-20).
+
+## Pass criteria
+
+All seven steps behave as described; no console errors in the webview devtools;
+nothing written to the document, sidecar, or repo.