2 Commits

Author	SHA1	Message	Date
Michael Ramos	4139999526	feat(plan-diff): word-level inline diff rendering (#565) ... * feat(plan-diff): word-level inline diff rendering Two-pass hierarchical diff (diffLines outer + diffWordsWithSpace inner) so modified plan blocks render with inline insertions/deletions in context instead of showing the whole old block struck-through above the whole new block. Resolves #560. Engine (packages/ui/utils/planDiffEngine.ts): - computeInlineDiff runs a second-pass word diff on modified blocks that pass a whitelist gate (paragraph/heading/list-item with matching structural fields). - Sentinel substitution atomizes inline-code spans, markdown links, and fenced code blocks before diffWordsWithSpace runs, so diff markers never land inside backticks, link hrefs, or across fence boundaries. Fence regex uses a backreference so variable-length (e.g., 4-backtick wrapping 3-backtick) fences are matched atomically. - Annotation context for an inline-diffed modified block now captures both old and new content so comments on struck-through words preserve that text in the exported feedback. Renderer (packages/ui/components/plan-diff/PlanCleanDiffView.tsx): - New InlineModifiedBlock component renders a modified block as one structural wrapper with <ins>/<del> wrappers inside, parsed through the local InlineMarkdown in a single pass so markdown delimiter pairs survive across token boundaries. - InlineMarkdown extended to recognize <ins>/<del> tag passthrough (with recursive parsing of the wrapped content) and to recursively parse link anchor text so diff markers inside links render correctly. - Plain-text stop-char scanner includes '<' so <ins>/<del> dispatch re-enters the loop instead of swallowing tag text. - Click-to-annotate works in every editor mode (not just comment), with the block-level onClick opening the popover directly. Mode switcher (packages/ui/components/plan-diff/PlanDiffModeSwitcher.tsx): - Adds a third "Classic" tab between Rendered and Raw. Rendered is the new word-level default (labeled "exp"); Classic forces the legacy block-level stacked fallback for every modified block. Styling (packages/ui/theme.css, packages/editor/index.css): - plan-diff-word-added / plan-diff-word-removed utility classes for inline highlights with box-decoration-break: clone across line wraps. - Inline <code> inside the diff wrappers picks up a tinted background so code-pill changes read unambiguously green/red. - New plan-diff-modified class (amber border) for inline-diff modified blocks, matching the GitHub/VSCode convention of green=add, red=remove, yellow=both. Tests (packages/ui/utils/planDiffEngine.test.ts): - 18 tests covering the engine's qualification gate, structural-field matching, sentinel round-trip (inline code / links / fences), token content for common edit patterns. For provenance purposes, this commit was AI assisted. * chore(demo): restructure default demo, add VITE_DIFF_DEMO stress test Demo content changes that support the word-level diff work but do not alter shipped app behavior — only what other devs see running dev:hook. packages/editor/demoPlan.ts (default V3 editor content): - Added a "Context" section at the top of the plan with prose that showcases the word-level engine in V2→V3 diff: bold phrase swap, inline-code pill swaps, a link URL change, and a single-line code edit inside a config block. - Moved the mermaid architecture diagram and graphviz service map to an "Appendix: Diagrams" section at the end of the plan; they were rendering ugly mid-document. apps/hook/dev-mock-api.ts (Vite mock for the diff API): - PLAN_V1 / PLAN_V2 split into *_DEFAULT (original Real-time Collaboration plan — preserved identically from pre-branch state) and *_DIFF_TEST (the 20-case Auth Service Refactor diff-engine stress test, kept as an opt-in tool). - Resolves which pair to serve based on VITE_DIFF_DEMO env var. Matches the V2 Context section to the new V3 Context, with differences that produce rich word-level inline diffs on first load. - Diagrams moved to Appendix in V2_DEFAULT to match V3. packages/editor/App.tsx: - Both demo imports are active. VITE_DIFF_DEMO=1 swaps DIFF_DEMO_PLAN_CONTENT into the editor's default; unset renders the original Real-time Collaboration plan as before. packages/editor/demoPlanDiffDemo.ts (new): - 20-case stress test (paragraphs, headings, lists, tables, fences, blockquotes, known limitations). Each case has an identical "What to watch for" blockquote label in both V2 and V3 so the diff view cleanly isolates each case. Opt-in only. .gitignore: - Ignore .claude/ runtime lock/state files. Machine-specific content that should not be tracked. For provenance purposes, this commit was AI assisted. * style(plan-diff): refine modified-block visual — amber gutter, no fill Drop the yellow background fill from .plan-diff-modified and keep only a softened amber left border. Added/removed blocks remain loud (full fill + strong border) because add/remove are block-scope events — the whole block matters. Modify is a word-scope event — the individual changed words carry loud inline red/green highlights, and a block-level fill would compete with that inline work. The amber gutter at 75% opacity now reads as a quiet "look inside, the change is in the text" marker that sits coherently with the rest of the palette. For provenance purposes, this commit was AI assisted. * fix(plan-diff): sanitize link hrefs against javascript: / data: schemes PlanCleanDiffView has its own local copy of InlineMarkdown (separate from the one in Viewer.tsx). The link-rendering branch was passing the captured URL directly to href with no validation, so a plan containing [click me](javascript:alert(document.cookie)) would render as a live clickable anchor in the diff view. Plan content is attacker-influenced — Claude pulls from source comments, READMEs, fetched URLs — so this is a real exploit path in the diff flow. Port the same guard Viewer.tsx already has: sanitizeLinkUrl() rejects javascript:, data:, vbscript:, and file: schemes (case-insensitive, with optional leading whitespace). Rejected links render their anchor text as plain text instead of a clickable <a>, so the content is still visible to the reader but no longer dangerous. For provenance purposes, this commit was AI assisted.	2026-04-14 18:43:38 -07:00
Michael Ramos	819ba11f77	feat: plan diff UI with sidebar and dual view modes (#176) ... * feat: add plan diff UI with sidebar, badge, and dual view modes Shows what changed between plan iterations when Claude revises after feedback. Adds a +N/-M badge below repo info that toggles the diff view, a shared left sidebar with TOC and Version Browser tabs, and two diff modes: rendered (color-coded borders) and raw markdown (+/- lines). Closes #138, closes #111 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: update CLAUDE.md project structure and align first-run dialog labels - Add plan-diff/ and sidebar/ component subdirectories to CLAUDE.md - Add new hooks and utils to CLAUDE.md project structure - Rename "Table of Contents" to "Auto-open Sidebar" in UIFeaturesSetup to match Settings.tsx label Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: address code review findings for plan diff UX - Fix badge stats mixing block counts with line counts (modifications now fold into additions/deletions) - Gate hasPreviousVersion on diffBasePlan being loaded to prevent "Show Changes" no-op and ModeSwitcher disappearing - Make sidebar reactive to Settings toggle (useEffect on tocEnabled) - Match PlanDiffViewer badge layout to Viewer (flex-col) so badge doesn't jump position on toggle - Add "Exit Diff" label to the close button in diff view - Remove dead CSS (plan-diff-removed-marker, plan-diff-modified) - Clean up stale header comment and unused lines prop Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: second-round review cleanup for plan diff UX - Fix stale "amber border" JSDoc in PlanCleanDiffView (actually green) - Rename sidebar tab from "diff" to "versions" for clarity - Gate VersionBrowser fetch on versionInfo being available - Move .sidebar-tab-flag CSS into its own Sidebar section Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: add loading state for version selection in sidebar Add isSelectingVersion to selectBaseVersion, mirroring the existing isLoadingVersions pattern. Shows "Loading..." on the selected version button while the fetch is in progress. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: address third-round code review findings - Fix duplicate border/backdrop on TOC inside sidebar (className override) - Fix loading indicator targeting wrong version button (fetchingVersion state) - Fix "Show Changes" button silent no-op (gate on hasPreviousVersion) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: move date to slug suffix, improve Other Plans UX - Slug format changed from YYYY-MM-DD-{heading} to {heading}-YYYY-MM-DD - Other Plans: single "coming soon" banner instead of per-item labels - Strip date suffix from plan names in sidebar for readability - Remove cursor-not-allowed from Other Plans items Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add Plan Diff section to CLAUDE.md, alert on version fetch failure - Document plan diff feature: engine, view modes, state management, sidebar - Update slug format documentation to {heading}-YYYY-MM-DD - Show native alert when version fetch fails instead of silent swallow Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: add table rendering to clean diff view Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-22 18:59:44 -08:00