skill-search 0.0.1

package/src/tui/SearchBox.js

@@ -0,0 +1,26 @@
+// src/tui/SearchBox.js - Central Search Input Component
+
+const React = require('react');
+const { Box, Text } = require('ink');
+const TextInput = require('ink-text-input').default;
+
+function SearchBox({ value, onChange, onSubmit, placeholder, isFocused }) {
+    return React.createElement(Box, {
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+        paddingX: 1
+    },
+        React.createElement(Box, { flexGrow: 1 },
+            React.createElement(TextInput, {
+                value: value,
+                onChange: onChange,
+                onSubmit: onSubmit,
+                placeholder: placeholder || 'Type to search...',
+                focus: isFocused
+            })
+        ),
+        React.createElement(Text, { color: 'gray' }, '  [/] Commands  [Esc] Quit')
+    );
+}
+
+module.exports = SearchBox;

package/src/tui/SearchView.js

@@ -0,0 +1,121 @@
+// src/tui/SearchView.js - Search View Component
+
+const React = require('react');
+const { useState, useEffect } = React;
+const { Box, Text, useInput } = require('ink');
+const TextInput = require('ink-text-input').default;
+const { searchSkills } = require('../matcher');
+
+function SearchView({ onSelect, onCancel }) {
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isInputMode, setIsInputMode] = useState(true);
+
+    useEffect(() => {
+        if (query.length >= 2) {
+            performSearch(query);
+        } else {
+            setResults([]);
+        }
+    }, [query]);
+
+    const performSearch = async (q) => {
+        const res = await searchSkills(q);
+        setResults(res);
+        setSelectedIndex(0);
+    };
+
+    useInput((input, key) => {
+        if (key.escape) {
+            if (!isInputMode) {
+                setIsInputMode(true);
+            } else {
+                onCancel();
+            }
+            return;
+        }
+
+        if (!isInputMode) {
+            if (key.upArrow) {
+                setSelectedIndex(Math.max(0, selectedIndex - 1));
+            } else if (key.downArrow) {
+                setSelectedIndex(Math.min(results.length - 1, selectedIndex + 1));
+            } else if (key.return && results.length > 0) {
+                onSelect(results[selectedIndex]);
+            }
+        } else {
+            if (key.downArrow && results.length > 0) {
+                setIsInputMode(false);
+                setSelectedIndex(0);
+            } else if (key.return && results.length > 0) {
+                setIsInputMode(false);
+                setSelectedIndex(0);
+            }
+        }
+    });
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: 'cyan' }, '🔍 Search Skills')
+        ),
+
+        // Search input
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { color: 'gray' }, '> '),
+            React.createElement(TextInput, {
+                value: query,
+                onChange: setQuery,
+                placeholder: 'Type to search...',
+                focus: isInputMode
+            })
+        ),
+
+        // Results
+        results.length > 0 && React.createElement(Box, { flexDirection: 'column' },
+            React.createElement(Text, { color: 'gray', dimColor: true },
+                `Found ${results.length} results:`
+            ),
+            React.createElement(Box, { marginTop: 1, flexDirection: 'column' },
+                results.slice(0, 10).map((skill, idx) => {
+                    const isSelected = !isInputMode && idx === selectedIndex;
+                    const score = Math.round((1 - (skill.score || 0)) * 100);
+
+                    return React.createElement(Box, { key: skill.id },
+                        React.createElement(Text, {
+                            color: isSelected ? 'cyan' : 'white',
+                            inverse: isSelected
+                        },
+                            isSelected ? '▶ ' : '  '
+                        ),
+                        React.createElement(Text, {
+                            color: isSelected ? 'cyan' : 'green'
+                        },
+                            skill.id.padEnd(25)
+                        ),
+                        React.createElement(Text, { color: 'gray' },
+                            (skill.name || '').slice(0, 30)
+                        ),
+                        React.createElement(Text, { color: 'gray', dimColor: true },
+                            ` (${score}%)`
+                        )
+                    );
+                })
+            )
+        ),
+
+        results.length === 0 && query.length >= 2 && React.createElement(
+            Text, { color: 'yellow' }, `No results for "${query}"`
+        ),
+
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: 'gray', dimColor: true },
+                isInputMode
+                    ? 'Down Navigate to results  │  Esc Cancel'
+                    : 'Up/Down Navigate  │  Enter Select  │  Esc Back to input'
+            )
+        )
+    );
+}
+
+module.exports = SearchView;

package/src/tui/SkillList.js

@@ -0,0 +1,102 @@
+// src/tui/SkillList.js - Skills List View Component
+
+const React = require('react');
+const { useState, useEffect } = React;
+const { Box, Text, useInput } = require('ink');
+const { listSkills } = require('../matcher');
+const store = require('../store');
+
+function SkillList({ onSelect }) {
+    const [skills, setSkills] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const visibleCount = 15; // Number of visible items
+
+    useEffect(() => {
+        loadSkills();
+    }, []);
+
+    const loadSkills = async () => {
+        setLoading(true);
+        try {
+            const allSkills = await listSkills();
+            setSkills(allSkills);
+        } catch (err) {
+            setSkills([]);
+        }
+        setLoading(false);
+    };
+
+    useInput((input, key) => {
+        if (skills.length === 0) return;
+
+        if (key.upArrow) {
+            const newIndex = Math.max(0, selectedIndex - 1);
+            setSelectedIndex(newIndex);
+            if (newIndex < scrollOffset) {
+                setScrollOffset(newIndex);
+            }
+        } else if (key.downArrow) {
+            const newIndex = Math.min(skills.length - 1, selectedIndex + 1);
+            setSelectedIndex(newIndex);
+            if (newIndex >= scrollOffset + visibleCount) {
+                setScrollOffset(newIndex - visibleCount + 1);
+            }
+        } else if (key.return) {
+            onSelect(skills[selectedIndex]);
+        }
+    });
+
+    if (loading) {
+        return React.createElement(Box, { flexDirection: 'column' },
+            React.createElement(Text, { color: 'yellow' }, '⏳ Loading skills...')
+        );
+    }
+
+    if (skills.length === 0) {
+        return React.createElement(Box, { flexDirection: 'column' },
+            React.createElement(Text, { color: 'yellow' }, '⚠️  No local data found.'),
+            React.createElement(Text, { color: 'gray' }, 'Press "y" to open Sync view and sync data first.')
+        );
+    }
+
+    const visibleSkills = skills.slice(scrollOffset, scrollOffset + visibleCount);
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: 'cyan' },
+                `📚 Skills (${skills.length} total)`
+            ),
+            scrollOffset > 0 && React.createElement(Text, { color: 'gray' }, ' ▲'),
+            scrollOffset + visibleCount < skills.length && React.createElement(Text, { color: 'gray' }, ' ▼')
+        ),
+
+        visibleSkills.map((skill, idx) => {
+            const actualIndex = scrollOffset + idx;
+            const isSelected = actualIndex === selectedIndex;
+            const hasDoc = store.getDoc(skill.id) !== null;
+
+            return React.createElement(Box, { key: skill.id },
+                React.createElement(Text, {
+                    color: isSelected ? 'cyan' : 'white',
+                    bold: isSelected,
+                    inverse: isSelected
+                },
+                    isSelected ? '▶ ' : '  '
+                ),
+                React.createElement(Text, {
+                    color: isSelected ? 'cyan' : 'green'
+                },
+                    skill.id.padEnd(25)
+                ),
+                React.createElement(Text, { color: 'gray' },
+                    (skill.name || skill.description || '').slice(0, 35)
+                ),
+                hasDoc && React.createElement(Text, { color: 'green' }, ' ✓')
+            );
+        })
+    );
+}
+
+module.exports = SkillList;

package/src/tui/SyncView.js

@@ -0,0 +1,143 @@
+// src/tui/SyncView.js - Sync View Component
+
+const React = require('react');
+const { useState } = React;
+const { Box, Text, useInput } = require('ink');
+const Spinner = require('ink-spinner').default;
+const syncer = require('../syncer');
+
+function SyncView({ onBack }) {
+    const [status, setStatus] = useState(null);
+    const [syncing, setSyncing] = useState(false);
+    const [progress, setProgress] = useState('');
+    const [result, setResult] = useState(null);
+    const [selectedOption, setSelectedOption] = useState(0);
+
+    const options = [
+        { key: 'local', label: 'Sync Local Skills', desc: 'Sync locally found skills to primary directory' },
+        { key: 'remote', label: 'Sync Remote Skills', desc: 'Download all remote skills to primary directory' },
+        { key: 'all', label: 'Sync All', desc: 'Sync both local and remote skills to primary directory' },
+        { key: 'status', label: 'View Status', desc: 'Check sync status' }
+    ];
+
+    React.useEffect(() => {
+        const currentStatus = syncer.getStatus();
+        setStatus(currentStatus);
+    }, []);
+
+    useInput((input, key) => {
+        if (syncing) 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 = async (optionKey) => {
+        setResult(null);
+
+        if (optionKey === 'status') {
+            const s = syncer.getStatus();
+            setStatus(s);
+            setResult(s ? 'Status refreshed' : 'No sync history');
+            return;
+        }
+
+        setSyncing(true);
+        setProgress('Starting sync...');
+
+        try {
+            await syncer.sync({
+                mode: optionKey // 'local', 'remote', 'all'
+            });
+            setResult('✅ Sync completed successfully!');
+            setStatus(syncer.getStatus());
+        } catch (err) {
+            setResult(`❌ Sync failed: ${err.message}`);
+        }
+
+        setSyncing(false);
+        setProgress('');
+    };
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: 'cyan' }, '🔄 Sync Manager')
+        ),
+
+        // Current status
+        status && React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1,
+            marginBottom: 1,
+            // Removed borderStyle
+            // paddingX: 1
+        },
+            // Use dim color for label for consistency
+            React.createElement(Text, { color: 'gray', dimColor: true }, '  📊 Current Status:'),
+            React.createElement(Text, null,
+                `  Last Sync: ${status.lastSync ? new Date(status.lastSync).toLocaleString() : 'Never'}`
+            ),
+            React.createElement(Text, null, `  Total Skills: ${status.totalSkills || 0}`),
+            React.createElement(Text, null, `  Cached Docs: ${status.syncedDocs || 0}`)
+        ),
+
+        !status && React.createElement(Text, { color: 'yellow', marginBottom: 1 },
+            '⚠️  No sync history. Please sync first.'
+        ),
+
+        // Options
+        React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: 'gray', marginBottom: 1 }, 'Select an action:'),
+            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
+                    ),
+                    React.createElement(Text, { color: 'gray' }, ` - ${opt.desc}`)
+                );
+            })
+        ),
+
+        // Progress
+        syncing && React.createElement(Box, { marginTop: 1 },
+            React.createElement(Spinner, { type: 'dots' }),
+            React.createElement(Text, { color: 'yellow' }, ` ${progress}`)
+        ),
+
+        // Result
+        result && React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, {
+                color: result.startsWith('✅') ? 'green' :
+                    result.startsWith('❌') ? 'red' : 'gray'
+            }, result)
+        ),
+
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: 'gray', dimColor: true },
+                'Up/Down Navigate  │  Enter Execute'
+            )
+        )
+    );
+}
+
+module.exports = SyncView;

package/src/tui/ThemeView.js

@@ -0,0 +1,116 @@
+// src/tui/ThemeView.js - Theme Selection View Component
+
+const React = require('react');
+const { useState, useEffect } = React;
+const { Box, Text, useInput } = require('ink');
+const theme = require('../theme');
+
+function ThemeView({ onBack, onThemeChange }) {
+    const [currentTheme, setCurrentTheme] = useState(theme.getThemeName());
+    const [selectedOption, setSelectedOption] = useState(0);
+    const [message, setMessage] = useState(null);
+
+    const availableThemes = theme.getAvailableThemes();
+    const t = theme.getTheme(); // Get current theme colors
+
+    useInput((input, key) => {
+        if (key.escape) {
+            onBack();
+            return;
+        }
+
+        if (key.upArrow) {
+            setSelectedOption(Math.max(0, selectedOption - 1));
+        } else if (key.downArrow) {
+            setSelectedOption(Math.min(availableThemes.length - 1, selectedOption + 1));
+        } else if (key.return) {
+            const selected = availableThemes[selectedOption];
+            if (selected.key !== currentTheme) {
+                theme.setThemeName(selected.key);
+                setCurrentTheme(selected.key);
+                setMessage(`✅ Theme changed to ${selected.name}. Restart for full effect.`);
+                if (onThemeChange) {
+                    onThemeChange(selected.key);
+                }
+            } else {
+                setMessage(`Already using ${selected.name} theme.`);
+            }
+        }
+    });
+
+    return React.createElement(Box, { flexDirection: 'column' },
+        React.createElement(Box, { marginBottom: 1 },
+            React.createElement(Text, { bold: true, color: t.primary }, '🎨 Theme Settings')
+        ),
+
+        // Current theme display
+        React.createElement(Box, {
+            flexDirection: 'column',
+            marginBottom: 1
+        },
+            React.createElement(Text, { color: t.textDim }, `  Current Theme: ${theme.THEMES[currentTheme]?.name || currentTheme}`)
+        ),
+
+        // Theme options
+        React.createElement(Box, { flexDirection: 'column', marginBottom: 1 },
+            React.createElement(Text, { color: t.textDim, marginBottom: 1 }, 'Select a theme:'),
+            availableThemes.map((themeOption, idx) => {
+                const isSelected = idx === selectedOption;
+                const isCurrent = themeOption.key === currentTheme;
+
+                return React.createElement(Box, { key: themeOption.key },
+                    React.createElement(Text, {
+                        color: isSelected ? t.selected : t.text,
+                        inverse: isSelected
+                    },
+                        isSelected ? '▶ ' : '  '
+                    ),
+                    React.createElement(Text, {
+                        color: isSelected ? t.selected : t.text,
+                        bold: isSelected
+                    },
+                        themeOption.name
+                    ),
+                    isCurrent && React.createElement(Text, { color: t.success }, ' (current)')
+                );
+            })
+        ),
+
+        // Preview box
+        React.createElement(Box, {
+            flexDirection: 'column',
+            marginTop: 1,
+            borderStyle: 'single',
+            borderColor: availableThemes[selectedOption]?.key === 'dark' ? 'cyan' : 'blue',
+            paddingX: 1,
+            paddingY: 0
+        },
+            React.createElement(Text, { bold: true }, `Preview: ${availableThemes[selectedOption]?.name} Theme`),
+            React.createElement(Text, {
+                color: availableThemes[selectedOption]?.key === 'dark' ? 'cyan' : 'blue'
+            }, 'Primary Text'),
+            React.createElement(Text, {
+                color: availableThemes[selectedOption]?.key === 'dark' ? 'green' : 'magenta'
+            }, 'Local Highlight'),
+            React.createElement(Text, {
+                color: availableThemes[selectedOption]?.key === 'dark' ? 'yellow' : 'red'
+            }, 'Remote Highlight'),
+            React.createElement(Text, { color: 'gray' }, 'Dimmed Text')
+        ),
+
+        // 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 = ThemeView;

package/src/utils.js

@@ -0,0 +1,83 @@
+const { marked } = require('marked');
+const { markedTerminal } = require('marked-terminal');
+const chalk = require('chalk');
+const clipboardy = require('clipboardy');
+
+// Configure marked with terminal renderer (marked-terminal v6+ API)
+marked.use(markedTerminal({
+    codespan: chalk.yellow,
+    code: chalk.yellow,
+    link: chalk.blue.underline,
+    strong: chalk.bold.cyan,
+    firstHeading: chalk.bold.magenta.underline,
+    heading: chalk.bold.green
+}));
+
+function formatMarkdown(content) {
+    if (!content) return '';
+    try {
+        return marked(content);
+    } catch (err) {
+        console.error(chalk.red('Markdown parsing failed'));
+        return content;
+    }
+}
+
+async function copyToClipboard(content) {
+    try {
+        await clipboardy.write(content);
+        return true;
+    } catch (err) {
+        console.error(chalk.red('Clipboard copy failed: ' + err.message));
+        return false;
+    }
+}
+
+/**
+ * Format byte size
+ */
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+module.exports = {
+    formatMarkdown,
+    copyToClipboard,
+    formatBytes,
+    parseFrontMatter
+};
+
+/**
+ * Parse Front Matter from Markdown
+ */
+function parseFrontMatter(content) {
+    if (!content) return {};
+    const match = content.match(/^---\n([\s\S]*?)\n---/);
+    if (!match) return {};
+
+    const frontMatter = {};
+    const lines = match[1].split('\n');
+
+    lines.forEach(line => {
+        const parts = line.split(':');
+        if (parts.length >= 2) {
+            const key = parts[0].trim();
+            let value = parts.slice(1).join(':').trim();
+            // Remove quotes if present
+            if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+                value = value.slice(1, -1);
+            }
+            frontMatter[key] = value;
+        }
+    });
+
+    return frontMatter;
+}