diffstalker 0.1.7 → 0.2.0

package/dist/components/HistoryView.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { ScrollableList } from './ScrollableList.js';
-import { formatDate } from '../utils/formatDate.js';
-import { formatCommitDisplay } from '../utils/commitFormat.js';
-// Re-export from utils for backwards compatibility
-export { getCommitIndexFromRow, getHistoryTotalRows, getHistoryRowOffset, } from '../utils/rowCalculations.js';
-export function HistoryView({ commits, selectedIndex, scrollOffset, maxHeight, isActive, width, onSelectCommit: _onSelectCommit, }) {
-    if (commits.length === 0) {
-        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "No commits yet" }) }));
-    }
-    return (_jsx(ScrollableList, { items: commits, maxHeight: maxHeight, scrollOffset: scrollOffset, getKey: (commit) => commit.hash, renderItem: (commit, actualIndex) => {
-            const isSelected = actualIndex === selectedIndex && isActive;
-            const dateStr = formatDate(commit.date);
-            // Fixed parts: hash(7) + spaces(4) + date + parens(2)
-            const baseWidth = 7 + 4 + dateStr.length + 2;
-            const remainingWidth = width - baseWidth;
-            const { displayMessage, displayRefs } = formatCommitDisplay(commit.message, commit.refs, remainingWidth);
-            return (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: commit.shortHash }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, inverse: isSelected, children: displayMessage }), _jsx(Text, { children: " " }), _jsxs(Text, { dimColor: true, children: ["(", dateStr, ")"] }), displayRefs && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "green", children: displayRefs })] }))] }));
-        } }));
-}

package/dist/components/HotkeysModal.js

@@ -1,108 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, useInput } from 'ink';
-import { Modal, centerModal } from './Modal.js';
-const hotkeyGroups = [
-    {
-        title: 'Navigation',
-        entries: [
-            { key: '↑/k', description: 'Move up' },
-            { key: '↓/j', description: 'Move down' },
-            { key: 'Tab', description: 'Toggle pane focus' },
-        ],
-    },
-    {
-        title: 'Staging',
-        entries: [
-            { key: '^S', description: 'Stage file' },
-            { key: '^U', description: 'Unstage file' },
-            { key: '^A', description: 'Stage all' },
-            { key: '^Z', description: 'Unstage all' },
-            { key: 'Space/Enter', description: 'Toggle stage' },
-        ],
-    },
-    {
-        title: 'Actions',
-        entries: [
-            { key: 'c', description: 'Open commit panel' },
-            { key: 'r', description: 'Refresh' },
-            { key: 'q', description: 'Quit' },
-        ],
-    },
-    {
-        title: 'Pane Resize',
-        entries: [
-            { key: '[', description: 'Shrink top pane' },
-            { key: ']', description: 'Grow top pane' },
-        ],
-    },
-    {
-        title: 'Tabs',
-        entries: [
-            { key: '1', description: 'Diff view' },
-            { key: '2', description: 'Commit panel' },
-            { key: '3', description: 'History view' },
-            { key: '4', description: 'Compare view' },
-            { key: '5', description: 'Explorer view' },
-            { key: 'a', description: 'Toggle auto-tab mode' },
-        ],
-    },
-    {
-        title: 'Explorer',
-        entries: [
-            { key: '.', description: 'Toggle middle-dots' },
-            { key: '^H', description: 'Toggle hidden files' },
-            { key: '^G', description: 'Toggle gitignored' },
-            { key: 'Enter', description: 'Enter directory' },
-            { key: 'Backspace/h', description: 'Go up' },
-        ],
-    },
-    {
-        title: 'Other',
-        entries: [
-            { key: 'm', description: 'Toggle scroll/select' },
-            { key: 'f', description: 'Toggle follow mode' },
-            { key: 'w', description: 'Toggle wrap mode' },
-            { key: 't', description: 'Theme picker' },
-            { key: 'b', description: 'Base branch picker' },
-            { key: 'u', description: 'Toggle uncommitted' },
-            { key: '?', description: 'This help' },
-        ],
-    },
-];
-export function HotkeysModal({ onClose, width, height }) {
-    useInput((input, key) => {
-        if (key.escape || key.return || input === '?') {
-            onClose();
-        }
-    });
-    // Determine if we should use 2 columns (need at least 90 chars width)
-    const useTwoColumns = width >= 90;
-    const columnWidth = useTwoColumns ? 38 : 30;
-    const boxWidth = useTwoColumns ? Math.min(82, width - 4) : Math.min(40, width - 4);
-    // Calculate height based on layout
-    let boxHeight;
-    if (useTwoColumns) {
-        // Split groups into two columns
-        const midpoint = Math.ceil(hotkeyGroups.length / 2);
-        const leftGroups = hotkeyGroups.slice(0, midpoint);
-        const rightGroups = hotkeyGroups.slice(midpoint);
-        const leftLines = leftGroups.reduce((sum, g) => sum + g.entries.length + 2, 0);
-        const rightLines = rightGroups.reduce((sum, g) => sum + g.entries.length + 2, 0);
-        boxHeight = Math.min(Math.max(leftLines, rightLines) + 5, height - 4);
-    }
-    else {
-        const totalLines = hotkeyGroups.reduce((sum, g) => sum + g.entries.length + 2, 0) + 4;
-        boxHeight = Math.min(totalLines, height - 4);
-    }
-    // Center the modal
-    const { x, y } = centerModal(boxWidth, boxHeight, width, height);
-    // Render a single group
-    const renderGroup = (group, colWidth) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: group.title }), group.entries.map((entry) => (_jsxs(Box, { children: [_jsx(Box, { width: 13, children: _jsx(Text, { color: "cyan", children: entry.key }) }), _jsx(Box, { width: colWidth - 13, children: _jsx(Text, { children: entry.description }) })] }, entry.key)))] }, group.title));
-    if (useTwoColumns) {
-        const midpoint = Math.ceil(hotkeyGroups.length / 2);
-        const leftGroups = hotkeyGroups.slice(0, midpoint);
-        const rightGroups = hotkeyGroups.slice(midpoint);
-        return (_jsx(Modal, { x: x, y: y, width: boxWidth, height: boxHeight, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", width: boxWidth, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: [' ', "Keyboard Shortcuts", ' '] }) }), _jsxs(Box, { children: [_jsx(Box, { flexDirection: "column", width: columnWidth, marginRight: 2, children: leftGroups.map((g) => renderGroup(g, columnWidth)) }), _jsx(Box, { flexDirection: "column", width: columnWidth, children: rightGroups.map((g) => renderGroup(g, columnWidth)) })] }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "Press Esc, Enter, or ? to close" }) })] }) }));
-    }
-    return (_jsx(Modal, { x: x, y: y, width: boxWidth, height: boxHeight, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", width: boxWidth, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: [' ', "Keyboard Shortcuts", ' '] }) }), hotkeyGroups.map((group) => renderGroup(group, columnWidth)), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "Press Esc, Enter, or ? to close" }) })] }) }));
-}

package/dist/components/Modal.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-/**
- * A modal overlay that blankets only its own area before rendering children.
- * Use this to create popups that cover the content behind them.
- */
-export function Modal({ x, y, width, height, children }) {
-    const blankLine = ' '.repeat(width);
-    return (_jsxs(Box, { position: "absolute", marginLeft: x, marginTop: y, flexDirection: "column", children: [Array.from({ length: height }).map((_, i) => (_jsx(Text, { children: blankLine }, `blank-${i}`))), _jsx(Box, { position: "absolute", flexDirection: "column", children: children })] }));
-}
-/**
- * Helper to calculate centered modal position.
- */
-export function centerModal(modalWidth, modalHeight, screenWidth, screenHeight) {
-    return {
-        x: Math.floor((screenWidth - modalWidth) / 2),
-        y: Math.floor((screenHeight - modalHeight) / 2),
-    };
-}

package/dist/components/ScrollableList.js

@@ -1,125 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Box, Text } from 'ink';
-/**
- * A generic scrollable list component that properly handles:
- * - Scroll indicators (↑/↓) taking up space
- * - Consistent height calculations
- * - Proper React keys for re-rendering
- *
- * Usage:
- * ```tsx
- * <ScrollableList
- *   items={myItems}
- *   renderItem={(item, i) => <MyRow item={item} />}
- *   maxHeight={20}
- *   scrollOffset={offset}
- *   getKey={(item, i) => item.id}
- * />
- * ```
- */
-export function ScrollableList({ items, renderItem, maxHeight, scrollOffset, getKey, header, showIndicators = true, getItemHeight, }) {
-    // If getItemHeight is not provided, use simple item-based scrolling
-    const hasVariableHeight = !!getItemHeight;
-    // Calculate cumulative row positions for variable height items
-    const { itemRowStarts, totalRows } = useMemo(() => {
-        if (!hasVariableHeight) {
-            return { itemRowStarts: [], totalRows: items.length };
-        }
-        const starts = [];
-        let cumulative = 0;
-        for (let i = 0; i < items.length; i++) {
-            starts.push(cumulative);
-            cumulative += getItemHeight(items[i], i);
-        }
-        return { itemRowStarts: starts, totalRows: cumulative };
-    }, [items, getItemHeight, hasVariableHeight]);
-    // Calculate available space for actual content
-    let availableHeight = maxHeight;
-    // Reserve space for header if present
-    if (header) {
-        availableHeight--;
-    }
-    const hasPrevious = scrollOffset > 0;
-    const contentTotal = hasVariableHeight ? totalRows : items.length;
-    const needsScrolling = contentTotal > maxHeight;
-    // Simple rule: if content needs scrolling, ALWAYS reserve 2 rows for indicators
-    // No clever predictions - just consistent, predictable behavior
-    if (showIndicators && needsScrolling) {
-        availableHeight -= 2;
-    }
-    // Ensure we have at least 1 line for content
-    availableHeight = Math.max(1, availableHeight);
-    // Find visible items based on scroll offset (in rows)
-    const visibleItems = [];
-    let usedRows = 0;
-    let rowsAbove = 0;
-    let rowsBelow = 0;
-    if (hasVariableHeight) {
-        // Find first visible item (the one that contains scrollOffset row)
-        let startIdx = 0;
-        for (let i = 0; i < items.length; i++) {
-            const itemHeight = getItemHeight(items[i], i);
-            if (itemRowStarts[i] + itemHeight > scrollOffset) {
-                startIdx = i;
-                break;
-            }
-        }
-        // Collect items that fit in available height
-        for (let i = startIdx; i < items.length && usedRows < availableHeight; i++) {
-            const itemHeight = getItemHeight(items[i], i);
-            visibleItems.push({ item: items[i], index: i });
-            usedRows += itemHeight;
-        }
-        rowsAbove = scrollOffset;
-        // Simple calculation: total rows minus what we've scrolled past minus what we're showing
-        rowsBelow = Math.max(0, totalRows - scrollOffset - usedRows);
-    }
-    else {
-        // Simple item-based scrolling (1 item = 1 row)
-        const endIdx = Math.min(scrollOffset + availableHeight, items.length);
-        for (let i = scrollOffset; i < endIdx; i++) {
-            visibleItems.push({ item: items[i], index: i });
-            usedRows++;
-        }
-        rowsAbove = scrollOffset;
-        rowsBelow = Math.max(0, items.length - scrollOffset - usedRows);
-    }
-    return (_jsxs(Box, { flexDirection: "column", overflowX: "hidden", height: maxHeight, overflow: "hidden", children: [header, showIndicators &&
-                needsScrolling &&
-                (hasPrevious ? _jsxs(Text, { dimColor: true, children: ["\u2191 ", rowsAbove, " more above"] }) : _jsx(Text, { children: " " })), visibleItems.map(({ item, index }) => (_jsx(Box, { children: renderItem(item, index) }, `${scrollOffset}-${index}-${getKey(item, index)}`))), showIndicators &&
-                needsScrolling &&
-                (rowsBelow > 0 ? _jsxs(Text, { dimColor: true, children: ["\u2193 ", rowsBelow, " more below"] }) : _jsx(Text, { children: " " }))] }));
-}
-/**
- * Calculate the maximum scroll offset for a list.
- */
-export function getMaxScrollOffset(totalItems, maxHeight, hasHeader = false, showIndicators = true) {
-    let availableHeight = maxHeight;
-    if (hasHeader)
-        availableHeight--;
-    // When scrolled, we always show "↑ above" indicator
-    // and usually "↓ below" indicator, so subtract 2
-    if (showIndicators && totalItems > availableHeight) {
-        availableHeight -= 2;
-    }
-    availableHeight = Math.max(1, availableHeight);
-    return Math.max(0, totalItems - availableHeight);
-}
-/**
- * Calculate visible item count for a given configuration.
- * Useful for scroll calculations in parent components.
- */
-export function getVisibleItemCount(totalItems, maxHeight, scrollOffset, hasHeader = false, showIndicators = true) {
-    let availableHeight = maxHeight;
-    if (hasHeader)
-        availableHeight--;
-    if (showIndicators) {
-        if (scrollOffset > 0)
-            availableHeight--;
-        if (totalItems > scrollOffset + availableHeight)
-            availableHeight--;
-    }
-    availableHeight = Math.max(1, availableHeight);
-    return Math.min(availableHeight, totalItems - scrollOffset);
-}

package/dist/components/ThemePicker.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { themes, themeOrder, getTheme } from '../themes.js';
-import { Modal, centerModal } from './Modal.js';
-// Preview sample for theme visualization
-function ThemePreview({ theme }) {
-    const { colors } = theme;
-    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.delBg, color: colors.delLineNum, children: '  5 ' }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.delSymbol, bold: true, children: '- ' }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.text, children: 'const ' }), _jsx(Text, { backgroundColor: colors.delHighlight, color: colors.text, children: 'old' }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.text, children: ' = value;' })] }), _jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.addBg, color: colors.addLineNum, children: '  5 ' }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.addSymbol, bold: true, children: '+ ' }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.text, children: 'const ' }), _jsx(Text, { backgroundColor: colors.addHighlight, color: colors.text, children: 'new' }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.text, children: ' = value;' })] })] }));
-}
-export function ThemePicker({ currentTheme, onSelect, onCancel, width, height, }) {
-    const [selectedIndex, setSelectedIndex] = useState(() => {
-        const idx = themeOrder.indexOf(currentTheme);
-        return idx >= 0 ? idx : 0;
-    });
-    const previewTheme = getTheme(themeOrder[selectedIndex]);
-    useInput((input, key) => {
-        if (key.escape) {
-            onCancel();
-        }
-        else if (key.return) {
-            onSelect(themeOrder[selectedIndex]);
-        }
-        else if (key.upArrow || input === 'k') {
-            setSelectedIndex((prev) => Math.max(0, prev - 1));
-        }
-        else if (key.downArrow || input === 'j') {
-            setSelectedIndex((prev) => Math.min(themeOrder.length - 1, prev + 1));
-        }
-    });
-    // Calculate box dimensions
-    const boxWidth = Math.min(50, width - 4);
-    const boxHeight = Math.min(themeOrder.length + 10, height - 4); // +10 for header, preview, footer, borders
-    // Center the modal
-    const { x, y } = centerModal(boxWidth, boxHeight, width, height);
-    return (_jsx(Modal, { x: x, y: y, width: boxWidth, height: boxHeight, children: _jsxs(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", width: boxWidth, children: [_jsx(Box, { justifyContent: "center", marginBottom: 1, children: _jsxs(Text, { bold: true, color: "cyan", children: [' ', "Select Theme", ' '] }) }), themeOrder.map((themeName, index) => {
-                    const theme = themes[themeName];
-                    const isSelected = index === selectedIndex;
-                    const isCurrent = themeName === currentTheme;
-                    return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: isSelected ? '▸ ' : '  ' }), _jsx(Text, { bold: isSelected, color: isSelected ? 'cyan' : undefined, children: theme.displayName }), isCurrent && _jsx(Text, { dimColor: true, children: " (current)" })] }, themeName));
-                }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Preview:" }), _jsx(ThemePreview, { theme: previewTheme })] }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u2022 Enter select \u2022 Esc cancel" }) })] }) }));
-}

package/dist/components/TopPane.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Text } from 'ink';
-import { FileList } from './FileList.js';
-import { HistoryView } from './HistoryView.js';
-import { CompareListView } from './CompareListView.js';
-import { ExplorerView, buildBreadcrumbs } from './ExplorerView.js';
-import { categorizeFiles } from '../utils/fileCategories.js';
-export function TopPane({ bottomTab, currentPane, terminalWidth, topPaneHeight, files, selectedIndex, fileListScrollOffset, stagedCount, onStage, onUnstage, commits, historySelectedIndex, historyScrollOffset, onSelectHistoryCommit, compareDiff, compareListSelection, compareScrollOffset, includeUncommitted, explorerCurrentPath = '', explorerItems = [], explorerSelectedIndex = 0, explorerScrollOffset = 0, explorerIsLoading = false, explorerError = null, hideHiddenFiles = true, hideGitignored = true, }) {
-    const { modified, untracked } = categorizeFiles(files);
-    const modifiedCount = modified.length;
-    const untrackedCount = untracked.length;
-    return (_jsxs(Box, { flexDirection: "column", height: topPaneHeight, width: terminalWidth, overflowX: "hidden", overflowY: "hidden", children: [(bottomTab === 'diff' || bottomTab === 'commit') && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'files' ? 'cyan' : undefined, children: "STAGING AREA" }), _jsxs(Text, { dimColor: true, children: [' ', "(", modifiedCount, " modified, ", untrackedCount, " untracked, ", stagedCount, " staged)"] })] }), _jsx(FileList, { files: files, selectedIndex: selectedIndex, isFocused: currentPane === 'files', scrollOffset: fileListScrollOffset, maxHeight: topPaneHeight - 1, width: terminalWidth, onStage: onStage, onUnstage: onUnstage })] })), bottomTab === 'history' && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'history' ? 'cyan' : undefined, children: "COMMITS" }), _jsxs(Text, { dimColor: true, children: [" (", commits.length, " commits)"] })] }), _jsx(HistoryView, { commits: commits, selectedIndex: historySelectedIndex, scrollOffset: historyScrollOffset, maxHeight: topPaneHeight - 1, isActive: currentPane === 'history', width: terminalWidth, onSelectCommit: onSelectHistoryCommit })] })), bottomTab === 'compare' && (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'compare' ? 'cyan' : undefined, children: "COMPARE" }), _jsx(Text, { dimColor: true, children: " (vs " }), _jsx(Text, { color: "cyan", children: compareDiff?.baseBranch ?? '...' }), _jsxs(Text, { dimColor: true, children: [": ", compareDiff?.commits.length ?? 0, " commits, ", compareDiff?.files.length ?? 0, " files) (b)"] }), compareDiff && compareDiff.uncommittedCount > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: " | " }), _jsxs(Text, { color: includeUncommitted ? 'magenta' : 'yellow', children: ["[", includeUncommitted ? 'x' : ' ', "] uncommitted"] }), _jsx(Text, { dimColor: true, children: " (u)" })] }))] }), _jsx(CompareListView, { commits: compareDiff?.commits ?? [], files: compareDiff?.files ?? [], selectedItem: compareListSelection, scrollOffset: compareScrollOffset, maxHeight: topPaneHeight - 1, isActive: currentPane === 'compare', width: terminalWidth })] })), bottomTab === 'explorer' && (_jsxs(_Fragment, { children: [_jsxs(Box, { justifyContent: "space-between", width: terminalWidth, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: currentPane === 'explorer' ? 'cyan' : undefined, children: "EXPLORER" }), _jsx(Text, { dimColor: true, children: " " }), buildBreadcrumbs(explorerCurrentPath).map((segment, i, arr) => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: "blue", children: segment }), i < arr.length - 1 && _jsx(Text, { dimColor: true, children: " / " })] }, i))), explorerCurrentPath && _jsx(Text, { dimColor: true, children: " /" }), !explorerCurrentPath && _jsx(Text, { dimColor: true, children: "(root)" })] }), _jsx(Box, { children: (hideHiddenFiles || hideGitignored) && (_jsxs(Text, { dimColor: true, children: [hideHiddenFiles && 'H', hideGitignored && 'G'] })) })] }), _jsx(ExplorerView, { currentPath: explorerCurrentPath, items: explorerItems, selectedIndex: explorerSelectedIndex, scrollOffset: explorerScrollOffset, maxHeight: topPaneHeight - 1, isActive: currentPane === 'explorer', width: terminalWidth, isLoading: explorerIsLoading, error: explorerError })] }))] }));
-}

package/dist/components/UnifiedDiffView.js

@@ -1,115 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Box, Text } from 'ink';
-import { getTheme } from '../themes.js';
-import { ScrollableList } from './ScrollableList.js';
-import { getDisplayRowsLineNumWidth } from '../utils/displayRows.js';
-// 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, ' ');
-}
-function DisplayRowRenderer({ row, lineNumWidth, width, theme, wrapMode, }) {
-    const { colors } = theme;
-    // Available width for content: width - paddingX(1) - lineNum - space(1) - symbol(1) - space(1) - paddingX(1)
-    const contentWidth = width - lineNumWidth - 5;
-    // Width for headers (just subtract paddingX on each side)
-    const headerWidth = width - 2;
-    switch (row.type) {
-        case 'diff-header': {
-            // Extract file path from diff --git and show as clean separator
-            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 (_jsxs(Text, { color: "cyan", bold: true, children: ["\u2500\u2500 ", path, " \u2500\u2500"] }));
-                }
-            }
-            return _jsx(Text, { dimColor: true, children: truncate(content, headerWidth) });
-        }
-        case 'diff-hunk': {
-            // Parse hunk header: @@ -oldStart,oldCount +newStart,newCount @@ context
-            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 (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", dimColor: true, children: rangeText }), truncatedContext && _jsx(Text, { color: "gray", children: truncatedContext })] }));
-            }
-            return (_jsx(Text, { color: "cyan", dimColor: true, children: truncate(row.content, headerWidth) }));
-        }
-        case 'diff-add': {
-            const isCont = row.isContinuation;
-            // Use » for continuation - it's single-width and renders background correctly
-            const symbol = isCont ? '\u00bb' : '+';
-            const rawContent = wrapMode ? row.content || '' : truncate(row.content, contentWidth) || '';
-            // Always prepend space to content
-            const content = ' ' + rawContent || ' ';
-            return (_jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.addBg, color: colors.addLineNum, children: formatLineNum(row.lineNum, lineNumWidth) + ' ' }), _jsx(Text, { backgroundColor: colors.addBg, color: isCont ? colors.addLineNum : colors.addSymbol, bold: !isCont, children: symbol }), _jsx(Text, { backgroundColor: colors.addBg, color: colors.text, children: content })] }));
-        }
-        case 'diff-del': {
-            const isCont = row.isContinuation;
-            // Use » for continuation - it's single-width and renders background correctly
-            const symbol = isCont ? '\u00bb' : '-';
-            const rawContent = wrapMode ? row.content || '' : truncate(row.content, contentWidth) || '';
-            // Always prepend space to content
-            const content = ' ' + rawContent || ' ';
-            return (_jsxs(Box, { children: [_jsx(Text, { backgroundColor: colors.delBg, color: colors.delLineNum, children: formatLineNum(row.lineNum, lineNumWidth) + ' ' }), _jsx(Text, { backgroundColor: colors.delBg, color: isCont ? colors.delLineNum : colors.delSymbol, bold: !isCont, children: symbol }), _jsx(Text, { backgroundColor: colors.delBg, color: colors.text, children: content })] }));
-        }
-        case 'diff-context': {
-            const isCont = row.isContinuation;
-            // Use » for continuation - it's single-width and renders correctly
-            const symbol = isCont ? '\u00bb ' : '  ';
-            const content = wrapMode ? row.content : truncate(row.content, contentWidth);
-            return (_jsxs(Box, { children: [_jsxs(Text, { color: colors.contextLineNum, children: [formatLineNum(row.lineNum, lineNumWidth), " "] }), _jsx(Text, { dimColor: true, children: symbol }), _jsx(Text, { children: content })] }));
-        }
-        case 'commit-header':
-            return _jsx(Text, { color: "yellow", children: truncate(row.content, headerWidth) });
-        case 'commit-message':
-            return _jsx(Text, { children: truncate(row.content, headerWidth) });
-        case 'spacer':
-            return _jsx(Text, { children: " " });
-    }
-}
-/**
- * The ONE diff renderer used by all tabs.
- * Every row = exactly 1 terminal row.
- * No variable heights, no complexity.
- */
-export function UnifiedDiffView({ rows, maxHeight, scrollOffset, theme: themeName, width, wrapMode = false, }) {
-    const theme = useMemo(() => getTheme(themeName), [themeName]);
-    const lineNumWidth = useMemo(() => getDisplayRowsLineNumWidth(rows), [rows]);
-    if (rows.length === 0) {
-        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "No diff to display" }) }));
-    }
-    return (_jsx(Box, { flexDirection: "column", paddingX: 1, width: width, children: _jsx(ScrollableList, { items: rows, maxHeight: maxHeight, scrollOffset: scrollOffset, getKey: (_, i) => `row-${i}`, 
-            // NO getItemHeight - all rows are 1 line
-            renderItem: (row) => (_jsx(DisplayRowRenderer, { row: row, lineNumWidth: lineNumWidth, width: width, theme: theme, wrapMode: wrapMode })) }) }));
-}
-/**
- * Get total row count for scroll calculation.
- * Since every row = 1 terminal row, this is just rows.length.
- */
-export function getUnifiedDiffTotalRows(rows) {
-    return rows.length;
-}

package/dist/hooks/useCommitFlow.js

@@ -1,66 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import { validateCommit, formatCommitMessage } from '../services/commitService.js';
-/**
- * Hook that manages the commit flow state and logic.
- * Extracted from CommitPanel to separate concerns.
- */
-export function useCommitFlow(options) {
-    const { stagedCount, onCommit, onSuccess, getHeadMessage } = options;
-    const [message, setMessage] = useState('');
-    const [amend, setAmend] = useState(false);
-    const [isCommitting, setIsCommitting] = useState(false);
-    const [error, setError] = useState(null);
-    const [inputFocused, setInputFocused] = useState(false);
-    // Load HEAD message when amend is toggled
-    useEffect(() => {
-        if (amend) {
-            getHeadMessage().then((msg) => {
-                if (msg && !message) {
-                    setMessage(msg);
-                }
-            });
-        }
-    }, [amend, getHeadMessage]);
-    const toggleAmend = useCallback(() => {
-        setAmend((prev) => !prev);
-    }, []);
-    const handleSubmit = useCallback(async () => {
-        const validation = validateCommit(message, stagedCount, amend);
-        if (!validation.valid) {
-            setError(validation.error);
-            return;
-        }
-        setIsCommitting(true);
-        setError(null);
-        try {
-            await onCommit(formatCommitMessage(message), amend);
-            setMessage('');
-            setAmend(false);
-            onSuccess();
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Commit failed');
-        }
-        finally {
-            setIsCommitting(false);
-        }
-    }, [message, stagedCount, amend, onCommit, onSuccess]);
-    const reset = useCallback(() => {
-        setMessage('');
-        setAmend(false);
-        setError(null);
-        setInputFocused(false);
-    }, []);
-    return {
-        message,
-        amend,
-        isCommitting,
-        error,
-        inputFocused,
-        setMessage,
-        toggleAmend,
-        setInputFocused,
-        handleSubmit,
-        reset,
-    };
-}

package/dist/hooks/useCompareState.js

@@ -1,123 +0,0 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { getCompareItemIndexFromRow, getFileScrollOffset } from '../utils/rowCalculations.js';
-import { buildCompareDisplayRows, getDisplayRowsLineNumWidth, getWrappedRowCount, } from '../utils/displayRows.js';
-export function useCompareState({ repoPath, isActive, compareDiff, refreshCompareDiff, getCandidateBaseBranches, setCompareBaseBranch, selectCompareCommit, topPaneHeight, compareScrollOffset, setCompareScrollOffset, setDiffScrollOffset, status, wrapMode, terminalWidth, }) {
-    const [includeUncommitted, setIncludeUncommitted] = useState(true);
-    const [compareListSelection, setCompareListSelection] = useState(null);
-    const [compareSelectedIndex, setCompareSelectedIndex] = useState(0);
-    const compareSelectionInitialized = useRef(false);
-    const [baseBranchCandidates, setBaseBranchCandidates] = useState([]);
-    const [showBaseBranchPicker, setShowBaseBranchPicker] = useState(false);
-    // Fetch compare diff when tab becomes active
-    useEffect(() => {
-        if (repoPath && isActive) {
-            refreshCompareDiff(includeUncommitted);
-        }
-    }, [repoPath, isActive, status, refreshCompareDiff, includeUncommitted]);
-    // Fetch base branch candidates when entering compare view
-    useEffect(() => {
-        if (repoPath && isActive) {
-            getCandidateBaseBranches().then(setBaseBranchCandidates);
-        }
-    }, [repoPath, isActive, getCandidateBaseBranches]);
-    // Reset compare selection state when entering compare tab
-    useEffect(() => {
-        if (isActive) {
-            compareSelectionInitialized.current = false;
-            setCompareListSelection(null);
-            setDiffScrollOffset(0);
-        }
-    }, [isActive, setDiffScrollOffset]);
-    // Update compare selection when compareSelectedIndex changes (only after user interaction)
-    useEffect(() => {
-        if (isActive && compareDiff && compareSelectionInitialized.current) {
-            const commitCount = compareDiff.commits.length;
-            const fileCount = compareDiff.files.length;
-            if (compareSelectedIndex < commitCount) {
-                setCompareListSelection({ type: 'commit', index: compareSelectedIndex });
-                selectCompareCommit(compareSelectedIndex);
-                setDiffScrollOffset(0);
-            }
-            else if (compareSelectedIndex < commitCount + fileCount) {
-                const fileIndex = compareSelectedIndex - commitCount;
-                setCompareListSelection({ type: 'file', index: fileIndex });
-                const scrollTo = getFileScrollOffset(compareDiff, fileIndex);
-                setDiffScrollOffset(scrollTo);
-            }
-        }
-    }, [isActive, compareDiff, compareSelectedIndex, selectCompareCommit, setDiffScrollOffset]);
-    // Computed values
-    const compareTotalItems = useMemo(() => {
-        if (!compareDiff)
-            return 0;
-        return compareDiff.commits.length + compareDiff.files.length;
-    }, [compareDiff]);
-    // When wrap mode is enabled, account for wrapped lines
-    const compareDiffTotalRows = useMemo(() => {
-        const displayRows = buildCompareDisplayRows(compareDiff);
-        if (!wrapMode)
-            return displayRows.length;
-        const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
-        const contentWidth = terminalWidth - lineNumWidth - 5;
-        return getWrappedRowCount(displayRows, contentWidth, true);
-    }, [compareDiff, wrapMode, terminalWidth]);
-    // Handlers
-    const toggleIncludeUncommitted = useCallback(() => {
-        setIncludeUncommitted((prev) => !prev);
-    }, []);
-    const openBaseBranchPicker = useCallback(() => {
-        setShowBaseBranchPicker(true);
-    }, []);
-    const closeBaseBranchPicker = useCallback(() => {
-        setShowBaseBranchPicker(false);
-    }, []);
-    const selectBaseBranch = useCallback((branch) => {
-        setShowBaseBranchPicker(false);
-        setCompareBaseBranch(branch, includeUncommitted);
-    }, [setCompareBaseBranch, includeUncommitted]);
-    const markSelectionInitialized = useCallback(() => {
-        compareSelectionInitialized.current = true;
-    }, []);
-    const navigateCompareUp = useCallback(() => {
-        compareSelectionInitialized.current = true;
-        setCompareSelectedIndex((prev) => {
-            const newIndex = Math.max(0, prev - 1);
-            if (newIndex < compareScrollOffset)
-                setCompareScrollOffset(newIndex);
-            return newIndex;
-        });
-    }, [compareScrollOffset, setCompareScrollOffset]);
-    const navigateCompareDown = useCallback(() => {
-        compareSelectionInitialized.current = true;
-        setCompareSelectedIndex((prev) => {
-            const newIndex = Math.min(compareTotalItems - 1, prev + 1);
-            const visibleEnd = compareScrollOffset + topPaneHeight - 2;
-            if (newIndex >= visibleEnd)
-                setCompareScrollOffset(compareScrollOffset + 1);
-            return newIndex;
-        });
-    }, [compareTotalItems, compareScrollOffset, topPaneHeight, setCompareScrollOffset]);
-    const getItemIndexFromRow = useCallback((visualRow) => {
-        if (!compareDiff)
-            return -1;
-        return getCompareItemIndexFromRow(visualRow, compareDiff.commits.length, compareDiff.files.length);
-    }, [compareDiff]);
-    return {
-        includeUncommitted,
-        compareListSelection,
-        compareSelectedIndex,
-        baseBranchCandidates,
-        showBaseBranchPicker,
-        compareTotalItems,
-        compareDiffTotalRows,
-        setCompareSelectedIndex,
-        toggleIncludeUncommitted,
-        openBaseBranchPicker,
-        closeBaseBranchPicker,
-        selectBaseBranch,
-        navigateCompareUp,
-        navigateCompareDown,
-        markSelectionInitialized,
-        getItemIndexFromRow,
-    };
-}