F7: rendered track-changes markdown preview (baseline-aware, mermaid) #21

New Issue

2026-06-11T15:13:22Z

benstull commented

2026-06-11 15:13:22 +00:00

F7 — Rendered track-changes preview (the "Option 3" picked during F6 follow-up ideation, session 0019).

Instead of a two-pane native vscode.diff (F6 #17/#19), show a rendered markdown preview beside the editable source that highlights what changed since the F6 baseline — additions highlighted, deletions struck through (Word/Docs "suggesting" style). The user edits the normal source pane (where they + Claude work); the preview is a read-only rendered "track-changes" view that updates live.

Reuses the F6 baseline machinery (BaselineStore + DiffViewController, global storage keyed by URI hash, INV-18/19) as the "before" side.

Locked design decisions (session 0019 ideation):

Custom webview (not the built-in markdown preview — that is hardwired to render the active doc text, not a diff artifact).
Dependencies (npm libraries, NOT VS Code extensions): markdown-it (markdown→HTML, in the extension host), mermaid (diagrams, rendered in the webview), diff/jsdiff or our own word-diff. No extensionDependencies; no CDN (bundle mermaid as a webview-local asset, CSP-safe — never in the extension-host bundle, like @cline/sdk).
Render split: markdown-it + diff run in the extension host (post annotated HTML to the webview); mermaid runs in the webview (DOM-bound) via emitted <pre class="mermaid"> blocks.
Diff granularity: block-level (heading/paragraph/list-item/code-fence/mermaid-fence) with word-level refinement inside changed prose blocks. Code & mermaid blocks are atomic.
Mermaid for v1: a changed/added mermaid diagram renders as the NEW diagram with a "changed since baseline" badge; intra-diagram diffing is deferred (see child task).

Full mermaid support is required. Next step: write the F7 Solution Design (brainstorming in progress).

Builds on F6 (#17, #19). Epic #1.

**F7 — Rendered track-changes preview** (the "Option 3" picked during F6 follow-up ideation, session 0019). Instead of a two-pane native `vscode.diff` (F6 #17/#19), show a **rendered markdown preview** beside the editable source that highlights **what changed since the F6 baseline** — additions highlighted, deletions struck through (Word/Docs "suggesting" style). The user edits the normal source pane (where they + Claude work); the preview is a read-only rendered "track-changes" view that updates live. **Reuses** the F6 baseline machinery (`BaselineStore` + `DiffViewController`, global storage keyed by URI hash, INV-18/19) as the "before" side. **Locked design decisions (session 0019 ideation):** - **Custom webview** (not the built-in markdown preview — that is hardwired to render the active doc text, not a diff artifact). - **Dependencies (npm libraries, NOT VS Code extensions):** `markdown-it` (markdown→HTML, in the extension host), `mermaid` (diagrams, rendered in the webview), `diff`/jsdiff or our own word-diff. No `extensionDependencies`; no CDN (bundle mermaid as a webview-local asset, CSP-safe — never in the extension-host bundle, like `@cline/sdk`). - **Render split:** markdown-it + diff run in the extension host (post annotated HTML to the webview); **mermaid runs in the webview** (DOM-bound) via emitted `<pre class="mermaid">` blocks. - **Diff granularity:** block-level (heading/paragraph/list-item/code-fence/mermaid-fence) with word-level refinement inside changed prose blocks. **Code & mermaid blocks are atomic.** - **Mermaid for v1:** a changed/added mermaid diagram renders as the NEW diagram with a **"changed since baseline" badge**; intra-diagram diffing is deferred (see child task). **Full mermaid support is required.** Next step: write the F7 Solution Design (brainstorming in progress). Builds on F6 (#17, #19). Epic #1.

benstull added the type/feature priority/P2 labels 2026-06-11 15:13:22 +00:00

benstull referenced this issue

2026-06-11 15:13:22 +00:00

F7: intra-diagram mermaid diffing (beyond the whole-diagram "changed" badge) #22

benstull commented

2026-06-11 15:29:28 +00:00

Solution Design graduated (session 0020): vscode-cowriting-plugin-content/specs/coauthoring-rendered-preview.md (v0.1.0). Custom webview; markdown-it + mermaid + diff deps; host renders/diffs, webview runs mermaid; block-level diff + atomic code/mermaid; mermaid v1 = whole-diagram changed badge (intra-diagram → #22); F7 coexists with F6. INV-20..23. 4 slices, host-E2E tier, no LLM in CI. Next: plan-and-execute F7.