skill-search 0.0.1

package/src/tui/ActionModal.js

@@ -0,0 +1,209 @@
+
+const React = require('react');
+const { useState, useEffect } = React;
+const { Box, Text, useInput } = require('ink');
+const TextInput = require('ink-text-input').default;
+
+/**
+ * Action Modal
+ * Handles Menu, Input, and Confirmation states
+ */
+
+/**
+ * Action Modal
+ * Handles Menu, Input, and Confirmation states
+ */
+
+// Define standard background color for the modal
+const BG_COLOR = 'black'; // 'gray' background often renders as light gray which ruins contrast with white text. 
+// However, user ASKED for gray. standard 'gray' is often bright. 
+// safe 'dark gray' is usually not a standard named color in simple ANSI.
+// Let's try 'gray' but user might mean a "Dialog Grey".
+// Actually, widely compatible "Gray" is often the bright black. 
+// Let's use 'gray' and adapt text to 'black' if needed? 
+// No, typically 'white' on 'gray' is readable.
+// Let's try using hex for a nice dark grey if possible or 'gray'.
+// But to be safe with standard colors, let's try 'gray' and assume standard terminal behavior.
+// WAIT: If I use 'gray' bg, white text might be hard to read. Black text is safer.
+// Let's try `BG_COLOR = 'gray'` and change default text to 'black'.
+
+const MODAL_BG = '#333333'; // Dark Gray Hex
+
+function ActionModal({ item, pane, level, onAction, onClose }) {
+    // view: 'menu' | 'input' | 'confirm' | 'processing' | 'result'
+    const [view, setView] = useState('menu');
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const [inputValue, setInputValue] = useState('');
+    const [message, setMessage] = useState('');
+    const [currentAction, setCurrentAction] = useState(null);
+
+    // Define options based on pane
+    const options = pane === 'local'
+        ? ['Open', 'Sync', 'Move', 'Delete']
+        : ['Open', 'Sync'];
+
+    useInput((input, key) => {
+        if (view === 'processing') return;
+
+        if (key.escape) {
+            onClose();
+            return;
+        }
+
+        if (view === 'menu') {
+            if (key.upArrow) setSelectedIdx(Math.max(0, selectedIdx - 1));
+            if (key.downArrow) setSelectedIdx(Math.min(options.length - 1, selectedIdx + 1));
+            if (key.return) {
+                const action = options[selectedIdx].toLowerCase();
+                handleMenuSelection(action);
+            }
+        }
+        else if (view === 'confirm') {
+            if (key.return || input === 'y' || input === 'Y') {
+                // Confirmed
+                executeAction(currentAction);
+            } else if (input === 'n' || input === 'N') {
+                // Cancelled
+                onClose();
+            }
+        }
+        else if (view === 'input') {
+            if (key.return) {
+                executeAction(currentAction, inputValue);
+            }
+        }
+        else if (view === 'result') {
+            if (key.return) {
+                onClose();
+            }
+        }
+    });
+
+    const handleMenuSelection = (action) => {
+        setCurrentAction(action);
+
+        if (action === 'open') {
+            onAction('open', item); // Immediate
+            onClose(); // Close modal after opening
+        }
+        else if (action === 'sync') {
+            // Immediate sync (or confirm? Requirement: "Move, Delete need confirmation". Sync doesn't explicitly say so, but usually safe)
+            // Re-read: "Move, Delete 操作时都需要二次确认" -> Sync doesn't.
+            executeAction('sync');
+        }
+        else if (action === 'move') {
+            setView('input');
+            setMessage('Enter target path (e.g. D:\\MySkills):');
+        }
+        else if (action === 'delete') {
+            setView('confirm');
+            setMessage(`Are you sure you want to DELETE this ${level === 1 ? 'PROVIDER group' : 'skill'}?\nThis cannot be undone.`);
+        }
+    };
+
+    const executeAction = async (action, param) => {
+        setView('processing');
+        try {
+            const result = await onAction(action, item, param);
+            if (result.success) {
+                setMessage('✅ Success!');
+            } else {
+                setMessage(`❌ Error: ${result.error}`);
+            }
+        } catch (e) {
+            setMessage(`❌ Error: ${e.message}`);
+        }
+        setView('result');
+    };
+
+    // Helper for fixed-width lines with background color
+    const MODAL_WIDTH = 46; // Internal width (50 - 2 border - 2 margin safety)
+
+    const Line = ({ text = '', align = 'left', color = 'white', bg = MODAL_BG, bold = false, underline = false }) => {
+        let content = text;
+        const len = content.length;
+        const spa = MODAL_WIDTH - len;
+
+        if (spa > 0) {
+            if (align === 'center') {
+                const left = Math.floor(spa / 2);
+                const right = spa - left;
+                content = ' '.repeat(left) + content + ' '.repeat(right);
+            } else {
+                content = content + ' '.repeat(spa);
+            }
+        } else if (spa < 0) {
+            content = content.slice(0, MODAL_WIDTH);
+        }
+
+        // Add side padding (1 char each side) - CRITICAL: backgroundColor only works on Text, not Box
+        return React.createElement(Text, { color, backgroundColor: bg, bold, underline }, ' ' + content + ' ');
+    };
+
+    const EmptyLine = () => React.createElement(Line, { text: '' });
+
+    return React.createElement(Box, {
+        position: 'absolute',
+        width: 50,
+        borderStyle: 'double',
+        borderColor: 'cyan',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+        // Header
+        React.createElement(EmptyLine),
+        React.createElement(Line, { text: `Action: ${item.name || item.id}`, align: 'center', bold: true, color: 'white' }),
+        React.createElement(Line, { text: `${pane.toUpperCase()} - Level ${level}`, align: 'center', color: 'gray' }),
+        React.createElement(EmptyLine),
+
+        // Views
+        view === 'menu' && React.createElement(Box, { flexDirection: 'column', key: 'menu' },
+            options.map((opt, i) =>
+                React.createElement(Line, {
+                    key: opt,
+                    text: i === selectedIdx ? `● ${opt}` : `  ${opt}`,
+                    color: i === selectedIdx ? 'black' : 'white',
+                    bg: i === selectedIdx ? 'green' : MODAL_BG,
+                    bold: i === selectedIdx
+                })
+            )
+        ),
+
+        view === 'input' && React.createElement(Box, { flexDirection: 'column', key: 'input' },
+            React.createElement(Line, { text: message, color: 'white' }),
+            React.createElement(Box, { width: MODAL_WIDTH + 2, backgroundColor: MODAL_BG, paddingX: 1 },
+                React.createElement(Text, { backgroundColor: MODAL_BG, color: 'white' }, '> '),
+                React.createElement(TextInput, {
+                    value: inputValue,
+                    onChange: setInputValue,
+                    onSubmit: () => executeAction(currentAction, inputValue)
+                })
+            )
+        ),
+
+        view === 'confirm' && React.createElement(Box, { flexDirection: 'column', alignItems: 'center', key: 'confirm' },
+            message.split('\n').map((msgLine, i) =>
+                React.createElement(Line, { key: i, text: msgLine, color: 'white', bg: 'red', align: 'center', bold: true })
+            ),
+            React.createElement(EmptyLine),
+            React.createElement(Line, { text: 'Press Enter or Y to confirm', align: 'center', color: 'white' }),
+            React.createElement(Line, { text: 'N or Esc to cancel', align: 'center', color: 'gray' })
+        ),
+
+        view === 'processing' && React.createElement(Box, { key: 'processing' },
+            React.createElement(Line, { text: '⏳ Processing...', color: 'yellow', align: 'center' })
+        ),
+
+        view === 'result' && React.createElement(Box, { flexDirection: 'column', key: 'result' },
+            message.split('\n').map((msgLine, i) =>
+                React.createElement(Line, { key: i, text: msgLine, align: 'center', color: 'white' })
+            ),
+            React.createElement(EmptyLine),
+            React.createElement(Line, { text: 'Press Enter to close', color: 'gray', align: 'center' })
+        ),
+
+        React.createElement(EmptyLine)
+    );
+}
+
+module.exports = ActionModal;

package/src/tui/AddDelView.js

@@ -0,0 +1,212 @@
+// src/tui/AddDelView.js - Add/Delete Custom Paths View Component
+
+const React = require('react');
+const { useState, useEffect } = React;
+const { Box, Text, useInput } = require('ink');
+const TextInput = require('ink-text-input').default;
+const config = require('../config');
+const { listSkills } = require('../matcher');
+
+function AddDelView({ onBack, onRefresh }) {
+    const [mode, setMode] = useState('menu'); // 'menu', 'add', 'delete'
+    const [customPaths, setCustomPaths] = useState([]);
+    const [selectedIdx, setSelectedIdx] = useState(0);
+    const [inputValue, setInputValue] = useState('');
+    const [statusMsg, setStatusMsg] = useState('');
+
+    // Load custom paths on mount
+    useEffect(() => {
+        refreshPaths();
+    }, []);
+
+    const refreshPaths = () => {
+        const paths = config.getCustomPaths();
+        setCustomPaths(paths);
+    };
+
+    const menuOptions = [
+        { key: 'add', label: 'Add Path', desc: 'Add a new custom skill path' },
+        { key: 'delete', label: 'Delete Path', desc: 'Remove an existing custom path' },
+        { key: 'back', label: 'Back', desc: 'Return to main menu' }
+    ];
+
+    useInput((input, key) => {
+        if (mode === 'menu') {
+            if (key.escape) {
+                onBack();
+                return;
+            }
+            if (key.upArrow) {
+                setSelectedIdx(Math.max(0, selectedIdx - 1));
+            } else if (key.downArrow) {
+                setSelectedIdx(Math.min(menuOptions.length - 1, selectedIdx + 1));
+            } else if (key.return) {
+                const selected = menuOptions[selectedIdx];
+                if (selected.key === 'back') {
+                    onBack();
+                } else if (selected.key === 'add') {
+                    setMode('add');
+                    setInputValue('');
+                    setStatusMsg('');
+                } else if (selected.key === 'delete') {
+                    if (customPaths.length === 0) {
+                        setStatusMsg('No custom paths to delete');
+                    } else {
+                        setMode('delete');
+                        setSelectedIdx(0);
+                        setStatusMsg('');
+                    }
+                }
+            }
+        } else if (mode === 'add') {
+            if (key.escape) {
+                setMode('menu');
+                setSelectedIdx(0);
+                return;
+            }
+            if (key.return) {
+                const trimmed = inputValue.trim();
+                if (trimmed) {
+                    if (config.addCustomPath(trimmed)) {
+                        setStatusMsg(`✅ Added: ${trimmed}`);
+                        refreshPaths();
+                        if (onRefresh) onRefresh();
+                    } else {
+                        setStatusMsg(`⚠️ Path already exists: ${trimmed}`);
+                    }
+                } else {
+                    setStatusMsg('⚠️ Please enter a valid path');
+                }
+                setInputValue('');
+            }
+        } else if (mode === 'delete') {
+            if (key.escape) {
+                setMode('menu');
+                setSelectedIdx(0);
+                return;
+            }
+            if (key.upArrow) {
+                setSelectedIdx(Math.max(0, selectedIdx - 1));
+            } else if (key.downArrow) {
+                setSelectedIdx(Math.min(customPaths.length - 1, selectedIdx + 1));
+            } else if (key.return && customPaths.length > 0) {
+                const pathToDelete = customPaths[selectedIdx];
+                if (config.removeCustomPath(pathToDelete)) {
+                    setStatusMsg(`✅ Removed: ${pathToDelete}`);
+                    refreshPaths();
+                    if (onRefresh) onRefresh();
+                    // Adjust selected index if needed
+                    if (selectedIdx >= customPaths.length - 1) {
+                        setSelectedIdx(Math.max(0, customPaths.length - 2));
+                    }
+                    // If no more paths, go back to menu
+                    if (customPaths.length <= 1) {
+                        setMode('menu');
+                        setSelectedIdx(0);
+                    }
+                }
+            }
+        }
+    });
+
+    // Get display name for path (last 2 folder levels)
+    const getDisplayPath = (p) => {
+        const parts = p.replace(/\\/g, '/').split('/').filter(Boolean);
+        if (parts.length >= 2) {
+            return parts.slice(-2).join('/');
+        }
+        return parts[parts.length - 1] || p;
+    };
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: 'cyan' }, '📂 Custom Paths Manager')
+        ),
+
+        // Current custom paths display
+        React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: 'gray' }, `  Currently tracked paths: ${customPaths.length}`),
+            customPaths.length > 0 && mode === 'menu' && customPaths.map((p, i) =>
+                React.createElement(Text, { key: i, color: 'gray', dimColor: true }, `    • ${getDisplayPath(p)}`)
+            )
+        ),
+
+        // Menu mode
+        mode === 'menu' && React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: 'gray', marginBottom: 1 }, 'Select an action:'),
+            menuOptions.map((opt, idx) => {
+                const isSelected = idx === selectedIdx;
+                return React.createElement(Box, { key: opt.key },
+                    React.createElement(Text, {
+                        color: isSelected ? 'cyan' : 'white',
+                        inverse: isSelected
+                    }, isSelected ? '▶ ' : '  '),
+                    React.createElement(Text, {
+                        color: isSelected ? 'cyan' : 'white',
+                        bold: isSelected
+                    }, opt.label),
+                    React.createElement(Text, { color: 'gray' }, ` - ${opt.desc}`)
+                );
+            })
+        ),
+
+        // Add mode
+        mode === 'add' && React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: 'yellow', marginBottom: 1 }, '📁 Enter absolute path to skill folder:'),
+            React.createElement(Box, {
+                borderStyle: 'single',
+                borderColor: 'cyan',
+                paddingX: 1,
+                width: '80%'
+            },
+                React.createElement(TextInput, {
+                    value: inputValue,
+                    onChange: setInputValue,
+                    placeholder: 'C:\\Users\\...\\skills or /home/.../skills',
+                    focus: true,
+                    showCursor: true
+                })
+            ),
+            React.createElement(Text, { color: 'gray', marginTop: 1 }, 'Press Enter to add, Esc to cancel')
+        ),
+
+        // Delete mode
+        mode === 'delete' && React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: 'yellow', marginBottom: 1 }, '🗑️ Select path to delete:'),
+            customPaths.map((p, idx) => {
+                const isSelected = idx === selectedIdx;
+                return React.createElement(Box, { key: idx },
+                    React.createElement(Text, {
+                        color: isSelected ? 'red' : 'white',
+                        inverse: isSelected
+                    }, isSelected ? '▶ ' : '  '),
+                    React.createElement(Text, {
+                        color: isSelected ? 'red' : 'white',
+                        bold: isSelected
+                    }, getDisplayPath(p)),
+                    React.createElement(Text, { color: 'gray', dimColor: true }, ` (${p})`)
+                );
+            }),
+            React.createElement(Text, { color: 'gray', marginTop: 1 }, 'Press Enter to delete, Esc to cancel')
+        ),
+
+        // Status message
+        statusMsg !== '' && React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, {
+                color: statusMsg.startsWith('✅') ? 'green' :
+                    statusMsg.startsWith('⚠️') ? 'yellow' :
+                        statusMsg.startsWith('❌') ? 'red' : 'gray'
+            }, statusMsg)
+        ),
+
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: 'gray', dimColor: true },
+                mode === 'menu' ? 'Up/Down Navigate  │  Enter Select  │  Esc Back' :
+                    mode === 'add' ? 'Enter Add  │  Esc Cancel' :
+                        'Up/Down Navigate  │  Enter Delete  │  Esc Cancel'
+            )
+        )
+    );
+}
+
+module.exports = AddDelView;