@kabmo-labs/kabmo 0.7.0 → 0.9.0

package/src/client/components/workspace/diff-panel/index.tsx

@@ -1,13 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import { useSessionUiState } from '@/client/hooks/workspace/session-state';
-import { parseUnifiedDiff } from '@/shared/lib/fs/diff-parser';
-import { isUnmergedCode, type ConflictMarkers } from '@/shared/lib/fs/git-unmerged';
+import { isUnmergedCode } from '@/shared/lib/fs/git-unmerged';
 import { useFileDiff } from '@/client/hooks/workspace/diff-file';
+import { useDiffGitActions } from '@/client/hooks/workspace/diff-git-actions';
 import { getLanguageFromPath } from '@/shared/lib/code/language';
 import { DiffToolbar, type DiffContentMode, type DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
 import { ConflictBanner } from '@/client/components/workspace/diff-panel/ConflictBanner';
-import { UnifiedView } from '@/client/components/workspace/diff-panel/UnifiedView';
-import { SplitView } from '@/client/components/workspace/diff-panel/SplitView';
+import { ThemedMergeDiffView } from '@/client/components/workspace/diff-panel/ThemedMergeDiffView';
+import { useEditorFontStack } from '@/client/hooks/editor/font';
+import { EDITOR_DEFAULT_FONT_SIZE } from '@/shared/lib/code/editor/typography';
 import { usePluginDiffView } from '@/client/components/workspace/editor/plugin-file-view';
 import { PluginIdProvider } from '@kabmo-labs/kabmo-ui';
 import { AlertCircle, RefreshCw } from 'lucide-preact';
@@ -26,6 +27,12 @@ interface DiffPanelProps {
    * per tab (and per view shape). Null for a host with no tab of its own.
    */
   tabKey?: string | null;
+  /**
+   * Offer the two width-mode buttons. On by default (the editor column is where
+   * they belong); the phone's full-screen overlay turns them off, because it
+   * already covers the chat and the sidebar.
+   */
+  viewModeButtons?: boolean;
 }
 
 export function DiffPanel({
@@ -38,6 +45,7 @@ export function DiffPanel({
   onFileSaved,
   className = '',
   tabKey = null,
+  viewModeButtons = true,
 }: DiffPanelProps) {
   // Read and persist view mode & whitespace preference in session_ui_state
   const [viewMode, setViewMode] = useSessionUiState<DiffViewMode>('diff.viewMode', 'unified');
@@ -45,42 +53,26 @@ export function DiffPanel({
   const [wordWrap, setWordWrap] = useSessionUiState<boolean>('diff.wordWrap', true);
   const [ignoreWhitespace, setIgnoreWhitespace] = useSessionUiState<boolean>('diff.ignoreWhitespace', false);
 
-  const [isBusy, setIsBusy] = useState<boolean>(false);
-  const [actionError, setActionError] = useState<string | null>(null);
+  const [clipboardError, setClipboardError] = useState<string | null>(null);
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState<boolean>(false);
-  /**
-   * The side labels from the file's own conflict markers.
-   *
-   * Read only while the file IS conflicted, and only when the status says so —
-   * the read is the whole file, and `status` is what the caller already knows.
-   * A failed read leaves `{}`, which falls back to the words `ours`/`theirs`:
-   * the actions still work, only the naming is less precise.
-   */
-  const [markers, setMarkers] = useState<ConflictMarkers>({});
+  /** Additions/deletions of the pair on screen, reported by the merge view. */
+  const [counts, setCounts] = useState<{ additions: number; deletions: number }>({ additions: 0, deletions: 0 });
+  const editorFontFamily = useEditorFontStack();
 
   const {
     rawDiff,
+    oldContent,
+    newContent,
     currentStatus,
     currentStaged,
     isLoading,
     errorMessage,
     fetchDiff,
     adoptState,
-  } = useFileDiff({ filePath, status, isStaged, repo, root, contentMode });
+  } = useFileDiff({ filePath, status, isStaged, repo, root });
   const conflicted = isUnmergedCode(currentStatus);
 
-  // Full-code mode parses the whole file, not the hunks, so the parse is keyed
-  // to its inputs: every render used to re-walk the diff (measured 21 ms on an
-  // 80k-line file), for a result that only changes when the diff or the
-  // whitespace toggle does.
-  // Only the rendered view is built: `views` keeps the shared flush (so the
-  // whitespace decision and the counts cannot diverge) while skipping the
-  // object graph nobody draws.
-  const parsed = useMemo(
-    () => parseUnifiedDiff(rawDiff, { ignoreWhitespace, views: viewMode === 'split' ? 'split' : 'unified' }),
-    [rawDiff, ignoreWhitespace, viewMode],
-  );
   const language = getLanguageFromPath(filePath);
   // A contributed renderer replaces the built-in views below, never the toolbar.
   const pluginDiffView = usePluginDiffView({ path: filePath, diff: rawDiff });
@@ -108,117 +100,31 @@ export function DiffPanel({
         setIsCopied(true);
         setTimeout(() => setIsCopied(false), 2000);
       },
-      () => setActionError('Clipboard write was refused by the browser'),
+      () => setClipboardError('Clipboard write was refused by the browser'),
     );
   };
 
   /**
-   * POST one git action and report whether it landed. The panel used to fire
-   * and forget (`fetcher.submit` + an optimistic flip + a 300ms timer), which
-   * made a rejected action indistinguishable from a successful one: the badge
-   * flipped and the diff silently stayed put.
+   * The git writes, their busy flag, their refusals, and the conflict-marker
+   * read behind the banner — see `diff-git-actions.ts`. The one exception is
+   * the clipboard, which is not a write: it reads the buffer already on screen
+   * and must stay available while a write is in flight.
    */
-  const runGitAction = useCallback(
-    async (fields: Record<string, string>): Promise<boolean> => {
-      const fd = new FormData();
-      for (const [key, value] of Object.entries(fields)) fd.set(key, value);
-      fd.set('repo', repo || '.');
-      if (root) fd.set('root', root);
-      try {
-        const res = await fetch('/api/fs/git', { method: 'POST', body: fd });
-        const data = (await res.json().catch(() => null)) as { success?: boolean; error?: string } | null;
-        if (!res.ok || !data?.success) {
-          setActionError(data?.error || `Request failed (HTTP ${res.status})`);
-          return false;
-        }
-        setActionError(null);
-        return true;
-      } catch (err: unknown) {
-        setActionError(err instanceof Error ? err.message : 'Request failed');
-        return false;
-      }
-    },
-    [repo, root],
-  );
-
-  const handleStageUnstage = async () => {
-    if (isBusy) return;
-    const nextStaged = !currentStaged;
-    setIsBusy(true);
-    try {
-      const ok = await runGitAction({
-        actionType: currentStaged ? 'unstage' : 'stage',
-        file: filePath,
-      });
-      if (!ok) return;
-      adoptState({ staged: nextStaged });
-      onFileSaved?.();
-      await fetchDiff({ staged: nextStaged });
-    } finally {
-      setIsBusy(false);
-    }
-  };
-
-  const handleDiscard = () => {
-    setShowDiscardConfirm(true);
-  };
-
-  // The marker labels are fetched when the file turns out to be conflicted, and
-  // re-fetched when the path changes. Keyed on the path and the status so a
-  // resolve (which changes the status away from `UU`) clears the banner.
-  useEffect(() => {
-    if (!conflicted) {
-      setMarkers({});
-      return;
-    }
-    let cancelled = false;
-    const params = new URLSearchParams({ conflictMarkers: '1', file: filePath, repo: repo || '.' });
-    if (root) params.set('root', root);
-    void fetch(`/api/fs/git?${params.toString()}`)
-      .then((res) => res.json() as Promise<{ markers?: ConflictMarkers }>)
-      .then((body) => {
-        if (!cancelled) setMarkers(body.markers ?? {});
-      })
-      .catch(() => {
-        if (!cancelled) setMarkers({});
-      });
-    return () => { cancelled = true; };
-  }, [conflicted, filePath, repo, root]);
-
-  /** Resolve this file: `ours`/`theirs` write a stage, `''` only stages. */
-  const handleResolve = async (side: 'ours' | 'theirs' | '') => {
-    if (isBusy) return;
-    setIsBusy(true);
-    try {
-      const ok = await runGitAction({
-        actionType: 'resolve_conflict',
-        file: filePath,
-        ...(side ? { side } : {}),
-      });
-      if (!ok) return;
-      onFileSaved?.();
-      await fetchDiff();
-    } finally {
-      setIsBusy(false);
-    }
-  };
-
-  const confirmDiscard = async () => {
-    setShowDiscardConfirm(false);
-    setIsBusy(true);
-    try {
-      // `revert` is the server's own name for "restore this file from the index",
-      // and it is the one that handles the untracked case (there the file is
-      // removed). Sending `discard` — which no handler matched — returned
-      // `{success:true}` for doing nothing at all.
-      const ok = await runGitAction({ actionType: 'revert', file: filePath });
-      if (!ok) return;
-      onFileSaved?.();
-      await fetchDiff();
-    } finally {
-      setIsBusy(false);
-    }
-  };
+  const gitActions = useDiffGitActions({
+    filePath,
+    repo,
+    root,
+    status: currentStatus,
+    staged: currentStaged,
+    conflicted,
+    adoptState,
+    fetchDiff,
+    onFileSaved,
+  });
+  const { isBusy, markers } = gitActions;
+  // Two refusal surfaces with one source: the clipboard's own failure is local
+  // to this panel, while a git refusal comes from the server.
+  const actionError = clipboardError ?? gitActions.error;
 
   return (
     // The panel fills, it does not size itself: the caller owns the height
@@ -238,17 +144,18 @@ export function DiffPanel({
         contentMode={contentMode}
         wordWrap={wordWrap}
         ignoreWhitespace={ignoreWhitespace}
-        additions={parsed.additions}
-        deletions={parsed.deletions}
+        additions={counts.additions}
+        deletions={counts.deletions}
         isLoading={isLoading}
         isCopied={isCopied}
         isBusy={isBusy}
+        viewModeButtons={viewModeButtons}
         onSetViewMode={handleSetViewMode}
         onSetContentMode={handleSetContentMode}
         onToggleWordWrap={handleToggleWordWrap}
         onToggleWhitespace={handleToggleWhitespace}
-        onStageUnstage={handleStageUnstage}
-        onDiscard={handleDiscard}
+        onStageUnstage={() => void gitActions.stageUnstage()}
+        onDiscard={() => setShowDiscardConfirm(true)}
         onOpenInEditor={onOpenInEditor}
         onRefresh={() => void fetchDiff()}
         onCopyDiff={handleCopyDiff}
@@ -259,8 +166,11 @@ export function DiffPanel({
           markers={markers}
           isBusy={isBusy}
           error={actionError}
-          onResolve={handleResolve}
-          onDismissError={() => setActionError(null)}
+          onResolve={(side) => void gitActions.resolve(side)}
+          onDismissError={() => {
+            gitActions.dismissError();
+            setClipboardError(null);
+          }}
         />
       )}
 
@@ -270,7 +180,10 @@ export function DiffPanel({
           <span className="min-w-0 flex-1 truncate" title={actionError}>{actionError}</span>
           <button
             type="button"
-            onClick={() => setActionError(null)}
+            onClick={() => {
+              gitActions.dismissError();
+              setClipboardError(null);
+            }}
             className="px-1.5 rounded hover:bg-error/15 cursor-pointer"
             title="Dismiss"
             aria-label="Dismiss"
@@ -302,10 +215,25 @@ export function DiffPanel({
           <PluginIdProvider pluginId={pluginDiffView.pluginId}>
             <pluginDiffView.Component {...pluginDiffView.props} />
           </PluginIdProvider>
-        ) : viewMode === 'split' ? (
-          <SplitView rows={parsed.splitRows} language={language} wordWrap={wordWrap} tabKey={tabKey} />
         ) : (
-          <UnifiedView lines={parsed.lines} language={language} wordWrap={wordWrap} tabKey={tabKey} />
+          // Both shapes are the SAME component: `@codemirror/merge` owns the
+          // diff and the rows, and a shape switch is a re-mount of a different
+          // object (an `EditorView` vs a `MergeView`), which is why it is a prop
+          // rather than a second component.
+          <ThemedMergeDiffView
+            original={oldContent}
+            next={newContent}
+            language={language}
+            viewMode={viewMode}
+            contentMode={contentMode}
+            wordWrap={wordWrap}
+            ignoreWhitespace={ignoreWhitespace}
+            tabKey={tabKey}
+            onCounts={setCounts}
+            empty={!rawDiff || !rawDiff.trim()}
+            fontFamily={editorFontFamily}
+            fontSize={EDITOR_DEFAULT_FONT_SIZE}
+          />
         )}
       </div>
 
@@ -327,7 +255,10 @@ export function DiffPanel({
               </button>
               <button
                 type="button"
-                onClick={() => void confirmDiscard()}
+                onClick={() => {
+                  setShowDiscardConfirm(false);
+                  void gitActions.revert();
+                }}
                 className="px-3 py-1.5 text-xs bg-error text-white rounded hover:bg-error/90 font-medium transition-colors cursor-pointer"
               >
                 Discard Changes

package/src/client/components/workspace/diff-panel/merge.ts

@@ -0,0 +1,315 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The diff panel's CodeMirror side: the two view shapes, their theme, and the
+ * counts the toolbar prints.
+ *
+ * What this replaced: a unified-diff PARSER feeding two hand-built tables
+ * (1 066 lines across `UnifiedView` / `SplitView` plus the diff half of
+ * `diff-parser`), with a Shiki pass per row and its own wrapping rules.
+ * `@codemirror/merge` does the diff itself and draws the rows, so a chunk is a
+ * real editor range: the gutter markers, the deleted-chunk widgets and the
+ * collapsed stretches are the extension's, not ours.
+ *
+ * Three facts about this API are load-bearing and none is guessable:
+ *
+ * - `getChunks` is a FUNCTION, not a field: `state.field(getChunks)` throws
+ *   "Field is not present in this state". The counts do not need it either —
+ *   `Chunk.build(a, b)` is the same line-level chunking without a view, which
+ *   is what lets a badge be computed before anything is mounted.
+ * - `collapseUnchanged` is CONFIG, so switching *Diff Only* ↔ *Full Code* is a
+ *   compartment reconfigure. Re-mounting would drop the reader's scroll.
+ * - The merge package's own colours are hardcoded hex. They are overridden with
+ *   the app's palette variables, or a diff would be the one surface that ignores
+ *   the theme.
+ */
+
+import { Compartment, EditorState, Text, type Extension } from '@codemirror/state';
+import { EditorView, lineNumbers } from '@codemirror/view';
+import { Chunk, MergeView, diff, unifiedMergeView } from '@codemirror/merge';
+
+import { shikiHighlight, type ShikiThemeNames } from '@/client/components/common/code-surface/shiki';
+import { surfaceTheme } from '@/client/components/common/code-surface/theme';
+
+/** What the toolbar shows; `diff` collapses the unchanged stretches. */
+export type CollapseMode = 'diff' | 'full';
+
+/** The collapsed-stretch settings: git's own `-U3` shape, plus a minimum. */
+const COLLAPSE = { margin: 3, minSize: 4 } as const;
+
+/** Both sides of a diff are a READER here: the toolbar writes, not the editor. */
+const READ_ONLY = [EditorState.readOnly.of(true), EditorView.editable.of(false)];
+
+/**
+ * The app's palette, applied to the merge package's own classes.
+ *
+ * `&.cm-merge-a` / `&.cm-merge-b` are spelled out because the extension's base
+ * theme uses the same shape — an equally specific rule from a `theme` facet wins
+ * on order, and a weaker one loses.
+ */
+function diffTheme(): Extension {
+  return EditorView.theme({
+    '&': {
+      height: '100%',
+      backgroundColor: 'var(--editor-bg, var(--theme-paper))',
+      color: 'var(--editor-fg, var(--theme-ink))',
+      fontSize: 'inherit',
+      fontFamily: 'inherit',
+      lineHeight: 'inherit',
+    },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-scroller': { fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'inherit' },
+    '.cm-gutters': {
+      backgroundColor: 'var(--editor-bg, var(--theme-canvas))',
+      color: 'var(--editor-gutter-fg, color-mix(in srgb, var(--theme-ink) 30%, transparent))',
+      border: 'none',
+      borderRight: '1px solid var(--editor-border, color-mix(in srgb, var(--theme-ink) 10%, transparent))',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 'inherit',
+    },
+    // The diff bands follow the editor theme when one is chosen (its own
+    // inserted/removed colours) and the app's signal pair otherwise.
+    '&.cm-merge-a .cm-changedLine, .cm-deletedChunk': {
+      backgroundColor: 'var(--editor-removed, color-mix(in srgb, var(--theme-error) 10%, transparent))',
+    },
+    '&.cm-merge-b .cm-changedLine, .cm-inlineChangedLine': {
+      backgroundColor: 'var(--editor-added, color-mix(in srgb, var(--theme-success) 10%, transparent))',
+    },
+    // The per-token underline is deliberately NOT drawn, and it CANNOT be
+    // removed from here: `@codemirror/merge`'s base theme paints a 2px gradient
+    // along the bottom of every `.cm-changedText` / `.cm-deletedText` fragment,
+    // and its rules are spelled with the `&light`/`&dark` prefixes that only
+    // `EditorView.baseTheme` accepts — `EditorView.theme` throws
+    // `RangeError: Unsupported selector: &light` (measured; it took the whole
+    // merge view down with an empty host). `tailwind.css` therefore owns the
+    // suppression, under the same `.cm-changedText` class. See the block there.
+    '&.cm-merge-a .cm-changedLineGutter, .cm-deletedLineGutter': {
+      background: 'var(--editor-removed-gutter, var(--theme-error))',
+    },
+    '&.cm-merge-b .cm-changedLineGutter': {
+      background: 'var(--editor-added-gutter, var(--theme-success))',
+    },
+    '.cm-collapsedLines': {
+      color: 'color-mix(in srgb, var(--editor-fg, var(--theme-ink)) 45%, transparent)',
+      background: 'var(--editor-bg, var(--theme-canvas))',
+      fontSize: '11px',
+    },
+    '.cm-changeGutter': { width: '3px', paddingLeft: '1px' },
+    '.cm-mergeView': { height: '100%' },
+  });
+}
+
+export interface DiffViewOptions {
+  /** The document before the change (HEAD for a staged diff, the index otherwise). */
+  original: string;
+  /** The document after it. */
+  next: string;
+  language: string;
+  wordWrap: boolean;
+  collapse: CollapseMode;
+  /** The two Shiki theme names; absent keeps the app's dual pair. */
+  themes?: ShikiThemeNames;
+  /** `data-testid` for the scroller, so the e2e layer can address it. */
+  scrollTestId: string;
+  /** The element that scrolls, reported on mount and cleared on unmount. */
+  onScroller: (element: HTMLElement | null) => void;
+}
+
+export interface DiffViewHandle {
+  /** Swap the documents (a refresh, a stage, a discard). */
+  setDocuments(original: string, next: string): void;
+  /** Re-collapse or expand the unchanged stretches without re-mounting. */
+  setCollapse(collapse: CollapseMode): void;
+  setWordWrap(wordWrap: boolean): void;
+  /** The element that actually scrolls, for scroll restore. */
+  scroller(): HTMLElement | null;
+  destroy(): void;
+}
+
+/** What `collapseUnchanged` is given, or `undefined` for the full file. */
+function collapseConfig(collapse: CollapseMode): { margin: number; minSize: number } | undefined {
+  return collapse === 'diff' ? COLLAPSE : undefined;
+}
+
+/** The extension stack both shapes share. */
+function baseExtensions(options: DiffViewOptions, wrap: Compartment): Extension[] {
+  return [
+    ...READ_ONLY,
+    lineNumbers(),
+    shikiHighlight(options.language, options.themes),
+    surfaceTheme(),
+    diffTheme(),
+    wrap.of(options.wordWrap ? EditorView.lineWrapping : []),
+    // The browser's spellchecker underlines every identifier in a diff, and
+    // autocorrect would be offered on code.
+    EditorView.contentAttributes.of({ spellcheck: 'false', autocorrect: 'off', autocapitalize: 'off' }),
+  ];
+}
+
+/** Replace a document wholesale — the diff is a reader, so there is no history to keep. */
+function replaceDoc(view: EditorView, text: string): void {
+  view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text } });
+}
+
+/** The Unified shape: one editor whose content IS the new document. */
+export function mountUnifiedDiff(parent: HTMLElement, options: DiffViewOptions): DiffViewHandle {
+  const collapse = new Compartment();
+  const wrap = new Compartment();
+  /** The pair the LIVE view is comparing; re-stated whenever collapse changes. */
+  let original = options.original;
+
+  const unified = (source: string): Extension =>
+    unifiedMergeView({
+      original: source,
+      collapseUnchanged: collapseConfig(options.collapse),
+      // The panel's toolbar owns stage/unstage/discard; per-chunk accept/reject
+      // would be a second, weaker write path into the working tree.
+      mergeControls: false,
+      gutter: true,
+      // Deleted lines are widgets, so the Shiki decorations cannot reach them;
+      // leaving this on would colour them from a grammar the editor does not
+      // have installed.
+      syntaxHighlightDeletions: false,
+    });
+
+  const view = new EditorView({
+    parent,
+    state: EditorState.create({
+      doc: options.next,
+      extensions: [...baseExtensions(options, wrap), collapse.of(unified(original))],
+    }),
+  });
+  if (options.scrollTestId) view.scrollDOM.dataset.testid = options.scrollTestId;
+  options.onScroller(view.scrollDOM);
+
+  return {
+    setDocuments(nextOriginal, next) {
+      original = nextOriginal;
+      view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: next },
+        // The merge extension reads `original` from its own configuration, so a
+        // new pair means reconfiguring it — a document-only dispatch would keep
+        // comparing against the previous side.
+        effects: collapse.reconfigure(unified(original)),
+      });
+    },
+    setCollapse(mode) {
+      options.collapse = mode;
+      view.dispatch({ effects: collapse.reconfigure(unified(original)) });
+    },
+    setWordWrap(wordWrap) {
+      options.wordWrap = wordWrap;
+      view.dispatch({ effects: wrap.reconfigure(wordWrap ? EditorView.lineWrapping : []) });
+    },
+    scroller: () => view.scrollDOM,
+    destroy: () => {
+      options.onScroller(null);
+      view.destroy();
+    },
+  };
+}
+
+/** The Split shape: two editors, aligned by the merge view. */
+export function mountSplitDiff(parent: HTMLElement, options: DiffViewOptions): DiffViewHandle {
+  const wrap = new Compartment();
+  const merge = new MergeView({
+    parent,
+    a: { doc: options.original, extensions: baseExtensions(options, wrap) },
+    b: { doc: options.next, extensions: baseExtensions(options, wrap) },
+    collapseUnchanged: collapseConfig(options.collapse),
+    highlightChanges: true,
+    gutter: true,
+    orientation: 'a-b',
+  });
+  // The merge view's own element is the scroller: it styles `.cm-mergeView` with
+  // a height and `overflow: auto`, and the two editors inside it do not scroll.
+  const scroller = merge.dom;
+  if (options.scrollTestId) scroller.dataset.testid = options.scrollTestId;
+  options.onScroller(scroller);
+
+  return {
+    setDocuments(original, next) {
+      replaceDoc(merge.a, original);
+      replaceDoc(merge.b, next);
+      // `chunks` is recomputed from the editors' states, so this re-runs the
+      // diff against the new pair.
+      merge.reconfigure({ collapseUnchanged: collapseConfig(options.collapse) });
+    },
+    setCollapse(mode) {
+      options.collapse = mode;
+      merge.reconfigure({ collapseUnchanged: collapseConfig(mode) });
+    },
+    setWordWrap(wordWrap) {
+      options.wordWrap = wordWrap;
+      const effects = wrap.reconfigure(wordWrap ? EditorView.lineWrapping : []);
+      merge.a.dispatch({ effects });
+      merge.b.dispatch({ effects });
+    },
+    scroller: () => scroller,
+    destroy: () => {
+      options.onScroller(null);
+      merge.destroy();
+    },
+  };
+}
+
+/**
+ * Additions and deletions, counted from the SAME line-level diff the view draws.
+ *
+ * `Chunk.build` is the merge view's own chunking — a line-level diff, which is
+ * what its rows are. `diff()` would be the wrong source here: it is a
+ * CHARACTER diff, so changing `line 5` into `line 5 changed` reports one
+ * insertion of `" changed"` and no deletion at all, and the badge would claim
+ * two additions for two edited lines.
+ *
+ * Counting from the view's own chunks is also what makes the whitespace toggle
+ * honest: a change folded out of the comparison is not a changed row on screen,
+ * and it is not counted.
+ */
+export function countChanges(original: string, next: string): { additions: number; deletions: number } {
+  const a = Text.of(original.split('\n'));
+  const b = Text.of(next.split('\n'));
+  let additions = 0;
+  let deletions = 0;
+  for (const chunk of Chunk.build(a, b)) {
+    // `endA`/`endB` are the end of the chunk's last line, and equal the start
+    // when the chunk covers no lines on that side (a pure insertion/deletion).
+    if (chunk.endA > chunk.fromA) deletions += a.lineAt(chunk.endA).number - a.lineAt(chunk.fromA).number + 1;
+    if (chunk.endB > chunk.fromB) additions += b.lineAt(chunk.endB).number - b.lineAt(chunk.fromB).number + 1;
+  }
+  return { additions, deletions };
+}
+
+/**
+ * `original` with every whitespace-only change replaced by the new text.
+ *
+ * The toolbar's whitespace toggle means "do not show me formatting noise", and
+ * the merge view compares DOCUMENTS — so the way to honour it is to make the two
+ * sides agree there. The old table parser folded a `-`/`+` pair whose trimmed
+ * text matched back into a context row; this does the same at the source, which
+ * is why the toggle changes the CHUNKS rather than only their colour.
+ *
+ * Only line-for-line changes are folded: an inserted or deleted line is a real
+ * change even when it is blank, and hiding it would make the file's line count
+ * disagree with what is on screen.
+ */
+export function foldWhitespaceOnly(original: string, next: string): string {
+  const changes = diff(original, next);
+  let folded = original;
+  // Back to front: an earlier splice would move every later offset.
+  for (let index = changes.length - 1; index >= 0; index--) {
+    const change = changes[index];
+    const before = original.slice(change.fromA, change.toA);
+    const after = next.slice(change.fromB, change.toB);
+    const beforeLines = before.split('\n');
+    const afterLines = after.split('\n');
+    if (beforeLines.length !== afterLines.length) continue;
+    if (!beforeLines.every((line, lineIndex) => line.trim() === afterLines[lineIndex].trim())) continue;
+    folded = folded.slice(0, change.fromA) + after + folded.slice(change.toA);
+  }
+  return folded;
+}