skill-search 0.0.1

package/src/tui/AsciiHeader.js

@@ -0,0 +1,35 @@
+// src/tui/AsciiHeader.js - FIGlet-style ASCII Art Header
+
+const React = require('react');
+const { Box, Text } = require('ink');
+
+// ASCII Art for "SKILL CLI" using a compact block style
+const ASCII_ART = [
+    '███████╗██╗  ██╗██╗██╗     ██╗          ██████╗██╗     ██╗',
+    '██╔════╝██║ ██╔╝██║██║     ██║         ██╔════╝██║     ██║',
+    '███████╗█████╔╝ ██║██║     ██║         ██║     ██║     ██║',
+    '╚════██║██╔═██╗ ██║██║     ██║         ██║     ██║     ██║',
+    '███████║██║  ██╗██║███████╗███████╗    ╚██████╗███████╗██║',
+    '╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝     ╚═════╝╚══════╝╚═╝'
+];
+
+// Gradient colors for the ASCII art (top to bottom)
+const GRADIENT_COLORS = ['cyan', 'cyanBright', 'cyan', 'blue', 'blueBright', 'blue'];
+
+function AsciiHeader() {
+    return React.createElement(Box, {
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingY: 1
+    },
+        ASCII_ART.map((line, index) =>
+            React.createElement(Text, {
+                key: index,
+                color: GRADIENT_COLORS[index] || 'cyan',
+                bold: true
+            }, line)
+        )
+    );
+}
+
+module.exports = AsciiHeader;

package/src/tui/CommandPalette.js

@@ -0,0 +1,64 @@
+// src/tui/CommandPalette.js - Slash Command Menu
+
+const React = require('react');
+const { useState } = React;
+const { Box, Text, useInput } = require('ink');
+
+const COMMANDS = [
+    { key: 'sync', icon: '🔄', label: 'Sync', desc: 'Sync skills from remote' },
+    { key: 'sync-docs', icon: '📥', label: 'Sync Docs', desc: 'Download all SKILL.md files' },
+    { key: 'config', icon: '⚙️', label: 'Config', desc: 'Configure API settings' },
+    { key: 'clear', icon: '🗑️', label: 'Clear Cache', desc: 'Clear local cache' },
+    { key: 'help', icon: '❓', label: 'Help', desc: 'Show help information' },
+    { key: 'quit', icon: '👋', label: 'Quit', desc: 'Exit the application' }
+];
+
+function CommandPalette({ isOpen, filter, selectedIndex, onSelect, onClose }) {
+    if (!isOpen) return null;
+
+    // Filter commands based on input after "/"
+    const filteredCommands = filter
+        ? COMMANDS.filter(cmd =>
+            cmd.key.toLowerCase().includes(filter.toLowerCase()) ||
+            cmd.label.toLowerCase().includes(filter.toLowerCase())
+        )
+        : COMMANDS;
+
+    return React.createElement(Box, {
+        flexDirection: 'column',
+        borderStyle: 'round',
+        borderColor: 'cyan',
+        paddingX: 1,
+        paddingY: 0,
+        marginX: 2
+    },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: 'cyan' }, '/ Commands'),
+            React.createElement(Text, { color: 'gray' }, '  (Up/Down select, Enter run, Esc cancel)')
+        ),
+
+        filteredCommands.length === 0
+            ? React.createElement(Text, { color: 'yellow' }, 'No matching commands')
+            : filteredCommands.map((cmd, idx) => {
+                const isSelected = idx === selectedIndex;
+                return React.createElement(Box, { key: cmd.key },
+                    React.createElement(Text, {
+                        color: isSelected ? 'cyan' : 'white',
+                        bold: isSelected,
+                        inverse: isSelected
+                    }, isSelected ? ' ▶ ' : '   '),
+                    React.createElement(Text, null, `${cmd.icon} `),
+                    React.createElement(Text, {
+                        color: isSelected ? 'cyan' : 'white',
+                        bold: isSelected
+                    }, cmd.label.padEnd(15)),
+                    React.createElement(Text, { color: 'gray' }, cmd.desc)
+                );
+            })
+    );
+}
+
+// Export commands for use in App.js
+CommandPalette.COMMANDS = COMMANDS;
+
+module.exports = CommandPalette;

package/src/tui/ConfigView.js

@@ -0,0 +1,168 @@
+// src/tui/ConfigView.js - Configuration 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');
+
+function ConfigView({ onBack }) {
+    const [currentConfig, setCurrentConfig] = useState(null);
+    const [editingApiKey, setEditingApiKey] = useState(false);
+    const [apiKeyValue, setApiKeyValue] = useState('');
+    const [message, setMessage] = useState(null);
+    const [selectedOption, setSelectedOption] = useState(0);
+
+    const options = [
+        { key: 'view', label: 'View Current Config' },
+        { key: 'apikey', label: 'Set API Key' },
+        { key: 'paths', label: 'View Data Paths' }
+    ];
+
+    useEffect(() => {
+        loadConfig();
+    }, []);
+
+    const loadConfig = () => {
+        const cfg = config.getUserConfig();
+        setCurrentConfig(cfg);
+        setApiKeyValue(cfg.api?.apiKey || '');
+    };
+
+    useInput((input, key) => {
+        if (editingApiKey) {
+            if (key.escape) {
+                setEditingApiKey(false);
+                loadConfig();
+            } else if (key.return) {
+                saveApiKey();
+            }
+            return;
+        }
+
+        if (key.escape) {
+            onBack();
+            return;
+        }
+
+        if (key.upArrow) {
+            setSelectedOption(Math.max(0, selectedOption - 1));
+        } else if (key.downArrow) {
+            setSelectedOption(Math.min(options.length - 1, selectedOption + 1));
+        } else if (key.return) {
+            executeOption(options[selectedOption].key);
+        }
+    });
+
+    const executeOption = (optionKey) => {
+        setMessage(null);
+
+        if (optionKey === 'view') {
+            loadConfig();
+            setMessage('Config refreshed');
+        } else if (optionKey === 'apikey') {
+            setEditingApiKey(true);
+        } else if (optionKey === 'paths') {
+            const paths = config.getPaths();
+            setMessage(`Data: ${paths.dataDir}`);
+        }
+    };
+
+    const saveApiKey = () => {
+        try {
+            config.setApiKey(apiKeyValue);
+            setEditingApiKey(false);
+            setMessage('✅ API Key saved successfully!');
+            loadConfig();
+        } catch (err) {
+            setMessage(`❌ Error: ${err.message}`);
+        }
+    };
+
+    const maskApiKey = (key) => {
+        if (!key) return '(not set)';
+        if (key.length <= 8) return '****';
+        return key.slice(0, 4) + '****' + key.slice(-4);
+    };
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: 'cyan' }, '⚙️  Configuration')
+        ),
+
+        // Current config display
+        currentConfig && React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1,
+            marginBottom: 1,
+            // Removed borderStyle
+            // paddingX: 1
+        },
+            // Use dim color for label
+            React.createElement(Text, { color: 'gray', dimColor: true }, '  Current Settings:'),
+            React.createElement(Text, null,
+                `  API URL: ${currentConfig.api?.baseUrl || 'N/A'}`
+            ),
+            React.createElement(Text, null,
+                `  API Key: ${maskApiKey(currentConfig.api?.apiKey)}`
+            ),
+            React.createElement(Text, null,
+                `  Cache TTL: ${(currentConfig.cache?.ttl || 0) / 3600000}h`
+            )
+        ),
+
+        // API Key editing mode
+        editingApiKey && React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: 'yellow' }, 'Enter new API Key:'),
+            React.createElement(Box, null,
+                React.createElement(Text, { color: 'gray' }, '> '),
+                React.createElement(TextInput, {
+                    value: apiKeyValue,
+                    onChange: setApiKeyValue,
+                    placeholder: 'sk-xxxxxxxx...',
+                    focus: true
+                })
+            ),
+            React.createElement(Text, { color: 'gray', dimColor: true },
+                'Enter to save  │  Esc to cancel'
+            )
+        ),
+
+        // Options (when not editing)
+        !editingApiKey && React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            options.map((opt, idx) => {
+                const isSelected = idx === selectedOption;
+                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
+                    )
+                );
+            })
+        ),
+
+        // Message
+        message && React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, {
+                color: message.startsWith('✅') ? 'green' :
+                    message.startsWith('❌') ? 'red' : 'gray'
+            }, message)
+        ),
+
+        !editingApiKey && React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: 'gray', dimColor: true },
+                'Up/Down Navigate  │  Enter Select'
+            )
+        )
+    );
+}
+
+module.exports = ConfigView;

package/src/tui/DetailView.js

@@ -0,0 +1,139 @@
+// src/tui/DetailView.js - Skill Detail View Component
+
+const React = require('react');
+const { useState, useEffect } = React;
+const { Box, Text, useInput } = require('ink');
+const store = require('../store');
+const api = require('../api');
+
+function DetailView({ skill, onBack }) {
+    const [content, setContent] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const visibleLines = 20;
+
+    useEffect(() => {
+        if (skill) {
+            loadContent();
+        }
+    }, [skill]);
+
+    const loadContent = async () => {
+        setLoading(true);
+        setError(null);
+
+        try {
+            // Try local first
+            let doc = store.getDoc(skill.id);
+
+            if (!doc && skill.githubUrl) {
+                // Fetch from remote
+                doc = await api.fetchSkillContent(skill.githubUrl);
+                store.setDoc(skill.id, doc);
+            }
+
+            setContent(doc || 'No content available.');
+        } catch (err) {
+            setError(err.message);
+            setContent(null);
+        }
+        setLoading(false);
+    };
+
+    useInput((input, key) => {
+        if (key.escape || input === 'b') {
+            onBack();
+            return;
+        }
+
+        const lines = (content || '').split('\n');
+        const maxScroll = Math.max(0, lines.length - visibleLines);
+
+        if (key.upArrow) {
+            setScrollOffset(Math.max(0, scrollOffset - 1));
+        } else if (key.downArrow) {
+            setScrollOffset(Math.min(maxScroll, scrollOffset + 1));
+        } else if (key.pageUp) {
+            setScrollOffset(Math.max(0, scrollOffset - visibleLines));
+        } else if (key.pageDown) {
+            setScrollOffset(Math.min(maxScroll, scrollOffset + visibleLines));
+        }
+    });
+
+    if (!skill) {
+        return React.createElement(Text, { color: 'red' }, '❌ No skill selected');
+    }
+
+    if (loading) {
+        return React.createElement(Box, { flexDirection: 'column' },
+            React.createElement(Text, { color: 'yellow' },
+                `⏳ Loading ${skill.id}...`
+            )
+        );
+    }
+
+    if (error) {
+        return React.createElement(Box, { flexDirection: 'column' },
+            React.createElement(Text, { color: 'red' }, `❌ Error: ${error}`),
+            React.createElement(Text, { color: 'gray' }, 'Press Esc or "b" to go back')
+        );
+    }
+
+    const lines = content.split('\n');
+    const visibleContent = lines.slice(scrollOffset, scrollOffset + visibleLines);
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        // Header
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: 'cyan' },
+                `📄 ${skill.name || skill.id}`
+            ),
+            React.createElement(Text, { color: 'gray' },
+                ` (${scrollOffset + 1}-${Math.min(scrollOffset + visibleLines, lines.length)}/${lines.length})`
+            )
+        ),
+
+        // Content
+        React.createElement(Box, { flexDirection: 'column' },
+            visibleContent.map((line, idx) => {
+                // Simple markdown highlighting
+                let color = 'white';
+                let bold = false;
+
+                if (line.startsWith('# ')) {
+                    color = 'magenta';
+                    bold = true;
+                } else if (line.startsWith('## ')) {
+                    color = 'green';
+                    bold = true;
+                } else if (line.startsWith('### ')) {
+                    color = 'cyan';
+                    bold = true;
+                } else if (line.startsWith('```')) {
+                    color = 'yellow';
+                } else if (line.startsWith('- ') || line.startsWith('* ')) {
+                    color = 'white';
+                } else if (line.startsWith('>')) {
+                    color = 'gray';
+                }
+
+                return React.createElement(Text, {
+                    key: idx,
+                    color,
+                    bold,
+                    wrap: 'truncate-end'
+                }, line || ' ');
+            })
+        ),
+
+        // Footer
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: 'gray', dimColor: true },
+                'Up/Down Scroll  │  PgUp/PgDn  │  Esc/b Back'
+            )
+        )
+    );
+}
+
+module.exports = DetailView;

package/src/tui/DualPane.js

@@ -0,0 +1,114 @@
+// src/tui/DualPane.js - Dual Column Results Display
+
+const React = require('react');
+const { useState } = React;
+const { Box, Text, useInput } = require('ink');
+const store = require('../store');
+
+function SkillItem({ skill, isSelected, isLocal }) {
+    const hasCache = isLocal && store.getDoc(skill.id) !== null;
+
+    return React.createElement(Box, null,
+        React.createElement(Text, {
+            color: isSelected ? 'cyan' : 'white',
+            bold: isSelected,
+            inverse: isSelected
+        }, isSelected ? ' ▶ ' : '   '),
+        React.createElement(Text, {
+            color: isSelected ? 'cyan' : (isLocal ? 'green' : 'yellow')
+        }, (skill.name || skill.id).slice(0, 25).padEnd(25)),
+        hasCache && React.createElement(Text, { color: 'green' }, ' ✓')
+    );
+}
+
+function DualPane({
+    localSkills,
+    remoteSkills,
+    activePane,      // 'local' or 'remote'
+    localIndex,
+    remoteIndex,
+    onSelect,
+    onPaneChange,
+    isActive
+}) {
+    const visibleCount = 8;
+
+    // Calculate scroll offsets
+    const localOffset = Math.max(0, localIndex - visibleCount + 1);
+    const remoteOffset = Math.max(0, remoteIndex - visibleCount + 1);
+
+    const visibleLocal = localSkills.slice(localOffset, localOffset + visibleCount);
+    const visibleRemote = remoteSkills.slice(remoteOffset, remoteOffset + visibleCount);
+
+    return React.createElement(Box, { flexDirection: 'row', flexGrow: 1 },
+        // Left Pane - Local Skills
+        React.createElement(Box, {
+            flexDirection: 'column',
+            width: '50%',
+            borderStyle: 'single',
+            borderColor: activePane === 'local' ? 'cyan' : 'gray',
+            paddingX: 1
+        },
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, {
+                    bold: true,
+                    color: activePane === 'local' ? 'cyan' : 'white'
+                }, '📚 LOCAL SKILLS'),
+                React.createElement(Text, { color: 'gray' }, ` (${localSkills.length})`)
+            ),
+
+            localSkills.length === 0
+                ? React.createElement(Text, { color: 'gray', dimColor: true }, 'No local skills found')
+                : visibleLocal.map((skill, idx) =>
+                    React.createElement(SkillItem, {
+                        key: skill.id,
+                        skill: skill,
+                        isSelected: activePane === 'local' && (localOffset + idx) === localIndex,
+                        isLocal: true
+                    })
+                ),
+
+            localSkills.length > visibleCount && React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: 'gray', dimColor: true },
+                    `${localIndex + 1}/${localSkills.length}`
+                )
+            )
+        ),
+
+        // Right Pane - Remote Skills
+        React.createElement(Box, {
+            flexDirection: 'column',
+            width: '50%',
+            borderStyle: 'single',
+            borderColor: activePane === 'remote' ? 'cyan' : 'gray',
+            paddingX: 1
+        },
+            React.createElement(Box, { marginBottom: 1 },
+                React.createElement(Text, {
+                    bold: true,
+                    color: activePane === 'remote' ? 'cyan' : 'white'
+                }, '🌐 REMOTE SKILLS'),
+                React.createElement(Text, { color: 'gray' }, ` (${remoteSkills.length})`)
+            ),
+
+            remoteSkills.length === 0
+                ? React.createElement(Text, { color: 'gray', dimColor: true }, 'Search to find remote skills')
+                : visibleRemote.map((skill, idx) =>
+                    React.createElement(SkillItem, {
+                        key: skill.id,
+                        skill: skill,
+                        isSelected: activePane === 'remote' && (remoteOffset + idx) === remoteIndex,
+                        isLocal: false
+                    })
+                ),
+
+            remoteSkills.length > visibleCount && React.createElement(Box, { marginTop: 1 },
+                React.createElement(Text, { color: 'gray', dimColor: true },
+                    `${remoteIndex + 1}/${remoteSkills.length}`
+                )
+            )
+        )
+    );
+}
+
+module.exports = DualPane;

package/src/tui/PrimaryView.js

@@ -0,0 +1,163 @@
+// src/tui/PrimaryView.js - Primary Directory Selection View Component
+
+const React = require('react');
+const { useState, useEffect } = React;
+const { Box, Text, useInput } = require('ink');
+const config = require('../config');
+const theme = require('../theme');
+const { scanForSkillDirectories } = require('../localCrawler');
+
+function PrimaryView({ onBack, onDirChange }) {
+    const [currentDir, setCurrentDir] = useState(config.getPrimaryDirName());
+    const [selectedOption, setSelectedOption] = useState(0);
+    const [message, setMessage] = useState(null);
+    const [availableDirs, setAvailableDirs] = useState(config.getAvailablePrimaryDirs());
+
+    const t = theme.getTheme(); // Get current theme colors
+
+    // Load extra directories found on disk
+    useEffect(() => {
+        let mounted = true;
+
+        const loadDirs = async () => {
+            try {
+                const foundDirs = await scanForSkillDirectories();
+                if (!mounted) return;
+
+                setAvailableDirs(prev => {
+                    const next = [...prev];
+                    const existingKeys = new Set(prev.map(d => d.key));
+                    let changed = false;
+
+                    foundDirs.forEach(dirName => {
+                        // config.js assumes primary dirs start with '.', so we only support those for now
+                        if (!dirName.startsWith('.')) return;
+
+                        const key = dirName.substring(1);
+                        if (!existingKeys.has(key)) {
+                            next.push({
+                                key: key,
+                                name: dirName,
+                                desc: 'Found local directory'
+                            });
+                            changed = true;
+                        }
+                    });
+
+                    return changed ? next : prev;
+                });
+            } catch (err) {
+                // Ignore errors
+            }
+        };
+
+        loadDirs();
+
+        return () => { mounted = false; };
+    }, []);
+
+    // Set initial selection to current directory
+    useEffect(() => {
+        const idx = availableDirs.findIndex(d => d.key === currentDir);
+
+        if (idx >= 0) {
+            setSelectedOption(idx);
+        }
+    }, [currentDir]);
+
+    useInput((input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+
+        if (key.upArrow) {
+            setSelectedOption(Math.max(0, selectedOption - 1));
+        } else if (key.downArrow) {
+            setSelectedOption(Math.min(availableDirs.length - 1, selectedOption + 1));
+        } else if (key.return) {
+            const selected = availableDirs[selectedOption];
+            if (selected.key !== currentDir) {
+                config.setPrimaryDir(selected.key);
+                setCurrentDir(selected.key);
+                setMessage(`✅ Primary directory changed to ${selected.name}`);
+                if (onDirChange) {
+                    onDirChange(selected.key);
+                }
+            } else {
+                setMessage(`Already using ${selected.name} as primary directory.`);
+            }
+        }
+    });
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: t.primary }, '📁 Primary Directory Settings')
+        ),
+
+        // Current directory display
+        React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1
+        },
+            React.createElement(Text, { color: t.textDim },
+                `  Current: ~/${availableDirs.find(d => d.key === currentDir)?.name || '.' + currentDir}`
+            )
+        ),
+
+        // Info box
+        React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1,
+            paddingX: 1
+        },
+            React.createElement(Text, { color: t.textDim },
+                'The primary directory is where synced skills are stored and'
+            ),
+            React.createElement(Text, { color: t.textDim },
+                'displayed first in the local list.'
+            )
+        ),
+
+        // Directory options
+        React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: t.textDim, marginBottom: 1 }, 'Select primary directory:'),
+            availableDirs.map((dirOption, idx) => {
+                const isSelected = idx === selectedOption;
+                const isCurrent = dirOption.key === currentDir;
+
+                return React.createElement(Box, { key: dirOption.key },
+                    React.createElement(Text, {
+                        color: isSelected ? t.selected : t.text,
+                        inverse: isSelected
+                    },
+                        isSelected ? '▶ ' : '  '
+                    ),
+                    React.createElement(Text, {
+                        color: isSelected ? t.selected : t.text,
+                        bold: isSelected
+                    },
+                        dirOption.name.padEnd(16)
+                    ),
+                    React.createElement(Text, { color: t.textDim }, dirOption.desc),
+                    isCurrent && React.createElement(Text, { color: t.success }, ' (current)')
+                );
+            })
+        ),
+
+        // Message
+        message && React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, {
+                color: message.startsWith('✅') ? t.success : t.textDim
+            }, message)
+        ),
+
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: t.textDim, dimColor: true },
+                'Up/Down Navigate  │  Enter Select  │  Esc Back'
+            )
+        )
+    );
+}
+
+module.exports = PrimaryView;