diffstalker 0.2.1 → 0.2.2

package/dist/ui/widgets/DiffView.js

@@ -1,12 +1,14 @@
 import { getTheme } from '../../themes.js';
-import { buildDiffDisplayRows, buildHistoryDisplayRows, getDisplayRowsLineNumWidth, wrapDisplayRows, } from '../../utils/displayRows.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.
  */
@@ -49,177 +51,122 @@ function ansiFg(hex) {
     const b = parseInt(hex.slice(5, 7), 16);
     return `\x1b[38;2;${r};${g};${b}m`;
 }
+/**
+ * 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 `{escape}${ANSI_BOLD}${ANSI_CYAN}\u2500\u2500 ${path} \u2500\u2500${ANSI_RESET}{/escape}`;
-                }
-            }
-            return `{escape}${ANSI_GRAY}${truncate(content, headerWidth)}${ANSI_RESET}{/escape}`;
-        }
-        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 `{escape}${ANSI_CYAN}${rangeText}${ANSI_GRAY}${truncatedContext}${ANSI_RESET}{/escape}`;
-            }
-            return `{escape}${ANSI_CYAN}${truncate(row.content, headerWidth)}${ANSI_RESET}{/escape}`;
-        }
-        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 {escape} for raw ANSI output (consistent with add/del lines)
-            // This avoids blessed's tag escaping issues with braces
-            const prefixAnsi = `\x1b[90m${prefix}\x1b[0m`; // gray prefix
-            // Use syntax highlighting if available (not for continuations)
+            const prefixAnsi = `\x1b[90m${prefix}\x1b[0m`;
             if (row.highlighted && !isCont) {
                 const content = wrapMode ? row.highlighted : truncateAnsi(row.highlighted, contentWidth);
                 return `{escape}${prefixAnsi}${content}${ANSI_RESET}{/escape}`;
@@ -239,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.
@@ -265,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);
@@ -277,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/ExplorerView.js

@@ -80,6 +80,55 @@ function getStatusColor(status) {
             return ANSI_RESET;
     }
 }
+/**
+ * Format a single explorer row as a raw ANSI string.
+ */
+function formatExplorerRow(row, isSelected, isFocused, width) {
+    const isHighlighted = isSelected && isFocused;
+    const node = row.node;
+    const prefix = buildTreePrefix(row);
+    let icon = '';
+    if (node.isDirectory) {
+        icon = node.expanded ? '▾ ' : '▸ ';
+    }
+    const statusMarker = getStatusMarker(node.gitStatus);
+    const statusColor = getStatusColor(node.gitStatus);
+    const statusDisplay = statusMarker ? `${statusColor}${statusMarker}${ANSI_RESET} ` : '';
+    const dirStatusDisplay = node.isDirectory && node.hasChangedChildren ? `${ANSI_YELLOW}●${ANSI_RESET} ` : '';
+    const prefixLen = prefix.length +
+        icon.length +
+        (statusMarker ? 2 : 0) +
+        (node.hasChangedChildren && node.isDirectory ? 2 : 0);
+    const maxNameLen = Math.max(5, width - prefixLen - 2);
+    let displayName = node.isDirectory ? `${node.name}/` : node.name;
+    if (displayName.length > maxNameLen) {
+        displayName = displayName.slice(0, maxNameLen - 1) + '…';
+    }
+    let line = `${ANSI_GRAY}${prefix}${ANSI_RESET}`;
+    if (node.isDirectory) {
+        line += `${ANSI_BLUE}${icon}${ANSI_RESET}`;
+        line += dirStatusDisplay;
+        if (isHighlighted) {
+            line += `${ANSI_CYAN}${ANSI_BOLD}${ANSI_INVERSE}${displayName}${ANSI_RESET}`;
+        }
+        else {
+            line += `${ANSI_BLUE}${displayName}${ANSI_RESET}`;
+        }
+    }
+    else {
+        line += statusDisplay;
+        if (isHighlighted) {
+            line += `${ANSI_CYAN}${ANSI_BOLD}${ANSI_INVERSE}${displayName}${ANSI_RESET}`;
+        }
+        else if (node.gitStatus) {
+            line += `${statusColor}${displayName}${ANSI_RESET}`;
+        }
+        else {
+            line += displayName;
+        }
+    }
+    return line;
+}
 /**
  * Format the explorer tree view as blessed-compatible tagged string.
  */
@@ -93,66 +142,13 @@ export function formatExplorerView(displayRows, selectedIndex, isFocused, width,
     if (displayRows.length === 0) {
         return '{gray-fg}(empty directory){/gray-fg}';
     }
-    // Apply scroll offset and max height
     const visibleRows = maxHeight
         ? displayRows.slice(scrollOffset, scrollOffset + maxHeight)
         : displayRows.slice(scrollOffset);
     const lines = [];
     for (let i = 0; i < visibleRows.length; i++) {
-        const row = visibleRows[i];
         const actualIndex = scrollOffset + i;
-        const isSelected = actualIndex === selectedIndex;
-        const isHighlighted = isSelected && isFocused;
-        const node = row.node;
-        // Build tree prefix
-        const prefix = buildTreePrefix(row);
-        // Directory icon (▸ collapsed, ▾ expanded)
-        let icon = '';
-        if (node.isDirectory) {
-            icon = node.expanded ? '▾ ' : '▸ ';
-        }
-        // Git status indicator
-        const statusMarker = getStatusMarker(node.gitStatus);
-        const statusColor = getStatusColor(node.gitStatus);
-        const statusDisplay = statusMarker ? `${statusColor}${statusMarker}${ANSI_RESET} ` : '';
-        // Directory status indicator (dot if has changed children)
-        const dirStatusDisplay = node.isDirectory && node.hasChangedChildren ? `${ANSI_YELLOW}●${ANSI_RESET} ` : '';
-        // Calculate available width for name
-        const prefixLen = prefix.length +
-            icon.length +
-            (statusMarker ? 2 : 0) +
-            (node.hasChangedChildren && node.isDirectory ? 2 : 0);
-        const maxNameLen = Math.max(5, width - prefixLen - 2);
-        // Display name (with trailing / for directories)
-        let displayName = node.isDirectory ? `${node.name}/` : node.name;
-        if (displayName.length > maxNameLen) {
-            displayName = displayName.slice(0, maxNameLen - 1) + '…';
-        }
-        // Build the line
-        let line = `${ANSI_GRAY}${prefix}${ANSI_RESET}`;
-        if (node.isDirectory) {
-            line += `${ANSI_BLUE}${icon}${ANSI_RESET}`;
-            line += dirStatusDisplay;
-            if (isHighlighted) {
-                line += `${ANSI_CYAN}${ANSI_BOLD}${ANSI_INVERSE}${displayName}${ANSI_RESET}`;
-            }
-            else {
-                line += `${ANSI_BLUE}${displayName}${ANSI_RESET}`;
-            }
-        }
-        else {
-            // File
-            line += statusDisplay;
-            if (isHighlighted) {
-                line += `${ANSI_CYAN}${ANSI_BOLD}${ANSI_INVERSE}${displayName}${ANSI_RESET}`;
-            }
-            else if (node.gitStatus) {
-                line += `${statusColor}${displayName}${ANSI_RESET}`;
-            }
-            else {
-                line += displayName;
-            }
-        }
+        const line = formatExplorerRow(visibleRows[i], actualIndex === selectedIndex, isFocused, width);
         lines.push(`{escape}${line}{/escape}`);
     }
     return lines.join('\n');