FE-665: Show word-level diff on staged edits in side-chat

[kostandinang]

What

Adds a <ContentDiff> word-level diff primitive and wires it into the side-chat staged-edit row.

Stacked on #105. First of two FE-665 slices — #108 wires the same primitive into PatchListOverlay.

Linear: FE-665.

Why

Today's staged-patch row shows only a summary like "Edit: rephrase wording" — users either trust the model or click Apply to find out what changed.

How

• Pure, presentational, word-level diff via jsdiff. Renders nothing when inputs are equal or empty.
• Side-chat popover row gets a <details> expander next to the summary. Non-edit rows / edits without diff data are unchanged.
• Tints from the existing palette: Removed warm amber with strikethrough; Added cool blue.
• Ladle story under Primitives / ContentDiff.
• New dep: diff@^8.0.4.

Follow-up (unblocked by this)

• PatchListOverlay consumer (lands in FE-665: Show per-patch diffs in the staged-changes overlay #108).
• Rationale diff — same primitive, second instance.

Test plan

• Stage an edit in side-chat → click chevron → word-level diff visible
• Identical / empty diffs render nothing

[cursor]

PR Summary

Low Risk
Low risk UI-only change that adds an optional diff expander for staged edit patches and a small new dependency (diff); main risk is minor rendering/UX regressions in the side-chat staged changes panel.

Overview
Adds a new ContentDiff primitive that renders a word-level before/after diff (and returns null when there’s no change), powered by the diff package.

Updates the side-chat staged changes list to optionally render an expandable <details> row for edit patches when currentContent/newContent are provided and differ, showing the inline ContentDiff preview. side-chat-host now enriches staged edit summaries with these before/after fields for the currently pinned item.

Includes new unit/RTL tests covering the diff component and the staged-edit expander behavior, plus a new Ladle primitives story for visual review, and adds diff@^8.0.4 to dependencies.

^{Reviewed by Cursor Bugbot for commit e2cbbab. Bugbot is set up for automated code reviews on this repo. Configure here.}

[augmentcode]

🤖 Augment PR Summary

Summary: Adds word-level diff visualization for staged edit patches in Side Chat so users can preview “before vs after” changes before clicking Apply (FE-665).

Changes:

• Introduced a new presentational <ContentDiff before after label?> primitive that computes word-level segments via diffWordsWithSpace and renders added/removed spans.
• Wired the staged-patch row in side-chat-popover.tsx to show a per-row <details> expander when currentContent and newContent are present and differ.
• Extended SideChatStagedPatchSummary with optional currentContent/newContent fields for back-compat.
• Updated side-chat-host.tsx to populate the before/after pair from the pinned item’s current content and the staged edit’s proposed content (when anchored to the active item).
• Added a Ladle story page (Primitives / ContentDiff) with multiple visual variants for design review.
• Added unit/RTL coverage for both ContentDiff behavior and the staged-edit expander logic.
• Added diff@^8.0.4 as a direct dependency.

Technical Notes: The diff UI renders nothing when there’s no effective change (identical inputs), and the expander is only shown for edit patches that include both strings and differ to avoid changing behavior for legacy staging paths.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. No suggestions at this time.

Comment augment review to trigger a new review at any time.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 2b2358e. Configure here.}

[kostandinang]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• FE-674: Agent classifier UI on pending review rows #124
• FE-674: Side-chat polish + DiffPopover + saved-toast move #121
• FE-674: Inline source diff + edit-target on pending review rows #120
• FE-674: Plan V3.1 verification strategy + node-edit cards #119
• FE-674: Suppress no-op Undo on hard apply + V3.0 polish #118
• FE-674: Resolve pending review rows #117
• FE-674: Show pending review rows in the patch overlay #116
• FE-674: Open downstream-review rows on hard-impact edit #115
• FE-657: Direct in-place editing on the structured-list view #109
• FE-665: Show per-patch diffs in the staged-changes overlay #108
• FE-665: Show word-level diff on staged edits in side-chat #107 👈 (View in Graphite)
• FE-673: Side-chat Edit mode — edit, link, and drill-down patches #105
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.