skill-search 0.0.1

package/src/tui/App.js

@@ -0,0 +1,739 @@
+// src/tui/App.js - Main TUI Application (Force Full Redraw)
+
+const React = require('react');
+const { useState, useEffect, useRef } = React;
+const { Box, Text, useApp, useInput, useStdout } = require('ink');
+const TextInput = require('ink-text-input').default;
+
+const { searchSkills, listSkills } = require('../matcher');
+const api = require('../api');
+const config = require('../config');
+const theme = require('../theme');
+const SyncView = require('./SyncView');
+const ConfigView = require('./ConfigView');
+const ThemeView = require('./ThemeView');
+const PrimaryView = require('./PrimaryView');
+const AddDelView = require('./AddDelView');
+const ActionModal = require('./ActionModal');
+const { performAction } = require('../actions');
+const { exec } = require('child_process');
+const os = require('os');
+
+// Page size for pagination
+const PAGE_SIZE = 20;
+
+// Pixel Art Logo for "SKILL SEARCH" - 8-bit retro style
+// Single line "SKILL SEARCH" with pixel art aesthetic
+const LOGO = [
+    ' \u2588\u2588\u2588 \u2588 \u2588 \u2588 \u2588   \u2588     \u2588\u2588\u2588 \u2588\u2588\u2588 \u2588\u2588\u2588 \u2588\u2588\u2588 \u2588\u2588\u2588 \u2588 \u2588',
+    ' \u2588   \u2588\u2588  \u2588 \u2588   \u2588     \u2588   \u2588   \u2588 \u2588 \u2588 \u2588 \u2588   \u2588 \u2588',
+    ' \u2588\u2588\u2588 \u2588 \u2588 \u2588 \u2588   \u2588     \u2588\u2588\u2588 \u2588\u2588\u2588 \u2588\u2588\u2588 \u2588\u2588  \u2588   \u2588\u2588\u2588',
+    '   \u2588 \u2588 \u2588 \u2588 \u2588   \u2588       \u2588 \u2588   \u2588 \u2588 \u2588 \u2588 \u2588   \u2588 \u2588',
+    ' \u2588\u2588\u2588 \u2588 \u2588 \u2588 \u2588\u2588\u2588 \u2588\u2588\u2588   \u2588\u2588\u2588 \u2588\u2588\u2588 \u2588 \u2588 \u2588 \u2588 \u2588\u2588\u2588 \u2588 \u2588'
+];
+
+const COMMANDS = [
+    { key: 'list', label: '/list', desc: 'Show all local & remote cached skills' },
+    { key: 'refresh', label: '/refresh', desc: 'Force refresh local/remote cache' },
+    { key: 'sync', label: '/sync', desc: 'Sync skills from different places' },
+    { key: 'config', label: '/config', desc: 'Configure Remote API settings' },
+    { key: 'theme', label: '/theme', desc: 'Switch between dark/light themes' },
+    { key: 'adddel', label: '/add&del', desc: 'Manage custom skill paths' },
+    { key: 'primary', label: '/primary', desc: 'Set primary skills directory' },
+    { key: 'quit', label: '/quit', desc: 'Exit' }
+];
+
+function App() {
+    const { exit } = useApp();
+    const { stdout } = useStdout();
+    const renderCount = useRef(0);
+
+    const [mode, setMode] = useState('idle'); // idle, command, search
+    const [query, setQuery] = useState('');
+    const [cmdIdx, setCmdIdx] = useState(0);
+    const [localResults, setLocalResults] = useState([]);
+    const [remoteResults, setRemoteResults] = useState([]);
+    const [selIdx, setSelIdx] = useState(0);
+    const [selLevel, setSelLevel] = useState(2); // 1 = level 1 (provider/repo), 2 = level 2 (skill)
+    const [pane, setPane] = useState('local');
+    const [activeView, setActiveView] = useState(null);
+    const [localPage, setLocalPage] = useState(0);
+    const [remotePage, setRemotePage] = useState(0);
+    const [focusView, setFocusView] = useState('search'); // 'search', 'results'
+    const [currentTheme, setCurrentTheme] = useState(() => theme.getTheme()); // Theme state
+    const [statusMsg, setStatusMsg] = useState(''); // Status feedback message
+    const [termWidth, setTermWidth] = useState(stdout?.columns || 120); // Terminal width for responsiveness
+
+    // Get theme colors helper
+    const t = currentTheme;
+
+    // Clear screen when mode changes to prevent ghosting/afterimage effects
+    const prevModeRef = useRef(mode);
+    useEffect(() => {
+        if (prevModeRef.current !== mode) {
+            // Clear screen: move cursor to top-left and clear entire screen
+            if (stdout && stdout.write) {
+                stdout.write('\x1b[2J\x1b[H');
+            }
+            prevModeRef.current = mode;
+        }
+    }, [mode, stdout]);
+
+    // Open URL or folder using system command
+    const openPath = (path) => {
+        if (!path) return;
+        const platform = os.platform();
+        let cmd;
+        if (platform === 'win32') {
+            cmd = `start "" "${path}"`;
+        } else if (platform === 'darwin') {
+            cmd = `open "${path}"`;
+        } else {
+            cmd = `xdg-open "${path}"`;
+        }
+        exec(cmd, (err) => { if (err) console.error(err); });
+    };
+
+    // Handle input query change
+    const handleChange = (val) => {
+        if (activeView || actionModal) return; // Block input when modal or view is active
+
+        // CRITICAL: Filter out ALL mouse event escape sequences and control characters
+        // These can appear from terminal mouse tracking even if we don't enable it
+        // Patterns: ESC[<...M, ESC[<...m, ESC[M..., and any ESC sequences
+        if (val.includes('\x1b') || val.includes('[<') || /[\x00-\x08\x0b\x0c\x0e-\x1f]/.test(val)) {
+            // Remove all escape sequences
+            let cleanVal = val
+                .replace(/\x1b\[[^a-zA-Z]*[a-zA-Z]/g, '') // ANSI CSI sequences
+                .replace(/\x1b\[<\d+;\d+;\d+[Mm]/g, '')   // SGR mouse events
+                .replace(/\x1b\[M.{3}/g, '')              // Legacy mouse events
+                .replace(/\[\<\d+;\d+;\d+[Mm]/g, '')      // Partial SGR (missing ESC)
+                .replace(/\x1b/g, '')                     // Any remaining ESC
+                .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f]/g, ''); // Control chars except \t\n\r
+
+            if (cleanVal === query || cleanVal === '') return;
+            val = cleanVal;
+        }
+
+        // Filter out pagination and action keys (Shift+O, [, ]) to prevent typing them
+        // AND importantly, prevent switching focus back to search if we are in results
+        if (mode === 'search' && (val.endsWith('[') || val.endsWith(']') || val.endsWith('O'))) {
+            return;
+        }
+
+        setFocusView('search'); // Typing standard characters focuses search
+        setStatusMsg(''); // Clear status on input
+
+        // Filter out pagination and action keys when in search mode
+        if (mode === 'search' && (val.endsWith('[') || val.endsWith(']') || val.endsWith('O'))) {
+            // Don't update query with these characters, they're for actions
+            return;
+        }
+
+        if (val === '/' && query === '') {
+            setMode('command');
+            setQuery('/');
+            setCmdIdx(0);
+        } else if (mode === 'command' && val.startsWith('/')) {
+            setQuery(val);
+        } else if (mode === 'command' && !val.startsWith('/')) {
+            setMode('idle');
+            setQuery(val);
+        } else {
+            setQuery(val);
+            if (val.length >= 2) {
+                setMode('search');
+                doLocalSearch(val); // Only local search real-time
+                // Do NOT clear remote results here, keep them until Enter is pressed
+            } else {
+                setMode('idle');
+                setLocalResults([]);
+                // Do NOT clear remote results even if query is short or empty
+                // This keeps the last search results visible until a new search is triggered
+            }
+        }
+    };
+
+    // Local search - real-time as user types
+    const doLocalSearch = async (q) => {
+        try {
+            const local = await searchSkills(q);
+            const formatted = formatResults(local); // Use shared formatter
+            setLocalResults(formatted);
+        } catch (e) { }
+    };
+    // Remote search - only on Enter
+    const doRemoteSearch = async (q) => {
+        try {
+            const limit = config.getUserConfig().sync.defaultLimit || 20;
+            const res = await api.searchSkills(q, { limit: 100 }); // Fetch more results to support pagination
+            setRemoteResults(res.skills || []);
+        } catch (e) { }
+    };
+
+    const [actionModal, setActionModal] = useState(null); // { item, pane, level }
+
+    const handleAction = async (action, item, param) => {
+        if (action === 'open') {
+            // Re-use existing open logic defined in useInput or refactor it into a shared function
+            // For consistency, let's just use the logic we had.
+            // But the modal expects us to handle it.
+            if (pane === 'local') {
+                if (selLevel === 1 && item.path) {
+                    const providerPath = item.path.split(/[\\/][^\\/]*skill[^\\/]*[\\/]/i)[0];
+                    openPath(providerPath);
+                } else if (selLevel === 2 && item.path) {
+                    openPath(item.path);
+                }
+            } else {
+                const url = item.githubUrl || item.url || '';
+                if (selLevel === 1) {
+                    const match = url.match(/github\.com\/([^\/]+\/[^\/]+)/);
+                    if (match) openPath(`https://github.com/${match[1]}`);
+                } else if (selLevel === 2) {
+                    openPath(url);
+                }
+            }
+            return { success: true };
+        }
+
+        // For other actions (Sync, Move, Delete)
+        // We need 'targetPath' for move. 'param' from modal is the input value.
+
+        const extra = {};
+        if (action === 'move') extra.targetPath = param;
+        if (action === 'sync' && pane === 'remote' && selLevel === 1) {
+            extra.allRemoteSkills = remoteResults;
+        }
+
+        const result = await performAction(action, item, pane, selLevel, extra);
+
+        if (result.success) {
+            // Refresh if needed - but delay it slightly to avoid interfering with modal state
+            if (action === 'delete' || action === 'move' || (action === 'sync' && pane === 'remote')) {
+                // Use setTimeout to ensure the modal result view renders first
+                setTimeout(() => {
+                    listSkills(true).then(skills => {
+                        const results = formatResults(skills);
+                        setLocalResults(results);
+                    }).catch(() => { });
+                }, 100);
+            }
+        }
+        return result;
+    };
+
+
+    useInput((input, key) => {
+        if (activeView || actionModal) return; // Allow sub-views to handle input
+
+        if (key.escape) {
+            if (mode !== 'idle') {
+                setMode('idle');
+                setQuery('');
+                setLocalResults([]);
+                setRemoteResults([]);
+                setFocusView('search'); // Reset focus to search box on idle
+                setStatusMsg('');
+            } else {
+                exit();
+            }
+            return;
+        }
+
+        if (mode === 'command') {
+            const filter = query.slice(1);
+            const cmds = COMMANDS.filter(c => c.key.includes(filter));
+
+            if (key.downArrow) setCmdIdx(Math.min(cmdIdx + 1, cmds.length - 1));
+            if (key.upArrow) setCmdIdx(Math.max(0, cmdIdx - 1));
+
+            if (key.return && cmds[cmdIdx]) {
+                const cmd = cmds[cmdIdx];
+                if (cmd.key === 'quit') exit();
+                if (cmd.key === 'sync') setActiveView('sync');
+                if (cmd.key === 'config') setActiveView('config');
+                if (cmd.key === 'theme') setActiveView('theme');
+                if (cmd.key === 'primary') setActiveView('primary');
+                if (cmd.key === 'adddel') setActiveView('adddel');
+                if (cmd.key === 'refresh') {
+                    listSkills(true).catch(() => { });
+                    setLocalResults([]);
+                    setRemoteResults([]);
+                    setMode('idle');
+                    setQuery('');
+                    setStatusMsg('Refreshed skill cache');
+                }
+                if (cmd.key === 'list') {
+                    // Show all local and cached skills using listSkills
+                    setMode('search');
+                    listSkills().then(skills => {
+                        const results = formatResults(skills);
+                        setLocalResults(results);
+                        setLocalPage(0);
+                    }).catch(() => { });
+                }
+
+                if (cmd.key !== 'list' && cmd.key !== 'add') {
+                    setMode('idle');
+                    setQuery('');
+                } else if (cmd.key === 'list') {
+                    setQuery('');
+                }
+            }
+        }
+
+        if (mode === 'search') {
+            if (key.tab || key.downArrow || key.upArrow || key.leftArrow || key.rightArrow) {
+                setFocusView('results');
+            }
+            if (key.tab) setPane(p => p === 'local' ? 'remote' : 'local');
+
+            // Smart navigation for Level 1: jump between provider groups
+            if (key.downArrow) {
+                if (selLevel === 1 && pane === 'local' && localResults.length > 0) {
+                    // Find next provider group
+                    const currentProvider = localResults[selIdx]?.provider;
+                    let nextIdx = selIdx + 1;
+                    while (nextIdx < localResults.length && localResults[nextIdx].provider === currentProvider) {
+                        nextIdx++;
+                    }
+                    if (nextIdx < localResults.length) {
+                        setSelIdx(nextIdx);
+                        const newPage = Math.floor(nextIdx / PAGE_SIZE);
+                        if (newPage !== localPage) setLocalPage(newPage);
+                    }
+                } else {
+                    setSelIdx(i => i + 1);
+                }
+            }
+            if (key.upArrow) {
+                if (selLevel === 1 && pane === 'local' && localResults.length > 0 && selIdx > 0) {
+                    // Find first item of current provider group
+                    const currentProvider = localResults[selIdx]?.provider;
+                    let firstOfCurrentGroup = selIdx;
+                    while (firstOfCurrentGroup > 0 && localResults[firstOfCurrentGroup - 1].provider === currentProvider) {
+                        firstOfCurrentGroup--;
+                    }
+
+                    if (firstOfCurrentGroup === selIdx && selIdx > 0) {
+                        // Already at first of group, go to first of previous group
+                        const prevProvider = localResults[selIdx - 1]?.provider;
+                        let prevGroupStart = selIdx - 1;
+                        while (prevGroupStart > 0 && localResults[prevGroupStart - 1].provider === prevProvider) {
+                            prevGroupStart--;
+                        }
+                        setSelIdx(prevGroupStart);
+                        const newPage = Math.floor(prevGroupStart / PAGE_SIZE);
+                        if (newPage !== localPage) setLocalPage(newPage);
+                    } else {
+                        // Jump to first of current group
+                        setSelIdx(firstOfCurrentGroup);
+                        const newPage = Math.floor(firstOfCurrentGroup / PAGE_SIZE);
+                        if (newPage !== localPage) setLocalPage(newPage);
+                    }
+                } else {
+                    setSelIdx(i => Math.max(0, i - 1));
+                }
+            }
+            if (key.leftArrow) setSelLevel(1); // Select level 1 (provider/repo)
+            if (key.rightArrow) setSelLevel(2); // Select level 2 (skill)
+            if (key.return) {
+                // Trigger remote search OR open action modal depending on focus
+                if (focusView === 'search') {
+                    if (query.length >= 2) {
+                        doRemoteSearch(query);
+                        setFocusView('results');
+                    }
+                } else if (focusView === 'results') {
+                    // Get selected item
+                    const results = pane === 'local' ? localResults : remoteResults;
+                    const page = pane === 'local' ? localPage : remotePage;
+                    const idx = page * PAGE_SIZE + (selIdx % PAGE_SIZE);
+                    const item = results[idx];
+
+                    if (item) {
+                        setActionModal({ item, pane, level: selLevel });
+                    }
+                }
+            }
+            // Shift+O to open selected item
+            if (input === 'O') {
+                const results = pane === 'local' ? localResults : remoteResults;
+                const page = pane === 'local' ? localPage : remotePage;
+                const idx = page * PAGE_SIZE + (selIdx % PAGE_SIZE);
+                const item = results[idx];
+                if (item) {
+                    if (pane === 'local') {
+                        // Local: open folder
+                        if (selLevel === 1 && item.path) {
+                            // Open provider folder (parent of skills)
+                            const providerPath = item.path.split(/[\\/][^\\/]*skill[^\\/]*[\\/]/i)[0];
+                            openPath(providerPath);
+                        } else if (selLevel === 2 && item.path) {
+                            // Open skill folder
+                            openPath(item.path);
+                        }
+                    } else {
+                        // Remote: open GitHub link
+                        const url = item.githubUrl || item.url || '';
+                        if (selLevel === 1) {
+                            // Open repo main page
+                            const match = url.match(/github\.com\/([^\/]+\/[^\/]+)/);
+                            if (match) openPath(`https://github.com/${match[1]}`);
+                        } else if (selLevel === 2) {
+                            // Open skill page
+                            openPath(url);
+                        }
+                    }
+                }
+            }
+            // Pagination controls: [ and ] for prev/next
+            if (input === '[') {
+                if (pane === 'local') setLocalPage(p => Math.max(0, p - 1));
+                else setRemotePage(p => Math.max(0, p - 1));
+            }
+            if (input === ']') {
+                if (pane === 'local') {
+                    const maxPage = Math.ceil(localResults.length / PAGE_SIZE) - 1;
+                    setLocalPage(p => Math.min(maxPage, p + 1));
+                } else {
+                    const maxPage = Math.ceil(remoteResults.length / PAGE_SIZE) - 1;
+                    setRemotePage(p => Math.min(maxPage, p + 1));
+                }
+            }
+        }
+    });
+
+    const filteredCmds = COMMANDS.filter(c => c.key.includes(query.slice(1)));
+
+    // activeView is now handled inside the main Box return
+    // if (activeView === 'sync') ... removed
+    // if (activeView === 'config') ... removed
+
+    return React.createElement(Box, {
+        flexDirection: 'column',
+        paddingX: 2,
+        paddingY: 1,
+        // Ensure content starts at the top
+        height: '100%',
+        justifyContent: 'flex-start'
+    },
+        // Top Row: Logo + Search Box
+        React.createElement(Box, { flexDirection: 'row', width: '100%', marginBottom: 1, alignItems: 'center' },
+            // Left: Logo
+            React.createElement(Box, { flexDirection: 'column', width: '50%', paddingRight: 1, alignItems: 'center', justifyContent: 'center' },
+                LOGO.map((line, i) =>
+                    React.createElement(Text, { key: i, color: t.logo, bold: true, dimColor: !!actionModal }, line)
+                ),
+                React.createElement(Text, { color: t.logo, bold: true, dimColor: !!actionModal, marginTop: 0 }, '--- SKILL SEARCH ---')
+
+            ),
+            // Right: Search Box
+            React.createElement(Box, { flexDirection: 'column', width: '50%', paddingLeft: 1 },
+                React.createElement(Box, {
+                    borderStyle: 'single',
+                    borderColor: actionModal ? t.textDim : (focusView === 'search' ? t.border : t.borderInactive), // Dynamic border visibility
+                    paddingX: 1,
+                    paddingY: 1,
+                    width: '100%',
+                    flexDirection: 'column',
+                    height: 7
+                },
+                    React.createElement(TextInput, {
+                        value: query,
+                        onChange: handleChange,
+                        placeholder: 'Search...',
+                        focus: !activeView && !actionModal,
+                        showCursor: true
+                    }),
+
+                    React.createElement(Box, { flexGrow: 1 }),
+
+                    React.createElement(Box, {
+                        flexDirection: 'row',
+                        justifyContent: 'space-between'
+                    },
+                        React.createElement(Text, { color: statusMsg ? t.accent : t.textDim, dimColor: focusView !== 'search' || !!actionModal }, statusMsg || 'Search Local/Remote Skills'),
+                        React.createElement(Text, { color: t.textDim, dimColor: focusView !== 'search' || !!actionModal }, '[Esc] Quit')
+                    )
+                ),
+                // Command menu
+                mode === 'command' && React.createElement(Box, {
+                    flexDirection: 'column',
+                    marginTop: 0,
+                    marginLeft: 1
+                },
+                    filteredCmds.map((c, i) => {
+                        const isSelected = i === cmdIdx;
+                        return React.createElement(Text, {
+                            key: c.key,
+                            color: isSelected ? 'black' : t.primary,
+                            backgroundColor: isSelected ? t.bgHighlight : undefined
+                        }, `  ${c.label.padEnd(12)} ${c.desc}`);
+                    })
+                )
+            )
+        ),
+
+
+
+        // Content Area: activeView (Sync/Config) OR Search Results
+        activeView === 'sync' && React.createElement(Box, { marginTop: 1, paddingX: 1, width: '100%' },
+            React.createElement(SyncView, { onBack: () => setActiveView(null) })
+        ),
+
+        activeView === 'config' && React.createElement(Box, { marginTop: 1, paddingX: 1, width: '100%' },
+            React.createElement(ConfigView, { onBack: () => setActiveView(null) })
+        ),
+
+        activeView === 'theme' && React.createElement(Box, { marginTop: 1, paddingX: 1, width: '100%' },
+            React.createElement(ThemeView, {
+                onBack: () => setActiveView(null),
+                onThemeChange: (newTheme) => {
+                    setCurrentTheme(theme.getTheme());
+                    // Force screen redraw
+                    if (stdout && stdout.write) {
+                        stdout.write('\x1b[2J\x1b[H');
+                    }
+                }
+            })
+        ),
+
+        activeView === 'primary' && React.createElement(Box, { marginTop: 1, paddingX: 1, width: '100%' },
+            React.createElement(PrimaryView, {
+                onBack: () => setActiveView(null),
+                onDirChange: (newDir) => {
+                    // Auto-refresh local skills list after changing primary directory
+                    listSkills(true).then(skills => {
+                        const results = formatResults(skills);
+                        setLocalResults(results);
+                        setLocalPage(0);
+                    }).catch(() => { });
+
+                    // Force screen redraw
+                    if (stdout && stdout.write) {
+                        stdout.write('\x1b[2J\x1b[H');
+                    }
+                }
+            })
+        ),
+
+        activeView === 'adddel' && React.createElement(Box, { marginTop: 1, paddingX: 1, width: '100%' },
+            React.createElement(AddDelView, {
+                onBack: () => setActiveView(null),
+                onRefresh: () => {
+                    listSkills(true).then(skills => {
+                        const results = formatResults(skills);
+                        setLocalResults(results);
+                        setLocalPage(0);
+                    }).catch(() => { });
+
+                    // Force refresh
+                    if (stdout && stdout.write) {
+                        stdout.write('\x1b[2J\x1b[H');
+                    }
+                }
+            })
+        ),
+
+        // Search results (only if no active view)
+        !activeView && mode === 'search' && React.createElement(Box, { flexDirection: 'row', marginTop: 1 },
+            // Local Column
+            React.createElement(Box, {
+                flexDirection: 'column',
+                width: '50%',
+                // Removed borderStyle and borderColor to eliminate vertical lines
+            },
+                React.createElement(Box, { justifyContent: 'center', borderStyle: undefined }, // Remove explicit border styling if any inner boxes had it
+                    React.createElement(Text, { bold: true, color: t.localHighlight, dimColor: (focusView !== 'results' || pane !== 'local') || !!actionModal }, 'LOCAL')
+                ),
+                React.createElement(Text, {}, ''),
+                localResults.length === 0
+                    ? React.createElement(Box, { justifyContent: 'center' }, React.createElement(Text, { color: t.textDim }, '(no results)'))
+                    : localResults.slice(localPage * PAGE_SIZE, (localPage + 1) * PAGE_SIZE).map((s, i, arr) => {
+                        const isRowSelected = pane === 'local' && i === selIdx % PAGE_SIZE;
+                        const isLevel1Selected = isRowSelected && selLevel === 1;
+                        const isLevel2Selected = isRowSelected && selLevel === 2;
+                        const dateStr = s.updatedAt ? new Date(s.updatedAt).toISOString().split('T')[0] : '';
+                        const name = s.name || s.id;
+                        const maxLen = 80;
+                        const dispName = name.length > maxLen ? name.slice(0, 38) + '...' + name.slice(-38) : name;
+
+                        // Grouping Logic: Only show provider if different from previous
+                        // OR if this row is selected at Level 1 (so the indicator is visible)
+                        const prev = i > 0 ? arr[i - 1] : null;
+                        const showProvider = i === 0 || (prev && prev.provider !== s.provider) || isLevel1Selected;
+
+                        return React.createElement(Box, { key: s.id + i, flexDirection: 'column' },
+                            showProvider && s.provider && React.createElement(Text, {
+                                color: isLevel1Selected ? t.localHighlight : t.primary, // Theme colors
+                                bold: isLevel1Selected,
+                                dimColor: (!isLevel1Selected && (focusView !== 'results' || pane !== 'local')) || !!actionModal
+                            }, (isLevel1Selected ? '> ' : '  ') + s.provider), // Add prefix indicator
+                            React.createElement(Box, { justifyContent: 'space-between' },
+                                React.createElement(Text, {
+                                    color: isLevel2Selected ? t.text : t.text, // Theme text color
+                                    bold: isLevel2Selected,
+                                    dimColor: (!isLevel2Selected && (focusView !== 'results' || pane !== 'local')) || !!actionModal
+                                }, (isLevel2Selected ? '  > ' : '    ') + dispName), // Add prefix indicator for level 2
+                                React.createElement(Text, { color: t.accent, dimColor: (focusView !== 'results' || pane !== 'local') || !!actionModal }, dateStr)
+                            )
+                        );
+                    }),
+                localResults.length > PAGE_SIZE && React.createElement(Box, { justifyContent: 'flex-end', marginTop: 1, paddingRight: 1 },
+                    React.createElement(Text, { color: t.textDim, dimColor: focusView !== 'results' || pane !== 'local' },
+                        `[Prev]  [${localPage + 1}/${Math.ceil(localResults.length / PAGE_SIZE)}]  [Next]`
+                    )
+                )
+            ),
+            // Remote Column
+            React.createElement(Box, {
+                flexDirection: 'column',
+                width: '50%',
+                paddingLeft: 1,
+                // Removed borderStyle and borderColor to eliminate vertical lines
+            },
+                React.createElement(Box, { justifyContent: 'center' },
+                    React.createElement(Text, { bold: true, color: t.remoteHighlight, dimColor: (focusView !== 'results' || pane !== 'remote') || !!actionModal }, 'REMOTE')
+                ),
+                React.createElement(Text, {}, ''),
+                remoteResults.length === 0
+                    ? React.createElement(Box, { justifyContent: 'center' }, React.createElement(Text, { color: t.textDim }, '(/config before search)'))
+                    : remoteResults.slice(remotePage * PAGE_SIZE, (remotePage + 1) * PAGE_SIZE).map((s, i) => {
+                        const isRowSelected = pane === 'remote' && i === selIdx % PAGE_SIZE;
+                        const isLevel1Selected = isRowSelected && selLevel === 1;
+                        const isLevel2Selected = isRowSelected && selLevel === 2;
+
+                        let level1 = 'GitHub';
+                        let level2 = s.name || s.id;
+                        const url = s.githubUrl || s.url || '';
+                        const ownerRepoMatch = url.match(/github\.com\/([^\/]+\/[^\/]+)/);
+                        const skillMatch = url.match(/\/skills\/([^\/]+)/);
+                        if (ownerRepoMatch) level1 = ownerRepoMatch[1];
+                        if (skillMatch) level2 = skillMatch[1];
+
+                        let dateStr = '';
+                        const timestamp = s.updatedAt || s.updated_at;
+                        if (timestamp) {
+                            const ms = timestamp > 9999999999 ? timestamp : timestamp * 1000;
+                            const d = new Date(ms);
+                            if (!isNaN(d.getTime())) dateStr = d.toISOString().split('T')[0];
+                        }
+                        const starsFormatted = s.stars !== undefined ? s.stars.toLocaleString() + ' \u2605' : '';
+                        const maxLen = 80;
+                        const dispName = level2.length > maxLen ? level2.slice(0, 38) + '...' + level2.slice(-38) : level2;
+
+                        let metaStr = '';
+                        if (starsFormatted && dateStr) {
+                            metaStr = `/ ${starsFormatted} / ${dateStr}`;
+                        } else if (starsFormatted) {
+                            metaStr = `/ ${starsFormatted}`;
+                        } else if (dateStr) {
+                            metaStr = `/ ${dateStr}`;
+                        }
+
+                        return React.createElement(Box, { key: s.id + i, flexDirection: 'column' },
+                            React.createElement(Text, {
+                                color: isLevel1Selected ? t.remoteHighlight : t.primary, // Theme colors
+                                bold: isLevel1Selected,
+                                dimColor: (!isLevel1Selected && (focusView !== 'results' || pane !== 'remote')) || !!actionModal
+                            }, (isLevel1Selected ? '> ' : '  ') + level1), // Add prefix indicator
+                            React.createElement(Box, { justifyContent: 'space-between' },
+                                React.createElement(Text, {
+                                    color: isLevel2Selected ? t.text : t.text, // Theme text color
+                                    bold: isLevel2Selected,
+                                    dimColor: (!isLevel2Selected && (focusView !== 'results' || pane !== 'remote')) || !!actionModal
+                                }, (isLevel2Selected ? '  > ' : '    ') + dispName), // Add prefix indicator for level 2
+                                React.createElement(Text, { color: t.accent, dimColor: (focusView !== 'results' || pane !== 'remote') || !!actionModal }, metaStr)
+                            )
+                        );
+                    }),
+                remoteResults.length > PAGE_SIZE && React.createElement(Box, { justifyContent: 'flex-end', marginTop: 1 },
+                    React.createElement(Text, { color: t.textDim },
+                        `[Prev]  [${remotePage + 1}/${Math.ceil(remoteResults.length / PAGE_SIZE)}]  [Next]`
+                    )
+                )
+            )
+        ),
+
+        !activeView && mode === 'search' && React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: t.primary, dimColor: !!actionModal }, 'Tab/Arrows: select  /  L/R: level  /  Enter: action  /  Shift+O: open  /  ][: page  /  Esc: back')
+        ),
+
+        actionModal && React.createElement(Box, {
+            key: 'action-modal',
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 99
+        },
+            React.createElement(ActionModal, {
+                item: actionModal.item,
+                pane: actionModal.pane,
+                level: actionModal.level,
+                onAction: handleAction,
+                onClose: () => setActionModal(null)
+            })
+        )
+    );
+}
+
+// Helper to format results for display
+function formatResults(skills) {
+    let results = skills || [];
+    const primaryDirName = '.' + config.getPrimaryDirName();
+
+    results = results.map(s => {
+        const isPrimary = s.path && s.path.includes(primaryDirName);
+
+        // Custom Path Logic: Check source or other indicators
+        if (s.source === 'custom_path' && s.path) {
+            const parts = s.path.split(/[\\/]/).filter(Boolean);
+            if (parts.length >= 3) {
+                // e.g. .../antigravity/skills/skill-name
+                // skill-name is the skill folder
+                // parent is 'skills'
+                // grandparent is 'antigravity'
+                // We want provider to be 'antigravity/skills'
+                const parent = parts[parts.length - 2];
+                const grantParent = parts[parts.length - 3];
+                return {
+                    ...s,
+                    provider: `${grantParent}/${parent}`,
+                    name: s.path.split(/[\\/]/).pop(),
+                    updatedAt: s.updatedAt || s.syncedAt
+                };
+            }
+        }
+
+        return {
+            ...s,
+            provider: isPrimary ? primaryDirName : s.provider,
+            name: s.path ? s.path.split(/[\\/]/).pop() : (s.name || s.id),
+            updatedAt: s.updatedAt || s.syncedAt
+        };
+    });
+
+    results.sort((a, b) => {
+        const aIsPrimary = a.path && a.path.includes(primaryDirName);
+        const bIsPrimary = b.path && b.path.includes(primaryDirName);
+        if (aIsPrimary && !bIsPrimary) return -1;
+        if (!aIsPrimary && bIsPrimary) return 1;
+
+        const pA = (a.provider || '').toLowerCase();
+        const pB = (b.provider || '').toLowerCase();
+        if (pA < pB) return -1;
+        if (pA > pB) return 1;
+
+        const nA = (a.name || '').toLowerCase();
+        const nB = (b.name || '').toLowerCase();
+        return nA < nB ? -1 : 1;
+    });
+
+    return results;
+}
+
+module.exports = App;