From 2df28f9837666079b555962ae1ebad99c3503137 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:18:20 -0500
Subject: [PATCH 01/13] Consolidate static cell rendering into a single
 CellSource component

- Merge StaticHighlightedCode and StaticDiffContent into one CellSource
  component (they differed only in whether diff marks were computed)
- Remove the markdown fence highlight machinery (async per-language loading
  cache and the duplicated DOM-builder render path that existed only for it);
  markdown code fences now render unhighlighted
- Replace the 32-entry rendermime registry LRU (plus eviction/disposal) with
  one lazy registry: session credentials come from window.location and never
  change within a page
- Stop threading the registry through CellOutputs/RenderMimeOutput props
---
 .../web/client/src/components/CellContent.tsx | 286 ++++--------------
 1 file changed, 52 insertions(+), 234 deletions(-)

diff --git a/packages/web/client/src/components/CellContent.tsx b/packages/web/client/src/components/CellContent.tsx
index 08950de..3b4647c 100644
--- a/packages/web/client/src/components/CellContent.tsx
+++ b/packages/web/client/src/components/CellContent.tsx
@@ -7,9 +7,8 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
 import type { Extension } from '@codemirror/state';
-import { HighlightStyle, LanguageDescription, ensureSyntaxTree } from '@codemirror/language';
+import { HighlightStyle, ensureSyntaxTree } from '@codemirror/language';
 import { githubDarkStyle, githubLightStyle } from '@uiw/codemirror-theme-github';
-import { languages } from '@codemirror/language-data';
 import { StyleModule } from 'style-mod';
 import { IRenderMime, OutputModel, RenderMimeRegistry, standardRendererFactories } from '@jupyterlab/rendermime';
 import { Widget } from '@lumino/widgets';
@@ -234,37 +233,7 @@ function renderStaticToReact(render: StaticRender): React.ReactNode {
     ));
 }
 
-function renderSegmentsToDom(parent: HTMLElement | DocumentFragment, segments: StaticSegment[]): void {
-    for (const segment of segments) {
-        if (segment.classes) {
-            const span = document.createElement('span');
-            span.className = segment.classes;
-            span.textContent = segment.text;
-            parent.appendChild(span);
-        } else {
-            parent.appendChild(document.createTextNode(segment.text));
-        }
-    }
-}
-
-function renderStaticToDom(render: StaticRender): DocumentFragment {
-    const fragment = document.createDocumentFragment();
-    if (render.kind === 'flat') {
-        renderSegmentsToDom(fragment, render.segments);
-        return fragment;
-    }
-    for (const line of render.lines) {
-        const span = document.createElement('span');
-        span.className = line.lineClass ? `source-line ${line.lineClass}` : 'source-line';
-        renderSegmentsToDom(span, line.segments);
-        fragment.appendChild(span);
-    }
-    return fragment;
-}
-
 type RenderMimeOutputValue = ConstructorParameters<typeof OutputModel>[0]['value'];
-const renderMimeRegistryCache = new Map<string, RenderMimeRegistry>();
-const MAX_RENDERMIME_REGISTRY_CACHE_SIZE = 32;
 
 interface CellContentProps {
     cell: NotebookCell | undefined;
@@ -293,10 +262,6 @@ function CellContentInner({
     theme = 'light',
     isLightweight = false,
 }: CellContentProps): React.ReactElement {
-    const renderMimeRegistry = useMemo(
-        () => getRenderMimeRegistry(),
-        []
-    );
     const encodedCell = useMemo(
         () => (cell ? encodeURIComponent(JSON.stringify(cell)) : ''),
         [cell]
@@ -340,36 +305,24 @@ function CellContentInner({
                 {cellType === 'markdown' && !isConflict ? (
                     <MarkdownContent
                         source={source}
-                        theme={theme}
                         isLightweight={isLightweight}
                     />
-                ) : isConflict && compareCell ? (
-                    <StaticDiffContent
+                ) : (
+                    <CellSource
                         source={source}
-                        compareSource={normalizeCellSource(compareCell.source)}
+                        compareSource={isConflict && compareCell ? normalizeCellSource(compareCell.source) : undefined}
                         side={side}
                         diffMode={diffMode}
-                        langExtensions={cellType === 'markdown' ? EMPTY_EXTENSIONS : languageExtensions}
-                        theme={theme}
-                        isMarkdown={cellType === 'markdown'}
-                        isLightweight={isLightweight}
-                    />
-                ) : cellType !== 'markdown' ? (
-                    <StaticHighlightedCode
-                        source={source}
                         langExtensions={languageExtensions}
                         theme={theme}
+                        isMarkdown={cellType === 'markdown'}
                         isLightweight={isLightweight}
                     />
-                ) : (
-                    // Markdown in conflict mode: plain pre (diff view takes over)
-                    <pre>{source}</pre>
                 )}
             </div>
             {showOutputs && cellType === 'code' && cell.outputs && cell.outputs.length > 0 && (
                 <CellOutputs
                     outputs={cell.outputs}
-                    renderMimeRegistry={renderMimeRegistry}
                     isLightweight={isLightweight}
                 />
             )}
@@ -379,93 +332,18 @@ function CellContentInner({
 
 interface MarkdownContentProps {
     source: string;
-    theme: 'dark' | 'light';
     isLightweight?: boolean;
 }
 
-const markdownFenceLanguageSupportCache = new Map<string, Promise<Extension | null>>();
-
-function getFenceLanguageTag(codeNode: HTMLElement): string | null {
-    for (const className of Array.from(codeNode.classList)) {
-        if (className.startsWith('language-')) {
-            return className.slice('language-'.length).trim().toLowerCase();
-        }
-        if (className.startsWith('lang-')) {
-            return className.slice('lang-'.length).trim().toLowerCase();
-        }
-    }
-    return null;
-}
-
-function loadFenceLanguageSupport(languageTag: string): Promise<Extension | null> {
-    const key = languageTag.trim().toLowerCase();
-    if (!key) return Promise.resolve(null);
-
-    const cached = markdownFenceLanguageSupportCache.get(key);
-    if (cached) return cached;
-
-    const supportPromise = (async () => {
-        const description =
-            LanguageDescription.matchLanguageName(languages, key, true) ??
-            LanguageDescription.matchFilename(languages, `file.${key}`);
-
-        if (!description) return null;
-        if (description.support) return description.support;
-
-        try {
-            return await description.load();
-        } catch (err) {
-            markdownFenceLanguageSupportCache.delete(key);
-            logger.warn('[MergeNB] Failed to load markdown fence language support:', err);
-            return null;
-        }
-    })();
-
-    markdownFenceLanguageSupportCache.set(key, supportPromise);
-    return supportPromise;
-}
-
-async function enhanceMarkdownCodeBlocks(host: HTMLElement, theme: 'dark' | 'light'): Promise<void> {
-    const codeNodes = Array.from(host.querySelectorAll('pre > code')) as HTMLElement[];
-    if (codeNodes.length === 0) return;
-
-    // Load all fence language bundles in parallel so the DOM replacements
-    // below happen in a single synchronous pass instead of one per await.
-    const languageSupports = await Promise.all(
-        codeNodes.map(node => {
-            const tag = getFenceLanguageTag(node);
-            return tag ? loadFenceLanguageSupport(tag) : Promise.resolve(null);
-        })
-    );
-
-    for (let i = 0; i < codeNodes.length; i++) {
-        const codeNode = codeNodes[i];
-        const preNode = codeNode.parentElement;
-        if (!preNode) continue;
-
-        const languageSupport = languageSupports[i];
-        if (!languageSupport) continue;
-
-        const source = codeNode.textContent ?? '';
-        const tokens = getSyntaxTokens(source, [languageSupport], theme);
-        const renderPlan = buildStaticRender(source, tokens);
-        codeNode.replaceChildren(renderStaticToDom(renderPlan));
-        preNode.classList.add('has-syntax-highlight');
-    }
-}
-
-export function MarkdownContent({ source, theme, isLightweight = false }: MarkdownContentProps): React.ReactElement {
+export function MarkdownContent({ source, isLightweight = false }: MarkdownContentProps): React.ReactElement {
     const hostRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (isLightweight) return;
         const host = hostRef.current;
-        if (!host || !host.isConnected) return;
-
-        host.replaceChildren();
+        if (!host) return;
 
-        const html = renderMarkdown(source);
-        host.innerHTML = html;
+        host.innerHTML = renderMarkdown(source);
 
         // Resolve local image/link URLs to notebook-asset endpoints
         const { sessionId, token } = getCurrentSessionCredentials();
@@ -481,16 +359,7 @@ export function MarkdownContent({ source, theme, isLightweight = false }: Markdo
                 anchor.setAttribute('href', buildNotebookAssetUrl(sessionId, token, normalizeLocalPath(href)));
             }
         });
-
-        void enhanceMarkdownCodeBlocks(host, theme)
-            .catch((err) => {
-                logger.warn('[MergeNB] Failed to highlight markdown fenced code blocks:', err);
-            });
-
-        return () => {
-            host.replaceChildren();
-        };
-    }, [source, theme, isLightweight]);
+    }, [source, isLightweight]);
 
     if (isLightweight) {
         return <pre className="markdown-source-lightweight">{source}</pre>;
@@ -498,62 +367,54 @@ export function MarkdownContent({ source, theme, isLightweight = false }: Markdo
     return <div className="markdown-content" ref={hostRef} />;
 }
 
-// ─── Static display components (replace CodeMirror read-only instances) ───────
+// ─── Static cell source (replaces CodeMirror read-only instances) ─────────────
 
-export function StaticHighlightedCode({ source, langExtensions, theme, className = 'cell-source-static', isLightweight = false }: {
+export function CellSource({
+    source,
+    langExtensions,
+    theme,
+    compareSource,
+    side = 'base',
+    diffMode = 'base',
+    isMarkdown = false,
+    className = 'cell-source-static',
+    isLightweight = false,
+}: {
     source: string;
     langExtensions: Extension[];
     theme: 'dark' | 'light';
+    /** When set, line/inline diff marks against this content are rendered. */
+    compareSource?: string;
+    side?: 'base' | 'current' | 'incoming';
+    diffMode?: 'base' | 'conflict';
+    isMarkdown?: boolean;
     className?: string;
     isLightweight?: boolean;
 }): React.ReactElement {
     const nodes = useMemo(() => {
         if (isLightweight) return null;
-        const tokens = getSyntaxTokens(source, langExtensions, theme);
-        return renderStaticToReact(buildStaticRender(source, tokens));
-    }, [source, langExtensions, theme, isLightweight]);
-
+        const tokens = getSyntaxTokens(source, isMarkdown ? [] : langExtensions, theme);
+        const marks = compareSource !== undefined
+            ? computeDiffMarks(source, compareSource, side, diffMode)
+            : undefined;
+        return renderStaticToReact(buildStaticRender(source, tokens, marks?.lineClasses, marks?.inlineRanges));
+    }, [source, compareSource, side, diffMode, langExtensions, theme, isMarkdown, isLightweight]);
+
+    const content = isLightweight ? source : nodes;
+    // Markdown cells don't need a <code> wrapper - it's text content, not code
     return (
         <pre className={className}>
-            <code>{isLightweight ? source : nodes}</code>
-        </pre>
-    );
-}
-
-function StaticDiffContent({ source, compareSource, side, diffMode, langExtensions, theme, isMarkdown = false, isLightweight = false }: {
-    source: string;
-    compareSource: string;
-    side: 'base' | 'current' | 'incoming';
-    diffMode: 'base' | 'conflict';
-    langExtensions: Extension[];
-    theme: 'dark' | 'light';
-    isMarkdown?: boolean;
-    isLightweight?: boolean;
-}): React.ReactElement {
-    const nodes = useMemo(() => {
-        if (isLightweight) return null;
-        const tokens = getSyntaxTokens(source, langExtensions, theme);
-        const { lineClasses, inlineRanges } = computeDiffMarks(source, compareSource, side, diffMode);
-        return renderStaticToReact(buildStaticRender(source, tokens, lineClasses, inlineRanges));
-    }, [source, compareSource, side, diffMode, langExtensions, theme, isLightweight]);
-
-    // Markdown cells don't need <code> wrapper - it's text content, not code
-    return (
-        <pre className="cell-source-static">
-            {isMarkdown
-                ? (isLightweight ? source : nodes)
-                : <code>{isLightweight ? source : nodes}</code>}
+            {isMarkdown ? content : <code>{content}</code>}
         </pre>
     );
 }
 
 interface CellOutputsProps {
     outputs: CellOutput[];
-    renderMimeRegistry: RenderMimeRegistry;
     isLightweight?: boolean;
 }
 
-function CellOutputs({ outputs, renderMimeRegistry, isLightweight = false }: CellOutputsProps): React.ReactElement {
+function CellOutputs({ outputs, isLightweight = false }: CellOutputsProps): React.ReactElement {
     if (isLightweight) {
         return (
             <div className="cell-outputs">
@@ -566,23 +427,13 @@ function CellOutputs({ outputs, renderMimeRegistry, isLightweight = false }: Cel
     return (
         <div className="cell-outputs">
             {outputs.map((output, i) => (
-                <RenderMimeOutput
-                    key={i}
-                    output={output}
-                    renderMimeRegistry={renderMimeRegistry}
-                />
+                <RenderMimeOutput key={i} output={output} />
             ))}
         </div>
     );
 }
 
-function RenderMimeOutput({
-    output,
-    renderMimeRegistry
-}: {
-    output: CellOutput;
-    renderMimeRegistry: RenderMimeRegistry;
-}): React.ReactElement {
+function RenderMimeOutput({ output }: { output: CellOutput }): React.ReactElement {
     const hostRef = useRef<HTMLDivElement>(null);
     const [fallback, setFallback] = useState<string | null>(null);
 
@@ -592,6 +443,7 @@ function RenderMimeOutput({
         host.replaceChildren();
         setFallback(null);
 
+        const renderMimeRegistry = getRenderMimeRegistry();
         let disposed = false;
         let renderer: ReturnType<RenderMimeRegistry['createRenderer']> | null = null;
         let model: OutputModel | null = null;
@@ -653,7 +505,7 @@ function RenderMimeOutput({
             model?.dispose();
             host.replaceChildren();
         };
-    }, [output, renderMimeRegistry]);
+    }, [output]);
 
     return (
         <div className="cell-output-item">
@@ -734,53 +586,19 @@ function getCurrentSessionCredentials(): { sessionId: string; token: string } {
     };
 }
 
-function getRenderMimeRegistry(): RenderMimeRegistry {
-    const { sessionId, token } = getCurrentSessionCredentials();
-    const cacheKey = `${sessionId}::${token}`;
-    const cached = renderMimeRegistryCache.get(cacheKey);
-    if (cached) {
-        renderMimeRegistryCache.delete(cacheKey);
-        renderMimeRegistryCache.set(cacheKey, cached);
-        return cached;
-    }
-
-    const registry = new RenderMimeRegistry({
-        initialFactories: standardRendererFactories,
-        resolver: createNotebookAssetResolver(sessionId, token),
-    });
-
-    renderMimeRegistryCache.set(cacheKey, registry);
-    evictRenderMimeRegistryCacheEntries();
-    return registry;
-}
-
-function evictRenderMimeRegistryCacheEntries(): void {
-    while (renderMimeRegistryCache.size > MAX_RENDERMIME_REGISTRY_CACHE_SIZE) {
-        const leastRecentlyUsedKey = renderMimeRegistryCache.keys().next().value as string | undefined;
-        if (!leastRecentlyUsedKey) return;
+// Session credentials come from window.location and never change within a page,
+// so one registry serves the whole session.
+let renderMimeRegistry: RenderMimeRegistry | null = null;
 
-        const leastRecentlyUsedRegistry = renderMimeRegistryCache.get(leastRecentlyUsedKey);
-        renderMimeRegistryCache.delete(leastRecentlyUsedKey);
-        disposeRenderMimeRegistry(leastRecentlyUsedRegistry);
-    }
-}
-
-function disposeRenderMimeRegistry(registry: RenderMimeRegistry | undefined): void {
-    if (!registry) return;
-
-    const resolver = registry.resolver as (IRenderMime.IResolver & { dispose?: () => void }) | null;
-    try {
-        resolver?.dispose?.();
-    } catch (err) {
-        logger.warn('[MergeNB] Failed to dispose rendermime resolver:', err);
-    }
-
-    const disposableRegistry = registry as RenderMimeRegistry & { dispose?: () => void };
-    try {
-        disposableRegistry.dispose?.();
-    } catch (err) {
-        logger.warn('[MergeNB] Failed to dispose rendermime registry:', err);
+function getRenderMimeRegistry(): RenderMimeRegistry {
+    if (!renderMimeRegistry) {
+        const { sessionId, token } = getCurrentSessionCredentials();
+        renderMimeRegistry = new RenderMimeRegistry({
+            initialFactories: standardRendererFactories,
+            resolver: createNotebookAssetResolver(sessionId, token),
+        });
     }
+    return renderMimeRegistry;
 }
 
 function createNotebookAssetResolver(sessionId: string, token: string): IRenderMime.IResolver {

From 7e10c68f5c89ba13739251c9f5f9a47844621279 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:18:30 -0500
Subject: [PATCH 02/13] Simplify MergeRow: one resolved editor, deduped JSX,
 one-way lightweight upgrade

- Drop the markdown <textarea> editor branch; CodeMirror handles all cell
  types (markdown simply gets no language extension), removing a duplicated
  blur-autosave handler and the textarea-specific styles
- Extract the shared blur handler and the twice-duplicated reorder indicator
- Make the off-viewport lightweight mode upgrade-only: rows never swap back
  to plain text, so scrolling can't replace DOM under an in-progress text
  selection
- Inline the trivial renderViewportModal wrapper
- Remove the now-dead has-syntax-highlight style selector
---
 .../web/client/src/components/MergeRow.tsx    | 172 +++++++-----------
 packages/web/client/src/styles.ts             |  24 +--
 2 files changed, 71 insertions(+), 125 deletions(-)

diff --git a/packages/web/client/src/components/MergeRow.tsx b/packages/web/client/src/components/MergeRow.tsx
index 8cfc858..cb6dc68 100644
--- a/packages/web/client/src/components/MergeRow.tsx
+++ b/packages/web/client/src/components/MergeRow.tsx
@@ -14,7 +14,7 @@ import { createPortal } from 'react-dom';
 import CodeMirror, { Extension } from '@uiw/react-codemirror';
 import { EditorView } from '@codemirror/view';
 import type { MergeRow as MergeRowType, ResolutionChoice } from '../types';
-import { CellContent, MarkdownContent, mergeNBEditorStructure, StaticHighlightedCode } from './CellContent';
+import { CellContent, CellSource, MarkdownContent, mergeNBEditorStructure } from './CellContent';
 import { normalizeCellSource, selectNonConflictMergedCell } from '../../../../core/src';
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
 import type { ResolutionState } from '../store/resolverStore';
@@ -53,13 +53,6 @@ const lightweightDisabled =
 // hundreds of off-screen rows on mount.
 const INITIAL_FULL_FIDELITY_ROW_BUDGET = 30;
 
-function renderViewportModal(modal: React.ReactElement): React.ReactElement {
-    if (typeof document === 'undefined') {
-        return modal;
-    }
-    return createPortal(modal, document.body);
-}
-
 function MergeRowInner({
     row,
     rowIndex,
@@ -122,15 +115,16 @@ function MergeRowInner({
     }, []);
 
     // Lightweight off-viewport rendering: keep all rows in the DOM (so native Ctrl+F
-    // still hits every cell) but swap heavy content (markdown HTML, rich outputs) for
-    // plain text when the row is far from the viewport. Fires when the row enters or
-    // leaves an 800px buffer around the viewport.
+    // still hits every cell) but start heavy content (markdown HTML, rich outputs) as
+    // plain text until the row first comes within an 800px buffer of the viewport.
+    // The upgrade is one-way: never swap DOM back out, so scrolling can't destroy an
+    // in-progress text selection anchored in an upgraded row.
     const rowRef = useRef<HTMLDivElement>(null);
     const [isNearViewport, setIsNearViewport] = useState(
         () => lightweightDisabled || rowIndex < INITIAL_FULL_FIDELITY_ROW_BUDGET
     );
     useEffect(() => {
-        if (lightweightDisabled) return;
+        if (lightweightDisabled || rowIndex < INITIAL_FULL_FIDELITY_ROW_BUDGET) return;
         const el = rowRef.current;
         if (!el) return;
         // Observe relative to the actual scroll container (.main-content) rather
@@ -138,11 +132,17 @@ function MergeRowInner({
         // don't skew intersection results.
         const scrollRoot = el.closest('.main-content');
         const observer = new IntersectionObserver(
-            ([entry]) => setIsNearViewport(entry.isIntersecting),
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    setIsNearViewport(true);
+                    observer.disconnect();
+                }
+            },
             { root: scrollRoot, rootMargin: '800px 0px' }
         );
         observer.observe(el);
         return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     // Memoize theme and extensions so @uiw/react-codemirror's internal useEffect
@@ -211,6 +211,21 @@ function MergeRowInner({
         setDraftResolvedContent(value);
     };
 
+    // Leaving the editor autosaves the draft, unless focus moved to a control that
+    // manages the edit session itself (marked with data-editing-allow).
+    const handleEditorBlur = (event: { relatedTarget: EventTarget | null }) => {
+        if (suppressBlurEditGuardRef.current) {
+            suppressBlurEditGuardRef.current = false;
+            return;
+        }
+        const relatedTarget = event.relatedTarget as HTMLElement | null;
+        if (relatedTarget?.closest('[data-editing-allow="true"]')) return;
+        onCommitContent(conflictIndex, draftResolvedContentRef.current);
+        onStopEditing(conflictIndex);
+        setJustSaved(true);
+        setTimeout(() => setJustSaved(false), 1000);
+    };
+
     const handleSaveEdits = () => {
         if (!resolutionState) return;
         suppressBlurEditGuardRef.current = true;
@@ -231,7 +246,7 @@ function MergeRowInner({
     };
 
     const undoWarningModal = showUndoWarning
-        ? renderViewportModal(
+        ? createPortal(
             <div className="warning-modal-overlay" data-testid="undo-warning-modal">
                 <div className="warning-modal">
                     <div className="warning-icon">⚠️</div>
@@ -246,7 +261,8 @@ function MergeRowInner({
                         </button>
                     </div>
                 </div>
-            </div>
+            </div>,
+            document.body
         )
         : null;
 
@@ -255,6 +271,20 @@ function MergeRowInner({
         ? row.currentCellIndex - base : undefined;
     const incomingDelta = (isReordered && base !== undefined && row.incomingCellIndex !== undefined)
         ? row.incomingCellIndex - base : undefined;
+    const reorderIndicator = isReordered ? (
+        <div className="reorder-indicator-bar" data-testid="reorder-indicator">
+            {currentDelta !== undefined && currentDelta !== 0 && (
+                <span className="reorder-delta current-delta">
+                    {currentDelta > 0 ? '↓' : '↑'} {Math.abs(currentDelta)}
+                </span>
+            )}
+            {incomingDelta !== undefined && incomingDelta !== 0 && (
+                <span className="reorder-delta incoming-delta">
+                    {incomingDelta > 0 ? '↓' : '↑'} {Math.abs(incomingDelta)}
+                </span>
+            )}
+        </div>
+    ) : null;
     const canUnmatch = isConflict
         && isReordered
         && !row.isUserUnmatched
@@ -284,20 +314,7 @@ function MergeRowInner({
                 data-cell-type={cellType}
                 data-cell={encodeURIComponent(cell ? JSON.stringify(cell) : '')}
             >
-                {isReordered && (
-                    <div className="reorder-indicator-bar" data-testid="reorder-indicator">
-                        {currentDelta !== undefined && currentDelta !== 0 && (
-                            <span className="reorder-delta current-delta">
-                                {currentDelta > 0 ? '\u2193' : '\u2191'} {Math.abs(currentDelta)}
-                            </span>
-                        )}
-                        {incomingDelta !== undefined && incomingDelta !== 0 && (
-                            <span className="reorder-delta incoming-delta">
-                                {incomingDelta > 0 ? '\u2193' : '\u2191'} {Math.abs(incomingDelta)}
-                            </span>
-                        )}
-                    </div>
-                )}
+                {reorderIndicator}
                 <div className="readable-row-wrapper">
                     <CellContent
                         cell={cell}
@@ -418,69 +435,33 @@ function MergeRowInner({
                             </div>
                             {isEditing ? (
                                 <div data-editing-allow="true">
-                                    {resolvedCellType === 'markdown' ? (
-                                        <textarea
-                                            value={draftResolvedContent}
-                                            onChange={e => handleContentChange(e.target.value)}
-                                            placeholder="Enter cell content..."
-                                            className="resolved-content-input"
-                                            autoFocus={true}
-                                            onBlur={event => {
-                                                if (suppressBlurEditGuardRef.current) {
-                                                    suppressBlurEditGuardRef.current = false;
-                                                    return;
-                                                }
-                                                const relatedTarget = event.relatedTarget as HTMLElement | null;
-                                                if (relatedTarget?.closest('[data-editing-allow="true"]')) return;
-                                                onCommitContent(conflictIndex, draftResolvedContentRef.current);
-                                                onStopEditing(conflictIndex);
-                                                setJustSaved(true);
-                                                setTimeout(() => setJustSaved(false), 1000);
-                                            }}
-                                        />
-                                    ) : (
-                                        <CodeMirror
-                                            value={draftResolvedContent}
-                                            onChange={handleContentChange}
-                                            extensions={editorExtensions}
-                                            placeholder="Enter cell content..."
-                                            className="resolved-content-input"
-                                            basicSetup={{ lineNumbers: false, foldGutter: false }}
-                                            theme={resolvedEditorTheme}
-                                            autoFocus={true}
-                                            onBlur={event => {
-                                                if (suppressBlurEditGuardRef.current) {
-                                                    suppressBlurEditGuardRef.current = false;
-                                                    return;
-                                                }
-                                                const relatedTarget = event.relatedTarget as HTMLElement | null;
-                                                if (relatedTarget?.closest('[data-editing-allow="true"]')) return;
-                                                onCommitContent(conflictIndex, draftResolvedContentRef.current);
-                                                onStopEditing(conflictIndex);
-                                                setJustSaved(true);
-                                                setTimeout(() => setJustSaved(false), 1000);
-                                            }}
-                                        />
-                                    )}
+                                    <CodeMirror
+                                        value={draftResolvedContent}
+                                        onChange={handleContentChange}
+                                        extensions={editorExtensions}
+                                        placeholder="Enter cell content..."
+                                        className="resolved-content-input"
+                                        basicSetup={{ lineNumbers: false, foldGutter: false }}
+                                        theme={resolvedEditorTheme}
+                                        autoFocus={true}
+                                        onBlur={handleEditorBlur}
+                                    />
                                 </div>
-                            ) : (
-                                resolvedCellType === 'markdown' ? (
-                                    <div className="resolved-content-static">
-                                        <MarkdownContent
-                                            source={displayedResolvedContent}
-                                            theme={theme}
-                                            isLightweight={isLightweight}
-                                        />
-                                    </div>
-                                ) : (
-                                    <StaticHighlightedCode
+                            ) : resolvedCellType === 'markdown' ? (
+                                <div className="resolved-content-static">
+                                    <MarkdownContent
                                         source={displayedResolvedContent}
-                                        langExtensions={languageExtensions}
-                                        theme={theme}
-                                        className="resolved-content-static"
                                         isLightweight={isLightweight}
                                     />
-                                )
+                                </div>
+                            ) : (
+                                <CellSource
+                                    source={displayedResolvedContent}
+                                    langExtensions={languageExtensions}
+                                    theme={theme}
+                                    className="resolved-content-static"
+                                    isLightweight={isLightweight}
+                                />
                             )}
                         </div>
                     </div>
@@ -496,20 +477,7 @@ function MergeRowInner({
             {/* Top action bar - always present for conflicts */}
             <div className="conflict-action-bar" data-testid="conflict-action-bar">
                 <div className="conflict-action-left">
-                    {isReordered && !row.isUserUnmatched && (
-                        <div className="reorder-indicator-bar" data-testid="reorder-indicator">
-                            {currentDelta !== undefined && currentDelta !== 0 && (
-                                <span className="reorder-delta current-delta">
-                                    {currentDelta > 0 ? '\u2193' : '\u2191'} {Math.abs(currentDelta)}
-                                </span>
-                            )}
-                            {incomingDelta !== undefined && incomingDelta !== 0 && (
-                                <span className="reorder-delta incoming-delta">
-                                    {incomingDelta > 0 ? '\u2193' : '\u2191'} {Math.abs(incomingDelta)}
-                                </span>
-                            )}
-                        </div>
-                    )}
+                    {!row.isUserUnmatched && reorderIndicator}
                 </div>
                 <div className="conflict-action-right">
                     <button
diff --git a/packages/web/client/src/styles.ts b/packages/web/client/src/styles.ts
index 4908c9e..2127bb6 100644
--- a/packages/web/client/src/styles.ts
+++ b/packages/web/client/src/styles.ts
@@ -621,8 +621,7 @@ ${bodySel} {
 }
 
 /* Static code uses @uiw/codemirror-theme-github HighlightStyle (see CellContent.tsx) */
-.cell-source-static code,
-.markdown-content pre.has-syntax-highlight code {
+.cell-source-static code {
     font-family: var(--font-code);
     font-weight: 400;
 }
@@ -1126,27 +1125,6 @@ ${bodySel} {
     outline: none !important;
 }
 
-.resolved-cell.markdown-cell textarea.resolved-content-input {
-    width: 100%;
-    min-height: 120px;
-    padding: 10px 12px;
-    border: 1px solid rgba(78, 201, 176, 0.4);
-    border-left: 3px solid var(--accent-green);
-    border-radius: 4px;
-    outline: none !important;
-    resize: vertical;
-    background: var(--cell-surface);
-    color: var(--text-primary);
-    font-family: var(--font-ui);
-    font-size: 13px;
-    line-height: 1.5;
-}
-
-.resolved-cell.markdown-cell textarea.resolved-content-input:focus {
-    border-color: var(--accent-green);
-    box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.2);
-}
-
 .resolved-cell.markdown-cell .resolved-content-input .cm-editor {
     border-left: 3px solid var(--accent-green);
 }

From c0ab4545bb3a5b967d875d81509796f44f507c04 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:19:45 -0500
Subject: [PATCH 03/13] Trim token plumbing: emit only styled tokens, drop
 redundant sorts and stale deps

highlightCode walks the tree linearly and computeDiffMarks builds ranges
front-to-back, so both inputs to buildLineSegments are already in document
order. Skipping unstyled tokens also lets adjacent plain text collapse into
a single segment instead of one span boundary per lexer token.
---
 packages/web/client/src/components/CellContent.tsx | 14 +++++++-------
 .../web/client/src/components/ConflictResolver.tsx |  3 +--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/web/client/src/components/CellContent.tsx b/packages/web/client/src/components/CellContent.tsx
index 3b4647c..92a0551 100644
--- a/packages/web/client/src/components/CellContent.tsx
+++ b/packages/web/client/src/components/CellContent.tsx
@@ -45,7 +45,7 @@ if (typeof document !== 'undefined') {
 // Plain HTML (<pre><code>) with HighlightStyle classes (GitHub light/dark), mounted
 // via style-mod — same palette as the resolved CodeMirror editor, no duplicate CSS.
 
-/** Parse `source` with the given language extensions and return token spans. */
+/** Parse `source` with the given language extensions and return styled token spans, in document order. */
 function getSyntaxTokens(
     source: string,
     langExtensions: Extension[],
@@ -65,7 +65,7 @@ function getSyntaxTokens(
         let pos = 0;
         highlightCode(source, tree, highlighter,
             (text, classes) => {
-                tokens.push({ from: pos, to: pos + text.length, classes: classes || '' });
+                if (classes) tokens.push({ from: pos, to: pos + text.length, classes });
                 pos += text.length;
             },
             () => { pos++; }, // newline
@@ -101,15 +101,15 @@ function buildFlatSegments(source: string, tokens: { from: number; to: number; c
     let lastTo = 0;
     for (const t of tokens) {
         if (t.from > lastTo) parts.push({ text: source.slice(lastTo, t.from) });
-        const text = source.slice(t.from, t.to);
-        parts.push(t.classes ? { text, classes: t.classes } : { text });
+        parts.push({ text: source.slice(t.from, t.to), classes: t.classes });
         lastTo = t.to;
     }
     if (lastTo < source.length) parts.push({ text: source.slice(lastTo) });
     return parts;
 }
 
-/** Build line-wrapped spans with merged syntax + diff highlighting. */
+/** Build line-wrapped spans with merged syntax + diff highlighting.
+    Both `syntaxTokens` and `inlineRanges` arrive in document order. */
 function buildLineSegments(
     source: string,
     syntaxTokens: { from: number; to: number; classes: string }[],
@@ -117,8 +117,8 @@ function buildLineSegments(
     inlineRanges: { from: number; to: number; classes: string }[],
 ): StaticLine[] {
     const lines = source.split('\n');
-    const sortedSyntax = syntaxTokens.slice().sort((a, b) => a.from - b.from);
-    const sortedInline = inlineRanges.slice().sort((a, b) => a.from - b.from);
+    const sortedSyntax = syntaxTokens;
+    const sortedInline = inlineRanges;
     const result: StaticLine[] = [];
     let offset = 0;
     let syntaxIndex = 0;
diff --git a/packages/web/client/src/components/ConflictResolver.tsx b/packages/web/client/src/components/ConflictResolver.tsx
index d00e908..7037555 100644
--- a/packages/web/client/src/components/ConflictResolver.tsx
+++ b/packages/web/client/src/components/ConflictResolver.tsx
@@ -120,8 +120,7 @@ export function ConflictResolver({
     const dismissDestructiveActionWarning = useCallback(() => {
         pendingDestructiveActionRef.current = null;
         setDestructiveActionWarning(null);
-
-    }, [activeEditingConflictIndex, rows]);
+    }, []);
 
     const confirmDestructiveActionWarning = useCallback(() => {
         const action = pendingDestructiveActionRef.current;

From 3702c149032a0c24e1872e2c1f0d2e87f69e9150 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:24:14 -0500
Subject: [PATCH 04/13] Dedup getCellForSide: export from resolverStore, drop
 ConflictResolver copy

---
 .../web/client/src/components/ConflictResolver.tsx    | 11 +----------
 packages/web/client/src/store/resolverStore.ts        |  2 +-
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/web/client/src/components/ConflictResolver.tsx b/packages/web/client/src/components/ConflictResolver.tsx
index 7037555..ac2dcf7 100644
--- a/packages/web/client/src/components/ConflictResolver.tsx
+++ b/packages/web/client/src/components/ConflictResolver.tsx
@@ -11,11 +11,11 @@ import { createPortal } from 'react-dom';
 import type {
     UnifiedConflictData,
     MergeRow as MergeRowType,
-    NotebookCell,
 } from '../types';
 import { MergeRow } from './MergeRow';
 import {
     createResolverStore,
+    getCellForSide,
     type ResolutionState,
     type TakeAllChoice,
 } from '../store/resolverStore';
@@ -792,12 +792,3 @@ function inferTakeAllChoice(
 
     return undefined;
 }
-
-function getCellForSide(
-    row: MergeRowType,
-    side: TakeAllChoice
-): NotebookCell | undefined {
-    if (side === 'base') return row.baseCell;
-    if (side === 'current') return row.currentCell;
-    return row.incomingCell;
-}
diff --git a/packages/web/client/src/store/resolverStore.ts b/packages/web/client/src/store/resolverStore.ts
index 01cefdc..faa4ead 100644
--- a/packages/web/client/src/store/resolverStore.ts
+++ b/packages/web/client/src/store/resolverStore.ts
@@ -127,7 +127,7 @@ function applySnapshot(state: ResolverStoreState, snapshot: ResolverSnapshot): v
     state.takeAllChoice = snapshot.takeAllChoice;
 }
 
-function getCellForSide(
+export function getCellForSide(
     row: MergeRowType,
     side: TakeAllChoice
 ): NotebookCell | undefined {

From a907d37e5d130b07a9e5363638f8f4428c7b9154 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:25:00 -0500
Subject: [PATCH 05/13] Collapse resolverStore history nav:
 undo/redo/jumpToHistory share goToHistoryIndex

---
 .../web/client/src/store/resolverStore.ts     | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/web/client/src/store/resolverStore.ts b/packages/web/client/src/store/resolverStore.ts
index faa4ead..d4a5f4a 100644
--- a/packages/web/client/src/store/resolverStore.ts
+++ b/packages/web/client/src/store/resolverStore.ts
@@ -127,6 +127,14 @@ function applySnapshot(state: ResolverStoreState, snapshot: ResolverSnapshot): v
     state.takeAllChoice = snapshot.takeAllChoice;
 }
 
+// Move to an existing history entry: restore its snapshot, exit any edit session,
+// and point the index at it. Callers guard bounds/no-op before calling.
+function goToHistoryIndex(state: ResolverStoreState, targetIndex: number): void {
+    applySnapshot(state, state.history.entries[targetIndex].snapshot);
+    state.editingConflicts.clear();
+    state.history.index = targetIndex;
+}
+
 export function getCellForSide(
     row: MergeRowType,
     side: TakeAllChoice
@@ -233,10 +241,7 @@ export function createResolverStore(initialRows: MergeRowType[]): ResolverStore
             jumpToHistory: (targetIndex: number) => set(state => {
                 if (targetIndex === state.history.index) return;
                 if (targetIndex < 0 || targetIndex >= state.history.entries.length) return;
-                const targetSnapshot = state.history.entries[targetIndex].snapshot;
-                applySnapshot(state, targetSnapshot);
-                state.editingConflicts.clear();
-                state.history.index = targetIndex;
+                goToHistoryIndex(state, targetIndex);
             }),
             unmatchRow: (rowIndex: number) => set(state => {
                 const row = state.rows[rowIndex];
@@ -344,19 +349,11 @@ export function createResolverStore(initialRows: MergeRowType[]): ResolverStore
             }),
             undo: () => set(state => {
                 if (state.history.index === 0) return;
-                const nextIndex = state.history.index - 1;
-                const targetSnapshot = state.history.entries[nextIndex].snapshot;
-                applySnapshot(state, targetSnapshot);
-                state.editingConflicts.clear();
-                state.history.index = nextIndex;
+                goToHistoryIndex(state, state.history.index - 1);
             }),
             redo: () => set(state => {
                 if (state.history.index >= state.history.entries.length - 1) return;
-                const nextIndex = state.history.index + 1;
-                const targetSnapshot = state.history.entries[nextIndex].snapshot;
-                applySnapshot(state, targetSnapshot);
-                state.editingConflicts.clear();
-                state.history.index = nextIndex;
+                goToHistoryIndex(state, state.history.index + 1);
             }),
         }))
     );

From 71d00ba6747876f9ad485ffc67fe0e00f87bddae Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:25:32 -0500
Subject: [PATCH 06/13] Share EMPTY_EXTENSIONS: export from CellContent, import
 in MergeRow

---
 packages/web/client/src/components/CellContent.tsx | 2 +-
 packages/web/client/src/components/MergeRow.tsx    | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web/client/src/components/CellContent.tsx b/packages/web/client/src/components/CellContent.tsx
index 92a0551..dd91ee2 100644
--- a/packages/web/client/src/components/CellContent.tsx
+++ b/packages/web/client/src/components/CellContent.tsx
@@ -248,7 +248,7 @@ interface CellContentProps {
     theme?: 'dark' | 'light';
     isLightweight?: boolean;
 }
-const EMPTY_EXTENSIONS: Extension[] = [];
+export const EMPTY_EXTENSIONS: Extension[] = [];
 function CellContentInner({
     cell,
     cellIndex,
diff --git a/packages/web/client/src/components/MergeRow.tsx b/packages/web/client/src/components/MergeRow.tsx
index cb6dc68..ba88db2 100644
--- a/packages/web/client/src/components/MergeRow.tsx
+++ b/packages/web/client/src/components/MergeRow.tsx
@@ -14,7 +14,7 @@ import { createPortal } from 'react-dom';
 import CodeMirror, { Extension } from '@uiw/react-codemirror';
 import { EditorView } from '@codemirror/view';
 import type { MergeRow as MergeRowType, ResolutionChoice } from '../types';
-import { CellContent, CellSource, MarkdownContent, mergeNBEditorStructure } from './CellContent';
+import { CellContent, CellSource, EMPTY_EXTENSIONS, MarkdownContent, mergeNBEditorStructure } from './CellContent';
 import { normalizeCellSource, selectNonConflictMergedCell } from '../../../../core/src';
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
 import type { ResolutionState } from '../store/resolverStore';
@@ -39,8 +39,6 @@ interface MergeRowProps {
     'data-testid'?: string;
 }
 
-const EMPTY_EXTENSIONS: Extension[] = [];
-
 // Test/diagnostic opt-out: `?noLightweight=1` forces every row to render at full
 // fidelity, regardless of viewport position. Read once at module load.
 const lightweightDisabled =

From 4535f88fc3a0808037ba9ded8002269302cd463f Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:26:58 -0500
Subject: [PATCH 07/13] Extract shared WarningModal component; replace both
 inline portal modals

---
 .../src/components/ConflictResolver.tsx       | 45 ++++----------
 .../web/client/src/components/MergeRow.tsx    | 32 ++++------
 .../client/src/components/WarningModal.tsx    | 61 +++++++++++++++++++
 3 files changed, 85 insertions(+), 53 deletions(-)
 create mode 100644 packages/web/client/src/components/WarningModal.tsx

diff --git a/packages/web/client/src/components/ConflictResolver.tsx b/packages/web/client/src/components/ConflictResolver.tsx
index ac2dcf7..41a69ba 100644
--- a/packages/web/client/src/components/ConflictResolver.tsx
+++ b/packages/web/client/src/components/ConflictResolver.tsx
@@ -7,7 +7,7 @@ import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import { LanguageDescription } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { useStore } from 'zustand';
-import { createPortal } from 'react-dom';
+import { WarningModal } from './WarningModal';
 import type {
     UnifiedConflictData,
     MergeRow as MergeRowType,
@@ -396,37 +396,18 @@ export function ConflictResolver({
 
     const fileName = conflict.filePath.split('/').pop() || 'notebook.ipynb';
 
-    const destructiveActionModal = destructiveActionWarning
-        ? createPortal(
-            <div
-                className="warning-modal-overlay"
-                data-testid="destructive-action-warning-modal"
-                data-editing-allow="true"
-            >
-                <div className="warning-modal">
-                    <div className="warning-icon">⚠️</div>
-                    <h3>{destructiveActionWarning.title}</h3>
-                    <p>{destructiveActionWarning.message}</p>
-                    <div className="warning-actions">
-                        <button
-                            className="btn-cancel"
-                            onClick={dismissDestructiveActionWarning}
-                        >
-                            Keep my edits
-                        </button>
-                        <button
-                            className="btn-confirm"
-                            onClick={confirmDestructiveActionWarning}
-                            data-testid="destructive-action-warning-confirm"
-                        >
-                            {destructiveActionWarning.confirmLabel}
-                        </button>
-                    </div>
-                </div>
-            </div>,
-            document.body
-        )
-        : null;
+    const destructiveActionModal = destructiveActionWarning ? (
+        <WarningModal
+            title={destructiveActionWarning.title}
+            message={destructiveActionWarning.message}
+            confirmLabel={destructiveActionWarning.confirmLabel}
+            onConfirm={confirmDestructiveActionWarning}
+            onCancel={dismissDestructiveActionWarning}
+            testId="destructive-action-warning-modal"
+            confirmTestId="destructive-action-warning-confirm"
+            editingAllow
+        />
+    ) : null;
 
     return (
         <div className="app-container jp-Notebook">
diff --git a/packages/web/client/src/components/MergeRow.tsx b/packages/web/client/src/components/MergeRow.tsx
index ba88db2..7a54fc6 100644
--- a/packages/web/client/src/components/MergeRow.tsx
+++ b/packages/web/client/src/components/MergeRow.tsx
@@ -10,11 +10,11 @@
  */
 
 import React, { useEffect, useState, useMemo, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import CodeMirror, { Extension } from '@uiw/react-codemirror';
 import { EditorView } from '@codemirror/view';
 import type { MergeRow as MergeRowType, ResolutionChoice } from '../types';
 import { CellContent, CellSource, EMPTY_EXTENSIONS, MarkdownContent, mergeNBEditorStructure } from './CellContent';
+import { WarningModal } from './WarningModal';
 import { normalizeCellSource, selectNonConflictMergedCell } from '../../../../core/src';
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
 import type { ResolutionState } from '../store/resolverStore';
@@ -243,26 +243,16 @@ function MergeRowInner({
         });
     };
 
-    const undoWarningModal = showUndoWarning
-        ? createPortal(
-            <div className="warning-modal-overlay" data-testid="undo-warning-modal">
-                <div className="warning-modal">
-                    <div className="warning-icon">⚠️</div>
-                    <h3>Discard edits and undo resolution?</h3>
-                    <p>You have edited the resolved content. Undoing this resolution will discard those changes.</p>
-                    <div className="warning-actions">
-                        <button className="btn-cancel" onClick={cancelUndoResolution}>
-                            Keep my edits
-                        </button>
-                        <button className="btn-confirm" onClick={confirmUndoResolution}>
-                            Undo resolution
-                        </button>
-                    </div>
-                </div>
-            </div>,
-            document.body
-        )
-        : null;
+    const undoWarningModal = showUndoWarning ? (
+        <WarningModal
+            title="Discard edits and undo resolution?"
+            message="You have edited the resolved content. Undoing this resolution will discard those changes."
+            confirmLabel="Undo resolution"
+            onConfirm={confirmUndoResolution}
+            onCancel={cancelUndoResolution}
+            testId="undo-warning-modal"
+        />
+    ) : null;
 
     const base = row.baseCellIndex;
     const currentDelta = (isReordered && base !== undefined && row.currentCellIndex !== undefined)
diff --git a/packages/web/client/src/components/WarningModal.tsx b/packages/web/client/src/components/WarningModal.tsx
new file mode 100644
index 0000000..52ab080
--- /dev/null
+++ b/packages/web/client/src/components/WarningModal.tsx
@@ -0,0 +1,61 @@
+/**
+ * @file WarningModal.tsx
+ * @description Shared confirm/cancel warning dialog rendered into document.body.
+ */
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+interface WarningModalProps {
+    title: string;
+    message: string;
+    confirmLabel: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    /** data-testid for the overlay element (used to locate the modal in tests). */
+    testId?: string;
+    /** data-testid for the confirm button. */
+    confirmTestId?: string;
+    /** Mark the overlay as an editing-allowed surface so editor blur autosave is suppressed. */
+    editingAllow?: boolean;
+}
+
+export function WarningModal({
+    title,
+    message,
+    confirmLabel,
+    cancelLabel = 'Keep my edits',
+    onConfirm,
+    onCancel,
+    testId,
+    confirmTestId,
+    editingAllow = false,
+}: WarningModalProps): React.ReactElement {
+    return createPortal(
+        <div
+            className="warning-modal-overlay"
+            data-testid={testId}
+            data-editing-allow={editingAllow ? 'true' : undefined}
+        >
+            <div className="warning-modal">
+                <div className="warning-icon">⚠️</div>
+                <h3>{title}</h3>
+                <p>{message}</p>
+                <div className="warning-actions">
+                    <button className="btn-cancel" onClick={onCancel}>
+                        {cancelLabel}
+                    </button>
+                    <button
+                        className="btn-confirm"
+                        onClick={onConfirm}
+                        data-testid={confirmTestId}
+                    >
+                        {confirmLabel}
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+}

From 975c60d0869e827da047dab48c8547fcfda1d163 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:27:48 -0500
Subject: [PATCH 08/13] Hoist shared apply-resolution-while-editing warning
 title/message to a const

---
 .../client/src/components/ConflictResolver.tsx    | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/web/client/src/components/ConflictResolver.tsx b/packages/web/client/src/components/ConflictResolver.tsx
index 41a69ba..4e9f30e 100644
--- a/packages/web/client/src/components/ConflictResolver.tsx
+++ b/packages/web/client/src/components/ConflictResolver.tsx
@@ -33,6 +33,13 @@ interface ConflictResolverProps {
     onCancel: () => void;
 }
 
+// Shared title/message for the "a cell is still being edited" prompt shown when
+// applying a resolution. Only the confirm label differs between entry points.
+const APPLY_RESOLUTION_WHILE_EDITING_WARNING = {
+    title: 'Apply resolution now?',
+    message: 'A cell is still in edit mode. Apply the current saved content, or keep editing first.',
+} as const;
+
 export function ConflictResolver({
     conflict,
     onResolve,
@@ -362,9 +369,7 @@ export function ConflictResolver({
         if (activeEditingConflictIndex !== null) {
             pendingDestructiveActionRef.current = applyResolutionNow;
             setDestructiveActionWarning({
-                title: 'Apply resolution now?',
-                message:
-                    'A cell is still in edit mode. Apply the current saved content, or keep editing first.',
+                ...APPLY_RESOLUTION_WHILE_EDITING_WARNING,
                 confirmLabel: 'Apply resolution (without saving edits)',
             });
             return;
@@ -385,9 +390,7 @@ export function ConflictResolver({
             suppressApplyResolutionClickRef.current = true;
             pendingDestructiveActionRef.current = applyResolutionNow;
             setDestructiveActionWarning({
-                title: 'Apply resolution now?',
-                message:
-                    'A cell is still in edit mode. Apply the current saved content, or keep editing first.',
+                ...APPLY_RESOLUTION_WHILE_EDITING_WARNING,
                 confirmLabel: 'Apply resolution',
             });
         },

From 0471c0e1563c55dc9965859fba3219794de5e284 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:29:21 -0500
Subject: [PATCH 09/13] Add guardedClick helper: collapse 8x repeated
 mousedown/click suppress ceremony

---
 .../src/components/ConflictResolver.tsx       | 67 +++++++------------
 1 file changed, 26 insertions(+), 41 deletions(-)

diff --git a/packages/web/client/src/components/ConflictResolver.tsx b/packages/web/client/src/components/ConflictResolver.tsx
index 4e9f30e..8f26df9 100644
--- a/packages/web/client/src/components/ConflictResolver.tsx
+++ b/packages/web/client/src/components/ConflictResolver.tsx
@@ -171,6 +171,24 @@ export function ConflictResolver({
         [activeEditingConflictIndex]
     );
 
+    // Build the onMouseDown/onClick pair for a control that must defer to the
+    // active-editing guard: mousedown intercepts to prompt the user, and the
+    // click is discarded once (via the suppress ref) so the action doesn't
+    // double-fire after the prompt is shown.
+    const guardedClick = useCallback(
+        (action: () => void) => ({
+            onMouseDown: (event: React.MouseEvent) => mouseDownGuardActiveEditing(event, action),
+            onClick: () => {
+                if (suppressGuardedClickRef.current) {
+                    suppressGuardedClickRef.current = false;
+                    return;
+                }
+                action();
+            },
+        }),
+        [mouseDownGuardActiveEditing]
+    );
+
     const isEditableTarget = useCallback((target: EventTarget | null): boolean => {
         if (!target || !(target as HTMLElement).closest) return false;
         const element = target as HTMLElement;
@@ -443,11 +461,7 @@ export function ConflictResolver({
                         <div className="header-group">
                                 <button
                                     className="btn btn-secondary"
-                                    onMouseDown={e => mouseDownGuardActiveEditing(e, handleUndo)}
-                                    onClick={() => {
-                                        if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                        handleUndo();
-                                    }}
+                                    {...guardedClick(handleUndo)}
                                     disabled={!canUndo}
                                     data-testid="history-undo"
                                     title={`Undo (${undoShortcutLabel})`}
@@ -456,11 +470,7 @@ export function ConflictResolver({
                             </button>
                                 <button
                                     className="btn btn-secondary"
-                                    onMouseDown={e => mouseDownGuardActiveEditing(e, handleRedo)}
-                                    onClick={() => {
-                                        if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                        handleRedo();
-                                    }}
+                                    {...guardedClick(handleRedo)}
                                     disabled={!canRedo}
                                     data-testid="history-redo"
                                     title={`Redo (${redoShortcutLabel})`}
@@ -487,11 +497,7 @@ export function ConflictResolver({
                                         <div className="history-actions">
                                             <button
                                                 className="btn btn-secondary"
-                                                onMouseDown={e => mouseDownGuardActiveEditing(e, handleUndo)}
-                                                onClick={() => {
-                                                    if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                                    handleUndo();
-                                                }}
+                                                {...guardedClick(handleUndo)}
                                                 disabled={!canUndo}
                                                 data-testid="history-panel-undo"
                                             >
@@ -499,11 +505,7 @@ export function ConflictResolver({
                                             </button>
                                             <button
                                                 className="btn btn-secondary"
-                                                onMouseDown={e => mouseDownGuardActiveEditing(e, handleRedo)}
-                                                onClick={() => {
-                                                    if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                                    handleRedo();
-                                                }}
+                                                {...guardedClick(handleRedo)}
                                                 disabled={!canRedo}
                                                 data-testid="history-panel-redo"
                                             >
@@ -520,12 +522,7 @@ export function ConflictResolver({
                                                 role="button"
                                                 tabIndex={0}
                                                 aria-current={index === history.index ? 'true' : undefined}
-                                                onMouseDown={e => mouseDownGuardActiveEditing(e, () => { handleJumpToHistory(index); setHistoryOpen(false); })}
-                                                onClick={() => {
-                                                    if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                                    handleJumpToHistory(index);
-                                                    setHistoryOpen(false);
-                                                }}
+                                                {...guardedClick(() => { handleJumpToHistory(index); setHistoryOpen(false); })}
                                                 onKeyDown={event => {
                                                     if (event.key === 'Enter' || event.key === ' ') {
                                                         event.preventDefault();
@@ -553,11 +550,7 @@ export function ConflictResolver({
                                         padding: '4px 8px'
                                     }}
                                     title="Accept all base changes for remaining conflicts"
-                                    onMouseDown={e => mouseDownGuardActiveEditing(e, () => handleAcceptAll('base'))}
-                                    onClick={() => {
-                                        if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                        handleAcceptAll('base');
-                                    }}
+                                    {...guardedClick(() => handleAcceptAll('base'))}
                                 >
                                     All Base
                                 </button>
@@ -572,11 +565,7 @@ export function ConflictResolver({
                                     padding: '4px 8px',
                                 }}
                                 title="Accept all current changes for remaining conflicts"
-                                onMouseDown={e => mouseDownGuardActiveEditing(e, () => handleAcceptAll('current'))}
-                                onClick={() => {
-                                    if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                    handleAcceptAll('current');
-                                }}
+                                {...guardedClick(() => handleAcceptAll('current'))}
                             >
                                 All Current
                             </button>
@@ -590,11 +579,7 @@ export function ConflictResolver({
                                     padding: '4px 8px'
                                 }}
                                 title="Accept all incoming changes for remaining conflicts"
-                                onMouseDown={e => mouseDownGuardActiveEditing(e, () => handleAcceptAll('incoming'))}
-                                onClick={() => {
-                                    if (suppressGuardedClickRef.current) { suppressGuardedClickRef.current = false; return; }
-                                    handleAcceptAll('incoming');
-                                }}
+                                {...guardedClick(() => handleAcceptAll('incoming'))}
                             >
                                 All Incoming
                             </button>

From ee32c2438a46859a4ba35b8d4db8022b74ddc133 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:30:29 -0500
Subject: [PATCH 10/13] Extract UndoRedoButtons: one component for toolbar and
 history-panel pairs

---
 .../src/components/ConflictResolver.tsx       | 107 ++++++++++++------
 1 file changed, 73 insertions(+), 34 deletions(-)

diff --git a/packages/web/client/src/components/ConflictResolver.tsx b/packages/web/client/src/components/ConflictResolver.tsx
index 8f26df9..e1136e6 100644
--- a/packages/web/client/src/components/ConflictResolver.tsx
+++ b/packages/web/client/src/components/ConflictResolver.tsx
@@ -40,6 +40,59 @@ const APPLY_RESOLUTION_WHILE_EDITING_WARNING = {
     message: 'A cell is still in edit mode. Apply the current saved content, or keep editing first.',
 } as const;
 
+type GuardedHandlers = {
+    onMouseDown: (event: React.MouseEvent) => void;
+    onClick: () => void;
+};
+
+interface UndoRedoButtonsProps {
+    guardedClick: (action: () => void) => GuardedHandlers;
+    onUndo: () => void;
+    onRedo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    undoTestId: string;
+    redoTestId: string;
+    undoTitle?: string;
+    redoTitle?: string;
+}
+
+// Undo/Redo pair rendered identically in the toolbar and the history panel.
+function UndoRedoButtons({
+    guardedClick,
+    onUndo,
+    onRedo,
+    canUndo,
+    canRedo,
+    undoTestId,
+    redoTestId,
+    undoTitle,
+    redoTitle,
+}: UndoRedoButtonsProps): React.ReactElement {
+    return (
+        <>
+            <button
+                className="btn btn-secondary"
+                {...guardedClick(onUndo)}
+                disabled={!canUndo}
+                data-testid={undoTestId}
+                title={undoTitle}
+            >
+                Undo
+            </button>
+            <button
+                className="btn btn-secondary"
+                {...guardedClick(onRedo)}
+                disabled={!canRedo}
+                data-testid={redoTestId}
+                title={redoTitle}
+            >
+                Redo
+            </button>
+        </>
+    );
+}
+
 export function ConflictResolver({
     conflict,
     onResolve,
@@ -459,24 +512,17 @@ export function ConflictResolver({
                             Next Conflict &#8595;
                         </button>
                         <div className="header-group">
-                                <button
-                                    className="btn btn-secondary"
-                                    {...guardedClick(handleUndo)}
-                                    disabled={!canUndo}
-                                    data-testid="history-undo"
-                                    title={`Undo (${undoShortcutLabel})`}
-                            >
-                                Undo
-                            </button>
-                                <button
-                                    className="btn btn-secondary"
-                                    {...guardedClick(handleRedo)}
-                                    disabled={!canRedo}
-                                    data-testid="history-redo"
-                                    title={`Redo (${redoShortcutLabel})`}
-                            >
-                                Redo
-                            </button>
+                            <UndoRedoButtons
+                                guardedClick={guardedClick}
+                                onUndo={handleUndo}
+                                onRedo={handleRedo}
+                                canUndo={canUndo}
+                                canRedo={canRedo}
+                                undoTestId="history-undo"
+                                redoTestId="history-redo"
+                                undoTitle={`Undo (${undoShortcutLabel})`}
+                                redoTitle={`Redo (${redoShortcutLabel})`}
+                            />
                             <div className="history-menu" ref={historyMenuRef}>
                                 <button
                                     title="View and jump to previous resolution states"
@@ -495,22 +541,15 @@ export function ConflictResolver({
                                     <div className="history-header">
                                         <span className="history-title">History</span>
                                         <div className="history-actions">
-                                            <button
-                                                className="btn btn-secondary"
-                                                {...guardedClick(handleUndo)}
-                                                disabled={!canUndo}
-                                                data-testid="history-panel-undo"
-                                            >
-                                                Undo
-                                            </button>
-                                            <button
-                                                className="btn btn-secondary"
-                                                {...guardedClick(handleRedo)}
-                                                disabled={!canRedo}
-                                                data-testid="history-panel-redo"
-                                            >
-                                                Redo
-                                            </button>
+                                            <UndoRedoButtons
+                                                guardedClick={guardedClick}
+                                                onUndo={handleUndo}
+                                                onRedo={handleRedo}
+                                                canUndo={canUndo}
+                                                canRedo={canRedo}
+                                                undoTestId="history-panel-undo"
+                                                redoTestId="history-panel-redo"
+                                            />
                                         </div>
                                     </div>
                                     <ul className="history-list">

From 41ea3e82f0574f15b4103627b1d9beeca9d59eff Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:31:33 -0500
Subject: [PATCH 11/13] Data-drive take-all buttons; move inline styles to
 .btn-take-all CSS classes

---
 .../src/components/ConflictResolver.tsx       | 58 +++++--------------
 packages/web/client/src/styles.ts             | 18 ++++++
 2 files changed, 31 insertions(+), 45 deletions(-)

diff --git a/packages/web/client/src/components/ConflictResolver.tsx b/packages/web/client/src/components/ConflictResolver.tsx
index e1136e6..5f51584 100644
--- a/packages/web/client/src/components/ConflictResolver.tsx
+++ b/packages/web/client/src/components/ConflictResolver.tsx
@@ -577,51 +577,19 @@ export function ConflictResolver({
                                 </div>
                             </div>
                         </div>
-                        <div style={{ display: 'flex', gap: 6, marginRight: 12, paddingRight: 12, borderRight: '1px solid var(--border-color)' }}>
-                            {showBaseColumn && (
-                                <button
-                                    className="btn"
-                                    style={{
-                                        background: 'var(--base-bg)',
-                                        border: '1px solid var(--base-border)',
-                                        color: 'var(--text-primary)',
-                                        fontSize: 11,
-                                        padding: '4px 8px'
-                                    }}
-                                    title="Accept all base changes for remaining conflicts"
-                                    {...guardedClick(() => handleAcceptAll('base'))}
-                                >
-                                    All Base
-                                </button>
-                            )}
-                            <button
-                                className="btn"
-                                style={{
-                                    background: 'var(--current-bg)',
-                                    border: '1px solid var(--current-border)',
-                                    color: 'var(--text-primary)',
-                                    fontSize: 11,
-                                    padding: '4px 8px',
-                                }}
-                                title="Accept all current changes for remaining conflicts"
-                                {...guardedClick(() => handleAcceptAll('current'))}
-                            >
-                                All Current
-                            </button>
-                            <button
-                                className="btn"
-                                style={{
-                                    background: 'var(--incoming-bg)',
-                                    border: '1px solid var(--incoming-border)',
-                                    color: 'var(--text-primary)',
-                                    fontSize: 11,
-                                    padding: '4px 8px'
-                                }}
-                                title="Accept all incoming changes for remaining conflicts"
-                                {...guardedClick(() => handleAcceptAll('incoming'))}
-                            >
-                                All Incoming
-                            </button>
+                        <div className="take-all-group">
+                            {(['base', 'current', 'incoming'] as const)
+                                .filter(side => side !== 'base' || showBaseColumn)
+                                .map(side => (
+                                    <button
+                                        key={side}
+                                        className={`btn btn-take-all ${side}`}
+                                        title={`Accept all ${side} changes for remaining conflicts`}
+                                        {...guardedClick(() => handleAcceptAll(side))}
+                                    >
+                                        All {side[0].toUpperCase() + side.slice(1)}
+                                    </button>
+                                ))}
                         </div>
                         <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
                             <input
diff --git a/packages/web/client/src/styles.ts b/packages/web/client/src/styles.ts
index 2127bb6..6a8c6cc 100644
--- a/packages/web/client/src/styles.ts
+++ b/packages/web/client/src/styles.ts
@@ -388,6 +388,24 @@ ${bodySel} {
     background: #3c3c3c;
 }
 
+.take-all-group {
+    display: flex;
+    gap: 6px;
+    margin-right: 12px;
+    padding-right: 12px;
+    border-right: 1px solid var(--border-color);
+}
+
+.btn-take-all {
+    color: var(--text-primary);
+    font-size: 11px;
+    padding: 4px 8px;
+}
+
+.btn-take-all.base { background: var(--base-bg); border: 1px solid var(--base-border); }
+.btn-take-all.current { background: var(--current-bg); border: 1px solid var(--current-border); }
+.btn-take-all.incoming { background: var(--incoming-bg); border: 1px solid var(--incoming-border); }
+
 /* Main content */
 .main-content {
     flex: 1;

From fbde114c87b5a5664e7ad8986dd306d2fdf136c6 Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 11 Jun 2026 20:33:10 -0500
Subject: [PATCH 12/13] Data-drive MergeRow diff columns and resolution bar
 from per-side descriptors

---
 .../web/client/src/components/MergeRow.tsx    | 178 ++++++++----------
 1 file changed, 74 insertions(+), 104 deletions(-)

diff --git a/packages/web/client/src/components/MergeRow.tsx b/packages/web/client/src/components/MergeRow.tsx
index 7a54fc6..5b6b45c 100644
--- a/packages/web/client/src/components/MergeRow.tsx
+++ b/packages/web/client/src/components/MergeRow.tsx
@@ -460,6 +460,39 @@ function MergeRowInner({
         );
     }
 
+    // Per-side descriptors for the three diff columns. Base compares against the
+    // first available other side; current/incoming compare against each other
+    // (falling back to base) in conflict diff mode.
+    const columnSides = [
+        {
+            side: 'base' as const,
+            cell: row.baseCell,
+            cellIndex: row.baseCellIndex,
+            compareCell: row.currentCell || row.incomingCell,
+            diffMode: undefined as 'conflict' | undefined,
+        },
+        {
+            side: 'current' as const,
+            cell: row.currentCell,
+            cellIndex: row.currentCellIndex,
+            compareCell: row.incomingCell || row.baseCell,
+            diffMode: 'conflict' as const,
+        },
+        {
+            side: 'incoming' as const,
+            cell: row.incomingCell,
+            cellIndex: row.incomingCellIndex,
+            compareCell: row.currentCell || row.baseCell,
+            diffMode: 'conflict' as const,
+        },
+    ];
+
+    const resolutionSides = [
+        { side: 'base' as const, has: hasBase },
+        { side: 'current' as const, has: hasCurrent },
+        { side: 'incoming' as const, has: hasIncoming },
+    ];
+
     return (
         <div ref={rowRef} className={rowClasses} data-testid={testId}>
             {/* Top action bar - always present for conflicts */}
@@ -513,115 +546,52 @@ function MergeRowInner({
 
             {/* Three-way diff view */}
             <div className={`cell-columns${showBaseColumn ? '' : ' two-column'}`}>
-                {showBaseColumn && (
-                    <div className="cell-column base-column">
-                        {row.baseCell ? (
-                            <CellContent
-                                cell={row.baseCell}
-                                cellIndex={row.baseCellIndex}
-                                side="base"
-                                isConflict={true}
-                                compareCell={row.currentCell || row.incomingCell}
-                                languageExtensions={languageExtensions}
-                                theme={theme}
-                                showOutputs={showOutputs}
-                                showCellHeaders={showCellHeaders}
-                                isLightweight={isLightweight}
-                            />
-                        ) : (
-                            <div
-                                className="cell-placeholder cell-deleted"
-                                title={row.isUnmatched ? "This branch has no cell here — the cell exists only in the other column(s)" : undefined}
-                            >
-                                <span className="placeholder-text">{getPlaceholderText('base')}</span>
-                            </div>
-                        )}
-                    </div>
-                )}
-                <div className="cell-column current-column">
-                    {row.currentCell ? (
-                        <CellContent
-                            cell={row.currentCell}
-                            cellIndex={row.currentCellIndex}
-                            side="current"
-                            isConflict={true}
-                            compareCell={row.incomingCell || row.baseCell}
-                            diffMode="conflict"
-                            languageExtensions={languageExtensions}
-                            theme={theme}
-                            showOutputs={showOutputs}
-                            showCellHeaders={showCellHeaders}
-                            isLightweight={isLightweight}
-                        />
-                    ) : (
-                        <div
-                            className="cell-placeholder cell-deleted"
-                            title={row.isUnmatched ? "This branch has no cell here — the cell exists only in the other column(s)" : undefined}
-                        >
-                            <span className="placeholder-text">{getPlaceholderText('current')}</span>
-                        </div>
-                    )}
-                </div>
-                <div className="cell-column incoming-column">
-                    {row.incomingCell ? (
-                        <CellContent
-                            cell={row.incomingCell}
-                            cellIndex={row.incomingCellIndex}
-                            side="incoming"
-                            isConflict={true}
-                            compareCell={row.currentCell || row.baseCell}
-                            diffMode="conflict"
-                            languageExtensions={languageExtensions}
-                            theme={theme}
-                            showOutputs={showOutputs}
-                            showCellHeaders={showCellHeaders}
-                            isLightweight={isLightweight}
-                        />
-                    ) : (
-                        <div
-                            className="cell-placeholder cell-deleted"
-                            title={row.isUnmatched ? "This branch has no cell here — the cell exists only in the other column(s)" : undefined}
-                        >
-                            <span className="placeholder-text">{getPlaceholderText('incoming')}</span>
+                {columnSides
+                    .filter(col => col.side !== 'base' || showBaseColumn)
+                    .map(col => (
+                        <div key={col.side} className={`cell-column ${col.side}-column`}>
+                            {col.cell ? (
+                                <CellContent
+                                    cell={col.cell}
+                                    cellIndex={col.cellIndex}
+                                    side={col.side}
+                                    isConflict={true}
+                                    compareCell={col.compareCell}
+                                    diffMode={col.diffMode}
+                                    languageExtensions={languageExtensions}
+                                    theme={theme}
+                                    showOutputs={showOutputs}
+                                    showCellHeaders={showCellHeaders}
+                                    isLightweight={isLightweight}
+                                />
+                            ) : (
+                                <div
+                                    className="cell-placeholder cell-deleted"
+                                    title={row.isUnmatched ? "This branch has no cell here — the cell exists only in the other column(s)" : undefined}
+                                >
+                                    <span className="placeholder-text">{getPlaceholderText(col.side)}</span>
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
+                    ))}
             </div>
 
             {/* Resolution bar - select which branch to use as base */}
             <div className={`resolution-bar cell-columns${showBaseColumn && !row.isUserUnmatched ? '' : ' two-column'}`}>
-                {showBaseColumn && !row.isUserUnmatched && (
-                    <div className="cell-column base-column">
-                        {hasBase && (
-                            <button
-                                className={`btn-resolve btn-base ${resolutionState?.choice === 'base' ? 'selected' : ''}`}
-                                onClick={() => handleChoiceClick('base')}
-                            >
-                                Use Base
-                            </button>
-                        )}
-                    </div>
-                )}
-                <div className="cell-column current-column">
-                    {hasCurrent && (
-                        <button
-                            className={`btn-resolve btn-current ${resolutionState?.choice === 'current' ? 'selected' : ''}`}
-                            onClick={() => handleChoiceClick('current')}
-                        >
-                            Use Current
-                        </button>
-                    )}
-                </div>
-                <div className="cell-column incoming-column">
-                    {hasIncoming && (
-                        <button
-                            className={`btn-resolve btn-incoming ${resolutionState?.choice === 'incoming' ? 'selected' : ''}`}
-                            onClick={() => handleChoiceClick('incoming')}
-                        >
-                            Use Incoming
-                        </button>
-                    )}
-                </div>
+                {resolutionSides
+                    .filter(({ side }) => side !== 'base' || (showBaseColumn && !row.isUserUnmatched))
+                    .map(({ side, has }) => (
+                        <div key={side} className={`cell-column ${side}-column`}>
+                            {has && (
+                                <button
+                                    className={`btn-resolve btn-${side} ${resolutionState?.choice === side ? 'selected' : ''}`}
+                                    onClick={() => handleChoiceClick(side)}
+                                >
+                                    Use {side[0].toUpperCase() + side.slice(1)}
+                                </button>
+                            )}
+                        </div>
+                    ))}
             </div>
 
         </div>

From 635ff122f82ba44bdc75240855c5130dd01d239c Mon Sep 17 00:00:00 2001
From: Avni2000 <avnibadiwale@gmail.com>
Date: Thu, 23 Jul 2026 20:28:44 -0500
Subject: [PATCH 13/13] fix(client): make the edit modal a proper warning modal

---
 .../client/src/components/WarningModal.tsx    | 58 +++++++++++++++++--
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/packages/web/client/src/components/WarningModal.tsx b/packages/web/client/src/components/WarningModal.tsx
index 52ab080..1e3c04f 100644
--- a/packages/web/client/src/components/WarningModal.tsx
+++ b/packages/web/client/src/components/WarningModal.tsx
@@ -3,7 +3,7 @@
  * @description Shared confirm/cancel warning dialog rendered into document.body.
  */
 
-import React from 'react';
+import React, { useEffect, useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 interface WarningModalProps {
@@ -32,24 +32,72 @@ export function WarningModal({
     confirmTestId,
     editingAllow = false,
 }: WarningModalProps): React.ReactElement {
+    const titleId = useId();
+    const messageId = useId();
+    const cancelRef = useRef<HTMLButtonElement>(null);
+    const confirmRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        const previouslyFocused = document.activeElement as HTMLElement | null;
+        confirmRef.current?.focus();
+        return () => {
+            previouslyFocused?.focus();
+        };
+    }, []);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            onCancel();
+            return;
+        }
+        if (event.key !== 'Tab') {
+            return;
+        }
+        const first = cancelRef.current;
+        const last = confirmRef.current;
+        if (!first || !last) {
+            return;
+        }
+        if (event.shiftKey) {
+            if (document.activeElement === first) {
+                event.preventDefault();
+                last.focus();
+            }
+        } else {
+            if (document.activeElement === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        }
+    };
+
     return createPortal(
         <div
             className="warning-modal-overlay"
             data-testid={testId}
             data-editing-allow={editingAllow ? 'true' : undefined}
         >
-            <div className="warning-modal">
+            <div
+                className="warning-modal"
+                role="alertdialog"
+                aria-modal="true"
+                aria-labelledby={titleId}
+                aria-describedby={messageId}
+                onKeyDown={handleKeyDown}
+            >
                 <div className="warning-icon">⚠️</div>
-                <h3>{title}</h3>
-                <p>{message}</p>
+                <h3 id={titleId}>{title}</h3>
+                <p id={messageId}>{message}</p>
                 <div className="warning-actions">
-                    <button className="btn-cancel" onClick={onCancel}>
+                    <button className="btn-cancel" onClick={onCancel} ref={cancelRef}>
                         {cancelLabel}
                     </button>
                     <button
                         className="btn-confirm"
                         onClick={onConfirm}
                         data-testid={confirmTestId}
+                        ref={confirmRef}
                     >
                         {confirmLabel}
                     </button>