@fresh-editor/fresh-editor 0.3.5 → 0.3.7

package/plugins/live_diff.ts

@@ -36,19 +36,21 @@ const NS_OVERLAY = "live-diff-overlay";
 // on the same line — but in practice users will run one or the other.
 const PRIORITY = 9;
 
-// Theme keys for backgrounds and virtual-line foregrounds. These are
-// resolved at render time by the editor, so the diff colors track
-// the active theme automatically.  All bundled themes provide
-// `editor.diff_*_bg` (defaulted via serde) and `ui.file_status_*_fg`
-// (falls through to `diagnostic.{info,warning,error}_fg` when the
-// theme doesn't override).
+// Theme keys for backgrounds and "on top of bg" foregrounds. These
+// are resolved at render time by the editor, so the diff colors track
+// the active theme automatically. The `editor.diff_*_fg` keys are
+// purpose-built for "text drawn on top of the matching diff bg" —
+// they default to `ui.file_status_*_fg` so themes that haven't been
+// updated still work, but themes whose `file_status_*_fg` collides
+// with `diff_*_bg` (e.g. `terminal`, where both resolve to ANSI Red)
+// override `editor.diff_*_fg` to a contrasting color.
 const THEME = {
   addedBg: "editor.diff_add_bg",
-  addedFg: "ui.file_status_added_fg",
+  addedFg: "editor.diff_add_fg",
   modifiedBg: "editor.diff_modify_bg",
-  modifiedFg: "ui.file_status_modified_fg",
+  modifiedFg: "editor.diff_modify_fg",
   removedBg: "editor.diff_remove_bg",
-  removedFg: "ui.file_status_deleted_fg",
+  removedFg: "editor.diff_remove_fg",
 };
 
 // `setLineIndicator` only accepts RGB triples (not theme keys), so the
@@ -71,9 +73,27 @@ const DEBOUNCE_MS = 75;
 
 // Skip virtual-line rendering when either side is huge — line-by-line
 // LCS would be too slow. Gutter glyphs still render via a degraded path.
-const MAX_DIFF_LINES = 20_000;
-// Soft cap on the LCS DP table; past this we stop computing virtual lines.
-const MAX_DP_CELLS = 4_000_000;
+// In practice the DP only runs over the diff's *middle* (common prefix
+// and suffix are stripped first), so this cap rarely bites for typical
+// "small edit to a large file" cases.
+const MAX_DIFF_LINES = 100_000;
+// Soft cap on the LCS DP table; past this we stop computing virtual
+// lines. Applies to the post-prefix/suffix-stripped middle, not the
+// whole file.
+const MAX_DP_CELLS = 16_000_000;
+
+// Similarity (Sørensen–Dice over character LCS) above which a 1:1
+// modified pair is rendered as "modified" (bg-only highlight on the
+// new line, no deletion virtual line). Below this we split the pair
+// into a `removed` (virtual deletion line) + `added` (bg-highlighted)
+// hunk pair so the change reads as a rewrite, not an in-place edit.
+// Tunable at runtime via `editor.getPluginApi("live-diff").setSimilarityThreshold(x)`.
+let similarityThreshold = 0.95;
+// Bail out of char-LCS on huge lines; cost is O(m * n).
+const MAX_LINE_LCS_CHARS = 2000;
+// Bail out of word-LCS when either side has more tokens than this;
+// O(m * n) in tokens.
+const MAX_WORD_TOKENS = 1000;
 
 // =============================================================================
 // Types
@@ -86,6 +106,16 @@ type DiffMode =
 
 type HunkKind = "added" | "removed" | "modified";
 
+/** Byte range inside a single new-side line, used to emphasise the
+ * word-level diff result with bold + underline overlays. Offsets are
+ * UTF-8 byte offsets relative to the start of the line, NOT the
+ * buffer — `renderHunks` adds the line's own byte offset before
+ * passing them to `addOverlay`. */
+interface WordRange {
+  start: number;
+  end: number;
+}
+
 interface Hunk {
   kind: HunkKind;
   /** First changed new-side line (0-indexed). */
@@ -94,6 +124,18 @@ interface Hunk {
   newCount: number;
   /** Old-side text, line by line, no trailing newline. */
   oldLines: string[];
+  /** Word-level diff results, one entry per new-side line in this
+   * hunk. Set only on `modified` hunks above the similarity threshold
+   * — where we suppress the virtual deletion line and instead bold +
+   * underline the actually-changed words on the new line. `undefined`
+   * for unrefined hunks and for `added`/`removed` hunks. */
+  wordRanges?: WordRange[][];
+  /** Old-side word ranges, one entry per `oldLines` line. Set on
+   * `removed` hunks emitted by `refineHunks` for high-similarity
+   * pairs where words were dropped/changed; passed to addVirtualLine
+   * as `textOverlays` so the deletion virtual line bolds + underlines
+   * the actually-removed words. */
+  oldWordRanges?: WordRange[][];
 }
 
 interface BufferDiffState {
@@ -433,6 +475,286 @@ function fillOldLines(hunks: Hunk[], oldLines: string[]): void {
   }
 }
 
+// =============================================================================
+// Similarity + word-level diff
+// =============================================================================
+
+/**
+ * Sørensen–Dice-style similarity ratio over a character LCS:
+ *
+ *   ratio = 2 * |LCS(a, b)| / (|a| + |b|)
+ *
+ * Range `0.0..1.0`. Empty / empty is `1.0`; either-side-empty is `0.0`.
+ * Both sides are stripped of their common prefix and suffix first so
+ * "abcdef" vs "abcXYZdef" pays only for the middle DP table.
+ */
+function lineSimilarity(a: string, b: string): number {
+  if (a.length === 0 && b.length === 0) return 1.0;
+  if (a.length === 0 || b.length === 0) return 0.0;
+  if (a.length > MAX_LINE_LCS_CHARS || b.length > MAX_LINE_LCS_CHARS) {
+    // Quadratic char LCS is too expensive on huge lines (minified
+    // JS, base64 blobs). Treat as different so we don't stall the
+    // render; the caller falls back to "split into removed+added".
+    return 0.0;
+  }
+  let prefix = 0;
+  const minLen = Math.min(a.length, b.length);
+  while (prefix < minLen && a[prefix] === b[prefix]) prefix++;
+  let aEnd = a.length;
+  let bEnd = b.length;
+  while (aEnd > prefix && bEnd > prefix && a[aEnd - 1] === b[bEnd - 1]) {
+    aEnd--;
+    bEnd--;
+  }
+  const equal = prefix + (a.length - aEnd);
+  const m = aEnd - prefix;
+  const n = bEnd - prefix;
+  if (m === 0 || n === 0) {
+    return (2 * equal) / (a.length + b.length);
+  }
+  const stride = n + 1;
+  const dp: number[] = new Array((m + 1) * stride).fill(0);
+  for (let i = 1; i <= m; i++) {
+    const ai = a[prefix + i - 1];
+    for (let j = 1; j <= n; j++) {
+      if (ai === b[prefix + j - 1]) {
+        dp[i * stride + j] = dp[(i - 1) * stride + (j - 1)] + 1;
+      } else {
+        const x = dp[(i - 1) * stride + j];
+        const y = dp[i * stride + (j - 1)];
+        dp[i * stride + j] = x >= y ? x : y;
+      }
+    }
+  }
+  const middleLcs = dp[m * stride + n];
+  return (2 * (equal + middleLcs)) / (a.length + b.length);
+}
+
+/** A run of word, whitespace, or punctuation characters, with the
+ * UTF-8 byte offsets it occupies inside its source string. */
+interface Token {
+  text: string;
+  byteStart: number;
+  byteEnd: number;
+}
+
+const WORD_CHAR = /[A-Za-z0-9_]/;
+const WHITESPACE_CHAR = /\s/;
+
+/** Tokenize into word runs (`\w+`), whitespace runs (`\s+`), and
+ * single non-word non-whitespace characters. Byte offsets are
+ * computed once per run via `editor.utf8ByteLength` so downstream
+ * overlays can index without re-scanning the string. */
+function tokenize(s: string): Token[] {
+  const tokens: Token[] = [];
+  let i = 0;
+  let bytePos = 0;
+  while (i < s.length) {
+    let j = i;
+    const c = s[i];
+    if (WHITESPACE_CHAR.test(c)) {
+      while (j < s.length && WHITESPACE_CHAR.test(s[j])) j++;
+    } else if (WORD_CHAR.test(c)) {
+      while (j < s.length && WORD_CHAR.test(s[j])) j++;
+    } else {
+      j = i + 1;
+    }
+    const text = s.slice(i, j);
+    const byteLen = editor.utf8ByteLength(text);
+    tokens.push({ text, byteStart: bytePos, byteEnd: bytePos + byteLen });
+    bytePos += byteLen;
+    i = j;
+  }
+  return tokens;
+}
+
+/** Word-level diff result: byte ranges on each side that aren't part
+ * of the longest common token subsequence. `newRanges` drives the
+ * bold + underline overlay on the new (modified) line; `oldRanges`
+ * drives the same overlay on the deletion virtual line so removed
+ * words are visually called out, not just present in the gutter. */
+interface WordDiff {
+  newRanges: WordRange[];
+  oldRanges: WordRange[];
+}
+
+/**
+ * Token-level LCS over the two lines. Returns the byte ranges of
+ * non-whitespace tokens on each side that aren't part of the LCS.
+ * Whitespace-only tokens are never highlighted (whitespace changes
+ * mid-word look like noise; whole-line whitespace edits are handled
+ * by the line-level diff). Adjacent unmatched non-whitespace tokens
+ * are coalesced into a single range so a renamed `foo.bar.baz`
+ * becomes one underline, not three.
+ */
+function computeWordDiff(oldS: string, newS: string): WordDiff {
+  const oldTokens = tokenize(oldS);
+  const newTokens = tokenize(newS);
+  const m = oldTokens.length;
+  const n = newTokens.length;
+  if (m === 0 && n === 0) return { newRanges: [], oldRanges: [] };
+  if (m > MAX_WORD_TOKENS || n > MAX_WORD_TOKENS) {
+    // Token DP would dwarf the line-level pass; degrade to "every
+    // non-whitespace token changed" on whichever side has tokens.
+    return {
+      newRanges: collapseRanges(
+        newTokens.filter((t) => !WHITESPACE_CHAR.test(t.text[0] ?? "")),
+      ),
+      oldRanges: collapseRanges(
+        oldTokens.filter((t) => !WHITESPACE_CHAR.test(t.text[0] ?? "")),
+      ),
+    };
+  }
+  if (m === 0) {
+    return {
+      newRanges: collapseRanges(
+        newTokens.filter((t) => !WHITESPACE_CHAR.test(t.text[0] ?? "")),
+      ),
+      oldRanges: [],
+    };
+  }
+  if (n === 0) {
+    return {
+      newRanges: [],
+      oldRanges: collapseRanges(
+        oldTokens.filter((t) => !WHITESPACE_CHAR.test(t.text[0] ?? "")),
+      ),
+    };
+  }
+  const stride = n + 1;
+  const dp: number[] = new Array((m + 1) * stride).fill(0);
+  for (let i = 1; i <= m; i++) {
+    const ot = oldTokens[i - 1].text;
+    for (let j = 1; j <= n; j++) {
+      if (ot === newTokens[j - 1].text) {
+        dp[i * stride + j] = dp[(i - 1) * stride + (j - 1)] + 1;
+      } else {
+        const x = dp[(i - 1) * stride + j];
+        const y = dp[i * stride + (j - 1)];
+        dp[i * stride + j] = x >= y ? x : y;
+      }
+    }
+  }
+  // Backtrack to find which old/new tokens participate in the LCS.
+  const matchedOld: boolean[] = new Array(m).fill(false);
+  const matchedNew: boolean[] = new Array(n).fill(false);
+  let i = m;
+  let j = n;
+  while (i > 0 && j > 0) {
+    if (oldTokens[i - 1].text === newTokens[j - 1].text) {
+      matchedOld[i - 1] = true;
+      matchedNew[j - 1] = true;
+      i--;
+      j--;
+    } else if (dp[(i - 1) * stride + j] >= dp[i * stride + (j - 1)]) {
+      i--;
+    } else {
+      j--;
+    }
+  }
+  const unmatchedOf = (
+    tokens: Token[],
+    matched: boolean[],
+  ): WordRange[] => {
+    const out: Token[] = [];
+    for (let k = 0; k < tokens.length; k++) {
+      if (matched[k]) continue;
+      const t = tokens[k];
+      if (WHITESPACE_CHAR.test(t.text[0] ?? "")) continue;
+      out.push(t);
+    }
+    return collapseRanges(out);
+  };
+  return {
+    newRanges: unmatchedOf(newTokens, matchedNew),
+    oldRanges: unmatchedOf(oldTokens, matchedOld),
+  };
+}
+
+/** Merge adjacent or touching token ranges into a single range so
+ * downstream overlay creation costs are O(runs), not O(tokens). */
+function collapseRanges(tokens: Token[]): WordRange[] {
+  const ranges: WordRange[] = [];
+  for (const t of tokens) {
+    const last = ranges[ranges.length - 1];
+    if (last && last.end === t.byteStart) {
+      last.end = t.byteEnd;
+    } else {
+      ranges.push({ start: t.byteStart, end: t.byteEnd });
+    }
+  }
+  return ranges;
+}
+
+/**
+ * Post-process `opsToHunks` output: split low-similarity 1:1
+ * `modified` hunks into separate `removed` (virtual deletion line) +
+ * `added` (bg-highlighted) hunks. High-similarity pairs stay as
+ * `modified` and gain a `wordRanges` entry that drives the bold +
+ * underline word-level overlay on the new line. When a high-similarity
+ * pair also has *removed* (or otherwise unmatched) old-side words,
+ * we additionally emit a `removed` hunk carrying the old line plus
+ * `oldWordRanges` so the deletion virtual line shows the user which
+ * words went away — not just that *something* did.
+ *
+ * Hunks that don't have a 1:1 mapping (e.g. 3 old lines becoming 2
+ * new lines) keep their original shape — the pairing is ambiguous,
+ * and forcing a rewrite-style split would just create misleading
+ * "removed" lines.
+ */
+function refineHunks(hunks: Hunk[], newLines: string[]): Hunk[] {
+  const out: Hunk[] = [];
+  for (const h of hunks) {
+    if (h.kind !== "modified" || h.oldLines.length !== h.newCount) {
+      out.push(h);
+      continue;
+    }
+    for (let i = 0; i < h.newCount; i++) {
+      const oldLine = h.oldLines[i];
+      const newLine = newLines[h.newStart + i] ?? "";
+      const sim = lineSimilarity(oldLine, newLine);
+      if (sim >= similarityThreshold) {
+        const wd = computeWordDiff(oldLine, newLine);
+        // Always emit the in-place modified hunk (drives the new-line
+        // bg highlight + new-side word-diff). When old-side has
+        // unmatched non-WS tokens, also emit a deletion line above
+        // it carrying old-side word ranges so the user can see which
+        // words were removed/replaced.
+        if (wd.oldRanges.length > 0) {
+          out.push({
+            kind: "removed",
+            newStart: h.newStart + i,
+            newCount: 0,
+            oldLines: [oldLine],
+            oldWordRanges: [wd.oldRanges],
+          });
+        }
+        out.push({
+          kind: "modified",
+          newStart: h.newStart + i,
+          newCount: 1,
+          oldLines: [],
+          wordRanges: [wd.newRanges],
+        });
+      } else {
+        out.push({
+          kind: "removed",
+          newStart: h.newStart + i,
+          newCount: 0,
+          oldLines: [oldLine],
+        });
+        out.push({
+          kind: "added",
+          newStart: h.newStart + i,
+          newCount: 1,
+          oldLines: [],
+        });
+      }
+    }
+  }
+  return out;
+}
+
 // =============================================================================
 // Rendering
 // =============================================================================
@@ -490,20 +812,18 @@ function renderHunks(state: BufferDiffState, newLines: string[]): void {
   const lineCount = lineStarts.length;
 
   // Group new-side lines per kind for batched setLineIndicators.
+  // `removed` hunks have no new-side line they belong on — their
+  // indicator rides directly on the virtual deletion line itself
+  // via `addVirtualLine`'s `gutterGlyph`, so it sits next to the
+  // deleted content instead of on the source line that happens to
+  // follow it.
   const addedLines: number[] = [];
   const modifiedLines: number[] = [];
-  const removedAnchors: number[] = [];
 
   for (const h of state.hunks) {
-    if (h.kind === "removed") {
-      // Anchor on the line that took the deletion's place. If newStart
-      // is past EOF, step back to the last real line.
-      let anchor = h.newStart;
-      if (anchor >= lineCount) anchor = Math.max(0, lineCount - 1);
-      removedAnchors.push(anchor);
-    } else if (h.kind === "added") {
+    if (h.kind === "added") {
       for (let i = 0; i < h.newCount; i++) addedLines.push(h.newStart + i);
-    } else {
+    } else if (h.kind === "modified") {
       for (let i = 0; i < h.newCount; i++) modifiedLines.push(h.newStart + i);
     }
   }
@@ -520,17 +840,20 @@ function renderHunks(state: BufferDiffState, newLines: string[]): void {
       GUTTER_COLORS.modified[0], GUTTER_COLORS.modified[1], GUTTER_COLORS.modified[2], PRIORITY,
     );
   }
-  if (removedAnchors.length > 0) {
-    editor.setLineIndicators(
-      bid, removedAnchors, NS_GUTTER, SYMBOLS.removed,
-      GUTTER_COLORS.removed[0], GUTTER_COLORS.removed[1], GUTTER_COLORS.removed[2], PRIORITY,
-    );
-  }
 
   // Background highlights and virtual lines, all sync now.
   for (const h of state.hunks) {
     if (h.kind === "added" || h.kind === "modified") {
       const bg = h.kind === "added" ? THEME.addedBg : THEME.modifiedBg;
+      // Passing `fg` as a theme key lets each theme decide whether to
+      // override the cell's existing fg: themes that DEFINE
+      // `editor.diff_*_fg` (e.g. `terminal`, where the ANSI bg would
+      // otherwise collide with same-named syntax colors) get a
+      // contrasting fg painted on; themes that don't define the key
+      // resolve to `None` in `OverlayFace::ThemedStyle`, so the
+      // overlay leaves the cell's fg alone and syntax highlighting
+      // shows through unchanged.
+      const fg = h.kind === "added" ? THEME.addedFg : THEME.modifiedFg;
       for (let i = 0; i < h.newCount; i++) {
         const line = h.newStart + i;
         if (line >= lineCount) break;
@@ -547,6 +870,7 @@ function renderHunks(state: BufferDiffState, newLines: string[]): void {
         if (end <= start) end = start + 1;
         editor.addOverlay(bid, NS_OVERLAY, start, end, {
           bg,
+          fg,
           underline: false,
           bold: false,
           italic: false,
@@ -554,6 +878,36 @@ function renderHunks(state: BufferDiffState, newLines: string[]): void {
           extendToLineEnd: true,
         });
       }
+
+      // Word-level diff: bold + underline the changed words on the
+      // new-side line of a refined high-similarity modified hunk.
+      // `wordRanges` is set only by `refineHunks` and uses byte
+      // offsets relative to each new-side line's start, so we add the
+      // line's own start byte before passing to `addOverlay`.
+      if (h.wordRanges) {
+        for (let i = 0; i < h.newCount; i++) {
+          const line = h.newStart + i;
+          if (line >= lineCount) break;
+          const lineByteStart = lineStarts[line];
+          const ranges = h.wordRanges[i];
+          if (!ranges) continue;
+          for (const r of ranges) {
+            editor.addOverlay(
+              bid,
+              NS_OVERLAY,
+              lineByteStart + r.start,
+              lineByteStart + r.end,
+              {
+                bold: true,
+                underline: true,
+                italic: false,
+                strikethrough: false,
+                extendToLineEnd: false,
+              },
+            );
+          }
+        }
+      }
     }
 
     if (h.oldLines.length === 0) continue;
@@ -569,9 +923,21 @@ function renderHunks(state: BufferDiffState, newLines: string[]): void {
     const anchor = lineStarts[anchorLine];
 
     for (let i = 0; i < h.oldLines.length; i++) {
-      // No "- " prefix — the red bg/fg is the visual signal, and the user
-      // prefers any "-" indicator to live in the gutter rather than
-      // inside the buffer content.
+      // No "- " prefix in the line text — the indicator goes in the
+      // gutter via `gutterGlyph` so it sits next to the deletion
+      // line itself, not on the source line that follows it.
+      // When `oldWordRanges` is set (from a high-similarity refined
+      // pair), bold + underline the actually-removed words so the
+      // user can see *what* changed, not just that something did.
+      const wordRanges = h.oldWordRanges?.[i];
+      const textOverlays = wordRanges
+        ? wordRanges.map((r) => ({
+            start: r.start,
+            end: r.end,
+            bold: true,
+            underline: true,
+          }))
+        : [];
       editor.addVirtualLine(
         bid,
         anchor,
@@ -579,6 +945,9 @@ function renderHunks(state: BufferDiffState, newLines: string[]): void {
         {
           fg: THEME.removedFg,
           bg: THEME.removedBg,
+          gutterGlyph: SYMBOLS.removed,
+          gutterColor: GUTTER_COLORS.removed,
+          textOverlays,
         },
         above,
         NS_VLINE,
@@ -650,8 +1019,13 @@ async function recompute(bufferId: number): Promise<void> {
       return;
     }
 
-    const hunks = opsToHunks(ops);
-    fillOldLines(hunks, state.oldLines);
+    const rawHunks = opsToHunks(ops);
+    fillOldLines(rawHunks, state.oldLines);
+    // Decide per-line whether each `modified` pair is a similar
+    // in-place edit (keep as `modified`, drop the virtual deletion
+    // line, mark changed words) or a low-similarity rewrite (split
+    // into separate `removed` + `added` hunks).
+    const hunks = refineHunks(rawHunks, newLines);
 
     // Skip 2: same hunks as last render. The user can edit inside an
     // already-flagged region without changing line counts (e.g., typing
@@ -931,6 +1305,42 @@ editor.registerCommand("%cmd.vs_default_branch", "%cmd.vs_default_branch_desc",
 editor.registerCommand("%cmd.refresh", "%cmd.refresh_desc", "live_diff_refresh", null);
 editor.registerCommand("%cmd.set_default", "%cmd.set_default_desc", "live_diff_set_default", null);
 
+// =============================================================================
+// Plugin API
+// =============================================================================
+
+export type LiveDiffApi = {
+  /** Lines whose Sørensen–Dice similarity ratio is at least this value
+   * render as in-place "modified" (bg highlight + word-level diff on the
+   * new line). Below this they split into a removed + added pair so the
+   * change reads as a rewrite. Range 0..1; clamped. */
+  setSimilarityThreshold(value: number): void;
+  getSimilarityThreshold(): number;
+};
+
+declare global {
+  interface FreshPluginRegistry {
+    "live-diff": LiveDiffApi;
+  }
+}
+
+editor.exportPluginApi("live-diff", {
+  setSimilarityThreshold(value: number): void {
+    const clamped = Math.max(0, Math.min(1, value));
+    if (clamped === similarityThreshold) return;
+    similarityThreshold = clamped;
+    // Invalidate cached hunks so the next recompute repaints with the
+    // new threshold instead of short-circuiting on the same hunksKey.
+    for (const state of states.values()) {
+      state.lastHunksKey = "";
+      scheduleRecompute(state.bufferId).catch((e) =>
+        editor.error(`live-diff: ${e}`),
+      );
+    }
+  },
+  getSimilarityThreshold: () => similarityThreshold,
+} satisfies LiveDiffApi);
+
 // =============================================================================
 // Initialization
 // =============================================================================