From efba56c8c03c0f5be5b21de4f8b92c0cc91639fa Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 24 Aug 2026 23:25:24 +0000
Subject: [PATCH] feat(grid): compare original and edited JSON values

Closes #1638
---
 .../components/common/SideBySideTextDiff.vue  | 204 ++++++++++++++++++
 .../VirtualScrollArea.vue}                    |   4 +-
 .../components/dolt/DoltCellDiffDialog.vue    | 196 ++---------------
 .../src/components/dolt/DoltDiffTable.vue     |   8 +-
 .../components/dolt/DoltRevisionSelector.vue  |   6 +-
 .../components/dolt/DoltVersionControl.vue    |  18 +-
 apps/desktop/src/components/grid/DataGrid.vue |  41 +++-
 .../grid/DataGridCellDetailPanel.vue          |   6 +-
 .../grid/DataGridValueDiffDialog.vue          |  85 ++++++++
 .../grid/__tests__/DataGridSurfaces.spec.ts   |  44 ++++
 apps/desktop/src/i18n/locales/en.ts           |  11 +
 apps/desktop/src/i18n/locales/es.ts           |  11 +
 apps/desktop/src/i18n/locales/it.ts           |  11 +
 apps/desktop/src/i18n/locales/ja.ts           |  11 +
 apps/desktop/src/i18n/locales/ko.ts           |  11 +
 apps/desktop/src/i18n/locales/pt-BR.ts        |  11 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |  11 +
 apps/desktop/src/i18n/locales/zh-TW.ts        |  11 +
 .../__tests__/dataGrid/jsonValueDiff.spec.ts  |  77 +++++++
 apps/desktop/src/lib/common/textDiff.ts       | 158 ++++++++++++++
 .../desktop/src/lib/dataGrid/jsonValueDiff.ts |  73 +++++++
 apps/desktop/src/lib/dolt/doltCellDiff.ts     | 145 +------------
 22 files changed, 814 insertions(+), 339 deletions(-)
 create mode 100644 apps/desktop/src/components/common/SideBySideTextDiff.vue
 rename apps/desktop/src/components/{dolt/DoltScrollArea.vue => common/VirtualScrollArea.vue} (99%)
 create mode 100644 apps/desktop/src/components/grid/DataGridValueDiffDialog.vue
 create mode 100644 apps/desktop/src/lib/__tests__/dataGrid/jsonValueDiff.spec.ts
 create mode 100644 apps/desktop/src/lib/common/textDiff.ts
 create mode 100644 apps/desktop/src/lib/dataGrid/jsonValueDiff.ts

diff --git a/apps/desktop/src/components/common/SideBySideTextDiff.vue b/apps/desktop/src/components/common/SideBySideTextDiff.vue
new file mode 100644
index 0000000000..a9b84a7018
--- /dev/null
+++ b/apps/desktop/src/components/common/SideBySideTextDiff.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch, type CSSProperties } from "vue";
+import { Copy } from "@lucide/vue";
+import { Button } from "@/components/ui/button";
+import VirtualScrollArea from "@/components/common/VirtualScrollArea.vue";
+import { buildTextDiff, type TextDiffKind } from "@/lib/common/textDiff";
+
+export type TextDiffSide = "before" | "after";
+
+const props = withDefaults(
+  defineProps<{
+    beforeText: string;
+    afterText: string;
+    beforeLabel: string;
+    afterLabel: string;
+    copyBeforeTitle: string;
+    copyAfterTitle: string;
+    beforeAvailable?: boolean;
+    afterAvailable?: boolean;
+  }>(),
+  {
+    beforeAvailable: true,
+    afterAvailable: true,
+  },
+);
+
+const emit = defineEmits<{
+  copy: [side: TextDiffSide];
+}>();
+
+const beforeScrollArea = ref<InstanceType<typeof VirtualScrollArea> | null>(null);
+const afterScrollArea = ref<InstanceType<typeof VirtualScrollArea> | null>(null);
+const scrollTop = ref(0);
+const viewportHeight = ref(0);
+let scrollSyncing = false;
+let scrollSyncFrame = 0;
+
+const ROW_HEIGHT = 22;
+const ROW_BUFFER = 12;
+
+const diffRows = computed(() => {
+  const rows = buildTextDiff(props.beforeText, props.afterText);
+  if (!props.beforeAvailable && props.afterAvailable) return rows.map((row) => ({ ...row, kind: "added" as const }));
+  if (!props.afterAvailable && props.beforeAvailable) return rows.map((row) => ({ ...row, kind: "removed" as const }));
+  return rows;
+});
+const visibleStart = computed(() => Math.max(0, Math.floor(scrollTop.value / ROW_HEIGHT) - ROW_BUFFER));
+const visibleEnd = computed(() => Math.min(diffRows.value.length, Math.ceil((scrollTop.value + viewportHeight.value) / ROW_HEIGHT) + ROW_BUFFER));
+const visibleRows = computed(() => diffRows.value.slice(visibleStart.value, visibleEnd.value).map((row, offset) => ({ row, index: visibleStart.value + offset })));
+const longestLineLength = computed(() => {
+  let maximum = 0;
+  for (const row of diffRows.value) maximum = Math.max(maximum, row.beforeText.length, row.afterText.length);
+  return Math.min(20_000, maximum);
+});
+const textContentStyle = computed<CSSProperties>(() => ({
+  height: `${Math.max(1, diffRows.value.length * ROW_HEIGHT)}px`,
+  width: `max(100%, ${Math.max(40, longestLineLength.value + 8)}ch)`,
+}));
+
+function rowClass(kind: TextDiffKind, side: TextDiffSide): string {
+  if (kind === "modified") return "side-by-side-text-row-modified";
+  if (kind === "added" && side === "after") return "side-by-side-text-row-added";
+  if (kind === "removed" && side === "before") return "side-by-side-text-row-removed";
+  return "";
+}
+
+function updateViewport(element: HTMLElement) {
+  scrollTop.value = element.scrollTop;
+  viewportHeight.value = element.clientHeight;
+}
+
+function syncScroll(side: TextDiffSide, source: HTMLElement) {
+  updateViewport(source);
+  if (scrollSyncing) return;
+  const target = side === "before" ? afterScrollArea.value?.scrollerElement() : beforeScrollArea.value?.scrollerElement();
+  if (!target) return;
+  scrollSyncing = true;
+  target.scrollTop = source.scrollTop;
+  target.scrollLeft = source.scrollLeft;
+  if (scrollSyncFrame) cancelAnimationFrame(scrollSyncFrame);
+  scrollSyncFrame = requestAnimationFrame(() => {
+    scrollSyncFrame = 0;
+    scrollSyncing = false;
+  });
+}
+
+function onResize(element: HTMLElement) {
+  viewportHeight.value = Math.max(viewportHeight.value, element.clientHeight);
+}
+
+async function resetScroll() {
+  scrollTop.value = 0;
+  await nextTick();
+  beforeScrollArea.value?.scrollerElement()?.scrollTo({ top: 0, left: 0 });
+  afterScrollArea.value?.scrollerElement()?.scrollTo({ top: 0, left: 0 });
+}
+
+watch(() => [props.beforeText, props.afterText], resetScroll);
+
+onUnmounted(() => {
+  if (scrollSyncFrame) cancelAnimationFrame(scrollSyncFrame);
+});
+</script>
+
+<template>
+  <div class="grid min-h-0 flex-1 grid-cols-2 overflow-hidden">
+    <section class="flex min-h-0 min-w-0 flex-col border-r">
+      <div class="flex h-8 shrink-0 items-center gap-2 border-b bg-muted/20 px-2 text-[11px]">
+        <span class="min-w-0 flex-1 truncate font-mono text-muted-foreground" :title="beforeLabel">{{ beforeLabel }}</span>
+        <Button variant="ghost" size="icon" class="h-6 w-6" :disabled="!beforeAvailable" :title="copyBeforeTitle" @click="emit('copy', 'before')"><Copy class="h-3 w-3" /></Button>
+      </div>
+      <VirtualScrollArea ref="beforeScrollArea" class="min-h-0 flex-1" scroller-class="side-by-side-text-before-scroller" @scroll="syncScroll('before', $event)" @resize="onResize">
+        <div class="side-by-side-text-content" :style="textContentStyle">
+          <div v-for="visible in visibleRows" :key="`before-${visible.index}`" class="side-by-side-text-row" :class="rowClass(visible.row.kind, 'before')" :style="{ top: `${visible.index * ROW_HEIGHT}px`, height: `${ROW_HEIGHT}px` }">
+            <span class="side-by-side-text-line-number">{{ visible.row.beforeLineNumber ?? "" }}</span>
+            <code class="side-by-side-text-code"
+              ><template v-for="(segment, index) in visible.row.beforeSegments" :key="index"
+                ><span :class="{ 'side-by-side-text-segment-changed': segment.changed }">{{ segment.text }}</span></template
+              >&nbsp;</code
+            >
+          </div>
+        </div>
+      </VirtualScrollArea>
+    </section>
+
+    <section class="flex min-h-0 min-w-0 flex-col">
+      <div class="flex h-8 shrink-0 items-center gap-2 border-b bg-muted/20 px-2 text-[11px]">
+        <span class="min-w-0 flex-1 truncate font-mono text-muted-foreground" :title="afterLabel">{{ afterLabel }}</span>
+        <Button variant="ghost" size="icon" class="h-6 w-6" :disabled="!afterAvailable" :title="copyAfterTitle" @click="emit('copy', 'after')"><Copy class="h-3 w-3" /></Button>
+      </div>
+      <VirtualScrollArea ref="afterScrollArea" class="min-h-0 flex-1" scroller-class="side-by-side-text-after-scroller" @scroll="syncScroll('after', $event)" @resize="onResize">
+        <div class="side-by-side-text-content" :style="textContentStyle">
+          <div v-for="visible in visibleRows" :key="`after-${visible.index}`" class="side-by-side-text-row" :class="rowClass(visible.row.kind, 'after')" :style="{ top: `${visible.index * ROW_HEIGHT}px`, height: `${ROW_HEIGHT}px` }">
+            <span class="side-by-side-text-line-number">{{ visible.row.afterLineNumber ?? "" }}</span>
+            <code class="side-by-side-text-code"
+              ><template v-for="(segment, index) in visible.row.afterSegments" :key="index"
+                ><span :class="{ 'side-by-side-text-segment-changed': segment.changed }">{{ segment.text }}</span></template
+              >&nbsp;</code
+            >
+          </div>
+        </div>
+      </VirtualScrollArea>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.side-by-side-text-content {
+  position: relative;
+  min-width: 100%;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.side-by-side-text-row {
+  position: absolute;
+  left: 0;
+  display: flex;
+  width: 100%;
+  min-width: 100%;
+  align-items: center;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
+  line-height: 21px;
+}
+
+.side-by-side-text-line-number {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  width: 48px;
+  height: 100%;
+  flex: 0 0 48px;
+  border-right: 1px solid var(--border);
+  background: var(--background);
+  padding-right: 8px;
+  text-align: right;
+  color: var(--muted-foreground);
+  user-select: none;
+}
+
+.side-by-side-text-code {
+  display: block;
+  min-width: 0;
+  padding: 0 8px;
+  white-space: pre;
+  font-family: inherit;
+}
+
+.side-by-side-text-row-modified {
+  background: rgb(217 119 6 / 0.11);
+}
+
+.side-by-side-text-row-added {
+  background: rgb(22 163 74 / 0.11);
+}
+
+.side-by-side-text-row-removed {
+  background: rgb(220 38 38 / 0.1);
+}
+
+.side-by-side-text-row-modified .side-by-side-text-segment-changed {
+  background: rgb(217 119 6 / 0.32);
+}
+</style>
diff --git a/apps/desktop/src/components/dolt/DoltScrollArea.vue b/apps/desktop/src/components/common/VirtualScrollArea.vue
similarity index 99%
rename from apps/desktop/src/components/dolt/DoltScrollArea.vue
rename to apps/desktop/src/components/common/VirtualScrollArea.vue
index 3ece6ffa5f..e2a78c6ccf 100644
--- a/apps/desktop/src/components/dolt/DoltScrollArea.vue
+++ b/apps/desktop/src/components/common/VirtualScrollArea.vue
@@ -170,7 +170,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="dolt-scroll-area">
+  <div class="virtual-scroll-area">
     <div ref="scroller" class="dolt-scroll-area-scroller" :class="props.scrollerClass" @scroll.passive="onScroll">
       <slot />
     </div>
@@ -184,7 +184,7 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.dolt-scroll-area {
+.virtual-scroll-area {
   position: relative;
   display: flex;
   min-width: 0;
diff --git a/apps/desktop/src/components/dolt/DoltCellDiffDialog.vue b/apps/desktop/src/components/dolt/DoltCellDiffDialog.vue
index 795c9ea7af..97b7be322d 100644
--- a/apps/desktop/src/components/dolt/DoltCellDiffDialog.vue
+++ b/apps/desktop/src/components/dolt/DoltCellDiffDialog.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch, type CSSProperties } from "vue";
-import { AlertCircle, Copy, FileDiff } from "@lucide/vue";
+import { computed, ref, watch } from "vue";
+import { AlertCircle, FileDiff } from "@lucide/vue";
 import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import DoltScrollArea from "@/components/dolt/DoltScrollArea.vue";
+import SideBySideTextDiff, { type TextDiffSide } from "@/components/common/SideBySideTextDiff.vue";
 import { useToast } from "@/composables/useToast";
 import { copyToClipboard } from "@/lib/common/clipboard";
-import { buildDoltTextDiff, detectDoltCellFormat, doltCellCopyText, doltCellDisplayValue, formatDoltCellText, type DoltCellFormat, type DoltCellFormatMode, type DoltCellSide, type DoltDiffCellTarget, type DoltTextDiffKind } from "@/lib/dolt/doltCellDiff";
+import { detectDoltCellFormat, doltCellCopyText, doltCellDisplayValue, formatDoltCellText, type DoltCellFormat, type DoltCellFormatMode, type DoltDiffCellTarget } from "@/lib/dolt/doltCellDiff";
 
 const props = defineProps<{
   target: DoltDiffCellTarget | null;
@@ -20,15 +20,6 @@ const open = defineModel<boolean>("open", { default: false });
 const { t } = useI18n();
 const { toast } = useToast();
 const formatMode = ref<DoltCellFormatMode>("auto");
-const beforeScrollArea = ref<InstanceType<typeof DoltScrollArea> | null>(null);
-const afterScrollArea = ref<InstanceType<typeof DoltScrollArea> | null>(null);
-const scrollTop = ref(0);
-const viewportHeight = ref(0);
-let scrollSyncing = false;
-let scrollSyncFrame = 0;
-
-const ROW_HEIGHT = 22;
-const ROW_BUFFER = 12;
 
 const displayLabels = computed(() => ({
   nullValue: t("doltVersionControl.cellNullValue"),
@@ -41,24 +32,6 @@ const detectedFormat = computed<DoltCellFormat>(() => detectDoltCellFormat([befo
 const effectiveFormat = computed<DoltCellFormat>(() => (formatMode.value === "auto" ? detectedFormat.value : formatMode.value));
 const beforeFormatted = computed(() => (beforeDisplay.value ? formatDoltCellText(beforeDisplay.value, effectiveFormat.value) : { text: "", error: null }));
 const afterFormatted = computed(() => (afterDisplay.value ? formatDoltCellText(afterDisplay.value, effectiveFormat.value) : { text: "", error: null }));
-const diffRows = computed(() => {
-  const rows = buildDoltTextDiff(beforeFormatted.value.text, afterFormatted.value.text);
-  if (beforeDisplay.value?.state !== "value" && afterDisplay.value?.state === "value") return rows.map((row) => ({ ...row, kind: "added" as const }));
-  if (afterDisplay.value?.state !== "value" && beforeDisplay.value?.state === "value") return rows.map((row) => ({ ...row, kind: "removed" as const }));
-  return rows;
-});
-const visibleStart = computed(() => Math.max(0, Math.floor(scrollTop.value / ROW_HEIGHT) - ROW_BUFFER));
-const visibleEnd = computed(() => Math.min(diffRows.value.length, Math.ceil((scrollTop.value + viewportHeight.value) / ROW_HEIGHT) + ROW_BUFFER));
-const visibleRows = computed(() => diffRows.value.slice(visibleStart.value, visibleEnd.value).map((row, offset) => ({ row, index: visibleStart.value + offset })));
-const longestLineLength = computed(() => {
-  let maximum = 0;
-  for (const row of diffRows.value) maximum = Math.max(maximum, row.beforeText.length, row.afterText.length);
-  return Math.min(20_000, maximum);
-});
-const textContentStyle = computed<CSSProperties>(() => ({
-  height: `${Math.max(1, diffRows.value.length * ROW_HEIGHT)}px`,
-  width: `max(100%, ${Math.max(40, longestLineLength.value + 8)}ch)`,
-}));
 const formatOptions = computed<Array<{ value: DoltCellFormatMode; label: string }>>(() => [
   { value: "auto", label: t("doltVersionControl.cellDiffFormatAuto") },
   { value: "raw", label: t("doltVersionControl.cellDiffFormatRaw") },
@@ -66,38 +39,7 @@ const formatOptions = computed<Array<{ value: DoltCellFormatMode; label: string
   { value: "xml", label: "XML" },
 ]);
 
-function rowClass(kind: DoltTextDiffKind, side: DoltCellSide): string {
-  if (kind === "modified") return "dolt-cell-text-row-modified";
-  if (kind === "added" && side === "after") return "dolt-cell-text-row-added";
-  if (kind === "removed" && side === "before") return "dolt-cell-text-row-removed";
-  return "";
-}
-
-function updateViewport(element: HTMLElement) {
-  scrollTop.value = element.scrollTop;
-  viewportHeight.value = element.clientHeight;
-}
-
-function syncScroll(side: DoltCellSide, source: HTMLElement) {
-  updateViewport(source);
-  if (scrollSyncing) return;
-  const target = side === "before" ? afterScrollArea.value?.scrollerElement() : beforeScrollArea.value?.scrollerElement();
-  if (!target) return;
-  scrollSyncing = true;
-  target.scrollTop = source.scrollTop;
-  target.scrollLeft = source.scrollLeft;
-  if (scrollSyncFrame) cancelAnimationFrame(scrollSyncFrame);
-  scrollSyncFrame = requestAnimationFrame(() => {
-    scrollSyncFrame = 0;
-    scrollSyncing = false;
-  });
-}
-
-function onResize(element: HTMLElement) {
-  viewportHeight.value = Math.max(viewportHeight.value, element.clientHeight);
-}
-
-async function copyValue(side: DoltCellSide) {
+async function copyValue(side: TextDiffSide) {
   if (!props.target) return;
   const value = doltCellCopyText(props.target, side);
   if (value === null) return;
@@ -111,28 +53,11 @@ async function copyValue(side: DoltCellSide) {
 
 watch(
   () => [open.value, props.target?.rowIndex, props.target?.columnIndex, props.target?.side],
-  async ([isOpen]) => {
+  ([isOpen]) => {
     if (!isOpen) return;
     formatMode.value = "auto";
-    scrollTop.value = 0;
-    await nextTick();
-    const before = beforeScrollArea.value?.scrollerElement();
-    const after = afterScrollArea.value?.scrollerElement();
-    if (before) before.scrollTo({ top: 0, left: 0 });
-    if (after) after.scrollTo({ top: 0, left: 0 });
   },
 );
-
-watch(effectiveFormat, async () => {
-  scrollTop.value = 0;
-  await nextTick();
-  beforeScrollArea.value?.scrollerElement()?.scrollTo({ top: 0, left: 0 });
-  afterScrollArea.value?.scrollerElement()?.scrollTo({ top: 0, left: 0 });
-});
-
-onUnmounted(() => {
-  if (scrollSyncFrame) cancelAnimationFrame(scrollSyncFrame);
-});
 </script>
 
 <template>
@@ -167,104 +92,17 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <div class="grid min-h-0 flex-1 grid-cols-2 overflow-hidden">
-        <section class="flex min-w-0 min-h-0 flex-col border-r">
-          <div class="flex h-8 shrink-0 items-center gap-2 border-b bg-muted/20 px-2 text-[11px]">
-            <span class="min-w-0 flex-1 truncate font-mono text-muted-foreground" :title="fromRevision">{{ fromRevision }}</span>
-            <Button variant="ghost" size="icon" class="h-6 w-6" :disabled="doltCellCopyText(target, 'before') === null" :title="t('doltVersionControl.copyBeforeValue')" @click="copyValue('before')"><Copy class="h-3 w-3" /></Button>
-          </div>
-          <DoltScrollArea ref="beforeScrollArea" class="min-h-0 flex-1" scroller-class="dolt-cell-diff-before-scroller" @scroll="syncScroll('before', $event)" @resize="onResize">
-            <div class="dolt-cell-text-content" :style="textContentStyle">
-              <div v-for="visible in visibleRows" :key="`before-${visible.index}`" class="dolt-cell-text-row" :class="rowClass(visible.row.kind, 'before')" :style="{ top: `${visible.index * ROW_HEIGHT}px`, height: `${ROW_HEIGHT}px` }">
-                <span class="dolt-cell-text-line-number">{{ visible.row.beforeLineNumber ?? "" }}</span>
-                <code class="dolt-cell-text-code"
-                  ><template v-for="(segment, index) in visible.row.beforeSegments" :key="index"
-                    ><span :class="{ 'dolt-cell-text-segment-changed': segment.changed }">{{ segment.text }}</span></template
-                  >&nbsp;</code
-                >
-              </div>
-            </div>
-          </DoltScrollArea>
-        </section>
-
-        <section class="flex min-w-0 min-h-0 flex-col">
-          <div class="flex h-8 shrink-0 items-center gap-2 border-b bg-muted/20 px-2 text-[11px]">
-            <span class="min-w-0 flex-1 truncate font-mono text-muted-foreground" :title="toRevision">{{ toRevision }}</span>
-            <Button variant="ghost" size="icon" class="h-6 w-6" :disabled="doltCellCopyText(target, 'after') === null" :title="t('doltVersionControl.copyAfterValue')" @click="copyValue('after')"><Copy class="h-3 w-3" /></Button>
-          </div>
-          <DoltScrollArea ref="afterScrollArea" class="min-h-0 flex-1" scroller-class="dolt-cell-diff-after-scroller" @scroll="syncScroll('after', $event)" @resize="onResize">
-            <div class="dolt-cell-text-content" :style="textContentStyle">
-              <div v-for="visible in visibleRows" :key="`after-${visible.index}`" class="dolt-cell-text-row" :class="rowClass(visible.row.kind, 'after')" :style="{ top: `${visible.index * ROW_HEIGHT}px`, height: `${ROW_HEIGHT}px` }">
-                <span class="dolt-cell-text-line-number">{{ visible.row.afterLineNumber ?? "" }}</span>
-                <code class="dolt-cell-text-code"
-                  ><template v-for="(segment, index) in visible.row.afterSegments" :key="index"
-                    ><span :class="{ 'dolt-cell-text-segment-changed': segment.changed }">{{ segment.text }}</span></template
-                  >&nbsp;</code
-                >
-              </div>
-            </div>
-          </DoltScrollArea>
-        </section>
-      </div>
+      <SideBySideTextDiff
+        :before-text="beforeFormatted.text"
+        :after-text="afterFormatted.text"
+        :before-label="fromRevision"
+        :after-label="toRevision"
+        :copy-before-title="t('doltVersionControl.copyBeforeValue')"
+        :copy-after-title="t('doltVersionControl.copyAfterValue')"
+        :before-available="beforeDisplay?.state === 'value'"
+        :after-available="afterDisplay?.state === 'value'"
+        @copy="copyValue"
+      />
     </DialogContent>
   </Dialog>
 </template>
-
-<style scoped>
-.dolt-cell-text-content {
-  position: relative;
-  min-width: 100%;
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-
-.dolt-cell-text-row {
-  position: absolute;
-  left: 0;
-  display: flex;
-  width: 100%;
-  min-width: 100%;
-  align-items: center;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
-  line-height: 21px;
-}
-
-.dolt-cell-text-line-number {
-  position: sticky;
-  left: 0;
-  z-index: 1;
-  width: 48px;
-  height: 100%;
-  flex: 0 0 48px;
-  border-right: 1px solid var(--border);
-  background: var(--background);
-  padding-right: 8px;
-  text-align: right;
-  color: var(--muted-foreground);
-  user-select: none;
-}
-
-.dolt-cell-text-code {
-  display: block;
-  min-width: 0;
-  padding: 0 8px;
-  white-space: pre;
-  font-family: inherit;
-}
-
-.dolt-cell-text-row-modified {
-  background: rgb(217 119 6 / 0.11);
-}
-
-.dolt-cell-text-row-added {
-  background: rgb(22 163 74 / 0.11);
-}
-
-.dolt-cell-text-row-removed {
-  background: rgb(220 38 38 / 0.1);
-}
-
-.dolt-cell-text-row-modified .dolt-cell-text-segment-changed {
-  background: rgb(217 119 6 / 0.32);
-}
-</style>
diff --git a/apps/desktop/src/components/dolt/DoltDiffTable.vue b/apps/desktop/src/components/dolt/DoltDiffTable.vue
index 2c4205d3f4..f81e2f7004 100644
--- a/apps/desktop/src/components/dolt/DoltDiffTable.vue
+++ b/apps/desktop/src/components/dolt/DoltDiffTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch, type CSSProperties } from "vue";
-import DoltScrollArea from "@/components/dolt/DoltScrollArea.vue";
+import VirtualScrollArea from "@/components/common/VirtualScrollArea.vue";
 import type { QueryResult } from "@/types/database";
 import type { DoltDiffColumnKind, DoltDiffRow } from "@/lib/dolt/doltVersionControl";
 import type { DoltDiffCellTarget } from "@/lib/dolt/doltCellDiff";
@@ -32,7 +32,7 @@ const COLUMN_BUFFER = 240;
 const minimumColumnWidth = 72;
 const maximumColumnWidth = 360;
 
-const scrollArea = ref<InstanceType<typeof DoltScrollArea> | null>(null);
+const scrollArea = ref<InstanceType<typeof VirtualScrollArea> | null>(null);
 const measuredWidths = ref<number[]>([]);
 const scrollTop = ref(0);
 const scrollLeft = ref(0);
@@ -227,7 +227,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <DoltScrollArea ref="scrollArea" class="min-h-0 flex-1" scroller-class="dolt-diff-table-scroller" @scroll="onScroll" @resize="updateViewport">
+  <VirtualScrollArea ref="scrollArea" class="min-h-0 flex-1" scroller-class="dolt-diff-table-scroller" @scroll="onScroll" @resize="updateViewport">
     <div class="dolt-diff-table-content" :style="contentStyle">
       <div class="dolt-diff-table-header" :style="{ width: `${Math.max(totalWidth, 1)}px`, height: '28px' }">
         <div v-for="column in visibleColumns" :key="`header-${column.index}-${column.column}`" class="dolt-diff-table-header-cell" :class="headerClass?.(column.index, column.column)" :data-column-kind="column.kind" :style="{ left: `${column.left}px`, width: `${column.width}px` }">
@@ -258,7 +258,7 @@ onUnmounted(() => {
       </div>
       <div v-if="rows.length === 0" class="dolt-diff-table-empty">{{ $t("doltVersionControl.noRowChanges") }}</div>
     </div>
-  </DoltScrollArea>
+  </VirtualScrollArea>
 </template>
 
 <style scoped>
diff --git a/apps/desktop/src/components/dolt/DoltRevisionSelector.vue b/apps/desktop/src/components/dolt/DoltRevisionSelector.vue
index f8148bf086..2030488fd2 100644
--- a/apps/desktop/src/components/dolt/DoltRevisionSelector.vue
+++ b/apps/desktop/src/components/dolt/DoltRevisionSelector.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { Check, ChevronDown, GitBranch, Tag } from "@lucide/vue";
-import DoltScrollArea from "@/components/dolt/DoltScrollArea.vue";
+import VirtualScrollArea from "@/components/common/VirtualScrollArea.vue";
 import type { DoltRef } from "@/lib/dolt/doltVersionControl";
 
 const props = defineProps<{
@@ -153,7 +153,7 @@ onUnmounted(() => document.removeEventListener("pointerdown", onDocumentPointerD
     </div>
 
     <div v-if="open && filteredOptions.length" class="dolt-revision-selector-options" role="listbox">
-      <DoltScrollArea class="max-h-[240px]" scroller-class="p-[3px]">
+      <VirtualScrollArea class="max-h-[240px]" scroller-class="p-[3px]">
         <button
           v-for="(option, index) in filteredOptions"
           :key="`${option.kind}:${option.name}`"
@@ -170,7 +170,7 @@ onUnmounted(() => document.removeEventListener("pointerdown", onDocumentPointerD
           <span class="min-w-0 flex-1 truncate font-mono text-[11px]">{{ option.name }}</span>
           <Check v-if="option.name === modelValue" class="h-3.5 w-3.5 text-primary" />
         </button>
-      </DoltScrollArea>
+      </VirtualScrollArea>
     </div>
   </div>
 </template>
diff --git a/apps/desktop/src/components/dolt/DoltVersionControl.vue b/apps/desktop/src/components/dolt/DoltVersionControl.vue
index a22cfa4a16..6739caf787 100644
--- a/apps/desktop/src/components/dolt/DoltVersionControl.vue
+++ b/apps/desktop/src/components/dolt/DoltVersionControl.vue
@@ -14,7 +14,7 @@ import DoltDiffPagination from "@/components/dolt/DoltDiffPagination.vue";
 import DoltDiffTable from "@/components/dolt/DoltDiffTable.vue";
 import DoltCellDiffDialog from "@/components/dolt/DoltCellDiffDialog.vue";
 import DoltRevisionSelector from "@/components/dolt/DoltRevisionSelector.vue";
-import DoltScrollArea from "@/components/dolt/DoltScrollArea.vue";
+import VirtualScrollArea from "@/components/common/VirtualScrollArea.vue";
 import * as api from "@/lib/backend/api";
 import { filterDatabaseNamesForVisiblePicker } from "@/lib/database/visibleDatabases";
 import type { QueryResult } from "@/types/database";
@@ -1264,7 +1264,7 @@ onUnmounted(() => {
                 <span class="truncate">{{ t("doltVersionControl.changedTables") }}</span>
                 <span v-if="changes.length" class="ml-auto text-[11px] text-muted-foreground">{{ changes.length }}</span>
               </div>
-              <DoltScrollArea class="min-h-0 flex-1">
+              <VirtualScrollArea class="min-h-0 flex-1">
                 <div v-if="comparisonLoading && changes.length === 0" class="flex h-24 items-center justify-center gap-2 text-xs text-muted-foreground"><Loader2 class="h-4 w-4 animate-spin" />{{ t("doltVersionControl.loadingDiff") }}</div>
                 <div v-else-if="comparisonError" class="p-3 text-xs text-destructive">{{ comparisonError }}</div>
                 <div v-else-if="changes.length === 0" class="flex h-24 items-center justify-center px-3 text-center text-xs text-muted-foreground">{{ t("doltVersionControl.noChanges") }}</div>
@@ -1276,7 +1276,7 @@ onUnmounted(() => {
                     <span v-for="flag in changeFlags(change)" :key="flag" class="dolt-change-flag">{{ changeFlagSymbol(flag) }}</span>
                   </span>
                 </button>
-              </DoltScrollArea>
+              </VirtualScrollArea>
             </section>
           </Pane>
 
@@ -1376,7 +1376,7 @@ onUnmounted(() => {
                   </TabsList>
                 </div>
                 <TabsContent value="branches" class="m-0 min-h-0 flex-1 overflow-hidden">
-                  <DoltScrollArea class="h-full min-h-0" scroller-class="py-1 text-xs">
+                  <VirtualScrollArea class="h-full min-h-0" scroller-class="py-1 text-xs">
                     <template v-if="branchTreeView">
                       <CustomContextMenu v-for="row in branchTreeRows" :key="`branch-tree-${row.key}`" :items="() => branchTreeRowContextMenuItems(row)" v-slot="{ onContextMenu, isOpen }">
                         <button
@@ -1419,10 +1419,10 @@ onUnmounted(() => {
                       </CustomContextMenu>
                     </template>
                     <div v-if="visibleBranches.length === 0" class="px-7 py-2 text-muted-foreground">{{ t("doltVersionControl.noBranches") }}</div>
-                  </DoltScrollArea>
+                  </VirtualScrollArea>
                 </TabsContent>
                 <TabsContent value="tags" class="m-0 min-h-0 flex-1 overflow-hidden">
-                  <DoltScrollArea class="h-full min-h-0" scroller-class="py-1 text-xs">
+                  <VirtualScrollArea class="h-full min-h-0" scroller-class="py-1 text-xs">
                     <CustomContextMenu v-for="item in visibleTags" :key="`tag-${item.name}`" :items="() => refContextMenuItems(item)" v-slot="{ onContextMenu, isOpen }">
                       <button
                         type="button"
@@ -1436,14 +1436,14 @@ onUnmounted(() => {
                       </button>
                     </CustomContextMenu>
                     <div v-if="visibleTags.length === 0" class="px-7 py-2 text-muted-foreground">{{ t("doltVersionControl.noTags") }}</div>
-                  </DoltScrollArea>
+                  </VirtualScrollArea>
                 </TabsContent>
               </Tabs>
             </aside>
           </Pane>
 
           <Pane :size="100 - doltLeftPaneSize" :min-size="100 - DOLT_LEFT_PANE_MAX_SIZE">
-            <DoltScrollArea class="relative h-full min-h-0">
+            <VirtualScrollArea class="relative h-full min-h-0">
               <div class="dolt-commit-header sticky top-0 z-20 grid h-7 items-center border-b bg-muted/80 text-[11px] font-medium text-muted-foreground backdrop-blur" :style="{ gridTemplateColumns: `${graphWidth}px minmax(240px, 1fr) 150px 155px` }">
                 <span class="px-2">{{ t("doltVersionControl.graph") }}</span>
                 <span class="px-2">{{ t("doltVersionControl.commit") }}</span>
@@ -1512,7 +1512,7 @@ onUnmounted(() => {
                   </button>
                 </CustomContextMenu>
               </div>
-            </DoltScrollArea>
+            </VirtualScrollArea>
           </Pane>
         </Splitpanes>
       </Pane>
diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 1b0076f1a8..0870c78e25 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -151,6 +151,7 @@ import {
 } from "@/lib/dataGrid/binaryCellDownload";
 import { buildBinaryHexViewRows } from "@/lib/dataGrid/binaryHexViewer";
 import { canFormatCellDetailJson, cellDetailEditorText, compactJsonText, defaultCellDetailTab, formatJsonText, isGeometryColumnType, linkedCellDetailTarget, looksLikeJsonContainerText, valueEditorActions, visibleCellDetailTabs, type CellDetailTab } from "@/lib/dataGrid/cellDetailPresentation";
+import { createJsonValueDiffSnapshot, isJsonValueDiffAvailable, type JsonValueDiffContext, type JsonValueDiffSnapshot } from "@/lib/dataGrid/jsonValueDiff";
 import {
   buildDataGridCellDetail,
   buildDataGridColumnDetail,
@@ -361,6 +362,7 @@ dayjs.extend(timezone);
 const SqlPreviewPanel = defineAsyncComponent(() => import("@/components/editor/SqlPreviewPanel.vue"));
 const ImagePreviewDialog = defineAsyncComponent(() => import("@/components/grid/ImagePreviewDialog.vue"));
 const DataGridCellDetailDialog = defineAsyncComponent(() => import("@/components/grid/DataGridCellDetailDialog.vue"));
+const DataGridValueDiffDialog = defineAsyncComponent(() => import("@/components/grid/DataGridValueDiffDialog.vue"));
 const DataGridMongoJsonPreview = defineAsyncComponent(() => import("@/components/grid/DataGridMongoJsonPreview.vue"));
 const DataGridDetailDialogs = defineAsyncComponent(() => import("@/components/grid/DataGridDetailDialogs.vue"));
 const DataGridBulkEditDialog = defineAsyncComponent(() => import("@/components/grid/DataGridBulkEditDialog.vue"));
@@ -5972,7 +5974,25 @@ watch(activeCellDetailTab, (tab) => {
 const detailEditValue = ref("");
 const detailEditOriginalValue = ref("");
 const isEditingDetail = ref(false);
+const detailValueDiffOpen = ref(false);
+const detailValueDiffSnapshot = ref<Readonly<JsonValueDiffSnapshot> | null>(null);
 const hasPendingDetailEditorDraft = computed(() => isEditingDetail.value && detailEditValue.value !== detailEditOriginalValue.value);
+const detailJsonDiffContext = computed<JsonValueDiffContext | null>(() => {
+  const detail = activeCellDetail.value;
+  if (!detail) return null;
+  return {
+    columnName: detail.column,
+    columnType: detail.type,
+    originalValue: detailEditOriginalValue.value,
+    isEditable: detail.isEditable,
+    isEditing: isEditingDetail.value,
+  };
+});
+const showDetailJsonCompare = computed(() => {
+  const context = detailJsonDiffContext.value;
+  return !!context && isJsonValueDiffAvailable(context);
+});
+const canCompareDetailJson = computed(() => showDetailJsonCompare.value && hasPendingDetailEditorDraft.value);
 const hasPendingInlineEditorDraft = computed(() => {
   const cell = editingCell.value;
   if (!cell) return false;
@@ -6141,7 +6161,9 @@ watch(valueEditorContainer, async (el) => {
         detailEditValue.value = v;
       },
       onEscape: () => restoreDetailOriginalValue(),
-      onBlur: () => commitValueEditorEdit(),
+      onBlur: () => {
+        if (!detailValueDiffOpen.value) commitValueEditorEdit();
+      },
       editorTheme: editorThemeAccessor,
       appAppearance: editorAppAppearance,
       appPalette: editorAppPalette,
@@ -6316,6 +6338,15 @@ function compactDetailJson() {
   syncEditorFromDetailEdit();
 }
 
+function openDetailJsonCompare() {
+  const context = detailJsonDiffContext.value;
+  if (!context) return;
+  const snapshot = createJsonValueDiffSnapshot({ ...context, currentValue: detailEditValue.value });
+  if (!snapshot) return;
+  detailValueDiffSnapshot.value = snapshot;
+  detailValueDiffOpen.value = true;
+}
+
 function setDetailNull() {
   const detail = activeCellDetail.value;
   if (!detail || !detail.isEditable) return;
@@ -13420,6 +13451,8 @@ function currentGridContextMenuItems(): ContextMenuItem[] {
                 :side-json-view="sideDetailJsonView"
                 :show-compact-json="showCompactDetailJson"
                 :can-compact-json="canCompactDetailJson"
+                :show-compare-json="showDetailJsonCompare"
+                :can-compare-json="canCompareDetailJson"
                 :type-color-class="typeColorClass"
                 :can-download-binary-value="canDownloadDetailBinaryValue"
                 :download-binary-value="downloadDetailBinaryValue"
@@ -13430,6 +13463,7 @@ function currentGridContextMenuItems(): ContextMenuItem[] {
                 :database-type="resolvedDatabaseType"
                 @start-edit="startDetailEdit"
                 @compact-json="compactDetailJson"
+                @compare-json="openDetailJsonCompare"
                 @toggle-formatted="toggleCellDetailJsonFormatted"
                 @copy-value="copyDetailCurrentValue"
                 @commit="commitDetailEdit"
@@ -13506,6 +13540,9 @@ function currentGridContextMenuItems(): ContextMenuItem[] {
                   <Button v-if="activeValueEditorActions.includes('compactJson')" variant="outline" size="sm" class="h-6 text-xs" @mousedown.prevent @click="compactDetailJson">
                     {{ t("grid.compactJson") }}
                   </Button>
+                  <Button v-if="showDetailJsonCompare" variant="outline" size="sm" class="h-6 text-xs" :disabled="!canCompareDetailJson" @mousedown.prevent @click="openDetailJsonCompare">
+                    {{ t("grid.compareJson") }}
+                  </Button>
                   <Button v-if="activeValueEditorActions.includes('setNull')" variant="outline" size="sm" class="h-6 text-xs" @mousedown.prevent @click="setValueEditorNull">
                     {{ t("grid.setNull") }}
                   </Button>
@@ -13622,6 +13659,8 @@ function currentGridContextMenuItems(): ContextMenuItem[] {
       @edit="openDialogCellInSidePanel"
     />
 
+    <DataGridValueDiffDialog v-if="detailValueDiffSnapshot" v-model:open="detailValueDiffOpen" :snapshot="detailValueDiffSnapshot" />
+
     <DataGridDetailDialogs
       v-if="detailDialogsMounted"
       v-model:row-open="rowDetailDialogOpen"
diff --git a/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
index fcd54fb690..f0599911bc 100644
--- a/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
+++ b/apps/desktop/src/components/grid/DataGridCellDetailPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, toRef } from "vue";
-import { Code2, Copy, Download, Eye, FileUp, Pencil, X } from "@lucide/vue";
+import { Code2, Copy, Download, Eye, FileDiff, FileUp, Pencil, X } from "@lucide/vue";
 import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -28,6 +28,8 @@ const props = defineProps<{
   sideJsonView: boolean;
   showCompactJson: boolean;
   canCompactJson: boolean;
+  showCompareJson?: boolean;
+  canCompareJson?: boolean;
   typeColorClass: (type: string) => string;
   canDownloadBinaryValue: (detail: DataGridCellDetail | null) => boolean;
   downloadBinaryValue: (detail: DataGridCellDetail | null, mode: BinaryCellDownloadMode) => void | Promise<void>;
@@ -44,6 +46,7 @@ const detailEditValue = defineModel<string>("value", { default: "" });
 const emit = defineEmits<{
   startEdit: [];
   compactJson: [];
+  compareJson: [];
   toggleFormatted: [];
   copyValue: [];
   commit: [];
@@ -138,6 +141,7 @@ defineExpose({ openSearch });
         <div class="flex min-h-5 items-center justify-between gap-2">
           <div class="text-muted-foreground">{{ t("grid.cellValue") }}</div>
           <div class="flex items-center gap-1">
+            <Button v-if="editing && showCompareJson" variant="ghost" size="sm" class="h-5 gap-1 px-1.5 text-xs" :disabled="!canCompareJson" :title="t('grid.compareJson')" @mousedown.prevent @click="emit('compareJson')"><FileDiff class="h-3 w-3" />{{ t("grid.compareJson") }}</Button>
             <Button v-if="showCompactJson" variant="ghost" size="sm" class="h-5 gap-1 px-1.5 text-xs" :disabled="!canCompactJson" :title="t('grid.compactJson')" @click="emit('compactJson')"><Code2 class="h-3 w-3" />{{ t("grid.compactJson") }}</Button>
             <Button v-if="!editing && detail.formattedJson" :variant="sideJsonView ? 'secondary' : 'ghost'" size="sm" class="h-5 gap-1 px-1.5 text-xs" :title="t('grid.formattedJson')" @click="emit('toggleFormatted')"><Code2 class="h-3 w-3" />{{ t("grid.formattedJson") }}</Button>
             <Button v-if="!editing && detail.isEditable" variant="ghost" size="icon" class="h-5 w-5" :title="t('grid.editValue')" @click="emit('startEdit')"><Pencil class="h-3 w-3" /></Button>
diff --git a/apps/desktop/src/components/grid/DataGridValueDiffDialog.vue b/apps/desktop/src/components/grid/DataGridValueDiffDialog.vue
new file mode 100644
index 0000000000..16452a618d
--- /dev/null
+++ b/apps/desktop/src/components/grid/DataGridValueDiffDialog.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { AlertCircle, FileDiff } from "@lucide/vue";
+import { useI18n } from "vue-i18n";
+import SideBySideTextDiff, { type TextDiffSide } from "@/components/common/SideBySideTextDiff.vue";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { useToast } from "@/composables/useToast";
+import { copyToClipboard } from "@/lib/common/clipboard";
+import { formatJsonValueDiffText, type JsonValueDiffFormatError, type JsonValueDiffMode, type JsonValueDiffSnapshot } from "@/lib/dataGrid/jsonValueDiff";
+
+const props = defineProps<{
+  snapshot: Readonly<JsonValueDiffSnapshot> | null;
+}>();
+
+const open = defineModel<boolean>("open", { default: false });
+const { t } = useI18n();
+const { toast } = useToast();
+const formatMode = ref<JsonValueDiffMode>("json");
+const originalFormatted = computed(() => formatJsonValueDiffText(props.snapshot?.originalValue ?? "", formatMode.value));
+const currentFormatted = computed(() => formatJsonValueDiffText(props.snapshot?.currentValue ?? "", formatMode.value));
+
+function formatError(error: JsonValueDiffFormatError): string {
+  if (error.kind === "too-large") return t("grid.valueDiffTooLarge", { limit: error.limit.toLocaleString() });
+  return t("grid.valueDiffInvalidJson", { message: error.message });
+}
+
+async function copyValue(side: TextDiffSide) {
+  const snapshot = props.snapshot;
+  if (!snapshot) return;
+  try {
+    await copyToClipboard(side === "before" ? snapshot.originalValue : snapshot.currentValue);
+    toast(t("grid.cellValueCopied"), 2000);
+  } catch (error) {
+    toast(error instanceof Error ? error.message : String(error), 5000);
+  }
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) formatMode.value = "json";
+});
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogContent v-if="snapshot" class="flex h-[min(82vh,760px)] min-w-0 max-w-[min(1180px,calc(100vw-32px))] flex-col gap-0 overflow-hidden p-0 sm:max-w-[min(1180px,calc(100vw-32px))]">
+      <DialogHeader class="shrink-0 border-b px-4 py-3 pr-11">
+        <DialogTitle class="flex min-w-0 items-center gap-2 text-sm">
+          <FileDiff class="h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" />
+          <span class="min-w-0 truncate">{{ t("grid.valueDiffTitle", { column: snapshot.columnName }) }}</span>
+        </DialogTitle>
+      </DialogHeader>
+
+      <div class="flex h-9 shrink-0 items-center gap-3 border-b px-3">
+        <div class="inline-flex h-7 items-center rounded border bg-muted/20 p-0.5" role="group" :aria-label="t('grid.valueDiffFormat')">
+          <Button type="button" size="sm" :variant="formatMode === 'json' ? 'secondary' : 'ghost'" class="h-6 rounded-sm px-2 text-[11px] shadow-none" @click="formatMode = 'json'">JSON</Button>
+          <Button type="button" size="sm" :variant="formatMode === 'raw' ? 'secondary' : 'ghost'" class="h-6 rounded-sm px-2 text-[11px] shadow-none" @click="formatMode = 'raw'">{{ t("grid.valueDiffRaw") }}</Button>
+        </div>
+      </div>
+
+      <div v-if="originalFormatted.error || currentFormatted.error" class="grid shrink-0 grid-cols-2 border-b bg-amber-500/10 text-[11px] text-amber-700 dark:text-amber-300">
+        <div class="flex min-w-0 items-start gap-1.5 border-r px-2 py-1">
+          <template v-if="originalFormatted.error"
+            ><AlertCircle class="mt-0.5 h-3 w-3 shrink-0" /><span class="min-w-0 break-words">{{ formatError(originalFormatted.error) }}</span></template
+          >
+        </div>
+        <div class="flex min-w-0 items-start gap-1.5 px-2 py-1">
+          <template v-if="currentFormatted.error"
+            ><AlertCircle class="mt-0.5 h-3 w-3 shrink-0" /><span class="min-w-0 break-words">{{ formatError(currentFormatted.error) }}</span></template
+          >
+        </div>
+      </div>
+
+      <SideBySideTextDiff
+        :before-text="originalFormatted.text"
+        :after-text="currentFormatted.text"
+        :before-label="t('grid.valueDiffOriginal')"
+        :after-label="t('grid.valueDiffCurrent')"
+        :copy-before-title="t('grid.copyOriginalValue')"
+        :copy-after-title="t('grid.copyCurrentValue')"
+        @copy="copyValue"
+      />
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
index a0cebb3d13..855e54403b 100644
--- a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
+++ b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
@@ -28,6 +28,7 @@ vi.mock("@lucide/vue", async () => {
     ChevronsRight: icon,
     Download: icon,
     Filter: icon,
+    FileDiff: icon,
     Loader2: icon,
     FileUp: icon,
     Upload: icon,
@@ -1434,6 +1435,49 @@ describe("cell detail surfaces", () => {
     doubleClickCapture({ target: { closest: () => null }, clientX: 60, clientY: 80 });
     expect(startEdit).toHaveBeenCalledTimes(4);
   });
+
+  it("only enables JSON comparison for changed drafts and prevents editor blur on pointer down", async () => {
+    const compareJson = vi.fn();
+    const mounted = mountComponent(DataGridCellDetailPanel, {
+      detail: detail(),
+      panelIsBottom: true,
+      metadataCollapsed: false,
+      valueFillsHeight: true,
+      editing: true,
+      sideJsonView: false,
+      showCompactJson: true,
+      canCompactJson: true,
+      showCompareJson: true,
+      canCompareJson: false,
+      typeColorClass: () => "",
+      canDownloadBinaryValue: () => false,
+      downloadBinaryValue: vi.fn(),
+      canImportBinaryValue: () => false,
+      importBinaryValue: vi.fn(),
+      openImagePreview: vi.fn(),
+      canCopySqlCondition: () => true,
+      onCompareJson: compareJson,
+    });
+
+    const disabledCompare = findOne(mounted.root, (node) => node.props.title === "grid.compareJson");
+    expect(disabledCompare.props.disabled).toBe(true);
+    dispatch(disabledCompare, "click");
+    expect(compareJson).not.toHaveBeenCalled();
+
+    await mounted.setProps({ canCompareJson: true });
+    const enabledCompare = findOne(mounted.root, (node) => node.props.title === "grid.compareJson");
+    expect(dispatch(enabledCompare, "mousedown").defaultPrevented).toBe(true);
+    dispatch(enabledCompare, "click");
+    expect(compareJson).toHaveBeenCalledOnce();
+  });
+
+  it("snapshots comparison values before opening and suppresses modal-induced blur commits", () => {
+    expect(dataGridSource).toContain("detailValueDiffSnapshot.value = snapshot;");
+    expect(dataGridSource).toContain("detailValueDiffOpen.value = true;");
+    expect(dataGridSource).toContain("if (!detailValueDiffOpen.value) commitValueEditorEdit();");
+    expect(dataGridSource).toContain(':disabled="!canCompareDetailJson" @mousedown.prevent @click="openDetailJsonCompare"');
+    expect(dataGridSource).toContain('v-model:open="detailValueDiffOpen" :snapshot="detailValueDiffSnapshot"');
+  });
 });
 
 describe("DataGridCopyColumnNamesDialog", () => {
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 688a003d05..c40643a408 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -2022,6 +2022,17 @@ export default {
     editValue: "Edit Value",
     formatJson: "Format JSON",
     compactJson: "Compact JSON",
+    compareJson: "Compare",
+    valueDiffTitle: "{column} JSON difference",
+    valueDiffFormat: "Comparison format",
+    valueDiffRaw: "Raw",
+    valueDiffOriginal: "Original",
+    valueDiffCurrent: "Current",
+    copyOriginalValue: "Copy original value",
+    copyCurrentValue: "Copy current value",
+    cellValueCopied: "Cell value copied",
+    valueDiffInvalidJson: "Invalid JSON; showing the raw value: {message}",
+    valueDiffTooLarge: "Value exceeds {limit} characters; showing the raw value.",
     formattedJsonEditWarning: "You are editing formatted JSON. Saving will write it as JSON, so the original formatting may change.",
     setNull: "Set NULL",
     restoreOriginalValue: "Restore Original",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 638d279cea..eb0d4c3cd6 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -1883,6 +1883,17 @@ export default withEnglishFallback({
     editValue: "Editar valor",
     formatJson: "Formatear JSON",
     compactJson: "Compactar JSON",
+    compareJson: "Comparar",
+    valueDiffTitle: "Diferencia JSON de {column}",
+    valueDiffFormat: "Formato de comparación",
+    valueDiffRaw: "Original",
+    valueDiffOriginal: "Valor original",
+    valueDiffCurrent: "Valor actual",
+    copyOriginalValue: "Copiar valor original",
+    copyCurrentValue: "Copiar valor actual",
+    cellValueCopied: "Valor de celda copiado",
+    valueDiffInvalidJson: "JSON no válido; se muestra el valor original: {message}",
+    valueDiffTooLarge: "El valor supera los {limit} caracteres; se muestra el valor original.",
     formattedJsonEditWarning: "Estás editando JSON formateado. Al guardar se escribirá como JSON, por lo que el formato original puede cambiar.",
     setNull: "Establecer NULL",
     restoreOriginalValue: "Restaurar original",
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index b3a4b69551..5ee16e5ae7 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -1881,6 +1881,17 @@ export default withEnglishFallback({
     editValue: "Modifica Valore",
     formatJson: "Formatta JSON",
     compactJson: "Compatta JSON",
+    compareJson: "Confronta",
+    valueDiffTitle: "Differenza JSON di {column}",
+    valueDiffFormat: "Formato di confronto",
+    valueDiffRaw: "Originale",
+    valueDiffOriginal: "Valore originale",
+    valueDiffCurrent: "Valore corrente",
+    copyOriginalValue: "Copia valore originale",
+    copyCurrentValue: "Copia valore corrente",
+    cellValueCopied: "Valore della cella copiato",
+    valueDiffInvalidJson: "JSON non valido; viene mostrato il valore originale: {message}",
+    valueDiffTooLarge: "Il valore supera {limit} caratteri; viene mostrato il valore originale.",
     formattedJsonEditWarning: "Stai modificando JSON formattato. Salvando verrà scritto come JSON, quindi la formattazione originale potrebbe cambiare.",
     setNull: "Imposta NULL",
     restoreOriginalValue: "Ripristina Originale",
diff --git a/apps/desktop/src/i18n/locales/ja.ts b/apps/desktop/src/i18n/locales/ja.ts
index 2292e85e4a..b9f10f9909 100644
--- a/apps/desktop/src/i18n/locales/ja.ts
+++ b/apps/desktop/src/i18n/locales/ja.ts
@@ -1899,6 +1899,17 @@ export default withEnglishFallback({
     editValue: "値を編集",
     formatJson: "JSONをフォーマット",
     compactJson: "JSON を圧縮",
+    compareJson: "比較",
+    valueDiffTitle: "{column} の JSON 差分",
+    valueDiffFormat: "比較形式",
+    valueDiffRaw: "生データ",
+    valueDiffOriginal: "元の値",
+    valueDiffCurrent: "現在の値",
+    copyOriginalValue: "元の値をコピー",
+    copyCurrentValue: "現在の値をコピー",
+    cellValueCopied: "セルの値をコピーしました",
+    valueDiffInvalidJson: "JSON が無効なため、生データを表示します: {message}",
+    valueDiffTooLarge: "値が {limit} 文字を超えているため、生データを表示します。",
     formattedJsonEditWarning: "フォーマット済みJSONを編集中です。保存するとJSONとして書き込まれるため、元の書式が変わる場合があります。",
     setNull: "NULLに設定",
     restoreOriginalValue: "元の値に戻す",
diff --git a/apps/desktop/src/i18n/locales/ko.ts b/apps/desktop/src/i18n/locales/ko.ts
index f84c9e63a5..0cc1539666 100644
--- a/apps/desktop/src/i18n/locales/ko.ts
+++ b/apps/desktop/src/i18n/locales/ko.ts
@@ -1857,6 +1857,17 @@ export default withEnglishFallback({
     editValue: "값 편집",
     formatJson: "JSON 서식",
     compactJson: "JSON 압축",
+    compareJson: "비교",
+    valueDiffTitle: "{column} JSON 차이",
+    valueDiffFormat: "비교 형식",
+    valueDiffRaw: "원본",
+    valueDiffOriginal: "원래 값",
+    valueDiffCurrent: "현재 값",
+    copyOriginalValue: "원래 값 복사",
+    copyCurrentValue: "현재 값 복사",
+    cellValueCopied: "셀 값을 복사했습니다",
+    valueDiffInvalidJson: "JSON이 올바르지 않아 원본 값을 표시합니다: {message}",
+    valueDiffTooLarge: "값이 {limit}자를 초과하여 원본 값을 표시합니다.",
     formattedJsonEditWarning: "서식된 JSON을 편집하고 있습니다. 저장하면 JSON으로 기록되어 원래 서식이 변경될 수 있습니다.",
     setNull: "NULL 설정",
     restoreOriginalValue: "원래대로 복원",
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index b8556eff1a..d69596fdc2 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -1883,6 +1883,17 @@ export default withEnglishFallback({
     editValue: "Editar Valor",
     formatJson: "Formatar JSON",
     compactJson: "Compactar JSON",
+    compareJson: "Comparar",
+    valueDiffTitle: "Diferença JSON de {column}",
+    valueDiffFormat: "Formato de comparação",
+    valueDiffRaw: "Original",
+    valueDiffOriginal: "Valor original",
+    valueDiffCurrent: "Valor atual",
+    copyOriginalValue: "Copiar valor original",
+    copyCurrentValue: "Copiar valor atual",
+    cellValueCopied: "Valor da célula copiado",
+    valueDiffInvalidJson: "JSON inválido; exibindo o valor original: {message}",
+    valueDiffTooLarge: "O valor excede {limit} caracteres; exibindo o valor original.",
     formattedJsonEditWarning: "Você está editando JSON formatado. Ao salvar, ele será gravado como JSON, então a formatação original pode mudar.",
     setNull: "Definir NULL",
     restoreOriginalValue: "Restaurar Original",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 268e141d7b..f5073de902 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -1947,6 +1947,17 @@ export default withEnglishFallback({
     editValue: "编辑值",
     formatJson: "格式化 JSON",
     compactJson: "压缩 JSON",
+    compareJson: "比较",
+    valueDiffTitle: "{column} JSON 差异",
+    valueDiffFormat: "对比格式",
+    valueDiffRaw: "原始",
+    valueDiffOriginal: "原值",
+    valueDiffCurrent: "当前值",
+    copyOriginalValue: "复制原值",
+    copyCurrentValue: "复制当前值",
+    cellValueCopied: "单元格值已复制",
+    valueDiffInvalidJson: "JSON 无效，已显示原始值：{message}",
+    valueDiffTooLarge: "值超过 {limit} 个字符，已显示原始值。",
     formattedJsonEditWarning: "正在编辑格式化后的 JSON。保存后会以JSON格式写入，原始排版可能变化。",
     setNull: "设为 NULL",
     restoreOriginalValue: "恢复原值",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index 7a3fb190b4..4c6d72ef84 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -1887,6 +1887,17 @@ export default withEnglishFallback({
     editValue: "編輯值",
     formatJson: "格式化 JSON",
     compactJson: "壓縮 JSON",
+    compareJson: "比較",
+    valueDiffTitle: "{column} JSON 差異",
+    valueDiffFormat: "比較格式",
+    valueDiffRaw: "原始",
+    valueDiffOriginal: "原值",
+    valueDiffCurrent: "目前值",
+    copyOriginalValue: "複製原值",
+    copyCurrentValue: "複製目前值",
+    cellValueCopied: "儲存格值已複製",
+    valueDiffInvalidJson: "JSON 無效，已顯示原始值：{message}",
+    valueDiffTooLarge: "值超過 {limit} 個字元，已顯示原始值。",
     formattedJsonEditWarning: "正在編輯格式化後的 JSON。儲存後會以 JSON 格式寫入，原始排版可能改變。",
     setNull: "設為 NULL",
     restoreOriginalValue: "復原資料",
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/jsonValueDiff.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/jsonValueDiff.spec.ts
new file mode 100644
index 0000000000..c2e1abd96f
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/jsonValueDiff.spec.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { buildTextDiff } from "@/lib/common/textDiff";
+import { createJsonValueDiffSnapshot, formatJsonValueDiffText, isJsonValueDiffAvailable, JSON_VALUE_DIFF_MAX_FORMAT_LENGTH, type JsonValueDiffCandidate } from "@/lib/dataGrid/jsonValueDiff";
+
+function candidate(patch: Partial<JsonValueDiffCandidate> = {}): JsonValueDiffCandidate {
+  return {
+    columnName: "payload",
+    columnType: "JSON",
+    originalValue: '{"profile":{"name":"Ada","roles":["reader"]},"obsolete":true}',
+    currentValue: '{"profile":{"name":"Grace","roles":["reader","writer"]},"active":true}',
+    isEditable: true,
+    isEditing: true,
+    ...patch,
+  };
+}
+
+describe("JSON value diff", () => {
+  it("only enables editable JSON sessions and snapshots changed draft text", () => {
+    const source = candidate({ currentValue: '{"profile":' });
+    expect(isJsonValueDiffAvailable(source)).toBe(true);
+    expect(isJsonValueDiffAvailable(candidate({ isEditable: false }))).toBe(false);
+    expect(isJsonValueDiffAvailable(candidate({ isEditing: false }))).toBe(false);
+    expect(isJsonValueDiffAvailable(candidate({ columnType: "TEXT", originalValue: "plain text" }))).toBe(false);
+    expect(isJsonValueDiffAvailable(candidate({ columnType: "TEXT" }))).toBe(true);
+    expect(createJsonValueDiffSnapshot(candidate({ currentValue: candidate().originalValue }))).toBeNull();
+
+    const snapshot = createJsonValueDiffSnapshot(source);
+    source.currentValue = '{"later":true}';
+    expect(snapshot).toEqual({ columnName: "payload", originalValue: candidate().originalValue, currentValue: '{"profile":' });
+    expect(Object.isFrozen(snapshot)).toBe(true);
+  });
+
+  it("formats nested object and array changes for aligned line and character diffs", () => {
+    const original = formatJsonValueDiffText(candidate().originalValue, "json");
+    const current = formatJsonValueDiffText(candidate().currentValue, "json");
+    const rows = buildTextDiff(original.text, current.text);
+
+    expect(original.error).toBeNull();
+    expect(current.error).toBeNull();
+    expect(rows.some((row) => row.kind === "modified" && row.beforeSegments.some((segment) => segment.changed))).toBe(true);
+    expect(rows.some((row) => row.kind === "added" && row.afterText.includes('"writer"'))).toBe(true);
+    expect(rows.some((row) => row.beforeText.includes('"obsolete"'))).toBe(true);
+    expect(rows.some((row) => row.afterText.includes('"active"'))).toBe(true);
+  });
+
+  it("normalizes whitespace in JSON mode while preserving it in raw mode", () => {
+    const original = '{"a":1,"items":[1,2]}';
+    const current = '{ "a": 1, "items": [1, 2] }';
+    const originalJson = formatJsonValueDiffText(original, "json");
+    const currentJson = formatJsonValueDiffText(current, "json");
+
+    expect(originalJson.text).toBe(currentJson.text);
+    expect(buildTextDiff(originalJson.text, currentJson.text).every((row) => row.kind === "equal")).toBe(true);
+    expect(buildTextDiff(formatJsonValueDiffText(original, "raw").text, formatJsonValueDiffText(current, "raw").text).some((row) => row.kind !== "equal")).toBe(true);
+  });
+
+  it("keeps an invalid current draft intact and reports the JSON fallback", () => {
+    const invalid = '{"items":[1,2]';
+    const result = formatJsonValueDiffText(invalid, "json");
+
+    expect(result.text).toBe(invalid);
+    expect(result.error).toMatchObject({ kind: "invalid-json" });
+  });
+
+  it("bounds large formatting and detailed character comparison", () => {
+    const original = `{"payload":"${"a".repeat(JSON_VALUE_DIFF_MAX_FORMAT_LENGTH)}"}`;
+    const current = `{"payload":"${"b".repeat(JSON_VALUE_DIFF_MAX_FORMAT_LENGTH)}"}`;
+    const formatted = formatJsonValueDiffText(current, "json");
+    const rows = buildTextDiff(original, current);
+
+    expect(formatted).toEqual({ text: current, error: { kind: "too-large", limit: JSON_VALUE_DIFF_MAX_FORMAT_LENGTH } });
+    expect(rows).toHaveLength(1);
+    expect(rows[0].kind).toBe("modified");
+    expect(rows[0].beforeSegments).toEqual([{ text: original, changed: true }]);
+    expect(rows[0].afterSegments).toEqual([{ text: current, changed: true }]);
+  });
+});
diff --git a/apps/desktop/src/lib/common/textDiff.ts b/apps/desktop/src/lib/common/textDiff.ts
new file mode 100644
index 0000000000..a95b238b9c
--- /dev/null
+++ b/apps/desktop/src/lib/common/textDiff.ts
@@ -0,0 +1,158 @@
+import { diffChars, diffLines, type Change } from "diff";
+
+export type TextDiffKind = "equal" | "added" | "removed" | "modified";
+
+export interface TextDiffSegment {
+  text: string;
+  changed: boolean;
+}
+
+export interface TextDiffRow {
+  kind: TextDiffKind;
+  beforeLineNumber: number | null;
+  afterLineNumber: number | null;
+  beforeText: string;
+  afterText: string;
+  beforeSegments: TextDiffSegment[];
+  afterSegments: TextDiffSegment[];
+}
+
+export const TEXT_DIFF_MAX_DETAILED_CHARACTERS = 500_000;
+export const TEXT_DIFF_MAX_DETAILED_LINES = 20_000;
+export const TEXT_DIFF_MAX_CHARACTER_DIFF_CHARACTERS = 20_000;
+
+function normalizeLineEndings(value: string): string {
+  return value.replace(/\r\n?/g, "\n");
+}
+
+function linesFromChange(change: Change): string[] {
+  if (!change.value) return [];
+  const lines = change.value.split("\n");
+  if (change.value.endsWith("\n")) lines.pop();
+  return lines;
+}
+
+function unchangedSegments(text: string): TextDiffSegment[] {
+  return text ? [{ text, changed: false }] : [];
+}
+
+function changedSegments(beforeText: string, afterText: string): { before: TextDiffSegment[]; after: TextDiffSegment[] } {
+  if (beforeText.length + afterText.length > TEXT_DIFF_MAX_CHARACTER_DIFF_CHARACTERS) {
+    return {
+      before: beforeText ? [{ text: beforeText, changed: true }] : [],
+      after: afterText ? [{ text: afterText, changed: true }] : [],
+    };
+  }
+  const changes = diffChars(beforeText, afterText);
+  return {
+    before: changes.filter((change) => !change.added).map((change) => ({ text: change.value, changed: !!change.removed })),
+    after: changes.filter((change) => !change.removed).map((change) => ({ text: change.value, changed: !!change.added })),
+  };
+}
+
+function appendEqualRows(rows: TextDiffRow[], lines: string[], beforeLine: { value: number }, afterLine: { value: number }) {
+  for (const line of lines) {
+    rows.push({
+      kind: "equal",
+      beforeLineNumber: beforeLine.value++,
+      afterLineNumber: afterLine.value++,
+      beforeText: line,
+      afterText: line,
+      beforeSegments: unchangedSegments(line),
+      afterSegments: unchangedSegments(line),
+    });
+  }
+}
+
+function appendChangedRows(rows: TextDiffRow[], removed: string[], added: string[], beforeLine: { value: number }, afterLine: { value: number }) {
+  const count = Math.max(removed.length, added.length);
+  for (let index = 0; index < count; index += 1) {
+    const beforeText = removed[index];
+    const afterText = added[index];
+    if (beforeText !== undefined && afterText !== undefined) {
+      const segments = changedSegments(beforeText, afterText);
+      rows.push({
+        kind: beforeText === afterText ? "equal" : "modified",
+        beforeLineNumber: beforeLine.value++,
+        afterLineNumber: afterLine.value++,
+        beforeText,
+        afterText,
+        beforeSegments: beforeText === afterText ? unchangedSegments(beforeText) : segments.before,
+        afterSegments: beforeText === afterText ? unchangedSegments(afterText) : segments.after,
+      });
+    } else if (beforeText !== undefined) {
+      rows.push({
+        kind: "removed",
+        beforeLineNumber: beforeLine.value++,
+        afterLineNumber: null,
+        beforeText,
+        afterText: "",
+        beforeSegments: unchangedSegments(beforeText),
+        afterSegments: [],
+      });
+    } else if (afterText !== undefined) {
+      rows.push({
+        kind: "added",
+        beforeLineNumber: null,
+        afterLineNumber: afterLine.value++,
+        beforeText: "",
+        afterText,
+        beforeSegments: [],
+        afterSegments: unchangedSegments(afterText),
+      });
+    }
+  }
+}
+
+function buildFallbackRows(before: string, after: string): TextDiffRow[] {
+  const beforeLines = before.split("\n");
+  const afterLines = after.split("\n");
+  const rows: TextDiffRow[] = [];
+  appendChangedRows(rows, beforeLines, afterLines, { value: 1 }, { value: 1 });
+  return rows;
+}
+
+function exceedsDetailedLineLimit(before: string, after: string): boolean {
+  let lines = 2;
+  for (const value of [before, after]) {
+    for (let index = 0; index < value.length; index += 1) {
+      if (value.charCodeAt(index) !== 10) continue;
+      lines += 1;
+      if (lines > TEXT_DIFF_MAX_DETAILED_LINES) return true;
+    }
+  }
+  return false;
+}
+
+export function buildTextDiff(beforeValue: string, afterValue: string): TextDiffRow[] {
+  const before = normalizeLineEndings(beforeValue);
+  const after = normalizeLineEndings(afterValue);
+  if (before.length + after.length > TEXT_DIFF_MAX_DETAILED_CHARACTERS || exceedsDetailedLineLimit(before, after)) return buildFallbackRows(before, after);
+
+  const changes = diffLines(before, after, { newlineIsToken: false });
+  const rows: TextDiffRow[] = [];
+  const beforeLine = { value: 1 };
+  const afterLine = { value: 1 };
+  let index = 0;
+  while (index < changes.length) {
+    const change = changes[index];
+    if (!change.added && !change.removed) {
+      appendEqualRows(rows, linesFromChange(change), beforeLine, afterLine);
+      index += 1;
+      continue;
+    }
+
+    const removed: string[] = [];
+    const added: string[] = [];
+    while (index < changes.length && (changes[index].added || changes[index].removed)) {
+      const changedLines = linesFromChange(changes[index]);
+      if (changes[index].removed) removed.push(...changedLines);
+      else added.push(...changedLines);
+      index += 1;
+    }
+    appendChangedRows(rows, removed, added, beforeLine, afterLine);
+  }
+
+  if (rows.length === 0) appendEqualRows(rows, [""], beforeLine, afterLine);
+  return rows;
+}
diff --git a/apps/desktop/src/lib/dataGrid/jsonValueDiff.ts b/apps/desktop/src/lib/dataGrid/jsonValueDiff.ts
new file mode 100644
index 0000000000..18f3d53548
--- /dev/null
+++ b/apps/desktop/src/lib/dataGrid/jsonValueDiff.ts
@@ -0,0 +1,73 @@
+import { formatJsonSource } from "@/lib/common/safeJsonFormat";
+import { isJsonColumnType, looksLikeJsonContainerText } from "@/lib/dataGrid/cellDetailPresentation";
+
+export type JsonValueDiffMode = "json" | "raw";
+export type JsonValueDiffFormatError = { kind: "invalid-json"; message: string } | { kind: "too-large"; limit: number };
+
+export interface JsonValueDiffSnapshot {
+  columnName: string;
+  originalValue: string;
+  currentValue: string;
+}
+
+export interface JsonValueDiffFormatResult {
+  text: string;
+  error: JsonValueDiffFormatError | null;
+}
+
+export const JSON_VALUE_DIFF_MAX_FORMAT_LENGTH = 500_000;
+
+export interface JsonValueDiffContext {
+  columnName: string;
+  columnType?: string;
+  originalValue: string;
+  isEditable: boolean;
+  isEditing: boolean;
+}
+
+export interface JsonValueDiffCandidate extends JsonValueDiffContext {
+  currentValue: string;
+}
+
+function isJsonSource(value: string): boolean {
+  if (!looksLikeJsonContainerText(value)) return false;
+  if (value.length > JSON_VALUE_DIFF_MAX_FORMAT_LENGTH) return true;
+  try {
+    formatJsonSource(value, 2);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function isJsonValueDiffAvailable(candidate: JsonValueDiffContext): boolean {
+  if (!candidate.isEditable || !candidate.isEditing) return false;
+  return isJsonColumnType(candidate.columnType) || isJsonSource(candidate.originalValue);
+}
+
+export function createJsonValueDiffSnapshot(candidate: JsonValueDiffCandidate): Readonly<JsonValueDiffSnapshot> | null {
+  if (!isJsonValueDiffAvailable(candidate) || candidate.originalValue === candidate.currentValue) return null;
+  return Object.freeze({
+    columnName: candidate.columnName,
+    originalValue: candidate.originalValue,
+    currentValue: candidate.currentValue,
+  });
+}
+
+export function formatJsonValueDiffText(value: string, mode: JsonValueDiffMode): JsonValueDiffFormatResult {
+  if (mode === "raw") return { text: value, error: null };
+  if (value.length > JSON_VALUE_DIFF_MAX_FORMAT_LENGTH) {
+    return { text: value, error: { kind: "too-large", limit: JSON_VALUE_DIFF_MAX_FORMAT_LENGTH } };
+  }
+  try {
+    return { text: formatJsonSource(value, 2), error: null };
+  } catch (error) {
+    return {
+      text: value,
+      error: {
+        kind: "invalid-json",
+        message: error instanceof Error ? error.message : String(error),
+      },
+    };
+  }
+}
diff --git a/apps/desktop/src/lib/dolt/doltCellDiff.ts b/apps/desktop/src/lib/dolt/doltCellDiff.ts
index 1000f3c2bc..fc26a43961 100644
--- a/apps/desktop/src/lib/dolt/doltCellDiff.ts
+++ b/apps/desktop/src/lib/dolt/doltCellDiff.ts
@@ -1,5 +1,5 @@
-import { diffChars, diffLines, type Change } from "diff";
 import { formatJsonSource } from "@/lib/common/safeJsonFormat";
+import { buildTextDiff, type TextDiffKind, type TextDiffRow, type TextDiffSegment } from "@/lib/common/textDiff";
 import { formatXmlSource } from "@/lib/common/xmlFormat";
 import type { QueryResult } from "@/types/database";
 import type { DoltDiffColumnKind, DoltRowChangeKind } from "@/lib/dolt/doltVersionControl";
@@ -9,7 +9,7 @@ export type DoltCellSide = "before" | "after";
 export type DoltCellFormat = "raw" | "json" | "xml";
 export type DoltCellFormatMode = "auto" | DoltCellFormat;
 export type DoltCellValueState = "value" | "row-missing" | "column-missing";
-export type DoltTextDiffKind = "equal" | "added" | "removed" | "modified";
+export type DoltTextDiffKind = TextDiffKind;
 
 export interface DoltDiffCellTarget {
   rowIndex: number;
@@ -34,23 +34,8 @@ export interface DoltCellFormatResult {
   error: string | null;
 }
 
-export interface DoltTextDiffSegment {
-  text: string;
-  changed: boolean;
-}
-
-export interface DoltTextDiffRow {
-  kind: DoltTextDiffKind;
-  beforeLineNumber: number | null;
-  afterLineNumber: number | null;
-  beforeText: string;
-  afterText: string;
-  beforeSegments: DoltTextDiffSegment[];
-  afterSegments: DoltTextDiffSegment[];
-}
-
-const MAX_DETAILED_LINE_DIFF_CHARACTERS = 500_000;
-const MAX_CHARACTER_DIFF_CHARACTERS = 20_000;
+export type DoltTextDiffSegment = TextDiffSegment;
+export type DoltTextDiffRow = TextDiffRow;
 
 export function doltCellValueState(target: DoltDiffCellTarget, side: DoltCellSide): DoltCellValueState {
   if (side === "before") {
@@ -95,128 +80,8 @@ export function detectDoltCellFormat(values: readonly DoltCellDisplayValue[]): D
   return "raw";
 }
 
-function normalizeLineEndings(value: string): string {
-  return value.replace(/\r\n?/g, "\n");
-}
-
-function linesFromChange(change: Change): string[] {
-  if (!change.value) return [];
-  const lines = change.value.split("\n");
-  if (change.value.endsWith("\n")) lines.pop();
-  return lines;
-}
-
-function unchangedSegments(text: string): DoltTextDiffSegment[] {
-  return text ? [{ text, changed: false }] : [];
-}
-
-function changedSegments(beforeText: string, afterText: string): { before: DoltTextDiffSegment[]; after: DoltTextDiffSegment[] } {
-  if (beforeText.length + afterText.length > MAX_CHARACTER_DIFF_CHARACTERS) {
-    return {
-      before: beforeText ? [{ text: beforeText, changed: true }] : [],
-      after: afterText ? [{ text: afterText, changed: true }] : [],
-    };
-  }
-  const changes = diffChars(beforeText, afterText);
-  return {
-    before: changes.filter((change) => !change.added).map((change) => ({ text: change.value, changed: !!change.removed })),
-    after: changes.filter((change) => !change.removed).map((change) => ({ text: change.value, changed: !!change.added })),
-  };
-}
-
-function appendEqualRows(rows: DoltTextDiffRow[], lines: string[], beforeLine: { value: number }, afterLine: { value: number }) {
-  for (const line of lines) {
-    rows.push({
-      kind: "equal",
-      beforeLineNumber: beforeLine.value++,
-      afterLineNumber: afterLine.value++,
-      beforeText: line,
-      afterText: line,
-      beforeSegments: unchangedSegments(line),
-      afterSegments: unchangedSegments(line),
-    });
-  }
-}
-
-function appendChangedRows(rows: DoltTextDiffRow[], removed: string[], added: string[], beforeLine: { value: number }, afterLine: { value: number }) {
-  const count = Math.max(removed.length, added.length);
-  for (let index = 0; index < count; index += 1) {
-    const beforeText = removed[index];
-    const afterText = added[index];
-    if (beforeText !== undefined && afterText !== undefined) {
-      const segments = changedSegments(beforeText, afterText);
-      rows.push({
-        kind: beforeText === afterText ? "equal" : "modified",
-        beforeLineNumber: beforeLine.value++,
-        afterLineNumber: afterLine.value++,
-        beforeText,
-        afterText,
-        beforeSegments: beforeText === afterText ? unchangedSegments(beforeText) : segments.before,
-        afterSegments: beforeText === afterText ? unchangedSegments(afterText) : segments.after,
-      });
-    } else if (beforeText !== undefined) {
-      rows.push({
-        kind: "removed",
-        beforeLineNumber: beforeLine.value++,
-        afterLineNumber: null,
-        beforeText,
-        afterText: "",
-        beforeSegments: unchangedSegments(beforeText),
-        afterSegments: [],
-      });
-    } else if (afterText !== undefined) {
-      rows.push({
-        kind: "added",
-        beforeLineNumber: null,
-        afterLineNumber: afterLine.value++,
-        beforeText: "",
-        afterText,
-        beforeSegments: [],
-        afterSegments: unchangedSegments(afterText),
-      });
-    }
-  }
-}
-
-function buildFallbackRows(before: string, after: string): DoltTextDiffRow[] {
-  const beforeLines = before.split("\n");
-  const afterLines = after.split("\n");
-  const rows: DoltTextDiffRow[] = [];
-  appendChangedRows(rows, beforeLines, afterLines, { value: 1 }, { value: 1 });
-  return rows;
-}
-
 export function buildDoltTextDiff(beforeValue: string, afterValue: string): DoltTextDiffRow[] {
-  const before = normalizeLineEndings(beforeValue);
-  const after = normalizeLineEndings(afterValue);
-  if (before.length + after.length > MAX_DETAILED_LINE_DIFF_CHARACTERS) return buildFallbackRows(before, after);
-
-  const changes = diffLines(before, after, { newlineIsToken: false });
-  const rows: DoltTextDiffRow[] = [];
-  const beforeLine = { value: 1 };
-  const afterLine = { value: 1 };
-  let index = 0;
-  while (index < changes.length) {
-    const change = changes[index];
-    if (!change.added && !change.removed) {
-      appendEqualRows(rows, linesFromChange(change), beforeLine, afterLine);
-      index += 1;
-      continue;
-    }
-
-    const removed: string[] = [];
-    const added: string[] = [];
-    while (index < changes.length && (changes[index].added || changes[index].removed)) {
-      const changedLines = linesFromChange(changes[index]);
-      if (changes[index].removed) removed.push(...changedLines);
-      else added.push(...changedLines);
-      index += 1;
-    }
-    appendChangedRows(rows, removed, added, beforeLine, afterLine);
-  }
-
-  if (rows.length === 0) appendEqualRows(rows, [""], beforeLine, afterLine);
-  return rows;
+  return buildTextDiff(beforeValue, afterValue);
 }
 
 export function doltCellCopyText(target: DoltDiffCellTarget, side: DoltCellSide): string | null {