@ohzw/worktree-command-tui 0.1.0 → 0.1.1

package/dist/app.d.ts

@@ -10,8 +10,9 @@ export interface AppWindowSize {
     columns: number;
     rows: number;
 }
+export declare function getMouseWheelDelta(input: string): number;
 export declare function getShellDimensions(columns: number, rows: number): ShellDimensions;
-export declare function shouldUseCompactLayout(columns: number, rows: number, worktreeCount?: number): boolean;
+export declare function shouldUseCompactLayout(_columns: number, _rows: number, _worktreeCount?: number): boolean;
 export declare function shouldUseMinimalLayout(columns: number, rows: number): boolean;
 export declare function shouldStackPanes(columns: number, rows: number, worktreeCount?: number): boolean;
 export declare function App({ initialModel, actions, windowSizeOverride, }: {

package/dist/app.js

@@ -1,10 +1,36 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Spinner } from '@inkjs/ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text, useApp, useInput, useWindowSize } from 'ink';
+import { Box, Text, useApp, useInput, useStdin, useStdout, useWindowSize } from 'ink';
 import { ActionPanel } from './components/ActionPanel.js';
 import { ContextBar } from './components/ContextBar.js';
 import { Header } from './components/Header.js';
+import { FloatingLogWindow } from './components/FloatingLogWindow.js';
+import { LogPanel, buildLogLines } from './components/LogPanel.js';
 import { WorktreeList } from './components/WorktreeList.js';
+const ENABLE_MOUSE_TRACKING = '\u001B[?1000h\u001B[?1006h';
+const DISABLE_MOUSE_TRACKING = '\u001B[?1000l\u001B[?1006l';
+function parseMouseWheelEvents(input) {
+    const events = [];
+    const sgrMousePattern = /\u001B\[<(\d+);(\d+);(\d+)[mM]/g;
+    for (const match of input.matchAll(sgrMousePattern)) {
+        const button = Number(match[1]);
+        if (button !== 64 && button !== 65) {
+            continue;
+        }
+        const x = Number(match[2]);
+        const y = Number(match[3]);
+        events.push({
+            delta: button === 65 ? 1 : -1,
+            x: Number.isFinite(x) ? x : undefined,
+            y: Number.isFinite(y) ? y : undefined,
+        });
+    }
+    return events;
+}
+export function getMouseWheelDelta(input) {
+    return parseMouseWheelEvents(input).reduce((sum, event) => sum + event.delta, 0);
+}
 function getNextSelectedPath(rows, currentPath) {
     if (rows.length === 0) {
         return null;
@@ -24,27 +50,102 @@ export function getShellDimensions(columns, rows) {
     const actionWidth = Math.max(1, bodyWidth - listWidth - 1);
     return { rootWidth, rootHeight, bodyWidth, listWidth, actionWidth };
 }
-export function shouldUseCompactLayout(columns, rows, worktreeCount = 0) {
-    const contentAwareRowFloor = Math.max(20, worktreeCount + 12);
-    return columns < 72 || rows <= contentAwareRowFloor || (columns < 96 && rows < 24);
+export function shouldUseCompactLayout(_columns, _rows, _worktreeCount = 0) {
+    return false;
 }
 export function shouldUseMinimalLayout(columns, rows) {
-    return columns < 20 || rows < 6;
+    return columns < 20 || rows < 10;
 }
 export function shouldStackPanes(columns, rows, worktreeCount = 0) {
-    const minimumRows = Math.max(26, worktreeCount + 18);
+    // Stacked panes are taller than split panes. Only use them when the full frame can fit the viewport.
+    const minimumRows = Math.max(36, worktreeCount + 34);
     return columns < 96 && rows >= minimumRows;
 }
+function getLogPaneHeight(_rootHeight) {
+    // Outer pane height. With border + title, 9 rows gives ~6 visible log lines.
+    return 9;
+}
 export function App({ initialModel, actions, windowSizeOverride, }) {
     const { exit } = useApp();
+    const { stdin } = useStdin();
+    const { stdout } = useStdout();
     const liveWindowSize = useWindowSize();
     const { columns, rows } = windowSizeOverride ?? liveWindowSize;
     const [model, setModel] = useState(initialModel);
     const [selectedPath, setSelectedPath] = useState(initialModel.rows[0]?.path ?? null);
-    const inFlightRef = useRef(false);
+    const [selectionScrollOffset, setSelectionScrollOffset] = useState(0);
+    const [worktreeScrollOffset, setWorktreeScrollOffset] = useState(0);
+    const [logScrollOffset, setLogScrollOffset] = useState(0);
+    const [isLogOverlayOpen, setIsLogOverlayOpen] = useState(false);
+    const [completedAlert, setCompletedAlert] = useState(null);
+    const userActionInFlightRef = useRef(false);
+    const backgroundRefreshInFlightRef = useRef(false);
+    const actionGenerationRef = useRef(0);
+    const logRefreshInFlightRef = useRef(false);
+    const previousStatusRef = useRef(initialModel.status.kind);
+    const alertTimeoutRef = useRef(null);
     useEffect(() => {
         setSelectedPath(currentPath => getNextSelectedPath(model.rows, currentPath));
     }, [model.rows]);
+    useEffect(() => {
+        setSelectionScrollOffset(0);
+    }, [selectedPath]);
+    useEffect(() => {
+        const becameRunning = previousStatusRef.current === 'starting' && model.status.kind === 'running';
+        if (becameRunning) {
+            setCompletedAlert(model.activeBranch ? `Switched to ${model.activeBranch}` : 'Worktree switch complete.');
+            if (alertTimeoutRef.current !== null) {
+                clearTimeout(alertTimeoutRef.current);
+            }
+            alertTimeoutRef.current = setTimeout(() => {
+                setCompletedAlert(null);
+            }, 2500);
+        }
+        previousStatusRef.current = model.status.kind;
+    }, [model.status.kind, model.activeBranch]);
+    useEffect(() => {
+        return () => {
+            if (alertTimeoutRef.current !== null) {
+                clearTimeout(alertTimeoutRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (alertTimeoutRef.current !== null) {
+                clearTimeout(alertTimeoutRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (model.status.kind !== 'running') {
+            return;
+        }
+        const fullRefreshInterval = setInterval(() => {
+            if (userActionInFlightRef.current || backgroundRefreshInFlightRef.current) {
+                return;
+            }
+            void apply(() => actions.refresh(), { blocksInput: false });
+        }, 1500);
+        const logRefreshInterval = setInterval(() => {
+            if (userActionInFlightRef.current || backgroundRefreshInFlightRef.current || logRefreshInFlightRef.current) {
+                return;
+            }
+            logRefreshInFlightRef.current = true;
+            void actions.refreshLogs()
+                .then(logs => {
+                setModel(current => ({ ...current, logs }));
+            })
+                .catch(() => { })
+                .finally(() => {
+                logRefreshInFlightRef.current = false;
+            });
+        }, 400);
+        return () => {
+            clearInterval(fullRefreshInterval);
+            clearInterval(logRefreshInterval);
+        };
+    }, [actions, model.status.kind]);
     const selectedIndex = useMemo(() => {
         if (selectedPath === null) {
             return 0;
@@ -57,33 +158,103 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
     const minimalLayout = shouldUseMinimalLayout(rootWidth, rootHeight);
     const compactLayout = !minimalLayout && shouldUseCompactLayout(rootWidth, rootHeight, model.rows.length);
     const stackedLayout = !minimalLayout && !compactLayout && shouldStackPanes(rootWidth, rootHeight, model.rows.length);
-    const compactDetailPane = !stackedLayout && rootHeight <= 26;
+    const compactDetailPane = !stackedLayout && rootHeight <= 30 && model.rows.length > 1;
+    const showLogPanel = !stackedLayout && rootHeight >= 34;
+    const logPaneHeight = showLogPanel ? getLogPaneHeight(rootHeight) : 0;
+    const paneHeight = stackedLayout
+        ? undefined
+        : Math.max(3, rootHeight - 11 - logPaneHeight);
+    const selectionScrollPageSize = Math.max(1, Math.floor((paneHeight ?? rootHeight) / 2));
+    const logLineCount = useMemo(() => buildLogLines(model.logs).length, [model.logs]);
+    const logViewportHeight = isLogOverlayOpen
+        ? Math.max(1, rootHeight - 3)
+        : showLogPanel ? Math.max(1, logPaneHeight - 3) : 0;
+    const maxLogScrollOffset = Math.max(0, logLineCount - logViewportHeight);
+    const logScrollPageSize = Math.max(1, Math.floor((logViewportHeight || rootHeight) / 2));
     function moveSelection(nextIndex) {
         if (model.rows.length === 0) {
             return;
         }
         setSelectedPath(model.rows[Math.min(Math.max(nextIndex, 0), model.rows.length - 1)].path);
     }
-    async function apply(action) {
-        inFlightRef.current = true;
+    function clearTransientAlert() {
+        if (alertTimeoutRef.current !== null) {
+            clearTimeout(alertTimeoutRef.current);
+            alertTimeoutRef.current = null;
+        }
+        setCompletedAlert(null);
+    }
+    function invalidateBackgroundRefreshes() {
+        actionGenerationRef.current += 1;
+    }
+    async function apply(action, options = {}) {
+        const blocksInput = options.blocksInput ?? true;
+        const generation = blocksInput ? actionGenerationRef.current + 1 : actionGenerationRef.current;
+        if (blocksInput) {
+            actionGenerationRef.current = generation;
+            userActionInFlightRef.current = true;
+        }
+        else {
+            backgroundRefreshInFlightRef.current = true;
+        }
         try {
             const next = await action();
-            setModel(next);
+            if (blocksInput || (generation === actionGenerationRef.current && !userActionInFlightRef.current)) {
+                setModel(next);
+            }
         }
         catch (error) {
-            setModel(current => ({
-                ...current,
-                status: {
-                    kind: 'error',
-                    message: error instanceof Error ? error.message : String(error),
-                },
-            }));
+            if (blocksInput || (generation === actionGenerationRef.current && !userActionInFlightRef.current)) {
+                setModel(current => ({
+                    ...current,
+                    status: {
+                        kind: 'error',
+                        message: error instanceof Error ? error.message : String(error),
+                    },
+                }));
+            }
         }
         finally {
-            inFlightRef.current = false;
+            if (blocksInput) {
+                userActionInFlightRef.current = false;
+            }
+            else {
+                backgroundRefreshInFlightRef.current = false;
+            }
         }
     }
     useInput((input, key) => {
+        if (isLogOverlayOpen) {
+            if (key.escape || input === 'q' || input === 'L') {
+                setIsLogOverlayOpen(false);
+                return;
+            }
+            if (key.upArrow || input === 'k') {
+                setLogScrollOffset(current => Math.min(maxLogScrollOffset, current + 1));
+                return;
+            }
+            if (key.downArrow || input === 'j') {
+                setLogScrollOffset(current => Math.max(0, current - 1));
+                return;
+            }
+            if (input === 'g') {
+                setLogScrollOffset(maxLogScrollOffset);
+                return;
+            }
+            if (input === 'G') {
+                setLogScrollOffset(0);
+                return;
+            }
+            if (input === '[' || key.pageUp) {
+                setLogScrollOffset(current => Math.min(maxLogScrollOffset, current + logScrollPageSize));
+                return;
+            }
+            if (input === ']' || key.pageDown) {
+                setLogScrollOffset(current => Math.max(0, current - logScrollPageSize));
+                return;
+            }
+            return;
+        }
         if (key.escape || input === 'q') {
             exit();
             return;
@@ -104,36 +275,159 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             moveSelection(model.rows.length - 1);
             return;
         }
-        if (inFlightRef.current) {
+        if (input === 'L') {
+            setIsLogOverlayOpen(true);
+            return;
+        }
+        if (input === ']') {
+            setLogScrollOffset(current => Math.max(0, current - logScrollPageSize));
+            return;
+        }
+        if (input === '[') {
+            setLogScrollOffset(current => Math.min(maxLogScrollOffset, current + logScrollPageSize));
+            return;
+        }
+        if (key.pageDown) {
+            setSelectionScrollOffset(current => current + selectionScrollPageSize);
+            return;
+        }
+        if (key.pageUp) {
+            setSelectionScrollOffset(current => Math.max(0, current - selectionScrollPageSize));
+            return;
+        }
+        if (userActionInFlightRef.current) {
             return;
         }
         if (key.return && selected) {
             if (selected.invalidReason) {
+                invalidateBackgroundRefreshes();
                 setModel(current => ({ ...current, status: { kind: 'error', message: selected.invalidReason } }));
+                clearTransientAlert();
                 return;
             }
             if (selected.path === model.activePath) {
+                invalidateBackgroundRefreshes();
                 setModel(current => ({ ...current, status: { kind: 'idle', message: 'already active' } }));
+                clearTransientAlert();
                 return;
             }
             setModel(current => ({ ...current, status: { kind: 'starting', message: `Starting ${selected.branch}...` } }));
+            clearTransientAlert();
             void apply(() => actions.start(selected.path));
             return;
         }
         if (input === 's') {
             setModel(current => ({ ...current, status: { kind: 'stopping', message: 'Stopping active session...' } }));
+            clearTransientAlert();
             void apply(() => actions.stop());
             return;
         }
         if (input === 'r') {
+            clearTransientAlert();
             void apply(() => actions.refresh());
         }
     });
+    const listPaneViewportHeight = paneHeight === undefined ? undefined : Math.max(1, paneHeight - 3);
+    const mouseWheelLineStep = 3;
+    const paneAreaLeft = 3;
+    const worktreePaneRight = !stackedLayout ? paneAreaLeft + listWidth - 1 : undefined;
+    const selectionPaneLeft = !stackedLayout && worktreePaneRight !== undefined ? worktreePaneRight + 2 : undefined;
+    const bodyPaneTop = !stackedLayout && paneHeight !== undefined ? 7 : undefined;
+    const bodyPaneBottom = !stackedLayout && bodyPaneTop !== undefined && paneHeight !== undefined ? bodyPaneTop + paneHeight - 1 : undefined;
+    const logPaneTop = showLogPanel ? rootHeight - 5 - logPaneHeight + 1 : undefined;
+    const logPaneBottom = showLogPanel ? rootHeight - 5 : undefined;
+    useEffect(() => {
+        const onData = (data) => {
+            const events = parseMouseWheelEvents(typeof data === 'string' ? data : data.toString('utf8'));
+            for (const event of events) {
+                if (isLogOverlayOpen) {
+                    setLogScrollOffset(current => Math.max(0, Math.min(maxLogScrollOffset, current - event.delta * mouseWheelLineStep)));
+                    continue;
+                }
+                const isLogPaneEvent = !isLogOverlayOpen
+                    && showLogPanel
+                    && event.y !== undefined
+                    && logPaneTop !== undefined
+                    && logPaneBottom !== undefined
+                    && event.y >= logPaneTop
+                    && event.y <= logPaneBottom;
+                if (isLogPaneEvent) {
+                    setLogScrollOffset(current => Math.max(0, Math.min(maxLogScrollOffset, current - event.delta * mouseWheelLineStep)));
+                    continue;
+                }
+                const isBodyPaneEvent = bodyPaneTop !== undefined
+                    && bodyPaneBottom !== undefined
+                    && event.y !== undefined
+                    && event.y >= bodyPaneTop
+                    && event.y <= bodyPaneBottom;
+                const isSelectionPaneEvent = isBodyPaneEvent
+                    && selectionPaneLeft !== undefined
+                    && event.x !== undefined
+                    && event.x >= selectionPaneLeft;
+                if (isSelectionPaneEvent) {
+                    setSelectionScrollOffset(current => Math.max(0, current + event.delta * mouseWheelLineStep));
+                    continue;
+                }
+                const shouldScrollWorktrees = !stackedLayout
+                    && (event.x === undefined || worktreePaneRight === undefined || event.x <= worktreePaneRight);
+                if (shouldScrollWorktrees) {
+                    setWorktreeScrollOffset(current => {
+                        if (listPaneViewportHeight === undefined) {
+                            return 0;
+                        }
+                        const max = Math.max(0, model.rows.length - listPaneViewportHeight);
+                        return Math.max(0, Math.min(max, current + event.delta * mouseWheelLineStep));
+                    });
+                }
+                else {
+                    setSelectionScrollOffset(current => Math.max(0, current + event.delta * mouseWheelLineStep));
+                }
+            }
+        };
+        if (stdout.isTTY) {
+            stdout.write(ENABLE_MOUSE_TRACKING);
+        }
+        stdin.on('data', onData);
+        return () => {
+            stdin.off('data', onData);
+            if (stdout.isTTY) {
+                stdout.write(DISABLE_MOUSE_TRACKING);
+            }
+        };
+    }, [stdin, stdout, listWidth, stackedLayout, listPaneViewportHeight, mouseWheelLineStep, model.rows.length, showLogPanel, logPaneTop, logPaneBottom, maxLogScrollOffset, worktreePaneRight, selectionPaneLeft, bodyPaneTop, bodyPaneBottom, isLogOverlayOpen]);
+    useEffect(() => {
+        if (listPaneViewportHeight === undefined) {
+            setWorktreeScrollOffset(0);
+            return;
+        }
+        setWorktreeScrollOffset(current => {
+            const max = Math.max(0, model.rows.length - listPaneViewportHeight);
+            if (selectedIndex < current) {
+                return Math.max(0, selectedIndex);
+            }
+            if (selectedIndex >= current + listPaneViewportHeight) {
+                return Math.max(0, Math.min(max, selectedIndex - listPaneViewportHeight + 1));
+            }
+            return Math.min(current, max);
+        });
+    }, [selectedIndex, listPaneViewportHeight, model.rows.length]);
+    useEffect(() => {
+        if (!showLogPanel && !isLogOverlayOpen) {
+            setLogScrollOffset(0);
+            return;
+        }
+        setLogScrollOffset(current => Math.min(current, maxLogScrollOffset));
+    }, [showLogPanel, isLogOverlayOpen, maxLogScrollOffset]);
+    if (isLogOverlayOpen) {
+        return (_jsx(FloatingLogWindow, { logs: model.logs, width: Math.max(1, rootWidth - 1), height: rootHeight, scrollOffset: logScrollOffset }));
+    }
     if (minimalLayout) {
-        return (_jsxs(Box, { width: rootWidth, flexDirection: "column", children: [_jsxs(Text, { bold: true, color: "green", wrap: "truncate-end", children: ["A:", model.activeBranch ?? '-'] }), rootHeight >= 2 ? _jsxs(Text, { wrap: "truncate-end", children: ["S:", selected?.branch ?? '-'] }) : null, rootHeight >= 3 ? _jsxs(Text, { wrap: "truncate-end", children: ["T:", model.status.kind] }) : null, rootHeight >= 4 ? _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "\u2191\u2193jk\u21B5q" }) : null] }));
+        return (_jsxs(Box, { width: rootWidth, height: rootHeight, flexDirection: "column", children: [_jsxs(Text, { bold: true, color: "green", wrap: "truncate-end", children: ["A:", model.activeBranch ?? '-'] }), rootHeight >= 2 ? _jsxs(Text, { wrap: "truncate-end", children: ["S:", selected?.branch ?? '-'] }) : null, rootHeight >= 3 ? _jsxs(Text, { wrap: "truncate-end", children: ["T:", model.status.kind] }) : null, rootHeight >= 4 ? _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "\u2191\u2193jk\u21B5Lq" }) : null] }));
     }
     if (compactLayout) {
-        return (_jsxs(Box, { width: rootWidth, borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "green", wrap: "truncate-end", children: ["Active: ", model.activeBranch ?? '-'] }), _jsxs(Text, { wrap: "truncate-end", children: ["Selected: ", selected?.branch ?? '-'] }), _jsxs(Text, { wrap: "truncate-end", children: ["Status: ", model.status.kind, " \u2014 ", model.status.message] }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Keys: \u2191\u2193/jk g/G \u21B5 s r q \u00B7 Resize terminal for split view" })] }));
+        return (_jsxs(Box, { width: rootWidth, height: rootHeight, borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { bold: true, color: "green", wrap: "truncate-end", children: ["Active: ", model.activeBranch ?? '-'] }), _jsxs(Text, { wrap: "truncate-end", children: ["Selected: ", selected?.branch ?? '-'] }), completedAlert
+                    ? _jsxs(Text, { color: "green", wrap: "truncate-end", children: ["\u2714 ", completedAlert] })
+                    : model.status.kind === 'starting' || model.status.kind === 'stopping' ? (_jsx(Spinner, { label: `Status: ${model.status.kind} — ${model.status.message}` })) : (_jsxs(Text, { wrap: "truncate-end", children: ["Status: ", model.status.kind, " \u2014 ", model.status.message] })), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Keys: \u2191\u2193/jk g/G \u21B5 L s r q \u00B7 Resize terminal for split view" })] }));
     }
-    return (_jsxs(Box, { width: rootWidth, height: stackedLayout ? undefined : rootHeight, borderStyle: "round", borderColor: "gray", flexDirection: "column", paddingX: 1, children: [_jsx(Header, { repoName: model.repoName, namespace: model.namespace, activeBranch: model.activeBranch }), _jsxs(Box, { flexDirection: stackedLayout ? 'column' : 'row', flexGrow: stackedLayout ? 0 : 1, flexShrink: 1, children: [_jsx(WorktreeList, { rows: model.rows, selectedIndex: selectedIndex, width: stackedLayout ? bodyWidth : listWidth, stacked: stackedLayout }), _jsx(ActionPanel, { selectedRow: selected, activePath: model.activePath, stacked: stackedLayout, width: stackedLayout ? bodyWidth : actionWidth, compactDetails: compactDetailPane })] }), _jsx(ContextBar, { status: model.status })] }));
+    return (_jsxs(Box, { width: rootWidth, height: rootHeight, borderStyle: "round", borderColor: "gray", flexDirection: "column", paddingX: 1, children: [_jsx(Header, { repoName: model.repoName, namespace: model.namespace, activeBranch: model.activeBranch }), _jsxs(Box, { flexDirection: stackedLayout ? 'column' : 'row', flexGrow: stackedLayout ? 0 : 1, flexShrink: 1, children: [_jsx(WorktreeList, { rows: model.rows, selectedIndex: selectedIndex, width: stackedLayout ? bodyWidth : listWidth, height: paneHeight, stacked: stackedLayout, scrollOffset: worktreeScrollOffset }), _jsx(ActionPanel, { selectedRow: selected, activePath: model.activePath, stacked: stackedLayout, width: stackedLayout ? bodyWidth : actionWidth, height: paneHeight, compactDetails: compactDetailPane, scrollOffset: selectionScrollOffset })] }), showLogPanel ? _jsx(LogPanel, { logs: model.logs, width: bodyWidth, height: logPaneHeight, scrollOffset: logScrollOffset }) : null, _jsx(ContextBar, { status: model.status }), completedAlert ? (_jsx(Box, { position: "absolute", top: 1, right: 2, children: _jsx(Alert, { variant: "success", children: completedAlert }) })) : null] }));
 }

package/dist/components/ActionPanel.d.ts

@@ -1,10 +1,12 @@
 import type { AppRow } from '../core/runtime.js';
+export declare function getActionVariant(selectedRow: AppRow, activePath: string | null): 'success' | 'error' | 'info';
 export declare function getPullRequestColor(selectedRow: AppRow): 'green' | 'yellow' | 'red' | undefined;
-export declare function getActionColor(selectedRow: AppRow): 'yellow' | 'red' | undefined;
-export declare function ActionPanel({ selectedRow, activePath, stacked, width, compactDetails, }: {
+export declare function ActionPanel({ selectedRow, activePath, stacked, width, height, compactDetails, scrollOffset, }: {
     selectedRow: AppRow | undefined;
     activePath: string | null;
     stacked: boolean;
     width?: number;
+    height?: number;
     compactDetails?: boolean;
+    scrollOffset?: number;
 }): import("react").JSX.Element;

package/dist/components/ActionPanel.js

@@ -1,7 +1,50 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-function formatTags(tags) {
-    return tags.length === 0 ? '-' : tags.join(' · ');
+function getTagColor(tag) {
+    if (tag === 'active') {
+        return 'green';
+    }
+    if (tag === 'external') {
+        return 'yellow';
+    }
+    if (tag === 'main') {
+        return 'blue';
+    }
+    if (tag === 'invalid') {
+        return 'red';
+    }
+    return 'magenta';
+}
+export function getActionVariant(selectedRow, activePath) {
+    if (selectedRow.invalidReason) {
+        return 'error';
+    }
+    if (selectedRow.path === activePath) {
+        return 'success';
+    }
+    if ((selectedRow.workingTree?.conflicts ?? 0) > 0) {
+        return 'error';
+    }
+    if ((selectedRow.workingTree?.staged ?? 0) > 0
+        || (selectedRow.workingTree?.unstaged ?? 0) > 0
+        || (selectedRow.workingTree?.untracked ?? 0) > 0) {
+        return 'info';
+    }
+    return 'info';
+}
+function getNoteVariant(selectedRow) {
+    if (selectedRow.invalidReason || selectedRow.tags.includes('external')) {
+        return selectedRow.invalidReason ? 'error' : 'info';
+    }
+    if ((selectedRow.workingTree?.conflicts ?? 0) > 0) {
+        return 'error';
+    }
+    if ((selectedRow.workingTree?.staged ?? 0) > 0
+        || (selectedRow.workingTree?.unstaged ?? 0) > 0
+        || (selectedRow.workingTree?.untracked ?? 0) > 0) {
+        return 'info';
+    }
+    return 'info';
 }
 function sanitizeInlineText(value) {
     return value
@@ -86,20 +129,6 @@ function getActionMessage(selectedRow, activePath) {
     }
     return 'Press Enter to start here and switch the active session.';
 }
-export function getActionColor(selectedRow) {
-    if (selectedRow.invalidReason) {
-        return 'red';
-    }
-    if ((selectedRow.workingTree?.conflicts ?? 0) > 0) {
-        return 'red';
-    }
-    if ((selectedRow.workingTree?.staged ?? 0) > 0
-        || (selectedRow.workingTree?.unstaged ?? 0) > 0
-        || (selectedRow.workingTree?.untracked ?? 0) > 0) {
-        return 'yellow';
-    }
-    return undefined;
-}
 function getNotes(selectedRow) {
     if (selectedRow.invalidReason) {
         return selectedRow.invalidReason;
@@ -107,23 +136,101 @@ function getNotes(selectedRow) {
     if (selectedRow.tags.includes('external')) {
         return 'External worktree managed outside the main checkout path.';
     }
-    if (selectedRow.tags.includes('active')) {
-        return 'This worktree currently owns the running command session.';
-    }
     return 'Ready to launch with the configured command in this worktree.';
 }
-function SectionHeader({ label }) {
-    return (_jsxs(Text, { bold: true, color: "cyan", children: ["[", label, "]"] }));
+function getOrderedTags(tags) {
+    const tagPriority = {
+        active: 0,
+        main: 1,
+        external: 2,
+        invalid: 3,
+    };
+    return [...tags].sort((a, b) => {
+        const aPriority = tagPriority[a] ?? 10;
+        const bPriority = tagPriority[b] ?? 10;
+        if (aPriority === bPriority) {
+            return a.localeCompare(b);
+        }
+        return aPriority - bPriority;
+    });
+}
+function getVariantColor(variant) {
+    if (variant === 'success') {
+        return 'green';
+    }
+    if (variant === 'error') {
+        return 'red';
+    }
+    return 'blue';
+}
+function getVariantIcon(variant) {
+    if (variant === 'success') {
+        return '✓';
+    }
+    if (variant === 'error') {
+        return '✘';
+    }
+    return 'ℹ';
+}
+function section(label) {
+    return { text: `[${label}]`, color: 'cyan', bold: true };
 }
-export function ActionPanel({ selectedRow, activePath, stacked, width, compactDetails, }) {
+function divider() {
+    return { text: ' ', dimColor: true };
+}
+function getPanelLines(selectedRow, activePath, compactDetails) {
     if (!selectedRow) {
-        return (_jsxs(Box, { width: width, flexGrow: stacked ? 0 : 1, flexShrink: 1, borderStyle: "round", borderColor: "magenta", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magenta", children: "Selection / Action" }), _jsx(Text, { dimColor: true, children: "No worktrees found." })] }));
+        return [{ text: 'No worktrees found.', dimColor: true }];
     }
-    const actionMessage = getActionMessage(selectedRow, activePath);
+    const lines = [section('Identity')];
     const showFullPath = !compactDetails && selectedRow.shortPath !== selectedRow.path;
     const showTags = !compactDetails;
     const pullRequestTitle = selectedRow.pullRequest?.kind === 'found' && !compactDetails
         ? sanitizeInlineText(selectedRow.pullRequest.title)
         : null;
-    return (_jsxs(Box, { width: width, flexGrow: stacked ? 0 : 1, flexShrink: 1, borderStyle: "round", borderColor: "magenta", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magenta", children: "Selection / Action" }), _jsx(SectionHeader, { label: "Identity" }), _jsxs(Text, { bold: true, color: selectedRow.tags.includes('active') ? 'green' : undefined, wrap: "truncate-end", children: ["Branch: ", sanitizeInlineText(selectedRow.branch)] }), _jsxs(Text, { wrap: "truncate-end", children: ["Path: ", sanitizeInlineText(selectedRow.shortPath)] }), showFullPath ? _jsxs(Text, { wrap: "truncate-end", children: ["Full Path: ", sanitizeInlineText(selectedRow.path)] }) : undefined, _jsxs(Text, { wrap: "truncate-end", children: ["HEAD: ", selectedRow.headSha || '-'] }), showTags ? _jsxs(Text, { wrap: "truncate-end", children: ["Tags: ", formatTags(selectedRow.tags)] }) : undefined, _jsx(SectionHeader, { label: "Git / PR" }), _jsxs(Text, { wrap: "truncate-end", children: ["Upstream: ", formatUpstream(selectedRow)] }), _jsxs(Text, { wrap: "truncate-end", children: ["Status: ", formatWorkingTree(selectedRow)] }), _jsxs(Text, { color: getPullRequestColor(selectedRow), dimColor: selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN', wrap: "truncate-end", children: [getPullRequestLabel(selectedRow), ": ", formatPullRequest(selectedRow)] }), pullRequestTitle ? _jsxs(Text, { dimColor: selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN', wrap: "truncate-end", children: [getPullRequestTitleLabel(selectedRow), ": ", pullRequestTitle] }) : undefined, _jsx(SectionHeader, { label: "Action" }), _jsx(Text, { color: getActionColor(selectedRow), wrap: "truncate-end", children: actionMessage }), _jsx(SectionHeader, { label: "Notes" }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: getNotes(selectedRow) })] }));
+    lines.push({ text: `Branch: ${sanitizeInlineText(selectedRow.branch)}`, bold: true }, { text: `Path: ${sanitizeInlineText(selectedRow.shortPath)}` });
+    if (showFullPath) {
+        lines.push({ text: `Full Path: ${sanitizeInlineText(selectedRow.path)}` });
+    }
+    lines.push({ text: `HEAD: ${selectedRow.headSha || '-'}` });
+    if (showTags) {
+        for (const tag of getOrderedTags(selectedRow.tags.filter(tag => tag !== 'active'))) {
+            lines.push({ text: tag.toUpperCase(), color: getTagColor(tag) });
+        }
+    }
+    lines.push(divider(), section('Git / PR'), { text: `Upstream: ${formatUpstream(selectedRow)}` }, { text: `Status: ${formatWorkingTree(selectedRow)}` }, {
+        text: `${getPullRequestLabel(selectedRow)}: ${formatPullRequest(selectedRow)}`,
+        color: getPullRequestColor(selectedRow),
+        dimColor: selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN',
+    });
+    if (pullRequestTitle) {
+        lines.push({ text: `${getPullRequestTitleLabel(selectedRow)}: ${pullRequestTitle}`, dimColor: selectedRow.pullRequest?.kind === 'found' && selectedRow.pullRequest.state !== 'OPEN' });
+    }
+    const actionVariant = getActionVariant(selectedRow, activePath);
+    const noteVariant = getNoteVariant(selectedRow);
+    lines.push(divider(), section('Action'), { text: `${getVariantIcon(actionVariant)} ${getActionMessage(selectedRow, activePath)}`, color: getVariantColor(actionVariant) }, section('Notes'), { text: `${getVariantIcon(noteVariant)} ${getNotes(selectedRow)}`, color: getVariantColor(noteVariant) });
+    return lines;
+}
+function getScrollbarThumbRows(totalLines, viewportHeight, scrollOffset) {
+    if (totalLines <= viewportHeight) {
+        return new Set();
+    }
+    const thumbSize = Math.max(1, Math.floor((viewportHeight / totalLines) * viewportHeight));
+    const maxScrollOffset = Math.max(1, totalLines - viewportHeight);
+    const thumbStart = Math.round((scrollOffset / maxScrollOffset) * (viewportHeight - thumbSize));
+    return new Set(Array.from({ length: thumbSize }, (_, index) => thumbStart + index));
+}
+export function ActionPanel({ selectedRow, activePath, stacked, width, height, compactDetails, scrollOffset = 0, }) {
+    const lines = getPanelLines(selectedRow, activePath, compactDetails ?? false);
+    const contentViewportHeight = height === undefined ? undefined : Math.max(1, height - 3);
+    const maxScrollOffset = contentViewportHeight === undefined ? 0 : Math.max(0, lines.length - contentViewportHeight);
+    const effectiveScrollOffset = Math.min(Math.max(scrollOffset, 0), maxScrollOffset);
+    const visibleLines = contentViewportHeight === undefined
+        ? lines
+        : lines.slice(effectiveScrollOffset, effectiveScrollOffset + contentViewportHeight);
+    const showScrollbar = contentViewportHeight !== undefined && lines.length > contentViewportHeight;
+    const scrollbarThumbRows = showScrollbar
+        ? getScrollbarThumbRows(lines.length, contentViewportHeight, effectiveScrollOffset)
+        : new Set();
+    return (_jsxs(Box, { width: width, height: height, flexGrow: stacked ? 0 : 1, flexShrink: 1, borderStyle: "round", borderColor: "magenta", flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsx(Text, { bold: true, color: "magenta", wrap: "truncate-end", children: "Selection / Action" }), _jsx(Box, { height: contentViewportHeight, flexDirection: "column", overflow: "hidden", children: visibleLines.map((line, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { color: line.color, dimColor: line.dimColor, bold: line.bold, wrap: "truncate-end", children: line.text }) }), showScrollbar ? (_jsx(Text, { color: scrollbarThumbRows.has(index) ? 'magenta' : 'gray', dimColor: !scrollbarThumbRows.has(index), children: scrollbarThumbRows.has(index) ? '█' : '│' })) : null] }, `${effectiveScrollOffset + index}-${line.text}`))) })] }));
 }

package/dist/components/ContextBar.js

@@ -1,6 +1,14 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-const COLOR_BY_KIND = {
+import { Spinner } from '@inkjs/ui';
+const KIND_TO_ICON = {
+    idle: 'ℹ',
+    starting: '⚠',
+    running: '✓',
+    stopping: '⚠',
+    error: '✘',
+};
+const KIND_TO_COLOR = {
     idle: 'blue',
     starting: 'yellow',
     running: 'green',
@@ -8,5 +16,6 @@ const COLOR_BY_KIND = {
     error: 'red',
 };
 export function ContextBar({ status }) {
-    return (_jsxs(Box, { borderStyle: "round", borderColor: COLOR_BY_KIND[status.kind], flexDirection: "column", paddingX: 1, children: [_jsxs(Text, { color: COLOR_BY_KIND[status.kind], wrap: "truncate-end", children: ["Status: ", status.kind, " \u2014 ", status.message] }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Keys: \u2191\u2193/jk move  g/G first/last  Enter start/switch  s stop  r refresh  q quit" })] }));
+    const isBusy = status.kind === 'starting' || status.kind === 'stopping';
+    return (_jsxs(Box, { borderStyle: "round", borderColor: KIND_TO_COLOR[status.kind], flexDirection: "column", paddingX: 1, children: [isBusy ? (_jsx(Spinner, { label: `Status: ${status.kind} — ${status.message}` })) : (_jsxs(Text, { color: KIND_TO_COLOR[status.kind], wrap: "truncate-end", children: [KIND_TO_ICON[status.kind], " Status: ", status.kind, " \u2014 ", status.message] })), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "Keys: \u2191\u2193/jk move  g/G first/last  Wheel/PgUp/PgDn list & selection scroll  [/] log scroll  L full-screen logs  Enter start/switch  s stop  r refresh  q quit" })] }));
 }

package/dist/components/FloatingLogWindow.d.ts

@@ -0,0 +1,7 @@
+import type { AppLogEntry } from '../core/runtime.js';
+export declare function FloatingLogWindow({ logs, width, height, scrollOffset, }: {
+    logs: AppLogEntry[];
+    width: number;
+    height: number;
+    scrollOffset: number;
+}): import("react").JSX.Element;

package/dist/components/FloatingLogWindow.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LogPanel } from './LogPanel.js';
+export function FloatingLogWindow({ logs, width, height, scrollOffset, }) {
+    return (_jsx(LogPanel, { logs: logs, width: width, height: height, scrollOffset: scrollOffset, title: "Logs (*.log \u00B7 tail 120 \u00B7 full screen)" }));
+}

package/dist/components/LogPanel.d.ts

@@ -0,0 +1,15 @@
+import type { AppLogEntry } from '../core/runtime.js';
+type LineSpec = {
+    text: string;
+    color?: 'cyan';
+    dimColor?: boolean;
+};
+export declare function buildLogLines(logs: AppLogEntry[]): LineSpec[];
+export declare function LogPanel({ logs, width, height, scrollOffset, title, }: {
+    logs: AppLogEntry[];
+    width?: number;
+    height?: number;
+    scrollOffset?: number;
+    title?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/LogPanel.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const ANSI_ESCAPE_PATTERN = /(?:\u001B|\u009B)\[[0-?]*[ -/]*[@-~]/gu;
+function sanitizeLogLine(value) {
+    return value
+        .replace(ANSI_ESCAPE_PATTERN, '')
+        .replace(/[\r\t\u2028\u2029]+/g, ' ')
+        .replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, '')
+        .replace(/\p{Cf}/gu, '')
+        .trimEnd();
+}
+export function buildLogLines(logs) {
+    if (logs.length === 0) {
+        return [{ text: 'No *.log files yet.', dimColor: true }];
+    }
+    const lines = [];
+    for (const [index, log] of logs.entries()) {
+        if (index > 0) {
+            lines.push({ text: ' ', dimColor: true });
+        }
+        lines.push({ text: `[${log.name}]`, color: 'cyan' });
+        const contentLines = log.content.length > 0 ? log.content.split('\n') : ['(empty)'];
+        for (const line of contentLines) {
+            lines.push({ text: sanitizeLogLine(line) || ' ' });
+        }
+    }
+    return lines;
+}
+function getScrollbarThumbRows(totalLines, viewportHeight, scrollOffset) {
+    if (totalLines <= viewportHeight) {
+        return new Set();
+    }
+    const thumbSize = Math.max(1, Math.floor((viewportHeight / totalLines) * viewportHeight));
+    const maxScrollOffset = Math.max(1, totalLines - viewportHeight);
+    const thumbStart = Math.round((scrollOffset / maxScrollOffset) * (viewportHeight - thumbSize));
+    return new Set(Array.from({ length: thumbSize }, (_, index) => thumbStart + index));
+}
+export function LogPanel({ logs, width, height, scrollOffset = 0, title = 'Logs (*.log · tail 120)', }) {
+    const lines = buildLogLines(logs);
+    const contentViewportHeight = height === undefined ? lines.length : Math.max(1, height - 3);
+    const maxScrollOffset = contentViewportHeight === undefined ? 0 : Math.max(0, lines.length - contentViewportHeight);
+    const effectiveScrollOffset = Math.min(Math.max(scrollOffset, 0), maxScrollOffset);
+    const startIndex = contentViewportHeight === undefined
+        ? 0
+        : Math.max(0, lines.length - contentViewportHeight - effectiveScrollOffset);
+    const visibleLines = contentViewportHeight === undefined
+        ? lines
+        : lines.slice(startIndex, startIndex + contentViewportHeight);
+    const showScrollbar = contentViewportHeight !== undefined && lines.length > contentViewportHeight;
+    const scrollbarThumbRows = showScrollbar
+        ? getScrollbarThumbRows(lines.length, contentViewportHeight, maxScrollOffset - effectiveScrollOffset)
+        : new Set();
+    return (_jsxs(Box, { width: width, height: height, borderStyle: "round", borderColor: "yellow", flexDirection: "column", paddingX: 1, overflow: "hidden", children: [_jsx(Text, { bold: true, color: "yellow", wrap: "truncate-end", children: title }), _jsx(Box, { height: contentViewportHeight, flexDirection: "column", overflow: "hidden", children: visibleLines.map((line, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { color: line.color, dimColor: line.dimColor, wrap: "truncate-end", children: line.text }) }), showScrollbar ? (_jsx(Text, { color: scrollbarThumbRows.has(index) ? 'yellow' : 'gray', dimColor: !scrollbarThumbRows.has(index), children: scrollbarThumbRows.has(index) ? '█' : '│' })) : null] }, `${startIndex + index}-${line.text}`))) })] }));
+}

package/dist/components/WorktreeList.d.ts

@@ -1,7 +1,9 @@
 import type { AppRow } from '../core/runtime.js';
-export declare function WorktreeList({ rows, selectedIndex, width, stacked, }: {
+export declare function WorktreeList({ rows, selectedIndex, width, height, stacked, scrollOffset, }: {
     rows: AppRow[];
     selectedIndex: number;
     width?: number;
+    height?: number;
     stacked: boolean;
+    scrollOffset?: number;
 }): import("react").JSX.Element;

package/dist/components/WorktreeList.js

@@ -48,11 +48,26 @@ function truncateLabel(value, width) {
     }
     return `${value.slice(0, Math.max(width - 1, 0))}…`;
 }
-export function WorktreeList({ rows, selectedIndex, width, stacked, }) {
+function getScrollbarThumbRows(totalLines, viewportHeight, scrollOffset) {
+    if (totalLines <= viewportHeight) {
+        return new Set();
+    }
+    const thumbSize = Math.max(1, Math.floor((viewportHeight / totalLines) * viewportHeight));
+    const maxScrollOffset = Math.max(1, totalLines - viewportHeight);
+    const thumbStart = Math.round((scrollOffset / maxScrollOffset) * (viewportHeight - thumbSize));
+    return new Set(Array.from({ length: thumbSize }, (_, index) => thumbStart + index));
+}
+export function WorktreeList({ rows, selectedIndex, width, height, stacked, scrollOffset = 0, }) {
     const branchWidth = Math.max(MIN_BRANCH_WIDTH, (width ?? 34) - 7);
-    return (_jsxs(Box, { width: width, flexGrow: stacked ? 0 : 1, marginRight: stacked ? 0 : 1, borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Worktrees" }), rows.map((row, index) => {
-                const isSelected = index === selectedIndex;
+    const contentViewportHeight = height === undefined ? rows.length : Math.max(1, height - 3);
+    const maxScrollOffset = Math.max(0, rows.length - contentViewportHeight);
+    const effectiveScrollOffset = Math.min(Math.max(scrollOffset, 0), maxScrollOffset);
+    const visibleRows = rows.slice(effectiveScrollOffset, effectiveScrollOffset + contentViewportHeight);
+    const showScrollbar = height !== undefined && rows.length > contentViewportHeight;
+    const scrollbarThumbRows = showScrollbar ? getScrollbarThumbRows(rows.length, contentViewportHeight, effectiveScrollOffset) : new Set();
+    return (_jsxs(Box, { width: width, height: height, flexGrow: stacked ? 0 : 1, marginRight: stacked ? 0 : 1, borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, overflowY: "hidden", children: [_jsx(Text, { bold: true, color: "cyan", children: "Worktrees" }), visibleRows.map((row, index) => {
+                const isSelected = index + effectiveScrollOffset === selectedIndex;
                 const line = `${isSelected ? '>' : ' '} ${getIndicator(row)} ${truncateLabel(sanitizeInlineText(row.branch), branchWidth)}`;
-                return (_jsx(Text, { color: getRowColor(row, isSelected), dimColor: !isSelected && getRowColor(row, isSelected) === undefined, wrap: "truncate-end", children: line }, row.path));
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { color: getRowColor(row, isSelected), dimColor: !isSelected && getRowColor(row, isSelected) === undefined, wrap: "truncate-end", children: line }, row.path) }), showScrollbar ? (_jsx(Text, { color: scrollbarThumbRows.has(index) ? 'cyan' : 'gray', dimColor: !scrollbarThumbRows.has(index), children: scrollbarThumbRows.has(index) ? '█' : '│' })) : null] }, row.path));
             })] }));
 }

package/dist/core/runtime.d.ts

@@ -40,6 +40,11 @@ export interface AppStatus {
     kind: 'idle' | 'starting' | 'running' | 'stopping' | 'error';
     message: string;
 }
+export interface AppLogEntry {
+    name: string;
+    path: string;
+    content: string;
+}
 export interface AppModel {
     repoName: string;
     namespace: string;
@@ -47,11 +52,13 @@ export interface AppModel {
     activePath: string | null;
     activeBranch: string | null;
     status: AppStatus;
+    logs: AppLogEntry[];
 }
 export interface AppActions {
     start: (worktreePath: string) => Promise<AppModel>;
     stop: () => Promise<AppModel>;
     refresh: () => Promise<AppModel>;
+    refreshLogs: () => Promise<AppLogEntry[]>;
 }
 interface GitStatusSummary {
     upstream?: UpstreamInfo;

package/dist/core/runtime.js

@@ -1,5 +1,6 @@
 import path from 'node:path';
 import { execFile } from 'node:child_process';
+import { readdir, readFile, stat } from 'node:fs/promises';
 import { promisify } from 'node:util';
 import { loadToolConfig } from './config.js';
 import { readWorktrees, sortWorktrees, toShortPath } from './git-worktrees.js';
@@ -11,6 +12,8 @@ import { isProcessGroupAlive, killProcessGroup, killPortOwner, killOrphans } fro
 const execFileAsync = promisify(execFile);
 const SHORT_SHA_LENGTH = 8;
 const GH_TIMEOUT_MS = 2500;
+const MAX_LOG_BYTES = 16 * 1024;
+const MAX_LOG_LINES = 120;
 function shortenSha(headSha) {
     return headSha.slice(0, SHORT_SHA_LENGTH);
 }
@@ -177,6 +180,45 @@ async function stopRecordedSession(pgid, port, orphanMatchers) {
         throw new Error(`Failed to stop existing session pgid=${pgid}`);
     }
 }
+function tailLogContent(content) {
+    const byteTrimmed = content.length > MAX_LOG_BYTES ? content.slice(-MAX_LOG_BYTES) : content;
+    const lines = byteTrimmed.replace(/\r\n/g, '\n').split('\n');
+    const tailLines = lines.length > MAX_LOG_LINES ? lines.slice(-MAX_LOG_LINES) : lines;
+    return tailLines.join('\n').trimEnd();
+}
+async function readLogs(logsDir, activeLogPath) {
+    try {
+        const entries = (await readdir(logsDir, { withFileTypes: true }))
+            .filter(entry => entry.isFile() && entry.name.endsWith('.log'))
+            .map(entry => ({ name: entry.name, path: path.join(logsDir, entry.name) }));
+        if (entries.length === 0) {
+            return [];
+        }
+        let selectedEntries = entries;
+        if (activeLogPath !== null) {
+            const activeEntry = entries.find(entry => entry.path === activeLogPath);
+            if (activeEntry) {
+                selectedEntries = [activeEntry];
+            }
+        }
+        else {
+            const withStats = await Promise.all(entries.map(async (entry) => ({
+                ...entry,
+                mtimeMs: (await stat(entry.path)).mtimeMs,
+            })));
+            withStats.sort((a, b) => b.mtimeMs - a.mtimeMs || a.name.localeCompare(b.name));
+            selectedEntries = [withStats[0]];
+        }
+        return await Promise.all(selectedEntries.map(async (entry) => ({
+            name: entry.name,
+            path: entry.path,
+            content: tailLogContent(await readFile(entry.path, 'utf8')),
+        })));
+    }
+    catch {
+        return [];
+    }
+}
 export async function buildInitialModel(cwd) {
     const { workspaceRoot, mainWorktreePath, gitCommonDir } = await resolveRepoContext(cwd);
     const config = await loadToolConfig({ repoRoot: workspaceRoot });
@@ -189,6 +231,7 @@ export async function buildInitialModel(cwd) {
         activePath: active?.worktreePath ?? null,
         activeBranch: active?.branch ?? null,
         status: active ? { kind: 'running', message: `Active: ${active.branch}` } : { kind: 'idle', message: 'ready' },
+        logs: await readLogs(paths.logsDir, active?.logPath ?? null),
     };
 }
 export async function buildActions(cwd) {
@@ -197,6 +240,10 @@ export async function buildActions(cwd) {
     const paths = getSessionPaths(gitCommonDir, config.namespace);
     const mainWorktreePath = path.dirname(gitCommonDir);
     const refresh = async () => buildInitialModel(cwd);
+    const refreshLogs = async () => {
+        const active = await readSessionRecord(paths, { isSessionAlive: isProcessGroupAlive });
+        return readLogs(paths.logsDir, active?.logPath ?? null);
+    };
     const stop = async () => {
         const active = await readSessionRecord(paths, { isSessionAlive: isProcessGroupAlive });
         if (active) {
@@ -259,5 +306,5 @@ export async function buildActions(cwd) {
             status: { kind: 'running', message: `started ${selected.branch}` },
         };
     };
-    return { start, stop, refresh };
+    return { start, stop, refresh, refreshLogs };
 }

package/dist/main.js

@@ -2,10 +2,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createConfigForRepo, parseInitArgs } from './core/init.js';
 import { CONFIG_FILE_NAME, CONFIG_FILE_NAMES } from './core/config.js';
+import { ThemeProvider } from '@inkjs/ui';
 import { render } from 'ink';
+import { APP_RENDER_OPTIONS } from './render-options.js';
 import { App } from './app.js';
 import { buildActions, buildInitialModel } from './core/runtime.js';
-import { APP_RENDER_OPTIONS } from './render-options.js';
+import { appTheme } from './ui-theme.js';
 const cwd = process.cwd();
 const args = process.argv.slice(2);
 const [, , subcommand] = process.argv;
@@ -65,7 +67,27 @@ if (subcommand !== undefined) {
 }
 try {
     const [initialModel, actions] = await Promise.all([buildInitialModel(cwd), buildActions(cwd)]);
-    render(_jsx(App, { initialModel: initialModel, actions: actions }), APP_RENDER_OPTIONS);
+    const createApp = () => (_jsx(ThemeProvider, { theme: appTheme, children: _jsx(App, { initialModel: initialModel, actions: actions }) }));
+    const instance = render(createApp(), APP_RENDER_OPTIONS);
+    let repaintTimer;
+    const repaintAfterResize = () => {
+        // Give Ink/useWindowSize one tick to observe the new size, then force a fresh root render.
+        if (repaintTimer) {
+            clearTimeout(repaintTimer);
+        }
+        repaintTimer = setTimeout(() => {
+            instance.rerender(createApp());
+        }, 25);
+    };
+    if (process.stdout.isTTY) {
+        process.stdout.on('resize', repaintAfterResize);
+        void instance.waitUntilExit().finally(() => {
+            if (repaintTimer) {
+                clearTimeout(repaintTimer);
+            }
+            process.stdout.off('resize', repaintAfterResize);
+        });
+    }
 }
 catch (error) {
     console.error(describeError(error));

package/dist/render-options.d.ts

@@ -1,4 +1,5 @@
 export declare const APP_RENDER_OPTIONS: {
     readonly alternateScreen: true;
     readonly exitOnCtrlC: true;
+    readonly incrementalRendering: true;
 };

package/dist/render-options.js

@@ -1,4 +1,5 @@
 export const APP_RENDER_OPTIONS = {
     alternateScreen: true,
     exitOnCtrlC: true,
+    incrementalRendering: true,
 };

package/dist/repro.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/repro.js

@@ -0,0 +1,13 @@
+const model = {
+    repoName: "reclaim-the-forest",
+    namespace: "rojo-serve",
+    rows: Array.from({ length: 10 }, (_, index) => ({
+        path: `/repo/.worktree/feat-${index}`,
+        shortPath: `.worktree/feat-${index}`,
+        branch: `feat/${index}`,
+        tags: (index === 0 ? [active] : []),
+        pullRequest: index === 0 ? { kind: found, number: 2125, title: Selection }
+            :
+    }))
+};
+export {};

package/dist/ui-theme.d.ts

@@ -0,0 +1,3 @@
+export declare const appTheme: {
+    components: Record<string, import("@inkjs/ui").ComponentTheme>;
+};

package/dist/ui-theme.js

@@ -0,0 +1,38 @@
+import { defaultTheme, extendTheme } from '@inkjs/ui';
+const variantColor = {
+    info: 'blue',
+    success: 'green',
+    error: 'red',
+    warning: 'yellow',
+};
+export const appTheme = extendTheme(defaultTheme, {
+    components: {
+        StatusMessage: {
+            styles: {
+                icon: ({ variant }) => ({
+                    color: variantColor[variant],
+                    bold: true,
+                }),
+            },
+        },
+        Alert: {
+            styles: {
+                container: ({ variant }) => ({
+                    flexGrow: 0,
+                    flexShrink: 0,
+                    borderStyle: 'round',
+                    borderColor: variantColor[variant],
+                    gap: 1,
+                    paddingX: 1,
+                }),
+                icon: ({ variant }) => ({
+                    color: variantColor[variant],
+                    bold: true,
+                }),
+                title: () => ({
+                    bold: true,
+                }),
+            },
+        },
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohzw/worktree-command-tui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A TUI for managing git worktrees",
   "private": false,
   "type": "module",
@@ -54,6 +54,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@inkjs/ui": "^2.0.0",
     "ink": "^7.0.4",
     "react": "^19.2.0"
   },