diff --git a/README.md b/README.md index c7fd4e6..cd9d5a2 100644 --- a/README.md +++ b/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 (``), deletions struck (``), + 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. diff --git a/docs/MANUAL-SMOKE-F7.md b/docs/MANUAL-SMOKE-F7.md new file mode 100644 index 0000000..a0ecd21 --- /dev/null +++ b/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 (``), the new word + highlighted (``); 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.