ccmanager 1.4.0 → 1.4.1

package/dist/components/ConfigureCommand.js

@@ -246,18 +246,12 @@ const ConfigureCommand = ({ onComplete }) => {
             // In input mode, let TextInput or SelectInput handle it
             return;
         }
-        if (viewMode === 'list' || viewMode === 'edit') {
+        if (viewMode === 'list' ||
+            viewMode === 'edit' ||
+            viewMode === 'delete-confirm') {
             // SelectInput handles navigation and selection
             return;
         }
-        else if (viewMode === 'delete-confirm') {
-            if (key.upArrow || key.downArrow) {
-                setSelectedIndex(prev => (prev === 0 ? 1 : 0));
-            }
-            else if (key.return) {
-                handleDeleteConfirm();
-            }
-        }
     });
     // Render strategy selection
     if (isSelectingStrategy) {
@@ -360,6 +354,19 @@ const ConfigureCommand = ({ onComplete }) => {
     // Render delete confirmation
     if (viewMode === 'delete-confirm') {
         const preset = presets.find(p => p.id === selectedPresetId);
+        const confirmItems = [
+            { label: 'Yes, delete', value: 'yes' },
+            { label: 'Cancel', value: 'cancel' },
+        ];
+        const handleConfirmSelect = (item) => {
+            if (item.value === 'yes') {
+                handleDeleteConfirm();
+            }
+            else {
+                setViewMode('edit');
+                setSelectedIndex(6); // Return to delete option in edit menu
+            }
+        };
         return (React.createElement(Box, { flexDirection: "column" },
             React.createElement(Box, { marginBottom: 1 },
                 React.createElement(Text, { bold: true, color: "red" }, "Confirm Delete")),
@@ -368,17 +375,15 @@ const ConfigureCommand = ({ onComplete }) => {
                     "Delete preset \"",
                     preset?.name,
                     "\"?")),
-            React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: selectedIndex === 0 ? 'red' : undefined },
-                        selectedIndex === 0 ? '> ' : '  ',
-                        "Yes, delete")),
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: selectedIndex === 1 ? 'cyan' : undefined },
-                        selectedIndex === 1 ? '> ' : '  ',
-                        "Cancel"))),
+            React.createElement(SelectInput, { items: confirmItems, onSelect: handleConfirmSelect, initialIndex: 1, indicatorComponent: ({ isSelected }) => (React.createElement(Text, { color: isSelected ? 'red' : undefined }, isSelected ? '>' : ' ')), itemComponent: ({ isSelected, label }) => (React.createElement(Text, { color: label === 'Yes, delete'
+                        ? isSelected
+                            ? 'red'
+                            : undefined
+                        : isSelected
+                            ? 'cyan'
+                            : undefined, inverse: isSelected }, label)) }),
             React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { dimColor: true }, "Press \u2191\u2193 to navigate, Enter to confirm"))));
+                React.createElement(Text, { dimColor: true }, "Press \u2191\u2193/j/k to navigate, Enter to confirm"))));
     }
     // Render edit preset view
     if (viewMode === 'edit') {

package/dist/components/DeleteConfirmation.js

@@ -1,81 +1,61 @@
 import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
+import SelectInput from 'ink-select-input';
 import { shortcutManager } from '../services/shortcutManager.js';
 const DeleteConfirmation = ({ worktrees, onConfirm, onCancel, }) => {
     // Check if any worktrees have branches
     const hasAnyBranches = worktrees.some(wt => wt.branch);
     const [deleteBranch, setDeleteBranch] = useState(true);
-    const [focusedOption, setFocusedOption] = useState(hasAnyBranches ? 'deleteBranch' : 'confirm');
-    // Helper functions for navigation
-    const isRadioOption = (option) => option === 'deleteBranch' || option === 'keepBranch';
-    const isActionButton = (option) => option === 'confirm' || option === 'cancel';
-    const handleUpArrow = () => {
-        if (!hasAnyBranches) {
-            if (focusedOption === 'cancel')
-                setFocusedOption('confirm');
-            return;
-        }
-        const navigationMap = {
-            keepBranch: 'deleteBranch',
-            confirm: 'keepBranch',
-            cancel: 'keepBranch',
-        };
-        const next = navigationMap[focusedOption];
-        if (next)
-            setFocusedOption(next);
-    };
-    const handleDownArrow = () => {
-        if (!hasAnyBranches) {
-            if (focusedOption === 'confirm')
-                setFocusedOption('cancel');
-            return;
-        }
-        const navigationMap = {
-            deleteBranch: 'keepBranch',
-            keepBranch: 'confirm',
-            confirm: 'cancel',
-        };
-        const next = navigationMap[focusedOption];
-        if (next)
-            setFocusedOption(next);
-    };
-    const handleHorizontalArrow = (direction) => {
-        if (isActionButton(focusedOption)) {
-            setFocusedOption(direction === 'left' ? 'confirm' : 'cancel');
-        }
+    const [view, setView] = useState(hasAnyBranches ? 'options' : 'confirm');
+    const [focusedOption, setFocusedOption] = useState(deleteBranch ? 'deleteBranch' : 'keepBranch');
+    // Menu items for branch options
+    const branchOptions = [
+        {
+            label: `${deleteBranch ? '(•)' : '( )'} Delete the branches too`,
+            value: 'deleteBranch',
+        },
+        {
+            label: `${!deleteBranch ? '(•)' : '( )'} Keep the branches`,
+            value: 'keepBranch',
+        },
+    ];
+    // Menu items for actions
+    const actionOptions = [
+        { label: 'Confirm', value: 'confirm' },
+        { label: 'Cancel', value: 'cancel' },
+    ];
+    const handleBranchSelect = (item) => {
+        // Don't toggle on Enter - only update focused option
+        setFocusedOption(item.value);
     };
-    const handleSelect = () => {
-        if (isRadioOption(focusedOption)) {
-            setDeleteBranch(focusedOption === 'deleteBranch');
-        }
-        else if (focusedOption === 'confirm') {
+    const handleActionSelect = (item) => {
+        if (item.value === 'confirm') {
             onConfirm(deleteBranch);
         }
-        else if (focusedOption === 'cancel') {
+        else {
             onCancel();
         }
     };
     useInput((input, key) => {
-        if (key.upArrow) {
-            handleUpArrow();
-        }
-        else if (key.downArrow) {
-            handleDownArrow();
-        }
-        else if (key.leftArrow) {
-            handleHorizontalArrow('left');
-        }
-        else if (key.rightArrow) {
-            handleHorizontalArrow('right');
+        if (shortcutManager.matchesShortcut('cancel', input, key)) {
+            onCancel();
         }
-        else if (input === ' ' && isRadioOption(focusedOption)) {
-            setDeleteBranch(focusedOption === 'deleteBranch');
+        else if (hasAnyBranches && view === 'options' && key.return) {
+            // Move to confirm view when Enter is pressed in options
+            setView('confirm');
         }
-        else if (key.return) {
-            handleSelect();
+        else if (hasAnyBranches && view === 'confirm' && key.escape) {
+            // Go back to options when Escape is pressed in confirm
+            setView('options');
         }
-        else if (shortcutManager.matchesShortcut('cancel', input, key)) {
-            onCancel();
+        else if (hasAnyBranches && view === 'options' && input === ' ') {
+            // Toggle selection on space for radio buttons
+            if (focusedOption === 'deleteBranch') {
+                setDeleteBranch(true);
+            }
+            else {
+                setDeleteBranch(false);
+            }
         }
     });
     return (React.createElement(Box, { flexDirection: "column" },
@@ -101,33 +81,38 @@ const DeleteConfirmation = ({ worktrees, onConfirm, onCancel, }) => {
                     "... and ",
                     worktrees.length - 8,
                     " more worktrees")))),
-        hasAnyBranches && (React.createElement(Box, { marginBottom: 1, flexDirection: "column" },
+        hasAnyBranches && view === 'options' && (React.createElement(Box, { marginBottom: 1, flexDirection: "column" },
             React.createElement(Text, { bold: true }, "What do you want to do with the associated branches?"),
-            React.createElement(Box, { marginTop: 1, flexDirection: "column" },
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: focusedOption === 'deleteBranch' ? 'red' : undefined, inverse: focusedOption === 'deleteBranch' },
-                        deleteBranch ? '(•)' : '( )',
-                        " Delete the branches too")),
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: focusedOption === 'keepBranch' ? 'green' : undefined, inverse: focusedOption === 'keepBranch' },
-                        !deleteBranch ? '(•)' : '( )',
-                        " Keep the branches"))))),
-        React.createElement(Box, { marginTop: 1 },
-            React.createElement(Box, { marginRight: 2 },
-                React.createElement(Text, { color: focusedOption === 'confirm' ? 'green' : 'white', inverse: focusedOption === 'confirm' },
-                    ' ',
-                    "Confirm",
-                    ' ')),
-            React.createElement(Box, null,
-                React.createElement(Text, { color: focusedOption === 'cancel' ? 'red' : 'white', inverse: focusedOption === 'cancel' },
-                    ' ',
-                    "Cancel",
-                    ' '))),
+            React.createElement(Box, { marginTop: 1 },
+                React.createElement(SelectInput, { items: branchOptions, onSelect: handleBranchSelect, onHighlight: (item) => {
+                        setFocusedOption(item.value);
+                    }, initialIndex: deleteBranch ? 0 : 1, indicatorComponent: ({ isSelected }) => (React.createElement(Text, { color: isSelected ? 'red' : undefined }, isSelected ? '>' : ' ')), itemComponent: ({ isSelected, label }) => (React.createElement(Text, { color: isSelected ? 'red' : undefined, inverse: isSelected }, label)) })))),
+        hasAnyBranches && view === 'confirm' && (React.createElement(Box, { marginBottom: 1, flexDirection: "column" },
+            React.createElement(Text, { bold: true }, "Branch option selected:"),
+            React.createElement(Text, { color: "yellow" }, deleteBranch ? '✓ Delete the branches too' : '✓ Keep the branches'))),
+        (view === 'confirm' || !hasAnyBranches) && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(SelectInput, { items: actionOptions, onSelect: handleActionSelect, initialIndex: 1, indicatorComponent: ({ isSelected }) => (React.createElement(Text, null, isSelected ? '>' : ' ')), itemComponent: ({ isSelected, label }) => {
+                    const color = label === 'Confirm' ? 'green' : 'red';
+                    return (React.createElement(Text, { color: isSelected ? color : 'white', inverse: isSelected },
+                        ' ',
+                        label,
+                        ' '));
+                } }))),
         React.createElement(Box, { marginTop: 1 },
-            React.createElement(Text, { dimColor: true },
-                "Use \u2191\u2193 to navigate options, Space/Enter to select,",
+            React.createElement(Text, { dimColor: true }, hasAnyBranches && view === 'options' ? (React.createElement(React.Fragment, null,
+                "Use \u2191\u2193/j/k to navigate, Space to toggle, Enter to continue,",
+                ' ',
+                shortcutManager.getShortcutDisplay('cancel'),
+                " to cancel")) : view === 'confirm' ? (React.createElement(React.Fragment, null,
+                "Use \u2191\u2193/j/k to navigate, Enter to select",
+                hasAnyBranches ? ', Esc to go back' : '',
+                ",",
+                ' ',
+                shortcutManager.getShortcutDisplay('cancel'),
+                " to cancel")) : (React.createElement(React.Fragment, null,
+                "Use \u2191\u2193/j/k to navigate, Enter to select,",
                 ' ',
                 shortcutManager.getShortcutDisplay('cancel'),
-                " to cancel"))));
+                " to cancel"))))));
 };
 export default DeleteConfirmation;

package/dist/components/DeleteWorktree.js

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
+import SelectInput from 'ink-select-input';
 import { WorktreeService } from '../services/worktreeService.js';
 import DeleteConfirmation from './DeleteConfirmation.js';
 import { shortcutManager } from '../services/shortcutManager.js';
 const DeleteWorktree = ({ onComplete, onCancel, }) => {
     const [worktrees, setWorktrees] = useState([]);
     const [selectedIndices, setSelectedIndices] = useState(new Set());
-    const [focusedIndex, setFocusedIndex] = useState(0);
     const [confirmMode, setConfirmMode] = useState(false);
-    const VIEWPORT_SIZE = 10; // Maximum number of items to display at once
+    const [focusedIndex, setFocusedIndex] = useState(0);
     useEffect(() => {
         const worktreeService = new WorktreeService();
         const allWorktrees = worktreeService.getWorktrees();
@@ -16,23 +16,30 @@ const DeleteWorktree = ({ onComplete, onCancel, }) => {
         const deletableWorktrees = allWorktrees.filter(wt => !wt.isMainWorktree);
         setWorktrees(deletableWorktrees);
     }, []);
+    // Create menu items from worktrees
+    const menuItems = worktrees.map((worktree, index) => {
+        const branchName = worktree.branch
+            ? worktree.branch.replace('refs/heads/', '')
+            : 'detached';
+        const isSelected = selectedIndices.has(index);
+        return {
+            label: `${isSelected ? '[✓]' : '[ ]'} ${branchName} (${worktree.path})`,
+            value: index.toString(),
+        };
+    });
+    const handleSelect = (item) => {
+        // Don't toggle on Enter - this will be used to confirm
+        // We'll handle Space key separately for toggling
+        const index = parseInt(item.value, 10);
+        setFocusedIndex(index);
+    };
     useInput((input, key) => {
-        if (key.ctrl && input === 'c') {
-            onCancel();
-            return;
-        }
         if (confirmMode) {
             // Confirmation component handles input
             return;
         }
-        if (key.upArrow) {
-            setFocusedIndex(prev => Math.max(0, prev - 1));
-        }
-        else if (key.downArrow) {
-            setFocusedIndex(prev => Math.min(worktrees.length - 1, prev + 1));
-        }
-        else if (input === ' ') {
-            // Toggle selection
+        if (input === ' ') {
+            // Toggle selection on space
             setSelectedIndices(prev => {
                 const newSet = new Set(prev);
                 if (newSet.has(focusedIndex)) {
@@ -44,10 +51,8 @@ const DeleteWorktree = ({ onComplete, onCancel, }) => {
                 return newSet;
             });
         }
-        else if (key.return) {
-            if (selectedIndices.size > 0) {
-                setConfirmMode(true);
-            }
+        else if (key.return && selectedIndices.size > 0) {
+            setConfirmMode(true);
         }
         else if (shortcutManager.matchesShortcut('cancel', input, key)) {
             onCancel();
@@ -77,40 +82,17 @@ const DeleteWorktree = ({ onComplete, onCancel, }) => {
             React.createElement(Text, { bold: true, color: "red" }, "Delete Worktrees")),
         React.createElement(Box, { marginBottom: 1 },
             React.createElement(Text, { dimColor: true }, "Select worktrees to delete (Space to select, Enter to confirm):")),
-        (() => {
-            // Calculate viewport window
-            const viewportStart = Math.max(0, Math.min(focusedIndex - Math.floor(VIEWPORT_SIZE / 2), worktrees.length - VIEWPORT_SIZE));
-            const viewportEnd = Math.min(viewportStart + VIEWPORT_SIZE, worktrees.length);
-            const visibleWorktrees = worktrees.slice(viewportStart, viewportEnd);
-            return (React.createElement(React.Fragment, null,
-                viewportStart > 0 && (React.createElement(Text, { dimColor: true },
-                    "\u2191 ",
-                    viewportStart,
-                    " more...")),
-                visibleWorktrees.map((worktree, relativeIndex) => {
-                    const actualIndex = viewportStart + relativeIndex;
-                    const isSelected = selectedIndices.has(actualIndex);
-                    const isFocused = actualIndex === focusedIndex;
-                    const branchName = worktree.branch
-                        ? worktree.branch.replace('refs/heads/', '')
-                        : 'detached';
-                    return (React.createElement(Box, { key: worktree.path },
-                        React.createElement(Text, { color: isFocused ? 'green' : undefined, inverse: isFocused, dimColor: !isFocused && !isSelected },
-                            isSelected ? '[✓]' : '[ ]',
-                            " ",
-                            branchName,
-                            " (",
-                            worktree.path,
-                            ")")));
-                }),
-                viewportEnd < worktrees.length && (React.createElement(Text, { dimColor: true },
-                    "\u2193 ",
-                    worktrees.length - viewportEnd,
-                    " more..."))));
-        })(),
+        React.createElement(SelectInput, { items: menuItems, onSelect: handleSelect, onHighlight: (item) => {
+                const index = parseInt(item.value, 10);
+                setFocusedIndex(index);
+            }, limit: 10, indicatorComponent: ({ isSelected }) => (React.createElement(Text, { color: isSelected ? 'green' : undefined }, isSelected ? '>' : ' ')), itemComponent: ({ isSelected, label }) => {
+                // Check if this item is actually selected (checkbox checked)
+                const hasCheckmark = label.includes('[✓]');
+                return (React.createElement(Text, { color: isSelected ? 'green' : undefined, inverse: isSelected, dimColor: !isSelected && !hasCheckmark }, label));
+            } }),
         React.createElement(Box, { marginTop: 1, flexDirection: "column" },
             React.createElement(Text, { dimColor: true },
-                "Controls: \u2191\u2193 Navigate, Space Select, Enter Confirm,",
+                "Controls: \u2191\u2193/j/k Navigate, Space Select, Enter Confirm,",
                 ' ',
                 shortcutManager.getShortcutDisplay('cancel'),
                 " Cancel"),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ccmanager",
-	"version": "1.4.0",
+	"version": "1.4.1",
 	"description": "TUI application for managing multiple Claude Code sessions across Git worktrees",
 	"license": "MIT",
 	"author": "Kodai Kabasawa",