diffstalker 0.2.0 → 0.2.2

package/dist/ui/widgets/ExplorerView.js

@@ -1,59 +1,164 @@
+// ANSI escape codes
+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';
 /**
- * Escape blessed tags in content.
+ * Build tree prefix characters (│ ├ └).
  */
-function escapeContent(content) {
-    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
+function buildTreePrefix(row) {
+    let prefix = '';
+    // Add vertical lines for parent levels
+    for (let i = 0; i < row.depth; i++) {
+        if (row.parentIsLast[i]) {
+            prefix += '  '; // Parent was last, no line needed
+        }
+        else {
+            prefix += '│ '; // Parent has siblings below, draw line
+        }
+    }
+    // Add connector for this item
+    if (row.depth > 0 || row.parentIsLast.length === 0) {
+        if (row.isLast) {
+            prefix += '└ ';
+        }
+        else {
+            prefix += '├ ';
+        }
+    }
+    return prefix;
 }
 /**
- * Format the explorer directory listing as blessed-compatible tagged string.
+ * Get status marker for git status.
  */
-export function formatExplorerView(items, selectedIndex, isFocused, width, scrollOffset = 0, maxHeight, isLoading = false, error = null) {
+function getStatusMarker(status) {
+    if (!status)
+        return '';
+    switch (status) {
+        case 'modified':
+            return 'M';
+        case 'added':
+            return 'A';
+        case 'deleted':
+            return 'D';
+        case 'untracked':
+            return '?';
+        case 'renamed':
+            return 'R';
+        case 'copied':
+            return 'C';
+        default:
+            return '';
+    }
+}
+/**
+ * Get color for git status.
+ */
+function getStatusColor(status) {
+    if (!status)
+        return ANSI_RESET;
+    switch (status) {
+        case 'modified':
+            return ANSI_YELLOW;
+        case 'added':
+            return ANSI_GREEN;
+        case 'deleted':
+            return ANSI_RED;
+        case 'untracked':
+            return ANSI_GRAY;
+        case 'renamed':
+            return ANSI_BLUE;
+        case 'copied':
+            return ANSI_MAGENTA;
+        default:
+            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.
+ */
+export function formatExplorerView(displayRows, selectedIndex, isFocused, width, scrollOffset = 0, maxHeight, isLoading = false, error = null) {
     if (error) {
         return `{red-fg}Error: ${escapeContent(error)}{/red-fg}`;
     }
     if (isLoading) {
         return '{gray-fg}Loading...{/gray-fg}';
     }
-    if (items.length === 0) {
+    if (displayRows.length === 0) {
         return '{gray-fg}(empty directory){/gray-fg}';
     }
-    // Apply scroll offset and max height
-    const visibleItems = maxHeight
-        ? items.slice(scrollOffset, scrollOffset + maxHeight)
-        : items.slice(scrollOffset);
-    // Calculate max name width for alignment
-    const maxNameWidth = Math.min(Math.max(...items.map((item) => item.name.length + (item.isDirectory ? 1 : 0))), width - 10);
+    const visibleRows = maxHeight
+        ? displayRows.slice(scrollOffset, scrollOffset + maxHeight)
+        : displayRows.slice(scrollOffset);
     const lines = [];
-    for (let i = 0; i < visibleItems.length; i++) {
-        const item = visibleItems[i];
+    for (let i = 0; i < visibleRows.length; i++) {
         const actualIndex = scrollOffset + i;
-        const isSelected = actualIndex === selectedIndex;
-        const isHighlighted = isSelected && isFocused;
-        const displayName = item.isDirectory ? `${item.name}/` : item.name;
-        const paddedName = displayName.padEnd(maxNameWidth + 1);
-        let line = '';
-        if (isHighlighted) {
-            // Selected and focused - highlight with cyan
-            if (item.isDirectory) {
-                line = `{cyan-fg}{bold}{inverse}${escapeContent(paddedName)}{/inverse}{/bold}{/cyan-fg}`;
-            }
-            else {
-                line = `{cyan-fg}{bold}{inverse}${escapeContent(paddedName)}{/inverse}{/bold}{/cyan-fg}`;
-            }
-        }
-        else {
-            // Not selected or not focused
-            if (item.isDirectory) {
-                line = `{blue-fg}${escapeContent(paddedName)}{/blue-fg}`;
-            }
-            else {
-                line = escapeContent(paddedName);
-            }
-        }
-        lines.push(line);
+        const line = formatExplorerRow(visibleRows[i], actualIndex === selectedIndex, isFocused, width);
+        lines.push(`{escape}${line}{/escape}`);
     }
     return lines.join('\n');
 }
+/**
+ * Escape blessed tags in content.
+ */
+function escapeContent(content) {
+    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
+}
 /**
  * Build breadcrumb segments from a path.
  * Returns segments like ["src", "components"] for "src/components"
@@ -84,12 +189,12 @@ export function formatBreadcrumbs(currentPath, repoName) {
 /**
  * Get total rows in explorer for scroll calculations.
  */
-export function getExplorerTotalRows(items) {
-    return items.length;
+export function getExplorerTotalRows(displayRows) {
+    return displayRows.length;
 }
 /**
- * Get item at index.
+ * Get row at index.
  */
-export function getExplorerItemAtIndex(items, index) {
-    return items[index] ?? null;
+export function getExplorerRowAtIndex(displayRows, index) {
+    return displayRows[index] ?? null;
 }

package/dist/ui/widgets/FileList.js

@@ -1,53 +1,5 @@
 import { categorizeFiles } from '../../utils/fileCategories.js';
-import { shortenPath } from '../../utils/formatPath.js';
-function getStatusChar(status) {
-    switch (status) {
-        case 'modified':
-            return 'M';
-        case 'added':
-            return 'A';
-        case 'deleted':
-            return 'D';
-        case 'untracked':
-            return '?';
-        case 'renamed':
-            return 'R';
-        case 'copied':
-            return 'C';
-        default:
-            return ' ';
-    }
-}
-function getStatusColor(status) {
-    switch (status) {
-        case 'modified':
-            return 'yellow';
-        case 'added':
-            return 'green';
-        case 'deleted':
-            return 'red';
-        case 'untracked':
-            return 'gray';
-        case 'renamed':
-            return 'blue';
-        case 'copied':
-            return 'cyan';
-        default:
-            return 'white';
-    }
-}
-function formatStats(insertions, deletions) {
-    if (insertions === undefined && deletions === undefined)
-        return '';
-    const parts = [];
-    if (insertions !== undefined && insertions > 0) {
-        parts.push(`{green-fg}+${insertions}{/green-fg}`);
-    }
-    if (deletions !== undefined && deletions > 0) {
-        parts.push(`{red-fg}-${deletions}{/red-fg}`);
-    }
-    return parts.length > 0 ? ' ' + parts.join(' ') : '';
-}
+import { getStatusChar, getStatusColor, formatStats, formatSelectionIndicator, formatFilePath, formatOriginalPath, } from './fileRowFormatters.js';
 /**
  * Build the list of row items for the file list.
  */
@@ -81,10 +33,52 @@ export function buildFileListRows(files) {
     }
     return rows;
 }
+/**
+ * Format a single file row as blessed-compatible tagged string.
+ */
+/**
+ * Format hunk count indicator for a file, e.g. "@2/3".
+ * Returns empty string if not applicable.
+ */
+function formatHunkIndicator(file, hunkCounts) {
+    if (!hunkCounts)
+        return '';
+    const stagedHunks = hunkCounts.staged.get(file.path) ?? 0;
+    const unstagedHunks = hunkCounts.unstaged.get(file.path) ?? 0;
+    const total = stagedHunks + unstagedHunks;
+    if (total === 0)
+        return '';
+    const thisCount = file.staged ? stagedHunks : unstagedHunks;
+    // Show just @total when all hunks are in this state, otherwise @n/total
+    if (thisCount === total)
+        return ` {cyan-fg}@${total}{/cyan-fg}`;
+    return ` {cyan-fg}@${thisCount}/${total}{/cyan-fg}`;
+}
+function formatFileRow(file, fileIndex, selectedIndex, isFocused, maxPathLength, hunkCounts) {
+    const isSelected = fileIndex === selectedIndex;
+    const statusChar = getStatusChar(file.status);
+    const statusColor = getStatusColor(file.status);
+    const actionButton = file.staged ? '[-]' : '[+]';
+    const buttonColor = file.staged ? 'red' : 'green';
+    // Calculate available space for path
+    const stats = formatStats(file.insertions, file.deletions);
+    const hunkIndicator = formatHunkIndicator(file, hunkCounts);
+    const statsLength = stats.replace(/\{[^}]+\}/g, '').length;
+    const hunkLength = hunkIndicator.replace(/\{[^}]+\}/g, '').length;
+    const availableForPath = maxPathLength - statsLength - hunkLength;
+    let line = formatSelectionIndicator(isSelected, isFocused);
+    line += `{${buttonColor}-fg}${actionButton}{/${buttonColor}-fg} `;
+    line += `{${statusColor}-fg}${statusChar}{/${statusColor}-fg} `;
+    line += formatFilePath(file.path, isSelected, isFocused, availableForPath);
+    line += formatOriginalPath(file.originalPath);
+    line += stats;
+    line += hunkIndicator;
+    return line;
+}
 /**
  * Format the file list as blessed-compatible tagged string.
  */
-export function formatFileList(files, selectedIndex, isFocused, width, scrollOffset = 0, maxHeight) {
+export function formatFileList(files, selectedIndex, isFocused, width, scrollOffset = 0, maxHeight, hunkCounts) {
     if (files.length === 0) {
         return '{gray-fg} No changes{/gray-fg}';
     }
@@ -95,53 +89,26 @@ export function formatFileList(files, selectedIndex, isFocused, width, scrollOff
         ? rows.slice(scrollOffset, scrollOffset + maxHeight)
         : rows.slice(scrollOffset);
     const lines = [];
+    let seenFirstHeader = false;
     for (const row of visibleRows) {
-        if (row.type === 'header') {
-            lines.push(`{bold}{${row.headerColor}-fg}${row.content}{/${row.headerColor}-fg}{/bold}`);
-        }
-        else if (row.type === 'spacer') {
-            lines.push('');
-        }
-        else if (row.type === 'file' && row.file && row.fileIndex !== undefined) {
-            const file = row.file;
-            const isSelected = row.fileIndex === selectedIndex;
-            const isHighlighted = isSelected && isFocused;
-            const statusChar = getStatusChar(file.status);
-            const statusColor = getStatusColor(file.status);
-            const actionButton = file.staged ? '[-]' : '[+]';
-            const buttonColor = file.staged ? 'red' : 'green';
-            // Calculate available space for path
-            const stats = formatStats(file.insertions, file.deletions);
-            const statsLength = stats.replace(/\{[^}]+\}/g, '').length;
-            const availableForPath = maxPathLength - statsLength;
-            const displayPath = shortenPath(file.path, availableForPath);
-            // Build the line
-            let line = '';
-            // Selection indicator
-            if (isHighlighted) {
-                line += '{cyan-fg}{bold}\u25b8 {/bold}{/cyan-fg}';
-            }
-            else {
-                line += '  ';
-            }
-            // Action button
-            line += `{${buttonColor}-fg}${actionButton}{/${buttonColor}-fg} `;
-            // Status character
-            line += `{${statusColor}-fg}${statusChar}{/${statusColor}-fg} `;
-            // File path (with highlighting)
-            if (isHighlighted) {
-                line += `{cyan-fg}{inverse}${displayPath}{/inverse}{/cyan-fg}`;
-            }
-            else {
-                line += displayPath;
-            }
-            // Original path for renames
-            if (file.originalPath) {
-                line += ` {gray-fg}\u2190 ${shortenPath(file.originalPath, 30)}{/gray-fg}`;
+        switch (row.type) {
+            case 'header': {
+                let headerLine = `{bold}{${row.headerColor}-fg}${row.content}{/${row.headerColor}-fg}{/bold}`;
+                if (!seenFirstHeader) {
+                    seenFirstHeader = true;
+                    headerLine += ' {gray-fg}(h:flat){/gray-fg}';
+                }
+                lines.push(headerLine);
+                break;
             }
-            // Stats
-            line += stats;
-            lines.push(line);
+            case 'spacer':
+                lines.push('');
+                break;
+            case 'file':
+                if (row.file && row.fileIndex !== undefined) {
+                    lines.push(formatFileRow(row.file, row.fileIndex, selectedIndex, isFocused, maxPathLength, hunkCounts ?? null));
+                }
+                break;
         }
     }
     return lines.join('\n');

package/dist/ui/widgets/FlatFileList.js

@@ -0,0 +1,65 @@
+import { getStatusChar, getStatusColor, formatStats, formatSelectionIndicator, formatFilePath, formatOriginalPath, } from './fileRowFormatters.js';
+function getStagingButton(state) {
+    switch (state) {
+        case 'unstaged':
+            return { text: '[+]', color: 'green' };
+        case 'staged':
+            return { text: '[-]', color: 'red' };
+        case 'partial':
+            return { text: '[~]', color: 'yellow' };
+    }
+}
+function formatFlatHunkIndicator(entry) {
+    if (entry.totalHunks === 0)
+        return '';
+    // Always show staged/total in flat view
+    return ` {cyan-fg}@${entry.stagedHunks}/${entry.totalHunks}{/cyan-fg}`;
+}
+function formatFlatFileRow(entry, index, selectedIndex, isFocused, maxPathLength) {
+    const isSelected = index === selectedIndex;
+    const statusChar = getStatusChar(entry.status);
+    const statusColor = getStatusColor(entry.status);
+    const button = getStagingButton(entry.stagingState);
+    const stats = formatStats(entry.insertions, entry.deletions);
+    const hunkIndicator = formatFlatHunkIndicator(entry);
+    const statsLength = stats.replace(/\{[^}]+\}/g, '').length;
+    const hunkLength = hunkIndicator.replace(/\{[^}]+\}/g, '').length;
+    const availableForPath = maxPathLength - statsLength - hunkLength;
+    let line = formatSelectionIndicator(isSelected, isFocused);
+    line += `{${button.color}-fg}${button.text}{/${button.color}-fg} `;
+    line += `{${statusColor}-fg}${statusChar}{/${statusColor}-fg} `;
+    line += formatFilePath(entry.path, isSelected, isFocused, availableForPath);
+    line += formatOriginalPath(entry.originalPath);
+    line += stats;
+    line += hunkIndicator;
+    return line;
+}
+/**
+ * Format the flat file list as blessed-compatible tagged string.
+ * Row 0 is a header; files start at row 1.
+ */
+export function formatFlatFileList(flatFiles, selectedIndex, isFocused, width, scrollOffset = 0, maxHeight) {
+    if (flatFiles.length === 0) {
+        return '{gray-fg} No changes{/gray-fg}';
+    }
+    const maxPathLength = width - 12;
+    // Build all rows: header + file rows
+    const allRows = [];
+    allRows.push('{bold}{gray-fg}All files (h):{/gray-fg}{/bold}');
+    for (let i = 0; i < flatFiles.length; i++) {
+        allRows.push(formatFlatFileRow(flatFiles[i], i, selectedIndex, isFocused, maxPathLength));
+    }
+    // Apply scroll offset and max height
+    const visibleRows = maxHeight
+        ? allRows.slice(scrollOffset, scrollOffset + maxHeight)
+        : allRows.slice(scrollOffset);
+    return visibleRows.join('\n');
+}
+/**
+ * Total rows in the flat file list (header + files).
+ */
+export function getFlatFileListTotalRows(flatFiles) {
+    if (flatFiles.length === 0)
+        return 0;
+    return flatFiles.length + 1; // +1 for header
+}

package/dist/ui/widgets/Footer.js

@@ -4,22 +4,36 @@
 function calculateVisibleLength(content) {
     return content.replace(/\{[^}]+\}/g, '').length;
 }
+/**
+ * Format a toggle indicator: blue when on, gray when off.
+ */
+function toggleIndicator(label, enabled) {
+    return enabled ? `{blue-fg}[${label}]{/blue-fg}` : `{gray-fg}[${label}]{/gray-fg}`;
+}
+/**
+ * Build the left-side indicators for the standard (non-hunk) footer.
+ */
+function buildStandardIndicators(mouseEnabled, autoTabEnabled, wrapMode, followEnabled, showOnlyChanges, activeTab) {
+    const parts = [];
+    parts.push(mouseEnabled ? '{yellow-fg}[scroll]{/yellow-fg}' : '{yellow-fg}m:[select]{/yellow-fg}');
+    parts.push(toggleIndicator('auto', autoTabEnabled));
+    parts.push(toggleIndicator('wrap', wrapMode));
+    parts.push(toggleIndicator('follow', followEnabled));
+    if (activeTab === 'explorer') {
+        parts.push(toggleIndicator('changes', showOnlyChanges));
+    }
+    return parts.join(' ');
+}
 /**
  * Format footer content as blessed-compatible tagged string.
  */
-export function formatFooter(activeTab, mouseEnabled, autoTabEnabled, wrapMode, showMiddleDots, width) {
+export function formatFooter(activeTab, mouseEnabled, autoTabEnabled, wrapMode, followEnabled, showOnlyChanges, width, currentPane) {
     // Left side: indicators
     let leftContent = '{gray-fg}?{/gray-fg} ';
-    leftContent += mouseEnabled
-        ? '{yellow-fg}[scroll]{/yellow-fg}'
-        : '{yellow-fg}m:[select]{/yellow-fg}';
-    leftContent += ' ';
-    leftContent += autoTabEnabled ? '{blue-fg}[auto]{/blue-fg}' : '{gray-fg}[auto]{/gray-fg}';
-    leftContent += ' ';
-    leftContent += wrapMode ? '{blue-fg}[wrap]{/blue-fg}' : '{gray-fg}[wrap]{/gray-fg}';
-    if (activeTab === 'explorer') {
-        leftContent += ' ';
-        leftContent += showMiddleDots ? '{blue-fg}[dots]{/blue-fg}' : '{gray-fg}[dots]{/gray-fg}';
+    leftContent += buildStandardIndicators(mouseEnabled, autoTabEnabled, wrapMode, followEnabled, showOnlyChanges, activeTab);
+    // Show hunk key hints when diff pane is focused on diff tab
+    if (activeTab === 'diff' && currentPane === 'diff') {
+        leftContent += ' {gray-fg}n/N:hunk s:toggle{/gray-fg}';
     }
     // Right side: tabs
     const tabs = [

package/dist/ui/widgets/Header.js

@@ -1,43 +1,9 @@
 import { abbreviateHomePath } from '../../config.js';
 /**
  * Calculate header height based on content.
+ * Currently always returns 1 (single line header).
  */
-export function getHeaderHeight(repoPath, branch, watcherState, width, error = null, isLoading = false) {
-    if (!repoPath)
-        return 1;
-    const displayPath = abbreviateHomePath(repoPath);
-    const isNotGitRepo = error === 'Not a git repository';
-    // Calculate branch width
-    let branchWidth = 0;
-    if (branch) {
-        branchWidth = branch.current.length;
-        if (branch.tracking)
-            branchWidth += 3 + branch.tracking.length;
-        if (branch.ahead > 0)
-            branchWidth += 3 + String(branch.ahead).length;
-        if (branch.behind > 0)
-            branchWidth += 3 + String(branch.behind).length;
-    }
-    // Calculate left side width
-    let leftWidth = displayPath.length;
-    if (isLoading)
-        leftWidth += 2;
-    if (isNotGitRepo)
-        leftWidth += 24;
-    if (error && !isNotGitRepo)
-        leftWidth += error.length + 3;
-    // Check if follow indicator causes wrap
-    if (watcherState?.enabled && watcherState.sourceFile) {
-        const followPath = abbreviateHomePath(watcherState.sourceFile);
-        const fullFollow = ` (follow: ${followPath})`;
-        const availableOneLine = width - leftWidth - branchWidth - 4;
-        if (fullFollow.length > availableOneLine) {
-            const availableWithWrap = width - leftWidth - 2;
-            if (fullFollow.length <= availableWithWrap) {
-                return 2;
-            }
-        }
-    }
+export function getHeaderHeight() {
     return 1;
 }
 /**
@@ -56,10 +22,23 @@ function formatBranch(branch) {
     }
     return result;
 }
+function computeBranchVisibleLength(branch) {
+    let len = branch.current.length;
+    if (branch.tracking) {
+        len += 3 + branch.tracking.length;
+    }
+    if (branch.ahead > 0) {
+        len += 3 + String(branch.ahead).length;
+    }
+    if (branch.behind > 0) {
+        len += 3 + String(branch.behind).length;
+    }
+    return len;
+}
 /**
  * Format header content as blessed-compatible tagged string.
  */
-export function formatHeader(repoPath, branch, isLoading, error, watcherState, width) {
+export function formatHeader(repoPath, branch, isLoading, error, width) {
     if (!repoPath) {
         return '{gray-fg}Waiting for target path...{/gray-fg}';
     }
@@ -76,11 +55,6 @@ export function formatHeader(repoPath, branch, isLoading, error, watcherState, w
     else if (error) {
         leftContent += ` {red-fg}(${error}){/red-fg}`;
     }
-    // Add follow indicator if enabled
-    if (watcherState?.enabled && watcherState.sourceFile) {
-        const followPath = abbreviateHomePath(watcherState.sourceFile);
-        leftContent += ` {gray-fg}(follow: ${followPath}){/gray-fg}`;
-    }
     // Build right side content (branch info)
     const rightContent = branch ? formatBranch(branch) : '';
     if (rightContent) {
@@ -94,16 +68,7 @@ export function formatHeader(repoPath, branch, isLoading, error, watcherState, w
         else if (error) {
             leftLen += error.length + 3; // " (error)"
         }
-        if (watcherState?.enabled && watcherState.sourceFile) {
-            const followPath = abbreviateHomePath(watcherState.sourceFile);
-            leftLen += 10 + followPath.length; // " (follow: path)"
-        }
-        const rightLen = branch
-            ? branch.current.length +
-                (branch.tracking ? 3 + branch.tracking.length : 0) +
-                (branch.ahead > 0 ? 3 + String(branch.ahead).length : 0) +
-                (branch.behind > 0 ? 3 + String(branch.behind).length : 0)
-            : 0;
+        const rightLen = branch ? computeBranchVisibleLength(branch) : 0;
         const padding = Math.max(1, width - leftLen - rightLen - 2);
         return leftContent + ' '.repeat(padding) + rightContent;
     }

package/dist/ui/widgets/fileRowFormatters.js

@@ -0,0 +1,73 @@
+import { shortenPath } from '../../utils/formatPath.js';
+export function getStatusChar(status) {
+    switch (status) {
+        case 'modified':
+            return 'M';
+        case 'added':
+            return 'A';
+        case 'deleted':
+            return 'D';
+        case 'untracked':
+            return '?';
+        case 'renamed':
+            return 'R';
+        case 'copied':
+            return 'C';
+        default:
+            return ' ';
+    }
+}
+export function getStatusColor(status) {
+    switch (status) {
+        case 'modified':
+            return 'yellow';
+        case 'added':
+            return 'green';
+        case 'deleted':
+            return 'red';
+        case 'untracked':
+            return 'gray';
+        case 'renamed':
+            return 'blue';
+        case 'copied':
+            return 'cyan';
+        default:
+            return 'white';
+    }
+}
+export function formatStats(insertions, deletions) {
+    if (insertions === undefined && deletions === undefined)
+        return '';
+    const parts = [];
+    if (insertions !== undefined && insertions > 0) {
+        parts.push(`{green-fg}+${insertions}{/green-fg}`);
+    }
+    if (deletions !== undefined && deletions > 0) {
+        parts.push(`{red-fg}-${deletions}{/red-fg}`);
+    }
+    return parts.length > 0 ? ' ' + parts.join(' ') : '';
+}
+export function formatSelectionIndicator(isSelected, isFocused) {
+    if (isSelected && isFocused) {
+        return '{cyan-fg}{bold}\u25b8 {/bold}{/cyan-fg}';
+    }
+    else if (isSelected) {
+        return '{gray-fg}\u25b8 {/gray-fg}';
+    }
+    return '  ';
+}
+export function formatFilePath(path, isSelected, isFocused, maxLength) {
+    const displayPath = shortenPath(path, maxLength);
+    if (isSelected && isFocused) {
+        return `{cyan-fg}{inverse}${displayPath}{/inverse}{/cyan-fg}`;
+    }
+    else if (isSelected) {
+        return `{cyan-fg}${displayPath}{/cyan-fg}`;
+    }
+    return displayPath;
+}
+export function formatOriginalPath(originalPath) {
+    if (!originalPath)
+        return '';
+    return ` {gray-fg}\u2190 ${shortenPath(originalPath, 30)}{/gray-fg}`;
+}