diffstalker 0.2.0 → 0.2.1

package/dist/state/UIState.js

@@ -16,7 +16,6 @@ const DEFAULT_STATE = {
     wrapMode: false,
     autoTabEnabled: false,
     mouseEnabled: true,
-    showMiddleDots: false,
     hideHiddenFiles: true,
     hideGitignored: true,
     splitRatio: 0.4,
@@ -121,9 +120,6 @@ export class UIState extends EventEmitter {
     toggleMouse() {
         this.update({ mouseEnabled: !this._state.mouseEnabled });
     }
-    toggleMiddleDots() {
-        this.update({ showMiddleDots: !this._state.showMiddleDots });
-    }
     toggleHideHiddenFiles() {
         this.update({ hideHiddenFiles: !this._state.hideHiddenFiles });
     }
@@ -179,4 +175,21 @@ export class UIState extends EventEmitter {
             this.setPane(currentPane === 'explorer' ? 'diff' : 'explorer');
         }
     }
+    // Reset repo-specific state when switching repositories
+    resetForNewRepo() {
+        this._state = {
+            ...this._state,
+            selectedIndex: 0,
+            fileListScrollOffset: 0,
+            diffScrollOffset: 0,
+            historySelectedIndex: 0,
+            historyScrollOffset: 0,
+            compareSelectedIndex: 0,
+            compareScrollOffset: 0,
+            explorerSelectedIndex: 0,
+            explorerScrollOffset: 0,
+            explorerFileScrollOffset: 0,
+        };
+        this.emit('change', this._state);
+    }
 }

package/dist/ui/PaneRenderers.js

@@ -0,0 +1,56 @@
+import { formatFileList } from './widgets/FileList.js';
+import { formatHistoryView } from './widgets/HistoryView.js';
+import { formatCompareListView } from './widgets/CompareListView.js';
+import { formatExplorerView } from './widgets/ExplorerView.js';
+import { formatDiff, formatHistoryDiff } from './widgets/DiffView.js';
+import { formatCommitPanel } from './widgets/CommitPanel.js';
+import { formatExplorerContent } from './widgets/ExplorerContent.js';
+/**
+ * Render the top pane content for the current tab.
+ */
+export function renderTopPane(state, files, historyCommits, compareDiff, compareSelection, explorerState, width, topPaneHeight) {
+    if (state.bottomTab === 'history') {
+        return formatHistoryView(historyCommits, state.historySelectedIndex, state.currentPane === 'history', width, state.historyScrollOffset, topPaneHeight);
+    }
+    if (state.bottomTab === 'compare') {
+        const commits = compareDiff?.commits ?? [];
+        const compareFiles = compareDiff?.files ?? [];
+        return formatCompareListView(commits, compareFiles, compareSelection, state.currentPane === 'compare', width, state.compareScrollOffset, topPaneHeight);
+    }
+    if (state.bottomTab === 'explorer') {
+        const displayRows = explorerState?.displayRows ?? [];
+        return formatExplorerView(displayRows, state.explorerSelectedIndex, state.currentPane === 'explorer', width, state.explorerScrollOffset, topPaneHeight, explorerState?.isLoading ?? false, explorerState?.error ?? null);
+    }
+    // Default: diff tab file list
+    return formatFileList(files, state.selectedIndex, state.currentPane === 'files', width, state.fileListScrollOffset, topPaneHeight);
+}
+/**
+ * Render the bottom pane content for the current tab.
+ */
+export function renderBottomPane(state, diff, historyState, compareSelectionState, explorerSelectedFile, commitFlowState, stagedCount, currentTheme, width, bottomPaneHeight) {
+    if (state.bottomTab === 'commit') {
+        const content = formatCommitPanel(commitFlowState, stagedCount, width);
+        return { content, totalRows: 0 };
+    }
+    if (state.bottomTab === 'history') {
+        const selectedCommit = historyState?.selectedCommit ?? null;
+        const commitDiff = historyState?.commitDiff ?? null;
+        const { content, totalRows } = formatHistoryDiff(selectedCommit, commitDiff, width, state.diffScrollOffset, bottomPaneHeight, currentTheme, state.wrapMode);
+        return { content, totalRows };
+    }
+    if (state.bottomTab === 'compare') {
+        const compareDiff = compareSelectionState?.diff ?? null;
+        if (compareDiff) {
+            const { content, totalRows } = formatDiff(compareDiff, width, state.diffScrollOffset, bottomPaneHeight, currentTheme, state.wrapMode);
+            return { content, totalRows };
+        }
+        return { content: '{gray-fg}Select a commit or file to view diff{/gray-fg}', totalRows: 0 };
+    }
+    if (state.bottomTab === 'explorer') {
+        const content = formatExplorerContent(explorerSelectedFile?.path ?? null, explorerSelectedFile?.content ?? null, width, state.explorerFileScrollOffset, bottomPaneHeight, explorerSelectedFile?.truncated ?? false, state.wrapMode);
+        return { content, totalRows: 0 };
+    }
+    // Default: diff tab
+    const { content, totalRows } = formatDiff(diff, width, state.diffScrollOffset, bottomPaneHeight, currentTheme, state.wrapMode);
+    return { content, totalRows };
+}

package/dist/ui/modals/FileFinder.js

@@ -0,0 +1,232 @@
+import blessed from 'neo-blessed';
+const MAX_RESULTS = 15;
+/**
+ * Simple fuzzy match scoring.
+ * Returns -1 if no match, otherwise a score (higher is better).
+ */
+function fuzzyScore(query, target) {
+    const lowerQuery = query.toLowerCase();
+    const lowerTarget = target.toLowerCase();
+    // Must contain all query characters in order
+    let queryIndex = 0;
+    let score = 0;
+    let lastMatchIndex = -1;
+    for (let i = 0; i < lowerTarget.length && queryIndex < lowerQuery.length; i++) {
+        if (lowerTarget[i] === lowerQuery[queryIndex]) {
+            // Bonus for consecutive matches
+            if (lastMatchIndex === i - 1) {
+                score += 10;
+            }
+            // Bonus for matching at start of word
+            if (i === 0 || lowerTarget[i - 1] === '/' || lowerTarget[i - 1] === '.') {
+                score += 5;
+            }
+            score += 1;
+            lastMatchIndex = i;
+            queryIndex++;
+        }
+    }
+    // All query characters must match
+    if (queryIndex < lowerQuery.length) {
+        return -1;
+    }
+    // Bonus for shorter paths (more specific)
+    score += Math.max(0, 50 - target.length);
+    return score;
+}
+/**
+ * Highlight matched characters in path.
+ */
+function highlightMatch(query, path) {
+    if (!query)
+        return path;
+    const lowerQuery = query.toLowerCase();
+    const lowerPath = path.toLowerCase();
+    let result = '';
+    let queryIndex = 0;
+    for (let i = 0; i < path.length; i++) {
+        if (queryIndex < lowerQuery.length && lowerPath[i] === lowerQuery[queryIndex]) {
+            result += `{yellow-fg}${path[i]}{/yellow-fg}`;
+            queryIndex++;
+        }
+        else {
+            result += path[i];
+        }
+    }
+    return result;
+}
+/**
+ * FileFinder modal for fuzzy file search.
+ */
+export class FileFinder {
+    box;
+    textbox;
+    screen;
+    allPaths;
+    results = [];
+    selectedIndex = 0;
+    query = '';
+    onSelect;
+    onCancel;
+    constructor(screen, allPaths, onSelect, onCancel) {
+        this.screen = screen;
+        this.allPaths = allPaths;
+        this.onSelect = onSelect;
+        this.onCancel = onCancel;
+        // Create modal box
+        const width = Math.min(80, screen.width - 10);
+        const height = MAX_RESULTS + 6; // results + input + header + borders + padding
+        this.box = blessed.box({
+            parent: screen,
+            top: 'center',
+            left: 'center',
+            width,
+            height,
+            border: {
+                type: 'line',
+            },
+            style: {
+                border: {
+                    fg: 'cyan',
+                },
+            },
+            tags: true,
+            keys: false, // We'll handle keys ourselves
+        });
+        // Create text input
+        this.textbox = blessed.textarea({
+            parent: this.box,
+            top: 1,
+            left: 1,
+            width: width - 4,
+            height: 1,
+            inputOnFocus: true,
+            style: {
+                fg: 'white',
+                bg: 'default',
+            },
+        });
+        // Setup key handlers
+        this.setupKeyHandlers();
+        // Initial render with all files
+        this.updateResults();
+        this.render();
+    }
+    setupKeyHandlers() {
+        // Handle escape to cancel
+        this.textbox.key(['escape'], () => {
+            this.close();
+            this.onCancel();
+        });
+        // Handle enter to select
+        this.textbox.key(['enter'], () => {
+            if (this.results.length > 0) {
+                const selected = this.results[this.selectedIndex];
+                this.close();
+                this.onSelect(selected.path);
+            }
+        });
+        // Handle up/down for navigation (Ctrl+j/k since j/k are for typing)
+        this.textbox.key(['C-j', 'down'], () => {
+            this.selectedIndex = Math.min(this.results.length - 1, this.selectedIndex + 1);
+            this.render();
+        });
+        this.textbox.key(['C-k', 'up'], () => {
+            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+            this.render();
+        });
+        // Handle tab for next result
+        this.textbox.key(['tab'], () => {
+            this.selectedIndex = (this.selectedIndex + 1) % Math.max(1, this.results.length);
+            this.render();
+        });
+        // Handle shift-tab for previous result
+        this.textbox.key(['S-tab'], () => {
+            this.selectedIndex =
+                (this.selectedIndex - 1 + this.results.length) % Math.max(1, this.results.length);
+            this.render();
+        });
+        // Update results on keypress
+        this.textbox.on('keypress', () => {
+            // Defer to next tick to get updated value
+            setImmediate(() => {
+                const newQuery = this.textbox.getValue() || '';
+                if (newQuery !== this.query) {
+                    this.query = newQuery;
+                    this.selectedIndex = 0;
+                    this.updateResults();
+                    this.render();
+                }
+            });
+        });
+    }
+    updateResults() {
+        if (!this.query) {
+            // Show first N files when no query
+            this.results = this.allPaths.slice(0, MAX_RESULTS).map((path) => ({ path, score: 0 }));
+            return;
+        }
+        // Fuzzy match all paths
+        const scored = [];
+        for (const path of this.allPaths) {
+            const score = fuzzyScore(this.query, path);
+            if (score >= 0) {
+                scored.push({ path, score });
+            }
+        }
+        // Sort by score (descending)
+        scored.sort((a, b) => b.score - a.score);
+        // Take top results
+        this.results = scored.slice(0, MAX_RESULTS);
+    }
+    render() {
+        const lines = [];
+        const width = this.box.width - 4;
+        // Header
+        lines.push('{bold}{cyan-fg}Find File{/cyan-fg}{/bold}');
+        lines.push(''); // Space for input
+        lines.push('');
+        // Results
+        if (this.results.length === 0 && this.query) {
+            lines.push('{gray-fg}No matches{/gray-fg}');
+        }
+        else {
+            for (let i = 0; i < this.results.length; i++) {
+                const result = this.results[i];
+                const isSelected = i === this.selectedIndex;
+                // Truncate path if needed
+                let displayPath = result.path;
+                const maxLen = width - 4;
+                if (displayPath.length > maxLen) {
+                    displayPath = '…' + displayPath.slice(-(maxLen - 1));
+                }
+                // Highlight matched characters
+                const highlighted = highlightMatch(this.query, displayPath);
+                if (isSelected) {
+                    lines.push(`{cyan-fg}{bold}> ${highlighted}{/bold}{/cyan-fg}`);
+                }
+                else {
+                    lines.push(`  ${highlighted}`);
+                }
+            }
+        }
+        // Pad to fill space
+        while (lines.length < MAX_RESULTS + 3) {
+            lines.push('');
+        }
+        // Footer
+        lines.push('{gray-fg}Enter: select | Esc: cancel | Ctrl+j/k or ↑↓: navigate{/gray-fg}');
+        this.box.setContent(lines.join('\n'));
+        this.screen.render();
+    }
+    close() {
+        this.textbox.destroy();
+        this.box.destroy();
+    }
+    /**
+     * Focus the modal input.
+     */
+    focus() {
+        this.textbox.focus();
+    }
+}

package/dist/ui/widgets/CompareListView.js

@@ -1,6 +1,17 @@
 import { formatDate } from '../../utils/formatDate.js';
 import { formatCommitDisplay } from '../../utils/commitFormat.js';
-import { shortenPath } from '../../utils/formatPath.js';
+import { buildFileTree, flattenTree, buildTreePrefix } from '../../utils/fileTree.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_YELLOW = '\x1b[33m';
+const ANSI_GREEN = '\x1b[32m';
+const ANSI_RED = '\x1b[31m';
+const ANSI_BLUE = '\x1b[34m';
+const ANSI_MAGENTA = '\x1b[35m';
+const ANSI_INVERSE = '\x1b[7m';
 /**
  * Build the list of row items for the compare list view.
  */
@@ -15,26 +26,29 @@ export function buildCompareListRows(commits, files, commitsExpanded = true, fil
             });
         }
     }
-    // Files section
+    // Files section with tree view
     if (files.length > 0) {
         if (commits.length > 0) {
             result.push({ type: 'spacer' });
         }
         result.push({ type: 'section-header', sectionType: 'files' });
         if (filesExpanded) {
-            files.forEach((file, i) => {
-                result.push({ type: 'file', fileIndex: i, file });
-            });
+            // Build tree from files
+            const tree = buildFileTree(files);
+            const treeRows = flattenTree(tree);
+            for (const treeRow of treeRows) {
+                if (treeRow.type === 'directory') {
+                    result.push({ type: 'directory', treeRow });
+                }
+                else {
+                    const file = files[treeRow.fileIndex];
+                    result.push({ type: 'file', fileIndex: treeRow.fileIndex, file, treeRow });
+                }
+            }
         }
     }
     return result;
 }
-/**
- * Escape blessed tags in content.
- */
-function escapeContent(content) {
-    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
-}
 /**
  * Format a commit row.
  */
@@ -45,63 +59,81 @@ function formatCommitRow(commit, isSelected, isFocused, width) {
     const baseWidth = 2 + 7 + 4 + dateStr.length + 2;
     const remainingWidth = Math.max(10, width - baseWidth);
     const { displayMessage, displayRefs } = formatCommitDisplay(commit.message, commit.refs, remainingWidth);
-    let line = ' ';
-    line += `{yellow-fg}${commit.shortHash}{/yellow-fg} `;
+    let line = ` ${ANSI_YELLOW}${commit.shortHash}${ANSI_RESET} `;
     if (isHighlighted) {
-        line += `{cyan-fg}{inverse}${escapeContent(displayMessage)}{/inverse}{/cyan-fg}`;
+        line += `${ANSI_CYAN}${ANSI_INVERSE}${displayMessage}${ANSI_RESET}`;
     }
     else {
-        line += escapeContent(displayMessage);
+        line += displayMessage;
     }
-    line += ` {gray-fg}(${dateStr}){/gray-fg}`;
+    line += ` ${ANSI_GRAY}(${dateStr})${ANSI_RESET}`;
     if (displayRefs) {
-        line += ` {green-fg}${escapeContent(displayRefs)}{/green-fg}`;
+        line += ` ${ANSI_GREEN}${displayRefs}${ANSI_RESET}`;
     }
-    return line;
+    return `{escape}${line}{/escape}`;
+}
+/**
+ * Format a directory row in tree view.
+ */
+function formatDirectoryRow(treeRow, width) {
+    const prefix = buildTreePrefix(treeRow);
+    const icon = '▸ '; // Collapsed folder icon (we don't support expanding individual folders yet)
+    // Truncate name if needed
+    const maxNameLen = width - prefix.length - icon.length - 2;
+    let name = treeRow.name;
+    if (name.length > maxNameLen) {
+        name = name.slice(0, maxNameLen - 1) + '…';
+    }
+    const line = `${ANSI_GRAY}${prefix}${ANSI_RESET}${ANSI_BLUE}${icon}${name}${ANSI_RESET}`;
+    return `{escape}${line}{/escape}`;
 }
 /**
- * Format a file row.
+ * Format a file row in tree view.
  */
-function formatFileRow(file, isSelected, isFocused, maxPathLength) {
+function formatFileRow(file, treeRow, isSelected, isFocused, width) {
     const isHighlighted = isSelected && isFocused;
     const isUncommitted = file.isUncommitted ?? false;
+    const prefix = buildTreePrefix(treeRow);
     const statusColors = {
-        added: 'green',
-        modified: 'yellow',
-        deleted: 'red',
-        renamed: 'blue',
+        added: ANSI_GREEN,
+        modified: ANSI_YELLOW,
+        deleted: ANSI_RED,
+        renamed: ANSI_BLUE,
     };
-    const statusChars = {
-        added: 'A',
-        modified: 'M',
-        deleted: 'D',
-        renamed: 'R',
+    // File icon based on status
+    const statusIcons = {
+        added: '+',
+        modified: '●',
+        deleted: '−',
+        renamed: '→',
     };
-    // Account for stats: " (+123 -456)" and possible "*" for uncommitted
-    const statsLength = 5 + String(file.additions).length + String(file.deletions).length;
-    const uncommittedLength = isUncommitted ? 14 : 0;
-    const availableForPath = Math.max(10, maxPathLength - statsLength - uncommittedLength);
-    let line = ' ';
-    if (isUncommitted) {
-        line += '{magenta-fg}{bold}*{/bold}{/magenta-fg}';
-    }
-    const statusColor = isUncommitted ? 'magenta' : statusColors[file.status];
-    line += `{${statusColor}-fg}{bold}${statusChars[file.status]}{/bold}{/${statusColor}-fg} `;
-    const displayPath = shortenPath(file.path, availableForPath);
+    const statusColor = isUncommitted ? ANSI_MAGENTA : statusColors[file.status];
+    const icon = statusIcons[file.status];
+    // Calculate available width for filename
+    const statsStr = `(+${file.additions} -${file.deletions})`;
+    const uncommittedStr = isUncommitted ? ' [uncommitted]' : '';
+    const fixedWidth = prefix.length + 2 + statsStr.length + uncommittedStr.length + 2;
+    const maxNameLen = Math.max(5, width - fixedWidth);
+    let name = treeRow.name;
+    if (name.length > maxNameLen) {
+        name = name.slice(0, maxNameLen - 1) + '…';
+    }
+    let line = `${ANSI_GRAY}${prefix}${ANSI_RESET}`;
+    line += `${statusColor}${icon}${ANSI_RESET} `;
     if (isHighlighted) {
-        line += `{cyan-fg}{inverse}${escapeContent(displayPath)}{/inverse}{/cyan-fg}`;
+        line += `${ANSI_CYAN}${ANSI_INVERSE}${name}${ANSI_RESET}`;
     }
     else if (isUncommitted) {
-        line += `{magenta-fg}${escapeContent(displayPath)}{/magenta-fg}`;
+        line += `${ANSI_MAGENTA}${name}${ANSI_RESET}`;
     }
     else {
-        line += escapeContent(displayPath);
+        line += name;
     }
-    line += ` {gray-fg}({/gray-fg}{green-fg}+${file.additions}{/green-fg} {red-fg}-${file.deletions}{/red-fg}{gray-fg}){/gray-fg}`;
+    line += ` ${ANSI_GRAY}(${ANSI_GREEN}+${file.additions}${ANSI_RESET} ${ANSI_RED}-${file.deletions}${ANSI_GRAY})${ANSI_RESET}`;
     if (isUncommitted) {
-        line += ' {magenta-fg}[uncommitted]{/magenta-fg}';
+        line += ` ${ANSI_MAGENTA}[uncommitted]${ANSI_RESET}`;
     }
-    return line;
+    return `{escape}${line}{/escape}`;
 }
 /**
  * Format the compare list view as blessed-compatible tagged string.
@@ -121,7 +153,7 @@ export function formatCompareListView(commits, files, selectedItem, isFocused, w
             const isCommits = row.sectionType === 'commits';
             const count = isCommits ? commits.length : files.length;
             const label = isCommits ? 'Commits' : 'Files';
-            lines.push(`{cyan-fg}{bold}▼ ${label}{/bold}{/cyan-fg} {gray-fg}(${count}){/gray-fg}`);
+            lines.push(`{escape}${ANSI_CYAN}${ANSI_BOLD}▼ ${label}${ANSI_RESET} ${ANSI_GRAY}(${count})${ANSI_RESET}{/escape}`);
         }
         else if (row.type === 'spacer') {
             lines.push('');
@@ -130,9 +162,12 @@ export function formatCompareListView(commits, files, selectedItem, isFocused, w
             const isSelected = selectedItem?.type === 'commit' && selectedItem.index === row.commitIndex;
             lines.push(formatCommitRow(row.commit, isSelected, isFocused, width));
         }
-        else if (row.type === 'file' && row.file && row.fileIndex !== undefined) {
+        else if (row.type === 'directory' && row.treeRow) {
+            lines.push(formatDirectoryRow(row.treeRow, width));
+        }
+        else if (row.type === 'file' && row.file && row.fileIndex !== undefined && row.treeRow) {
             const isSelected = selectedItem?.type === 'file' && selectedItem.index === row.fileIndex;
-            lines.push(formatFileRow(row.file, isSelected, isFocused, width - 5));
+            lines.push(formatFileRow(row.file, row.treeRow, isSelected, isFocused, width));
         }
     }
     return lines.join('\n');
@@ -141,24 +176,11 @@ export function formatCompareListView(commits, files, selectedItem, isFocused, w
  * Get the total number of rows in the compare list view (for scroll calculation).
  */
 export function getCompareListTotalRows(commits, files, commitsExpanded = true, filesExpanded = true) {
-    let count = 0;
-    if (commits.length > 0) {
-        count += 1; // header
-        if (commitsExpanded)
-            count += commits.length;
-    }
-    if (files.length > 0) {
-        if (commits.length > 0)
-            count += 1; // spacer
-        count += 1; // header
-        if (filesExpanded)
-            count += files.length;
-    }
-    return count;
+    return buildCompareListRows(commits, files, commitsExpanded, filesExpanded).length;
 }
 /**
  * Map a row index to a selection.
- * Returns null if the row is a header or spacer.
+ * Returns null if the row is a header, spacer, or directory.
  */
 export function getCompareSelectionFromRow(rowIndex, commits, files, commitsExpanded = true, filesExpanded = true) {
     const rows = buildCompareListRows(commits, files, commitsExpanded, filesExpanded);

package/dist/ui/widgets/DiffView.js

@@ -1,7 +1,12 @@
 import { getTheme } from '../../themes.js';
 import { buildDiffDisplayRows, buildHistoryDisplayRows, getDisplayRowsLineNumWidth, wrapDisplayRows, } from '../../utils/displayRows.js';
-import { ansiToBlessed } from '../../utils/ansiToBlessed.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_YELLOW = '\x1b[33m';
 /**
  * Truncate string to fit within maxWidth, adding ellipsis if needed.
  */
@@ -44,7 +49,6 @@ 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 single display row as blessed-compatible tagged string.
  */
@@ -58,10 +62,10 @@ function formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, w
                 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 `{escape}${ANSI_BOLD}${ANSI_CYAN}\u2500\u2500 ${path} \u2500\u2500${ANSI_RESET}{/escape}`;
                 }
             }
-            return `{gray-fg}${escapeContent(truncate(content, headerWidth))}{/gray-fg}`;
+            return `{escape}${ANSI_GRAY}${truncate(content, headerWidth)}${ANSI_RESET}{/escape}`;
         }
         case 'diff-hunk': {
             const match = row.content.match(/^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/);
@@ -78,9 +82,9 @@ function formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, w
                 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 `{escape}${ANSI_CYAN}${rangeText}${ANSI_GRAY}${truncatedContext}${ANSI_RESET}{/escape}`;
             }
-            return `{cyan-fg}${escapeContent(truncate(row.content, headerWidth))}{/cyan-fg}`;
+            return `{escape}${ANSI_CYAN}${truncate(row.content, headerWidth)}${ANSI_RESET}{/escape}`;
         }
         case 'diff-add': {
             const isCont = row.isContinuation;
@@ -212,23 +216,21 @@ function formatDisplayRow(row, lineNumWidth, contentWidth, headerWidth, theme, w
             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)
             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 '';
     }