diffstalker 0.1.7 → 0.2.0

package/dist/ui/widgets/ExplorerContent.js

@@ -0,0 +1,102 @@
+import { buildExplorerContentRows, wrapExplorerContentRows, getExplorerContentRowCount, getExplorerContentLineNumWidth, applyMiddleDots, } from '../../utils/explorerDisplayRows.js';
+import { truncateAnsi } from '../../utils/ansiTruncate.js';
+import { ansiToBlessed } from '../../utils/ansiToBlessed.js';
+/**
+ * Escape blessed tags in content.
+ */
+function escapeContent(content) {
+    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
+}
+/**
+ * Format explorer file content as blessed-compatible tagged string.
+ */
+export function formatExplorerContent(filePath, content, width, scrollOffset = 0, maxHeight, truncated = false, wrapMode = false, showMiddleDots = 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') {
+            lines.push(`{yellow-fg}${escapeContent(row.content)}{/yellow-fg}`);
+            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 or middle-dots mode
+        const canUseHighlighting = row.highlighted && !isContinuation && !showMiddleDots;
+        let displayContent;
+        if (canUseHighlighting && row.highlighted) {
+            // Use ANSI-aware truncation to preserve syntax highlighting
+            const truncatedHighlight = shouldTruncate
+                ? truncateAnsi(row.highlighted, contentWidth)
+                : row.highlighted;
+            // Convert ANSI to blessed tags
+            displayContent = ansiToBlessed(truncatedHighlight);
+        }
+        else {
+            // Plain content path
+            let plainContent = rawContent;
+            // Apply middle-dots to raw content
+            if (showMiddleDots && !isContinuation) {
+                plainContent = applyMiddleDots(plainContent, true);
+            }
+            // Simple truncation for plain content
+            if (shouldTruncate) {
+                plainContent = plainContent.slice(0, Math.max(0, contentWidth - 1)) + '...';
+            }
+            displayContent = escapeContent(plainContent);
+        }
+        // Format line with line number
+        let line = '';
+        if (isContinuation) {
+            line = `{cyan-fg}${lineNumDisplay}{/cyan-fg} ${displayContent || ' '}`;
+        }
+        else {
+            line = `{gray-fg}${lineNumDisplay}{/gray-fg} ${displayContent || ' '}`;
+        }
+        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);
+}

package/dist/ui/widgets/ExplorerView.js

@@ -0,0 +1,95 @@
+/**
+ * Escape blessed tags in content.
+ */
+function escapeContent(content) {
+    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
+}
+/**
+ * Format the explorer directory listing as blessed-compatible tagged string.
+ */
+export function formatExplorerView(items, 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) {
+        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 lines = [];
+    for (let i = 0; i < visibleItems.length; i++) {
+        const item = visibleItems[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);
+    }
+    return lines.join('\n');
+}
+/**
+ * Build breadcrumb segments from a path.
+ * Returns segments like ["src", "components"] for "src/components"
+ */
+export function buildBreadcrumbs(currentPath) {
+    if (!currentPath)
+        return [];
+    return currentPath.split('/').filter(Boolean);
+}
+/**
+ * Format breadcrumbs for display.
+ */
+export function formatBreadcrumbs(currentPath, repoName) {
+    const segments = buildBreadcrumbs(currentPath);
+    if (segments.length === 0) {
+        return `{bold}${escapeContent(repoName)}{/bold}`;
+    }
+    const parts = [repoName, ...segments];
+    return parts
+        .map((part, i) => {
+        if (i === parts.length - 1) {
+            return `{bold}${escapeContent(part)}{/bold}`;
+        }
+        return `{gray-fg}${escapeContent(part)}{/gray-fg}`;
+    })
+        .join('{gray-fg}/{/gray-fg}');
+}
+/**
+ * Get total rows in explorer for scroll calculations.
+ */
+export function getExplorerTotalRows(items) {
+    return items.length;
+}
+/**
+ * Get item at index.
+ */
+export function getExplorerItemAtIndex(items, index) {
+    return items[index] ?? null;
+}

package/dist/ui/widgets/FileList.js

@@ -0,0 +1,185 @@
+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(' ') : '';
+}
+/**
+ * Build the list of row items for the file list.
+ */
+export function buildFileListRows(files) {
+    const { modified, untracked, staged } = categorizeFiles(files);
+    const rows = [];
+    let currentFileIndex = 0;
+    if (modified.length > 0) {
+        rows.push({ type: 'header', content: 'Modified:', headerColor: 'yellow' });
+        modified.forEach((file) => {
+            rows.push({ type: 'file', file, fileIndex: currentFileIndex++ });
+        });
+    }
+    if (untracked.length > 0) {
+        if (modified.length > 0) {
+            rows.push({ type: 'spacer' });
+        }
+        rows.push({ type: 'header', content: 'Untracked:', headerColor: 'gray' });
+        untracked.forEach((file) => {
+            rows.push({ type: 'file', file, fileIndex: currentFileIndex++ });
+        });
+    }
+    if (staged.length > 0) {
+        if (modified.length > 0 || untracked.length > 0) {
+            rows.push({ type: 'spacer' });
+        }
+        rows.push({ type: 'header', content: 'Staged:', headerColor: 'green' });
+        staged.forEach((file) => {
+            rows.push({ type: 'file', file, fileIndex: currentFileIndex++ });
+        });
+    }
+    return rows;
+}
+/**
+ * Format the file list as blessed-compatible tagged string.
+ */
+export function formatFileList(files, selectedIndex, isFocused, width, scrollOffset = 0, maxHeight) {
+    if (files.length === 0) {
+        return '{gray-fg} No changes{/gray-fg}';
+    }
+    const rows = buildFileListRows(files);
+    const maxPathLength = width - 12; // Account for prefix chars
+    // 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 === '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}`;
+            }
+            // Stats
+            line += stats;
+            lines.push(line);
+        }
+    }
+    return lines.join('\n');
+}
+/**
+ * Get the total number of rows in the file list (for scroll calculation).
+ */
+export function getFileListTotalRows(files) {
+    return buildFileListRows(files).length;
+}
+/**
+ * Get the file at a specific index (accounting for category ordering).
+ */
+export function getFileAtIndex(files, index) {
+    const { ordered } = categorizeFiles(files);
+    return ordered[index] ?? null;
+}
+/**
+ * Get the file index from a visual row (accounting for headers and spacers).
+ * Returns null if the row is a header or spacer.
+ */
+export function getFileIndexFromRow(row, files) {
+    const rows = buildFileListRows(files);
+    const rowItem = rows[row];
+    if (rowItem?.type === 'file' && rowItem.fileIndex !== undefined) {
+        return rowItem.fileIndex;
+    }
+    return null;
+}
+/**
+ * Get the visual row index for a file index.
+ */
+export function getRowFromFileIndex(fileIndex, files) {
+    const rows = buildFileListRows(files);
+    for (let i = 0; i < rows.length; i++) {
+        if (rows[i].type === 'file' && rows[i].fileIndex === fileIndex) {
+            return i;
+        }
+    }
+    return 0;
+}

package/dist/ui/widgets/Footer.js

@@ -0,0 +1,46 @@
+/**
+ * Calculate visible length by stripping blessed tags.
+ */
+function calculateVisibleLength(content) {
+    return content.replace(/\{[^}]+\}/g, '').length;
+}
+/**
+ * Format footer content as blessed-compatible tagged string.
+ */
+export function formatFooter(activeTab, mouseEnabled, autoTabEnabled, wrapMode, showMiddleDots, width) {
+    // 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}';
+    }
+    // Right side: tabs
+    const tabs = [
+        { key: '1', label: 'Diff', tab: 'diff' },
+        { key: '2', label: 'Commit', tab: 'commit' },
+        { key: '3', label: 'History', tab: 'history' },
+        { key: '4', label: 'Compare', tab: 'compare' },
+        { key: '5', label: 'Explorer', tab: 'explorer' },
+    ];
+    const rightContent = tabs
+        .map(({ key, label, tab }) => {
+        const isActive = activeTab === tab;
+        if (isActive) {
+            return `{bold}{cyan-fg}[${key}]${label}{/cyan-fg}{/bold}`;
+        }
+        return `[${key}]${label}`;
+    })
+        .join(' ');
+    // Calculate padding for right alignment
+    const leftLen = calculateVisibleLength(leftContent);
+    const rightLen = calculateVisibleLength(rightContent);
+    const padding = Math.max(1, width - leftLen - rightLen);
+    return leftContent + ' '.repeat(padding) + rightContent;
+}

package/dist/ui/widgets/Header.js

@@ -0,0 +1,111 @@
+import { abbreviateHomePath } from '../../config.js';
+/**
+ * Calculate header height based on content.
+ */
+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;
+            }
+        }
+    }
+    return 1;
+}
+/**
+ * Format branch info as blessed-compatible tagged string.
+ */
+function formatBranch(branch) {
+    let result = `{bold}{green-fg}${branch.current}{/green-fg}{/bold}`;
+    if (branch.tracking) {
+        result += ` {gray-fg}\u2192{/gray-fg} {blue-fg}${branch.tracking}{/blue-fg}`;
+    }
+    if (branch.ahead > 0) {
+        result += ` {green-fg}\u2191${branch.ahead}{/green-fg}`;
+    }
+    if (branch.behind > 0) {
+        result += ` {red-fg}\u2193${branch.behind}{/red-fg}`;
+    }
+    return result;
+}
+/**
+ * Format header content as blessed-compatible tagged string.
+ */
+export function formatHeader(repoPath, branch, isLoading, error, watcherState, width) {
+    if (!repoPath) {
+        return '{gray-fg}Waiting for target path...{/gray-fg}';
+    }
+    const displayPath = abbreviateHomePath(repoPath);
+    const isNotGitRepo = error === 'Not a git repository';
+    // Build left side content
+    let leftContent = `{bold}{cyan-fg}${displayPath}{/cyan-fg}{/bold}`;
+    if (isLoading) {
+        leftContent += ' {yellow-fg}\u27f3{/yellow-fg}';
+    }
+    if (isNotGitRepo) {
+        leftContent += ' {yellow-fg}(not a git repository){/yellow-fg}';
+    }
+    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) {
+        // Calculate visible text length for left side (excluding ANSI/tags)
+        let leftLen = displayPath.length;
+        if (isLoading)
+            leftLen += 2; // " ⟳"
+        if (isNotGitRepo) {
+            leftLen += 24; // " (not a git repository)"
+        }
+        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 padding = Math.max(1, width - leftLen - rightLen - 2);
+        return leftContent + ' '.repeat(padding) + rightContent;
+    }
+    return leftContent;
+}

package/dist/ui/widgets/HistoryView.js

@@ -0,0 +1,69 @@
+import { formatDate } from '../../utils/formatDate.js';
+import { formatCommitDisplay } from '../../utils/commitFormat.js';
+/**
+ * Format the history view as blessed-compatible tagged string.
+ */
+export function formatHistoryView(commits, selectedIndex, isFocused, width, scrollOffset = 0, maxHeight) {
+    if (commits.length === 0) {
+        return '{gray-fg}No commits yet{/gray-fg}';
+    }
+    // Apply scroll offset and max height
+    const visibleCommits = maxHeight
+        ? commits.slice(scrollOffset, scrollOffset + maxHeight)
+        : commits.slice(scrollOffset);
+    const lines = [];
+    for (let i = 0; i < visibleCommits.length; i++) {
+        const commit = visibleCommits[i];
+        const actualIndex = scrollOffset + i;
+        const isSelected = actualIndex === selectedIndex;
+        const isHighlighted = isSelected && isFocused;
+        const dateStr = formatDate(commit.date);
+        // Fixed parts: hash(7) + spaces(4) + date + parens(2) + selection indicator(2)
+        const baseWidth = 7 + 4 + dateStr.length + 2 + 2;
+        const remainingWidth = Math.max(10, width - baseWidth);
+        const { displayMessage, displayRefs } = formatCommitDisplay(commit.message, commit.refs, remainingWidth);
+        let line = '';
+        // Selection indicator
+        if (isHighlighted) {
+            line += '{cyan-fg}{bold}▸ {/bold}{/cyan-fg}';
+        }
+        else {
+            line += '  ';
+        }
+        // Short hash
+        line += `{yellow-fg}${commit.shortHash}{/yellow-fg} `;
+        // Message (with highlighting)
+        if (isHighlighted) {
+            line += `{cyan-fg}{inverse}${escapeContent(displayMessage)}{/inverse}{/cyan-fg}`;
+        }
+        else {
+            line += escapeContent(displayMessage);
+        }
+        // Date
+        line += ` {gray-fg}(${dateStr}){/gray-fg}`;
+        // Refs (branch names, tags)
+        if (displayRefs) {
+            line += ` {green-fg}${escapeContent(displayRefs)}{/green-fg}`;
+        }
+        lines.push(line);
+    }
+    return lines.join('\n');
+}
+/**
+ * Escape blessed tags in content.
+ */
+function escapeContent(content) {
+    return content.replace(/\{/g, '{{').replace(/\}/g, '}}');
+}
+/**
+ * Get the total number of rows in the history view (for scroll calculation).
+ */
+export function getHistoryTotalRows(commits) {
+    return commits.length;
+}
+/**
+ * Get the commit at a specific index.
+ */
+export function getCommitAtIndex(commits, index) {
+    return commits[index] ?? null;
+}