@ohzw/worktree-command-tui 0.1.1 → 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

@@ -14,7 +14,7 @@ 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 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

@@ -5,9 +5,11 @@ import { Box, Text, useApp, useInput, useStdin, useStdout, useWindowSize } from
 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';
+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) {
@@ -31,19 +33,10 @@ function parseMouseWheelEvents(input) {
 export function getMouseWheelDelta(input) {
     return parseMouseWheelEvents(input).reduce((sum, event) => sum + event.delta, 0);
 }
-function getNextSelectedPath(rows, currentPath) {
-    if (rows.length === 0) {
-        return null;
-    }
-    if (currentPath && rows.some(row => row.path === currentPath)) {
-        return currentPath;
-    }
-    return rows[0].path;
-}
 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);
@@ -56,15 +49,61 @@ export function shouldUseCompactLayout(_columns, _rows, _worktreeCount = 0) {
 export function shouldUseMinimalLayout(columns, rows) {
     return columns < 20 || rows < 10;
 }
-export function shouldStackPanes(columns, rows, worktreeCount = 0) {
-    // 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;
+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) {
-    // Outer pane height. With border + title, 9 rows gives ~6 visible log lines.
+    // 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;
+}
+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();
@@ -77,11 +116,12 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
     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 backgroundRefreshInFlightRef = useRef(false);
-    const actionGenerationRef = useRef(0);
     const logRefreshInFlightRef = useRef(false);
+    const actionGenerationRef = useRef(0);
     const previousStatusRef = useRef(initialModel.status.kind);
     const alertTimeoutRef = useRef(null);
     useEffect(() => {
@@ -110,31 +150,40 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             }
         };
     }, []);
+    const confirmationOpen = pendingDelete !== null;
+    const visibleStatus = confirmationOpen
+        ? { kind: 'idle', message: `Delete ${pendingDelete.branch}? d/y confirm, Esc/n/q cancel` }
+        : model.status;
     useEffect(() => {
-        return () => {
-            if (alertTimeoutRef.current !== null) {
-                clearTimeout(alertTimeoutRef.current);
-            }
-        };
-    }, []);
-    useEffect(() => {
-        if (model.status.kind !== 'running') {
+        if (!shouldRefreshLogs(model)) {
             return;
         }
-        const fullRefreshInterval = setInterval(() => {
-            if (userActionInFlightRef.current || backgroundRefreshInFlightRef.current) {
-                return;
-            }
-            void apply(() => actions.refresh(), { blocksInput: false });
-        }, 1500);
+        // 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 || backgroundRefreshInFlightRef.current || logRefreshInFlightRef.current) {
+            if (userActionInFlightRef.current || logRefreshInFlightRef.current) {
                 return;
             }
+            const generation = actionGenerationRef.current;
             logRefreshInFlightRef.current = true;
             void actions.refreshLogs()
-                .then(logs => {
-                setModel(current => ({ ...current, logs }));
+                .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(() => {
@@ -142,17 +191,15 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             });
         }, 400);
         return () => {
-            clearInterval(fullRefreshInterval);
             clearInterval(logRefreshInterval);
         };
-    }, [actions, model.status.kind]);
-    const selectedIndex = useMemo(() => {
-        if (selectedPath === null) {
-            return 0;
-        }
-        const foundIndex = model.rows.findIndex(row => row.path === selectedPath);
-        return foundIndex >= 0 ? foundIndex : 0;
-    }, [model.rows, selectedPath]);
+    }, [actions, model.activePath, model.status.kind, model.status.message]);
+    useEffect(() => {
+        if (confirmationOpen && !model.rows.some(row => row.path === pendingDelete.path)) {
+            setPendingDelete(null);
+        }
+    }, [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);
@@ -161,10 +208,11 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
     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
-        ? undefined
-        : Math.max(3, rootHeight - 11 - logPaneHeight);
-    const selectionScrollPageSize = Math.max(1, Math.floor((paneHeight ?? rootHeight) / 2));
+        ? 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)
@@ -172,10 +220,11 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
     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) {
@@ -184,47 +233,40 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
         }
         setCompletedAlert(null);
     }
-    function invalidateBackgroundRefreshes() {
+    function invalidateStaleLogRefreshes() {
         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;
-        }
+    async function apply(action) {
+        invalidateStaleLogRefreshes();
+        userActionInFlightRef.current = true;
         try {
-            const next = await action();
-            if (blocksInput || (generation === actionGenerationRef.current && !userActionInFlightRef.current)) {
-                setModel(next);
-            }
+            setModel(await action());
         }
         catch (error) {
-            if (blocksInput || (generation === actionGenerationRef.current && !userActionInFlightRef.current)) {
-                setModel(current => ({
-                    ...current,
-                    status: {
-                        kind: 'error',
-                        message: error instanceof Error ? error.message : String(error),
-                    },
-                }));
-            }
+            setModel(current => ({
+                ...current,
+                status: {
+                    kind: 'error',
+                    message: error instanceof Error ? error.message : String(error),
+                },
+            }));
         }
         finally {
-            if (blocksInput) {
-                userActionInFlightRef.current = false;
-            }
-            else {
-                backgroundRefreshInFlightRef.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;
@@ -255,6 +297,20 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             }
             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;
@@ -275,6 +331,10 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             moveSelection(model.rows.length - 1);
             return;
         }
+        if (input === '?') {
+            setIsHelpOverlayOpen(true);
+            return;
+        }
         if (input === 'L') {
             setIsLogOverlayOpen(true);
             return;
@@ -298,22 +358,22 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
         if (userActionInFlightRef.current) {
             return;
         }
-        if (key.return && selected) {
-            if (selected.invalidReason) {
-                invalidateBackgroundRefreshes();
-                setModel(current => ({ ...current, status: { kind: 'error', message: selected.invalidReason } }));
-                clearTransientAlert();
+        if (key.return) {
+            const decision = decideEnterInteraction(selected, model.activePath);
+            if (decision.kind === 'ignore') {
                 return;
             }
-            if (selected.path === model.activePath) {
-                invalidateBackgroundRefreshes();
-                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}...` } }));
+            setModel(current => ({ ...current, status: decision.status }));
             clearTransientAlert();
-            void apply(() => actions.start(selected.path));
+            void apply(() => actions.start(decision.path));
             return;
         }
         if (input === 's') {
@@ -322,6 +382,31 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
             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());
@@ -329,15 +414,22 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
     });
     const listPaneViewportHeight = paneHeight === undefined ? undefined : Math.max(1, paneHeight - 3);
     const mouseWheelLineStep = 3;
-    const paneAreaLeft = 3;
+    const paneAreaLeft = 1;
     const worktreePaneRight = !stackedLayout ? paneAreaLeft + listWidth - 1 : undefined;
-    const selectionPaneLeft = !stackedLayout && worktreePaneRight !== undefined ? worktreePaneRight + 2 : undefined;
-    const bodyPaneTop = !stackedLayout && paneHeight !== undefined ? 7 : 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 logPaneTop = showLogPanel ? rootHeight - 5 - logPaneHeight + 1 : undefined;
-    const logPaneBottom = showLogPanel ? rootHeight - 5 : 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) {
@@ -355,32 +447,55 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
                     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;
-                const isSelectionPaneEvent = isBodyPaneEvent
-                    && selectionPaneLeft !== undefined
+                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 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));
+                const isWorktreePaneEvent = event.x === undefined
+                    || worktreePaneRight === undefined
+                    || event.x <= worktreePaneRight;
+                if (isWorktreePaneEvent) {
+                    scrollWorktrees();
                 }
             }
         };
@@ -394,7 +509,7 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
                 stdout.write(DISABLE_MOUSE_TRACKING);
             }
         };
-    }, [stdin, stdout, listWidth, stackedLayout, listPaneViewportHeight, mouseWheelLineStep, model.rows.length, showLogPanel, logPaneTop, logPaneBottom, maxLogScrollOffset, worktreePaneRight, selectionPaneLeft, bodyPaneTop, bodyPaneBottom, isLogOverlayOpen]);
+    }, [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);
@@ -418,16 +533,23 @@ export function App({ initialModel, actions, windowSizeOverride, }) {
         }
         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, 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] }));
+        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, 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
+        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 === '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" })] }));
+                    : 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: 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] }));
+    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,9 +1,11 @@
 import type { AppRow } from '../core/runtime.js';
-export declare function getActionVariant(selectedRow: AppRow, activePath: string | null): 'success' | 'error' | 'info';
+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 ActionPanel({ selectedRow, activePath, stacked, width, height, compactDetails, scrollOffset, }: {
+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;