File tree navigation in a side panel

src/getConfig.ts

@@ -6,12 +6,16 @@ export type Config = Theme & {
     MIN_LINE_WIDTH: number;
     WRAP_LINES: boolean;
     HIGHLIGHT_LINE_CHANGES: boolean;
+    INTERACTIVE: boolean;
+    TREE_WIDTH: number;
 };
 
 export const CONFIG_DEFAULTS: Omit<Config, keyof Theme> = {
     MIN_LINE_WIDTH: 80,
     WRAP_LINES: true,
     HIGHLIGHT_LINE_CHANGES: true,
+    INTERACTIVE: false,
+    TREE_WIDTH: 30,
 };
 
 export function getConfig(gitConfig: GitConfig): Config {

src/getGitConfig.test.ts

@@ -2,6 +2,7 @@ import {
     DEFAULT_MIN_LINE_WIDTH,
     DEFAULT_THEME_DIRECTORY,
     DEFAULT_THEME_NAME,
+    DEFAULT_TREE_WIDTH,
     GitConfig,
     getGitConfig,
 } from './getGitConfig';
@@ -12,6 +13,8 @@ const DEFAULT_CONFIG: GitConfig = {
     MIN_LINE_WIDTH: DEFAULT_MIN_LINE_WIDTH,
     THEME_NAME: DEFAULT_THEME_NAME,
     THEME_DIRECTORY: DEFAULT_THEME_DIRECTORY,
+    INTERACTIVE: false,
+    TREE_WIDTH: DEFAULT_TREE_WIDTH,
 };
 
 describe('getGitConfig', () => {
@@ -28,6 +31,7 @@ split-diffs.min-line-width=40
 split-diffs.theme-name=arctic
 split-diffs.theme-directory=/tmp
 split-diffs.syntax-highlighting-theme=dark-plus
+split-diffs.tree-width=40
             `)
         ).toEqual({
             WRAP_LINES: false,
@@ -36,6 +40,8 @@ split-diffs.syntax-highlighting-theme=dark-plus
             THEME_NAME: 'arctic',
             THEME_DIRECTORY: '/tmp',
             SYNTAX_HIGHLIGHTING_THEME: 'dark-plus',
+            INTERACTIVE: false,
+            TREE_WIDTH: 40,
         });
     });
 

src/getGitConfig.ts

@@ -8,9 +8,12 @@ export type GitConfig = {
     THEME_DIRECTORY: string;
     THEME_NAME: string;
     SYNTAX_HIGHLIGHTING_THEME?: string;
+    INTERACTIVE: boolean;
+    TREE_WIDTH: number;
 };
 
 export const DEFAULT_MIN_LINE_WIDTH = 80;
+export const DEFAULT_TREE_WIDTH = 30;
 export const DEFAULT_THEME_DIRECTORY = path.resolve(
     path.dirname(fileURLToPath(import.meta.url)),
     '..',
@@ -49,6 +52,16 @@ export function getGitConfig(configString: string): GitConfig {
         // Ignore invalid values
     }
 
+    let treeWidth = DEFAULT_TREE_WIDTH;
+    try {
+        const parsedTreeWidth = parseInt(rawConfig['tree-width'], 10);
+        if (!isNaN(parsedTreeWidth)) {
+            treeWidth = parsedTreeWidth;
+        }
+    } catch {
+        // Ignore invalid values
+    }
+
     return {
         MIN_LINE_WIDTH: minLineWidth,
         WRAP_LINES: rawConfig['wrap-lines'] !== 'false',
@@ -57,5 +70,7 @@ export function getGitConfig(configString: string): GitConfig {
             rawConfig['theme-directory'] ?? DEFAULT_THEME_DIRECTORY,
         THEME_NAME: rawConfig['theme-name'] ?? DEFAULT_THEME_NAME,
         SYNTAX_HIGHLIGHTING_THEME: rawConfig['syntax-highlighting-theme'],
+        INTERACTIVE: rawConfig['interactive'] === 'true',
+        TREE_WIDTH: treeWidth,
     };
 }

src/index.test.ts

@@ -24,6 +24,8 @@ const TEST_CONFIG: Config = {
     MIN_LINE_WIDTH: 60,
     WRAP_LINES: false,
     HIGHLIGHT_LINE_CHANGES: false,
+    INTERACTIVE: false,
+    TREE_WIDTH: 30,
     ...TEST_THEME,
 };
 

src/index.ts

@@ -7,26 +7,51 @@ import { getContextForConfig } from './context';
 import { getGitConfig } from './getGitConfig';
 import { transformContentsStreaming } from './transformContentsStreaming';
 import { getConfig } from './getConfig';
+import { TuiApp, BORDER_WIDTH } from './tui/TuiApp';
 const execAsync = util.promisify(exec);
 
 async function main() {
     const { stdout: gitConfigString } = await execAsync('git config -l');
     const gitConfig = getGitConfig(gitConfigString);
     const config = getConfig(gitConfig);
-    const context = await getContextForConfig(
-        config,
-        chalk,
-        terminalSize().columns
-    );
-    await transformContentsStreaming(context, process.stdin, process.stdout);
-
-    // Ensure stdout is fully flushed before exiting
-    // This is critical when piping to `less` - if we exit before stdout is drained,
-    // less may not receive all data or may receive it in a broken state
-    if (process.stdout.writableNeedDrain) {
-        await new Promise<void>((resolve) => {
-            process.stdout.once('drain', resolve);
-        });
+
+    let isInteractive =
+        process.argv.includes('--interactive') ||
+        process.argv.includes('-i') ||
+        config.INTERACTIVE;
+
+    if (isInteractive && process.platform === 'win32') {
+        process.stderr.write(
+            'Interactive mode is not supported on Windows. Falling back to non-interactive mode.\n'
+        );
+        isInteractive = false;
+    }
+
+    const termCols = terminalSize().columns;
+    const screenWidth = isInteractive
+        ? Math.max(1, termCols - config.TREE_WIDTH - BORDER_WIDTH)
+        : termCols;
+
+    const context = await getContextForConfig(config, chalk, screenWidth);
+
+    if (isInteractive) {
+        const app = new TuiApp();
+        await app.run(context, process.stdin, config.TREE_WIDTH);
+    } else {
+        await transformContentsStreaming(
+            context,
+            process.stdin,
+            process.stdout
+        );
+
+        // Ensure stdout is fully flushed before exiting
+        // This is critical when piping to `less` - if we exit before stdout is drained,
+        // less may not receive all data or may receive it in a broken state
+        if (process.stdout.writableNeedDrain) {
+            await new Promise<void>((resolve) => {
+                process.stdout.once('drain', resolve);
+            });
+        }
     }
 }