diffstalker 0.1.7 → 0.2.1

package/dist/ui/widgets/CompareListView.js

@@ -0,0 +1,238 @@
+import { formatDate } from '../../utils/formatDate.js';
+import { formatCommitDisplay } from '../../utils/commitFormat.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.
+ */
+export function buildCompareListRows(commits, files, commitsExpanded = true, filesExpanded = true) {
+    const result = [];
+    // Commits section
+    if (commits.length > 0) {
+        result.push({ type: 'section-header', sectionType: 'commits' });
+        if (commitsExpanded) {
+            commits.forEach((commit, i) => {
+                result.push({ type: 'commit', commitIndex: i, commit });
+            });
+        }
+    }
+    // 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) {
+            // 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;
+}
+/**
+ * Format a commit row.
+ */
+function formatCommitRow(commit, isSelected, isFocused, width) {
+    const isHighlighted = isSelected && isFocused;
+    const dateStr = formatDate(commit.date);
+    // Fixed parts: indent(2) + hash(7) + spaces(4) + date + parens(2)
+    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 = ` ${ANSI_YELLOW}${commit.shortHash}${ANSI_RESET} `;
+    if (isHighlighted) {
+        line += `${ANSI_CYAN}${ANSI_INVERSE}${displayMessage}${ANSI_RESET}`;
+    }
+    else {
+        line += displayMessage;
+    }
+    line += ` ${ANSI_GRAY}(${dateStr})${ANSI_RESET}`;
+    if (displayRefs) {
+        line += ` ${ANSI_GREEN}${displayRefs}${ANSI_RESET}`;
+    }
+    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 in tree view.
+ */
+function formatFileRow(file, treeRow, isSelected, isFocused, width) {
+    const isHighlighted = isSelected && isFocused;
+    const isUncommitted = file.isUncommitted ?? false;
+    const prefix = buildTreePrefix(treeRow);
+    const statusColors = {
+        added: ANSI_GREEN,
+        modified: ANSI_YELLOW,
+        deleted: ANSI_RED,
+        renamed: ANSI_BLUE,
+    };
+    // File icon based on status
+    const statusIcons = {
+        added: '+',
+        modified: '●',
+        deleted: '−',
+        renamed: '→',
+    };
+    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 += `${ANSI_CYAN}${ANSI_INVERSE}${name}${ANSI_RESET}`;
+    }
+    else if (isUncommitted) {
+        line += `${ANSI_MAGENTA}${name}${ANSI_RESET}`;
+    }
+    else {
+        line += name;
+    }
+    line += ` ${ANSI_GRAY}(${ANSI_GREEN}+${file.additions}${ANSI_RESET} ${ANSI_RED}-${file.deletions}${ANSI_GRAY})${ANSI_RESET}`;
+    if (isUncommitted) {
+        line += ` ${ANSI_MAGENTA}[uncommitted]${ANSI_RESET}`;
+    }
+    return `{escape}${line}{/escape}`;
+}
+/**
+ * Format the compare list view as blessed-compatible tagged string.
+ */
+export function formatCompareListView(commits, files, selectedItem, isFocused, width, scrollOffset = 0, maxHeight) {
+    if (commits.length === 0 && files.length === 0) {
+        return '{gray-fg}No changes compared to base branch{/gray-fg}';
+    }
+    const rows = buildCompareListRows(commits, files);
+    // Apply scroll offset and max height
+    const visibleRows = maxHeight
+        ? rows.slice(scrollOffset, scrollOffset + maxHeight)
+        : rows.slice(scrollOffset);
+    const lines = [];
+    for (const row of visibleRows) {
+        if (row.type === 'section-header') {
+            const isCommits = row.sectionType === 'commits';
+            const count = isCommits ? commits.length : files.length;
+            const label = isCommits ? 'Commits' : 'Files';
+            lines.push(`{escape}${ANSI_CYAN}${ANSI_BOLD}▼ ${label}${ANSI_RESET} ${ANSI_GRAY}(${count})${ANSI_RESET}{/escape}`);
+        }
+        else if (row.type === 'spacer') {
+            lines.push('');
+        }
+        else if (row.type === 'commit' && row.commit && row.commitIndex !== undefined) {
+            const isSelected = selectedItem?.type === 'commit' && selectedItem.index === row.commitIndex;
+            lines.push(formatCommitRow(row.commit, isSelected, isFocused, width));
+        }
+        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, row.treeRow, isSelected, isFocused, width));
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Get the total number of rows in the compare list view (for scroll calculation).
+ */
+export function getCompareListTotalRows(commits, files, commitsExpanded = true, filesExpanded = true) {
+    return buildCompareListRows(commits, files, commitsExpanded, filesExpanded).length;
+}
+/**
+ * Map a row index to a selection.
+ * 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);
+    const row = rows[rowIndex];
+    if (!row)
+        return null;
+    if (row.type === 'commit' && row.commitIndex !== undefined) {
+        return { type: 'commit', index: row.commitIndex };
+    }
+    if (row.type === 'file' && row.fileIndex !== undefined) {
+        return { type: 'file', index: row.fileIndex };
+    }
+    return null;
+}
+/**
+ * Find the row index for a given selection.
+ */
+export function getRowFromCompareSelection(selection, commits, files, commitsExpanded = true, filesExpanded = true) {
+    const rows = buildCompareListRows(commits, files, commitsExpanded, filesExpanded);
+    for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        if (selection.type === 'commit' &&
+            row.type === 'commit' &&
+            row.commitIndex === selection.index) {
+            return i;
+        }
+        if (selection.type === 'file' && row.type === 'file' && row.fileIndex === selection.index) {
+            return i;
+        }
+    }
+    return 0;
+}
+/**
+ * Navigate to next selectable item.
+ */
+export function getNextCompareSelection(current, commits, files, direction) {
+    const rows = buildCompareListRows(commits, files);
+    // Find current row index
+    let currentRowIndex = 0;
+    if (current) {
+        currentRowIndex = getRowFromCompareSelection(current, commits, files);
+    }
+    // Find next selectable row
+    const delta = direction === 'down' ? 1 : -1;
+    let nextRowIndex = currentRowIndex + delta;
+    while (nextRowIndex >= 0 && nextRowIndex < rows.length) {
+        const selection = getCompareSelectionFromRow(nextRowIndex, commits, files);
+        if (selection) {
+            return selection;
+        }
+        nextRowIndex += delta;
+    }
+    // Stay at current if no valid next selection
+    return current;
+}

package/dist/ui/widgets/DiffView.js

@@ -0,0 +1,281 @@
+import { getTheme } from '../../themes.js';
+import { buildDiffDisplayRows, buildHistoryDisplayRows, getDisplayRowsLineNumWidth, wrapDisplayRows, } 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_YELLOW = '\x1b[33m';
+/**
+ * Truncate string to fit within maxWidth, adding ellipsis if needed.
+ */
+function truncate(str, maxWidth) {
+    if (maxWidth <= 0 || str.length <= maxWidth)
+        return str;
+    if (maxWidth <= 1)
+        return '\u2026';
+    return str.slice(0, maxWidth - 1) + '\u2026';
+}
+/**
+ * Format line number with padding.
+ */
+function formatLineNum(lineNum, width) {
+    if (lineNum === undefined)
+        return ' '.repeat(width);
+    return String(lineNum).padStart(width, ' ');
+}
+/**
+ * Escape blessed tags in content.
+ */
+function escapeContent(content) {
+    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
+}
+/**
+ * Build raw ANSI escape sequence for 24-bit RGB background.
+ */
+function ansiBg(hex) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `\x1b[48;2;${r};${g};${b}m`;
+}
+/**
+ * Build raw ANSI escape sequence for 24-bit RGB foreground.
+ */
+function ansiFg(hex) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `\x1b[38;2;${r};${g};${b}m`;
+}
+/**
+ * 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-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)
+            if (row.highlighted && !isCont) {
+                const content = wrapMode ? row.highlighted : truncateAnsi(row.highlighted, contentWidth);
+                return `{escape}${prefixAnsi}${content}${ANSI_RESET}{/escape}`;
+            }
+            const content = wrapMode ? rawContent : truncate(rawContent, contentWidth);
+            return `{escape}${prefixAnsi}${content}${ANSI_RESET}{/escape}`;
+        }
+        case 'commit-header':
+            return `{escape}${ANSI_YELLOW}${truncate(row.content, headerWidth)}${ANSI_RESET}{/escape}`;
+        case 'commit-message':
+            return `{escape}${truncate(row.content, headerWidth)}${ANSI_RESET}{/escape}`;
+        case 'spacer':
+            return '';
+    }
+}
+/**
+ * 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) {
+    const displayRows = buildDiffDisplayRows(diff);
+    if (displayRows.length === 0) {
+        return { content: '{gray-fg}No diff to display{/gray-fg}', totalRows: 0 };
+    }
+    const theme = getTheme(themeName);
+    const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
+    const contentWidth = width - lineNumWidth - 5; // line num + space + symbol + space + padding
+    const headerWidth = width - 2;
+    // Apply wrapping if enabled
+    const wrappedRows = wrapDisplayRows(displayRows, contentWidth, wrapMode);
+    const totalRows = wrappedRows.length;
+    // Apply scroll offset and max height
+    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 };
+}
+/**
+ * Format history diff (commit metadata + diff) as blessed-compatible tagged string.
+ * Returns both the content and total row count for scroll calculations.
+ */
+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 };
+    }
+    const theme = getTheme(themeName);
+    const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
+    const contentWidth = width - lineNumWidth - 5;
+    const headerWidth = width - 2;
+    const wrappedRows = wrapDisplayRows(displayRows, contentWidth, wrapMode);
+    const totalRows = wrappedRows.length;
+    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 };
+}

package/dist/ui/widgets/ExplorerContent.js

@@ -0,0 +1,89 @@
+import { buildExplorerContentRows, wrapExplorerContentRows, getExplorerContentRowCount, getExplorerContentLineNumWidth, } from '../../utils/explorerDisplayRows.js';
+import { truncateAnsi } from '../../utils/ansiTruncate.js';
+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) {
+    if (!filePath) {
+        return '{gray-fg}Select a file to view its contents{/gray-fg}';
+    }
+    if (!content) {
+        return '{gray-fg}Loading...{/gray-fg}';
+    }
+    // Build base rows with syntax highlighting
+    const baseRows = buildExplorerContentRows(content, filePath, truncated);
+    if (baseRows.length === 0) {
+        return '{gray-fg}(empty file){/gray-fg}';
+    }
+    // Calculate line number width
+    const lineNumWidth = getExplorerContentLineNumWidth(baseRows);
+    // Calculate content width for wrapping
+    // Layout: lineNum + space(1) + content
+    const contentWidth = width - lineNumWidth - 2;
+    // Apply wrapping if enabled
+    const displayRows = wrapExplorerContentRows(baseRows, contentWidth, wrapMode);
+    // Apply scroll offset and max height
+    const visibleRows = maxHeight
+        ? displayRows.slice(scrollOffset, scrollOffset + maxHeight)
+        : displayRows.slice(scrollOffset);
+    const lines = [];
+    for (const row of visibleRows) {
+        if (row.type === 'truncation') {
+            // Use {escape} with raw ANSI for consistency
+            lines.push(`{escape}${ANSI_YELLOW}${row.content}${ANSI_RESET}{/escape}`);
+            continue;
+        }
+        // Code row
+        const isContinuation = row.isContinuation ?? false;
+        // Line number display
+        let lineNumDisplay;
+        if (isContinuation) {
+            lineNumDisplay = '>>'.padStart(lineNumWidth, ' ');
+        }
+        else {
+            lineNumDisplay = String(row.lineNum).padStart(lineNumWidth, ' ');
+        }
+        // Determine what content to display
+        const rawContent = row.content;
+        const shouldTruncate = !wrapMode && rawContent.length > contentWidth;
+        // 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
+            displayContent = shouldTruncate
+                ? truncateAnsi(row.highlighted, contentWidth)
+                : row.highlighted;
+        }
+        else {
+            // Plain content path
+            let plainContent = rawContent;
+            // Simple truncation for plain content
+            if (shouldTruncate) {
+                plainContent = plainContent.slice(0, Math.max(0, contentWidth - 1)) + '...';
+            }
+            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');
+}
+/**
+ * Get total rows for scroll calculations.
+ * Accounts for wrap mode when calculating.
+ */
+export function getExplorerContentTotalRows(content, filePath, truncated, width, wrapMode) {
+    if (!content)
+        return 0;
+    const rows = buildExplorerContentRows(content, filePath, truncated);
+    const lineNumWidth = getExplorerContentLineNumWidth(rows);
+    const contentWidth = width - lineNumWidth - 2;
+    return getExplorerContentRowCount(rows, contentWidth, wrapMode);
+}