diffstalker 0.1.6 → 0.1.7

package/dist/components/BottomPane.js

@@ -1 +1,101 @@
-import{jsx as r,jsxs as s}from"react/jsx-runtime";import{useMemo as v}from"react";import{Box as l,Text as i}from"ink";import{UnifiedDiffView as U}from"./UnifiedDiffView.js";import{CommitPanel as X}from"./CommitPanel.js";import{ExplorerContentView as k}from"./ExplorerContentView.js";import{shortenPath as g}from"../utils/formatPath.js";import{buildDiffDisplayRows as H,buildHistoryDisplayRows as q,buildCompareDisplayRows as z,getDisplayRowsLineNumWidth as F,wrapDisplayRows as J}from"../utils/displayRows.js";export function BottomPane({bottomTab:n,currentPane:t,terminalWidth:o,bottomPaneHeight:w,diffScrollOffset:I,currentTheme:N,diff:m,selectedFile:C,stagedCount:B,onCommit:O,onCommitCancel:D,getHeadCommitMessage:G,onCommitInputFocusChange:M,historySelectedCommit:f,historyCommitDiff:y,compareDiff:e,compareLoading:V,compareError:R,compareListSelection:u,compareSelectionDiff:x,wrapMode:p,explorerSelectedFile:h=null,explorerFileScrollOffset:Y=0}){const a=t!=="files"&&t!=="history"&&t!=="compare"&&t!=="explorer",c=v(()=>n==="diff"?H(m):n==="history"?q(f,y):n==="compare"?u?.type==="commit"&&x?H(x):z(e):[],[n,m,f,y,u,x,e]),_=v(()=>{if(!p||c.length===0)return c;const d=F(c),E=o-d-5;return J(c,E,p)},[c,o,p]),j=()=>{if(C&&n==="diff")return r(i,{dimColor:!0,children:g(C.path,o-10)});if(n==="history"&&f)return s(i,{dimColor:!0,children:[f.shortHash," - ",f.message.slice(0,50)]});if(n==="compare"&&u)if(u.type==="commit"){const d=e?.commits[u.index];return s(i,{dimColor:!0,children:[d?.shortHash??""," - ",d?.message.slice(0,40)??""]})}else{const d=e?.files[u.index]?.path??"";return r(i,{dimColor:!0,children:g(d,o-10)})}return n==="explorer"&&h?r(i,{dimColor:!0,children:g(h.path,o-10)}):null},A=()=>{if(n==="commit")return r(X,{isActive:t==="commit",stagedCount:B,onCommit:O,onCancel:D,getHeadMessage:G,onInputFocusChange:M});if(n==="compare"){if(V)return r(i,{dimColor:!0,children:"Loading compare diff..."});if(R)return r(i,{color:"red",children:R});if(!e)return r(i,{dimColor:!0,children:"No base branch found (no origin/main or origin/master)"});if(e.files.length===0)return s(i,{dimColor:!0,children:["No changes compared to ",e.baseBranch]})}return r(U,{rows:_,maxHeight:w-1,scrollOffset:I,theme:N,width:o,wrapMode:p})};return n==="explorer"?s(l,{flexDirection:"column",height:w,width:o,overflowY:"hidden",children:[s(l,{width:o,children:[r(i,{bold:!0,color:a?"cyan":void 0,children:"FILE"}),r(l,{flexGrow:1,justifyContent:"flex-end",children:j()})]}),r(k,{filePath:h?.path??null,content:h?.content??null,maxHeight:w-1,scrollOffset:Y,truncated:h?.truncated})]}):s(l,{flexDirection:"column",height:w,width:o,overflowX:"hidden",overflowY:"hidden",children:[s(l,{width:o,children:[r(i,{bold:!0,color:a?"cyan":void 0,children:n==="commit"?"COMMIT":"DIFF"}),r(l,{flexGrow:1,justifyContent:"flex-end",children:j()})]}),A()]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { UnifiedDiffView } from './UnifiedDiffView.js';
+import { CommitPanel } from './CommitPanel.js';
+import { ExplorerContentView } from './ExplorerContentView.js';
+import { shortenPath } from '../utils/formatPath.js';
+import { buildDiffDisplayRows, buildHistoryDisplayRows, buildCompareDisplayRows, getDisplayRowsLineNumWidth, wrapDisplayRows, } from '../utils/displayRows.js';
+export function BottomPane({ bottomTab, currentPane, terminalWidth, bottomPaneHeight, diffScrollOffset, currentTheme, diff, selectedFile, stagedCount, onCommit, onCommitCancel, getHeadCommitMessage, onCommitInputFocusChange, historySelectedCommit, historyCommitDiff, compareDiff, compareLoading, compareError, compareListSelection, compareSelectionDiff, wrapMode, explorerSelectedFile = null, explorerFileScrollOffset = 0, showMiddleDots = false, }) {
+    const isDiffFocused = currentPane !== 'files' &&
+        currentPane !== 'history' &&
+        currentPane !== 'compare' &&
+        currentPane !== 'explorer';
+    // Build display rows based on current tab
+    const displayRows = useMemo(() => {
+        if (bottomTab === 'diff') {
+            return buildDiffDisplayRows(diff);
+        }
+        if (bottomTab === 'history') {
+            return buildHistoryDisplayRows(historySelectedCommit, historyCommitDiff);
+        }
+        if (bottomTab === 'compare') {
+            // If a specific commit is selected, show that commit's diff
+            if (compareListSelection?.type === 'commit' && compareSelectionDiff) {
+                return buildDiffDisplayRows(compareSelectionDiff);
+            }
+            // Otherwise show combined compare diff
+            return buildCompareDisplayRows(compareDiff);
+        }
+        return [];
+    }, [
+        bottomTab,
+        diff,
+        historySelectedCommit,
+        historyCommitDiff,
+        compareListSelection,
+        compareSelectionDiff,
+        compareDiff,
+    ]);
+    // Wrap display rows if wrap mode is enabled
+    const wrappedRows = useMemo(() => {
+        if (!wrapMode || displayRows.length === 0)
+            return displayRows;
+        // Calculate content width: width - paddingX(1) - lineNum - space(1) - symbol(1) - space(1) - paddingX(1)
+        const lineNumWidth = getDisplayRowsLineNumWidth(displayRows);
+        const contentWidth = terminalWidth - lineNumWidth - 5;
+        return wrapDisplayRows(displayRows, contentWidth, wrapMode);
+    }, [displayRows, terminalWidth, wrapMode]);
+    // Build header right-side content
+    const renderHeaderRight = () => {
+        if (selectedFile && bottomTab === 'diff') {
+            return _jsx(Text, { dimColor: true, children: shortenPath(selectedFile.path, terminalWidth - 10) });
+        }
+        if (bottomTab === 'history' && historySelectedCommit) {
+            return (_jsxs(Text, { dimColor: true, children: [historySelectedCommit.shortHash, " - ", historySelectedCommit.message.slice(0, 50)] }));
+        }
+        if (bottomTab === 'compare' && compareListSelection) {
+            if (compareListSelection.type === 'commit') {
+                const commit = compareDiff?.commits[compareListSelection.index];
+                return (_jsxs(Text, { dimColor: true, children: [commit?.shortHash ?? '', " - ", commit?.message.slice(0, 40) ?? ''] }));
+            }
+            else {
+                const path = compareDiff?.files[compareListSelection.index]?.path ?? '';
+                return _jsx(Text, { dimColor: true, children: shortenPath(path, terminalWidth - 10) });
+            }
+        }
+        if (bottomTab === 'explorer' && explorerSelectedFile) {
+            return _jsx(Text, { dimColor: true, children: shortenPath(explorerSelectedFile.path, terminalWidth - 10) });
+        }
+        return null;
+    };
+    // Render content based on tab
+    const renderContent = () => {
+        // Commit tab is special - not a diff view
+        if (bottomTab === 'commit') {
+            return (_jsx(CommitPanel, { isActive: currentPane === 'commit', stagedCount: stagedCount, onCommit: onCommit, onCancel: onCommitCancel, getHeadMessage: getHeadCommitMessage, onInputFocusChange: onCommitInputFocusChange }));
+        }
+        // Compare tab loading/error states
+        if (bottomTab === 'compare') {
+            if (compareLoading) {
+                return _jsx(Text, { dimColor: true, children: "Loading compare diff..." });
+            }
+            if (compareError) {
+                return _jsx(Text, { color: "red", children: compareError });
+            }
+            if (!compareDiff) {
+                return _jsx(Text, { dimColor: true, children: "No base branch found (no origin/main or origin/master)" });
+            }
+            if (compareDiff.files.length === 0) {
+                return _jsxs(Text, { dimColor: true, children: ["No changes compared to ", compareDiff.baseBranch] });
+            }
+        }
+        // All diff views use UnifiedDiffView
+        return (_jsx(UnifiedDiffView, { rows: wrappedRows, maxHeight: bottomPaneHeight - 1, scrollOffset: diffScrollOffset, theme: currentTheme, width: terminalWidth, wrapMode: wrapMode }));
+    };
+    // Explorer tab content
+    if (bottomTab === 'explorer') {
+        return (_jsxs(Box, { flexDirection: "column", height: bottomPaneHeight, width: terminalWidth, overflowY: "hidden", children: [_jsxs(Box, { width: terminalWidth, children: [_jsx(Text, { bold: true, color: isDiffFocused ? 'cyan' : undefined, children: "FILE" }), _jsx(Box, { flexGrow: 1, justifyContent: "flex-end", children: renderHeaderRight() })] }), _jsx(ExplorerContentView, { filePath: explorerSelectedFile?.path ?? null, content: explorerSelectedFile?.content ?? null, maxHeight: bottomPaneHeight - 1, scrollOffset: explorerFileScrollOffset, truncated: explorerSelectedFile?.truncated, wrapMode: wrapMode, width: terminalWidth, showMiddleDots: showMiddleDots })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", height: bottomPaneHeight, width: terminalWidth, overflowX: "hidden", overflowY: "hidden", children: [_jsxs(Box, { width: terminalWidth, children: [_jsx(Text, { bold: true, color: isDiffFocused ? 'cyan' : undefined, children: bottomTab === 'commit' ? 'COMMIT' : 'DIFF' }), _jsx(Box, { flexGrow: 1, justifyContent: "flex-end", children: renderHeaderRight() })] }), renderContent()] }));
+}

package/dist/components/CommitPanel.js

@@ -1 +1,58 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useEffect as T}from"react";import{Box as o,Text as r,useInput as S}from"ink";import j from"ink-text-input";import{useCommitFlow as w}from"../hooks/useCommitFlow.js";export function CommitPanel({isActive:l,stagedCount:c,onCommit:p,onCancel:s,getHeadMessage:x,onInputFocusChange:a}){const{message:t,amend:m,isCommitting:C,error:u,inputFocused:i,setMessage:E,toggleAmend:f,setInputFocused:g,handleSubmit:b}=w({stagedCount:c,onCommit:p,onSuccess:s,getHeadMessage:x});return T(()=>{a?.(i)},[i,a]),S((d,h)=>{if(l){if(h.escape){i?g(!1):s();return}if(!i){if(d==="i"||h.return){g(!0);return}if(d==="a"){f();return}return}if(d==="a"&&!t){f();return}}},{isActive:l}),l?n(o,{flexDirection:"column",paddingX:1,children:[n(o,{marginBottom:1,children:[e(r,{bold:!0,children:"Commit Message"}),m&&e(r,{color:"yellow",children:" (amending)"})]}),e(o,{borderStyle:"round",borderColor:i?"cyan":void 0,paddingX:1,children:i?e(j,{value:t,onChange:E,onSubmit:b,placeholder:"Enter commit message..."}):e(r,{dimColor:!t,children:t||"Press i or Enter to edit..."})}),n(o,{marginTop:1,gap:2,children:[n(r,{color:m?"green":"gray",children:["[",m?"x":" ","] Amend"]}),e(r,{dimColor:!0,children:"(a)"})]}),u&&e(o,{marginTop:1,children:e(r,{color:"red",children:u})}),C&&e(o,{marginTop:1,children:e(r,{color:"yellow",children:"Committing..."})}),e(o,{marginTop:1,children:n(r,{dimColor:!0,children:["Staged: ",c," file(s) |"," ",i?"Enter: commit | Esc: unfocus":"i/Enter: edit | Esc: cancel | 1/3: switch tab"]})})]}):e(o,{paddingX:1,children:e(r,{dimColor:!0,children:"Press '2' or 'c' to open commit panel"})})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useCommitFlow } from '../hooks/useCommitFlow.js';
+export function CommitPanel({ isActive, stagedCount, onCommit, onCancel, getHeadMessage, onInputFocusChange, }) {
+    const { message, amend, isCommitting, error, inputFocused, setMessage, toggleAmend, setInputFocused, handleSubmit, } = useCommitFlow({
+        stagedCount,
+        onCommit,
+        onSuccess: onCancel,
+        getHeadMessage,
+    });
+    // Notify parent of focus state changes
+    useEffect(() => {
+        onInputFocusChange?.(inputFocused);
+    }, [inputFocused, onInputFocusChange]);
+    // Keyboard handling
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // When input is focused, Escape unfocuses it (but stays on commit tab)
+        // When input is unfocused, Escape cancels and goes back to diff
+        if (key.escape) {
+            if (inputFocused) {
+                setInputFocused(false);
+            }
+            else {
+                onCancel();
+            }
+            return;
+        }
+        // When input is unfocused, allow refocusing with 'i' or Enter
+        if (!inputFocused) {
+            if (input === 'i' || key.return) {
+                setInputFocused(true);
+                return;
+            }
+            // Toggle amend with 'a' when unfocused
+            if (input === 'a') {
+                toggleAmend();
+                return;
+            }
+            return; // Don't handle other keys - let them bubble up to useKeymap
+        }
+        // When input is focused, only handle special keys
+        // Toggle amend with 'a' when message is empty
+        if (input === 'a' && !message) {
+            toggleAmend();
+            return;
+        }
+    }, { isActive });
+    if (!isActive) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Press '2' or 'c' to open commit panel" }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Commit Message" }), amend && _jsx(Text, { color: "yellow", children: " (amending)" })] }), _jsx(Box, { borderStyle: "round", borderColor: inputFocused ? 'cyan' : undefined, paddingX: 1, children: inputFocused ? (_jsx(TextInput, { value: message, onChange: setMessage, onSubmit: handleSubmit, placeholder: "Enter commit message..." })) : (_jsx(Text, { dimColor: !message, children: message || 'Press i or Enter to edit...' })) }), _jsxs(Box, { marginTop: 1, gap: 2, children: [_jsxs(Text, { color: amend ? 'green' : 'gray', children: ["[", amend ? 'x' : ' ', "] Amend"] }), _jsx(Text, { dimColor: true, children: "(a)" })] }), error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: error }) })), isCommitting && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "Committing..." }) })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Staged: ", stagedCount, " file(s) |", ' ', inputFocused
+                            ? 'Enter: commit | Esc: unfocus'
+                            : 'i/Enter: edit | Esc: cancel | 1/3: switch tab'] }) })] }));
+}

package/dist/components/CompareListView.js

@@ -1 +1,110 @@
-import{jsx as o,jsxs as l,Fragment as E}from"react/jsx-runtime";import{useMemo as R}from"react";import{Box as f,Text as n}from"ink";import{shortenPath as F}from"../utils/formatPath.js";import{formatDate as D}from"../utils/formatDate.js";import{formatCommitDisplay as I}from"../utils/commitFormat.js";export{getCompareItemIndexFromRow}from"../utils/rowCalculations.js";function L({commit:e,isSelected:r,isActive:i,width:s}){const d=D(e.date),m=13+d.length+2,c=s-m,{displayMessage:g,displayRefs:u}=I(e.message,e.refs,c);return l(f,{children:[o(n,{children:" "}),o(n,{color:"yellow",children:e.shortHash}),o(n,{children:" "}),o(n,{color:r&&i?"cyan":void 0,bold:r&&i,inverse:r&&i,children:g}),o(n,{children:" "}),l(n,{dimColor:!0,children:["(",d,")"]}),u&&l(E,{children:[o(n,{children:" "}),o(n,{color:"green",children:u})]})]})}function T({file:e,isSelected:r,isActive:i,maxPathLength:s}){const d={added:"green",modified:"yellow",deleted:"red",renamed:"blue"},m={added:"A",modified:"M",deleted:"D",renamed:"R"},c=e.isUncommitted??!1,g=5+String(e.additions).length+String(e.deletions).length,u=c?14:0,x=s-g-u;return l(f,{children:[o(n,{children:" "}),c&&o(n,{color:"magenta",bold:!0,children:"*"}),o(n,{color:c?"magenta":d[e.status],bold:!0,children:m[e.status]}),l(n,{bold:r&&i,color:r&&i?"cyan":c?"magenta":void 0,inverse:r&&i,children:[" ",F(e.path,x)]}),o(n,{dimColor:!0,children:" ("}),l(n,{color:"green",children:["+",e.additions]}),o(n,{dimColor:!0,children:" "}),l(n,{color:"red",children:["-",e.deletions]}),o(n,{dimColor:!0,children:")"}),c&&l(n,{color:"magenta",dimColor:!0,children:[" ","[uncommitted]"]})]})}export function CompareListView({commits:e,files:r,selectedItem:i,scrollOffset:s,maxHeight:d,isActive:m,width:c}){const y=R(()=>{const t=[];return e.length>0&&(t.push({type:"section-header",sectionType:"commits"}),e.forEach((p,a)=>{t.push({type:"commit",commitIndex:a,commit:p})})),r.length>0&&(e.length>0&&t.push({type:"spacer"}),t.push({type:"section-header",sectionType:"files"}),r.forEach((p,a)=>{t.push({type:"file",fileIndex:a,file:p})})),t},[e,r,!0,!0]).slice(s,s+d);return e.length===0&&r.length===0?o(f,{flexDirection:"column",children:o(n,{dimColor:!0,children:"No changes compared to base branch"})}):o(f,{flexDirection:"column",children:y.map((t,p)=>{const a=`row-${s+p}`;if(t.type==="section-header"){const h=t.sectionType==="commits",C=!0,b=h?e.length:r.length;return l(f,{children:[l(n,{bold:!0,color:"cyan",children:[C?"\u25BC":"\u25B6"," ",h?"Commits":"Files"]}),l(n,{dimColor:!0,children:[" (",b,")"]})]},a)}if(t.type==="spacer")return o(n,{children:" "},a);if(t.type==="commit"&&t.commit!==void 0&&t.commitIndex!==void 0){const h=i?.type==="commit"&&i.index===t.commitIndex;return o(L,{commit:t.commit,isSelected:h,isActive:m,width:c},a)}if(t.type==="file"&&t.file!==void 0&&t.fileIndex!==void 0){const h=i?.type==="file"&&i.index===t.fileIndex;return o(T,{file:t.file,isSelected:h,isActive:m,maxPathLength:c-5},a)}return null})})}export function getCompareListTotalRows(e,r,i=!0,s=!0){let d=0;return e.length>0&&(d+=1,i&&(d+=e.length)),r.length>0&&(e.length>0&&(d+=1),d+=1,s&&(d+=r.length)),d}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { shortenPath } from '../utils/formatPath.js';
+import { formatDate } from '../utils/formatDate.js';
+import { formatCommitDisplay } from '../utils/commitFormat.js';
+// Re-export from utils for backwards compatibility
+export { getCompareItemIndexFromRow } from '../utils/rowCalculations.js';
+function CommitRow({ commit, isSelected, isActive, width, }) {
+    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 = width - baseWidth;
+    const { displayMessage, displayRefs } = formatCommitDisplay(commit.message, commit.refs, remainingWidth);
+    return (_jsxs(Box, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "yellow", children: commit.shortHash }), _jsx(Text, { children: " " }), _jsx(Text, { color: isSelected && isActive ? 'cyan' : undefined, bold: isSelected && isActive, inverse: isSelected && isActive, children: displayMessage }), _jsx(Text, { children: " " }), _jsxs(Text, { dimColor: true, children: ["(", dateStr, ")"] }), displayRefs && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: "green", children: displayRefs })] }))] }));
+}
+function FileRow({ file, isSelected, isActive, maxPathLength, }) {
+    const statusColors = {
+        added: 'green',
+        modified: 'yellow',
+        deleted: 'red',
+        renamed: 'blue',
+    };
+    const statusChars = {
+        added: 'A',
+        modified: 'M',
+        deleted: 'D',
+        renamed: 'R',
+    };
+    const isUncommitted = file.isUncommitted ?? false;
+    // Account for stats: " (+123 -456)" and possible "[uncommitted]"
+    const statsLength = 5 + String(file.additions).length + String(file.deletions).length;
+    const uncommittedLength = isUncommitted ? 14 : 0;
+    const availableForPath = maxPathLength - statsLength - uncommittedLength;
+    return (_jsxs(Box, { children: [_jsx(Text, { children: " " }), isUncommitted && (_jsx(Text, { color: "magenta", bold: true, children: "*" })), _jsx(Text, { color: isUncommitted ? 'magenta' : statusColors[file.status], bold: true, children: statusChars[file.status] }), _jsxs(Text, { bold: isSelected && isActive, color: isSelected && isActive ? 'cyan' : isUncommitted ? 'magenta' : undefined, inverse: isSelected && isActive, children: [' ', shortenPath(file.path, availableForPath)] }), _jsx(Text, { dimColor: true, children: " (" }), _jsxs(Text, { color: "green", children: ["+", file.additions] }), _jsx(Text, { dimColor: true, children: " " }), _jsxs(Text, { color: "red", children: ["-", file.deletions] }), _jsx(Text, { dimColor: true, children: ")" }), isUncommitted && (_jsxs(Text, { color: "magenta", dimColor: true, children: [' ', "[uncommitted]"] }))] }));
+}
+export function CompareListView({ commits, files, selectedItem, scrollOffset, maxHeight, isActive, width, }) {
+    // Note: expand/collapse functionality is prepared but not exposed yet
+    const commitsExpanded = true;
+    const filesExpanded = true;
+    // Build flat list of rows
+    const rows = useMemo(() => {
+        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
+        if (files.length > 0) {
+            if (commits.length > 0) {
+                result.push({ type: 'spacer' });
+            }
+            result.push({ type: 'section-header', sectionType: 'files' });
+            if (filesExpanded) {
+                files.forEach((file, i) => {
+                    result.push({ type: 'file', fileIndex: i, file });
+                });
+            }
+        }
+        return result;
+    }, [commits, files, commitsExpanded, filesExpanded]);
+    const visibleRows = rows.slice(scrollOffset, scrollOffset + maxHeight);
+    if (commits.length === 0 && files.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "No changes compared to base branch" }) }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: visibleRows.map((row, i) => {
+            const key = `row-${scrollOffset + i}`;
+            if (row.type === 'section-header') {
+                const isCommits = row.sectionType === 'commits';
+                const expanded = isCommits ? commitsExpanded : filesExpanded;
+                const count = isCommits ? commits.length : files.length;
+                const label = isCommits ? 'Commits' : 'Files';
+                return (_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: "cyan", children: [expanded ? '▼' : '▶', " ", label] }), _jsxs(Text, { dimColor: true, children: [" (", count, ")"] })] }, key));
+            }
+            if (row.type === 'spacer') {
+                return _jsx(Text, { children: " " }, key);
+            }
+            if (row.type === 'commit' && row.commit !== undefined && row.commitIndex !== undefined) {
+                const isSelected = selectedItem?.type === 'commit' && selectedItem.index === row.commitIndex;
+                return (_jsx(CommitRow, { commit: row.commit, isSelected: isSelected, isActive: isActive, width: width }, key));
+            }
+            if (row.type === 'file' && row.file !== undefined && row.fileIndex !== undefined) {
+                const isSelected = selectedItem?.type === 'file' && selectedItem.index === row.fileIndex;
+                return (_jsx(FileRow, { file: row.file, isSelected: isSelected, isActive: isActive, maxPathLength: width - 5 }, key));
+            }
+            return null;
+        }) }));
+}
+// Helper to get total row count for scrolling
+export function getCompareListTotalRows(commits, files, commitsExpanded = true, filesExpanded = true) {
+    let count = 0;
+    if (commits.length > 0) {
+        count += 1; // header
+        if (commitsExpanded)
+            count += commits.length;
+    }
+    if (files.length > 0) {
+        if (commits.length > 0)
+            count += 1; // spacer
+        count += 1; // header
+        if (filesExpanded)
+            count += files.length;
+    }
+    return count;
+}

package/dist/components/ExplorerContentView.js

@@ -1,3 +1,80 @@
-import{jsx as e,jsxs as m}from"react/jsx-runtime";import{useMemo as u}from"react";import{Box as t,Text as n}from"ink";import{ScrollableList as f}from"./ScrollableList.js";export function ExplorerContentView({filePath:i,content:l,maxHeight:c,scrollOffset:s,truncated:h=!1}){const o=u(()=>l?l.split(`
-`).map((r,d)=>({lineNum:d+1,content:r})):[],[l]),a=u(()=>{const r=o.length;return Math.max(3,String(r).length)},[o.length]);return i?l?o.length===0?e(t,{paddingX:1,children:e(n,{dimColor:!0,children:"(empty file)"})}):m(t,{flexDirection:"column",paddingX:1,children:[e(f,{items:o,maxHeight:c,scrollOffset:s,getKey:r=>`${r.lineNum}`,renderItem:r=>{const d=String(r.lineNum).padStart(a," ");return m(t,{children:[m(n,{dimColor:!0,children:[d," "]}),e(n,{children:r.content||" "})]})}}),h&&e(t,{children:e(n,{color:"yellow",dimColor:!0,children:"(file truncated)"})})]}):e(t,{paddingX:1,children:e(n,{dimColor:!0,children:"Loading..."})}):e(t,{paddingX:1,children:e(n,{dimColor:!0,children:"Select a file to view its contents"})})}export function getExplorerContentTotalRows(i){return i?i.split(`
-`).length:0}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { ScrollableList } from './ScrollableList.js';
+import { buildExplorerContentRows, wrapExplorerContentRows, getExplorerContentRowCount, getExplorerContentLineNumWidth, applyMiddleDots, } from '../utils/explorerDisplayRows.js';
+import { truncateAnsi } from '../utils/ansiTruncate.js';
+export function ExplorerContentView({ filePath, content, maxHeight, scrollOffset, truncated = false, wrapMode = false, width, showMiddleDots = false, }) {
+    // Build base rows with syntax highlighting
+    const baseRows = useMemo(() => buildExplorerContentRows(content, filePath, truncated), [content, filePath, truncated]);
+    // Calculate line number width
+    const lineNumWidth = useMemo(() => getExplorerContentLineNumWidth(baseRows), [baseRows]);
+    // Calculate content width for wrapping
+    // Layout: paddingX(1) + lineNum + space(1) + content + paddingX(1)
+    const contentWidth = width - lineNumWidth - 3;
+    // Apply wrapping if enabled
+    const displayRows = useMemo(() => wrapExplorerContentRows(baseRows, contentWidth, wrapMode), [baseRows, contentWidth, wrapMode]);
+    if (!filePath) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Select a file to view its contents" }) }));
+    }
+    if (!content) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Loading..." }) }));
+    }
+    if (displayRows.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "(empty file)" }) }));
+    }
+    return (_jsx(Box, { flexDirection: "column", paddingX: 1, children: _jsx(ScrollableList, { items: displayRows, maxHeight: maxHeight, scrollOffset: scrollOffset, getKey: (row, index) => `${index}`, renderItem: (row) => {
+                if (row.type === 'truncation') {
+                    return (_jsx(Box, { children: _jsx(Text, { color: "yellow", dimColor: true, children: row.content }) }));
+                }
+                // Code row
+                const isContinuation = row.isContinuation ?? false;
+                // Line number display
+                let lineNumDisplay;
+                if (isContinuation) {
+                    // Show continuation marker instead of line number
+                    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
+                    displayContent = shouldTruncate
+                        ? truncateAnsi(row.highlighted, contentWidth)
+                        : row.highlighted;
+                }
+                else {
+                    // Plain content path
+                    let content = rawContent;
+                    // Apply middle-dots to raw content
+                    if (showMiddleDots && !isContinuation) {
+                        content = applyMiddleDots(content, true);
+                    }
+                    // Simple truncation for plain content
+                    if (shouldTruncate) {
+                        content = content.slice(0, Math.max(0, contentWidth - 1)) + '…';
+                    }
+                    displayContent = content;
+                }
+                return (_jsxs(Box, { children: [_jsxs(Text, { dimColor: !isContinuation, color: isContinuation ? 'cyan' : undefined, children: [lineNumDisplay, ' '] }), _jsx(Text, { dimColor: showMiddleDots && !canUseHighlighting, children: displayContent || ' ' })] }));
+            } }) }));
+}
+/**
+ * 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 - 3;
+    return getExplorerContentRowCount(rows, contentWidth, wrapMode);
+}

package/dist/components/ExplorerView.js

@@ -1 +1,37 @@
-import{jsxs as y,jsx as e}from"react/jsx-runtime";import{Box as t,Text as n}from"ink";import{ScrollableList as g}from"./ScrollableList.js";export function ExplorerView({currentPath:o,items:i,selectedIndex:a,scrollOffset:s,maxHeight:u,isActive:m,width:f,isLoading:h=!1,error:c=null}){if(c)return e(t,{flexDirection:"column",children:y(n,{color:"red",children:["Error: ",c]})});if(h)return e(t,{flexDirection:"column",children:e(n,{dimColor:!0,children:"Loading..."})});if(i.length===0)return e(t,{flexDirection:"column",children:e(n,{dimColor:!0,children:"(empty directory)"})});const x=Math.min(Math.max(...i.map(r=>r.name.length+(r.isDirectory?1:0))),f-10);return e(g,{items:i,maxHeight:u,scrollOffset:s,getKey:r=>r.path||r.name,renderItem:(r,p)=>{const l=p===a&&m,d=(r.isDirectory?`${r.name}/`:r.name).padEnd(x+1);return e(t,{children:e(n,{color:l?"cyan":void 0,bold:l,inverse:l,children:r.isDirectory?e(n,{color:l?"cyan":"blue",children:d}):e(n,{color:l?"cyan":void 0,children:d})})})}})}export function buildBreadcrumbs(o){return o?o.split("/").filter(Boolean):[]}export function getExplorerTotalRows(o){return o.length}
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { ScrollableList } from './ScrollableList.js';
+export function ExplorerView({ currentPath: _currentPath, items, selectedIndex, scrollOffset, maxHeight, isActive, width, isLoading = false, error = null, }) {
+    if (error) {
+        return (_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { color: "red", children: ["Error: ", error] }) }));
+    }
+    if (isLoading) {
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "Loading..." }) }));
+    }
+    if (items.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "(empty directory)" }) }));
+    }
+    // Calculate max name width for alignment
+    const maxNameWidth = Math.min(Math.max(...items.map((item) => item.name.length + (item.isDirectory ? 1 : 0))), width - 10);
+    return (_jsx(ScrollableList, { items: items, maxHeight: maxHeight, scrollOffset: scrollOffset, getKey: (item) => item.path || item.name, renderItem: (item, actualIndex) => {
+            const isSelected = actualIndex === selectedIndex && isActive;
+            const displayName = item.isDirectory ? `${item.name}/` : item.name;
+            const paddedName = displayName.padEnd(maxNameWidth + 1);
+            return (_jsx(Box, { children: _jsx(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, inverse: isSelected, children: item.isDirectory ? (_jsx(Text, { color: isSelected ? 'cyan' : 'blue', children: paddedName })) : (_jsx(Text, { color: isSelected ? 'cyan' : undefined, children: paddedName })) }) }));
+        } }));
+}
+/**
+ * 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);
+}
+/**
+ * Get total rows in explorer for scroll calculations.
+ */
+export function getExplorerTotalRows(items) {
+    return items.length;
+}

package/dist/components/FileList.js

@@ -1 +1,131 @@
-import{jsx as d,jsxs as l}from"react/jsx-runtime";import{Box as x,Text as t}from"ink";import{shortenPath as C}from"../utils/formatPath.js";import{categorizeFiles as F}from"../utils/fileCategories.js";function P(e){switch(e){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 b(e){switch(e){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 k(e,s){if(e===void 0&&s===void 0)return null;const i=e??0,o=s??0;if(i===0&&o===0)return null;const c=[];return i>0&&c.push(`+${i}`),o>0&&c.push(`-${o}`),c.join(" ")}function j({file:e,isSelected:s,isFocused:i,maxPathLength:o}){const c=P(e.status),f=b(e.status),g=e.staged?"[-]":"[+]",h=e.staged?"red":"green",u=k(e.insertions,e.deletions),a=s&&i,r=u?u.length+1:0,p=o-r,m=C(e.path,p);return l(x,{children:[d(t,{color:a?"cyan":void 0,bold:a,children:a?"\u25B8 ":"  "}),l(t,{color:h,children:[g," "]}),l(t,{color:f,children:[c," "]}),d(t,{color:a?"cyan":void 0,inverse:a,children:m}),e.originalPath&&l(t,{dimColor:!0,children:[" \u2190 ",C(e.originalPath,30)]}),u&&l(t,{children:[d(t,{dimColor:!0,children:" "}),e.insertions!==void 0&&e.insertions>0&&l(t,{color:"green",children:["+",e.insertions]}),e.insertions!==void 0&&e.insertions>0&&e.deletions!==void 0&&e.deletions>0&&d(t,{dimColor:!0,children:" "}),e.deletions!==void 0&&e.deletions>0&&l(t,{color:"red",children:["-",e.deletions]})]})]})}export function FileList({files:e,selectedIndex:s,isFocused:i,scrollOffset:o=0,maxHeight:c,width:f=80}){const g=f-10,{modified:h,untracked:u,staged:a}=F(e);if(e.length===0)return d(x,{flexDirection:"column",children:d(t,{dimColor:!0,children:" No changes"})});const r=[];let p=0;h.length>0&&(r.push({type:"header",content:"Modified:",headerColor:"yellow"}),h.forEach(n=>{r.push({type:"file",file:n,fileIndex:p++})})),u.length>0&&(h.length>0&&r.push({type:"spacer"}),r.push({type:"header",content:"Untracked:",headerColor:"gray"}),u.forEach(n=>{r.push({type:"file",file:n,fileIndex:p++})})),a.length>0&&((h.length>0||u.length>0)&&r.push({type:"spacer"}),r.push({type:"header",content:"Staged:",headerColor:"green"}),a.forEach(n=>{r.push({type:"file",file:n,fileIndex:p++})}));const m=c?r.slice(o,o+c):r.slice(o);return d(x,{flexDirection:"column",children:m.map((n,I)=>{const y=`row-${o+I}`;return n.type==="header"?d(t,{bold:!0,color:n.headerColor,children:n.content},y):n.type==="spacer"?d(t,{children:" "},y):n.type==="file"&&n.file!==void 0&&n.fileIndex!==void 0?d(j,{file:n.file,isSelected:n.fileIndex===s,isFocused:i,maxPathLength:g},y):null})})}export function getFileAtIndex(e,s){const{ordered:i}=F(e);return i[s]??null}export function getTotalFileCount(e){return e.length}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { shortenPath } from '../utils/formatPath.js';
+import { categorizeFiles } from '../utils/fileCategories.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 null;
+    const add = insertions ?? 0;
+    const del = deletions ?? 0;
+    if (add === 0 && del === 0)
+        return null;
+    const parts = [];
+    if (add > 0)
+        parts.push(`+${add}`);
+    if (del > 0)
+        parts.push(`-${del}`);
+    return parts.join(' ');
+}
+function FileRow({ file, isSelected, isFocused, maxPathLength }) {
+    const statusChar = getStatusChar(file.status);
+    const statusColor = getStatusColor(file.status);
+    const actionButton = file.staged ? '[-]' : '[+]';
+    const buttonColor = file.staged ? 'red' : 'green';
+    const stats = formatStats(file.insertions, file.deletions);
+    const isHighlighted = isSelected && isFocused;
+    // Calculate available space for path (account for stats if present)
+    const statsLength = stats ? stats.length + 1 : 0;
+    const availableForPath = maxPathLength - statsLength;
+    const displayPath = shortenPath(file.path, availableForPath);
+    return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? 'cyan' : undefined, bold: isHighlighted, children: isHighlighted ? '▸ ' : '  ' }), _jsxs(Text, { color: buttonColor, children: [actionButton, " "] }), _jsxs(Text, { color: statusColor, children: [statusChar, " "] }), _jsx(Text, { color: isHighlighted ? 'cyan' : undefined, inverse: isHighlighted, children: displayPath }), file.originalPath && _jsxs(Text, { dimColor: true, children: [" \u2190 ", shortenPath(file.originalPath, 30)] }), stats && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: " " }), file.insertions !== undefined && file.insertions > 0 && (_jsxs(Text, { color: "green", children: ["+", file.insertions] })), file.insertions !== undefined &&
+                        file.insertions > 0 &&
+                        file.deletions !== undefined &&
+                        file.deletions > 0 && _jsx(Text, { dimColor: true, children: " " }), file.deletions !== undefined && file.deletions > 0 && (_jsxs(Text, { color: "red", children: ["-", file.deletions] }))] }))] }));
+}
+export function FileList({ files, selectedIndex, isFocused, scrollOffset = 0, maxHeight, width = 80, }) {
+    // Calculate max path length: width minus prefix chars (▸/space + [+]/[-] + status + spaces = ~10)
+    const maxPathLength = width - 10;
+    // Split files into 3 categories: Modified, Untracked, Staged
+    const { modified: modifiedFiles, untracked: untrackedFiles, staged: stagedFiles, } = categorizeFiles(files);
+    if (files.length === 0) {
+        return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { dimColor: true, children: " No changes" }) }));
+    }
+    // Build a flat list of all rows
+    // Order: Modified → Untracked → Staged
+    const rows = [];
+    let currentFileIndex = 0;
+    if (modifiedFiles.length > 0) {
+        rows.push({ type: 'header', content: 'Modified:', headerColor: 'yellow' });
+        modifiedFiles.forEach((file) => {
+            rows.push({ type: 'file', file, fileIndex: currentFileIndex++ });
+        });
+    }
+    if (untrackedFiles.length > 0) {
+        if (modifiedFiles.length > 0) {
+            rows.push({ type: 'spacer' });
+        }
+        rows.push({ type: 'header', content: 'Untracked:', headerColor: 'gray' });
+        untrackedFiles.forEach((file) => {
+            rows.push({ type: 'file', file, fileIndex: currentFileIndex++ });
+        });
+    }
+    if (stagedFiles.length > 0) {
+        if (modifiedFiles.length > 0 || untrackedFiles.length > 0) {
+            rows.push({ type: 'spacer' });
+        }
+        rows.push({ type: 'header', content: 'Staged:', headerColor: 'green' });
+        stagedFiles.forEach((file) => {
+            rows.push({ type: 'file', file, fileIndex: currentFileIndex++ });
+        });
+    }
+    // Apply scroll offset and max height
+    const visibleRows = maxHeight
+        ? rows.slice(scrollOffset, scrollOffset + maxHeight)
+        : rows.slice(scrollOffset);
+    return (_jsx(Box, { flexDirection: "column", children: visibleRows.map((row, i) => {
+            const key = `row-${scrollOffset + i}`;
+            if (row.type === 'header') {
+                return (_jsx(Text, { bold: true, color: row.headerColor, children: row.content }, key));
+            }
+            if (row.type === 'spacer') {
+                return _jsx(Text, { children: " " }, key);
+            }
+            if (row.type === 'file' && row.file !== undefined && row.fileIndex !== undefined) {
+                return (_jsx(FileRow, { file: row.file, isSelected: row.fileIndex === selectedIndex, isFocused: isFocused, maxPathLength: maxPathLength }, key));
+            }
+            return null;
+        }) }));
+}
+export function getFileAtIndex(files, index) {
+    const { ordered } = categorizeFiles(files);
+    return ordered[index] ?? null;
+}
+export function getTotalFileCount(files) {
+    return files.length;
+}

package/dist/components/Footer.js

@@ -1 +1,6 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Box as c,Text as o}from"ink";export function Footer({activeTab:r,mouseEnabled:i=!0,autoTabEnabled:n=!1,wrapMode:d=!1}){return l(c,{justifyContent:"space-between",children:[l(o,{children:[e(o,{dimColor:!0,children:"?"})," ",e(o,{color:"yellow",children:i?"[scroll]":"m:[select]"})," ",e(o,{color:n?"blue":void 0,dimColor:!n,children:"[auto]"})," ",e(o,{color:d?"blue":void 0,dimColor:!d,children:"[wrap]"})]}),l(o,{children:[e(o,{color:r==="diff"?"cyan":void 0,bold:r==="diff",children:"[1]Diff"})," ",e(o,{color:r==="commit"?"cyan":void 0,bold:r==="commit",children:"[2]Commit"})," ",e(o,{color:r==="history"?"cyan":void 0,bold:r==="history",children:"[3]History"})," ",e(o,{color:r==="compare"?"cyan":void 0,bold:r==="compare",children:"[4]Compare"})]})]})}
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Footer({ activeTab, mouseEnabled = true, autoTabEnabled = false, wrapMode = false, showMiddleDots = false, }) {
+    // Layout: "? [scroll] [auto] [wrap] [dots]" with spaces between
+    return (_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "?" }), ' ', _jsx(Text, { color: "yellow", children: mouseEnabled ? '[scroll]' : 'm:[select]' }), ' ', _jsx(Text, { color: autoTabEnabled ? 'blue' : undefined, dimColor: !autoTabEnabled, children: "[auto]" }), ' ', _jsx(Text, { color: wrapMode ? 'blue' : undefined, dimColor: !wrapMode, children: "[wrap]" }), activeTab === 'explorer' && (_jsxs(_Fragment, { children: [' ', _jsx(Text, { color: showMiddleDots ? 'blue' : undefined, dimColor: !showMiddleDots, children: "[dots]" })] }))] }), _jsxs(Text, { children: [_jsx(Text, { color: activeTab === 'diff' ? 'cyan' : undefined, bold: activeTab === 'diff', children: "[1]Diff" }), ' ', _jsx(Text, { color: activeTab === 'commit' ? 'cyan' : undefined, bold: activeTab === 'commit', children: "[2]Commit" }), ' ', _jsx(Text, { color: activeTab === 'history' ? 'cyan' : undefined, bold: activeTab === 'history', children: "[3]History" }), ' ', _jsx(Text, { color: activeTab === 'compare' ? 'cyan' : undefined, bold: activeTab === 'compare', children: "[4]Compare" })] })] }));
+}