@ohzw/worktree-command-tui 0.1.0 → 0.1.2

package/README.md

@@ -65,6 +65,8 @@ A minimal example of the generated config:
   "namespace": "worktree-command-tui",
   // Command executed in each selected worktree
   "command": ["npm", "run", "start"],
+  // Optional setup command run manually in the selected worktree
+  "setupCommand": ["npm", "install"],
   // Port used for cleanup/monitoring
   "port": 3000,
   // Required files that must exist in a worktree
@@ -74,6 +76,9 @@ A minimal example of the generated config:
 }
 ```
 
+When `setupCommand` is configured, press `i` in the TUI to run it for the selected worktree.
+It is never run automatically when switching worktrees.
+
 ## Development
 
 ```bash

package/dist/app.d.ts

@@ -10,10 +10,11 @@ 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 shouldStackPanes(columns: number, rows: number, _worktreeCount?: number): boolean;
 export declare function App({ initialModel, actions, windowSizeOverride, }: {
     initialModel: AppModel;
     actions: AppActions;

package/dist/app.js

@@ -1,74 +1,246 @@
-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 { HelpWindow } from './components/HelpWindow.js';
+import { FloatingLogWindow } from './components/FloatingLogWindow.js';
+import { LogPanel, buildLogLines } from './components/LogPanel.js';
 import { WorktreeList } from './components/WorktreeList.js';
-function getNextSelectedPath(rows, currentPath) {
-    if (rows.length === 0) {
-        return null;
-    }
-    if (currentPath && rows.some(row => row.path === currentPath)) {
-        return currentPath;
+import { clampSelectionIndex, decideEnterInteraction, decideSetupInteraction, getNextSelectedPath, getSelectedIndex } from './core/tui-interaction.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 rows[0].path;
+    return events;
+}
+export function getMouseWheelDelta(input) {
+    return parseMouseWheelEvents(input).reduce((sum, event) => sum + event.delta, 0);
 }
 export function getShellDimensions(columns, rows) {
     const rootWidth = Math.max(columns, 1);
     const rootHeight = Math.max(rows, 1);
-    const bodyWidth = Math.max(rootWidth - 4, 1);
+    const bodyWidth = rootWidth;
     const maxListWidth = Math.max(1, bodyWidth - 21);
     const desiredListWidth = Math.max(1, Math.floor((bodyWidth - 1) * 0.34));
     const listWidth = Math.min(42, desiredListWidth, maxListWidth);
     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;
+}
+const STACKED_LAYOUT_FRAME_ROWS = 9;
+const HEADER_HEIGHT = 5;
+const CONTEXT_BAR_HEIGHT = 4;
+const PANE_GAP_WIDTH = 1;
+const MIN_STACKED_PANE_HEIGHT = 9;
+export function shouldStackPanes(columns, rows, _worktreeCount = 0) {
+    // Header + context bar consume the fixed chrome; each stacked pane still keeps ~6 visible content lines at the minimum height.
+    return columns < 96 && rows >= STACKED_LAYOUT_FRAME_ROWS + (MIN_STACKED_PANE_HEIGHT * 2);
+}
+function getLogPaneHeight(_rootHeight) {
+    // Each bordered log pane keeps ~6 visible content lines at 9 rows.
+    return 9;
+}
+const ACTIVE_TAG = 'active';
+const ALREADY_ACTIVE_MESSAGE = 'already active';
+function syncActiveTags(rows, activePath) {
+    let changed = false;
+    const nextRows = rows.map(row => {
+        const isActive = row.path === activePath;
+        const hasActiveTag = row.tags.includes(ACTIVE_TAG);
+        if (isActive === hasActiveTag) {
+            return row;
+        }
+        changed = true;
+        return {
+            ...row,
+            tags: isActive ? [...row.tags, ACTIVE_TAG] : row.tags.filter(tag => tag !== ACTIVE_TAG),
+        };
+    });
+    return changed ? nextRows : rows;
+}
+function shouldRefreshLogs(model) {
+    if (model.activePath === null) {
+        return false;
+    }
+    if (model.status.kind === 'running' || model.status.kind === 'error') {
+        return true;
+    }
+    return model.status.message === ALREADY_ACTIVE_MESSAGE;
 }
-export function shouldStackPanes(columns, rows, worktreeCount = 0) {
-    const minimumRows = Math.max(26, worktreeCount + 18);
-    return columns < 96 && rows >= minimumRows;
+function getStatusAfterLogRefresh(current, refresh) {
+    if (current.status.kind !== 'running') {
+        return current.status;
+    }
+    if (current.activePath === refresh.activePath && current.activeBranch === refresh.activeBranch) {
+        return current.status;
+    }
+    if (refresh.activePath === null) {
+        return { kind: 'idle', message: 'session ended' };
+    }
+    if (refresh.activeBranch) {
+        return { kind: 'running', message: `Active: ${refresh.activeBranch}` };
+    }
+    return { kind: 'running', message: 'running' };
 }
 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 [isHelpOverlayOpen, setIsHelpOverlayOpen] = useState(false);
+    const [pendingDelete, setPendingDelete] = useState(null);
+    const [completedAlert, setCompletedAlert] = useState(null);
+    const userActionInFlightRef = useRef(false);
+    const logRefreshInFlightRef = useRef(false);
+    const actionGenerationRef = useRef(0);
+    const previousStatusRef = useRef(initialModel.status.kind);
+    const alertTimeoutRef = useRef(null);
     useEffect(() => {
         setSelectedPath(currentPath => getNextSelectedPath(model.rows, currentPath));
     }, [model.rows]);
-    const selectedIndex = useMemo(() => {
-        if (selectedPath === null) {
-            return 0;
+    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);
+            }
+        };
+    }, []);
+    const confirmationOpen = pendingDelete !== null;
+    const visibleStatus = confirmationOpen
+        ? { kind: 'idle', message: `Delete ${pendingDelete.branch}? d/y confirm, Esc/n/q cancel` }
+        : model.status;
+    useEffect(() => {
+        if (!shouldRefreshLogs(model)) {
+            return;
+        }
+        // Only logs and active-session liveness need near-real-time updates.
+        // Full worktree metadata includes GitHub PR lookups and is refreshed by
+        // explicit user actions instead of a tight polling loop.
+        const logRefreshInterval = setInterval(() => {
+            if (userActionInFlightRef.current || logRefreshInFlightRef.current) {
+                return;
+            }
+            const generation = actionGenerationRef.current;
+            logRefreshInFlightRef.current = true;
+            void actions.refreshLogs()
+                .then(refresh => {
+                if (generation !== actionGenerationRef.current || userActionInFlightRef.current) {
+                    return;
+                }
+                setModel(current => {
+                    const activeChanged = current.activePath !== refresh.activePath || current.activeBranch !== refresh.activeBranch;
+                    const status = getStatusAfterLogRefresh(current, refresh);
+                    return {
+                        ...current,
+                        logs: refresh.logs,
+                        activePath: refresh.activePath,
+                        activeBranch: refresh.activeBranch,
+                        status,
+                        rows: activeChanged ? syncActiveTags(current.rows, refresh.activePath) : current.rows,
+                    };
+                });
+            })
+                .catch(() => { })
+                .finally(() => {
+                logRefreshInFlightRef.current = false;
+            });
+        }, 400);
+        return () => {
+            clearInterval(logRefreshInterval);
+        };
+    }, [actions, model.activePath, model.status.kind, model.status.message]);
+    useEffect(() => {
+        if (confirmationOpen && !model.rows.some(row => row.path === pendingDelete.path)) {
+            setPendingDelete(null);
         }
-        const foundIndex = model.rows.findIndex(row => row.path === selectedPath);
-        return foundIndex >= 0 ? foundIndex : 0;
-    }, [model.rows, selectedPath]);
+    }, [confirmationOpen, model.rows, pendingDelete]);
+    const selectedIndex = useMemo(() => getSelectedIndex(model.rows, selectedPath), [model.rows, selectedPath]);
     const selected = model.rows[selectedIndex];
     const { rootWidth, rootHeight, bodyWidth, listWidth, actionWidth } = getShellDimensions(columns, rows);
     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 stackedPaneHeight = Math.max(3, Math.floor((rootHeight - STACKED_LAYOUT_FRAME_ROWS) / 2));
+    const paneHeight = stackedLayout
+        ? stackedPaneHeight
+        : Math.max(3, rootHeight - STACKED_LAYOUT_FRAME_ROWS - logPaneHeight);
+    const selectionScrollPageSize = Math.max(1, Math.floor(paneHeight / 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) {
+        const clampedIndex = clampSelectionIndex(nextIndex, model.rows.length);
+        if (clampedIndex === null) {
             return;
         }
-        setSelectedPath(model.rows[Math.min(Math.max(nextIndex, 0), model.rows.length - 1)].path);
+        setSelectedPath(model.rows[clampedIndex].path);
+    }
+    function clearTransientAlert() {
+        if (alertTimeoutRef.current !== null) {
+            clearTimeout(alertTimeoutRef.current);
+            alertTimeoutRef.current = null;
+        }
+        setCompletedAlert(null);
+    }
+    function invalidateStaleLogRefreshes() {
+        actionGenerationRef.current += 1;
     }
     async function apply(action) {
-        inFlightRef.current = true;
+        invalidateStaleLogRefreshes();
+        userActionInFlightRef.current = true;
         try {
-            const next = await action();
-            setModel(next);
+            setModel(await action());
         }
         catch (error) {
             setModel(current => ({
@@ -80,10 +252,65 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             }));
         }
         finally {
-            inFlightRef.current = false;
+            userActionInFlightRef.current = false;
         }
     }
     useInput((input, key) => {
+        if (isHelpOverlayOpen) {
+            if (key.escape || input === '\u001B' || input === 'q' || input === '?') {
+                setIsHelpOverlayOpen(false);
+            }
+            return;
+        }
+        if (isLogOverlayOpen) {
+            if (input === '?') {
+                setIsHelpOverlayOpen(true);
+                return;
+            }
+            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 (confirmationOpen) {
+            if (key.escape || input === '\u001B' || input === 'q' || input === 'n') {
+                setPendingDelete(null);
+                return;
+            }
+            if (input === 'd' || input === 'y') {
+                const { path: worktreePath } = pendingDelete;
+                setPendingDelete(null);
+                clearTransientAlert();
+                void apply(() => actions.deleteWorktree(worktreePath));
+                return;
+            }
+            return;
+        }
         if (key.escape || input === 'q') {
             exit();
             return;
@@ -104,36 +331,225 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             moveSelection(model.rows.length - 1);
             return;
         }
-        if (inFlightRef.current) {
+        if (input === '?') {
+            setIsHelpOverlayOpen(true);
+            return;
+        }
+        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) {
-                setModel(current => ({ ...current, status: { kind: 'error', message: selected.invalidReason } }));
+        if (key.return) {
+            const decision = decideEnterInteraction(selected, model.activePath);
+            if (decision.kind === 'ignore') {
                 return;
             }
-            if (selected.path === model.activePath) {
-                setModel(current => ({ ...current, status: { kind: 'idle', message: 'already active' } }));
+            if (decision.kind === 'set-status') {
+                if (decision.suppressesBackgroundRefreshes) {
+                    invalidateStaleLogRefreshes();
+                }
+                setModel(current => ({ ...current, status: decision.status }));
+                clearTransientAlert();
                 return;
             }
-            setModel(current => ({ ...current, status: { kind: 'starting', message: `Starting ${selected.branch}...` } }));
-            void apply(() => actions.start(selected.path));
+            setModel(current => ({ ...current, status: decision.status }));
+            clearTransientAlert();
+            void apply(() => actions.start(decision.path));
             return;
         }
         if (input === 's') {
             setModel(current => ({ ...current, status: { kind: 'stopping', message: 'Stopping active session...' } }));
+            clearTransientAlert();
             void apply(() => actions.stop());
             return;
         }
+        if (input === 'i') {
+            const decision = decideSetupInteraction(selected, model.setupAvailable);
+            if (decision.kind === 'ignore') {
+                return;
+            }
+            setModel(current => ({ ...current, status: decision.status }));
+            clearTransientAlert();
+            void apply(() => actions.setup(decision.path));
+            return;
+        }
+        if (input === 'e' && selected && model.editorAvailable) {
+            clearTransientAlert();
+            void apply(() => actions.openEditor(selected.path));
+            return;
+        }
+        if (input === 'o' && selected) {
+            clearTransientAlert();
+            void apply(() => actions.openPullRequest(selected.path));
+            return;
+        }
+        if (input === 'd' && selected) {
+            clearTransientAlert();
+            setPendingDelete({ path: selected.path, branch: selected.branch });
+            return;
+        }
         if (input === 'r') {
+            clearTransientAlert();
             void apply(() => actions.refresh());
         }
     });
+    const listPaneViewportHeight = paneHeight === undefined ? undefined : Math.max(1, paneHeight - 3);
+    const mouseWheelLineStep = 3;
+    const paneAreaLeft = 1;
+    const worktreePaneRight = !stackedLayout ? paneAreaLeft + listWidth - 1 : undefined;
+    const selectionPaneLeft = !stackedLayout && worktreePaneRight !== undefined ? worktreePaneRight + PANE_GAP_WIDTH + 1 : undefined;
+    const bodyPaneTop = !stackedLayout && paneHeight !== undefined ? HEADER_HEIGHT + 1 : undefined;
+    const bodyPaneBottom = !stackedLayout && bodyPaneTop !== undefined && paneHeight !== undefined ? bodyPaneTop + paneHeight - 1 : undefined;
+    const stackedWorktreePaneTop = stackedLayout && paneHeight !== undefined ? HEADER_HEIGHT + 1 : undefined;
+    const stackedWorktreePaneBottom = stackedLayout && stackedWorktreePaneTop !== undefined && paneHeight !== undefined ? stackedWorktreePaneTop + paneHeight - 1 : undefined;
+    const stackedSelectionPaneTop = stackedLayout && stackedWorktreePaneBottom !== undefined ? stackedWorktreePaneBottom + 1 : undefined;
+    const stackedSelectionPaneBottom = stackedLayout && stackedSelectionPaneTop !== undefined && paneHeight !== undefined ? stackedSelectionPaneTop + paneHeight - 1 : undefined;
+    const logPaneTop = showLogPanel ? rootHeight - CONTEXT_BAR_HEIGHT - logPaneHeight + 1 : undefined;
+    const logPaneBottom = showLogPanel ? rootHeight - CONTEXT_BAR_HEIGHT : undefined;
+    useEffect(() => {
+        const onData = (data) => {
+            if (isHelpOverlayOpen) {
+                return;
+            }
+            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 scrollWorktrees = () => {
+                    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));
+                    });
+                };
+                if (stackedLayout) {
+                    const isStackedWorktreeEvent = stackedWorktreePaneTop !== undefined
+                        && stackedWorktreePaneBottom !== undefined
+                        && event.y !== undefined
+                        && event.y >= stackedWorktreePaneTop
+                        && event.y <= stackedWorktreePaneBottom;
+                    if (isStackedWorktreeEvent) {
+                        scrollWorktrees();
+                        continue;
+                    }
+                    const isStackedSelectionEvent = stackedSelectionPaneTop !== undefined
+                        && stackedSelectionPaneBottom !== undefined
+                        && event.y !== undefined
+                        && event.y >= stackedSelectionPaneTop
+                        && event.y <= stackedSelectionPaneBottom;
+                    if (isStackedSelectionEvent) {
+                        setSelectionScrollOffset(current => Math.max(0, current + event.delta * mouseWheelLineStep));
+                    }
+                    continue;
+                }
+                const isBodyPaneEvent = bodyPaneTop !== undefined
+                    && bodyPaneBottom !== undefined
+                    && event.y !== undefined
+                    && event.y >= bodyPaneTop
+                    && event.y <= bodyPaneBottom;
+                if (!isBodyPaneEvent) {
+                    continue;
+                }
+                const isSelectionPaneEvent = selectionPaneLeft !== undefined
+                    && event.x !== undefined
+                    && event.x >= selectionPaneLeft;
+                if (isSelectionPaneEvent) {
+                    setSelectionScrollOffset(current => Math.max(0, current + event.delta * mouseWheelLineStep));
+                    continue;
+                }
+                const isWorktreePaneEvent = event.x === undefined
+                    || worktreePaneRight === undefined
+                    || event.x <= worktreePaneRight;
+                if (isWorktreePaneEvent) {
+                    scrollWorktrees();
+                }
+            }
+        };
+        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, stackedWorktreePaneTop, stackedWorktreePaneBottom, stackedSelectionPaneTop, stackedSelectionPaneBottom, isLogOverlayOpen, isHelpOverlayOpen]);
+    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 (isHelpOverlayOpen) {
+        return (_jsx(HelpWindow, { setupAvailable: model.setupAvailable, editorAvailable: model.editorAvailable, width: Math.max(1, rootWidth - 1), height: rootHeight }));
+    }
+    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 ? _jsx(Text, { wrap: "truncate-end", children: confirmationOpen ? `D:${visibleStatus.message}` : `T:${model.status.kind}` }) : null, rootHeight >= 4 ? (confirmationOpen
+                    ? _jsx(Text, { dimColor: true, wrap: "truncate-end", children: "d/y confirm \u00B7 Esc/n/q cancel" })
+                    : _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["\u2191\u2193jk\u21B5", model.setupAvailable ? 'i' : '', model.editorAvailable ? 'e' : '', "odLq"] })) : 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, flexDirection: "column", 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 === 'setting-up' || 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: ", visibleStatus.kind, " \u2014 ", visibleStatus.message] })), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: confirmationOpen
+                        ? 'Keys: d/y confirm | Esc/n/q cancel'
+                        : `Keys: ↑↓/jk g/G ↵${model.setupAvailable ? ' i' : ''}${model.editorAvailable ? ' e' : ''} o d L s r q · 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, flexDirection: "column", 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, setupAvailable: model.setupAvailable, 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: visibleStatus, setupAvailable: model.setupAvailable, editorAvailable: model.editorAvailable, confirmationOpen: confirmationOpen }), 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,14 @@
 import type { AppRow } from '../core/runtime.js';
+import { type ProjectionSeverity } from '../core/worktree-projection.js';
+export declare function getActionVariant(selectedRow: AppRow, activePath: string | null): ProjectionSeverity;
 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, setupAvailable, stacked, width, height, compactDetails, scrollOffset, }: {
     selectedRow: AppRow | undefined;
     activePath: string | null;
+    setupAvailable: boolean;
     stacked: boolean;
     width?: number;
+    height?: number;
     compactDetails?: boolean;
+    scrollOffset?: number;
 }): import("react").JSX.Element;