benstull/rfc-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Contribute rewrite Phase 5: inline word-diff in manual pending card

Browse Source 
The §8.11 manual-edit card was a stub — "{N} paragraphs edited
directly" plus a countdown and a Save-now button. The spec says the
card should grow one inline word-diff per touched paragraph as the
contributor types, in the same green/red register the Phase 3 accepted
overlay uses. Phase 5 lands that.

In RFCView.jsx, the 800ms-debounced handleEditorUpdate now computes a
per-paragraph token diff alongside the existing paragraph count and
stores both on manualPending. Baseline is the same Phase 4 gutter
source — originalSourceLinesRef.current, the last server-confirmed
body split on blank lines — so the card resets to empty the same
moment the gutter clears (accept/decline/manualFlush/branch-switch).

In ChangePanel.jsx, diffWords is exported (it was already the AI
card's inline-diff engine — token-level LCS over a whitespace-
preserving /(\\s+)/ split, ~30 lines, no runtime dep). The manual
card consumes the same tokens. Wholly-inserted paragraphs render as
all-insert blocks; wholly-deleted paragraphs as all-delete blocks.

Visual register is intentionally shared with Phase 3's preview
overlay: same #dcfce7/#166534 inserts, same #fee2e2/#991b1b
strike-through deletes. Selectors are scoped under .change-manual-diff
rather than reusing .markdown-preview .tracked-* since the card lives
outside the preview surface.

Pre-fancy stance, matching Phase 4's gutter: the diff is index-aligned
against the baseline, so adding a paragraph in the middle lights up
the rest of the doc. Tolerated as the "you've touched stuff below this
point" cue. An LCS-anchored future pass can fix it.

Verification gap matching Phases 2/3/4: backend was not running this
session, so the live RFCView → real-branch flow wasn't exercised.
Drove the Vite preview sandbox instead — mounted ChangePanel with a
hand-built diffs payload, confirmed three blocks render (mixed edit,
wholly-inserted, wholly-deleted), inserts/deletes carry the expected
computed colors, no console errors. Backend integration suite still
green (125 passed).
This commit is contained in:
Ben Stull
2026-05-25 11:29:03 -07:00
parent 886bbf5512
commit 4afb018bb0
3 changed files with 65 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+27
View File
@@ -879,6 +879,33 @@
display: flex; align-items: center; justify-content: space-between;
margin-top: 6px;
}
/* §8.11 Phase 5 — per-paragraph word-diff inside the pending manual
card. Shares Phase 3's green/red register with .markdown-preview
.tracked-insert / .tracked-delete so the contributor sees one
"change layer" vocabulary across the preview pane (accepted) and the
change card (their own pending typing). Scoped under its own class
rather than reusing the preview selectors since the card is not
inside .markdown-preview. */
.change-manual-diff {
margin: 6px 0;
display: flex; flex-direction: column; gap: 6px;
}
.change-manual-diff-block {
font-size: 12px; line-height: 1.6;
background: #f9fafb; border-radius: 4px;
padding: 6px 8px; border: 1px solid #e5e5e5;
white-space: pre-wrap; word-break: break-word;
}
.change-manual-diff .manual-diff-insert {
background: #dcfce7; color: #166534;
border-radius: 2px; padding: 1px 2px;
}
.change-manual-diff .manual-diff-delete {
background: #fee2e2; color: #991b1b;
text-decoration: line-through;
border-radius: 2px; padding: 1px 2px;
}
.btn-save-now {
background: none; border: 1px solid #d4d4d4;
border-radius: 4px; padding: 2px 8px;