diffstalker 0.2.0 → 0.2.2

package/dist/ui/widgets/DiffView.js

@@ -1,7 +1,14 @@
 import { getTheme } from '../../themes.js';
-import { buildDiffDisplayRows, buildHistoryDisplayRows, getDisplayRowsLineNumWidth, wrapDisplayRows, } from '../../utils/displayRows.js';
-import { ansiToBlessed } from '../../utils/ansiToBlessed.js';
+import { buildDiffDisplayRows, buildCombinedDiffDisplayRows, buildHistoryDisplayRows, getDisplayRowsLineNumWidth, wrapDisplayRows, getHunkBoundaries, } from '../../utils/displayRows.js';
 import { truncateAnsi } from '../../utils/ansiTruncate.js';
+// ANSI escape codes for raw terminal output (avoids blessed tag escaping issues)
+const ANSI_RESET = '\x1b[0m';
+const ANSI_BOLD = '\x1b[1m';
+const ANSI_GRAY = '\x1b[90m';
+const ANSI_CYAN = '\x1b[36m';
+const ANSI_GREEN = '\x1b[32m';
+const ANSI_YELLOW = '\x1b[33m';
+const ANSI_INVERSE = '\x1b[7m';
 /**
  * Truncate string to fit within maxWidth, adding ellipsis if needed.
  */
@@ -44,191 +51,133 @@ function ansiFg(hex) {
     const b = parseInt(hex.slice(5, 7), 16);
     return `\x1b[38;2;${r};${g};${b}m`;
 }
-const ANSI_RESET = '\x1b[0m';
+/**
+ * Format a diff file header row (e.g. "── path/to/file ──").
+ */
+function formatDiffHeader(content, headerWidth) {
+    if (content.startsWith('diff --git')) {
+        const match = content.match(/diff --git a\/.+ b\/(.+)$/);
+        if (match) {
+            const maxPathLen = headerWidth - 6;
+            const path = truncate(match[1], maxPathLen);
+            return `{escape}${ANSI_BOLD}${ANSI_CYAN}\u2500\u2500 ${path} \u2500\u2500${ANSI_RESET}{/escape}`;
+        }
+    }
+    return `{escape}${ANSI_GRAY}${truncate(content, headerWidth)}${ANSI_RESET}{/escape}`;
+}
+/**
+ * Format a diff hunk header row (e.g. "Lines 10-20 → 15-25 functionName").
+ */
+function formatDiffHunk(content, headerWidth) {
+    const match = content.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/);
+    if (match) {
+        const oldStart = parseInt(match[1], 10);
+        const oldCount = match[2] ? parseInt(match[2], 10) : 1;
+        const newStart = parseInt(match[3], 10);
+        const newCount = match[4] ? parseInt(match[4], 10) : 1;
+        const context = match[5].trim();
+        const oldEnd = oldStart + oldCount - 1;
+        const newEnd = newStart + newCount - 1;
+        const oldRange = oldCount === 1 ? `${oldStart}` : `${oldStart}-${oldEnd}`;
+        const newRange = newCount === 1 ? `${newStart}` : `${newStart}-${newEnd}`;
+        const rangeText = `Lines ${oldRange} \u2192 ${newRange}`;
+        const contextMaxLen = headerWidth - rangeText.length - 1;
+        const truncatedContext = context && contextMaxLen > 3 ? ' ' + truncate(context, contextMaxLen) : '';
+        return `{escape}${ANSI_CYAN}${rangeText}${ANSI_GRAY}${truncatedContext}${ANSI_RESET}{/escape}`;
+    }
+    return `{escape}${ANSI_CYAN}${truncate(content, headerWidth)}${ANSI_RESET}{/escape}`;
+}
+/**
+ * Truncate or keep content based on wrap mode. Returns the display text and its visible length.
+ */
+function prepareContent(text, contentWidth, wrapMode) {
+    const display = wrapMode ? text : truncate(text, contentWidth);
+    return { display, visibleLength: display.length };
+}
+/**
+ * Pad a line to the target width with spaces, using the given ANSI background.
+ */
+function padToWidth(prefix, content, visibleLength, targetWidth, bg, fg) {
+    const padding = ' '.repeat(Math.max(0, targetWidth - prefix.length - visibleLength));
+    return `{escape}${bg}${fg}${prefix}${content}${padding}${ANSI_RESET}{/escape}`;
+}
+/**
+ * Format a content line for the ANSI theme (blessed tags, no 24-bit color).
+ */
+function formatAnsiContentLine(prefix, rawContent, contentWidth, headerWidth, wrapMode, lineType) {
+    const { display } = prepareContent(rawContent, contentWidth, wrapMode);
+    const paddedContent = `${prefix}${display}`.padEnd(headerWidth, ' ');
+    const bgTag = lineType === 'add' ? 'green' : 'red';
+    return `{${bgTag}-bg}{white-fg}${escapeContent(paddedContent)}{/white-fg}{/${bgTag}-bg}`;
+}
+/**
+ * Build word-diff content string with highlight segments.
+ */
+function buildWordDiffContent(segments, highlightBg, bg) {
+    let result = '';
+    for (const seg of segments) {
+        result += seg.type === 'changed' ? `${highlightBg}${seg.text}${bg}` : seg.text;
+    }
+    return result;
+}
+/**
+ * Format an add or delete content line, parameterized by line type.
+ */
+function formatDiffContentLine(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode, lineType) {
+    const typeSymbol = lineType === 'add' ? '+' : '-';
+    const symbol = row.isContinuation ? '\u00bb' : typeSymbol;
+    const lineNum = formatLineNum(row.lineNum, lineNumWidth);
+    const prefix = `${lineNum} ${symbol}  `;
+    const rawContent = row.content || '';
+    if (theme.name.includes('ansi')) {
+        return formatAnsiContentLine(prefix, rawContent, contentWidth, headerWidth, wrapMode, lineType);
+    }
+    const { colors } = theme;
+    const bg = ansiBg(lineType === 'add' ? colors.addBg : colors.delBg);
+    const fg = ansiFg('#ffffff');
+    const { display, visibleLength } = prepareContent(rawContent, contentWidth, wrapMode);
+    const canUseRichContent = !row.isContinuation && (wrapMode || rawContent.length <= contentWidth);
+    if (row.wordDiffSegments && canUseRichContent) {
+        const highlightBg = ansiBg(lineType === 'add' ? colors.addHighlight : colors.delHighlight);
+        const contentStr = buildWordDiffContent(row.wordDiffSegments, highlightBg, bg);
+        return padToWidth(prefix, contentStr, rawContent.length, headerWidth, bg, fg);
+    }
+    if (row.highlighted && canUseRichContent) {
+        return padToWidth(prefix, row.highlighted, rawContent.length, headerWidth, bg, fg);
+    }
+    return padToWidth(prefix, display, visibleLength, headerWidth, bg, fg);
+}
 /**
  * Format a single display row as blessed-compatible tagged string.
  */
 function formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode) {
-    const { colors } = theme;
     switch (row.type) {
-        case 'diff-header': {
-            const content = row.content;
-            if (content.startsWith('diff --git')) {
-                const match = content.match(/diff --git a\/.+ b\/(.+)$/);
-                if (match) {
-                    const maxPathLen = headerWidth - 6;
-                    const path = truncate(match[1], maxPathLen);
-                    return `{bold}{cyan-fg}\u2500\u2500 ${path} \u2500\u2500{/cyan-fg}{/bold}`;
-                }
-            }
-            return `{gray-fg}${escapeContent(truncate(content, headerWidth))}{/gray-fg}`;
-        }
-        case 'diff-hunk': {
-            const match = row.content.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/);
-            if (match) {
-                const oldStart = parseInt(match[1], 10);
-                const oldCount = match[2] ? parseInt(match[2], 10) : 1;
-                const newStart = parseInt(match[3], 10);
-                const newCount = match[4] ? parseInt(match[4], 10) : 1;
-                const context = match[5].trim();
-                const oldEnd = oldStart + oldCount - 1;
-                const newEnd = newStart + newCount - 1;
-                const oldRange = oldCount === 1 ? `${oldStart}` : `${oldStart}-${oldEnd}`;
-                const newRange = newCount === 1 ? `${newStart}` : `${newStart}-${newEnd}`;
-                const rangeText = `Lines ${oldRange} \u2192 ${newRange}`;
-                const contextMaxLen = headerWidth - rangeText.length - 1;
-                const truncatedContext = context && contextMaxLen > 3 ? ' ' + truncate(context, contextMaxLen) : '';
-                return `{cyan-fg}${rangeText}{/cyan-fg}{gray-fg}${truncatedContext}{/gray-fg}`;
-            }
-            return `{cyan-fg}${escapeContent(truncate(row.content, headerWidth))}{/cyan-fg}`;
-        }
-        case 'diff-add': {
-            const isCont = row.isContinuation;
-            const symbol = isCont ? '\u00bb' : '+';
-            const lineNum = formatLineNum(row.lineNum, lineNumWidth);
-            const prefix = `${lineNum} ${symbol}  `;
-            if (theme.name.includes('ansi')) {
-                // Basic ANSI theme - use blessed tags with 16-color palette
-                const rawContent = wrapMode ? row.content || '' : truncate(row.content || '', contentWidth);
-                const visibleContent = `${prefix}${rawContent}`;
-                const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-                return `{green-bg}{white-fg}${escapeContent(paddedContent)}{/white-fg}{/green-bg}`;
-            }
-            // Use 24-bit RGB via {escape} tag
-            const bg = ansiBg(colors.addBg);
-            const highlightBg = ansiBg(colors.addHighlight);
-            const fg = ansiFg('#ffffff');
-            // Check for word-level diff segments (only in non-wrap mode or first row)
-            if (row.wordDiffSegments && !isCont) {
-                const rawContent = row.content || '';
-                // Check visible content length (not including escape codes)
-                if (!wrapMode && rawContent.length > contentWidth) {
-                    // Content too long - fall back to simple truncation without word highlighting
-                    const truncated = truncate(rawContent, contentWidth);
-                    const visibleContent = `${prefix}${truncated}`;
-                    const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-                    return `{escape}${bg}${fg}${paddedContent}${ANSI_RESET}{/escape}`;
-                }
-                // Build content with word-level highlighting
-                let contentStr = '';
-                for (const seg of row.wordDiffSegments) {
-                    if (seg.type === 'changed') {
-                        contentStr += `${highlightBg}${seg.text}${bg}`;
-                    }
-                    else {
-                        contentStr += seg.text;
-                    }
-                }
-                // Calculate padding based on visible width (prefix + rawContent)
-                const visibleWidth = prefix.length + rawContent.length;
-                const padding = ' '.repeat(Math.max(0, headerWidth - visibleWidth));
-                return `{escape}${bg}${fg}${prefix}${contentStr}${padding}${ANSI_RESET}{/escape}`;
-            }
-            // Check for syntax highlighting (when no word-diff)
-            if (row.highlighted && !isCont) {
-                const rawContent = row.content || '';
-                if (!wrapMode && rawContent.length > contentWidth) {
-                    // Too long - fall back to plain truncation
-                    const truncated = truncate(rawContent, contentWidth);
-                    const visibleContent = `${prefix}${truncated}`;
-                    const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-                    return `{escape}${bg}${fg}${paddedContent}${ANSI_RESET}{/escape}`;
-                }
-                // Use highlighted content (already has foreground colors, bg preserved)
-                const visibleWidth = prefix.length + rawContent.length;
-                const padding = ' '.repeat(Math.max(0, headerWidth - visibleWidth));
-                return `{escape}${bg}${fg}${prefix}${row.highlighted}${padding}${ANSI_RESET}{/escape}`;
-            }
-            const rawContent = wrapMode ? row.content || '' : truncate(row.content || '', contentWidth);
-            const visibleContent = `${prefix}${rawContent}`;
-            const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-            return `{escape}${bg}${fg}${paddedContent}${ANSI_RESET}{/escape}`;
-        }
-        case 'diff-del': {
-            const isCont = row.isContinuation;
-            const symbol = isCont ? '\u00bb' : '-';
-            const lineNum = formatLineNum(row.lineNum, lineNumWidth);
-            const prefix = `${lineNum} ${symbol}  `;
-            if (theme.name.includes('ansi')) {
-                // Basic ANSI theme - use blessed tags with 16-color palette
-                const rawContent = wrapMode ? row.content || '' : truncate(row.content || '', contentWidth);
-                const visibleContent = `${prefix}${rawContent}`;
-                const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-                return `{red-bg}{white-fg}${escapeContent(paddedContent)}{/white-fg}{/red-bg}`;
-            }
-            // Use 24-bit RGB via {escape} tag
-            const bg = ansiBg(colors.delBg);
-            const highlightBg = ansiBg(colors.delHighlight);
-            const fg = ansiFg('#ffffff');
-            // Check for word-level diff segments (only in non-wrap mode or first row)
-            if (row.wordDiffSegments && !isCont) {
-                const rawContent = row.content || '';
-                // Check visible content length (not including escape codes)
-                if (!wrapMode && rawContent.length > contentWidth) {
-                    // Content too long - fall back to simple truncation without word highlighting
-                    const truncated = truncate(rawContent, contentWidth);
-                    const visibleContent = `${prefix}${truncated}`;
-                    const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-                    return `{escape}${bg}${fg}${paddedContent}${ANSI_RESET}{/escape}`;
-                }
-                // Build content with word-level highlighting
-                let contentStr = '';
-                for (const seg of row.wordDiffSegments) {
-                    if (seg.type === 'changed') {
-                        contentStr += `${highlightBg}${seg.text}${bg}`;
-                    }
-                    else {
-                        contentStr += seg.text;
-                    }
-                }
-                // Calculate padding based on visible width (prefix + rawContent)
-                const visibleWidth = prefix.length + rawContent.length;
-                const padding = ' '.repeat(Math.max(0, headerWidth - visibleWidth));
-                return `{escape}${bg}${fg}${prefix}${contentStr}${padding}${ANSI_RESET}{/escape}`;
-            }
-            // Check for syntax highlighting (when no word-diff)
-            if (row.highlighted && !isCont) {
-                const rawContent = row.content || '';
-                if (!wrapMode && rawContent.length > contentWidth) {
-                    // Too long - fall back to plain truncation
-                    const truncated = truncate(rawContent, contentWidth);
-                    const visibleContent = `${prefix}${truncated}`;
-                    const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-                    return `{escape}${bg}${fg}${paddedContent}${ANSI_RESET}{/escape}`;
-                }
-                // Use highlighted content (already has foreground colors, bg preserved)
-                const visibleWidth = prefix.length + rawContent.length;
-                const padding = ' '.repeat(Math.max(0, headerWidth - visibleWidth));
-                return `{escape}${bg}${fg}${prefix}${row.highlighted}${padding}${ANSI_RESET}{/escape}`;
-            }
-            const rawContent = wrapMode ? row.content || '' : truncate(row.content || '', contentWidth);
-            const visibleContent = `${prefix}${rawContent}`;
-            const paddedContent = visibleContent.padEnd(headerWidth, ' ');
-            return `{escape}${bg}${fg}${paddedContent}${ANSI_RESET}{/escape}`;
-        }
+        case 'diff-header':
+            return formatDiffHeader(row.content, headerWidth);
+        case 'diff-hunk':
+            return formatDiffHunk(row.content, headerWidth);
+        case 'diff-add':
+            return formatDiffContentLine(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode, 'add');
+        case 'diff-del':
+            return formatDiffContentLine(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode, 'del');
         case 'diff-context': {
             const isCont = row.isContinuation;
             const symbol = isCont ? '\u00bb' : ' ';
             const lineNum = formatLineNum(row.lineNum, lineNumWidth);
             const prefix = `${lineNum} ${symbol}  `;
             const rawContent = row.content || '';
-            // Use syntax highlighting if available (not for continuations)
+            const prefixAnsi = `\x1b[90m${prefix}\x1b[0m`;
             if (row.highlighted && !isCont) {
-                const truncatedHighlight = wrapMode
-                    ? row.highlighted
-                    : truncateAnsi(row.highlighted, contentWidth);
-                const highlightedContent = ansiToBlessed(truncatedHighlight);
-                return `{gray-fg}${prefix}{/gray-fg}${highlightedContent}`;
+                const content = wrapMode ? row.highlighted : truncateAnsi(row.highlighted, contentWidth);
+                return `{escape}${prefixAnsi}${content}${ANSI_RESET}{/escape}`;
             }
-            const content = wrapMode
-                ? escapeContent(rawContent)
-                : escapeContent(truncate(rawContent, contentWidth));
-            return `{gray-fg}${prefix}{/gray-fg}${content}`;
+            const content = wrapMode ? rawContent : truncate(rawContent, contentWidth);
+            return `{escape}${prefixAnsi}${content}${ANSI_RESET}{/escape}`;
         }
         case 'commit-header':
-            return `{yellow-fg}${escapeContent(truncate(row.content, headerWidth))}{/yellow-fg}`;
+            return `{escape}${ANSI_YELLOW}${truncate(row.content, headerWidth)}${ANSI_RESET}{/escape}`;
         case 'commit-message':
-            return escapeContent(truncate(row.content, headerWidth));
+            return `{escape}${truncate(row.content, headerWidth)}${ANSI_RESET}{/escape}`;
         case 'spacer':
             return '';
     }
@@ -237,24 +186,55 @@ function formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, w
  * Format diff output as blessed-compatible tagged string.
  * Returns both the content and total row count for scroll calculations.
  */
-export function formatDiff(diff, width, scrollOffset = 0, maxHeight, themeName = 'dark', wrapMode = false) {
+export function formatDiff(diff, width, scrollOffset = 0, maxHeight, themeName = 'dark', wrapMode = false, selectedHunkIndex, isFileStaged) {
+    const hunkActive = selectedHunkIndex !== undefined && selectedHunkIndex >= 0;
     const displayRows = buildDiffDisplayRows(diff);
     if (displayRows.length === 0) {
-        return { content: '{gray-fg}No diff to display{/gray-fg}', totalRows: 0 };
+        return {
+            content: '{gray-fg}No diff to display{/gray-fg}',
+            totalRows: 0,
+            hunkCount: 0,
+            hunkBoundaries: [],
+        };
     }
     const theme = getTheme(themeName);
     const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
-    const contentWidth = width - lineNumWidth - 5; // line num + space + symbol + space + padding
+    // Reserve 1 column for hunk gutter when active
+    const gutterWidth = hunkActive ? 1 : 0;
+    const contentWidth = width - lineNumWidth - 5 - gutterWidth;
     const headerWidth = width - 2;
     // Apply wrapping if enabled
     const wrappedRows = wrapDisplayRows(displayRows, contentWidth, wrapMode);
     const totalRows = wrappedRows.length;
+    // Compute hunk boundaries on wrapped rows
+    const hunkBoundaries = getHunkBoundaries(wrappedRows);
+    const hunkCount = hunkBoundaries.length;
+    // Determine which rows belong to the selected hunk
+    const clampedHunkIndex = Math.min(selectedHunkIndex ?? 0, hunkCount - 1);
+    const selectedBoundary = hunkActive && hunkCount > 0 ? hunkBoundaries[clampedHunkIndex] : null;
     // Apply scroll offset and max height
+    const startIdx = scrollOffset;
     const visibleRows = maxHeight
-        ? wrappedRows.slice(scrollOffset, scrollOffset + maxHeight)
-        : wrappedRows.slice(scrollOffset);
-    const lines = visibleRows.map((row) => formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode));
-    return { content: lines.join('\n'), totalRows };
+        ? wrappedRows.slice(startIdx, startIdx + maxHeight)
+        : wrappedRows.slice(startIdx);
+    const lines = visibleRows.map((row, i) => {
+        const absoluteIdx = startIdx + i;
+        const formatted = formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode);
+        if (!hunkActive)
+            return formatted;
+        // Determine gutter character — green for staged, cyan for unstaged
+        const inSelectedHunk = selectedBoundary &&
+            absoluteIdx >= selectedBoundary.startRow &&
+            absoluteIdx < selectedBoundary.endRow;
+        const gutterColor = isFileStaged ? ANSI_GREEN : ANSI_CYAN;
+        const gutter = inSelectedHunk ? `{escape}${gutterColor}\u258c${ANSI_RESET}{/escape}` : ' ';
+        // Highlight the @@ header of the selected hunk with inverse video
+        if (inSelectedHunk && row.type === 'diff-hunk') {
+            return gutter + formatted.replace('{escape}', `{escape}${ANSI_INVERSE}`);
+        }
+        return gutter + formatted;
+    });
+    return { content: lines.join('\n'), totalRows, hunkCount, hunkBoundaries };
 }
 /**
  * Format history diff (commit metadata + diff) as blessed-compatible tagged string.
@@ -263,7 +243,12 @@ export function formatDiff(diff, width, scrollOffset = 0, maxHeight, themeName =
 export function formatHistoryDiff(commit, diff, width, scrollOffset = 0, maxHeight, themeName = 'dark', wrapMode = false) {
     const displayRows = buildHistoryDisplayRows(commit, diff);
     if (displayRows.length === 0) {
-        return { content: '{gray-fg}No commit selected{/gray-fg}', totalRows: 0 };
+        return {
+            content: '{gray-fg}No commit selected{/gray-fg}',
+            totalRows: 0,
+            hunkCount: 0,
+            hunkBoundaries: [],
+        };
     }
     const theme = getTheme(themeName);
     const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
@@ -275,5 +260,68 @@ export function formatHistoryDiff(commit, diff, width, scrollOffset = 0, maxHeig
         ? wrappedRows.slice(scrollOffset, scrollOffset + maxHeight)
         : wrappedRows.slice(scrollOffset);
     const lines = visibleRows.map((row) => formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode));
-    return { content: lines.join('\n'), totalRows };
+    return { content: lines.join('\n'), totalRows, hunkCount: 0, hunkBoundaries: [] };
+}
+/**
+ * Format combined (unstaged + staged) diff for a single file.
+ * Hunks are interleaved by file position. Each hunk shows a gutter
+ * indicator for its staging state (cyan=unstaged, green=staged).
+ */
+export function formatCombinedDiff(unstaged, staged, width, scrollOffset = 0, maxHeight, themeName = 'dark', wrapMode = false, selectedHunkIndex) {
+    const { rows: displayRows, hunkMapping } = buildCombinedDiffDisplayRows(unstaged, staged);
+    if (displayRows.length === 0) {
+        return {
+            content: '{gray-fg}No diff to display{/gray-fg}',
+            totalRows: 0,
+            hunkCount: 0,
+            hunkBoundaries: [],
+            hunkMapping: [],
+        };
+    }
+    const hunkActive = selectedHunkIndex !== undefined && selectedHunkIndex >= 0;
+    const theme = getTheme(themeName);
+    const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
+    // Always reserve gutter space in combined diff when hunks are focused
+    const gutterWidth = hunkActive ? 1 : 0;
+    const contentWidth = width - lineNumWidth - 5 - gutterWidth;
+    const headerWidth = width - 2;
+    const wrappedRows = wrapDisplayRows(displayRows, contentWidth, wrapMode);
+    const totalRows = wrappedRows.length;
+    const hunkBoundaries = getHunkBoundaries(wrappedRows);
+    const hunkCount = hunkBoundaries.length;
+    const clampedHunkIndex = Math.min(selectedHunkIndex ?? 0, hunkCount - 1);
+    // Build a row→hunkIndex lookup for per-hunk gutter coloring
+    const rowToHunkIndex = new Map();
+    if (hunkActive) {
+        for (let hi = 0; hi < hunkBoundaries.length; hi++) {
+            const b = hunkBoundaries[hi];
+            for (let r = b.startRow; r < b.endRow; r++) {
+                rowToHunkIndex.set(r, hi);
+            }
+        }
+    }
+    const startIdx = scrollOffset;
+    const visibleRows = maxHeight
+        ? wrappedRows.slice(startIdx, startIdx + maxHeight)
+        : wrappedRows.slice(startIdx);
+    const lines = visibleRows.map((row, i) => {
+        const absoluteIdx = startIdx + i;
+        const formatted = formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, wrapMode);
+        if (!hunkActive)
+            return formatted;
+        const hi = rowToHunkIndex.get(absoluteIdx);
+        if (hi === undefined)
+            return ' ' + formatted;
+        const isSelected = hi === clampedHunkIndex;
+        const isStaged = hunkMapping[hi]?.source === 'staged';
+        const color = isStaged ? ANSI_GREEN : ANSI_CYAN;
+        const bold = isSelected ? ANSI_BOLD : '';
+        const gutter = `{escape}${bold}${color}\u258c${ANSI_RESET}{/escape}`;
+        // Highlight the @@ header of the selected hunk with inverse video
+        if (isSelected && row.type === 'diff-hunk') {
+            return gutter + formatted.replace('{escape}', `{escape}${ANSI_INVERSE}`);
+        }
+        return gutter + formatted;
+    });
+    return { content: lines.join('\n'), totalRows, hunkCount, hunkBoundaries, hunkMapping };
 }

package/dist/ui/widgets/ExplorerContent.js

@@ -1,16 +1,13 @@
-import { buildExplorerContentRows, wrapExplorerContentRows, getExplorerContentRowCount, getExplorerContentLineNumWidth, applyMiddleDots, } from '../../utils/explorerDisplayRows.js';
+import { buildExplorerContentRows, wrapExplorerContentRows, getExplorerContentRowCount, getExplorerContentLineNumWidth, } from '../../utils/explorerDisplayRows.js';
 import { truncateAnsi } from '../../utils/ansiTruncate.js';
-import { ansiToBlessed } from '../../utils/ansiToBlessed.js';
-/**
- * Escape blessed tags in content.
- */
-function escapeContent(content) {
-    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
-}
+const ANSI_RESET = '\x1b[0m';
+const ANSI_GRAY = '\x1b[90m';
+const ANSI_CYAN = '\x1b[36m';
+const ANSI_YELLOW = '\x1b[33m';
 /**
  * Format explorer file content as blessed-compatible tagged string.
  */
-export function formatExplorerContent(filePath, content, width, scrollOffset = 0, maxHeight, truncated = false, wrapMode = false, showMiddleDots = false) {
+export function formatExplorerContent(filePath, content, width, scrollOffset = 0, maxHeight, truncated = false, wrapMode = false) {
     if (!filePath) {
         return '{gray-fg}Select a file to view its contents{/gray-fg}';
     }
@@ -36,7 +33,8 @@ export function formatExplorerContent(filePath, content, width, scrollOffset = 0
     const lines = [];
     for (const row of visibleRows) {
         if (row.type === 'truncation') {
-            lines.push(`{yellow-fg}${escapeContent(row.content)}{/yellow-fg}`);
+            // Use {escape} with raw ANSI for consistency
+            lines.push(`{escape}${ANSI_YELLOW}${row.content}${ANSI_RESET}{/escape}`);
             continue;
         }
         // Code row
@@ -52,38 +50,27 @@ export function formatExplorerContent(filePath, content, width, scrollOffset = 0
         // Determine what content to display
         const rawContent = row.content;
         const shouldTruncate = !wrapMode && rawContent.length > contentWidth;
-        // Use highlighted content if available and not a continuation or middle-dots mode
-        const canUseHighlighting = row.highlighted && !isContinuation && !showMiddleDots;
+        // Use highlighted content if available and not a continuation
+        const canUseHighlighting = row.highlighted && !isContinuation;
         let displayContent;
         if (canUseHighlighting && row.highlighted) {
             // Use ANSI-aware truncation to preserve syntax highlighting
-            const truncatedHighlight = shouldTruncate
+            displayContent = shouldTruncate
                 ? truncateAnsi(row.highlighted, contentWidth)
                 : row.highlighted;
-            // Convert ANSI to blessed tags
-            displayContent = ansiToBlessed(truncatedHighlight);
         }
         else {
             // Plain content path
             let plainContent = rawContent;
-            // Apply middle-dots to raw content
-            if (showMiddleDots && !isContinuation) {
-                plainContent = applyMiddleDots(plainContent, true);
-            }
             // Simple truncation for plain content
             if (shouldTruncate) {
                 plainContent = plainContent.slice(0, Math.max(0, contentWidth - 1)) + '...';
             }
-            displayContent = escapeContent(plainContent);
-        }
-        // Format line with line number
-        let line = '';
-        if (isContinuation) {
-            line = `{cyan-fg}${lineNumDisplay}{/cyan-fg} ${displayContent || ' '}`;
-        }
-        else {
-            line = `{gray-fg}${lineNumDisplay}{/gray-fg} ${displayContent || ' '}`;
+            displayContent = plainContent;
         }
+        // Format line with line number using raw ANSI (avoids blessed escaping issues)
+        const lineNumColor = isContinuation ? ANSI_CYAN : ANSI_GRAY;
+        const line = `{escape}${lineNumColor}${lineNumDisplay}${ANSI_RESET} ${displayContent || ' '}{/escape}`;
         lines.push(line);
     }
     return lines.join('\n');